@spectrabrain/eds 0.0.3 → 0.0.4

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 (17) hide show
  1. package/AI.md +5 -1
  2. package/README.md +8 -3
  3. package/TAILWIND_V4.md +284 -0
  4. package/dist/components/Button/README.md +5 -5
  5. package/dist/components/Button/spec.json +7 -7
  6. package/dist/index.d.mts +1 -1
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +86 -16
  9. package/dist/index.mjs +86 -16
  10. package/dist/tokens.css +19 -10
  11. package/dist/tokens.d.mts +3 -3
  12. package/dist/tokens.d.ts +3 -3
  13. package/dist/tokens.js +86 -10
  14. package/dist/tokens.json +104 -10
  15. package/dist/tokens.mjs +86 -10
  16. package/llms.txt +5 -4
  17. package/package.json +3 -1
package/dist/index.js CHANGED
@@ -18,6 +18,18 @@ var tokenMap = {
18
18
  "value": "#DB3700",
19
19
  "cssVariable": "--eds-color-bg-brand-primary-hover"
20
20
  },
21
+ "color-bg-brand-weak": {
22
+ "name": "color-bg-brand-weak",
23
+ "type": "color",
24
+ "value": "#FFA081",
25
+ "cssVariable": "--eds-color-bg-brand-weak"
26
+ },
27
+ "color-bg-brand-weak-hover": {
28
+ "name": "color-bg-brand-weak-hover",
29
+ "type": "color",
30
+ "value": "#FF7141",
31
+ "cssVariable": "--eds-color-bg-brand-weak-hover"
32
+ },
21
33
  "color-bg-critical-primary": {
22
34
  "name": "color-bg-critical-primary",
23
35
  "type": "color",
@@ -33,13 +45,13 @@ var tokenMap = {
33
45
  "color-bg-critical-weak": {
34
46
  "name": "color-bg-critical-weak",
35
47
  "type": "color",
36
- "value": "#FEF2F2",
48
+ "value": "#FEE2E2",
37
49
  "cssVariable": "--eds-color-bg-critical-weak"
38
50
  },
39
51
  "color-bg-critical-weak-hover": {
40
52
  "name": "color-bg-critical-weak-hover",
41
53
  "type": "color",
42
- "value": "#FEE2E2",
54
+ "value": "#FECACA",
43
55
  "cssVariable": "--eds-color-bg-critical-weak-hover"
44
56
  },
45
57
  "color-bg-disabled": {
@@ -63,13 +75,13 @@ var tokenMap = {
63
75
  "color-bg-informative-weak": {
64
76
  "name": "color-bg-informative-weak",
65
77
  "type": "color",
66
- "value": "#EFF6FF",
78
+ "value": "#DBEAFE",
67
79
  "cssVariable": "--eds-color-bg-informative-weak"
68
80
  },
69
81
  "color-bg-informative-weak-hover": {
70
82
  "name": "color-bg-informative-weak-hover",
71
83
  "type": "color",
72
- "value": "#DBEAFE",
84
+ "value": "#BFDBFE",
73
85
  "cssVariable": "--eds-color-bg-informative-weak-hover"
74
86
  },
75
87
  "color-bg-layer-basement": {
@@ -78,6 +90,12 @@ var tokenMap = {
78
90
  "value": "#F3F4F6",
79
91
  "cssVariable": "--eds-color-bg-layer-basement"
80
92
  },
93
+ "color-bg-layer-basement-hover": {
94
+ "name": "color-bg-layer-basement-hover",
95
+ "type": "color",
96
+ "value": "#ECEEF1",
97
+ "cssVariable": "--eds-color-bg-layer-basement-hover"
98
+ },
81
99
  "color-bg-layer-default": {
82
100
  "name": "color-bg-layer-default",
83
101
  "type": "color",
@@ -153,13 +171,13 @@ var tokenMap = {
153
171
  "color-bg-positive-weak": {
154
172
  "name": "color-bg-positive-weak",
155
173
  "type": "color",
156
- "value": "#F0FDF4",
174
+ "value": "#DCFCE7",
157
175
  "cssVariable": "--eds-color-bg-positive-weak"
158
176
  },
159
177
  "color-bg-positive-weak-hover": {
160
178
  "name": "color-bg-positive-weak-hover",
161
179
  "type": "color",
162
- "value": "#DCFCE7",
180
+ "value": "#BBF7D0",
163
181
  "cssVariable": "--eds-color-bg-positive-weak-hover"
164
182
  },
165
183
  "color-bg-transparent": {
@@ -189,13 +207,13 @@ var tokenMap = {
189
207
  "color-bg-warning-weak": {
190
208
  "name": "color-bg-warning-weak",
191
209
  "type": "color",
192
- "value": "#FEFCE8",
210
+ "value": "#FEF9C3",
193
211
  "cssVariable": "--eds-color-bg-warning-weak"
194
212
  },
195
213
  "color-bg-warning-weak-hover": {
196
214
  "name": "color-bg-warning-weak-hover",
197
215
  "type": "color",
198
- "value": "#FEF9C3",
216
+ "value": "#FEF08A",
199
217
  "cssVariable": "--eds-color-bg-warning-weak-hover"
200
218
  },
201
219
  "color-fg-brand": {
@@ -297,7 +315,7 @@ var tokenMap = {
297
315
  "color-fg-warning-contrast": {
298
316
  "name": "color-fg-warning-contrast",
299
317
  "type": "color",
300
- "value": "#713F12",
318
+ "value": "#A16207",
301
319
  "cssVariable": "--eds-color-fg-warning-contrast"
302
320
  },
303
321
  "color-stroke-brand-primary": {
@@ -357,9 +375,15 @@ var tokenMap = {
357
375
  "color-stroke-neutral-secondary": {
358
376
  "name": "color-stroke-neutral-secondary",
359
377
  "type": "color",
360
- "value": "#E5E7EB",
378
+ "value": "#9CA3AF",
361
379
  "cssVariable": "--eds-color-stroke-neutral-secondary"
362
380
  },
381
+ "color-stroke-neutral-tertiary": {
382
+ "name": "color-stroke-neutral-tertiary",
383
+ "type": "color",
384
+ "value": "#E5E7EB",
385
+ "cssVariable": "--eds-color-stroke-neutral-tertiary"
386
+ },
363
387
  "color-stroke-neutral-weak": {
364
388
  "name": "color-stroke-neutral-weak",
365
389
  "type": "color",
@@ -906,6 +930,49 @@ var tokenMap = {
906
930
  },
907
931
  "cssVariable": "--eds-typography-heading3-lineHeight"
908
932
  },
933
+ "typography-heading4-fontFamily": {
934
+ "name": "typography-heading4-fontFamily",
935
+ "type": "fontFamily",
936
+ "value": [
937
+ "Pretendard",
938
+ "system-ui",
939
+ "sans-serif"
940
+ ],
941
+ "cssVariable": "--eds-typography-heading4-fontFamily"
942
+ },
943
+ "typography-heading4-fontSize": {
944
+ "name": "typography-heading4-fontSize",
945
+ "type": "dimension",
946
+ "value": {
947
+ "value": 1.25,
948
+ "unit": "rem"
949
+ },
950
+ "cssVariable": "--eds-typography-heading4-fontSize"
951
+ },
952
+ "typography-heading4-fontWeight": {
953
+ "name": "typography-heading4-fontWeight",
954
+ "type": "fontWeight",
955
+ "value": 550,
956
+ "cssVariable": "--eds-typography-heading4-fontWeight"
957
+ },
958
+ "typography-heading4-letterSpacing": {
959
+ "name": "typography-heading4-letterSpacing",
960
+ "type": "dimension",
961
+ "value": {
962
+ "value": -0.2,
963
+ "unit": "px"
964
+ },
965
+ "cssVariable": "--eds-typography-heading4-letterSpacing"
966
+ },
967
+ "typography-heading4-lineHeight": {
968
+ "name": "typography-heading4-lineHeight",
969
+ "type": "dimension",
970
+ "value": {
971
+ "value": 2,
972
+ "unit": "rem"
973
+ },
974
+ "cssVariable": "--eds-typography-heading4-lineHeight"
975
+ },
909
976
  "typography-title1-fontFamily": {
910
977
  "name": "typography-title1-fontFamily",
911
978
  "type": "fontFamily",
@@ -1083,6 +1150,8 @@ var tokens = Object.freeze(tokenMap);
1083
1150
  var tokenNames = Object.freeze([
1084
1151
  "color-bg-brand-primary",
1085
1152
  "color-bg-brand-primary-hover",
1153
+ "color-bg-brand-weak",
1154
+ "color-bg-brand-weak-hover",
1086
1155
  "color-bg-critical-primary",
1087
1156
  "color-bg-critical-primary-hover",
1088
1157
  "color-bg-critical-weak",
@@ -1093,6 +1162,7 @@ var tokenNames = Object.freeze([
1093
1162
  "color-bg-informative-weak",
1094
1163
  "color-bg-informative-weak-hover",
1095
1164
  "color-bg-layer-basement",
1165
+ "color-bg-layer-basement-hover",
1096
1166
  "color-bg-layer-default",
1097
1167
  "color-bg-layer-default-hover",
1098
1168
  "color-bg-layer-floating",
@@ -1140,6 +1210,7 @@ var tokenNames = Object.freeze([
1140
1210
  "color-stroke-neutral-contrast",
1141
1211
  "color-stroke-neutral-primary",
1142
1212
  "color-stroke-neutral-secondary",
1213
+ "color-stroke-neutral-tertiary",
1143
1214
  "color-stroke-neutral-weak",
1144
1215
  "color-stroke-positive-primary",
1145
1216
  "color-stroke-positive-weak",
@@ -1205,6 +1276,11 @@ var tokenNames = Object.freeze([
1205
1276
  "typography-heading3-fontWeight",
1206
1277
  "typography-heading3-letterSpacing",
1207
1278
  "typography-heading3-lineHeight",
1279
+ "typography-heading4-fontFamily",
1280
+ "typography-heading4-fontSize",
1281
+ "typography-heading4-fontWeight",
1282
+ "typography-heading4-letterSpacing",
1283
+ "typography-heading4-lineHeight",
1208
1284
  "typography-title1-fontFamily",
1209
1285
  "typography-title1-fontSize",
1210
1286
  "typography-title1-fontWeight",
@@ -7553,11 +7629,6 @@ function hasRenderableContent(value) {
7553
7629
  }
7554
7630
  return react.Children.count(value) > 0;
7555
7631
  }
7556
- function requireAccessibleIconLabel(label) {
7557
- if (label === void 0 || label.trim().length === 0) {
7558
- throw new Error("Button icon-only layout requires a non-empty aria-label.");
7559
- }
7560
- }
7561
7632
  function requireLinkHref(href) {
7562
7633
  if (href.trim().length === 0) {
7563
7634
  throw new Error("Button link variant requires a non-empty href.");
@@ -7599,7 +7670,6 @@ function resolveSlots(props) {
7599
7670
  if (hasChildren || startIcon !== void 0 || endIcon !== void 0) {
7600
7671
  throw new Error("Button icon-only layout cannot combine icon with children or start/end icons.");
7601
7672
  }
7602
- requireAccessibleIconLabel(ariaLabel);
7603
7673
  return { layout: "iconOnly", children, icon };
7604
7674
  }
7605
7675
  if (hasChildren === false) {
package/dist/index.mjs CHANGED
@@ -16,6 +16,18 @@ var tokenMap = {
16
16
  "value": "#DB3700",
17
17
  "cssVariable": "--eds-color-bg-brand-primary-hover"
18
18
  },
19
+ "color-bg-brand-weak": {
20
+ "name": "color-bg-brand-weak",
21
+ "type": "color",
22
+ "value": "#FFA081",
23
+ "cssVariable": "--eds-color-bg-brand-weak"
24
+ },
25
+ "color-bg-brand-weak-hover": {
26
+ "name": "color-bg-brand-weak-hover",
27
+ "type": "color",
28
+ "value": "#FF7141",
29
+ "cssVariable": "--eds-color-bg-brand-weak-hover"
30
+ },
19
31
  "color-bg-critical-primary": {
20
32
  "name": "color-bg-critical-primary",
21
33
  "type": "color",
@@ -31,13 +43,13 @@ var tokenMap = {
31
43
  "color-bg-critical-weak": {
32
44
  "name": "color-bg-critical-weak",
33
45
  "type": "color",
34
- "value": "#FEF2F2",
46
+ "value": "#FEE2E2",
35
47
  "cssVariable": "--eds-color-bg-critical-weak"
36
48
  },
37
49
  "color-bg-critical-weak-hover": {
38
50
  "name": "color-bg-critical-weak-hover",
39
51
  "type": "color",
40
- "value": "#FEE2E2",
52
+ "value": "#FECACA",
41
53
  "cssVariable": "--eds-color-bg-critical-weak-hover"
42
54
  },
43
55
  "color-bg-disabled": {
@@ -61,13 +73,13 @@ var tokenMap = {
61
73
  "color-bg-informative-weak": {
62
74
  "name": "color-bg-informative-weak",
63
75
  "type": "color",
64
- "value": "#EFF6FF",
76
+ "value": "#DBEAFE",
65
77
  "cssVariable": "--eds-color-bg-informative-weak"
66
78
  },
67
79
  "color-bg-informative-weak-hover": {
68
80
  "name": "color-bg-informative-weak-hover",
69
81
  "type": "color",
70
- "value": "#DBEAFE",
82
+ "value": "#BFDBFE",
71
83
  "cssVariable": "--eds-color-bg-informative-weak-hover"
72
84
  },
73
85
  "color-bg-layer-basement": {
@@ -76,6 +88,12 @@ var tokenMap = {
76
88
  "value": "#F3F4F6",
77
89
  "cssVariable": "--eds-color-bg-layer-basement"
78
90
  },
91
+ "color-bg-layer-basement-hover": {
92
+ "name": "color-bg-layer-basement-hover",
93
+ "type": "color",
94
+ "value": "#ECEEF1",
95
+ "cssVariable": "--eds-color-bg-layer-basement-hover"
96
+ },
79
97
  "color-bg-layer-default": {
80
98
  "name": "color-bg-layer-default",
81
99
  "type": "color",
@@ -151,13 +169,13 @@ var tokenMap = {
151
169
  "color-bg-positive-weak": {
152
170
  "name": "color-bg-positive-weak",
153
171
  "type": "color",
154
- "value": "#F0FDF4",
172
+ "value": "#DCFCE7",
155
173
  "cssVariable": "--eds-color-bg-positive-weak"
156
174
  },
157
175
  "color-bg-positive-weak-hover": {
158
176
  "name": "color-bg-positive-weak-hover",
159
177
  "type": "color",
160
- "value": "#DCFCE7",
178
+ "value": "#BBF7D0",
161
179
  "cssVariable": "--eds-color-bg-positive-weak-hover"
162
180
  },
163
181
  "color-bg-transparent": {
@@ -187,13 +205,13 @@ var tokenMap = {
187
205
  "color-bg-warning-weak": {
188
206
  "name": "color-bg-warning-weak",
189
207
  "type": "color",
190
- "value": "#FEFCE8",
208
+ "value": "#FEF9C3",
191
209
  "cssVariable": "--eds-color-bg-warning-weak"
192
210
  },
193
211
  "color-bg-warning-weak-hover": {
194
212
  "name": "color-bg-warning-weak-hover",
195
213
  "type": "color",
196
- "value": "#FEF9C3",
214
+ "value": "#FEF08A",
197
215
  "cssVariable": "--eds-color-bg-warning-weak-hover"
198
216
  },
199
217
  "color-fg-brand": {
@@ -295,7 +313,7 @@ var tokenMap = {
295
313
  "color-fg-warning-contrast": {
296
314
  "name": "color-fg-warning-contrast",
297
315
  "type": "color",
298
- "value": "#713F12",
316
+ "value": "#A16207",
299
317
  "cssVariable": "--eds-color-fg-warning-contrast"
300
318
  },
301
319
  "color-stroke-brand-primary": {
@@ -355,9 +373,15 @@ var tokenMap = {
355
373
  "color-stroke-neutral-secondary": {
356
374
  "name": "color-stroke-neutral-secondary",
357
375
  "type": "color",
358
- "value": "#E5E7EB",
376
+ "value": "#9CA3AF",
359
377
  "cssVariable": "--eds-color-stroke-neutral-secondary"
360
378
  },
379
+ "color-stroke-neutral-tertiary": {
380
+ "name": "color-stroke-neutral-tertiary",
381
+ "type": "color",
382
+ "value": "#E5E7EB",
383
+ "cssVariable": "--eds-color-stroke-neutral-tertiary"
384
+ },
361
385
  "color-stroke-neutral-weak": {
362
386
  "name": "color-stroke-neutral-weak",
363
387
  "type": "color",
@@ -904,6 +928,49 @@ var tokenMap = {
904
928
  },
905
929
  "cssVariable": "--eds-typography-heading3-lineHeight"
906
930
  },
931
+ "typography-heading4-fontFamily": {
932
+ "name": "typography-heading4-fontFamily",
933
+ "type": "fontFamily",
934
+ "value": [
935
+ "Pretendard",
936
+ "system-ui",
937
+ "sans-serif"
938
+ ],
939
+ "cssVariable": "--eds-typography-heading4-fontFamily"
940
+ },
941
+ "typography-heading4-fontSize": {
942
+ "name": "typography-heading4-fontSize",
943
+ "type": "dimension",
944
+ "value": {
945
+ "value": 1.25,
946
+ "unit": "rem"
947
+ },
948
+ "cssVariable": "--eds-typography-heading4-fontSize"
949
+ },
950
+ "typography-heading4-fontWeight": {
951
+ "name": "typography-heading4-fontWeight",
952
+ "type": "fontWeight",
953
+ "value": 550,
954
+ "cssVariable": "--eds-typography-heading4-fontWeight"
955
+ },
956
+ "typography-heading4-letterSpacing": {
957
+ "name": "typography-heading4-letterSpacing",
958
+ "type": "dimension",
959
+ "value": {
960
+ "value": -0.2,
961
+ "unit": "px"
962
+ },
963
+ "cssVariable": "--eds-typography-heading4-letterSpacing"
964
+ },
965
+ "typography-heading4-lineHeight": {
966
+ "name": "typography-heading4-lineHeight",
967
+ "type": "dimension",
968
+ "value": {
969
+ "value": 2,
970
+ "unit": "rem"
971
+ },
972
+ "cssVariable": "--eds-typography-heading4-lineHeight"
973
+ },
907
974
  "typography-title1-fontFamily": {
908
975
  "name": "typography-title1-fontFamily",
909
976
  "type": "fontFamily",
@@ -1081,6 +1148,8 @@ var tokens = Object.freeze(tokenMap);
1081
1148
  var tokenNames = Object.freeze([
1082
1149
  "color-bg-brand-primary",
1083
1150
  "color-bg-brand-primary-hover",
1151
+ "color-bg-brand-weak",
1152
+ "color-bg-brand-weak-hover",
1084
1153
  "color-bg-critical-primary",
1085
1154
  "color-bg-critical-primary-hover",
1086
1155
  "color-bg-critical-weak",
@@ -1091,6 +1160,7 @@ var tokenNames = Object.freeze([
1091
1160
  "color-bg-informative-weak",
1092
1161
  "color-bg-informative-weak-hover",
1093
1162
  "color-bg-layer-basement",
1163
+ "color-bg-layer-basement-hover",
1094
1164
  "color-bg-layer-default",
1095
1165
  "color-bg-layer-default-hover",
1096
1166
  "color-bg-layer-floating",
@@ -1138,6 +1208,7 @@ var tokenNames = Object.freeze([
1138
1208
  "color-stroke-neutral-contrast",
1139
1209
  "color-stroke-neutral-primary",
1140
1210
  "color-stroke-neutral-secondary",
1211
+ "color-stroke-neutral-tertiary",
1141
1212
  "color-stroke-neutral-weak",
1142
1213
  "color-stroke-positive-primary",
1143
1214
  "color-stroke-positive-weak",
@@ -1203,6 +1274,11 @@ var tokenNames = Object.freeze([
1203
1274
  "typography-heading3-fontWeight",
1204
1275
  "typography-heading3-letterSpacing",
1205
1276
  "typography-heading3-lineHeight",
1277
+ "typography-heading4-fontFamily",
1278
+ "typography-heading4-fontSize",
1279
+ "typography-heading4-fontWeight",
1280
+ "typography-heading4-letterSpacing",
1281
+ "typography-heading4-lineHeight",
1206
1282
  "typography-title1-fontFamily",
1207
1283
  "typography-title1-fontSize",
1208
1284
  "typography-title1-fontWeight",
@@ -7551,11 +7627,6 @@ function hasRenderableContent(value) {
7551
7627
  }
7552
7628
  return Children.count(value) > 0;
7553
7629
  }
7554
- function requireAccessibleIconLabel(label) {
7555
- if (label === void 0 || label.trim().length === 0) {
7556
- throw new Error("Button icon-only layout requires a non-empty aria-label.");
7557
- }
7558
- }
7559
7630
  function requireLinkHref(href) {
7560
7631
  if (href.trim().length === 0) {
7561
7632
  throw new Error("Button link variant requires a non-empty href.");
@@ -7597,7 +7668,6 @@ function resolveSlots(props) {
7597
7668
  if (hasChildren || startIcon !== void 0 || endIcon !== void 0) {
7598
7669
  throw new Error("Button icon-only layout cannot combine icon with children or start/end icons.");
7599
7670
  }
7600
- requireAccessibleIconLabel(ariaLabel);
7601
7671
  return { layout: "iconOnly", children, icon };
7602
7672
  }
7603
7673
  if (hasChildren === false) {
package/dist/tokens.css CHANGED
@@ -2,16 +2,19 @@
2
2
  :root {
3
3
  --eds-color-bg-brand-primary: #FE4101;
4
4
  --eds-color-bg-brand-primary-hover: #DB3700;
5
+ --eds-color-bg-brand-weak: #FFA081;
6
+ --eds-color-bg-brand-weak-hover: #FF7141;
5
7
  --eds-color-bg-critical-primary: #EF4444;
6
8
  --eds-color-bg-critical-primary-hover: #DC2626;
7
- --eds-color-bg-critical-weak: #FEF2F2;
8
- --eds-color-bg-critical-weak-hover: #FEE2E2;
9
+ --eds-color-bg-critical-weak: #FEE2E2;
10
+ --eds-color-bg-critical-weak-hover: #FECACA;
9
11
  --eds-color-bg-disabled: #E5E7EB;
10
12
  --eds-color-bg-informative-primary: #3B82F6;
11
13
  --eds-color-bg-informative-primary-hover: #2563EB;
12
- --eds-color-bg-informative-weak: #EFF6FF;
13
- --eds-color-bg-informative-weak-hover: #DBEAFE;
14
+ --eds-color-bg-informative-weak: #DBEAFE;
15
+ --eds-color-bg-informative-weak-hover: #BFDBFE;
14
16
  --eds-color-bg-layer-basement: #F3F4F6;
17
+ --eds-color-bg-layer-basement-hover: #ECEEF1;
15
18
  --eds-color-bg-layer-default: #FFFFFFFF;
16
19
  --eds-color-bg-layer-default-hover: #F9FAFB;
17
20
  --eds-color-bg-layer-floating: #FFFFFFFF;
@@ -24,14 +27,14 @@
24
27
  --eds-color-bg-neutral-weak-hover: #D1D5DB;
25
28
  --eds-color-bg-positive-primary: #22C55E;
26
29
  --eds-color-bg-positive-primary-hover: #16A34A;
27
- --eds-color-bg-positive-weak: #F0FDF4;
28
- --eds-color-bg-positive-weak-hover: #DCFCE7;
30
+ --eds-color-bg-positive-weak: #DCFCE7;
31
+ --eds-color-bg-positive-weak-hover: #BBF7D0;
29
32
  --eds-color-bg-transparent: #00000000;
30
33
  --eds-color-bg-transparent-hover: #00000007;
31
34
  --eds-color-bg-warning-primary: #FDE047;
32
35
  --eds-color-bg-warning-primary-hover: #FACC15;
33
- --eds-color-bg-warning-weak: #FEFCE8;
34
- --eds-color-bg-warning-weak-hover: #FEF9C3;
36
+ --eds-color-bg-warning-weak: #FEF9C3;
37
+ --eds-color-bg-warning-weak-hover: #FEF08A;
35
38
  --eds-color-fg-brand: #FE4101;
36
39
  --eds-color-fg-brand-contrast: #AE2B00;
37
40
  --eds-color-fg-critical: #EF4444;
@@ -48,7 +51,7 @@
48
51
  --eds-color-fg-positive: #22C55E;
49
52
  --eds-color-fg-positive-contrast: #15803D;
50
53
  --eds-color-fg-warning: #CA8A04;
51
- --eds-color-fg-warning-contrast: #713F12;
54
+ --eds-color-fg-warning-contrast: #A16207;
52
55
  --eds-color-stroke-brand-primary: #FE4101;
53
56
  --eds-color-stroke-brand-weak: #FFEBE4;
54
57
  --eds-color-stroke-critical-primary: #EF4444;
@@ -58,7 +61,8 @@
58
61
  --eds-color-stroke-informative-weak: #BFDBFE;
59
62
  --eds-color-stroke-neutral-contrast: #1F2937;
60
63
  --eds-color-stroke-neutral-primary: #4B5563;
61
- --eds-color-stroke-neutral-secondary: #E5E7EB;
64
+ --eds-color-stroke-neutral-secondary: #9CA3AF;
65
+ --eds-color-stroke-neutral-tertiary: #E5E7EB;
62
66
  --eds-color-stroke-neutral-weak: #F3F4F6;
63
67
  --eds-color-stroke-positive-primary: #22C55E;
64
68
  --eds-color-stroke-positive-weak: #BBF7D0;
@@ -124,6 +128,11 @@
124
128
  --eds-typography-heading3-fontWeight: 700;
125
129
  --eds-typography-heading3-letterSpacing: -0.4px;
126
130
  --eds-typography-heading3-lineHeight: 2rem;
131
+ --eds-typography-heading4-fontFamily: Pretendard, system-ui, sans-serif;
132
+ --eds-typography-heading4-fontSize: 1.25rem;
133
+ --eds-typography-heading4-fontWeight: 550;
134
+ --eds-typography-heading4-letterSpacing: -0.2px;
135
+ --eds-typography-heading4-lineHeight: 2rem;
127
136
  --eds-typography-title1-fontFamily: Pretendard, system-ui, sans-serif;
128
137
  --eds-typography-title1-fontSize: 1.125rem;
129
138
  --eds-typography-title1-fontWeight: 550;
package/dist/tokens.d.mts CHANGED
@@ -1,7 +1,7 @@
1
- type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
1
+ type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
2
2
  type SemanticTokenType = "color" | "dimension" | "fontFamily" | "fontWeight";
3
- type SemanticTokenCssVariable = "--eds-color-bg-brand-primary" | "--eds-color-bg-brand-primary-hover" | "--eds-color-bg-critical-primary" | "--eds-color-bg-critical-primary-hover" | "--eds-color-bg-critical-weak" | "--eds-color-bg-critical-weak-hover" | "--eds-color-bg-disabled" | "--eds-color-bg-informative-primary" | "--eds-color-bg-informative-primary-hover" | "--eds-color-bg-informative-weak" | "--eds-color-bg-informative-weak-hover" | "--eds-color-bg-layer-basement" | "--eds-color-bg-layer-default" | "--eds-color-bg-layer-default-hover" | "--eds-color-bg-layer-floating" | "--eds-color-bg-layer-floating-hover" | "--eds-color-bg-neutral-inverted" | "--eds-color-bg-neutral-inverted-hover" | "--eds-color-bg-neutral-primary" | "--eds-color-bg-neutral-primary-hover" | "--eds-color-bg-neutral-weak" | "--eds-color-bg-neutral-weak-hover" | "--eds-color-bg-positive-primary" | "--eds-color-bg-positive-primary-hover" | "--eds-color-bg-positive-weak" | "--eds-color-bg-positive-weak-hover" | "--eds-color-bg-transparent" | "--eds-color-bg-transparent-hover" | "--eds-color-bg-warning-primary" | "--eds-color-bg-warning-primary-hover" | "--eds-color-bg-warning-weak" | "--eds-color-bg-warning-weak-hover" | "--eds-color-fg-brand" | "--eds-color-fg-brand-contrast" | "--eds-color-fg-critical" | "--eds-color-fg-critical-contrast" | "--eds-color-fg-disabled" | "--eds-color-fg-focus" | "--eds-color-fg-informative" | "--eds-color-fg-informative-contrast" | "--eds-color-fg-neutral" | "--eds-color-fg-neutral-inverted" | "--eds-color-fg-neutral-secondary" | "--eds-color-fg-neutral-tertiary" | "--eds-color-fg-placeholder" | "--eds-color-fg-positive" | "--eds-color-fg-positive-contrast" | "--eds-color-fg-warning" | "--eds-color-fg-warning-contrast" | "--eds-color-stroke-brand-primary" | "--eds-color-stroke-brand-weak" | "--eds-color-stroke-critical-primary" | "--eds-color-stroke-critical-weak" | "--eds-color-stroke-focusRing" | "--eds-color-stroke-informative-primary" | "--eds-color-stroke-informative-weak" | "--eds-color-stroke-neutral-contrast" | "--eds-color-stroke-neutral-primary" | "--eds-color-stroke-neutral-secondary" | "--eds-color-stroke-neutral-weak" | "--eds-color-stroke-positive-primary" | "--eds-color-stroke-positive-weak" | "--eds-color-stroke-warning-primary" | "--eds-color-stroke-warning-weak" | "--eds-typography-body1-fontFamily" | "--eds-typography-body1-fontSize" | "--eds-typography-body1-fontWeight" | "--eds-typography-body1-letterSpacing" | "--eds-typography-body1-lineHeight" | "--eds-typography-body2-fontFamily" | "--eds-typography-body2-fontSize" | "--eds-typography-body2-fontWeight" | "--eds-typography-body2-letterSpacing" | "--eds-typography-body2-lineHeight" | "--eds-typography-body3-fontFamily" | "--eds-typography-body3-fontSize" | "--eds-typography-body3-fontWeight" | "--eds-typography-body3-letterSpacing" | "--eds-typography-body3-lineHeight" | "--eds-typography-body4-fontFamily" | "--eds-typography-body4-fontSize" | "--eds-typography-body4-fontWeight" | "--eds-typography-body4-letterSpacing" | "--eds-typography-body4-lineHeight" | "--eds-typography-caption1-fontFamily" | "--eds-typography-caption1-fontSize" | "--eds-typography-caption1-fontWeight" | "--eds-typography-caption1-letterSpacing" | "--eds-typography-caption1-lineHeight" | "--eds-typography-caption2-fontFamily" | "--eds-typography-caption2-fontSize" | "--eds-typography-caption2-fontWeight" | "--eds-typography-caption2-letterSpacing" | "--eds-typography-caption2-lineHeight" | "--eds-typography-caption3-fontFamily" | "--eds-typography-caption3-fontSize" | "--eds-typography-caption3-fontWeight" | "--eds-typography-caption3-letterSpacing" | "--eds-typography-caption3-lineHeight" | "--eds-typography-display1-fontFamily" | "--eds-typography-display1-fontSize" | "--eds-typography-display1-fontWeight" | "--eds-typography-display1-letterSpacing" | "--eds-typography-display1-lineHeight" | "--eds-typography-display2-fontFamily" | "--eds-typography-display2-fontSize" | "--eds-typography-display2-fontWeight" | "--eds-typography-display2-letterSpacing" | "--eds-typography-display2-lineHeight" | "--eds-typography-heading1-fontFamily" | "--eds-typography-heading1-fontSize" | "--eds-typography-heading1-fontWeight" | "--eds-typography-heading1-letterSpacing" | "--eds-typography-heading1-lineHeight" | "--eds-typography-heading2-fontFamily" | "--eds-typography-heading2-fontSize" | "--eds-typography-heading2-fontWeight" | "--eds-typography-heading2-letterSpacing" | "--eds-typography-heading2-lineHeight" | "--eds-typography-heading3-fontFamily" | "--eds-typography-heading3-fontSize" | "--eds-typography-heading3-fontWeight" | "--eds-typography-heading3-letterSpacing" | "--eds-typography-heading3-lineHeight" | "--eds-typography-title1-fontFamily" | "--eds-typography-title1-fontSize" | "--eds-typography-title1-fontWeight" | "--eds-typography-title1-letterSpacing" | "--eds-typography-title1-lineHeight" | "--eds-typography-title2-fontFamily" | "--eds-typography-title2-fontSize" | "--eds-typography-title2-fontWeight" | "--eds-typography-title2-letterSpacing" | "--eds-typography-title2-lineHeight" | "--eds-typography-title3-fontFamily" | "--eds-typography-title3-fontSize" | "--eds-typography-title3-fontWeight" | "--eds-typography-title3-letterSpacing" | "--eds-typography-title3-lineHeight" | "--eds-typography-title4-fontFamily" | "--eds-typography-title4-fontSize" | "--eds-typography-title4-fontWeight" | "--eds-typography-title4-letterSpacing" | "--eds-typography-title4-lineHeight";
4
- type SemanticTokenCssReference = "var(--eds-color-bg-brand-primary)" | "var(--eds-color-bg-brand-primary-hover)" | "var(--eds-color-bg-critical-primary)" | "var(--eds-color-bg-critical-primary-hover)" | "var(--eds-color-bg-critical-weak)" | "var(--eds-color-bg-critical-weak-hover)" | "var(--eds-color-bg-disabled)" | "var(--eds-color-bg-informative-primary)" | "var(--eds-color-bg-informative-primary-hover)" | "var(--eds-color-bg-informative-weak)" | "var(--eds-color-bg-informative-weak-hover)" | "var(--eds-color-bg-layer-basement)" | "var(--eds-color-bg-layer-default)" | "var(--eds-color-bg-layer-default-hover)" | "var(--eds-color-bg-layer-floating)" | "var(--eds-color-bg-layer-floating-hover)" | "var(--eds-color-bg-neutral-inverted)" | "var(--eds-color-bg-neutral-inverted-hover)" | "var(--eds-color-bg-neutral-primary)" | "var(--eds-color-bg-neutral-primary-hover)" | "var(--eds-color-bg-neutral-weak)" | "var(--eds-color-bg-neutral-weak-hover)" | "var(--eds-color-bg-positive-primary)" | "var(--eds-color-bg-positive-primary-hover)" | "var(--eds-color-bg-positive-weak)" | "var(--eds-color-bg-positive-weak-hover)" | "var(--eds-color-bg-transparent)" | "var(--eds-color-bg-transparent-hover)" | "var(--eds-color-bg-warning-primary)" | "var(--eds-color-bg-warning-primary-hover)" | "var(--eds-color-bg-warning-weak)" | "var(--eds-color-bg-warning-weak-hover)" | "var(--eds-color-fg-brand)" | "var(--eds-color-fg-brand-contrast)" | "var(--eds-color-fg-critical)" | "var(--eds-color-fg-critical-contrast)" | "var(--eds-color-fg-disabled)" | "var(--eds-color-fg-focus)" | "var(--eds-color-fg-informative)" | "var(--eds-color-fg-informative-contrast)" | "var(--eds-color-fg-neutral)" | "var(--eds-color-fg-neutral-inverted)" | "var(--eds-color-fg-neutral-secondary)" | "var(--eds-color-fg-neutral-tertiary)" | "var(--eds-color-fg-placeholder)" | "var(--eds-color-fg-positive)" | "var(--eds-color-fg-positive-contrast)" | "var(--eds-color-fg-warning)" | "var(--eds-color-fg-warning-contrast)" | "var(--eds-color-stroke-brand-primary)" | "var(--eds-color-stroke-brand-weak)" | "var(--eds-color-stroke-critical-primary)" | "var(--eds-color-stroke-critical-weak)" | "var(--eds-color-stroke-focusRing)" | "var(--eds-color-stroke-informative-primary)" | "var(--eds-color-stroke-informative-weak)" | "var(--eds-color-stroke-neutral-contrast)" | "var(--eds-color-stroke-neutral-primary)" | "var(--eds-color-stroke-neutral-secondary)" | "var(--eds-color-stroke-neutral-weak)" | "var(--eds-color-stroke-positive-primary)" | "var(--eds-color-stroke-positive-weak)" | "var(--eds-color-stroke-warning-primary)" | "var(--eds-color-stroke-warning-weak)" | "var(--eds-typography-body1-fontFamily)" | "var(--eds-typography-body1-fontSize)" | "var(--eds-typography-body1-fontWeight)" | "var(--eds-typography-body1-letterSpacing)" | "var(--eds-typography-body1-lineHeight)" | "var(--eds-typography-body2-fontFamily)" | "var(--eds-typography-body2-fontSize)" | "var(--eds-typography-body2-fontWeight)" | "var(--eds-typography-body2-letterSpacing)" | "var(--eds-typography-body2-lineHeight)" | "var(--eds-typography-body3-fontFamily)" | "var(--eds-typography-body3-fontSize)" | "var(--eds-typography-body3-fontWeight)" | "var(--eds-typography-body3-letterSpacing)" | "var(--eds-typography-body3-lineHeight)" | "var(--eds-typography-body4-fontFamily)" | "var(--eds-typography-body4-fontSize)" | "var(--eds-typography-body4-fontWeight)" | "var(--eds-typography-body4-letterSpacing)" | "var(--eds-typography-body4-lineHeight)" | "var(--eds-typography-caption1-fontFamily)" | "var(--eds-typography-caption1-fontSize)" | "var(--eds-typography-caption1-fontWeight)" | "var(--eds-typography-caption1-letterSpacing)" | "var(--eds-typography-caption1-lineHeight)" | "var(--eds-typography-caption2-fontFamily)" | "var(--eds-typography-caption2-fontSize)" | "var(--eds-typography-caption2-fontWeight)" | "var(--eds-typography-caption2-letterSpacing)" | "var(--eds-typography-caption2-lineHeight)" | "var(--eds-typography-caption3-fontFamily)" | "var(--eds-typography-caption3-fontSize)" | "var(--eds-typography-caption3-fontWeight)" | "var(--eds-typography-caption3-letterSpacing)" | "var(--eds-typography-caption3-lineHeight)" | "var(--eds-typography-display1-fontFamily)" | "var(--eds-typography-display1-fontSize)" | "var(--eds-typography-display1-fontWeight)" | "var(--eds-typography-display1-letterSpacing)" | "var(--eds-typography-display1-lineHeight)" | "var(--eds-typography-display2-fontFamily)" | "var(--eds-typography-display2-fontSize)" | "var(--eds-typography-display2-fontWeight)" | "var(--eds-typography-display2-letterSpacing)" | "var(--eds-typography-display2-lineHeight)" | "var(--eds-typography-heading1-fontFamily)" | "var(--eds-typography-heading1-fontSize)" | "var(--eds-typography-heading1-fontWeight)" | "var(--eds-typography-heading1-letterSpacing)" | "var(--eds-typography-heading1-lineHeight)" | "var(--eds-typography-heading2-fontFamily)" | "var(--eds-typography-heading2-fontSize)" | "var(--eds-typography-heading2-fontWeight)" | "var(--eds-typography-heading2-letterSpacing)" | "var(--eds-typography-heading2-lineHeight)" | "var(--eds-typography-heading3-fontFamily)" | "var(--eds-typography-heading3-fontSize)" | "var(--eds-typography-heading3-fontWeight)" | "var(--eds-typography-heading3-letterSpacing)" | "var(--eds-typography-heading3-lineHeight)" | "var(--eds-typography-title1-fontFamily)" | "var(--eds-typography-title1-fontSize)" | "var(--eds-typography-title1-fontWeight)" | "var(--eds-typography-title1-letterSpacing)" | "var(--eds-typography-title1-lineHeight)" | "var(--eds-typography-title2-fontFamily)" | "var(--eds-typography-title2-fontSize)" | "var(--eds-typography-title2-fontWeight)" | "var(--eds-typography-title2-letterSpacing)" | "var(--eds-typography-title2-lineHeight)" | "var(--eds-typography-title3-fontFamily)" | "var(--eds-typography-title3-fontSize)" | "var(--eds-typography-title3-fontWeight)" | "var(--eds-typography-title3-letterSpacing)" | "var(--eds-typography-title3-lineHeight)" | "var(--eds-typography-title4-fontFamily)" | "var(--eds-typography-title4-fontSize)" | "var(--eds-typography-title4-fontWeight)" | "var(--eds-typography-title4-letterSpacing)" | "var(--eds-typography-title4-lineHeight)";
3
+ type SemanticTokenCssVariable = "--eds-color-bg-brand-primary" | "--eds-color-bg-brand-primary-hover" | "--eds-color-bg-brand-weak" | "--eds-color-bg-brand-weak-hover" | "--eds-color-bg-critical-primary" | "--eds-color-bg-critical-primary-hover" | "--eds-color-bg-critical-weak" | "--eds-color-bg-critical-weak-hover" | "--eds-color-bg-disabled" | "--eds-color-bg-informative-primary" | "--eds-color-bg-informative-primary-hover" | "--eds-color-bg-informative-weak" | "--eds-color-bg-informative-weak-hover" | "--eds-color-bg-layer-basement" | "--eds-color-bg-layer-basement-hover" | "--eds-color-bg-layer-default" | "--eds-color-bg-layer-default-hover" | "--eds-color-bg-layer-floating" | "--eds-color-bg-layer-floating-hover" | "--eds-color-bg-neutral-inverted" | "--eds-color-bg-neutral-inverted-hover" | "--eds-color-bg-neutral-primary" | "--eds-color-bg-neutral-primary-hover" | "--eds-color-bg-neutral-weak" | "--eds-color-bg-neutral-weak-hover" | "--eds-color-bg-positive-primary" | "--eds-color-bg-positive-primary-hover" | "--eds-color-bg-positive-weak" | "--eds-color-bg-positive-weak-hover" | "--eds-color-bg-transparent" | "--eds-color-bg-transparent-hover" | "--eds-color-bg-warning-primary" | "--eds-color-bg-warning-primary-hover" | "--eds-color-bg-warning-weak" | "--eds-color-bg-warning-weak-hover" | "--eds-color-fg-brand" | "--eds-color-fg-brand-contrast" | "--eds-color-fg-critical" | "--eds-color-fg-critical-contrast" | "--eds-color-fg-disabled" | "--eds-color-fg-focus" | "--eds-color-fg-informative" | "--eds-color-fg-informative-contrast" | "--eds-color-fg-neutral" | "--eds-color-fg-neutral-inverted" | "--eds-color-fg-neutral-secondary" | "--eds-color-fg-neutral-tertiary" | "--eds-color-fg-placeholder" | "--eds-color-fg-positive" | "--eds-color-fg-positive-contrast" | "--eds-color-fg-warning" | "--eds-color-fg-warning-contrast" | "--eds-color-stroke-brand-primary" | "--eds-color-stroke-brand-weak" | "--eds-color-stroke-critical-primary" | "--eds-color-stroke-critical-weak" | "--eds-color-stroke-focusRing" | "--eds-color-stroke-informative-primary" | "--eds-color-stroke-informative-weak" | "--eds-color-stroke-neutral-contrast" | "--eds-color-stroke-neutral-primary" | "--eds-color-stroke-neutral-secondary" | "--eds-color-stroke-neutral-tertiary" | "--eds-color-stroke-neutral-weak" | "--eds-color-stroke-positive-primary" | "--eds-color-stroke-positive-weak" | "--eds-color-stroke-warning-primary" | "--eds-color-stroke-warning-weak" | "--eds-typography-body1-fontFamily" | "--eds-typography-body1-fontSize" | "--eds-typography-body1-fontWeight" | "--eds-typography-body1-letterSpacing" | "--eds-typography-body1-lineHeight" | "--eds-typography-body2-fontFamily" | "--eds-typography-body2-fontSize" | "--eds-typography-body2-fontWeight" | "--eds-typography-body2-letterSpacing" | "--eds-typography-body2-lineHeight" | "--eds-typography-body3-fontFamily" | "--eds-typography-body3-fontSize" | "--eds-typography-body3-fontWeight" | "--eds-typography-body3-letterSpacing" | "--eds-typography-body3-lineHeight" | "--eds-typography-body4-fontFamily" | "--eds-typography-body4-fontSize" | "--eds-typography-body4-fontWeight" | "--eds-typography-body4-letterSpacing" | "--eds-typography-body4-lineHeight" | "--eds-typography-caption1-fontFamily" | "--eds-typography-caption1-fontSize" | "--eds-typography-caption1-fontWeight" | "--eds-typography-caption1-letterSpacing" | "--eds-typography-caption1-lineHeight" | "--eds-typography-caption2-fontFamily" | "--eds-typography-caption2-fontSize" | "--eds-typography-caption2-fontWeight" | "--eds-typography-caption2-letterSpacing" | "--eds-typography-caption2-lineHeight" | "--eds-typography-caption3-fontFamily" | "--eds-typography-caption3-fontSize" | "--eds-typography-caption3-fontWeight" | "--eds-typography-caption3-letterSpacing" | "--eds-typography-caption3-lineHeight" | "--eds-typography-display1-fontFamily" | "--eds-typography-display1-fontSize" | "--eds-typography-display1-fontWeight" | "--eds-typography-display1-letterSpacing" | "--eds-typography-display1-lineHeight" | "--eds-typography-display2-fontFamily" | "--eds-typography-display2-fontSize" | "--eds-typography-display2-fontWeight" | "--eds-typography-display2-letterSpacing" | "--eds-typography-display2-lineHeight" | "--eds-typography-heading1-fontFamily" | "--eds-typography-heading1-fontSize" | "--eds-typography-heading1-fontWeight" | "--eds-typography-heading1-letterSpacing" | "--eds-typography-heading1-lineHeight" | "--eds-typography-heading2-fontFamily" | "--eds-typography-heading2-fontSize" | "--eds-typography-heading2-fontWeight" | "--eds-typography-heading2-letterSpacing" | "--eds-typography-heading2-lineHeight" | "--eds-typography-heading3-fontFamily" | "--eds-typography-heading3-fontSize" | "--eds-typography-heading3-fontWeight" | "--eds-typography-heading3-letterSpacing" | "--eds-typography-heading3-lineHeight" | "--eds-typography-heading4-fontFamily" | "--eds-typography-heading4-fontSize" | "--eds-typography-heading4-fontWeight" | "--eds-typography-heading4-letterSpacing" | "--eds-typography-heading4-lineHeight" | "--eds-typography-title1-fontFamily" | "--eds-typography-title1-fontSize" | "--eds-typography-title1-fontWeight" | "--eds-typography-title1-letterSpacing" | "--eds-typography-title1-lineHeight" | "--eds-typography-title2-fontFamily" | "--eds-typography-title2-fontSize" | "--eds-typography-title2-fontWeight" | "--eds-typography-title2-letterSpacing" | "--eds-typography-title2-lineHeight" | "--eds-typography-title3-fontFamily" | "--eds-typography-title3-fontSize" | "--eds-typography-title3-fontWeight" | "--eds-typography-title3-letterSpacing" | "--eds-typography-title3-lineHeight" | "--eds-typography-title4-fontFamily" | "--eds-typography-title4-fontSize" | "--eds-typography-title4-fontWeight" | "--eds-typography-title4-letterSpacing" | "--eds-typography-title4-lineHeight";
4
+ type SemanticTokenCssReference = "var(--eds-color-bg-brand-primary)" | "var(--eds-color-bg-brand-primary-hover)" | "var(--eds-color-bg-brand-weak)" | "var(--eds-color-bg-brand-weak-hover)" | "var(--eds-color-bg-critical-primary)" | "var(--eds-color-bg-critical-primary-hover)" | "var(--eds-color-bg-critical-weak)" | "var(--eds-color-bg-critical-weak-hover)" | "var(--eds-color-bg-disabled)" | "var(--eds-color-bg-informative-primary)" | "var(--eds-color-bg-informative-primary-hover)" | "var(--eds-color-bg-informative-weak)" | "var(--eds-color-bg-informative-weak-hover)" | "var(--eds-color-bg-layer-basement)" | "var(--eds-color-bg-layer-basement-hover)" | "var(--eds-color-bg-layer-default)" | "var(--eds-color-bg-layer-default-hover)" | "var(--eds-color-bg-layer-floating)" | "var(--eds-color-bg-layer-floating-hover)" | "var(--eds-color-bg-neutral-inverted)" | "var(--eds-color-bg-neutral-inverted-hover)" | "var(--eds-color-bg-neutral-primary)" | "var(--eds-color-bg-neutral-primary-hover)" | "var(--eds-color-bg-neutral-weak)" | "var(--eds-color-bg-neutral-weak-hover)" | "var(--eds-color-bg-positive-primary)" | "var(--eds-color-bg-positive-primary-hover)" | "var(--eds-color-bg-positive-weak)" | "var(--eds-color-bg-positive-weak-hover)" | "var(--eds-color-bg-transparent)" | "var(--eds-color-bg-transparent-hover)" | "var(--eds-color-bg-warning-primary)" | "var(--eds-color-bg-warning-primary-hover)" | "var(--eds-color-bg-warning-weak)" | "var(--eds-color-bg-warning-weak-hover)" | "var(--eds-color-fg-brand)" | "var(--eds-color-fg-brand-contrast)" | "var(--eds-color-fg-critical)" | "var(--eds-color-fg-critical-contrast)" | "var(--eds-color-fg-disabled)" | "var(--eds-color-fg-focus)" | "var(--eds-color-fg-informative)" | "var(--eds-color-fg-informative-contrast)" | "var(--eds-color-fg-neutral)" | "var(--eds-color-fg-neutral-inverted)" | "var(--eds-color-fg-neutral-secondary)" | "var(--eds-color-fg-neutral-tertiary)" | "var(--eds-color-fg-placeholder)" | "var(--eds-color-fg-positive)" | "var(--eds-color-fg-positive-contrast)" | "var(--eds-color-fg-warning)" | "var(--eds-color-fg-warning-contrast)" | "var(--eds-color-stroke-brand-primary)" | "var(--eds-color-stroke-brand-weak)" | "var(--eds-color-stroke-critical-primary)" | "var(--eds-color-stroke-critical-weak)" | "var(--eds-color-stroke-focusRing)" | "var(--eds-color-stroke-informative-primary)" | "var(--eds-color-stroke-informative-weak)" | "var(--eds-color-stroke-neutral-contrast)" | "var(--eds-color-stroke-neutral-primary)" | "var(--eds-color-stroke-neutral-secondary)" | "var(--eds-color-stroke-neutral-tertiary)" | "var(--eds-color-stroke-neutral-weak)" | "var(--eds-color-stroke-positive-primary)" | "var(--eds-color-stroke-positive-weak)" | "var(--eds-color-stroke-warning-primary)" | "var(--eds-color-stroke-warning-weak)" | "var(--eds-typography-body1-fontFamily)" | "var(--eds-typography-body1-fontSize)" | "var(--eds-typography-body1-fontWeight)" | "var(--eds-typography-body1-letterSpacing)" | "var(--eds-typography-body1-lineHeight)" | "var(--eds-typography-body2-fontFamily)" | "var(--eds-typography-body2-fontSize)" | "var(--eds-typography-body2-fontWeight)" | "var(--eds-typography-body2-letterSpacing)" | "var(--eds-typography-body2-lineHeight)" | "var(--eds-typography-body3-fontFamily)" | "var(--eds-typography-body3-fontSize)" | "var(--eds-typography-body3-fontWeight)" | "var(--eds-typography-body3-letterSpacing)" | "var(--eds-typography-body3-lineHeight)" | "var(--eds-typography-body4-fontFamily)" | "var(--eds-typography-body4-fontSize)" | "var(--eds-typography-body4-fontWeight)" | "var(--eds-typography-body4-letterSpacing)" | "var(--eds-typography-body4-lineHeight)" | "var(--eds-typography-caption1-fontFamily)" | "var(--eds-typography-caption1-fontSize)" | "var(--eds-typography-caption1-fontWeight)" | "var(--eds-typography-caption1-letterSpacing)" | "var(--eds-typography-caption1-lineHeight)" | "var(--eds-typography-caption2-fontFamily)" | "var(--eds-typography-caption2-fontSize)" | "var(--eds-typography-caption2-fontWeight)" | "var(--eds-typography-caption2-letterSpacing)" | "var(--eds-typography-caption2-lineHeight)" | "var(--eds-typography-caption3-fontFamily)" | "var(--eds-typography-caption3-fontSize)" | "var(--eds-typography-caption3-fontWeight)" | "var(--eds-typography-caption3-letterSpacing)" | "var(--eds-typography-caption3-lineHeight)" | "var(--eds-typography-display1-fontFamily)" | "var(--eds-typography-display1-fontSize)" | "var(--eds-typography-display1-fontWeight)" | "var(--eds-typography-display1-letterSpacing)" | "var(--eds-typography-display1-lineHeight)" | "var(--eds-typography-display2-fontFamily)" | "var(--eds-typography-display2-fontSize)" | "var(--eds-typography-display2-fontWeight)" | "var(--eds-typography-display2-letterSpacing)" | "var(--eds-typography-display2-lineHeight)" | "var(--eds-typography-heading1-fontFamily)" | "var(--eds-typography-heading1-fontSize)" | "var(--eds-typography-heading1-fontWeight)" | "var(--eds-typography-heading1-letterSpacing)" | "var(--eds-typography-heading1-lineHeight)" | "var(--eds-typography-heading2-fontFamily)" | "var(--eds-typography-heading2-fontSize)" | "var(--eds-typography-heading2-fontWeight)" | "var(--eds-typography-heading2-letterSpacing)" | "var(--eds-typography-heading2-lineHeight)" | "var(--eds-typography-heading3-fontFamily)" | "var(--eds-typography-heading3-fontSize)" | "var(--eds-typography-heading3-fontWeight)" | "var(--eds-typography-heading3-letterSpacing)" | "var(--eds-typography-heading3-lineHeight)" | "var(--eds-typography-heading4-fontFamily)" | "var(--eds-typography-heading4-fontSize)" | "var(--eds-typography-heading4-fontWeight)" | "var(--eds-typography-heading4-letterSpacing)" | "var(--eds-typography-heading4-lineHeight)" | "var(--eds-typography-title1-fontFamily)" | "var(--eds-typography-title1-fontSize)" | "var(--eds-typography-title1-fontWeight)" | "var(--eds-typography-title1-letterSpacing)" | "var(--eds-typography-title1-lineHeight)" | "var(--eds-typography-title2-fontFamily)" | "var(--eds-typography-title2-fontSize)" | "var(--eds-typography-title2-fontWeight)" | "var(--eds-typography-title2-letterSpacing)" | "var(--eds-typography-title2-lineHeight)" | "var(--eds-typography-title3-fontFamily)" | "var(--eds-typography-title3-fontSize)" | "var(--eds-typography-title3-fontWeight)" | "var(--eds-typography-title3-letterSpacing)" | "var(--eds-typography-title3-lineHeight)" | "var(--eds-typography-title4-fontFamily)" | "var(--eds-typography-title4-fontSize)" | "var(--eds-typography-title4-fontWeight)" | "var(--eds-typography-title4-letterSpacing)" | "var(--eds-typography-title4-lineHeight)";
5
5
  interface SemanticToken {
6
6
  readonly name: SemanticTokenName;
7
7
  readonly type: SemanticTokenType;