first commit
This commit is contained in:
112
src/styles/base/colors.css
Normal file
112
src/styles/base/colors.css
Normal file
@@ -0,0 +1,112 @@
|
||||
:root {
|
||||
/* === PALETTE === */
|
||||
|
||||
/* == Ink == */
|
||||
--color-palette-black-ink: oklch(21.9% 0.006 286deg);
|
||||
--color-palette-charcoal: oklch(26.6% 0.008 240deg);
|
||||
--color-palette-slate: oklch(33.7% 0.019 267deg);
|
||||
--color-palette-graphite: oklch(40% 0.005 89deg);
|
||||
|
||||
/* == Stock == */
|
||||
--color-palette-ash: oklch(51% 0.008 85deg);
|
||||
--color-palette-stone: oklch(64% 0.01 84deg);
|
||||
--color-palette-sand: oklch(74% 0.01 83deg);
|
||||
--color-palette-bone: oklch(83% 0.01 82deg);
|
||||
--color-palette-parchment: oklch(89% 0.009 82deg);
|
||||
--color-palette-stock: oklch(94.5% 0.008 83deg);
|
||||
--color-palette-cream: oklch(97% 0.006 84deg);
|
||||
--color-palette-paper: oklch(98.8% 0.005 85deg);
|
||||
|
||||
/* == Accents == */
|
||||
--color-palette-lava: oklch(63.6% 0.193 17.075deg);
|
||||
--color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
|
||||
--color-palette-bright-canary: oklch(89% 0.157 97.726deg);
|
||||
--color-palette-cerise: oklch(60.7% 0.23 18.554deg);
|
||||
--color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
|
||||
--color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
|
||||
--color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
|
||||
|
||||
/* === SEMANTICS === */
|
||||
|
||||
/* == Roles == */
|
||||
--color-primary: var(--color-palette-lava);
|
||||
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
||||
--color-secondary: var(--color-palette-lime-green);
|
||||
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
|
||||
--color-tertiary: var(--color-palette-bright-canary);
|
||||
--color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
|
||||
|
||||
/* == Text == */
|
||||
--color-text-primary: var(--color-palette-black-ink);
|
||||
--color-text-secondary: var(--color-palette-charcoal);
|
||||
--color-text-tertiary: var(--color-palette-slate);
|
||||
--color-text-quarternary: var(--color-palette-graphite);
|
||||
--color-text-quiet: var(--color-palette-ash);
|
||||
--color-text-disabled: var(--color-palette-stone);
|
||||
--color-text-inverse: var(--color-palette-paper);
|
||||
|
||||
/* == Surfaces == */
|
||||
--color-surface-base: var(--color-palette-stock);
|
||||
--color-surface-elevated-1: var(--color-palette-paper);
|
||||
--color-surface-elevated-2: var(--color-palette-cream);
|
||||
--color-surface-elevated-3: var(--color-palette-parchment);
|
||||
--color-surface-inverse: var(--color-palette-black-ink);
|
||||
--color-surface-selected: var(--color-palette-paper);
|
||||
--color-surface-hover: var(--color-palette-cream);
|
||||
|
||||
/* == Borders == */
|
||||
--color-border-hairline: var(--color-palette-parchment);
|
||||
--color-border-subtle: var(--color-palette-bone);
|
||||
--color-border-normal: var(--color-palette-sand);
|
||||
--color-border-strong: var(--color-palette-black-ink);
|
||||
|
||||
/* == States == */
|
||||
--color-state-error: var(--color-palette-cerise);
|
||||
--color-state-warning: var(--color-palette-persimmon);
|
||||
--color-state-success: var(--color-palette-lime-green);
|
||||
--color-state-info: var(--color-palette-royal-blue);
|
||||
|
||||
/* == Links == */
|
||||
--color-text-link: var(--color-primary);
|
||||
--color-text-link-hover: var(--color-primary-emphasis);
|
||||
--color-text-link-visited: var(--color-palette-fuchsia);
|
||||
|
||||
/* == Focus == */
|
||||
--color-focus-ring: var(--color-primary);
|
||||
|
||||
/* == Apparatus == */
|
||||
--color-unfilled-block: var(--color-palette-sand);
|
||||
--color-unfilled-line: var(--color-palette-bone);
|
||||
--color-plate: var(--color-palette-stone);
|
||||
--color-rule: var(--color-palette-bone);
|
||||
--color-rule-strong: var(--color-palette-black-ink);
|
||||
|
||||
/* == Dice & Receipts == */
|
||||
--color-dice-surface: var(--color-surface-inverse);
|
||||
--color-dice-text: var(--color-text-inverse);
|
||||
--color-receipt: var(--color-text-quiet);
|
||||
|
||||
/* == Scale Tier == */
|
||||
--color-tier-active-surface: var(--color-palette-paper);
|
||||
--color-tier-active-text: var(--color-text-primary);
|
||||
--color-tier-idle-surface: var(--color-palette-cream);
|
||||
--color-tier-idle-text: var(--color-text-quiet);
|
||||
--color-tier-locked-text: var(--color-text-disabled);
|
||||
--color-tier-marker: var(--color-primary);
|
||||
|
||||
/* == Overlays == */
|
||||
--color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
|
||||
--color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
|
||||
--color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
|
||||
|
||||
/* == Shadow == */
|
||||
--shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
|
||||
--shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
|
||||
--shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
|
||||
--shadow-pressed: 0 0 0 var(--color-palette-black-ink);
|
||||
|
||||
/* == Utility == */
|
||||
--color-highlight: var(--color-tertiary);
|
||||
--color-skeleton-base: var(--color-surface-elevated-2);
|
||||
--color-skeleton-shimmer: var(--color-surface-elevated-1);
|
||||
}
|
||||
Reference in New Issue
Block a user