@ztwoint/z-ui 0.1.46 → 0.1.49

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

@@ -2,198 +2,198 @@
 
 /* Neutral surfaces */
 @utility surface-neutral-default {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-surface-neutral-default);
 }
 
 @utility surface-neutral-primary {
-  background-color: var(--color-neutral-950);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 @utility surface-neutral-hover {
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-surface-neutral-hover);
 }
 
 @utility surface-neutral-pressed {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 @utility surface-neutral-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-neutral-disabled);
 }
 
 @utility surface-neutral-elevated {
-  background-color: var(--color-alpha-two-100);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility surface-neutral-focused {
-  background-color: var(--color-neutral-75);
+  background-color: var(--color-surface-neutral-focused);
 }
 
 /* Brand surfaces */
 @utility surface-brand-default {
-  background-color: #2b394e;
+  background-color: var(--color-surface-accent-default);
 }
 
 @utility surface-brand-hover {
-  background-color: #1d2634;
+  background-color: var(--color-surface-accent-hover);
 }
 
 @utility surface-brand-pressed {
-  background-color: #2f425d;
+  background-color: var(--color-surface-accent-pressed);
 }
 
 @utility surface-brand-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-accent-disabled);
 }
 
 /* Accent surfaces */
 @utility surface-accent-default {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 @utility surface-accent-hover {
-  background-color: var(--color-accent-700);
+  background-color: var(--color-surface-accent-hover);
 }
 
 @utility surface-accent-pressed {
-  background-color: var(--color-accent-400);
+  background-color: var(--color-surface-accent-pressed);
 }
 
 @utility surface-accent-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-accent-disabled);
 }
 
 /* Danger surfaces */
 @utility surface-danger-default {
-  background-color: var(--color-red-600);
+  background-color: var(--color-surface-danger-default);
 }
 
 @utility surface-danger-hover {
-  background-color: var(--color-red-700);
+  background-color: var(--color-surface-danger-hover);
 }
 
 @utility surface-danger-pressed {
-  background-color: var(--color-red-400);
+  background-color: var(--color-surface-danger-pressed);
 }
 
 @utility surface-danger-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-danger-disabled);
 }
 
 @utility surface-danger-light {
-  background-color: var(--color-red-50);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility surface-danger-light-hover {
-  background-color: var(--color-red-100);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 /* Success surfaces */
 @utility surface-success-default {
-  background-color: var(--color-green-600);
+  background-color: var(--color-surface-success-default);
 }
 
 @utility surface-success-hover {
-  background-color: var(--color-green-700);
+  background-color: var(--color-surface-success-hover);
 }
 
 @utility surface-success-pressed {
-  background-color: var(--color-green-400);
+  background-color: var(--color-surface-success-pressed);
 }
 
 @utility surface-success-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-success-disabled);
 }
 
 @utility surface-success-light {
-  background-color: var(--color-green-50);
+  background-color: var(--color-surface-inverted-default);
 }
 @utility surface-success-light-hover {
-  background-color: var(--color-green-100);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 /* Warning surfaces */
 @utility surface-warning-default {
-  background-color: var(--color-amber-600);
+  background-color: var(--color-surface-warning-default);
 }
 
 @utility surface-warning-hover {
-  background-color: var(--color-amber-700);
+  background-color: var(--color-surface-warning-hover);
 }
 
 @utility surface-warning-pressed {
-  background-color: var(--color-amber-400);
+  background-color: var(--color-surface-warning-pressed);
 }
 
 @utility surface-warning-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-warning-disabled);
 }
 
 @utility surface-warning-light {
-  background-color: var(--color-amber-50);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility surface-warning-light-hover {
-  background-color: var(--color-amber-100);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 /* Primary surfaces */
 
 /* Warning surfaces */
 @utility surface-primary-default {
-  background-color: var(--color-blue-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 @utility surface-primary-hover {
-  background-color: var(--color-blue-700);
+  background-color: var(--color-surface-accent-hover);
 }
 
 @utility surface-primary-pressed {
-  background-color: var(--color-blue-400);
+  background-color: var(--color-surface-accent-pressed);
 }
 
 @utility surface-primary-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-accent-disabled);
 }
 
 @utility surface-primary-light-hover {
-  background-color: var(--color-blue-100);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 @utility surface-primary-light {
-  background-color: var(--color-blue-50);
+  background-color: var(--color-surface-inverted-default);
 }
 
 /* Purple surfaces */
 @utility surface-purple-default {
-  background-color: var(--color-violet-600);
+  background-color: var(--color-surface-purple-default);
 }
 
 @utility surface-purple-hover {
-  background-color: var(--color-violet-700);
+  background-color: var(--color-surface-purple-hover);
 }
 
 @utility surface-purple-pressed {
-  background-color: var(--color-violet-400);
+  background-color: var(--color-surface-purple-pressed);
 }
 
 @utility surface-purple-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-purple-disabled);
 }
 
 /* Inverted surfaces */
 @utility surface-inverted-default {
-  background-color: var(--color-alpha-two-150);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility surface-inverted-hover {
-  background-color: var(--color-alpha-two-300);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 @utility surface-inverted-pressed {
-  background-color: var(--color-alpha-two-00);
+  background-color: var(--color-surface-inverted-pressed);
 }
 
 @utility surface-inverted-disabled {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-surface-inverted-disabled);
 }

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

@@ -1,160 +1,160 @@
 /*neutral*/
 
 @utility text-neutral-primary {
-  color: var(--color-neutral-950);
+  color: var(--color-text-neutral-primary);
 }
 
 @utility text-neutral-secondary {
-  color: var(--color-neutral-600);
+  color: var(--color-text-neutral-secondary);
 }
 
 @utility text-neutral-muted {
-  color: var(--color-neutral-400);
+  color: var(--color-text-neutral-muted);
 }
 
 /* Inverted */
 @utility text-inverted-primary {
-  color: var(--color-neutral-00);
+  color: var(--color-text-inverted-primary);
 }
 
 @utility text-inverted-secondary {
-  color: var(--color-alpha-two-600);
+  color: var(--color-text-inverted-secondary);
 }
 
 @utility text-inverted-static {
-  color: var(--color-neutral-00);
+  color: var(--color-text-inverted-static);
 }
 
 /*brand*/
 @utility text-brand-primary {
-  color: var(--color-accent-950);
+  color: var(--color-text-brand-primary);
 }
 
 @utility text-brand-secondary {
-  color: var(--color-accent-600);
+  color: var(--color-text-brand-secondary);
 }
 
 /*success*/
 @utility text-success-primary {
-  color: var(--color-green-950);
+  color: var(--color-text-success-primary);
 }
 
 @utility text-success-secondary {
-  color: var(--color-green-600);
+  color: var(--color-text-success-secondary);
 }
 
 /*danger*/
 @utility text-danger-primary {
-  color: var(--color-red-950);
+  color: var(--color-text-danger-primary);
 }
 
 @utility text-danger-secondary {
-  color: var(--color-red-600);
+  color: var(--color-text-danger-secondary);
 }
 /*warning*/
 @utility text-warning-primary {
-  color: var(--color-amber-950);
+  color: var(--color-text-warning-primary);
 }
 
 @utility text-warning-secondary {
-  color: var(--color-amber-600);
+  color: var(--color-text-warning-secondary);
 }
 
 /*purple*/
 @utility text-purple-primary {
-  color: var(--color-purple-950);
+  color: var(--color-text-purple-primary);
 }
 
 @utility text-purple-secondary {
-  color: var(--color-purple-600);
+  color: var(--color-text-purple-secondary);
 }
 
 /*body*/
 @utility text-body-primary {
-  color: var(--color-neutral-950);
+  color: var(--color-text-body-primary);
 }
 
 @utility text-body-long {
-  color: var(--color-neutral-800);
+  color: var(--color-text-body-long);
 }
 
 @utility text-body-short {
-  color: var(--color-neutral-700);
+  color: var(--color-text-body-short);
 }
 
 /*pre-exisitng-colors*/
 /* title */
 @utility text-title {
-  color: var(--color-neutral-950);
+  color: var(--color-text-neutral-primary);
 }
 
 @utility text-title-secondary {
-  color: var(--color-neutral-400);
+  color: var(--color-text-neutral-muted);
 }
 /* link */
 @utility text-link {
-  color: var(--color-accent-600);
+  color: var(--color-text-brand-secondary);
 }
 
 @utility text-link-secondary {
-  color: var(--color-neutral-600);
+  color: var(--color-text-neutral-secondary);
 }
 
 /* subtitle */
 @utility text-subtitle {
-  color: var(--color-neutral-950);
+  color: var(--color-text-neutral-primary);
 }
 
 @utility text-subtitle-success {
-  color: var(--color-green-600);
+  color: var(--color-text-success-secondary);
 }
 
 @utility text-subtitle-danger {
-  color: var(--color-rose-600);
+  color: var(--color-text-danger-secondary);
 }
 
 @utility text-subtitle-secondary {
-  color: var(--color-neutral-600);
+  color: var(--color-text-neutral-secondary);
 }
 
 @utility text-subtitle-disabled {
-  color: var(--color-neutral-400);
+  color: var(--color-text-neutral-muted);
 }
 
 /* body */
 @utility text-body {
-  color: var(--color-neutral-950);
+  color: var(--color-text-body-primary);
 }
 
 /* underline */
 @utility text-underline-highlight {
-  color: var(--color-amber-500);
+  color: var(--color-text-warning-secondary);
 }
 
 @utility text-underline-subtle {
-  color: var(--color-neutral-200);
+  color: var(--color-text-neutral-muted);
 }
 
 @utility text-default-muted {
-  color: var(--color-neutral-400);
+  color: var(--color-text-neutral-muted);
 }
 
 @utility text-default-primary {
-  color: var(--color-neutral-950);
+  color: var(--color-text-neutral-primary);
 }
 
 @utility text-default-secondary {
-  color: var(--color-neutral-600);
+  color: var(--color-text-neutral-secondary);
 }
 
 @utility text-default-warning {
-  color: var(--color-amber-600);
+  color: var(--color-text-warning-secondary);
 }
 
 @utility text-default-brand {
-  color: var(--color-blue-600);
+  color: var(--color-text-brand-secondary);
 }
 
 @utility text-default-success {
-  color: var(--color-emerald-600);
+  color: var(--color-text-success-secondary);
 }

package/dist/css/config/components/index.css

@@ -1,3 +1 @@
-@import './button.css';
-@import './input.css';
 @import './file-upload-area.css';

package/dist/css/config/config-deprecated.css

@@ -1,20 +1,18 @@
 /* Colors */
-@import './colors/defaults.css';
+/* @import './colors/defaults.css'; */
 @import './colors/backgrounds.css';
 @import './colors/surfaces.css';
 @import './colors/stroke.css';
 @import './colors/overlay.css';
 @import './colors/icons.css';
 @import './colors/text.css';
-@import './typography/typography.css';
+@import './typography/index.css';
 
 /* TODO Drop Shadow */
 
 /* Components Colors */
-@import './colors/components/button.css';
+/* @import './colors/components/button.css'; */
 @import './colors/components/tab.css';
-@import './colors/components/alert.css';
-@import './colors/components/select.css';
 
 @theme {
   --font-family-sans: 'Inter Variable', sans-serif;

package/dist/css/config/config.css

@@ -22,6 +22,8 @@
   }
 }
 @import './config-deprecated.css';
-@import './colors/defaults.css';
-@import './colors/semantic-colors.css';
-@import './typography/typography.css';
+/* @import './colors/defaults.css'; */
+@import './colors/semantic/index.css';
+@import './typography/index.css';
+@import './shadows.css';
+@import './other-variables.css';

package/dist/css/config/other-variables.css

@@ -0,0 +1,9 @@
+:root {
+    --stroke-default: 0.5px;
+    --stroke-thick: 2px;
+}
+
+@theme inline {
+    --stroke-default: var(--stroke-default);
+    --stroke-thick: var(--stroke-thick);
+}

package/dist/css/config/shadows.css

@@ -0,0 +1,15 @@
+@utility box-shadow-button-default {
+    box-shadow: 0 1px 2px 0 var(--drop-shadow-5), 0 0 0 var(--stroke-default) var(--btn-secondary-stroke-default);
+}
+
+@utility box-shadow-button-default-hover {
+    box-shadow: 0 0 0 var(--stroke-default) var(--btn-secondary-stroke-hover);
+}
+
+@utility box-shadow-button-default-pressed {
+    box-shadow: 0 1px 2px 0 var(--transparent), 0 0 0 var(--stroke-default) var(--btn-secondary-stroke-pressed);
+}
+
+@utility box-shadow-medium-10 {
+    box-shadow: 0 16px 32px 0 var(--drop-shadow-10), 0 0 0 var(--stroke-default) var(--stroke-solid-light);
+}

package/dist/css/config/typography/2xl.css

@@ -52,56 +52,49 @@
 /* ========== LINE HEIGHT: NONE ========== */
 .leading-none-regular-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   font-weight: 400;
-  overflow-y: visible;
 }
 
 .leading-none-medium-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   font-weight: 450;
