@epam/assets 5.0.0-alpha.4 → 5.0.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 (28) hide show
  1. package/css/theme/theme_loveship.css +1209 -0
  2. package/css/theme/theme_loveship.css.map +1 -0
  3. package/css/theme/theme_promo.css +961 -0
  4. package/css/theme/theme_promo.css.map +1 -0
  5. package/css/theme/theme_vanilla_thunder.css +806 -0
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -0
  7. package/package.json +4 -4
  8. package/scss/font-faces.scss +2 -105
  9. package/scss/fonts.scss +2 -13
  10. package/scss/index.scss +4 -9
  11. package/scss/loveship/colors.scss +121 -0
  12. package/scss/loveship/font-faces.scss +66 -0
  13. package/scss/loveship/fonts.scss +7 -0
  14. package/scss/loveship/typography.scss +153 -0
  15. package/scss/loveship-colors.scss +2 -56
  16. package/scss/promo/colors.scss +94 -49
  17. package/scss/promo/font-faces.scss +8 -0
  18. package/scss/promo/fonts.scss +2 -4
  19. package/scss/promo/typography.scss +1 -2
  20. package/scss/typography.scss +2 -141
  21. package/theme/theme_loveship.scss +183 -71
  22. package/theme/theme_promo.scss +51 -4
  23. package/scss/contrast.scss +0 -39
  24. package/scss/control-layout.scss +0 -2
  25. package/scss/control-size.scss +0 -7
  26. package/scss/dnd.scss +0 -9
  27. package/scss/effects.scss +0 -25
  28. package/scss/text-size.scss +0 -37
