@uxf/ui 11.34.1 → 11.36.0

package/list-item/list-item.js

@@ -30,12 +30,13 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.ListItem = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, endElement, endIcon, ...restProps } = props;
+    const { as = "a", className, children, endElement, endIcon, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-list-item", className),
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps },
         react_1.default.createElement("span", { className: "uxf-list-item__inner" }, children),
         endElement && react_1.default.createElement("span", { className: "uxf-list-item__end-element-wrapper" }, endElement),
         endIcon && (react_1.default.createElement("span", { className: "uxf-list-item__end-icon-wrapper" },

package/modal-header/README.md

@@ -17,6 +17,7 @@ function Example() {
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/css/figma-colors.css");
 @import url("@uxf/ui/css/button.css");
 @import url("@uxf/ui/css/modal-header.css");
 @import url("@uxf/ui/css/icon.css");

package/package.json

@@ -1,39 +1,45 @@
 {
-  "name": "@uxf/ui",
-  "version": "11.34.1",
-  "description": "",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepareCss": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/ && cp ./colors.css ./css/",
-    "build": "npm run prepareCss && tsc -P tsconfig.json",
-    "tw-tokens:check": "ts-node ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
-    "tw-tokens:gen": "ts-node ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
-    "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
-  },
-  "author": "UX Fans s.r.o",
-  "license": "MIT",
-  "dependencies": {
-    "@floating-ui/react": "0.26.23",
-    "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.33.0",
-    "@uxf/datepicker": "11.32.0",
-    "@uxf/styles": "11.32.0",
-    "color2k": "2.0.3",
-    "dayjs": "1.11.13",
-    "jump.js": "1.0.2",
-    "react-dropzone": "14.2.3",
-    "react-swipeable": "7.0.1"
-  },
-  "peerDependencies": {
-    "react": ">= 18.2.0",
-    "react-dom": ">= 18.2.0"
-  },
-  "devDependencies": {
-    "@types/jump.js": "1.0.6",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0"
-  }
-}
+    "name": "@uxf/ui",
+    "version": "11.36.0",
+    "description": "",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "gen": "npm run css-tokens:gen",
+        "build": "npm run css:prepare && npm run tokens:prepare && tsc -P tsconfig.json",
+        "css-tokens:gen": "bin/generate-css-tokens.js --source=./_tokens --output=./_tokens/generated/",
+        "css:prepare": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/ && cp ./_tokens/generated/figma-colors.css ./css/",
+        "tokens:prepare": "rm -rf ./tokens && mkdir tokens && cp ./_tokens/generated/figma-colors.js ./tokens/",
+        "tw-tokens:check": "ts-node ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "tw-tokens:gen": "ts-node ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
+    },
+    "author": "UX Fans s.r.o",
+    "bin": {
+        "uxf-css-color-tokens-generator": "bin/generate-css-tokens.js"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "@floating-ui/react": "0.26.23",
+        "@headlessui/react": "1.7.14",
+        "@uxf/core": "11.35.0",
+        "@uxf/core-react": "11.36.0",
+        "@uxf/datepicker": "11.32.0",
+        "@uxf/styles": "11.35.0",
+        "color2k": "2.0.3",
+        "dayjs": "1.11.13",
+        "jump.js": "1.0.2",
+        "react-dropzone": "14.2.3",
+        "react-swipeable": "7.0.1"
+    },
+    "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-dom": ">= 18.2.0"
+    },
+    "devDependencies": {
+        "@types/jump.js": "1.0.6",
+        "@types/react": "18.3.5",
+        "@types/react-dom": "18.3.0"
+    }
+}

package/readmes.d.ts

