Colors
Primitive palette
Primitive tokens own raw reusable values. RGB and OKLCH are derived for documentation display and do not replace the canonical string.
| Swatch | Primitive | Canonical | CSS variable | Derived RGB | Derived OKLCH |
|---|---|---|---|---|---|
color.blue.600 | #1d4ed8 | --combric-primitive-color-blue-600 | rgb(29 78 216) | oklch(48.82% 0.2172 264.38) | |
color.blue.700 | #1e40af | --combric-primitive-color-blue-700 | rgb(30 64 175) | oklch(42.44% 0.1809 265.64) | |
color.palette.accent | #E64A2E | --combric-primitive-color-palette-accent | rgb(230 74 46) | oklch(62.54% 0.1972 32.48) | |
color.palette.accent.hover | #F05D42 | --combric-primitive-color-palette-accent-hover | rgb(240 93 66) | oklch(66.53% 0.1865 32.49) | |
color.palette.backdrop | rgb(21 21 21 / 0.56) | --combric-primitive-color-palette-backdrop | rgb(21 21 21 / 0.56) | oklch(19.57% 0.0000 none / 0.56) | |
color.palette.border | #6B6A63 | --combric-primitive-color-palette-border | rgb(107 106 99) | oklch(52.30% 0.0108 100.14) | |
color.palette.canvas | #F2F0EA | --combric-primitive-color-palette-canvas | rgb(242 240 234) | oklch(95.50% 0.0083 91.48) | |
color.palette.dark.accent | #FF7A61 | --combric-primitive-color-palette-dark-accent | rgb(255 122 97) | oklch(73.02% 0.1674 32.23) | |
color.palette.dark.accent.hover | #FF9580 | --combric-primitive-color-palette-dark-accent-hover | rgb(255 149 128) | oklch(77.67% 0.1320 32.13) | |
color.palette.dark.backdrop | rgb(0 0 0 / 0.72) | --combric-primitive-color-palette-dark-backdrop | rgb(0 0 0 / 0.72) | oklch(0.00% 0.0000 none / 0.72) | |
color.palette.dark.border | #7F827A | --combric-primitive-color-palette-dark-border | rgb(127 130 122) | oklch(60.16% 0.0124 123.60) | |
color.palette.dark.canvas | #171816 | --combric-primitive-color-palette-dark-canvas | rgb(23 24 22) | oklch(20.71% 0.0042 128.69) | |
color.palette.dark.invalid | #FF8278 | --combric-primitive-color-palette-dark-invalid | rgb(255 130 120) | oklch(74.58% 0.1538 26.12) | |
color.palette.dark.invalid.hover | #FF9C93 | --combric-primitive-color-palette-dark-invalid-hover | rgb(255 156 147) | oklch(79.20% 0.1199 25.69) | |
color.palette.dark.muted | #C1BFB7 | --combric-primitive-color-palette-dark-muted | rgb(193 191 183) | oklch(80.40% 0.0113 95.20) | |
color.palette.dark.surface.elevated | #2D302B | --combric-primitive-color-palette-dark-surface-elevated | rgb(45 48 43) | oklch(30.44% 0.0098 132.60) | |
color.palette.graphite | #202120 | --combric-primitive-color-palette-graphite | rgb(32 33 32) | oklch(24.63% 0.0024 145.50) | |
color.palette.invalid.hover | #991B1B | --combric-primitive-color-palette-invalid-hover | rgb(153 27 27) | oklch(44.37% 0.1613 26.90) | |
color.neutral.0 | #ffffff | --combric-primitive-color-neutral-0 | rgb(255 255 255) | oklch(100.00% 0.0000 none) | |
color.neutral.50 | #f7f7f5 | --combric-primitive-color-neutral-50 | rgb(247 247 245) | oklch(97.56% 0.0026 106.45) | |
color.neutral.200 | #deded8 | --combric-primitive-color-neutral-200 | rgb(222 222 216) | oklch(89.89% 0.0081 106.56) | |
color.neutral.400 | #a3a39a | --combric-primitive-color-neutral-400 | rgb(163 163 154) | oklch(71.28% 0.0128 106.72) | |
color.neutral.600 | #5c5c55 | --combric-primitive-color-neutral-600 | rgb(92 92 85) | oklch(47.25% 0.0110 106.81) | |
color.neutral.900 | #181816 | --combric-primitive-color-neutral-900 | rgb(24 24 22) | oklch(20.82% 0.0039 106.73) | |
color.neutral.900.translucent | rgb(24 24 22 / 0.5) | --combric-primitive-color-neutral-900-translucent | rgb(24 24 22 / 0.5) | oklch(20.82% 0.0039 106.73 / 0.5) | |
color.red.700 | #b91c1c | --combric-primitive-color-red-700 | rgb(185 28 28) | oklch(50.54% 0.1905 27.52) | |
color.palette.muted | #55564F | --combric-primitive-color-palette-muted | rgb(85 86 79) | oklch(45.00% 0.0112 113.44) | |
color.palette.primary | #151515 | --combric-primitive-color-palette-primary | rgb(21 21 21) | oklch(19.57% 0.0000 none) | |
color.palette.surface | #D8D6D0 | --combric-primitive-color-palette-surface | rgb(216 214 208) | oklch(87.60% 0.0084 91.49) |
Semantic roles
Semantic tokens are purpose-driven references, not duplicated colors.
| Role | Primitive reference | Resolved | CSS variable |
|---|---|---|---|
color.accent | color.palette.accent | #E64A2E | --combric-color-accent |
color.accent.foreground | color.palette.primary | #151515 | --combric-color-accent-foreground |
color.accent.hover | color.palette.accent.hover | #F05D42 | --combric-color-accent-hover |
color.backdrop | color.palette.backdrop | rgb(21 21 21 / 0.56) | --combric-color-backdrop |
color.border | color.palette.border | #6B6A63 | --combric-color-border |
color.canvas | color.palette.canvas | #F2F0EA | --combric-color-canvas |
color.focus | color.palette.primary | #151515 | --combric-color-focus |
color.invalid | color.red.700 | #b91c1c | --combric-color-invalid |
color.invalid.foreground | color.neutral.0 | #ffffff | --combric-color-invalid-foreground |
color.invalid.hover | color.palette.invalid.hover | #991B1B | --combric-color-invalid-hover |
color.link | color.palette.primary | #151515 | --combric-color-link |
color.primary | color.palette.primary | #151515 | --combric-color-primary |
color.primary.foreground | color.neutral.0 | #ffffff | --combric-color-primary-foreground |
color.primary.hover | color.palette.graphite | #202120 | --combric-color-primary-hover |
color.surface | color.palette.surface | #D8D6D0 | --combric-color-surface |
color.surface.elevated | color.neutral.0 | #ffffff | --combric-color-surface-elevated |
color.text | color.palette.graphite | #202120 | --combric-color-text |
color.text.muted | color.palette.muted | #55564F | --combric-color-text-muted |
Verified state colors
color.accent.hover— primary accent hover.color.focus— focus-visible outlines and focus-within treatment.color.invalid— invalid controls and the current error Alert border.
Combric currently has no success, warning, info, generic danger, or disabled color token. Disabled components use opacity. Active Tabs reuse the accent role.