@enovaui/web-tokens 0.8.2 → 0.10.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 +53 -0
  2. package/css/color-semantic-lg-brand.css +138 -35
  3. package/css/color-semantic-mobile.css +119 -16
  4. package/css/color-semantic-mono-black.css +124 -21
  5. package/css/color-semantic-mono-white.css +123 -20
  6. package/css/color-semantic-web.css +119 -16
  7. package/css/radius-semantic.css +69 -0
  8. package/css/typography-semantic.css +24 -0
  9. package/json/color-semantic-lg-brand.json +135 -33
  10. package/json/color-semantic-mobile.json +117 -15
  11. package/json/color-semantic-mono-black.json +117 -15
  12. package/json/color-semantic-mono-white.json +116 -14
  13. package/json/color-semantic-web.json +117 -15
  14. package/json/radius-semantic.json +62 -0
  15. package/json/typography-semantic.json +33 -0
  16. package/package.json +3 -3
package/css/color-semantic-mono-white.css CHANGED
@@ -3,21 +3,31 @@
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-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);
20
+ --semantic-color-background-main-dark: var(--primitive-color-mist-gray-90);
16
21
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
22
+ /* On Background */
23
+ --semantic-color-on-background-main: var(--primitive-color-mist-gray-10);
24
+ --semantic-color-on-background-main-supporting: var(--primitive-color-mist-gray-20);
25
+ --semantic-color-on-background-sub: var(--primitive-color-mist-gray-50);
26
+ --semantic-color-on-background-accent: var(--primitive-color-mist-gray-40);
27
+ --semantic-color-on-background-highlight: var(--primitive-color-mist-gray-30);
28
+ --semantic-color-on-background-white: var(--primitive-color-white);
19
29
 
20
- /* surface */
30
+ /* Surface */
21
31
  --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-50);
22
32
  --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-50);
23
33
  --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
@@ -26,10 +36,8 @@
26
36
  --semantic-color-surface-main: var(--primitive-color-white);
27
37
  --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-99);
28
38
  --semantic-color-surface-main-pressed: var(--primitive-color-mist-gray-90);
29
- --semantic-color-surface-sub: var(--primitive-color-mist-gray-90);
39
+ --semantic-color-surface-sub: var(--primitive-color-mist-gray-85);
30
40
  --semantic-color-surface-accent: var(--primitive-color-mist-gray-40);
31
- --semantic-color-surface-badge-dark: var(--primitive-color-mist-gray-10);
32
- --semantic-color-surface-badge-light: var(--primitive-color-mist-gray-90);
33
41
  --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-40);
34
42
  --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-30);
35
43
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-20);
@@ -41,28 +49,101 @@
41
49
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
50
  --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-90);
43
51
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-70);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
52
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
53
  --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-30);
46
- --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-90);
54
+ --semantic-color-surface-notification-card: var(--primitive-color-neutral-gray-30);
47
55
  --semantic-color-surface-selection-active: var(--primitive-color-mist-gray-40);
48
56
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
57
  --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-90);
50
58
  --semantic-color-surface-toast: var(--primitive-color-mist-gray-10);
51
59
  --semantic-color-surface-white: var(--primitive-color-white);
52
60
  --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
61
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-50);
62
+ --semantic-color-surface-default-supporting: var(--primitive-color-mist-gray-95);
63
+ --semantic-color-surface-default-success: var(--primitive-color-green-55);
64
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-80);
65
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-95);
66
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
67
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
68
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
69
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
70
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
71
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
72
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
73
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
74
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
75
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
76
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
77
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-mist-gray-90);
78
+ --semantic-color-surface-badge-black: var(--primitive-color-mist-gray-10);
79
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-mist-gray-40);
80
+ --semantic-color-surface-button-light: var(--primitive-color-mist-gray-90);
81
+ --semantic-color-surface-button-dark: var(--primitive-color-mist-gray-10);
82
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
83
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
84
+ --semantic-color-surface-dialog-popup: var(--primitive-color-mist-gray-95);
85
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-70);
86
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
87
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-70);
88
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-95);
89
+ --semantic-color-surface-tab: var(--primitive-color-mist-gray-95);
90
+ --semantic-color-surface-tab-active: var(--primitive-color-white);
91
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
92
+ --semantic-color-surface-footer: var(--primitive-color-neutral-gray-30);
93
+ --semantic-color-surface-header-dark: var(--primitive-color-mist-gray-95);
94
+ --semantic-color-surface-header-light: var(--primitive-color-mist-gray-95);
95
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
96
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
97
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-70);
98
+ --semantic-color-surface-banner: var(--primitive-color-neutral-gray-5);
99
+ --semantic-color-surface-card: var(--primitive-color-mist-gray-95);
100
+ --semantic-color-surface-filter: var(--primitive-color-mist-gray-95);
101
+ --semantic-color-surface-selection-option: var(--primitive-color-neutral-gray-95);
102
+ --semantic-color-surface-tab-segmented: var(--primitive-color-mist-gray-95);
53
103
 
