Colors style cleanup, better colors.
This commit is contained in:
Leo Vasanko
@@ -1,4 +1,4 @@
|
|||||||
/* Color tokens */
|
/* Light mode & common */
|
||||||
:root {
|
:root {
|
||||||
--panel: #ffffff;
|
--panel: #ffffff;
|
||||||
--panel-alt: #f6f8fa;
|
--panel-alt: #f6f8fa;
|
||||||
@@ -8,19 +8,17 @@
|
|||||||
--strong: #000;
|
--strong: #000;
|
||||||
--muted: #6a6f76;
|
--muted: #6a6f76;
|
||||||
--muted-alt: #9aa2ad;
|
--muted-alt: #9aa2ad;
|
||||||
--accent: #2563eb; /* blue */
|
--accent: #2563eb;
|
||||||
--accent-soft: #dbeafe;
|
--accent-soft: #dbeafe;
|
||||||
--accent-hover: #1d4ed8;
|
--accent-hover: #1d4ed8;
|
||||||
--danger: #dc2626;
|
--danger: #dc2626;
|
||||||
--danger-hover: #b91c1c;
|
--danger-hover: #b91c1c;
|
||||||
--weekend: #888;
|
--weekend: #555;
|
||||||
--firstday: #000;
|
--firstday: #000;
|
||||||
--select: #aaf;
|
--select: #aaf;
|
||||||
--shadow: #fff;
|
--shadow: #fff;
|
||||||
--label-bg: #fafbfe;
|
--label-bg: #fafbfe;
|
||||||
--label-bg-rgb: 250, 251, 254;
|
--label-bg-rgb: 250, 251, 254;
|
||||||
|
|
||||||
/* Holiday colors */
|
|
||||||
--holiday: #da0;
|
--holiday: #da0;
|
||||||
--holiday-label: var(--strong);
|
--holiday-label: var(--strong);
|
||||||
|
|
||||||
@@ -40,71 +38,6 @@
|
|||||||
--event-alpha: 0.7;
|
--event-alpha: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Month tints (light) */
|
|
||||||
.dec {
|
|
||||||
background: hsl(220 50% 95%);
|
|
||||||
}
|
|
||||||
.jan {
|
|
||||||
background: hsl(220 50% 92%);
|
|
||||||
}
|
|
||||||
.feb {
|
|
||||||
background: hsl(220 50% 95%);
|
|
||||||
}
|
|
||||||
.mar {
|
|
||||||
background: hsl(125 60% 92%);
|
|
||||||
}
|
|
||||||
.apr {
|
|
||||||
background: hsl(125 60% 95%);
|
|
||||||
}
|
|
||||||
.may {
|
|
||||||
background: hsl(125 60% 92%);
|
|
||||||
}
|
|
||||||
.jun {
|
|
||||||
background: hsl(45 85% 95%);
|
|
||||||
}
|
|
||||||
.jul {
|
|
||||||
background: hsl(45 85% 92%);
|
|
||||||
}
|
|
||||||
.aug {
|
|
||||||
background: hsl(45 85% 95%);
|
|
||||||
}
|
|
||||||
.sep {
|
|
||||||
background: hsl(18 78% 92%);
|
|
||||||
}
|
|
||||||
.oct {
|
|
||||||
background: hsl(18 78% 95%);
|
|
||||||
}
|
|
||||||
.nov {
|
|
||||||
background: hsl(18 78% 92%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Light mode — gray shades and colors */
|
|
||||||
.event-color-0 {
|
|
||||||
background: hsla(0, 0%, 85%, var(--event-alpha));
|
|
||||||
} /* lightest grey */
|
|
||||||
.event-color-1 {
|
|
||||||
background: hsla(0, 0%, 75%, var(--event-alpha));
|
|
||||||
} /* light grey */
|
|
||||||
.event-color-2 {
|
|
||||||
background: hsla(0, 0%, 65%, var(--event-alpha));
|
|
||||||
} /* medium grey */
|
|
||||||
.event-color-3 {
|
|
||||||
background: hsla(0, 0%, 55%, var(--event-alpha));
|
|
||||||
} /* dark grey */
|
|
||||||
.event-color-4 {
|
|
||||||
background: hsla(0, 70%, 70%, var(--event-alpha));
|
|
||||||
} /* red */
|
|
||||||
.event-color-5 {
|
|
||||||
background: hsla(90, 70%, 70%, var(--event-alpha));
|
|
||||||
} /* green */
|
|
||||||
.event-color-6 {
|
|
||||||
background: hsla(230, 70%, 70%, var(--event-alpha));
|
|
||||||
} /* blue */
|
|
||||||
.event-color-7 {
|
|
||||||
background: hsla(280, 70%, 70%, var(--event-alpha));
|
|
||||||
} /* purple */
|
|
||||||
|
|
||||||
/* Color tokens (dark) */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--panel: #121417;
|
--panel: #121417;
|
||||||
@@ -141,67 +74,61 @@
|
|||||||
/* Holiday colors (dark mode) */
|
/* Holiday colors (dark mode) */
|
||||||
--holiday: #ffc107;
|
--holiday: #ffc107;
|
||||||
--holiday-label: #fff8e1;
|
--holiday-label: #fff8e1;
|
||||||
}
|
|
||||||
|
|
||||||
.dec {
|
--weekend: #aaa;
|
||||||
background: hsl(220 50% 8%);
|
|
||||||
}
|
|
||||||
.jan {
|
|
||||||
background: hsl(220 50% 6%);
|
|
||||||
}
|
|
||||||
.feb {
|
|
||||||
background: hsl(220 50% 8%);
|
|
||||||
}
|
|
||||||
.mar {
|
|
||||||
background: hsl(125 60% 6%);
|
|
||||||
}
|
|
||||||
.apr {
|
|
||||||
background: hsl(125 60% 8%);
|
|
||||||
}
|
|
||||||
.may {
|
|
||||||
background: hsl(125 60% 6%);
|
|
||||||
}
|
|
||||||
.jun {
|
|
||||||
background: hsl(45 85% 8%);
|
|
||||||
}
|
|
||||||
.jul {
|
|
||||||
background: hsl(45 85% 6%);
|
|
||||||
}
|
|
||||||
.aug {
|
|
||||||
background: hsl(45 85% 8%);
|
|
||||||
}
|
|
||||||
.sep {
|
|
||||||
background: hsl(18 78% 6%);
|
|
||||||
}
|
|
||||||
.oct {
|
|
||||||
background: hsl(18 78% 8%);
|
|
||||||
}
|
|
||||||
.nov {
|
|
||||||
background: hsl(18 78% 6%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-color-0 {
|
}
|
||||||
background: hsla(0, 0%, 50%, var(--event-alpha));
|
|
||||||
} /* lightest grey */
|
|
||||||
.event-color-1 {
|
|
||||||
background: hsla(0, 0%, 40%, var(--event-alpha));
|
|
||||||
} /* light grey */
|
|
||||||
.event-color-2 {
|
|
||||||
background: hsla(0, 0%, 30%, var(--event-alpha));
|
|
||||||
} /* medium grey */
|
|
||||||
.event-color-3 {
|
|
||||||
background: hsla(0, 0%, 20%, var(--event-alpha));
|
|
||||||
} /* dark grey */
|
|
||||||
.event-color-4 {
|
|
||||||
background: hsla(0, 70%, 40%, var(--event-alpha));
|
|
||||||
} /* red */
|
|
||||||
.event-color-5 {
|
|
||||||
background: hsla(90, 70%, 30%, var(--event-alpha));
|
|
||||||
} /* green - darker for perceptional purposes */
|
|
||||||
.event-color-6 {
|
|
||||||
background: hsla(230, 70%, 40%, var(--event-alpha));
|
|
||||||
} /* blue */
|
|
||||||
.event-color-7 {
|
|
||||||
background: hsla(280, 70%, 40%, var(--event-alpha));
|
|
||||||
} /* purple */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Month tints (light) */
|
||||||
|
.dec { background: hsl(220 50% 77%) }
|
||||||
|
.jan { background: hsl(220 50% 60%) }
|
||||||
|
.feb { background: hsl(220 50% 77%) }
|
||||||
|
.mar { background: hsl(130 40% 85%) }
|
||||||
|
.apr { background: hsl(130 65% 75%) }
|
||||||
|
.may { background: hsl(130 80% 65%) }
|
||||||
|
.jun { background: hsl(50 85% 70%) }
|
||||||
|
.jul { background: hsl(50 85% 85%) }
|
||||||
|
.aug { background: hsl(50 85% 70%) }
|
||||||
|
.sep { background: hsl(22 100% 75%) }
|
||||||
|
.oct { background: hsl(22 40% 65%) }
|
||||||
|
.nov { background: hsl(22 15% 55%) }
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dec { background: hsl(220 50% 10%) }
|
||||||
|
.jan { background: hsl(220 50% 4%) }
|
||||||
|
.feb { background: hsl(220 50% 10%) }
|
||||||
|
.mar { background: hsl(130 60% 3%) }
|
||||||
|
.apr { background: hsl(130 60% 6%) }
|
||||||
|
.may { background: hsl(130 60% 10%) }
|
||||||
|
.jun { background: hsl(50 85% 8%) }
|
||||||
|
.jul { background: hsl(50 85% 12%) }
|
||||||
|
.aug { background: hsl(50 85% 8%) }
|
||||||
|
.sep { background: hsl(22 100% 10%) }
|
||||||
|
.oct { background: hsl(22 90% 6%) }
|
||||||
|
.nov { background: hsl(22 80% 3%) }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light mode — gray shades and colors */
|
||||||
|
.event-color-0 { background: hsla(0, 0%, 85%, var(--event-alpha)); } /* lightest grey */
|
||||||
|
.event-color-1 { background: hsla(0, 0%, 75%, var(--event-alpha)); } /* light grey */
|
||||||
|
.event-color-2 { background: hsla(0, 0%, 65%, var(--event-alpha)); } /* medium grey */
|
||||||
|
.event-color-3 { background: hsla(0, 0%, 55%, var(--event-alpha)); } /* dark grey */
|
||||||
|
.event-color-4 { background: hsla(0, 100%, 70%, var(--event-alpha)); } /* red */
|
||||||
|
.event-color-5 { background: hsla(90, 100%, 50%, var(--event-alpha)); } /* green - darker for perceptional purposes */
|
||||||
|
.event-color-6 { background: hsla(220, 100%, 70%, var(--event-alpha)); } /* blue */
|
||||||
|
.event-color-7 { background: hsla(280, 100%, 70%, var(--event-alpha)); } /* purple */
|
||||||
|
|
||||||
|
/* Dark-mode event colors are grouped right after the light-mode equivalents */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.event-color-0 { background: hsla(0, 0%, 50%, var(--event-alpha)); } /* lightest grey */
|
||||||
|
.event-color-1 { background: hsla(0, 0%, 40%, var(--event-alpha)); } /* light grey */
|
||||||
|
.event-color-2 { background: hsla(0, 0%, 30%, var(--event-alpha)); } /* medium grey */
|
||||||
|
.event-color-3 { background: hsla(0, 0%, 20%, var(--event-alpha)); } /* dark grey */
|
||||||
|
.event-color-4 { background: hsla(0, 80%, 40%, var(--event-alpha)); } /* red */
|
||||||
|
.event-color-5 { background: hsla(90, 80%, 30%, var(--event-alpha)); } /* green - darker for perceptional purposes */
|
||||||
|
.event-color-6 { background: hsla(220, 80%, 40%, var(--event-alpha)); } /* blue */
|
||||||
|
.event-color-7 { background: hsla(280, 80%, 40%, var(--event-alpha)); } /* purple */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user