package/css/theme/theme_vanilla_thunder.css.map ADDED
@@ -0,0 +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-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-lightest: #FDE1E1;\n --fire-light: #FCC8C8;\n --fire: #FA4B4B;\n --fire-dark: #CC2929;\n --fire-darkest: #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 --uui-accent: var(--grass-300);\n --uui-accent-light: var(--grass-200);\n --uui-accent-lightest: var(--grass-100);\n --uui-accent-dark: var(--grass-400);\n --uui-accent-darkest: var(--grass-500);\n\n --uui-primary: var(--blue-300);\n --uui-primary-light: var(--blue-200);\n --uui-primary-lightest: var(--blue-100);\n --uui-primary-halftone: var(--night200); // TODO: why we have that?\n --uui-primary-dark: var(--blue-400);\n --uui-primary-darkest: var(--blue-500);\n\n --uui-secondary: var(--night500);\n --uui-secondary-light: var(--night300);\n --uui-secondary-lightest: var(--night200);\n --uui-secondary-dark: var(--night600);\n --uui-secondary-darkest: var(--night700);\n --uui-secondary-hover: var(--night600);\n --uui-secondary-active: var(--night700);\n\n --uui-negative: var(--sun-200);\n --uui-negative-light: var(--sun-100);\n --uui-negative-lightest: var(--sun-50);\n --uui-negative-dark: var(--sun-250);\n --uui-negative-darkest: var(--sun-300);\n\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-disabled: var(--chromatic-200);\n --uui-visited: #5214CC;\n\n --uui-info: var(--blue-300);\n --uui-info-lightest: var(--blue-0);\n --uui-info-light: var(--blue-100);\n --uui-info-dark: var(--blue-400);\n --uui-info-darkest: var(--blue-500);\n --uui-info-hover: var(--blue-400);\n --uui-info-active: var(--blue-500);\n\n --uui-success: var(--grass-300);\n --uui-success-lightest: var(--grass-100);\n --uui-success-light: var(--grass-200);\n --uui-success-dark: var(--grass-400);\n --uui-success-darkest: var(--grass-500);\n --uui-success-hover: var(--grass-400);\n --uui-success-active: var(--grass-500);\n\n --uui-warning: var(--sun-200);\n --uui-warning-lightest: var(--sun-50);\n --uui-warning-light: var(--sun-100);\n --uui-warning-dark: var(--sun-250);\n --uui-warning-darkest: var(--sun-300);\n --uui-warning-hover: var(--sun-250);\n --uui-warning-active: var(--sun-300);\n\n --uui-error: var(--fire);\n --uui-error-lightest: var(--fire-lightest);\n --uui-error-light: var(--fire-light);\n --uui-error-dark: var(--fire-dark);\n --uui-error-darkest: var(--fire-darkest);\n --uui-error-hover: var(--fire-dark);\n --uui-error-active: var(--fire-darkest);\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-surface: var(--chromatic-0);\n --uui-surface-hover: var(--night200);\n --uui-surface-inverted: var(--night900);\n /* new start */\n --uui-surface-light: var(--night50);\n --uui-surface-light-hover: var(--night100);\n --uui-surface-contrast: var(--night800);\n --uui-surface-contrast-hover: var(--night900);\n --uui-surface-contrast-active: var(--night900);\n /* new end */\n\n --uui-background: var(--chromatic-100);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-contrast: var(--chromatic-0);\n --uui-disabled: var(--chromatic-150);\n\n --uui-scroll-bars-bg: var(--chromatic-200);\n --uui-scroll-bars-bg-active: var(--chromatic-300);\n\n --uui-button-bg-halftone: var(--chromatic-0);\n --uui-button-caption-disabled: var(--chromatic-300);\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-disabled: var(--chromatic-200);\n --uui-text-contrast: var(--chromatic-0);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-checked: var(--uui-primary);\n --uui-control-bg-checked-hover: var(--uui-primary-dark);\n --uui-control-bg-checked-disabled: var(--uui-primary-light);\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_switch-bg: var(--chromatic-200);\n --uui-control_switch_toggler-bg: var(--chromatic-0);\n\n --uui-control-border-checked-disabled: var(--uui-primary-light);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-checked: var(--uui-primary);\n --uui-control-border-checked-hover: var(--uui-primary-dark);\n --uui-control-border-hover: var(--uui-primary-dark);\n --uui-control-border-disabled: var(--uui-disabled);\n --uui-control-border-readonly: var(--uui-disabled);\n\n --uui-control_switch-border-hover: var(--chromatic-300);\n --uui-control_textinput-border-hover: var(--chromatic-300);\n\n --uui-control-label: var(--uui-text-primary);\n --uui-control-label-disabled: var(--uui-text-disabled);\n --uui-control-label-error: var(--uui-error);\n --uui-control-label-fill: var(--uui-icon);\n --uui-control-label-optional-text: var(--uui-text-secondary);\n --uui-control-label-asterisk: var(--uui-error);\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-tag-bg: var(--night300);\n --uui-tag-bg-hover: var(--night400);\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-overlay: rgb(29 30 38 / 80%);\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 /* TextInput vars */\n --uui-text-input-bg: var(--uui-control-bg);\n --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);\n --uui-text-input-border: var(--uui-control-border);\n --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-text-input-border-active: var(--uui-control-border-checked);\n --uui-text-input-border-error: var(--uui-negative);\n --uui-text-input-border-disabled: var(--uui-control-border-disabled);\n --uui-text-input-border-readonly: var(--uui-control-border-readonly);\n --uui-text-input-placeholder: var(--uui-control-placeholder);\n --uui-text-input-placeholder-disabled: var(--uui-control-placeholder-disabled);\n --uui-text-input-text: var(--uui-control-text);\n --uui-text-input-text-disabled: var(--uui-control-text-disabled);\n --uui-text-input-icon: var(--uui-control-icon);\n --uui-text-input-icon-disabled: var(--uui-control-icon-disabled);\n --uui-text-input-icon-clickable: var(--uui-icon);\n --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-text-input-border-radius: var(--uui-border-radius);\n\n --uui-text-input-font: var(--font-inter);\n --uui-text-input-font-weight: 400;\n\n /* Button vars */\n --uui-btn-border-radius: 8px;\n\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 500;\n\n\n /* LinkButton vars */\n --uui-link-button-text: var(--uui-primary);\n --uui-link-button-text-hover: var(--uui-primary-dark);\n --uui-link-button-text-active: var(--uui-primary-darkest);\n --uui-link-button-text-disabled: var(--uui-button-caption-disabled);\n\n --uui-link-button-font: var(--font-inter);\n --uui-link-button-font-weight: 400;\n\n /* DatePicker vars */\n --uui-dtp-title-bg: var(--uui-control-bg);\n --uui-dtp-title-bg-hover: var(--uui-primary-halftone);\n --uui-dtp-text-selected: var(--uui-control-border-checked);\n --uui-dtp-text: var(--uui-control-text);\n --uui-dtp-next-prev-icon: var(--uui-icon);\n --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);\n\n --uui-dtp_header-font: var(--font-inter);\n --uui-dtp_header-font-weight: 400;\n --uui-dtp_body-content-font: var(--font-inter);\n --uui-dtp_body-content-font-weight: 400;\n\n /* RangeDatePicker vars */\n --uui-rdtp-bg: var(--uui-control-bg);\n --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);\n\n /* Calendar vars */\n --uui-calendar-selected-hover: var(--uui-control-bg);\n --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);\n --uui-calendar-start-end-selected: var(--uui-control-border-checked);\n --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);\n --uui-calendar-text: var(--uui-control-text);\n --uui-calendar-text-filtered: var(--uui-control-text-disabled);\n --uui-calendar-bg-selected: var(--uui-secondary);\n\n --uui-calendar-content-font: var(--font-inter);\n --uui-calendar-content-font-weight: 400;\n --uui-calendar-weekday-font: var(--font-inter);\n --uui-calendar-weekday-font-weight: 400;\n --uui-calendar-selected_day-font: var(--font-inter);\n --uui-calendar-selected_day-font-weight: 600;\n\n /* tab-button-vars */\n --uui-tab-button-text: var(--uui-text-primary);\n --uui-tab-button-text-hover: var(--uui-primary);\n --uui-tab-button-text-active: var(--uui-primary);\n --uui-tab-button-text-disabled: var(--uui-text-disabled);\n\n --uui-tab-button-font: var(--font-inter);\n --uui-tab-button-font-weight: 600;\n\n /* radio-input-vars */\n --uui-radio-input-bg: var(--uui-control-bg);\n --uui-radio-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-radio-input-border: var(--uui-control-border);\n --uui-radio-input-border-checked: var(--uui-control-border-checked);\n --uui-radio-input-border-hover: var(--uui-control-border-hover);\n --uui-radio-input-border-disabled: var(--uui-control-border-disabled);\n --uui-radio-input-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-radio-input-label: var(--uui-control-label);\n --uui-radio-input-label-disabled: var(--uui-control-label-disabled);\n --uui-radio-input-fill-checked: var(--uui-control-border-checked);\n --uui-radio-input-fill-hover: var(--uui-control-border-hover);\n --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-radio-input-error: var(--uui-negative);\n\n --uui-radio-input-font: var(--font-inter);\n --uui-radio-input-font-weight: 400;\n\n /* Checkbox vars */\n --uui-checkbox-border: var(--uui-control-border);\n --uui-checkbox-border-hover: var(--uui-control-border-hover);\n --uui-checkbox-border-disabled: var(--uui-control-border-disabled);\n --uui-checkbox-border-checked: var(--uui-control-border-checked);\n --uui-checkbox-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-checkbox-bg: var(--uui-control-bg);\n --uui-checkbox-bg-checked: var(--uui-control-bg-checked);\n --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);\n --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);\n --uui-checkbox-error: var(--uui-negative);\n --uui-checkbox-fill: var(--uui-control-checkbox-icon);\n --uui-checkbox-label: var(--uui-control-label);\n --uui-checkbox-label-disabled: var(--uui-control-label-disabled);\n --uui-checkbox-border-radius: var(--uui-border-radius);\n\n --uui-checkbox-font: var(--font-inter);\n --uui-checkbox-font-weight: 400;\n\n /* Tag vars */\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-icon);\n --uui-tag-fill-hover: var(--uui-icon-hover);\n --uui-tag-count-bg: var(--uui-surface);\n --uui-tag-count: var(--uui-text-secondary);\n --uui-tag-label: var(--uui-text-secondary);\n --uui-tag-border-radius: 30px;\n\n --uui-tag-font: var(--font-inter);\n --uui-tag-font-weight: 400;\n --uui-tag-count-font: var(--font-inter);\n --uui-tag-count-font-weight: 500;\n\n /* TextArea vars */\n --uui-text-area-bg: var(--uui-control-bg);\n --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);\n --uui-text-area-border: var(--uui-control-border);\n --uui-text-area-border-disabled: var(--uui-control-border-disabled);\n --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);\n --uui-text-area-border-active: var(--uui-control-border-checked);\n --uui-text-area-border-error: var(--uui-negative);\n --uui-text-area-placeholder: var(--uui-control-placeholder);\n --uui-text-area-text: var(--uui-control-text);\n --uui-text-area-text-disabled: var(--uui-control-text-disabled);\n --uui-text-area-icon: var(--uui-icon);\n --uui-text-area-border-radius: var(--uui-border-radius);\n\n --uui-text-area-font: var(--font-inter);\n --uui-text-area-font-weight: 400;\n --uui-text-area-counter-font: var(--font-inter);\n --uui-text-area-counter-font-weight: 400;\n\n /* DropMarker vars */\n --uui-drop-marker: var(--uui-primary);\n --uui-drop-marker-blocked: var(--uui-error);\n\n /* Tooltip vars */\n --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgb(44 47 60 / 30%), 0 1px 4px 0 rgb(44 47 60 / 50%)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */\n --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);\n --uui-tooltip-border-radius: 8px;\n\n --uui-tooltip-font: var(--font-inter);\n --uui-tooltip-font-weight: 400;\n\n /* PickerInput vars */\n --uui-picker_input-bg: var(--uui-surface);\n\n /* PickerToggler vars */\n --uui-picker-toggler-bg: var(--uui-control-bg);\n --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);\n --uui-picker-toggler-border: var(--uui-control-border);\n --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);\n --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);\n --uui-picker-toggler-border-active: var(--uui-control-border-checked);\n --uui-picker-toggler-border-error: var(--uui-negative);\n --uui-picker-toggler-placeholder: var(--uui-control-placeholder);\n --uui-picker-toggler-text: var(--uui-control-text);\n --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);\n --uui-picker-toggler-icon: var(--uui-control-icon);\n --uui-picker-toggler-icon-disabled: var(--uui-control-icon-disabled);\n --uui-picker-toggler-icon-clickable: var(--uui-icon);\n --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);\n --uui-picker-toggler-border-radius: var(--uui-border-radius);\n\n --uui-picker-toggler-font: var(--font-inter);\n --uui-picker-toggler-font-weight: 400;\n\n /* Panel */\n --uui-panel-border-radius: 8px;\n --uui-panel-shadow: var(--uui-shadow-level-1);\n\n /* Modals */\n --uui-modals-border-radius: 8px;\n --uui-modals-overlay: rgb(29 30 38 / 80%);\n --uui-modals-shadow: var(--uui-shadow-level-3);\n --uui-modals-bg: var(--uui-surface);\n\n /* TextPlaceholder */\n --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);\n --uui-text-placeholder: var(--uui-skeleton);\n\n /* LabeledInput */\n --uui-labeled-input: var(--uui-text-primary);\n --uui-labeled-input-disabled: var(--uui-text-disabled);\n --uui-labeled-input-error: var(--uui-error);\n --uui-labeled-input-fill: var(--uui-icon);\n --uui-labeled-input-info-fill: var(--uui-icon);\n --uui-labeled-input-optional-text: var(--uui-text-secondary);\n --uui-labeled-input-asterisk: var(--uui-error);\n\n --uui-labeled-input-font: var(--font-inter);\n --uui-labeled-input-font-weight: 500;\n --uui-labeled-input-optional-font: var(--font-inter);\n --uui-labeled-input-optional-font-weight: 300;\n --uui-labeled-input-invalid-msg-font: var(--font-inter);\n --uui-labeled-input-invalid-msg-font-weight: 400;\n\n /* Accordion */\n --uui-accordion-bg: var(--uui-surface);\n --uui-accordion-border: var(--uui-divider);\n --uui-accordion-border-radius: 6px;\n --uui-accordion-text: var(--uui-text-primary);\n --uui-accordion-text-disabled: var(--uui-text-disabled);\n --uui-accordion-icon: var(--uui-icon);\n --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);\n --uui-accordion-focus: var(--uui-primary);\n --uui-accordion-shadow: var(--uui-shadow-level-1);\n --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);\n\n --uui-accordion-toggler-font: var(--font-inter);\n --uui-accordion-toggler-font-weight: 500;\n --uui-accordion-body-font: var(--font-inter);\n --uui-accordion-body-font-weight: 400;\n\n /* Switch */\n --uui-switch-bg: var(--uui-control_switch-bg);\n --uui-switch-border-hover: var(--uui-control_switch-border-hover);\n --uui-switch-bg-checked: var(--uui-control-bg-checked);\n --uui-switch-bg-hover: var(--uui-control-bg-hover);\n --uui-switch-bg-disabled: var(--uui-control-bg-disabled);\n --uui-switch-bg-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-switch-bg-checked-disabled: var(--uui-control-bg-checked-disabled);\n --uui-switch-border: var(--uui-control-border);\n --uui-switch-border-checked: var(--uui-control-border-checked);\n --uui-switch-border-disabled: var(--uui-control-border-disabled);\n --uui-switch-border-checked-hover: var(--uui-control-border-checked-hover);\n --uui-switch-border-checked-hover-copy: var(--uui-control-border-checked-hover);\n --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-switch-label: var(--uui-control-label);\n --uui-switch-label-disabled: var(--uui-control-label-disabled);\n --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);\n --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);\n --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);\n --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);\n --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);\n --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);\n\n --uui-switch-font: var(--font-inter);\n --uui-switch-font-weight: 400;\n\n /* DropdownContainer */\n --uui-dropdown-container-border-radius: 6px;\n --uui-dropdown-container-shadow: var(--uui-shadow-level-2);\n --uui-dropdown-container-bg: var(--uui-surface);\n\n /* DropdownMenu */\n // TODO: update tokens\n --uui-dropdown-menu-bg: var(--uui-surface);\n --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);\n --uui-dropdown-menu-splitter: var(--uui-divider);\n --uui-dropdown-menu-item-hover: var(--uui-surface-hover);\n --uui-dropdown-menu-item-active: var(--uui-surface-hover);\n --uui-dropdown-menu-item-text: var(--uui-text-primary);\n\n --uui-dropdown-menu-body-font: var(--font-inter);\n --uui-dropdown-menu-body-font-weight: 400;\n --uui-dropdown-menu-item-font: var(--font-inter);\n --uui-dropdown-menu-item-font-weight: 400;\n\n /* MainMenu */\n --uui-main_menu-text: var(--uui-text-primary);\n --uui-main_menu-bg: #F0F7FCD9;\n --uui-main_menu-hover: #FFF;\n --uui-main_menu-active: #FFF;\n --uui-main_menu-border-active: var(--uui-primary);\n\n --uui-main_menu-dropdown-bg: var(--uui-surface);\n --uui-main_menu-dropdown-hover: var(--uui-primary);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n\n --uui-main_menu-search-bg: var(--uui-secondary-darkest);\n --uui-main_menu-search-border: var(--uui-secondary-darkest);\n --uui-main_menu-search-placeholder: var(--uui-text-disabled);\n --uui-main_menu-search-text: var(--uui-text-contrast);\n --uui-main_menu-search-icon: var(--uui-icon-disabled);\n\n --uui-main_menu-icon: var(--uui-text-primary);\n --uui-main_menu-icon-hover: var(--uui-text-primary);\n --uui-main_menu-icon-active: var(--uui-text-primary);\n\n --uui-main_menu-font: var(--font-museo-sans);\n --uui-main_menu-font-weight: 500;\n --uui-main_menu-search-font: var(--font-inter);\n --uui-main_menu-search-font-weight: 400;\n\n /* BurgerMenu */\n --uui-burger_menu-bg: var(--uui-surface);\n --uui-burger_menu-bg-hover: var(--uui-surface-light-hover);\n --uui-burger_menu-caption: var(--uui-contrast);\n --uui-burger_menu-caption-hover: var(--uui-primary);\n --uui-burger_menu-overlay: var(--uui-overlay);\n --uui-burger_icon: var(--uui-text-primary);\n --uui-burger_item: var(--uui-text-brand);\n\n /* BurgerGroupHeader */\n --uui-burger_group-text: var(--uui-text-disabled);\n --uui-burger_group-bg: var(--uui-surface-contrast);\n --uui-burger_group-line: var(--uui-divider);\n\n --uui-burger_group-font: var(--font-inter);\n --uui-burger_group-font-weight: 400;\n\n /* BurgerButton */\n --uui-burger_btn_caption: var(--uui-text-contrast);\n --uui-burger_btn_caption-hover: var(--uui-primary);\n --uui-burger_btn_caption-active: var(--uui-primary);\n --uui-burger_btn-border: var(--uui-divider-light);\n\n --uui-burger_btn-font: var(--font-inter);\n --uui-burger_btn-font-weight: 400;\n\n /* BurgerSearch */\n --uui-burger_search: var(--uui-text-contrast);\n --uui-burger_search-fill: var(--uui-text-disabled);\n --uui-burger_search-bg: var(--uui-surface-contrast);\n --uui-burger_search-placeholder: var(--uui-text-disabled);\n\n --uui-burger_search-font: var(--font-inter);\n --uui-burger_search-font-weight: 400;\n\n /* NumericInput */\n --uui-numeric-input-bg: var(--uui-control-bg);\n --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-numeric-input-border: var(--uui-control-border);\n --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);\n --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-numeric-input-border-active: var(--uui-control-border-checked);\n --uui-numeric-input-border-error: var(--uui-negative);\n --uui-numeric-input-placeholder: var(--uui-control-placeholder);\n --uui-numeric-input-text: var(--uui-control-text);\n --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);\n --uui-numeric-input-icon-clickable: var(--uui-icon);\n --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-numeric-input-border-radius: var(--uui-border-radius);\n\n /* TimePicker */\n --uui-time-picker-bg: var(--uui-control-bg);\n --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);\n --uui-time-picker-border: var(--uui-control-border);\n --uui-time-picker-border-disabled: var(--uui-control-border-disabled);\n --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);\n --uui-time-picker-border-active: var(--uui-control-border-checked);\n --uui-time-picker-border-error: var(--uui-negative);\n --uui-time-picker-placeholder: var(--uui-control-placeholder);\n --uui-time-picker-text: var(--uui-control-text);\n --uui-time-picker-text-disabled: var(--uui-control-text-disabled);\n --uui-time-picker-icon-clickable: var(--uui-icon);\n --uui-time-picker-icon-clickable-hover: var(--uui-icon-hover);\n --uui-time-picker-border-radius: var(--uui-border-radius);\n\n /* SearchPicker */\n --uui-search-input-bg: var(--uui-control-bg);\n --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-search-input-border: var(--uui-control-border);\n --uui-search-input-border-disabled: var(--uui-control-border-disabled);\n --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-search-input-border-active: var(--uui-control-border-checked);\n --uui-search-input-border-error: var(--uui-negative);\n --uui-search-input-placeholder: var(--uui-control-placeholder);\n --uui-search-input-text: var(--uui-control-text);\n --uui-search-input-text-disabled: var(--uui-control-text-disabled);\n --uui-search-input-icon-clickable: var(--uui-icon);\n --uui-search-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-search-input-icon-disabled: var(--uui-icon-disabled);\n --uui-search-input-border-radius: var(--uui-border-radius);\n\n /* Popover */\n --uui-popover-shadow: var(--uui-shadow-level-2);\n\n /* Footer */\n --uui-footer-bg: var(--uui-surface-contrast);\n\n /* FilterPanelItemToggler vars */\n --uui-filters-toggler-border: var(--uui-surface);\n --uui-filters-toggler-border-hover: var(--blue-0);\n --uui-filters-toggler-border-radius: 8px;\n --uui-filters-toggler-bg: var(--uui-surface);\n --uui-filters-toggler-bg-hover: var(--blue-0);\n --uui-filters-toggler-text: var(--uui-text-brand);\n --uui-filters-toggler-label: var(--uui-text-secondary);\n --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);\n --uui-filters-toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters-toggler-font: var(--font-inter);\n --uui-filters-toggler-font-weight: 400;\n --uui-filters-panel-header-font: var(--font-inter);\n --uui-filters-panel-header-font-weight: 400;\n\n /* NotificationCard */\n --uui-notification-card-border-radius: 8px;\n --uui-notification-card-border-width: 0;\n --uui-notification-card-border-top-width: 6px;\n --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future\n\n /* Alert */\n --uui-alert-border-radius: 6px;\n\n /* Panel */\n\n --uui-panel-bg: var(--uui-surface);\n\n /* Spinner */\n --uui-spinner: var(--uui-primary);\n\n /* Blocker */\n --uui-blocker-bg: var(--uui-background);\n --uui-blocker-bg-with-opacity: #F5F6FA80;\n\n /* FlexRow */\n --uui-flex-row-border-bottom: 1px solid var(--uui-divider);\n\n /* DataTable vars */\n --uui-dt-border: var(--uui-divider-light);\n\n --uui-dt-cell-bg: transparent;\n --uui-dt-cell-bg-resize: #EF55331F;\n --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);\n --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);\n --uui-dt-cell-border-focus: var(--uui-control-border-checked);\n\n --uui-dt-row-bg: var(--uui-surface);\n --uui-dt-row-bg-hover: var(--uui-surface-light-hover);\n --uui-dt-row-bg-invalid: #FEF7F6;\n --uui-dt-row-bg-selected: #EBF7FF;\n\n --uui-dt-header-row-bg: var(--uui-surface-light);\n --uui-dt-header-row-bg-hover: var(--uui-surface-hover);\n\n --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt_header-drop_marker: var(--uui-primary);\n\n --uui-dt-header-cell-font: var(--font-inter);\n --uui-dt-header-cell-font-weight: 500;\n\n /* AvatarStack */\n\n --uui-avatar-stack-font: var(--font-inter);\n --uui-avatar-stack-font-weight: 400;\n\n /* Badge */\n\n --uui-badge-font: var(--font-museo-sans);\n --uui-badge-font-weight: 700;\n --uui-badge-count-font: var(--font-museo-sans);\n --uui-badge-count-font-weight: 700;\n\n /* Pagination */\n\n --uui-pagination-font: var(--font-inter);\n --uui-pagination-font-weight: 400;\n\n\n /* ------------------------------------ */\n\n .tooltip-contrast {\n --uui-tooltip-bg: var(--uui-surface-inverted);\n --uui-tooltip-text: var(--uui-contrast);\n }\n\n .tooltip-default {\n --uui-tooltip-bg: var(--uui-surface);\n --uui-tooltip-text: var(--uui-text-primary);\n }\n\n .tooltip-critical {\n --uui-tooltip-bg: var(--uui-error-dark);\n --uui-tooltip-text: var(--uui-contrast);\n }\n\n .button-primary {\n --uui-btn-bg: var(--uui-primary);\n --uui-btn-bg-hover: var(--uui-primary-dark);\n --uui-btn-bg-active: var(--uui-primary-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--blue-0);\n --uui-btn-bg-halftone-active: var(--uui-primary-lightest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border: var(--uui-primary);\n --uui-btn-border-hover: var(--uui-primary-dark);\n --uui-btn-border-active: var(--uui-primary-darkest);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n }\n\n .button-accent {\n --uui-btn-bg: var(--uui-accent);\n --uui-btn-bg-hover: var(--uui-accent-dark);\n --uui-btn-bg-active: var(--uui-accent-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);\n --uui-btn-bg-halftone-active: var(--uui-accent-light);\n --uui-btn-border: var(--uui-accent);\n --uui-btn-border-hover: var(--uui-accent-dark);\n --uui-btn-border-active: var(--uui-accent-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n }\n\n .button-negative {\n --uui-btn-bg: var(--uui-negative);\n --uui-btn-bg-hover: var(--uui-negative-dark);\n --uui-btn-bg-active: var(--uui-negative-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);\n --uui-btn-bg-halftone-active: var(--uui-negative-light);\n --uui-btn-border: var(--uui-negative);\n --uui-btn-border-hover: var(--uui-negative-dark);\n --uui-btn-border-active: var(--uui-negative-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n }\n\n .button-secondary {\n --uui-btn-bg: var(--uui-secondary);\n --uui-btn-bg-hover: var(--uui-secondary-dark);\n --uui-btn-bg-active: var(--uui-secondary-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);\n --uui-btn-bg-halftone-active: var(--uui-secondary-light);\n --uui-btn-border: var(--uui-secondary);\n --uui-btn-border-hover: var(--uui-secondary-dark);\n --uui-btn-border-active: var(--uui-secondary-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n }\n\n .icon-button-info {\n --uui-icon-btn: var(--uui-info);\n --uui-icon-btn-hover: var(--uui-info-dark);\n --uui-icon-btn-active: var(--uui-info-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .icon-button-success {\n --uui-icon-btn: var(--uui-success);\n --uui-icon-btn-hover: var(--uui-success-dark);\n --uui-icon-btn-active: var(--uui-success-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .icon-button-warning {\n --uui-icon-btn: var(--uui-warning);\n --uui-icon-btn-hover: var(--uui-warning-dark);\n --uui-icon-btn-active: var(--uui-warning-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .icon-button-error {\n --uui-icon-btn: var(--uui-error);\n --uui-icon-btn-hover: var(--uui-error-dark);\n --uui-icon-btn-active: var(--uui-error-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .icon-button-secondary {\n --uui-icon-btn: var(--gray50);\n --uui-icon-btn-hover: var(--uui-color-night500-800);\n --uui-icon-btn-active: var(--uui-color-night500-900);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .icon-button-default {\n --uui-icon-btn: var(--gray60);\n --uui-icon-btn-hover: var(--uui-color-night600-800);\n --uui-icon-btn-active: var(--uui-color-night600-900);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n }\n\n .notification-card-warning {\n --uui-notification-card-fill: var(--uui-warning);\n --uui-notification-card-border: var(--uui-warning);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n }\n\n .notification-card-success {\n --uui-notification-card-fill: var(--uui-success);\n --uui-notification-card-border: var(--uui-success);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n }\n\n .notification-card-info {\n --uui-notification-card-fill: var(--uui-info);\n --uui-notification-card-border: var(--uui-info);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n }\n\n .notification-card-error {\n --uui-notification-card-fill: var(--uui-error);\n --uui-notification-card-border: var(--uui-error);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n }\n\n .alert-error {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #F5E5E9;\n --uui-alert-border: var(--uui-error);\n --uui-alert-icon: var(--uui-error);\n }\n\n .alert-warning {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #F6EEE1;\n --uui-alert-border: var(--uui-warning);\n --uui-alert-icon: var(--uui-warning);\n }\n\n .alert-success {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #E7EEE1;\n --uui-alert-border: var(--uui-success);\n --uui-alert-icon: var(--uui-success);\n }\n\n .alert-info {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #DCEDF6;\n --uui-alert-border: var(--uui-info);\n --uui-alert-icon: var(--uui-info);\n }\n\n .badge-default {\n --uui-badge-bg: var(--night300);\n --uui-badge-bg-hover: var(--night400);\n --uui-badge-caption-solid: var(--uui-text-primary);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--night200);\n --uui-badge-bg-halftone-hover: var(--night300);\n --uui-badge-border-halftone: var(--night400);\n --uui-badge-border-halftone-hover: var(--night500);\n --uui-badge-caption-halftone: var(--uui-text-primary);\n }\n\n .badge-info {\n --uui-badge-bg: var(--uui-info);\n --uui-badge-bg-hover: var(--uui-info-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-info-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-info-light);\n --uui-badge-border-halftone: var(--uui-info-light);\n --uui-badge-border-halftone-hover: var(--uui-info);\n --uui-badge-caption-halftone: var(--uui-info-darkest);\n }\n\n .badge-success {\n --uui-badge-bg: var(--uui-success);\n --uui-badge-bg-hover: var(--uui-success-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-success-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-success-light);\n --uui-badge-border-halftone: var(--uui-success-light);\n --uui-badge-border-halftone-hover: var(--uui-success);\n --uui-badge-caption-halftone: var(--uui-success-darkest);\n }\n\n .badge-warning {\n --uui-badge-bg: var(--uui-warning);\n --uui-badge-bg-hover: var(--uui-warning-dark);\n --uui-badge-caption-solid: var(--uui-text-primary);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-warning-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-warning-light);\n --uui-badge-border-halftone: var(--uui-warning-light);\n --uui-badge-border-halftone-hover: var(--uui-warning);\n --uui-badge-caption-halftone: var(--uui-warning-darkest);\n }\n\n .badge-error {\n --uui-badge-bg: var(--uui-error);\n --uui-badge-bg-hover: var(--uui-error-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-error-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-error-light);\n --uui-badge-border-halftone: var(--uui-error-light);\n --uui-badge-border-halftone-hover: var(--uui-error);\n --uui-badge-caption-halftone: var(--uui-error-darkest);\n }\n\n .informer-default {\n --uui-informer-bg: var(--uui-secondary-light);\n --uui-informer-caption: var(--uui-text-secondary);\n }\n\n .informer-focus {\n --uui-informer-bg: var(--uui-negative);\n --uui-informer-caption: var(--uui-caption);\n }\n\n .informer-white {\n --uui-informer-bg: var(--uui-surface);\n --uui-informer-caption: var(--uui-text-secondary);\n }\n\n .uui-text-brand {\n --uui-text: var(--uui-text-brand);\n }\n\n .uui-text-primary {\n --uui-text: var(--uui-text-primary);\n }\n\n .uui-text-secondary {\n --uui-text: var(--uui-text-secondary);\n }\n\n .uui-text-disabled {\n --uui-text: var(--uui-text-disabled);\n }\n\n .uui-text-contrast {\n --uui-text: var(--uui-text-contrast);\n }\n\n .uui-font-inter, .uui-font-regular {\n --uui-text-font: var(--font-inter);\n }\n\n .uui-font-museo-sans {\n --uui-text-font: var(--font-museo-sans);\n }\n\n .uui-font-semibold {\n --uui-text-font: var(--font-museo-sans);\n --uui-text-font-weight: 700;\n }\n\n .dropdown-container-white {\n --uui-dropdown-container-bg: var(--white);\n }\n\n .dropdown-container-night700 {\n --uui-dropdown-container-bg: var(--night700);\n }\n\n .flex-row-background-white {\n --uui-flex-row-bg: var(--uui-surface);\n }\n\n .flex-row-background-night50 {\n --uui-flex-row-bg: var(--night50);\n }\n\n .flex-row-background-night100 {\n --uui-flex-row-bg: var(--night100);\n }\n\n .flex-row-background-none {\n --uui-flex-row-bg: transparent;\n }\n\n .panel-white {\n --uui-panel-bg: var(--uui-surface);\n }\n\n .panel-night50 {\n --uui-panel-bg: var(--night50);\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-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-lightest: #FDE1E1;\n --fire-light: #FCC8C8;\n --fire: #FA4B4B;\n --fire-dark: #CC2929;\n --fire-darkest: #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 --uui-accent: var(--grass-300);\n --uui-accent-light: var(--grass-200);\n --uui-accent-lightest: var(--grass-100);\n --uui-accent-dark: var(--grass-400);\n --uui-accent-darkest: var(--grass-500);\n --uui-primary: var(--blue-300);\n --uui-primary-light: var(--blue-200);\n --uui-primary-lightest: var(--blue-100);\n --uui-primary-halftone: var(--night200);\n --uui-primary-dark: var(--blue-400);\n --uui-primary-darkest: var(--blue-500);\n --uui-secondary: var(--night500);\n --uui-secondary-light: var(--night300);\n --uui-secondary-lightest: var(--night200);\n --uui-secondary-dark: var(--night600);\n --uui-secondary-darkest: var(--night700);\n --uui-secondary-hover: var(--night600);\n --uui-secondary-active: var(--night700);\n --uui-negative: var(--sun-200);\n --uui-negative-light: var(--sun-100);\n --uui-negative-lightest: var(--sun-50);\n --uui-negative-dark: var(--sun-250);\n --uui-negative-darkest: var(--sun-300);\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-disabled: var(--chromatic-200);\n --uui-visited: #5214CC;\n --uui-info: var(--blue-300);\n --uui-info-lightest: var(--blue-0);\n --uui-info-light: var(--blue-100);\n --uui-info-dark: var(--blue-400);\n --uui-info-darkest: var(--blue-500);\n --uui-info-hover: var(--blue-400);\n --uui-info-active: var(--blue-500);\n --uui-success: var(--grass-300);\n --uui-success-lightest: var(--grass-100);\n --uui-success-light: var(--grass-200);\n --uui-success-dark: var(--grass-400);\n --uui-success-darkest: var(--grass-500);\n --uui-success-hover: var(--grass-400);\n --uui-success-active: var(--grass-500);\n --uui-warning: var(--sun-200);\n --uui-warning-lightest: var(--sun-50);\n --uui-warning-light: var(--sun-100);\n --uui-warning-dark: var(--sun-250);\n --uui-warning-darkest: var(--sun-300);\n --uui-warning-hover: var(--sun-250);\n --uui-warning-active: var(--sun-300);\n --uui-error: var(--fire);\n --uui-error-lightest: var(--fire-lightest);\n --uui-error-light: var(--fire-light);\n --uui-error-dark: var(--fire-dark);\n --uui-error-darkest: var(--fire-darkest);\n --uui-error-hover: var(--fire-dark);\n --uui-error-active: var(--fire-darkest);\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-surface: var(--chromatic-0);\n --uui-surface-hover: var(--night200);\n --uui-surface-inverted: var(--night900);\n /* new start */\n --uui-surface-light: var(--night50);\n --uui-surface-light-hover: var(--night100);\n --uui-surface-contrast: var(--night800);\n --uui-surface-contrast-hover: var(--night900);\n --uui-surface-contrast-active: var(--night900);\n /* new end */\n --uui-background: var(--chromatic-100);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-contrast: var(--chromatic-0);\n --uui-disabled: var(--chromatic-150);\n --uui-scroll-bars-bg: var(--chromatic-200);\n --uui-scroll-bars-bg-active: var(--chromatic-300);\n --uui-button-bg-halftone: var(--chromatic-0);\n --uui-button-caption-disabled: var(--chromatic-300);\n --uui-text-brand: var(--chromatic-500);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-contrast: var(--chromatic-0);\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-checked: var(--uui-primary);\n --uui-control-bg-checked-hover: var(--uui-primary-dark);\n --uui-control-bg-checked-disabled: var(--uui-primary-light);\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_switch-bg: var(--chromatic-200);\n --uui-control_switch_toggler-bg: var(--chromatic-0);\n --uui-control-border-checked-disabled: var(--uui-primary-light);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-checked: var(--uui-primary);\n --uui-control-border-checked-hover: var(--uui-primary-dark);\n --uui-control-border-hover: var(--uui-primary-dark);\n --uui-control-border-disabled: var(--uui-disabled);\n --uui-control-border-readonly: var(--uui-disabled);\n --uui-control_switch-border-hover: var(--chromatic-300);\n --uui-control_textinput-border-hover: var(--chromatic-300);\n --uui-control-label: var(--uui-text-primary);\n --uui-control-label-disabled: var(--uui-text-disabled);\n --uui-control-label-error: var(--uui-error);\n --uui-control-label-fill: var(--uui-icon);\n --uui-control-label-optional-text: var(--uui-text-secondary);\n --uui-control-label-asterisk: var(--uui-error);\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-tag-bg: var(--night300);\n --uui-tag-bg-hover: var(--night400);\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-overlay: rgb(29 30 38 / 80%);\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 /* TextInput vars */\n --uui-text-input-bg: var(--uui-control-bg);\n --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);\n --uui-text-input-border: var(--uui-control-border);\n --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-text-input-border-active: var(--uui-control-border-checked);\n --uui-text-input-border-error: var(--uui-negative);\n --uui-text-input-border-disabled: var(--uui-control-border-disabled);\n --uui-text-input-border-readonly: var(--uui-control-border-readonly);\n --uui-text-input-placeholder: var(--uui-control-placeholder);\n --uui-text-input-placeholder-disabled: var(--uui-control-placeholder-disabled);\n --uui-text-input-text: var(--uui-control-text);\n --uui-text-input-text-disabled: var(--uui-control-text-disabled);\n --uui-text-input-icon: var(--uui-control-icon);\n --uui-text-input-icon-disabled: var(--uui-control-icon-disabled);\n --uui-text-input-icon-clickable: var(--uui-icon);\n --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-text-input-border-radius: var(--uui-border-radius);\n --uui-text-input-font: var(--font-inter);\n --uui-text-input-font-weight: 400;\n /* Button vars */\n --uui-btn-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 500;\n /* LinkButton vars */\n --uui-link-button-text: var(--uui-primary);\n --uui-link-button-text-hover: var(--uui-primary-dark);\n --uui-link-button-text-active: var(--uui-primary-darkest);\n --uui-link-button-text-disabled: var(--uui-button-caption-disabled);\n --uui-link-button-font: var(--font-inter);\n --uui-link-button-font-weight: 400;\n /* DatePicker vars */\n --uui-dtp-title-bg: var(--uui-control-bg);\n --uui-dtp-title-bg-hover: var(--uui-primary-halftone);\n --uui-dtp-text-selected: var(--uui-control-border-checked);\n --uui-dtp-text: var(--uui-control-text);\n --uui-dtp-next-prev-icon: var(--uui-icon);\n --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);\n --uui-dtp_header-font: var(--font-inter);\n --uui-dtp_header-font-weight: 400;\n --uui-dtp_body-content-font: var(--font-inter);\n --uui-dtp_body-content-font-weight: 400;\n /* RangeDatePicker vars */\n --uui-rdtp-bg: var(--uui-control-bg);\n --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);\n /* Calendar vars */\n --uui-calendar-selected-hover: var(--uui-control-bg);\n --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);\n --uui-calendar-start-end-selected: var(--uui-control-border-checked);\n --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);\n --uui-calendar-text: var(--uui-control-text);\n --uui-calendar-text-filtered: var(--uui-control-text-disabled);\n --uui-calendar-bg-selected: var(--uui-secondary);\n --uui-calendar-content-font: var(--font-inter);\n --uui-calendar-content-font-weight: 400;\n --uui-calendar-weekday-font: var(--font-inter);\n --uui-calendar-weekday-font-weight: 400;\n --uui-calendar-selected_day-font: var(--font-inter);\n --uui-calendar-selected_day-font-weight: 600;\n /* tab-button-vars */\n --uui-tab-button-text: var(--uui-text-primary);\n --uui-tab-button-text-hover: var(--uui-primary);\n --uui-tab-button-text-active: var(--uui-primary);\n --uui-tab-button-text-disabled: var(--uui-text-disabled);\n --uui-tab-button-font: var(--font-inter);\n --uui-tab-button-font-weight: 600;\n /* radio-input-vars */\n --uui-radio-input-bg: var(--uui-control-bg);\n --uui-radio-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-radio-input-border: var(--uui-control-border);\n --uui-radio-input-border-checked: var(--uui-control-border-checked);\n --uui-radio-input-border-hover: var(--uui-control-border-hover);\n --uui-radio-input-border-disabled: var(--uui-control-border-disabled);\n --uui-radio-input-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-radio-input-label: var(--uui-control-label);\n --uui-radio-input-label-disabled: var(--uui-control-label-disabled);\n --uui-radio-input-fill-checked: var(--uui-control-border-checked);\n --uui-radio-input-fill-hover: var(--uui-control-border-hover);\n --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-radio-input-error: var(--uui-negative);\n --uui-radio-input-font: var(--font-inter);\n --uui-radio-input-font-weight: 400;\n /* Checkbox vars */\n --uui-checkbox-border: var(--uui-control-border);\n --uui-checkbox-border-hover: var(--uui-control-border-hover);\n --uui-checkbox-border-disabled: var(--uui-control-border-disabled);\n --uui-checkbox-border-checked: var(--uui-control-border-checked);\n --uui-checkbox-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-checkbox-bg: var(--uui-control-bg);\n --uui-checkbox-bg-checked: var(--uui-control-bg-checked);\n --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);\n --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);\n --uui-checkbox-error: var(--uui-negative);\n --uui-checkbox-fill: var(--uui-control-checkbox-icon);\n --uui-checkbox-label: var(--uui-control-label);\n --uui-checkbox-label-disabled: var(--uui-control-label-disabled);\n --uui-checkbox-border-radius: var(--uui-border-radius);\n --uui-checkbox-font: var(--font-inter);\n --uui-checkbox-font-weight: 400;\n /* Tag vars */\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-icon);\n --uui-tag-fill-hover: var(--uui-icon-hover);\n --uui-tag-count-bg: var(--uui-surface);\n --uui-tag-count: var(--uui-text-secondary);\n --uui-tag-label: var(--uui-text-secondary);\n --uui-tag-border-radius: 30px;\n --uui-tag-font: var(--font-inter);\n --uui-tag-font-weight: 400;\n --uui-tag-count-font: var(--font-inter);\n --uui-tag-count-font-weight: 500;\n /* TextArea vars */\n --uui-text-area-bg: var(--uui-control-bg);\n --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);\n --uui-text-area-border: var(--uui-control-border);\n --uui-text-area-border-disabled: var(--uui-control-border-disabled);\n --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);\n --uui-text-area-border-active: var(--uui-control-border-checked);\n --uui-text-area-border-error: var(--uui-negative);\n --uui-text-area-placeholder: var(--uui-control-placeholder);\n --uui-text-area-text: var(--uui-control-text);\n --uui-text-area-text-disabled: var(--uui-control-text-disabled);\n --uui-text-area-icon: var(--uui-icon);\n --uui-text-area-border-radius: var(--uui-border-radius);\n --uui-text-area-font: var(--font-inter);\n --uui-text-area-font-weight: 400;\n --uui-text-area-counter-font: var(--font-inter);\n --uui-text-area-counter-font-weight: 400;\n /* DropMarker vars */\n --uui-drop-marker: var(--uui-primary);\n --uui-drop-marker-blocked: var(--uui-error);\n /* Tooltip vars */\n --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgb(44 47 60 / 30%), 0 1px 4px 0 rgb(44 47 60 / 50%)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */\n --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);\n --uui-tooltip-border-radius: 8px;\n --uui-tooltip-font: var(--font-inter);\n --uui-tooltip-font-weight: 400;\n /* PickerInput vars */\n --uui-picker_input-bg: var(--uui-surface);\n /* PickerToggler vars */\n --uui-picker-toggler-bg: var(--uui-control-bg);\n --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);\n --uui-picker-toggler-border: var(--uui-control-border);\n --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);\n --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);\n --uui-picker-toggler-border-active: var(--uui-control-border-checked);\n --uui-picker-toggler-border-error: var(--uui-negative);\n --uui-picker-toggler-placeholder: var(--uui-control-placeholder);\n --uui-picker-toggler-text: var(--uui-control-text);\n --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);\n --uui-picker-toggler-icon: var(--uui-control-icon);\n --uui-picker-toggler-icon-disabled: var(--uui-control-icon-disabled);\n --uui-picker-toggler-icon-clickable: var(--uui-icon);\n --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);\n --uui-picker-toggler-border-radius: var(--uui-border-radius);\n --uui-picker-toggler-font: var(--font-inter);\n --uui-picker-toggler-font-weight: 400;\n /* Panel */\n --uui-panel-border-radius: 8px;\n --uui-panel-shadow: var(--uui-shadow-level-1);\n /* Modals */\n --uui-modals-border-radius: 8px;\n --uui-modals-overlay: rgb(29 30 38 / 80%);\n --uui-modals-shadow: var(--uui-shadow-level-3);\n --uui-modals-bg: var(--uui-surface);\n /* TextPlaceholder */\n --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);\n --uui-text-placeholder: var(--uui-skeleton);\n /* LabeledInput */\n --uui-labeled-input: var(--uui-text-primary);\n --uui-labeled-input-disabled: var(--uui-text-disabled);\n --uui-labeled-input-error: var(--uui-error);\n --uui-labeled-input-fill: var(--uui-icon);\n --uui-labeled-input-info-fill: var(--uui-icon);\n --uui-labeled-input-optional-text: var(--uui-text-secondary);\n --uui-labeled-input-asterisk: var(--uui-error);\n --uui-labeled-input-font: var(--font-inter);\n --uui-labeled-input-font-weight: 500;\n --uui-labeled-input-optional-font: var(--font-inter);\n --uui-labeled-input-optional-font-weight: 300;\n --uui-labeled-input-invalid-msg-font: var(--font-inter);\n --uui-labeled-input-invalid-msg-font-weight: 400;\n /* Accordion */\n --uui-accordion-bg: var(--uui-surface);\n --uui-accordion-border: var(--uui-divider);\n --uui-accordion-border-radius: 6px;\n --uui-accordion-text: var(--uui-text-primary);\n --uui-accordion-text-disabled: var(--uui-text-disabled);\n --uui-accordion-icon: var(--uui-icon);\n --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);\n --uui-accordion-focus: var(--uui-primary);\n --uui-accordion-shadow: var(--uui-shadow-level-1);\n --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);\n --uui-accordion-toggler-font: var(--font-inter);\n --uui-accordion-toggler-font-weight: 500;\n --uui-accordion-body-font: var(--font-inter);\n --uui-accordion-body-font-weight: 400;\n /* Switch */\n --uui-switch-bg: var(--uui-control_switch-bg);\n --uui-switch-border-hover: var(--uui-control_switch-border-hover);\n --uui-switch-bg-checked: var(--uui-control-bg-checked);\n --uui-switch-bg-hover: var(--uui-control-bg-hover);\n --uui-switch-bg-disabled: var(--uui-control-bg-disabled);\n --uui-switch-bg-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-switch-bg-checked-disabled: var(--uui-control-bg-checked-disabled);\n --uui-switch-border: var(--uui-control-border);\n --uui-switch-border-checked: var(--uui-control-border-checked);\n --uui-switch-border-disabled: var(--uui-control-border-disabled);\n --uui-switch-border-checked-hover: var(--uui-control-border-checked-hover);\n --uui-switch-border-checked-hover-copy: var(--uui-control-border-checked-hover);\n --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);\n --uui-switch-label: var(--uui-control-label);\n --uui-switch-label-disabled: var(--uui-control-label-disabled);\n --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);\n --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);\n --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);\n --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);\n --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);\n --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);\n --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);\n --uui-switch-font: var(--font-inter);\n --uui-switch-font-weight: 400;\n /* DropdownContainer */\n --uui-dropdown-container-border-radius: 6px;\n --uui-dropdown-container-shadow: var(--uui-shadow-level-2);\n --uui-dropdown-container-bg: var(--uui-surface);\n /* DropdownMenu */\n --uui-dropdown-menu-bg: var(--uui-surface);\n --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);\n --uui-dropdown-menu-splitter: var(--uui-divider);\n --uui-dropdown-menu-item-hover: var(--uui-surface-hover);\n --uui-dropdown-menu-item-active: var(--uui-surface-hover);\n --uui-dropdown-menu-item-text: var(--uui-text-primary);\n --uui-dropdown-menu-body-font: var(--font-inter);\n --uui-dropdown-menu-body-font-weight: 400;\n --uui-dropdown-menu-item-font: var(--font-inter);\n --uui-dropdown-menu-item-font-weight: 400;\n /* MainMenu */\n --uui-main_menu-text: var(--uui-text-primary);\n --uui-main_menu-bg: #F0F7FCD9;\n --uui-main_menu-hover: #FFF;\n --uui-main_menu-active: #FFF;\n --uui-main_menu-border-active: var(--uui-primary);\n --uui-main_menu-dropdown-bg: var(--uui-surface);\n --uui-main_menu-dropdown-hover: var(--uui-primary);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n --uui-main_menu-search-bg: var(--uui-secondary-darkest);\n --uui-main_menu-search-border: var(--uui-secondary-darkest);\n --uui-main_menu-search-placeholder: var(--uui-text-disabled);\n --uui-main_menu-search-text: var(--uui-text-contrast);\n --uui-main_menu-search-icon: var(--uui-icon-disabled);\n --uui-main_menu-icon: var(--uui-text-primary);\n --uui-main_menu-icon-hover: var(--uui-text-primary);\n --uui-main_menu-icon-active: var(--uui-text-primary);\n --uui-main_menu-font: var(--font-museo-sans);\n --uui-main_menu-font-weight: 500;\n --uui-main_menu-search-font: var(--font-inter);\n --uui-main_menu-search-font-weight: 400;\n /* BurgerMenu */\n --uui-burger_menu-bg: var(--uui-surface);\n --uui-burger_menu-bg-hover: var(--uui-surface-light-hover);\n --uui-burger_menu-caption: var(--uui-contrast);\n --uui-burger_menu-caption-hover: var(--uui-primary);\n --uui-burger_menu-overlay: var(--uui-overlay);\n --uui-burger_icon: var(--uui-text-primary);\n --uui-burger_item: var(--uui-text-brand);\n /* BurgerGroupHeader */\n --uui-burger_group-text: var(--uui-text-disabled);\n --uui-burger_group-bg: var(--uui-surface-contrast);\n --uui-burger_group-line: var(--uui-divider);\n --uui-burger_group-font: var(--font-inter);\n --uui-burger_group-font-weight: 400;\n /* BurgerButton */\n --uui-burger_btn_caption: var(--uui-text-contrast);\n --uui-burger_btn_caption-hover: var(--uui-primary);\n --uui-burger_btn_caption-active: var(--uui-primary);\n --uui-burger_btn-border: var(--uui-divider-light);\n --uui-burger_btn-font: var(--font-inter);\n --uui-burger_btn-font-weight: 400;\n /* BurgerSearch */\n --uui-burger_search: var(--uui-text-contrast);\n --uui-burger_search-fill: var(--uui-text-disabled);\n --uui-burger_search-bg: var(--uui-surface-contrast);\n --uui-burger_search-placeholder: var(--uui-text-disabled);\n --uui-burger_search-font: var(--font-inter);\n --uui-burger_search-font-weight: 400;\n /* NumericInput */\n --uui-numeric-input-bg: var(--uui-control-bg);\n --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-numeric-input-border: var(--uui-control-border);\n --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);\n --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-numeric-input-border-active: var(--uui-control-border-checked);\n --uui-numeric-input-border-error: var(--uui-negative);\n --uui-numeric-input-placeholder: var(--uui-control-placeholder);\n --uui-numeric-input-text: var(--uui-control-text);\n --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);\n --uui-numeric-input-icon-clickable: var(--uui-icon);\n --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-numeric-input-border-radius: var(--uui-border-radius);\n /* TimePicker */\n --uui-time-picker-bg: var(--uui-control-bg);\n --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);\n --uui-time-picker-border: var(--uui-control-border);\n --uui-time-picker-border-disabled: var(--uui-control-border-disabled);\n --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);\n --uui-time-picker-border-active: var(--uui-control-border-checked);\n --uui-time-picker-border-error: var(--uui-negative);\n --uui-time-picker-placeholder: var(--uui-control-placeholder);\n --uui-time-picker-text: var(--uui-control-text);\n --uui-time-picker-text-disabled: var(--uui-control-text-disabled);\n --uui-time-picker-icon-clickable: var(--uui-icon);\n --uui-time-picker-icon-clickable-hover: var(--uui-icon-hover);\n --uui-time-picker-border-radius: var(--uui-border-radius);\n /* SearchPicker */\n --uui-search-input-bg: var(--uui-control-bg);\n --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);\n --uui-search-input-border: var(--uui-control-border);\n --uui-search-input-border-disabled: var(--uui-control-border-disabled);\n --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);\n --uui-search-input-border-active: var(--uui-control-border-checked);\n --uui-search-input-border-error: var(--uui-negative);\n --uui-search-input-placeholder: var(--uui-control-placeholder);\n --uui-search-input-text: var(--uui-control-text);\n --uui-search-input-text-disabled: var(--uui-control-text-disabled);\n --uui-search-input-icon-clickable: var(--uui-icon);\n --uui-search-input-icon-clickable-hover: var(--uui-icon-hover);\n --uui-search-input-icon-disabled: var(--uui-icon-disabled);\n --uui-search-input-border-radius: var(--uui-border-radius);\n /* Popover */\n --uui-popover-shadow: var(--uui-shadow-level-2);\n /* Footer */\n --uui-footer-bg: var(--uui-surface-contrast);\n /* FilterPanelItemToggler vars */\n --uui-filters-toggler-border: var(--uui-surface);\n --uui-filters-toggler-border-hover: var(--blue-0);\n --uui-filters-toggler-border-radius: 8px;\n --uui-filters-toggler-bg: var(--uui-surface);\n --uui-filters-toggler-bg-hover: var(--blue-0);\n --uui-filters-toggler-text: var(--uui-text-brand);\n --uui-filters-toggler-label: var(--uui-text-secondary);\n --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);\n --uui-filters-toggler-shadow: var(--uui-shadow-level-1);\n --uui-filters-toggler-font: var(--font-inter);\n --uui-filters-toggler-font-weight: 400;\n --uui-filters-panel-header-font: var(--font-inter);\n --uui-filters-panel-header-font-weight: 400;\n /* NotificationCard */\n --uui-notification-card-border-radius: 8px;\n --uui-notification-card-border-width: 0;\n --uui-notification-card-border-top-width: 6px;\n --uui-notification-card-shadow: var(--uui-shadow-level-2);\n /* Alert */\n --uui-alert-border-radius: 6px;\n /* Panel */\n --uui-panel-bg: var(--uui-surface);\n /* Spinner */\n --uui-spinner: var(--uui-primary);\n /* Blocker */\n --uui-blocker-bg: var(--uui-background);\n --uui-blocker-bg-with-opacity: #F5F6FA80;\n /* FlexRow */\n --uui-flex-row-border-bottom: 1px solid var(--uui-divider);\n /* DataTable vars */\n --uui-dt-border: var(--uui-divider-light);\n --uui-dt-cell-bg: transparent;\n --uui-dt-cell-bg-resize: #EF55331F;\n --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);\n --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);\n --uui-dt-cell-border-focus: var(--uui-control-border-checked);\n --uui-dt-row-bg: var(--uui-surface);\n --uui-dt-row-bg-hover: var(--uui-surface-light-hover);\n --uui-dt-row-bg-invalid: #FEF7F6;\n --uui-dt-row-bg-selected: #EBF7FF;\n --uui-dt-header-row-bg: var(--uui-surface-light);\n --uui-dt-header-row-bg-hover: var(--uui-surface-hover);\n --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);\n --uui-dt_header-drop_marker: var(--uui-primary);\n --uui-dt-header-cell-font: var(--font-inter);\n --uui-dt-header-cell-font-weight: 500;\n /* AvatarStack */\n --uui-avatar-stack-font: var(--font-inter);\n --uui-avatar-stack-font-weight: 400;\n /* Badge */\n --uui-badge-font: var(--font-museo-sans);\n --uui-badge-font-weight: 700;\n --uui-badge-count-font: var(--font-museo-sans);\n --uui-badge-count-font-weight: 700;\n /* Pagination */\n --uui-pagination-font: var(--font-inter);\n --uui-pagination-font-weight: 400;\n /* ------------------------------------ */\n}\n.uui-theme-vanilla_thunder .tooltip-contrast {\n --uui-tooltip-bg: var(--uui-surface-inverted);\n --uui-tooltip-text: var(--uui-contrast);\n}\n.uui-theme-vanilla_thunder .tooltip-default {\n --uui-tooltip-bg: var(--uui-surface);\n --uui-tooltip-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .tooltip-critical {\n --uui-tooltip-bg: var(--uui-error-dark);\n --uui-tooltip-text: var(--uui-contrast);\n}\n.uui-theme-vanilla_thunder .button-primary {\n --uui-btn-bg: var(--uui-primary);\n --uui-btn-bg-hover: var(--uui-primary-dark);\n --uui-btn-bg-active: var(--uui-primary-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--blue-0);\n --uui-btn-bg-halftone-active: var(--uui-primary-lightest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border: var(--uui-primary);\n --uui-btn-border-hover: var(--uui-primary-dark);\n --uui-btn-border-active: var(--uui-primary-darkest);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n}\n.uui-theme-vanilla_thunder .button-accent {\n --uui-btn-bg: var(--uui-accent);\n --uui-btn-bg-hover: var(--uui-accent-dark);\n --uui-btn-bg-active: var(--uui-accent-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);\n --uui-btn-bg-halftone-active: var(--uui-accent-light);\n --uui-btn-border: var(--uui-accent);\n --uui-btn-border-hover: var(--uui-accent-dark);\n --uui-btn-border-active: var(--uui-accent-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n}\n.uui-theme-vanilla_thunder .button-negative {\n --uui-btn-bg: var(--uui-negative);\n --uui-btn-bg-hover: var(--uui-negative-dark);\n --uui-btn-bg-active: var(--uui-negative-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);\n --uui-btn-bg-halftone-active: var(--uui-negative-light);\n --uui-btn-border: var(--uui-negative);\n --uui-btn-border-hover: var(--uui-negative-dark);\n --uui-btn-border-active: var(--uui-negative-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n}\n.uui-theme-vanilla_thunder .button-secondary {\n --uui-btn-bg: var(--uui-secondary);\n --uui-btn-bg-hover: var(--uui-secondary-dark);\n --uui-btn-bg-active: var(--uui-secondary-darkest);\n --uui-btn-bg-halftone: var(--uui-button-bg-halftone);\n --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);\n --uui-btn-bg-halftone-active: var(--uui-secondary-light);\n --uui-btn-border: var(--uui-secondary);\n --uui-btn-border-hover: var(--uui-secondary-dark);\n --uui-btn-border-active: var(--uui-secondary-darkest);\n --uui-btn-bg-disabled: var(--uui-disabled);\n --uui-btn-border-disabled: var(--uui-disabled);\n --uui-btn-caption: var(--uui-contrast);\n --uui-btn-caption-halftone: var(--uui-text-primary);\n --uui-btn-caption-disabled: var(--uui-button-caption-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-info {\n --uui-icon-btn: var(--uui-info);\n --uui-icon-btn-hover: var(--uui-info-dark);\n --uui-icon-btn-active: var(--uui-info-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-success {\n --uui-icon-btn: var(--uui-success);\n --uui-icon-btn-hover: var(--uui-success-dark);\n --uui-icon-btn-active: var(--uui-success-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-warning {\n --uui-icon-btn: var(--uui-warning);\n --uui-icon-btn-hover: var(--uui-warning-dark);\n --uui-icon-btn-active: var(--uui-warning-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-error {\n --uui-icon-btn: var(--uui-error);\n --uui-icon-btn-hover: var(--uui-error-dark);\n --uui-icon-btn-active: var(--uui-error-darkest);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-secondary {\n --uui-icon-btn: var(--gray50);\n --uui-icon-btn-hover: var(--uui-color-night500-800);\n --uui-icon-btn-active: var(--uui-color-night500-900);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .icon-button-default {\n --uui-icon-btn: var(--gray60);\n --uui-icon-btn-hover: var(--uui-color-night600-800);\n --uui-icon-btn-active: var(--uui-color-night600-900);\n --uui-icon-btn-disabled: var(--uui-icon-disabled);\n}\n.uui-theme-vanilla_thunder .notification-card-warning {\n --uui-notification-card-fill: var(--uui-warning);\n --uui-notification-card-border: var(--uui-warning);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .notification-card-success {\n --uui-notification-card-fill: var(--uui-success);\n --uui-notification-card-border: var(--uui-success);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .notification-card-info {\n --uui-notification-card-fill: var(--uui-info);\n --uui-notification-card-border: var(--uui-info);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .notification-card-error {\n --uui-notification-card-fill: var(--uui-error);\n --uui-notification-card-border: var(--uui-error);\n --uui-notification-card-bg: var(--uui-surface);\n --uui-notification-card-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .alert-error {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #F5E5E9;\n --uui-alert-border: var(--uui-error);\n --uui-alert-icon: var(--uui-error);\n}\n.uui-theme-vanilla_thunder .alert-warning {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #F6EEE1;\n --uui-alert-border: var(--uui-warning);\n --uui-alert-icon: var(--uui-warning);\n}\n.uui-theme-vanilla_thunder .alert-success {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #E7EEE1;\n --uui-alert-border: var(--uui-success);\n --uui-alert-icon: var(--uui-success);\n}\n.uui-theme-vanilla_thunder .alert-info {\n --uui-alert-text: var(--uui-text-primary);\n --uui-alert-bg: #DCEDF6;\n --uui-alert-border: var(--uui-info);\n --uui-alert-icon: var(--uui-info);\n}\n.uui-theme-vanilla_thunder .badge-default {\n --uui-badge-bg: var(--night300);\n --uui-badge-bg-hover: var(--night400);\n --uui-badge-caption-solid: var(--uui-text-primary);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--night200);\n --uui-badge-bg-halftone-hover: var(--night300);\n --uui-badge-border-halftone: var(--night400);\n --uui-badge-border-halftone-hover: var(--night500);\n --uui-badge-caption-halftone: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .badge-info {\n --uui-badge-bg: var(--uui-info);\n --uui-badge-bg-hover: var(--uui-info-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-info-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-info-light);\n --uui-badge-border-halftone: var(--uui-info-light);\n --uui-badge-border-halftone-hover: var(--uui-info);\n --uui-badge-caption-halftone: var(--uui-info-darkest);\n}\n.uui-theme-vanilla_thunder .badge-success {\n --uui-badge-bg: var(--uui-success);\n --uui-badge-bg-hover: var(--uui-success-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-success-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-success-light);\n --uui-badge-border-halftone: var(--uui-success-light);\n --uui-badge-border-halftone-hover: var(--uui-success);\n --uui-badge-caption-halftone: var(--uui-success-darkest);\n}\n.uui-theme-vanilla_thunder .badge-warning {\n --uui-badge-bg: var(--uui-warning);\n --uui-badge-bg-hover: var(--uui-warning-dark);\n --uui-badge-caption-solid: var(--uui-text-primary);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-warning-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-warning-light);\n --uui-badge-border-halftone: var(--uui-warning-light);\n --uui-badge-border-halftone-hover: var(--uui-warning);\n --uui-badge-caption-halftone: var(--uui-warning-darkest);\n}\n.uui-theme-vanilla_thunder .badge-error {\n --uui-badge-bg: var(--uui-error);\n --uui-badge-bg-hover: var(--uui-error-dark);\n --uui-badge-caption-solid: var(--white);\n --uui-badge-count-bg: var(--white);\n --uui-badge-count: var(--uui-text-secondary);\n --uui-badge-bg-halftone: var(--uui-error-lightest);\n --uui-badge-bg-halftone-hover: var(--uui-error-light);\n --uui-badge-border-halftone: var(--uui-error-light);\n --uui-badge-border-halftone-hover: var(--uui-error);\n --uui-badge-caption-halftone: var(--uui-error-darkest);\n}\n.uui-theme-vanilla_thunder .informer-default {\n --uui-informer-bg: var(--uui-secondary-light);\n --uui-informer-caption: var(--uui-text-secondary);\n}\n.uui-theme-vanilla_thunder .informer-focus {\n --uui-informer-bg: var(--uui-negative);\n --uui-informer-caption: var(--uui-caption);\n}\n.uui-theme-vanilla_thunder .informer-white {\n --uui-informer-bg: var(--uui-surface);\n --uui-informer-caption: var(--uui-text-secondary);\n}\n.uui-theme-vanilla_thunder .uui-text-brand {\n --uui-text: var(--uui-text-brand);\n}\n.uui-theme-vanilla_thunder .uui-text-primary {\n --uui-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-text-secondary {\n --uui-text: var(--uui-text-secondary);\n}\n.uui-theme-vanilla_thunder .uui-text-disabled {\n --uui-text: var(--uui-text-disabled);\n}\n.uui-theme-vanilla_thunder .uui-text-contrast {\n --uui-text: var(--uui-text-contrast);\n}\n.uui-theme-vanilla_thunder .uui-font-inter, .uui-theme-vanilla_thunder .uui-font-regular {\n --uui-text-font: var(--font-inter);\n}\n.uui-theme-vanilla_thunder .uui-font-museo-sans {\n --uui-text-font: var(--font-museo-sans);\n}\n.uui-theme-vanilla_thunder .uui-font-semibold {\n --uui-text-font: var(--font-museo-sans);\n --uui-text-font-weight: 700;\n}\n.uui-theme-vanilla_thunder .dropdown-container-white {\n --uui-dropdown-container-bg: var(--white);\n}\n.uui-theme-vanilla_thunder .dropdown-container-night700 {\n --uui-dropdown-container-bg: var(--night700);\n}\n.uui-theme-vanilla_thunder .flex-row-background-white {\n --uui-flex-row-bg: var(--uui-surface);\n}\n.uui-theme-vanilla_thunder .flex-row-background-night50 {\n --uui-flex-row-bg: var(--night50);\n}\n.uui-theme-vanilla_thunder .flex-row-background-night100 {\n --uui-flex-row-bg: var(--night100);\n}\n.uui-theme-vanilla_thunder .flex-row-background-none {\n --uui-flex-row-bg: transparent;\n}\n.uui-theme-vanilla_thunder .panel-white {\n --uui-panel-bg: var(--uui-surface);\n}\n.uui-theme-vanilla_thunder .panel-night50 {\n --uui-panel-bg: var(--night50);\n}"]}
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@epam/assets",
3
- "version": "5.0.0-alpha.4",
3
+ "version": "5.0.0",
4
4
  "description": "EPAM Assets Library",
