@epam/assets 5.3.0-rc.1 → 5.3.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 (21) hide show
  1. package/css/theme/theme_electric.css +43 -21
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +34 -28
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +72 -51
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +40 -31
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +71 -31
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/scss/electric/font-faces.scss +7 -0
  13. package/scss/loveship/font-faces.scss +2 -2
  14. package/theme/theme_electric.scss +52 -26
  15. package/theme/theme_loveship.scss +45 -33
  16. package/theme/theme_loveship_dark.scss +99 -74
  17. package/theme/theme_promo.scss +61 -38
  18. package/theme/theme_vanilla_thunder.scss +89 -36
  19. package/css/theme/theme_vanilla_thunder(old).css +0 -805
  20. package/css/theme/theme_vanilla_thunder(old).css.map +0 -1
  21. package/theme/theme_vanilla_thunder(old).scss +0 -1031
package/css/theme/theme_vanilla_thunder.css CHANGED
@@ -1,12 +1,5 @@
1
1
  .uui-theme-vanilla_thunder{
2
- --font-regular:"Sans Regular", "Arial", sans-serif;
3
- --font-semibold:"Sans Semibold", "Arial", sans-serif;
4
- --font-italic:"Sans Italic", "Arial", sans-serif;
5
- --font-primary:"Museo Sans", "Sans Semibold", "Arial", sans-serif;
6
- --font-promo:"Museo Slab", "Roboto Slab", "Arial", sans-serif;
7
- --font-mono:"Roboto Mono", "Arial", sans-serif;
8
- --font-redacted:"Redacted";
9
- --font-light:"Sans Light", "Arial", sans-serif;
2
+ --uui-font:var(--font-inter);
10
3
  --blue-0:#F0F7FC;
11
4
  --blue-50:#E1F4FA;
12
5
  --blue-100:#D4F0FE;
@@ -71,12 +64,12 @@
71
64
  --uui-secondary-60:var(--night600);
72
65
  --uui-secondary-70:var(--night700);
73
66
  --uui-secondary-contrast:var(--white);
74
- --uui-critical-5:var(--sun-50);
75
- --uui-critical-10:var(--sun-50);
76
- --uui-critical-20:var(--sun-100);
77
- --uui-critical-50:var(--sun-200);
78
- --uui-critical-60:var(--sun-250);
79
- --uui-critical-70:var(--sun-300);
67
+ --uui-critical-5:var(--fire-5);
68
+ --uui-critical-10:var(--fire-10);
69
+ --uui-critical-20:var(--fire-20);
70
+ --uui-critical-50:var(--fire-50);
71
+ --uui-critical-60:var(--fire-60);
72
+ --uui-critical-70:var(--fire-70);
80
73
  --uui-critical-contrast:var(--white);
81
74
  --uui-info-5:var(--blue-0);
82
75
  --uui-info-10:var(--blue-0);
@@ -124,9 +117,6 @@
124
117
  --uui-surface-main:var(--chromatic-0);
125
118
  --uui-surface-higher:var(--night100);
126
119
  --uui-surface-highest:var(--night200);
127
- --uui-surface-contrast:var(--night800);
128
- --uui-surface-contrast-low:var(--night800);
129
- --uui-surface-contrast-lower:var(--night900);
130
120
  --uui-divider:var(--chromatic-200);
131
121
  --uui-divider-light:var(--chromatic-150);
132
122
  --uui-text-brand:var(--chromatic-500);
@@ -134,7 +124,6 @@
134
124
  --uui-text-secondary:var(--chromatic-300);
135
125
  --uui-text-tertiary:var(--chromatic-300);
136
126
  --uui-text-disabled:var(--chromatic-200);
137
- --uui-text-contrast:var(--chromatic-0);
138
127
  --uui-text-info:var(--uui-info-50);
139
128
  --uui-text-warning:var(--uui-warning-50);
140
129
  --uui-text-critical:var(--uui-critical-50);
@@ -148,34 +137,25 @@
148
137
  --uui-icon-hover:var(--chromatic-400);
149
138
  --uui-icon-active:var(--chromatic-500);
150
139
  --uui-icon-disabled:var(--chromatic-200);
151
- --uui-scroll_bars-bg:var(--chromatic-200);
152
- --uui-scroll_bars-bg-active:var(--chromatic-300);
153
140
  --uui-control-bg:var(--chromatic-0);
154
141
  --uui-control-bg-hover:var(--chromatic-300);
155
142
  --uui-control-bg-disabled:var(--chromatic-100);
156
- --uui-control-bg-readonly:var(--chromatic-100);
157
143
  --uui-control-border:var(--chromatic-200);
158
144
  --uui-control-border-hover:var(--chromatic-300);
145
+ --uui-control-border-focus:var(--uui-primary-50);
159
146
  --uui-control-border-disabled:var(--chromatic-150);
160
- --uui-control-border-readonly:var(--chromatic-150);
161
- --uui-control-border-checked:var(--uui-primary-50);
162
- --uui-control-label:var(--uui-text-primary);
163
- --uui-control-label-disabled:var(--uui-text-disabled);
164
147
  --uui-control-placeholder:var(--night600);
165
- --uui-control-placeholder-disabled:var(--night500);
148
+ --uui-control-placeholder-disabled:var(--night600);
166
149
  --uui-control-text:var(--chromatic-500);
167
- --uui-control-text-disabled:var(--chromatic-200);
150
+ --uui-control-text-disabled:var(--chromatic-300);
168
151
  --uui-control-icon:var(--chromatic-200);
169
152
  --uui-control-icon-disabled:var(--chromatic-200);
170
- --uui-control-checkbox-icon:var(--chromatic-0);
171
153
  --uui-outline-focus:#008ACE80;
172
- --uui-search_result-bg-highlight:#FFEDC9;
173
154
  --uui-skeleton:var(--chromatic-200);
174
- --uui-skeleton-gradient:linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
175
- --uui-border-radius:3px;
176
155
  --uui-shadow-level-1:0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
177
156
  --uui-shadow-level-2:0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);
