@enovaui/web-tokens 0.8.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/css/color-semantic-lg-brand.css +126 -35
  3. package/css/color-semantic-mobile.css +106 -15
  4. package/css/color-semantic-mono-black.css +111 -20
  5. package/css/color-semantic-mono-white.css +110 -19
  6. package/css/color-semantic-web.css +106 -15
  7. package/css/radius-semantic.css +60 -0
  8. package/css/typography-semantic.css +24 -0
  9. package/json/color-semantic-lg-brand.json +123 -33
  10. package/json/color-semantic-mobile.json +104 -14
  11. package/json/color-semantic-mono-black.json +104 -14
  12. package/json/color-semantic-mono-white.json +103 -13
  13. package/json/color-semantic-web.json +104 -14
  14. package/json/radius-semantic.json +53 -0
  15. package/json/typography-semantic.json +33 -0
  16. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,33 @@
2
2
 
3
3
  The following is a curated list of changes in the web tokens module, newest changes on the top.
4
4
 
5
+ ## [0.9.0] - 2025-11-07
6
+
7
+ ### Removed
8
+
9
+ - `semantic-color-surface-badge-dark`
10
+ - `semantic-color-surface-badge-light`
11
+ - `semantic-color-on-surface-default-error`
12
+ - `semantic-color-on-surface-default-success`
13
+ - `semantic-color-on-surface-button`
14
+
15
+ ### Changed
16
+
17
+ - `semantic-color-background-main` value
18
+ - `semantic-color-on-background-default` value
19
+ - `semantic-color-surface-default-handle` value
20
+ - `semantic-color-surface-default-indicator` value
21
+ - `semantic-color-surface-default-track` value
22
+ - `semantic-color-surface-sub` value
23
+ - `semantic-color-surface-chip` value
24
+ - `semantic-color-surface-notification-card` value
25
+
26
+ ### Added
27
+
28
+ - `color-semantic` tokens to match the latest guide
29
+ - `radius-semantic` tokens to match the latest guide
30
+ - `typography-semantic` tokens to match the latest guide
31
+
5
32
  ## [0.8.2] - 2025-09-09
6
33
 
7
34
  - No significant changes
package/css/color-semantic-lg-brand.css CHANGED
@@ -10,70 +10,161 @@ Semantic Color Tokens
10
10
  ------------------------------------------- */
11
11
 
12
12
  :root {
13
- /* background */
14
- --semantic-color-background-main: var(--primitive-color-warm-gray-99);
13
+
14
+ /* Background */
15
+ --semantic-color-background-main: var(--primitive-color-warm-gray-85);
15
16
  --semantic-color-background-sub: var(--primitive-color-white);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
16
20
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
21
+ /* On Background */
22
+ --semantic-color-on-background-default: var(--primitive-color-black);
19
23
 
20
- /* surface */
21
- --semantic-color-surface-default-handle: var(--primitive-color-black);
22
- --semantic-color-surface-default-indicator: var(--primitive-color-heritage-red-40);
24
+ /* Surface */
25
+ --semantic-color-surface-default-error: var(--primitive-color-neutral-gray-15);
26
+ --semantic-color-surface-default-handle: var(--primitive-color-warm-gray-35);
27
+ --semantic-color-surface-default-indicator: var(--primitive-color-active-red-50);
23
28
  --semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
24
29
  --semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
25
- --semantic-color-surface-default-track: var(--primitive-color-warm-gray-75);
30
+ --semantic-color-surface-default-supporting: var(--primitive-color-neutral-gray-95);
31
+ --semantic-color-surface-default-success: var(--primitive-color-teal-green-40);
32
+ --semantic-color-surface-default-track: var(--primitive-color-warm-gray-70);
33
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-70);
26
34
  --semantic-color-surface-main: var(--primitive-color-white);
27
35
  --semantic-color-surface-main-hover: var(--primitive-color-warm-gray-85);
28
36
  --semantic-color-surface-main-pressed: var(--primitive-color-warm-gray-75);
29
- --semantic-color-surface-sub: var(--primitive-color-warm-gray-75);
37
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-95);
38
+ --semantic-color-surface-sub: var(--primitive-color-warm-gray-80);
30
39
  --semantic-color-surface-accent: var(--primitive-color-active-red-50);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-warm-gray-10);
