@ztwoint/z-ui 0.1.12 → 0.1.14

package/dist/css/config/colors/components/alert.css

@@ -1,83 +1,84 @@
-/* NEUTRAL */
-.c-alert-neutral-stroke {
-  border-color: var(--color-alpha-two-50);
+/* SUCCESS */
+@utility alert-success-stroke {
+  border-color: var(--color-green-300);
 }
-
-.c-alert-neutral-bg {
-  background-color: var(--color-surface-neutral-default);
+@utility alert-success-bg {
+  background-color: var(--color-green-50);
 }
-
-.c-alert-neutral-icon {
-  fill: var(--color-shape-neutral-default);
+@utility alert-success-title {
+  color: var(--color-green-900);
 }
-
-.c-alert-neutral-subtitle {
-  color: var(--color-subtitle-primary);
+@utility alert-success-body {
+  color: var(--color-green-900);
 }
-
-.c-alert-neutral-body {
-  color: var(--color-subtitle-secondary);
+@utility alert-success-icon {
+  color: var(--color-green-600);
 }
 
 /* WARNING */
-.c-alert-warning-stroke {
-  border-color: var(--color-warning-200);
+@utility alert-warning-stroke {
+  border-color: var(--color-amber-400);
 }
-
-.c-alert-warning-bg {
-  background-color: var(--color-warning-50);
+@utility alert-warning-bg {
+  background-color: var(--color-amber-50);
 }
-
-.c-alert-warning-icon {
-  fill: var(--color-warning-600);
+@utility alert-warning-title {
+  color: var(--color-amber-900);
 }
-
-.c-alert-warning-subtitle {
-  color: var(--color-warning-950);
+@utility alert-warning-body {
+  color: var(--color-amber-900);
 }
-
-.c-alert-warning-body {
-  color: rgba(69, 44, 3, 0.8);
+@utility alert-warning-icon {
+  color: var(--color-amber-600);
 }
 
 /* DANGER */
-.c-alert-danger-stroke {
-  border-color: var(--color-danger-200);
+@utility alert-danger-stroke {
+  border-color: var(--color-red-400);
 }
-
-.c-alert-danger-bg {
-  background-color: var(--color-danger-50);
+@utility alert-danger-bg {
+  background-color: var(--color-red-50);
 }
-
-.c-alert-danger-icon {
-  fill: var(--color-danger-600);
+@utility alert-danger-title {
+  color: var(--color-red-900);
 }
-
-.c-alert-danger-subtitle {
-  color: var(--color-danger-950);
+@utility alert-danger-body {
+  color: var(--color-red-600);
 }
-
-.c-alert-danger-body {
-  color: rgba(62, 20, 17, 0.8);
+@utility alert-danger-icon {
+  color: var(--color-red-600);
 }
 
-/* DESTRUCTIVE */
-.c-alert-destructive-stroke {
-  border-color: var(--color-danger-600);
+/* ACCENT */
+@utility alert-accent-stroke {
+  border-color: var(--color-accent-200);
 }
-
-.c-alert-destructive-bg {
-  background-color: var(--color-danger-100);
+@utility alert-accent-bg {
+  background-color: var(--color-accent-50);
 }
-
-.c-alert-destructive-icon {
-  fill: var(--color-danger-600);
+@utility alert-accent-title {
+  color: var(--color-accent-950);
 }
-
-.c-alert-destructive-subtitle {
-  color: var(--color-danger-600);
+@utility alert-accent-body {
+  color: var(--color-accent-950);
+}
+@utility alert-accent-icon {
+  color: var(--color-accent-600);
 }
 
-.c-alert-destructive-body {
-  color: rgba(62, 20, 17, 0.8);
+/* NEUTRAL */
+@utility alert-neutral-stroke {
+  border-color: var(--color-neutral-800);
+}
+@utility alert-neutral-bg {
+  background-color: var(--color-neutral-25);
+}
+@utility alert-neutral-title {
+  color: var(--color-neutral-950);
+}
+@utility alert-neutral-body {
+  color: var(--color-neutral-950);
+}
+@utility alert-neutral-icon {
+  color: var(--color-neutral-950);
 }

package/dist/css/config/colors/defaults.css

@@ -1,5 +1,6 @@
 @theme {
   --color-neutral-00: #ffffff;
+  --color-neutral-25: #fafafa;
   --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
   --color-neutral-150: #e0e0e0;
@@ -134,4 +135,7 @@
   --color-purple-alt-800: #c5adfb;
   --color-purple-alt-900: #dccefc;
   --color-purple-alt-950: #f3efff;
+
+  --shadow-custom:
+    0px 2px 4px 0px var(--color-alpha-one-50), 0px 0px 0px 0.5px var(--color-neutral-150);
 }

package/dist/css/config/colors/text.css

@@ -27,11 +27,11 @@
 
 /*brand*/
 @utility text-brand-primary {
-  color: var(--color-brand-950);
+  color: var(--color-accent-950);
 }
 
 @utility text-brand-secondary {
-  color: var(--color-brand-600);
+  color: var(--color-accent-600);
 }
 
 /*success*/

package/dist/css/config/config.css

@@ -13,6 +13,7 @@
 /* Components Colors */
 @import './colors/components/button.css';
 @import './colors/components/tab.css';
+@import './colors/components/alert.css';
 
 @theme {
   --font-family-sans: 'Inter Variable', sans-serif;