Colors style cleanup, better colors.
This commit is contained in:
Leo Vasanko
@@ -1,4 +1,4 @@
|
||||
/* Color tokens */
|
||||
/* Light mode & common */
|
||||
:root {
|
||||
--panel: #ffffff;
|
||||
--panel-alt: #f6f8fa;
|
||||
@@ -8,19 +8,17 @@
|
||||
--strong: #000;
|
||||
--muted: #6a6f76;
|
||||
--muted-alt: #9aa2ad;
|
||||
--accent: #2563eb; /* blue */
|
||||
--accent: #2563eb;
|
||||
--accent-soft: #dbeafe;
|
||||
--accent-hover: #1d4ed8;
|
||||
--danger: #dc2626;
|
||||
--danger-hover: #b91c1c;
|
||||
--weekend: #888;
|
||||
--weekend: #555;
|
||||
--firstday: #000;
|
||||
--select: #aaf;
|
||||
--shadow: #fff;
|
||||
--label-bg: #fafbfe;
|
||||
--label-bg-rgb: 250, 251, 254;
|
||||
|
||||
/* Holiday colors */
|
||||
--holiday: #da0;
|
||||
--holiday-label: var(--strong);
|
||||
|
||||
@@ -40,71 +38,6 @@
|
||||
--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) {
|
||||
:root {
|
||||
--panel: #121417;
|
||||
@@ -141,67 +74,61 @@
|
||||
/* Holiday colors (dark mode) */
|
||||
--holiday: #ffc107;
|
||||
--holiday-label: #fff8e1;
|
||||
}
|
||||
|
||||
.dec {
|
||||
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%);
|
||||
}
|
||||
--weekend: #aaa;
|
||||
|
||||
.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