178
157
  --uui-shadow-level-3:0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);
158
+ --uui-border-radius:3px;
179
159
  }
180
160
  .uui-theme-vanilla_thunder .uui-color-accent,
181
161
  .uui-theme-vanilla_thunder .uui-color-grass,
@@ -227,4 +207,64 @@
227
207
  --uui-color-60:var(--uui-warning-60);
228
208
  --uui-color-70:var(--uui-warning-70);
229
209
  --uui-color-contrast:var(--uui-warning-contrast);
210
+ }
211
+ .uui-theme-vanilla_thunder .uui-color-secondary{
212
+ --uui-color-5:var(--uui-secondary-5);
213
+ --uui-color-10:var(--uui-secondary-10);
214
+ --uui-color-20:var(--uui-secondary-20);
215
+ --uui-color-50:var(--uui-secondary-50);
216
+ --uui-color-60:var(--uui-secondary-60);
217
+ --uui-color-70:var(--uui-secondary-70);
218
+ --uui-color-contrast:var(--uui-secondary-contrast);
219
+ }
220
+ .uui-theme-vanilla_thunder .uui-button{
221
+ --uui-border-radius:8px;
222
+ --uui-btn-font:var(--font-museo-sans);
223
+ --uui-btn-font-weight:700;
224
+ }
225
+ .uui-theme-vanilla_thunder .uui-button.uui-color-gray{
226
+ --uui-color-5:var(--white);
227
+ --uui-color-10:var(--blue-50);
228
+ --uui-color-20:var(--uui-primary-5);
229
+ --uui-color-50:var(--chromatic-100);
230
+ --uui-color-60:var(--blue-50);
231
+ --uui-color-70:var(--blue-100);
232
+ --uui-color-contrast:var(--uui-text-primary);
233
+ }
234
+ .uui-theme-vanilla_thunder .uui-button.uui-color-white{
235
+ --uui-color-5:var(--chromatic-0);
236
+ --uui-color-10:var(--blue-50);
237
+ --uui-color-20:var(--uui-primary-10);
238
+ --uui-color-50:var(--white);
239
+ --uui-color-60:var(--blue-50);
240
+ --uui-color-70:var(--blue-100);
241
+ --uui-color-contrast:var(--uui-text-primary);
242
+ }
243
+ .uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-input-box{
244
+ --uui-filters_toggler-border:var(--uui-surface-main);
245
+ --uui-filters_toggler-border-hover:var(--blue-0);
246
+ --uui-filters_toggler-border-radius:8px;
247
+ --uui-filters_toggler-bg:var(--uui-surface-main);
248
+ --uui-filters_toggler-bg-hover:var(--blue-0);
249
+ --uui-filters_toggler-text:var(--uui-text-secondary);
250
+ --uui-filters_toggler-label:var(--uui-text-brand);
251
+ --uui-filters_toggler-icon:var(--uui-icon);
252
+ --uui-filters_toggler-shadow:var(--uui-shadow-level-1);
253
+ --uui-filters_toggler-font:var(--uui-font);
254
+ --uui-filters_toggler-font-weight:400;
255
+ }
256
+ .uui-theme-vanilla_thunder .uui-main_menu-dropdown{
257
+ --uui-main_menu-dropdown-bg:var(--chromatic-0);
258
+ --uui-main_menu-dropdown-shadow:var(--uui-shadow-level-2);
259
+ --uui-main_menu-dropdown-border-radius:8px;
260
+ }
261
+ .uui-theme-vanilla_thunder .uui-scroll-bars{
262
+ --uui-scroll_bars-bg:var(--chromatic-200);
263
+ --uui-scroll_bars-bg-active:var(--chromatic-300);
264
+ }
265
+ .uui-theme-vanilla_thunder .uui-text-placeholder{
266
+ --uui-text_placeholder-gradient:linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
267
+ }
268
+ .uui-theme-vanilla_thunder .uui-button.uui-size-42 :global(.uui-caption), .uui-theme-vanilla_thunder .uui-button.uui-size-48 :global(.uui-caption){
269
+ font-family:var(--font-museo-sans);
230
270
  }
