@eui/styles 23.0.0-alpha.5 → 23.0.0-alpha.7

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 (37) hide show
  1. package/dist/assets/ecl/icons/svg/question.svg +1 -1
  2. package/dist/assets/ecl/networks/sprite.svg +1 -0
  3. package/dist/assets/ecl/networks/svg/wsocial.svg +6 -0
  4. package/dist/assets/ecl/networks-color/svg/wsocial.svg +10 -0
  5. package/dist/base/05-assets/icons/index.scss +0 -26
  6. package/dist/eui-base.css +1 -1
  7. package/dist/eui-base.css.map +1 -1
  8. package/dist/eui-ecl-ec.css +4 -4
  9. package/dist/eui-ecl-ec.css.map +1 -1
  10. package/dist/eui-ecl-eu.css +4 -4
  11. package/dist/eui-ecl-eu.css.map +1 -1
  12. package/dist/eui-showcase-all.css +1 -1
  13. package/dist/eui-showcase-all.css.map +1 -1
  14. package/dist/eui.css +1 -1
  15. package/dist/eui.css.map +1 -1
  16. package/package.json +1 -1
  17. package/dist/assets/ecl/logo/ec/negative/all.json +0 -1
  18. package/dist/assets/ecl/logo/ec/positive/all.json +0 -1
  19. package/dist/assets/ecl/logo/eu/condensed-version/negative/all.json +0 -1
  20. package/dist/assets/ecl/logo/eu/condensed-version/positive/all.json +0 -1
  21. package/dist/assets/ecl/logo/eu/standard-version/negative/all.json +0 -1
  22. package/dist/assets/ecl/logo/eu/standard-version/positive/all.json +0 -1
  23. package/dist/base/02-tokens/eds-colors-primitive.scss +0 -249
  24. package/dist/base/02-tokens/eds-colors-semantic-dark-theme.scss +0 -156
  25. package/dist/base/02-tokens/eds-colors-semantic.scss +0 -156
  26. package/dist/base/02-tokens/eds-maps.scss +0 -37
  27. package/dist/base/02-tokens/eds-typography-primitive.scss +0 -69
  28. package/dist/base/02-tokens/eds-typography-semantic.scss +0 -116
  29. package/dist/base/03-vars/eds-vars-colors-dark-theme.scss +0 -7
  30. package/dist/base/03-vars/eds-vars-colors.scss +0 -7
  31. package/dist/base/03-vars/eds-vars-typography.scss +0 -55
  32. package/dist/base/03-vars/eds-vars.scss +0 -72
  33. package/dist/base/99-utilities/eds-utilities.scss +0 -2
  34. package/dist/base/99-utilities/tokens/eds/_colors.scss +0 -23
  35. package/dist/base/99-utilities/tokens/eds/_typography.scss +0 -24
  36. package/dist/eui-eds.css +0 -1
  37. package/dist/eui-eds.css.map +0 -1
