@eui/styles 19.3.3-snapshot-1754592815527 → 19.3.3-snapshot-1754655052849

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 (8) hide show
  1. package/dist/base/02-tokens/maps-ds2025-theme-old.scss +455 -0
  2. package/dist/base/02-tokens/maps-ds2025-theme.scss +217 -176
  3. package/dist/base/03-vars/vars-ds2025-theme.scss +5 -2
  4. package/dist/eui-showcase-all.css +1 -1
  5. package/dist/eui-showcase-all.css.map +1 -1
  6. package/dist/eui-theme-ds2025.css +1 -1
  7. package/dist/eui-theme-ds2025.css.map +1 -1
  8. package/package.json +1 -1
package/dist/base/02-tokens/maps-ds2025-theme.scss CHANGED
@@ -30,135 +30,149 @@ $eui-accent-5: #fffcf7;
30
30
  $eui-accent-0: #fff;
31
31
 
32
32
 
33
+ $ecl-colors: (
34
+ 'primary-25': #f7f9ff,
35
+ 'primary-50': #f2f6ff,
36
+ 'primary-75': #eef2ff,
37
+ 'primary-100': #e6edff,
38
+ 'primary-200': #d9e3ff,
39
+ 'primary-300': #b0c6ff,
40
+ 'primary-400': #8cacff,
41
+ 'primary-500': #5987ff,
42
+ 'primary-600': #0046ff,
43
+ 'primary-700': #0035bf,
44
+ 'primary-800': #002a99,
45
+ 'primary-900': #001f73,
46
+ 'primary-950': #001959,
33
47
 
34
- // ECL v5 default branding
35
- $ecl-blue-navy-50: #f5f5fa;
36
- $ecl-blue-navy-100: #f0f0f8;
37
- $ecl-blue-navy-200: #d9d9ec;
38
- $ecl-blue-navy-300: #bfbfe0;
39
- $ecl-blue-navy-400: #a0a0d1;
40
- $ecl-blue-navy-500: #8c8cc7;
41
- $ecl-blue-navy-600: #4545a4;
42
- $ecl-blue-navy-700: #000083;
43
- $ecl-blue-navy-800: #000069;
44
- $ecl-blue-navy-900: #00002e;
45
- $ecl-blue-navy-950: #000022; // ADDED for eUI 120 mapping
48
+ 'secondary-25': #fffcf7,
49
+ 'secondary-50': #fff5e5,
50
+ 'secondary-75': #ffebcc,
51
+ 'secondary-100': #ffe1b4,
52
+ 'secondary-200': #ffd392,
53
+ 'secondary-300': #ffcb7d,
54
+ 'secondary-400': #ffbe5c,
55
+ 'secondary-500': #fea439,
56
+ 'secondary-600': #fc8713,
57
+ 'secondary-700': #ed6c09,
58
+ 'secondary-800': #c55109,
59
+ 'secondary-900': #9e4107,
60
+ 'secondary-950': #763105,
46
61
 
47
- $primary-blue-25: #f8f9ff;
48
- $primary-blue-50: #f0f4fe;
49
- $primary-blue-75: #e6ecfc;
50
- $primary-blue-100: #dce5fd;
51
- $primary-blue-200: #c2d2fb;
52
- $primary-blue-300: #98b6f8;
53
- $primary-blue-400: #5e88f1;
54
- $primary-blue-500: #3860ed;
55
- $primary-blue-600: #2d49e3;
56
- $primary-blue-700: #2537d0;
57
- $primary-blue-800: #242ea9;
58
- $primary-blue-900: #232c85;
59
- $primary-blue-950: #1a1d51;
62
+ 'neutral-25': #f9fafd,
63
+ 'neutral-50': #eceff9,
64
+ 'neutral-75': #d1d9f1,
65
+ 'neutral-100': #c1ccec,
66
+ 'neutral-200': #b0bde6,
67
+ 'neutral-300': #9eaee1,
68
+ 'neutral-400': #8ea1dc,
69
+ 'neutral-500': #7c92d6,
70
+ 'neutral-600': #6c85d1,
71
+ 'neutral-700': #51649d,
72
+ 'neutral-800': #41507d,
73
+ 'neutral-900': #313c5e,
74
+ 'neutral-950': #26324b,
60
75
 
61
- $primary-yellow-50: #fff9ed;
62
- $primary-yellow-100: #fff1d4;
63
- $primary-yellow-200: #ffdfa9;
64
- $primary-yellow-300: #ffbe5c;
65
- $primary-yellow-400: #fea439;
66
- $primary-yellow-500: #fc8713;
67
- $primary-yellow-600: #ed6c09;
68
- $primary-yellow-700: #c55109;
69
- $primary-yellow-800: #9c4010;
70
- $primary-yellow-900: #7e3610;
71
- $primary-yellow-950: #441a06;
76
+ 'grey-25': #fafafb,
77
+ 'grey-50': #f6f6f8,
78
+ 'grey-75': #ededf0,
79
+ 'grey-100': #e1e1e7,
80
+ 'grey-200': #d4d4dc,
81
+ 'grey-300': #b9b9c5,
82
+ 'grey-400': #a0a0b1,
83
+ 'grey-500': #84849b,
84
+ 'grey-600': #696984,
85
+ 'grey-700': #505070,
86
+ 'grey-800': #353559,
87
+ 'grey-900': #1c1c45,
88
+ 'grey-950': #00002e,
72
89
 
73
- // $primary-neutral-25: #fafafb;
74
- // $primary-neutral-50: #f6f7f9;
75
- // $primary-neutral-100: #e9ebee;
76
- // $primary-neutral-200: #d9dce2;
77
- // $primary-neutral-300: #bec3ce;
78
- // $primary-neutral-400: #a4abb9;
79
- // $primary-neutral-500: #8a92a3;
80
- // $primary-neutral-600: #646e83;
81
- // $primary-neutral-700: #576278;
82
- // $primary-neutral-800: #3f4a62;
83
- // $primary-neutral-900: #26324b;
84
- // $primary-neutral-950: #1e283c;
90
+ // Status
91
+ 'info-25': #f5f7fb,
92
+ 'info-50': #ebeff7,
93
+ 'info-75': #dee4f2,
94
+ 'info-100': #bfcce6,
95
+ 'info-200': #a3b6da,
96
+ 'info-300': #859dce,
97
+ 'info-400': #6685c2,
98
+ 'info-500': #4a6eb7,
99
+ 'info-600': #3b62b0,
100
+ 'info-700': #2e58ab,
101
+ 'info-800': #1c49a4,
102
+ 'info-900': #0d3d9e,
103
+ 'info-950': #039,
85
104
 
86
- $alert-error-50: #fef2f3;
87
- $alert-error-100: #ffc9cc;
88
- $alert-error-200: #ffc9cc;
89
- $alert-error-300: #fda4a9;
90
- $alert-error-400: #fa6f76;
91
- $alert-error-500: #f1424b;
92
- $alert-error-600: #df232d;
93
- $alert-error-700: #ae1820;
94
- $alert-error-800: #9b1920;
95
- $alert-error-900: #801c21;
96
- $alert-error-950: #46090c;
105
+ 'success-25': #f9fefc,
106
+ 'success-50': #edfbf6,
107
+ 'success-75': #e3f9f0,
108
+ 'success-100': #daf6eb,
109
+ 'success-200': #b2edd6,
110
+ 'success-300': #8fe5c4,
111
+ 'success-400': #5ddaa9,
112
+ 'success-500': #05c67b,
113
+ 'success-600': #05b26f,
114
+ 'success-700': #049e62,
115
+ 'success-800': #037e4e,
116
+ 'success-900': #025f3b,
117
+ 'success-950': #02472c,
97
118
 
98
- $alert-warning-50: #fefbe8;
99
- $alert-warning-100: #fff7c2;
100
- $alert-warning-200: #ffed89;
101
- $alert-warning-300: #ffdb45;
102
- $alert-warning-400: #fcc614;
103
- $alert-warning-500: #e3ac00;
104
- $alert-warning-600: #bf8c00;
105
- $alert-warning-700: #956e00;
106
- $alert-warning-800: #795d00;
107
- $alert-warning-900: #5e4a00;
108
- $alert-warning-950: #352b00;
119
+ 'error-25': #fefafa,
120
+ 'error-50': #fdefef,
121
+ 'error-75': #fce9ea,
122
+ 'error-100': #f5bbbe,
123
+ 'error-200': #f09a9e,
124
+ 'error-300': #ea6c72,
125
+ 'error-400': #e54f57,
126
+ 'error-500': #df232d,
127
+ 'error-600': #cb2029,
128
+ 'error-700': #9e1920,
129
+ 'error-800': #7b1319,
130
+ 'error-900': #5a0e12,
131
+ 'error-950': #1f0506,
109
132
 
110
- $alert-success-50: #f1fcf3;
111
- $alert-success-100: #defae5;
112
- $alert-success-200: #bef4cc;
113
- $alert-success-300: #8ce9a6;
114
- $alert-success-400: #52d676;
115
- $alert-success-500: #2bbc53;
116
- $alert-success-600: #1e9b41;
117
- $alert-success-700: #1d833b;
118
- $alert-success-800: #1a612f;
119
- $alert-success-900: #184f29;
120
- $alert-success-950: #072c13;
121
-
122
- $alert-info-50: #f0f9ff;
123
- $alert-info-100: #dff1ff;
124
- $alert-info-200: #b9e4fe;
125
- $alert-info-300: #7bd0fe;
126
- $alert-info-400: #34b8fc;
127
- $alert-info-500: #0aa0ed;
128
- $alert-info-600: #007acb;
129
- $alert-info-700: #006ab5;
130
- $alert-info-800: #005288;
131
- $alert-info-900: #004370;
132
- $alert-info-950: #002a4a;
133
+ 'warning-25': #fffaf5,
134
+ 'warning-50': #fff3e8,
135
+ 'warning-75': #ffeddc,
136
+ 'warning-100': #ffdbba,
137
+ 'warning-200': #ffc998,
138
+ 'warning-300': #ffb16a,
139
+ 'warning-400': #ffa14d,
140
+ 'warning-500': #ff8a20,
141
+ 'warning-600': #e87e1d,
142
+ 'warning-700': #ba6517,
143
+ 'warning-800': #8b4c11,
144
+ 'warning-900': #68390d,
145
+ 'warning-950': #512c0a
146
+ );
133
147
 
