@neovici/cosmoz-tokens 3.5.2 → 4.1.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 +1 -1
  2. package/src/fallback.css +105 -0
  3. package/src/index.css +1 -0
  4. package/src/semantic.css +358 -185
  5. package/src/shadows.css +37 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tokens",
3
- "version": "3.5.2",
3
+ "version": "4.1.0",
4
4
  "description": "Design tokens for Cosmoz web components based on Untitled UI",
5
5
  "keywords": [
6
6
  "design-tokens",
package/src/fallback.css ADDED
@@ -0,0 +1,105 @@
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-processing: var(--cz-color-indigo-700);
22
+ --cz-color-text-brand: var(--cz-color-brand-600);
23
+ --cz-color-text-brand-hover: var(--cz-color-brand-700);
24
+ --cz-color-text-on-brand: var(--cz-color-white);
25
+ --cz-color-text-on-brand-secondary: var(--cz-color-brand-200);
26
+ --cz-color-text-info: var(--cz-color-info-700);
27
+ --cz-color-text-info-hover: var(--cz-color-info-800);
28
+ --cz-color-text-on-info: var(--cz-color-white);
29
+ --cz-color-bg-primary: var(--cz-color-white);
30
+ --cz-color-bg-primary-hover: var(--cz-color-gray-50);
31
+ --cz-color-bg-primary-solid: var(--cz-color-gray-950);
32
+ --cz-color-bg-secondary: var(--cz-color-gray-50);
33
+ --cz-color-bg-secondary-hover: var(--cz-color-gray-100);
34
+ --cz-color-bg-secondary-subtle: var(--cz-color-gray-25);
35
+ --cz-color-bg-tertiary: var(--cz-color-gray-100);
36
+ --cz-color-bg-quaternary: var(--cz-color-gray-200);
37
+ --cz-color-bg-disabled: var(--cz-color-gray-100);
38
+ --cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
39
+ --cz-color-bg-overlay: var(--cz-color-gray-950);
40
+ --cz-color-bg-brand: var(--cz-color-brand-50);
41
+ --cz-color-bg-brand-secondary: var(--cz-color-brand-100);
42
+ --cz-color-bg-brand-solid: var(--cz-color-brand-600);
43
+ --cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
44
+ --cz-color-bg-brand-section: var(--cz-color-brand-800);
45
+ --cz-color-bg-error: var(--cz-color-error-50);
46
+ --cz-color-bg-error-secondary: var(--cz-color-error-100);
47
+ --cz-color-bg-error-solid: var(--cz-color-error-600);
48
+ --cz-color-bg-error-solid-hover: var(--cz-color-error-700);
49
+ --cz-color-bg-warning: var(--cz-color-warning-50);
50
+ --cz-color-bg-warning-secondary: var(--cz-color-warning-100);
51
+ --cz-color-bg-warning-solid: var(--cz-color-warning-600);
52
+ --cz-color-bg-success: var(--cz-color-success-50);
53
+ --cz-color-bg-success-secondary: var(--cz-color-success-100);
54
+ --cz-color-bg-success-solid: var(--cz-color-success-600);
55
+ --cz-color-bg-processing: var(--cz-color-indigo-50);
56
+ --cz-color-bg-processing-secondary: var(--cz-color-indigo-100);
57
+ --cz-color-bg-processing-solid: var(--cz-color-indigo-600);
58
+ --cz-color-bg-info: var(--cz-color-info-50);
59
+ --cz-color-bg-info-secondary: var(--cz-color-info-100);
60
+ --cz-color-bg-info-solid: var(--cz-color-info-600);
61
+ --cz-color-bg-info-solid-hover: var(--cz-color-info-700);
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
+ --cz-color-fg-primary: var(--cz-color-gray-900);
74
+ --cz-color-fg-secondary: var(--cz-color-gray-700);
75
+ --cz-color-fg-secondary-hover: var(--cz-color-gray-800);
76
+ --cz-color-fg-tertiary: var(--cz-color-gray-600);
77
+ --cz-color-fg-tertiary-hover: var(--cz-color-gray-700);
78
+ --cz-color-fg-quaternary: var(--cz-color-gray-400);
79
+ --cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
80
+ --cz-color-fg-disabled: var(--cz-color-gray-400);
81
+ --cz-color-fg-disabled-subtle: var(--cz-color-gray-300);
82
+ --cz-color-fg-white: var(--cz-color-white);
83
+ --cz-color-fg-brand: var(--cz-color-brand-600);
84
+ --cz-color-fg-brand-secondary: var(--cz-color-brand-500);
85
+ --cz-color-fg-error: var(--cz-color-error-600);
86
+ --cz-color-fg-error-secondary: var(--cz-color-error-500);
87
+ --cz-color-fg-warning: var(--cz-color-warning-600);
88
+ --cz-color-fg-warning-secondary: var(--cz-color-warning-500);
89
+ --cz-color-fg-success: var(--cz-color-success-600);
90
+ --cz-color-fg-success-secondary: var(--cz-color-success-500);
91
+ --cz-color-fg-processing: var(--cz-color-indigo-600);
92
+ --cz-color-fg-processing-secondary: var(--cz-color-indigo-500);
93
+ --cz-color-fg-info: var(--cz-color-info-600);
94
+ --cz-color-fg-info-secondary: var(--cz-color-info-500);
95
+ --cz-focus-ring: inset 0 0 0 2px var(--cz-color-brand-100);
96
+ --cz-focus-ring-error: inset 0 0 0 2px var(--cz-color-error-100);
97
+ --cz-focus-ring-info: inset 0 0 0 2px var(--cz-color-info-100);
98
+ --cz-shadow-skeumorphic:
99
+ 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
100
+ 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
101
+ --cz-shadow-xs-skeumorphic:
102
+ var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
103
+ --skeumorphic-color: rgba(255, 255, 255, 0.12);
104
+ }
105
+ }
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,370 @@
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-processing: light-dark(
68
+ var(--cz-color-indigo-700),
69
+ var(--cz-color-indigo-400)
70
+ );
71
+ --cz-color-text-brand: light-dark(
72
+ var(--cz-color-brand-600),
73
+ var(--cz-color-brand-400)
74
+ );
75
+ --cz-color-text-brand-hover: light-dark(
76
+ var(--cz-color-brand-700),
77
+ var(--cz-color-brand-300)
78
+ );
79
+ --cz-color-text-on-brand: light-dark(
80
+ var(--cz-color-white),
81
+ var(--cz-color-gray-50)
82
+ );
83
+ --cz-color-text-on-brand-secondary: light-dark(
84
+ var(--cz-color-brand-200),
85
+ var(--cz-color-gray-300)
86
+ );
87
+ --cz-color-text-info: light-dark(
88
+ var(--cz-color-info-700),
89
+ var(--cz-color-info-400)
90
+ );
91
+ --cz-color-text-info-hover: light-dark(
92
+ var(--cz-color-info-800),
93
+ var(--cz-color-info-300)
94
+ );
95
+ --cz-color-text-on-info: light-dark(
96
+ var(--cz-color-white),
97
+ var(--cz-color-gray-50)
98
+ );
103
99
 
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);
100
+ /* Alpha inversions (light-dark aware) */
101
+ --cz-color-alpha-white: light-dark(rgb(255 255 255), rgb(12 14 18));
102
+ --cz-color-alpha-black: light-dark(rgb(0 0 0), rgb(255 255 255));
125
103
 
