@uxf/ui 11.35.0 → 11.36.0

package/_tokens/generated/figma-colors.js

@@ -0,0 +1,118 @@
+const figmaColors = {
+    base_border_border: "var(--uxf-color-base-border-border)",
+    base_border_input: "var(--uxf-color-base-border-input)",
+    base_border_inverted_border: "var(--uxf-color-base-border-inverted-border)",
+    base_border_inverted_input: "var(--uxf-color-base-border-inverted-input)",
+    base_icon_disabled: "var(--uxf-color-base-icon-disabled)",
+    base_icon_high_emphasis: "var(--uxf-color-base-icon-high-emphasis)",
+    base_icon_low_emphasis: "var(--uxf-color-base-icon-low-emphasis)",
+    base_icon_medium_emphasis: "var(--uxf-color-base-icon-medium-emphasis)",
+    base_icon_inverted_low_emphasis: "var(--uxf-color-base-icon-inverted-low-emphasis)",
+    base_icon_inverted_disabled: "var(--uxf-color-base-icon-inverted-disabled)",
+    base_icon_inverted_high_emphasis: "var(--uxf-color-base-icon-inverted-high-emphasis)",
+    base_shadow_shadow_md: "var(--uxf-color-base-shadow-shadow-md)",
+    base_shadow_shadow_sm: "var(--uxf-color-base-shadow-shadow-sm)",
+    base_surface_background: "var(--uxf-color-base-surface-background)",
+    base_surface_disabled: "var(--uxf-color-base-surface-disabled)",
+    base_surface_input: "var(--uxf-color-base-surface-input)",
+    base_surface_input_disabled: "var(--uxf-color-base-surface-input-disabled)",
+    base_surface_input_hover: "var(--uxf-color-base-surface-input-hover)",
+    base_surface_main: "var(--uxf-color-base-surface-main)",
+    base_surface_main_hover: "var(--uxf-color-base-surface-main-hover)",
+    base_surface_popup: "var(--uxf-color-base-surface-popup)",
+    base_surface_tooltip: "var(--uxf-color-base-surface-tooltip)",
+    base_surface_inverted_default: "var(--uxf-color-base-surface-inverted-default)",
+    base_surface_inverted_default_hover: "var(--uxf-color-base-surface-inverted-default-hover)",
+    base_surface_inverted_disabled: "var(--uxf-color-base-surface-inverted-disabled)",
+    base_surface_inverted_main: "var(--uxf-color-base-surface-inverted-main)",
+    base_surface_inverted_main_hover: "var(--uxf-color-base-surface-inverted-main-hover)",
+    base_text_disabled: "var(--uxf-color-base-text-disabled)",
+    base_text_high_emphasis: "var(--uxf-color-base-text-high-emphasis)",
+    base_text_link: "var(--uxf-color-base-text-link)",
+    base_text_link_pressed: "var(--uxf-color-base-text-link-pressed)",
+    base_text_low_emphasis: "var(--uxf-color-base-text-low-emphasis)",
+    base_text_inverted_disabled: "var(--uxf-color-base-text-inverted-disabled)",
+    base_text_inverted_high_emphasis: "var(--uxf-color-base-text-inverted-high-emphasis)",
+    base_text_inverted_link: "var(--uxf-color-base-text-inverted-link)",
+    base_text_inverted_low_emphasis: "var(--uxf-color-base-text-inverted-low-emphasis)",
+    brand_border: "var(--uxf-color-brand-border)",
+    brand_icon: "var(--uxf-color-brand-icon)",
+    brand_icon_on_muted: "var(--uxf-color-brand-icon-on-muted)",
+    brand_text: "var(--uxf-color-brand-text)",
+    brand_text_on_muted: "var(--uxf-color-brand-text-on-muted)",
+    brand_surface_bolder: "var(--uxf-color-brand-surface-bolder)",
+    brand_surface_bolder_hover: "var(--uxf-color-brand-surface-bolder-hover)",
+    brand_surface_default: "var(--uxf-color-brand-surface-default)",
+    brand_surface_default_hover: "var(--uxf-color-brand-surface-default-hover)",
+    brand_surface_muted: "var(--uxf-color-brand-surface-muted)",
+    brand_surface_muted_hover: "var(--uxf-color-brand-surface-muted-hover)",
+    brand_surface_subtle: "var(--uxf-color-brand-surface-subtle)",
+    brand_surface_subtle_hover: "var(--uxf-color-brand-surface-subtle-hover)",
+    info_border: "var(--uxf-color-info-border)",
+    info_icon: "var(--uxf-color-info-icon)",
+    info_icon_on_muted: "var(--uxf-color-info-icon-on-muted)",
+    info_text: "var(--uxf-color-info-text)",
+    info_text_on_muted: "var(--uxf-color-info-text-on-muted)",
+    info_surface_default: "var(--uxf-color-info-surface-default)",
+    info_surface_default_hover: "var(--uxf-color-info-surface-default-hover)",
+    info_surface_muted: "var(--uxf-color-info-surface-muted)",
+    info_surface_muted_hover: "var(--uxf-color-info-surface-muted-hover)",
+    info_surface_subtle: "var(--uxf-color-info-surface-subtle)",
+    info_surface_subtle_hover: "var(--uxf-color-info-surface-subtle-hover)",
+    inverted_border: "var(--uxf-color-inverted-border)",
+    inverted_icon: "var(--uxf-color-inverted-icon)",
+    inverted_icon_on_muted: "var(--uxf-color-inverted-icon-on-muted)",
+    inverted_text_default: "var(--uxf-color-inverted-text-default)",
+    inverted_text_disabled: "var(--uxf-color-inverted-text-disabled)",
+    inverted_text_muted: "var(--uxf-color-inverted-text-muted)",
+    inverted_text_on_muted: "var(--uxf-color-inverted-text-on-muted)",
+    negative_border: "var(--uxf-color-negative-border)",
+    negative_icon: "var(--uxf-color-negative-icon)",
+    negative_icon_on_muted: "var(--uxf-color-negative-icon-on-muted)",
+    negative_text: "var(--uxf-color-negative-text)",
+    negative_text_on_muted: "var(--uxf-color-negative-text-on-muted)",
+    negative_surface_default: "var(--uxf-color-negative-surface-default)",
+    negative_surface_default_hover: "var(--uxf-color-negative-surface-default-hover)",
+    negative_surface_muted: "var(--uxf-color-negative-surface-muted)",
+    negative_surface_muted_hover: "var(--uxf-color-negative-surface-muted-hover)",
+    negative_surface_subtle: "var(--uxf-color-negative-surface-subtle)",
+    negative_surface_subtle_hover: "var(--uxf-color-negative-surface-subtle-hover)",
+    neutral_border: "var(--uxf-color-neutral-border)",
+    neutral_icon: "var(--uxf-color-neutral-icon)",
+    neutral_icon_on_muted: "var(--uxf-color-neutral-icon-on-muted)",
+    neutral_text: "var(--uxf-color-neutral-text)",
+    neutral_text_on_muted: "var(--uxf-color-neutral-text-on-muted)",
+    neutral_surface_bolder: "var(--uxf-color-neutral-surface-bolder)",
+    neutral_surface_bolder_hover: "var(--uxf-color-neutral-surface-bolder-hover)",
+    neutral_surface_default: "var(--uxf-color-neutral-surface-default)",
+    neutral_surface_default_hover: "var(--uxf-color-neutral-surface-default-hover)",
+    neutral_surface_muted: "var(--uxf-color-neutral-surface-muted)",
+    neutral_surface_muted_hover: "var(--uxf-color-neutral-surface-muted-hover)",
+    neutral_surface_subtle: "var(--uxf-color-neutral-surface-subtle)",
+    neutral_surface_subtle_hover: "var(--uxf-color-neutral-surface-subtle-hover)",
+    positive_border: "var(--uxf-color-positive-border)",
+    positive_icon: "var(--uxf-color-positive-icon)",
+    positive_icon_on_muted: "var(--uxf-color-positive-icon-on-muted)",
+    positive_text: "var(--uxf-color-positive-text)",
+    positive_text_on_muted: "var(--uxf-color-positive-text-on-muted)",
+    positive_surface_default: "var(--uxf-color-positive-surface-default)",
+    positive_surface_default_hover: "var(--uxf-color-positive-surface-default-hover)",
+    positive_surface_muted: "var(--uxf-color-positive-surface-muted)",
+    positive_surface_muted_hover: "var(--uxf-color-positive-surface-muted-hover)",
+    positive_surface_subtle: "var(--uxf-color-positive-surface-subtle)",
+    positive_surface_subtle_hover: "var(--uxf-color-positive-surface-subtle-hover)",
+    warning_border: "var(--uxf-color-warning-border)",
+    warning_icon: "var(--uxf-color-warning-icon)",
+    warning_icon_on_muted: "var(--uxf-color-warning-icon-on-muted)",
+    warning_text: "var(--uxf-color-warning-text)",
+    warning_text_on_muted: "var(--uxf-color-warning-text-on-muted)",
+    warning_surface_default: "var(--uxf-color-warning-surface-default)",
+    warning_surface_default_hover: "var(--uxf-color-warning-surface-default-hover)",
+    warning_surface_muted: "var(--uxf-color-warning-surface-muted)",
+    warning_surface_muted_hover: "var(--uxf-color-warning-surface-muted-hover)",
+    warning_surface_subtle: "var(--uxf-color-warning-surface-subtle)",
+    warning_surface_subtle_hover: "var(--uxf-color-warning-surface-subtle-hover)",
+};
+
+
+module.exports = { figmaColors }

