@rovula/ui 0.0.21 → 0.0.22

package/src/_theme/global.css

@@ -1,39 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import "./variables/default/colors.css";
-@import "./variables/default/typography.css";
-
-@import "./variables/xspector/colors.css";
-@import "./variables/xspector/typography.css";
-
-@layer base {
-  :root {
-    --primary-foreground: var(--text-dark);
-    --secondary-foreground: var(--text-dark);
-    --tertiary-foreground: var(--text-dark);
-    --info-foreground: var(--text-white);
-    --success-foreground: var(--text-white);
-    --warning-foreground: var(--text-dark);
-    --error-foreground: var(--text-white);
-
-    --body-bg: var(--base-bg);
-    --body-foreground: var(--common-white);
-
-    --surface: var(--common-white);
-    --surface-foreground: var(--text-white);
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    /* @apply border-border; */
-  }
-  body {
-    /* @apply bg-background text-foreground; */
-    @apply bg-[var(--brand-colors-backgroud)] text-text-grey-light;
-  }
-}

package/src/_theme/main-preset.js

@@ -1,239 +0,0 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: "class",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontSize: {
-        h1: [
-          "var(--h1-size, 64px)",
-          {
-            lineHeight: "var(--h1-line-height, 80px)",
-            fontWeight: "var(--h1-weight, 700)",
-            fontFamily: "var(--h1-family, 'Poppins')",
-          },
-        ],
-        h2: [
-          "var(--h2-size, 48px)",
-          {
-            lineHeight: "var(--h2-line-height, 60px)",
-            fontWeight: "var(--h2-weight, 700)",
-            fontFamily: "var(--h2-family, 'Poppins')",
-          },
-        ],
-        h3: [
-          "var(--h3-size, 32px)",
-          {
-            lineHeight: "var(--h3-line-height, 48px)",
-            fontWeight: "var(--h3-weight, 700)",
-            fontFamily: "var(--h3-family, 'Poppins')",
-          },
-        ],
-        h4: [
-          "var(--h4-size, 24px)",
-          {
-            lineHeight: "var(--h4-line-height, 32px)",
-            fontWeight: "var(--h4-weight, 700)",
-            fontFamily: "var(--h4-family, 'Poppins')",
-          },
-        ],
-        h5: [
-          "var(--h5-size, 20px)",
-          {
-            lineHeight: "var(--h5-line-height, 28px)",
-            fontWeight: "var(--h5-weight, 700)",
-            fontFamily: "var(--h5-family, 'Poppins')",
-          },
-        ],
-        h6: [
-          "var(--h6-size, 18px)",
-          {
-            lineHeight: "var(--h6-line-height, 24px)",
-            fontWeight: "var(--h6-weight, 700)",
-            fontFamily: "var(--h6-family, 'Poppins')",
-          },
-        ],
-        subtitile1: [
-          "var(--subtitle1-size, 16px)",
-          {
-            lineHeight: "var(--subtitle1-line-height, 24px)",
-            fontWeight: "var(--subtitle1-weight, 400)",
-            fontFamily: "var(--subtitle1-family, 'Poppins')",
-          },
-        ],
-        subtitile2: [
-          "var(--subtitle2-size, 16px)",
-          {
-            lineHeight: "var(--subtitle2-line-height, 24px)",
-            fontWeight: "var(--subtitle2-weight, 500)",
-            fontFamily: "var(--subtitle2-family, 'Poppins')",
-          },
-        ],
-        subtitile3: [
-          "var(--subtitle3-size, 16px)",
-          {
-            lineHeight: "var(--subtitle3-line-height, 24px)",
-            fontWeight: "var(--subtitle3-weight, 600)",
-            fontFamily: "var(--subtitle3-family, 'Poppins')",
-          },
-        ],
-        subtitile4: [
-          "var(--subtitle4-size, 14px)",
-          {
-            lineHeight: "var(--subtitle4-line-height, 22px)",
-            fontWeight: "var(--subtitle4-weight, 400)",
-            fontFamily: "var(--subtitle4-family, 'Poppins')",
-          },
-        ],
-        subtitile5: [
-          "var(--subtitle5-size, 14px)",
-          {
-            lineHeight: "var(--subtitle5-line-height, 22px)",
-            fontWeight: "var(--subtitle5-weight, 500)",
-            fontFamily: "var(--subtitle5-family, 'Poppins')",
-          },
-        ],
-        subtitile6: [
-          "var(--subtitle6-size, 14px)",
-          {
-            lineHeight: "var(--subtitle6-line-height, 22px)",
-            fontWeight: "var(--subtitle6-weight, 600)",
-            fontFamily: "var(--subtitle6-family, 'Poppins')",
-          },
-        ],
-        body1: [
-          "var(--body1-size, 16px)",
-          {
-            lineHeight: "var(--body1-line-height, 20px)",
-            fontWeight: "var(--body1-weight, 400)",
-            fontFamily: "var(--body1-family, 'Poppins')",
-          },
-        ],
-        body2: [
-          "var(--body2-size, 16px)",
-          {
-            lineHeight: "var(--body2-line-height, 20px)",
-            fontWeight: "var(--body2-weight, 500)",
-            fontFamily: "var(--body2-family, 'Poppins')",
-          },
-        ],
-        body3: [
-          "var(--body3-size, 14px)",
-          {
-            lineHeight: "var(--body3-line-height, 18px)",
-            fontWeight: "var(--body3-weight, 400)",
-            fontFamily: "var(--body3-family, 'Poppins')",
-          },
-        ],
-        body4: [
-          "var(--body4-size, 14px)",
-          {
-            lineHeight: "var(--body4-line-height, 18px)",
-            fontWeight: "var(--body4-weight, 500)",
-            fontFamily: "var(--body4-family, 'Poppins')",
-          },
-        ],
-        small1: [
-          "var(--small1-size, 12px)",
-          {
-            lineHeight: "var(--small1-line-height, 14px)",
-            fontWeight: "var(--small1-weight, 400)",
-            fontFamily: "var(--small1-family, 'Poppins')",
-          },
-        ],
-        small2: [
-          "var(--small2-size, 12px)",
-          {
-            lineHeight: "var(--small2-line-height, 14px)",
-            fontWeight: "var(--small2-weight, 500)",
-            fontFamily: "var(--small2-family, 'Poppins')",
-          },
-        ],
-        small3: [
-          "var(--small3-size, 12px)",
-          {
-            lineHeight: "var(--small3-line-height, 14px)",
-            fontWeight: "var(--small3-weight, 600)",
-            fontFamily: "var(--small3-family, 'Poppins')",
-          },
-        ],
-        small4: [
-          "var(--small4-size, 10px)",
-          {
-            lineHeight: "var(--small4-line-height, 12px)",
-            fontWeight: "var(--small4-weight, 400)",
-            fontFamily: "var(--small4-family, 'Poppins')",
-          },
-        ],
-        small5: [
-          "var(--small5-size, 10px)",
-          {
-            lineHeight: "var(--small5-line-height, 12px)",
-            fontWeight: "var(--small5-weight, 500)",
-            fontFamily: "var(--small5-family, 'Poppins')",
-          },
-        ],
-        label1: [
-          "var(--label-label1-size, 12px)",
-          {
-            lineHeight: "var(--label-label1-line-height, 12px)",
-            fontWeight: "var(--label-label1-weight, 400)",
-            fontFamily: "var(--label-label1-family, 'Poppins')",
-          },
-        ],
-        label2: [
-          "var(--label-label2-size, 10px)",
-          {
-            lineHeight: "var(--label-label2-line-height, 10px)",
-            fontWeight: "var(--label-label2-weight, 400)",
-            fontFamily: "var(--label-label2-family, 'Poppins')",
-          },
-        ],
-        buttonL: [
-          "var(--button-button-l-size, 16px)",
-          {
-            lineHeight: "var(--button-button-l-line-height, 24px)",
-            fontWeight: "var(--button-button-l-weight, 700)",
-            fontFamily: "var(--button-button-l-family, 'Poppins')",
-          },
-        ],
-        buttonMS: [
-          "var(--button-button-ms-size, 14px)",
-          {
-            lineHeight: "var(--button-button-ms-line-height, 22px)",
-            fontWeight: "var(--button-button-ms-weight, 700)",
-            fontFamily: "var(--button-button-ms-family, 'Poppins')",
-          },
-        ],
-      },
-      borderRadius: {
-        sm: `calc(var(--radius, 0.25rem) - 0.25rem)`,
-        md: `var(--radius, 0.5rem)`,
-        lg: `calc(var(--radius, 0.75rem) + 0.25rem)`,
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  presets: [require("./presets/colors"), require("tailwindcss-animate")],
-  plugins: [require("./plugins/utilities/typography")],
-};

