@neovici/cosmoz-tokens 3.5.1 → 4.0.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 (5) hide show
  1. package/package.json +2 -2
  2. package/src/fallback.css +99 -0
  3. package/src/index.css +1 -0
  4. package/src/semantic.css +334 -185
  5. package/src/shadows.css +41 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "3.5.1",
3
+ "version": "4.0.0",
4
4
  "description": "Design tokens for Cosmoz web components based on Untitled UI",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -60,7 +60,7 @@
60
60
  "@pionjs/pion": "^2.5.2"
61
61
  },
62
62
  "devDependencies": {
63
- "@changesets/cli": "^2.27.0",
63
+ "@changesets/cli": "^3.0.2",
64
64
  "@commitlint/cli": "^20.0.0",
65
65
  "@commitlint/config-conventional": "^20.0.0",
66
66
  "@neovici/cfg": "^2.8.0",
package/src/fallback.css ADDED
@@ -0,0 +1,99 @@
1
+ /**
2
+ * Cosmoz Design Tokens - Fallback
3
+ * Light-theme fallback for browsers without light-dark() support.
4
+ * Values are the pre-light-dark() light theme, frozen.
5
+ */
6
+ @supports not (color: light-dark(red, blue)) {
7
+ :root {
8
+ --cz-color-text-primary: var(--cz-color-gray-900);
9
+ --cz-color-text-secondary: var(--cz-color-gray-700);
10
+ --cz-color-text-secondary-hover: var(--cz-color-gray-800);
11
+ --cz-color-text-tertiary: var(--cz-color-gray-600);
12
+ --cz-color-text-tertiary-hover: var(--cz-color-gray-700);
13
+ --cz-color-text-quaternary: var(--cz-color-gray-500);
14
+ --cz-color-text-disabled: var(--cz-color-gray-500);
15
+ --cz-color-text-placeholder: var(--cz-color-gray-500);
16
+ --cz-color-text-placeholder-subtle: var(--cz-color-gray-300);
17
+ --cz-color-text-error: var(--cz-color-error-700);
18
+ --cz-color-text-error-hover: var(--cz-color-error-800);
19
+ --cz-color-text-warning: var(--cz-color-warning-700);
20
+ --cz-color-text-success: var(--cz-color-success-700);
21
+ --cz-color-text-brand: var(--cz-color-brand-600);
22
+ --cz-color-text-brand-hover: var(--cz-color-brand-700);
23
+ --cz-color-text-on-brand: var(--cz-color-white);
24
+ --cz-color-text-on-brand-secondary: var(--cz-color-brand-200);
25
+ --cz-color-text-info: var(--cz-color-info-700);
26
+ --cz-color-text-info-hover: var(--cz-color-info-800);
27
+ --cz-color-text-on-info: var(--cz-color-white);
28
+ --cz-color-bg-primary: var(--cz-color-white);
29
+ --cz-color-bg-primary-hover: var(--cz-color-gray-50);
30
+ --cz-color-bg-primary-solid: var(--cz-color-gray-950);
31
+ --cz-color-bg-secondary: var(--cz-color-gray-50);
32
+ --cz-color-bg-secondary-hover: var(--cz-color-gray-100);
33
+ --cz-color-bg-secondary-subtle: var(--cz-color-gray-25);
34
+ --cz-color-bg-tertiary: var(--cz-color-gray-100);
35
+ --cz-color-bg-quaternary: var(--cz-color-gray-200);
36
+ --cz-color-bg-disabled: var(--cz-color-gray-100);
37
+ --cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
38
+ --cz-color-bg-overlay: var(--cz-color-gray-950);
39
+ --cz-color-bg-brand: var(--cz-color-brand-50);
40
+ --cz-color-bg-brand-secondary: var(--cz-color-brand-100);
41
+ --cz-color-bg-brand-solid: var(--cz-color-brand-600);
42
+ --cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
43
+ --cz-color-bg-brand-section: var(--cz-color-brand-800);
44
+ --cz-color-bg-error: var(--cz-color-error-50);
45
+ --cz-color-bg-error-secondary: var(--cz-color-error-100);
46
+ --cz-color-bg-error-solid: var(--cz-color-error-600);
47
+ --cz-color-bg-error-solid-hover: var(--cz-color-error-700);
48
+ --cz-color-bg-warning: var(--cz-color-warning-50);
49
+ --cz-color-bg-warning-secondary: var(--cz-color-warning-100);
50
+ --cz-color-bg-warning-solid: var(--cz-color-warning-600);
51
+ --cz-color-bg-success: var(--cz-color-success-50);
52
+ --cz-color-bg-success-secondary: var(--cz-color-success-100);
53
+ --cz-color-bg-success-solid: var(--cz-color-success-600);
54
+ --cz-color-bg-info: var(--cz-color-info-50);
55
+ --cz-color-bg-info-secondary: var(--cz-color-info-100);
56
+ --cz-color-bg-info-solid: var(--cz-color-info-600);
57
+ --cz-color-bg-info-solid-hover: var(--cz-color-info-700);
58
+ --cz-color-border-primary: var(--cz-color-gray-300);
59
+ --cz-color-border-secondary: var(--cz-color-gray-200);
60
+ --cz-color-border-tertiary: var(--cz-color-gray-100);
61
+ --cz-color-border-disabled: var(--cz-color-gray-300);
62
+ --cz-color-border-disabled-subtle: var(--cz-color-gray-200);
63
+ --cz-color-border-error: var(--cz-color-error-500);
64
+ --cz-color-border-error-subtle: var(--cz-color-error-300);
65
+ --cz-color-border-brand: var(--cz-color-brand-500);
66
+ --cz-color-border-brand-alt: var(--cz-color-brand-600);
67
+ --cz-color-border-info: var(--cz-color-info-500);
68
+ --cz-color-border-info-subtle: var(--cz-color-info-300);
69
+ --cz-color-fg-primary: var(--cz-color-gray-900);
70
+ --cz-color-fg-secondary: var(--cz-color-gray-700);
71
+ --cz-color-fg-secondary-hover: var(--cz-color-gray-800);
72
+ --cz-color-fg-tertiary: var(--cz-color-gray-600);
73
+ --cz-color-fg-tertiary-hover: var(--cz-color-gray-700);
74
+ --cz-color-fg-quaternary: var(--cz-color-gray-400);
75
+ --cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
76
+ --cz-color-fg-disabled: var(--cz-color-gray-400);
77
+ --cz-color-fg-disabled-subtle: var(--cz-color-gray-300);
78
+ --cz-color-fg-white: var(--cz-color-white);
79
+ --cz-color-fg-brand: var(--cz-color-brand-600);
80
+ --cz-color-fg-brand-secondary: var(--cz-color-brand-500);
81
+ --cz-color-fg-error: var(--cz-color-error-600);
82
+ --cz-color-fg-error-secondary: var(--cz-color-error-500);
83
+ --cz-color-fg-warning: var(--cz-color-warning-600);
84
+ --cz-color-fg-warning-secondary: var(--cz-color-warning-500);
85
+ --cz-color-fg-success: var(--cz-color-success-600);
86
+ --cz-color-fg-success-secondary: var(--cz-color-success-500);
87
+ --cz-color-fg-info: var(--cz-color-info-600);
88
+ --cz-color-fg-info-secondary: var(--cz-color-info-500);
89
+ --cz-focus-ring: inset 0 0 0 2px var(--cz-color-brand-100);
90
+ --cz-focus-ring-error: inset 0 0 0 2px var(--cz-color-error-100);
91
+ --cz-focus-ring-info: inset 0 0 0 2px var(--cz-color-info-100);
92
+ --cz-shadow-skeumorphic:
93
+ 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
94
+ 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
95
+ --cz-shadow-xs-skeumorphic:
96
+ var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
97
+ --skeumorphic-color: rgba(255, 255, 255, 0.12);
98
+ }
99
+ }
package/src/index.css CHANGED
@@ -8,3 +8,4 @@
8
8
  @import './spacing.css';
9
9
  @import './shadows.css';
10
10
  @import './semantic.css';
11
+ @import './fallback.css';
package/src/semantic.css CHANGED
@@ -1,197 +1,346 @@
1
1
  /**
2
2
  * Cosmoz Design Tokens - Semantic
3
- * Semantic color tokens with light and dark mode support
3
+ * Semantic color tokens using light-dark() for light/dark mode support.
4
+ *
5
+ * Dark values are resolved by the CSS color-scheme of the element using
6
+ * the token (see CSS Color 5). Set `color-scheme: dark` on the root
7
+ * (or `light dark` to follow the OS) for dark values; without it all
8
+ * tokens resolve to their light values.
9
+ *
10
+ * Browsers without light-dark() support fall back to the light theme via
11
+ * the @supports block in fallback.css.
4
12
  */
5
-
6
13
  :root {
7
14
  /* Text colors */
8
- --cz-color-text-primary: var(--cz-color-gray-900);
9
- --cz-color-text-secondary: var(--cz-color-gray-700);
10
- --cz-color-text-secondary-hover: var(--cz-color-gray-800);
11
- --cz-color-text-tertiary: var(--cz-color-gray-600);
12
- --cz-color-text-tertiary-hover: var(--cz-color-gray-700);
13
- --cz-color-text-quaternary: var(--cz-color-gray-500);
14
- --cz-color-text-disabled: var(--cz-color-gray-500);
15
- --cz-color-text-placeholder: var(--cz-color-gray-500);
16
- --cz-color-text-placeholder-subtle: var(--cz-color-gray-300);
17
- --cz-color-text-error: var(--cz-color-error-700);
18
- --cz-color-text-error-hover: var(--cz-color-error-800);
19
- --cz-color-text-warning: var(--cz-color-warning-700);
20
- --cz-color-text-success: var(--cz-color-success-700);
21
- --cz-color-text-brand: var(--cz-color-brand-600);
22
- --cz-color-text-brand-hover: var(--cz-color-brand-700);
23
- --cz-color-text-on-brand: var(--cz-color-white);
24
- --cz-color-text-on-brand-secondary: var(--cz-color-brand-200);
25
- --cz-color-text-info: var(--cz-color-info-700);
26
- --cz-color-text-info-hover: var(--cz-color-info-800);
27
- --cz-color-text-on-info: var(--cz-color-white);
28
-
29
- /* Background colors */
30
- --cz-color-bg-primary: var(--cz-color-white);
31
- --cz-color-bg-primary-hover: var(--cz-color-gray-50);
32
- --cz-color-bg-primary-solid: var(--cz-color-gray-950);
33
- --cz-color-bg-secondary: var(--cz-color-gray-50);
34
- --cz-color-bg-secondary-hover: var(--cz-color-gray-100);
35
- --cz-color-bg-secondary-subtle: var(--cz-color-gray-25);
36
- --cz-color-bg-tertiary: var(--cz-color-gray-100);
37
- --cz-color-bg-quaternary: var(--cz-color-gray-200);
38
- --cz-color-bg-disabled: var(--cz-color-gray-100);
39
- --cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
40
- --cz-color-bg-overlay: var(--cz-color-gray-950);
41
- --cz-color-bg-brand: var(--cz-color-brand-50);
42
- --cz-color-bg-brand-secondary: var(--cz-color-brand-100);
43
- --cz-color-bg-brand-solid: var(--cz-color-brand-600);
44
- --cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
45
- --cz-color-bg-brand-section: var(--cz-color-brand-800);
46
- --cz-color-bg-error: var(--cz-color-error-50);
47
- --cz-color-bg-error-secondary: var(--cz-color-error-100);
48
- --cz-color-bg-error-solid: var(--cz-color-error-600);
49
- --cz-color-bg-error-solid-hover: var(--cz-color-error-700);
50
- --cz-color-bg-warning: var(--cz-color-warning-50);
51
- --cz-color-bg-warning-secondary: var(--cz-color-warning-100);
52
- --cz-color-bg-warning-solid: var(--cz-color-warning-600);
53
- --cz-color-bg-success: var(--cz-color-success-50);
54
- --cz-color-bg-success-secondary: var(--cz-color-success-100);
55
- --cz-color-bg-success-solid: var(--cz-color-success-600);
56
- --cz-color-bg-info: var(--cz-color-info-50);
57
- --cz-color-bg-info-secondary: var(--cz-color-info-100);
58
- --cz-color-bg-info-solid: var(--cz-color-info-600);
59
- --cz-color-bg-info-solid-hover: var(--cz-color-info-700);
60
-
61
- /* Border colors */
62
- --cz-color-border-primary: var(--cz-color-gray-300);
63
- --cz-color-border-secondary: var(--cz-color-gray-200);
64
- --cz-color-border-tertiary: var(--cz-color-gray-100);
65
- --cz-color-border-disabled: var(--cz-color-gray-300);
66
- --cz-color-border-disabled-subtle: var(--cz-color-gray-200);
67
- --cz-color-border-error: var(--cz-color-error-500);
68
- --cz-color-border-error-subtle: var(--cz-color-error-300);
69
- --cz-color-border-brand: var(--cz-color-brand-500);
70
- --cz-color-border-brand-alt: var(--cz-color-brand-600);
71
- --cz-color-border-info: var(--cz-color-info-500);
72
- --cz-color-border-info-subtle: var(--cz-color-info-300);
73
-
74
- /* Foreground colors (icons, decorative elements) */
75
- --cz-color-fg-primary: var(--cz-color-gray-900);
76
- --cz-color-fg-secondary: var(--cz-color-gray-700);
77
- --cz-color-fg-secondary-hover: var(--cz-color-gray-800);
78
- --cz-color-fg-tertiary: var(--cz-color-gray-600);
79
- --cz-color-fg-tertiary-hover: var(--cz-color-gray-700);
80
- --cz-color-fg-quaternary: var(--cz-color-gray-400);
81
- --cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
82
- --cz-color-fg-disabled: var(--cz-color-gray-400);
83
- --cz-color-fg-disabled-subtle: var(--cz-color-gray-300);
84
- --cz-color-fg-white: var(--cz-color-white);
85
- --cz-color-fg-brand: var(--cz-color-brand-600);
86
- --cz-color-fg-brand-secondary: var(--cz-color-brand-500);
87
- --cz-color-fg-error: var(--cz-color-error-600);
88
- --cz-color-fg-error-secondary: var(--cz-color-error-500);
89
- --cz-color-fg-warning: var(--cz-color-warning-600);
90
- --cz-color-fg-warning-secondary: var(--cz-color-warning-500);
91
- --cz-color-fg-success: var(--cz-color-success-600);
92
- --cz-color-fg-success-secondary: var(--cz-color-success-500);
93
- --cz-color-fg-info: var(--cz-color-info-600);
94
- --cz-color-fg-info-secondary: var(--cz-color-info-500);
95
- }
96
-
97
- /* Dark mode - both selectors for backward compatibility */
98
- :root.dark-mode,
99
- :root[data-theme='dark'] {
100
- /* Invert alpha colors */
101
- --cz-color-alpha-white: rgb(12 14 18);
102
- --cz-color-alpha-black: rgb(255 255 255);
15
+ --cz-color-text-primary: light-dark(
16
+ var(--cz-color-gray-900),
17
+ var(--cz-color-gray-50)
18
+ );
19
+ --cz-color-text-secondary: light-dark(
20
+ var(--cz-color-gray-700),
21
+ var(--cz-color-gray-300)
22
+ );
23
+ --cz-color-text-secondary-hover: light-dark(
24
+ var(--cz-color-gray-800),
25
+ var(--cz-color-gray-200)
26
+ );
27
+ --cz-color-text-tertiary: light-dark(
28
+ var(--cz-color-gray-600),
29
+ var(--cz-color-gray-400)
30
+ );
31
+ --cz-color-text-tertiary-hover: light-dark(
32
+ var(--cz-color-gray-700),
33
+ var(--cz-color-gray-300)
34
+ );
35
+ --cz-color-text-quaternary: light-dark(
36
+ var(--cz-color-gray-500),
37
+ var(--cz-color-gray-400)
38
+ );
39
+ --cz-color-text-disabled: light-dark(
40
+ var(--cz-color-gray-500),
41
+ var(--cz-color-gray-500)
42
+ );
43
+ --cz-color-text-placeholder: light-dark(
44
+ var(--cz-color-gray-500),
45
+ var(--cz-color-gray-500)
46
+ );
47
+ --cz-color-text-placeholder-subtle: light-dark(
48
+ var(--cz-color-gray-300),
49
+ var(--cz-color-gray-700)
50
+ );
51
+ --cz-color-text-error: light-dark(
52
+ var(--cz-color-error-700),
53
+ var(--cz-color-error-400)
54
+ );
55
+ --cz-color-text-error-hover: light-dark(
56
+ var(--cz-color-error-800),
57
+ var(--cz-color-error-300)
58
+ );
59
+ --cz-color-text-warning: light-dark(
60
+ var(--cz-color-warning-700),
61
+ var(--cz-color-warning-400)
62
+ );
63
+ --cz-color-text-success: light-dark(
64
+ var(--cz-color-success-700),
65
+ var(--cz-color-success-400)
66
+ );
67
+ --cz-color-text-brand: light-dark(
68
+ var(--cz-color-brand-600),
69
+ var(--cz-color-brand-400)
70
+ );
71
+ --cz-color-text-brand-hover: light-dark(
72
+ var(--cz-color-brand-700),
73
+ var(--cz-color-brand-300)
74
+ );
75
+ --cz-color-text-on-brand: light-dark(
76
+ var(--cz-color-white),
77
+ var(--cz-color-gray-50)
78
+ );
79
+ --cz-color-text-on-brand-secondary: light-dark(
80
+ var(--cz-color-brand-200),
81
+ var(--cz-color-gray-300)
82
+ );
83
+ --cz-color-text-info: light-dark(
84
+ var(--cz-color-info-700),
85
+ var(--cz-color-info-400)
86
+ );
87
+ --cz-color-text-info-hover: light-dark(
88
+ var(--cz-color-info-800),
89
+ var(--cz-color-info-300)
90
+ );
91
+ --cz-color-text-on-info: light-dark(
92
+ var(--cz-color-white),
93
+ var(--cz-color-gray-50)
94
+ );
103
95
 
104
- /* Text colors */
105
- --cz-color-text-primary: var(--cz-color-gray-50);
106
- --cz-color-text-secondary: var(--cz-color-gray-300);
107
- --cz-color-text-secondary-hover: var(--cz-color-gray-200);
108
- --cz-color-text-tertiary: var(--cz-color-gray-400);
109
- --cz-color-text-tertiary-hover: var(--cz-color-gray-300);
110
- --cz-color-text-quaternary: var(--cz-color-gray-400);
111
- --cz-color-text-disabled: var(--cz-color-gray-500);
112
- --cz-color-text-placeholder: var(--cz-color-gray-500);
113
- --cz-color-text-placeholder-subtle: var(--cz-color-gray-700);
114
- --cz-color-text-error: var(--cz-color-error-400);
115
- --cz-color-text-error-hover: var(--cz-color-error-300);
116
- --cz-color-text-warning: var(--cz-color-warning-400);
117
- --cz-color-text-success: var(--cz-color-success-400);
118
- --cz-color-text-brand: var(--cz-color-brand-400);
119
- --cz-color-text-brand-hover: var(--cz-color-brand-300);
120
- --cz-color-text-on-brand: var(--cz-color-gray-50);
121
- --cz-color-text-on-brand-secondary: var(--cz-color-gray-300);
122
- --cz-color-text-info: var(--cz-color-info-400);
123
- --cz-color-text-info-hover: var(--cz-color-info-300);
124
- --cz-color-text-on-info: var(--cz-color-gray-50);
96
+ /* Alpha inversions (light-dark aware) */
97
+ --cz-color-alpha-white: light-dark(rgb(255 255 255), rgb(12 14 18));
98
+ --cz-color-alpha-black: light-dark(rgb(0 0 0), rgb(255 255 255));
125
99
 
126
100
  /* Background colors */
127
- --cz-color-bg-primary: var(--cz-color-gray-950);
128
- --cz-color-bg-primary-hover: var(--cz-color-gray-800);
129
- --cz-color-bg-primary-solid: var(--cz-color-gray-900);
130
- --cz-color-bg-secondary: var(--cz-color-gray-900);
131
- --cz-color-bg-secondary-hover: var(--cz-color-gray-800);
132
- --cz-color-bg-secondary-subtle: var(--cz-color-gray-900);
133
- --cz-color-bg-tertiary: var(--cz-color-gray-800);
134
- --cz-color-bg-quaternary: var(--cz-color-gray-700);
135
- --cz-color-bg-disabled: var(--cz-color-gray-800);
136
- --cz-color-bg-disabled-subtle: var(--cz-color-gray-900);
137
- --cz-color-bg-overlay: var(--cz-color-gray-800);
138
- --cz-color-bg-brand: var(--cz-color-brand-500);
139
- --cz-color-bg-brand-secondary: var(--cz-color-brand-600);
140
- --cz-color-bg-brand-solid: var(--cz-color-brand-600);
141
- --cz-color-bg-brand-solid-hover: var(--cz-color-brand-500);
142
- --cz-color-bg-brand-section: var(--cz-color-gray-900);
143
- --cz-color-bg-error: var(--cz-color-error-950);
144
- --cz-color-bg-error-secondary: var(--cz-color-error-600);
145
- --cz-color-bg-error-solid: var(--cz-color-error-600);
146
- --cz-color-bg-error-solid-hover: var(--cz-color-error-500);
147
- --cz-color-bg-warning: var(--cz-color-warning-950);
148
- --cz-color-bg-warning-secondary: var(--cz-color-warning-600);
149
- --cz-color-bg-warning-solid: var(--cz-color-warning-600);
150
- --cz-color-bg-success: var(--cz-color-success-950);
151
- --cz-color-bg-success-secondary: var(--cz-color-success-600);
152
- --cz-color-bg-success-solid: var(--cz-color-success-600);
153
- --cz-color-bg-info: var(--cz-color-info-950);
154
- --cz-color-bg-info-secondary: var(--cz-color-info-600);
155
- --cz-color-bg-info-solid: var(--cz-color-info-600);
156
- --cz-color-bg-info-solid-hover: var(--cz-color-info-500);
101
+ --cz-color-bg-primary: light-dark(
102
+ var(--cz-color-white),
103
+ var(--cz-color-gray-950)
104
+ );
105
+ --cz-color-bg-primary-hover: light-dark(
106
+ var(--cz-color-gray-50),
107
+ var(--cz-color-gray-800)
108
+ );
109
+ --cz-color-bg-primary-solid: light-dark(
110
+ var(--cz-color-gray-950),
111
+ var(--cz-color-gray-900)
112
+ );
113
+ --cz-color-bg-secondary: light-dark(
114
+ var(--cz-color-gray-50),
115
+ var(--cz-color-gray-900)
116
+ );
117
+ --cz-color-bg-secondary-hover: light-dark(
118
+ var(--cz-color-gray-100),
119
+ var(--cz-color-gray-800)
120
+ );
121
+ --cz-color-bg-secondary-subtle: light-dark(
122
+ var(--cz-color-gray-25),
123
+ var(--cz-color-gray-900)
124
+ );
125
+ --cz-color-bg-tertiary: light-dark(
126
+ var(--cz-color-gray-100),
127
+ var(--cz-color-gray-800)
128
+ );
129
+ --cz-color-bg-quaternary: light-dark(
130
+ var(--cz-color-gray-200),
131
+ var(--cz-color-gray-700)
132
+ );
133
+ --cz-color-bg-disabled: light-dark(
134
+ var(--cz-color-gray-100),
135
+ var(--cz-color-gray-800)
136
+ );
137
+ --cz-color-bg-disabled-subtle: light-dark(
138
+ var(--cz-color-gray-50),
139
+ var(--cz-color-gray-900)
140
+ );
141
+ --cz-color-bg-overlay: light-dark(
142
+ var(--cz-color-gray-950),
143
+ var(--cz-color-gray-800)
144
+ );
145
+ --cz-color-bg-brand: light-dark(
146
+ var(--cz-color-brand-50),
147
+ var(--cz-color-brand-500)
148
+ );
149
+ --cz-color-bg-brand-secondary: light-dark(
150
+ var(--cz-color-brand-100),
151
+ var(--cz-color-brand-600)
152
+ );
153
+ --cz-color-bg-brand-solid: light-dark(
154
+ var(--cz-color-brand-600),
155
+ var(--cz-color-brand-600)
156
+ );
157
+ --cz-color-bg-brand-solid-hover: light-dark(
158
+ var(--cz-color-brand-700),
159
+ var(--cz-color-brand-500)
160
+ );
161
+ --cz-color-bg-brand-section: light-dark(
162
+ var(--cz-color-brand-800),
163
+ var(--cz-color-gray-900)
164
+ );
165
+ --cz-color-bg-error: light-dark(
166
+ var(--cz-color-error-50),
167
+ var(--cz-color-error-950)
168
+ );
169
+ --cz-color-bg-error-secondary: light-dark(
170
+ var(--cz-color-error-100),
171
+ var(--cz-color-error-600)
172
+ );
173
+ --cz-color-bg-error-solid: light-dark(
174
+ var(--cz-color-error-600),
175
+ var(--cz-color-error-600)
176
+ );
177
+ --cz-color-bg-error-solid-hover: light-dark(
178
+ var(--cz-color-error-700),
179
+ var(--cz-color-error-500)
180
+ );
181
+ --cz-color-bg-warning: light-dark(
182
+ var(--cz-color-warning-50),
183
+ var(--cz-color-warning-950)
184
+ );
185
+ --cz-color-bg-warning-secondary: light-dark(
186
+ var(--cz-color-warning-100),
187
+ var(--cz-color-warning-600)
188
+ );
189
+ --cz-color-bg-warning-solid: light-dark(
190
+ var(--cz-color-warning-600),
191
+ var(--cz-color-warning-600)
192
+ );
193
+ --cz-color-bg-success: light-dark(
194
+ var(--cz-color-success-50),
195
+ var(--cz-color-success-950)
196
+ );
197
+ --cz-color-bg-success-secondary: light-dark(
198
+ var(--cz-color-success-100),
199
+ var(--cz-color-success-600)
200
+ );
201
+ --cz-color-bg-success-solid: light-dark(
202
+ var(--cz-color-success-600),
203
+ var(--cz-color-success-600)
204
+ );
205
+ --cz-color-bg-info: light-dark(
206
+ var(--cz-color-info-50),
207
+ var(--cz-color-info-950)
208
+ );
209
+ --cz-color-bg-info-secondary: light-dark(
210
+ var(--cz-color-info-100),
211
+ var(--cz-color-info-600)
212
+ );
213
+ --cz-color-bg-info-solid: light-dark(
214
+ var(--cz-color-info-600),
215
+ var(--cz-color-info-600)
216
+ );
217
+ --cz-color-bg-info-solid-hover: light-dark(
218
+ var(--cz-color-info-700),
219
+ var(--cz-color-info-500)
220
+ );
157
221
 
158
222
  /* Border colors */
159
- --cz-color-border-primary: var(--cz-color-gray-700);
160
- --cz-color-border-secondary: var(--cz-color-gray-800);
161
- --cz-color-border-tertiary: var(--cz-color-gray-800);
162
- --cz-color-border-disabled: var(--cz-color-gray-700);
163
- --cz-color-border-disabled-subtle: var(--cz-color-gray-800);
164
- --cz-color-border-error: var(--cz-color-error-400);
165
- --cz-color-border-error-subtle: var(--cz-color-error-500);
166
- --cz-color-border-brand: var(--cz-color-brand-400);
167
- --cz-color-border-brand-alt: var(--cz-color-gray-700);
168
- --cz-color-border-info: var(--cz-color-info-400);
169
- --cz-color-border-info-subtle: var(--cz-color-info-500);
170
-
171
- /* Foreground colors */
172
- --cz-color-fg-primary: var(--cz-color-white);
173
- --cz-color-fg-secondary: var(--cz-color-gray-300);
174
- --cz-color-fg-secondary-hover: var(--cz-color-gray-200);
175
- --cz-color-fg-tertiary: var(--cz-color-gray-400);
176
- --cz-color-fg-tertiary-hover: var(--cz-color-gray-300);
177
- --cz-color-fg-quaternary: var(--cz-color-gray-600);
178
- --cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
179
- --cz-color-fg-disabled: var(--cz-color-gray-500);
180
- --cz-color-fg-disabled-subtle: var(--cz-color-gray-600);
181
- --cz-color-fg-white: var(--cz-color-white);
182
- --cz-color-fg-brand: var(--cz-color-brand-500);
183
- --cz-color-fg-brand-secondary: var(--cz-color-brand-500);
184
- --cz-color-fg-error: var(--cz-color-error-500);
185
- --cz-color-fg-error-secondary: var(--cz-color-error-400);
186
- --cz-color-fg-warning: var(--cz-color-warning-500);
187
- --cz-color-fg-warning-secondary: var(--cz-color-warning-400);
188
- --cz-color-fg-success: var(--cz-color-success-500);
189
- --cz-color-fg-success-secondary: var(--cz-color-success-400);
190
- --cz-color-fg-info: var(--cz-color-info-500);
191
- --cz-color-fg-info-secondary: var(--cz-color-info-400);
223
+ --cz-color-border-primary: light-dark(
224
+ var(--cz-color-gray-300),
225
+ var(--cz-color-gray-700)
226
+ );
227
+ --cz-color-border-secondary: light-dark(
228
+ var(--cz-color-gray-200),
229
+ var(--cz-color-gray-800)
230
+ );
231
+ --cz-color-border-tertiary: light-dark(
232
+ var(--cz-color-gray-100),
233
+ var(--cz-color-gray-800)
234
+ );
235
+ --cz-color-border-disabled: light-dark(
236
+ var(--cz-color-gray-300),
237
+ var(--cz-color-gray-700)
238
+ );
239
+ --cz-color-border-disabled-subtle: light-dark(
240
+ var(--cz-color-gray-200),
241
+ var(--cz-color-gray-800)
242
+ );
243
+ --cz-color-border-error: light-dark(
244
+ var(--cz-color-error-500),
245
+ var(--cz-color-error-400)
246
+ );
247
+ --cz-color-border-error-subtle: light-dark(
248
+ var(--cz-color-error-300),
249
+ var(--cz-color-error-500)
250
+ );
251
+ --cz-color-border-brand: light-dark(
252
+ var(--cz-color-brand-500),
253
+ var(--cz-color-brand-400)
254
+ );
255
+ --cz-color-border-brand-alt: light-dark(
256
+ var(--cz-color-brand-600),
257
+ var(--cz-color-gray-700)
258
+ );
259
+ --cz-color-border-info: light-dark(
260
+ var(--cz-color-info-500),
261
+ var(--cz-color-info-400)
262
+ );
263
+ --cz-color-border-info-subtle: light-dark(
264
+ var(--cz-color-info-300),
265
+ var(--cz-color-info-500)
266
+ );
192
267
 
193
- /* Focus ring adjustments for dark mode */
194
- --cz-focus-ring: inset 0 0 0 2px var(--cz-color-brand-800);
195
- --cz-focus-ring-error: inset 0 0 0 2px var(--cz-color-error-800);
196
- --cz-focus-ring-info: inset 0 0 0 2px var(--cz-color-info-800);
268
+ /* Foreground colors (icons, decorative elements) */
269
+ --cz-color-fg-primary: light-dark(
270
+ var(--cz-color-gray-900),
271
+ var(--cz-color-white)
272
+ );
273
+ --cz-color-fg-secondary: light-dark(
274
+ var(--cz-color-gray-700),
275
+ var(--cz-color-gray-300)
276
+ );
277
+ --cz-color-fg-secondary-hover: light-dark(
278
+ var(--cz-color-gray-800),
279
+ var(--cz-color-gray-200)
280
+ );
281
+ --cz-color-fg-tertiary: light-dark(
282
+ var(--cz-color-gray-600),
283
+ var(--cz-color-gray-400)
284
+ );
285
+ --cz-color-fg-tertiary-hover: light-dark(
286
+ var(--cz-color-gray-700),
287
+ var(--cz-color-gray-300)
288
+ );
289
+ --cz-color-fg-quaternary: light-dark(
290
+ var(--cz-color-gray-400),
291
+ var(--cz-color-gray-600)
292
+ );
293
+ --cz-color-fg-quaternary-hover: light-dark(
294
+ var(--cz-color-gray-500),
295
+ var(--cz-color-gray-500)
296
+ );
297
+ --cz-color-fg-disabled: light-dark(
298
+ var(--cz-color-gray-400),
299
+ var(--cz-color-gray-500)
300
+ );
301
+ --cz-color-fg-disabled-subtle: light-dark(
302
+ var(--cz-color-gray-300),
303
+ var(--cz-color-gray-600)
304
+ );
305
+ --cz-color-fg-white: light-dark(var(--cz-color-white), var(--cz-color-white));
306
+ --cz-color-fg-brand: light-dark(
307
+ var(--cz-color-brand-600),
308
+ var(--cz-color-brand-500)
309
+ );
310
+ --cz-color-fg-brand-secondary: light-dark(
311
+ var(--cz-color-brand-500),
312
+ var(--cz-color-brand-500)
313
+ );
314
+ --cz-color-fg-error: light-dark(
315
+ var(--cz-color-error-600),
316
+ var(--cz-color-error-500)
317
+ );
318
+ --cz-color-fg-error-secondary: light-dark(
319
+ var(--cz-color-error-500),
320
+ var(--cz-color-error-400)
321
+ );
322
+ --cz-color-fg-warning: light-dark(
323
+ var(--cz-color-warning-600),
324
+ var(--cz-color-warning-500)
325
+ );
326
+ --cz-color-fg-warning-secondary: light-dark(
327
+ var(--cz-color-warning-500),
328
+ var(--cz-color-warning-400)
329
+ );
330
+ --cz-color-fg-success: light-dark(
331
+ var(--cz-color-success-600),
332
+ var(--cz-color-success-500)
333
+ );
334
+ --cz-color-fg-success-secondary: light-dark(
335
+ var(--cz-color-success-500),
336
+ var(--cz-color-success-400)
337
+ );
338
+ --cz-color-fg-info: light-dark(
339
+ var(--cz-color-info-600),
340
+ var(--cz-color-info-500)
341
+ );
342
+ --cz-color-fg-info-secondary: light-dark(
343
+ var(--cz-color-info-500),
344
+ var(--cz-color-info-400)
345
+ );
197
346
  }
package/src/shadows.css CHANGED
@@ -1,6 +1,10 @@
1
1
  /**
2
2
  * Cosmoz Design Tokens - Shadows
3
3
  * Shadow tokens from Untitled UI
4
+ *
5
+ * Non-color shadow/focus-ring values cannot use light-dark() directly
6
+ * (it only accepts colors), so the theme-varying parts are split into
7
+ * color tokens which are assembled into static shadow values.
4
8
  */
5
9
 
6
10
  :root {
@@ -26,14 +30,44 @@
26
30
  0px 32px 64px -12px rgba(10, 13, 18, 0.14),
27
31
  0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
28
32
 
29
- /* Skeumorphic shadows (for buttons) */
33
+ /* Skeumorphic shadows (for buttons) — ring and highlight colors flip
34
+ with color-scheme via the light-dark() color tokens above the
35
+ assembled shadow values. */
36
+ --cz-color-skeumorphic-ring: light-dark(
37
+ rgba(10, 13, 18, 0.18),
38
+ rgba(255, 255, 255, 0.12)
39
+ );
40
+ --cz-color-skeumorphic-highlight: light-dark(
41
+ rgba(10, 13, 18, 0.05),
42
+ rgba(10, 13, 18, 0.2)
43
+ );
30
44
  --cz-shadow-skeumorphic:
31
- 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
32
- 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
45
+ 0px 0px 0px 1px var(--cz-color-skeumorphic-ring) inset,
46
+ 0px -2px 0px 0px var(--cz-color-skeumorphic-highlight) inset;
33
47
  --cz-shadow-xs-skeumorphic: var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
34
48
 
35
- /* Focus ring shadows */
36
- --cz-focus-ring: inset 0 0 0 2px var(--cz-color-brand-100);
37
- --cz-focus-ring-error: inset 0 0 0 2px var(--cz-color-error-100);
38
- --cz-focus-ring-info: inset 0 0 0 2px var(--cz-color-info-100);
49
+ /*
50
+ * The light-theme skeumorphic ring is near-black, so on a dark surface it
51
+ * disappears and the ::before highlight is left acting as the border. Flip
52
+ * the highlight border color to light and drop it in dark mode, where it
53
+ * would otherwise draw a second border just inside the ring.
54
+ */
55
+ --skeumorphic-color: light-dark(rgba(255, 255, 255, 0.12), transparent);
56
+
57
+ /* Focus ring shadows — colors are theme-varying, shapes are static */
58
+ --cz-color-focus-ring: light-dark(
59
+ var(--cz-color-brand-100),
60
+ var(--cz-color-brand-800)
61
+ );
62
+ --cz-color-focus-ring-error: light-dark(
63
+ var(--cz-color-error-100),
64
+ var(--cz-color-error-800)
65
+ );
66
+ --cz-color-focus-ring-info: light-dark(
67
+ var(--cz-color-info-100),
68
+ var(--cz-color-info-800)
69
+ );
70
+ --cz-focus-ring: inset 0 0 0 2px var(--cz-color-focus-ring);
71
+ --cz-focus-ring-error: inset 0 0 0 2px var(--cz-color-focus-ring-error);
72
+ --cz-focus-ring-info: inset 0 0 0 2px var(--cz-color-focus-ring-info);
39
73
  }