package/css/theme/theme_vanilla_thunder.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../theme/theme_vanilla_thunder.scss%23sass","../../../theme/theme_vanilla_thunder.scss"],"names":[],"mappings":"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","file":"theme_vanilla_thunder.css","sourcesContent":["/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --font-regular: 'Sans Regular', 'Arial', sans-serif;\n --font-semibold: 'Sans Semibold', 'Arial', sans-serif;\n --font-italic: 'Sans Italic', 'Arial', sans-serif;\n --font-primary: 'Museo Sans', 'Sans Semibold', 'Arial', sans-serif;\n --font-promo: 'Museo Slab', 'Roboto Slab', 'Arial', sans-serif;\n --font-mono: 'Roboto Mono', 'Arial', sans-serif;\n --font-redacted: 'Redacted';\n --font-light: 'Sans Light', 'Arial', sans-serif;\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--sun-50);\n --uui-critical-10: var(--sun-50);\n --uui-critical-20: var(--sun-100);\n --uui-critical-50: var(--sun-200);\n --uui-critical-60: var(--sun-250);\n --uui-critical-70: var(--sun-300);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n --uui-surface-contrast: var(--night800);\n --uui-surface-contrast-low: var(--night800);\n --uui-surface-contrast-lower: var(--night900);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-brand: var(--chromatic-500);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-contrast: var(--chromatic-0);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n --uui-control-bg-readonly: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-disabled: var(--chromatic-150);\n --uui-control-border-readonly: var(--chromatic-150);\n --uui-control-border-checked: var(--uui-primary-50);\n\n --uui-control-label: var(--uui-text-primary);\n --uui-control-label-disabled: var(--uui-text-disabled);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night500);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-200);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-control-checkbox-icon: var(--chromatic-0);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-search_result-bg-highlight: #FFEDC9;\n\n --uui-skeleton: var(--chromatic-200);\n --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);\n\n --uui-border-radius: 3px;\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n /* core variables end */\n\n /* ------------------------------------ */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n}\n","/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --font-regular: \"Sans Regular\", \"Arial\", sans-serif;\n --font-semibold: \"Sans Semibold\", \"Arial\", sans-serif;\n --font-italic: \"Sans Italic\", \"Arial\", sans-serif;\n --font-primary: \"Museo Sans\", \"Sans Semibold\", \"Arial\", sans-serif;\n --font-promo: \"Museo Slab\", \"Roboto Slab\", \"Arial\", sans-serif;\n --font-mono: \"Roboto Mono\", \"Arial\", sans-serif;\n --font-redacted: \"Redacted\";\n --font-light: \"Sans Light\", \"Arial\", sans-serif;\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n --chromatic-0: #FFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n /* start Loveship colors for controllers */\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n --white: #FFF;\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n /* end Loveship colors for controllers */\n /* core variables start */\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n --uui-critical-5: var(--sun-50);\n --uui-critical-10: var(--sun-50);\n --uui-critical-20: var(--sun-100);\n --uui-critical-50: var(--sun-200);\n --uui-critical-60: var(--sun-250);\n --uui-critical-70: var(--sun-300);\n --uui-critical-contrast: var(--white);\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n --uui-surface-contrast: var(--night800);\n --uui-surface-contrast-low: var(--night800);\n --uui-surface-contrast-lower: var(--night900);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-text-brand: var(--chromatic-500);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-contrast: var(--chromatic-0);\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n /* not accepted part */\n /* control specific */\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n --uui-control-bg-readonly: var(--chromatic-100);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-disabled: var(--chromatic-150);\n --uui-control-border-readonly: var(--chromatic-150);\n --uui-control-border-checked: var(--uui-primary-50);\n --uui-control-label: var(--uui-text-primary);\n --uui-control-label-disabled: var(--uui-text-disabled);\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night500);\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-200);\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n --uui-control-checkbox-icon: var(--chromatic-0);\n --uui-outline-focus: #008ACE80;\n --uui-search_result-bg-highlight: #FFEDC9;\n --uui-skeleton: var(--chromatic-200);\n --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);\n --uui-border-radius: 3px;\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n /* core variables end */\n /* ------------------------------------ */\n /* begin color classes */\n}\n.uui-theme-vanilla_thunder .uui-color-accent,\n.uui-theme-vanilla_thunder .uui-color-grass,\n.uui-theme-vanilla_thunder .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-primary,\n.uui-theme-vanilla_thunder .uui-color-blue,\n.uui-theme-vanilla_thunder .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-fire,\n.uui-theme-vanilla_thunder .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-warning,\n.uui-theme-vanilla_thunder .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n}"]}
1
+ {"version":3,"sources":["../../../theme/theme_vanilla_thunder.scss%23sass","../../../theme/theme_vanilla_thunder.scss"],"names":[],"mappings":"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","file":"theme_vanilla_thunder.css","sourcesContent":["/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-brand: var(--chromatic-500);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-skeleton: var(--chromatic-200);\n\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n --uui-border-radius: 3px;\n\n /* core variables end */\n\n /* ------------------------------------ */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n\n\n .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n\n &.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n }\n\n .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--uui-text-brand);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n }\n\n .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n }\n\n .uui-text-placeholder {\n --uui-text_placeholder-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);\n }\n\n .uui-button {\n &.uui-size-42, &.uui-size-48 {\n :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n }\n }\n }\n}","/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n --chromatic-0: #FFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n /* start Loveship colors for controllers */\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n --white: #FFF;\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n /* end Loveship colors for controllers */\n /* core variables start */\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-text-brand: var(--chromatic-500);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n /* not accepted part */\n /* control specific */\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n --uui-outline-focus: #008ACE80;\n --uui-skeleton: var(--chromatic-200);\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n --uui-border-radius: 3px;\n /* core variables end */\n /* ------------------------------------ */\n /* begin color classes */\n}\n.uui-theme-vanilla_thunder .uui-color-accent,\n.uui-theme-vanilla_thunder .uui-color-grass,\n.uui-theme-vanilla_thunder .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-primary,\n.uui-theme-vanilla_thunder .uui-color-blue,\n.uui-theme-vanilla_thunder .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-fire,\n.uui-theme-vanilla_thunder .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-warning,\n.uui-theme-vanilla_thunder .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--uui-text-brand);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n}\n.uui-theme-vanilla_thunder .uui-main_menu-dropdown {\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n}\n.uui-theme-vanilla_thunder .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n}\n.uui-theme-vanilla_thunder .uui-text-placeholder {\n --uui-text_placeholder-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-size-42 :global(.uui-caption), .uui-theme-vanilla_thunder .uui-button.uui-size-48 :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n}"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/assets",
3
- "version": "5.3.0-rc.1",
3
+ "version": "5.3.0",
4
4
  "description": "EPAM Assets Library",
5
5
  "author": "EPAM",
6
6
  "license": "MIT",
@@ -13,7 +13,7 @@
13
13
  "type": "git",
14
14
  "url": "https://github.com/epam/UUI"
15
15
  },
16
- "gitHead": "e287733fc14ada5df4f0a0a1d746db8a5e01bd70",
16
+ "gitHead": "43e10381210cb69a06c9210d83926bbae5094969",
17
17
  "publishConfig": {
18
18
  "directory": "build"
19
19
  }
package/scss/electric/font-faces.scss CHANGED
@@ -129,3 +129,10 @@
129
129
  font-weight: 900;
130
130
  font-style: italic;
131
131
  }
