@uxf/ui 11.34.1 → 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

@@ -1,7 +1,7 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import React, { AnchorHTMLAttributes } from "react";
-import { NextLink } from "./next-link";
+import { NextLink } from "../utils/next-link";
 export type ButtonVariant = keyof ButtonVariants;
 export type ButtonSize = keyof ButtonSizes;
 export type ButtonColor = keyof ButtonColors;
@@ -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/button-list/button-list.js

@@ -36,12 +36,13 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
-    const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const { as = "a", variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button-list__menu-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
-    return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_3.default.createElement(Component, { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),
         label && react_3.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
 });

package/chip/chip.d.ts

@@ -1,7 +1,9 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ChipColor, ChipSize, ChipVariant } from "@uxf/ui/chip/theme";
 import React, { AnchorHTMLAttributes, MouseEventHandler } from "react";
+import { NextLink } from "../utils/next-link";
 export interface ChipProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "type">, UseAnchorProps {
+    as?: NextLink | "a";
     color?: ChipColor;
     onClose?: MouseEventHandler;
     size?: ChipSize;

package/chip/chip.js

@@ -42,14 +42,15 @@ const CloseButton = (props) => {
 };
 exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
+    const { as = "a", children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
     const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, (0, is_not_nil_1.isNotNil)(onClose) && "has-button", className);
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: (0, cx_1.cx)(chipClassName),
         tabIndex: suppressFocus ? -1 : tabIndex,
         ...restProps,
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps },
         typeof children === "string" ? react_1.default.createElement("span", { className: "uxf-chip__text" }, children) : children,
         (0, is_not_nil_1.isNotNil)(onClose) && react_1.default.createElement(CloseButton, { onClose: onClose })));
 });

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");
         }
     }
 }