@@ -1,249 +0,0 @@
1
- @use 'sass:map';
2
- @use 'sass:color';
3
- @use '../01-base/' as base;
4
-
5
- // PRIMITIVE COLOR MAPS
6
-
7
- $color-map: (
8
- 'european-blue-25': #f7f9ff,
9
- 'european-blue-50': #f2f6ff,
10
- 'european-blue-75': #eef2ff,
11
- 'european-blue-100': #e6edff,
12
- 'european-blue-200': #d9e3ff,
13
- 'european-blue-300': #b0c6ff,
14
- 'european-blue-400': #8cacff,
15
- 'european-blue-500': #5987ff,
16
- 'european-blue-600': #0046ff,
17
- 'european-blue-700': #0035bf,
18
- 'european-blue-800': #002a99,
19
- 'european-blue-900': #001f73,
20
- 'european-blue-950': #001959,
21
-
22
- 'silver-fog-0': #fff,
23
- 'silver-fog-25': #fafafb,
24
- 'silver-fog-50': #f6f6f8,
25
- 'silver-fog-75': #ededf0,
26
- 'silver-fog-100': #e1e1e7,
27
- 'silver-fog-200': #d4d4dc,
28
- 'silver-fog-300': #b9b9c5,
29
- 'silver-fog-400': #a0a0b1,
30
- 'silver-fog-500': #84849b,
31
- 'silver-fog-600': #696984,
32
- 'silver-fog-700': #505070,
33
- 'silver-fog-800': #353559,
34
- 'silver-fog-900': #171740,
35
- 'silver-fog-950': #00002e,
36
- 'silver-fog-1000': #000,
37
-
38
- 'graphite-0': #fff,
39
- 'graphite-25': #F4F4F5,
40
- 'graphite-50': #E8E8EA,
41
- 'graphite-75': #D1D1D4,
42
- 'graphite-100': #B4B4B9,
43
- 'graphite-200': #8E8E94,
44
- 'graphite-300': #6A6A71,
45
- 'graphite-400': #6A6A71,
46
- 'graphite-500': #2C2C36,
47
- 'graphite-600': #24242C,
48
- 'graphite-700': #1E1E25,
49
- 'graphite-800': #18181C,
50
- 'graphite-900': #131318,
51
- 'graphite-950': #0D0D12,
52
- 'graphite-1000': #000,
53
-
54
- 'sunrise-orange-25': #fffcf7,
55
- 'sunrise-orange-50': #fff5e5,
56
- 'sunrise-orange-75': #ffebcc,
57
- 'sunrise-orange-100': #ffe1b4,
58
- 'sunrise-orange-200': #ffd392,
59
- 'sunrise-orange-300': #ffcb7d,
60
- 'sunrise-orange-400': #ffbe5c,
61
- 'sunrise-orange-500': #fea439,
62
- 'sunrise-orange-600': #fc8713,
63
- 'sunrise-orange-700': #ed6c09,
64
- 'sunrise-orange-800': #c55109,
65
- 'sunrise-orange-900': #9e4107,
66
- 'sunrise-orange-950': #763105,
67
-
68
- 'red-25': #fefafa,
69
- 'red-50': #fdefef,
70
- 'red-75': #fce9ea,
71
- 'red-100': #f5bbbe,
72
- 'red-200': #f09a9e,
73
- 'red-300': #ea6c72,
74
- 'red-400': #e54f57,
75
- 'red-500': #df232d,
76
- 'red-600': #cb2029,
77
- 'red-700': #9e1920,
78
- 'red-800': #7b1319,
79
- 'red-900': #5a0e12,
80
- 'red-950': #1f0506,
81
-
82
- 'orange-25': #fffaf5,
83
- 'orange-50': #fff3e8,
84
- 'orange-75': #ffeddc,
85
- 'orange-100': #ffdbba,
86
- 'orange-200': #ffc998,
87
- 'orange-300': #ffb16a,
88
- 'orange-400': #ffa14d,
89
- 'orange-500': #ff8a20,
90
- 'orange-600': #e87e1d,
91
- 'orange-700': #ba6517,
92
- 'orange-800': #8b4c11,
93
- 'orange-900': #68390d,
94
- 'orange-950': #512c0a,
95
-
96
- 'blue-25': #f9fbfd,
97
- 'blue-50': #f5f7fb,
98
- 'blue-75': #ebeff7,
99
- 'blue-100': #dee4f2,
100
- 'blue-200': #bfcce6,
101
- 'blue-300': #a3b6da,
102
- 'blue-400': #859dce,
103
- 'blue-500': #6685c2,
104
- 'blue-600': #3b62b0,
105
- 'blue-700': #1c49a4,
106
- 'blue-800': #039,
107
- 'blue-900': #00297a,
108
- 'blue-950': #001f5c,
109
-
110
- 'green-25': #f9fefc,
111
- 'green-50': #edfbf6,
112
- 'green-75': #e3f9f0,
113
- 'green-100': #daf6eb,
114
- 'green-200': #b2edd6,
115
- 'green-300': #8fe5c4,
116
- 'green-400': #5ddaa9,
117
- 'green-500': #05c67b,
118
- 'green-600': #05b26f,
119
- 'green-700': #049e62,
120
- 'green-800': #037e4e,
121
- 'green-900': #025f3b,
122
- 'green-950': #02472c,
123
- );
124
-
125
-
126
- $color-map-alt: (
127
- european-blue: (
128
- 950: map.get($color-map, 'european-blue-950'),
129
- 900: map.get($color-map, 'european-blue-900'),
130
- 800: map.get($color-map, 'european-blue-800'),
131
- 700: map.get($color-map, 'european-blue-700'),
132
- 600: map.get($color-map, 'european-blue-600'),
133
- 500: map.get($color-map, 'european-blue-500'),
134
- 400: map.get($color-map, 'european-blue-400'),
135
- 300: map.get($color-map, 'european-blue-300'),
136
- 200: map.get($color-map, 'european-blue-200'),
137
- 100: map.get($color-map, 'european-blue-100'),
138
- 75: map.get($color-map, 'european-blue-75'),
139
- 50: map.get($color-map, 'european-blue-50'),
140
- 25: map.get($color-map, 'european-blue-25'),
141
- ),
142
- sunrise-orange: (
143
- 950: map.get($color-map, 'sunrise-orange-950'),
144
- 900: map.get($color-map, 'sunrise-orange-900'),
145
- 800: map.get($color-map, 'sunrise-orange-800'),
146
- 700: map.get($color-map, 'sunrise-orange-700'),
147
- 600: map.get($color-map, 'sunrise-orange-600'),
148
- 500: map.get($color-map, 'sunrise-orange-500'),
149
- 400: map.get($color-map, 'sunrise-orange-400'),
150
- 300: map.get($color-map, 'sunrise-orange-300'),
151
- 200: map.get($color-map, 'sunrise-orange-200'),
152
- 100: map.get($color-map, 'sunrise-orange-100'),
153
- 75: map.get($color-map, 'sunrise-orange-75'),
154
- 50: map.get($color-map, 'sunrise-orange-50'),
155
- 25: map.get($color-map, 'sunrise-orange-25'),
156
- ),
157
- silver-fog: (
158
- 1000: map.get($color-map, 'silver-fog-1000'),
159
- 950: map.get($color-map, 'silver-fog-950'),
160
- 900: map.get($color-map, 'silver-fog-900'),
161
- 800: map.get($color-map, 'silver-fog-800'),
162
- 700: map.get($color-map, 'silver-fog-700'),
163
- 600: map.get($color-map, 'silver-fog-600'),
164
- 500: map.get($color-map, 'silver-fog-500'),
165
- 400: map.get($color-map, 'silver-fog-400'),
166
- 300: map.get($color-map, 'silver-fog-300'),
167
- 200: map.get($color-map, 'silver-fog-200'),
168
- 100: map.get($color-map, 'silver-fog-100'),
169
- 75: map.get($color-map, 'silver-fog-75'),
170
- 50: map.get($color-map, 'silver-fog-50'),
171
- 25: map.get($color-map, 'silver-fog-25'),
172
- 0: map.get($color-map, 'silver-fog-0'),
173
- ),
174
- graphite: (
175
- 950: map.get($color-map, 'graphite-950'),
176
- 900: map.get($color-map, 'graphite-900'),
177
- 800: map.get($color-map, 'graphite-800'),
178
- 700: map.get($color-map, 'graphite-700'),
179
- 600: map.get($color-map, 'graphite-600'),
180
- 500: map.get($color-map, 'graphite-500'),
181
- 400: map.get($color-map, 'graphite-400'),
182
- 300: map.get($color-map, 'graphite-300'),
183
- 200: map.get($color-map, 'graphite-200'),
184
- 100: map.get($color-map, 'graphite-100'),
185
- 75: map.get($color-map, 'graphite-75'),
186
- 50: map.get($color-map, 'graphite-50'),
187
- 25: map.get($color-map, 'graphite-25'),
188
- ),
189
- blue: (
190
- 950: map.get($color-map, 'blue-950'),
191
- 900: map.get($color-map, 'blue-900'),
192
- 800: map.get($color-map, 'blue-800'),
193
- 700: map.get($color-map, 'blue-700'),
194
- 600: map.get($color-map, 'blue-600'),
195
- 500: map.get($color-map, 'blue-500'),
196
- 400: map.get($color-map, 'blue-400'),
197
- 300: map.get($color-map, 'blue-300'),
198
- 200: map.get($color-map, 'blue-200'),
199
- 100: map.get($color-map, 'blue-100'),
200
- 75: map.get($color-map, 'blue-75'),
201
- 50: map.get($color-map, 'blue-50'),
202
- 25: map.get($color-map, 'blue-25'),
203
- ),
204
- green: (
205
- 950: map.get($color-map, 'green-950'),
206
- 900: map.get($color-map, 'green-900'),
207
- 800: map.get($color-map, 'green-800'),
208
- 700: map.get($color-map, 'green-700'),
209
- 600: map.get($color-map, 'green-600'),
210
- 500: map.get($color-map, 'green-500'),
211
- 400: map.get($color-map, 'green-400'),
212
- 300: map.get($color-map, 'green-300'),
213
- 200: map.get($color-map, 'green-200'),
214
- 100: map.get($color-map, 'green-100'),
215
- 75: map.get($color-map, 'green-75'),
216
- 50: map.get($color-map, 'green-50'),
217
- 25: map.get($color-map, 'green-25'),
218
- ),
219
- orange: (
220
- 950: map.get($color-map, 'orange-950'),
221
- 900: map.get($color-map, 'orange-900'),
222
- 800: map.get($color-map, 'orange-800'),
223
- 700: map.get($color-map, 'orange-700'),
224
- 600: map.get($color-map, 'orange-600'),
225
- 500: map.get($color-map, 'orange-500'),
226
- 400: map.get($color-map, 'orange-400'),
227
- 300: map.get($color-map, 'orange-300'),
228
- 200: map.get($color-map, 'orange-200'),
229
- 100: map.get($color-map, 'orange-100'),
230
- 75: map.get($color-map, 'orange-75'),
231
- 50: map.get($color-map, 'orange-50'),
232
- 25: map.get($color-map, 'orange-25'),
233
- ),
234
- red: (
235
- 950: map.get($color-map, 'red-950'),
236
- 900: map.get($color-map, 'red-900'),
237
- 800: map.get($color-map, 'red-800'),
238
- 700: map.get($color-map, 'red-700'),
239
- 600: map.get($color-map, 'red-600'),
240
- 500: map.get($color-map, 'red-500'),
241
- 400: map.get($color-map, 'red-400'),
242
- 300: map.get($color-map, 'red-300'),
243
- 200: map.get($color-map, 'red-200'),
244
- 100: map.get($color-map, 'red-100'),
245
- 75: map.get($color-map, 'red-75'),
246
- 50: map.get($color-map, 'red-50'),
247
- 25: map.get($color-map, 'red-25'),
248
- ),
249
- );
@@ -1,156 +0,0 @@
1
- @use 'sass:map';
2
- @use 'sass:color';
3
- @use '../01-base/' as base;
4
- @use './eds-colors-primitive' as primitive;
5
-
6
- $color-semantic-map: (
7
- surface-accent: map.get(primitive.$color-map, 'graphite-900'),
8
- surface-selected: map.get(primitive.$color-map, 'graphite-800'),
9
- surface-skeleton: map.get(primitive.$color-map, 'graphite-800'),
10
- surface-brand: map.get(primitive.$color-map, 'graphite-900'),
11
- // surface-invisible: map.get(primitive.$color-map, 'alpha-graphite-0-0'), // TODO add alpha palettes
12
-
13
- surface-elevation-sunken: map.get(primitive.$color-map, 'graphite-1000'),
14
- surface-elevation-inset: map.get(primitive.$color-map, 'graphite-950'),
15
- surface-elevation: map.get(primitive.$color-map, 'graphite-900'),
16
- surface-elevation-raised: map.get(primitive.$color-map, 'graphite-800'),
17
- surface-elevation-elevated: map.get(primitive.$color-map, 'graphite-700'),
18
- surface-elevation-overlay: map.get(primitive.$color-map, 'graphite-600'),
19
-
20
- surface-disabled: map.get(primitive.$color-map, 'graphite-700'),
21
- on-surface-disabled: map.get(primitive.$color-map, 'graphite-400'),
22
- surface-disabled-subtle: map.get(primitive.$color-map, 'graphite-800'),
23
- on-surface-disabled-subtle: map.get(primitive.$color-map, 'graphite-400'),
24
-
25
- surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
26
- on-surface-primary: map.get(primitive.$color-map, 'graphite-0'),
27
- surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
28
- on-surface-primary--hover: map.get(primitive.$color-map, 'graphite-0'),
29
- surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
30
- on-surface-primary--pressed: map.get(primitive.$color-map, 'graphite-0'),
31
- surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-50'),
32
- on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
33
-
34
- surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
35
- on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
36
- surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
37
- on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
38
- surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
39
- on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
40
- surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
41
- on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'),
42
-
43
- surface-inverted: map.get(primitive.$color-map, 'graphite-50'),
44
- on-surface-inverted: map.get(primitive.$color-map, 'graphite-950'),
45
- surface-inverted-subtle: map.get(primitive.$color-map, 'graphite-50'),
46
- on-surface-inverted-subtle: map.get(primitive.$color-map, 'graphite-800'),
47
- surface-inverted-disabled: map.get(primitive.$color-map, 'graphite-50'),
48
- on-surface-inverted-disabled: map.get(primitive.$color-map, 'graphite-100'),
49
-
50
- surface-neutral: map.get(primitive.$color-map, 'graphite-300'),
51
- on-surface-neutral: map.get(primitive.$color-map, 'graphite-0'),
52
- surface-neutral--hover: map.get(primitive.$color-map, 'graphite-400'),
53
- on-surface-neutral--hover: map.get(primitive.$color-map, 'graphite-0'),
54
- surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-500'),
55
- on-surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-0'),
56
- surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-800'),
57
- on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'),
58
-
59
- surface-critical: map.get(primitive.$color-map, 'red-600'),
60
- on-surface-critical: map.get(primitive.$color-map, 'graphite-0'),
61
- surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
62
- on-surface-critical--hover: map.get(primitive.$color-map, 'graphite-0'),
63
- surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
64
- on-surface-critical--pressed: map.get(primitive.$color-map, 'graphite-0'),
65
- surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
66
- on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'),
67
- surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
68
- on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'),
69
-
70
- surface-info: map.get(primitive.$color-map, 'blue-600'),
71
- on-surface-info: map.get(primitive.$color-map, 'graphite-0'),
72
- surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
73
- on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),
74
- surface-info-subtler: map.get(primitive.$color-map, 'blue-50'),
75
- on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
76
-
77
- surface-success: map.get(primitive.$color-map, 'green-800'),
78
- on-surface-success: map.get(primitive.$color-map, 'graphite-0'),
79
- surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
80
- on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),
81
- surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
82
- on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
83
-
84
- surface-warning: map.get(primitive.$color-map, 'orange-500'),
85
- on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
86
- surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
87
- on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
88
- surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
89
- on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
90
-
91
- foreground: map.get(primitive.$color-map, 'graphite-25'),
92
- foreground-subtle: map.get(primitive.$color-map, 'graphite-75'),
93
- foreground-subtler: map.get(primitive.$color-map, 'graphite-100'),
94
- foreground-placeholder: map.get(primitive.$color-map, 'graphite-200'),
95
- foreground-disabled: map.get(primitive.$color-map, 'graphite-400'),
96
- foreground-primary: map.get(primitive.$color-map, 'european-blue-500'),
97
- foreground-success: map.get(primitive.$color-map, 'green-500'),
98
- foreground-info: map.get(primitive.$color-map, 'blue-500'),
99
- foreground-warning: map.get(primitive.$color-map, 'orange-500'),
100
- foreground-critical: map.get(primitive.$color-map, 'red-400'),
101
- foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-600'),
102
- foreground-inverted: map.get(primitive.$color-map, 'graphite-950'),
103
-
104
- border-brand: map.get(primitive.$color-map, 'silver-fog-50'),
105
- border-divider: map.get(primitive.$color-map, 'graphite-500'),
106
- border-disabled: map.get(primitive.$color-map, 'graphite-700'),
107
-
108
- border-primary: map.get(primitive.$color-map, 'european-blue-600'),
109
- border-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
110
- border-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
111
- border-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
112
- border-primary-subtler: map.get(primitive.$color-map, 'european-blue-900'),
113
-
114
- border-info: map.get(primitive.$color-map, 'blue-700'),
115
- border-info-subtle: map.get(primitive.$color-map, 'blue-900'),
116
-
117
- border-success: map.get(primitive.$color-map, 'green-700'),
118
- border-success-subtle: map.get(primitive.$color-map, 'green-900'),
119
-
120
- border-warning: map.get(primitive.$color-map, 'orange-600'),
121
- border-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
122
-
123
- border-critical: map.get(primitive.$color-map, 'red-600'),
124
- border-critical-subtle: map.get(primitive.$color-map, 'red-900'),
125
-
126
- border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
127
- border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-700'),
128
-
129
- border-inverted: map.get(primitive.$color-map, 'graphite-900'),
130
- border-inverted-disabled: map.get(primitive.$color-map, 'graphite-800'),
131
-
132
- border-neutral: map.get(primitive.$color-map, 'graphite-500'),
133
- border-neutral--hover: map.get(primitive.$color-map, 'graphite-600'),
134
-
135
- link: map.get(primitive.$color-map, 'european-blue-400'),
136
- link--focused: map.get(primitive.$color-map, 'european-blue-400'),
137
- link--hover: map.get(primitive.$color-map, 'european-blue-500'),
138
- link--pressed: map.get(primitive.$color-map, 'european-blue-200'),
139
- link--visited: map.get(primitive.$color-map, 'european-blue-300'),
140
-
141
- link-inverted: map.get(primitive.$color-map, 'european-blue-600'),
142
- link-inverted--focused: map.get(primitive.$color-map, 'european-blue-600'),
143
- link-inverted--hover: map.get(primitive.$color-map, 'european-blue-700'),
144
- link-inverted--pressed: map.get(primitive.$color-map, 'european-blue-800'),
145
- link-inverted--visited: map.get(primitive.$color-map, 'european-blue-700'),
146
-
147
- link-contrast: map.get(primitive.$color-map, 'graphite-0'),
148
- link-contrast--focused: map.get(primitive.$color-map, 'graphite-0'),
149
- link-contrast--hover: map.get(primitive.$color-map, 'graphite-50'),
150
- link-contrast--pressed: map.get(primitive.$color-map, 'graphite-100'),
151
- link-contrast--visited: map.get(primitive.$color-map, 'graphite-25'),
152
-
153
- focus: map.get(primitive.$color-map, 'european-blue-600'),
154
- focus-inverted: map.get(primitive.$color-map, 'european-blue-800'),
155
- focus-critical: map.get(primitive.$color-map, 'red-600'),
156
- );
@@ -1,156 +0,0 @@
1
- @use 'sass:map';
2
- @use 'sass:color';
3
- @use '../01-base/' as base;
4
- @use './eds-colors-primitive' as primitive;
5
-
6
- $color-semantic-map: (
7
- surface-accent: map.get(primitive.$color-map, 'european-blue-50'),
8
- surface-selected: map.get(primitive.$color-map, 'european-blue-100'),
9
- surface-skeleton: map.get(primitive.$color-map, 'silver-fog-100'),
10
- surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
11
- // surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'), // TODO add alpha palettes
12
-
13
- surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-50'),
14
- surface-elevation-inset: map.get(primitive.$color-map, 'silver-fog-25'),
15
- surface-elevation: map.get(primitive.$color-map, 'silver-fog-0'),
16
- surface-elevation-raised: map.get(primitive.$color-map, 'silver-fog-0'),
17
- surface-elevation-elevated: map.get(primitive.$color-map, 'silver-fog-0'),
18
- surface-elevation-overlay: map.get(primitive.$color-map, 'silver-fog-0'),
19
-
20
- surface-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
21
- on-surface-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
22
- surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-50'),
23
- on-surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-400'),
24
-
25
- surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
26
- on-surface-primary: map.get(primitive.$color-map, 'silver-fog-0'),
27
- surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
28
- on-surface-primary--hover: map.get(primitive.$color-map, 'silver-fog-0'),
29
- surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
30
- on-surface-primary--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
31
- surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-200'),
32
- on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
33
-
34
- surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
35
- on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
36
- surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
37
- on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
38
- surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
39
- on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
40
- surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
41
- on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'),
42
-
43
- surface-inverted: map.get(primitive.$color-map, 'silver-fog-950'),
44
- on-surface-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
45
- surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-950'),
46
- on-surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
47
- surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-950'),
48
- on-surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-600'),
49
-
50
- surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
51
- on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
52
- surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-700'),
53
- on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),
54
- surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
55
- on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
56
- surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),
57
- on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),
58
-
59
- surface-critical: map.get(primitive.$color-map, 'red-600'),
60
- on-surface-critical: map.get(primitive.$color-map, 'silver-fog-0'),
61
- surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
62
- on-surface-critical--hover: map.get(primitive.$color-map, 'silver-fog-0'),
63
- surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
64
- on-surface-critical--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
65
- surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
66
- on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'),
67
- surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
68
- on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'),
69
-
70
- surface-info: map.get(primitive.$color-map, 'blue-600'),
71
- on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),
72
- surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
73
- on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),
74
- surface-info-subtler: map.get(primitive.$color-map, 'blue-50'),
75
- on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
76
-
77
- surface-success: map.get(primitive.$color-map, 'green-800'),
78
- on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),
79
- surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
80
- on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),
81
- surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
82
- on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
83
-
84
- surface-warning: map.get(primitive.$color-map, 'orange-500'),
85
- on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
86
- surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
87
- on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
88
- surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
89
- on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
90
-
91
- foreground: map.get(primitive.$color-map, 'silver-fog-950'),
92
- foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
93
- foreground-subtler: map.get(primitive.$color-map, 'silver-fog-700'),
94
- foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-500'),
95
- foreground-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
96
- foreground-primary: map.get(primitive.$color-map, 'european-blue-600'),
97
- foreground-success: map.get(primitive.$color-map, 'green-800'),
98
- foreground-info: map.get(primitive.$color-map, 'blue-900'),
99
- foreground-warning: map.get(primitive.$color-map, 'orange-800'),
100
- foreground-critical: map.get(primitive.$color-map, 'red-600'),
101
- foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-900'),
102
- foreground-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
103
-
104
- border-brand: map.get(primitive.$color-map, 'silver-fog-950'),
105
- border-divider: map.get(primitive.$color-map, 'silver-fog-200'),
106
- border-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
107
-
108
- border-primary: map.get(primitive.$color-map, 'european-blue-600'),
109
- border-primary--hover: map.get(primitive.$color-map, 'european-blue-500'),
110
- border-primary--pressed: map.get(primitive.$color-map, 'european-blue-400'),
111
- border-primary-subtle: map.get(primitive.$color-map, 'european-blue-400'),
112
- border-primary-subtler: map.get(primitive.$color-map, 'european-blue-100'),
113
-
114
- border-info: map.get(primitive.$color-map, 'blue-700'),
115
- border-info-subtle: map.get(primitive.$color-map, 'blue-300'),
116
-
117
- border-success: map.get(primitive.$color-map, 'green-700'),
118
- border-success-subtle: map.get(primitive.$color-map, 'green-300'),
119
-
120
- border-warning: map.get(primitive.$color-map, 'orange-600'),
121
- border-warning-subtle: map.get(primitive.$color-map, 'orange-300'),
122
-
123
- border-critical: map.get(primitive.$color-map, 'red-600'),
124
- border-critical-subtle: map.get(primitive.$color-map, 'red-300'),
125
-
126
- border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
127
- border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-300'),
128
-
129
- border-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
130
- border-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
131
-
132
- border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
133
- border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
134
-
135
- link: map.get(primitive.$color-map, 'european-blue-600'),
136
- link--focused: map.get(primitive.$color-map, 'european-blue-600'),
137
- link--hover: map.get(primitive.$color-map, 'european-blue-700'),
138
- link--pressed: map.get(primitive.$color-map, 'european-blue-800'),
139
- link--visited: map.get(primitive.$color-map, 'european-blue-700'),
140
-
141
- link-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
142
- link-inverted--focused: map.get(primitive.$color-map, 'silver-fog-0'),
143
- link-inverted--hover: map.get(primitive.$color-map, 'silver-fog-50'),
144
- link-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-100'),
145
- link-inverted--visited: map.get(primitive.$color-map, 'silver-fog-25'),
146
-
147
- link-contrast: map.get(primitive.$color-map, 'silver-fog-950'),
148
- link-contrast--focused: map.get(primitive.$color-map, 'silver-fog-950'),
149
- link-contrast--hover: map.get(primitive.$color-map, 'silver-fog-950'),
150
- link-contrast--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
151
- link-contrast--visited: map.get(primitive.$color-map, 'silver-fog-900'),
152
-
153
- focus: map.get(primitive.$color-map, 'european-blue-600'),
154
- focus-inverted: map.get(primitive.$color-map, 'european-blue-300'),
155
- focus-critical: map.get(primitive.$color-map, 'red-400'),
156
- );
@@ -1,37 +0,0 @@
1
- // BORDER RADIUS
2
-
3
- $border-radius-map: (
4
- none: 0,
5
- xs: 2px,
6
- s: 4px,
7
- m: 8px,
8
- l: 12px,
9
- full: 999px
10
- );
11
-
12
-
13
- // BORDER WIDTH
14
-
15
- $border-width-map: (
16
- none: 0,
17
- xs: 1px,
18
- s: 2px,
19
- m: 4px
20
- );
21
-
22
- // OPACITY
23
-
24
- $opacity-map: (
25
- none: 0,
26
- 10: 0.1,
27
- 20: 0.2,
28
- 30: 0.3,
29
- 40: 0.4,
30
- 50: 0.5,
31
- 60: 0.6,
32
- 70: 0.7,
33
- 80: 0.8,
34
- 90: 0.9,
35
- 100: 1
36
- );
37
-
@@ -1,69 +0,0 @@
1
- @use 'sass:map';
2
- @use './dimensions-primitive' as dimensions-primitive;
3
-
4
- $font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
5
-
6
- $font-size-map: (
7
- '9xl': 6rem, // 96px
8
- '8xl': 4rem, // 64px
9
- '7xl': 3.25rem, // 52px
10
- '6xl': 2.75rem, // 44px
11
- '5xl': 2.25rem, // 36px
12
- '4xl': 1.75rem, // 28px
13
- '3xl': 1.5rem, // 24px
14
- '2xl': 1.375rem, // 22px
15
- 'xl': 1.25rem, // 20px
16
- 'l': 1.125rem, // 18px
17
- 'm': 1rem, // 16px
18
- 's': 0.875rem, // 14px
19
- 'xs': 0.75rem, // 12px
20
- '2xs': 0.625rem // 10px
21
- );
22
-
23
- // font weight map
24
-
25
- $font-weight-map: (
26
- 'light': 300,
27
- 'regular': 400,
28
- 'medium': 500,
29
- 'semi-bold': 600,
30
- 'bold': 700
31
- );
32
-
33
- $font-line-height-map: (
34
- '10xl': map.get(dimensions-primitive.$dimension-map, 96),
35
- '9xl': map.get(dimensions-primitive.$dimension-map, 64),
36
- '8xl': map.get(dimensions-primitive.$dimension-map, 60),
37
- '7xl': map.get(dimensions-primitive.$dimension-map, 56),
38
- '6xl': map.get(dimensions-primitive.$dimension-map, 52),
39
- '5xl': map.get(dimensions-primitive.$dimension-map, 48),
40
- '4xl': map.get(dimensions-primitive.$dimension-map, 44),
41
- '3xl': map.get(dimensions-primitive.$dimension-map, 40),
42
- '2xl': map.get(dimensions-primitive.$dimension-map, 36),
43
- 'xl': map.get(dimensions-primitive.$dimension-map, 32),
44
- 'l': map.get(dimensions-primitive.$dimension-map, 28),
45
- 'm': map.get(dimensions-primitive.$dimension-map, 24),
46
- 's': map.get(dimensions-primitive.$dimension-map, 20),
47
- 'xs': map.get(dimensions-primitive.$dimension-map, 16),
48
- '2xs': map.get(dimensions-primitive.$dimension-map, 12)
49
- );
50
-
51
- // semantic font-size link to letter-spacing map
52
- $font-size-letter-spacing-map: (
53
- '9xl': -2%,
54
- '8xl': -2%,
55
- '7xl': -2%,
56
- '6xl': -1%,
57
- '5xl': -1%,
58
- '4xl': -1%,
59
- '3xl': -1%,
60
- '2xl': normal,
61
- 'xl': normal,
62
- 'l': normal,
63
- 'm': normal,
64
- 's': normal,
65
- 'xs': normal,
66
- '2xs': normal
67
- );
68
-
69
-