@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/theming/themes/miranda-compatibility.theme.ts

@@ -1,972 +0,0 @@
-import { toCSSValue } from '@loadsmart/miranda-tokens'
-
-import {
-  generateBorderGetters,
-  generateColorGetter,
-  generateFontGetters,
-  generateShadowGetter,
-  generateSpacingGetter,
-  generateHeightGetter,
-} from '../../theming/theming.helpers'
-import rem from '../../utils/toolset/rem'
-
-import AliceTheme, {
-  COLORS as ALICE_COLORS,
-  OPACITIES as ALICE_OPACITIES,
-  SPACINGS as ALICE_SPACINGS,
-  FONT_FAMILIES as ALICE_FONT_FAMILIES,
-  FONT_SIZES as ALICE_FONT_SIZES,
-  FONT_WEIGHTS as ALICE_FONT_WEIGHTS,
-  FONT_HEIGHTS as ALICE_FONT_HEIGHTS,
-  BORDER_RADIUSES as ALICE_BORDER_RADIUSES,
-  BORDER_WIDTHS as ALICE_BORDER_WIDTHS,
-  Z_INDEXES as ALICE_Z_INDEXES,
-} from './alice.theme'
-
-export const COLORS = {
-  ...ALICE_COLORS,
-  'color-primary': toCSSValue('color-primary-60'),
-  'color-accent': toCSSValue('color-accent-60'),
-
-  'color-neutral-white': toCSSValue('color-neutral-0'),
-  'color-neutral-lightest': toCSSValue('color-neutral-10'),
-  'color-neutral-lighter': toCSSValue('color-neutral-20'),
-  'color-neutral-light': toCSSValue('color-neutral-40'),
-  'color-neutral': toCSSValue('color-neutral-60'),
-  'color-neutral-dark': toCSSValue('color-neutral-80'),
-  'color-neutral-darker': toCSSValue('color-neutral-90'),
-  'color-neutral-darkest': toCSSValue('color-neutral-100'),
-
-  'color-success-dark': toCSSValue('color-success-100'),
-  'color-success': toCSSValue('color-success-60'),
-  'color-success-light': toCSSValue('color-success-20'),
-
-  'color-danger-dark': toCSSValue('color-danger-100'),
-  'color-danger': toCSSValue('color-danger-60'),
-  'color-danger-light': toCSSValue('color-danger-20'),
-
-  'color-warning-dark': toCSSValue('color-warning-100'),
-  'color-warning': toCSSValue('color-warning-60'),
-  'color-warning-light': toCSSValue('color-warning-20'),
-}
-
-export const OPACITIES = ALICE_OPACITIES
-
-export const SPACINGS = ALICE_SPACINGS
-
-export const FONT_FAMILIES = ALICE_FONT_FAMILIES
-
-export const FONT_SIZES = ALICE_FONT_SIZES
-
-export const FONT_WEIGHTS = ALICE_FONT_WEIGHTS
-
-export const FONT_HEIGHTS = ALICE_FONT_HEIGHTS
-
-export const SHADOWS = {
-  'shadow-none': 'none',
-  'shadow-modal': '0px 2px 6px 0px rgba(10, 10, 11, 0.4)',
-  'shadow-droplist': '0px 2px 3px 0px rgba(10, 10, 11, 0.4)',
-  'shadow-glow-primary': `0px 0px 4px 0px ${toCSSValue('color-primary-60')}`,
-  'shadow-glow-warning': `0px 0px 4px 0px ${toCSSValue('color-warning-60')}`,
-}
-
-export const BORDER_RADIUSES = ALICE_BORDER_RADIUSES
-
-export const BORDER_WIDTHS = ALICE_BORDER_WIDTHS
-
-export const Z_INDEXES = ALICE_Z_INDEXES
-
-export const HEIGHTS = {
-  'height-small': toCSSValue('global-height-small'),
-  'height-default': toCSSValue('global-height-default'),
-  'height-large': toCSSValue('global-height-large'),
-}
-
-const color = generateColorGetter(COLORS)
-const shadow = generateShadowGetter(SHADOWS)
-const spacing = generateSpacingGetter(SPACINGS)
-const font = generateFontGetters({
-  families: FONT_FAMILIES,
-  heights: FONT_HEIGHTS,
-  sizes: FONT_SIZES,
-  weights: FONT_WEIGHTS,
-})
-const border = generateBorderGetters({
-  radiuses: BORDER_RADIUSES,
-  widths: BORDER_WIDTHS,
-})
-
-const height = generateHeightGetter(HEIGHTS)
-
-const mirandaCompatibility = {
-  ...AliceTheme,
-  ...BORDER_RADIUSES,
-  ...BORDER_WIDTHS,
-  ...COLORS,
-  ...FONT_FAMILIES,
-  ...FONT_HEIGHTS,
-  ...FONT_SIZES,
-  ...FONT_WEIGHTS,
-  ...OPACITIES,
-  ...SHADOWS,
-  ...SPACINGS,
-  ...Z_INDEXES,
-  ...HEIGHTS,
-
-  // button
-  'button-border-radius': border.radius('s'),
-  'button-border-width': border.width('thin'),
-  'button-font-weight': font.weight('bold'),
-  'button-font-height': font.height('1'),
-  'button-small-font-size': font.size('5'),
-  'button-small-height': height('small'),
-  'button-small-padding-x': spacing('s'),
-  'button-small-padding-y': rem('6px'),
-  'button-font-size': font.size('3'),
-  'button-height': height('default'),
-  'button-width': 'auto',
-  'button-padding-y': rem('10px'),
-  'button-padding-x': spacing('m'),
-  'button-spacing-x': spacing('s'),
-  'button-large-font-size': font.size('3'),
-  'button-large-height': height('large'),
-  'button-large-padding-x': spacing('m'),
-  'button-large-padding-y': rem('14px'),
-  'button-outline-offset': '2px',
-
-  // button primary
-  'button-primary-background': color('primary'),
-  'button-primary-background--hover': toCSSValue('color-primary-100'),
-  'button-primary-background--focus': color('primary'),
-  'button-primary-background--active': toCSSValue('color-primary-60', 0.6),
-  'button-primary-background--disabled': color('primary'),
-
-  'button-primary-border-color': color('primary'),
-  'button-primary-border-color--hover': toCSSValue('color-primary-100'),
-  'button-primary-border-color--focus': toCSSValue('color-primary-100'),
-  'button-primary-border-color--active': toCSSValue('color-primary-60', 0.6),
-  'button-primary-border-color--disabled': color('primary'),
-
-  'button-primary-color': color('neutral-white'),
-  'button-primary-color--hover': color('neutral-white'),
-  'button-primary-color--focus': color('neutral-white'),
-  'button-primary-color--active': color('neutral-white'),
-  'button-primary-color--disabled': color('neutral-white'),
-
-  'button-primary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
-  'button-primary-box-shadow': 'none',
-
-  // button secondary
-  'button-secondary-background': color('transparent'),
-  'button-secondary-background--hover': toCSSValue('color-background-tertiary'),
-  'button-secondary-background--focus': color('transparent'),
-  'button-secondary-background--active': toCSSValue('color-background-tertiary'),
-  'button-secondary-background--disabled': color('transparent'),
-
-  'button-secondary-border-color': toCSSValue('color-primary-100'),
-  'button-secondary-border-color--hover': toCSSValue('color-primary-60'),
-  'button-secondary-border-color--focus': toCSSValue('color-primary-100'),
-  'button-secondary-border-color--active': toCSSValue('color-primary-60'),
-  'button-secondary-border-color--disabled': toCSSValue('color-primary-100'),
-
-  'button-secondary-color': toCSSValue('color-primary-100'),
-  'button-secondary-color--hover': toCSSValue('color-primary-60'),
-  'button-secondary-color--focus': toCSSValue('color-primary-100'),
-  'button-secondary-color--active': toCSSValue('color-primary-60'),
-  'button-secondary-color--disabled': toCSSValue('color-primary-100'),
-
-  'button-secondary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
-  'button-secondary-box-shadow': 'none',
-
-  // button secondary dark
-  'button-secondary-dark-background': color('transparent'),
-  'button-secondary-dark-background--hover': toCSSValue('color-neutral-60', 0.2),
-  'button-secondary-dark-background--focus': color('transparent'),
-  'button-secondary-dark-background--active': toCSSValue('color-neutral-60', 0.4),
-  'button-secondary-dark-background--disabled': color('transparent'),
-
-  'button-secondary-dark-border-color': color('neutral-light'),
-  'button-secondary-dark-border-color--hover': color('accent'),
-  'button-secondary-dark-border-color--focus': color('neutral-light'),
-  'button-secondary-dark-border-color--active': toCSSValue('color-primary-60', 0.6),
-  'button-secondary-dark-border-color--disabled': color('neutral-light'),
-
-  'button-secondary-dark-color': color('neutral-light'),
-  'button-secondary-dark-color--hover': color('accent'),
-  'button-secondary-dark-color--focus': color('neutral-light'),
-  'button-secondary-dark-color--active': toCSSValue('color-primary-60', 0.6),
-  'button-secondary-dark-color--disabled': color('neutral-light'),
-
-  // button tertiary
-  'button-tertiary-background': color('transparent'),
-  'button-tertiary-background--hover': toCSSValue('color-background-tertiary'),
-  'button-tertiary-background--focus': color('transparent'),
-  'button-tertiary-background--active': toCSSValue('color-background-tertiary'),
-  'button-tertiary-background--disabled': color('transparent'),
-
-  'button-tertiary-border-color': color('transparent'),
-  'button-tertiary-border-color--hover': toCSSValue('color-background-tertiary'),
-  'button-tertiary-border-color--focus': color('transparent'),
-  'button-tertiary-border-color--active': toCSSValue('color-background-tertiary'),
-  'button-tertiary-border-color--disabled': color('transparent'),
-
-  'button-tertiary-color': toCSSValue('color-primary-100'),
-  'button-tertiary-color--hover': toCSSValue('color-primary-60'),
-  'button-tertiary-color--focus': toCSSValue('color-primary-100'),
-  'button-tertiary-color--active': toCSSValue('color-primary-60'),
-  'button-tertiary-color--disabled': toCSSValue('color-primary-100'),
-
-  'button-tertiary-outline': `1px solid ${toCSSValue('color-primary-60')}`,
-  'button-tertiary-box-shadow': 'none',
-
-  // button warning
-  'button-warning-background': toCSSValue('color-warning-60'),
-  'button-warning-background--hover': toCSSValue('color-warning-100'),
-  'button-warning-background--focus': toCSSValue('color-warning-60'),
-  'button-warning-background--active': toCSSValue('color-warning-100'),
-  'button-warning-background--disabled': toCSSValue('color-warning-60'),
-
-  'button-warning-border-color': toCSSValue('color-warning-60'),
-  'button-warning-border-color--hover': toCSSValue('color-warning-100'),
-  'button-warning-border-color--focus': toCSSValue('color-warning-60'),
-  'button-warning-border-color--active': toCSSValue('color-warning-100'),
-  'button-warning-border-color--disabled': toCSSValue('color-warning-60'),
-
-  'button-warning-color': toCSSValue('color-text-primary'),
-  'button-warning-color--hover': toCSSValue('color-text-inverted'),
-  'button-warning-color--focus': toCSSValue('color-text-primary'),
-  'button-warning-color--active': toCSSValue('color-text-inverted'),
-  'button-warning-color--disabled': color('neutral-white'),
-
-  'button-warning-outline': `1px solid ${toCSSValue('color-warning-60')}`,
-  'button-warning-box-shadow': 'none',
-
-  // button icon
-  'button-icon-border-radius': border.radius('circle'),
-  'button-icon-small-width': height('small'),
-  'button-icon-width': height('default'),
-  'button-icon-large-width': height('large'),
-
-  'button-icon-background': toCSSValue('color-background-tertiary'),
-  'button-icon-background--hover': toCSSValue('color-background-highlight'),
-  'button-icon-background--focus': toCSSValue('color-background-tertiary'),
-  'button-icon-background--active': toCSSValue('color-background-highlight'),
-  'button-icon-background--disabled': toCSSValue('color-background-tertiary'),
-
-  'button-icon-border-color': toCSSValue('color-background-tertiary'),
-  'button-icon-border-color--hover': toCSSValue('color-background-highlight'),
-  'button-icon-border-color--focus': toCSSValue('color-background-tertiary'),
-  'button-icon-border-color--active': toCSSValue('color-background-highlight'),
-  'button-icon-border-color--disabled': toCSSValue('color-background-tertiary'),
-
-  'button-icon-color': toCSSValue('color-background-secondary-inverted'),
-  'button-icon-color--hover': toCSSValue('color-primary-60'),
-  'button-icon-color--focus': toCSSValue('color-primary-60'),
-  'button-icon-color--active': toCSSValue('color-primary-60'),
-  'button-icon-color--disabled': toCSSValue('color-background-secondary-inverted'),
-
-  'button-icon-outline': `1px solid ${toCSSValue('color-primary-60')}`,
-  'button-icon-box-shadow': 'none',
-
-  // tag
-  'tag-border-radius': rem('30px'),
-  'tag-border-width': border.width('thin'),
-  'tag-font-height': font.height('1'),
-  'tag-spacing': `0 ${toCSSValue('spacing-3')}`,
-  'tag-removable-spacing': `0 ${spacing('xs')} 0 ${spacing('s')}`,
-  'tag-width': 'auto',
-  'tag-box-shadow': 'none',
-  'tag-outline-offset': '2px',
-
-  'tag-remove-button-background': color('neutral-white'),
-  'tag-remove-button-border-radius': rem('24px'),
-  'tag-icon-spacing': spacing('xs'),
-
-  // tag small
-  'tag-small-font-size': toCSSValue('font-size-1'),
-  'tag-small-font-weight': toCSSValue('font-weight-medium'),
-  'tag-small-height': rem('18px'),
-  'tag-small-transform': 'uppercase',
-  'tag-small-leading-display': 'none',
-  'tag-small-remove-button-size': rem('0'),
-  'tag-small-remove-button-icon-size': rem('0'),
-  'tag-small-spacing': `0 ${toCSSValue('spacing-2')}`,
-  'tag-small-removable-spacing': `0 ${spacing('s')}`,
-
-  // tag medium
-  'tag-font-size': toCSSValue('font-size-2'),
-  'tag-font-weight': toCSSValue('font-weight-bold'),
-  'tag-height': rem('28px'),
-  'tag-transform': 'none',
-  'tag-leading-display': 'inline-flex',
-  'tag-remove-button-size': rem('16px'),
-  'tag-remove-button-icon-size': rem('10px'),
-
-  // tag large
-  'tag-large-font-size': toCSSValue('font-size-4'),
-  'tag-large-font-weight': toCSSValue('font-weight-bold'),
-  'tag-large-height': rem('40px'),
-  'tag-large-transform': 'none',
-  'tag-large-leading-display': 'inline-flex',
-  'tag-large-remove-button-size': rem('24px'),
-  'tag-large-remove-button-icon-size': rem('12px'),
-  'tag-large-spacing': `0 ${toCSSValue('spacing-4')}`,
-
-  // tag default
-  'tag-default-background': toCSSValue('color-background-tertiary'),
-  'tag-default-background--hover': toCSSValue('color-background-tertiary'),
-  'tag-default-background--focus': toCSSValue('color-background-tertiary'),
-
-  'tag-default-color': toCSSValue('color-text-tertiary'),
-  'tag-default-color--hover': color('neutral-darkest'),
-  'tag-default-color--focus': color('neutral-dark'),
-
-  'tag-default-border-color': toCSSValue('color-background-tertiary'),
-  'tag-default-border-color--hover': toCSSValue('color-background-tertiary'),
-  'tag-default-border-color--focus': toCSSValue('color-background-tertiary'),
-
-  'tag-default-outline': `1px solid ${toCSSValue('color-neutral-100')}`,
-
-  // tag outline
-  'tag-outlined-background': color('transparent'),
-  'tag-outlined-background--hover': color('transparent'),
-  'tag-outlined-background--focus': color('transparent'),
-
-  'tag-outlined-color': color('neutral-darkest'),
-  'tag-outlined-color--hover': color('neutral-darkest'),
-  'tag-outlined-color--focus': color('neutral-darker'),
-
-  'tag-outlined-border-color': color('neutral-darkest'),
-  'tag-outlined-border-color--hover': color('neutral-darkest'),
-  'tag-outlined-border-color--focus': color('neutral-darker'),
-
-  'tag-outlined-outline': `1px solid ${toCSSValue('color-neutral-100')}`,
-
-  // tag accent
-  'tag-accent-background': toCSSValue('color-accent-20'),
-  'tag-accent-background--hover': toCSSValue('color-accent-20'),
-  'tag-accent-background--focus': toCSSValue('color-accent-20'),
-
-  'tag-accent-color': toCSSValue('color-accent-60'),
-  'tag-accent-color--hover': toCSSValue('color-accent-60'),
-  'tag-accent-color--focus': toCSSValue('color-accent-60'),
-
-  'tag-accent-border-color': 'transparent',
-  'tag-accent-border-color--hover': 'transparent',
-  'tag-accent-border-color--focus': 'transparent',
-
-  'tag-accent-outline': `1px solid ${toCSSValue('color-accent-100')}`,
-
-  // tag success
-  'tag-success-background': toCSSValue('color-success-20'),
-  'tag-success-background--hover': toCSSValue('color-success-20'),
-  'tag-success-background--focus': toCSSValue('color-success-20'),
-
-  'tag-success-color': toCSSValue('color-success-60'),
-  'tag-success-color--hover': color('success-dark'),
-  'tag-success-color--focus': color('success-dark'),
-
-  'tag-success-border-color': toCSSValue('color-success-20'),
-  'tag-success-border-color--hover': toCSSValue('color-success-20'),
-  'tag-success-border-color--focus': toCSSValue('color-success-20'),
-
-  'tag-success-outline': `1px solid ${toCSSValue('color-success-100')}`,
-
-  // tag warning
-  'tag-warning-background': toCSSValue('color-warning-20'),
-  'tag-warning-background--hover': toCSSValue('color-warning-20'),
-  'tag-warning-background--focus': toCSSValue('color-warning-20'),
-
-  'tag-warning-color': toCSSValue('color-warning-100'),
-  'tag-warning-color--hover': toCSSValue('color-warning-100'),
-  'tag-warning-color--focus': toCSSValue('color-warning-100'),
-
-  'tag-warning-border-color': toCSSValue('color-warning-20'),
-  'tag-warning-border-color--hover': toCSSValue('color-warning-20'),
-  'tag-warning-border-color--focus': toCSSValue('color-warning-20'),
-
-  'tag-warning-outline': `1px solid ${toCSSValue('color-warning-100')}`,
-
-  // tag danger
-  'tag-danger-background': toCSSValue('color-danger-20'),
-  'tag-danger-background--hover': toCSSValue('color-danger-20'),
-  'tag-danger-background--focus': toCSSValue('color-danger-20'),
-
-  'tag-danger-color': toCSSValue('color-danger-60'),
-  'tag-danger-color--hover': toCSSValue('color-danger-60'),
-  'tag-danger-color--focus': toCSSValue('color-danger-60'),
-
-  'tag-danger-border-color': toCSSValue('color-danger-20'),
-  'tag-danger-border-color--hover': toCSSValue('color-danger-20'),
-  'tag-danger-border-color--focus': toCSSValue('color-danger-20'),
-
-  'tag-danger-outline': `1px solid ${toCSSValue('color-danger-100')}`,
-
-  // checkbox
-  'checkbox-color': color('neutral-darker'),
-  'checkbox-font-weight': font.weight('medium'),
-  'checkbox-font-size': font.size('4'),
-
-  'checkbox-selector-border-radius': border.radius('s'),
-  'checkbox-selector-size': rem('16px'),
-  'checkbox-selector-box-shadow': 'none',
-  'checkbox-selector-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'checkbox-selector-outline-offset': '2px',
-
-  'checkbox-small-font-size': font.size('5'),
-
-  'checkbox-selector-icon-color': color('neutral-white'),
-
-  'checkbox-selector-background': color('neutral-white'),
-  'checkbox-selector-background--hover': color('neutral-white'),
-  'checkbox-selector-background--focus': color('neutral-white'),
-  'checkbox-selector-background--disabled': color('neutral-light'),
-
-  'checkbox-selector-checked-background': color('primary'),
-  'checkbox-selector-checked-background--hover': toCSSValue('color-primary-100'),
-  'checkbox-selector-checked-background--focus': color('primary'),
-  'checkbox-selector-checked-background--disabled': color('neutral-dark'),
-
-  'checkbox-selector-border-color': color('neutral-darker'),
-  'checkbox-selector-border-color--hover': color('accent'),
-  'checkbox-selector-border-color--focus': color('accent'),
-  'checkbox-selector-border-color--disabled': color('neutral-darker'),
-
-  'checkbox-selector-checked-border-color': color('primary'),
-  'checkbox-selector-checked-border-color--hover': color('accent'),
-  'checkbox-selector-checked-border-color--focus': color('accent'),
-  'checkbox-selector-checked-border-color--disabled': color('neutral-darkest'),
-
-  // checkbox dark
-  'checkbox-dark-color': color('neutral-lighter'),
-
-  'checkbox-dark-selector-background': color('neutral-darker'),
-  'checkbox-dark-selector-background--hover': color('neutral-darker'),
-  'checkbox-dark-selector-background--focus': color('neutral-darker'),
-  'checkbox-dark-selector-background--disabled': color('neutral-neutral'),
-
-  'checkbox-dark-selector-border-color': color('neutral-lighter'),
-  'checkbox-dark-selector-border-color--hover': color('accent'),
-  'checkbox-dark-selector-border-color--focus': color('accent'),
-  'checkbox-dark-selector-border-color--disabled': color('neutral-lighter'),
-
-  // radio
-  'radio-color': color('accent'),
-  'radio-font-weight': font.weight('medium'),
-  'radio-font-size': font.size('4'),
-
-  'radio-selector-border-radius': border.radius('circle'),
-  'radio-selector-size': rem('24px'),
-  'radio-selector-box-shadow': 'none',
-
-  'radio-small-font-size': font.size('5'),
-  'radio-small-selector-size': rem('16px'),
-
-  'radio-selector-background': color('neutral-white'),
-  'radio-selector-background--hover': color('neutral-white'),
-  'radio-selector-background--focus': color('neutral-white'),
-  'radio-selector-background--disabled': color('neutral-light'),
-
-  'radio-selector-border-color': color('neutral-darker'),
-  'radio-selector-border-color--hover': color('accent'),
-  'radio-selector-border-color--focus': color('accent'),
-  'radio-selector-border-color--disabled': color('neutral-darker'),
-
-  'radio-selector-border-color--checked': toCSSValue('color-primary-60'),
-
-  // radio dark
-  'radio-dark-color': color('neutral-lighter'),
-
-  'radio-dark-selector-background': color('neutral-darker'),
-  'radio-dark-selector-background--hover': color('neutral-darker'),
-  'radio-dark-selector-background--focus': color('neutral-darker'),
-  'radio-dark-selector-background--disabled': color('neutral-neutral'),
-
-  'radio-dark-selector-border-color': color('neutral-lighter'),
-  'radio-dark-selector-border-color--hover': color('accent'),
-  'radio-dark-selector-border-color--focus': color('accent'),
-  'radio-dark-selector-border-color--disabled': color('neutral-lighter'),
-
-  // tooltip
-  'tooltip-arrow-height': rem('12px'),
-  'tooltip-arrow-width': rem('20px'),
-  'tooltip-background': color('neutral-darker'),
-  'tooltip-border-radius': rem('8px'),
-  'tooltip-color': color('neutral-white'),
-  'tooltip-dark-outline': toCSSValue('color-neutral-60', 0.4),
-  'tooltip-font-size': font.size('4'),
-  'tooltip-font-height': font.height('3'),
-  'tooltip-max-width': rem('240px'),
-  'tooltip-min-width': rem('80px'),
-  'tooltip-outline': color('neutral-darkest'),
-  'tooltip-padding-x': spacing('m'),
-  'tooltip-padding-y': spacing('s'),
-  'tooltip-margin': spacing('s'),
-  'tooltip-shadow': shadow('droplist'),
-
-  // modal
-  'modal-small-max-width': rem('344px'),
-  'modal-max-width': rem('484px'),
-  'modal-large-max-width': rem('688px'),
-  'modal-overlay-background': toCSSValue('color-neutral-100', 0.4),
-
-  // dialog
-  'dialog-header-color': color('neutral-darkest'),
-  'dialog-header-border-color': color('neutral-light'),
-  'dialog-body-font-color': color('color-neutral-darker'),
-
-  // text-field
-  'text-field-border-radius': border.radius('s'),
-  'text-field-color': color('neutral-darker'),
-  'text-field-font-size': font.size('4'),
-  'text-field-font-weight': font.weight('medium'),
-  'text-field-font-height': font.height('3'),
-  'text-field-height': height('default'),
-  'text-field-padding-x': spacing('s'),
-  'text-field-padding-y': spacing('s'),
-
-  'text-field-box-shadow': 'none',
-  'text-field-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'text-field-outline-offset': '2px',
-
-  'text-field-small-height': height('small'),
-  'text-field-small-padding-x': spacing('s'),
-  'text-field-small-padding-y': spacing('xs'),
-  'text-field-small-font-size': font.size('5'),
-
-  'text-field-large-height': height('large'),
-  'text-field-large-padding-x': spacing('s'),
-  'text-field-large-padding-y': rem('12px'),
-  'text-field-large-font-size': font.size('4'),
-
-  'text-field-background': color('neutral-white'),
-  'text-field-background--hover': color('neutral-white'),
-  'text-field-background--focus': color('neutral-white'),
-  'text-field-background--disabled': color('neutral-light'),
-
-  'text-field-border-color': toCSSValue('color-border'),
-  'text-field-border-color--hover': toCSSValue('color-primary-60'),
-  'text-field-border-color--focus': toCSSValue('color-primary-60'),
-  'text-field-border-color--disabled': toCSSValue('color-border'),
-
-  // text-field dark
-  'text-field-dark-color': color('neutral-lighter'),
-
-  'text-field-dark-background': color('neutral-darker'),
-  'text-field-dark-border-color': color('neutral-lighter'),
-  'text-field-dark-border-color--hover': color('accent'),
-  'text-field-dark-border-color--focus': color('accent'),
-  'text-field-dark-border-color--disabled': color('neutral-lighter'),
-
-  'text-field-success-border-color': color('accent'),
-  'text-field-danger-border-color': toCSSValue('color-danger-60'),
-
-  'text-field-dark-box-shadow': 'none',
-
-  // textarea
-  'textarea-border-radius': border.radius('s'),
-  'textarea-color': color('neutral-darker'),
-  'textarea-font-size': font.size('4'),
-  'textarea-font-weight': font.weight('medium'),
-  'textarea-font-height': font.height('3'),
-  'textarea-min-height': rem('64px'),
-  'textarea-padding-x': spacing('s'),
-  'textarea-padding-y': spacing('s'),
-
-  'textarea-box-shadow': 'none',
-  'textarea-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'textarea-outline-offset': '2px',
-
-  'textarea-small-padding-x': spacing('s'),
-  'textarea-small-padding-y': spacing('xs'),
-  'textarea-small-font-size': font.size('5'),
-
-  'textarea-large-height': rem('45px'),
-  'textarea-large-padding-x': spacing('s'),
-  'textarea-large-padding-y': rem('12px'),
-  'textarea-large-font-size': font.size('4'),
-
-  'textarea-background': color('neutral-white'),
-  'textarea-background--hover': color('neutral-white'),
-  'textarea-background--focus': color('neutral-white'),
-  'textarea-background--disabled': color('neutral-light'),
-
-  'textarea-border-color': color('neutral-darker'),
-  'textarea-border-color--hover': toCSSValue('color-primary-60'),
-  'textarea-border-color--focus': toCSSValue('color-primary-60'),
-  'textarea-border-color--disabled': color('neutral-darker'),
-
-  // textarea dark
-  'textarea-dark-color': color('neutral-lighter'),
-
-  'textarea-dark-background': color('neutral-darker'),
-  'textarea-dark-border-color': color('neutral-lighter'),
-  'textarea-dark-border-color--hover': color('accent'),
-  'textarea-dark-border-color--focus': color('accent'),
-  'textarea-dark-border-color--disabled': color('neutral-lighter'),
-
-  'textarea-success-border-color': color('accent'),
-  'textarea-danger-border-color': color('danger'),
-
-  'textarea-dark-box-shadow': 'none',
-
-  // link
-  'link-font-size': font.size('3'),
-  'link-font-height': font.height('2'),
-  'link-color': toCSSValue('color-primary-60', 1),
-
-  'link-font-weight': font.weight('medium'),
-  'link-font-weight--hover': font.weight('bold'),
-
-  'link-box-shadow': 'none',
-  'link-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'link-outline-offset': '2px',
-
-  // breadcrumbs
-  'breadcrumbs-font-size': font.size('2'),
-  'breadcrumbs-font-height': font.height('2'),
-  'breadcrumbs-font-weight': font.weight('medium'),
-  'breadcrumbs-font-weight--active': font.weight('bold'),
-  'breadcrumbs-spacing-x': rem('36px'),
-
-  //banner
-  'banner-font-size': font.size('4'),
-  'banner-font-height': font.height('3'),
-  'banner-default-height': rem('40px'),
-  'banner-min-width': rem('320px'),
-  'banner-description-color': color('neutral-darker'),
-  'banner-title-font-weight': font.weight('bold'),
-  'banner-border-radius': border.radius('m'),
-  'banner-border-width': border.width('thin'),
-  'banner-close-button-color': color('neutral-darker'),
-  'banner-icon-width': rem('24px'),
-  'banner-icon-height': rem('24px'),
-  'banner-icon-margin-right': rem('10px'),
-  'banner-default-padding-x': spacing('m'),
-  'banner-default-padding-y': spacing('s'),
-  'banner-large-padding': spacing('m'),
-  'banner-default-icon-alignment': 'center',
-  'banner-large-icon-alignment': 'start',
-  'banner-default-close-top': spacing('s'),
-  'banner-default-close-right': spacing('s'),
-  'banner-large-close-top': rem('12px'),
-  'banner-large-close-right': rem('12px'),
-
-  //banner success
-  'banner-title-color-success': color('success-dark'),
-  'banner-border-color-success': color('success'),
-  'banner-background-success': color('success-light'),
-
-  //banner danger
-  'banner-title-color-danger': color('danger-dark'),
-  'banner-border-color-danger': color('danger'),
-  'banner-background-danger': color('danger-light'),
-
-  //banner warning
-  'banner-title-color-warning': color('warning-dark'),
-  'banner-border-color-warning': color('warning'),
-  'banner-background-warning': color('warning-light'),
-
-  //banner neutral
-  'banner-title-color-neutral': color('neutral-darker'),
-  'banner-border-color-neutral': color('neutral'),
-  'banner-background-neutral': color('neutral-light'),
-
-  //banner action
-  'banner-button-background-success': color('success-dark'),
-  'banner-button-background-neutral': color('neutral-dark'),
-  'banner-button-background-danger': color('danger-dark'),
-  'banner-button-background-warning': color('warning-dark'),
-  'banner-button-background-secondary': color('transparent'),
-  'banner-button-text-color': color('neutral-white'),
-  'banner-secondary-button-margin-left': spacing('s'),
-
-  // progressbar
-  'progressbar-height': rem('5px'),
-  'progressbar-background': color('transparent'),
-  'progressbar-line': color('darker'),
-  // neutral
-  'progressbar-neutral-fill': color('neutral-light'),
-  // success
-  'progressbar-success-fill': color('success-light'),
-  // danger
-  'progressbar-danger-fill': color('danger-light'),
-  // warning
-  'progressbar-warning-fill': color('warning-light'),
-
-  // toast
-  'toast-padding-x': spacing('m'),
-  'toast-padding-y': spacing('m'),
-  'toast-border-radius': border.radius('s'),
-  'toast-font-color': color('neutral-white'),
-  'toast-font-size': font.size('4'),
-  'toast-font-weight': font.weight('bold'),
-  'toast-font-height': font.height('3'),
-  'toast-close-x': spacing('xs'),
-  'toast-close-y': spacing('xs'),
-  'toast-shadow': shadow('modal'),
-  'toast-width': rem('320px'),
-  // neutral
-  'toast-neutral-background': color('neutral-dark'),
-  // success
-  'toast-success-background': color('success'),
-  // danger
-  'toast-danger-background': color('danger'),
-  // warning
-  'toast-warning-background': color('warning'),
-
-  // Label
-  'label-font-size': font.size('4'),
-  'label-font-weight': font.weight('medium'),
-  'label-font-height': font.height('3'),
-  'label-font-color': color('darker'),
-
-  // Label required
-  'label-required-color': color('danger'),
-
-  // Label tooltip
-  'label-tooltip-margin-left': spacing('xs'),
-
-  'label-tooltip-font-weight': font.weight('bold'),
-  'label-tooltip-font-size': font.size('5'),
-  'label-tooltip-font-color': color('neutral-white'),
-
-  'label-tooltip-background-color': color('neutral'),
-
-  // Label dark
-  'label-dark-font-color': color('neutral-white'),
-
-  // Label tooltip dark
-  'label-tooltip-dark-font-color': color('neutral-white'),
-
-  'label-tooltip-dark-background-color': color('neutral'),
-
-  // Switch
-  'switch-width': rem('52px'),
-  'switch-height': rem('22px'),
-  'switch-border-radius': rem('22px'),
-
-  'switch-box-shadow': 'none',
-  'switch-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'switch-outline-offset': '2px',
-
-  // Switch Large
-  'switch-large-width': rem('70px'),
-  'switch-large-height': rem('32px'),
-  'switch-large-border-radius': rem('32px'),
-
-  // Switch Icon
-  'switch-icon-height': rem('16px'),
-  'switch-icon-width': rem('16px'),
-  'switch-icon-color': color('neutral-white'),
-
-  // Switch Icon Large
-  'switch-large-icon-height': rem('20px'),
-  'switch-large-icon-width': rem('20px'),
-
-  // Switch Icon Active
-  'switch-icon-active-x': rem('8px'),
-  'switch-icon-active-y': rem('3px'),
-
-  // Switch Large Icon Active
-  'switch-large-icon-active-x': rem('8px'),
-  'switch-large-icon-active-y': rem('6px'),
-
-  // Switch Icon Inactive
-  'switch-icon-inactive-x': rem('28px'),
-  'switch-icon-inactive-y': rem('3px'),
-
-  // Switch Large Icon Inactive
-  'switch-large-icon-inactive-x': rem('42px'),
-  'switch-large-icon-inactive-y': rem('6px'),
-
-  // Switch Inactive
-  'switch-inactive-background-color': color('neutral'),
-  'switch-inactive-background-color--hover': toCSSValue('color-neutral-80', 0.4),
-
-  // Switch Active
-  'switch-active-background-color': toCSSValue('color-primary-60'),
-  'switch-active-background-color--hover': toCSSValue('color-primary-60', 0.6),
-
-  // Switch Slider
-  'switch-slider-x': rem('3px'),
-  'switch-slider-active-x': rem('33px'),
-  'switch-slider-y': rem('3px'),
-  'switch-slider-active-y': rem('3px'),
-  'switch-slider-size': rem('16px'),
-  'switch-slider-background-color': color('neutral-white'),
-  'switch-slider-border-radius': border.radius('circle'),
-
-  // Switch Slider Large
-  'switch-slider-large-x': rem('2px'),
-  'switch-slider-large-active-x': rem('40px'),
-  'switch-slider-large-y': rem('2px'),
-  'switch-slider-large-active-y': rem('2px'),
-  'switch-slider-large-size': rem('28px'),
-
-  // steps
-  'steps-step-padding-y': spacing('xl'),
-  'steps-step-padding-x': spacing('xl'),
-  'steps-color': color('neutral-darker'),
-  'steps-progress-padding-y': spacing('xl'),
-  'steps-progress-padding-x': spacing('xl'),
-  'steps-spacing-y': spacing('3xl'),
-  'steps-indicator-size': rem('24px'),
-  'steps-conector-height': '1px',
-  'steps-conector-height--complete': '3px',
-  'steps-conector-top': '12px', // Math.round((steps-indicator-size - steps-conector-height) / 2)
-  'steps-conector-top--complete': '11px', // Math.round((steps-indicator-size - steps-conector-height--complete) / 2)
-
-  'steps-progress-step-background-color': color('neutral'),
-  'steps-progress-step-background-color--complete': toCSSValue('color-primary-60'),
-
-  // card
-  'card-background': color('neutral-white'),
-  'card-border-color': color('neutral-light'),
-  'card-border-radius': border.radius('s'),
-  'card-color': color('neutral-darker'),
-  'card-flag-background-danger': color('danger'),
-  'card-flag-background-neutral': color('neutral-light'),
-  'card-flag-background-success': color('success'),
-  'card-flag-background-warning': color('warning'),
-  'card-flag-width': rem('4px'),
-  'card-font-height': font.height('3'),
-  'card-padding-x': spacing('m'),
-  'card-padding-y': spacing('m'),
-  'card-separator-background': color('neutral-lighter'),
-  'card-subtitle-font-size': font.size('4'),
-  'card-subtitle-font-weight': font.weight('medium'),
-  'card-title-font-height': font.height('2'),
-  'card-title-font-size': font.size('3'),
-  'card-title-font-weight': font.weight('bold'),
-
-  // popover
-  'popover-background': color('neutral-white'),
-  'popover-border-color': color('neutral-light'),
-  'popover-border-radius': border.radius('s'),
-  'popover-shadow': shadow('droplist'),
-
-  // Side Navigation
-  'side-navigation-collapsing-breakpoint': rem('1280px'),
-  'side-navigation-width': rem('200px'),
-  'side-navigation-width-large': rem('300px'),
-  'side-navigation-padding-bottom': spacing('l'),
-  'side-navigation-background-color': toCSSValue('color-background-inverted'),
-  'side-navigation-component-margin-top': spacing('l'),
-  'side-navigation-logo-padding-x': spacing('l'),
-  'side-navigation-separator-color': color('neutral-dark'),
-
-  'side-navigation-menu-title-font-weight': toCSSValue('font-weight-bold'),
-  'side-navigation-menu-title-font-size': toCSSValue('font-size-5'),
-  'side-navigation-menu-title-line-height': toCSSValue('line-height-5'),
-
-  'side-navigation-menu-link-color--hover': toCSSValue('color-brand'),
-
-  'side-navigation-menu-link-background-color--active': toCSSValue(
-    'color-background-secondary-inverted'
-  ),
-  'side-navigation-menu-link-box-shadow-color--active': toCSSValue('color-brand'),
-
-  'side-navigation-menu-item-color--focus': toCSSValue('color-brand'),
-
-  // Table
-  'table-row-default-color': color('neutral-white'),
-  'table-row-variant-color': toCSSValue('color-neutral-40', 0.2),
-  'table-row-selected-color': toCSSValue('color-primary-20'),
-
-  // Top Navigation
-  'top-navigation-height': rem('60px'),
-  'top-navigation-background-color': color('neutral-white'),
-  'top-navigation-border-color': color('neutral-lighter'),
-  'top-navigation-dropdown-separator-color': color('neutral-lighter'),
-  'top-navigation-dropdown-trigger-color': color('neutral'),
-  'top-navigation-dropdown-subitem-color': color('neutral-dark'),
-  'top-navigation-item-icon-color': color('neutral-dark'),
-  'top-navigation-item-color': color('neutral-darkest'),
-  'top-navigation-item-color--hover': toCSSValue('color-brand'),
-
-  // Select
-  'select-trigger-height': `calc(${height('default')} - 2px)`,
-  'select-trigger-border-color': toCSSValue('color-border'),
-  'select-selected-option-check-color': toCSSValue('color-primary-60'),
-  'select-selected-option-background-color': toCSSValue('color-primary-60', 0.2),
-
-  // Toggle & Toggle Group
-  'toggle-text-transform': 'initial',
-  'toggle-box-shadow': 'none',
-  'toggle-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'toggle-outline-offset': '2px',
-  'toggle-background-color': color('transparent'),
-  'toggle-background-color--hover': toCSSValue('color-background-tertiary'),
-  'toggle-background-color--focus': color('transparent'),
-  'toggle-background-color--active': color('transparent'),
-  'toggle-background-color--disabled': color('transparent'),
-  'toggle-checked-background-color': toCSSValue('color-primary-20'),
-  'toggle-checked-background-color--hover': toCSSValue('color-background-tertiary'),
-  'toggle-checked-background-color--focus': toCSSValue('color-primary-20'),
-  'toggle-checked-background-color--active': toCSSValue('color-background-tertiary'),
-  'toggle-checked-background-color--disabled': toCSSValue('color-primary-20'),
-  'toggle-color': toCSSValue('color-primary-100'),
-  'toggle-color--hover': toCSSValue('color-primary-100'),
-  'toggle-color--focus': toCSSValue('color-primary-100'),
-  'toggle-color--active': toCSSValue('color-primary-100'),
-  'toggle-color--disabled': toCSSValue('color-primary-100'),
-  'toggle-checked-color': toCSSValue('color-primary-100'),
-  'toggle-checked-color--hover': toCSSValue('color-primary-100'),
-  'toggle-checked-color--focus': toCSSValue('color-primary-100'),
-  'toggle-checked-color--active': toCSSValue('color-primary-100'),
-  'toggle-checked-color--disabled': toCSSValue('color-primary-100'),
-
-  'toggle-single-border-color': color('transparent'),
-  'toggle-single-border-color--hover': toCSSValue('color-background-tertiary'),
-  'toggle-single-border-color--focus': toCSSValue('color-background-tertiary'),
-  'toggle-single-border-color--active': toCSSValue('color-background-tertiary'),
-  'toggle-single-border-color--disabled': color('transparent'),
-  'toggle-single-checked-border-color': toCSSValue('color-primary-20'),
-  'toggle-single-checked-border-color--disabled': toCSSValue('color-primary-20'),
-  'toggle-single-font-size': toCSSValue('font-size-3'),
-  'toggle-single-small-font-size': toCSSValue('font-size-2'),
-  'toggle-single-height': '30px',
-  'toggle-single-small-height': '18px',
-
-  'toggle-multiple-border-color': color('transparent'),
-  'toggle-multiple-border-color--hover': toCSSValue('color-background-tertiary'),
-  'toggle-multiple-border-color--focus': toCSSValue('color-background-tertiary'),
-  'toggle-multiple-border-color--active': toCSSValue('color-background-tertiary'),
-  'toggle-multiple-border-color--disabled': color('transparent'),
-  'toggle-multiple-checked-border-color': toCSSValue('color-primary-20'),
-  'toggle-multiple-checked-border-color--disabled': toCSSValue('color-primary-20'),
-  'toggle-multiple-font-size': toCSSValue('font-size-3'),
-  'toggle-multiple-small-font-size': toCSSValue('font-size-2'),
-  'toggle-multiple-height': '30px',
-  'toggle-multiple-small-height': '18px',
-
-  'toggle-group-border-color--disabled': toCSSValue('color-primary-20'),
-
-  'toggle-group-multiple-border-width': '1px',
-  'toggle-group-multiple-border-style': 'solid',
-  'toggle-group-multiple-border-color': toCSSValue('color-border'),
-  'toggle-group-multiple-border-radius': toCSSValue('border-radius-s'),
-  'toggle-group-multiple-padding': toCSSValue('spacing-1'),
-
-  'toggle-group-single-border-width': '1px',
-  'toggle-group-single-border-style': 'solid',
-  'toggle-group-single-border-color': toCSSValue('color-border'),
-  'toggle-group-single-border-radius': toCSSValue('border-radius-s'),
-  'toggle-group-single-padding': toCSSValue('spacing-1'),
-
-  // dropdown
-  'dropdown-trigger-border-color': toCSSValue('color-border'),
-  'dropdown-trigger-dark-border-color': toCSSValue('color-border'),
-  'dropdown-trigger-outlined-border-color': color('transparent'),
-  'dropdown-trigger-expanded-color': toCSSValue('color-primary-60'),
-  'dropdown-trigger-height': `calc(${height('default')} - 2px)`,
-  'dropdown-trigger-small-height': `calc(${height('small')} - 2px)`,
-  'dropdown-trigger-large-height': `calc(${height('large')} - 2px)`,
-
-  'dropdown-trigger-box-shadow': 'none',
-  'dropdown-trigger-outline': `1px solid ${toCSSValue('color-primary-100')}`,
-  'dropdown-trigger-outline-offset': '2px',
-}
-
-export default mirandaCompatibility