32
- --semantic-color-surface-badge-light: var(--primitive-color-warm-gray-75);
40
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
41
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
42
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
43
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
44
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
45
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
46
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
47
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
48
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
49
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
50
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
51
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-cool-gray-90);
52
+ --semantic-color-surface-badge-black: var(--primitive-color-warm-gray-10);
33
53
  --semantic-color-surface-button-primary: var(--primitive-color-active-red-50);
34
- --semantic-color-surface-button-primary-hover: var(--primitive-color-active-red-40);
35
- --semantic-color-surface-button-primary-pressed: var(--primitive-color-active-red-30);
36
- --semantic-color-surface-button-secondary: var(--primitive-color-warm-gray-75);
37
- --semantic-color-surface-button-secondary-hover: var(--primitive-color-warm-gray-75);
38
- --semantic-color-surface-button-secondary-pressed: var(--primitive-color-warm-gray-60);
54
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-white);
55
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-warm-gray-75);
56
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-white);
57
+ --semantic-color-surface-button-secondary: var(--primitive-color-white);
58
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-active-red-50);
59
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-active-red-40);
39
60
  --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
61
  --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
41
62
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-warm-gray-75);
42
63
  --semantic-color-surface-button-icon: var(--primitive-color-warm-gray-75);
43
64
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-warm-gray-60);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
65
+ --semantic-color-surface-button-social: var(--primitive-color-neutral-gray-95);
66
+ --semantic-color-surface-button-light: var(--primitive-color-neutral-gray-95);
67
+ --semantic-color-surface-button-dark: var(--primitive-color-warm-gray-15);
68
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
69
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
70
  --semantic-color-surface-chip-selected: var(--primitive-color-active-red-50);
46
- --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-75);
47
- --semantic-color-surface-selection-active: var(--primitive-color-warm-gray-15);
48
- --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-60);
71
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
72
+ --semantic-color-surface-dialog-popup: var(--primitive-color-warm-gray-85);
73
+ --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-15);
74
+ --semantic-color-surface-selection-active: var(--primitive-color-active-red-50);
75
+ --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-35);
76
+ --semantic-color-surface-selection-disabled: var(--primitive-color-warm-gray-70);
77
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-warm-gray-55);
78
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-warm-gray-35);
79
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-warm-gray-85);
80
+ --semantic-color-surface-tab: var(--primitive-color-cool-gray-95);
81
+ --semantic-color-surface-tab-active: var(--primitive-color-warm-gray-95);
49
82
  --semantic-color-surface-text-field-disabled: var(--primitive-color-warm-gray-75);
50
83
  --semantic-color-surface-toast: var(--primitive-color-warm-gray-10);
51
84
  --semantic-color-surface-white: var(--primitive-color-white);
52
85
  --semantic-color-surface-black: var(--primitive-color-warm-gray-10);
86
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
87
+ --semantic-color-surface-footer: var(--primitive-color-warm-gray-15);
88
+ --semantic-color-surface-header-dark: var(--primitive-color-warm-gray-85);
89
+ --semantic-color-surface-header-light: var(--primitive-color-warm-gray-90);
90
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
91
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
92
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-warm-gray-55);
53
93
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
- --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
94
+ /* On Surface */
95
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-warm-gray-55);
96
+ --semantic-color-on-surface-main: var(--primitive-color-black);
97
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-50);
98
+ --semantic-color-on-surface-main-success: var(--primitive-color-yellow-green-40);
58
99
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
- --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
- --semantic-color-on-surface-accent: var(--primitive-color-active-red-60);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
100
+ --semantic-color-on-surface-sub: var(--primitive-color-warm-gray-30);
101
+ --semantic-color-on-surface-sub-error: var(--primitive-color-heritage-red-35);
102
+ --semantic-color-on-surface-sub-success: var(--primitive-color-yellow-green-35);
103
+ --semantic-color-on-surface-accent: var(--primitive-color-active-red-50);
104
+ --semantic-color-on-surface-highlight: var(--primitive-color-heritage-red-35);
105
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
106
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
107
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
108
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
109
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
110
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-black);
111
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-black);
112
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-black);
113
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-white);
114
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-black);
115
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
116
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
117
+ --semantic-color-on-surface-footer: var(--primitive-color-neutral-gray-25);
118
+ --semantic-color-on-surface-index: var(--primitive-color-warm-gray-70);
119
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-warm-gray-70);
120
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-warm-gray-35);
62
121
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
- --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
122
+ --semantic-color-on-surface-black: var(--primitive-color-black);
123
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-warm-gray-15);
124
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-neutral-gray-45);
125
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-cool-gray-20);
126
+ --semantic-color-on-surface-header: var(--primitive-color-warm-gray-35);
127
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-warm-gray-35);
128
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
129
+ --semantic-color-on-surface-card-product: var(--primitive-color-neutral-gray-25);
130
+ --semantic-color-on-surface-menu: var(--primitive-color-warm-gray-70);
131
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-warm-gray-35);
132
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-warm-gray-55);
133
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-warm-gray-45);
64
134
 
