@uxf/ui 11.34.1 → 11.36.0

package/tw-tokens/tw-colors.js

@@ -355,4 +355,119 @@ exports.twColors = {
         DEFAULT: "#ef4444",
     },
     test: "#ff00ff",
+    primary_surface_default: "var(--uxf-color-brand-surface-default)",
+    primary_surface_default_hover: "var(--uxf-color-brand-surface-default-hover)",
+    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)",
 };

package/tw-tokens/tw-containers.js

@@ -2,10 +2,4 @@
 // this file is generated automatically, do not change anything manually in the contents of this file
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twContainers = void 0;
-exports.twContainers = {
-    xs: "33.75rem",
-    sm: "45rem",
-    md: "58rem",
-    lg: "64rem",
-    xl: "76rem",
-};
+exports.twContainers = { xs: "33.75rem", sm: "45rem", md: "58rem", lg: "64rem", xl: "76rem" };

package/tw-tokens/tw-screens.js

@@ -2,10 +2,4 @@
 // this file is generated automatically, do not change anything manually in the contents of this file
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twScreens = void 0;
-exports.twScreens = {
-    xs: "36em",
-    sm: "48em",
-    md: "62em",
-    lg: "75em",
-    xl: "90em",
-};
+exports.twScreens = { xs: "36em", sm: "48em", md: "62em", lg: "75em", xl: "90em" };

package/utils/storybook-config.d.ts