54
- /* onSurface */
55
- --semantic-color-on-surface-default-error: var(--primitive-color-active-red-50);
56
- --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
104
+ /* On Surface */
57
105
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
106
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
107
  --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
108
  --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-40);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
109
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
110
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
111
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-mist-gray-70);
112
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-50);
113
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-55);
114
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-40);
115
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-55);
116
+ --semantic-color-on-surface-highlight: var(--primitive-color-mist-gray-30);
117
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
118
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
119
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
120
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
121
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
122
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-white);
123
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
124
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-mist-gray-30);
125
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-mist-gray-30);
126
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-mist-gray-30);
127
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
128
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
129
+ --semantic-color-on-surface-footer: var(--primitive-color-mist-gray-20);
130
+ --semantic-color-on-surface-index: var(--primitive-color-mist-gray-90);
131
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-mist-gray-70);
132
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-mist-gray-60);
133
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-20);
134
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-45);
135
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-mist-gray-20);
136
+ --semantic-color-on-surface-header: var(--primitive-color-mist-gray-60);
137
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-mist-gray-60);
138
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
139
+ --semantic-color-on-surface-menu: var(--primitive-color-mist-gray-90);
140
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-mist-gray-60);
141
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
142
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-mist-gray-70);
143
+ --semantic-color-on-surface-card-dark: var(--primitive-color-mist-gray-20);
144
+ --semantic-color-on-surface-card-light: var(--primitive-color-mist-gray-90);
64
145
 
65
- /* stroke */
146
+ /* Stroke */
66
147
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
148
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
149
  --semantic-color-stroke-main: var(--primitive-color-mist-gray-90);
@@ -73,7 +154,29 @@
73
154
  --semantic-color-stroke-selection-active: var(--primitive-color-mist-gray-40);
74
155
  --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
156
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
157
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
158
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
159
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
160
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
161
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
162
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-mist-gray-80);
163
+ --semantic-color-stroke-button-icon: var(--primitive-color-mist-gray-80);
164
+ --semantic-color-stroke-card-selected: var(--primitive-color-mist-gray-70);
165
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
166
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
167
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
168
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
169
+ --semantic-color-stroke-page-indicator: var(--primitive-color-mist-gray-90);
170
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-50);
171
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-mist-gray-35);
172
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-mist-gray-70);
173
+ --semantic-color-stroke-white: var(--primitive-color-white);
174
+ --semantic-color-stroke-black: var(--primitive-color-mist-gray-10);
175
+ --semantic-color-stroke-default-selected: var(--primitive-color-black);
176
+ --semantic-color-stroke-tab-segmented: var(--primitive-color-mist-gray-50);
76
177
 
77
- /* scrim */
178
+ /* Scrim */
78
179
  --semantic-color-scrim-default: var(--primitive-color-black);
180
+ --semantic-color-scrim-white: var(--primitive-color-white);
181
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
182
  }
package/css/color-semantic-web.css CHANGED
@@ -10,15 +10,25 @@ 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);
20
+ --semantic-color-background-main-dark: var(--primitive-color-mist-gray-90);
16
21
 