132
+
133
+ @font-face {
134
+ font-family: 'Roboto Mono';
135
+ font-style: normal;
136
+ font-weight: normal;
137
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
138
+ }
package/scss/loveship/font-faces.scss CHANGED
@@ -49,10 +49,10 @@
49
49
  }
50
50
 
51
51
  @font-face {
52
- font-family: 'Roboto Condensed';
52
+ font-family: 'Roboto Mono';
53
53
  font-style: normal;
54
54
  font-weight: normal;
55
- src: url('https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2') format('woff2');
55
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
56
56
  }
57
57
 
58
58
  @font-face {
package/theme/theme_electric.scss CHANGED
@@ -5,9 +5,10 @@
5
5
 
6
6
  @mixin theme-electric {
7
7
  --uui-font: 'Source Sans Pro', sans-serif;
8
- --font-primary: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
9
- --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
10
- --font-mono: monospace;
8
+ --uui-font-mono: 'Roboto Mono', monospace;
9
+
10
+ // theme specific fonts
11
+ --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
11
12
 
12
13
  --night50: #FAFAFC;
13
14
  --night100: #F5F6FA;
@@ -172,6 +173,7 @@
172
173
  --uui-warning-20: var(--sun-20);
173
174
  --uui-warning-50: var(--sun-50);
174
175
  --uui-warning-60: var(--sun-60);
176
+ --uui-warning-70: var(--sun-70);
175
177
  --uui-warning-contrast: var(--uui-neutral-80);
176
178
 
177
179
  --uui-error-5: var(--fire-5);
@@ -214,7 +216,6 @@
214
216
  --uui-text-secondary: var(--uui-neutral-70);
215
217
  --uui-text-tertiary: var(--uui-neutral-60);
216
218
  --uui-text-disabled: var(--uui-neutral-50);
217
- --uui-text-contrast: var(--uui-neutral-5);
218
219
 
219
220
  --uui-text-info: var(--uui-info-70);
220
221
  --uui-text-warning: var(--uui-warning-70);
@@ -236,46 +237,34 @@
236
237
  --uui-icon-active: var(--uui-neutral-100);
237
238
  --uui-icon-disabled: var(--uui-neutral-40);
238
239
 
239
- --uui-scroll_bars-bg: var(--uui-neutral-40);
240
- --uui-scroll_bars-bg-active: var(--uui-neutral-60);
241
-
242
240
  --uui-control-bg: var(--uui-surface-main);
243
241
  --uui-control-bg-hover: var(--uui-neutral-60);
244
242
  --uui-control-bg-disabled: var(--uui-neutral-5);
245
- --uui-control-bg-readonly: var(--uui-neutral-5);
246
243
 
247
244
  --uui-control-border: var(--uui-neutral-40);
248
245
  --uui-control-border-hover: var(--uui-neutral-60);
246
+ --uui-control-border-focus: var(--uui-primary-50);
249
247
  --uui-control-border-disabled: var(--uui-neutral-30);
250
- --uui-control-border-readonly: var(--uui-neutral-30);
251
- --uui-control-border-checked: var(--uui-primary-50);
252
248
 
253
- --uui-control-label: var(--uui-text-primary);
254
- --uui-control-label-disabled: var(--uui-text-disabled);
255
-
256
- --uui-control-placeholder: var(--uui-text-tertiary);
257
- --uui-control-placeholder-disabled: var(--uui-text-disabled); // one place of usage
249
+ --uui-control-placeholder: var(--uui-neutral-50);
250
+ --uui-control-placeholder-disabled: var(--uui-neutral-50);
258
251
 
259
252
  --uui-control-text: var(--uui-text-primary);
260
- --uui-control-text-disabled: var(--uui-text-disabled);
253
+ --uui-control-text-disabled: var(--uui-text-tertiary);
261
254
 
262
255
  --uui-control-icon: var(--uui-neutral-50);
263
256
  --uui-control-icon-disabled: var(--uui-neutral-50);
264
257
 
265
- --uui-control-checkbox-icon: var(--uui-neutral-0);
266
-
267
258
  --uui-outline-focus: #008ACE80;
268
259
 
269
- --uui-search_result-bg-highlight: var(--uui-warning-10);
270
-
271
260
  --uui-skeleton: var(--uui-neutral-40);
272
- --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
273
261
 
274
- --uui-border-radius: 3px;
275
262
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
276
263
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
277
264
  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
278
265
 
266
+ --uui-border-radius: 3px;
267
+
279
268
  /* core variables end */
280
269
 
281
270
  /* ------------------------------------ */
@@ -493,20 +482,20 @@
493
482
  --uui-color-contrast: var(--white);
494
483
  }
495
484
 
496
- /* TooltipContainer */
485
+ /* Tooltip */
497
486
 
498
487
  .uui-tooltip-container.uui-color-neutral {
499
488
  --uui-tooltip-bg: var(--white);
500
- --uui-color-contrast: var(--uui-neutral-80);
489
+ --uui-tooltip-text: var(--uui-text-primary);
501
490
  }
502
491
 
503
492
  .uui-tooltip-container.uui-color-critical {
504
493
  --uui-tooltip-bg: var(--uui-critical-60);
505
494
  }
506
495
 
507
- .uui-tooltip-container.uui-color-contrast {
496
+ .uui-tooltip-container.uui-color-inverted {
508
497
  --uui-tooltip-bg: var(--night800);
509
- --uui-color-contrast: var(--white);
498
+ --uui-tooltip-text: var(--uui-neutral-5);
510
499
  }
511
500
 
512
501
  /* CuntIndicator */
@@ -529,6 +518,43 @@
529
518
  }
530
519
  }