@@ -22,6 +22,11 @@ export interface StorybookConfig {
     Chip: {
         colors: ChipColor[];
     };
+    IconButton: {
+        colors: ButtonColor[];
+        sizes: ButtonSize[];
+        variants: ButtonVariant[];
+    };
     Input: {
         sizes: (keyof InputGroupSizes)[];
     };

package/utils/storybook-config.js

@@ -44,6 +44,11 @@ exports.defaultConfig = {
     Chip: {
         colors: ["primary", "orange", "red", "yellow", "pink", "purple", "indigo", "green", "blue", "default"],
     },
+    IconButton: {
+        sizes: ["sm", "default", "lg", "xl"],
+        colors: ["default", "positive", "negative", "warning", "info", "inverted"],
+        variants: ["default", "secondary", "text"],
+    },
     Input: {
         sizes: ["small", "default", "large"],
     },

package/utils/tailwind-config.js

@@ -1,6 +1,7 @@
 const tailwindThemeDefaults = require("./tailwind-theme-defaults");
 const { fontFamily } = require("tailwindcss/defaultTheme");
 const { rem } = require("@uxf/styles/units/rem");
+const { figmaColors } = require("../figma-colors");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -96,6 +97,12 @@ module.exports = {
                     900: "#7f1d1d",
                 },
                 test: "#ff00ff",
+                // TODO get primary from generated colors
+                primary_surface_default: "var(--uxf-color-brand-surface-default)",
+                primary_surface_default_hover: "var(--uxf-color-brand-surface-default-hover)",
+
+                // generated color-tokens from figma
+                ...figmaColors,
             },
             fontFamily: {
                 sans: ["var(--font-inter)", ...fontFamily.sans],

package/css/colors.css

@@ -1,99 +0,0 @@
-:root {
-    /** base */
-    --uxf-color-base-border-inverted: #ffffff1f;
-    --uxf-color-base-border-input: #d2d6db;
-    --uxf-color-base-border-border: #e5e7eb;
-    --uxf-color-base-surface-main: #fff;
-    --uxf-color-base-surface-main-hover: #f3f4f6;
-    --uxf-color-base-surface-background: #f9fafb;
-    --uxf-color-base-surface-input-disabled: #f3f4f6;
-    --uxf-color-base-surface-disabled: #d2d6db;
-    --uxf-color-base-surface-inverted-main: #ffffff14;
-    --uxf-color-base-surface-inverted-main-hover: #ffffff29;
-    --uxf-color-base-text-disabled: #9da4ae;
-    --uxf-color-base-text-high-emphasis: #111927;
-    --uxf-color-base-text-low-emphasis: #4d5761;
-    --uxf-color-base-text-inverted-high-emphasis: #fff;
-    --uxf-color-base-text-inverted-low-emphasis: #fffc;
-    --uxf-color-base-text-inverted-disabled: #ffffffb3;
-
-    /** primary */
-    --uxf-color-primary-surface-default: #155dee;
-    --uxf-color-primary-surface-default-hover: #004eea;
-
-    /** positive */
-    --uxf-color-positive-text: #039754;
-    --uxf-color-positive-border: #6be9a6;
-    --uxf-color-positive-surface-default: #09914f;
-    --uxf-color-positive-surface-default-hover: #087343;
-
-    /** negative */
-    --uxf-color-negative-text: #d92c20;
-    --uxf-color-negative-border: #fca19b;
-    --uxf-color-negative-surface-default: #d92c20;
-    --uxf-color-negative-surface-default-hover: #b42318;
-
-    /** warning */
-    --uxf-color-warning-text: #dc6803;
-    --uxf-color-warning-border: #fec84b;
-    --uxf-color-warning-surface-default: #dc6803;
-    --uxf-color-warning-surface-default-hover: #b54707;
-    --uxf-color-warning-surface-muted: #fef0c7;
-    --uxf-color-warning-icon-on-muted: #b54707;
-
-    /** info */
-    --uxf-color-info-text: #3e4783;
-    --uxf-color-info-border: #b3b8db;
-    --uxf-color-info-surface-default: #3e4783;
-    --uxf-color-info-surface-default-hover: #404968;
-
-    .dark {
-        /** base */
-        --uxf-color-base-border-inverted: #3842501f;
-        --uxf-color-base-border-input: #384250;
-        --uxf-color-base-border-border: #e5e7eb1f;
-        --uxf-color-base-surface-main: #111927;
-        --uxf-color-base-surface-main-hover: #1f2a37;
-        --uxf-color-base-surface-background: #1f2a37;
-        --uxf-color-base-surface-input-disabled: #4d5761;
-        --uxf-color-base-surface-disabled: #d2d6db;
-        --uxf-color-base-surface-inverted-main: #20293914;
-        --uxf-color-base-surface-inverted-main-hover: #20293929;
-        --uxf-color-base-text-disabled: #ffffff80;
-        --uxf-color-base-text-high-emphasis: #fff;
-        --uxf-color-base-text-low-emphasis: #ffffffbf;
-        --uxf-color-base-text-inverted-high-emphasis: #111927;
-        --uxf-color-base-text-inverted-low-emphasis: #202939cc;
-        --uxf-color-base-text-inverted-disabled: #202939b3;
-
-        /** primary */
-        --uxf-color-primary-surface-default: #518bff;
-        --uxf-color-primary-surface-default-hover: #83adff;
-
-        /** positive */
-        --uxf-color-positive-text: #6be9a6;
-        --uxf-color-positive-border: #039754;
-        --uxf-color-positive-surface-default: #3ccb7f;
-        --uxf-color-positive-surface-default-hover: #72e2a3;
-
-        /** negative */
-        --uxf-color-negative-text: #fca19b;
-        --uxf-color-negative-border: #d92c20;
-        --uxf-color-negative-surface-default: #f97066;
-        --uxf-color-negative-surface-default-hover: #fca19b;
-
-        /** warning */
-        --uxf-color-warning-text: #fec84b;
-        --uxf-color-warning-border: #dc6803;
-        --uxf-color-warning-surface-default: #fdb022;
-        --uxf-color-warning-surface-default-hover: #fec84b;
-        --uxf-color-warning-surface-muted: #93370c;
-        --uxf-color-warning-icon-on-muted: #fec84b;
-
-        /** info */
-        --uxf-color-info-text: #b3b8db;
-        --uxf-color-info-border: #3e4783;
-        --uxf-color-info-surface-default: #b3b8db;
-        --uxf-color-info-surface-default-hover: #d5d9eb;
-    }
-}