@epam/assets 5.14.1-alpha.0 → 6.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.
- package/css/theme/no-fonts/theme_electric.css +2 -0
- package/css/theme/no-fonts/theme_electric.css.map +1 -1
- package/css/theme/no-fonts/theme_loveship.css +6 -4
- package/css/theme/no-fonts/theme_loveship.css.map +1 -1
- package/css/theme/no-fonts/theme_loveship_dark.css +2 -0
- package/css/theme/no-fonts/theme_loveship_dark.css.map +1 -1
- package/css/theme/no-fonts/theme_promo.css +5 -3
- package/css/theme/no-fonts/theme_promo.css.map +1 -1
- package/css/theme/theme_eduverse_dark.css +2 -0
- package/css/theme/theme_eduverse_dark.css.map +1 -1
- package/css/theme/theme_eduverse_light.css +2 -0
- package/css/theme/theme_eduverse_light.css.map +1 -1
- package/css/theme/theme_electric.css +2 -0
- package/css/theme/theme_electric.css.map +1 -1
- package/css/theme/theme_fresh_4px.css +53 -7
- package/css/theme/theme_fresh_4px.css.map +1 -1
- package/css/theme/theme_loveship.css +6 -4
- package/css/theme/theme_loveship.css.map +1 -1
- package/css/theme/theme_loveship_dark.css +2 -0
- package/css/theme/theme_loveship_dark.css.map +1 -1
- package/css/theme/theme_promo.css +5 -3
- package/css/theme/theme_promo.css.map +1 -1
- package/css/theme/theme_vanilla_thunder.css +1 -0
- package/css/theme/theme_vanilla_thunder.css.map +1 -1
- package/css/theme/variables/fresh_4px.css.map +1 -1
- package/icons/content-moon-fill.svg +1 -0
- package/icons/content-moon-outline.svg +1 -0
- package/icons/content-sun-fill.svg +1 -0
- package/icons/content-sun-outline.svg +1 -0
- package/icons/internal_logo/fcd_outline.svg +1 -0
- package/package.json +2 -2
- package/theme/theme_eduverse_dark.scss +1 -0
- package/theme/theme_eduverse_light.scss +1 -0
- package/theme/variables/4px_grid.scss +26 -1
- package/theme/variables/6px_grid.scss +1 -0
- package/theme/variables/electric.scss +1 -0
- package/theme/variables/fresh_4px.scss +39 -6
- package/theme/variables/loveship.scss +5 -4
- package/theme/variables/loveship_dark.scss +31 -0
- package/theme/variables/promo.scss +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../theme/theme_vanilla_thunder.scss%23sass","../../../../../theme/theme_vanilla_thunder.scss","../../../theme/theme_vanilla_thunder.scss","../../../theme/variables/6px_grid.scss"],"names":[],"mappings":"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","file":"theme_vanilla_thunder.css","sourcesContent":["@use './variables/6px_grid' as *;\n\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: 'Roboto Mono', monospace;\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFFFFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-skeleton: var(--chromatic-200);\n\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n --uui-border-radius: 3px;\n\n /* core variables end */\n\n /* size theme start */\n\n @include uui-6px-grid();\n\n /* size theme end */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-neutral,\n .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n\n &.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n }\n\n .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n }\n\n /* MainMenu */\n\n .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n }\n\n /* BurgerMenu */\n\n .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n }\n\n /* BurgerButton */\n .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n }\n\n /* BurgerSearch */\n\n .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n }\n\n .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n }\n\n .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n }\n\n .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n }\n\n .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-warning, &.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n\n }\n\n &.uui-color-neutral, &.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n }\n\n /* CountIndicator */\n\n .uui-count_indicator {\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n }\n\n &:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n .uui-button {\n &.uui-size-42, &.uui-size-48 {\n :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n }\n }\n }\n}\n","@use './variables/6px_grid' as *;\n\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: 'Roboto Mono', monospace;\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFFFFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-skeleton: var(--chromatic-200);\n\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n --uui-border-radius: 3px;\n\n /* core variables end */\n\n /* size theme start */\n\n @include uui-6px-grid();\n\n /* size theme end */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-neutral,\n .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n\n &.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n }\n\n .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n }\n\n /* MainMenu */\n\n .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n }\n\n /* BurgerMenu */\n\n .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n }\n\n /* BurgerButton */\n .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n }\n\n /* BurgerSearch */\n\n .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n }\n\n .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n }\n\n .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n }\n\n .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n }\n\n .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-warning, &.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n\n }\n\n &.uui-color-neutral, &.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n }\n\n /* CountIndicator */\n\n .uui-count_indicator {\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n }\n\n &:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n .uui-button {\n &.uui-size-42, &.uui-size-48 {\n :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n }\n }\n }\n}\n","/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: \"Roboto Mono\", monospace;\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n /* start Loveship colors for controllers */\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n --white: #FFFFFF;\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n /* end Loveship colors for controllers */\n /* core variables start */\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n /* not accepted part */\n /* control specific */\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n --uui-outline-focus: #008ACE80;\n --uui-skeleton: var(--chromatic-200);\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n --uui-border-radius: 3px;\n /* core variables end */\n /* size theme start */\n /* size theme end */\n /* begin color classes */\n /* MainMenu */\n /* BurgerMenu */\n /* BurgerButton */\n /* BurgerSearch */\n /* Tooltip */\n /* Tag */\n /* CountIndicator */\n}\n.uui-theme-vanilla_thunder {\n --uui-grid-unit: 6px;\n --uui-focus-outline-width: 2px;\n --uui-focus-outline-offset: 2px;\n --uui-focus-radius: 2px;\n --uui-tab-line-width: 3px;\n --uui-notify-size: 6px;\n}\n.uui-theme-vanilla_thunder .uui-size-12 {\n --uui-size: 12px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 12px;\n --uui-dot-size: 6px;\n}\n.uui-theme-vanilla_thunder .uui-size-18 {\n --uui-size: 18px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 3px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 3px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 10px;\n --uui-dot-size: 6px;\n}\n.uui-theme-vanilla_thunder .uui-size-24 {\n --uui-size: 24px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 12px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-30 {\n --uui-size: 30px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 6px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-36 {\n --uui-size: 36px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-42 {\n --uui-size: 42px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-size-48 {\n --uui-size: 48px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 12px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-size-60 {\n --uui-size: 60px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 18px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 20px;\n --uui-dot-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-size-42 {\n --uui-horizontal-padding: 6px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-size-48 {\n --uui-horizontal-padding: 6px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-textarea {\n --uui-horizontal-padding: 12px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-textarea.uui-size-24 {\n --uui-line-height: 12px;\n}\n.uui-theme-vanilla_thunder .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 6px;\n --uui-horizontal-gap: 3px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 12px;\n --uui-horizontal-gap: 6px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-18 {\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-18 .uui-caption {\n --uui-tag-caption-horizontal-padding: 0;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24 {\n --uui-icon-size: 18px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-42 {\n --uui-icon-size: 24px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24, .uui-theme-vanilla_thunder .uui-tag.uui-size-30, .uui-theme-vanilla_thunder .uui-tag.uui-size-36, .uui-theme-vanilla_thunder .uui-tag.uui-size-42 {\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24, .uui-theme-vanilla_thunder .uui-tag.uui-size-30 {\n --uui-horizontal-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-42, .uui-theme-vanilla_thunder .uui-tag.uui-size-48 {\n --uui-horizontal-padding: 9px;\n}\n.uui-theme-vanilla_thunder .uui-checkbox-container.uui-size-18, .uui-theme-vanilla_thunder .uui-radio-input-container.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-switch.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-switch.uui-size-24 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-30 {\n --uui-icon-size: 12px;\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-42 {\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-48 {\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-18 {\n --uui-font-size: 12px;\n --uui-horizontal-padding: 6px;\n --uui-badge-caption-horizontal-padding: 0;\n --uui-badge-indicator-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-24 {\n --uui-icon-size: 18px;\n --uui-line-height: 12px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-36 {\n --uui-horizontal-padding: 9px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-42 {\n --uui-icon-size: 24px;\n --uui-horizontal-padding: 15px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-48 {\n --uui-horizontal-padding: 15px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-24, .uui-theme-vanilla_thunder .uui-badge.uui-size-30, .uui-theme-vanilla_thunder .uui-badge.uui-size-36, .uui-theme-vanilla_thunder .uui-badge.uui-size-42, .uui-theme-vanilla_thunder .uui-badge.uui-size-48 {\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-12 {\n --uui-horizontal-gap: 4px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-18 {\n --uui-horizontal-gap: 6px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-24 {\n --uui-font-size: 14px;\n --uui-dot-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-12 {\n --uui-horizontal-padding: 3px;\n --uui-line-height: 10px;\n --uui-font-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-18 {\n --uui-horizontal-padding: 6px;\n --uui-line-height: 16px;\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-24 {\n --uui-line-height: 22px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-36 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-48 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-60 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-30, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-36, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-42, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-48 {\n --uui-vertical-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-alert.uui-size-36 {\n --uui-alert-indicator-border-width: 3px;\n --uui-alert-gap-h: 12px;\n --uui-alert-gap-v: 3px;\n --uui-alert-padding-h: 9px;\n --uui-alert-padding-v: 3px;\n --uui-alert-caption-gap-h: 9px;\n}\n.uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-size-24 {\n --uui-horizontal-padding: 3px;\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-color-accent,\n.uui-theme-vanilla_thunder .uui-color-grass,\n.uui-theme-vanilla_thunder .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-primary,\n.uui-theme-vanilla_thunder .uui-color-blue,\n.uui-theme-vanilla_thunder .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-fire,\n.uui-theme-vanilla_thunder .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-warning,\n.uui-theme-vanilla_thunder .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-neutral,\n.uui-theme-vanilla_thunder .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n}\n.uui-theme-vanilla_thunder .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n}\n.uui-theme-vanilla_thunder .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n}\n.uui-theme-vanilla_thunder .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n}\n.uui-theme-vanilla_thunder .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300 .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral.uui-fill-outline, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n}\n.uui-theme-vanilla_thunder .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-size-42 :global(.uui-caption), .uui-theme-vanilla_thunder .uui-button.uui-size-48 :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n}","@mixin uui-6px-grid {\n & {\n --uui-grid-unit: 6px;\n --uui-focus-outline-width: 2px;\n --uui-focus-outline-offset: 2px;\n --uui-focus-radius: 2px;\n //--uui-border-radius: 3px; // TODO: ?????\n --uui-tab-line-width: 3px;\n --uui-notify-size: 6px;\n }\n\n .uui-size-12 {\n --uui-size: 12px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px; // remove - discuss\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 12px;\n --uui-dot-size: 6px;\n }\n\n .uui-size-18 {\n --uui-size: 18px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 3px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 3px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 10px;\n --uui-dot-size: 6px;\n }\n\n .uui-size-24 {\n --uui-size: 24px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 12px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-30 {\n --uui-size: 30px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 6px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-36 {\n --uui-size: 36px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-42 {\n --uui-size: 42px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 10px;\n }\n\n .uui-size-48 {\n --uui-size: 48px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 12px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 12px;\n }\n\n .uui-size-60 {\n --uui-size: 60px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 18px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 20px;\n --uui-dot-size: 12px;\n }\n\n .uui-input-box {\n &.uui-size-42 {\n --uui-horizontal-padding: 6px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-padding: 6px;\n }\n\n &.uui-textarea {\n --uui-horizontal-padding: 12px;\n\n &.uui-size-24 {\n --uui-line-height: 12px;\n }\n }\n }\n\n .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 6px;\n --uui-horizontal-gap: 3px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 12px;\n --uui-horizontal-gap: 6px;\n }\n\n .uui-tag {\n &.uui-size-18 {\n --uui-font-size: 12px;\n\n .uui-caption {\n --uui-tag-caption-horizontal-padding: 0;\n }\n }\n\n &.uui-size-24 {\n --uui-icon-size: 18px;\n }\n\n &.uui-size-42 {\n --uui-icon-size: 24px;\n }\n\n &.uui-size-24,\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42 {\n --uui-horizontal-gap: 3px;\n }\n\n &.uui-size-24,\n &.uui-size-30 {\n --uui-horizontal-padding: 3px;\n }\n\n &.uui-size-42,\n &.uui-size-48 {\n --uui-horizontal-padding: 9px;\n }\n }\n\n .uui-checkbox-container, .uui-radio-input-container {\n &.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-switch {\n &.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n &.uui-size-24 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n }\n }\n\n .uui-labeled-input {\n &.uui-size-30 {\n --uui-icon-size: 12px;\n --uui-font-size: 12px;\n }\n\n &.uui-size-42 {\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n &.uui-size-48 {\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-badge {\n &.uui-size-18 {\n --uui-font-size: 12px;\n --uui-horizontal-padding: 6px;\n --uui-badge-caption-horizontal-padding: 0;\n --uui-badge-indicator-padding: 3px;\n }\n\n &.uui-size-24 {\n --uui-icon-size: 18px;\n --uui-line-height: 12px;\n }\n\n &.uui-size-36 {\n --uui-horizontal-padding: 9px;\n }\n\n &.uui-size-42 {\n --uui-icon-size: 24px;\n --uui-horizontal-padding: 15px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-padding: 15px;\n }\n\n &.uui-size-24,\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42,\n &.uui-size-48 {\n --uui-horizontal-gap: 3px;\n }\n }\n\n .uui-status_indicator {\n &.uui-size-12 {\n --uui-horizontal-gap: 4px;\n }\n\n &.uui-size-18 {\n --uui-horizontal-gap: 6px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n &.uui-size-24 {\n --uui-font-size: 14px;\n --uui-dot-size: 10px;\n }\n }\n\n .uui-count_indicator {\n &.uui-size-12 {\n --uui-horizontal-padding: 3px;\n --uui-line-height: 10px;\n --uui-font-size: 10px;\n }\n\n &.uui-size-18 {\n --uui-horizontal-padding: 6px;\n --uui-line-height: 16px;\n --uui-font-size: 12px;\n }\n\n &.uui-size-24 {\n --uui-line-height: 22px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-table-header-cell {\n &.uui-size-36 {\n --uui-horizontal-gap: 12px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-gap: 12px;\n }\n\n &.uui-size-60 {\n --uui-horizontal-gap: 12px;\n }\n }\n\n .uui-picker_toggler {\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42,\n &.uui-size-48 {\n --uui-vertical-padding: 3px;\n }\n }\n\n .uui-alert {\n &.uui-size-36 {\n --uui-alert-indicator-border-width: 3px;\n --uui-alert-gap-h: 12px;\n --uui-alert-gap-v: 3px;\n --uui-alert-padding-h: 9px;\n --uui-alert-padding-v: 3px;\n --uui-alert-caption-gap-h: 9px;\n }\n }\n\n .uui-filters-panel-item-toggler {\n &.uui-size-24 {\n --uui-horizontal-padding: 3px;\n --uui-horizontal-gap: 3px;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../theme/theme_vanilla_thunder.scss%23sass","../../../../../theme/theme_vanilla_thunder.scss","../../../theme/theme_vanilla_thunder.scss","../../../theme/variables/6px_grid.scss"],"names":[],"mappings":"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","file":"theme_vanilla_thunder.css","sourcesContent":["@use './variables/6px_grid' as *;\n\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: 'Roboto Mono', monospace;\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFFFFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-skeleton: var(--chromatic-200);\n\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n --uui-border-radius: 3px;\n\n /* core variables end */\n\n /* size theme start */\n\n @include uui-6px-grid();\n\n /* size theme end */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-neutral,\n .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n\n &.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n }\n\n .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n }\n\n /* MainMenu */\n\n .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n }\n\n /* BurgerMenu */\n\n .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n }\n\n /* BurgerButton */\n .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n }\n\n /* BurgerSearch */\n\n .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n }\n\n .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n }\n\n .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n }\n\n .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n }\n\n .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-warning, &.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n\n }\n\n &.uui-color-neutral, &.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n }\n\n /* CountIndicator */\n\n .uui-count_indicator {\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n }\n\n &:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n .uui-button {\n &.uui-size-42, &.uui-size-48 {\n :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n }\n }\n }\n}\n","@use './variables/6px_grid' as *;\n\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: 'Roboto Mono', monospace;\n\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n\n /* start Loveship colors for controllers */\n\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n\n --white: #FFFFFF;\n\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n\n /* end Loveship colors for controllers */\n\n /* core variables start */\n\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n\n\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n\n /* not accepted part */\n\n /* control specific */\n\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n\n --uui-outline-focus: #008ACE80;\n\n --uui-skeleton: var(--chromatic-200);\n\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n\n --uui-border-radius: 3px;\n\n /* core variables end */\n\n /* size theme start */\n\n @include uui-6px-grid();\n\n /* size theme end */\n\n /* begin color classes */\n\n .uui-color-accent,\n .uui-color-grass,\n .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-primary,\n .uui-color-blue,\n .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire,\n .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n }\n\n .uui-color-warning,\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-neutral,\n .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n\n &.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n }\n }\n\n .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n }\n\n /* MainMenu */\n\n .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n }\n\n /* BurgerMenu */\n\n .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n }\n\n /* BurgerButton */\n .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n }\n\n /* BurgerSearch */\n\n .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n }\n\n .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n }\n\n .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n }\n\n .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n }\n\n .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n }\n\n .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-warning, &.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n\n }\n\n &.uui-color-neutral, &.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n }\n\n /* CountIndicator */\n\n .uui-count_indicator {\n &.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n }\n\n &:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n .uui-button {\n &.uui-size-42, &.uui-size-48 {\n :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n }\n }\n }\n}\n","/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n.uui-theme-vanilla_thunder {\n --uui-font: var(--font-inter);\n --uui-font-mono: \"Roboto Mono\", monospace;\n --blue-0: #F0F7FC;\n --blue-50: #E1F4FA;\n --blue-100: #D4F0FE;\n --blue-200: #76CDD8;\n --blue-300: #2BC1F0;\n --blue-400: #1CA5D3;\n --blue-500: #008ACE;\n --grass-25: #EBFCC7;\n --grass-50: #E4ED94;\n --grass-100: #CEDB56;\n --grass-200: #91C229;\n --grass-300: #4FA762;\n --grass-400: #329247;\n --grass-500: #157D2C;\n --sun-50: #FFF1A7;\n --sun-100: #FFD602;\n --sun-200: #F7A02C;\n --sun-250: #F67E00;\n --sun-300: #F2682A;\n --chromatic-0: #FFFFFF;\n --chromatic-100: #F7F7FD;\n --chromatic-150: #E5E5EE;\n --chromatic-200: #CDCDD9;\n --chromatic-300: #8D8D9C;\n --chromatic-400: #34384A;\n --chromatic-500: #191F3D;\n /* start Loveship colors for controllers */\n --fire-5: #FEF6F6;\n --fire-10: #FDE1E1;\n --fire-20: #FCC8C8;\n --fire-50: #FA4B4B;\n --fire-60: #CC2929;\n --fire-70: #B32424;\n --white: #FFFFFF;\n --night50: #FAFAFC;\n --night100: #F5F6FA;\n --night200: #EBEDF5;\n --night300: #E1E3EB;\n --night400: #CED0DB;\n --night500: #ACAFBF;\n --night600: #6C6F80;\n --night700: #474A59;\n --night800: #303240;\n --night900: #1D1E26;\n /* end Loveship colors for controllers */\n /* core variables start */\n --uui-accent-5: var(--grass-50);\n --uui-accent-10: var(--grass-100);\n --uui-accent-20: var(--grass-200);\n --uui-accent-50: var(--grass-300);\n --uui-accent-60: var(--grass-400);\n --uui-accent-70: var(--grass-500);\n --uui-accent-contrast: var(--white);\n --uui-primary-5: var(--blue-50);\n --uui-primary-10: var(--blue-100);\n --uui-primary-20: var(--blue-200);\n --uui-primary-50: var(--blue-300);\n --uui-primary-60: var(--blue-400);\n --uui-primary-70: var(--blue-500);\n --uui-primary-contrast: var(--white);\n --uui-secondary-5: var(--night100);\n --uui-secondary-10: var(--night200);\n --uui-secondary-20: var(--night300);\n --uui-secondary-50: var(--night500);\n --uui-secondary-60: var(--night600);\n --uui-secondary-70: var(--night700);\n --uui-secondary-contrast: var(--white);\n --uui-critical-5: var(--fire-5);\n --uui-critical-10: var(--fire-10);\n --uui-critical-20: var(--fire-20);\n --uui-critical-50: var(--fire-50);\n --uui-critical-60: var(--fire-60);\n --uui-critical-70: var(--fire-70);\n --uui-critical-contrast: var(--white);\n --uui-info-5: var(--blue-0);\n --uui-info-10: var(--blue-0);\n --uui-info-20: var(--blue-100);\n --uui-info-50: var(--blue-300);\n --uui-info-60: var(--blue-400);\n --uui-info-70: var(--blue-500);\n --uui-info-contrast: var(--white);\n --uui-success-5: var(--grass-25);\n --uui-success-10: var(--grass-100);\n --uui-success-20: var(--grass-200);\n --uui-success-50: var(--grass-300);\n --uui-success-60: var(--grass-400);\n --uui-success-70: var(--grass-500);\n --uui-success-contrast: var(--white);\n --uui-warning-5: var(--sun-50);\n --uui-warning-10: var(--sun-50);\n --uui-warning-20: var(--sun-100);\n --uui-warning-50: var(--sun-200);\n --uui-warning-60: var(--sun-250);\n --uui-warning-70: var(--sun-300);\n --uui-warning-contrast: var(--white);\n --uui-error-5: var(--fire-5);\n --uui-error-10: var(--fire-10);\n --uui-error-20: var(--fire-20);\n --uui-error-50: var(--fire-50);\n --uui-error-60: var(--fire-60);\n --uui-error-70: var(--fire-70);\n --uui-error-contrast: var(--white);\n --uui-neutral-0: #FFFFFF;\n --uui-neutral-5: var(--night50);\n --uui-neutral-10: var(--night100);\n --uui-neutral-20: var(--night200);\n --uui-neutral-30: var(--night300);\n --uui-neutral-40: var(--night400);\n --uui-neutral-50: var(--night500);\n --uui-neutral-60: var(--night600);\n --uui-neutral-70: var(--night700);\n --uui-neutral-80: var(--night800);\n --uui-neutral-90: var(--night900);\n --uui-neutral-100: #000000;\n /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */\n --uui-app-bg: var(--chromatic-100);\n --uui-overlay: rgba(29, 30, 38, 0.8);\n --uui-surface-sunken: var(--night50);\n --uui-surface-main: var(--chromatic-0);\n --uui-surface-higher: var(--night100);\n --uui-surface-highest: var(--night200);\n --uui-divider: var(--chromatic-200);\n --uui-divider-light: var(--chromatic-150);\n --uui-text-primary: var(--chromatic-500);\n --uui-text-secondary: var(--chromatic-300);\n --uui-text-tertiary: var(--chromatic-300);\n --uui-text-disabled: var(--chromatic-200);\n --uui-text-info: var(--uui-info-50);\n --uui-text-warning: var(--uui-warning-50);\n --uui-text-critical: var(--uui-critical-50);\n --uui-text-success: var(--uui-success-50);\n --uui-text-bg-highlight: var(--uui-warning-10);\n /* not accepted part */\n /* control specific */\n --uui-link: var(--blue-300);\n --uui-link-hover: var(--blue-400);\n --uui-link-visited: #8018A0;\n --uui-link-visited-hover: #601278;\n --uui-link-disabled: var(--chromatic-200);\n --uui-icon: var(--chromatic-300);\n --uui-icon-hover: var(--chromatic-400);\n --uui-icon-active: var(--chromatic-500);\n --uui-icon-disabled: var(--chromatic-200);\n --uui-control-bg: var(--chromatic-0);\n --uui-control-bg-hover: var(--chromatic-300);\n --uui-control-bg-disabled: var(--chromatic-100);\n --uui-control-border: var(--chromatic-200);\n --uui-control-border-hover: var(--chromatic-300);\n --uui-control-border-focus: var(--uui-primary-50);\n --uui-control-border-disabled: var(--chromatic-150);\n --uui-control-placeholder: var(--night600);\n --uui-control-placeholder-disabled: var(--night600);\n --uui-control-text: var(--chromatic-500);\n --uui-control-text-disabled: var(--chromatic-300);\n --uui-control-icon: var(--chromatic-200);\n --uui-control-icon-disabled: var(--chromatic-200);\n --uui-outline-focus: #008ACE80;\n --uui-skeleton: var(--chromatic-200);\n --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);\n --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);\n --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);\n --uui-border-radius: 3px;\n /* core variables end */\n /* size theme start */\n /* size theme end */\n /* begin color classes */\n /* MainMenu */\n /* BurgerMenu */\n /* BurgerButton */\n /* BurgerSearch */\n /* Tooltip */\n /* Tag */\n /* CountIndicator */\n}\n.uui-theme-vanilla_thunder {\n --uui-grid-unit: 6px;\n --uui-focus-outline-width: 2px;\n --uui-focus-outline-offset: 2px;\n --uui-focus-radius: 2px;\n --uui-tab-line-width: 3px;\n --uui-notify-size: 6px;\n --uui-resize-marker-width: 12px;\n}\n.uui-theme-vanilla_thunder .uui-size-12 {\n --uui-size: 12px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 12px;\n --uui-dot-size: 6px;\n}\n.uui-theme-vanilla_thunder .uui-size-18 {\n --uui-size: 18px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 3px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 3px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 10px;\n --uui-dot-size: 6px;\n}\n.uui-theme-vanilla_thunder .uui-size-24 {\n --uui-size: 24px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 12px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-30 {\n --uui-size: 30px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 6px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-36 {\n --uui-size: 36px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-size-42 {\n --uui-size: 42px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-size-48 {\n --uui-size: 48px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 12px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-size-60 {\n --uui-size: 60px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 18px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 20px;\n --uui-dot-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-size-42 {\n --uui-horizontal-padding: 6px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-size-48 {\n --uui-horizontal-padding: 6px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-textarea {\n --uui-horizontal-padding: 12px;\n}\n.uui-theme-vanilla_thunder .uui-input-box.uui-textarea.uui-size-24 {\n --uui-line-height: 12px;\n}\n.uui-theme-vanilla_thunder .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 6px;\n --uui-horizontal-gap: 3px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 12px;\n --uui-horizontal-gap: 6px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-18 {\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-18 .uui-caption {\n --uui-tag-caption-horizontal-padding: 0;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24 {\n --uui-icon-size: 18px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-42 {\n --uui-icon-size: 24px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24, .uui-theme-vanilla_thunder .uui-tag.uui-size-30, .uui-theme-vanilla_thunder .uui-tag.uui-size-36, .uui-theme-vanilla_thunder .uui-tag.uui-size-42 {\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-24, .uui-theme-vanilla_thunder .uui-tag.uui-size-30 {\n --uui-horizontal-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-size-42, .uui-theme-vanilla_thunder .uui-tag.uui-size-48 {\n --uui-horizontal-padding: 9px;\n}\n.uui-theme-vanilla_thunder .uui-checkbox-container.uui-size-18, .uui-theme-vanilla_thunder .uui-radio-input-container.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-switch.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-switch.uui-size-24 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-30 {\n --uui-icon-size: 12px;\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-42 {\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-labeled-input.uui-size-48 {\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-18 {\n --uui-font-size: 12px;\n --uui-horizontal-padding: 6px;\n --uui-badge-caption-horizontal-padding: 0;\n --uui-badge-indicator-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-24 {\n --uui-icon-size: 18px;\n --uui-line-height: 12px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-36 {\n --uui-horizontal-padding: 9px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-42 {\n --uui-icon-size: 24px;\n --uui-horizontal-padding: 15px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-48 {\n --uui-horizontal-padding: 15px;\n}\n.uui-theme-vanilla_thunder .uui-badge.uui-size-24, .uui-theme-vanilla_thunder .uui-badge.uui-size-30, .uui-theme-vanilla_thunder .uui-badge.uui-size-36, .uui-theme-vanilla_thunder .uui-badge.uui-size-42, .uui-theme-vanilla_thunder .uui-badge.uui-size-48 {\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-12 {\n --uui-horizontal-gap: 4px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-18 {\n --uui-horizontal-gap: 6px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n}\n.uui-theme-vanilla_thunder .uui-status_indicator.uui-size-24 {\n --uui-font-size: 14px;\n --uui-dot-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-12 {\n --uui-horizontal-padding: 3px;\n --uui-line-height: 10px;\n --uui-font-size: 10px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-18 {\n --uui-horizontal-padding: 6px;\n --uui-line-height: 16px;\n --uui-font-size: 12px;\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-size-24 {\n --uui-line-height: 22px;\n --uui-font-size: 14px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-36 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-48 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-table-header-cell.uui-size-60 {\n --uui-horizontal-gap: 12px;\n}\n.uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-30, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-36, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-42, .uui-theme-vanilla_thunder .uui-picker_toggler.uui-size-48 {\n --uui-vertical-padding: 3px;\n}\n.uui-theme-vanilla_thunder .uui-alert.uui-size-36 {\n --uui-alert-indicator-border-width: 3px;\n --uui-alert-gap-h: 12px;\n --uui-alert-gap-v: 3px;\n --uui-alert-padding-h: 9px;\n --uui-alert-padding-v: 3px;\n --uui-alert-caption-gap-h: 9px;\n}\n.uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-size-24 {\n --uui-horizontal-padding: 3px;\n --uui-horizontal-gap: 3px;\n}\n.uui-theme-vanilla_thunder .uui-color-accent,\n.uui-theme-vanilla_thunder .uui-color-grass,\n.uui-theme-vanilla_thunder .uui-color-success {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-primary,\n.uui-theme-vanilla_thunder .uui-color-blue,\n.uui-theme-vanilla_thunder .uui-color-info {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-fire,\n.uui-theme-vanilla_thunder .uui-color-critical {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-error {\n --uui-color-5: var(--uui-error-5);\n --uui-color-10: var(--uui-error-10);\n --uui-color-20: var(--uui-error-20);\n --uui-color-50: var(--uui-error-50);\n --uui-color-60: var(--uui-error-60);\n --uui-color-70: var(--uui-error-70);\n --uui-color-contrast: var(--uui-error-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-warning,\n.uui-theme-vanilla_thunder .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n}\n.uui-theme-vanilla_thunder .uui-color-neutral,\n.uui-theme-vanilla_thunder .uui-color-secondary {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n}\n.uui-theme-vanilla_thunder .uui-button {\n --uui-border-radius: 8px;\n --uui-btn-font: var(--font-museo-sans);\n --uui-btn-font-weight: 700;\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-gray {\n --uui-color-5: var(--white);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-5);\n --uui-color-50: var(--chromatic-100);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n --uui-color-contrast: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-filters-panel-item-toggler.uui-input-box {\n --uui-filters_toggler-border: var(--uui-surface-main);\n --uui-filters_toggler-border-hover: var(--blue-0);\n --uui-filters_toggler-border-radius: 8px;\n --uui-filters_toggler-bg: var(--uui-surface-main);\n --uui-filters_toggler-bg-hover: var(--blue-0);\n --uui-filters_toggler-text: var(--uui-text-secondary);\n --uui-filters_toggler-label: var(--chromatic-500);\n --uui-filters_toggler-icon: var(--uui-icon);\n --uui-filters_toggler-shadow: var(--uui-shadow-level-1);\n --uui-filters_toggler-font: var(--uui-font);\n --uui-filters_toggler-font-weight: 400;\n}\n.uui-theme-vanilla_thunder .uui-main_menu {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-hover: var(--chromatic-500);\n --uui-main_menu-text-active: var(--uui-info-50);\n --uui-main_menu-bg: var(--uui-info-5);\n --uui-main_menu-hover: var(--uui-neutral-0);\n --uui-main_menu-active: var(--uui-neutral-0);\n --uui-main_menu-border-active: var(--uui-neutral-0);\n --uui-main_menu-search-bg: var(--uui-neutral-5);\n --uui-main_menu-search-border: var(--uui-neutral-40);\n --uui-main_menu-search-placeholder: var(--uui-text-tertiary);\n --uui-main_menu-search-text: var(--uui-text-primary);\n --uui-main_menu-search-icon: var(--uui-neutral-70);\n --uui-main_menu-icon: var(--chromatic-500);\n --uui-main_menu-icon-hover: var(--chromatic-500);\n --uui-main_menu-icon-active: var(--chromatic-500);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);\n}\n.uui-theme-vanilla_thunder .uui-burger {\n --uui-burger_menu-bg: var(--uui-info-5);\n --uui-burger_menu-bg-hover: var(--uui-neutral-0);\n --uui-burger_menu-caption: var(--chromatic-500);\n --uui-burger_menu-icon: var(--chromatic-500);\n --uui-burger_menu-item: var(--uui-info-5);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-burger-button {\n --uui-burger_btn_caption: var(--chromatic-500);\n --uui-burger_btn_caption-hover: var(--uui-primary-50);\n --uui-burger_btn_caption-active: var(--uui-primary-50);\n --uui-burger_btn-border: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-burger-search {\n --uui-burger_search: var(--chromatic-500);\n --uui-burger_search-fill: var(--uui-neutral-70);\n --uui-burger_search-bg: var(--uui-neutral-40);\n --uui-burger_search-placeholder: var(--uui-text-tertiary);\n}\n.uui-theme-vanilla_thunder .uui-main_menu-dropdown {\n --uui-main_menu-text: var(--chromatic-500);\n --uui-main_menu-text-active: var(--chromatic-500);\n --uui-main_menu-dropdown-bg: var(--chromatic-0);\n --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);\n --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);\n --uui-main_menu-dropdown-border-radius: 8px;\n}\n.uui-theme-vanilla_thunder .uui-scroll-bars {\n --uui-scroll_bars-bg: var(--chromatic-200);\n --uui-scroll_bars-bg-active: var(--chromatic-300);\n}\n.uui-theme-vanilla_thunder .uui-text-placeholder {\n --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-neutral {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-text-primary);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-critical {\n --uui-tooltip-bg: var(--uui-critical-60);\n}\n.uui-theme-vanilla_thunder .uui-tooltip-container.uui-color-inverted {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300 {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-60);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300 .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral.uui-fill-outline, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n}\n.uui-theme-vanilla_thunder .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator, .uui-theme-vanilla_thunder .uui-tag.uui-color-night300.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n}\n.uui-theme-vanilla_thunder .uui-count_indicator.uui-color-white {\n --uui-color-5: var(--chromatic-0);\n --uui-color-10: var(--blue-50);\n --uui-color-20: var(--uui-primary-10);\n --uui-color-50: var(--white);\n --uui-color-60: var(--blue-50);\n --uui-color-70: var(--blue-100);\n}\n.uui-theme-vanilla_thunder .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n}\n.uui-theme-vanilla_thunder .uui-button.uui-size-42 :global(.uui-caption), .uui-theme-vanilla_thunder .uui-button.uui-size-48 :global(.uui-caption) {\n font-family: var(--font-museo-sans);\n}","@mixin uui-6px-grid {\n & {\n --uui-grid-unit: 6px;\n --uui-focus-outline-width: 2px;\n --uui-focus-outline-offset: 2px;\n --uui-focus-radius: 2px;\n //--uui-border-radius: 3px; // TODO: ?????\n --uui-tab-line-width: 3px;\n --uui-notify-size: 6px;\n --uui-resize-marker-width: 12px;\n }\n\n .uui-size-12 {\n --uui-size: 12px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px; // remove - discuss\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 12px;\n --uui-dot-size: 6px;\n }\n\n .uui-size-18 {\n --uui-size: 18px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 3px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 3px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 12px;\n --uui-font-size: 10px;\n --uui-dot-size: 6px;\n }\n\n .uui-size-24 {\n --uui-size: 24px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 3px;\n --uui-icon-size: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 12px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-30 {\n --uui-size: 30px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 6px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-36 {\n --uui-size: 36px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 6px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n .uui-size-42 {\n --uui-size: 42px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 9px;\n --uui-icon-size: 18px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 10px;\n }\n\n .uui-size-48 {\n --uui-size: 48px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 12px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n --uui-dot-size: 12px;\n }\n\n .uui-size-60 {\n --uui-size: 60px;\n --uui-border-width: 1px;\n --uui-horizontal-gap: 6px;\n --uui-vertical-gap: 3px;\n --uui-horizontal-padding: 12px;\n --uui-vertical-padding: 18px;\n --uui-icon-size: 24px;\n --uui-line-height: 24px;\n --uui-font-size: 20px;\n --uui-dot-size: 12px;\n }\n\n .uui-input-box {\n &.uui-size-42 {\n --uui-horizontal-padding: 6px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-padding: 6px;\n }\n\n &.uui-textarea {\n --uui-horizontal-padding: 12px;\n\n &.uui-size-24 {\n --uui-line-height: 12px;\n }\n }\n }\n\n .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 6px;\n --uui-horizontal-gap: 3px;\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60) {\n --uui-horizontal-padding: 12px;\n --uui-horizontal-gap: 6px;\n }\n\n .uui-tag {\n &.uui-size-18 {\n --uui-font-size: 12px;\n\n .uui-caption {\n --uui-tag-caption-horizontal-padding: 0;\n }\n }\n\n &.uui-size-24 {\n --uui-icon-size: 18px;\n }\n\n &.uui-size-42 {\n --uui-icon-size: 24px;\n }\n\n &.uui-size-24,\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42 {\n --uui-horizontal-gap: 3px;\n }\n\n &.uui-size-24,\n &.uui-size-30 {\n --uui-horizontal-padding: 3px;\n }\n\n &.uui-size-42,\n &.uui-size-48 {\n --uui-horizontal-padding: 9px;\n }\n }\n\n .uui-checkbox-container, .uui-radio-input-container {\n &.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-switch {\n &.uui-size-18 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n &.uui-size-24 {\n --uui-horizontal-gap: 12px;\n --uui-line-height: 24px;\n --uui-font-size: 16px;\n }\n }\n\n .uui-labeled-input {\n &.uui-size-30 {\n --uui-icon-size: 12px;\n --uui-font-size: 12px;\n }\n\n &.uui-size-42 {\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n\n &.uui-size-48 {\n --uui-icon-size: 18px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-badge {\n &.uui-size-18 {\n --uui-font-size: 12px;\n --uui-horizontal-padding: 6px;\n --uui-badge-caption-horizontal-padding: 0;\n --uui-badge-indicator-padding: 3px;\n }\n\n &.uui-size-24 {\n --uui-icon-size: 18px;\n --uui-line-height: 12px;\n }\n\n &.uui-size-36 {\n --uui-horizontal-padding: 9px;\n }\n\n &.uui-size-42 {\n --uui-icon-size: 24px;\n --uui-horizontal-padding: 15px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-padding: 15px;\n }\n\n &.uui-size-24,\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42,\n &.uui-size-48 {\n --uui-horizontal-gap: 3px;\n }\n }\n\n .uui-status_indicator {\n &.uui-size-12 {\n --uui-horizontal-gap: 4px;\n }\n\n &.uui-size-18 {\n --uui-horizontal-gap: 6px;\n --uui-line-height: 18px;\n --uui-font-size: 14px;\n --uui-dot-size: 8px;\n }\n\n &.uui-size-24 {\n --uui-font-size: 14px;\n --uui-dot-size: 10px;\n }\n }\n\n .uui-count_indicator {\n &.uui-size-12 {\n --uui-horizontal-padding: 3px;\n --uui-line-height: 10px;\n --uui-font-size: 10px;\n }\n\n &.uui-size-18 {\n --uui-horizontal-padding: 6px;\n --uui-line-height: 16px;\n --uui-font-size: 12px;\n }\n\n &.uui-size-24 {\n --uui-line-height: 22px;\n --uui-font-size: 14px;\n }\n }\n\n .uui-table-header-cell {\n &.uui-size-36 {\n --uui-horizontal-gap: 12px;\n }\n\n &.uui-size-48 {\n --uui-horizontal-gap: 12px;\n }\n\n &.uui-size-60 {\n --uui-horizontal-gap: 12px;\n }\n }\n\n .uui-picker_toggler {\n &.uui-size-30,\n &.uui-size-36,\n &.uui-size-42,\n &.uui-size-48 {\n --uui-vertical-padding: 3px;\n }\n }\n\n .uui-alert {\n &.uui-size-36 {\n --uui-alert-indicator-border-width: 3px;\n --uui-alert-gap-h: 12px;\n --uui-alert-gap-v: 3px;\n --uui-alert-padding-h: 9px;\n --uui-alert-padding-v: 3px;\n --uui-alert-caption-gap-h: 9px;\n }\n }\n\n .uui-filters-panel-item-toggler {\n &.uui-size-24 {\n --uui-horizontal-padding: 3px;\n --uui-horizontal-gap: 3px;\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../theme/variables/fresh_4px.scss%23sass"],"names":[],"mappings":"AACQ,yFAAA","file":"fresh_4px.css","sourcesContent":["@use 'tokens/theme_fresh_light_4px' as tokens;\n@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin fresh-variables {\n --uui-font: 'Lexend', serif;\n --uui-font-mono: 'Roboto Mono', monospace;\n\n /* shadows */\n --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);\n --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);\n\n @include tokens.theme-tokens;\n\n\n & {\n --uui-border-radius: 3px;\n }\n\n /* begin color classes */\n\n .uui-color-grass {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-sky {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-night100 {\n --uui-color-5: var(--white);\n --uui-color-10: var(--white);\n --uui-color-20: var(--night50);\n --uui-color-50: var(--night100);\n --uui-color-60: var(--uui-color-night100-800);\n --uui-color-70: var(--uui-color-night100-900);\n --uui-color-contrast: var(--uui-neutral-70);\n }\n\n .uui-color-night300 {\n --uui-color-5: var(--night50);\n --uui-color-10: var(--night100);\n --uui-color-20: var(--night200);\n --uui-color-50: var(--night300);\n --uui-color-60: var(--night400);\n --uui-color-70: var(--night500);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-night500 {\n --uui-color-5: var(--night200);\n --uui-color-10: var(--night300);\n --uui-color-20: var(--night400);\n --uui-color-50: var(--night500);\n --uui-color-60: var(--night600);\n --uui-color-70: var(--night700);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-night600,\n .uui-color-gray {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-color-night700 {\n --uui-color-5: var(--night400);\n --uui-color-10: var(--night500);\n --uui-color-20: var(--night600);\n --uui-color-50: var(--night700);\n --uui-color-60: var(--uui-color-night700-800);\n --uui-color-70: var(--uui-color-night700-900);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-yellow {\n --uui-color-5: var(--yellow-5);\n --uui-color-10: var(--yellow-10);\n --uui-color-20: var(--yellow-20);\n --uui-color-50: var(--yellow-50);\n --uui-color-60: var(--yellow-60);\n --uui-color-70: var(--yellow-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-orange {\n --uui-color-5: var(--orange-5);\n --uui-color-10: var(--orange-10);\n --uui-color-20: var(--orange-20);\n --uui-color-50: var(--orange-50);\n --uui-color-60: var(--orange-60);\n --uui-color-70: var(--orange-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-fuchsia {\n --uui-color-5: var(--fuchsia-5);\n --uui-color-10: var(--fuchsia-10);\n --uui-color-20: var(--fuchsia-20);\n --uui-color-50: var(--fuchsia-50);\n --uui-color-60: var(--fuchsia-60);\n --uui-color-70: var(--fuchsia-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-purple {\n --uui-color-5: var(--purple-5);\n --uui-color-10: var(--purple-10);\n --uui-color-20: var(--purple-20);\n --uui-color-50: var(--purple-50);\n --uui-color-60: var(--purple-60);\n --uui-color-70: var(--purple-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-violet {\n --uui-color-5: var(--violet-5);\n --uui-color-10: var(--violet-10);\n --uui-color-20: var(--violet-20);\n --uui-color-50: var(--violet-50);\n --uui-color-60: var(--violet-60);\n --uui-color-70: var(--violet-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-cobalt {\n --uui-color-5: var(--cobalt-5);\n --uui-color-10: var(--cobalt-10);\n --uui-color-20: var(--cobalt-20);\n --uui-color-50: var(--cobalt-50);\n --uui-color-60: var(--cobalt-60);\n --uui-color-70: var(--cobalt-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-cyan {\n --uui-color-5: var(--cyan-5);\n --uui-color-10: var(--cyan-10);\n --uui-color-20: var(--cyan-20);\n --uui-color-50: var(--cyan-50);\n --uui-color-60: var(--cyan-60);\n --uui-color-70: var(--cyan-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-mint {\n --uui-color-5: var(--mint-5);\n --uui-color-10: var(--mint-10);\n --uui-color-20: var(--mint-20);\n --uui-color-50: var(--mint-50);\n --uui-color-60: var(--mint-60);\n --uui-color-70: var(--mint-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n /* Accordion */\n\n .uui-accordion-container {\n --uui-accordion-border-radius: 6px;\n }\n\n /* FileCard */\n\n .uui-file_card {\n --uui-file_card-border-radius: 6px;\n }\n\n /* Badge */\n\n .uui-badge.uui-color-white {\n &.uui-fill-solid {\n --uui-badge-border-hover: var(--uui-neutral-30);\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-0);\n --uui-badge-bg-hover: var(--uui-neutral-30);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-30);\n --uui-badge-caption: var(--uui-neutral-70);\n --uui-badge-caption-hover: var(--uui-neutral-70);\n }\n }\n\n .uui-badge.uui-color-neutral,\n .uui-badge.uui-color-night300 {\n &.uui-fill-solid {\n --uui-badge-bg: var(--uui-neutral-30);\n --uui-badge-bg-hover: var(--uui-neutral-40);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-40);\n --uui-color-contrast: var(--uui-neutral-80);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-20);\n --uui-badge-bg-hover: var(--uui-neutral-30);\n --uui-badge-border: var(--uui-neutral-40);\n --uui-badge-caption: var(--uui-neutral-80);\n --uui-badge-caption-hover: var(--uui-neutral-80);\n }\n }\n\n .uui-badge.uui-color-night100 {\n &.uui-fill-solid {\n --uui-badge-bg-hover: var(--uui-neutral-20);\n --uui-badge-border-hover: var(--uui-neutral-20);\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-10);\n --uui-badge-bg-hover: var(--uui-neutral-20);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-30);\n --uui-badge-caption: var(--uui-neutral-70);\n --uui-badge-caption-hover: var(--uui-neutral-70);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);\n }\n }\n }\n\n .uui-badge.uui-color-night600 {\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-20);\n --uui-badge-border: var(--uui-neutral-60);\n --uui-badge-border-hover: var(--uui-neutral-60);\n --uui-badge-caption: var(--uui-neutral-80);\n --uui-badge-caption-hover: var(--uui-neutral-80);\n }\n }\n\n .uui-badge.uui-color-yellow.uui-fill-outline {\n --uui-badge-border: var(--yellow-20);\n }\n\n /* Button */\n\n .uui-button {\n &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n --uui-btn-caption: var(--uui-neutral-70);\n }\n }\n\n /* IconButton */\n\n .uui-icon_button.uui-color-secondary {\n --uui-icon_btn: var(--uui-neutral-50);\n --uui-icon_btn-hover: var(--uui-neutral-60);\n --uui-icon_btn-active: var(--uui-neutral-70);\n }\n\n .uui-icon_button.uui-color-white {\n --uui-icon_btn-hover: var(--uui-neutral-20);\n --uui-icon_btn-active: var(--uui-neutral-30);\n }\n\n /* LinkButton */\n\n .uui-link_button.uui-color-contrast {\n --uui-link_btn-text: var(--uui-neutral-5);\n --uui-link_btn-text-hover: var(--uui-neutral-10);\n --uui-link_btn-text-active: var(--uui-neutral-20);\n }\n\n .uui-link_button.uui-color-white {\n --uui-link_btn-text: var(--uui-neutral-5);\n --uui-link_btn-text-hover: var(--uui-neutral-30);\n --uui-link_btn-text-active: var(--uui-neutral-40);\n --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-white {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-neutral-80);\n }\n\n .uui-tooltip-container.uui-color-red {\n --uui-tooltip-bg: var(--uui-error-60);\n }\n\n .uui-tooltip-container.uui-color-gray {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* CountIndicator */\n\n .uui-count_indicator.uui-color-gray,\n .uui-count_indicator.uui-color-neutral {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n\n .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n\n /* Status Indicator */\n\n .uui-status_indicator.uui-color-white.uui-fill-outline {\n .uui-status_indicator-dot {\n background-color: color-mix(in srgb, var(--white) 20%, transparent);\n border: 1px solid var(--uui-neutral-40);\n }\n }\n\n /* FlexRow */\n\n .uui-flex-row.uui-color-none {\n --uui-flex-row-bg: transparent;\n }\n\n .uui-flex-row.uui-color-white {\n --uui-flex-row-bg: var(--white);\n }\n\n .uui-flex-row.uui-color-night50 {\n --uui-flex-row-bg: var(--night50);\n }\n\n .uui-flex-row.uui-color-night100 {\n --uui-flex-row-bg: var(--night100);\n }\n\n .uui-panel.uui-color-white {\n --uui-panel-bg: var(--white);\n }\n\n .uui-panel.uui-color-night50 {\n --uui-panel-bg: var(--night50);\n }\n\n /* Text */\n\n .uui-text.uui-color-night50 {\n --uui-text: var(--night50);\n }\n\n .uui-text.uui-color-night400 {\n --uui-text: var(--night400);\n }\n\n .uui-text.uui-color-night800 {\n --uui-text: var(--night800);\n }\n\n .uui-text.uui-color-night900 {\n --uui-text: var(--night900);\n }\n\n .uui-text.uui-color-sky {\n --uui-text: var(--sky-70);\n }\n\n .uui-text.uui-color-grass {\n --uui-text: var(--grass-70);\n }\n\n .uui-text.uui-color-sun {\n --uui-text: var(--sun-70);\n }\n\n .uui-text.uui-color-fire {\n --uui-text: var(--fire-70);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-white {\n &.uui-fill-solid {\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border-hover: var(--uui-neutral-10);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-0);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border-hover: var(--uui-neutral-30);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-night100 {\n &.uui-fill-solid {\n --uui-tag-bg-hover: var(--uui-neutral-20);\n --uui-tag-border-hover: var(--uui-neutral-20);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-5);\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-30);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-neutral,\n &.uui-color-night300 {\n &.uui-fill-solid {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-neutral-70);\n --uui-tag-fill: var(--uui-neutral-70);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-night700 {\n &.uui-fill-solid {\n --uui-tag-caption: var(--uui-neutral-0);\n --uui-tag-fill: var(--uui-neutral-0);\n --uui-tag-bg: var(--uui-neutral-70);\n --uui-tag-border: var(--uui-neutral-70);\n --uui-tag-bg-hover: var(--uui-neutral-80);\n --uui-tag-border-hover: var(--uui-neutral-80);\n\n .uui-count_indicator {\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-50);\n --uui-tag-border-hover: var(--uui-neutral-50);\n\n }\n }\n\n &.uui-color-warning,\n &.uui-color-sun {\n &.uui-fill-solid {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n }\n }\n\n /* fonts */\n\n .uui-font-sans {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 400;\n }\n\n .uui-font-sans-semibold {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 600;\n }\n\n .uui-font-sans-light {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 300;\n }\n\n /* Typography */\n\n .uui-typography {\n h1 {\n font-weight: 600;\n }\n\n h2 {\n font-weight: 700;\n }\n\n h3 {\n font-weight: 600;\n }\n\n .hero-header {\n font-size: 72px;\n line-height: 72px;\n font-weight: 700;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../theme/variables/fresh_4px.scss%23sass"],"names":[],"mappings":"AACQ,yFAAA","file":"fresh_4px.css","sourcesContent":["@use 'tokens/theme_fresh_light_4px' as tokens;\n@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');\n/* Name convention */\n/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */\n\n@mixin fresh-variables {\n --uui-font: 'Lexend', serif;\n --uui-font-mono: 'Roboto Mono', monospace;\n\n /* shadows */\n --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);\n --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);\n --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);\n\n @include tokens.theme-tokens;\n\n\n & {\n --uui-border-radius: 3px;\n scrollbar-color: var(--uui-neutral-40) transparent;\n }\n\n /* begin color classes */\n\n .uui-color-grass {\n --uui-color-5: var(--uui-accent-5);\n --uui-color-10: var(--uui-accent-10);\n --uui-color-20: var(--uui-accent-20);\n --uui-color-50: var(--uui-accent-50);\n --uui-color-60: var(--uui-accent-60);\n --uui-color-70: var(--uui-accent-70);\n --uui-color-contrast: var(--uui-accent-contrast);\n }\n\n .uui-color-sky {\n --uui-color-5: var(--uui-primary-5);\n --uui-color-10: var(--uui-primary-10);\n --uui-color-20: var(--uui-primary-20);\n --uui-color-50: var(--uui-primary-50);\n --uui-color-60: var(--uui-primary-60);\n --uui-color-70: var(--uui-primary-70);\n --uui-color-contrast: var(--uui-primary-contrast);\n }\n\n .uui-color-fire {\n --uui-color-5: var(--uui-critical-5);\n --uui-color-10: var(--uui-critical-10);\n --uui-color-20: var(--uui-critical-20);\n --uui-color-50: var(--uui-critical-50);\n --uui-color-60: var(--uui-critical-60);\n --uui-color-70: var(--uui-critical-70);\n --uui-color-contrast: var(--uui-critical-contrast);\n }\n\n .uui-color-night100 {\n --uui-color-5: var(--white);\n --uui-color-10: var(--white);\n --uui-color-20: var(--night50);\n --uui-color-50: var(--night100);\n --uui-color-60: var(--uui-color-night100-800);\n --uui-color-70: var(--uui-color-night100-900);\n --uui-color-contrast: var(--uui-neutral-70);\n }\n\n .uui-color-night300 {\n --uui-color-5: var(--night50);\n --uui-color-10: var(--night100);\n --uui-color-20: var(--night200);\n --uui-color-50: var(--night300);\n --uui-color-60: var(--night400);\n --uui-color-70: var(--night500);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-night500 {\n --uui-color-5: var(--night200);\n --uui-color-10: var(--night300);\n --uui-color-20: var(--night400);\n --uui-color-50: var(--night500);\n --uui-color-60: var(--night600);\n --uui-color-70: var(--night700);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-night600,\n .uui-color-gray {\n --uui-color-5: var(--uui-secondary-5);\n --uui-color-10: var(--uui-secondary-10);\n --uui-color-20: var(--uui-secondary-20);\n --uui-color-50: var(--uui-secondary-50);\n --uui-color-60: var(--uui-secondary-60);\n --uui-color-70: var(--uui-secondary-70);\n --uui-color-contrast: var(--uui-secondary-contrast);\n }\n\n .uui-color-night700 {\n --uui-color-5: var(--night400);\n --uui-color-10: var(--night500);\n --uui-color-20: var(--night600);\n --uui-color-50: var(--night700);\n --uui-color-60: var(--uui-color-night700-800);\n --uui-color-70: var(--uui-color-night700-900);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-sun {\n --uui-color-5: var(--uui-warning-5);\n --uui-color-10: var(--uui-warning-10);\n --uui-color-20: var(--uui-warning-20);\n --uui-color-50: var(--uui-warning-50);\n --uui-color-60: var(--uui-warning-60);\n --uui-color-70: var(--uui-warning-70);\n --uui-color-contrast: var(--uui-warning-contrast);\n }\n\n .uui-color-yellow {\n --uui-color-5: var(--yellow-5);\n --uui-color-10: var(--yellow-10);\n --uui-color-20: var(--yellow-20);\n --uui-color-50: var(--yellow-50);\n --uui-color-60: var(--yellow-60);\n --uui-color-70: var(--yellow-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-orange {\n --uui-color-5: var(--orange-5);\n --uui-color-10: var(--orange-10);\n --uui-color-20: var(--orange-20);\n --uui-color-50: var(--orange-50);\n --uui-color-60: var(--orange-60);\n --uui-color-70: var(--orange-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-fuchsia {\n --uui-color-5: var(--fuchsia-5);\n --uui-color-10: var(--fuchsia-10);\n --uui-color-20: var(--fuchsia-20);\n --uui-color-50: var(--fuchsia-50);\n --uui-color-60: var(--fuchsia-60);\n --uui-color-70: var(--fuchsia-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-purple {\n --uui-color-5: var(--purple-5);\n --uui-color-10: var(--purple-10);\n --uui-color-20: var(--purple-20);\n --uui-color-50: var(--purple-50);\n --uui-color-60: var(--purple-60);\n --uui-color-70: var(--purple-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-violet {\n --uui-color-5: var(--violet-5);\n --uui-color-10: var(--violet-10);\n --uui-color-20: var(--violet-20);\n --uui-color-50: var(--violet-50);\n --uui-color-60: var(--violet-60);\n --uui-color-70: var(--violet-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-cobalt {\n --uui-color-5: var(--cobalt-5);\n --uui-color-10: var(--cobalt-10);\n --uui-color-20: var(--cobalt-20);\n --uui-color-50: var(--cobalt-50);\n --uui-color-60: var(--cobalt-60);\n --uui-color-70: var(--cobalt-70);\n --uui-color-contrast: var(--white);\n }\n\n .uui-color-cyan {\n --uui-color-5: var(--cyan-5);\n --uui-color-10: var(--cyan-10);\n --uui-color-20: var(--cyan-20);\n --uui-color-50: var(--cyan-50);\n --uui-color-60: var(--cyan-60);\n --uui-color-70: var(--cyan-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n .uui-color-mint {\n --uui-color-5: var(--mint-5);\n --uui-color-10: var(--mint-10);\n --uui-color-20: var(--mint-20);\n --uui-color-50: var(--mint-50);\n --uui-color-60: var(--mint-60);\n --uui-color-70: var(--mint-70);\n --uui-color-contrast: var(--uui-neutral-80);\n }\n\n /* Accordion */\n\n .uui-accordion-container {\n --uui-accordion-border-radius: 6px;\n }\n\n /* FileCard */\n\n .uui-file_card {\n --uui-file_card-border-radius: 6px;\n }\n\n /* Badge */\n\n .uui-badge.uui-color-white {\n &.uui-fill-solid {\n --uui-badge-border-hover: var(--uui-neutral-30);\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-0);\n --uui-badge-bg-hover: var(--uui-neutral-30);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-30);\n --uui-badge-caption: var(--uui-neutral-70);\n --uui-badge-caption-hover: var(--uui-neutral-70);\n }\n }\n\n .uui-badge.uui-color-neutral,\n .uui-badge.uui-color-night300 {\n &.uui-fill-solid {\n --uui-badge-bg: var(--uui-neutral-30);\n --uui-badge-bg-hover: var(--uui-neutral-40);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-40);\n --uui-color-contrast: var(--uui-neutral-80);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n }\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-20);\n --uui-badge-bg-hover: var(--uui-neutral-30);\n --uui-badge-border: var(--uui-neutral-40);\n --uui-badge-caption: var(--uui-neutral-80);\n --uui-badge-caption-hover: var(--uui-neutral-80);\n }\n }\n\n .uui-badge.uui-color-night100 {\n &.uui-fill-solid {\n --uui-badge-bg-hover: var(--uui-neutral-20);\n --uui-badge-border-hover: var(--uui-neutral-20);\n }\n\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-10);\n --uui-badge-bg-hover: var(--uui-neutral-20);\n --uui-badge-border: var(--uui-neutral-30);\n --uui-badge-border-hover: var(--uui-neutral-30);\n --uui-badge-caption: var(--uui-neutral-70);\n --uui-badge-caption-hover: var(--uui-neutral-70);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);\n }\n }\n }\n\n .uui-badge.uui-color-night600 {\n &.uui-fill-outline {\n --uui-badge-bg: var(--uui-neutral-20);\n --uui-badge-border: var(--uui-neutral-60);\n --uui-badge-border-hover: var(--uui-neutral-60);\n --uui-badge-caption: var(--uui-neutral-80);\n --uui-badge-caption-hover: var(--uui-neutral-80);\n }\n }\n\n .uui-badge.uui-color-yellow.uui-fill-outline {\n --uui-badge-border: var(--yellow-20);\n }\n\n /* Button */\n\n .uui-button {\n &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {\n --uui-btn-caption: var(--uui-neutral-70);\n }\n }\n\n /* IconButton */\n\n .uui-icon_button.uui-color-secondary {\n --uui-icon_btn: var(--uui-neutral-50);\n --uui-icon_btn-hover: var(--uui-neutral-60);\n --uui-icon_btn-active: var(--uui-neutral-70);\n }\n\n .uui-icon_button.uui-color-white {\n --uui-icon_btn-hover: var(--uui-neutral-20);\n --uui-icon_btn-active: var(--uui-neutral-30);\n }\n\n /* LinkButton */\n\n .uui-link_button.uui-color-contrast {\n --uui-link_btn-text: var(--uui-neutral-5);\n --uui-link_btn-text-hover: var(--uui-neutral-10);\n --uui-link_btn-text-active: var(--uui-neutral-20);\n }\n\n .uui-link_button.uui-color-white {\n --uui-link_btn-text: var(--uui-neutral-5);\n --uui-link_btn-text-hover: var(--uui-neutral-30);\n --uui-link_btn-text-active: var(--uui-neutral-40);\n --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);\n }\n\n /* Tooltip */\n\n .uui-tooltip-container.uui-color-white {\n --uui-tooltip-bg: var(--uui-neutral-0);\n --uui-tooltip-text: var(--uui-neutral-80);\n }\n\n .uui-tooltip-container.uui-color-red {\n --uui-tooltip-bg: var(--uui-error-60);\n }\n\n .uui-tooltip-container.uui-color-gray {\n --uui-tooltip-bg: var(--uui-neutral-80);\n --uui-tooltip-text: var(--uui-neutral-5);\n }\n\n /* CountIndicator */\n\n .uui-count_indicator.uui-color-gray,\n .uui-count_indicator.uui-color-neutral {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n\n .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n\n /* Status Indicator */\n\n .uui-status_indicator.uui-color-white.uui-fill-outline {\n .uui-status_indicator-dot {\n background-color: color-mix(in srgb, var(--white) 20%, transparent);\n border: 1px solid var(--uui-neutral-40);\n }\n }\n\n /* FlexRow */\n\n .uui-flex-row.uui-flex-row-bg-none {\n --uui-flex-row-bg: transparent;\n }\n\n .uui-flex-row.uui-flex-row-bg-white {\n --uui-flex-row-bg: var(--white);\n }\n\n .uui-flex-row.uui-flex-row-bg-night50 {\n --uui-flex-row-bg: var(--night50);\n }\n\n .uui-flex-row.uui-flex-row-bg-night100 {\n --uui-flex-row-bg: var(--night100);\n }\n\n .uui-panel.uui-bg-white {\n --uui-panel-bg: var(--white);\n }\n\n .uui-panel.uui-bg-night50 {\n --uui-panel-bg: var(--night50);\n }\n\n /* Text */\n\n .uui-text.uui-color-night50 {\n --uui-text: var(--night50);\n }\n\n .uui-text.uui-color-night400 {\n --uui-text: var(--night400);\n }\n\n .uui-text.uui-color-night800 {\n --uui-text: var(--night800);\n }\n\n .uui-text.uui-color-night900 {\n --uui-text: var(--night900);\n }\n\n .uui-text.uui-color-sky {\n --uui-text: var(--sky-70);\n }\n\n .uui-text.uui-color-grass {\n --uui-text: var(--grass-70);\n }\n\n .uui-text.uui-color-sun {\n --uui-text: var(--sun-70);\n }\n\n .uui-text.uui-color-fire {\n --uui-text: var(--fire-70);\n }\n\n /* Tag */\n\n .uui-tag {\n &.uui-color-white {\n &.uui-fill-solid {\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border-hover: var(--uui-neutral-10);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-0);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border-hover: var(--uui-neutral-30);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-night100 {\n &.uui-fill-solid {\n --uui-tag-bg-hover: var(--uui-neutral-20);\n --uui-tag-border-hover: var(--uui-neutral-20);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-5);\n --uui-tag-bg-hover: var(--uui-neutral-10);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-30);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-neutral,\n &.uui-color-night300 {\n &.uui-fill-solid {\n --uui-tag-bg: var(--uui-neutral-30);\n --uui-tag-bg-hover: var(--uui-neutral-40);\n --uui-tag-border: var(--uui-neutral-30);\n --uui-tag-border-hover: var(--uui-neutral-40);\n --uui-tag-caption: var(--uui-neutral-70);\n --uui-tag-fill: var(--uui-neutral-70);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-0);\n --uui-count_indicator-caption: var(--uui-neutral-70);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-40);\n --uui-tag-border-hover: var(--uui-neutral-40);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-30);\n --uui-count_indicator-border: var(--uui-neutral-30);\n }\n }\n }\n\n &.uui-color-night700 {\n &.uui-fill-solid {\n --uui-tag-caption: var(--uui-neutral-0);\n --uui-tag-fill: var(--uui-neutral-0);\n --uui-tag-bg: var(--uui-neutral-70);\n --uui-tag-border: var(--uui-neutral-70);\n --uui-tag-bg-hover: var(--uui-neutral-80);\n --uui-tag-border-hover: var(--uui-neutral-80);\n\n .uui-count_indicator {\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);\n }\n }\n\n &.uui-fill-outline {\n --uui-tag-bg: var(--uui-neutral-20);\n --uui-tag-bg-hover: var(--uui-neutral-30);\n --uui-tag-border: var(--uui-neutral-50);\n --uui-tag-border-hover: var(--uui-neutral-50);\n\n }\n }\n\n &.uui-color-warning,\n &.uui-color-sun {\n &.uui-fill-solid {\n --uui-tag-caption: var(--uui-text-primary);\n --uui-tag-fill: var(--uui-neutral-90);\n\n .uui-count_indicator {\n --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);\n --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);\n }\n }\n\n &.uui-fill-outline .uui-count_indicator {\n --uui-count_indicator-bg: var(--uui-neutral-0);\n --uui-count_indicator-border: var(--uui-neutral-40);\n }\n }\n }\n\n /* fonts */\n\n .uui-font-sans {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 400;\n }\n\n .uui-font-sans-semibold {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 600;\n }\n\n .uui-font-sans-light {\n --uui-text-font: var(--uui-font);\n --uui-text-font-weight: 300;\n }\n\n /* Typography */\n\n .uui-typography {\n h1 {\n font-weight: 600;\n }\n\n h2 {\n font-weight: 700;\n }\n\n h3 {\n font-weight: 600;\n }\n\n .hero-header {\n font-size: 72px;\n line-height: 72px;\n font-weight: 700;\n }\n }\n\n .uui-picker_input-body-search {\n --uui-data_picker_body-search-padding: 12px;\n }\n\n .uui-picker_input-row {\n margin: 0 12px;\n border-radius: 4px;\n }\n\n [aria-selected='true'], [aria-selected='true'].uui-focus {\n background-color: var(--uui-primary-60);\n\n .uui-picker_input-item {\n --uui-picker_item-title: var(--uui-neutral-0);\n --uui-picker_item-subtitle: var(--uui-neutral-0);\n }\n\n .uui-picker_input-row-select_icon {\n display: none;\n }\n }\n\n .uui-timepicker-container > .uui-timepicker-item .uui-timepicker-input.uui-input-box {\n width: 40px;\n }\n\n .uui-dt-columns-config-row {\n .uui-drag-handle {\n --uui-dt-columns_config_modal-row-vertical-padding: 5px;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21c-2.5 0-4.625-.875-6.375-2.625S3 14.5 3 12s.875-4.625 2.625-6.375S9.5 3 12 3a9.304 9.304 0 011.35.1 5.292 5.292 0 00-1.637 1.887A5.31 5.31 0 0011.1 7.5c0 1.5.525 2.775 1.575 3.825C13.725 12.375 15 12.9 16.5 12.9a5.28 5.28 0 002.525-.613A5.322 5.322 0 0020.9 10.65 8.505 8.505 0 0121 12c0 2.5-.875 4.625-2.625 6.375S14.5 21 12 21z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21c-2.5 0-4.625-.875-6.375-2.625S3 14.5 3 12s.875-4.625 2.625-6.375S9.5 3 12 3a9.304 9.304 0 011.35.1 5.292 5.292 0 00-1.637 1.887A5.31 5.31 0 0011.1 7.5c0 1.5.525 2.775 1.575 3.825C13.725 12.375 15 12.9 16.5 12.9a5.28 5.28 0 002.525-.613A5.322 5.322 0 0020.9 10.65 8.505 8.505 0 0121 12c0 2.5-.875 4.625-2.625 6.375S14.5 21 12 21zm0-2c1.467 0 2.783-.404 3.95-1.212a7.012 7.012 0 002.55-3.163c-.333.083-.667.15-1 .2-.333.05-.667.075-1 .075-2.05 0-3.796-.72-5.238-2.162C9.821 11.296 9.1 9.55 9.1 7.5c0-.333.025-.667.075-1 .05-.333.117-.667.2-1a7.013 7.013 0 00-3.162 2.55C5.404 9.217 5 10.533 5 12c0 1.933.683 3.583 2.05 4.95C8.417 18.317 10.067 19 12 19z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17c-1.383 0-2.563-.488-3.537-1.463C7.488 14.563 7 13.383 7 12s.487-2.563 1.463-3.537C9.438 7.488 10.617 7 12 7s2.563.487 3.537 1.463C16.512 9.438 17 10.617 17 12s-.488 2.563-1.463 3.537C14.563 16.512 13.383 17 12 17zm-7-4H1v-2h4v2zm18 0h-4v-2h4v2zM11 5V1h2v4h-2zm0 18v-4h2v4h-2zM6.4 7.75L3.875 5.325 5.3 3.85l2.4 2.5-1.3 1.4zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425L18.7 20.15zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4-1.4-1.3zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525L3.85 18.7z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 15c.833 0 1.542-.292 2.125-.875A2.893 2.893 0 0015 12c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0012 9c-.833 0-1.542.292-2.125.875A2.893 2.893 0 009 12c0 .833.292 1.542.875 2.125A2.893 2.893 0 0012 15zm0 2c-1.383 0-2.563-.488-3.537-1.463C7.488 14.563 7 13.383 7 12s.487-2.563 1.463-3.537C9.438 7.488 10.617 7 12 7s2.563.487 3.537 1.463C16.512 9.438 17 10.617 17 12s-.488 2.563-1.463 3.537C14.563 16.512 13.383 17 12 17zm-7-4H1v-2h4v2zm18 0h-4v-2h4v2zM11 5V1h2v4h-2zm0 18v-4h2v4h-2zM6.4 7.75L3.875 5.325 5.3 3.85l2.4 2.5-1.3 1.4zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425L18.7 20.15zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4-1.4-1.3zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525L3.85 18.7z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.763 3.274a.563.563 0 00-.563.563v16.307c0 .31.252.562.563.562h3.884v1.875H5.763a2.437 2.437 0 01-2.438-2.437V3.837a2.437 2.437 0 012.438-2.438h7.392c.264 0 .516.112.694.308l5.302 5.845a.938.938 0 01.242.63v3.644h-1.875V9.12h-4.363a.937.937 0 01-.938-.938V3.274H5.763zm3.731 5.587H7.251v1.894h2.243V8.86zm-2.243 3.535h8.226v1.894H7.251v-1.894zm0 5.43V15.93h5.235v.938l-1.329.956H7.251zm12.52-4.737a.44.44 0 01.63-.001l.948.96a.46.46 0 01.002.643l-.996 1.019-1.58-1.602.995-1.019zm-1.518 1.553l1.58 1.601-6.545 6.699-1.583.01.002-1.611 6.546-6.699z" clip-rule="evenodd"/></svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/assets",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"description": "EPAM Assets Library",
|
|
5
5
|
"author": "EPAM",
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"type": "git",
|
|
14
14
|
"url": "https://github.com/epam/UUI"
|
|
15
15
|
},
|
|
16
|
-
"gitHead": "
|
|
16
|
+
"gitHead": "92d069e2134034368407db1104e0c894de70dce3",
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"directory": "build"
|
|
19
19
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
--uui-border-radius: 8px;
|
|
8
8
|
--uui-tab-line-width: 3px;
|
|
9
9
|
--uui-notify-size: 6px;
|
|
10
|
+
--uui-resize-marker-width: 12px;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.uui-size-16 {
|
|
@@ -42,7 +43,7 @@
|
|
|
42
43
|
--uui-vertical-gap: 3px;
|
|
43
44
|
--uui-horizontal-padding: 6px;
|
|
44
45
|
--uui-vertical-padding: 3px;
|
|
45
|
-
--uui-icon-size:
|
|
46
|
+
--uui-icon-size: 16px;
|
|
46
47
|
--uui-line-height: 18px;
|
|
47
48
|
--uui-font-size: 14px;
|
|
48
49
|
--uui-dot-size: 10px;
|
|
@@ -100,6 +101,19 @@
|
|
|
100
101
|
--uui-dot-size: 12px;
|
|
101
102
|
}
|
|
102
103
|
|
|
104
|
+
.uui-size-56 {
|
|
105
|
+
--uui-size: 56px;
|
|
106
|
+
--uui-border-width: 1px;
|
|
107
|
+
--uui-horizontal-gap: 4px;
|
|
108
|
+
--uui-vertical-gap: 3px;
|
|
109
|
+
--uui-horizontal-padding: 32px;
|
|
110
|
+
--uui-vertical-padding: 16px;
|
|
111
|
+
--uui-icon-size: 24px;
|
|
112
|
+
--uui-line-height: 24px;
|
|
113
|
+
--uui-font-size: 16px;
|
|
114
|
+
--uui-dot-size: 12px;
|
|
115
|
+
}
|
|
116
|
+
|
|
103
117
|
.uui-size-60 {
|
|
104
118
|
--uui-size: 60px;
|
|
105
119
|
--uui-border-width: 1px;
|
|
@@ -237,4 +251,15 @@
|
|
|
237
251
|
--uui-horizontal-gap: 4px;
|
|
238
252
|
}
|
|
239
253
|
}
|
|
254
|
+
|
|
255
|
+
.uui-columns-config-modal {
|
|
256
|
+
--uui-dt-columns_config_modal-subgroup_icon: 20px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.uui-alert {
|
|
260
|
+
--uui-alert-padding-v: 16px;
|
|
261
|
+
--uui-alert-padding-h: 16px;
|
|
262
|
+
font-size: 16px;
|
|
263
|
+
line-height: 24px;
|
|
264
|
+
}
|
|
240
265
|
}
|