@ztwoint/z-ui 0.1.11 → 0.1.13

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

@@ -25,17 +25,17 @@
   --color-accent-900: #1e3a8a;
   --color-accent-950: #172554;
 
-  --color-rose-50: #fef2f2;
-  --color-rose-100: #fee2e2;
-  --color-rose-200: #fecaca;
-  --color-rose-300: #fca5a5;
-  --color-rose-400: #f87171;
-  --color-rose-500: #ef4444;
-  --color-rose-600: #dc2626;
-  --color-rose-700: #b91c1c;
-  --color-rose-800: #991b1b;
-  --color-rose-900: #7f1d1d;
-  --color-rose-950: #450a0a;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
 
   --color-amber-50: #fffbeb;
   --color-amber-100: #fef3c7;
@@ -85,29 +85,53 @@
   --color-sky-900: #0c4a6e;
   --color-sky-950: #082f49;
 
-  --color-alpha-dark-00: rgba(0, 0, 0, 0);
-  --color-alpha-dark-50: rgba(0, 0, 0, 0.05);
-  --color-alpha-dark-100: rgba(0, 0, 0, 0.1);
-  --color-alpha-dark-150: rgba(0, 0, 0, 0.15);
-  --color-alpha-dark-200: rgba(0, 0, 0, 0.2);
-  --color-alpha-dark-300: rgba(0, 0, 0, 0.3);
-  --color-alpha-dark-400: rgba(0, 0, 0, 0.4);
-  --color-alpha-dark-500: rgba(0, 0, 0, 0.5);
-  --color-alpha-dark-600: rgba(0, 0, 0, 0.6);
-  --color-alpha-dark-700: rgba(0, 0, 0, 0.7);
-  --color-alpha-dark-800: rgba(0, 0, 0, 0.8);
-  --color-alpha-dark-900: rgba(0, 0, 0, 0.9);
+  --color-alpha-one-00: rgba(0, 0, 0, 0);
+  --color-alpha-one-50: rgba(0, 0, 0, 0.05);
+  --color-alpha-one-100: rgba(0, 0, 0, 0.1);
+  --color-alpha-one-150: rgba(0, 0, 0, 0.15);
+  --color-alpha-one-200: rgba(0, 0, 0, 0.2);
+  --color-alpha-one-300: rgba(0, 0, 0, 0.3);
+  --color-alpha-one-400: rgba(0, 0, 0, 0.4);
+  --color-alpha-one-500: rgba(0, 0, 0, 0.5);
+  --color-alpha-one-600: rgba(0, 0, 0, 0.6);
+  --color-alpha-one-700: rgba(0, 0, 0, 0.7);
+  --color-alpha-one-800: rgba(0, 0, 0, 0.8);
+  --color-alpha-one-900: rgba(0, 0, 0, 0.9);
 
-  --color-alpha-white-00: rgba(255, 255, 255, 0);
-  --color-alpha-white-50: rgba(255, 255, 255, 0.05);
-  --color-alpha-white-100: rgba(255, 255, 255, 0.1);
-  --color-alpha-white-150: rgba(255, 255, 255, 0.15);
-  --color-alpha-white-200: rgba(255, 255, 255, 0.2);
-  --color-alpha-white-300: rgba(255, 255, 255, 0.3);
-  --color-alpha-white-400: rgba(255, 255, 255, 0.4);
-  --color-alpha-white-500: rgba(255, 255, 255, 0.5);
-  --color-alpha-white-600: rgba(255, 255, 255, 0.6);
-  --color-alpha-white-700: rgba(255, 255, 255, 0.7);
-  --color-alpha-white-800: rgba(255, 255, 255, 0.8);
-  --color-alpha-white-900: rgba(255, 255, 255, 0.9);
+  --color-alpha-two-00: rgba(255, 255, 255, 0);
+  --color-alpha-two-50: rgba(255, 255, 255, 0.05);
+  --color-alpha-two-100: rgba(255, 255, 255, 0.1);
+  --color-alpha-two-150: rgba(255, 255, 255, 0.15);
+  --color-alpha-two-200: rgba(255, 255, 255, 0.2);
+  --color-alpha-two-300: rgba(255, 255, 255, 0.3);
+  --color-alpha-two-400: rgba(255, 255, 255, 0.4);
+  --color-alpha-two-500: rgba(255, 255, 255, 0.5);
+  --color-alpha-two-600: rgba(255, 255, 255, 0.6);
+  --color-alpha-two-700: rgba(255, 255, 255, 0.7);
+  --color-alpha-two-800: rgba(255, 255, 255, 0.8);
+  --color-alpha-two-900: rgba(255, 255, 255, 0.9);
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #ede9fe;
+  --color-purple-200: #ddd6fe;
+  --color-purple-300: #c4b5fd;
+  --color-purple-400: #a78bfa;
+  --color-purple-500: #8b5cf6;
+  --color-purple-600: #7c3aed;
+  --color-purple-700: #6d28d9;
+  --color-purple-800: #5b21b6;
+  --color-purple-900: #4c1d95;
+  --color-purple-950: #2e1065;
+
+  --color-purple-alt-50: #201b2b;
+  --color-purple-alt-100: #382a58;
+  --color-purple-alt-200: #503885;
+  --color-purple-alt-300: #6746b2;
+  --color-purple-alt-400: #7f55df;
+  --color-purple-alt-500: #8b5cf6;
+  --color-purple-alt-600: #976cf7;
+  --color-purple-alt-700: #ae8df9;
+  --color-purple-alt-800: #c5adfb;
+  --color-purple-alt-900: #dccefc;
+  --color-purple-alt-950: #f3efff;
 }

