@owodesign/owoui 0.1.0 → 0.1.1

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.
Files changed (5) hide show
  1. package/dist/tokens.d.ts +10 -6
  2. package/dist/tokens.min.js +1 -1
  3. package/package.json +4 -1
  4. package/src/dark.css +70 -0
  5. package/src/styles/tokens.css +17 -0
package/dist/tokens.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- declare const semanticTokenKeys: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-text-primary", "--ui-text-secondary", "--ui-text-muted", "--ui-text-on-accent", "--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-text", "--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text", "--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset", "--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
1
+ declare const semanticTokenKeys: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-muted", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-canvas-bg", "--ui-canvas-bg-subtle", "--ui-surface-container", "--ui-surface-container-high", "--ui-surface-container-highest", "--ui-text-primary", "--ui-text-secondary", "--ui-text-muted", "--ui-text-on-accent", "--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-bg-muted", "--ui-accent-text", "--ui-accent-border", "--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-bg-emphasis", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text", "--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-radius-xl", "--ui-control-radius-2xl", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset", "--ui-font-heading", "--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
2
2
  type SemanticTokenKey = (typeof semanticTokenKeys)[number];
3
3
  declare const tokenGroups: readonly [{
4
4
  readonly id: "surface";
5
5
  readonly label: "Surface";
6
- readonly tokens: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur"];
6
+ readonly tokens: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-muted", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-canvas-bg", "--ui-canvas-bg-subtle", "--ui-surface-container", "--ui-surface-container-high", "--ui-surface-container-highest"];
7
7
  }, {
8
8
  readonly id: "text";
9
9
  readonly label: "Text";
@@ -11,21 +11,25 @@ declare const tokenGroups: readonly [{
11
11
  }, {
12
12
  readonly id: "accent";
13
13
  readonly label: "Accent";
14
- readonly tokens: readonly ["--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-text"];
14
+ readonly tokens: readonly ["--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-bg-muted", "--ui-accent-text", "--ui-accent-border"];
15
15
  }, {
16
16
  readonly id: "feedback";
17
17
  readonly label: "Feedback";
18
- readonly tokens: readonly ["--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text"];
18
+ readonly tokens: readonly ["--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-bg-emphasis", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text"];
19
19
  }, {
20
20
  readonly id: "control";
21
21
  readonly label: "Control";
22
- readonly tokens: readonly ["--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset"];
22
+ readonly tokens: readonly ["--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-radius-xl", "--ui-control-radius-2xl", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset"];
23
+ }, {
24
+ readonly id: "typography";
25
+ readonly label: "Typography";
26
+ readonly tokens: readonly ["--ui-font-heading"];
23
27
  }, {
24
28
  readonly id: "motion-density";
25
29
  readonly label: "Motion & Density";
26
30
  readonly tokens: readonly ["--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
27
31
  }];
28
- declare const presetNames: readonly ["default", "flat", "elevated", "glass"];
32
+ declare const presetNames: readonly ["default", "dark", "flat", "elevated", "glass"];
29
33
  type OwoUiPresetName = (typeof presetNames)[number];
30
34
  declare const tokenDescriptions: Record<SemanticTokenKey, string>;
31
35
 
package/dist/tokens.min.js CHANGED
@@ -1 +1 @@
1
- var e=["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent","--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-text","--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text","--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset","--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"],r=[{id:"surface",label:"Surface",tokens:["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur"]},{id:"text",label:"Text",tokens:["--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-text"]},{id:"feedback",label:"Feedback",tokens:["--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text"]},{id:"control",label:"Control",tokens:["--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset"]},{id:"motion-density",label:"Motion & Density",tokens:["--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"]}],o=["default","flat","elevated","glass"],t={"--ui-surface-bg":"Default component surface background.","--ui-surface-bg-subtle":"Lower-emphasis surface background.","--ui-surface-bg-raised":"Raised surface background for floating or elevated panels.","--ui-surface-bg-inset":"Inset surface background for inputs and compact controls.","--ui-surface-border":"Default component border color.","--ui-surface-border-strong":"Higher-emphasis border or focus-adjacent border color.","--ui-surface-shadow":"Default surface shadow for raised UI.","--ui-surface-shadow-strong":"Higher-emphasis shadow for popovers and overlays.","--ui-surface-blur":"Backdrop blur amount for translucent surface styles.","--ui-text-primary":"Primary readable foreground text color.","--ui-text-secondary":"Secondary readable foreground text color.","--ui-text-muted":"Muted or tertiary text color.","--ui-text-on-accent":"Readable text color when placed on accent surfaces.","--ui-accent-bg":"Primary accent background color.","--ui-accent-bg-hover":"Primary accent hover color.","--ui-accent-text":"Readable text color used on accent backgrounds.","--ui-success-bg":"Success background treatment.","--ui-success-border":"Success border treatment.","--ui-success-text":"Success foreground text color.","--ui-warning-bg":"Warning background treatment.","--ui-warning-border":"Warning border treatment.","--ui-warning-text":"Warning foreground text color.","--ui-danger-bg":"Danger background treatment.","--ui-danger-border":"Danger border treatment.","--ui-danger-text":"Danger foreground text color.","--ui-info-bg":"Info background treatment.","--ui-info-border":"Info border treatment.","--ui-info-text":"Info foreground text color.","--ui-control-radius-sm":"Small control radius.","--ui-control-radius-md":"Default control radius.","--ui-control-radius-lg":"Large control radius.","--ui-control-border-width":"Default border width for controls.","--ui-control-focus-ring":"Focus ring color.","--ui-control-focus-ring-offset":"Focus ring offset base color.","--ui-motion-duration-fast":"Fast motion duration.","--ui-motion-duration-default":"Default motion duration.","--ui-motion-ease-standard":"Default motion easing curve.","--ui-density-compact":"Compact density scale.","--ui-density-default":"Default density scale.","--ui-density-comfortable":"Comfortable density scale."};export{o as presetNames,e as semanticTokenKeys,t as tokenDescriptions,r as tokenGroups};
1
+ var e=["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest","--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent","--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border","--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text","--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset","--ui-font-heading","--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"],r=[{id:"surface",label:"Surface",tokens:["--ui-surface-bg","--ui-surface-bg-subtle","--ui-surface-bg-raised","--ui-surface-bg-inset","--ui-surface-border","--ui-surface-border-muted","--ui-surface-border-strong","--ui-surface-shadow","--ui-surface-shadow-strong","--ui-surface-blur","--ui-canvas-bg","--ui-canvas-bg-subtle","--ui-surface-container","--ui-surface-container-high","--ui-surface-container-highest"]},{id:"text",label:"Text",tokens:["--ui-text-primary","--ui-text-secondary","--ui-text-muted","--ui-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--ui-accent-bg","--ui-accent-bg-hover","--ui-accent-bg-muted","--ui-accent-text","--ui-accent-border"]},{id:"feedback",label:"Feedback",tokens:["--ui-success-bg","--ui-success-border","--ui-success-text","--ui-warning-bg","--ui-warning-border","--ui-warning-text","--ui-danger-bg","--ui-danger-bg-emphasis","--ui-danger-border","--ui-danger-text","--ui-info-bg","--ui-info-border","--ui-info-text"]},{id:"control",label:"Control",tokens:["--ui-control-radius-sm","--ui-control-radius-md","--ui-control-radius-lg","--ui-control-radius-xl","--ui-control-radius-2xl","--ui-control-border-width","--ui-control-focus-ring","--ui-control-focus-ring-offset"]},{id:"typography",label:"Typography",tokens:["--ui-font-heading"]},{id:"motion-density",label:"Motion & Density",tokens:["--ui-motion-duration-fast","--ui-motion-duration-default","--ui-motion-ease-standard","--ui-density-compact","--ui-density-default","--ui-density-comfortable"]}],o=["default","dark","flat","elevated","glass"],t={"--ui-surface-bg":"Default component surface background.","--ui-surface-bg-subtle":"Lower-emphasis surface background.","--ui-surface-bg-raised":"Raised surface background for floating or elevated panels.","--ui-surface-bg-inset":"Inset surface background for inputs and compact controls.","--ui-surface-border":"Default component border color.","--ui-surface-border-muted":"Lowest-emphasis border for subtle separators and dividers.","--ui-surface-border-strong":"Higher-emphasis border or focus-adjacent border color.","--ui-surface-shadow":"Default surface shadow for raised UI.","--ui-surface-shadow-strong":"Higher-emphasis shadow for popovers and overlays.","--ui-surface-blur":"Backdrop blur amount for translucent surface styles.","--ui-canvas-bg":"Page-level canvas background, distinct from component surfaces.","--ui-canvas-bg-subtle":"Subtle canvas background for secondary page regions.","--ui-surface-container":"Container background for sidebars, panels, and layout regions.","--ui-surface-container-high":"Higher-emphasis container background for nested panels.","--ui-surface-container-highest":"Highest-emphasis container background for deeply nested panels.","--ui-text-primary":"Primary readable foreground text color.","--ui-text-secondary":"Secondary readable foreground text color.","--ui-text-muted":"Muted or tertiary text color.","--ui-text-on-accent":"Readable text color when placed on accent surfaces.","--ui-accent-bg":"Primary accent background color.","--ui-accent-bg-hover":"Primary accent hover color.","--ui-accent-bg-muted":"Muted accent background for hover, selected, and highlighted states.","--ui-accent-text":"Readable text color used on accent backgrounds.","--ui-accent-border":"Accent-tinted border for active indicators and emphasis separators.","--ui-success-bg":"Success background treatment.","--ui-success-border":"Success border treatment.","--ui-success-text":"Success foreground text color.","--ui-warning-bg":"Warning background treatment.","--ui-warning-border":"Warning border treatment.","--ui-warning-text":"Warning foreground text color.","--ui-danger-bg":"Danger background treatment.","--ui-danger-bg-emphasis":"Stronger danger background for hover, active, or destructive emphasis.","--ui-danger-border":"Danger border treatment.","--ui-danger-text":"Danger foreground text color.","--ui-info-bg":"Info background treatment.","--ui-info-border":"Info border treatment.","--ui-info-text":"Info foreground text color.","--ui-control-radius-sm":"Small control radius.","--ui-control-radius-md":"Default control radius.","--ui-control-radius-lg":"Large control radius.","--ui-control-radius-xl":"Extra-large radius for drawers, dialogs, and large containers.","--ui-control-radius-2xl":"Double extra-large radius for sheets and full-page overlays.","--ui-control-border-width":"Default border width for controls.","--ui-control-focus-ring":"Focus ring color.","--ui-control-focus-ring-offset":"Focus ring offset base color.","--ui-font-heading":"Heading font family stack.","--ui-motion-duration-fast":"Fast motion duration.","--ui-motion-duration-default":"Default motion duration.","--ui-motion-ease-standard":"Default motion easing curve.","--ui-density-compact":"Compact density scale.","--ui-density-default":"Default density scale.","--ui-density-comfortable":"Comfortable density scale."};export{o as presetNames,e as semanticTokenKeys,t as tokenDescriptions,r as tokenGroups};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@owodesign/owoui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Reusable React UI foundation components and theme presets.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.min.js",
@@ -38,6 +38,7 @@
38
38
  },
39
39
  "./storybook/catalog.json": "./dist/storybook/catalog.json",
40
40
  "./style.css": "./src/style.css",
41
+ "./dark.css": "./src/dark.css",
41
42
  "./flat.css": "./src/flat.css",
42
43
  "./elevated.css": "./src/elevated.css",
43
44
  "./glass.css": "./src/glass.css"
@@ -46,6 +47,7 @@
46
47
  "dist",
47
48
  "src/style.css",
48
49
  "src/tokens.css",
50
+ "src/dark.css",
49
51
  "src/flat.css",
50
52
  "src/elevated.css",
51
53
  "src/glass.css",
@@ -54,6 +56,7 @@
54
56
  "sideEffects": [
55
57
  "./src/style.css",
56
58
  "./src/tokens.css",
59
+ "./src/dark.css",
57
60
  "./src/flat.css",
58
61
  "./src/elevated.css",
59
62
  "./src/glass.css",
package/src/dark.css ADDED
@@ -0,0 +1,70 @@
1
+ @import "./style.css";
2
+
3
+ :root[data-theme="dark"],
4
+ .owoui-theme-dark {
5
+ /* ── Neutral scale (inverted for dark context) ── */
6
+ --color-n900: #fafafa;
7
+ --color-n800: #e4e4e7;
8
+ --color-n700: #d4d4d8;
9
+ --color-n600: #a1a1aa;
10
+ --color-n500: #71717a;
11
+ --color-n400: #3f3f46;
12
+ --color-n300: #27272a;
13
+
14
+ /* ── Brand (adjusted for dark background legibility) ── */
15
+ --color-brand-primary: #e11d48;
16
+ --color-brand-primary-hover: #f43f5e;
17
+ --color-brand-accent: #fb7185;
18
+
19
+ /* ── Surfaces ── */
20
+ --color-surface-canvas: #09090b;
21
+ --color-surface-base: #18181b;
22
+ --color-surface-subtle: #1c1c1f;
23
+ --color-surface-raised: #27272a;
24
+ --color-surface-inset: #111113;
25
+ --color-surface-border: rgba(255, 255, 255, 0.12);
26
+ --color-surface-ring: rgba(255, 255, 255, 0.24);
27
+ --color-surface-overlay: rgba(0, 0, 0, 0.6);
28
+
29
+ /* ── Overlay & highlight ── */
30
+ --color-overlay-soft: rgba(0, 0, 0, 0.32);
31
+ --color-overlay-strong: rgba(0, 0, 0, 0.56);
32
+ --color-highlight-soft: rgba(255, 255, 255, 0.06);
33
+ --color-highlight-sheen: rgba(255, 255, 255, 0.08);
34
+
35
+ --color-text-on-brand: #ffffff;
36
+
37
+ /* ── Code blocks ── */
38
+ --color-code-block-bg: #1e1e22;
39
+ --color-code-block-border: #2d2d32;
40
+ --color-code-block-divider: #27272c;
41
+ --color-code-inline-bg: #27272a;
42
+
43
+ /* ── Shadows (deeper for dark context) ── */
44
+ --shadow-raised: 0 10px 20px rgba(0, 0, 0, 0.30);
45
+ --shadow-popover: 0 18px 40px rgba(0, 0, 0, 0.40);
46
+
47
+ /* ── Feedback (lightened text for dark backgrounds) ── */
48
+ --color-admin-success-bg: rgba(16, 185, 129, 0.15);
49
+ --color-admin-success-border: rgba(16, 185, 129, 0.30);
50
+ --color-admin-success-text: #6ee7b7;
51
+ --color-admin-warning-bg: rgba(245, 158, 11, 0.15);
52
+ --color-admin-warning-border: rgba(245, 158, 11, 0.30);
53
+ --color-admin-warning-text: #fbbf24;
54
+ --color-admin-danger-bg: rgba(239, 68, 68, 0.15);
55
+ --color-admin-danger-border: rgba(239, 68, 68, 0.30);
56
+ --color-admin-danger-text: #fca5a5;
57
+ --color-admin-info-bg: rgba(14, 165, 233, 0.15);
58
+ --color-admin-info-border: rgba(14, 165, 233, 0.30);
59
+ --color-admin-info-text: #7dd3fc;
60
+
61
+ /* ── New semantic tokens: dark overrides ── */
62
+ --ui-canvas-bg-subtle: #0f0f11;
63
+ --ui-surface-border-muted: rgba(255, 255, 255, 0.06);
64
+ --ui-surface-container: #1e1e22;
65
+ --ui-surface-container-high: #252529;
66
+ --ui-surface-container-highest: #2d2d32;
67
+ --ui-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
68
+ --ui-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
69
+ --ui-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
70
+ }
package/src/styles/tokens.css CHANGED
@@ -28,6 +28,8 @@
28
28
  --color-highlight-sheen: rgba(255, 255, 255, 0.34);
29
29
  --color-text-on-brand: #ffffff;
30
30
  --color-code-block-bg: #f4f4f5;
31
+ --color-code-block-border: #e4e4e7;
32
+ --color-code-block-divider: #ececed;
31
33
  --color-code-inline-bg: #f4f4f5;
32
34
  --shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
33
35
  --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
@@ -60,11 +62,19 @@
60
62
  --ui-surface-bg-raised: var(--color-surface-raised);
61
63
  --ui-surface-bg-inset: var(--color-surface-inset);
62
64
  --ui-surface-border: var(--color-surface-border);
65
+ --ui-surface-border-muted: rgba(0, 0, 0, 0.06);
63
66
  --ui-surface-border-strong: var(--color-surface-ring);
64
67
  --ui-surface-shadow: var(--shadow-raised);
65
68
  --ui-surface-shadow-strong: var(--shadow-popover);
66
69
  --ui-surface-blur: 0px;
67
70
 
71
+ --ui-canvas-bg: var(--color-surface-canvas);
72
+ --ui-canvas-bg-subtle: #f5f5f4;
73
+
74
+ --ui-surface-container: #f4f4f5;
75
+ --ui-surface-container-high: #ececed;
76
+ --ui-surface-container-highest: #e4e4e7;
77
+
68
78
  --ui-text-primary: var(--color-n800);
69
79
  --ui-text-secondary: var(--color-n600);
70
80
  --ui-text-muted: var(--color-n500);
@@ -72,7 +82,9 @@
72
82
 
73
83
  --ui-accent-bg: var(--color-brand-primary);
74
84
  --ui-accent-bg-hover: var(--color-brand-primary-hover);
85
+ --ui-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
75
86
  --ui-accent-text: var(--color-text-on-brand);
87
+ --ui-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
76
88
 
77
89
  --ui-success-bg: var(--color-admin-success-bg);
78
90
  --ui-success-border: var(--color-admin-success-border);
@@ -81,6 +93,7 @@
81
93
  --ui-warning-border: var(--color-admin-warning-border);
82
94
  --ui-warning-text: var(--color-admin-warning-text);
83
95
  --ui-danger-bg: var(--color-admin-danger-bg);
96
+ --ui-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
84
97
  --ui-danger-border: var(--color-admin-danger-border);
85
98
  --ui-danger-text: var(--color-admin-danger-text);
86
99
  --ui-info-bg: var(--color-admin-info-bg);
@@ -90,10 +103,14 @@
90
103
  --ui-control-radius-sm: 0.5rem;
91
104
  --ui-control-radius-md: 0.75rem;
92
105
  --ui-control-radius-lg: 1rem;
106
+ --ui-control-radius-xl: 1.5rem;
107
+ --ui-control-radius-2xl: 2rem;
93
108
  --ui-control-border-width: 1px;
94
109
  --ui-control-focus-ring: var(--color-surface-ring);
95
110
  --ui-control-focus-ring-offset: var(--color-surface-base);
96
111
 
112
+ --ui-font-heading: var(--font-heading);
113
+
97
114
  --ui-motion-duration-fast: 0.15s;
98
115
  --ui-motion-duration-default: 0.2s;
99
116
  --ui-motion-ease-standard: var(--ease-standard);