@wellingtonhlc/shared-ui 0.25.7 → 0.25.8

package/dist/components/Button.js

@@ -6,10 +6,10 @@ const variantClasses = {
     secondary: 'border-[color-mix(in_srgb,var(--brand)_34%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_12%,var(--surface))] text-[color-mix(in_srgb,var(--brand)_88%,var(--foreground))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_8%,transparent)] hover:border-[color-mix(in_srgb,var(--brand)_48%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:border-[color-mix(in_srgb,var(--brand)_42%,var(--app-border))] dark:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:text-[color-mix(in_srgb,var(--brand)_42%,#fff)] dark:hover:bg-[color-mix(in_srgb,var(--brand)_24%,var(--surface))] dark:hover:text-[color-mix(in_srgb,var(--brand)_30%,#fff)]',
     ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_14%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
     outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:border-[color-mix(in_srgb,var(--brand)_54%,var(--app-border))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
-    information: 'border-transparent bg-[var(--status-info-text,#1d4ed8)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-info-text,#1d4ed8)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-info-text,#1d4ed8)_88%,#000)]',
-    success: 'border-transparent bg-[var(--status-success-text,#15803d)] text-white hover:bg-[color-mix(in_srgb,var(--status-success-text,#15803d)_88%,#000)]',
-    warning: 'border-transparent bg-[var(--status-warning-text,#92400e)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-warning-text,#92400e)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-warning-text,#92400e)_88%,#000)]',
-    danger: 'border-transparent bg-[var(--status-danger-text,#b91c1c)] text-white hover:bg-[color-mix(in_srgb,var(--status-danger-text,#b91c1c)_88%,#000)]',
+    information: 'border-[var(--status-info-border,#93c5fd)] bg-[var(--status-info-bg,rgba(219,234,254,0.8))] text-[var(--status-info-text,#1d4ed8)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-info-border,#93c5fd)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-info-bg,rgba(219,234,254,0.8))_78%,var(--status-info-border,#93c5fd))]',
+    success: 'border-[var(--status-success-border,#86efac)] bg-[var(--status-success-bg,rgba(220,252,231,0.8))] text-[var(--status-success-text,#15803d)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-success-border,#86efac)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-success-bg,rgba(220,252,231,0.8))_78%,var(--status-success-border,#86efac))]',
+    warning: 'border-[var(--status-warning-border,#fcd34d)] bg-[var(--status-warning-bg,rgba(254,243,199,0.8))] text-[var(--status-warning-text,#92400e)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-warning-border,#fcd34d)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-warning-bg,rgba(254,243,199,0.8))_78%,var(--status-warning-border,#fcd34d))]',
+    danger: 'border-[var(--status-danger-border,#fca5a5)] bg-[var(--status-danger-bg,rgba(254,202,202,0.8))] text-[var(--status-danger-text,#b91c1c)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-danger-border,#fca5a5)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-danger-bg,rgba(254,202,202,0.8))_78%,var(--status-danger-border,#fca5a5))]',
     destructive: 'border-transparent bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_88%,#000)]',
     sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
 };

package/dist/styles.css

@@ -2001,27 +2001,15 @@ h2.react-datepicker__current-month {
   .bg-\[var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)\] {
     background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
   }
-  .bg-\[var\(--status-danger-text\,\#b91c1c\)\] {
-    background-color: var(--status-danger-text,#b91c1c);
-  }
   .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
     background-color: var(--status-info-bg,rgba(219,234,254,0.8));
   }
-  .bg-\[var\(--status-info-text\,\#1d4ed8\)\] {
-    background-color: var(--status-info-text,#1d4ed8);
-  }
   .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
     background-color: var(--status-success-bg,rgba(220,252,231,0.8));
   }
-  .bg-\[var\(--status-success-text\,\#15803d\)\] {
-    background-color: var(--status-success-text,#15803d);
-  }
   .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
     background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
   }
-  .bg-\[var\(--status-warning-text\,\#92400e\)\] {
-    background-color: var(--status-warning-text,#92400e);
-  }
   .bg-app-border {
     background-color: var(--color-app-border);
   }
@@ -2633,20 +2621,6 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_70\%\,\#000\)\] {
-    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-info-text,#1d4ed8));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-text,#1d4ed8) 70%,#000));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_70\%\,\#000\)\] {
-    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-warning-text,#92400e));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-text,#92400e) 70%,#000));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
     --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2673,6 +2647,34 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\,\#fca5a5\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border,#fca5a5));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border,#fca5a5) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\,\#93c5fd\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border,#93c5fd));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border,#93c5fd) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\,\#86efac\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border,#86efac));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border,#86efac) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\,\#fcd34d\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border,#fcd34d));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border,#fcd34d) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.10\)\] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3092,42 +3094,42 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)_78\%\,var\(--status-danger-border\,\#fca5a5\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-danger-text,#b91c1c);
+        background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-danger-text,#b91c1c) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-danger-bg,rgba(254,202,202,0.8)) 78%,var(--status-danger-border,#fca5a5));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)_78\%\,var\(--status-info-border\,\#93c5fd\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-info-text,#1d4ed8);
+        background-color: var(--status-info-bg,rgba(219,234,254,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-info-text,#1d4ed8) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-info-bg,rgba(219,234,254,0.8)) 78%,var(--status-info-border,#93c5fd));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-text\,\#15803d\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)_78\%\,var\(--status-success-border\,\#86efac\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-success-text,#15803d);
+        background-color: var(--status-success-bg,rgba(220,252,231,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-success-text,#15803d) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-success-bg,rgba(220,252,231,0.8)) 78%,var(--status-success-border,#86efac));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)_78\%\,var\(--status-warning-border\,\#fcd34d\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-warning-text,#92400e);
+        background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-warning-text,#92400e) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-warning-bg,rgba(254,243,199,0.8)) 78%,var(--status-warning-border,#fcd34d));
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.25.7",
+    "version": "0.25.8",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",