package/dist/css/config/colors/icons.css

@@ -45,11 +45,11 @@
 
 /* inverted */
 @utility icon-inverted {
-  fill: var(--color-alpha-white-500);
+  fill: var(--color-alpha-two-500);
 }
 
 @utility icon-inverted-disabled {
-  fill: var(--color-alpha-white-400);
+  fill: var(--color-alpha-two-400);
 }
 
 @utility icon-inverted-attention {

package/dist/css/config/colors/overlay.css

@@ -1,3 +1,3 @@
 @utility overlay {
-  background-color: var(--color-alpha-dark-500);
+  background-color: var(--color-alpha-one-500);
 }

package/dist/css/config/colors/shape.css

@@ -24,7 +24,7 @@
 }
 
 @utility shape-neutral-danger {
-  fill: var(--color-rose-600);
+  fill: var(--color-red-600);
 }
 
 @utility shape-neutral-warning {
@@ -45,11 +45,11 @@
 
 /* shape: inverted */
 @utility shape-inverted-default {
-  fill: var(--color-alpha-white-500);
+  fill: var(--color-alpha-two-500);
 }
 
 @utility shape-inverted-disabled {
-  fill: var(--color-alpha-white-400);
+  fill: var(--color-alpha-two-400);
 }
 
 @utility shape-inverted-attention {
@@ -61,7 +61,7 @@
 }
 
 @utility shape-inverted-danger {
-  fill: var(--color-rose-500);
+  fill: var(--color-red-500);
 }
 
 @utility shape-inverted-warning {
@@ -127,11 +127,11 @@
 
 /* shape-bg: inverted */
 @utility shape-bg-inverted-default {
-  background-color: var(--color-alpha-white-500);
+  background-color: var(--color-alpha-two-500);
 }
 
 @utility shape-bg-inverted-disabled {
-  background-color: var(--color-alpha-white-400);
+  background-color: var(--color-alpha-two-400);
 }
 
 @utility shape-bg-inverted-attention {

package/dist/css/config/colors/stroke.css

@@ -1,9 +1,17 @@
-/* For stroke/borders accross ui */
+/* For stroke/borders across ui */
 /* solid */
-@utility stroke-solid-default {
+@utility stroke-solid-light {
+  border-color: var(--color-neutral-100);
+}
+
+@utility stroke-solid-medium {
   border-color: var(--color-neutral-150);
 }
 
+@utility stroke-solid-high {
+  border-color: var(--color-neutral-200);
+}
+
 @utility stroke-solid-hover {
   border-color: var(--color-neutral-300);
 }
@@ -13,7 +21,7 @@
 }
 
 @utility stroke-solid-attention {
-  border-color: var(--color-amber-600);
+  border-color: var(--color-neutral-950);
 }
 
 @utility stroke-solid-highlight {
@@ -21,12 +29,21 @@
 }
 
 /* transparent */
-@utility stroke-transparent-default {
-  border-color: var(--color-alpha-dark-150);
+
+@utility stroke-transparent-light {
+  border-color: var(--color-alpha-one-100);
+}
+
+@utility stroke-transparent-medium {
+  border-color: var(--color-alpha-one-150);
+}
+
+@utility stroke-transparent-high {
+  border-color: var(--color-alpha-one-200);
 }
 
 @utility stroke-transparent-hover {
-  border-color: var(--color-alpha-dark-300);
+  border-color: var(--color-alpha-one-300);
 }
 
 @utility stroke-transparent-active {
@@ -34,20 +51,19 @@
 }
 
 @utility stroke-transparent-attention {
-  border-color: var(--color-amber-600);
+  border-color: var(--color-neutral-950);
 }
 
 @utility stroke-transparent-highlight {
   border-color: var(--color-accent-300);
 }
 
-/* inverted */
 @utility stroke-inverted-default {
-  border-color: var(--color-alpha-white-100);
+  border-color: var(--color-alpha-two-100);
 }
 
 @utility stroke-inverted-hover {
-  border-color: var(--color-alpha-white-300);
+  border-color: var(--color-alpha-two-300);
 }
 
 @utility stroke-inverted-active {

package/dist/css/config/colors/surfaces.css

@@ -18,7 +18,7 @@
 }
 
 @utility surface-neutral-elevated {
-  background-color: var(--color-alpha-white-100);
+  background-color: var(--color-alpha-two-100);
 }
 
 /* Brand surfaces */
@@ -57,15 +57,15 @@
 
 /* Danger surfaces */
 @utility surface-danger-default {
-  background-color: var(--color-rose-600);
+  background-color: var(--color-red-600);
 }
 
 @utility surface-danger-hover {
-  background-color: var(--color-rose-700);
+  background-color: var(--color-red-700);
 }
 
 @utility surface-danger-pressed {
-  background-color: var(--color-rose-400);
+  background-color: var(--color-red-400);
 }
 
 @utility surface-danger-disabled {
@@ -125,15 +125,15 @@
 
 /* Inverted surfaces */
 @utility surface-inverted-default {
-  background-color: var(--color-alpha-white-150);
+  background-color: var(--color-alpha-two-150);
 }
 
 @utility surface-inverted-hover {
-  background-color: var(--color-alpha-white-300);
+  background-color: var(--color-alpha-two-300);
 }
 
 @utility surface-inverted-pressed {
-  background-color: var(--color-alpha-white-00);
+  background-color: var(--color-alpha-two-00);
 }
 
 @utility surface-inverted-disabled {

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

@@ -1,3 +1,88 @@
+/*neutral*/
+
+@utility text-neutral-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-neutral-secondary {
+  color: var(--color-neutral-600);
+}
+
+@utility text-neutral-muted {
+  color: var(--color-neutral-400);
+}
+
+/* Inverted */
+@utility text-inverted-primary {
+  color: var(--color-neutral-00);
+}
+
+@utility text-inverted-secondary {
+  color: var(--color-alpha-two-600);
+}
+
+@utility text-inverted-static {
+  color: var(--color-neutral-00);
+}
+
+/*brand*/
+@utility text-brand-primary {
+  color: var(--color-accent-950);
+}
+
+@utility text-brand-secondary {
+  color: var(--color-accent-600);
+}
+
+/*success*/
+@utility text-success-primary {
+  color: var(--color-green-950);
+}
+
+@utility text-success-secondary {
+  color: var(--color-green-600);
+}
+
+/*danger*/
+@utility text-danger-primary {
+  color: var(--color-red-950);
+}
+
+@utility text-danger-secondary {
+  color: var(--color-red-600);
+}
+/*warning*/
+@utility text-warning-primary {
+  color: var(--color-amber-950);
+}
+
+@utility text-warning-secondary {
+  color: var(--color-amber-600);
+}
+
+/*purple*/
+@utility text-purple-primary {
+  color: var(--color-purple-950);
+}
+
+@utility text-purple-secondary {
+  color: var(--color-purple-600);
+}
+
+/*body*/
+@utility text-body-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-body-long {
+  color: var(--color-neutral-800);
+}
+
+@utility text-body-short {
+  color: var(--color-neutral-700);
+}
+
+/*pre-exisitng-colors*/
 /* title */
 @utility text-title {
   color: var(--color-neutral-950);
@@ -6,7 +91,6 @@
 @utility text-title-secondary {
   color: var(--color-neutral-400);
 }
-
 /* link */
 @utility text-link {
   color: var(--color-accent-600);
@@ -42,14 +126,6 @@
   color: var(--color-neutral-950);
 }
 
-@utility text-body-long {
-  color: var(--color-neutral-800);
-}
-
-@utility text-body-short {
-  color: var(--color-neutral-700);
-}
-
 /* underline */
 @utility text-underline-highlight {
   color: var(--color-amber-500);
@@ -59,19 +135,6 @@
   color: var(--color-neutral-200);
 }
 
-/* inverted */
-@utility text-inverted {
-  color: var(--color-neutral-00);
-}
-
-@utility text-inverted-secondary {
-  color: var(--color-alpha-white-700);
-}
-
-@utility text-inverted-disabled {
-  color: var(--color-neutral-400);
-}
-
-.text-default-muted {
+@utility text-default-muted {
   color: var(--color-neutral-400);
 }

package/dist/css/config/config.css

@@ -13,6 +13,8 @@
 /* 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;