feat: ✨ overhaul color palettes
This commit is contained in:
Sebin Nyshkim
parent
baf90e0f9f
commit
bbf08a98cd
4 changed files with 91 additions and 64 deletions
|
|
@ -94,7 +94,7 @@
|
|||
background-color: var(--clr-nav-background);
|
||||
|
||||
margin: 0;
|
||||
border: var(--border-thin) solid var(--clr-box-border);
|
||||
border: var(--border-thin) solid var(--clr-nav-border);
|
||||
border-block-start: none;
|
||||
border-inline-end: none;
|
||||
border-end-start-radius: 0.75em;
|
||||
|
|
@ -135,12 +135,12 @@
|
|||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-nav-link-hover, #888);
|
||||
color: var(--clr-nav-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& .link-active {
|
||||
color: var(--clr-nav-link-active, red);
|
||||
color: var(--clr-nav-link-active);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
|
||||
oklch(from var(--clr-box-background) l c h) 50%
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
box-shadow: 0em 1em 1.875em var(--clr-box-shadow);
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
||||
margin-block: 1em;
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
|
||||
oklch(from var(--clr-box-background) l c h) 50%
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,81 @@
|
|||
/* theme colors */
|
||||
:root {
|
||||
--theme-c-night: oklch(0.19 0.0081 274.48);
|
||||
--theme-c-eerie-black: oklch(0.23 0.0116 274.38);
|
||||
--theme-c-raisin-black: oklch(0.27 0.0148 274.31);
|
||||
--theme-c-gunmetal: oklch(0.31 0.0179 274.27);
|
||||
--theme-c-onyx: oklch(0.35 0.0209 274.23);
|
||||
--base-luminance: 20%;
|
||||
--base-chroma: 0.01;
|
||||
--base-hue: 275deg;
|
||||
|
||||
--theme-c-text-light: oklch(0.26 0.0381 19.99);
|
||||
--theme-c-text-dark: oklch(0.95 0.0234 69.6);
|
||||
--theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
|
||||
|
||||
--theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
|
||||
--theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
|
||||
--theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
|
||||
--theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
|
||||
--theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
|
||||
--theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
|
||||
--theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
|
||||
--theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
|
||||
--theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
|
||||
--theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
|
||||
--theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
|
||||
--theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
|
||||
--theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
|
||||
--theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
|
||||
--theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
|
||||
--theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
|
||||
--theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
|
||||
--theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
|
||||
--theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--clr-page-background: oklch(from var(--theme-c-night) calc(l * 4.75) c h);
|
||||
--clr-text: var(--theme-c-text-light);
|
||||
--clr-page-background: var(--theme-c-primary-100);
|
||||
--clr-text: var(--theme-c-primary-900);
|
||||
|
||||
--clr-nav-background: oklch(from var(--theme-c-raisin-black) calc(l * 2.75) c h);
|
||||
--clr-nav-background: var(--theme-c-primary-200);
|
||||
--clr-nav-border: var(--theme-c-primary-250);
|
||||
--clr-nav-link-hover: var(--theme-c-primary-400);
|
||||
|
||||
--clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
|
||||
--clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
|
||||
--clr-box-shadow: oklch(from var(--theme-c-night) calc(l * 4) c h);
|
||||
--clr-box-background: var(--theme-c-primary-150);
|
||||
--clr-box-border: var(--theme-c-primary-250);
|
||||
--clr-box-shadow: var(--theme-c-primary-200);
|
||||
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
|
||||
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
|
||||
|
||||
--clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
|
||||
--clr-color-box-background: var(--theme-c-primary-200);
|
||||
|
||||
--clr-quick-info-bg-start: oklch(from var(--theme-c-raisin-black) calc(l * 3.35) c h);
|
||||
--clr-quick-info-bg-end: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
|
||||
--clr-quick-info-bg-start: var(--theme-c-primary-100);
|
||||
--clr-quick-info-bg-end: var(--theme-c-primary-150);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--clr-page-background: var(--theme-c-night);
|
||||
--clr-text: var(--theme-c-text-dark);
|
||||
--clr-page-background: var(--theme-c-primary-850);
|
||||
--clr-text: var(--theme-c-primary-100);
|
||||
|
||||
--clr-nav-background: var(--theme-c-raisin-black);
|
||||
--clr-nav-background: var(--theme-c-primary-700);
|
||||
--clr-nav-border: var(--theme-c-primary-650);
|
||||
--clr-nav-link-hover: var(--theme-c-primary-500);
|
||||
|
||||
--clr-box-background: var(--theme-c-eerie-black);
|
||||
--clr-box-border: var(--theme-c-onyx);
|
||||
--clr-box-shadow: var(--theme-c-night);
|
||||
--clr-box-background: var(--theme-c-primary-750);
|
||||
--clr-box-border: var(--theme-c-primary-700);
|
||||
--clr-box-shadow: var(--theme-c-primary-800);
|
||||
|
||||
--clr-color-box-background: var(--theme-c-gunmetal);
|
||||
--clr-color-box-background: var(--theme-c-primary-700);
|
||||
|
||||
--clr-quick-info-bg-start: var(--theme-c-raisin-black);
|
||||
--clr-quick-info-bg-end: var(--theme-c-eerie-black);
|
||||
--clr-quick-info-bg-start: var(--theme-c-primary-700);
|
||||
--clr-quick-info-bg-end: var(--theme-c-primary-750);
|
||||
}
|
||||
}
|
||||
|
||||
.sebin {
|
||||
--clr-accent-1: oklch(0.58 0.1607 32.69); /* scales */
|
||||
--clr-accent-2: oklch(0.78 0.1261 68.88); /* chest */
|
||||
--clr-accent-3: oklch(0.49 0.08 265.23); /* hair */
|
||||
--clr-accent-4: oklch(0.71 0.2289 141.29); /* eyes */
|
||||
--clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
|
||||
--clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */
|
||||
--clr-accent-1: oklch(58% 0.16 33deg); /* scales */
|
||||
--clr-accent-2: oklch(78% 0.13 68deg); /* chest */
|
||||
--clr-accent-3: oklch(49% 0.08 265deg); /* hair */
|
||||
--clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
|
||||
--clr-accent-5: oklch(36% 0.01 17deg); /* horns */
|
||||
--clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
|
||||
|
||||
--clr-selection: var(--clr-accent-1);
|
||||
--clr-selection-text: var(--theme-c-text-dark);
|
||||
--clr-selection-text: var(--theme-c-primary-100);
|
||||
--clr-nav-link-active: var(--clr-accent-1);
|
||||
--clr-heading-underline: var(--clr-accent-1);
|
||||
--clr-heading-data: var(--clr-accent-1);
|
||||
|
|
@ -62,36 +85,40 @@
|
|||
}
|
||||
|
||||
.viktor {
|
||||
--clr-accent-1: oklch(0.95 0.0234 69.6);
|
||||
--clr-accent-2: oklch(0.85 0.0471 56.52);
|
||||
--clr-accent-3: oklch(0.35 0.0365 50.88);
|
||||
--clr-accent-4: oklch(0.3 0.0477 22.3);
|
||||
--clr-accent-5: oklch(0.26 0.0381 19.99);
|
||||
--clr-accent-6: oklch(0.9 0.0705 199.31);
|
||||
--clr-accent-7: oklch(0.75 0.0912 228.1);
|
||||
--clr-accent-8: oklch(0.71 0.0848 236.58);
|
||||
--clr-accent-9: oklch(0.4 0.0437 228.49);
|
||||
--clr-accent-1: oklch(85% 0.04 56deg); /* front */
|
||||
--clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
|
||||
--clr-accent-3: oklch(30% 0.04 22deg); /* back main */
|
||||
--clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
|
||||
--clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
|
||||
--clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
|
||||
--clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
|
||||
--clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
|
||||
|
||||
--clr-selection: var(--clr-accent-7);
|
||||
--clr-selection-text: var(--theme-c-text-dark);
|
||||
--clr-nav-link-active: var(--clr-accent-7);
|
||||
--clr-heading-underline: var(--clr-accent-7);
|
||||
--clr-heading-data: var(--clr-accent-7);
|
||||
--clr-link: var(--clr-accent-7);
|
||||
--clr-link-underline: var(--clr-accent-7);
|
||||
--clr-timeline-stroke: var(--clr-accent-7);
|
||||
--clr-gallery-indicator: var(--clr-accent-7);
|
||||
--clr-selection: var(--clr-accent-8);
|
||||
--clr-selection-text: var(--theme-c-primary-100);
|
||||
--clr-nav-link-active: var(--clr-accent-8);
|
||||
--clr-heading-underline: var(--clr-accent-8);
|
||||
--clr-heading-data: var(--clr-accent-8);
|
||||
--clr-link: var(--clr-accent-8);
|
||||
--clr-link-underline: var(--clr-accent-8);
|
||||
--clr-timeline-stroke: var(--clr-accent-8);
|
||||
--clr-gallery-indicator: var(--clr-accent-8);
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
|
||||
}
|
||||
}
|
||||
|
||||
.jarek {
|
||||
--clr-accent-1: oklch(0.69 0.11 71.52);
|
||||
--clr-accent-2: oklch(0.56 0.1 98.83);
|
||||
--clr-accent-3: oklch(0.76 0.03 112.98);
|
||||
--clr-accent-4: oklch(0.81 0.07 74.77);
|
||||
--clr-accent-5: oklch(0.69 0.12 95.34);
|
||||
--clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
|
||||
--clr-accent-2: oklch(56% 0.1 98deg); /* mane */
|
||||
--clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
|
||||
--clr-accent-4: oklch(81% 0.07 74deg); /* horn */
|
||||
--clr-accent-5: oklch(84% 0.07 111deg); /* trii */
|
||||
--clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
|
||||
|
||||
--clr-selection: var(--clr-accent-1);
|
||||
--clr-selection-text: var(--theme-c-text-dark);
|
||||
--clr-selection-text: var(--theme-c-primary-100);
|
||||
--clr-nav-link-active: var(--clr-accent-1);
|
||||
--clr-heading-underline: var(--clr-accent-1);
|
||||
--clr-heading-data: var(--clr-accent-1);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue