@eui/styles 17.0.0-next.2 → 17.0.0-next.21

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 (70) hide show
  1. package/dist/styles/eui-ecl-ec.css +7 -8
  2. package/dist/styles/eui-ecl-ec.css.map +1 -1
  3. package/dist/styles/eui-ecl-eu.css +7 -8
  4. package/dist/styles/eui-ecl-eu.css.map +1 -1
  5. package/dist/styles/eui-ecl.css +2 -0
  6. package/dist/styles/eui-ecl.css.map +1 -0
  7. package/dist/styles/eui-icons-flags.css +2 -0
  8. package/dist/styles/eui-icons-flags.css.map +1 -0
  9. package/dist/styles/eui-legacy-bootstrap-utilities.css.map +1 -1
  10. package/dist/styles/eui-legacy-icons-font.css +2 -0
  11. package/dist/styles/eui-legacy-icons-font.css.map +1 -0
  12. package/dist/styles/eui-print.css +1 -1
  13. package/dist/styles/eui-print.css.map +1 -1
  14. package/dist/styles/eui-showcase-all.css +2 -1
  15. package/dist/styles/eui-showcase-all.css.map +1 -1
  16. package/dist/styles/eui-theme-compact.css +2 -0
  17. package/dist/styles/eui-theme-compact.css.map +1 -0
  18. package/dist/styles/eui-theme-dark.css +2 -0
  19. package/dist/styles/eui-theme-dark.css.map +1 -0
  20. package/dist/styles/eui-utilities.css +1 -1
  21. package/dist/styles/eui-utilities.css.map +1 -1
  22. package/dist/styles/eui.css +1 -1
  23. package/dist/styles/eui.css.map +1 -1
  24. package/package.json +6 -1
  25. package/src/styles/01-ecl/_module-eui-ecl.scss +27 -0
  26. package/src/styles/02-base/mixins/_eui-border-state.scss +7 -7
  27. package/src/styles/02-base/mixins/_eui-clearable-input.scss +26 -13
  28. package/src/styles/02-base/mixins/_eui-disabled.scss +1 -1
  29. package/src/styles/02-base/mixins/_eui-input.scss +8 -9
  30. package/src/styles/02-base/mixins/_eui-scrollbars.scss +1 -2
  31. package/src/styles/02-base/mixins/_module.scss +0 -6
  32. package/src/styles/02b-base-vars/_layout.vars.scss +0 -23
  33. package/src/styles/02b-base-vars/_module.scss +1 -0
  34. package/src/styles/02b-base-vars/_other.vars.scss +3 -0
  35. package/src/styles/03-assets/_module-icons-flags.scss +1 -0
  36. package/src/styles/03-assets/_module-legacy-icons-font.scss +1 -0
  37. package/src/styles/05-material/_material.scss +54 -0
  38. package/src/styles/05-material/_module.scss +1 -25
  39. package/src/styles/05-material/overrides/_calendar.scss +2 -1
  40. package/src/styles/06-shared/_module.scss +5 -2
  41. package/src/styles/07-elements/_module.scss +2 -1
  42. package/src/styles/07-elements/directives/_eui-clearable-input.scss +26 -0
  43. package/src/styles/{06-shared → 07-elements/directives}/_eui-input-maxlength.scss +1 -3
  44. package/src/styles/07-elements/directives/_module.scss +2 -0
  45. package/src/styles/07-elements/eui-table-default/_eui-table-default.scss +1 -73
  46. package/src/styles/08-themes/_module-compact.scss +34 -8
  47. package/src/styles/08-themes/_module-dark.scss +53 -0
  48. package/src/styles/10-media/_module-print.scss +61 -291
  49. package/src/styles/99-utilities/_module.scss +1 -1
  50. package/src/styles/999-showcase/_component-demo-exports.scss +2 -0
  51. package/src/styles/999-showcase/_module.scss +2 -1
  52. package/src/styles/999-showcase/_prism-dracula.scss +584 -0
  53. package/src/styles/999-showcase/_prism-theme.scss +6 -4
  54. package/src/styles/999-showcase/_specific-typography.scss +14 -8
  55. package/src/styles/eui-ecl.scss +7 -0
  56. package/src/styles/eui-icons-flags.scss +7 -0
  57. package/src/styles/eui-legacy-icons-font.scss +7 -0
  58. package/src/styles/eui-print.scss +2 -0
  59. package/src/styles/eui-showcase-all-dev.scss +10 -11
  60. package/src/styles/eui-showcase-all.scss +8 -10
  61. package/src/styles/eui-theme-compact.scss +7 -0
  62. package/src/styles/eui-theme-dark.scss +7 -0
  63. package/src/styles/eui.scss +0 -6
  64. package/src/styles/02-base/mixins/_eui-accessibility.scss +0 -39
  65. package/src/styles/02-base/mixins/_ux-clearable-input.scss +0 -29
  66. package/src/styles/02-base/mixins/_ux-form-control-state.scss +0 -32
  67. package/src/styles/05-material/_module-cdk.scss +0 -110
  68. package/src/styles/05-material/compiled/_full.scss +0 -685
  69. package/src/styles/05-material/compiled/_sources.scss +0 -382
  70. package/src/styles/06-shared/_default.scss +0 -11
@@ -1,382 +0,0 @@
1
- // TODO REMAP WITH tokens colors
2
-
3
- // Material colors : generated with : http://mcg.mbitson.com
4
-
5
- // PRIMARY
6
- $palette-primary-50: #e0e9f2;
7
- $palette-primary-100: #b3c7df;
8
- $palette-primary-200: #80a2ca;
9
- $palette-primary-300: #4d7cb4;
10
- $palette-primary-400: #2660a4;
11
- $palette-primary-500: #004494; // ECL BASE rgb(0, 68, 148)
12
- $palette-primary-600: #003e8c;
13
- $palette-primary-700: #003581;
14
- $palette-primary-800: #002d77;
15
- $palette-primary-900: #001f65;
16
- $palette-primary-A100: #95abff;
17
- $palette-primary-A200: #6283ff;
18
- $palette-primary-A400: #2f5bff;
19
- $palette-primary-A700: #1547ff;
20
-
21
- // INFO
22
- $palette-info-50: #e0eef6;
23
- $palette-info-100: #b3d4e9;
24
- $palette-info-200: #80b7da;
25
- $palette-info-300: #4d9acb;
26
- $palette-info-400: #2685bf;
27
- $palette-info-500: #006fb4; // ECL BASE rgb(0, 111, 180)
28
- $palette-info-600: #0067ad;
29
- $palette-info-700: #005ca4;
30
- $palette-info-800: #00529c;
31
- $palette-info-900: #00408c;
32
- $palette-info-A100: #b8d3ff;
33
- $palette-info-A200: #85b3ff;
34
- $palette-info-A400: #5294ff;
35
- $palette-info-A700: #3984ff;
36
-
37
- // SUCCESS
38
- $palette-success-50: #e9efe7;
39
- $palette-success-100: #c8d7c4;
40
- $palette-success-200: #a3bd9c;
41
- $palette-success-300: #7ea274;
42
- $palette-success-400: #628e57;
43
- $palette-success-500: #467a39; // ECL BASE rgb(70, 122, 57)
44
- $palette-success-600: #3f7233;
45
- $palette-success-700: #37672c;
46
- $palette-success-800: #2f5d24;
47
- $palette-success-900: #204a17;
48
- $palette-success-A100: #9aff88;
49
- $palette-success-A200: #6fff55;
50
- $palette-success-A400: #44ff22;
51
- $palette-success-A700: #2eff08;
52
-
53
- // ACCENT
54
- $palette-accent-50: #fffae3;
55
- $palette-accent-100: #fff3b9;
56
- $palette-accent-200: #ffeb8b;
57
- $palette-accent-300: #ffe25d;
58
- $palette-accent-400: #ffdc3a;
59
- $palette-accent-500: #ffd617; // ECL BASE rgb(255, 214, 23)
60
- $palette-accent-600: #ffd114;
61
- $palette-accent-700: #fc1;
62
- $palette-accent-800: #ffc60d;
63
- $palette-accent-900: #ffbc07;
64
- $palette-accent-A100: #fff;
65
- $palette-accent-A200: #fffcf4;
66
- $palette-accent-A400: #ffecc1;
67
- $palette-accent-A700: #ffe5a7;
68
-
69
- // WARNING
70
- $palette-warning-50: #fdf2e5;
71
- $palette-warning-100: #fbdfbe;
72
- $palette-warning-200: #f9ca93;
73
- $palette-warning-300: #f6b568;
74
- $palette-warning-400: #f4a547;
75
- $palette-warning-500: #f29527; // ECL BASE rgb(242, 149, 39)
76
- $palette-warning-600: #f08d23;
77
- $palette-warning-700: #ee821d;
78
- $palette-warning-800: #ec7817;
79
- $palette-warning-900: #e8670e;
80
- $palette-warning-A100: #fff;
81
- $palette-warning-A200: #ffece0;
82
- $palette-warning-A400: #ffcbad;
83
- $palette-warning-A700: #ffbb94;
84
-
85
- // DANGER (MAT WARN)
86
- $palette-danger-50: #fbe4e6;
87
- $palette-danger-100: #f4bcc1;
88
- $palette-danger-200: #ed9098;
89
- $palette-danger-300: #e5646e;
90
- $palette-danger-400: #e0424f;
91
- $palette-danger-500: #da2131; // ECL BASE rgb(218, 33, 49)
92
- $palette-danger-600: #d61d2b;
93
- $palette-danger-700: #d01824;
94
- $palette-danger-800: #cb141e;
95
- $palette-danger-900: #c20b13;
96
- $palette-danger-A100: #fee;
97
- $palette-danger-A200: #ffbbbd;
98
- $palette-danger-A400: #ff888b;
99
- $palette-danger-A700: #ff6e72;
100
-
101
- // SECONDARY (GREY)
102
- // current previous
103
- $palette-grey-50: rgb(250, 250, 250); // #fafafa
104
- $palette-grey-100: rgb(246, 247, 250); // #f6f7fa #f5f5f5
105
- $palette-grey-200: rgb(238, 238, 238); // #eeeeee
106
- $palette-grey-300: rgb(210, 210, 210); // #d2d2d2 #e0e0e0
107
- $palette-grey-400: rgb(189, 189, 189); // #bdbdbd
108
- $palette-grey-500: rgb(158, 158, 158); // #9e9e9e
109
- $palette-grey-base: rgb(158, 158, 158);
110
- $palette-grey-600: rgb(117, 117, 117); // #757575
111
- $palette-grey-700: rgb(97, 97, 97); // #616161
112
- $palette-grey-800: rgb(66, 66, 66); // #424242
113
- $palette-grey-900: rgb(33, 33, 33); // #212121
114
- $palette-grey-1000: rgb(0, 0, 0);
115
- $palette-grey-A100: rgb(255, 255, 255);
116
- $palette-grey-A200: rgb(238, 238, 238);
117
- $palette-grey-A400: rgb(189, 189, 189);
118
- $palette-grey-A700: rgb(97, 97, 97);
119
-
120
-
121
- $private-eui-color: #999;
122
- $private-eui-color-white: #fff;
123
-
124
- $mat-eui-primary: (
125
- 50: $palette-primary-50,
126
- 100: $palette-primary-100,
127
- 200: $palette-primary-200,
128
- 300: $palette-primary-300,
129
- 400: $palette-primary-400,
130
- 500: $palette-primary-500,
131
- 600: $palette-primary-600,
132
- 700: $palette-primary-700,
133
- 800: $palette-primary-800,
134
- 900: $palette-primary-900,
135
- A100: $palette-primary-A100,
136
- A200: $palette-primary-A200,
137
- A400: $palette-primary-A400,
138
- A700: $palette-primary-A700,
139
- contrast: (
140
- 50: $private-eui-color,
141
- 100: $private-eui-color,
142
- 200: $private-eui-color,
143
- 300: $private-eui-color,
144
- 400: $private-eui-color,
145
- 500: $private-eui-color-white,
146
- 600: $private-eui-color-white,
147
- 700: $private-eui-color-white,
148
- 800: $private-eui-color-white,
149
- 900: $private-eui-color-white,
150
- A100: $private-eui-color,
151
- A200: $private-eui-color-white,
152
- A400: $private-eui-color-white,
153
- A700: $private-eui-color-white,
154
- )
155
- );
156
-
157
- $mat-eui-secondary: (
158
- 50: $palette-grey-50,
159
- 100: $palette-grey-100,
160
- 200: $palette-grey-200,
161
- 300: $palette-grey-300,
162
- 400: $palette-grey-400,
163
- 500: $palette-grey-500,
164
- 600: $palette-grey-600,
165
- 700: $palette-grey-700,
166
- 800: $palette-grey-800,
167
- 900: $palette-grey-900,
168
- A100: $palette-grey-A100,
169
- A200: $palette-grey-A200,
170
- A400: $palette-grey-A400,
171
- A700: $palette-grey-A700,
172
- contrast: (
173
- 50: $private-eui-color,
174
- 100: $private-eui-color,
175
- 200: $private-eui-color,
176
- 300: $private-eui-color,
177
- 400: $private-eui-color-white,
178
- 500: $private-eui-color-white,
179
- 600: $private-eui-color-white,
180
- 700: $private-eui-color-white,
181
- 800: $private-eui-color-white,
182
- 900: $private-eui-color-white,
183
- A100: $private-eui-color,
184
- A200: $private-eui-color,
185
- A400: $private-eui-color,
186
- A700: $private-eui-color-white,
187
- )
188
- );
189
-
190
- $mat-eui-info: (
191
- 50: $palette-info-50,
192
- 100: $palette-info-100,
193
- 200: $palette-info-200,
194
- 300: $palette-info-300,
195
- 400: $palette-info-400,
196
- 500: $palette-info-500,
197
- 600: $palette-info-600,
198
- 700: $palette-info-700,
199
- 800: $palette-info-800,
200
- 900: $palette-info-900,
201
- A100: $palette-info-A100,
202
- A200: $palette-info-A200,
203
- A400: $palette-info-A400,
204
- A700: $palette-info-A700,
205
- contrast: (
206
- 50: $private-eui-color,
207
- 100: $private-eui-color,
208
- 200: $private-eui-color,
209
- 300: $private-eui-color,
210
- 400: $private-eui-color,
211
- 500: $private-eui-color-white,
212
- 600: $private-eui-color-white,
213
- 700: $private-eui-color-white,
214
- 800: $private-eui-color-white,
215
- 900: $private-eui-color-white,
216
- A100: $private-eui-color,
217
- A200: $private-eui-color,
218
- A400: $private-eui-color,
219
- A700: $private-eui-color-white,
220
- )
221
- );
222
-
223
- $mat-eui-success: (
224
- 50: $palette-success-50,
225
- 100: $palette-success-100,
226
- 200: $palette-success-200,
227
- 300: $palette-success-300,
228
- 400: $palette-success-400,
229
- 500: $palette-success-500,
230
- 600: $palette-success-600,
231
- 700: $palette-success-700,
232
- 800: $palette-success-800,
233
- 900: $palette-success-900,
234
- A100: $palette-success-A100,
235
- A200: $palette-success-A200,
236
- A400: $palette-success-A400,
237
- A700: $palette-success-A700,
238
- contrast: (
239
- 50: $private-eui-color,
240
- 100: $private-eui-color,
241
- 200: $private-eui-color,
242
- 300: $private-eui-color,
243
- 400: $private-eui-color,
244
- 500: $private-eui-color-white,
245
- 600: $private-eui-color-white,
246
- 700: $private-eui-color-white,
247
- 800: $private-eui-color-white,
248
- 900: $private-eui-color-white,
249
- A100: $private-eui-color,
250
- A200: $private-eui-color,
251
- A400: $private-eui-color,
252
- A700: $private-eui-color,
253
- )
254
- );
255
-
256
- $mat-eui-warning: (
257
- 50: $palette-warning-50,
258
- 100: $palette-warning-100,
259
- 200: $palette-warning-200,
260
- 300: $palette-warning-300,
261
- 400: $palette-warning-400,
262
- 500: $palette-warning-500,
263
- 600: $palette-warning-600,
264
- 700: $palette-warning-700,
265
- 800: $palette-warning-800,
266
- 900: $palette-warning-900,
267
- A100: $palette-warning-A100,
268
- A200: $palette-warning-A200,
269
- A400: $palette-warning-A400,
270
- A700: $palette-warning-A700,
271
- contrast: (
272
- 50: $private-eui-color,
273
- 100: $private-eui-color,
274
- 200: $private-eui-color,
275
- 300: $private-eui-color,
276
- 400: $private-eui-color,
277
- 500: $private-eui-color-white,
278
- 600: $private-eui-color-white,
279
- 700: $private-eui-color-white,
280
- 800: $private-eui-color-white,
281
- 900: $private-eui-color-white,
282
- A100: $private-eui-color,
283
- A200: $private-eui-color,
284
- A400: $private-eui-color,
285
- A700: $private-eui-color,
286
- )
287
- );
288
-
289
- $mat-eui-danger: (
290
- 50: $palette-danger-50,
291
- 100: $palette-danger-100,
292
- 200: $palette-danger-200,
293
- 300: $palette-danger-300,
294
- 400: $palette-danger-400,
295
- 500: $palette-danger-500,
296
- 600: $palette-danger-600,
297
- 700: $palette-danger-700,
298
- 800: $palette-danger-800,
299
- 900: $palette-danger-900,
300
- A100: $palette-danger-A100,
301
- A200: $palette-danger-A200,
302
- A400: $palette-danger-A400,
303
- A700: $palette-danger-A700,
304
- contrast: (
305
- 50: $private-eui-color,
306
- 100: $private-eui-color,
307
- 200: $private-eui-color,
308
- 300: $private-eui-color,
309
- 400: $private-eui-color,
310
- 500: $private-eui-color-white,
311
- 600: $private-eui-color-white,
312
- 700: $private-eui-color-white,
313
- 800: $private-eui-color-white,
314
- 900: $private-eui-color-white,
315
- A100: $private-eui-color,
316
- A200: $private-eui-color,
317
- A400: $private-eui-color,
318
- A700: $private-eui-color,
319
- )
320
- );
321
-
322
- $mat-eui-accent: (
323
- 50: $palette-accent-50,
324
- 100: $palette-accent-100,
325
- 200: $palette-accent-200,
326
- 300: $palette-accent-300,
327
- 400: $palette-accent-400,
328
- 500: $palette-accent-500,
329
- 600: $palette-accent-600,
330
- 700: $palette-accent-700,
331
- 800: $palette-accent-800,
332
- 900: $palette-accent-900,
333
- A100: $palette-accent-A100,
334
- A200: $palette-accent-A200,
335
- A400: $palette-accent-A400,
336
- A700: $palette-accent-A700,
337
- contrast: (
338
- 50: $private-eui-color,
339
- 100: $private-eui-color,
340
- 200: $private-eui-color,
341
- 300: $private-eui-color,
342
- 400: $private-eui-color,
343
- 500: $private-eui-color,
344
- 600: $private-eui-color,
345
- 700: $private-eui-color,
346
- 800: $private-eui-color,
347
- 900: $private-eui-color,
348
- A100: $private-eui-color,
349
- A200: $private-eui-color,
350
- A400: $private-eui-color,
351
- A700: $private-eui-color,
352
- )
353
- );
354
-
355
-
356
-
357
-
358
- @use '@angular/material' as mat;
359
-
360
- @include mat.core();
361
-
362
- // define palettes
363
- $eui-t-color-primary: mat.define-palette($mat-eui-primary, 500, 300, 900); // $palette-name, $default: 500, $lighter: 100, $darker: 700
364
- $eui-t-color-accent: mat.define-palette($mat-eui-accent, A200, A100, A400);
365
- $eui-t-color-warn: mat.define-palette($mat-eui-danger, 500, A700, 900); // The warn palette is optional (default: $mat-red)
366
-
367
- // define theme
368
- $eui-theme: mat.define-light-theme((
369
- color: (
370
- primary: $eui-t-color-primary,
371
- accent: $eui-t-color-accent,
372
- warn: $eui-t-color-warn,
373
- )
374
- ));
375
-
376
- // Apply theme
377
- @include mat.core-theme($eui-theme);
378
- @include mat.datepicker-theme($eui-theme);
379
- @include mat.autocomplete-theme($eui-theme);
380
-
381
- // overrides over material for some edge cases
382
- // @import 'overrides';
@@ -1,11 +0,0 @@
1
- table {
2
- border: 0 transparent;
3
- }
4
-
5
- :focus {
6
- outline: 0;
7
- }
8
-
9
- :focus-visible {
10
- outline: 0;
11
- }