@momoi-labs/kiso 0.7.1 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/kiso/docs/components/README.md +4 -2
- package/kiso/docs/components/app-shell.md +51 -12
- package/kiso/docs/components/chip-input.md +194 -0
- package/kiso/docs/components/sparkline.md +93 -0
- package/kiso/docs/components/table.md +3 -1
- package/kiso/docs/evolution.md +10 -1
- package/kiso/docs/patterns/dashboard.md +3 -2
- package/kiso/docs/patterns/settings.md +1 -0
- package/kiso/docs/tokens.md +54 -36
- package/kiso/ui.css +135 -4
- package/package.json +1 -1
- package/tokens/build/tokens.css +55 -43
- package/tokens/build/tokens.d.ts +34 -12
- package/tokens/build/tokens.json +67 -55
- package/tokens/build/tokens.scss +69 -57
package/tokens/build/tokens.json
CHANGED
|
@@ -22,65 +22,77 @@
|
|
|
22
22
|
"color-accent-800": {"colorSpace":"srgb","components":[0.2745,0.1882,0.6196],"hex":"#46309e"},
|
|
23
23
|
"color-accent-900": {"colorSpace":"srgb","components":[0.1804,0.1294,0.4392],"hex":"#2e2170"},
|
|
24
24
|
"color-accent-950": {"colorSpace":"srgb","components":[0.1294,0.0902,0.2549],"hex":"#211741"},
|
|
25
|
-
"color-accent-base": {"colorSpace":"srgb","components":[0.
|
|
26
|
-
"color-status-success": {"colorSpace":"srgb","components":[0.
|
|
27
|
-
"color-status-warning": {"colorSpace":"srgb","components":[0.
|
|
28
|
-
"color-status-danger": {"colorSpace":"srgb","components":[0.
|
|
29
|
-
"color-status-info": {"colorSpace":"srgb","components":[0.
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
25
|
+
"color-accent-base": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
26
|
+
"color-status-success": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295"},
|
|
27
|
+
"color-status-warning": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
28
|
+
"color-status-danger": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
29
|
+
"color-status-info": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
30
|
+
"color-dark-50": {"colorSpace":"srgb","components":[0.9725,0.9647,0.9529],"hex":"#f8f6f3"},
|
|
31
|
+
"color-dark-100": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
32
|
+
"color-dark-200": {"colorSpace":"srgb","components":[0.851,0.8431,0.8275],"hex":"#d9d7d3"},
|
|
33
|
+
"color-dark-300": {"colorSpace":"srgb","components":[0.7765,0.7686,0.7529],"hex":"#c6c4c0"},
|
|
34
|
+
"color-dark-400": {"colorSpace":"srgb","components":[0.6706,0.6627,0.6471],"hex":"#aba9a5"},
|
|
35
|
+
"color-dark-450": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
36
|
+
"color-dark-500": {"colorSpace":"srgb","components":[0.4196,0.4118,0.3961],"hex":"#6b6965"},
|
|
37
|
+
"color-dark-600": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
38
|
+
"color-dark-700": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
39
|
+
"color-dark-800": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
40
|
+
"color-dark-900": {"colorSpace":"srgb","components":[0.1294,0.1216,0.1098],"hex":"#211f1c"},
|
|
41
|
+
"color-dark-950": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
42
|
+
"semantic-background": {"colorSpace":"srgb","components":[0.1294,0.1216,0.1098],"hex":"#211f1c"},
|
|
43
|
+
"semantic-surface": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
44
|
+
"semantic-elevated-surface": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
45
|
+
"semantic-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
46
|
+
"semantic-muted-foreground": {"colorSpace":"srgb","components":[0.6706,0.6627,0.6471],"hex":"#aba9a5"},
|
|
47
|
+
"semantic-subtle-foreground": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
48
|
+
"semantic-border": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
49
|
+
"semantic-primary": {"colorSpace":"srgb","components":[0.4078,0.2941,0.7098],"hex":"#684bb5"},
|
|
38
50
|
"semantic-accent": {"colorSpace":"srgb","components":[0.8706,0.8353,0.9843],"hex":"#ded5fb"},
|
|
39
|
-
"semantic-success": {"colorSpace":"srgb","components":[0.
|
|
40
|
-
"semantic-warning": {"colorSpace":"srgb","components":[0.
|
|
41
|
-
"semantic-danger": {"colorSpace":"srgb","components":[0.
|
|
42
|
-
"semantic-info": {"colorSpace":"srgb","components":[0.
|
|
43
|
-
"semantic-focus": {"colorSpace":"srgb","components":[0.
|
|
44
|
-
"semantic-disabled": {"colorSpace":"srgb","components":[0.
|
|
45
|
-
"semantic-card": {"colorSpace":"srgb","components":[0.
|
|
46
|
-
"semantic-card-foreground": {"colorSpace":"srgb","components":[0.
|
|
47
|
-
"semantic-popover": {"colorSpace":"srgb","components":[0.
|
|
48
|
-
"semantic-popover-foreground": {"colorSpace":"srgb","components":[0.
|
|
49
|
-
"semantic-muted": {"colorSpace":"srgb","components":[0.
|
|
50
|
-
"semantic-sidebar": {"colorSpace":"srgb","components":[0.
|
|
51
|
-
"semantic-sidebar-border": {"colorSpace":"srgb","components":[0.
|
|
52
|
-
"semantic-border-strong": {"colorSpace":"srgb","components":[0.
|
|
53
|
-
"semantic-input": {"colorSpace":"srgb","components":[0.
|
|
54
|
-
"semantic-primary-foreground": {"colorSpace":"srgb","components":[0.
|
|
55
|
-
"semantic-primary-hover": {"colorSpace":"srgb","components":[0.
|
|
56
|
-
"semantic-link": {"colorSpace":"srgb","components":[0.
|
|
57
|
-
"semantic-accent-surface": {"colorSpace":"srgb","components":[0.
|
|
58
|
-
"semantic-accent-surface-hover": {"colorSpace":"srgb","components":[0.
|
|
59
|
-
"semantic-selected": {"colorSpace":"srgb","components":[0.
|
|
60
|
-
"semantic-selected-foreground": {"colorSpace":"srgb","components":[0.
|
|
61
|
-
"semantic-secondary": {"colorSpace":"srgb","components":[0.
|
|
62
|
-
"semantic-secondary-foreground": {"colorSpace":"srgb","components":[0.
|
|
63
|
-
"semantic-secondary-hover": {"colorSpace":"srgb","components":[0.
|
|
64
|
-
"semantic-ring": {"colorSpace":"srgb","components":[0.
|
|
65
|
-
"semantic-disabled-surface": {"colorSpace":"srgb","components":[0.
|
|
66
|
-
"semantic-skeleton": {"colorSpace":"srgb","components":[0.
|
|
51
|
+
"semantic-success": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295"},
|
|
52
|
+
"semantic-warning": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
53
|
+
"semantic-danger": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
54
|
+
"semantic-info": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
55
|
+
"semantic-focus": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
56
|
+
"semantic-disabled": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
57
|
+
"semantic-card": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
58
|
+
"semantic-card-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
59
|
+
"semantic-popover": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
60
|
+
"semantic-popover-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
61
|
+
"semantic-muted": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
62
|
+
"semantic-sidebar": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
63
|
+
"semantic-sidebar-border": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
64
|
+
"semantic-border-strong": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
65
|
+
"semantic-input": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
66
|
+
"semantic-primary-foreground": {"colorSpace":"srgb","components":[0.9686,0.9608,0.9961],"hex":"#f7f5fe"},
|
|
67
|
+
"semantic-primary-hover": {"colorSpace":"srgb","components":[0.4745,0.3647,0.7882],"hex":"#795dc9"},
|
|
68
|
+
"semantic-link": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
69
|
+
"semantic-accent-surface": {"colorSpace":"srgb","components":[0.1765,0.1569,0.2627],"hex":"#2d2843"},
|
|
70
|
+
"semantic-accent-surface-hover": {"colorSpace":"srgb","components":[0.2275,0.2,0.3373],"hex":"#3a3356"},
|
|
71
|
+
"semantic-selected": {"colorSpace":"srgb","components":[0.2863,0.251,0.4275],"hex":"#49406d"},
|
|
72
|
+
"semantic-selected-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
73
|
+
"semantic-secondary": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
74
|
+
"semantic-secondary-foreground": {"colorSpace":"srgb","components":[0.9333,0.9255,0.9137],"hex":"#eeece9"},
|
|
75
|
+
"semantic-secondary-hover": {"colorSpace":"srgb","components":[0.2863,0.2784,0.2667],"hex":"#494744"},
|
|
76
|
+
"semantic-ring": {"colorSpace":"srgb","components":[0.3569,0.2471,0.7686],"hex":"#5b3fc4"},
|
|
77
|
+
"semantic-disabled-surface": {"colorSpace":"srgb","components":[0.1765,0.1686,0.1569],"hex":"#2d2b28"},
|
|
78
|
+
"semantic-skeleton": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
67
79
|
"semantic-overlay": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.6},
|
|
68
|
-
"semantic-hatch": {"colorSpace":"srgb","components":[0.
|
|
69
|
-
"semantic-corner-mark": {"colorSpace":"srgb","components":[0.
|
|
80
|
+
"semantic-hatch": {"colorSpace":"srgb","components":[0.2275,0.2196,0.2039],"hex":"#3a3834"},
|
|
81
|
+
"semantic-corner-mark": {"colorSpace":"srgb","components":[0.5804,0.5725,0.5569],"hex":"#94928e"},
|
|
70
82
|
"semantic-shadow-hairline": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.3},
|
|
71
83
|
"semantic-shadow-contact": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000","alpha":0.4},
|
|
72
|
-
"semantic-success-surface": {"colorSpace":"srgb","components":[0.
|
|
73
|
-
"semantic-success-border": {"colorSpace":"srgb","components":[0.
|
|
74
|
-
"semantic-warning-surface": {"colorSpace":"srgb","components":[0.
|
|
75
|
-
"semantic-warning-border": {"colorSpace":"srgb","components":[0.
|
|
76
|
-
"semantic-danger-surface": {"colorSpace":"srgb","components":[0.
|
|
77
|
-
"semantic-danger-border": {"colorSpace":"srgb","components":[0.
|
|
78
|
-
"semantic-info-surface": {"colorSpace":"srgb","components":[0.
|
|
79
|
-
"semantic-info-border": {"colorSpace":"srgb","components":[0.
|
|
80
|
-
"semantic-danger-foreground": {"colorSpace":"srgb","components":[0.
|
|
81
|
-
"semantic-warning-on-dark": {"colorSpace":"srgb","components":[0.
|
|
82
|
-
"semantic-danger-on-dark": {"colorSpace":"srgb","components":[0.
|
|
83
|
-
"semantic-info-on-dark": {"colorSpace":"srgb","components":[0.
|
|
84
|
+
"semantic-success-surface": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295","alpha":0.12},
|
|
85
|
+
"semantic-success-border": {"colorSpace":"srgb","components":[0.3569,0.8235,0.5843],"hex":"#5bd295","alpha":0.35},
|
|
86
|
+
"semantic-warning-surface": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b","alpha":0.12},
|
|
87
|
+
"semantic-warning-border": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b","alpha":0.35},
|
|
88
|
+
"semantic-danger-surface": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f","alpha":0.12},
|
|
89
|
+
"semantic-danger-border": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f","alpha":0.35},
|
|
90
|
+
"semantic-info-surface": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa","alpha":0.12},
|
|
91
|
+
"semantic-info-border": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa","alpha":0.35},
|
|
92
|
+
"semantic-danger-foreground": {"colorSpace":"srgb","components":[0.0824,0.0784,0.0667],"hex":"#151411"},
|
|
93
|
+
"semantic-warning-on-dark": {"colorSpace":"srgb","components":[0.9373,0.7529,0.3569],"hex":"#efc05b"},
|
|
94
|
+
"semantic-danger-on-dark": {"colorSpace":"srgb","components":[0.9608,0.502,0.498],"hex":"#f5807f"},
|
|
95
|
+
"semantic-info-on-dark": {"colorSpace":"srgb","components":[0.4588,0.7686,0.9804],"hex":"#75c4fa"},
|
|
84
96
|
"font-heading": ["Inter","system-ui","sans-serif"],
|
|
85
97
|
"font-body": ["Inter","system-ui","sans-serif"],
|
|
86
98
|
"font-mono": ["JetBrains Mono","ui-monospace","monospace"],
|
package/tokens/build/tokens.scss
CHANGED
|
@@ -13,7 +13,7 @@ $color-neutral-600: #5f5b57;
|
|
|
13
13
|
$color-neutral-700: #312f37;
|
|
14
14
|
$color-neutral-800: #26252b;
|
|
15
15
|
$color-neutral-900: #1b1a1e;
|
|
16
|
-
$color-neutral-950: #131217; // Darkest neutral.
|
|
16
|
+
$color-neutral-950: #131217; // Darkest neutral. Retained for compatibility; the dark theme's sidebar is dark.950.
|
|
17
17
|
$color-accent-50: #f7f4ff; // Lightest lilac. Light-theme tinted surface (row hover, ghost hover).
|
|
18
18
|
$color-accent-200: #ede8fd;
|
|
19
19
|
$color-accent-300: #ded5fb;
|
|
@@ -23,66 +23,78 @@ $color-accent-600: #7d68d1;
|
|
|
23
23
|
$color-accent-700: #6552b8;
|
|
24
24
|
$color-accent-800: #46309e;
|
|
25
25
|
$color-accent-900: #2e2170;
|
|
26
|
-
$color-accent-950: #211741; // Darkest lilac.
|
|
27
|
-
$color-accent-base: #
|
|
28
|
-
$color-status-success: #
|
|
29
|
-
$color-status-warning: #
|
|
30
|
-
$color-status-danger: #
|
|
31
|
-
$color-status-info: #
|
|
32
|
-
$
|
|
33
|
-
$
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
$
|
|
37
|
-
$
|
|
38
|
-
$
|
|
39
|
-
$
|
|
26
|
+
$color-accent-950: #211741; // Darkest lilac. Retained ramp step; the dark accent tints are dedicated literals on the semantic layer.
|
|
27
|
+
$color-accent-base: #5b3fc4; // Base accent primitive and the theme ink: deeper violet on light (6.36:1 on background), light lilac on dark (6.36:1 on background, 5.5:1 on surface). Flows into link and focus; the deep fill role lives on semantic.primary.
|
|
28
|
+
$color-status-success: #5bd295; // Success status primitive.
|
|
29
|
+
$color-status-warning: #efc05b; // Warning status primitive.
|
|
30
|
+
$color-status-danger: #f5807f; // Danger status primitive. The dark step sits at 4.6:1 on elevated-surface; a darker red missed AA there.
|
|
31
|
+
$color-status-info: #75c4fa; // Info status primitive.
|
|
32
|
+
$color-dark-50: #f8f6f3; // Lightest dark-ramp step.
|
|
33
|
+
$color-dark-100: #eeece9; // Foreground on dark. Text-eligible: passes WCAG AA 4.5:1 on every dark surface.
|
|
34
|
+
$color-dark-200: #d9d7d3;
|
|
35
|
+
$color-dark-300: #c6c4c0;
|
|
36
|
+
$color-dark-400: #aba9a5; // Muted foreground on dark.
|
|
37
|
+
$color-dark-450: #94928e; // Half step. Strong lines and subtle text share it on dark (border-strong, subtle-foreground), as neutral.500 does for both roles on light: dark.500 misses the 3:1 non-text gate on dark.800 and dark.700.
|
|
38
|
+
$color-dark-500: #6b6965; // Free step between the 450 split and the border pair. Not referenced by the semantic layer: 2.6:1 on dark.800 fails the 3:1 non-text gate.
|
|
39
|
+
$color-dark-600: #494744; // Borders and inputs on dark.
|
|
40
|
+
$color-dark-700: #3a3834; // Elevated surfaces, muted and secondary fills on dark.
|
|
41
|
+
$color-dark-800: #2d2b28; // Surface and card on dark.
|
|
42
|
+
$color-dark-900: #211f1c; // Background on dark.
|
|
43
|
+
$color-dark-950: #151411; // Darkest step. Sidebar on dark, and danger-foreground on a danger fill.
|
|
44
|
+
$semantic-background: #211f1c; // App canvas. Surface role, never text.
|
|
45
|
+
$semantic-surface: #2d2b28; // Cards, panels, table rows. Surface role.
|
|
46
|
+
$semantic-elevated-surface: #3a3834; // Menus, popovers, dialogs. Surface role.
|
|
47
|
+
$semantic-foreground: #eeece9; // Primary text. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
48
|
+
$semantic-muted-foreground: #aba9a5; // Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
49
|
+
$semantic-subtle-foreground: #94928e; // Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces.
|
|
50
|
+
$semantic-border: #494744; // Dividers and input outlines. Non-text role.
|
|
51
|
+
$semantic-primary: #684bb5; // Primary fill: primary buttons, solid badges, checked controls, the brand mark. Deep violet in both themes; on dark it is a dedicated fill and is not text-eligible, so ink roles (link, focus) take accent.base instead.
|
|
40
52
|
$semantic-accent: #ded5fb; // Emphasis and highlight. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
41
|
-
$semantic-success: #
|
|
42
|
-
$semantic-warning: #
|
|
43
|
-
$semantic-danger: #
|
|
44
|
-
$semantic-info: #
|
|
45
|
-
$semantic-focus: #
|
|
46
|
-
$semantic-disabled: #
|
|
47
|
-
$semantic-card: #
|
|
48
|
-
$semantic-card-foreground: #
|
|
49
|
-
$semantic-popover: #
|
|
50
|
-
$semantic-popover-foreground: #
|
|
51
|
-
$semantic-muted: #
|
|
52
|
-
$semantic-sidebar: #
|
|
53
|
-
$semantic-sidebar-border: #
|
|
54
|
-
$semantic-border-strong: #
|
|
55
|
-
$semantic-input: #
|
|
56
|
-
$semantic-primary-foreground: #
|
|
57
|
-
$semantic-primary-hover: #
|
|
58
|
-
$semantic-link: #
|
|
59
|
-
$semantic-accent-surface: #
|
|
60
|
-
$semantic-accent-surface-hover: #
|
|
61
|
-
$semantic-selected: #
|
|
62
|
-
$semantic-selected-foreground: #
|
|
63
|
-
$semantic-secondary: #
|
|
64
|
-
$semantic-secondary-foreground: #
|
|
65
|
-
$semantic-secondary-hover: #
|
|
66
|
-
$semantic-ring: #
|
|
67
|
-
$semantic-disabled-surface: #
|
|
68
|
-
$semantic-skeleton: #
|
|
53
|
+
$semantic-success: #5bd295; // Positive state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
54
|
+
$semantic-warning: #efc05b; // Caution state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
55
|
+
$semantic-danger: #f5807f; // Destructive or error state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
56
|
+
$semantic-info: #75c4fa; // Neutral informational state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
|
|
57
|
+
$semantic-focus: #5b3fc4; // Focus ring. Non-text role. >=3:1 against background. The light ink: alias of accent.base in both themes.
|
|
58
|
+
$semantic-disabled: #494744; // Disabled text and controls. Exempt from contrast minimums per WCAG 1.4.3.
|
|
59
|
+
$semantic-card: #2d2b28; // Panel and card fill. Alias of surface, named for the component that owns it.
|
|
60
|
+
$semantic-card-foreground: #eeece9; // Text on card.
|
|
61
|
+
$semantic-popover: #3a3834; // Menus, dialogs, command palette. Alias of elevated-surface.
|
|
62
|
+
$semantic-popover-foreground: #eeece9; // Text on popover.
|
|
63
|
+
$semantic-muted: #3a3834; // Recessed fill one step off card: table headers, card footers, segmented tracks. Surface role.
|
|
64
|
+
$semantic-sidebar: #151411; // Application shell navigation column. Sits below the canvas on dark, above it on light.
|
|
65
|
+
$semantic-sidebar-border: #494744; // Divider between sidebar and content.
|
|
66
|
+
$semantic-border-strong: #94928e; // Emphasised line: hover outlines, switch tracks, chart gridlines, corner marks. Non-text role, >=3:1 on background, surface and elevated-surface in both themes. On dark this is dark.450, sharing the subtle-text step as neutral.500 does on light.
|
|
67
|
+
$semantic-input: #494744; // Form control outline at rest.
|
|
68
|
+
$semantic-primary-foreground: #f7f5fe; // Text and icons on a primary fill. Near-white on the deep violet fill in both themes. Passes AA on primary in both themes.
|
|
69
|
+
$semantic-primary-hover: #795dc9; // Primary fill on hover - one step brighter than primary, keeping primary-foreground legible.
|
|
70
|
+
$semantic-link: #5b3fc4; // Inline and standalone links. The light ink: alias of accent.base in both themes, so links stay text-eligible where the primary fill is not.
|
|
71
|
+
$semantic-accent-surface: #2d2843; // Faintest accent tint: row hover, ghost-button hover. Non-text role.
|
|
72
|
+
$semantic-accent-surface-hover: #3a3356; // Accent tint one step stronger. Non-text role.
|
|
73
|
+
$semantic-selected: #49406d; // Selected row, active navigation item, highlighted palette result. One ramp step past accent-surface-hover, so a selected item and a hovered sibling never paint the same surface. Non-text role.
|
|
74
|
+
$semantic-selected-foreground: #eeece9; // Text on a selected row.
|
|
75
|
+
$semantic-secondary: #3a3834; // Neutral button fill, range track, count badge. Non-text role.
|
|
76
|
+
$semantic-secondary-foreground: #eeece9; // Text on a secondary fill.
|
|
77
|
+
$semantic-secondary-hover: #494744; // Secondary fill on hover. Non-text role.
|
|
78
|
+
$semantic-ring: #5b3fc4; // Focus ring, drag handle active state. Alias of focus, named for the property it sets.
|
|
79
|
+
$semantic-disabled-surface: #2d2b28; // Fill of a disabled control. Exempt from contrast minimums per WCAG 1.4.3.
|
|
80
|
+
$semantic-skeleton: #3a3834; // Loading placeholder fill. Non-text role.
|
|
69
81
|
$semantic-overlay: rgba(0, 0, 0, 0.6); // Scrim behind a modal layer. Non-text role.
|
|
70
|
-
$semantic-hatch: #
|
|
71
|
-
$semantic-corner-mark: #
|
|
82
|
+
$semantic-hatch: #3a3834; // Hatch stripe marking a region that is not data. One step off the surface it sits on — never raise it further, it is a texture, not a message.
|
|
83
|
+
$semantic-corner-mark: #94928e; // Corner registration marks. Non-text role.
|
|
72
84
|
$semantic-shadow-hairline: rgba(0, 0, 0, 0.3); // Shadow colour for the 1px contact shadow under a resting control.
|
|
73
85
|
$semantic-shadow-contact: rgba(0, 0, 0, 0.4); // Shadow colour for separated and floating layers. Darker on dark, where a shadow has to work harder.
|
|
74
|
-
$semantic-success-surface: rgba(
|
|
75
|
-
$semantic-success-border: rgba(
|
|
76
|
-
$semantic-warning-surface: rgba(
|
|
77
|
-
$semantic-warning-border: rgba(
|
|
78
|
-
$semantic-danger-surface: rgba(
|
|
79
|
-
$semantic-danger-border: rgba(
|
|
80
|
-
$semantic-info-surface: rgba(
|
|
81
|
-
$semantic-info-border: rgba(
|
|
82
|
-
$semantic-danger-foreground: #
|
|
83
|
-
$semantic-warning-on-dark: #
|
|
84
|
-
$semantic-danger-on-dark: #
|
|
85
|
-
$semantic-info-on-dark: #
|
|
86
|
+
$semantic-success-surface: rgba(91, 210, 149, 0.12); // Success tinted fill for badges and callouts — the success hue at low alpha. Non-text role.
|
|
87
|
+
$semantic-success-border: rgba(91, 210, 149, 0.35); // Success outline for badges and callouts. Non-text role.
|
|
88
|
+
$semantic-warning-surface: rgba(239, 192, 91, 0.12); // Warning tinted fill for badges and callouts — the warning hue at low alpha. Non-text role.
|
|
89
|
+
$semantic-warning-border: rgba(239, 192, 91, 0.35); // Warning outline for badges and callouts. Non-text role.
|
|
90
|
+
$semantic-danger-surface: rgba(245, 128, 127, 0.12); // Danger tinted fill for badges and callouts — the danger hue at low alpha. Non-text role.
|
|
91
|
+
$semantic-danger-border: rgba(245, 128, 127, 0.35); // Danger outline for badges and callouts. Non-text role.
|
|
92
|
+
$semantic-info-surface: rgba(117, 196, 250, 0.12); // Info tinted fill for badges and callouts — the info hue at low alpha. Non-text role.
|
|
93
|
+
$semantic-info-border: rgba(117, 196, 250, 0.35); // Info outline for badges and callouts. Non-text role.
|
|
94
|
+
$semantic-danger-foreground: #151411; // Text and icons on a danger fill. Inverts with the fill, like primary-foreground: white on the light-theme red, near-black on the dark-theme salmon.
|
|
95
|
+
$semantic-warning-on-dark: #efc05b; // Warning on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
|
|
96
|
+
$semantic-danger-on-dark: #f5807f; // Danger on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
|
|
97
|
+
$semantic-info-on-dark: #75c4fa; // Info on a permanently dark surface (log view, terminal). Theme-invariant on purpose: the surface does not follow color-scheme, so neither can the text.
|
|
86
98
|
$font-heading: Inter, system-ui, sans-serif; // Heading family. Inter, same as body; headings differentiate by size and weight.
|
|
87
99
|
$font-body: Inter, system-ui, sans-serif; // Body family. Inter for interface text.
|
|
88
100
|
$font-mono: 'JetBrains Mono', ui-monospace, monospace; // Monospace family. Code and machine-readable values (hashes, identifiers). Numeric tables use body with tabular figures, not mono.
|