@validationcloud/fractal-ui 1.21.0 → 1.22.0

package/dist/components/button/button.d.ts

@@ -8,8 +8,8 @@ import { default as React } from 'react';
  */
 export declare const Button: React.ForwardRefExoticComponent<{
     className?: string;
-    variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light";
-    size?: "large" | "medium" | "small" | "xsmall";
+    variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light" | "redText";
+    size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
 } & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.stories.d.ts

@@ -2,8 +2,8 @@ import { StoryObj } from '@storybook/react';
 declare const meta: {
     component: import('react').ForwardRefExoticComponent<{
         className?: string;
-        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light";
-        size?: "large" | "medium" | "small" | "xsmall";
+        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light" | "redText";
+        size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
     } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean;
     } & import('react').RefAttributes<HTMLButtonElement>>;
@@ -19,6 +19,7 @@ export declare const Light: Story;
 export declare const Gradient: Story;
 export declare const Warning: Story;
 export declare const Info: Story;
+export declare const RedText: Story;
 export declare const Ghost: Story;
 export declare const GhostButtonInTextLayout: Story;
 export declare const AllSizes: Story;

package/dist/fractal-ui.js

@@ -5948,26 +5948,48 @@ function Vl({ padding: e, children: l, className: t, ...o }) {
 const Q2 = {
   base: [
     // Base
-    "flex cursor-pointer items-center justify-center text-nowrap text-white ring-inset transition ease-in-out",
+    "flex cursor-pointer items-center justify-center text-nowrap text-neutral-10 ring-inset transition ease-in-out",
     // Focus
-    "focus:border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-10",
+    "focus:border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-10 focus-visible:text-neutral-10",
     // Disabled base
-    "disabled:cursor-default"
+    "disabled:cursor-default disabled:hover:shadow-none"
   ],
   variants: {
     primary: [
       // Base
       "bg-primary-50",
       // Hover
-      "hover:bg-primary-55",
+      "hover:bg-primary-60",
+      // Focus
+      "focus-visible:ring-neutral-30",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
+    secondary: [
+      // Base
+      "bg-neutral-80 ring-1 ring-neutral-55 text-neutral-20",
+      // Hover
+      "hover:ring-1 hover:ring-neutral-60 hover:shadow-button hover:text-neutral-10",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
+    redText: [
+      // Base
+      "bg-neutral-80 text-primary-40 ring-1 ring-neutral-55",
+      // Hover
+      "hover:shadow-button hover:ring-neutral-60",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
     warning: [
       // Base
       "bg-warning-50",
       // Hover
-      "hover:bg-warning-30",
+      "hover:bg-warning-60",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
@@ -5975,7 +5997,7 @@ const Q2 = {
       // Base
       "bg-secondary-40",
       // Hover
-      "hover:bg-secondary-30",
+      "hover:bg-secondary-50",
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
@@ -5987,23 +6009,15 @@ const Q2 = {
       // Disabled
       "disabled:bg-neutral-50 disabled:text-neutral-30"
     ],
-    secondary: [
-      // Base
-      "bg-neutral-80 ring-1.5 ring-neutral-55",
-      // Hover
-      "hover:bg-neutral-80 hover:text-neutral-20 hover:ring-1.5 hover:ring-neutral-40",
-      // Disabled
-      "disabled:bg-neutral-70 disabled:text-neutral-40 disabled:ring-1.5 disabled:ring-neutral-60"
-    ],
     light: [
       // Base
       "bg-neutral-10 text-neutral-60",
       // Hover
-      "hover:bg-neutral-20",
+      "hover:text-neutral-80 hover:bg-neutral-20",
       // Disabled
       "disabled:bg-neutral-30 disabled:text-neutral-50",
       // Focus
-      "focus-visible:ring-neutral-40"
+      "focus-visible:ring-neutral-40 focus-visible:ring-1.5 focus-visible:text-neutral-60"
     ],
     ghost: [
       // Base
@@ -6027,16 +6041,18 @@ const Q2 = {
     ]
   },
   sizes: {
-    large: "tg-button-text min-h-12 rounded-xl px-5 py-3 md:min-h-14 md:rounded-2xl",
-    medium: "tg-button-text min-h-11 rounded-xl px-5 py-3 md:min-h-12",
-    small: "tg-button-small min-h-10 rounded-lg px-4 py-2 md:min-h-10",
-    xsmall: "tg-button-small min-h-9 rounded-lg px-4 py-1.5"
+    xlarge: "tg-subtitle-bold min-h-12 rounded-xl px-5 py-3 md:min-h-14 md:rounded-2xl",
+    large: "tg-button-text min-h-11 rounded-lg px-5 py-3 md:min-h-12",
+    medium: "tg-button-small min-h-10 rounded-lg px-4 py-2 md:min-h-10",
+    small: "tg-caption-bold min-h-[34px] rounded-md px-4 py-1.5",
+    xsmall: "tg-tag min-h-6 rounded-sm px-2 py-1"
   },
   ghostSizes: {
+    xlarge: "-mx-5 -my-3 px-5 py-3",
     large: "-mx-5 -my-3 px-5 py-3",
     medium: "-mx-5 -my-3 px-5 py-3",
     small: "-mx-4 -my-2 px-4 py-2",
-    xsmall: "-mx-4 -my-1.5 px-4 py-1.5"
+    xsmall: "-mx-4 -my-1.5 px-2 py-1"
   }
 }, Ol = n1(
   ({ asChild: e, variant: l = "primary", size: t = "medium", className: o, children: i, ...r }, n) => {

package/dist/styles/colors.css

@@ -6,7 +6,7 @@
   --color-purple: #6c5dd3;
 
   /* Primary */
-  --color-primary-60: #bc243e;
+  --color-primary-60: #c14e64;
   --color-primary-50: #d63d57;
   --color-primary-55: #da4e65;
   --color-primary-40: #df687d;
@@ -15,7 +15,8 @@
 
   /* Secondary */
   --color-secondary-70: #193a66;
-  --color-secondary-50: #0052bd;
+  --color-secondary-60: #0052bd;
+  --color-secondary-50: #1e6fda;
   --color-secondary-40: #3f8cff;
   --color-secondary-30: #83b9ff;
   --color-secondary-20: #b2cbeb;
@@ -38,6 +39,7 @@
   --color-success-20: #f0f9f2;
 
   /* Warning */
+  --color-warning-60: #e8562b;
   --color-warning-50: #ff754c;
   --color-warning-30: #ff9a7b;
   --color-warning-20: #f8d9c7;
@@ -72,4 +74,4 @@
   --color-protocols-mnt: #242731;
   --color-protocols-monad: #836ef9;
   --color-protocols-icp: #3a3d46;
-}
+}

package/dist/styles/tailwind.css

@@ -33,6 +33,7 @@
   --shadow-modal: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 0px 14px -4px rgba(0, 0, 0, 0.05);
   --shadow-menu-item: 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
   --shadow-sidebar-accessory: 0px 20px 24px 0px rgba(0, 0, 0, 0.5);
+  --shadow-button: 0px 7.4px 18.5px 0px rgba(255, 255, 255, 0.11) inset;
 
   /* Miscellaneous */
   --border-width-1\.5: 1.5px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.21.0",
+  "version": "1.22.0",
   "module": "./dist/fractal-ui.js",
   "type": "module",
   "files": [