@spectrabrain/eds 0.1.0 → 0.2.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 (62) hide show
  1. package/AI.md +13 -63
  2. package/AI_CONTEXT.json +26 -95
  3. package/CHANGELOG.md +70 -4
  4. package/CONSUMER_AGENT.md +86 -164
  5. package/FRONTEND_CONVENTIONS.md +252 -0
  6. package/QUICKSTART.md +24 -29
  7. package/README.md +29 -73
  8. package/TAILWIND_V4.md +52 -184
  9. package/TOKEN_CONTEXT.md +79 -36
  10. package/consumer/align/templates/components.json +21 -0
  11. package/consumer/align/templates/env.mock +1 -0
  12. package/consumer/align/templates/eslint.config.js +35 -0
  13. package/consumer/align/templates/package.scripts.json +10 -0
  14. package/consumer/align/templates/prettierignore +2 -0
  15. package/consumer/align/templates/prettierrc.json +7 -0
  16. package/consumer/align/templates/src/app/App.tsx +16 -0
  17. package/consumer/align/templates/src/app/main.tsx +27 -0
  18. package/consumer/align/templates/src/app/providers/ErrorBoundary.tsx +58 -0
  19. package/consumer/align/templates/src/app/providers/ErrorHandler.tsx +29 -0
  20. package/consumer/align/templates/src/app/router/index.tsx +23 -0
  21. package/consumer/align/templates/src/app/styles/index.css +2 -0
  22. package/consumer/align/templates/src/mocks/browser.ts +5 -0
  23. package/consumer/align/templates/src/mocks/handlers.ts +4 -0
  24. package/consumer/align/templates/src/shared/api/index.ts +23 -0
  25. package/consumer/align/templates/src/shared/api/queryClient.ts +24 -0
  26. package/consumer/align/templates/src/shared/lib/eventBus.ts +44 -0
  27. package/consumer/align/templates/src/shared/lib/utils/index.ts +6 -0
  28. package/consumer/align/templates/src/vite-env.d.ts +2 -0
  29. package/consumer/align/templates/tsconfig.json +22 -0
  30. package/consumer/align/templates/vite.config.babel.ts +36 -0
  31. package/consumer/align/templates/vite.config.rolldown.ts +35 -0
  32. package/consumer/align-analysis.mjs +1159 -0
  33. package/consumer/align-plan.mjs +377 -0
  34. package/consumer/align-rules.mjs +473 -0
  35. package/consumer/align.mjs +401 -0
  36. package/consumer/cli.mjs +90 -40
  37. package/consumer/css-root.mjs +24 -4
  38. package/consumer/doctor.mjs +47 -21
  39. package/consumer/generate-tailwind.mjs +41 -1
  40. package/consumer/init.mjs +39 -25
  41. package/consumer/managed-block.mjs +11 -5
  42. package/consumer/paths.mjs +69 -14
  43. package/consumer/register-scripts.mjs +17 -12
  44. package/consumer/scan-classes.mjs +24 -5
  45. package/consumer/sync.mjs +35 -13
  46. package/consumer/update-agent-context.mjs +63 -7
  47. package/consumer-postinstall.mjs +8 -7
  48. package/dist/components/Button/README.md +66 -95
  49. package/dist/components/Button/spec.json +19 -138
  50. package/dist/components.css +102 -366
  51. package/dist/index.d.mts +20 -18
  52. package/dist/index.d.ts +20 -18
  53. package/dist/index.js +301 -1
  54. package/dist/index.mjs +301 -1
  55. package/dist/tokens.css +30 -0
  56. package/dist/tokens.d.mts +7 -3
  57. package/dist/tokens.d.ts +7 -3
  58. package/dist/tokens.js +301 -1
  59. package/dist/tokens.json +360 -0
  60. package/dist/tokens.mjs +301 -1
  61. package/llms.txt +20 -14
  62. package/package.json +3 -1
package/dist/components.css CHANGED
@@ -3,162 +3,60 @@
3
3
  --eds-button-focus-root-outlineColor: var(--eds-color-stroke-focusRing);
4
4
  --eds-button-focus-root-outlineOffset: 2px;
5
5
  --eds-button-focus-root-outlineWidth: 2px;