65
- /* stroke */
66
- --semantic-color-stroke-default-error: var(--primitive-color-red-orange-60);
135
+ /* Stroke */
136
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-50);
67
137
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
- --semantic-color-stroke-main: var(--primitive-color-warm-gray-75);
138
+ --semantic-color-stroke-main: var(--primitive-color-warm-gray-70);
69
139
  --semantic-color-stroke-main-focused: var(--primitive-color-warm-gray-30);
70
140
  --semantic-color-stroke-sub: var(--primitive-color-warm-gray-60);
141
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
142
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
143
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
144
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
71
145
  --semantic-color-stroke-accent: var(--primitive-color-active-red-50);
72
- --semantic-color-stroke-button: var(--primitive-color-warm-gray-30);
73
- --semantic-color-stroke-selection-active: var(--primitive-color-warm-gray-15);
74
- --semantic-color-stroke-selection-inactive: var(--primitive-color-warm-gray-60);
146
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
147
+ --semantic-color-stroke-button: var(--primitive-color-warm-gray-50);
148
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-warm-gray-30);
149
+ --semantic-color-stroke-button-icon: var(--primitive-color-warm-gray-35);
150
+ --semantic-color-stroke-card-selected: var(--primitive-color-black);
151
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
152
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
153
+ --semantic-color-stroke-chip-selected: var(--primitive-color-black);
154
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
155
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
156
+ --semantic-color-stroke-page-indicator: var(--primitive-color-warm-gray-80);
157
+ --semantic-color-stroke-selection-active: var(--primitive-color-active-red-50);
158
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-black);
75
159
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
160
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-55);
161
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-warm-gray-10);
162
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-warm-gray-70);
163
+ --semantic-color-stroke-white: var(--primitive-color-white);
164
+ --semantic-color-stroke-black: var(--primitive-color-black);
76
165
 
77
- /* scrim */
166
+ /* Scrim */
78
167
  --semantic-color-scrim-default: var(--primitive-color-black);
168
+ --semantic-color-scrim-white: var(--primitive-color-white);
169
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
170
  }
package/css/color-semantic-mobile.css CHANGED
@@ -10,15 +10,19 @@ Semantic Color Tokens
10
10
  ------------------------------------------- */
11
11
 
12
12
  :root {
13
- /* background */
13
+
14
+ /* Background */
14
15
  --semantic-color-background-main: var(--primitive-color-mist-gray-95);
15
16
  --semantic-color-background-sub: var(--primitive-color-white);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
16
20
 
17
- /* onBackground */
21
+ /* On Background */
18
22
  --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
19
23
 
20
- /* surface */
21
- --semantic-color-surface-default-handle: var(--primitive-color-cobalt-blue-40);
24
+ /* Surface */
25
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-50);
22
26
  --semantic-color-surface-default-indicator: var(--primitive-color-cobalt-blue-40);
23
27
  --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
24
28
  --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
@@ -26,10 +30,8 @@ Semantic Color Tokens
26
30
  --semantic-color-surface-main: var(--primitive-color-white);
27
31
  --semantic-color-surface-main-hover: var(--primitive-color-blue-gray-95);
