Styles & Classes
CSS variables and Tailwind utility classes from Harness UI Design System.
Layout
11
Variable | Class | Value |
|---|---|---|
--cn-layout-4xs | gap-cn-4xs p-cn-4xs m-cn-4xs | 2px |
--cn-layout-3xs | gap-cn-3xs p-cn-3xs m-cn-3xs | 4px |
--cn-layout-2xs | gap-cn-2xs p-cn-2xs m-cn-2xs | 6px |
--cn-layout-xs | gap-cn-xs p-cn-xs m-cn-xs | 8px |
--cn-layout-sm | gap-cn-sm p-cn-sm m-cn-sm | 12px |
--cn-layout-md | gap-cn-md p-cn-md m-cn-md | 16px |
--cn-layout-lg | gap-cn-lg p-cn-lg m-cn-lg | 20px |
--cn-layout-xl | gap-cn-xl p-cn-xl m-cn-xl | 24px |
--cn-layout-2xl | gap-cn-2xl p-cn-2xl m-cn-2xl | 32px |
--cn-layout-3xl | gap-cn-3xl p-cn-3xl m-cn-3xl | 40px |
--cn-layout-4xl | gap-cn-4xl p-cn-4xl m-cn-4xl | 80px |
Shell
3
Variable | Class | Value |
|---|---|---|
--cn-shell-container | — | 8px |
--cn-shell-gap | — | 12px |
--cn-shell-radius | — | 16px |
Page Container
2
Variable | Class | Value |
|---|---|---|
--cn-page-container-spacing-px | — | 16px |
--cn-page-container-spacing-py | — | 16px |
Breakpoints
3
Variable | Class | Value |
|---|---|---|
--cn-breakpoint-viewport | — | 1440 |
--cn-breakpoint-viewport-min | — | 1080 |
--cn-breakpoint-viewport-max | — | 1919 |
Headings
5
Variable | Class | Value |
|---|---|---|
--cn-heading-hero | font-heading-hero | 440 1.75rem/2.1875rem Inter, system-ui, sans-serif |
--cn-heading-section | font-heading-section | 360 1.5rem/2.142rem Inter, system-ui, sans-serif |
--cn-heading-subsection | font-heading-subsection | 360 1.125rem/1.6065rem Inter, system-ui, sans-serif |
--cn-heading-base | font-heading-base | 360 1rem/1.25rem Inter, system-ui, sans-serif |
--cn-heading-small | font-heading-small | 440 0.875rem/1.2495rem Inter, system-ui, sans-serif |
Body
9
Variable | Class | Value |
|---|---|---|
--cn-body-normal | font-body-normal | 360 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-normal-line-through | font-body-normal-line-through | 360 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-strong | font-body-strong | 440 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-code | font-body-code | 300 0.813rem/1.2195rem 'JetBrains Mono', monospace |
--cn-body-light | font-body-light | 310 0.875rem/1.2495rem Inter, system-ui, sans-serif |
--cn-body-single-line-code | font-body-single-line-code | 310 0.813rem/0.9268rem 'JetBrains Mono', monospace |
--cn-body-single-line-normal | font-body-single-line-normal | 360 0.875rem/0.9975rem Inter, system-ui, sans-serif |
--cn-body-single-line-strong | font-body-single-line-strong | 440 0.875rem/0.9975rem Inter, system-ui, sans-serif |
--cn-body-single-line-light | font-body-single-line-light | 310 0.875rem/0.9975rem Inter, system-ui, sans-serif |
Caption
9
Variable | Class | Value |
|---|---|---|
--cn-caption-normal | font-caption-normal | 360 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-strong | font-caption-strong | 440 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-code | font-caption-code | 400 0.788rem/1.1253rem 'JetBrains Mono', monospace |
--cn-caption-light | font-caption-light | 310 0.813rem/1.161rem Inter, system-ui, sans-serif |
--cn-caption-single-line-normal | font-caption-single-line-normal | 360 0.813rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-normal-caps | font-caption-single-line-normal-caps | 360 0.788rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-strong | font-caption-single-line-strong | 440 0.813rem/0.9268rem Inter, system-ui, sans-serif |
--cn-caption-single-line-code | font-caption-single-line-code | 440 0.788rem/0.8983rem 'JetBrains Mono', monospace |
--cn-caption-single-line-light | font-caption-single-line-light | 310 0.813rem/0.9268rem Inter, system-ui, sans-serif |
Micro
1
Variable | Class | Value |
|---|---|---|
--cn-micro-normal | font-micro-normal | 440 0.719rem/1.0785rem Inter, system-ui, sans-serif |
Background
4
Variable | Class | Value |
|---|---|---|
--cn-bg-0 | bg-cn-0 | lch(99% 0 272) |
--cn-bg-1 | bg-cn-1 | lch(100% 0 0) |
--cn-bg-2 | bg-cn-2 | lch(99% 0 272) |
--cn-bg-3 | bg-cn-3 | lch(100% 0 0) |
Text
9
Variable | Class | Value |
|---|---|---|
--cn-text-1 | text-cn-1 | lch(5% 1.5 270) |
--cn-text-2 | text-cn-2 | lch(24.5% 9 278) |
--cn-text-3 | text-cn-3 | lch(47% 6 275) |
--cn-text-4 | text-cn-4 | lch(57% 5.5 273) |
--cn-text-success | text-cn-success | lch(50% 72 125) |
--cn-text-danger | text-cn-danger | lch(48% 86 32) |
--cn-text-warning | text-cn-warning | lch(49% 82 60) |
--cn-text-merged | text-cn-merged | lch(48% 94 320) |
--cn-text-brand | text-cn-brand | lch(47% 80 280) |
Border
7
Variable | Class | Value |
|---|---|---|
--cn-border-1 | border-cn-1 | lch(65% 6 272) |
--cn-border-2 | border-cn-2 | lch(87% 1 272) |
--cn-border-3 | border-cn-3 | lch(92% 1 272) |
--cn-border-brand | border-cn-brand | lch(51% 85 280) |
--cn-border-success | border-cn-success | lch(65% 85 123) |
--cn-border-danger | border-cn-danger | lch(67% 76 30) |
--cn-border-warning | border-cn-warning | lch(72% 98 70) |
State
4
Variable | Class | Value |
|---|---|---|
--cn-state-hover | bg-cn-hover | lch(from var(--cn-gray-200) l c h / 0.23) |
--cn-state-selected | bg-cn-selected | lch(from var(--cn-gray-300) l c h / 0.26) |
--cn-disabled-opacity | opacity-cn-disabled | 0.6 |
--cn-focus | — | 2px solid lch(51% 85 280) |
Shadows
16
Variable | Class | Value |
|---|---|---|
--cn-shadow-0 | shadow-cn-none | 0 0 0 0 lch(from var(--cn-gray-600) l c h / 0) |
--cn-shadow-1 | shadow-cn-1 | 0 1px 2px 0 lch(from var(--cn-gray-600) l c h / 0.13) |
--cn-shadow-2 | shadow-cn-2 | 0 1px 3px 0 lch(from var(--cn-gray-600) l c h / 0.13), 0 1px 15px -1px lch(from var(--cn-gray-600) l c h / 0.13) |
--cn-shadow-3 | shadow-cn-3 | 0 4px 6px -1px lch(from var(--cn-gray-600) l c h / 0.08), 0 2px 8px -2px lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-4 | shadow-cn-4 | 0 10px 15px -3px lch(from var(--cn-gray-600) l c h / 0.08), 0 4px 8px -4px lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-5 | shadow-cn-5 | 0 20px 25px -5px lch(from var(--cn-gray-600) l c h / 0.08), 0 8px 10px -6px lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-6 | shadow-cn-6 | 0 25px 50px -12px lch(from var(--cn-gray-600) l c h / 0.1) |
--cn-shadow-inner | — | inset 0 0 4.5px 0 lch(from var(--cn-pure-black) l c h / 0.15) |
--cn-shadow-color-0 | — | lch(from var(--cn-gray-600) l c h / 0) |
--cn-shadow-color-1 | — | lch(from var(--cn-gray-600) l c h / 0.13) |
--cn-shadow-color-2 | — | lch(from var(--cn-gray-600) l c h / 0.13) |
--cn-shadow-color-3 | — | lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-color-4 | — | lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-color-5 | — | lch(from var(--cn-gray-600) l c h / 0.08) |
--cn-shadow-color-6 | — | lch(from var(--cn-gray-600) l c h / 0.1) |
--cn-shadow-color-inner | — | lch(from var(--cn-pure-black) l c h / 0.15) |
Focus Rings
7
Variable | Class | Value |
|---|---|---|
--cn-ring-danger | shadow-cn-ring-danger | 0 0 0 4px lch(93% 15 16) |
--cn-ring-danger-hover | shadow-cn-ring-danger-hover | 0 0 0 4px lch(88% 25 20) |
--cn-ring-selected | shadow-cn-ring-selected | 0 0 0 4px lch(from var(--cn-indigo-700) l c h / 0.15) |
--cn-ring-success | shadow-cn-ring-success | 0 0 0 4px lch(96% 32 120) |
--cn-ring-success-hover | shadow-cn-ring-success-hover | 0 0 0 4px lch(90% 56 120) |
--cn-ring-warning | shadow-cn-ring-warning | 0 0 0 4px lch(96% 38 95) |
--cn-ring-warning-hover | shadow-cn-ring-warning-hover | 0 0 0 4px lch(93% 48 92) |
Set: Ai
4
Variable | Class | Value |
|---|---|---|
--cn-set-ai-outline-text | text-cn-ai-outline | lch(5% 1.5 270) |
--cn-set-ai-outline-border | border-cn-ai-outline | linear-gradient(131deg, lch(65% 58 255) 0%, lch(51% 85 280) 50%, lch(65% 61 290) 100%) |
--cn-set-ai-outline-bg-gradient | — | linear-gradient(102deg, lch(100% 0 0) 8%, lch(97% 6 240) 35%, lch(91% 15 255) 65%, lch(76% 55 253) 87%) |
--cn-set-ai-outline-inner | — | lch(100% 0 0) |
Set: Blue
13
Variable | Class | Value |
|---|---|---|
--cn-set-blue-primary-text | text-cn-blue-primary | lch(5% 1.5 270) |
--cn-set-blue-primary-bg | bg-cn-blue-primary | lch(65% 58 255) |
--cn-set-blue-primary-bg-hover | bg-cn-blue-primary-hover | lch(60% 61 255) |
--cn-set-blue-primary-bg-selected | bg-cn-blue-primary-selected | lch(60% 61 255) |
--cn-set-blue-secondary-text | text-cn-blue-secondary | lch(41% 46 255) |
--cn-set-blue-secondary-bg | bg-cn-blue-secondary | lch(91% 15 255) |
--cn-set-blue-secondary-bg-hover | bg-cn-blue-secondary-hover | lch(86% 27 255) |
--cn-set-blue-secondary-bg-selected | bg-cn-blue-secondary-selected | lch(86% 27 255) |
--cn-set-blue-outline-text | text-cn-blue-outline | lch(48% 51 255) |
--cn-set-blue-outline-bg | bg-cn-blue-outline | lch(98% 3 240) |
--cn-set-blue-outline-border | border-cn-blue-outline | lch(91% 15 255) |
--cn-set-blue-outline-bg-hover | bg-cn-blue-outline-hover | lch(97% 6 240) |
--cn-set-blue-outline-bg-selected | bg-cn-blue-outline-selected | lch(97% 6 240) |
Set: Brand
14
Variable | Class | Value |
|---|---|---|
--cn-set-brand-primary-text | text-cn-brand-primary | lch(100% 0 0) |
--cn-set-brand-primary-bg | bg-cn-brand-primary | lch(47% 80 280) |
--cn-set-brand-primary-bg-hover | bg-cn-brand-primary-hover | lch(41% 72 280) |
--cn-set-brand-primary-bg-selected | bg-cn-brand-primary-selected | lch(41% 72 280) |
--cn-set-brand-primary-ring | — | lch(from var(--cn-indigo-700) l c h / 0.15) |
--cn-set-brand-secondary-text | text-cn-brand-secondary | lch(41% 72 280) |
--cn-set-brand-secondary-bg | bg-cn-brand-secondary | lch(95% 10 243) |
--cn-set-brand-secondary-bg-hover | bg-cn-brand-secondary-hover | lch(91% 15 255) |
--cn-set-brand-secondary-bg-selected | bg-cn-brand-secondary-selected | lch(91% 15 255) |
--cn-set-brand-outline-text | text-cn-brand-outline | lch(41% 72 280) |
--cn-set-brand-outline-bg | bg-cn-brand-outline | lch(98% 3 240) |
--cn-set-brand-outline-border | border-cn-brand-outline | lch(51% 85 280) |
--cn-set-brand-outline-bg-hover | bg-cn-brand-outline-hover | lch(93% 11 280) |
--cn-set-brand-outline-bg-selected | bg-cn-brand-outline-selected | lch(93% 11 280) |
Set: Brown
10
Variable | Class | Value |
|---|---|---|
--cn-set-brown-primary-text | text-cn-brown-primary | lch(5% 1.5 270) |
--cn-set-brown-primary-bg | bg-cn-brown-primary | lch(56% 56 38) |
--cn-set-brown-primary-bg-hover | bg-cn-brown-primary-hover | lch(49% 50 38) |
--cn-set-brown-secondary-text | text-cn-brown-secondary | lch(41% 42 38) |
--cn-set-brown-secondary-bg | bg-cn-brown-secondary | lch(93% 13 38) |
--cn-set-brown-secondary-bg-hover | bg-cn-brown-secondary-hover | lch(89% 22 38) |
--cn-set-brown-outline-text | text-cn-brown-outline | lch(49% 50 38) |
--cn-set-brown-outline-bg | bg-cn-brown-outline | lch(98% 4 38) |
--cn-set-brown-outline-border | border-cn-brown-outline | lch(89% 22 38) |
--cn-set-brown-outline-bg-hover | bg-cn-brown-outline-hover | lch(96% 7 38) |
Set: Cyan
10
Variable | Class | Value |
|---|---|---|
--cn-set-cyan-primary-text | text-cn-cyan-primary | lch(5% 1.5 270) |
--cn-set-cyan-primary-bg | bg-cn-cyan-primary | lch(72% 60 195) |
--cn-set-cyan-primary-bg-hover | bg-cn-cyan-primary-hover | lch(65% 53 195) |
--cn-set-cyan-secondary-text | text-cn-cyan-secondary | lch(36% 38 195) |
--cn-set-cyan-secondary-bg | bg-cn-cyan-secondary | lch(94% 15 196) |
--cn-set-cyan-secondary-bg-hover | bg-cn-cyan-secondary-hover | lch(89% 27 195) |
--cn-set-cyan-outline-text | text-cn-cyan-outline | lch(48% 42 195) |
--cn-set-cyan-outline-bg | bg-cn-cyan-outline | lch(99% 5 195) |
--cn-set-cyan-outline-border | border-cn-cyan-outline | lch(89% 27 195) |
--cn-set-cyan-outline-bg-hover | bg-cn-cyan-outline-hover | lch(97% 17 195) |
Set: Danger
13
Variable | Class | Value |
|---|---|---|
--cn-set-danger-primary-text | text-cn-danger-primary | lch(100% 0 0) |
--cn-set-danger-primary-bg | bg-cn-danger-primary | lch(48% 86 32) |
--cn-set-danger-primary-bg-hover | bg-cn-danger-primary-hover | lch(45% 80 31) |
--cn-set-danger-primary-bg-selected | bg-cn-danger-primary-selected | lch(45% 80 31) |
--cn-set-danger-secondary-text | text-cn-danger-secondary | lch(45% 80 31) |
--cn-set-danger-secondary-bg | bg-cn-danger-secondary | lch(93% 15 16) |
--cn-set-danger-secondary-bg-hover | bg-cn-danger-secondary-hover | lch(88% 25 20) |
--cn-set-danger-secondary-bg-selected | bg-cn-danger-secondary-selected | lch(88% 25 20) |
--cn-set-danger-outline-text | text-cn-danger-outline | lch(48% 86 32) |
--cn-set-danger-outline-bg | bg-cn-danger-outline | lch(98% 4 10) |
--cn-set-danger-outline-border | border-cn-danger-outline | lch(88% 25 20) |
--cn-set-danger-outline-bg-hover | bg-cn-danger-outline-hover | lch(96% 7 12) |
--cn-set-danger-outline-bg-selected | bg-cn-danger-outline-selected | lch(96% 7 12) |
Set: Forest
10
Variable | Class | Value |
|---|---|---|
--cn-set-forest-green-primary-text | text-cn-forest-primary | lch(100% 0 0) |
--cn-set-forest-green-primary-bg | bg-cn-forest-primary | lch(50% 70 153) |
--cn-set-forest-green-primary-bg-hover | bg-cn-forest-primary-hover | lch(36% 64 158) |
--cn-set-forest-green-secondary-text | text-cn-forest-secondary | lch(36% 64 158) |
--cn-set-forest-green-secondary-bg | bg-cn-forest-secondary | lch(93% 42 151) |
--cn-set-forest-green-secondary-bg-hover | bg-cn-forest-secondary-hover | lch(89% 63 151) |
--cn-set-forest-green-outline-text | text-cn-forest-outline | lch(50% 70 153) |
--cn-set-forest-green-outline-bg | bg-cn-forest-outline | lch(99% 6 150) |
--cn-set-forest-green-outline-border | border-cn-forest-outline | lch(93% 42 151) |
--cn-set-forest-green-outline-bg-hover | bg-cn-forest-outline-hover | lch(96% 25 150) |
Set: Gray
13
Variable | Class | Value |
|---|---|---|
--cn-set-gray-primary-text | text-cn-gray-primary | lch(5% 1.5 270) |
--cn-set-gray-primary-bg | bg-cn-gray-primary | lch(84% 3.5 272) |
--cn-set-gray-primary-bg-hover | bg-cn-gray-primary-hover | lch(79% 6 272) |
--cn-set-gray-primary-bg-selected | bg-cn-gray-primary-selected | lch(79% 6 272) |
--cn-set-gray-secondary-text | text-cn-gray-secondary | lch(5% 1.5 270) |
--cn-set-gray-secondary-bg | bg-cn-gray-secondary | lch(92% 1 272) |
--cn-set-gray-secondary-bg-hover | bg-cn-gray-secondary-hover | lch(87% 1 272) |
--cn-set-gray-secondary-bg-selected | bg-cn-gray-secondary-selected | lch(87% 1 272) |
--cn-set-gray-outline-text | text-cn-gray-outline | lch(24.5% 9 278) |
--cn-set-gray-outline-bg | bg-cn-gray-outline | lch(99% 0 272) |
--cn-set-gray-outline-border | border-cn-gray-outline | lch(87% 1 272) |
--cn-set-gray-outline-bg-hover | bg-cn-gray-outline-hover | lch(97% 0 272) |
--cn-set-gray-outline-bg-selected | bg-cn-gray-outline-selected | lch(97% 0 272) |
Set: Indigo
13
Variable | Class | Value |
|---|---|---|
--cn-set-indigo-primary-text | text-cn-indigo-primary | lch(5% 1.5 270) |
--cn-set-indigo-primary-bg | bg-cn-indigo-primary | lch(64% 60 280) |
--cn-set-indigo-primary-bg-hover | bg-cn-indigo-primary-hover | lch(51% 85 280) |
--cn-set-indigo-primary-bg-selected | bg-cn-indigo-primary-selected | lch(51% 85 280) |
--cn-set-indigo-secondary-text | text-cn-indigo-secondary | lch(41% 72 280) |
--cn-set-indigo-secondary-bg | bg-cn-indigo-secondary | lch(91% 15 286) |
--cn-set-indigo-secondary-bg-hover | bg-cn-indigo-secondary-hover | lch(87% 20 284) |
--cn-set-indigo-secondary-bg-selected | bg-cn-indigo-secondary-selected | lch(87% 20 284) |
--cn-set-indigo-outline-text | text-cn-indigo-outline | lch(47% 80 280) |
--cn-set-indigo-outline-bg | bg-cn-indigo-outline | lch(98% 3 280) |
--cn-set-indigo-outline-border | border-cn-indigo-outline | lch(87% 20 284) |
--cn-set-indigo-outline-bg-hover | bg-cn-indigo-outline-hover | lch(96% 6 280) |
--cn-set-indigo-outline-bg-selected | bg-cn-indigo-outline-selected | lch(96% 6 280) |
Set: Mint
13
Variable | Class | Value |
|---|---|---|
--cn-set-mint-primary-text | text-cn-mint-primary | lch(100% 0 0) |
--cn-set-mint-primary-bg | bg-cn-mint-primary | lch(49% 55 165) |
--cn-set-mint-primary-bg-hover | bg-cn-mint-primary-hover | lch(41% 50 165) |
--cn-set-mint-primary-bg-selected | bg-cn-mint-primary-selected | lch(41% 50 165) |
--cn-set-mint-secondary-text | text-cn-mint-secondary | lch(41% 50 165) |
--cn-set-mint-secondary-bg | bg-cn-mint-secondary | lch(93% 20 166) |
--cn-set-mint-secondary-bg-hover | bg-cn-mint-secondary-hover | lch(89% 33 167) |
--cn-set-mint-secondary-bg-selected | bg-cn-mint-secondary-selected | lch(89% 33 167) |
--cn-set-mint-outline-text | text-cn-mint-outline | lch(49% 55 165) |
--cn-set-mint-outline-bg | bg-cn-mint-outline | lch(99% 5 165) |
--cn-set-mint-outline-border | border-cn-mint-outline | lch(93% 20 166) |
--cn-set-mint-outline-bg-hover | bg-cn-mint-outline-hover | lch(96% 20 165) |
--cn-set-mint-outline-bg-selected | bg-cn-mint-outline-selected | lch(96% 20 165) |
Set: Orange
10
Variable | Class | Value |
|---|---|---|
--cn-set-orange-primary-text | text-cn-orange-primary | lch(5% 1.5 270) |
--cn-set-orange-primary-bg | bg-cn-orange-primary | lch(67% 100 52) |
--cn-set-orange-primary-bg-hover | bg-cn-orange-primary-hover | lch(60% 97 49) |
--cn-set-orange-secondary-text | text-cn-orange-secondary | lch(41% 80 51) |
--cn-set-orange-secondary-bg | bg-cn-orange-secondary | lch(93% 16 65) |
--cn-set-orange-secondary-bg-hover | bg-cn-orange-secondary-hover | lch(89% 28 62) |
--cn-set-orange-outline-text | text-cn-orange-outline | lch(49% 92 52) |
--cn-set-orange-outline-bg | bg-cn-orange-outline | lch(98.5% 4 70) |
--cn-set-orange-outline-border | border-cn-orange-outline | lch(89% 28 62) |
--cn-set-orange-outline-bg-hover | bg-cn-orange-outline-hover | lch(96% 11 68) |
Set: Pink
13
Variable | Class | Value |
|---|---|---|
--cn-set-pink-primary-text | text-cn-pink-primary | lch(5% 1.5 270) |
--cn-set-pink-primary-bg | bg-cn-pink-primary | lch(72% 64 350) |
--cn-set-pink-primary-bg-hover | bg-cn-pink-primary-hover | lch(65% 80 350) |
--cn-set-pink-primary-bg-selected | bg-cn-pink-primary-selected | lch(65% 80 350) |
--cn-set-pink-secondary-text | text-cn-pink-secondary | lch(41% 68 350) |
--cn-set-pink-secondary-bg | bg-cn-pink-secondary | lch(93% 14 350) |
--cn-set-pink-secondary-bg-hover | bg-cn-pink-secondary-hover | lch(89% 23 350) |
--cn-set-pink-secondary-bg-selected | bg-cn-pink-secondary-selected | lch(89% 23 350) |
--cn-set-pink-outline-text | text-cn-pink-outline | lch(50% 75 350) |
--cn-set-pink-outline-bg | bg-cn-pink-outline | lch(98% 4 350) |
--cn-set-pink-outline-border | border-cn-pink-outline | lch(89% 23 350) |
--cn-set-pink-outline-bg-hover | bg-cn-pink-outline-hover | lch(96% 8 350) |
--cn-set-pink-outline-bg-selected | bg-cn-pink-outline-selected | lch(96% 8 350) |
Set: Purple
13
Variable | Class | Value |
|---|---|---|
--cn-set-purple-primary-text | text-cn-purple-primary | lch(100% 0 0) |
--cn-set-purple-primary-bg | bg-cn-purple-primary | lch(48% 94 320) |
--cn-set-purple-primary-bg-hover | bg-cn-purple-primary-hover | lch(41% 75 320) |
--cn-set-purple-primary-bg-selected | bg-cn-purple-primary-selected | lch(41% 75 320) |
--cn-set-purple-secondary-text | text-cn-purple-secondary | lch(41% 75 320) |
--cn-set-purple-secondary-bg | bg-cn-purple-secondary | lch(93% 17 320) |
--cn-set-purple-secondary-bg-hover | bg-cn-purple-secondary-hover | lch(89% 30 320) |
--cn-set-purple-secondary-bg-selected | bg-cn-purple-secondary-selected | lch(89% 30 320) |
--cn-set-purple-outline-text | text-cn-purple-outline | lch(48% 94 320) |
--cn-set-purple-outline-bg | bg-cn-purple-outline | lch(98% 5 320) |
--cn-set-purple-outline-border | border-cn-purple-outline | lch(89% 30 320) |
--cn-set-purple-outline-bg-hover | bg-cn-purple-outline-hover | lch(96% 10 320) |
--cn-set-purple-outline-bg-selected | bg-cn-purple-outline-selected | lch(96% 10 320) |
Set: Success
13
Variable | Class | Value |
|---|---|---|
--cn-set-success-primary-text | text-cn-success-primary | lch(100% 0 0) |
--cn-set-success-primary-bg | bg-cn-success-primary | lch(50% 72 125) |
--cn-set-success-primary-bg-hover | bg-cn-success-primary-hover | lch(41% 60 125) |
--cn-set-success-primary-bg-selected | bg-cn-success-primary-selected | lch(41% 60 125) |
--cn-set-success-secondary-text | text-cn-success-secondary | lch(41% 60 125) |
--cn-set-success-secondary-bg | bg-cn-success-secondary | lch(96% 32 120) |
--cn-set-success-secondary-bg-hover | bg-cn-success-secondary-hover | lch(90% 56 120) |
--cn-set-success-secondary-bg-selected | bg-cn-success-secondary-selected | lch(90% 56 120) |
--cn-set-success-outline-text | text-cn-success-outline | lch(50% 72 125) |
--cn-set-success-outline-bg | bg-cn-success-outline | lch(99% 10 120) |
--cn-set-success-outline-border | border-cn-success-outline | lch(90% 56 120) |
--cn-set-success-outline-bg-hover | bg-cn-success-outline-hover | lch(98% 23 120) |
--cn-set-success-outline-bg-selected | bg-cn-success-outline-selected | lch(98% 23 120) |
Set: Violet
13
Variable | Class | Value |
|---|---|---|
--cn-set-violet-primary-text | text-cn-violet-primary | lch(100% 0 0) |
--cn-set-violet-primary-bg | bg-cn-violet-primary | lch(49% 90 290) |
--cn-set-violet-primary-bg-hover | bg-cn-violet-primary-hover | lch(41% 82 290) |
--cn-set-violet-primary-bg-selected | bg-cn-violet-primary-selected | lch(41% 82 290) |
--cn-set-violet-secondary-text | text-cn-violet-secondary | lch(41% 82 290) |
--cn-set-violet-secondary-bg | bg-cn-violet-secondary | lch(93% 10 295) |
--cn-set-violet-secondary-bg-hover | bg-cn-violet-secondary-hover | lch(90% 18 295) |
--cn-set-violet-secondary-bg-selected | bg-cn-violet-secondary-selected | lch(90% 18 295) |
--cn-set-violet-outline-text | text-cn-violet-outline | lch(41% 82 290) |
--cn-set-violet-outline-bg | bg-cn-violet-outline | lch(98% 3 290) |
--cn-set-violet-outline-border | border-cn-violet-outline | lch(90% 18 295) |
--cn-set-violet-outline-bg-hover | bg-cn-violet-outline-hover | lch(97% 5 290) |
--cn-set-violet-outline-bg-selected | bg-cn-violet-outline-selected | lch(97% 5 290) |
Set: Warning
13
Variable | Class | Value |
|---|---|---|
--cn-set-warning-primary-text | text-cn-warning-primary | lch(5% 1.5 270) |
--cn-set-warning-primary-bg | bg-cn-warning-primary | lch(77% 100 76) |
--cn-set-warning-primary-bg-hover | bg-cn-warning-primary-hover | lch(72% 98 70) |
--cn-set-warning-primary-bg-selected | bg-cn-warning-primary-selected | lch(72% 98 70) |
--cn-set-warning-secondary-text | text-cn-warning-secondary | lch(41% 60 58) |
--cn-set-warning-secondary-bg | bg-cn-warning-secondary | lch(96% 38 95) |
--cn-set-warning-secondary-bg-hover | bg-cn-warning-secondary-hover | lch(93% 48 92) |
--cn-set-warning-secondary-bg-selected | bg-cn-warning-secondary-selected | lch(93% 48 92) |
--cn-set-warning-outline-text | text-cn-warning-outline | lch(49% 82 60) |
--cn-set-warning-outline-bg | bg-cn-warning-outline | lch(99% 9 98) |
--cn-set-warning-outline-border | border-cn-warning-outline | lch(89% 65 88) |
--cn-set-warning-outline-bg-hover | bg-cn-warning-outline-hover | lch(96% 38 95) |
--cn-set-warning-outline-bg-selected | bg-cn-warning-outline-selected | lch(96% 38 95) |