@rovula/ui 0.0.19 → 0.0.21

package/src/_theme/global.css

@@ -0,0 +1,39 @@
+@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

@@ -0,0 +1,239 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,319 @@
+/** @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)",
+      },
+    },
+  },
+};