28
32
  --semantic-color-surface-main-pressed: var(--primitive-color-blue-gray-90);
29
- --semantic-color-surface-sub: var(--primitive-color-blue-gray-90);
33
+ --semantic-color-surface-sub: var(--primitive-color-blue-gray-85);
30
34
  --semantic-color-surface-accent: var(--primitive-color-cobalt-blue-40);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-blue-gray-10);
32
- --semantic-color-surface-badge-light: var(--primitive-color-blue-gray-90);
33
35
  --semantic-color-surface-button-primary: var(--primitive-color-cobalt-blue-40);
34
36
  --semantic-color-surface-button-primary-hover: var(--primitive-color-cobalt-blue-30);
35
37
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-cobalt-blue-20);
@@ -41,28 +43,96 @@ Semantic Color Tokens
41
43
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
44
  --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
43
45
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
46
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
47
  --semantic-color-surface-chip-selected: var(--primitive-color-cobalt-blue-40);
46
- --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
48
+ --semantic-color-surface-notification-card: var(--primitive-color-cool-gray-25);
47
49
  --semantic-color-surface-selection-active: var(--primitive-color-cobalt-blue-50);
48
50
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
51
  --semantic-color-surface-text-field-disabled: var(--primitive-color-blue-gray-90);
50
52
  --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
51
53
  --semantic-color-surface-white: var(--primitive-color-white);
52
54
  --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
55
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-surface-default-supporting: var(--primitive-color-blue-gray-95);
57
+ --semantic-color-surface-default-success: var(--primitive-color-green-45);
58
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-80);
59
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-95);
60
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
61
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
62
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
63
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
64
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
65
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
66
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
67
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
68
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
69
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
70
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
71
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-blue-gray-90);
72
+ --semantic-color-surface-badge-black: var(--primitive-color-blue-gray-10);
73
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-cobalt-blue-40);
74
+ --semantic-color-surface-button-social: var(--primitive-color-blue-gray-95);
75
+ --semantic-color-surface-button-light: var(--primitive-color-blue-gray-90);
76
+ --semantic-color-surface-button-dark: var(--primitive-color-blue-gray-10);
77
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
78
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
79
+ --semantic-color-surface-dialog-popup: var(--primitive-color-mist-gray-95);
80
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-70);
81
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
82
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-70);
83
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-95);
84
+ --semantic-color-surface-tab: var(--primitive-color-blue-gray-95);
85
+ --semantic-color-surface-tab-active: var(--primitive-color-white);
86
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
87
+ --semantic-color-surface-footer: var(--primitive-color-cool-gray-25);
88
+ --semantic-color-surface-header-dark: var(--primitive-color-mist-gray-95);
89
+ --semantic-color-surface-header-light: var(--primitive-color-mist-gray-95);
90
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
91
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
92
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-70);
53
93
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
94
+ /* On Surface */
57
95
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
96
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
97
  --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
98
  --semantic-color-on-surface-accent: var(--primitive-color-cobalt-blue-40);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
99
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
100
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
101
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-cool-gray-70);
102
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-60);
103
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-55);
104
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-45);
105
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-55);
106
+ --semantic-color-on-surface-highlight: var(--primitive-color-cobalt-blue-30);
107
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
108
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
109
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
110
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
111
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
112
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-white);
113
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
114
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-mist-gray-30);
115
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-mist-gray-30);
116
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-mist-gray-30);
117
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
118
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
119
+ --semantic-color-on-surface-footer: var(--primitive-color-blue-gray-20);
120
+ --semantic-color-on-surface-index: var(--primitive-color-blue-gray-80);
121
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-cool-gray-70);
122
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-mist-gray-45);
123
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-20);
124
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-45);
125
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-blue-gray-20);
126
+ --semantic-color-on-surface-header: var(--primitive-color-mist-gray-45);
127
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-mist-gray-45);
128
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
129
+ --semantic-color-on-surface-card-product: var(--primitive-color-blue-gray-20);
130
+ --semantic-color-on-surface-menu: var(--primitive-color-blue-gray-80);
131
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-mist-gray-45);
132
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
133
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-cool-gray-55);
64
134
 