6
- --eds-button-size-md-iconBoth-label-fontFamily: var(--eds-typography-title3-fontFamily);
7
- --eds-button-size-md-iconBoth-label-fontSize: var(--eds-typography-title3-fontSize);
8
- --eds-button-size-md-iconBoth-label-fontWeight: var(--eds-typography-title3-fontWeight);
9
- --eds-button-size-md-iconBoth-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
10
- --eds-button-size-md-iconBoth-label-lineHeight: var(--eds-typography-title3-lineHeight);
11
- --eds-button-size-md-iconBoth-prefixIcon-size: 16px;
12
- --eds-button-size-md-iconBoth-root-cornerRadius: 6px;
13
- --eds-button-size-md-iconBoth-root-gap: 4px;
14
- --eds-button-size-md-iconBoth-root-height: 40px;
15
- --eds-button-size-md-iconBoth-root-paddingX: 12px;
16
- --eds-button-size-md-iconBoth-root-paddingY: 10px;
17
- --eds-button-size-md-iconBoth-suffixIcon-size: 16px;
18
- --eds-button-size-md-iconFirst-label-fontFamily: var(--eds-typography-title3-fontFamily);
19
- --eds-button-size-md-iconFirst-label-fontSize: var(--eds-typography-title3-fontSize);
20
- --eds-button-size-md-iconFirst-label-fontWeight: var(--eds-typography-title3-fontWeight);
21
- --eds-button-size-md-iconFirst-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
22
- --eds-button-size-md-iconFirst-label-lineHeight: var(--eds-typography-title3-lineHeight);
23
- --eds-button-size-md-iconFirst-prefixIcon-size: 16px;
24
- --eds-button-size-md-iconFirst-root-cornerRadius: 6px;
25
- --eds-button-size-md-iconFirst-root-gap: 4px;
26
- --eds-button-size-md-iconFirst-root-height: 40px;
27
- --eds-button-size-md-iconFirst-root-paddingX: 12px;
28
- --eds-button-size-md-iconFirst-root-paddingY: 10px;
29
- --eds-button-size-md-iconLast-label-fontFamily: var(--eds-typography-title3-fontFamily);
30
- --eds-button-size-md-iconLast-label-fontSize: var(--eds-typography-title3-fontSize);
31
- --eds-button-size-md-iconLast-label-fontWeight: var(--eds-typography-title3-fontWeight);
32
- --eds-button-size-md-iconLast-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
33
- --eds-button-size-md-iconLast-label-lineHeight: var(--eds-typography-title3-lineHeight);
34
- --eds-button-size-md-iconLast-root-cornerRadius: 6px;
35
- --eds-button-size-md-iconLast-root-gap: 4px;
36
- --eds-button-size-md-iconLast-root-height: 40px;
37
- --eds-button-size-md-iconLast-root-paddingX: 12px;
38
- --eds-button-size-md-iconLast-root-paddingY: 10px;
39
- --eds-button-size-md-iconLast-suffixIcon-size: 16px;
40
6
  --eds-button-size-md-iconOnly-icon-size: 18px;
41
- --eds-button-size-md-iconOnly-root-cornerRadius: 6px;
42
- --eds-button-size-md-iconOnly-root-height: 40px;
43
7
  --eds-button-size-md-iconOnly-root-minWidth: 40px;
44
8
  --eds-button-size-md-iconOnly-root-paddingX: 10px;
45
9
  --eds-button-size-md-iconOnly-root-paddingY: 10px;
10
+ --eds-button-size-md-label-fontFamily: var(--eds-typography-title3-fontFamily);
11
+ --eds-button-size-md-label-fontSize: var(--eds-typography-title3-fontSize);
12
+ --eds-button-size-md-label-fontWeight: var(--eds-typography-title3-fontWeight);
13
+ --eds-button-size-md-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
14
+ --eds-button-size-md-label-lineHeight: var(--eds-typography-title3-lineHeight);
15
+ --eds-button-size-md-prefixIcon-size: 16px;
46
16
  --eds-button-size-md-progressCircle-size: 16px;
47
17
  --eds-button-size-md-progressCircle-thickness: 1.5px;
48
- --eds-button-size-md-textOnly-label-fontFamily: var(--eds-typography-title3-fontFamily);
49
- --eds-button-size-md-textOnly-label-fontSize: var(--eds-typography-title3-fontSize);
50
- --eds-button-size-md-textOnly-label-fontWeight: var(--eds-typography-title3-fontWeight);
51
- --eds-button-size-md-textOnly-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
52
- --eds-button-size-md-textOnly-label-lineHeight: var(--eds-typography-title3-lineHeight);
53
- --eds-button-size-md-textOnly-root-cornerRadius: 6px;
54
- --eds-button-size-md-textOnly-root-gap: 4px;
55
- --eds-button-size-md-textOnly-root-height: 40px;
56
- --eds-button-size-md-textOnly-root-paddingX: 12px;
57
- --eds-button-size-md-textOnly-root-paddingY: 10px;
58
- --eds-button-size-sm-iconBoth-label-fontFamily: var(--eds-typography-title3-fontFamily);
59
- --eds-button-size-sm-iconBoth-label-fontSize: var(--eds-typography-title3-fontSize);
60
- --eds-button-size-sm-iconBoth-label-fontWeight: var(--eds-typography-title3-fontWeight);
61
- --eds-button-size-sm-iconBoth-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
62
- --eds-button-size-sm-iconBoth-label-lineHeight: var(--eds-typography-title3-lineHeight);
63
- --eds-button-size-sm-iconBoth-prefixIcon-size: 14px;
64
- --eds-button-size-sm-iconBoth-root-cornerRadius: 6px;
65
- --eds-button-size-sm-iconBoth-root-gap: 4px;
66
- --eds-button-size-sm-iconBoth-root-height: 36px;
67
- --eds-button-size-sm-iconBoth-root-paddingX: 12px;
68
- --eds-button-size-sm-iconBoth-root-paddingY: 8px;
69
- --eds-button-size-sm-iconBoth-suffixIcon-size: 14px;
70
- --eds-button-size-sm-iconFirst-label-fontFamily: var(--eds-typography-title3-fontFamily);
71
- --eds-button-size-sm-iconFirst-label-fontSize: var(--eds-typography-title3-fontSize);
72
- --eds-button-size-sm-iconFirst-label-fontWeight: var(--eds-typography-title3-fontWeight);
73
- --eds-button-size-sm-iconFirst-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
74
- --eds-button-size-sm-iconFirst-label-lineHeight: var(--eds-typography-title3-lineHeight);
75
- --eds-button-size-sm-iconFirst-prefixIcon-size: 14px;
76
- --eds-button-size-sm-iconFirst-root-cornerRadius: 6px;
77
- --eds-button-size-sm-iconFirst-root-gap: 4px;
78
- --eds-button-size-sm-iconFirst-root-height: 36px;
79
- --eds-button-size-sm-iconFirst-root-paddingX: 12px;
80
- --eds-button-size-sm-iconFirst-root-paddingY: 8px;
81
- --eds-button-size-sm-iconLast-label-fontFamily: var(--eds-typography-title3-fontFamily);
82
- --eds-button-size-sm-iconLast-label-fontSize: var(--eds-typography-title3-fontSize);
83
- --eds-button-size-sm-iconLast-label-fontWeight: var(--eds-typography-title3-fontWeight);
84
- --eds-button-size-sm-iconLast-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
85
- --eds-button-size-sm-iconLast-label-lineHeight: var(--eds-typography-title3-lineHeight);
86
- --eds-button-size-sm-iconLast-root-cornerRadius: 6px;
87
- --eds-button-size-sm-iconLast-root-gap: 4px;
88
- --eds-button-size-sm-iconLast-root-height: 36px;
89
- --eds-button-size-sm-iconLast-root-paddingX: 12px;
90
- --eds-button-size-sm-iconLast-root-paddingY: 8px;
91
- --eds-button-size-sm-iconLast-suffixIcon-size: 14px;
18
+ --eds-button-size-md-root-cornerRadius: 6px;
19
+ --eds-button-size-md-root-gap: 4px;
20
+ --eds-button-size-md-root-height: 40px;
21
+ --eds-button-size-md-root-paddingX: 12px;
22
+ --eds-button-size-md-root-paddingY: 10px;
23
+ --eds-button-size-md-suffixIcon-size: 16px;
92
24
  --eds-button-size-sm-iconOnly-icon-size: 16px;