package/src/_theme/plugins/utilities/typography.js

@@ -1,81 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(function ({ addUtilities }) {
-  addUtilities({
-    ".typography-h1": {
-      "@apply text-h1": {},
-    },
-    ".typography-h2": {
-      "@apply text-h2": {},
-    },
-    ".typography-h3": {
-      "@apply text-h3": {},
-    },
-    ".typography-h4": {
-      "@apply text-h4": {},
-    },
-    ".typography-h5": {
-      "@apply text-h5": {},
-    },
-    ".typography-h6": {
-      "@apply text-h6": {},
-    },
-    ".typography-subtitile1": {
-      "@apply text-subtitile1": {},
-    },
-    ".typography-subtitile2": {
-      "@apply text-subtitile2": {},
-    },
-    ".typography-subtitile3": {
-      "@apply text-subtitile3": {},
-    },
-    ".typography-subtitile4": {
-      "@apply text-subtitile4": {},
-    },
-    ".typography-subtitile5": {
-      "@apply text-subtitile5": {},
-    },
-    ".typography-subtitile6": {
-      "@apply text-subtitile6": {},
-    },
-    ".typography-body1": {
-      "@apply text-body1": {},
-    },
-    ".typography-body2": {
-      "@apply text-body2": {},
-    },
-    ".typography-body3": {
-      "@apply text-body3": {},
-    },
-    ".typography-body4": {
-      "@apply text-body4": {},
-    },
-    ".typography-small1": {
-      "@apply text-small1": {},
-    },
-    ".typography-small2": {
-      "@apply text-small2": {},
-    },
-    ".typography-small3": {
-      "@apply text-small3": {},
-    },
-    ".typography-small4": {
-      "@apply text-small4": {},
-    },
-    ".typography-small5": {
-      "@apply text-small5": {},
-    },
-    ".typography-label1": {
-      "@apply text-label1": {},
-    },
-    ".typography-label2": {
-      "@apply text-label2": {},
-    },
-    ".typography-buttonL": {
-      "@apply text-buttonL": {},
-    },
-    ".typography-buttonMS": {
-      "@apply text-buttonMS": {},
-    },
-  });
-});