@@ -29,6 +29,7 @@ export declare const readmes: {
     readonly "flash-messages": typeof alertBubbleReadme;
     readonly "form-component": typeof alertBubbleReadme;
     readonly icon: typeof alertBubbleReadme;
+    readonly "icon-button": typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
     readonly label: typeof alertBubbleReadme;

package/readmes.js

@@ -34,34 +34,35 @@ const README_md_26 = __importDefault(require("./file-input/README.md"));
 const README_md_27 = __importDefault(require("./flash-messages/README.md"));
 const README_md_28 = __importDefault(require("./form-component/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
-const README_md_30 = __importDefault(require("./image-gallery/README.md"));
-const README_md_31 = __importDefault(require("./input/README.md"));
-const README_md_32 = __importDefault(require("./label/README.md"));
-const README_md_33 = __importDefault(require("./layout/README.md"));
-const README_md_34 = __importDefault(require("./list-item/README.md"));
-const README_md_35 = __importDefault(require("./loader/README.md"));
-const README_md_36 = __importDefault(require("./lozenge/README.md"));
-const README_md_37 = __importDefault(require("./message/README.md"));
-const README_md_38 = __importDefault(require("./modal/README.md"));
-const README_md_39 = __importDefault(require("./modal-dialog/README.md"));
-const README_md_40 = __importDefault(require("./modal-header/README.md"));
-const README_md_41 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_42 = __importDefault(require("./multi-select/README.md"));
-const README_md_43 = __importDefault(require("./pagination/README.md"));
-const README_md_44 = __importDefault(require("./paper/README.md"));
-const README_md_45 = __importDefault(require("./radio/README.md"));
-const README_md_46 = __importDefault(require("./radio-group/README.md"));
-const README_md_47 = __importDefault(require("./raster-image/README.md"));
-const README_md_48 = __importDefault(require("./select/README.md"));
-const README_md_49 = __importDefault(require("./tabs/README.md"));
-const README_md_50 = __importDefault(require("./text-input/README.md"));
-const README_md_51 = __importDefault(require("./text-link/README.md"));
-const README_md_52 = __importDefault(require("./textarea/README.md"));
-const README_md_53 = __importDefault(require("./time-picker/README.md"));
-const README_md_54 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_55 = __importDefault(require("./toggle/README.md"));
-const README_md_56 = __importDefault(require("./tooltip/README.md"));
-const README_md_57 = __importDefault(require("./typography/README.md"));
+const README_md_30 = __importDefault(require("./icon-button/README.md"));
+const README_md_31 = __importDefault(require("./image-gallery/README.md"));
+const README_md_32 = __importDefault(require("./input/README.md"));
+const README_md_33 = __importDefault(require("./label/README.md"));
+const README_md_34 = __importDefault(require("./layout/README.md"));
+const README_md_35 = __importDefault(require("./list-item/README.md"));
+const README_md_36 = __importDefault(require("./loader/README.md"));
+const README_md_37 = __importDefault(require("./lozenge/README.md"));
+const README_md_38 = __importDefault(require("./message/README.md"));
+const README_md_39 = __importDefault(require("./modal/README.md"));
+const README_md_40 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_41 = __importDefault(require("./modal-header/README.md"));
+const README_md_42 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_43 = __importDefault(require("./multi-select/README.md"));
+const README_md_44 = __importDefault(require("./pagination/README.md"));
+const README_md_45 = __importDefault(require("./paper/README.md"));
+const README_md_46 = __importDefault(require("./radio/README.md"));
+const README_md_47 = __importDefault(require("./radio-group/README.md"));
+const README_md_48 = __importDefault(require("./raster-image/README.md"));
+const README_md_49 = __importDefault(require("./select/README.md"));
+const README_md_50 = __importDefault(require("./tabs/README.md"));
+const README_md_51 = __importDefault(require("./text-input/README.md"));
+const README_md_52 = __importDefault(require("./text-link/README.md"));
+const README_md_53 = __importDefault(require("./textarea/README.md"));
+const README_md_54 = __importDefault(require("./time-picker/README.md"));
+const README_md_55 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_56 = __importDefault(require("./toggle/README.md"));
+const README_md_57 = __importDefault(require("./tooltip/README.md"));
+const README_md_58 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -92,32 +93,33 @@ exports.readmes = {
     "flash-messages": README_md_27.default,
     "form-component": README_md_28.default,
     "icon": README_md_29.default,
-    "image-gallery": README_md_30.default,
-    "input": README_md_31.default,
-    "label": README_md_32.default,
-    "layout": README_md_33.default,
-    "list-item": README_md_34.default,
-    "loader": README_md_35.default,
-    "lozenge": README_md_36.default,
-    "message": README_md_37.default,
-    "modal": README_md_38.default,
-    "modal-dialog": README_md_39.default,
-    "modal-header": README_md_40.default,
-    "multi-combobox": README_md_41.default,
-    "multi-select": README_md_42.default,
-    "pagination": README_md_43.default,
-    "paper": README_md_44.default,
-    "radio": README_md_45.default,
-    "radio-group": README_md_46.default,
-    "raster-image": README_md_47.default,
-    "select": README_md_48.default,
-    "tabs": README_md_49.default,
-    "text-input": README_md_50.default,
-    "text-link": README_md_51.default,
-    "textarea": README_md_52.default,
-    "time-picker": README_md_53.default,
-    "time-picker-input": README_md_54.default,
-    "toggle": README_md_55.default,
-    "tooltip": README_md_56.default,
-    "typography": README_md_57.default,
+    "icon-button": README_md_30.default,
+    "image-gallery": README_md_31.default,
+    "input": README_md_32.default,
+    "label": README_md_33.default,
+    "layout": README_md_34.default,
+    "list-item": README_md_35.default,
+    "loader": README_md_36.default,
+    "lozenge": README_md_37.default,
+    "message": README_md_38.default,
+    "modal": README_md_39.default,
+    "modal-dialog": README_md_40.default,
+    "modal-header": README_md_41.default,
+    "multi-combobox": README_md_42.default,
+    "multi-select": README_md_43.default,
+    "pagination": README_md_44.default,
+    "paper": README_md_45.default,
+    "radio": README_md_46.default,
+    "radio-group": README_md_47.default,
+    "raster-image": README_md_48.default,
+    "select": README_md_49.default,
+    "tabs": README_md_50.default,
+    "text-input": README_md_51.default,
+    "text-link": README_md_52.default,
+    "textarea": README_md_53.default,
+    "time-picker": README_md_54.default,
+    "time-picker-input": README_md_55.default,
+    "toggle": README_md_56.default,
+    "tooltip": README_md_57.default,
+    "typography": README_md_58.default,
 };

package/scripts/generate-tw-tokens.js

@@ -81,6 +81,7 @@ async function generateTwTokens() {
             const newContent = await prettier.format(result, {
                 parser: "typescript",
                 tabWidth: 4,
+                printWidth: 120,
             });
 
             if (mode === "check") {

package/text-link/text-link.d.ts

@@ -1,8 +1,10 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { TextLinkVariants } from "@uxf/ui/text-link/theme";
 import React, { AnchorHTMLAttributes } from "react";
+import { NextLink } from "../utils/next-link";
 export type TextLinkVariant = keyof TextLinkVariants;
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
     variant?: TextLinkVariant;
 }
 export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/text-link/text-link.js

@@ -29,11 +29,12 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, variant, ...restProps } = props;
+    const { as = "a", className, children, variant, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-text-link", `uxf-text-link--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, children));
 });
 exports.TextLink.displayName = "UxfUiTextLink";

package/toggle/toggle.stories.js

@@ -32,14 +32,14 @@ exports.default = {
     component: index_1.Toggle,
 };
 function Default() {
-    const [checked, setChecked] = (0, react_1.useState)(true);
-    const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
+    const [isChecked, setIsChecked] = (0, react_1.useState)(true);
+    const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
     const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", name: "toggle", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", name: "toggle", onChange: onChange, size: "sm", value: checked }),
-        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Opravdu?", name: "toggle-disabled", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Opravdu?", name: "toggle-hidden-label", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", name: "toggle-reversed", onChange: onChange, value: checked, variant: "reversed" })));
+        react_1.default.createElement(index_1.Toggle, { label: "Default", name: "toggle", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Size sm", name: "toggle", onChange: onChange, size: "sm", value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Disabled", name: "toggle-disabled", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Default", name: "toggle-hidden-label", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Default (reversed)", name: "toggle-reversed", onChange: onChange, value: isChecked, variant: "reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
 }

package/tokens/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/tw-tokens/tw-colors.d.ts

@@ -351,5 +351,120 @@ export declare const twColors: {
         DEFAULT: string;
     };
     test: string;
+    primary_surface_default: string;
+    primary_surface_default_hover: string;
+    base_border_border: string;
+    base_border_input: string;
+    base_border_inverted_border: string;
+    base_border_inverted_input: string;
+    base_icon_disabled: string;
+    base_icon_high_emphasis: string;
+    base_icon_low_emphasis: string;
+    base_icon_medium_emphasis: string;
+    base_icon_inverted_low_emphasis: string;
+    base_icon_inverted_disabled: string;
+    base_icon_inverted_high_emphasis: string;
+    base_shadow_shadow_md: string;
+    base_shadow_shadow_sm: string;
+    base_surface_background: string;
+    base_surface_disabled: string;
+    base_surface_input: string;
+    base_surface_input_disabled: string;
+    base_surface_input_hover: string;
+    base_surface_main: string;
+    base_surface_main_hover: string;
+    base_surface_popup: string;
+    base_surface_tooltip: string;
+    base_surface_inverted_default: string;
+    base_surface_inverted_default_hover: string;
+    base_surface_inverted_disabled: string;
+    base_surface_inverted_main: string;
+    base_surface_inverted_main_hover: string;
+    base_text_disabled: string;
+    base_text_high_emphasis: string;
+    base_text_link: string;
+    base_text_link_pressed: string;
+    base_text_low_emphasis: string;
+    base_text_inverted_disabled: string;
+    base_text_inverted_high_emphasis: string;
+    base_text_inverted_link: string;
+    base_text_inverted_low_emphasis: string;
+    brand_border: string;
+    brand_icon: string;
+    brand_icon_on_muted: string;
+    brand_text: string;
+    brand_text_on_muted: string;
+    brand_surface_bolder: string;
+    brand_surface_bolder_hover: string;
+    brand_surface_default: string;
+    brand_surface_default_hover: string;
+    brand_surface_muted: string;
+    brand_surface_muted_hover: string;
+    brand_surface_subtle: string;
+    brand_surface_subtle_hover: string;
+    info_border: string;
+    info_icon: string;
+    info_icon_on_muted: string;
+    info_text: string;
+    info_text_on_muted: string;
+    info_surface_default: string;
+    info_surface_default_hover: string;
+    info_surface_muted: string;
+    info_surface_muted_hover: string;
+    info_surface_subtle: string;
+    info_surface_subtle_hover: string;
+    inverted_border: string;
+    inverted_icon: string;
+    inverted_icon_on_muted: string;
+    inverted_text_default: string;
+    inverted_text_disabled: string;
+    inverted_text_muted: string;
+    inverted_text_on_muted: string;
+    negative_border: string;
+    negative_icon: string;
+    negative_icon_on_muted: string;
+    negative_text: string;
+    negative_text_on_muted: string;
+    negative_surface_default: string;
+    negative_surface_default_hover: string;
+    negative_surface_muted: string;
+    negative_surface_muted_hover: string;
+    negative_surface_subtle: string;
+    negative_surface_subtle_hover: string;
+    neutral_border: string;
+    neutral_icon: string;
+    neutral_icon_on_muted: string;
+    neutral_text: string;
+    neutral_text_on_muted: string;
+    neutral_surface_bolder: string;
+    neutral_surface_bolder_hover: string;
+    neutral_surface_default: string;
+    neutral_surface_default_hover: string;
+    neutral_surface_muted: string;
+    neutral_surface_muted_hover: string;
+    neutral_surface_subtle: string;
+    neutral_surface_subtle_hover: string;
+    positive_border: string;
+    positive_icon: string;
+    positive_icon_on_muted: string;
+    positive_text: string;
+    positive_text_on_muted: string;
+    positive_surface_default: string;
+    positive_surface_default_hover: string;
+    positive_surface_muted: string;
+    positive_surface_muted_hover: string;
+    positive_surface_subtle: string;
+    positive_surface_subtle_hover: string;
+    warning_border: string;
+    warning_icon: string;
+    warning_icon_on_muted: string;
+    warning_text: string;
+    warning_text_on_muted: string;
+    warning_surface_default: string;
+    warning_surface_default_hover: string;
+    warning_surface_muted: string;
+    warning_surface_muted_hover: string;
+    warning_surface_subtle: string;
+    warning_surface_subtle_hover: string;
 };
 export type TwColors = typeof twColors;