@epam/assets 6.0.0-beta.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.
@@ -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 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-bg-none {\n --uui-flex-row-bg: transparent;\n }\n\n .uui-flex-row.uui-bg-white {\n --uui-flex-row-bg: var(--white);\n }\n\n .uui-flex-row.uui-bg-night50 {\n --uui-flex-row-bg: var(--night50);\n }\n\n .uui-flex-row.uui-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"]}
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": "6.0.0-beta.0",
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": "032320752b18521b1f781c72370ad512a0c87ae6",
16
+ "gitHead": "92d069e2134034368407db1104e0c894de70dce3",
17
17
  "publishConfig": {
18
18
  "directory": "build"
19
19
  }
@@ -356,19 +356,19 @@
356
356
 
357
357
  /* FlexRow */
358
358
 
359
- .uui-flex-row.uui-bg-none {
359
+ .uui-flex-row.uui-flex-row-bg-none {
360
360
  --uui-flex-row-bg: transparent;
361
361
  }
362
362
 
363
- .uui-flex-row.uui-bg-white {
363
+ .uui-flex-row.uui-flex-row-bg-white {
364
364
  --uui-flex-row-bg: var(--white);
365
365
  }
366
366
 
367
- .uui-flex-row.uui-bg-night50 {
367
+ .uui-flex-row.uui-flex-row-bg-night50 {
368
368
  --uui-flex-row-bg: var(--night50);
369
369
  }
370
370
 
371
- .uui-flex-row.uui-bg-night100 {
371
+ .uui-flex-row.uui-flex-row-bg-night100 {
372
372
  --uui-flex-row-bg: var(--night100);
373
373
  }
374
374
 
@@ -602,4 +602,10 @@
602
602
  .uui-timepicker-container > .uui-timepicker-item .uui-timepicker-input.uui-input-box {
603
603
  width: 40px;
604
604
  }
605
+
606
+ .uui-dt-columns-config-row {
607
+ .uui-drag-handle {
608
+ --uui-dt-columns_config_modal-row-vertical-padding: 5px;
609
+ }
610
+ }
605
611
  }
@@ -364,19 +364,19 @@
364
364
 
365
365
  /* FlexRow */
366
366
 
367
- .uui-flex-row.uui-color-none {
367
+ .uui-flex-row.uui-flex-row-bg-none {
368
368
  --uui-flex-row-bg: transparent;
369
369
  }
370
370
 
371
- .uui-flex-row.uui-color-white {
371
+ .uui-flex-row.uui-flex-row-bg-white {
372
372
  --uui-flex-row-bg: var(--white);
373
373
  }
374
374
 
375
- .uui-flex-row.uui-color-night50 {
375
+ .uui-flex-row.uui-flex-row-bg-night50 {
376
376
  --uui-flex-row-bg: var(--night50);
377
377
  }
378
378
 
379
- .uui-flex-row.uui-color-night100 {
379
+ .uui-flex-row.uui-flex-row-bg-night100 {
380
380
  --uui-flex-row-bg: var(--night100);
381
381
  }
382
382
 
@@ -738,6 +738,36 @@
738
738
  --uui-text-font-weight: 300;
739
739
  }
740
740
 
741
+ /* FlexRow */
742
+
743
+ // TODO: need approve
744
+
745
+ //.uui-flex-row.uui-flex-row-bg-none {
746
+ // --uui-flex-row-bg: transparent;
747
+ //}
748
+ //
749
+ //.uui-flex-row.uui-flex-row-bg-white {
750
+ // --uui-flex-row-bg: var(--white);
751
+ //}
752
+ //
753
+ //.uui-flex-row.uui-flex-row-bg-night50 {
754
+ // --uui-flex-row-bg: var(--night50);
755
+ //}
756
+ //
757
+ //.uui-flex-row.uui-flex-row-bg-night100 {
758
+ // --uui-flex-row-bg: var(--night100);
759
+ //}
760
+
761
+ /* Panel */
762
+
763
+ //.uui-panel.uui-color-white {
764
+ // --uui-panel-bg: var(--white);
765
+ //}
766
+ //
767
+ //.uui-panel.uui-color-night50 {
768
+ // --uui-panel-bg: var(--night50);
769
+ //}
770
+
741
771
  /* Text */
742
772
 
743
773
  .uui-text.uui-color-sky {
@@ -359,15 +359,15 @@
359
359
 
360
360
  /* FlexRow */
361
361
 
362
- .uui-flex-row.uui-color-none {
362
+ .uui-flex-row.uui-flex-row-bg-none {
363
363
  --uui-flex-row-bg: transparent;
364
364
  }
365
365
 
366
- .uui-flex-row.uui-color-white {
366
+ .uui-flex-row.uui-flex-row-bg-white {
367
367
  --uui-flex-row-bg: var(--white);
368
368
  }
369
369
 
370
- .uui-flex-row.uui-color-gray5 {
370
+ .uui-flex-row.uui-flex-row-bg-gray5 {
371
371
  --uui-flex-row-bg: var(--gray5);
372
372
  }
373
373