17
- /* onBackground */
18
- --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
22
+ /* On Background */
23
+ --semantic-color-on-background-main: var(--primitive-color-mist-gray-10);
24
+ --semantic-color-on-background-main-supporting: var(--primitive-color-mist-gray-20);
25
+ --semantic-color-on-background-sub: var(--primitive-color-mist-gray-50);
26
+ --semantic-color-on-background-accent: var(--primitive-color-blue-green-40);
27
+ --semantic-color-on-background-highlight: var(--primitive-color-blue-green-40);
28
+ --semantic-color-on-background-white: var(--primitive-color-white);
19
29
 
20
- /* surface */
21
- --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-80);
30
+ /* Surface */
31
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-50);
22
32
  --semantic-color-surface-default-indicator: var(--primitive-color-navy-40);
23
33
  --semantic-color-surface-default-notification: var(--primitive-color-blue-green-40);
24
34
  --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
@@ -26,10 +36,8 @@ Semantic Color Tokens
26
36
  --semantic-color-surface-main: var(--primitive-color-white);
27
37
  --semantic-color-surface-main-hover: var(--primitive-color-blue-gray-95);
28
38
  --semantic-color-surface-main-pressed: var(--primitive-color-blue-gray-90);
29
- --semantic-color-surface-aub: var(--primitive-color-blue-gray-90);
39
+ --semantic-color-surface-sub: var(--primitive-color-blue-gray-85);
30
40
  --semantic-color-surface-accent: var(--primitive-color-blue-green-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
41
  --semantic-color-surface-button-primary: var(--primitive-color-blue-green-40);
34
42
  --semantic-color-surface-button-primary-hover: var(--primitive-color-blue-green-30);
35
43
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-blue-green-20);
@@ -41,28 +49,101 @@ Semantic Color Tokens
41
49
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-blue-gray-90);
42
50
  --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
43
51
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
44
- --semantic-color-surface-chip: var(--primitive-color-white);
52
+ --semantic-color-surface-chip: var(--primitive-color-warm-gray-99);
45
53
  --semantic-color-surface-chip-selected: var(--primitive-color-navy-40);
46
- --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
54
+ --semantic-color-surface-notification-card: var(--primitive-color-cool-gray-25);
47
55
  --semantic-color-surface-selection-active: var(--primitive-color-blue-green-50);
48
56
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
57
  --semantic-color-surface-text-field-disabled: var(--primitive-color-blue-gray-90);
50
58
  --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
51
59
  --semantic-color-surface-white: var(--primitive-color-white);
52
60
  --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