package/bin/generate-css-tokens.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+// helper functions
+
+function throwError(message) {
+    throw new Error(message);
+}
+
+function getOption(name) {
+    const args = process.argv.slice(2);
+    const optionArg = args.find((arg) => arg.startsWith(`--${name}=`));
+
+    if (optionArg) {
+        return optionArg.split("=")[1];
+    }
+
+    return undefined;
+}
+
+function indentLines(cssContent, indentCount) {
+    return cssContent
+        .split("\n")
+        .map((line) => line.trim())
+        .map((line) => " ".repeat(indentCount) + line)
+        .join("\n")
+        .trim();
+}
+
+// script
+
+try {
+    const sourceDirectory =
+        getOption("source") ?? throwError('Argument --source="/path/to/source-directory" is required.');
+    const outputDirectory =
+        getOption("output") ?? throwError('Argument --output="/path/to/output-directory/" is required.');
+
+    const colorsLightFile = path.join(sourceDirectory, "colors-light.css");
+    const colorsDarkFile = path.join(sourceDirectory, "colors-dark.css");
+    const primitivesFile = path.join(sourceDirectory, "colors-primitives.css");
+
+    // Check if the necessary files exist
+    if (!fs.existsSync(colorsLightFile) || !fs.existsSync(colorsDarkFile) || !fs.existsSync(primitivesFile)) {
+        console.error("Error: One or more required CSS files are missing in the source directory.");
+        console.error("Ensure the following files are present in the source directory:");
+        console.error(" - colors-light.css");
+        console.error(" - colors-dark.css");
+        console.error(" - colors-primitives.css");
+        process.exit(1);
+    }
+
+    if (!fs.existsSync(outputDirectory)) {
+        fs.mkdirSync(outputDirectory, { recursive: true });
+    }
+
+    const removeComments = (cssContent) => {
+        return cssContent.replace(/\/\*[\s\S]*?\*\//g, "").trim();
+    };
+
+    const primitives = removeComments(fs.readFileSync(primitivesFile, "utf-8"));
+    const colorsLight = removeComments(fs.readFileSync(colorsLightFile, "utf-8"));
+    const colorsDark = removeComments(fs.readFileSync(colorsDarkFile, "utf-8"));
+
+    const UXF_PREFIX = "--uxf-color-";
+    const ROOT_REGEXP = /:root\s*{\s*|}\s*$/g;
+    const PREFIX_REGEXP = /^\s*--/gm;
+
+    const cleanedPrimitives = primitives.replace(ROOT_REGEXP, "");
+    const cleanedColorsLight = colorsLight.replace(ROOT_REGEXP, "").replace(PREFIX_REGEXP, "" + UXF_PREFIX);
+    const cleanedColorsDark = colorsDark.replace(ROOT_REGEXP, "").replace(PREFIX_REGEXP, "" + UXF_PREFIX);
+
+    const mergedTokens = `/* this file is generated automatically, do not change anything manually in the contents of this file */
+:root {
+    ${indentLines(cleanedPrimitives, 4)}
+
+    ${indentLines(cleanedColorsLight, 4)}
+
+    .dark {
+        ${indentLines(cleanedColorsDark, 8)}
+    }
+}
+`;
+
+    fs.writeFileSync(path.join(outputDirectory, "figma-colors.css"), mergedTokens, "utf-8");
+
+    const extractVariables = (cssContent) => {
+        const variableRegex = /(--[a-zA-Z0-9-]+):/g;
+        return [...cssContent.matchAll(variableRegex)].map((match) => match[1]);
+    };
+
+    const lightVariables = extractVariables(colorsLight);
+
+    const tailwindConfig = lightVariables.reduce((config, variable) => {
+        const variableWithPrefix = variable.replace(/--/g, UXF_PREFIX);
+        const tailwindKey = variable.replace("--", "").replace(/-/g, "_");
+        config[tailwindKey] = `var(${variableWithPrefix})`;
+        return config;
+    }, {});
+
+    const tailwindConfigString = `const figmaColors = {
+${Object.entries(tailwindConfig)
+    .map(([key, value]) => `    ${key}: "${value}",`)
+    .join("\n")}
+};
+
+
+module.exports = { figmaColors }
+`;
+
+    fs.writeFileSync(path.join(outputDirectory, "figma-colors.js"), tailwindConfigString, "utf-8");
+
+    console.log(`CSS tokens and Tailwind config colors generated successfully in ${outputDirectory} folder!`);
+} catch (e) {
+    console.error(e.message);
+}

package/button/README.md

@@ -5,7 +5,7 @@
 ## Css dependencies
 
 ```css
-@import url("@uxf/ui/css/colors.css");
+@import url("@uxf/ui/css/figma-colors.css");
 ```
 
 ### Props configuration

package/button/button.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement
     as?: NextLink | "a";
     color?: ButtonColor;
     isFullWidth?: boolean;
+    /** @deprecated use IconButton component instead */
     isIconButton?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;

package/button/button.stories.js

@@ -47,7 +47,7 @@ function Basic() {
                 "variant=",
                 variant))),
             react_1.default.createElement("div", null),