93
- --eds-button-size-sm-iconOnly-root-cornerRadius: 6px;
94
- --eds-button-size-sm-iconOnly-root-height: 36px;
95
25
  --eds-button-size-sm-iconOnly-root-minWidth: 30px;
96
26
  --eds-button-size-sm-iconOnly-root-paddingX: 10px;
97
27
  --eds-button-size-sm-iconOnly-root-paddingY: 10px;
28
+ --eds-button-size-sm-label-fontFamily: var(--eds-typography-title3-fontFamily);
29
+ --eds-button-size-sm-label-fontSize: var(--eds-typography-title3-fontSize);
30
+ --eds-button-size-sm-label-fontWeight: var(--eds-typography-title3-fontWeight);
31
+ --eds-button-size-sm-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
32
+ --eds-button-size-sm-label-lineHeight: var(--eds-typography-title3-lineHeight);
33
+ --eds-button-size-sm-prefixIcon-size: 14px;
98
34
  --eds-button-size-sm-progressCircle-size: 14px;
99
35
  --eds-button-size-sm-progressCircle-thickness: 1.5px;
100
- --eds-button-size-sm-textOnly-label-fontFamily: var(--eds-typography-title3-fontFamily);
101
- --eds-button-size-sm-textOnly-label-fontSize: var(--eds-typography-title3-fontSize);
102
- --eds-button-size-sm-textOnly-label-fontWeight: var(--eds-typography-title3-fontWeight);
103
- --eds-button-size-sm-textOnly-label-letterSpacing: var(--eds-typography-title3-letterSpacing);
104
- --eds-button-size-sm-textOnly-label-lineHeight: var(--eds-typography-title3-lineHeight);
105
- --eds-button-size-sm-textOnly-root-cornerRadius: 6px;
106
- --eds-button-size-sm-textOnly-root-gap: 4px;
107
- --eds-button-size-sm-textOnly-root-height: 36px;
108
- --eds-button-size-sm-textOnly-root-paddingX: 12px;
109
- --eds-button-size-sm-textOnly-root-paddingY: 8px;
110
- --eds-button-size-xs-iconBoth-label-fontFamily: var(--eds-typography-body3-fontFamily);
111
- --eds-button-size-xs-iconBoth-label-fontSize: var(--eds-typography-body3-fontSize);
112
- --eds-button-size-xs-iconBoth-label-fontWeight: var(--eds-typography-body3-fontWeight);
113
- --eds-button-size-xs-iconBoth-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
114
- --eds-button-size-xs-iconBoth-label-lineHeight: var(--eds-typography-body3-lineHeight);
115
- --eds-button-size-xs-iconBoth-prefixIcon-size: 14px;
116
- --eds-button-size-xs-iconBoth-root-cornerRadius: 4px;
117
- --eds-button-size-xs-iconBoth-root-gap: 4px;
118
- --eds-button-size-xs-iconBoth-root-height: 30px;
119
- --eds-button-size-xs-iconBoth-root-paddingX: 12px;
120
- --eds-button-size-xs-iconBoth-root-paddingY: 0px;
121
- --eds-button-size-xs-iconBoth-suffixIcon-size: 14px;
122
- --eds-button-size-xs-iconFirst-label-fontFamily: var(--eds-typography-body3-fontFamily);
123
- --eds-button-size-xs-iconFirst-label-fontSize: var(--eds-typography-body3-fontSize);
124
- --eds-button-size-xs-iconFirst-label-fontWeight: var(--eds-typography-body3-fontWeight);
125
- --eds-button-size-xs-iconFirst-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
126
- --eds-button-size-xs-iconFirst-label-lineHeight: var(--eds-typography-body3-lineHeight);
127
- --eds-button-size-xs-iconFirst-prefixIcon-size: 14px;
128
- --eds-button-size-xs-iconFirst-root-cornerRadius: 4px;
129
- --eds-button-size-xs-iconFirst-root-gap: 4px;
130
- --eds-button-size-xs-iconFirst-root-height: 30px;
131
- --eds-button-size-xs-iconFirst-root-paddingX: 12px;
132
- --eds-button-size-xs-iconFirst-root-paddingY: 0px;
133
- --eds-button-size-xs-iconLast-label-fontFamily: var(--eds-typography-body3-fontFamily);
134
- --eds-button-size-xs-iconLast-label-fontSize: var(--eds-typography-body3-fontSize);
135
- --eds-button-size-xs-iconLast-label-fontWeight: var(--eds-typography-body3-fontWeight);
136
- --eds-button-size-xs-iconLast-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
137
- --eds-button-size-xs-iconLast-label-lineHeight: var(--eds-typography-body3-lineHeight);
138
- --eds-button-size-xs-iconLast-root-cornerRadius: 4px;
139
- --eds-button-size-xs-iconLast-root-gap: 4px;
140
- --eds-button-size-xs-iconLast-root-height: 30px;
141
- --eds-button-size-xs-iconLast-root-paddingX: 12px;
142
- --eds-button-size-xs-iconLast-root-paddingY: 0px;
143
- --eds-button-size-xs-iconLast-suffixIcon-size: 14px;
36
+ --eds-button-size-sm-root-cornerRadius: 6px;
37
+ --eds-button-size-sm-root-gap: 4px;
38
+ --eds-button-size-sm-root-height: 36px;
39
+ --eds-button-size-sm-root-paddingX: 12px;
40
+ --eds-button-size-sm-root-paddingY: 8px;
41
+ --eds-button-size-sm-suffixIcon-size: 14px;
144
42
  --eds-button-size-xs-iconOnly-icon-size: 14px;