61
+ --semantic-color-surface-default-error: var(--primitive-color-active-red-60);
62
+ --semantic-color-surface-default-supporting: var(--primitive-color-blue-gray-95);
63
+ --semantic-color-surface-default-success: var(--primitive-color-green-45);
64
+ --semantic-color-surface-default-warning: var(--primitive-color-yellow-70);
65
+ --semantic-color-surface-main-disabled: var(--primitive-color-neutral-gray-95);
66
+ --semantic-color-surface-badge-gradient-start: var(--primitive-color-deep-orange-45);
67
+ --semantic-color-surface-badge-gradient-stop: var(--primitive-color-active-red-50);
68
+ --semantic-color-surface-badge-gradient-end: var(--primitive-color-heritage-red-35);
69
+ --semantic-color-surface-badge-red: var(--primitive-color-active-red-50);
70
+ --semantic-color-surface-badge-light-red: var(--primitive-color-active-red-95);
71
+ --semantic-color-surface-badge-orange: var(--primitive-color-orange-50);
72
+ --semantic-color-surface-badge-light-orange: var(--primitive-color-orange-95);
73
+ --semantic-color-surface-badge-green: var(--primitive-color-green-50);
74
+ --semantic-color-surface-badge-light-green: var(--primitive-color-green-95);
75
+ --semantic-color-surface-badge-magenta: var(--primitive-color-heritage-red-45);
76
+ --semantic-color-surface-badge-light-magenta: var(--primitive-color-heritage-red-95);
77
+ --semantic-color-surface-badge-light-gray: var(--primitive-color-blue-gray-90);
78
+ --semantic-color-surface-badge-black: var(--primitive-color-blue-gray-10);
79
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-blue-green-40);
80
+ --semantic-color-surface-button-light: var(--primitive-color-blue-gray-90);
81
+ --semantic-color-surface-button-dark: var(--primitive-color-blue-gray-10);
82
+ --semantic-color-surface-card-gray: var(--primitive-color-neutral-gray-99);
83
+ --semantic-color-surface-chip-pink: var(--primitive-color-active-red-99);
84
+ --semantic-color-surface-dialog-popup: var(--primitive-color-mist-gray-95);
85
+ --semantic-color-surface-selection-disabled: var(--primitive-color-mist-gray-70);
86
+ --semantic-color-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
87
+ --semantic-color-surface-selection-switch-inactive: var(--primitive-color-mist-gray-70);
88
+ --semantic-color-surface-selection-option-disabled: var(--primitive-color-mist-gray-95);
89
+ --semantic-color-surface-tab: var(--primitive-color-blue-gray-95);
90
+ --semantic-color-surface-tab-active: var(--primitive-color-white);
91
+ --semantic-color-surface-badge-dark-gray: var(--primitive-color-cool-gray-35);
92
+ --semantic-color-surface-footer: var(--primitive-color-cool-gray-25);
93
+ --semantic-color-surface-header-dark: var(--primitive-color-mist-gray-95);
94
+ --semantic-color-surface-header-light: var(--primitive-color-mist-gray-95);
95
+ --semantic-color-surface-sub-disabled: var(--primitive-color-neutral-gray-95);
96
+ --semantic-color-surface-card-orange: var(--primitive-color-orange-95);
97
+ --semantic-color-surface-selection-inactive-disabled: var(--primitive-color-mist-gray-70);
98
+ --semantic-color-surface-banner: var(--primitive-color-neutral-gray-5);
99
+ --semantic-color-surface-card: var(--primitive-color-mist-gray-95);
100
+ --semantic-color-surface-filter: var(--primitive-color-mist-gray-95);
101
+ --semantic-color-surface-selection-option: var(--primitive-color-neutral-gray-95);
102
+ --semantic-color-surface-tab-segmented: var(--primitive-color-mist-gray-95);
53
103
 
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);
104
+ /* On Surface */
57
105
  --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
106
  --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
107
  --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
108
  --semantic-color-on-surface-accent: var(--primitive-color-blue-green-50);
61
- --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
109
  --semantic-color-on-surface-white: var(--primitive-color-white);
63
110
  --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
111
+ --semantic-color-on-surface-default-disabled: var(--primitive-color-cool-gray-70);
112
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-60);
113
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-55);
114
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-45);
115
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-55);
116
+ --semantic-color-on-surface-highlight: var(--primitive-color-blue-green-40);
117
+ --semantic-color-on-surface-badge-red: var(--primitive-color-active-red-50);
118
+ --semantic-color-on-surface-badge-orange: var(--primitive-color-orange-50);
119
+ --semantic-color-on-surface-badge-green: var(--primitive-color-green-50);
120
+ --semantic-color-on-surface-badge-magenta: var(--primitive-color-heritage-red-45);
121
+ --semantic-color-on-surface-button-primary: var(--primitive-color-white);
122
+ --semantic-color-on-surface-button-primary-hover: var(--primitive-color-white);
123
+ --semantic-color-on-surface-button-primary-disabled: var(--primitive-color-white);
124
+ --semantic-color-on-surface-button-secondary: var(--primitive-color-mist-gray-30);
125
+ --semantic-color-on-surface-button-secondary-hover: var(--primitive-color-mist-gray-30);
126
+ --semantic-color-on-surface-button-tertiary: var(--primitive-color-mist-gray-30);
127
+ --semantic-color-on-surface-card-gray: var(--primitive-color-warm-gray-65);
128
+ --semantic-color-on-surface-card-yellow: var(--primitive-color-yellow-70);
129
+ --semantic-color-on-surface-footer: var(--primitive-color-blue-gray-20);
130
+ --semantic-color-on-surface-index: var(--primitive-color-blue-gray-80);
131
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-cool-gray-70);
132
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-mist-gray-45);
133
+ --semantic-color-on-surface-main-supporting: var(--primitive-color-mist-gray-20);
134
+ --semantic-color-on-surface-sub-supporting: var(--primitive-color-mist-gray-45);
135
+ --semantic-color-on-surface-badge-dark-gray: var(--primitive-color-blue-gray-20);
136
+ --semantic-color-on-surface-header: var(--primitive-color-mist-gray-45);
137
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-mist-gray-45);
138
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
139
+ --semantic-color-on-surface-menu: var(--primitive-color-blue-gray-80);
140
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-mist-gray-45);
141
+ --semantic-color-on-surface-selection-active-disabled: var(--primitive-color-mist-gray-70);
142
+ --semantic-color-on-surface-text-field-assistive: var(--primitive-color-cool-gray-55);
143
+ --semantic-color-on-surface-card-dark: var(--primitive-color-blue-gray-20);
144
+ --semantic-color-on-surface-card-light: var(--primitive-color-blue-gray-80);
64
145
 
