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

package/dist/miranda-compatibility.theme-kYNEZ7mW.js

@@ -0,0 +1,2528 @@
+import { toCSSValue } from "@loadsmart/miranda-tokens";
+import { get } from "lodash-es";
+function generateColorGetter(colors) {
+  return function color2(name, opacity) {
+    const rawColor = get(colors, `color-${name}`);
+    if (opacity == null) {
+      return rawColor;
+    }
+    const opacityAsHex = (opacity * 255).toString(16);
+    return `${rawColor}${opacityAsHex}`;
+  };
+}
+function generateSpacingGetter(spacings) {
+  return function spacing2(name) {
+    return get(spacings, `space-${name}`);
+  };
+}
+function generateShadowGetter(shadows) {
+  return function shadow2(name) {
+    return get(shadows, `shadow-${name}`);
+  };
+}
+function generateFontGetters({
+  families,
+  sizes,
+  weights,
+  heights
+}) {
+  return {
+    family(name) {
+      return get(families, `font-family-${name}`);
+    },
+    size(name) {
+      return get(sizes, `font-size-${name}`);
+    },
+    weight(name) {
+      return get(weights, `font-weight-${name}`);
+    },
+    height(name) {
+      return get(heights, `font-height-${name}`);
+    }
+  };
+}
+function generateBorderGetters({
+  radiuses,
+  widths
+}) {
+  return {
+    radius(name) {
+      return get(radiuses, `border-radius-${name}`);
+    },
+    width(name) {
+      return get(widths, `border-width-${name}`);
+    }
+  };
+}
+function generateHeightGetter(heights) {
+  return function height2(name) {
+    return get(heights, `height-${name}`);
+  };
+}
+const BASE_PIXELS = 16;
+function rem(valueInPixels, base = BASE_PIXELS) {
+  return `${parseInt(String(valueInPixels), 10) / base}rem`;
+}
+const COLORS$2 = {
+  "color-primary": "#56748E",
+  "color-accent": "#0B6FB6",
+  "color-neutral-darkest": "#0A0A0B",
+  "color-neutral-darker": "#313336",
+  "color-neutral-dark": "#575C61",
+  "color-neutral": "#929AA1",
+  "color-neutral-light": "#CACCCF",
+  "color-neutral-lighter": "#E9EBEC",
+  "color-neutral-lightest": "#FCFCFC",
+  "color-neutral-white": "#FFFFFF",
+  "color-success-dark": "#267E4A",
+  "color-success": "#48C881",
+  "color-success-light": "#C0ECD3",
+  "color-transparent": "transparent",
+  "color-warning-dark": "#955800",
+  "color-warning": "#FFCE4F",
+  "color-warning-light": "#FFF5D6",
+  "color-danger-dark": "#8F002B",
+  "color-danger": "#E80045",
+  "color-danger-light": "#FFD6E2"
+};
+const OPACITIES$2 = {
+  "opacity-0": 0,
+  "opacity-20": 0.2,
+  "opacity-40": 0.4,
+  "opacity-60": 0.6,
+  "opacity-100": 1
+};
+const SPACINGS$2 = {
+  "space-none": 0,
+  "space-2xs": rem("2px"),
+  "space-xs": rem("4px"),
+  "space-s": rem("8px"),
+  "space-m": rem("16px"),
+  "space-l": rem("24px"),
+  "space-xl": rem("32px"),
+  "space-2xl": rem("40px"),
+  "space-3xl": rem("48px")
+};
+const FONT_FAMILIES$2 = {
+  "font-family-default": "Manrope, sans-serif",
+  "font-family-monospace": "Roboto Mono, monospace"
+};
+const FONT_SIZES$2 = {
+  "font-size-6": rem("10px"),
+  "font-size-5": rem("12px"),
+  "font-size-4": rem("14px"),
+  "font-size-3": rem("16px"),
+  "font-size-2": rem("20px"),
+  "font-size-1": rem("26px")
+};
+const FONT_WEIGHTS$2 = {
+  "font-weight-regular": 400,
+  "font-weight-medium": 500,
+  "font-weight-bold": 800
+};
+const FONT_HEIGHTS$2 = {
+  "font-height-1": "100%",
+  "font-height-2": "125%",
+  "font-height-3": "140%"
+};
+const SHADOWS$2 = {
+  "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 rgba(11, 111, 182, 1.0)",
+  "shadow-glow-warning": "0px 0px 4px 0px rgba(255, 206, 79, 1.0)"
+};
+const BORDER_RADIUSES$2 = {
+  "border-radius-none": 0,
+  "border-radius-s": rem("4px"),
+  "border-radius-m": rem("8px"),
+  "border-radius-l": rem("16px"),
+  "border-radius-circle": "50%"
+};
+const BORDER_WIDTHS$2 = {
+  "border-width-none": 0,
+  "border-width-thin": "1px",
+  "border-width-medium": "2px",
+  "border-width-bold": "4px"
+};
+const Z_INDEXES$2 = {
+  "z-index-none": 0,
+  "z-index-default": 1,
+  "z-index-droplist": 10,
+  "z-index-tooltip": 15,
+  "z-index-overlay": 20,
+  "z-index-modal": 30
+};
+const TEXT_ALIGNMENT$1 = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const HEIGHTS$2 = {
+  "height-small": rem("24px"),
+  "height-default": rem("36px"),
+  "height-large": rem("48px")
+};
+const color$2 = generateColorGetter(COLORS$2);
+const shadow$2 = generateShadowGetter(SHADOWS$2);
+const spacing$2 = generateSpacingGetter(SPACINGS$2);
+const font$2 = generateFontGetters({
+  families: FONT_FAMILIES$2,
+  heights: FONT_HEIGHTS$2,
+  sizes: FONT_SIZES$2,
+  weights: FONT_WEIGHTS$2
+});
+const border$2 = generateBorderGetters({
+  radiuses: BORDER_RADIUSES$2,
+  widths: BORDER_WIDTHS$2
+});
+const height$2 = generateHeightGetter(HEIGHTS$2);
+const alice = {
+  ...BORDER_RADIUSES$2,
+  ...BORDER_WIDTHS$2,
+  ...COLORS$2,
+  ...FONT_FAMILIES$2,
+  ...FONT_HEIGHTS$2,
+  ...FONT_SIZES$2,
+  ...FONT_WEIGHTS$2,
+  ...OPACITIES$2,
+  ...SHADOWS$2,
+  ...SPACINGS$2,
+  ...Z_INDEXES$2,
+  ...TEXT_ALIGNMENT$1,
+  ...HEIGHTS$2,
+  // button
+  "button-border-radius": border$2.radius("s"),
+  "button-border-width": border$2.width("thin"),
+  "button-font-weight": font$2.weight("bold"),
+  "button-font-height": font$2.height("1"),
+  "button-small-font-size": font$2.size("5"),
+  "button-small-height": height$2("small"),
+  "button-small-padding-x": spacing$2("s"),
+  "button-small-padding-y": rem("6px"),
+  "button-font-size": font$2.size("3"),
+  "button-height": height$2("default"),
+  "button-width": "auto",
+  "button-padding-y": rem("10px"),
+  "button-padding-x": spacing$2("m"),
+  "button-spacing-x": spacing$2("s"),
+  "button-large-font-size": font$2.size("3"),
+  "button-large-height": height$2("large"),
+  "button-large-padding-x": spacing$2("m"),
+  "button-large-padding-y": rem("14px"),
+  "button-outline-offset": "0",
+  // button primary
+  "button-primary-background": color$2("primary"),
+  "button-primary-background--hover": color$2("accent"),
+  "button-primary-background--focus": color$2("primary"),
+  "button-primary-background--active": color$2("accent", 0.6),
+  "button-primary-background--disabled": color$2("primary"),
+  "button-primary-border-color": color$2("primary"),
+  "button-primary-border-color--hover": color$2("accent"),
+  "button-primary-border-color--focus": color$2("accent"),
+  "button-primary-border-color--active": color$2("accent", 0.6),
+  "button-primary-border-color--disabled": color$2("primary"),
+  "button-primary-color": color$2("neutral-white"),
+  "button-primary-color--hover": color$2("neutral-white"),
+  "button-primary-color--focus": color$2("neutral-white"),
+  "button-primary-color--active": color$2("neutral-white"),
+  "button-primary-color--disabled": color$2("neutral-white"),
+  "button-primary-outline": "none",
+  "button-primary-box-shadow": shadow$2("glow-primary"),
+  // button secondary
+  "button-secondary-background": color$2("transparent"),
+  "button-secondary-background--hover": color$2("neutral", 0.2),
+  "button-secondary-background--focus": color$2("neutral", 0.2),
+  "button-secondary-background--active": color$2("transparent"),
+  "button-secondary-background--disabled": color$2("transparent"),
+  "button-secondary-border-color": color$2("primary"),
+  "button-secondary-border-color--hover": color$2("accent"),
+  "button-secondary-border-color--focus": color$2("accent"),
+  "button-secondary-border-color--active": color$2("accent", 0.6),
+  "button-secondary-border-color--disabled": color$2("primary"),
+  "button-secondary-color": color$2("primary"),
+  "button-secondary-color--hover": color$2("accent"),
+  "button-secondary-color--focus": color$2("primary"),
+  "button-secondary-color--active": color$2("accent", 0.6),
+  "button-secondary-color--disabled": color$2("primary"),
+  "button-secondary-outline": "none",
+  "button-secondary-box-shadow": shadow$2("glow-primary"),
+  // button secondary dark
+  "button-secondary-dark-background": color$2("transparent"),
+  "button-secondary-dark-background--hover": color$2("neutral", 0.2),
+  "button-secondary-dark-background--focus": color$2("transparent"),
+  "button-secondary-dark-background--active": color$2("neutral", 0.4),
+  "button-secondary-dark-background--disabled": color$2("transparent"),
+  "button-secondary-dark-border-color": color$2("neutral-light"),
+  "button-secondary-dark-border-color--hover": color$2("accent"),
+  "button-secondary-dark-border-color--focus": color$2("neutral-light"),
+  "button-secondary-dark-border-color--active": color$2("accent", 0.6),
+  "button-secondary-dark-border-color--disabled": color$2("neutral-light"),
+  "button-secondary-dark-color": color$2("neutral-light"),
+  "button-secondary-dark-color--hover": color$2("accent"),
+  "button-secondary-dark-color--focus": color$2("neutral-light"),
+  "button-secondary-dark-color--active": color$2("accent", 0.6),
+  "button-secondary-dark-color--disabled": color$2("neutral-light"),
+  // button tertiary
+  "button-tertiary-background": color$2("transparent"),
+  "button-tertiary-background--hover": color$2("neutral", 0.2),
+  "button-tertiary-background--focus": color$2("neutral", 0.2),
+  "button-tertiary-background--active": color$2("transparent"),
+  "button-tertiary-background--disabled": color$2("transparent"),
+  "button-tertiary-border-color": color$2("transparent"),
+  "button-tertiary-border-color--hover": color$2("transparent"),
+  "button-tertiary-border-color--focus": color$2("transparent"),
+  "button-tertiary-border-color--active": color$2("accent", 0.6),
+  "button-tertiary-border-color--disabled": color$2("transparent"),
+  "button-tertiary-color": color$2("neutral-darker"),
+  "button-tertiary-color--hover": color$2("accent"),
+  "button-tertiary-color--focus": color$2("primary"),
+  "button-tertiary-color--active": color$2("accent", 0.6),
+  "button-tertiary-color--disabled": color$2("neutral-darker"),
+  "button-tertiary-outline": "none",
+  "button-tertiary-box-shadow": "none",
+  // button warning
+  "button-warning-background": color$2("transparent"),
+  "button-warning-background--hover": color$2("warning", 0.2),
+  "button-warning-background--focus": color$2("transparent"),
+  "button-warning-background--active": color$2("transparent"),
+  "button-warning-background--disabled": color$2("transparent"),
+  "button-warning-border-color": color$2("warning-dark"),
+  "button-warning-border-color--hover": color$2("warning"),
+  "button-warning-border-color--focus": color$2("warning-dark"),
+  "button-warning-border-color--active": color$2("warning"),
+  "button-warning-border-color--disabled": color$2("warning-dark"),
+  "button-warning-color": color$2("warning-dark"),
+  "button-warning-color--hover": color$2("warning"),
+  "button-warning-color--focus": color$2("warning-dark"),
+  "button-warning-color--active": color$2("warning"),
+  "button-warning-color--disabled": color$2("warning-dark"),
+  "button-warning-outline": "none",
+  "button-warning-box-shadow": shadow$2("glow-warning"),
+  // button icon
+  "button-icon-border-radius": border$2.radius("circle"),
+  "button-icon-small-width": height$2("small"),
+  "button-icon-width": height$2("default"),
+  "button-icon-large-width": height$2("large"),
+  "button-icon-background": color$2("neutral-lighter"),
+  "button-icon-background--hover": color$2("neutral-lighter"),
+  "button-icon-background--focus": color$2("neutral-lighter"),
+  "button-icon-background--active": color$2("neutral-light"),
+  "button-icon-background--disabled": color$2("neutral-lighter"),
+  "button-icon-border-color": color$2("neutral-lighter"),
+  "button-icon-border-color--hover": color$2("neutral-lighter"),
+  "button-icon-border-color--focus": color$2("neutral-lighter"),
+  "button-icon-border-color--active": color$2("neutral-light"),
+  "button-icon-border-color--disabled": color$2("neutral-lighter"),
+  "button-icon-color": color$2("neutral-darkest"),
+  "button-icon-color--hover": color$2("accent"),
+  "button-icon-color--focus": color$2("neutral-darkest"),
+  "button-icon-color--active": color$2("neutral-darkest"),
+  "button-icon-color--disabled": color$2("neutral-darkest"),
+  "button-icon-box-shadow": shadow$2("glow-primary"),
+  "button-icon-outline": "none",
+  // tag
+  "tag-border-radius": rem("30px"),
+  "tag-border-width": border$2.width("thin"),
+  "tag-font-height": font$2.height("1"),
+  "tag-spacing": `0 ${spacing$2("s")}`,
+  "tag-removable-spacing": `0 ${spacing$2("xs")} 0 ${spacing$2("s")}`,
+  "tag-width": "auto",
+  "tag-box-shadow": shadow$2("glow-primary"),
+  "tag-outline-offset": "0",
+  "tag-remove-button-background": color$2("neutral-white"),
+  "tag-remove-button-border-radius": rem("24px"),
+  "tag-icon-spacing": spacing$2("xs"),
+  // tag small
+  "tag-small-font-size": font$2.size("6"),
+  "tag-small-font-weight": font$2.weight("bold"),
+  "tag-small-height": rem("16px"),
+  "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 ${spacing$2("s")}`,
+  "tag-small-removable-spacing": `0 ${spacing$2("s")}`,
+  // tag medium
+  "tag-font-size": font$2.size("5"),
+  "tag-font-weight": font$2.weight("bold"),
+  "tag-height": rem("24px"),
+  "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": font$2.size("4"),
+  "tag-large-font-weight": font$2.weight("bold"),
+  "tag-large-height": rem("32px"),
+  "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 ${spacing$2("s")}`,
+  // tag default
+  "tag-default-background": color$2("neutral-light"),
+  "tag-default-background--hover": color$2("accent", 0.4),
+  "tag-default-background--focus": color$2("neutral-dark", 0.2),
+  "tag-default-color": color$2("neutral-darkest"),
+  "tag-default-color--hover": color$2("neutral-darkest"),
+  "tag-default-color--focus": color$2("neutral-dark"),
+  "tag-default-border-color": "transparent",
+  "tag-default-border-color--hover": "transparent",
+  "tag-default-border-color--focus": "transparent",
+  "tag-default-outline": "none",
+  // tag outline
+  "tag-outlined-background": color$2("transparent"),
+  "tag-outlined-background--hover": color$2("accent", 0.4),
+  "tag-outlined-background--focus": color$2("neutral-white"),
+  "tag-outlined-color": color$2("neutral-darkest"),
+  "tag-outlined-color--hover": color$2("neutral-darkest"),
+  "tag-outlined-color--focus": color$2("neutral-darker"),
+  "tag-outlined-border-color": color$2("neutral-darkest"),
+  "tag-outlined-border-color--hover": color$2("neutral-darkest"),
+  "tag-outlined-border-color--focus": color$2("neutral-darker"),
+  "tag-outline-outline": "none",
+  // tag accent
+  "tag-accent-background": color$2("accent", 0.2),
+  "tag-accent-background--hover": color$2("accent", 0.4),
+  "tag-accent-background--focus": color$2("accent", 0.2),
+  "tag-accent-color": color$2("accent"),
+  "tag-accent-color--hover": color$2("accent"),
+  "tag-accent-color--focus": color$2("accent"),
+  "tag-accent-border-color": "transparent",
+  "tag-accent-border-color--hover": "transparent",
+  "tag-accent-border-color--focus": "transparent",
+  "tag-accent-outline": "none",
+  // tag success
+  "tag-success-background": color$2("success-light"),
+  "tag-success-background--hover": color$2("success-light"),
+  "tag-success-background--focus": color$2("success-light"),
+  "tag-success-color": color$2("success-dark"),
+  "tag-success-color--hover": color$2("success-dark"),
+  "tag-success-color--focus": color$2("success-dark"),
+  "tag-success-border-color": color$2("success-light"),
+  "tag-success-border-color--hover": color$2("success-light"),
+  "tag-success-border-color--focus": color$2("success-light"),
+  "tag-success-outline": "none",
+  // tag warning
+  "tag-warning-background": color$2("warning-light"),
+  "tag-warning-background--hover": color$2("warning-light"),
+  "tag-warning-background--focus": color$2("warning-light"),
+  "tag-warning-color": color$2("warning-dark"),
+  "tag-warning-color--hover": color$2("warning-dark"),
+  "tag-warning-color--focus": color$2("warning-dark"),
+  "tag-warning-border-color": color$2("warning-light"),
+  "tag-warning-border-color--hover": color$2("warning-light"),
+  "tag-warning-border-color--focus": color$2("warning-light"),
+  "tag-warning-outline": "none",
+  // tag danger
+  "tag-danger-background": color$2("danger-light"),
+  "tag-danger-background--hover": color$2("danger-light"),
+  "tag-danger-background--focus": color$2("danger-light"),
+  "tag-danger-color": color$2("danger-dark"),
+  "tag-danger-color--hover": color$2("danger-dark"),
+  "tag-danger-color--focus": color$2("danger-dark"),
+  "tag-danger-border-color": color$2("danger-light"),
+  "tag-danger-border-color--hover": color$2("danger-light"),
+  "tag-danger-border-color--focus": color$2("danger-light"),
+  "tag-danger-outline": "none",
+  // checkbox
+  "checkbox-color": color$2("neutral-darker"),
+  "checkbox-font-weight": font$2.weight("medium"),
+  "checkbox-font-size": font$2.size("4"),
+  "checkbox-selector-border-radius": border$2.radius("s"),
+  "checkbox-selector-size": rem("16px"),
+  "checkbox-selector-box-shadow": shadow$2("glow-primary"),
+  "checkbox-selector-outline": "none",
+  "checkbox-selector-outline-offset": "0",
+  "checkbox-small-font-size": font$2.size("5"),
+  "checkbox-selector-icon-color": color$2("neutral-white"),
+  "checkbox-selector-background": color$2("neutral-white"),
+  "checkbox-selector-background--hover": color$2("neutral-white"),
+  "checkbox-selector-background--focus": color$2("neutral-white"),
+  "checkbox-selector-background--disabled": color$2("neutral-light"),
+  "checkbox-selector-checked-background": color$2("primary"),
+  "checkbox-selector-checked-background--hover": color$2("accent"),
+  "checkbox-selector-checked-background--focus": color$2("primary"),
+  "checkbox-selector-checked-background--disabled": color$2("neutral-dark"),
+  "checkbox-selector-border-color": color$2("neutral-darker"),
+  "checkbox-selector-border-color--hover": color$2("accent"),
+  "checkbox-selector-border-color--focus": color$2("accent"),
+  "checkbox-selector-border-color--disabled": color$2("neutral-darker"),
+  "checkbox-selector-checked-border-color": color$2("primary"),
+  "checkbox-selector-checked-border-color--hover": color$2("accent"),
+  "checkbox-selector-checked-border-color--focus": color$2("accent"),
+  "checkbox-selector-checked-border-color--disabled": color$2("neutral-darkest"),
+  // checkbox dark
+  "checkbox-dark-color": color$2("neutral-lighter"),
+  "checkbox-dark-selector-background": color$2("neutral-darker"),
+  "checkbox-dark-selector-background--hover": color$2("neutral-darker"),
+  "checkbox-dark-selector-background--focus": color$2("neutral-darker"),
+  "checkbox-dark-selector-background--disabled": color$2("neutral-neutral"),
+  "checkbox-dark-selector-border-color": color$2("neutral-lighter"),
+  "checkbox-dark-selector-border-color--hover": color$2("accent"),
+  "checkbox-dark-selector-border-color--focus": color$2("accent"),
+  "checkbox-dark-selector-border-color--disabled": color$2("neutral-lighter"),
+  // radio
+  "radio-color": color$2("accent"),
+  "radio-font-weight": font$2.weight("medium"),
+  "radio-font-size": font$2.size("4"),
+  "radio-selector-border-radius": border$2.radius("circle"),
+  "radio-selector-size": rem("24px"),
+  "radio-selector-box-shadow": shadow$2("glow-primary"),
+  "radio-small-font-size": font$2.size("5"),
+  "radio-small-selector-size": rem("16px"),
+  "radio-selector-background": color$2("neutral-white"),
+  "radio-selector-background--hover": color$2("neutral-white"),
+  "radio-selector-background--focus": color$2("neutral-white"),
+  "radio-selector-background--disabled": color$2("neutral-light"),
+  "radio-selector-border-color": color$2("neutral-darker"),
+  "radio-selector-border-color--hover": color$2("accent"),
+  "radio-selector-border-color--focus": color$2("accent"),
+  "radio-selector-border-color--disabled": color$2("neutral-darker"),
+  "radio-selector-border-color--checked": color$2("accent"),
+  // radio dark
+  "radio-dark-color": color$2("neutral-lighter"),
+  "radio-dark-selector-background": color$2("neutral-darker"),
+  "radio-dark-selector-background--hover": color$2("neutral-darker"),
+  "radio-dark-selector-background--focus": color$2("neutral-darker"),
+  "radio-dark-selector-background--disabled": color$2("neutral-neutral"),
+  "radio-dark-selector-border-color": color$2("neutral-lighter"),
+  "radio-dark-selector-border-color--hover": color$2("accent"),
+  "radio-dark-selector-border-color--focus": color$2("accent"),
+  "radio-dark-selector-border-color--disabled": color$2("neutral-lighter"),
+  // tooltip
+  "tooltip-arrow-height": rem("12px"),
+  "tooltip-arrow-width": rem("20px"),
+  "tooltip-background": color$2("neutral-darker"),
+  "tooltip-border-radius": rem("8px"),
+  "tooltip-color": color$2("neutral-white"),
+  "tooltip-dark-outline": color$2("neutral", 0.4),
+  "tooltip-font-size": font$2.size("4"),
+  "tooltip-font-height": font$2.height("3"),
+  "tooltip-max-width": rem("240px"),
+  "tooltip-min-width": rem("80px"),
+  "tooltip-outline": color$2("neutral-darkest"),
+  "tooltip-padding-x": spacing$2("m"),
+  "tooltip-padding-y": spacing$2("s"),
+  "tooltip-margin": spacing$2("s"),
+  "tooltip-shadow": shadow$2("droplist"),
+  // modal
+  "modal-small-max-width": rem("344px"),
+  "modal-max-width": rem("484px"),
+  "modal-large-max-width": rem("688px"),
+  "modal-overlay-background": color$2("neutral-darkest", 0.4),
+  // dialog
+  "dialog-header-color": color$2("neutral-darkest"),
+  "dialog-header-border-color": color$2("neutral-light"),
+  "dialog-body-font-color": color$2("color-neutral-darker"),
+  // text-field
+  "text-field-border-radius": border$2.radius("s"),
+  "text-field-color": color$2("neutral-darker"),
+  "text-field-font-size": font$2.size("4"),
+  "text-field-font-weight": font$2.weight("medium"),
+  "text-field-font-height": font$2.height("3"),
+  "text-field-height": height$2("default"),
+  "text-field-padding-x": spacing$2("s"),
+  "text-field-padding-y": spacing$2("s"),
+  "text-field-box-shadow": shadow$2("glow-primary"),
+  "text-field-outline": "none",
+  "text-field-outline-offset": "0",
+  "text-field-small-height": height$2("small"),
+  "text-field-small-padding-x": spacing$2("s"),
+  "text-field-small-padding-y": spacing$2("xs"),
+  "text-field-small-font-size": font$2.size("5"),
+  "text-field-large-height": height$2("large"),
+  "text-field-large-padding-x": spacing$2("s"),
+  "text-field-large-padding-y": rem("12px"),
+  "text-field-large-font-size": font$2.size("4"),
+  "text-field-background": color$2("neutral-white"),
+  "text-field-background--hover": color$2("neutral-white"),
+  "text-field-background--focus": color$2("neutral-white"),
+  "text-field-background--disabled": color$2("neutral-light"),
+  "text-field-border-color": color$2("neutral-darker"),
+  "text-field-border-color--hover": color$2("accent"),
+  "text-field-border-color--focus": color$2("accent"),
+  "text-field-border-color--disabled": color$2("neutral-darker"),
+  // text-field dark
+  "text-field-dark-color": color$2("neutral-lighter"),
+  "text-field-dark-background": color$2("neutral-darker"),
+  "text-field-dark-border-color": color$2("neutral-lighter"),
+  "text-field-dark-border-color--hover": color$2("accent"),
+  "text-field-dark-border-color--focus": color$2("accent"),
+  "text-field-dark-border-color--disabled": color$2("neutral-lighter"),
+  "text-field-success-border-color": color$2("accent"),
+  "text-field-danger-border-color": color$2("danger"),
+  "text-field-dark-box-shadow": color$2("neutral", 0.4),
+  // textarea
+  "textarea-border-radius": border$2.radius("s"),
+  "textarea-color": color$2("neutral-darker"),
+  "textarea-font-size": font$2.size("4"),
+  "textarea-font-weight": font$2.weight("medium"),
+  "textarea-font-height": font$2.height("3"),
+  "textarea-min-height": rem("64px"),
+  "textarea-padding-x": spacing$2("s"),
+  "textarea-padding-y": spacing$2("s"),
+  "textarea-box-shadow": shadow$2("glow-primary"),
+  "textarea-outline": "none",
+  "textarea-outline-offset": "0",
+  "textarea-small-padding-x": spacing$2("s"),
+  "textarea-small-padding-y": spacing$2("xs"),
+  "textarea-small-font-size": font$2.size("5"),
+  "textarea-large-height": rem("45px"),
+  "textarea-large-padding-x": spacing$2("s"),
+  "textarea-large-padding-y": rem("12px"),
+  "textarea-large-font-size": font$2.size("4"),
+  "textarea-background": color$2("neutral-white"),
+  "textarea-background--hover": color$2("neutral-white"),
+  "textarea-background--focus": color$2("neutral-white"),
+  "textarea-background--disabled": color$2("neutral-light"),
+  "textarea-border-color": color$2("neutral-darker"),
+  "textarea-border-color--hover": color$2("accent"),
+  "textarea-border-color--focus": color$2("accent"),
+  "textarea-border-color--disabled": color$2("neutral-darker"),
+  // textarea dark
+  "textarea-dark-color": color$2("neutral-lighter"),
+  "textarea-dark-background": color$2("neutral-darker"),
+  "textarea-dark-border-color": color$2("neutral-lighter"),
+  "textarea-dark-border-color--hover": color$2("accent"),
+  "textarea-dark-border-color--focus": color$2("accent"),
+  "textarea-dark-border-color--disabled": color$2("neutral-lighter"),
+  "textarea-success-border-color": color$2("accent"),
+  "textarea-danger-border-color": color$2("danger"),
+  "textarea-dark-box-shadow": color$2("neutral", 0.4),
+  // link
+  "link-font-size": font$2.size("3"),
+  "link-font-height": font$2.height("2"),
+  "link-color": color$2("accent"),
+  "link-font-weight": font$2.weight("medium"),
+  "link-font-weight--hover": font$2.weight("bold"),
+  "link-box-shadow": shadow$2("glow-primary"),
+  "link-outline": "none",
+  "link-outline-offset": "0",
+  // breadcrumbs
+  "breadcrumbs-font-size": font$2.size("2"),
+  "breadcrumbs-font-height": font$2.height("2"),
+  "breadcrumbs-font-weight": font$2.weight("medium"),
+  "breadcrumbs-font-weight--active": font$2.weight("bold"),
+  "breadcrumbs-spacing-x": rem("36px"),
+  //banner
+  "banner-font-size": font$2.size("4"),
+  "banner-font-height": font$2.height("3"),
+  "banner-default-height": rem("40px"),
+  "banner-min-width": rem("320px"),
+  "banner-description-color": color$2("neutral-darker"),
+  "banner-title-font-weight": font$2.weight("bold"),
+  "banner-border-radius": border$2.radius("m"),
+  "banner-border-width": border$2.width("thin"),
+  "banner-close-button-color": color$2("neutral-darker"),
+  "banner-icon-width": rem("24px"),
+  "banner-icon-height": rem("24px"),
+  "banner-icon-margin-right": rem("10px"),
+  "banner-default-padding-x": spacing$2("m"),
+  "banner-default-padding-y": spacing$2("s"),
+  "banner-large-padding": spacing$2("m"),
+  "banner-default-icon-alignment": "center",
+  "banner-large-icon-alignment": "start",
+  "banner-default-close-top": spacing$2("s"),
+  "banner-default-close-right": spacing$2("s"),
+  "banner-large-close-top": rem("12px"),
+  "banner-large-close-right": rem("12px"),
+  //banner success
+  "banner-title-color-success": color$2("success-dark"),
+  "banner-border-color-success": color$2("success"),
+  "banner-background-success": color$2("success-light"),
+  //banner danger
+  "banner-title-color-danger": color$2("danger-dark"),
+  "banner-border-color-danger": color$2("danger"),
+  "banner-background-danger": color$2("danger-light"),
+  //banner warning
+  "banner-title-color-warning": color$2("warning-dark"),
+  "banner-border-color-warning": color$2("warning"),
+  "banner-background-warning": color$2("warning-light"),
+  //banner neutral
+  "banner-title-color-neutral": color$2("neutral-darker"),
+  "banner-border-color-neutral": color$2("neutral"),
+  "banner-background-neutral": color$2("neutral-light"),
+  //banner action
+  "banner-button-background-success": color$2("success-dark"),
+  "banner-button-background-neutral": color$2("neutral-dark"),
+  "banner-button-background-danger": color$2("danger-dark"),
+  "banner-button-background-warning": color$2("warning-dark"),
+  "banner-button-background-secondary": color$2("transparent"),
+  "banner-button-text-color": color$2("neutral-white"),
+  "banner-secondary-button-margin-left": spacing$2("s"),
+  // progressbar
+  "progressbar-height": rem("5px"),
+  "progressbar-background": color$2("transparent"),
+  "progressbar-line": color$2("darker"),
+  // neutral
+  "progressbar-neutral-fill": color$2("neutral-light"),
+  // success
+  "progressbar-success-fill": color$2("success-light"),
+  // danger
+  "progressbar-danger-fill": color$2("danger-light"),
+  // warning
+  "progressbar-warning-fill": color$2("warning-light"),
+  // toast
+  "toast-padding-x": spacing$2("m"),
+  "toast-padding-y": spacing$2("m"),
+  "toast-border-radius": border$2.radius("s"),
+  "toast-font-color": color$2("neutral-white"),
+  "toast-font-size": font$2.size("4"),
+  "toast-font-weight": font$2.weight("bold"),
+  "toast-font-height": font$2.height("3"),
+  "toast-close-x": spacing$2("xs"),
+  "toast-close-y": spacing$2("xs"),
+  "toast-shadow": shadow$2("modal"),
+  "toast-width": rem("320px"),
+  // neutral
+  "toast-neutral-background": color$2("neutral-dark"),
+  // success
+  "toast-success-background": color$2("success"),
+  // danger
+  "toast-danger-background": color$2("danger"),
+  // warning
+  "toast-warning-background": color$2("warning"),
+  // Label
+  "label-font-size": font$2.size("4"),
+  "label-font-weight": font$2.weight("medium"),
+  "label-font-height": font$2.height("3"),
+  "label-font-color": color$2("darker"),
+  // Label required
+  "label-required-color": color$2("danger"),
+  // Label tooltip
+  "label-tooltip-margin-left": spacing$2("xs"),
+  "label-tooltip-font-weight": font$2.weight("bold"),
+  "label-tooltip-font-size": font$2.size("5"),
+  "label-tooltip-font-color": color$2("darker"),
+  "label-tooltip-background-color": color$2("neutral"),
+  // Label dark
+  "label-dark-font-color": color$2("neutral-white"),
+  // Label tooltip dark
+  "label-tooltip-dark-font-color": color$2("neutral-white"),
+  "label-tooltip-dark-background-color": color$2("neutral"),
+  // Switch
+  "switch-width": rem("52px"),
+  "switch-height": rem("22px"),
+  "switch-border-radius": rem("22px"),
+  "switch-box-shadow": shadow$2("glow-primary"),
+  "switch-outline": "none",
+  "switch-outline-offset": "0",
+  // 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$2("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$2("neutral"),
+  "switch-inactive-background-color--hover": color$2("neutral-dark", 0.4),
+  // Switch Active
+  "switch-active-background-color": color$2("accent"),
+  "switch-active-background-color--hover": color$2("accent", 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$2("neutral-white"),
+  "switch-slider-border-radius": border$2.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$2("xl"),
+  "steps-step-padding-x": spacing$2("xl"),
+  "steps-color": color$2("neutral-darker"),
+  "steps-progress-padding-y": spacing$2("xl"),
+  "steps-progress-padding-x": spacing$2("xl"),
+  "steps-spacing-y": spacing$2("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$2("neutral"),
+  "steps-progress-step-background-color--complete": color$2("accent"),
+  // card
+  "card-background": color$2("neutral-white"),
+  "card-border-color": color$2("neutral-light"),
+  "card-border-radius": border$2.radius("s"),
+  "card-color": color$2("neutral-darker"),
+  "card-flag-background-danger": color$2("danger"),
+  "card-flag-background-neutral": color$2("neutral-light"),
+  "card-flag-background-success": color$2("success"),
+  "card-flag-background-warning": color$2("warning"),
+  "card-flag-width": rem("4px"),
+  "card-font-height": font$2.height("3"),
+  "card-padding-x": spacing$2("m"),
+  "card-padding-y": spacing$2("m"),
+  "card-separator-background": color$2("neutral-lighter"),
+  "card-subtitle-font-size": font$2.size("4"),
+  "card-subtitle-font-weight": font$2.weight("medium"),
+  "card-title-font-height": font$2.height("2"),
+  "card-title-font-size": font$2.size("3"),
+  "card-title-font-weight": font$2.weight("bold"),
+  // dropdown
+  "dropdown-background": color$2("neutral-white"),
+  "dropdown-border-color": color$2("neutral-light"),
+  "dropdown-border-radius": border$2.radius("s"),
+  "dropdown-shadow": shadow$2("droplist"),
+  // popover
+  "popover-background": color$2("neutral-white"),
+  "popover-border-color": color$2("neutral-light"),
+  "popover-border-radius": border$2.radius("s"),
+  "popover-shadow": shadow$2("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$2("l"),
+  "side-navigation-background-color": color$2("neutral-darker"),
+  "side-navigation-component-margin-top": spacing$2("l"),
+  "side-navigation-logo-padding-x": spacing$2("l"),
+  "side-navigation-separator-color": color$2("neutral-dark"),
+  "side-navigation-menu-title-font-weight": font$2.weight("bold"),
+  "side-navigation-menu-title-font-size": font$2.size("5"),
+  "side-navigation-menu-title-line-height": font$2.height("3"),
+  "side-navigation-menu-link-color--hover": color$2("primary"),
+  "side-navigation-menu-link-background-color--active": color$2("neutral-darkest", 0.2),
+  "side-navigation-menu-link-box-shadow-color--active": color$2("primary"),
+  "side-navigation-menu-item-color--focus": color$2("primary"),
+  // Table
+  "table-row-default-color": color$2("neutral-white"),
+  "table-row-variant-color": color$2("neutral-light", 0.2),
+  "table-row-selected-color": color$2("accent", 0.2),
+  // Top Navigation
+  "top-navigation-height": rem("60px"),
+  "top-navigation-background-color": color$2("neutral-white"),
+  "top-navigation-border-color": color$2("neutral-lighter"),
+  "top-navigation-dropdown-separator-color": color$2("neutral-lighter"),
+  "top-navigation-dropdown-trigger-color": color$2("neutral"),
+  "top-navigation-dropdown-subitem-color": color$2("neutral-dark"),
+  "top-navigation-item-icon-color": color$2("neutral-dark"),
+  "top-navigation-item-color": color$2("neutral-darkest"),
+  "top-navigation-item-color--hover": color$2("primary"),
+  // Select
+  "select-trigger-height": "100%",
+  "select-trigger-border-color": color$2("neutral-lighter"),
+  "select-selected-option-check-color": color$2("accent"),
+  "select-selected-option-background-color": color$2("accent", 0.2),
+  // Toggle & Toggle Group
+  "toggle-text-transform": "uppercase",
+  "toggle-box-shadow": shadow$2("glow-primary"),
+  "toggle-outline": "none",
+  "toggle-outline-offset": "0",
+  "toggle-background-color": color$2("transparent"),
+  "toggle-background-color--hover": color$2("transparent"),
+  "toggle-background-color--focus": color$2("transparent"),
+  "toggle-background-color--active": color$2("transparent"),
+  "toggle-background-color--disabled": color$2("transparent"),
+  "toggle-checked-background-color": color$2("neutral-darkest"),
+  "toggle-checked-background-color--hover": color$2("neutral-dark"),
+  "toggle-checked-background-color--focus": color$2("neutral-darker"),
+  "toggle-checked-background-color--active": color$2("neutral"),
+  "toggle-checked-background-color--disabled": color$2("neutral-darkest"),
+  "toggle-color": color$2("neutral-darker"),
+  "toggle-color--hover": color$2("neutral-dark"),
+  "toggle-color--focus": color$2("neutral-darker"),
+  "toggle-color--active": color$2("neutral"),
+  "toggle-color--disabled": color$2("neutral-darker"),
+  "toggle-checked-color": color$2("neutral-white"),
+  "toggle-checked-color--hover": color$2("neutral-white"),
+  "toggle-checked-color--focus": color$2("neutral-white"),
+  "toggle-checked-color--active": color$2("neutral-white"),
+  "toggle-checked-color--disabled": color$2("neutral-lightest"),
+  "toggle-single-border-color": color$2("transparent"),
+  "toggle-single-border-color--hover": color$2("transparent"),
+  "toggle-single-border-color--focus": color$2("neutral-darker"),
+  "toggle-single-border-color--active": color$2("neutral"),
+  "toggle-single-border-color--disabled": color$2("transparent"),
+  "toggle-single-checked-border-color": color$2("neutral-darkest"),
+  "toggle-single-checked-border-color--disabled": color$2("neutral-darkest"),
+  "toggle-single-font-size": font$2.size("4"),
+  "toggle-single-small-font-size": "10px",
+  "toggle-single-height": "28px",
+  "toggle-single-small-height": "16px",
+  "toggle-multiple-border-color": color$2("neutral-darkest"),
+  "toggle-multiple-border-color--hover": color$2("neutral-dark"),
+  "toggle-multiple-border-color--focus": color$2("neutral-darker"),
+  "toggle-multiple-border-color--active": color$2("neutral"),
+  "toggle-multiple-border-color--disabled": color$2("neutral-darkest"),
+  "toggle-multiple-checked-border-color": color$2("neutral-darkest"),
+  "toggle-multiple-checked-border-color--disabled": color$2("neutral-darkest"),
+  "toggle-multiple-font-size": font$2.size("4"),
+  "toggle-multiple-small-font-size": font$2.size("5"),
+  "toggle-multiple-height": "36px",
+  "toggle-multiple-small-height": "24px",
+  "toggle-group-border-color--disabled": color$2("neutral-darkest", 0.4),
+  "toggle-group-multiple-border-width": "initial",
+  "toggle-group-multiple-border-style": "none",
+  "toggle-group-multiple-border-color": "initial",
+  "toggle-group-multiple-border-radius": "initial",
+  "toggle-group-multiple-padding": 0,
+  "toggle-group-single-border-width": "1px",
+  "toggle-group-single-border-style": "solid",
+  "toggle-group-single-border-color": color$2("neutral-darker"),
+  "toggle-group-single-border-radius": border$2.radius("s"),
+  "toggle-group-single-padding": "3px",
+  // dropdown
+  "dropdown-trigger-border-color": color$2("primary"),
+  "dropdown-trigger-dark-border-color": color$2("neutral-light"),
+  "dropdown-trigger-outlined-border-color": color$2("transparent"),
+  "dropdown-trigger-expanded-color": color$2("accent"),
+  "dropdown-trigger-height": height$2("default"),
+  "dropdown-trigger-small-height": height$2("small"),
+  "dropdown-trigger-large-height": height$2("large"),
+  "dropdown-trigger-box-shadow": shadow$2("glow-primary"),
+  "dropdown-trigger-outline": "none",
+  "dropdown-trigger-outline-offset": "0"
+};
+const COLORS$1 = {
+  "color-primary": "#33CC60",
+  "color-accent": "#0CA933",
+  "color-neutral-darkest": "#0A0A0B",
+  "color-neutral-darker": "#313336",
+  "color-neutral-dark": "#575C61",
+  "color-neutral": "#929AA1",
+  "color-neutral-light": "#CACCCF",
+  "color-neutral-lighter": "#E9EBEC",
+  "color-neutral-lightest": "#FCFCFC",
+  "color-neutral-white": "#FFFFFF",
+  "color-success-dark": "#2A5C85",
+  "color-success": "#55B0FB",
+  "color-success-light": "#C0E1F5",
+  "color-transparent": "transparent",
+  "color-warning-dark": "#955800",
+  "color-warning": "#FFCE4F",
+  "color-warning-light": "#FFF5D6",
+  "color-danger-dark": "#8F002B",
+  "color-danger": "#E80045",
+  "color-danger-light": "#FFD6E2"
+};
+const OPACITIES$1 = {
+  "opacity-0": 0,
+  "opacity-20": 0.2,
+  "opacity-40": 0.4,
+  "opacity-60": 0.6,
+  "opacity-100": 1
+};
+const SPACINGS$1 = {
+  "space-none": 0,
+  "space-2xs": rem("2px"),
+  "space-xs": rem("4px"),
+  "space-s": rem("8px"),
+  "space-m": rem("16px"),
+  "space-l": rem("24px"),
+  "space-xl": rem("32px"),
+  "space-2xl": rem("40px"),
+  "space-3xl": rem("48px")
+};
+const FONT_FAMILIES$1 = {
+  "font-family-default": "'Sharp Sans', Manrope, sans-serif",
+  "font-family-monospace": "Roboto Mono, monospace"
+};
+const FONT_SIZES$1 = {
+  "font-size-6": rem("10px"),
+  "font-size-5": rem("12px"),
+  "font-size-4": rem("14px"),
+  "font-size-3": rem("16px"),
+  "font-size-2": rem("20px"),
+  "font-size-1": rem("26px")
+};
+const FONT_WEIGHTS$1 = {
+  "font-weight-regular": 400,
+  "font-weight-medium": 500,
+  "font-weight-bold": 700
+};
+const FONT_HEIGHTS$1 = {
+  "font-height-1": "100%",
+  "font-height-2": "125%",
+  "font-height-3": "140%"
+};
+const SHADOWS$1 = {
+  "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 rgba(51, 204, 96, 1)",
+  "shadow-glow-warning": "0px 0px 4px 0px rgba(255, 206, 79, 1.0)"
+};
+const BORDER_RADIUSES$1 = {
+  "border-radius-none": 0,
+  "border-radius-s": rem("4px"),
+  "border-radius-m": rem("8px"),
+  "border-radius-l": rem("16px"),
+  "border-radius-circle": "50%"
+};
+const BORDER_WIDTHS$1 = {
+  "border-width-none": 0,
+  "border-width-thin": "1px",
+  "border-width-medium": "2px",
+  "border-width-bold": "4px"
+};
+const Z_INDEXES$1 = {
+  "z-index-none": 0,
+  "z-index-default": 1,
+  "z-index-droplist": 10,
+  "z-index-tooltip": 15,
+  "z-index-overlay": 20,
+  "z-index-modal": 30
+};
+const TEXT_ALIGNMENT = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+const HEIGHTS$1 = {
+  "height-small": rem("24px"),
+  "height-default": rem("36px"),
+  "height-large": rem("48px")
+};
+const color$1 = generateColorGetter(COLORS$1);
+const shadow$1 = generateShadowGetter(SHADOWS$1);
+const spacing$1 = generateSpacingGetter(SPACINGS$1);
+const font$1 = generateFontGetters({
+  families: FONT_FAMILIES$1,
+  heights: FONT_HEIGHTS$1,
+  sizes: FONT_SIZES$1,
+  weights: FONT_WEIGHTS$1
+});
+const border$1 = generateBorderGetters({
+  radiuses: BORDER_RADIUSES$1,
+  widths: BORDER_WIDTHS$1
+});
+const height$1 = generateHeightGetter(HEIGHTS$1);
+const loadsmart = {
+  ...BORDER_RADIUSES$1,
+  ...BORDER_WIDTHS$1,
+  ...COLORS$1,
+  ...FONT_FAMILIES$1,
+  ...FONT_SIZES$1,
+  ...FONT_WEIGHTS$1,
+  ...FONT_HEIGHTS$1,
+  ...OPACITIES$1,
+  ...SHADOWS$1,
+  ...SPACINGS$1,
+  ...Z_INDEXES$1,
+  ...TEXT_ALIGNMENT,
+  ...HEIGHTS$1,
+  // button
+  "button-border-radius": border$1.radius("s"),
+  "button-border-width": border$1.width("thin"),
+  "button-font-weight": font$1.weight("bold"),
+  "button-font-height": font$1.height("1"),
+  "button-small-font-size": font$1.size("5"),
+  "button-small-height": height$1("small"),
+  "button-small-padding-x": spacing$1("s"),
+  "button-small-padding-y": rem("6px"),
+  "button-font-size": font$1.size("3"),
+  "button-height": height$1("default"),
+  "button-width": "auto",
+  "button-padding-y": rem("10px"),
+  "button-padding-x": spacing$1("m"),
+  "button-spacing-x": spacing$1("s"),
+  "button-large-font-size": font$1.size("3"),
+  "button-large-height": height$1("large"),
+  "button-large-padding-x": spacing$1("m"),
+  "button-large-padding-y": rem("14px"),
+  "button-outline-offset": "0",
+  // button primary
+  "button-primary-background": color$1("primary"),
+  "button-primary-background--hover": color$1("accent"),
+  "button-primary-background--focus": color$1("primary"),
+  "button-primary-background--active": color$1("accent"),
+  "button-primary-background--disabled": color$1("primary"),
+  "button-primary-border-color": color$1("primary"),
+  "button-primary-border-color--hover": color$1("accent"),
+  "button-primary-border-color--focus": color$1("accent"),
+  "button-primary-border-color--active": color$1("accent"),
+  "button-primary-border-color--disabled": color$1("primary"),
+  "button-primary-color": color$1("neutral-white"),
+  "button-primary-color--hover": color$1("neutral-white"),
+  "button-primary-color--focus": color$1("neutral-white"),
+  "button-primary-color--active": color$1("neutral-white"),
+  "button-primary-color--disabled": color$1("neutral-white"),
+  "button-primary-outline": "none",
+  "button-primary-box-shadow": shadow$1("glow-primary"),
+  // button secondary
+  "button-secondary-background": color$1("transparent"),
+  "button-secondary-background--hover": color$1("neutral", 0.2),
+  "button-secondary-background--focus": color$1("transparent"),
+  "button-secondary-background--active": color$1("transparent"),
+  "button-secondary-background--disabled": color$1("transparent"),
+  "button-secondary-border-color": color$1("neutral-darker"),
+  "button-secondary-border-color--hover": color$1("accent"),
+  "button-secondary-border-color--focus": color$1("accent"),
+  "button-secondary-border-color--active": color$1("accent", 0.6),
+  "button-secondary-border-color--disabled": color$1("neutral-darker"),
+  "button-secondary-color": color$1("neutral-darker"),
+  "button-secondary-color--hover": color$1("accent"),
+  "button-secondary-color--focus": color$1("primary"),
+  "button-secondary-color--active": color$1("accent", 0.6),
+  "button-secondary-color--disabled": color$1("neutral-darker"),
+  "button-secondary-outline": "none",
+  "button-secondary-box-shadow": shadow$1("glow-primary"),
+  // button secondary dark
+  "button-secondary-dark-background": color$1("transparent"),
+  "button-secondary-dark-background--hover": color$1("neutral", 0.2),
+  "button-secondary-dark-background--focus": color$1("transparent"),
+  "button-secondary-dark-background--active": color$1("neutral", 0.4),
+  "button-secondary-dark-background--disabled": color$1("transparent"),
+  "button-secondary-dark-border-color": color$1("neutral-light"),
+  "button-secondary-dark-border-color--hover": color$1("accent"),
+  "button-secondary-dark-border-color--focus": color$1("neutral-light"),
+  "button-secondary-dark-border-color--active": color$1("accent", 0.6),
+  "button-secondary-dark-border-color--disabled": color$1("neutral-light"),
+  "button-secondary-dark-color": color$1("neutral-light"),
+  "button-secondary-dark-color--hover": color$1("accent"),
+  "button-secondary-dark-color--focus": color$1("neutral-light"),
+  "button-secondary-dark-color--active": color$1("accent", 0.6),
+  "button-secondary-dark-color--disabled": color$1("neutral-light"),
+  // button tertiary
+  "button-tertiary-background": color$1("transparent"),
+  "button-tertiary-background--hover": color$1("neutral", 0.2),
+  "button-tertiary-background--focus": color$1("neutral", 0.2),
+  "button-tertiary-background--active": color$1("transparent"),
+  "button-tertiary-background--disabled": color$1("transparent"),
+  "button-tertiary-border-color": color$1("transparent"),
+  "button-tertiary-border-color--hover": color$1("transparent"),
+  "button-tertiary-border-color--focus": color$1("transparent"),
+  "button-tertiary-border-color--active": color$1("accent", 0.6),
+  "button-tertiary-border-color--disabled": color$1("transparent"),
+  "button-tertiary-color": color$1("neutral-darker"),
+  "button-tertiary-color--hover": color$1("accent"),
+  "button-tertiary-color--focus": color$1("primary"),
+  "button-tertiary-color--active": color$1("accent", 0.6),
+  "button-tertiary-color--disabled": color$1("neutral-darker"),
+  "button-tertiary-outline": "none",
+  "button-tertiary-box-shadow": "none",
+  // button warning
+  "button-warning-background": color$1("transparent"),
+  "button-warning-background--hover": color$1("warning", 0.2),
+  "button-warning-background--focus": color$1("transparent"),
+  "button-warning-background--active": color$1("transparent"),
+  "button-warning-background--disabled": color$1("transparent"),
+  "button-warning-border-color": color$1("warning-dark"),
+  "button-warning-border-color--hover": color$1("warning"),
+  "button-warning-border-color--focus": color$1("warning-dark"),
+  "button-warning-border-color--active": color$1("warning"),
+  "button-warning-border-color--disabled": color$1("warning-dark"),
+  "button-warning-color": color$1("warning-dark"),
+  "button-warning-color--hover": color$1("warning"),
+  "button-warning-color--focus": color$1("warning-dark"),
+  "button-warning-color--active": color$1("warning"),
+  "button-warning-color--disabled": color$1("warning-dark"),
+  "button-warning-outline": "none",
+  "button-warning-box-shadow": shadow$1("glow-warning"),
+  // button icon
+  "button-icon-border-radius": border$1.radius("circle"),
+  "button-icon-small-width": height$1("small"),
+  "button-icon-width": height$1("default"),
+  "button-icon-large-width": height$1("large"),
+  "button-icon-background": color$1("neutral-lighter"),
+  "button-icon-background--hover": color$1("neutral-lighter"),
+  "button-icon-background--focus": color$1("neutral-lighter"),
+  "button-icon-background--active": color$1("neutral-light"),
+  "button-icon-background--disabled": color$1("neutral-lighter"),
+  "button-icon-border-color": color$1("neutral-lighter"),
+  "button-icon-border-color--hover": color$1("neutral-lighter"),
+  "button-icon-border-color--focus": color$1("neutral-lighter"),
+  "button-icon-border-color--active": color$1("neutral-light"),
+  "button-icon-border-color--disabled": color$1("neutral-lighter"),
+  "button-icon-color": color$1("neutral-darkest"),
+  "button-icon-color--hover": color$1("accent"),
+  "button-icon-color--focus": color$1("neutral-darkest"),
+  "button-icon-color--active": color$1("neutral-darkest"),
+  "button-icon-color--disabled": color$1("neutral-darkest"),
+  "button-icon-box-shadow": shadow$1("glow-primary"),
+  "button-icon-outline": "none",
+  // tag
+  "tag-border-radius": rem("30px"),
+  "tag-border-width": border$1.width("thin"),
+  "tag-font-height": font$1.height("1"),
+  "tag-spacing": `0 ${spacing$1("s")}`,
+  "tag-removable-spacing": `0 ${spacing$1("xs")} 0 ${spacing$1("s")}`,
+  "tag-width": "auto",
+  "tag-box-shadow": shadow$1("glow-primary"),
+  "tag-outline-offset": "0",
+  "tag-remove-button-background": color$1("neutral-white"),
+  "tag-remove-button-border-radius": rem("24px"),
+  "tag-icon-spacing": spacing$1("xs"),
+  // tag small
+  "tag-small-font-size": font$1.size("6"),
+  "tag-small-font-weight": font$1.weight("bold"),
+  "tag-small-height": rem("16px"),
+  "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 ${spacing$1("s")}`,
+  "tag-small-removable-spacing": `0 ${spacing$1("s")}`,
+  // tag medium
+  "tag-font-size": font$1.size("5"),
+  "tag-font-weight": font$1.weight("bold"),
+  "tag-height": rem("24px"),
+  "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": font$1.size("4"),
+  "tag-large-font-weight": font$1.weight("bold"),
+  "tag-large-height": rem("32px"),
+  "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 ${spacing$1("s")}`,
+  // tag default
+  "tag-default-background": color$1("neutral-light"),
+  "tag-default-background--hover": color$1("accent", 0.4),
+  "tag-default-background--focus": color$1("neutral-dark", 0.2),
+  "tag-default-color": color$1("neutral-darkest"),
+  "tag-default-color--hover": color$1("neutral-darkest"),
+  "tag-default-color--focus": color$1("neutral-dark"),
+  "tag-default-border-color": "transparent",
+  "tag-default-border-color--hover": "transparent",
+  "tag-default-border-color--focus": "transparent",
+  "tag-default-outline": "none",
+  // tag outline
+  "tag-outlined-background": color$1("transparent"),
+  "tag-outlined-background--hover": color$1("accent", 0.4),
+  "tag-outlined-background--focus": color$1("neutral-white"),
+  "tag-outlined-color": color$1("neutral-darkest"),
+  "tag-outlined-color--hover": color$1("neutral-darkest"),
+  "tag-outlined-color--focus": color$1("neutral-darker"),
+  "tag-outlined-border-color": color$1("neutral-darkest"),
+  "tag-outlined-border-color--hover": color$1("neutral-darkest"),
+  "tag-outlined-border-color--focus": color$1("neutral-darker"),
+  "tag-outline-outline": "none",
+  // tag accent
+  "tag-accent-background": color$1("accent", 0.2),
+  "tag-accent-background--hover": color$1("accent", 0.4),
+  "tag-accent-background--focus": color$1("accent", 0.2),
+  "tag-accent-color": color$1("accent"),
+  "tag-accent-color--hover": color$1("accent"),
+  "tag-accent-color--focus": color$1("accent"),
+  "tag-accent-border-color": "transparent",
+  "tag-accent-border-color--hover": "transparent",
+  "tag-accent-border-color--focus": "transparent",
+  "tag-accent-outline": "none",
+  // tag success
+  "tag-success-background": color$1("success-light"),
+  "tag-success-background--hover": color$1("success-light"),
+  "tag-success-background--focus": color$1("success-light"),
+  "tag-success-color": color$1("success-dark"),
+  "tag-success-color--hover": color$1("success-dark"),
+  "tag-success-color--focus": color$1("success-dark"),
+  "tag-success-border-color": color$1("success-light"),
+  "tag-success-border-color--hover": color$1("success-light"),
+  "tag-success-border-color--focus": color$1("success-light"),
+  "tag-success-outline": "none",
+  // tag warning
+  "tag-warning-background": color$1("warning-light"),
+  "tag-warning-background--hover": color$1("warning-light"),
+  "tag-warning-background--focus": color$1("warning-light"),
+  "tag-warning-color": color$1("warning-dark"),
+  "tag-warning-color--hover": color$1("warning-dark"),
+  "tag-warning-color--focus": color$1("warning-dark"),
+  "tag-warning-border-color": color$1("warning-light"),
+  "tag-warning-border-color--hover": color$1("warning-light"),
+  "tag-warning-border-color--focus": color$1("warning-light"),
+  "tag-warning-outline": "none",
+  // tag danger
+  "tag-danger-background": color$1("danger-light"),
+  "tag-danger-background--hover": color$1("danger-light"),
+  "tag-danger-background--focus": color$1("danger-light"),
+  "tag-danger-color": color$1("danger-dark"),
+  "tag-danger-color--hover": color$1("danger-dark"),
+  "tag-danger-color--focus": color$1("danger-dark"),
+  "tag-danger-border-color": color$1("danger-light"),
+  "tag-danger-border-color--hover": color$1("danger-light"),
+  "tag-danger-border-color--focus": color$1("danger-light"),
+  "tag-danger-outline": "none",
+  // checkbox
+  "checkbox-color": color$1("neutral-darker"),
+  "checkbox-font-weight": font$1.weight("medium"),
+  "checkbox-font-size": font$1.size("4"),
+  "checkbox-selector-border-radius": border$1.radius("s"),
+  "checkbox-selector-size": rem("16px"),
+  "checkbox-selector-box-shadow": shadow$1("glow-primary"),
+  "checkbox-selector-outline": "none",
+  "checkbox-selector-outline-offset": "0",
+  "checkbox-small-font-size": font$1.size("5"),
+  "checkbox-selector-icon-color": color$1("neutral-white"),
+  "checkbox-selector-background": color$1("neutral-white"),
+  "checkbox-selector-background--hover": color$1("neutral-white"),
+  "checkbox-selector-background--focus": color$1("neutral-white"),
+  "checkbox-selector-background--disabled": color$1("neutral-light"),
+  "checkbox-selector-checked-background": color$1("primary"),
+  "checkbox-selector-checked-background--hover": color$1("accent"),
+  "checkbox-selector-checked-background--focus": color$1("primary"),
+  "checkbox-selector-checked-background--disabled": color$1("primary"),
+  "checkbox-selector-border-color": color$1("neutral-darker"),
+  "checkbox-selector-border-color--hover": color$1("accent"),
+  "checkbox-selector-border-color--focus": color$1("accent"),
+  "checkbox-selector-border-color--disabled": color$1("neutral-darker"),
+  "checkbox-selector-checked-border-color": color$1("primary"),
+  "checkbox-selector-checked-border-color--hover": color$1("accent"),
+  "checkbox-selector-checked-border-color--focus": color$1("accent"),
+  "checkbox-selector-checked-border-color--disabled": color$1("neutral-darkest"),
+  // checkbox dark
+  "checkbox-dark-color": color$1("neutral-lighter"),
+  "checkbox-dark-selector-background": color$1("neutral-darker"),
+  "checkbox-dark-selector-background--hover": color$1("neutral-darker"),
+  "checkbox-dark-selector-background--focus": color$1("neutral-darker"),
+  "checkbox-dark-selector-background--disabled": color$1("neutral-neutral"),
+  "checkbox-dark-selector-border-color": color$1("neutral-lighter"),
+  "checkbox-dark-selector-border-color--hover": color$1("accent"),
+  "checkbox-dark-selector-border-color--focus": color$1("accent"),
+  "checkbox-dark-selector-border-color--disabled": color$1("neutral-lighter"),
+  // radio
+  "radio-color": color$1("accent"),
+  "radio-font-weight": font$1.weight("medium"),
+  "radio-font-size": font$1.size("4"),
+  "radio-selector-border-radius": border$1.radius("circle"),
+  "radio-selector-size": rem("24px"),
+  "radio-selector-box-shadow": shadow$1("glow-primary"),
+  "radio-small-font-size": font$1.size("5"),
+  "radio-small-selector-size": rem("16px"),
+  "radio-selector-background": color$1("neutral-white"),
+  "radio-selector-background--hover": color$1("neutral-white"),
+  "radio-selector-background--focus": color$1("neutral-white"),
+  "radio-selector-background--disabled": color$1("neutral-light"),
+  "radio-selector-border-color": color$1("neutral-darker"),
+  "radio-selector-border-color--hover": color$1("accent"),
+  "radio-selector-border-color--focus": color$1("accent"),
+  "radio-selector-border-color--disabled": color$1("neutral-darker"),
+  "radio-selector-border-color--checked": color$1("accent"),
+  // radio dark
+  "radio-dark-color": color$1("neutral-lighter"),
+  "radio-dark-selector-background": color$1("neutral-darker"),
+  "radio-dark-selector-background--hover": color$1("neutral-darker"),
+  "radio-dark-selector-background--focus": color$1("neutral-darker"),
+  "radio-dark-selector-background--disabled": color$1("neutral-neutral"),
+  "radio-dark-selector-border-color": color$1("neutral-lighter"),
+  "radio-dark-selector-border-color--hover": color$1("accent"),
+  "radio-dark-selector-border-color--focus": color$1("accent"),
+  "radio-dark-selector-border-color--disabled": color$1("neutral-lighter"),
+  // tooltip
+  "tooltip-arrow-height": rem("12px"),
+  "tooltip-arrow-width": rem("20px"),
+  "tooltip-background": color$1("neutral-darker"),
+  "tooltip-border-radius": rem("8px"),
+  "tooltip-color": color$1("neutral-white"),
+  "tooltip-dark-outline": color$1("neutral", 0.4),
+  "tooltip-font-size": font$1.size("4"),
+  "tooltip-font-height": font$1.height("3"),
+  "tooltip-max-width": rem("240px"),
+  "tooltip-min-width": rem("80px"),
+  "tooltip-outline": color$1("neutral-darkest"),
+  "tooltip-padding-x": spacing$1("m"),
+  "tooltip-padding-y": spacing$1("s"),
+  "tooltip-margin": spacing$1("s"),
+  "tooltip-shadow": shadow$1("droplist"),
+  // modal
+  "modal-small-max-width": rem("344px"),
+  "modal-max-width": rem("484px"),
+  "modal-large-max-width": rem("688px"),
+  "modal-overlay-background": color$1("neutral-darkest", 0.4),
+  // dialog
+  "dialog-header-color": color$1("neutral-darkest"),
+  "dialog-header-border-color": color$1("neutral-light"),
+  "dialog-body-font-color": color$1("color-neutral-darker"),
+  // text-field
+  "text-field-border-radius": border$1.radius("s"),
+  "text-field-color": color$1("neutral-darker"),
+  "text-field-font-size": font$1.size("4"),
+  "text-field-font-weight": font$1.weight("medium"),
+  "text-field-font-height": font$1.height("3"),
+  "text-field-height": height$1("default"),
+  "text-field-padding-x": spacing$1("s"),
+  "text-field-padding-y": spacing$1("s"),
+  "text-field-box-shadow": shadow$1("glow-primary"),
+  "text-field-outline": "none",
+  "text-field-outline-offset": "0",
+  "text-field-small-height": height$1("small"),
+  "text-field-small-padding-x": spacing$1("s"),
+  "text-field-small-padding-y": spacing$1("xs"),
+  "text-field-small-font-size": font$1.size("5"),
+  "text-field-large-height": height$1("large"),
+  "text-field-large-padding-x": spacing$1("s"),
+  "text-field-large-padding-y": rem("12px"),
+  "text-field-large-font-size": font$1.size("4"),
+  "text-field-background": color$1("neutral-white"),
+  "text-field-background--hover": color$1("neutral-white"),
+  "text-field-background--focus": color$1("neutral-white"),
+  "text-field-background--disabled": color$1("neutral-light"),
+  "text-field-border-color": color$1("neutral-darker"),
+  "text-field-border-color--hover": color$1("accent"),
+  "text-field-border-color--focus": color$1("accent"),
+  "text-field-border-color--disabled": color$1("neutral-darker"),
+  // text-field dark
+  "text-field-dark-color": color$1("neutral-lighter"),
+  "text-field-dark-background": color$1("neutral-darker"),
+  "text-field-dark-border-color": color$1("neutral-lighter"),
+  "text-field-dark-border-color--hover": color$1("accent"),
+  "text-field-dark-border-color--focus": color$1("accent"),
+  "text-field-dark-border-color--disabled": color$1("neutral-lighter"),
+  "text-field-success-border-color": color$1("accent"),
+  "text-field-danger-border-color": color$1("danger"),
+  "text-field-dark-box-shadow": color$1("neutral", 0.4),
+  // textarea
+  "textarea-border-radius": border$1.radius("s"),
+  "textarea-color": color$1("neutral-darker"),
+  "textarea-font-size": font$1.size("4"),
+  "textarea-font-weight": font$1.weight("medium"),
+  "textarea-font-height": font$1.height("3"),
+  "textarea-min-height": rem("64px"),
+  "textarea-padding-x": spacing$1("s"),
+  "textarea-padding-y": spacing$1("s"),
+  "textarea-box-shadow": shadow$1("glow-primary"),
+  "textarea-outline": "none",
+  "textarea-outline-offset": "0",
+  "textarea-small-padding-x": spacing$1("s"),
+  "textarea-small-padding-y": spacing$1("xs"),
+  "textarea-small-font-size": font$1.size("5"),
+  "textarea-large-height": rem("45px"),
+  "textarea-large-padding-x": spacing$1("s"),
+  "textarea-large-padding-y": rem("12px"),
+  "textarea-large-font-size": font$1.size("4"),
+  "textarea-background": color$1("neutral-white"),
+  "textarea-background--hover": color$1("neutral-white"),
+  "textarea-background--focus": color$1("neutral-white"),
+  "textarea-background--disabled": color$1("neutral-light"),
+  "textarea-border-color": color$1("neutral-darker"),
+  "textarea-border-color--hover": color$1("accent"),
+  "textarea-border-color--focus": color$1("accent"),
+  "textarea-border-color--disabled": color$1("neutral-darker"),
+  // textarea dark
+  "textarea-dark-color": color$1("neutral-lighter"),
+  "textarea-dark-background": color$1("neutral-darker"),
+  "textarea-dark-border-color": color$1("neutral-lighter"),
+  "textarea-dark-border-color--hover": color$1("accent"),
+  "textarea-dark-border-color--focus": color$1("accent"),
+  "textarea-dark-border-color--disabled": color$1("neutral-lighter"),
+  "textarea-success-border-color": color$1("accent"),
+  "textarea-danger-border-color": color$1("danger"),
+  "textarea-dark-box-shadow": color$1("neutral", 0.4),
+  // link
+  "link-font-size": font$1.size("3"),
+  "link-font-height": font$1.height("2"),
+  "link-color": color$1("accent"),
+  "link-font-weight": font$1.weight("medium"),
+  "link-font-weight--hover": font$1.weight("bold"),
+  "link-box-shadow": shadow$1("glow-primary"),
+  "link-outline": "none",
+  "link-outline-offset": "0",
+  // breadcrumbs
+  "breadcrumbs-font-size": font$1.size("2"),
+  "breadcrumbs-font-height": font$1.height("2"),
+  "breadcrumbs-font-weight": font$1.weight("medium"),
+  "breadcrumbs-font-weight--active": font$1.weight("bold"),
+  "breadcrumbs-spacing-x": rem("36px"),
+  //banner
+  "banner-font-size": font$1.size("4"),
+  "banner-font-height": font$1.height("3"),
+  "banner-default-height": rem("40px"),
+  "banner-min-width": rem("320px"),
+  "banner-description-color": color$1("neutral-darker"),
+  "banner-title-font-weight": font$1.weight("bold"),
+  "banner-border-radius": border$1.radius("m"),
+  "banner-border-width": border$1.width("thin"),
+  "banner-close-button-color": color$1("neutral-darker"),
+  "banner-icon-width": rem("24px"),
+  "banner-icon-height": rem("24px"),
+  "banner-icon-margin-right": rem("10px"),
+  "banner-default-padding-x": spacing$1("m"),
+  "banner-default-padding-y": spacing$1("s"),
+  "banner-large-padding": spacing$1("m"),
+  "banner-default-icon-alignment": "center",
+  "banner-large-icon-alignment": "start",
+  "banner-default-close-top": spacing$1("s"),
+  "banner-default-close-right": spacing$1("s"),
+  "banner-large-close-top": rem("12px"),
+  "banner-large-close-right": rem("12px"),
+  //banner success
+  "banner-title-color-success": color$1("success-dark"),
+  "banner-border-color-success": color$1("success"),
+  "banner-background-success": color$1("success-light"),
+  //banner danger
+  "banner-title-color-danger": color$1("danger-dark"),
+  "banner-border-color-danger": color$1("danger"),
+  "banner-background-danger": color$1("danger-light"),
+  //banner warning
+  "banner-title-color-warning": color$1("warning-dark"),
+  "banner-border-color-warning": color$1("warning"),
+  "banner-background-warning": color$1("warning-light"),
+  //banner neutral
+  "banner-title-color-neutral": color$1("neutral-darker"),
+  "banner-border-color-neutral": color$1("neutral"),
+  "banner-background-neutral": color$1("neutral-light"),
+  //banner action
+  "banner-button-background-success": color$1("success-dark"),
+  "banner-button-background-neutral": color$1("neutral-dark"),
+  "banner-button-background-danger": color$1("danger-dark"),
+  "banner-button-background-warning": color$1("warning-dark"),
+  "banner-button-background-secondary": color$1("transparent"),
+  "banner-button-text-color": color$1("neutral-white"),
+  "banner-secondary-button-margin-left": spacing$1("s"),
+  // progressbar
+  "progressbar-height": rem("5px"),
+  "progressbar-background": color$1("transparent"),
+  "progressbar-line": color$1("darker"),
+  // neutral
+  "progressbar-neutral-fill": color$1("neutral-light"),
+  // success
+  "progressbar-success-fill": color$1("success-light"),
+  // danger
+  "progressbar-danger-fill": color$1("danger-light"),
+  // warning
+  "progressbar-warning-fill": color$1("warning-light"),
+  // toast
+  "toast-padding-x": spacing$1("m"),
+  "toast-padding-y": spacing$1("m"),
+  "toast-border-radius": border$1.radius("s"),
+  "toast-font-color": color$1("neutral-white"),
+  "toast-font-size": font$1.size("4"),
+  "toast-font-weight": font$1.weight("bold"),
+  "toast-font-height": font$1.height("3"),
+  "toast-close-x": spacing$1("xs"),
+  "toast-close-y": spacing$1("xs"),
+  "toast-shadow": shadow$1("modal"),
+  "toast-width": rem("320px"),
+  // neutral
+  "toast-neutral-background": color$1("neutral-dark"),
+  // success
+  "toast-success-background": color$1("success"),
+  // danger
+  "toast-danger-background": color$1("danger"),
+  // warning
+  "toast-warning-background": color$1("warning"),
+  // Label
+  "label-font-size": font$1.size("4"),
+  "label-font-weight": font$1.weight("medium"),
+  "label-font-height": font$1.height("3"),
+  "label-font-color": color$1("darker"),
+  // Label required
+  "label-required-color": color$1("danger"),
+  // Label tooltip
+  "label-tooltip-margin-left": spacing$1("xs"),
+  "label-tooltip-font-weight": font$1.weight("bold"),
+  "label-tooltip-font-size": font$1.size("5"),
+  "label-tooltip-font-color": color$1("darker"),
+  "label-tooltip-background-color": color$1("neutral"),
+  // Label dark
+  "label-dark-font-color": color$1("neutral-white"),
+  // Label tooltip dark
+  "label-tooltip-dark-font-color": color$1("neutral-white"),
+  "label-tooltip-dark-background-color": color$1("neutral"),
+  // Switch
+  "switch-width": rem("52px"),
+  "switch-height": rem("22px"),
+  "switch-border-radius": rem("22px"),
+  "switch-box-shadow": shadow$1("glow-primary"),
+  "switch-outline": "none",
+  "switch-outline-offset": "0",
+  // 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$1("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$1("neutral"),
+  "switch-inactive-background-color--hover": color$1("neutral-dark", 0.4),
+  // Switch Active
+  "switch-active-background-color": color$1("accent"),
+  "switch-active-background-color--hover": color$1("accent", 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$1("neutral-white"),
+  "switch-slider-border-radius": border$1.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$1("xl"),
+  "steps-step-padding-x": spacing$1("xl"),
+  "steps-color": color$1("neutral-darker"),
+  "steps-progress-padding-y": spacing$1("xl"),
+  "steps-progress-padding-x": spacing$1("xl"),
+  "steps-spacing-y": spacing$1("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$1("neutral"),
+  "steps-progress-step-background-color--complete": color$1("accent"),
+  // card
+  "card-background": color$1("neutral-white"),
+  "card-border-color": color$1("neutral-light"),
+  "card-border-radius": border$1.radius("s"),
+  "card-color": color$1("neutral-darker"),
+  "card-flag-background-danger": color$1("danger"),
+  "card-flag-background-neutral": color$1("neutral-light"),
+  "card-flag-background-success": color$1("success"),
+  "card-flag-background-warning": color$1("warning"),
+  "card-flag-width": rem("4px"),
+  "card-font-height": font$1.height("3"),
+  "card-padding-x": spacing$1("m"),
+  "card-padding-y": spacing$1("m"),
+  "card-separator-background": color$1("neutral-lighter"),
+  "card-subtitle-font-size": font$1.size("4"),
+  "card-subtitle-font-weight": font$1.weight("medium"),
+  "card-title-font-height": font$1.height("2"),
+  "card-title-font-size": font$1.size("3"),
+  "card-title-font-weight": font$1.weight("bold"),
+  // dropdown
+  "dropdown-background": color$1("neutral-white"),
+  "dropdown-border-color": color$1("neutral-light"),
+  "dropdown-border-radius": border$1.radius("s"),
+  "dropdown-shadow": shadow$1("droplist"),
+  // popover
+  "popover-background": color$1("neutral-white"),
+  "popover-border-color": color$1("neutral-light"),
+  "popover-border-radius": border$1.radius("s"),
+  "popover-shadow": shadow$1("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$1("l"),
+  "side-navigation-background-color": color$1("neutral-darker"),
+  "side-navigation-component-margin-top": spacing$1("l"),
+  "side-navigation-logo-padding-x": spacing$1("l"),
+  "side-navigation-separator-color": color$1("neutral-dark"),
+  "side-navigation-menu-title-font-weight": font$1.weight("bold"),
+  "side-navigation-menu-title-font-size": font$1.size("5"),
+  "side-navigation-menu-title-line-height": font$1.height("3"),
+  "side-navigation-menu-link-color--hover": color$1("primary"),
+  "side-navigation-menu-link-background-color--active": color$1("neutral-darkest", 0.2),
+  "side-navigation-menu-link-box-shadow-color--active": color$1("primary"),
+  "side-navigation-menu-item-color--focus": color$1("primary"),
+  // Table
+  "table-row-default-color": color$1("neutral-white"),
+  "table-row-variant-color": color$1("neutral-light", 0.2),
+  "table-row-selected-color": color$1("accent", 0.2),
+  // Top Navigation
+  "top-navigation-height": rem("60px"),
+  "top-navigation-background-color": color$1("neutral-white"),
+  "top-navigation-border-color": color$1("neutral-lighter"),
+  "top-navigation-dropdown-separator-color": color$1("neutral-lighter"),
+  "top-navigation-dropdown-trigger-color": color$1("neutral"),
+  "top-navigation-dropdown-subitem-color": color$1("neutral-dark"),
+  "top-navigation-item-icon-color": color$1("neutral-dark"),
+  "top-navigation-item-color": color$1("neutral-darkest"),
+  "top-navigation-item-color--hover": color$1("primary"),
+  // Select
+  "select-trigger-height": "100%",
+  "select-trigger-border-color": color$1("neutral-lighter"),
+  "select-selected-option-check-color": color$1("accent"),
+  "select-selected-option-background-color": color$1("accent", 0.2),
+  // Toggle & Toggle Group
+  "toggle-text-transform": "uppercase",
+  "toggle-box-shadow": shadow$1("glow-primary"),
+  "toggle-outline": "none",
+  "toggle-outline-offset": "0",
+  "toggle-background-color": color$1("transparent"),
+  "toggle-background-color--hover": color$1("transparent"),
+  "toggle-background-color--focus": color$1("transparent"),
+  "toggle-background-color--active": color$1("transparent"),
+  "toggle-background-color--disabled": color$1("transparent"),
+  "toggle-checked-background-color": color$1("neutral-darkest"),
+  "toggle-checked-background-color--hover": color$1("neutral-dark"),
+  "toggle-checked-background-color--focus": color$1("neutral-darker"),
+  "toggle-checked-background-color--active": color$1("neutral"),
+  "toggle-checked-background-color--disabled": color$1("neutral-darkest"),
+  "toggle-color": color$1("neutral-darker"),
+  "toggle-color--hover": color$1("neutral-dark"),
+  "toggle-color--focus": color$1("neutral-darker"),
+  "toggle-color--active": color$1("neutral"),
+  "toggle-color--disabled": color$1("neutral-darker"),
+  "toggle-checked-color": color$1("neutral-white"),
+  "toggle-checked-color--hover": color$1("neutral-white"),
+  "toggle-checked-color--focus": color$1("neutral-white"),
+  "toggle-checked-color--active": color$1("neutral-white"),
+  "toggle-checked-color--disabled": color$1("neutral-lightest"),
+  "toggle-single-border-color": color$1("transparent"),
+  "toggle-single-border-color--hover": color$1("transparent"),
+  "toggle-single-border-color--focus": color$1("neutral-darker"),
+  "toggle-single-border-color--active": color$1("neutral"),
+  "toggle-single-border-color--disabled": color$1("transparent"),
+  "toggle-single-checked-border-color": color$1("neutral-darkest"),
+  "toggle-single-checked-border-color--disabled": color$1("neutral-darkest"),
+  "toggle-single-font-size": font$1.size("4"),
+  "toggle-single-small-font-size": "10px",
+  "toggle-single-height": "28px",
+  "toggle-single-small-height": "16px",
+  "toggle-multiple-border-color": color$1("neutral-darkest"),
+  "toggle-multiple-border-color--hover": color$1("neutral-dark"),
+  "toggle-multiple-border-color--focus": color$1("neutral-darker"),
+  "toggle-multiple-border-color--active": color$1("neutral"),
+  "toggle-multiple-border-color--disabled": color$1("neutral-darkest"),
+  "toggle-multiple-checked-border-color": color$1("neutral-darkest"),
+  "toggle-multiple-checked-border-color--disabled": color$1("neutral-darkest"),
+  "toggle-multiple-font-size": font$1.size("4"),
+  "toggle-multiple-small-font-size": font$1.size("5"),
+  "toggle-multiple-height": "36px",
+  "toggle-multiple-small-height": "24px",
+  "toggle-group-border-color--disabled": color$1("neutral-darkest", 0.4),
+  "toggle-group-multiple-border-width": "initial",
+  "toggle-group-multiple-border-style": "none",
+  "toggle-group-multiple-border-color": "initial",
+  "toggle-group-multiple-border-radius": "initial",
+  "toggle-group-multiple-padding": 0,
+  "toggle-group-single-border-width": "1px",
+  "toggle-group-single-border-style": "solid",
+  "toggle-group-single-border-color": color$1("neutral-darker"),
+  "toggle-group-single-border-radius": border$1.radius("s"),
+  "toggle-group-single-padding": "3px",
+  // dropdown
+  "dropdown-trigger-border-color": color$1("primary"),
+  "dropdown-trigger-dark-border-color": color$1("neutral-light"),
+  "dropdown-trigger-outlined-border-color": color$1("transparent"),
+  "dropdown-trigger-expanded-color": color$1("accent"),
+  "dropdown-trigger-height": height$1("default"),
+  "dropdown-trigger-small-height": height$1("small"),
+  "dropdown-trigger-large-height": height$1("large"),
+  "dropdown-trigger-box-shadow": shadow$1("glow-primary"),
+  "dropdown-trigger-outline": "none",
+  "dropdown-trigger-outline-offset": "0"
+};
+const COLORS = {
+  ...COLORS$2,
+  "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")
+};
+const OPACITIES = OPACITIES$2;
+const SPACINGS = SPACINGS$2;
+const FONT_FAMILIES = FONT_FAMILIES$2;
+const FONT_SIZES = FONT_SIZES$2;
+const FONT_WEIGHTS = FONT_WEIGHTS$2;
+const FONT_HEIGHTS = FONT_HEIGHTS$2;
+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")}`
+};
+const BORDER_RADIUSES = BORDER_RADIUSES$2;
+const BORDER_WIDTHS = BORDER_WIDTHS$2;
+const Z_INDEXES = Z_INDEXES$2;
+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 = {
+  ...alice,
+  ...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 {
+  BASE_PIXELS as B,
+  alice as a,
+  loadsmart as l,
+  mirandaCompatibility as m,
+  rem as r
+};
+//# sourceMappingURL=miranda-compatibility.theme-kYNEZ7mW.js.map