145
- --eds-button-size-xs-iconOnly-root-cornerRadius: 4px;
146
- --eds-button-size-xs-iconOnly-root-height: 30px;
147
43
  --eds-button-size-xs-iconOnly-root-minWidth: 30px;
148
44
  --eds-button-size-xs-iconOnly-root-paddingX: 8px;
149
45
  --eds-button-size-xs-iconOnly-root-paddingY: 8px;
46
+ --eds-button-size-xs-label-fontFamily: var(--eds-typography-body3-fontFamily);
47
+ --eds-button-size-xs-label-fontSize: var(--eds-typography-body3-fontSize);
48
+ --eds-button-size-xs-label-fontWeight: var(--eds-typography-body3-fontWeight);
49
+ --eds-button-size-xs-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
50
+ --eds-button-size-xs-label-lineHeight: var(--eds-typography-body3-lineHeight);
51
+ --eds-button-size-xs-prefixIcon-size: 14px;
150
52
  --eds-button-size-xs-progressCircle-size: 14px;
151
53
  --eds-button-size-xs-progressCircle-thickness: 1.3px;
152
- --eds-button-size-xs-textOnly-label-fontFamily: var(--eds-typography-body3-fontFamily);
153
- --eds-button-size-xs-textOnly-label-fontSize: var(--eds-typography-body3-fontSize);
154
- --eds-button-size-xs-textOnly-label-fontWeight: var(--eds-typography-body3-fontWeight);
155
- --eds-button-size-xs-textOnly-label-letterSpacing: var(--eds-typography-body3-letterSpacing);
156
- --eds-button-size-xs-textOnly-label-lineHeight: var(--eds-typography-body3-lineHeight);
157
- --eds-button-size-xs-textOnly-root-cornerRadius: 4px;
158
- --eds-button-size-xs-textOnly-root-gap: 4px;
159
- --eds-button-size-xs-textOnly-root-height: 30px;
160
- --eds-button-size-xs-textOnly-root-paddingX: 12px;
161
- --eds-button-size-xs-textOnly-root-paddingY: 0px;
54
+ --eds-button-size-xs-root-cornerRadius: 4px;
55
+ --eds-button-size-xs-root-gap: 4px;
56
+ --eds-button-size-xs-root-height: 30px;
57
+ --eds-button-size-xs-root-paddingX: 12px;
58
+ --eds-button-size-xs-root-paddingY: 0px;
59
+ --eds-button-size-xs-suffixIcon-size: 14px;
162
60
  --eds-button-style-brand-outline-disabled-label-color: var(--eds-color-fg-disabled);
163
61
  --eds-button-style-brand-outline-disabled-root-backgroundColor: var(--eds-color-bg-transparent);
164
62
  --eds-button-style-brand-outline-disabled-root-borderColor: var(--eds-color-stroke-neutral-secondary);
@@ -375,93 +273,41 @@
375
273
  }
376
274
  }
377
275
 