package/src/_theme/presets/colors copy 2.js

@@ -1,319 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        "main-primary": "var(--main-color-primary)",
-        "main-secondary": "var(--main-color-secondary)",
-        "main-tertiary": "var(--main-color-tertiary)",
-
-        "text-dark": "var(--text-dark)",
-        "text-medium": "var(--text-medium)",
-        "text-light": "var(--text-light)",
-        "text-grey-dark": "var(--text-grey-dark)",
-        "text-grey-medium": "var(--text-grey-medium)",
-        "text-grey-light": "var(--text-grey-light)",
-        "text-white": "var(--text-white)",
-
-        primary: "var(--main-color-primary)",
-        "primary-5": "var(--primary-ramps-primary-5)",
-        "primary-10": "var(--primary-ramps-primary-10)",
-        "primary-20": "var(--primary-ramps-primary-20)",
-        "primary-30": "var(--primary-ramps-primary-30)",
-        "primary-40": "var(--primary-ramps-primary-40)",
-        "primary-50": "var(--primary-ramps-primary-50)",
-        "primary-60": "var(--primary-ramps-primary-60)",
-        "primary-70": "var(--primary-ramps-primary-70)",
-        "primary-80": "var(--primary-ramps-primary-80)",
-        "primary-90": "var(--primary-ramps-primary-90)",
-        "primary-100": "var(--primary-ramps-primary-100)",
-        "primary-110": "var(--primary-ramps-primary-110)",
-        "primary-120": "var(--primary-ramps-primary-120)",
-        "primary-130": "var(--primary-ramps-primary-130)",
-        "primary-140": "var(--primary-ramps-primary-140)",
-        "primary-150": "var(--primary-ramps-primary-150)",
-        "primary-foreground": "var(--primary-foreground)",
-
-        "primary-default": "var(--state-color-primary-default)",
-        "primary-hover": "var(--state-color-primary-hover)",
-        "primary-stroke": "var(--state-color-primary-stroke)",
-        "primary-hover-bg": "var(--state-color-primary-hover-bg)", // should be outline hover ?
-        "primary-pressed": "var(--state-color-primary-pressed)",
-        "primary-active": "var(--state-color-primary-active)",
-
-        secondary: "var(--main-color-secondary)",
-        "secondary-5": "var(--secondary-ramps-secondary-5)",
-        "secondary-10": "var(--secondary-ramps-secondary-10)",
-        "secondary-20": "var(--secondary-ramps-secondary-20)",
-        "secondary-30": "var(--secondary-ramps-secondary-30)",
-        "secondary-40": "var(--secondary-ramps-secondary-40)",
-        "secondary-50": "var(--secondary-ramps-secondary-50)",
-        "secondary-60": "var(--secondary-ramps-secondary-60)",
-        "secondary-70": "var(--secondary-ramps-secondary-70)",
-        "secondary-80": "var(--secondary-ramps-secondary-80)",
-        "secondary-90": "var(--secondary-ramps-secondary-90)",
-        "secondary-100": "var(--secondary-ramps-secondary-100)",
-        "secondary-110": "var(--secondary-ramps-secondary-110)",
-        "secondary-120": "var(--secondary-ramps-secondary-120)",
-        "secondary-130": "var(--secondary-ramps-secondary-130)",
-        "secondary-140": "var(--secondary-ramps-secondary-140)",
-        "secondary-150": "var(--secondary-ramps-secondary-150)",
-        "secondary-foreground": "var(--secondary-foreground)",
-
-        "secondary-default": "var(--state-color-secondary-default)",
-        "secondary-hover": "var(--state-color-secondary-hover)",
-        "secondary-stroke": "var(--state-color-secondary-stroke)",
-        "secondary-hover-bg": "var(--state-color-secondary-hover-bg)",
-        "secondary-pressed": "var(--state-color-secondary-pressed)",
-        "secondary-active": "var(--state-color-secondary-active)",
-
-        tertiary: "var(--main-color-tertiary)",
-        "tertiary-5": "var(--tertiary-ramps-tertiary-5)",
-        "tertiary-10": "var(--tertiary-ramps-tertiary-10)",
-        "tertiary-20": "var(--tertiary-ramps-tertiary-20)",
-        "tertiary-30": "var(--tertiary-ramps-tertiary-30)",
-        "tertiary-40": "var(--tertiary-ramps-tertiary-40)",
-        "tertiary-50": "var(--tertiary-ramps-tertiary-50)",
-        "tertiary-60": "var(--tertiary-ramps-tertiary-60)",
-        "tertiary-70": "var(--tertiary-ramps-tertiary-70)",
-        "tertiary-80": "var(--tertiary-ramps-tertiary-80)",
-        "tertiary-90": "var(--tertiary-ramps-tertiary-90)",
-        "tertiary-100": "var(--tertiary-ramps-tertiary-100)",
-        "tertiary-110": "var(--tertiary-ramps-tertiary-110)",
-        "tertiary-120": "var(--tertiary-ramps-tertiary-120)",
-        "tertiary-130": "var(--tertiary-ramps-tertiary-130)",
-        "tertiary-140": "var(--tertiary-ramps-tertiary-140)",
-        "tertiary-150": "var(--tertiary-ramps-tertiary-150)",
-        "tertiary-foreground": "var(--tertiary-foreground)",
-
-        "tertiary-default": "var(--state-color-tertiary-default)", // Naming wrong
-        "tertiary-hover": "var(--state-color-tertiary-hover)",
-        "tertiary-stroke": "var(--state-color-tertiary-stroke)",
-        "tertiary-hover-bg": "var(--state-color-tertiary-hover-bg)",
-        "tertiary-pressed": "var(--state-color-tertiary-pressed)",
-        "tertiary-active": "var(--state-color-tertiery-active)", // Naming wrong
-
-        grey: "var(--grey-grey-100)",
-        "grey-5": "var(--grey-grey-5)",
-        "grey-10": "var(--grey-grey-10)",
-        "grey-20": "var(--grey-grey-20)",
-        "grey-30": "var(--grey-grey-30)",
-        "grey-40": "var(--grey-grey-40)",
-        "grey-50": "var(--grey-grey-50)",
-        "grey-60": "var(--grey-grey-60)",
-        "grey-70": "var(--grey-grey-70)",
-        "grey-80": "var(--grey-grey-80)",
-        "grey-90": "var(--grey-grey-90)",
-        "grey-100": "var(--grey-grey-100)",
-        "grey-110": "var(--grey-grey-110)",
-        "grey-120": "var(--grey-grey-120)",
-        "grey-130": "var(--grey-grey-130)",
-        "grey-140": "var(--grey-grey-140)",
-        "grey-150": "var(--grey-grey-150)",
-
-        grey2: "var(--grey2-grey2-600)",
-        "grey2-50": "var(--grey2-grey2-50)",
-        "grey2-100": "var(--grey2-grey2-100)",
-        "grey2-200": "var(--grey2-grey2-200)",
-        "grey2-300": "var(--grey2-grey2-300)",
-        "grey2-400": "var(--grey2-grey2-400)",
-        "grey2-500": "var(--grey2-grey2-500)",
-        "grey2-600": "var(--grey2-grey2-600)",
-        "grey2-700": "var(--grey2-grey2-700)",
-        "grey2-800": "var(--grey2-grey2-800)",
-        "grey2-900": "var(--grey2-grey2-900)",
-        "grey2-950": "var(--grey2-grey2-950)",
-
-        info: "var(--info-info-500)",
-        "info-50": "var(--info-info-50)",
-        "info-100": "var(--info-info-100)",
-        "info-200": "var(--info-info-200)",
-        "info-300": "var(--info-info-300)",
-        "info-400": "var(--info-info-400)",
-        "info-500": "var(--info-info-500)",
-        "info-600": "var(--info-info-600)",
-        "info-700": "var(--info-info-700)",
-        "info-800": "var(--info-info-800)",
-        "info-900": "var(--info-info-900)",
-        "info-950": "var(--info-info-950)",
-        "info-foreground": "var(--info-foreground)",
-
-        "info-default": "var(--state-color-info-default)",
-        "info-hover": "var(--state-color-info-hover)",
-        "info-stroke": "var(--state-color-info-stroke)",
-        "info-hover-bg": "var(--state-color-info-hover-bg)",
-        "info-pressed": "var(--state-color-info-pressed)",
-        "info-active": "var(--state-color-info-active)",
-
-        success: "var(--success-success-400)",
-        "success-50": "var(--success-success-50)",
-        "success-100": "var(--success-success-100)",
-        "success-200": "var(--success-success-200)",
-        "success-300": "var(--success-success-300)",
-        "success-400": "var(--success-success-400)",
-        "success-500": "var(--success-success-500)",
-        "success-600": "var(--success-success-600)",
-        "success-700": "var(--success-success-700)",
-        "success-800": "var(--success-success-800)",
-        "success-900": "var(--success-success-900)",
-        "success-950": "var(--success-success-950)",
-        "success-foreground": "var(--success-foreground)",
-
-        "success-default": "var(--state-color-success-default)",
-        "success-hover": "var(--state-color-success-hover)",
-        "success-stroke": "var(--state-color-success-stroke)",
-        "success-hover-bg": "var(--state-color-success-hover-bg)",
-        "success-pressed": "var(--state-color-success-pressed)",
-        "success-active": "var(--state-color-success-active)",
-
-        warning: "var(--warning-warning-500)",
-        "warning-50": "var(--warning-warning-50)",
-        "warning-100": "var(--warning-warning-100)",
-        "warning-200": "var(--warning-warning-200)",
-        "warning-300": "var(--warning-warning-300)",
-        "warning-400": "var(--warning-warning-400)",
-        "warning-500": "var(--warning-warning-500)",
-        "warning-600": "var(--warning-warning-600)",
-        "warning-700": "var(--warning-warning-700)",
-        "warning-800": "var(--warning-warning-800)",
-        "warning-900": "var(--warning-warning-900)",
-        "warning-950": "var(--warning-warning-950)",
-        "warning-foreground": "var(--warning-foreground)",
-
-        "warning-default": "var(--state-color-warning-default)",
-        "warning-hover": "var(--state-color-warning-hover)",
-        "warning-stroke": "var(--state-color-warning-stroke)",
-        "warning-hover-bg": "var(--state-color-warning-hover-bg)",
-        "warning-pressed": "var(--state-color-warning-pressed)",
-        "warning-active": "var(--state-color-warning-active)",
-
-        error: "var(--error-error-500)",
-        "error-50": "var(--error-error-50)",
-        "error-100": "var(--error-error-100)",
-        "error-200": "var(--error-error-200)",
-        "error-300": "var(--error-error-300)",
-        "error-400": "var(--error-error-400)",
-        "error-500": "var(--error-error-500)",
-        "error-600": "var(--error-error-600)",
-        "error-700": "var(--error-error-700)",
-        "error-800": "var(--error-error-800)",
-        "error-900": "var(--error-error-900)",
-        "error-950": "var(--error-error-950)",
-        "error-foreground": "var(--error-foreground)",
-
-        "error-default": "var(--state-color-error-default)",
-        "error-hover": "var(--state-color-error-hover)",
-        "error-stroke": "var(--state-color-error-stroke)",
-        "error-hover-bg": "var(--state-color-error-hover-bg)",
-        "error-pressed": "var(--state-color-error-pressed)",
-        "error-active": "var(--state-color-error-active)",
-
-        "disable-solid": "var(--state-color-disable-solid)",
-        "disable-outline": "var(--state-color-disable-outline)",
-
-        "input-default-text": "var(--input-color-default-text)",
-        "input-default-stroke": "var(--input-color-default-stroke)",
-        "input-filled-text": "var(--input-color-filled-text)",
-        "input-active-stroke": "var(--input-color-active-stroke)",
-        "input-disable-text": "var(--input-color-disable-text)",
-        "input-disable-stroke": "var(--input-color-disable-stroke)",
-        "input-disable-bg": "var(--input-color-disable-bg)",
-        "input-label-bg": "var(--input-color-label-bg)",
-        "input-error": "var(--input-color-error)",
-
-        "main-transparency-primary-8": "var(--main-transparency-primary-8)",
-        "main-transparency-primary-12": "var(--main-transparency-primary-12)",
-        "main-transparency-primary-16": "var(--main-transparency-primary-16)",
-        "main-transparency-primary-24": "var(--main-transparency-primary-24)",
-        "main-transparency-primary-32": "var(--main-transparency-primary-32)",
-        "main-transparency-primary-48": "var(--main-transparency-primary-48)",
-        "main-transparency-secondary-8": "var(--main-transparency-secondary-8)",
-        "main-transparency-secondary-12":
-          "var(--main-transparency-secondary-12)",
-        "main-transparency-secondary-16":
-          "var(--main-transparency-secondary-16)",
-        "main-transparency-secondary-24":
-          "var(--main-transparency-secondary-24)",
-        "main-transparency-secondary-32":
-          "var(--main-transparency-secondary-32)",
-        "main-transparency-secondary-48":
-          "var(--main-transparency-secondary-48)",
-        "main-transparency-tertiary-8": "var(--main-transparency-tertiary-8)",
-        "main-transparency-tertiary-12": "var(--main-transparency-tertiary-12)",
-        "main-transparency-tertiary-16": "var(--main-transparency-tertiary-16)",
-        "main-transparency-tertiary-24": "var(--main-transparency-tertiary-24)",
-        "main-transparency-tertiary-32": "var(--main-transparency-tertiary-32)",
-        "main-transparency-tertiary-48": "var(--main-transparency-tertiary-48)",
-
-        "other-transparency-info-8": "var(--other-transparency-info-8)",
-        "other-transparency-info-12": "var(--other-transparency-info-12)",
-        "other-transparency-info-16": "var(--other-transparency-info-16)",
-        "other-transparency-info-24": "var(--other-transparency-info-24)",
-        "other-transparency-info-32": "var(--other-transparency-info-32)",
-        "other-transparency-info-48": "var(--other-transparency-info-48)",
-
-        "other-transparency-error-8": "var(--other-transparency-error-8)",
-        "other-transparency-success-12": "var(--other-transparency-success-12)",
-        "other-transparency-success-16": "var(--other-transparency-success-16)",
-        "other-transparency-success-24": "var(--other-transparency-success-24)",
-        "other-transparency-success-32": "var(--other-transparency-success-32)",
-        "other-transparency-success-48": "var(--other-transparency-success-48)",
-
-        "other-transparency-warning-8": "var(--other-transparency-warning-8)",
-        "other-transparency-warning-12": "var(--other-transparency-warning-12)",
-        "other-transparency-warning-16": "var(--other-transparency-warning-16)",
-        "other-transparency-warning-24": "var(--other-transparency-warning-24)",
-        "other-transparency-warning-32": "var(--other-transparency-warning-32)",
-        "other-transparency-warning-48": "var(--other-transparency-warning-48)",
-
-        "other-transparency-error-8": "var(--other-transparency-error-8)",
-        "other-transparency-error-12": "var(--other-transparency-error-12)",
-        "other-transparency-error-16": "var(--other-transparency-error-16)",
-        "other-transparency-error-24": "var(--other-transparency-error-24)",
-        "other-transparency-error-32": "var(--other-transparency-error-32)",
-        "other-transparency-error-48": "var(--other-transparency-error-48)",
-
-        "other-transparency-grey-8": "var(--other-transparency-grey-8)",
-        "other-transparency-grey-12": "var(--other-transparency-grey-12)",
-        "other-transparency-grey-16": "var(--other-transparency-grey-16)",
-        "other-transparency-grey-24": "var(--other-transparency-grey-24)",
-        "other-transparency-grey-32": "var(--other-transparency-grey-32)",
-        "other-transparency-grey-48": "var(--other-transparency-grey-48)",
-
-        "other-transparency-grey2-8": "var(--other-transparency-grey2-8)",
-        "other-transparency-grey2-12": "var(--other-transparency-grey2-12)",
-        "other-transparency-grey2-16": "var(--other-transparency-grey2-16)",
-        "other-transparency-grey2-24": "var(--other-transparency-grey2-24)",
-        "other-transparency-grey2-32": "var(--other-transparency-grey2-32)",
-        "other-transparency-grey2-48": "var(--other-transparency-grey2-48)",
-
-        "other-transparency-white-08": "var(--other-transparency-white-08)",
-        "other-transparency-white-12": "var(--other-transparency-white-12)",
-        "other-transparency-white-16": "var(--other-transparency-white-16)",
-        "other-transparency-white-24": "var(--other-transparency-white-24)",
-        "other-transparency-white-32": "var(--other-transparency-white-32)",
-        "other-transparency-white-48": "var(--other-transparency-white-48)",
-
-        "other-transparency-black-08": "var(--other-transparency-black-08)",
-        "other-transparency-black-12": "var(--other-transparency-black-12)",
-        "other-transparency-black-16": "var(--other-transparency-black-16)",
-        "other-transparency-black-24": "var(--other-transparency-black-24)",
-        "other-transparency-black-32": "var(--other-transparency-black-32)",
-        "other-transparency-black-48": "var(--other-transparency-black-48)",
-
-        "other-bg": "var(--other-bg)",
-        "other-bg2": "var(--other-bg2)",
-        "other-popup": "var(--other-popup)",
-        "other-popup-highlight": "var(--other-popup-hightlight)", // naming wrong
-        "other-popup-curtain": "var(--other-popup-curtain)",
-
-        "common-white": "var(--common-white)",
-        "common-black": "var(--common-black)",
-
-        // ---
-        surface: "var(--surface)",
-        "surface-foreground": "var(--surface-foreground)",
-      },
-    },
-  },
-};