@xcv-ui/tokens 0.0.0-stage → 0.2.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.
Files changed (9) hide show
  1. package/LICENSE +17 -0
  2. package/README.md +57 -2
  3. package/dist/index.d.ts +42 -0
  4. package/dist/index.js +15 -0
  5. package/package.json +37 -4
  6. package/styles/brands/crimson-circuit.css +138 -0
  7. package/styles/primitives.css +198 -0
  8. package/styles/themes/dark.css +113 -0
  9. package/styles/themes/light.css +112 -0
package/LICENSE ADDED
@@ -0,0 +1,17 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 XCV contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
package/README.md CHANGED
@@ -1,3 +1,58 @@
1
- # Temporary Holding Version
1
+ # @xcv-ui/tokens
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Design-token definitions and scoped Light and Dark color modes for XCV, with an independent brand-token layer.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @xcv-ui/tokens
9
+ ```
10
+
11
+ ## Available stylesheets
12
+
13
+ Import the stylesheet that matches the intended use:
14
+
15
+ ```tsx
16
+ // Semantic token primitives
17
+ import "@xcv-ui/tokens/primitives.css";
18
+
19
+ // Or choose one scoped color mode:
20
+ import "@xcv-ui/tokens/themes/dark.css";
21
+ // import "@xcv-ui/tokens/themes/light.css";
22
+ ```
23
+
24
+ The Dark color mode is the default when no explicit Light mode is applied. The Light and Dark modes expose the same semantic token names. Apply a mode to the application subtree when needed:
25
+
26
+ ```tsx
27
+ <div data-xcv-mode="light">
28
+ {/* themed application content */}
29
+ </div>
30
+ ```
31
+
32
+ Use `data-xcv-mode="light"` to opt into Light; Dark is the default. Use the optional `data-xcv-brand` attribute to scope a consumer-owned brand stylesheet. Import brand overrides after the mode stylesheet. The legacy `data-xcv-theme="light|dark"` attribute remains supported as a deprecated alias. XCV does not modify `body` styles or automatically detect `prefers-color-scheme`.
33
+
34
+ ## With @xcv-ui/ui
35
+
36
+ When using XCV components, import both the color mode and UI styles:
37
+
38
+ ```tsx
39
+ import "@xcv-ui/tokens/themes/dark.css";
40
+ import "@xcv-ui/ui/styles.css";
41
+ ```
42
+
43
+ ## Design principles
44
+
45
+ - Components consume semantic tokens rather than primitive values.
46
+ - Light and Dark themes maintain parallel semantic token contracts.
47
+ - Color modes are scoped by `[data-xcv-mode]`; brand layers are scoped by `[data-xcv-brand]`.
48
+ - No global reset or application-specific styles are injected.
49
+
50
+ See the [token contract](https://github.com/LuisAnaya/XCV/blob/main/docs/design-system/TOKENS.md) for naming and usage guidance.
51
+
52
+ ## Project status
53
+
54
+ XCV is under active development. Validate package installation, CSS resolution, and theme behavior in a consuming application before production use.
55
+
56
+ ## License
57
+
58
+ MIT. See the accompanying `LICENSE` file.
package/dist/index.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Public token package entrypoint.
3
+ *
4
+ * CSS token files are exposed through package subpath exports:
5
+ * @xcv-ui/tokens/primitives.css
6
+ * @xcv-ui/tokens/themes/light.css
7
+ * @xcv-ui/tokens/themes/dark.css
8
+ *
9
+ * Brand identity and color mode are independent dimensions:
10
+ * - data-xcv-brand selects a consumer- or library-provided brand layer.
11
+ * - data-xcv-mode selects the Light or Dark semantic mode.
12
+ *
13
+ * The legacy data-xcv-theme attribute remains supported as a color-mode alias.
14
+ */
15
+ declare const XCV_TOKEN_PREFIX: "--xcv-";
16
+ declare const XCV_BRAND_ATTRIBUTE: "data-xcv-brand";
17
+ declare const XCV_MODE_ATTRIBUTE: "data-xcv-mode";
18
+ /** @deprecated Use XCV_MODE_ATTRIBUTE. Kept for existing consumers. */
19
+ declare const XCV_THEME_ATTRIBUTE: "data-xcv-theme";
20
+ declare const XCV_DEFAULT_BRAND: "default";
21
+ declare const XCV_DEFAULT_COLOR_MODE: "dark";
22
+ type XcvColorMode = "light" | "dark";
23
+ /**
24
+ * Brand identifiers are intentionally open-ended so consumers can define
25
+ * their own brands without waiting for a new XCV release.
26
+ */
27
+ type XcvBrand = string & {};
28
+ /** @deprecated Use XcvColorMode. */
29
+ type XcvTheme = XcvColorMode;
30
+ /**
31
+ * Attribute contract for an application-owned theme root.
32
+ * Omit brand to use the shipped default visual identity.
33
+ * Omit mode to use the shipped Dark default.
34
+ */
35
+ interface XcvThemeAttributes {
36
+ "data-xcv-brand"?: XcvBrand;
37
+ "data-xcv-mode"?: XcvColorMode;
38
+ /** @deprecated Use data-xcv-mode. */
39
+ "data-xcv-theme"?: XcvColorMode;
40
+ }
41
+
42
+ export { XCV_BRAND_ATTRIBUTE, XCV_DEFAULT_BRAND, XCV_DEFAULT_COLOR_MODE, XCV_MODE_ATTRIBUTE, XCV_THEME_ATTRIBUTE, XCV_TOKEN_PREFIX, type XcvBrand, type XcvColorMode, type XcvTheme, type XcvThemeAttributes };
package/dist/index.js ADDED
@@ -0,0 +1,15 @@
1
+ // src/index.ts
2
+ var XCV_TOKEN_PREFIX = "--xcv-";
3
+ var XCV_BRAND_ATTRIBUTE = "data-xcv-brand";
4
+ var XCV_MODE_ATTRIBUTE = "data-xcv-mode";
5
+ var XCV_THEME_ATTRIBUTE = "data-xcv-theme";
6
+ var XCV_DEFAULT_BRAND = "default";
7
+ var XCV_DEFAULT_COLOR_MODE = "dark";
8
+ export {
9
+ XCV_BRAND_ATTRIBUTE,
10
+ XCV_DEFAULT_BRAND,
11
+ XCV_DEFAULT_COLOR_MODE,
12
+ XCV_MODE_ATTRIBUTE,
13
+ XCV_THEME_ATTRIBUTE,
14
+ XCV_TOKEN_PREFIX
15
+ };
package/package.json CHANGED
@@ -1,6 +1,39 @@
1
1
  {
2
2
  "name": "@xcv-ui/tokens",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.2.0",
4
+ "description": "XCV design tokens and opt-in themes",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": [
8
+ "**/*.css"
9
+ ],
10
+ "main": "./dist/index.js",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.js"
16
+ },
17
+ "./primitives.css": "./styles/primitives.css",
18
+ "./themes/light.css": "./styles/themes/light.css",
19
+ "./themes/dark.css": "./styles/themes/dark.css",
20
+ "./brands/crimson-circuit.css": "./styles/brands/crimson-circuit.css"
21
+ },
22
+ "files": [
23
+ "dist",
24
+ "styles",
25
+ "README.md",
26
+ "LICENSE"
27
+ ],
28
+ "publishConfig": {
29
+ "access": "public",
30
+ "registry": "https://registry.npmjs.org/"
31
+ },
32
+ "scripts": {
33
+ "build": "tsup src/index.ts --format esm --dts --clean",
34
+ "typecheck": "tsc --noEmit -p tsconfig.json",
35
+ "test": "vitest run --passWithNoTests",
36
+ "prepublishOnly": "npm run build && npm run typecheck && npm test",
37
+ "clean": "rm -rf dist"
38
+ }
39
+ }
package/styles/brands/crimson-circuit.css ADDED
@@ -0,0 +1,138 @@
1
+ /*
2
+ * Crimson Circuit brand theme.
3
+ *
4
+ * Import after exactly one XCV color-mode stylesheet and after @xcv-ui/ui/styles.css.
5
+ * The brand layer overrides semantic tokens only; component styles remain unchanged.
6
+ * Dark is inherited from the XCV default mode when data-xcv-mode is omitted.
7
+ */
8
+
9
+ [data-xcv-brand="crimson-circuit"],
10
+ [data-xcv-brand="crimson-circuit"] :is([data-xcv-mode="dark"], [data-xcv-theme="dark"]:not([data-xcv-mode])) {
11
+ color-scheme: dark;
12
+
13
+ /* Dark surfaces and typography */
14
+ --xcv-color-surface: #12161B;
15
+ --xcv-color-surface-subtle: #1B222A;
16
+ --xcv-color-surface-raised: #252E38;
17
+ --xcv-color-surface-elevated: #252E38;
18
+ --xcv-color-surface-overlay: #1B222A;
19
+ --xcv-color-text-primary: #F2F5F7;
20
+ --xcv-color-text-secondary: #A0ABB5;
21
+ --xcv-color-text-muted: #8B99A1;
22
+ --xcv-color-text-accent: #F08075;
23
+ --xcv-color-text-accent-cyan: #69AEDA;
24
+ --xcv-color-text-accent-lavender: #A88BEA;
25
+ --xcv-color-text-inverse: #FFFFFF;
26
+
27
+ /* Dark borders, actions, and brand identity */
28
+ --xcv-color-border: #303B47;
29
+ --xcv-color-border-subtle: #252E38;
30
+ --xcv-color-border-strong: #647078;
31
+ --xcv-color-border-focus: #69AEDA;
32
+ --xcv-color-action-primary: #B94A5A;
33
+ --xcv-color-action-primary-hover: #713C3A;
34
+ --xcv-color-action-secondary: #252E38;
35
+ --xcv-color-accent: #E6534A;
36
+ --xcv-color-accent-cobalt: #E6534A;
37
+ --xcv-color-accent-cyan: #69AEDA;
38
+ --xcv-color-accent-amber: #E0AD58;
39
+ --xcv-color-accent-coral: #E6534A;
40
+ --xcv-color-accent-lavender: #A88BEA;
41
+
42
+ /* Links and focus */
43
+ --xcv-color-link: #69AEDA;
44
+ --xcv-color-link-hover: #9ACDF1;
45
+ --xcv-color-focus-ring: #69AEDA;
46
+
47
+ /* Semantic feedback stays distinct from brand identity */
48
+ --xcv-color-feedback-success: #79C99B;
49
+ --xcv-color-feedback-warning: #E0AD58;
50
+ --xcv-color-feedback-error: #F08075;
51
+ --xcv-color-feedback-info: #69AEDA;
52
+ --xcv-color-feedback-success-background: #1C2C24;
53
+ --xcv-color-feedback-warning-background: #30291D;
54
+ --xcv-color-feedback-error-background: #321F20;
55
+ --xcv-color-feedback-info-background: #21303A;
56
+
57
+ /* Brand and surface gradients */
58
+ --xcv-gradient-atmosphere: linear-gradient(135deg, #12161B 0%, #1B222A 65%, #29213B 100%);
59
+ --xcv-gradient-action-primary: linear-gradient(110deg, #7D2929 0%, #B94A5A 55%, #E6534A 100%);
60
+ --xcv-gradient-action-primary-hover: linear-gradient(110deg, #713C3A 0%, #B94A5A 55%, #E6534A 100%);
61
+ --xcv-gradient-action-primary-accessible: linear-gradient(110deg, #A33B35 0%, #B94A5A 100%);
62
+ --xcv-gradient-action-primary-accessible-hover: linear-gradient(110deg, #713C3A 0%, #A33B35 100%);
63
+ --xcv-gradient-electric: linear-gradient(110deg, #69AEDA 0%, #48C9B0 60%, #A88BEA 100%);
64
+ --xcv-gradient-aurora: linear-gradient(110deg, #69AEDA 0%, #48C9B0 45%, #A88BEA 100%);
65
+ --xcv-gradient-action-secondary: linear-gradient(135deg, #252E38 0%, #1B222A 100%);
66
+ --xcv-gradient-control-surface: linear-gradient(145deg, #1B222A 0%, #12161B 100%);
67
+ --xcv-gradient-control-surface-hover: linear-gradient(145deg, #252E38 0%, #1B222A 100%);
68
+ --xcv-gradient-surface: radial-gradient(ellipse at 8% 0%, rgb(230 83 74 / 0.08) 0%, transparent 48%), linear-gradient(138deg, #1B222A 0%, #12161B 100%);
69
+ --xcv-gradient-surface-subtle: linear-gradient(138deg, #1B222A 0%, #12161B 100%);
70
+ --xcv-gradient-surface-hover: radial-gradient(ellipse at 12% 0%, rgb(105 174 218 / 0.12) 0%, transparent 48%), linear-gradient(138deg, #252E38 0%, #1B222A 100%);
71
+
72
+ /* Shared overlay treatment */
73
+ --xcv-overlay-background: rgb(18 22 27 / 0.88);
74
+ --xcv-overlay-border: rgb(100 112 120 / 0.72);
75
+ }
76
+
77
+ /* Light mode keeps the same brand anchors and adapts semantic roles for contrast. */
78
+ [data-xcv-brand="crimson-circuit"]:is([data-xcv-mode="light"], [data-xcv-theme="light"]:not([data-xcv-mode])),
79
+ [data-xcv-brand="crimson-circuit"] :is([data-xcv-mode="light"], [data-xcv-theme="light"]:not([data-xcv-mode])) {
80
+ color-scheme: light;
81
+
82
+ --xcv-color-surface: #F2F5F7;
83
+ --xcv-color-surface-subtle: #FFFFFF;
84
+ --xcv-color-surface-raised: #EDF5FA;
85
+ --xcv-color-surface-elevated: #FFFFFF;
86
+ --xcv-color-surface-overlay: #FFFFFF;
87
+ --xcv-color-text-primary: #12161B;
88
+ --xcv-color-text-secondary: #50595E;
89
+ --xcv-color-text-muted: #647078;
90
+ --xcv-color-text-accent: #A33B35;
91
+ --xcv-color-text-accent-cyan: #086B7C;
92
+ --xcv-color-text-accent-lavender: #7159A8;
93
+ --xcv-color-text-inverse: #FFFFFF;
94
+
95
+ --xcv-color-border: #C4CDD1;
96
+ --xcv-color-border-subtle: #EDF5FA;
97
+ --xcv-color-border-strong: #647078;
98
+ --xcv-color-border-focus: #A33B35;
99
+ --xcv-color-action-primary: #A33B35;
100
+ --xcv-color-action-primary-hover: #713C3A;
101
+ --xcv-color-action-secondary: #EDF5FA;
102
+ --xcv-color-accent: #E6534A;
103
+ --xcv-color-accent-cobalt: #E6534A;
104
+ --xcv-color-accent-cyan: #69AEDA;
105
+ --xcv-color-accent-amber: #E0AD58;
106
+ --xcv-color-accent-coral: #E6534A;
107
+ --xcv-color-accent-lavender: #A88BEA;
108
+
109
+ --xcv-color-link: #086B7C;
110
+ --xcv-color-link-hover: #12161B;
111
+ --xcv-color-focus-ring: #A33B35;
112
+
113
+ --xcv-color-feedback-success: #315B46;
114
+ --xcv-color-feedback-warning: #705B32;
115
+ --xcv-color-feedback-error: #A33B35;
116
+ --xcv-color-feedback-info: #086B7C;
117
+ --xcv-color-feedback-success-background: #E8F7EE;
118
+ --xcv-color-feedback-warning-background: #FFF7E5;
119
+ --xcv-color-feedback-error-background: #FFF0F2;
120
+ --xcv-color-feedback-info-background: #EFF6FF;
121
+
122
+ --xcv-gradient-atmosphere: linear-gradient(135deg, #F2F5F7 0%, #EDF5FA 100%);
123
+ --xcv-gradient-action-primary: linear-gradient(110deg, #7D2929 0%, #B94A5A 55%, #E6534A 100%);
124
+ --xcv-gradient-action-primary-hover: linear-gradient(110deg, #713C3A 0%, #B94A5A 55%, #E6534A 100%);
125
+ --xcv-gradient-action-primary-accessible: linear-gradient(110deg, #A33B35 0%, #B94A5A 100%);
126
+ --xcv-gradient-action-primary-accessible-hover: linear-gradient(110deg, #713C3A 0%, #A33B35 100%);
127
+ --xcv-gradient-electric: linear-gradient(110deg, #086B7C 0%, #087C68 35%, #48C9B0 65%, #7159A8 100%);
128
+ --xcv-gradient-aurora: linear-gradient(110deg, #086B7C 0%, #087C68 30%, #48C9B0 65%, #7159A8 100%);
129
+ --xcv-gradient-action-secondary: linear-gradient(135deg, #FFFFFF 0%, #EDF5FA 100%);
130
+ --xcv-gradient-control-surface: linear-gradient(145deg, #FFFFFF 0%, #F2F5F7 100%);
131
+ --xcv-gradient-control-surface-hover: linear-gradient(145deg, #FFFFFF 0%, #EDF5FA 100%);
132
+ --xcv-gradient-surface: linear-gradient(138deg, #FFFFFF 0%, #F2F5F7 100%);
133
+ --xcv-gradient-surface-subtle: linear-gradient(138deg, #FFFFFF 0%, #EDF5FA 100%);
134
+ --xcv-gradient-surface-hover: linear-gradient(138deg, #FFFFFF 0%, #EDF5FA 70%, #D9E8F2 100%);
135
+
136
+ --xcv-overlay-background: rgb(255 255 255 / 0.9);
137
+ --xcv-overlay-border: rgb(100 112 120 / 0.48);
138
+ }
package/styles/primitives.css ADDED
@@ -0,0 +1,198 @@
1
+ :root {
2
+ /* Primitive color palette. Components must not consume these directly. */
3
+ --xcv-primitive-neutral-0: #ffffff;
4
+ --xcv-primitive-neutral-50: #f8fafc;
5
+ --xcv-primitive-neutral-100: #f1f5f9;
6
+ --xcv-primitive-neutral-200: #e2e8f0;
7
+ --xcv-primitive-neutral-300: #cbd5e1;
8
+ --xcv-primitive-neutral-400: #94a3b8;
9
+ --xcv-primitive-neutral-500: #64748b;
10
+ --xcv-primitive-neutral-600: #475569;
11
+ --xcv-primitive-neutral-700: #334155;
12
+ --xcv-primitive-neutral-800: #1e293b;
13
+ --xcv-primitive-neutral-900: #0f172a;
14
+ --xcv-primitive-neutral-950: #020617;
15
+
16
+ --xcv-primitive-blue-300: #93c5fd;
17
+ --xcv-primitive-blue-400: #60a5fa;
18
+ --xcv-primitive-blue-500: #3b82f6;
19
+ --xcv-primitive-blue-600: #2563eb;
20
+ --xcv-primitive-blue-700: #1d4ed8;
21
+ --xcv-primitive-violet-500: #6d5efc;
22
+ --xcv-primitive-violet-600: #5b45d6;
23
+ --xcv-primitive-violet-700: #5b21b6;
24
+
25
+ /* Cobalt Foundation tonal ramps and expressive supporting accents. */
26
+ --xcv-primitive-cobalt-50: #f0f1ff;
27
+ --xcv-primitive-cobalt-100: #dde0ff;
28
+ --xcv-primitive-cobalt-200: #bcc1ff;
29
+ --xcv-primitive-cobalt-300: #969df2;
30
+ --xcv-primitive-cobalt-400: #7279d8;
31
+ --xcv-primitive-cobalt-500: #555cc0;
32
+ --xcv-primitive-cobalt-600: #373a99;
33
+ --xcv-primitive-cobalt-700: #2d307d;
34
+ --xcv-primitive-cobalt-800: #242660;
35
+ --xcv-primitive-cobalt-900: #1a1c45;
36
+ --xcv-primitive-cobalt-950: #10112d;
37
+
38
+ --xcv-primitive-cyan-50: #e8fcff;
39
+ --xcv-primitive-cyan-100: #c9f7fb;
40
+ --xcv-primitive-cyan-200: #9aebf3;
41
+ --xcv-primitive-cyan-300: #63dbe8;
42
+ --xcv-primitive-cyan-400: #22c7d9;
43
+ --xcv-primitive-cyan-500: #0da9bd;
44
+ --xcv-primitive-cyan-600: #07869a;
45
+ --xcv-primitive-cyan-700: #086b7c;
46
+ --xcv-primitive-cyan-800: #0e5867;
47
+ --xcv-primitive-cyan-900: #124956;
48
+ --xcv-primitive-cyan-950: #082f39;
49
+
50
+ --xcv-primitive-lavender-50: #f5f1ff;
51
+ --xcv-primitive-lavender-100: #ece5ff;
52
+ --xcv-primitive-lavender-200: #d9ccff;
53
+ --xcv-primitive-lavender-300: #c2adff;
54
+ --xcv-primitive-lavender-400: #a78bfa;
55
+ --xcv-primitive-lavender-500: #8b6be2;
56
+ --xcv-primitive-lavender-600: #7250c2;
57
+ --xcv-primitive-lavender-700: #5b3da0;
58
+ --xcv-primitive-lavender-800: #48317d;
59
+ --xcv-primitive-lavender-900: #39285f;
60
+ --xcv-primitive-lavender-950: #24183e;
61
+
62
+ --xcv-primitive-amber-50: #fff9e8;
63
+ --xcv-primitive-amber-100: #fff0c2;
64
+ --xcv-primitive-amber-200: #ffe08a;
65
+ --xcv-primitive-amber-300: #ffcf61;
66
+ --xcv-primitive-amber-400: #f5b942;
67
+ --xcv-primitive-amber-500: #d99a24;
68
+ --xcv-primitive-amber-600: #b77916;
69
+ --xcv-primitive-amber-700: #925b12;
70
+ --xcv-primitive-amber-800: #754715;
71
+ --xcv-primitive-amber-900: #603b17;
72
+ --xcv-primitive-amber-950: #351d08;
73
+
74
+ --xcv-primitive-coral-50: #fff1f0;
75
+ --xcv-primitive-coral-100: #ffe0de;
76
+ --xcv-primitive-coral-200: #ffc3bf;
77
+ --xcv-primitive-coral-300: #ffa09a;
78
+ --xcv-primitive-coral-400: #f07878;
79
+ --xcv-primitive-coral-500: #dc5c60;
80
+ --xcv-primitive-coral-600: #bd3f4a;
81
+ --xcv-primitive-coral-700: #9d303f;
82
+ --xcv-primitive-coral-800: #812b39;
83
+ --xcv-primitive-coral-900: #6c2935;
84
+ --xcv-primitive-coral-950: #3b111b;
85
+
86
+ /* Cobalt Foundation semantic support colors. */
87
+ --xcv-primitive-dark-text-primary: #ffffff;
88
+ --xcv-primitive-light-text-primary: #1a1c45;
89
+ --xcv-primitive-dark-text-secondary: #b9bdd5;
90
+ --xcv-primitive-dark-text-muted: #9298b5;
91
+ --xcv-primitive-dark-border: #343852;
92
+ --xcv-primitive-dark-border-subtle: #252943;
93
+ --xcv-primitive-dark-border-strong: #62688a;
94
+ --xcv-primitive-light-surface: #f5f6fc;
95
+ --xcv-primitive-light-surface-raised: #f0f1fa;
96
+ --xcv-primitive-light-text-secondary: #555b73;
97
+ --xcv-primitive-light-text-muted: #626a84;
98
+ --xcv-primitive-light-border: #d9dbe9;
99
+ --xcv-primitive-light-border-subtle: #e8eaf4;
100
+ --xcv-primitive-light-border-strong: #7f86a3;
101
+
102
+ /* Semantic feedback backgrounds, paired with their accessible foreground roles. */
103
+ --xcv-primitive-feedback-success-background-dark: #123126;
104
+ --xcv-primitive-feedback-warning-background-dark: #382c14;
105
+ --xcv-primitive-feedback-error-background-dark: #3a1927;
106
+ --xcv-primitive-feedback-info-background-dark: #172a48;
107
+ --xcv-primitive-feedback-success-background-light: #e8f7ee;
108
+ --xcv-primitive-feedback-warning-background-light: #fff7e5;
109
+ --xcv-primitive-feedback-error-background-light: #fff0f2;
110
+ --xcv-primitive-feedback-info-background-light: #eff6ff;
111
+
112
+ /* Cool, layered neutrals for the Dark First visual language. */
113
+ --xcv-primitive-dark-950: #0b0c18;
114
+ --xcv-primitive-dark-900: #121426;
115
+ --xcv-primitive-dark-850: #1b1e34;
116
+ --xcv-primitive-dark-800: #252943;
117
+ --xcv-primitive-dark-700: #2f3454;
118
+
119
+ --xcv-primitive-green-500: #4ade80;
120
+ --xcv-primitive-green-700: #15803d;
121
+
122
+ --xcv-primitive-yellow-500: #f5b942;
123
+ --xcv-primitive-yellow-700: #a16207;
124
+
125
+ --xcv-primitive-red-400: #f87171;
126
+ --xcv-primitive-red-500: #ef4444;
127
+ --xcv-primitive-red-700: #dc2626;
128
+ --xcv-primitive-red-800: #b91c1c;
129
+
130
+ /* Spacing scale */
131
+ --xcv-primitive-space-0: 0;
132
+ --xcv-primitive-space-1: 0.25rem;
133
+ --xcv-primitive-space-2: 0.5rem;
134
+ --xcv-primitive-space-3: 0.75rem;
135
+ --xcv-primitive-space-4: 1rem;
136
+ --xcv-primitive-space-5: 1.25rem;
137
+ --xcv-primitive-space-6: 1.5rem;
138
+ --xcv-primitive-space-8: 2rem;
139
+ --xcv-primitive-space-10: 2.5rem;
140
+ --xcv-primitive-space-12: 3rem;
141
+
142
+ /* Radius scale */
143
+ --xcv-primitive-radius-none: 0;
144
+ --xcv-primitive-radius-subtle: 6px;
145
+ --xcv-primitive-radius-medium: 12px;
146
+ --xcv-primitive-radius-large: 18px;
147
+ --xcv-primitive-radius-full: 9999px;
148
+ /* Legacy aliases retained for consumers of the previous scale. */
149
+ --xcv-primitive-radius-sm: var(--xcv-primitive-radius-subtle);
150
+ --xcv-primitive-radius-md: var(--xcv-primitive-radius-medium);
151
+ --xcv-primitive-radius-lg: var(--xcv-primitive-radius-large);
152
+ --xcv-primitive-radius-xl: var(--xcv-primitive-radius-large);
153
+
154
+ /* Typography families: native stacks keep the default lightweight and network-free. */
155
+ --xcv-primitive-font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
156
+ --xcv-primitive-font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
157
+
158
+ /* Typography scale */
159
+ --xcv-primitive-font-size-xs: 0.75rem;
160
+ --xcv-primitive-font-size-sm: 0.875rem;
161
+ --xcv-primitive-font-size-md: 1rem;
162
+ --xcv-primitive-font-size-lg: 1.125rem;
163
+ --xcv-primitive-font-size-xl: 1.25rem;
164
+ --xcv-primitive-font-size-2xl: 1.5rem;
165
+ --xcv-primitive-font-size-3xl: 1.875rem;
166
+ --xcv-primitive-font-size-4xl: 2.5rem;
167
+
168
+ --xcv-primitive-font-weight-normal: 400;
169
+ --xcv-primitive-font-weight-medium: 500;
170
+ --xcv-primitive-font-weight-semibold: 600;
171
+ --xcv-primitive-font-weight-bold: 700;
172
+
173
+ --xcv-primitive-line-height-tight: 1.25;
174
+ --xcv-primitive-line-height-normal: 1.5;
175
+ --xcv-primitive-line-height-relaxed: 1.625;
176
+
177
+ /* One intentional motion language; loader timing remains functional, not a motion profile. */
178
+ --xcv-motion-duration: 240ms;
179
+ --xcv-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
180
+ --xcv-motion-distance: 5px;
181
+
182
+ /* Deprecated compatibility aliases. All resolve to the single motion contract. */
183
+ --xcv-duration-fast: var(--xcv-motion-duration);
184
+ --xcv-duration-normal: var(--xcv-motion-duration);
185
+ --xcv-duration-emphasized: var(--xcv-motion-duration);
186
+ --xcv-ease-standard: var(--xcv-motion-easing);
187
+ --xcv-ease-emphasized: var(--xcv-motion-easing);
188
+ --xcv-ease-spring: var(--xcv-motion-easing);
189
+
190
+ /* Continuous loading indicators have purpose-specific cycle durations. */
191
+ --xcv-motion-duration-loader: 900ms;
192
+ --xcv-motion-duration-loader-slow: 1.25s;
193
+
194
+ /* Elevation */
195
+ --xcv-primitive-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
196
+ --xcv-primitive-shadow-md: 0 4px 8px rgb(15 23 42 / 0.10);
197
+ --xcv-primitive-shadow-lg: 0 12px 24px rgb(15 23 42 / 0.12);
198
+ }
package/styles/themes/dark.css ADDED
@@ -0,0 +1,113 @@
1
+ @import "../primitives.css";
2
+
3
+ :where(:root:not([data-xcv-mode="light"]):not([data-xcv-theme="light"])),
4
+ :where([data-xcv-mode="dark"]),
5
+ :where([data-xcv-theme="dark"]:not([data-xcv-mode])) {
6
+ color-scheme: dark;
7
+ font-family: var(--xcv-font-family-sans);
8
+
9
+ --xcv-color-surface: var(--xcv-primitive-dark-950);
10
+ --xcv-color-surface-subtle: var(--xcv-primitive-dark-900);
11
+ --xcv-color-surface-raised: var(--xcv-primitive-dark-850);
12
+ --xcv-color-surface-elevated: var(--xcv-primitive-dark-800);
13
+ --xcv-color-surface-overlay: var(--xcv-primitive-dark-700);
14
+
15
+ --xcv-color-text-primary: var(--xcv-primitive-dark-text-primary);
16
+ --xcv-color-text-secondary: var(--xcv-primitive-dark-text-secondary);
17
+ --xcv-color-text-muted: var(--xcv-primitive-dark-text-muted);
18
+ --xcv-color-text-accent: var(--xcv-primitive-cobalt-200);
19
+ --xcv-color-text-accent-cyan: var(--xcv-primitive-cyan-400);
20
+ --xcv-color-text-accent-lavender: var(--xcv-primitive-lavender-400);
21
+ --xcv-color-text-inverse: var(--xcv-primitive-neutral-0);
22
+
23
+ --xcv-color-border: var(--xcv-primitive-dark-border);
24
+ --xcv-color-border-subtle: var(--xcv-primitive-dark-border-subtle);
25
+ --xcv-color-border-strong: var(--xcv-primitive-dark-border-strong);
26
+ --xcv-color-border-focus: var(--xcv-primitive-cobalt-400);
27
+
28
+ --xcv-color-action-primary: var(--xcv-primitive-cobalt-600);
29
+ --xcv-color-action-primary-hover: var(--xcv-primitive-cobalt-700);
30
+ --xcv-color-action-secondary: var(--xcv-primitive-dark-850);
31
+ --xcv-color-accent: var(--xcv-color-action-primary);
32
+ --xcv-color-accent-cobalt: var(--xcv-primitive-cobalt-500);
33
+ --xcv-color-accent-cyan: var(--xcv-primitive-cyan-400);
34
+ --xcv-color-accent-amber: var(--xcv-primitive-amber-400);
35
+ --xcv-color-accent-coral: var(--xcv-primitive-coral-400);
36
+ --xcv-color-accent-lavender: var(--xcv-primitive-lavender-500);
37
+ --xcv-gradient-atmosphere: linear-gradient(135deg, #0b0c18 0%, #1a1c45 55%, #373a99 100%);
38
+ --xcv-gradient-action-primary: linear-gradient(110deg, #242660 0%, #373a99 45%, #969df2 100%);
39
+ --xcv-gradient-action-primary-hover: linear-gradient(110deg, #2d307d 0%, #373a99 45%, #7279d8 100%);
40
+ --xcv-gradient-action-primary-accessible: linear-gradient(110deg, #242660 0%, #373a99 55%, #555cc0 100%);
41
+ --xcv-gradient-action-primary-accessible-hover: linear-gradient(110deg, #242660 0%, #2d307d 55%, #4a51b0 100%);
42
+ --xcv-gradient-electric: linear-gradient(110deg, #373a99 0%, #555cc0 60%, #22c7d9 100%);
43
+ --xcv-gradient-aurora: linear-gradient(110deg, #373a99 0%, #7279d8 45%, #22c7d9 75%, #a78bfa 100%);
44
+ --xcv-gradient-action-secondary: linear-gradient(135deg, #252943 0%, #1b1e34 100%);
45
+ --xcv-gradient-control-surface: linear-gradient(145deg, #1b1e34 0%, #121426 100%);
46
+ --xcv-gradient-control-surface-hover: linear-gradient(145deg, #252943 0%, #1b1e34 100%);
47
+ --xcv-gradient-surface: radial-gradient(ellipse at 8% 0%, rgb(55 58 153 / 0.18) 0%, transparent 48%), radial-gradient(ellipse at 100% 100%, rgb(34 199 217 / 0.07) 0%, transparent 50%), linear-gradient(138deg, #1b1e34 0%, #121426 52%, #0b0c18 100%);
48
+ --xcv-gradient-surface-subtle: radial-gradient(ellipse at 0% 0%, rgb(55 58 153 / 0.12) 0%, transparent 48%), linear-gradient(138deg, #1b1e34 0%, #121426 58%, #0b0c18 100%);
49
+ --xcv-gradient-surface-hover: radial-gradient(ellipse at 12% 0%, rgb(34 199 217 / 0.14) 0%, transparent 48%), radial-gradient(ellipse at 100% 100%, rgb(167 139 250 / 0.12) 0%, transparent 52%), linear-gradient(138deg, #252943 0%, #1b1e34 52%, #121426 100%);
50
+
51
+ /* Shared translucent surface for floating and overlapping UI. */
52
+ --xcv-overlay-background: rgb(14 20 34 / 0.84);
53
+ --xcv-overlay-border: color-mix(in srgb, var(--xcv-color-border-strong) 72%, transparent);
54
+ --xcv-overlay-backdrop-blur: 18px;
55
+ --xcv-overlay-backdrop-saturation: 140%;
56
+ --xcv-overlay-shadow: var(--xcv-shadow-lg);
57
+ --xcv-overlay-radius: var(--xcv-radius-lg);
58
+ --xcv-color-link: var(--xcv-primitive-cobalt-200);
59
+ --xcv-color-link-hover: var(--xcv-primitive-cobalt-200);
60
+
61
+ --xcv-color-feedback-success: var(--xcv-primitive-green-500);
62
+ --xcv-color-feedback-warning: var(--xcv-primitive-yellow-500);
63
+ --xcv-color-feedback-error: var(--xcv-primitive-red-400);
64
+ --xcv-color-feedback-info: var(--xcv-primitive-cyan-400);
65
+ --xcv-color-feedback-success-background: var(--xcv-primitive-feedback-success-background-dark);
66
+ --xcv-color-feedback-warning-background: var(--xcv-primitive-feedback-warning-background-dark);
67
+ --xcv-color-feedback-error-background: var(--xcv-primitive-feedback-error-background-dark);
68
+ --xcv-color-feedback-info-background: var(--xcv-primitive-feedback-info-background-dark);
69
+
70
+ --xcv-color-focus-ring: var(--xcv-primitive-cobalt-400);
71
+ --xcv-opacity-disabled: 0.55;
72
+
73
+ --xcv-space-none: var(--xcv-primitive-space-0);
74
+ --xcv-space-xs: var(--xcv-primitive-space-1);
75
+ --xcv-space-sm: var(--xcv-primitive-space-2);
76
+ --xcv-space-md: var(--xcv-primitive-space-4);
77
+ --xcv-space-lg: var(--xcv-primitive-space-6);
78
+ --xcv-space-xl: var(--xcv-primitive-space-8);
79
+
80
+ --xcv-radius-none: var(--xcv-primitive-radius-none);
81
+ --xcv-radius-subtle: var(--xcv-primitive-radius-subtle);
82
+ --xcv-radius-medium: var(--xcv-primitive-radius-medium);
83
+ --xcv-radius-large: var(--xcv-primitive-radius-large);
84
+ --xcv-radius-full: var(--xcv-primitive-radius-full);
85
+ /* Legacy semantic aliases. */
86
+ --xcv-radius-sm: var(--xcv-radius-subtle);
87
+ --xcv-radius-md: var(--xcv-radius-medium);
88
+ --xcv-radius-lg: var(--xcv-radius-large);
89
+
90
+ --xcv-shadow-sm: var(--xcv-primitive-shadow-sm);
91
+ --xcv-shadow-md: var(--xcv-primitive-shadow-md);
92
+ --xcv-shadow-lg: var(--xcv-primitive-shadow-lg);
93
+
94
+ --xcv-font-family-sans: var(--xcv-primitive-font-family-sans);
95
+ --xcv-font-family-mono: var(--xcv-primitive-font-family-mono);
96
+
97
+ --xcv-font-size-xs: var(--xcv-primitive-font-size-xs);
98
+ --xcv-font-size-sm: var(--xcv-primitive-font-size-sm);
99
+ --xcv-font-size-md: var(--xcv-primitive-font-size-md);
100
+ --xcv-font-size-lg: var(--xcv-primitive-font-size-lg);
101
+ --xcv-font-size-xl: var(--xcv-primitive-font-size-xl);
102
+ --xcv-font-size-2xl: var(--xcv-primitive-font-size-2xl);
103
+ --xcv-font-size-3xl: var(--xcv-primitive-font-size-3xl);
104
+ --xcv-font-size-4xl: var(--xcv-primitive-font-size-4xl);
105
+ --xcv-font-weight-normal: var(--xcv-primitive-font-weight-normal);
106
+ --xcv-font-weight-medium: var(--xcv-primitive-font-weight-medium);
107
+ --xcv-font-weight-semibold: var(--xcv-primitive-font-weight-semibold);
108
+ --xcv-font-weight-bold: var(--xcv-primitive-font-weight-bold);
109
+
110
+ --xcv-line-height-tight: var(--xcv-primitive-line-height-tight);
111
+ --xcv-line-height-normal: var(--xcv-primitive-line-height-normal);
112
+ --xcv-line-height-relaxed: var(--xcv-primitive-line-height-relaxed);
113
+ }
package/styles/themes/light.css ADDED
@@ -0,0 +1,112 @@
1
+ @import "../primitives.css";
2
+
3
+ :where([data-xcv-mode="light"]),
4
+ :where([data-xcv-theme="light"]:not([data-xcv-mode])) {
5
+ color-scheme: light;
6
+ font-family: var(--xcv-font-family-sans);
7
+
8
+ --xcv-color-surface: var(--xcv-primitive-light-surface);
9
+ --xcv-color-surface-subtle: #ffffff;
10
+ --xcv-color-surface-raised: var(--xcv-primitive-light-surface-raised);
11
+ --xcv-color-surface-elevated: #ffffff;
12
+ --xcv-color-surface-overlay: #ffffff;
13
+
14
+ --xcv-color-text-primary: var(--xcv-primitive-light-text-primary);
15
+ --xcv-color-text-secondary: var(--xcv-primitive-light-text-secondary);
16
+ --xcv-color-text-muted: var(--xcv-primitive-light-text-muted);
17
+ --xcv-color-text-accent: var(--xcv-primitive-cobalt-600);
18
+ --xcv-color-text-accent-cyan: var(--xcv-primitive-cyan-700);
19
+ --xcv-color-text-accent-lavender: var(--xcv-primitive-lavender-700);
20
+ --xcv-color-text-inverse: var(--xcv-primitive-neutral-0);
21
+
22
+ --xcv-color-border: var(--xcv-primitive-light-border);
23
+ --xcv-color-border-subtle: var(--xcv-primitive-light-border-subtle);
24
+ --xcv-color-border-strong: var(--xcv-primitive-light-border-strong);
25
+ --xcv-color-border-focus: var(--xcv-primitive-cobalt-600);
26
+
27
+ --xcv-color-action-primary: var(--xcv-primitive-cobalt-600);
28
+ --xcv-color-action-primary-hover: var(--xcv-primitive-cobalt-800);
29
+ --xcv-color-action-secondary: var(--xcv-primitive-light-surface-raised);
30
+ --xcv-color-accent: var(--xcv-color-action-primary);
31
+ --xcv-color-accent-cobalt: var(--xcv-primitive-cobalt-500);
32
+ --xcv-color-accent-cyan: var(--xcv-primitive-cyan-700);
33
+ --xcv-color-accent-amber: var(--xcv-primitive-amber-700);
34
+ --xcv-color-accent-coral: var(--xcv-primitive-coral-700);
35
+ --xcv-color-accent-lavender: var(--xcv-primitive-lavender-700);
36
+ --xcv-gradient-atmosphere: linear-gradient(135deg, #f5f6fc 0%, #e5e7fb 55%, #bcc1ff 100%);
37
+ --xcv-gradient-action-primary: linear-gradient(110deg, #242660 0%, #373a99 45%, #969df2 100%);
38
+ --xcv-gradient-action-primary-hover: linear-gradient(110deg, #2d307d 0%, #373a99 45%, #7279d8 100%);
39
+ --xcv-gradient-action-primary-accessible: linear-gradient(110deg, #242660 0%, #373a99 55%, #555cc0 100%);
40
+ --xcv-gradient-action-primary-accessible-hover: linear-gradient(110deg, #242660 0%, #2d307d 55%, #4a51b0 100%);
41
+ --xcv-gradient-electric: linear-gradient(110deg, #373a99 0%, #555cc0 60%, #22c7d9 100%);
42
+ --xcv-gradient-aurora: linear-gradient(110deg, #373a99 0%, #7279d8 45%, #22c7d9 75%, #a78bfa 100%);
43
+ --xcv-gradient-action-secondary: linear-gradient(135deg, #ffffff 0%, #f0f1fa 100%);
44
+ --xcv-gradient-control-surface: linear-gradient(145deg, #ffffff 0%, #f5f6fc 100%);
45
+ --xcv-gradient-control-surface-hover: linear-gradient(145deg, #ffffff 0%, #e8eaf4 100%);
46
+ --xcv-gradient-surface: radial-gradient(ellipse at 8% 0%, rgb(55 58 153 / 0.10) 0%, transparent 48%), radial-gradient(ellipse at 100% 100%, rgb(34 199 217 / 0.05) 0%, transparent 50%), linear-gradient(138deg, #ffffff 0%, #f5f6fc 52%, #e8eaf4 100%);
47
+ --xcv-gradient-surface-subtle: radial-gradient(ellipse at 0% 0%, rgb(55 58 153 / 0.07) 0%, transparent 48%), linear-gradient(138deg, #ffffff 0%, #f5f6fc 58%, #e8eaf4 100%);
48
+ --xcv-gradient-surface-hover: radial-gradient(ellipse at 12% 0%, rgb(34 199 217 / 0.08) 0%, transparent 48%), radial-gradient(ellipse at 100% 100%, rgb(167 139 250 / 0.08) 0%, transparent 52%), linear-gradient(138deg, #ffffff 0%, #f0f1fa 52%, #dde0ff 100%);
49
+
50
+ /* Shared translucent surface for floating and overlapping UI. */
51
+ --xcv-overlay-background: rgb(255 255 255 / 0.88);
52
+ --xcv-overlay-border: color-mix(in srgb, var(--xcv-color-border-strong) 48%, transparent);
53
+ --xcv-overlay-backdrop-blur: 18px;
54
+ --xcv-overlay-backdrop-saturation: 140%;
55
+ --xcv-overlay-shadow: var(--xcv-shadow-lg);
56
+ --xcv-overlay-radius: var(--xcv-radius-lg);
57
+ --xcv-color-link: var(--xcv-primitive-cobalt-600);
58
+ --xcv-color-link-hover: var(--xcv-primitive-cobalt-800);
59
+
60
+ --xcv-color-feedback-success: var(--xcv-primitive-green-700);
61
+ --xcv-color-feedback-warning: var(--xcv-primitive-yellow-700);
62
+ --xcv-color-feedback-error: var(--xcv-primitive-red-800);
63
+ --xcv-color-feedback-info: #0369a1;
64
+ --xcv-color-feedback-success-background: var(--xcv-primitive-feedback-success-background-light);
65
+ --xcv-color-feedback-warning-background: var(--xcv-primitive-feedback-warning-background-light);
66
+ --xcv-color-feedback-error-background: var(--xcv-primitive-feedback-error-background-light);
67
+ --xcv-color-feedback-info-background: var(--xcv-primitive-feedback-info-background-light);
68
+
69
+ --xcv-color-focus-ring: var(--xcv-primitive-cobalt-600);
70
+ --xcv-opacity-disabled: 0.55;
71
+
72
+ --xcv-space-none: var(--xcv-primitive-space-0);
73
+ --xcv-space-xs: var(--xcv-primitive-space-1);
74
+ --xcv-space-sm: var(--xcv-primitive-space-2);
75
+ --xcv-space-md: var(--xcv-primitive-space-4);
76
+ --xcv-space-lg: var(--xcv-primitive-space-6);
77
+ --xcv-space-xl: var(--xcv-primitive-space-8);
78
+
79
+ --xcv-radius-none: var(--xcv-primitive-radius-none);
80
+ --xcv-radius-subtle: var(--xcv-primitive-radius-subtle);
81
+ --xcv-radius-medium: var(--xcv-primitive-radius-medium);
82
+ --xcv-radius-large: var(--xcv-primitive-radius-large);
83
+ --xcv-radius-full: var(--xcv-primitive-radius-full);
84
+ /* Legacy semantic aliases. */
85
+ --xcv-radius-sm: var(--xcv-radius-subtle);
86
+ --xcv-radius-md: var(--xcv-radius-medium);
87
+ --xcv-radius-lg: var(--xcv-radius-large);
88
+
89
+ --xcv-shadow-sm: var(--xcv-primitive-shadow-sm);
90
+ --xcv-shadow-md: var(--xcv-primitive-shadow-md);
91
+ --xcv-shadow-lg: var(--xcv-primitive-shadow-lg);
92
+
93
+ --xcv-font-family-sans: var(--xcv-primitive-font-family-sans);
94
+ --xcv-font-family-mono: var(--xcv-primitive-font-family-mono);
95
+
96
+ --xcv-font-size-xs: var(--xcv-primitive-font-size-xs);
97
+ --xcv-font-size-sm: var(--xcv-primitive-font-size-sm);
98
+ --xcv-font-size-md: var(--xcv-primitive-font-size-md);
99
+ --xcv-font-size-lg: var(--xcv-primitive-font-size-lg);
100
+ --xcv-font-size-xl: var(--xcv-primitive-font-size-xl);
101
+ --xcv-font-size-2xl: var(--xcv-primitive-font-size-2xl);
102
+ --xcv-font-size-3xl: var(--xcv-primitive-font-size-3xl);
103
+ --xcv-font-size-4xl: var(--xcv-primitive-font-size-4xl);
104
+ --xcv-font-weight-normal: var(--xcv-primitive-font-weight-normal);
105
+ --xcv-font-weight-medium: var(--xcv-primitive-font-weight-medium);
106
+ --xcv-font-weight-semibold: var(--xcv-primitive-font-weight-semibold);
107
+ --xcv-font-weight-bold: var(--xcv-primitive-font-weight-bold);
108
+
109
+ --xcv-line-height-tight: var(--xcv-primitive-line-height-tight);
110
+ --xcv-line-height-normal: var(--xcv-primitive-line-height-normal);
111
+ --xcv-line-height-relaxed: var(--xcv-primitive-line-height-relaxed);
112
+ }