378
- .eds-button__button[data-size="xs"][data-layout="textOnly"] {
379
- height: var(--eds-button-size-xs-textOnly-root-height);
380
- border-radius: var(--eds-button-size-xs-textOnly-root-cornerRadius);
381
- gap: var(--eds-button-size-xs-textOnly-root-gap);
382
- padding-inline: var(--eds-button-size-xs-textOnly-root-paddingX);
383
- padding-block: var(--eds-button-size-xs-textOnly-root-paddingY);
276
+ /*
277
+ * Size and layout. Height and corner radius apply to every layout; gap, padding and the label text style
278
+ * apply to the layouts that render a label; iconOnly swaps in its own min-width and padding.
279
+ * [data-layout] and :not([data-layout="iconOnly"]) keep the specificity of one attribute selector per layout.
280
+ */
281
+ .eds-button__button[data-size="xs"][data-layout] {
282
+ height: var(--eds-button-size-xs-root-height);
283
+ border-radius: var(--eds-button-size-xs-root-cornerRadius);
384
284
  }
385
285
 
386
- .eds-button__button[data-size="xs"][data-layout="textOnly"] .eds-button__label {
387
- font-family: var(--eds-button-size-xs-textOnly-label-fontFamily);
388
- font-weight: var(--eds-button-size-xs-textOnly-label-fontWeight);
389
- font-size: var(--eds-button-size-xs-textOnly-label-fontSize);
390
- line-height: var(--eds-button-size-xs-textOnly-label-lineHeight);
391
- letter-spacing: var(--eds-button-size-xs-textOnly-label-letterSpacing);
286
+ .eds-button__button[data-size="xs"]:not([data-layout="iconOnly"]) {
287
+ gap: var(--eds-button-size-xs-root-gap);
288
+ padding-inline: var(--eds-button-size-xs-root-paddingX);
289
+ padding-block: var(--eds-button-size-xs-root-paddingY);
392
290
  }
393
291
 
394
- .eds-button__button[data-size="xs"][data-layout="iconFirst"] {
395
- height: var(--eds-button-size-xs-iconFirst-root-height);
396
- border-radius: var(--eds-button-size-xs-iconFirst-root-cornerRadius);
397
- gap: var(--eds-button-size-xs-iconFirst-root-gap);
398
- padding-inline: var(--eds-button-size-xs-iconFirst-root-paddingX);
399
- padding-block: var(--eds-button-size-xs-iconFirst-root-paddingY);
292
+ .eds-button__button[data-size="xs"][data-layout] .eds-button__label {
293
+ font-family: var(--eds-button-size-xs-label-fontFamily);
294
+ font-weight: var(--eds-button-size-xs-label-fontWeight);
295
+ font-size: var(--eds-button-size-xs-label-fontSize);
296
+ line-height: var(--eds-button-size-xs-label-lineHeight);
297
+ letter-spacing: var(--eds-button-size-xs-label-letterSpacing);
400
298
  }
401
299
 
402
- .eds-button__button[data-size="xs"][data-layout="iconFirst"] .eds-button__label {
403
- font-family: var(--eds-button-size-xs-iconFirst-label-fontFamily);
404
- font-weight: var(--eds-button-size-xs-iconFirst-label-fontWeight);
405
- font-size: var(--eds-button-size-xs-iconFirst-label-fontSize);
406
- line-height: var(--eds-button-size-xs-iconFirst-label-lineHeight);
407
- letter-spacing: var(--eds-button-size-xs-iconFirst-label-letterSpacing);
300
+ .eds-button__button[data-size="xs"][data-layout] .eds-button__prefixIcon {
301
+ width: var(--eds-button-size-xs-prefixIcon-size);
302
+ height: var(--eds-button-size-xs-prefixIcon-size);
408
303
  }
409
304
 
410
- .eds-button__button[data-size="xs"][data-layout="iconFirst"] .eds-button__prefixIcon {
411
- width: var(--eds-button-size-xs-iconFirst-prefixIcon-size);
412
- height: var(--eds-button-size-xs-iconFirst-prefixIcon-size);
413
- }
414
-
415
- .eds-button__button[data-size="xs"][data-layout="iconLast"] {
416
- height: var(--eds-button-size-xs-iconLast-root-height);
417
- border-radius: var(--eds-button-size-xs-iconLast-root-cornerRadius);
418
- gap: var(--eds-button-size-xs-iconLast-root-gap);
419
- padding-inline: var(--eds-button-size-xs-iconLast-root-paddingX);
420
- padding-block: var(--eds-button-size-xs-iconLast-root-paddingY);
421
- }
422
-
423
- .eds-button__button[data-size="xs"][data-layout="iconLast"] .eds-button__label {
424
- font-family: var(--eds-button-size-xs-iconLast-label-fontFamily);
425
- font-weight: var(--eds-button-size-xs-iconLast-label-fontWeight);
426
- font-size: var(--eds-button-size-xs-iconLast-label-fontSize);
427
- line-height: var(--eds-button-size-xs-iconLast-label-lineHeight);
428
- letter-spacing: var(--eds-button-size-xs-iconLast-label-letterSpacing);
429
- }
430
-
431
- .eds-button__button[data-size="xs"][data-layout="iconLast"] .eds-button__suffixIcon {
432
- width: var(--eds-button-size-xs-iconLast-suffixIcon-size);
433
- height: var(--eds-button-size-xs-iconLast-suffixIcon-size);
434
- }
435
-
436
- .eds-button__button[data-size="xs"][data-layout="iconBoth"] {
437
- height: var(--eds-button-size-xs-iconBoth-root-height);
438
- border-radius: var(--eds-button-size-xs-iconBoth-root-cornerRadius);
439
- gap: var(--eds-button-size-xs-iconBoth-root-gap);
440
- padding-inline: var(--eds-button-size-xs-iconBoth-root-paddingX);
441
- padding-block: var(--eds-button-size-xs-iconBoth-root-paddingY);
442
- }
443
-
444
- .eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__label {
445
- font-family: var(--eds-button-size-xs-iconBoth-label-fontFamily);
446
- font-weight: var(--eds-button-size-xs-iconBoth-label-fontWeight);
447
- font-size: var(--eds-button-size-xs-iconBoth-label-fontSize);
448
- line-height: var(--eds-button-size-xs-iconBoth-label-lineHeight);
449
- letter-spacing: var(--eds-button-size-xs-iconBoth-label-letterSpacing);
450
- }
451
-
452
- .eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__prefixIcon {
453
- width: var(--eds-button-size-xs-iconBoth-prefixIcon-size);
454
- height: var(--eds-button-size-xs-iconBoth-prefixIcon-size);
455
- }
456
-
457
- .eds-button__button[data-size="xs"][data-layout="iconBoth"] .eds-button__suffixIcon {
458
- width: var(--eds-button-size-xs-iconBoth-suffixIcon-size);
459
- height: var(--eds-button-size-xs-iconBoth-suffixIcon-size);
305
+ .eds-button__button[data-size="xs"][data-layout] .eds-button__suffixIcon {
306
+ width: var(--eds-button-size-xs-suffixIcon-size);
307
+ height: var(--eds-button-size-xs-suffixIcon-size);
460
308
  }
461
309
 
462
310
  .eds-button__button[data-size="xs"][data-layout="iconOnly"] {
463
- height: var(--eds-button-size-xs-iconOnly-root-height);
464
- border-radius: var(--eds-button-size-xs-iconOnly-root-cornerRadius);
465
311
  min-width: var(--eds-button-size-xs-iconOnly-root-minWidth);
466
312
  padding-inline: var(--eds-button-size-xs-iconOnly-root-paddingX);
467
313
  padding-block: var(--eds-button-size-xs-iconOnly-root-paddingY);
@@ -472,93 +318,36 @@
472
318
  height: var(--eds-button-size-xs-iconOnly-icon-size);
473
319
  }
474
320
 
475
- .eds-button__button[data-size="sm"][data-layout="textOnly"] {
476
- height: var(--eds-button-size-sm-textOnly-root-height);
477
- border-radius: var(--eds-button-size-sm-textOnly-root-cornerRadius);
478
- gap: var(--eds-button-size-sm-textOnly-root-gap);
479
- padding-inline: var(--eds-button-size-sm-textOnly-root-paddingX);
480
- padding-block: var(--eds-button-size-sm-textOnly-root-paddingY);
481
- }
482
-
483
- .eds-button__button[data-size="sm"][data-layout="textOnly"] .eds-button__label {
484
- font-family: var(--eds-button-size-sm-textOnly-label-fontFamily);
485
- font-weight: var(--eds-button-size-sm-textOnly-label-fontWeight);
486
- font-size: var(--eds-button-size-sm-textOnly-label-fontSize);
487
- line-height: var(--eds-button-size-sm-textOnly-label-lineHeight);
488
- letter-spacing: var(--eds-button-size-sm-textOnly-label-letterSpacing);
489
- }
490
-
491
- .eds-button__button[data-size="sm"][data-layout="iconFirst"] {
492
- height: var(--eds-button-size-sm-iconFirst-root-height);
493
- border-radius: var(--eds-button-size-sm-iconFirst-root-cornerRadius);
494
- gap: var(--eds-button-size-sm-iconFirst-root-gap);
495
- padding-inline: var(--eds-button-size-sm-iconFirst-root-paddingX);
496
- padding-block: var(--eds-button-size-sm-iconFirst-root-paddingY);
497
- }
498
-
499
- .eds-button__button[data-size="sm"][data-layout="iconFirst"] .eds-button__label {
500
- font-family: var(--eds-button-size-sm-iconFirst-label-fontFamily);
501
- font-weight: var(--eds-button-size-sm-iconFirst-label-fontWeight);
502
- font-size: var(--eds-button-size-sm-iconFirst-label-fontSize);
503
- line-height: var(--eds-button-size-sm-iconFirst-label-lineHeight);
504
- letter-spacing: var(--eds-button-size-sm-iconFirst-label-letterSpacing);
505
- }
506
-
507
- .eds-button__button[data-size="sm"][data-layout="iconFirst"] .eds-button__prefixIcon {
508
- width: var(--eds-button-size-sm-iconFirst-prefixIcon-size);
509
- height: var(--eds-button-size-sm-iconFirst-prefixIcon-size);
510
- }
511
-
512
- .eds-button__button[data-size="sm"][data-layout="iconLast"] {
513
- height: var(--eds-button-size-sm-iconLast-root-height);
514
- border-radius: var(--eds-button-size-sm-iconLast-root-cornerRadius);
515
- gap: var(--eds-button-size-sm-iconLast-root-gap);
516
- padding-inline: var(--eds-button-size-sm-iconLast-root-paddingX);
517
- padding-block: var(--eds-button-size-sm-iconLast-root-paddingY);
321
+ .eds-button__button[data-size="sm"][data-layout] {
322
+ height: var(--eds-button-size-sm-root-height);
323
+ border-radius: var(--eds-button-size-sm-root-cornerRadius);
518
324
  }
519
325
 
520
- .eds-button__button[data-size="sm"][data-layout="iconLast"] .eds-button__label {
521
- font-family: var(--eds-button-size-sm-iconLast-label-fontFamily);
522
- font-weight: var(--eds-button-size-sm-iconLast-label-fontWeight);
523
- font-size: var(--eds-button-size-sm-iconLast-label-fontSize);
524
- line-height: var(--eds-button-size-sm-iconLast-label-lineHeight);
525
- letter-spacing: var(--eds-button-size-sm-iconLast-label-letterSpacing);
326
+ .eds-button__button[data-size="sm"]:not([data-layout="iconOnly"]) {
327
+ gap: var(--eds-button-size-sm-root-gap);
328
+ padding-inline: var(--eds-button-size-sm-root-paddingX);
329
+ padding-block: var(--eds-button-size-sm-root-paddingY);
526
330
  }
527
331
 
528
- .eds-button__button[data-size="sm"][data-layout="iconLast"] .eds-button__suffixIcon {
529
- width: var(--eds-button-size-sm-iconLast-suffixIcon-size);
530
- height: var(--eds-button-size-sm-iconLast-suffixIcon-size);
332
+ .eds-button__button[data-size="sm"][data-layout] .eds-button__label {
333
+ font-family: var(--eds-button-size-sm-label-fontFamily);
334
+ font-weight: var(--eds-button-size-sm-label-fontWeight);
335
+ font-size: var(--eds-button-size-sm-label-fontSize);
336
+ line-height: var(--eds-button-size-sm-label-lineHeight);
337
+ letter-spacing: var(--eds-button-size-sm-label-letterSpacing);
531
338
  }
532
339
 
533
- .eds-button__button[data-size="sm"][data-layout="iconBoth"] {
534
- height: var(--eds-button-size-sm-iconBoth-root-height);
535
- border-radius: var(--eds-button-size-sm-iconBoth-root-cornerRadius);
536
- gap: var(--eds-button-size-sm-iconBoth-root-gap);
537
- padding-inline: var(--eds-button-size-sm-iconBoth-root-paddingX);
538
- padding-block: var(--eds-button-size-sm-iconBoth-root-paddingY);
340
+ .eds-button__button[data-size="sm"][data-layout] .eds-button__prefixIcon {
341
+ width: var(--eds-button-size-sm-prefixIcon-size);
342
+ height: var(--eds-button-size-sm-prefixIcon-size);
539
343
  }
540
344
 
541
- .eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__label {
542
- font-family: var(--eds-button-size-sm-iconBoth-label-fontFamily);
543
- font-weight: var(--eds-button-size-sm-iconBoth-label-fontWeight);
544
- font-size: var(--eds-button-size-sm-iconBoth-label-fontSize);
545
- line-height: var(--eds-button-size-sm-iconBoth-label-lineHeight);
546
- letter-spacing: var(--eds-button-size-sm-iconBoth-label-letterSpacing);
547
- }
548
-
549
- .eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__prefixIcon {
550
- width: var(--eds-button-size-sm-iconBoth-prefixIcon-size);
551
- height: var(--eds-button-size-sm-iconBoth-prefixIcon-size);
552
- }
553
-
554
- .eds-button__button[data-size="sm"][data-layout="iconBoth"] .eds-button__suffixIcon {
555
- width: var(--eds-button-size-sm-iconBoth-suffixIcon-size);
556
- height: var(--eds-button-size-sm-iconBoth-suffixIcon-size);
345
+ .eds-button__button[data-size="sm"][data-layout] .eds-button__suffixIcon {
346
+ width: var(--eds-button-size-sm-suffixIcon-size);
347
+ height: var(--eds-button-size-sm-suffixIcon-size);
557
348
  }
558
349
 
559
350
  .eds-button__button[data-size="sm"][data-layout="iconOnly"] {
560
- height: var(--eds-button-size-sm-iconOnly-root-height);
561
- border-radius: var(--eds-button-size-sm-iconOnly-root-cornerRadius);
562
351
  min-width: var(--eds-button-size-sm-iconOnly-root-minWidth);
563
352
  padding-inline: var(--eds-button-size-sm-iconOnly-root-paddingX);
564
353
  padding-block: var(--eds-button-size-sm-iconOnly-root-paddingY);
@@ -569,93 +358,36 @@
569
358
  height: var(--eds-button-size-sm-iconOnly-icon-size);
570
359
  }
571
360
 
572
- .eds-button__button[data-size="md"][data-layout="textOnly"] {
573
- height: var(--eds-button-size-md-textOnly-root-height);
574
- border-radius: var(--eds-button-size-md-textOnly-root-cornerRadius);
575
- gap: var(--eds-button-size-md-textOnly-root-gap);
576
- padding-inline: var(--eds-button-size-md-textOnly-root-paddingX);
577
- padding-block: var(--eds-button-size-md-textOnly-root-paddingY);
578
- }
579
-
580
- .eds-button__button[data-size="md"][data-layout="textOnly"] .eds-button__label {
581
- font-family: var(--eds-button-size-md-textOnly-label-fontFamily);
582
- font-weight: var(--eds-button-size-md-textOnly-label-fontWeight);
583
- font-size: var(--eds-button-size-md-textOnly-label-fontSize);
584
- line-height: var(--eds-button-size-md-textOnly-label-lineHeight);
585
- letter-spacing: var(--eds-button-size-md-textOnly-label-letterSpacing);
586
- }
587
-
588
- .eds-button__button[data-size="md"][data-layout="iconFirst"] {
589
- height: var(--eds-button-size-md-iconFirst-root-height);
590
- border-radius: var(--eds-button-size-md-iconFirst-root-cornerRadius);
591
- gap: var(--eds-button-size-md-iconFirst-root-gap);
592
- padding-inline: var(--eds-button-size-md-iconFirst-root-paddingX);
593
- padding-block: var(--eds-button-size-md-iconFirst-root-paddingY);
594
- }
595
-
596
- .eds-button__button[data-size="md"][data-layout="iconFirst"] .eds-button__label {
597
- font-family: var(--eds-button-size-md-iconFirst-label-fontFamily);
598
- font-weight: var(--eds-button-size-md-iconFirst-label-fontWeight);
599
- font-size: var(--eds-button-size-md-iconFirst-label-fontSize);
600
- line-height: var(--eds-button-size-md-iconFirst-label-lineHeight);
601
- letter-spacing: var(--eds-button-size-md-iconFirst-label-letterSpacing);
602
- }
603
-
604
- .eds-button__button[data-size="md"][data-layout="iconFirst"] .eds-button__prefixIcon {
605
- width: var(--eds-button-size-md-iconFirst-prefixIcon-size);
606
- height: var(--eds-button-size-md-iconFirst-prefixIcon-size);
607
- }
608
-
609
- .eds-button__button[data-size="md"][data-layout="iconLast"] {
610
- height: var(--eds-button-size-md-iconLast-root-height);
611
- border-radius: var(--eds-button-size-md-iconLast-root-cornerRadius);
612
- gap: var(--eds-button-size-md-iconLast-root-gap);
613
- padding-inline: var(--eds-button-size-md-iconLast-root-paddingX);
614
- padding-block: var(--eds-button-size-md-iconLast-root-paddingY);
615
- }
616
-
617
- .eds-button__button[data-size="md"][data-layout="iconLast"] .eds-button__label {
618
- font-family: var(--eds-button-size-md-iconLast-label-fontFamily);
619
- font-weight: var(--eds-button-size-md-iconLast-label-fontWeight);
620
- font-size: var(--eds-button-size-md-iconLast-label-fontSize);
621
- line-height: var(--eds-button-size-md-iconLast-label-lineHeight);
622
- letter-spacing: var(--eds-button-size-md-iconLast-label-letterSpacing);
623
- }
624
-
625
- .eds-button__button[data-size="md"][data-layout="iconLast"] .eds-button__suffixIcon {
626
- width: var(--eds-button-size-md-iconLast-suffixIcon-size);
627
- height: var(--eds-button-size-md-iconLast-suffixIcon-size);
361
+ .eds-button__button[data-size="md"][data-layout] {
362
+ height: var(--eds-button-size-md-root-height);
363
+ border-radius: var(--eds-button-size-md-root-cornerRadius);
628
364
  }
629
365
 
630
- .eds-button__button[data-size="md"][data-layout="iconBoth"] {
631
- height: var(--eds-button-size-md-iconBoth-root-height);
632
- border-radius: var(--eds-button-size-md-iconBoth-root-cornerRadius);
633
- gap: var(--eds-button-size-md-iconBoth-root-gap);
634
- padding-inline: var(--eds-button-size-md-iconBoth-root-paddingX);
635
- padding-block: var(--eds-button-size-md-iconBoth-root-paddingY);
366
+ .eds-button__button[data-size="md"]:not([data-layout="iconOnly"]) {
367
+ gap: var(--eds-button-size-md-root-gap);
368
+ padding-inline: var(--eds-button-size-md-root-paddingX);
369
+ padding-block: var(--eds-button-size-md-root-paddingY);
636
370
  }
637
371
 
638
- .eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__label {
639
- font-family: var(--eds-button-size-md-iconBoth-label-fontFamily);
640
- font-weight: var(--eds-button-size-md-iconBoth-label-fontWeight);
641
- font-size: var(--eds-button-size-md-iconBoth-label-fontSize);
642
- line-height: var(--eds-button-size-md-iconBoth-label-lineHeight);
643
- letter-spacing: var(--eds-button-size-md-iconBoth-label-letterSpacing);
372
+ .eds-button__button[data-size="md"][data-layout] .eds-button__label {
373
+ font-family: var(--eds-button-size-md-label-fontFamily);
374
+ font-weight: var(--eds-button-size-md-label-fontWeight);
375
+ font-size: var(--eds-button-size-md-label-fontSize);
376
+ line-height: var(--eds-button-size-md-label-lineHeight);
377
+ letter-spacing: var(--eds-button-size-md-label-letterSpacing);
644
378
  }
645
379
 
646
- .eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__prefixIcon {
647
- width: var(--eds-button-size-md-iconBoth-prefixIcon-size);
648
- height: var(--eds-button-size-md-iconBoth-prefixIcon-size);
380
+ .eds-button__button[data-size="md"][data-layout] .eds-button__prefixIcon {
381
+ width: var(--eds-button-size-md-prefixIcon-size);
382
+ height: var(--eds-button-size-md-prefixIcon-size);
649
383
  }
650
384
 
651
- .eds-button__button[data-size="md"][data-layout="iconBoth"] .eds-button__suffixIcon {
652
- width: var(--eds-button-size-md-iconBoth-suffixIcon-size);
653
- height: var(--eds-button-size-md-iconBoth-suffixIcon-size);
385
+ .eds-button__button[data-size="md"][data-layout] .eds-button__suffixIcon {
386
+ width: var(--eds-button-size-md-suffixIcon-size);
387
+ height: var(--eds-button-size-md-suffixIcon-size);
654
388
  }
655
389
 
656
390
  .eds-button__button[data-size="md"][data-layout="iconOnly"] {
657
- height: var(--eds-button-size-md-iconOnly-root-height);
658
- border-radius: var(--eds-button-size-md-iconOnly-root-cornerRadius);
659
391
  min-width: var(--eds-button-size-md-iconOnly-root-minWidth);
660
392
  padding-inline: var(--eds-button-size-md-iconOnly-root-paddingX);
661
393
  padding-block: var(--eds-button-size-md-iconOnly-root-paddingY);
@@ -666,6 +398,10 @@
666
398
  height: var(--eds-button-size-md-iconOnly-icon-size);
667
399
  }
668
400
 
401
+ /*
402
+ * Role, variant and state. A loading button also carries data-disabled="true", so each loading rule
403
+ * follows the disabled rule of the same specificity and restores the enabled label color and border.
404
+ */
669
405
  .eds-button__button[data-role="brand"][data-variant="solid"] {
670
406
  background-color: var(--eds-button-style-brand-solid-enabled-root-backgroundColor);
671
407
  color: var(--eds-button-style-brand-solid-enabled-label-color);