5
5
  "author": "EPAM",
6
6
  "license": "MIT",
7
7
  "scripts": {
8
- "build": "node ../uui-build/scripts/buildModule",
9
- "buildCss": "node ../uui-build/scripts/compileScss.js ./build/theme:./build/css/theme",
8
+ "build": "node ../uui-build/scripts/buildModule && yarn buildTheme",
9
+ "buildTheme": "node ../uui-build/scripts/compileScss.js ./theme:./build/css/theme",
10
10
  "prepublish": "yarn build"
11
11
  },
12
12
  "repository": {
13
13
  "type": "git",
14
14
  "url": "https://github.com/epam/UUI"
15
15
  },
16
- "gitHead": "118d3952b0d211cb2884442c4418daa66dba72b2",
16
+ "gitHead": "b29aa003ee790707d40d3a3e69cd120a41fb6801",
17
17
  "publishConfig": {
18
18
  "directory": "build"
19
19
  }
package/scss/font-faces.scss CHANGED
@@ -1,106 +1,3 @@
1
- @font-face {
2
- font-family: 'Oswald Regular';
3
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-regular.eot');
4
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-regular.eot?#iefix') format('embedded-opentype'),
5
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-regular.woff') format('woff'),
6
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-regular.ttf') format('truetype'),
7
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-regular.svg') format('svg');
8
- font-weight: normal;
9
- font-style: normal;
10
- }
1
+ // this file is deprecated, please use 'epam-assets/scss/loveship/font-faces' directly instead.
2
+ @forward './loveship/font-faces';
11
3
 