531
520
 
521
+ /* Typography */
522
+
523
+ .uui-typography {
524
+ h1, h3, h4, h5 {
525
+ font-weight: 600;
526
+ }
527
+
528
+ .promo-header:is(h1, h2, h3, h4, h5, h6) {
529
+ font-family: var(--font-museo-sans);
530
+ }
531
+
532
+ h1.promo-header {
533
+ font-size: 72px;
534
+ font-weight: 400;
535
+ }
536
+
537
+ h2.promo-header {
538
+ font-size: 44px;
539
+ font-weight: 600;
540
+ }
541
+
542
+ h3.promo-header {
543
+ font-size: 36px;
544
+ }
545
+
546
+ h4.promo-header {
547
+ font-size: 30px;
548
+ }
549
+
550
+ h5.promo-header {
551
+ font-size: 24px;
552
+ }
553
+
554
+ h6.promo-header {
555
+ font-size: 18px;
556
+ }
557
+ }
532
558
  }
533
559
 
534
560
  .uui-theme-electric {
package/theme/theme_loveship.scss CHANGED
@@ -3,9 +3,7 @@
3
3
 
4
4
  @mixin theme-loveship {
5
5
  --uui-font: 'Source Sans Pro', sans-serif;
6
- --font-primary: 'Sans Semibold', Arial, sans-serif;
7
- --font-promo: 'Sans Semibold', Arial, sans-serif;
8
- --font-mono: monospace;
6
+ --uui-font-mono: 'Roboto Mono', monospace;
9
7
 
10
8
  --night50: #FAFAFC;
11
9
  --night100: #F5F6FA;
@@ -163,9 +161,9 @@
163
161
  --uui-primary-70: var(--sky-70);
164
162
  --uui-primary-contrast: var(--white);
165
163
 
166
- --uui-secondary-5: var(--night200);
167
- --uui-secondary-10: var(--night300);
168
- --uui-secondary-20: var(--night400);
164
+ --uui-secondary-5: var(--night100);
165
+ --uui-secondary-10: var(--night200);
166
+ --uui-secondary-20: var(--night300);
169
167
  --uui-secondary-50: var(--night600);
170
168
  --uui-secondary-60: var(--night700);
171
169
  --uui-secondary-70: var(--night800);
@@ -244,7 +242,6 @@
244
242
  --uui-text-secondary: var(--uui-neutral-70);
245
243
  --uui-text-tertiary: var(--uui-neutral-60);
246
244
  --uui-text-disabled: var(--uui-neutral-50);
247
- --uui-text-contrast: var(--uui-neutral-5);
248
245
 
249
246
  --uui-text-info: var(--uui-info-70);
250
247
  --uui-text-warning: var(--uui-warning-70);
@@ -268,46 +265,34 @@
268
265
 
269
266
  // TODO: should be updated
270
267
 
271
- --uui-scroll_bars-bg: var(--uui-neutral-40);
272
- --uui-scroll_bars-bg-active: var(--uui-neutral-60);
273
-
274
268
  --uui-control-bg: var(--uui-surface-main);
275
269
  --uui-control-bg-hover: var(--uui-neutral-60);
276
270
  --uui-control-bg-disabled: var(--uui-neutral-5);
277
- --uui-control-bg-readonly: var(--uui-neutral-5);
278
271
 
279
272
  --uui-control-border: var(--uui-neutral-40);
280
273
  --uui-control-border-hover: var(--uui-neutral-60);
274
+ --uui-control-border-focus: var(--uui-primary-50);
281
275
  --uui-control-border-disabled: var(--uui-neutral-30);
282
- --uui-control-border-readonly: var(--uui-neutral-30);
283
- --uui-control-border-checked: var(--uui-primary-50);
284
-
285
- --uui-control-label: var(--uui-text-primary);
286
- --uui-control-label-disabled: var(--uui-text-disabled);
287
276
 
288
- --uui-control-placeholder: var(--uui-neutral-60);
289
- --uui-control-placeholder-disabled: var(--uui-neutral-50); // one place of usage
277
+ --uui-control-placeholder: var(--uui-neutral-50);
278
+ --uui-control-placeholder-disabled: var(--uui-neutral-50);
290
279
 
291
- --uui-control-text: var(--uui-neutral-80);
292
- --uui-control-text-disabled: var(--uui-neutral-50);
280
+ --uui-control-text: var(--uui-text-primary);
281
+ --uui-control-text-disabled: var(--uui-text-tertiary);
293
282
 
294
283
  --uui-control-icon: var(--uui-neutral-50);
295
284
  --uui-control-icon-disabled: var(--uui-neutral-50);
296
285
 
297
- --uui-control-checkbox-icon: var(--uui-neutral-0);
298
-
299
286
  --uui-outline-focus: #008ACE80;
300
287
 
301
- --uui-search_result-bg-highlight: var(--uui-warning-10);
302
-
303
288
  --uui-skeleton: var(--uui-neutral-40);
304
- --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
305
289
 
306
- --uui-border-radius: 3px;
307
290
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
308
291
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
309
292
  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
310
293
 
294
+ --uui-border-radius: 3px;
295
+
311
296
  /* core variables end */
312
297
 
313
298
  /* ------------------------------------ */
@@ -617,15 +602,20 @@
617
602
 
618
603
  .uui-icon_button.uui-color-neutral,
619
604
  .uui-icon_button.uui-color-night600 {
620
- --uui-icon-btn: var(--uui-neutral-60);
621
- --uui-icon-btn-hover: var(--uui-neutral-70);
622
- --uui-icon-btn-active: var(--uui-neutral-80);
605
+ --uui-icon_btn: var(--uui-neutral-60);
606
+ --uui-icon_btn-hover: var(--uui-neutral-70);
607
+ --uui-icon_btn-active: var(--uui-neutral-80);
623
608
  }
624
609
 
625
610
  .uui-icon_button.uui-color-secondary {
626
- --uui-icon-btn: var(--uui-neutral-50);
627
- --uui-icon-btn-hover: var(--uui-neutral-60);
628
- --uui-icon-btn-active: var(--uui-neutral-70);
611
+ --uui-icon_btn: var(--uui-neutral-50);
612
+ --uui-icon_btn-hover: var(--uui-neutral-60);
613
+ --uui-icon_btn-active: var(--uui-neutral-70);
614
+ }
615
+
616
+ .uui-icon_button.uui-color-white {
617
+ --uui-icon_btn-hover: var(--uui-neutral-20);
618
+ --uui-icon_btn-active: var(--uui-neutral-30);
629
619
  }
630
620
 
631
621
  /* TooltipContainer */
@@ -642,7 +632,7 @@
642
632
  }
643
633
 
644
634
  .uui-tooltip-container.uui-color-gray,
645
- .uui-tooltip-container.uui-color-contrast {
635
+ .uui-tooltip-container.uui-color-inverted {
646
636
  --uui-tooltip-bg: var(--uui-neutral-80);
647
637
  --uui-tooltip-text: var(--white);
648
638
  }
@@ -714,6 +704,28 @@
714
704
  --uui-text-font: var(--uui-font);
715
705
  --uui-text-font-weight: 300;
716
706
  }
707
+
708
+ /* Typography */
709
+
710
+ .uui-typography {
711
+ h1 {
712
+ font-weight: 600;
713
+ }
714
+
715
+ h2 {
716
+ font-weight: 700;
717
+ }
718
+
719
+ h3 {
720
+ font-weight: 600;
721
+ }
722
+
723
+ .hero-header {
724
+ font-size: 72px;
725
+ line-height: 72px;
726
+ font-weight: 700;
727
+ }
728
+ }
717
729
  }
718
730
 
719
731
  .uui-theme-loveship {