@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/css/color-semantic-mono-white.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-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 */
24
+ /* Surface */
21
25
  --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-50);
22
26
  --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-50);
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-white);
27
31
  --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-99);
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-85);
30
34
  --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
35
  --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-40);
34
36
  --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-30);
35
37
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-20);
@@ -41,28 +43,96 @@
41
43
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
44
  --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-90);
43
45
  --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-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-mist-gray-30);
46
- --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-90);
48
+ --semantic-color-surface-notification-card: var(--primitive-color-neutral-gray-30);
47
49
  --semantic-color-surface-selection-active: var(--primitive-color-mist-gray-40);
48
50
  --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
51
  --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-90);
50
52
  --semantic-color-surface-toast: var(--primitive-color-mist-gray-10);
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-50);
56
+ --semantic-color-surface-default-supporting: var(--primitive-color-mist-gray-95);
57
+ --semantic-color-surface-default-success: var(--primitive-color-green-55);
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-mist-gray-90);
72
+ --semantic-color-surface-badge-black: var(--primitive-color-mist-gray-10);
73
+ --semantic-color-surface-button-primary-disabled: var(--primitive-color-mist-gray-40);
74
+ --semantic-color-surface-button-social: var(--primitive-color-mist-gray-95);
75
+ --semantic-color-surface-button-light: var(--primitive-color-mist-gray-90);
76
+ --semantic-color-surface-button-dark: var(--primitive-color-mist-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-mist-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-neutral-gray-30);
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-50);
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-mist-gray-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-mist-gray-70);
102
+ --semantic-color-on-surface-main-error: var(--primitive-color-active-red-50);
103
+ --semantic-color-on-surface-main-success: var(--primitive-color-green-55);
104
+ --semantic-color-on-surface-sub-error: var(--primitive-color-active-red-40);
105
+ --semantic-color-on-surface-sub-success: var(--primitive-color-green-55);
106
+ --semantic-color-on-surface-highlight: var(--primitive-color-mist-gray-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-mist-gray-20);
120
+ --semantic-color-on-surface-index: var(--primitive-color-mist-gray-90);
121
+ --semantic-color-on-surface-page-indicator-dot: var(--primitive-color-mist-gray-70);
122
+ --semantic-color-on-surface-text-field-inactive: var(--primitive-color-mist-gray-60);
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-mist-gray-20);
126
+ --semantic-color-on-surface-header: var(--primitive-color-mist-gray-60);
127
+ --semantic-color-on-surface-button-label-disabled: var(--primitive-color-mist-gray-60);
128
+ --semantic-color-on-surface-card-orange: var(--primitive-color-orange-40);
129
+ --semantic-color-on-surface-card-product: var(--primitive-color-mist-gray-20);
130
+ --semantic-color-on-surface-menu: var(--primitive-color-mist-gray-90);
131
+ --semantic-color-on-surface-page-indicator: var(--primitive-color-mist-gray-60);
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-mist-gray-70);
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-mist-gray-90);
@@ -73,7 +143,28 @@
73
143
  --semantic-color-stroke-selection-active: var(--primitive-color-mist-gray-40);
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-mist-gray-80);
152
+ --semantic-color-stroke-button-icon: var(--primitive-color-mist-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-mist-gray-90);
160
+ --semantic-color-stroke-text-field: var(--primitive-color-mist-gray-50);
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
  }
package/css/color-semantic-web.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-blue-gray-80);
24
+ /* Surface */
25
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-50);
22
26
  --semantic-color-surface-default-indicator: var(--primitive-color-navy-40);
23
27
  --semantic-color-surface-default-notification: var(--primitive-color-blue-green-40);
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-aub: 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-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
35
  --semantic-color-surface-button-primary: var(--primitive-color-blue-green-40);
34
36
  --semantic-color-surface-button-primary-hover: var(--primitive-color-blue-green-30);
35
37
  --semantic-color-surface-button-primary-pressed: var(--primitive-color-blue-green-20);
@@ -41,28 +43,96 @@ Semantic Color Tokens
41
43
  --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-blue-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-navy-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-blue-green-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-70);
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-blue-green-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-blue-green-50);
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-blue-green-40);
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-navy-40);
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-white);
168
+ --semantic-color-scrim-white: var(--primitive-color-white);
169
+ --semantic-color-scrim-black: var(--primitive-color-warm-gray-10);
79
170
  }
package/css/radius-semantic.css ADDED
@@ -0,0 +1,60 @@
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-8);
21
+ --semantic-radius-button-full: var(--primitive-radius-999);
22
+ --semantic-radius-button-l: var(--primitive-radius-12);
23
+ --semantic-radius-button-m: var(--primitive-radius-8);
24
+ --semantic-radius-button-s: var(--primitive-radius-6);
25
+ --semantic-radius-button-xs: var(--primitive-radius-4);
26
+ --semantic-radius-caption: var(--primitive-radius-20);
27
+ --semantic-radius-card-l: var(--primitive-radius-28);
28
+ --semantic-radius-card-m: var(--primitive-radius-20);
29
+ --semantic-radius-card-s: var(--primitive-radius-12);
30
+ --semantic-radius-card-xs: var(--primitive-radius-4);
31
+ --semantic-radius-carousel-indicator: var(--primitive-radius-999);
32
+ --semantic-radius-chip-full: var(--primitive-radius-999);
33
+ --semantic-radius-chip-s: var(--primitive-radius-4);
34
+ --semantic-radius-dialog-popup-l: var(--primitive-radius-20);
35
+ --semantic-radius-dialog-popup-s: var(--primitive-radius-16);
36
+ --semantic-radius-index-l: var(--primitive-radius-28);
37
+ --semantic-radius-index-s: var(--primitive-radius-20);
38
+ --semantic-radius-list-l: var(--primitive-radius-28);
39
+ --semantic-radius-list-s: var(--primitive-radius-20);
40
+ --semantic-radius-menu: var(--primitive-radius-6);
41
+ --semantic-radius-page-indicator: var(--primitive-radius-999);
42
+ --semantic-radius-picker: var(--primitive-radius-6);
43
+ --semantic-radius-scrollbar: var(--primitive-radius-999);
44
+ --semantic-radius-search: var(--primitive-radius-999);
45
+ --semantic-radius-selection-control-full: var(--primitive-radius-999);
46
+ --semantic-radius-selection-control-l: var(--primitive-radius-16);
47
+ --semantic-radius-selection-control-m: var(--primitive-radius-12);
48
+ --semantic-radius-selection-control-s: var(--primitive-radius-4);
49
+ --semantic-radius-step-indicator: var(--primitive-radius-999);
50
+ --semantic-radius-stepper: var(--primitive-radius-6);
51
+ --semantic-radius-tab-l: var(--primitive-radius-12);
52
+ --semantic-radius-tab-m: var(--primitive-radius-8);
53
+ --semantic-radius-tab-s: var(--primitive-radius-6);
54
+ --semantic-radius-text-field: var(--primitive-radius-6);
55
+ --semantic-radius-toast: var(--primitive-radius-20);
56
+ --semantic-radius-tooltip-l: var(--primitive-radius-28);
57
+ --semantic-radius-tooltip-s: var(--primitive-radius-20);
58
+ --semantic-radius-thumbnail-l: var(--primitive-radius-28);
59
+ --semantic-radius-thumbnail-s: var(--primitive-radius-20);
60
+ }
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
+ }