12
- @font-face {
13
- font-family: 'Oswald Bold';
14
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-bold.eot');
15
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-bold.eot?#iefix') format('embedded-opentype'),
16
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-bold.woff') format('woff'),
17
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-bold.ttf') format('truetype'),
18
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-bold.svg') format('svg');
19
- font-weight: normal;
20
- font-style: normal;
21
- }
22
-
23
- @font-face {
24
- font-family: 'Oswald Light';
25
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-light.eot');
26
- src: url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-light.eot?#iefix') format('embedded-opentype'),
27
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-light.woff') format('woff'),
28
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-light.ttf') format('truetype'),
29
- url('https://static.cdn.epam.com/projects/epm-uui/fonts/font-oswald/oswald-light.svg') format('svg');
30
- font-weight: normal;
31
- font-style: normal;
32
- }
33
-
34
- @font-face {
35
- font-family: 'Sans Regular';
36
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
37
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
38
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
39
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
40
- font-weight: normal;
41
- font-style: normal;
42
- }
43
-
44
- @font-face {
45
- font-family: 'Sans Light';
46
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Light.ttf.woff2') format('woff2'),
47
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Light.otf.woff') format('woff'),
48
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Light.otf') format('opentype'),
49
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Light.ttf') format('truetype');
50
- font-weight: normal;
51
- font-style: normal;
52
- }
53
-
54
- @font-face {
55
- font-family: 'Sans Bold';
56
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Bold.ttf.woff2') format('woff2'),
57
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Bold.otf.woff') format('woff'),
58
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Bold.otf') format('opentype'),
59
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Bold.ttf') format('truetype');
60
- font-weight: normal;
61
- font-style: normal;
62
- }
63
-
64
- @font-face {
65
- font-family: 'Sans Semibold';
66
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
67
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
68
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
69
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
70
- font-weight: normal;
71
- font-style: normal;
72
- }
73
-
74
- @font-face {
75
- font-family: 'Sans Italic';
76
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
77
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
78
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
79
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
80
- font-weight: normal;
81
- font-style: normal;
82
- }
83
-
84
- @font-face {
85
- font-family: 'Roboto Condensed';
86
- font-style: normal;
87
- font-weight: normal;
88
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoCondensed-Regular.ttf') format('truetype');
89
- }
90
-
91
- @font-face {
92
- font-family: 'Roboto Mono';
93
- font-style: normal;
94
- font-weight: normal;
95
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
96
- }
97
-
98
- @font-face {
99
- font-family: 'Redacted';
100
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
101
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
102
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
103
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
104
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
105
- font-display: block;
106
- }
package/scss/fonts.scss CHANGED
@@ -1,13 +1,2 @@
1
- @use './font-faces' as *;
2
-
3
- $font-sans: 'Sans Regular', Arial, sans-serif;
4
- $font-sans-light: 'Sans Light', Arial, sans-serif;
5
- $font-sans-bold: 'Sans Bold', Arial, sans-serif;
6
- $font-sans-semibold: 'Sans Semibold', Arial, sans-serif;
7
- $font-sans-italic: 'Sans Italic', Arial, sans-serif;
8
- $font-oswald: 'Oswald Regular', Arial, sans-serif;
9
- $font-oswald-light: 'Oswald Light', Arial, sans-serif;
10
- $font-oswald-bold: 'Oswald Bold', Arial, sans-serif;
11
- $font-roboto-condensed: 'Roboto Condensed', Arial, sans-serif;
12
- $font-redacted: 'Redacted';
13
- $font-roboto-mono: 'Roboto Mono', Arial, sans-serif;
1
+ // this file is deprecated, please use 'epam-assets/scss/loveship/fonts' directly instead.
2
+ @forward './loveship/fonts';
package/scss/index.scss CHANGED
@@ -1,9 +1,4 @@
1
- @forward './fonts';
2
- @forward './typography';
3
- @forward './effects';
4
- @forward './text-size';
5
- @forward './control-size';
6
- @forward './control-layout';
7
- @forward './loveship-colors';
8
- @forward './contrast';
9
- @forward './dnd';
1
+ // This file is deprecated, please use direct imports from 'epam-assets/scss/loveship/*' instead.
2
+ @forward './loveship/fonts';
3
+ @forward './loveship/typography';
4
+ @forward './loveship/colors';
package/scss/loveship/colors.scss ADDED
@@ -0,0 +1,121 @@
1
+ // Main Colors
2
+ $sky-soft: #F5FDFF;
3
+ $sky-lightest: #E1F4FA;
4
+ $sky-light: #A0DDEE;
5
+ $sky: #009ECC;
6
+ $sky-dark: #0086AD;
7
+ $sky-darkest: #006B8A;
8
+
9
+ $grass-soft: #FCFFF5;
10
+ $grass-lightest: #EBF3D8;
11
+ $grass-light: #C1E288;
12
+ $grass: #67A300;
13
+ $grass-dark: #528500;
14
+ $grass-darkest: #396F1F;
15
+
16
+ $sun-soft: #FFFCF5;
17
+ $sun-lightest: #FFEDC9;
18
+ $sun-light: #FFD785;
19
+ $sun: #FCAA00;
20
+ $sun-dark: #FF9000;
21
+ $sun-darkest: #BD5800;
22
+
23
+ $fire-soft: #FEF6F6;
24
+ $fire-lightest: #FDE1E1;
25
+ $fire-light: #FBB6B6;
26
+ $fire: #FF4242;
27
+ $fire-dark: #E22A2A;
28
+ $fire-darkest: #AD0000;
29
+
30
+ // Secondary Colors
31
+ $white: #FFFFFF;
32
+
33
+ $yellow-5: #FFFFF0;
34
+ $yellow-10: #FFFECC;
35
+ $yellow-20: #FFFCA4;
36
+ $yellow-30: #FDD63B;
37
+ $yellow-40: #F9B71D;
38
+ $yellow-50: #D3910C;
39
+
40
+ $orange-5: #FEF8F4;
41
+ $orange-10: #FFE8D7;
42
+ $orange-20: #FFCCA7;
43
+ $orange-30: #FF8B3E;
44
+ $orange-40: #F76B0D;
45
+ $orange-50: #BD4B00;
46
+
47
+ $fuchia-5: #FFF7FB;
48
+ $fuchia-10: #F9D8E7;
49
+ $fuchia-20: #EDADC8;
50
+ $fuchia-30: #EA4386;
51
+ $fuchia-40: #D61E68;
52
+ $fuchia-50: #AE1955;
53
+
54
+ $purple-5: #FDF6FE;
55
+ $purple-10: #F2CCFA;
56
+ $purple-20: #E79DF5;
57
+ $purple-30: #B114D1;
58
+ $purple-40: #860F9E;
59
+ $purple-50: #5E0B6F;
60
+
61
+ $lavanda-5: #F8F6FE;
62
+ $lavanda-10: #DBCCFA;
63
+ $lavanda-20: #BB9DF5;
64
+ $lavanda-30: #773CEC;
65
+ $lavanda-40: #5514D6;
66
+ $lavanda-50: #40109E;
67
+
68
+ $cobalt-5: #F8FAFF;
69
+ $cobalt-10: #D9E2FC;
70
+ $cobalt-20: #AEC0F5;
71
+ $cobalt-30: #0F98FF;
72
+ $cobalt-40: #006FE5;
73
+ $cobalt-50: #0954A5;
74
+
75
+ $cyan-5: #F5FBFF;
76
+ $cyan-10: #D1FAFA;
77
+ $cyan-20: #AAEEEE;
78
+ $cyan-30: #14CCCC;
79
+ $cyan-40: #0F9E9E;
80
+ $cyan-50: #0B6F6F;
81
+
82
+ $mint-5: #F2FCF5;
83
+ $mint-10: #DDF3E4;
84
+ $mint-20: #B4DFC4;
85
+ $mint-30: #4FC48C;
86
+ $mint-40: #2E9E68;
87
+ $mint-50: #236E4A;
88
+
89
+ /* Night scale */
90
+ $night50: #FAFAFC;
91
+ $night100: #F5F6FA;
92
+ $night200: #EBEDF5;
93
+ $night300: #E1E3EB;
94
+ $night400: #CED0DB;
95
+ $night500: #ACAFBF;
96
+ $night600: #6C6F80;
97
+ $night700: #474A59;
98
+ $night800: #303240;
99
+ $night900: #1D1E26;
100
+
101
+ $epam-basic-color-names: (
102
+ sky-soft: $sky-soft, sky-lightest: $sky-lightest, sky-light: $sky-light, sky: $sky, sky-dark: $sky-dark, sky-darkest: $sky-darkest,
103
+ grass-soft: $grass-soft, grass-lightest: $grass-lightest, grass-light: $grass-light, grass: $grass, grass-dark: $grass-dark, grass-darkest: $grass-darkest,
104
+ sun-soft: $sun-soft, sun-lightest: $sun-lightest, sun-light: $sun-light, sun: $sun, sun-dark: $sun-dark, sun-darkest: $sun-darkest,
105
+ fire-soft: $fire-soft, fire-lightest: $fire-lightest, fire-light: $fire-light, fire: $fire, fire-dark: $fire-dark, fire-darkest: $fire-darkest
106
+ );
107
+
108
+ $epam-grayscale-color-names: (
109
+ night50: $night50, night100: $night100, night200: $night200, night300: $night300, night400: $night400, night500: $night500, night600: $night600, night700: $night700, night800: $night800, night900: $night900
110
+ );
111
+
112
+ $epam-additional-color-names: (
113
+ yellow-5: $yellow-5, yellow-10: $yellow-10, yellow-20: $yellow-20, yellow-30: $yellow-30, yellow-40: $yellow-40, yellow-50: $yellow-50,
114
+ orange-5: $orange-5, orange-10: $orange-10, orange-20: $orange-20, orange-30: $orange-30, orange-40: $orange-40, orange-50: $orange-50,
115
+ fuchia-5: $fuchia-5, fuchia-10: $fuchia-10, fuchia-20: $fuchia-20, fuchia-30: $fuchia-30, fuchia-40: $fuchia-40, fuchia-50: $fuchia-50,
116
+ purple-5: $purple-5, purple-10: $purple-10, purple-20: $purple-20, purple-30: $purple-30, purple-40: $purple-40, purple-50: $purple-50,
117
+ lavanda-5: $lavanda-5, lavanda-10: $lavanda-10, lavanda-20: $lavanda-20, lavanda-30: $lavanda-30, lavanda-40: $lavanda-40, lavanda-50: $lavanda-50,
118
+ cobalt-5: $cobalt-5, cobalt-10: $cobalt-10, cobalt-20: $cobalt-20, cobalt-30: $cobalt-30, cobalt-40: $cobalt-40, cobalt-50: $cobalt-50,
119
+ cyan-5: $cyan-5, cyan-10: $cyan-10, cyan-20: $cyan-20, cyan-30: $cyan-30, cyan-40: $cyan-40, cyan-50: $cyan-50,
120
+ mint-5: $mint-5, mint-10: $mint-10, mint-20: $mint-20, mint-30: $mint-30, mint-40: $mint-40, mint-50: $mint-50,
121
+ );
package/scss/loveship/font-faces.scss ADDED
@@ -0,0 +1,66 @@
1
+ @font-face {
2
+ font-family: 'Sans Regular';
3
+ font-style: normal;
4
+ font-stretch: normal;
5
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
6
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
7
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
8
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
9
+ }
10
+
11
+ @font-face {
12
+ font-family: 'Sans Light';
13
+ font-style: normal;
14
+ font-stretch: normal;
15
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Light.ttf.woff2') format('woff2'),
16
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Light.otf.woff') format('woff'),
17
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Light.otf') format('opentype'),
18
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Light.ttf') format('truetype');
19
+ }
20
+
21
+ @font-face {
22
+ font-family: 'Sans Bold';
23
+ font-style: normal;
24
+ font-stretch: normal;
25
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Bold.ttf.woff2') format('woff2'),
26
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Bold.otf.woff') format('woff'),
27
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Bold.otf') format('opentype'),
28
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Bold.ttf') format('truetype');
29
+ }
30
+
31
+ @font-face {
32
+ font-family: 'Sans Semibold';
33
+ font-style: normal;
34
+ font-stretch: normal;
35
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
36
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
37
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
38
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
39
+ }
40
+
41
+ @font-face {
42
+ font-family: 'Sans Italic';
43
+ font-style: normal;
44
+ font-stretch: normal;
45
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
46
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
47
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
48
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
49
+ }
50
+
51
+ @font-face {
52
+ font-family: 'Roboto Condensed';
53
+ font-style: normal;
54
+ font-weight: normal;
55
+ src: url('https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2') format('woff2');
56
+ }
57
+
58
+ @font-face {
59
+ font-family: 'Redacted';
60
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
61
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
62
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
63
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
64
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
65
+ font-display: block;
66
+ }
package/scss/loveship/fonts.scss ADDED
@@ -0,0 +1,7 @@
1
+ $font-sans: 'Sans Regular', Arial, sans-serif;
2
+ $font-sans-light: 'Sans Light', Arial, sans-serif;
3
+ $font-sans-bold: 'Sans Bold', Arial, sans-serif;
4
+ $font-sans-semibold: 'Sans Semibold', Arial, sans-serif;
5
+ $font-sans-italic: 'Sans Italic', Arial, sans-serif;
6
+ $font-roboto-condensed: 'Roboto Condensed', Arial, sans-serif;
7
+ $font-redacted: 'Redacted', Arial, sans-serif;