134
148
 
135
149
  $color-map: (
136
150
  branding: (
137
- 120: $ecl-blue-navy-950,
138
- 110: $ecl-blue-navy-950,
139
- 100: $ecl-blue-navy-900,
140
- 80: $ecl-blue-navy-800,
141
- 60: $ecl-blue-navy-700,
142
- 40: $ecl-blue-navy-600,
143
- 20: $ecl-blue-navy-500,
144
- 10: $ecl-blue-navy-400,
145
- 5: $ecl-blue-navy-300,
146
- 2: $ecl-blue-navy-200,
147
- 0: $ecl-blue-navy-100,
151
+ 120: map-get($ecl-colors, 'grey-950'),
152
+ 110: map-get($ecl-colors, 'grey-950'),
153
+ 100: map-get($ecl-colors, 'grey-950'),
154
+ 80: map-get($ecl-colors, 'grey-900'),
155
+ 60: map-get($ecl-colors, 'grey-800'),
156
+ 40: map-get($ecl-colors, 'grey-700'),
157
+ 20: map-get($ecl-colors, 'grey-600'),
158
+ 10: map-get($ecl-colors, 'grey-500'),
159
+ 5: map-get($ecl-colors, 'grey-400'),
160
+ 2: map-get($ecl-colors, 'grey-300'),
161
+ 0: map-get($ecl-colors, 'grey-200'),
148
162
  ),
149
163
  primary: (
150
- 160: $primary-blue-950,
151
- 140: $primary-blue-900,
152
- 120: $primary-blue-700,
153
- 110: $primary-blue-600,
154
- 100: $primary-blue-500,
155
- 80: $primary-blue-400,
156
- 60: $primary-blue-300,
157
- 40: $primary-blue-200,
158
- 20: $primary-blue-100,
159
- 10: $primary-blue-75,
160
- 5: $primary-blue-50,
161
- 0: $primary-blue-25
164
+ 160: map-get($ecl-colors, 'primary-950'),
165
+ 140: map-get($ecl-colors, 'primary-900'),
166
+ 120: map-get($ecl-colors, 'primary-800'),
167
+ 110: map-get($ecl-colors, 'primary-700'),
168
+ 100: map-get($ecl-colors, 'primary-600'),
169
+ 80: map-get($ecl-colors, 'primary-500'),
170
+ 60: map-get($ecl-colors, 'primary-400'),
171
+ 40: map-get($ecl-colors, 'primary-300'),
172
+ 20: map-get($ecl-colors, 'primary-200'),
173
+ 10: map-get($ecl-colors, 'primary-100'),
174
+ 5: map-get($ecl-colors, 'primary-75'),
175
+ 0: map-get($ecl-colors, 'primary-50'),
162
176
  ),
163
177
  neutral: (
164
178
  160: $eui-neutral-160,
@@ -190,77 +204,104 @@ $color-map: (
190
204
  0: $eui-accent-0
191
205
  ),
192
206
  info: (
193
- 160: $alert-info-950,
194
- 140: $alert-info-900,
195
- 120: $alert-info-800,
196
- 110: $alert-info-700,
197
- 100: $alert-info-600,
198
- 80: $alert-info-500,
199
- 60: $alert-info-500,
200
- 40: $alert-info-400,
201
- 20: $alert-info-300,
202
- 10: $alert-info-200,
203
- 5: $alert-info-100,
204
- 0: $alert-info-50
207
+ 160: map-get($ecl-colors, 'info-900'),
208
+ 140: map-get($ecl-colors, 'info-800'),
209
+ 120: map-get($ecl-colors, 'info-700'),
210
+ 110: map-get($ecl-colors, 'info-600'),
211
+ 100: map-get($ecl-colors, 'info-500'),
212
+ 80: map-get($ecl-colors, 'info-400'),
213
+ 60: map-get($ecl-colors, 'info-300'),
214
+ 40: map-get($ecl-colors, 'info-200'),
215
+ 20: map-get($ecl-colors, 'info-100'),
216
+ 10: map-get($ecl-colors, 'info-75'),
217
+ 5: map-get($ecl-colors, 'info-50'),
218
+ 0: map-get($ecl-colors, 'info-25'),
205
219
  ),
206
220
  success: (
207
- 160: $alert-success-950,
208
- 140: $alert-success-900,
209
- 120: $alert-success-800,
210
- 110: $alert-success-700,
211
- 100: $alert-success-600,
212
- 80: $alert-success-500,
213
- 60: $alert-success-500,
214
- 40: $alert-success-400,
215
- 20: $alert-success-300,
216
- 10: $alert-success-200,
217
- 5: $alert-success-100,
218
- 0: $alert-success-50
221
+ 160: map-get($ecl-colors, 'success-950'),
222
+ 140: map-get($ecl-colors, 'success-950'),
223
+ 120: map-get($ecl-colors, 'success-900'),
224
+ 110: map-get($ecl-colors, 'success-800'),
225
+ 100: map-get($ecl-colors, 'success-700'),
226
+ 80: map-get($ecl-colors, 'success-600'),
227
+ 60: map-get($ecl-colors, 'success-500'),
228
+ 40: map-get($ecl-colors, 'success-400'),
229
+ 20: map-get($ecl-colors, 'success-300'),
230
+ 10: map-get($ecl-colors, 'success-200'),
231
+ 5: map-get($ecl-colors, 'success-100'),
232
+ 0: map-get($ecl-colors, 'success-75'),
219
233
  ),
220
234
  warning: (
221
- 160: $alert-warning-950,
222
- 140: $alert-warning-900,
223
- 120: $alert-warning-800,
224
- 110: $alert-warning-700,
225
- 100: $alert-warning-600,
226
- 80: $alert-warning-500,
227
- 60: $alert-warning-500,
228
- 40: $alert-warning-400,
229
- 20: $alert-warning-300,
230
- 10: $alert-warning-200,
231
- 5: $alert-warning-100,
232
- 0: $alert-warning-50
235
+ 160: map-get($ecl-colors, 'warning-900'),
236
+ 140: map-get($ecl-colors, 'warning-800'),
237
+ 120: map-get($ecl-colors, 'warning-700'),
238
+ 110: map-get($ecl-colors, 'warning-600'),
239
+ 100: map-get($ecl-colors, 'warning-500'),
240
+ 80: map-get($ecl-colors, 'warning-400'),
241
+ 60: map-get($ecl-colors, 'warning-300'),
242
+ 40: map-get($ecl-colors, 'warning-200'),
243
+ 20: map-get($ecl-colors, 'warning-100'),
244
+ 10: map-get($ecl-colors, 'warning-75'),
245
+ 5: map-get($ecl-colors, 'warning-50'),
246
+ 0: map-get($ecl-colors, 'warning-25'),
233
247
  ),
234
248
  danger: (
235
- 160: $alert-error-950,
236
- 140: $alert-error-900,
237
- 120: $alert-error-800,
238
- 110: $alert-error-700,
239
- 100: $alert-error-600,
240
- 80: $alert-error-500,
241
- 60: $alert-error-500,
242
- 40: $alert-error-400,
243
- 20: $alert-error-300,
244
- 10: $alert-error-200,
245
- 5: $alert-error-100,
246
- 0: $alert-error-50
249
+ 160: map-get($ecl-colors, 'error-950'),
250
+ 140: map-get($ecl-colors, 'error-900'),
251
+ 120: map-get($ecl-colors, 'error-800'),
252
+ 110: map-get($ecl-colors, 'error-700'),
253
+ 100: map-get($ecl-colors, 'error-600'),
254
+ 80: map-get($ecl-colors, 'error-500'),
255
+ 60: map-get($ecl-colors, 'error-400'),
256
+ 40: map-get($ecl-colors, 'error-300'),
257
+ 20: map-get($ecl-colors, 'error-200'),
258
+ 10: map-get($ecl-colors, 'error-100'),
259
+ 5: map-get($ecl-colors, 'error-75'),
260
+ 0: map-get($ecl-colors, 'error-50'),
247
261
  ),
248
262
  cta: (
249
- 160: $primary-yellow-950,
250
- 140: $primary-yellow-900,
251
- 120: $primary-yellow-800,
252
- 110: $primary-yellow-700,
253
- 100: $primary-yellow-600,
254
- 80: $primary-yellow-500,
255
- 60: $primary-yellow-500,
256
- 40: $primary-yellow-400,
257
- 20: $primary-yellow-300,
258
- 10: $primary-yellow-200,
259
- 5: $primary-yellow-100,
260
- 0: $primary-yellow-50
263
+ 160: map-get($ecl-colors, 'secondary-800'),
264
+ 140: map-get($ecl-colors, 'secondary-700'),
265
+ 120: map-get($ecl-colors, 'secondary-600'),
266
+ 110: map-get($ecl-colors, 'secondary-500'),
267
+ 100: map-get($ecl-colors, 'secondary-400'),
268
+ 80: map-get($ecl-colors, 'secondary-300'),
269
+ 60: map-get($ecl-colors, 'secondary-200'),
270
+ 40: map-get($ecl-colors, 'secondary-100'),
271
+ 20: map-get($ecl-colors, 'secondary-75'),
272
+ 10: map-get($ecl-colors, 'secondary-50'),
273
+ 5: map-get($ecl-colors, 'secondary-25'),
274
+ 0: map-get($ecl-colors, 'secondary-25'),
261
275
  )
262
276
  );
263
277
 
278
+ // SHADOWS
279
+
280
+ $ecl-shadow-color: #18274b !default;
281
+ $ecl-shadow: (
282
+ 1: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 6px 12px 0 rgba($ecl-shadow-color, 0.08)),
283
+ 2: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 10px 22px 0 rgba($ecl-shadow-color, 0.1)),
284
+ 3: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 12px 32px 0 rgba($ecl-shadow-color, 0.12)),
285
+ 4: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 14px 42px 0 rgba($ecl-shadow-color, 0.12)),
286
+ 5: (0 0 0.5px 0.5px rgba($ecl-shadow-color, 0.08), 0 18px 52px 0 rgba($ecl-shadow-color, 0.14))
287
+ );
288
+
289
+ $box-shadow-map: (
290
+ 0: none,
291
+ 1: map-get($ecl-shadow, 1),
292
+ 2: map-get($ecl-shadow, 2),
293
+ 3: map-get($ecl-shadow, 5),
294
+ 4: map-get($ecl-shadow, 4),
295
+ 5: map-get($ecl-shadow, 5),
296
+ 6: map-get($ecl-shadow, 5),
297
+ 8: map-get($ecl-shadow, 5),
298
+ 9: map-get($ecl-shadow, 5),
299
+ 12: map-get($ecl-shadow, 5),
300
+ 16: map-get($ecl-shadow, 5),
301
+ 24: map-get($ecl-shadow, 5),
302
+ card: map-get($ecl-shadow, 1),
303
+ );
304
+
264
305
 
265
306
  // TYPOGRAPHY
266
307
 
package/dist/base/03-vars/vars-ds2025-theme.scss CHANGED
@@ -20,7 +20,6 @@
20
20
 
21
21
  html.eui-t-ds2025 {
22
22
  // COLOR
23
-
24
23
  @each $color, $shades in maps.$color-map {
25
24
  @each $shade, $value in $shades {
26
25
  --eui-bc-#{$color + '-' + $shade}: #{$value};
@@ -28,8 +27,12 @@ html.eui-t-ds2025 {
28
27
  }
29
28
  }
30
29
 
31
- // TYPOGRAPHY
30
+ // SHADOWS
31
+ @each $sh, $value in maps.$box-shadow-map {
32
+ --eui-sh-#{$sh}: #{$value};
33
+ }
32
34
 
35
+ // TYPOGRAPHY
33
36
  --eui-f-family: 'Inter', arial, sans-serif;
34
37
 
35
38
  @each $size, $def in maps.$font-weight-map {