65
- /* stroke */
135
+ /* Stroke */
66
136
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
137
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
138
  --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
@@ -73,7 +143,28 @@ Semantic Color Tokens
73
143
  --semantic-color-stroke-selection-active: var(--primitive-color-cobalt-blue-50);
74
144
  --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
145
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
146
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
147
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
148
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
149
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
150
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
151
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-blue-gray-80);
152
+ --semantic-color-stroke-button-icon: var(--primitive-color-blue-gray-80);
153
+ --semantic-color-stroke-card-selected: var(--primitive-color-mist-gray-70);
154
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
155
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
156
+ --semantic-color-stroke-chip-selected: var(--primitive-color-black);
157
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
158
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
159
+ --semantic-color-stroke-page-indicator: var(--primitive-color-blue-gray-80);
160
+ --semantic-color-stroke-text-field: var(--primitive-color-blue-gray-70);
161
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-blue-gray-35);
162
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-blue-gray-70);
163
+ --semantic-color-stroke-white: var(--primitive-color-white);
164
+ --semantic-color-stroke-black: var(--primitive-color-blue-gray-10);
76
165
 
77
- /* scrim */
166
+ /* Scrim */
78
167
  --semantic-color-scrim-default: var(--primitive-color-black);
168
+ --semantic-color-scrim-white: var(--primitive-color-white);
169
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
170
  }
package/css/color-semantic-mono-black.css CHANGED
@@ -3,21 +3,25 @@
3
3
  * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
- @import "@enovaui/core-tokens/css/color-primitive.css";
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
7
 
8
- /* ----------------------------------------
9
- Semantic Color Tokens
10
- ------------------------------------------- */
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
11
 
12
- :root {
13
- /* background */
12
+ :root {
13
+
14
+ /* Background */
14
15
  --semantic-color-background-main: var(--primitive-color-black);
15
16
  --semantic-color-background-sub: var(--primitive-color-mist-gray-30);
17
+ --semantic-color-background-white: var(--primitive-color-white);
18
+ --semantic-color-background-black: var(--primitive-color-black);
19
+ --semantic-color-background-dark-gray: var(--primitive-color-warm-gray-15);
16
20
 
17
- /* onBackground */
21
+ /* On Background */
18
22
  --semantic-color-on-background-default: var(--primitive-color-mist-gray-99);
19
23
 
20
- /* surface */
24
+ /* Surface */
21
25
  --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-60);
22
26
  --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-90);
23
27
  --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
@@ -26,10 +30,8 @@
26
30
  --semantic-color-surface-main: var(--primitive-color-mist-gray-30);
27
31
  --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-95);
28
32
  --semantic-color-surface-main-pressed: var(--primitive-color-mist-gray-90);
29
- --semantic-color-surface-sub: var(--primitive-color-mist-gray-90);
33
+ --semantic-color-surface-sub: var(--primitive-color-mist-gray-40);
30
34
  --semantic-color-surface-accent: var(--primitive-color-mist-gray-50);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-mist-gray-60);
32
- --semantic-color-surface-badge-light: var(--primitive-color-mist-gray-40);
33
35
  --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-50);
34
36
  --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-90);
35
37
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-30);
@@ -41,28 +43,96 @@
41
43
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-30);
42
44
  --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-40);
43
45
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-50);
44
- --semantic-color-surface-chip: var(--primitive-color-mist-gray-40);
46
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-25);
45
47
  --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-90);
46
- --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-40);
48
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-30);
47
49
  --semantic-color-surface-selection-active: var(--primitive-color-green-60);
48
50
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-50);
49
51
  --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-40);
50
52
  --semantic-color-surface-toast: var(--primitive-color-mist-gray-60);
51
53
  --semantic-color-surface-white: var(--primitive-color-white);
52
54
  --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