65
- /* stroke */
146
+ /* Stroke */
66
147
  --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
148
  --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
149
  --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
@@ -73,7 +154,29 @@ Semantic Color Tokens
73
154
  --semantic-color-stroke-selection-active: var(--primitive-color-navy-40);
74
155
  --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
156
  --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
157
+ --semantic-color-stroke-badge-green: var(--primitive-color-green-50);
158
+ --semantic-color-stroke-badge-gray: var(--primitive-color-cool-gray-35);
159
+ --semantic-color-stroke-badge-orange: var(--primitive-color-orange-50);
160
+ --semantic-color-stroke-badge-magenta: var(--primitive-color-heritage-red-45);
161
+ --semantic-color-stroke-badge-red: var(--primitive-color-active-red-50);
162
+ --semantic-color-stroke-button-tertiary: var(--primitive-color-blue-gray-80);
163
+ --semantic-color-stroke-button-icon: var(--primitive-color-blue-gray-80);
164
+ --semantic-color-stroke-card-selected: var(--primitive-color-mist-gray-70);
165
+ --semantic-color-stroke-card-gray: var(--primitive-color-neutral-gray-95);
166
+ --semantic-color-stroke-chip: var(--primitive-color-neutral-gray-90);
167
+ --semantic-color-stroke-chip-pink: var(--primitive-color-heritage-red-35);
168
+ --semantic-color-stroke-chip-white: var(--primitive-color-white);
169
+ --semantic-color-stroke-page-indicator: var(--primitive-color-blue-gray-80);
170
+ --semantic-color-stroke-text-field: var(--primitive-color-blue-gray-70);
171
+ --semantic-color-stroke-text-field-focused: var(--primitive-color-blue-gray-35);
172
+ --semantic-color-stroke-text-field-disabled: var(--primitive-color-blue-gray-70);
173
+ --semantic-color-stroke-white: var(--primitive-color-white);
174
+ --semantic-color-stroke-black: var(--primitive-color-blue-gray-10);
175
+ --semantic-color-stroke-default-selected: var(--primitive-color-black);
176
+ --semantic-color-stroke-tab-segmented: var(--primitive-color-blue-gray-70);
76
177
 
77
- /* scrim */
178
+ /* Scrim */
78
179
  --semantic-color-scrim-default: var(--primitive-color-white);
180
+ --semantic-color-scrim-white: var(--primitive-color-white);
181
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
182
  }