-            config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { className: "text-center text-xs text-gray-400", key: variant },
+            config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { className: "text-center text-xs text-gray-400", key: `${variant}${size}` },
                 "size=",
                 size))))),
         config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },

package/components.d.ts

@@ -27,6 +27,7 @@ import * as fileInputStories from "./file-input/file-input.stories";
 import * as flashMessagesStories from "./flash-messages/flash-messages.stories";
 import * as formComponentStories from "./form-component/form-component.stories";
 import * as iconStories from "./icon/icon.stories";
+import * as iconButtonStories from "./icon-button/icon-button.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
 import * as inputStories from "./input/input.stories";
 import * as labelStories from "./label/label.stories";
@@ -172,6 +173,10 @@ export declare const components: {
         readonly title: "Icon";
         readonly stories: typeof iconStories;
     };
+    readonly "icon-button": {
+        readonly title: "IconButton";
+        readonly stories: typeof iconButtonStories;
+    };
     readonly "image-gallery": {
         readonly title: "ImageGallery";
         readonly stories: typeof imageGalleryStories;

package/components.js

@@ -54,6 +54,7 @@ const fileInputStories = __importStar(require("./file-input/file-input.stories")
 const flashMessagesStories = __importStar(require("./flash-messages/flash-messages.stories"));
 const formComponentStories = __importStar(require("./form-component/form-component.stories"));
 const iconStories = __importStar(require("./icon/icon.stories"));
+const iconButtonStories = __importStar(require("./icon-button/icon-button.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
 const labelStories = __importStar(require("./label/label.stories"));
@@ -199,6 +200,10 @@ exports.components = {
         title: "Icon",
         stories: iconStories
     },
+    "icon-button": {
+        title: "IconButton",
+        stories: iconButtonStories
+    },
     "image-gallery": {
         title: "ImageGallery",
         stories: imageGalleryStories

package/css/badge.css

@@ -1,5 +1,5 @@
 .uxf-badge {
-    @apply bg-primary inline-flex items-center justify-center font-bold text-white;
+    @apply bg-primary inline-flex shrink-0 items-center justify-center font-bold text-white;
 
     &--size-small {
         @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;

package/css/button.css

@@ -57,6 +57,7 @@
         width: 100%;
     }
 
+    /* Deprecated class, replaced with .uxf-icon-button class. Should be removed, when it will be possible */
     &--icon-button {
         flex-shrink: 0;
         padding: 0;
@@ -87,6 +88,7 @@
             width: var(--uxf-button-loading-size);
         }
 
+        /* Deprecated class, replaced with .uxf-icon-button class. Should be removed, when it will be possible */
         &.uxf-button--icon-button::after {
             margin-left: 0;
         }
@@ -126,137 +128,137 @@
     /* VARIANTS */
 
     &--variant-default {
-        --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
+        --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
 
         &.uxf-button--color-default {
-            --uxf-button-background-color: var(--uxf-color-primary-surface-default);
-            --uxf-button-background-color-hover: var(--uxf-color-primary-surface-default-hover);
+            --uxf-button-background-color: theme("colors.primary_surface_default");
+            --uxf-button-background-color-hover: theme("colors.primary_surface_default_hover");
         }
 
         &.uxf-button--color-positive {
-            --uxf-button-background-color: var(--uxf-color-positive-surface-default);
-            --uxf-button-background-color-hover: var(--uxf-color-positive-surface-default-hover);
+            --uxf-button-background-color: theme("colors.positive_surface_default");
+            --uxf-button-background-color-hover: theme("colors.positive_surface_default_hover");
         }
 
         &.uxf-button--color-negative {
-            --uxf-button-background-color: var(--uxf-color-negative-surface-default);
-            --uxf-button-background-color-hover: var(--uxf-color-negative-surface-default-hover);
+            --uxf-button-background-color: theme("colors.negative_surface_default");
+            --uxf-button-background-color-hover: theme("colors.negative_surface_default_hover");
         }
 
         &.uxf-button--color-warning {
-            --uxf-button-background-color: var(--uxf-color-warning-surface-default);
-            --uxf-button-background-color-hover: var(--uxf-color-warning-surface-default-hover);
+            --uxf-button-background-color: theme("colors.warning_surface_default");
+            --uxf-button-background-color-hover: theme("colors.warning_surface_default_hover");
         }
 
         &.uxf-button--color-info {
-            --uxf-button-background-color: var(--uxf-color-info-surface-default);
-            --uxf-button-background-color-hover: var(--uxf-color-info-surface-default-hover);
+            --uxf-button-background-color: theme("colors.info_surface_default");
+            --uxf-button-background-color-hover: theme("colors.info_surface_default_hover");
         }
 
         &.uxf-button--color-inverted {
-            --uxf-button-background-color: var(--uxf-color-base-surface-main);
-            --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
-            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
+            --uxf-button-background-color: theme("colors.base_surface_main");
+            --uxf-button-background-color-hover: theme("colors.base_surface_main_hover");
+            --uxf-button-text-color: theme("colors.base_text_high_emphasis");
 
             &.is-disabled {
-                --uxf-button-background-color: var(--uxf-color-base-surface-input-disabled);
-                --uxf-button-text-color: var(--uxf-color-base-text-disabled);
+                --uxf-button-background-color: theme("colors.base_surface_input_disabled");
+                --uxf-button-text-color: theme("colors.base_text_disabled");
             }
         }
 
         &.uxf-button--is-disabled {
             --uxf-button-text-color: theme("colors.white");
-            --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
+            --uxf-button-background-color: theme("colors.base_surface_disabled");
         }
     }
 
     &--variant-secondary {
-        --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
-        --uxf-button-background-color: var(--uxf-color-base-surface-main);
+        --uxf-button-background-color-hover: theme("colors.base_surface_main_hover");
+        --uxf-button-background-color: theme("colors.base_surface_main");
 
         border-style: solid;
         border-width: 1px;
 
         &.uxf-button--color-default {
-            --uxf-button-border-color: var(--uxf-color-base-border-input);
-            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
+            --uxf-button-border-color: theme("colors.base_border_input");
+            --uxf-button-text-color: theme("colors.base_text_high_emphasis");
         }
 
         &.uxf-button--color-positive {
-            --uxf-button-border-color: var(--uxf-color-positive-border);
-            --uxf-button-text-color: var(--uxf-color-positive-text);
+            --uxf-button-border-color: theme("colors.positive_border");
+            --uxf-button-text-color: theme("colors.positive_text");
         }
 
         &.uxf-button--color-negative {
-            --uxf-button-border-color: var(--uxf-color-negative-border);
-            --uxf-button-text-color: var(--uxf-color-negative-text);
+            --uxf-button-border-color: theme("colors.negative_border");
+            --uxf-button-text-color: theme("colors.negative_text");
         }
 
         &.uxf-button--color-warning {
-            --uxf-button-border-color: var(--uxf-color-warning-border);
-            --uxf-button-text-color: var(--uxf-color-warning-text);
+            --uxf-button-border-color: theme("colors.warning_border");
+            --uxf-button-text-color: theme("colors.warning_text");
         }
 
         &.uxf-button--color-info {
-            --uxf-button-border-color: var(--uxf-color-info-border);
-            --uxf-button-text-color: var(--uxf-color-info-text);
+            --uxf-button-border-color: theme("colors.info_border");
+            --uxf-button-text-color: theme("colors.info_text");
         }
 
         &.uxf-button--color-inverted {
-            --uxf-button-border-color: var(--uxf-color-base-border-inverted);
-            --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
-            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
+            --uxf-button-border-color: theme("colors.base_border_inverted_border");
+            --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
+            --uxf-button-background-color: theme("colors.base_surface_inverted_main");
+            --uxf-button-background-color-hover: theme("colors.base_surface_inverted_main_hover");
 
             &.uxf-button--is-disabled {
-                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
-                --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
+                --uxf-button-text-color: theme("colors.base_text_inverted_disabled");
+                --uxf-button-background-color: theme("colors.base_surface_inverted_main");
             }
         }
 
         &.uxf-button--is-disabled {
-            --uxf-button-border-color: var(--uxf-color-base-border-input);
-            --uxf-button-text-color: var(--uxf-color-base-text-disabled);
-            --uxf-button-background-color: var(--uxf-color-base-surface-input-disabled);
+            --uxf-button-border-color: theme("colors.base_border_input");
+            --uxf-button-text-color: theme("colors.base_text_disabled");
+            --uxf-button-background-color: theme("colors.base_surface_input_disabled");
         }
     }
 
     &--variant-text {
-        --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
+        --uxf-button-background-color-hover: theme("colors.base_surface_main_hover");
 
         box-shadow: none;
 
         &.uxf-button--color-default {
-            --uxf-button-text-color: var(--uxf-color-base-text-high-emphasis);
+            --uxf-button-text-color: theme("colors.base_text_high_emphasis");
         }
 
         &.uxf-button--color-positive {
-            --uxf-button-text-color: var(--uxf-color-positive-text);
+            --uxf-button-text-color: theme("colors.positive_text");
         }
 
         &.uxf-button--color-negative {
-            --uxf-button-text-color: var(--uxf-color-negative-text);
+            --uxf-button-text-color: theme("colors.negative_text");
         }
 
         &.uxf-button--color-warning {
-            --uxf-button-text-color: var(--uxf-color-warning-text);
+            --uxf-button-text-color: theme("colors.warning_text");
         }
 
         &.uxf-button--color-info {
-            --uxf-button-text-color: var(--uxf-color-info-text);
+            --uxf-button-text-color: theme("colors.info_text");
         }
 
         &.uxf-button--color-inverted {
-            --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
+            --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
+            --uxf-button-background-color-hover: theme("colors.base_surface_inverted_main_hover");
 
             &.uxf-button--is-disabled {
-                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
+                --uxf-button-text-color: theme("colors.base_text_inverted_disabled");
             }
         }
 
         &.uxf-button--is-disabled {
-            --uxf-button-text-color: var(--uxf-color-base-text-disabled);
+            --uxf-button-text-color: theme("colors.base_text_disabled");
         }
     }
 }

package/css/colors-dark.css

@@ -0,0 +1,118 @@
+/* Color tokens */
+:root {
+    /* Dark */
+    /* color */
+    --base-border-border: hsl(0 0 100% / 0.12);
+    --base-border-input: hsl(0 0 100% / 0.2);
+    --base-border-inverted-border: hsl(218 28% 17% / 0.12);
+    --base-border-inverted-input: hsl(218 28% 17% / 0.2);
+    --base-icon-disabled: hsl(0 0 100% / 0.5);
+    --base-icon-high-emphasis: var(--base-white);
+    --base-icon-low-emphasis: hsl(0 0 100% / 0.75);
+    --base-icon-medium-emphasis: hsl(0 0 100% / 0.75);
+    --base-icon-inverted-low-emphasis: var(--grayneutral-900);
+    --base-icon-inverted-disabled: var(--grayneutral-900);
+    --base-icon-inverted-high-emphasis: var(--grayneutral-900);
+    --base-shadow-shadow-md: hsl(0 0 100% / 0);
+    --base-shadow-shadow-sm: hsl(0 0 100% / 0);
+    --base-surface-background: var(--grayneutral-800);
+    --base-surface-disabled: hsl(0 0 100% / 0.2);
+    --base-surface-input: var(--grayneutral-900);
+    --base-surface-input-disabled: var(--grayneutral-600);
+    --base-surface-input-hover: var(--grayneutral-800);
+    --base-surface-main: var(--grayneutral-900);
+    --base-surface-main-hover: var(--grayneutral-800);
+    --base-surface-popup: var(--grayneutral-800);
+    --base-surface-tooltip: var(--grayneutral-50);
+    --base-surface-inverted-default: hsl(218 28% 17%);
+    --base-surface-inverted-default-hover: hsl(218 28% 17% / 0.9);
+    --base-surface-inverted-disabled: var(--grayneutral-500);
+    --base-surface-inverted-main: hsl(218 28% 17% / 0.08);
+    --base-surface-inverted-main-hover: hsl(218 28% 17% / 0.16);
+    --base-text-disabled: hsl(0 0 100% / 0.6);
+    --base-text-high-emphasis: hsl(0 0 100%);
+    --base-text-link: var(--base-white);
+    --base-text-link-pressed: var(--base-white);
+    --base-text-low-emphasis: hsl(0 0 100% / 0.8);
+    --base-text-inverted-disabled: hsl(218 28% 17% / 0.7);
+    --base-text-inverted-high-emphasis: var(--grayneutral-900);
+    --base-text-inverted-link: var(--grayneutral-900);
+    --base-text-inverted-low-emphasis: hsl(218 28% 17% / 0.8);
+    --brand-border: var(--bluedark-600);
+    --brand-icon: var(--bluedark-400);
+    --brand-icon-on-muted: var(--bluedark-300);
+    --brand-text: var(--base-white);
+    --brand-text-on-muted: var(--bluedark-200);
+    --brand-surface-bolder: var(--bluedark-200);
+    --brand-surface-bolder-hover: var(--bluedark-100);
+    --brand-surface-default: var(--bluedark-400);
+    --brand-surface-default-hover: var(--bluedark-300);
+    --brand-surface-muted: var(--bluedark-800);
+    --brand-surface-muted-hover: var(--bluedark-700);
+    --brand-surface-subtle: var(--bluedark-900);
+    --brand-surface-subtle-hover: var(--bluedark-800);
+    --info-border: var(--grayblue-600);
+    --info-icon: var(--grayblue-300);
+    --info-icon-on-muted: var(--grayblue-300);
+    --info-text: var(--grayblue-300);
+    --info-text-on-muted: var(--grayblue-200);
+    --info-surface-default: var(--grayblue-300);
+    --info-surface-default-hover: var(--grayblue-200);
+    --info-surface-muted: var(--grayblue-800);
+    --info-surface-muted-hover: var(--grayblue-700);
+    --info-surface-subtle: var(--grayblue-900);
+    --info-surface-subtle-hover: var(--grayblue-800);
+    --inverted-border: hsl(0 0 100%);
+    --inverted-icon: hsl(0 0 100%);
+    --inverted-icon-on-muted: hsl(0 0 100%);
+    --inverted-text-default: hsl(0 0 100%);
+    --inverted-text-disabled: hsl(0 0 100%);
+    --inverted-text-muted: hsl(0 0 100%);
+    --inverted-text-on-muted: hsl(0 0 100%);
+    --negative-border: var(--error-600);
+    --negative-icon: var(--error-400);
+    --negative-icon-on-muted: var(--error-200);
+    --negative-text: var(--error-300);
+    --negative-text-on-muted: var(--error-200);
+    --negative-surface-default: var(--error-400);
+    --negative-surface-default-hover: var(--error-300);
+    --negative-surface-muted: var(--error-800);
+    --negative-surface-muted-hover: var(--error-700);
+    --negative-surface-subtle: var(--error-900);
+    --negative-surface-subtle-hover: var(--error-800);
+    --neutral-border: var(--grayneutral-600);
+    --neutral-icon: var(--grayneutral-400);
+    --neutral-icon-on-muted: var(--grayneutral-200);
+    --neutral-text: var(--grayneutral-300);
+    --neutral-text-on-muted: var(--grayneutral-200);
+    --neutral-surface-bolder: hsl(0 0 100%);
+    --neutral-surface-bolder-hover: hsl(0 0 100%);
+    --neutral-surface-default: var(--grayneutral-400);
+    --neutral-surface-default-hover: var(--grayneutral-300);
+    --neutral-surface-muted: var(--grayneutral-700);
+    --neutral-surface-muted-hover: var(--grayneutral-600);
+    --neutral-surface-subtle: var(--grayneutral-800);
+    --neutral-surface-subtle-hover: var(--grayneutral-700);
+    --positive-border: var(--success-600);
+    --positive-icon: var(--success-400);
+    --positive-icon-on-muted: var(--success-300);
+    --positive-text: var(--success-300);
+    --positive-text-on-muted: var(--success-200);
+    --positive-surface-default: var(--green-400);
+    --positive-surface-default-hover: var(--green-300);
+    --positive-surface-muted: var(--green-800);
+    --positive-surface-muted-hover: var(--green-700);
+    --positive-surface-subtle: var(--green-900);
+    --positive-surface-subtle-hover: var(--green-800);
+    --warning-border: var(--warning-600);
+    --warning-icon: var(--warning-400);
+    --warning-icon-on-muted: var(--warning-300);
+    --warning-text: var(--warning-300);
+    --warning-text-on-muted: var(--warning-200);
+    --warning-surface-default: var(--warning-400);
+    --warning-surface-default-hover: var(--warning-300);
+    --warning-surface-muted: var(--warning-800);
+    --warning-surface-muted-hover: var(--warning-700);
+    --warning-surface-subtle: var(--warning-900);
+    --warning-surface-subtle-hover: var(--warning-800);
+}