55
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-surface-default-supporting: var(--primitive-color-mist-gray-45);
57
+ --semantic-color-surface-default-success: var(--primitive-color-green-70);
58
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-80);
59
+ --semantic-color-surface-main-disabled: var(--primitive-color-mist-gray-30);
60
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
61
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
62
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
63
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
64
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
65
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
66
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
67
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
68
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
69
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
70
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
71
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-cool-gray-90);
72
+ --semantic-color-surface-badge-black: var(--primitive-color-mist-gray-40);
73
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-mist-gray-50);
74
+ --semantic-color-surface-button-social: var(--primitive-color-mist-gray-45);
75
+ --semantic-color-surface-button-light: var(--primitive-color-cool-gray-90);
76
+ --semantic-color-surface-button-dark: var(--primitive-color-mist-gray-60);
77
+ --semantic-color-surface-card-gray: var(--primitive-color-mist-gray-35);
78
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-30);
79
+ --semantic-color-surface-dialog-popup: var(--primitive-color-black);
80
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-50);
81
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-50);
82
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-50);
83
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-20);
84
+ --semantic-color-surface-tab: var(--primitive-color-mist-gray-45);
85
+ --semantic-color-surface-tab-active: var(--primitive-color-mist-gray-30);
86
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
87
+ --semantic-color-surface-footer: var(--primitive-color-mist-gray-30);
88
+ --semantic-color-surface-header-dark: var(--primitive-color-black);
89
+ --semantic-color-surface-header-light: var(--primitive-color-black);
90
+ --semantic-color-surface-sub-disabled: var(--primitive-color-mist-gray-30);
91
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-40);
92
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-50);
53
93
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-70);
94
+ /* On Surface */
57
95
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-99);
58
96
  --semantic-color-on-surface-main-selected: var(--primitive-color-mist-gray-30);
59
- --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-60);
97
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-80);
60
98
  --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-90);
61
- --semantic-color-on-surface-button: var(--primitive-color-white);
62
99
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
100
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
101
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-mist-gray-50);
102
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-60);
103
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-70);
104
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-50);
105
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-70);
106
+ --semantic-color-on-surface-highlight: var(--primitive-color-mist-gray-95);
107
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
108
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
109
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
110
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
111
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
112
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-mist-gray-30);
113
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
114
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-white);
115
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-white);
116
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-white);
117
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-90);
118
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
119
+ --semantic-color-on-surface-footer: var(--primitive-color-mist-gray-20);
120
+ --semantic-color-on-surface-index: var(--primitive-color-mist-gray-50);
121
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-mist-gray-30);
122
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-white);
123
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-85);
124
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-75);
125
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-mist-gray-20);
126
+ --semantic-color-on-surface-header: var(--primitive-color-white);
127
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-white);
128
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-90);
129
+ --semantic-color-on-surface-card-product: var(--primitive-color-mist-gray-20);
130
+ --semantic-color-on-surface-menu: var(--primitive-color-mist-gray-50);
131
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-white);
132
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-50);
133
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-mist-gray-80);
64
134
 
65
- /* stroke */
135
+ /* Stroke */
66
136
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
137
  --semantic-color-stroke-default-success: var(--primitive-color-green-70);
68
138
  --semantic-color-stroke-main: var(--primitive-color-mist-gray-50);
@@ -73,7 +143,28 @@
73
143
  --semantic-color-stroke-selection-active: var(--primitive-color-green-60);
74
144
  --semantic-color-stroke-selection-inactive: var(--primitive-color-white);
75
145
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-99);
146
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
147
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
148
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
149
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
150
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
151
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-mist-gray-95);
152
+ --semantic-color-stroke-button-icon: var(--primitive-color-mist-gray-95);
153
+ --semantic-color-stroke-card-selected: var(--primitive-color-white);
154
+ --semantic-color-stroke-card-gray: var(--primitive-color-mist-gray-40);
155
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
156
+ --semantic-color-stroke-chip-selected: var(--primitive-color-white);
157
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
158
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
159
+ --semantic-color-stroke-page-indicator: var(--primitive-color-mist-gray-50);
160
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-90);
161
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-mist-gray-35);
162
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-mist-gray-70);
163
+ --semantic-color-stroke-white: var(--primitive-color-white);
164
+ --semantic-color-stroke-black: var(--primitive-color-mist-gray-10);
76
165
 
77
- /* scrim */
166
+ /* Scrim */
78
167
  --semantic-color-scrim-default: var(--primitive-color-black);
168
+ --semantic-color-scrim-white: var(--primitive-color-white);
169
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
170
  }