@uxf/ui 11.28.0 → 11.28.1

package/button/button.stories.js

@@ -44,13 +44,13 @@ function Basic() {
             config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { key: variant, className: "text-center text-xs text-gray-400" },
                 "size=",
                 size))))),
-        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "bg-[#1F2A37] dark:bg-white" : undefined, key: color },
+        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },
             react_1.default.createElement("div", { className: "grid gap-3 py-2", style: { gridTemplateColumns } },
                 react_1.default.createElement("div", { className: "flex items-center text-center text-xs text-gray-400" },
                     "color=",
                     color),
                 config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "flex items-center justify-center gap-2" },
-                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isLoading: true }, "Button"),
+                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button"),
                     react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isIconButton: true },
                         react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation" }))))))))))))));
 }

package/css/button.css

@@ -172,6 +172,7 @@
 
     &--variant-secondary {
         --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
+        --uxf-button-background-color: var(--uxf-color-base-surface-main);
 
         border-style: solid;
         border-width: 1px;
@@ -204,15 +205,12 @@
         &.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-hover: #ffffff1f;
+            --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--is-disabled {
-                --uxf-button-border-color: var(--uxf-color-base-surface-disabled);
-                --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
-            }
-
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
+                --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
             }
         }
 
@@ -248,14 +246,12 @@
             --uxf-button-text-color: var(--uxf-color-info-text);
         }
 
-        /** TODO @vejvis - UX musí doladit inverted button... teď je to strašnej hack */
         &.uxf-button--color-inverted {
             --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: #ffffff1f;
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
 
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
-                --uxf-button-text-color: #d2d6db;
+            &.uxf-button--is-disabled {
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
             }
         }
 

package/css/colors.css

@@ -6,10 +6,14 @@
     --uxf-color-base-surface-main-hover: #f3f4f6;
     --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;
@@ -47,10 +51,14 @@
         --uxf-color-base-surface-main-hover: #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;

package/css/icon.css

@@ -1,12 +1,10 @@
 .uxf-icon {
-    @apply h-[var(--i-h)] w-[var(--i-w)] shrink-0;
-
-    :root .dark & {
-        color: theme("colors.white");
-    }
+    flex-shrink: 0;
+    height: var(--i-h);
+    width: var(--i-w);
 
     & > use {
-        @apply pointer-events-none;
+        pointer-events: none;
     }
 
     &--color-default {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.28.0",
+  "version": "11.28.1",
   "description": "",
   "publishConfig": {
     "access": "public"