-  overflow-y: visible;
 }
 
 .leading-none-semibold-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   font-weight: 600;
-  overflow-y: visible;
 }
 
 .leading-none-bold-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   font-weight: 700;
-  overflow-y: visible;
 }
 
 .leading-none-italic-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   font-style: italic;
-  overflow-y: visible;
 }
 
 .leading-none-underlined-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   text-decoration: underline;
-  overflow-y: visible;
 }
 
 .leading-none-strikethrough-2xl {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.1;
   letter-spacing: -0.05rem;
   text-decoration: line-through;
-  overflow-y: visible;
 }

package/dist/css/config/typography/3xl.css

@@ -52,56 +52,49 @@
 /* ========== LINE HEIGHT: NONE ========== */
 .leading-none-regular-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   font-weight: 400;
-  overflow-y: visible;
 }
 
 .leading-none-medium-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   font-weight: 450;
-  overflow-y: visible;
 }
 
 .leading-none-semibold-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   font-weight: 600;
-  overflow-y: visible;
 }
 
 .leading-none-bold-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   font-weight: 700;
-  overflow-y: visible;
 }
 
 .leading-none-italic-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   font-style: italic;
-  overflow-y: visible;
 }
 
 .leading-none-underlined-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   text-decoration: underline;
-  overflow-y: visible;
 }
 
 .leading-none-strikethrough-3xl {
   font-size: 2rem;
-  line-height: 2rem;
+  line-height: 1.1;
   letter-spacing: -0.1rem;
   text-decoration: line-through;
-  overflow-y: visible;
 }