package/css/radius-semantic.css ADDED
@@ -0,0 +1,69 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: Apache-2.0
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/radius-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Radius Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ --semantic-radius-accordion-l: var(--primitive-radius-28);
14
+ --semantic-radius-accordion-m: var(--primitive-radius-20);
15
+ --semantic-radius-accordion-s: var(--primitive-radius-6);
16
+ --semantic-radius-badge-full: var(--primitive-radius-999);
17
+ --semantic-radius-badge-s: var(--primitive-radius-4);
18
+ --semantic-radius-banner-l: var(--primitive-radius-28);
19
+ --semantic-radius-banner-m: var(--primitive-radius-20);
20
+ --semantic-radius-banner-s: var(--primitive-radius-12);
21
+ --semantic-radius-banner-xs: var(--primitive-radius-8);
22
+ --semantic-radius-button-full: var(--primitive-radius-999);
23
+ --semantic-radius-button-l: var(--primitive-radius-12);
24
+ --semantic-radius-button-m: var(--primitive-radius-8);
25
+ --semantic-radius-button-s: var(--primitive-radius-6);
26
+ --semantic-radius-button-xs: var(--primitive-radius-4);
27
+ --semantic-radius-caption: var(--primitive-radius-20);
28
+ --semantic-radius-card-full: var(--primitive-radius-999);
29
+ --semantic-radius-card-xxl: var(--primitive-radius-28);
30
+ --semantic-radius-card-xl: var(--primitive-radius-20);
31
+ --semantic-radius-card-l: var(--primitive-radius-16);
32
+ --semantic-radius-card-m: var(--primitive-radius-12);
33
+ --semantic-radius-card-s: var(--primitive-radius-8);
34
+ --semantic-radius-card-xs: var(--primitive-radius-4);
35
+ --semantic-radius-carousel-indicator: var(--primitive-radius-999);
36
+ --semantic-radius-chip-full: var(--primitive-radius-999);
37
+ --semantic-radius-chip-s: var(--primitive-radius-4);
38
+ --semantic-radius-dialog-popup-l: var(--primitive-radius-20);
39
+ --semantic-radius-dialog-popup-s: var(--primitive-radius-16);
40
+ --semantic-radius-header: var(--primitive-radius-8);
41
+ --semantic-radius-index-l: var(--primitive-radius-28);
42
+ --semantic-radius-index-s: var(--primitive-radius-20);
43
+ --semantic-radius-list-l: var(--primitive-radius-28);
44
+ --semantic-radius-list-s: var(--primitive-radius-20);
45
+ --semantic-radius-menu: var(--primitive-radius-6);
46
+ --semantic-radius-page-indicator: var(--primitive-radius-999);
47
+ --semantic-radius-picker: var(--primitive-radius-6);
48
+ --semantic-radius-scrollbar: var(--primitive-radius-999);
49
+ --semantic-radius-search: var(--primitive-radius-999);
50
+ --semantic-radius-selection-control-full: var(--primitive-radius-999);
51
+ --semantic-radius-selection-control-l: var(--primitive-radius-16);
52
+ --semantic-radius-selection-control-m: var(--primitive-radius-12);
53
+ --semantic-radius-selection-control-s: var(--primitive-radius-4);
54
+ --semantic-radius-step-indicator: var(--primitive-radius-999);
55
+ --semantic-radius-stepper: var(--primitive-radius-6);
56
+ --semantic-radius-tab-xl: var(--primitive-radius-16);
57
+ --semantic-radius-tab-l: var(--primitive-radius-12);
58
+ --semantic-radius-tab-m: var(--primitive-radius-8);
59
+ --semantic-radius-tab-s: var(--primitive-radius-6);
60
+ --semantic-radius-text-field: var(--primitive-radius-6);
61
+ --semantic-radius-toast: var(--primitive-radius-20);
62
+ --semantic-radius-tooltip-l: var(--primitive-radius-28);
63
+ --semantic-radius-tooltip-s: var(--primitive-radius-20);
64
+ --semantic-radius-thumbnail-xl: var(--primitive-radius-28);
65
+ --semantic-radius-thumbnail-l: var(--primitive-radius-20);
66
+ --semantic-radius-thumbnail-m: var(--primitive-radius-16);
67
+ --semantic-radius-thumbnail-s: var(--primitive-radius-12);
68
+ --semantic-radius-thumbnail-xs: var(--primitive-radius-8);
69
+ }
package/css/typography-semantic.css ADDED
@@ -0,0 +1,24 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: Apache-2.0
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/typography-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Typography Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+
14
+ /* Font Weight */
15
+ --semantic-font-weight-100: var(--primitive-font-weight-thin);
16
+ --semantic-font-weight-200: var(--primitive-font-weight-extralight);
17
+ --semantic-font-weight-300: var(--primitive-font-weight-light);
18
+ --semantic-font-weight-400: var(--primitive-font-weight-regular);
19
+ --semantic-font-weight-500: var(--primitive-font-weight-medium);
20
+ --semantic-font-weight-600: var(--primitive-font-weight-semibold);
21
+ --semantic-font-weight-700: var(--primitive-font-weight-bold);
22
+ --semantic-font-weight-800: var(--primitive-font-weight-extrabold);
23
+ --semantic-font-weight-900: var(--primitive-font-weight-black);
24
+ }