126
104
  /* 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);
105
+ --cz-color-bg-primary: light-dark(
106
+ var(--cz-color-white),
107
+ var(--cz-color-gray-950)
108
+ );
109
+ --cz-color-bg-primary-hover: light-dark(
110
+ var(--cz-color-gray-50),
111
+ var(--cz-color-gray-800)
112
+ );
113
+ --cz-color-bg-primary-solid: light-dark(
114
+ var(--cz-color-gray-950),
115
+ var(--cz-color-gray-900)
116
+ );
117
+ --cz-color-bg-secondary: light-dark(
118
+ var(--cz-color-gray-50),
119
+ var(--cz-color-gray-900)
120
+ );
121
+ --cz-color-bg-secondary-hover: light-dark(
122
+ var(--cz-color-gray-100),
123
+ var(--cz-color-gray-800)
124
+ );
125
+ --cz-color-bg-secondary-subtle: light-dark(
126
+ var(--cz-color-gray-25),
127
+ var(--cz-color-gray-900)
128
+ );
129
+ --cz-color-bg-tertiary: light-dark(
130
+ var(--cz-color-gray-100),
131
+ var(--cz-color-gray-800)
132
+ );
133
+ --cz-color-bg-quaternary: light-dark(
134
+ var(--cz-color-gray-200),
135
+ var(--cz-color-gray-700)
136
+ );
137
+ --cz-color-bg-disabled: light-dark(
138
+ var(--cz-color-gray-100),
139
+ var(--cz-color-gray-800)
140
+ );
141
+ --cz-color-bg-disabled-subtle: light-dark(
142
+ var(--cz-color-gray-50),
143
+ var(--cz-color-gray-900)
144
+ );
145
+ --cz-color-bg-overlay: light-dark(
146
+ var(--cz-color-gray-950),
147
+ var(--cz-color-gray-800)
148
+ );
149
+ --cz-color-bg-brand: light-dark(
150
+ var(--cz-color-brand-50),
151
+ var(--cz-color-brand-500)
152
+ );
153
+ --cz-color-bg-brand-secondary: light-dark(
154
+ var(--cz-color-brand-100),
155
+ var(--cz-color-brand-600)
156
+ );
157
+ --cz-color-bg-brand-solid: light-dark(
158
+ var(--cz-color-brand-600),
159
+ var(--cz-color-brand-600)
160
+ );
161
+ --cz-color-bg-brand-solid-hover: light-dark(
162
+ var(--cz-color-brand-700),
163
+ var(--cz-color-brand-500)
164
+ );
165
+ --cz-color-bg-brand-section: light-dark(
166
+ var(--cz-color-brand-800),
167
+ var(--cz-color-gray-900)
168
+ );
169
+ --cz-color-bg-error: light-dark(
170
+ var(--cz-color-error-50),
171
+ var(--cz-color-error-950)
172
+ );
173
+ --cz-color-bg-error-secondary: light-dark(
174
+ var(--cz-color-error-100),
175
+ var(--cz-color-error-600)
176
+ );
177
+ --cz-color-bg-error-solid: light-dark(
178
+ var(--cz-color-error-600),
179
+ var(--cz-color-error-600)
180
+ );
181
+ --cz-color-bg-error-solid-hover: light-dark(
182
+ var(--cz-color-error-700),
183
+ var(--cz-color-error-500)
184
+ );
185
+ --cz-color-bg-warning: light-dark(
186
+ var(--cz-color-warning-50),
187
+ var(--cz-color-warning-950)
188
+ );
189
+ --cz-color-bg-warning-secondary: light-dark(
190
+ var(--cz-color-warning-100),
191
+ var(--cz-color-warning-600)
192
+ );
193
+ --cz-color-bg-warning-solid: light-dark(
194
+ var(--cz-color-warning-600),
195
+ var(--cz-color-warning-600)
196
+ );
197
+ --cz-color-bg-success: light-dark(
198
+ var(--cz-color-success-50),
199
+ var(--cz-color-success-950)
200
+ );
201
+ --cz-color-bg-success-secondary: light-dark(
202
+ var(--cz-color-success-100),
203
+ var(--cz-color-success-600)
204
+ );
205
+ --cz-color-bg-success-solid: light-dark(
206
+ var(--cz-color-success-600),
207
+ var(--cz-color-success-600)
208
+ );
209
+ --cz-color-bg-processing: light-dark(
210
+ var(--cz-color-indigo-50),
211
+ var(--cz-color-indigo-950)
212
+ );
213
+ --cz-color-bg-processing-secondary: light-dark(
214
+ var(--cz-color-indigo-100),
215
+ var(--cz-color-indigo-600)
216
+ );
217
+ --cz-color-bg-processing-solid: light-dark(
218
+ var(--cz-color-indigo-600),
219
+ var(--cz-color-indigo-600)
220
+ );
221
+ --cz-color-bg-info: light-dark(
222
+ var(--cz-color-info-50),
223
+ var(--cz-color-info-950)
224
+ );
225
+ --cz-color-bg-info-secondary: light-dark(
226
+ var(--cz-color-info-100),
227
+ var(--cz-color-info-600)
228
+ );
229
+ --cz-color-bg-info-solid: light-dark(
230
+ var(--cz-color-info-600),
231
+ var(--cz-color-info-600)
232
+ );
233
+ --cz-color-bg-info-solid-hover: light-dark(
234
+ var(--cz-color-info-700),
235
+ var(--cz-color-info-500)
236
+ );
157
237
 
158
238
  /* 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);
239
+ --cz-color-border-primary: light-dark(
240
+ var(--cz-color-gray-300),
241
+ var(--cz-color-gray-700)
242
+ );
243
+ --cz-color-border-secondary: light-dark(
244
+ var(--cz-color-gray-200),
245
+ var(--cz-color-gray-800)
246
+ );
247
+ --cz-color-border-tertiary: light-dark(
248
+ var(--cz-color-gray-100),
249
+ var(--cz-color-gray-800)
250
+ );
251
+ --cz-color-border-disabled: light-dark(
252
+ var(--cz-color-gray-300),
253
+ var(--cz-color-gray-700)
254
+ );
255
+ --cz-color-border-disabled-subtle: light-dark(
256
+ var(--cz-color-gray-200),
257
+ var(--cz-color-gray-800)
258
+ );
259
+ --cz-color-border-error: light-dark(
260
+ var(--cz-color-error-500),
261
+ var(--cz-color-error-400)
262
+ );
263
+ --cz-color-border-error-subtle: light-dark(
264
+ var(--cz-color-error-300),
265
+ var(--cz-color-error-500)
266
+ );
267
+ --cz-color-border-brand: light-dark(
268
+ var(--cz-color-brand-500),
269
+ var(--cz-color-brand-400)
270
+ );
271
+ --cz-color-border-brand-alt: light-dark(
272
+ var(--cz-color-brand-600),
273
+ var(--cz-color-gray-700)
274
+ );
275
+ --cz-color-border-info: light-dark(
276
+ var(--cz-color-info-500),
277
+ var(--cz-color-info-400)
278
+ );
279
+ --cz-color-border-info-subtle: light-dark(
280
+ var(--cz-color-info-300),
281
+ var(--cz-color-info-500)
282
+ );
192
283
 
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);
284
+ /* Foreground colors (icons, decorative elements) */
285
+ --cz-color-fg-primary: light-dark(
286
+ var(--cz-color-gray-900),
287
+ var(--cz-color-white)
288
+ );
289
+ --cz-color-fg-secondary: light-dark(
290
+ var(--cz-color-gray-700),
291
+ var(--cz-color-gray-300)
292
+ );
293
+ --cz-color-fg-secondary-hover: light-dark(
294
+ var(--cz-color-gray-800),
295
+ var(--cz-color-gray-200)
296
+ );
297
+ --cz-color-fg-tertiary: light-dark(
298
+ var(--cz-color-gray-600),
299
+ var(--cz-color-gray-400)
300
+ );
301
+ --cz-color-fg-tertiary-hover: light-dark(
302
+ var(--cz-color-gray-700),
303
+ var(--cz-color-gray-300)
304
+ );
305
+ --cz-color-fg-quaternary: light-dark(
306
+ var(--cz-color-gray-400),
307
+ var(--cz-color-gray-600)
308
+ );
309
+ --cz-color-fg-quaternary-hover: light-dark(
310
+ var(--cz-color-gray-500),
311
+ var(--cz-color-gray-500)
312
+ );
313
+ --cz-color-fg-disabled: light-dark(
314
+ var(--cz-color-gray-400),
315
+ var(--cz-color-gray-500)
316
+ );
317
+ --cz-color-fg-disabled-subtle: light-dark(
318
+ var(--cz-color-gray-300),
319
+ var(--cz-color-gray-600)
320
+ );
321
+ --cz-color-fg-white: light-dark(var(--cz-color-white), var(--cz-color-white));
322
+ --cz-color-fg-brand: light-dark(
323
+ var(--cz-color-brand-600),
324
+ var(--cz-color-brand-500)
325
+ );
326
+ --cz-color-fg-brand-secondary: light-dark(
327
+ var(--cz-color-brand-500),
328
+ var(--cz-color-brand-500)
329
+ );
330
+ --cz-color-fg-error: light-dark(
331
+ var(--cz-color-error-600),
332
+ var(--cz-color-error-500)
333
+ );
334
+ --cz-color-fg-error-secondary: light-dark(
335
+ var(--cz-color-error-500),
336
+ var(--cz-color-error-400)
337
+ );
338
+ --cz-color-fg-warning: light-dark(
339
+ var(--cz-color-warning-600),
340
+ var(--cz-color-warning-500)
341
+ );
342
+ --cz-color-fg-warning-secondary: light-dark(
343
+ var(--cz-color-warning-500),
344
+ var(--cz-color-warning-400)
345
+ );
346
+ --cz-color-fg-success: light-dark(
347
+ var(--cz-color-success-600),
348
+ var(--cz-color-success-500)
349
+ );
350
+ --cz-color-fg-success-secondary: light-dark(
351
+ var(--cz-color-success-500),
352
+ var(--cz-color-success-400)
353
+ );
354
+ --cz-color-fg-processing: light-dark(
355
+ var(--cz-color-indigo-600),
356
+ var(--cz-color-indigo-500)
357
+ );
358
+ --cz-color-fg-processing-secondary: light-dark(
359
+ var(--cz-color-indigo-500),
360
+ var(--cz-color-indigo-400)
361
+ );
362
+ --cz-color-fg-info: light-dark(
363
+ var(--cz-color-info-600),
364
+ var(--cz-color-info-500)
365
+ );
366
+ --cz-color-fg-info-secondary: light-dark(
367
+ var(--cz-color-info-500),
368
+ var(--cz-color-info-400)
369
+ );
197
370
  }
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,27 +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);
39
- }
40
-
41
- :root[data-theme='dark'] {
42
49
  /*
43
50
  * The light-theme skeumorphic ring is near-black, so on a dark surface it
44
51
  * disappears and the ::before highlight is left acting as the border. Flip
45
- * the ring to light so it stays the edge, and drop the highlight, which
46
- * would otherwise draw a second border just inside it.
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.
47
54
  */
48
- --cz-shadow-skeumorphic:
49
- 0px 0px 0px 1px rgba(255, 255, 255, 0.12) inset,
50
- 0px -2px 0px 0px rgba(10, 13, 18, 0.2) inset;
51
- --skeumorphic-color: transparent;
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);
52
73
  }