@fastwork/xosmoz-css 0.0.27 → 0.0.28

package/dist/all.css

@@ -15,4 +15,5 @@
 
 @import './reset.css';
 @import './atomic.css';
+@import './utilities.css';
 @import './typography.css';

package/dist/atomic.css

@@ -1834,28 +1834,36 @@
   color: var(--xz-color-bg-100) !important;
 }
 
-._cl-bg-200 {
-  color: var(--xz-color-bg-200) !important;
+._cl-surface-100 {
+  color: var(--xz-color-surface-100) !important;
 }
 
-._cl-bg-300 {
-  color: var(--xz-color-bg-300) !important;
+._cl-surface-200 {
+  color: var(--xz-color-surface-200) !important;
 }
 
-._cl-bg-400 {
-  color: var(--xz-color-bg-400) !important;
+._cl-surface-300 {
+  color: var(--xz-color-surface-300) !important;
+}
+
+._cl-surface-400 {
+  color: var(--xz-color-surface-400) !important;
 }
 
 ._cl-fg-100 {
   color: var(--xz-color-fg-100) !important;
 }
 
-._cl-fg-200 {
-  color: var(--xz-color-fg-200) !important;
+._cl-text-100 {
+  color: var(--xz-color-text-100) !important;
+}
+
+._cl-text-200 {
+  color: var(--xz-color-text-200) !important;
 }
 
-._cl-fg-300 {
-  color: var(--xz-color-fg-300) !important;
+._cl-text-300 {
+  color: var(--xz-color-text-300) !important;
 }
 
 ._cl-line-100 {
@@ -1902,16 +1910,16 @@
   color: var(--xz-color-primary-bg-200) !important;
 }
 
-._cl-primary-fg-50 {
-  color: var(--xz-color-primary-fg-50) !important;
-}
-
 ._cl-primary-fg-100 {
   color: var(--xz-color-primary-fg-100) !important;
 }
 
-._cl-primary-fg-200 {
-  color: var(--xz-color-primary-fg-200) !important;
+._cl-primary-text-100 {
+  color: var(--xz-color-primary-text-100) !important;
+}
+
+._cl-primary-text-200 {
+  color: var(--xz-color-primary-text-200) !important;
 }
 
 ._cl-danger-soft-100 {
@@ -1946,16 +1954,16 @@
   color: var(--xz-color-danger-bg-200) !important;
 }
 
-._cl-danger-fg-50 {
-  color: var(--xz-color-danger-fg-50) !important;
-}
-
 ._cl-danger-fg-100 {
   color: var(--xz-color-danger-fg-100) !important;
 }
 
-._cl-danger-fg-200 {
-  color: var(--xz-color-danger-fg-200) !important;
+._cl-danger-text-100 {
+  color: var(--xz-color-danger-text-100) !important;
+}
+
+._cl-danger-text-200 {
+  color: var(--xz-color-danger-text-200) !important;
 }
 
 ._cl-success-soft-100 {
@@ -1990,16 +1998,16 @@
   color: var(--xz-color-success-bg-200) !important;
 }
 
-._cl-success-fg-50 {
-  color: var(--xz-color-success-fg-50) !important;
-}
-
 ._cl-success-fg-100 {
   color: var(--xz-color-success-fg-100) !important;
 }
 
-._cl-success-fg-200 {
-  color: var(--xz-color-success-fg-200) !important;
+._cl-success-text-100 {
+  color: var(--xz-color-success-text-100) !important;
+}
+
+._cl-success-text-200 {
+  color: var(--xz-color-success-text-200) !important;
 }
 
 ._cl-warning-soft-100 {
@@ -2034,16 +2042,16 @@
   color: var(--xz-color-warning-bg-200) !important;
 }
 
-._cl-warning-fg-50 {
-  color: var(--xz-color-warning-fg-50) !important;
-}
-
 ._cl-warning-fg-100 {
   color: var(--xz-color-warning-fg-100) !important;
 }
 
-._cl-warning-fg-200 {
-  color: var(--xz-color-warning-fg-200) !important;
+._cl-warning-text-100 {
+  color: var(--xz-color-warning-text-100) !important;
+}
+
+._cl-warning-text-200 {
+  color: var(--xz-color-warning-text-200) !important;
 }
 
 ._cl-info-soft-100 {
@@ -2078,16 +2086,16 @@
   color: var(--xz-color-info-bg-200) !important;
 }
 
-._cl-info-fg-50 {
-  color: var(--xz-color-info-fg-50) !important;
-}
-
 ._cl-info-fg-100 {
   color: var(--xz-color-info-fg-100) !important;
 }
 
-._cl-info-fg-200 {
-  color: var(--xz-color-info-fg-200) !important;
+._cl-info-text-100 {
+  color: var(--xz-color-info-text-100) !important;
+}
+
+._cl-info-text-200 {
+  color: var(--xz-color-info-text-200) !important;
 }
 
 ._cl-neutral-soft-100 {
@@ -2122,16 +2130,16 @@
   color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._cl-neutral-fg-50 {
-  color: var(--xz-color-neutral-fg-50) !important;
-}
-
 ._cl-neutral-fg-100 {
   color: var(--xz-color-neutral-fg-100) !important;
 }
 
-._cl-neutral-fg-200 {
-  color: var(--xz-color-neutral-fg-200) !important;
+._cl-neutral-text-100 {
+  color: var(--xz-color-neutral-text-100) !important;
+}
+
+._cl-neutral-text-200 {
+  color: var(--xz-color-neutral-text-200) !important;
 }
 
 ._cl-fastwork-100 {
@@ -2591,28 +2599,36 @@
   background-color: var(--xz-color-bg-100) !important;
 }
 
-._bgcl-bg-200 {
-  background-color: var(--xz-color-bg-200) !important;
+._bgcl-surface-100 {
+  background-color: var(--xz-color-surface-100) !important;
+}
+
+._bgcl-surface-200 {
+  background-color: var(--xz-color-surface-200) !important;
 }
 
-._bgcl-bg-300 {
-  background-color: var(--xz-color-bg-300) !important;
+._bgcl-surface-300 {
+  background-color: var(--xz-color-surface-300) !important;
 }
 
-._bgcl-bg-400 {
-  background-color: var(--xz-color-bg-400) !important;
+._bgcl-surface-400 {
+  background-color: var(--xz-color-surface-400) !important;
 }
 
 ._bgcl-fg-100 {
   background-color: var(--xz-color-fg-100) !important;
 }
 
-._bgcl-fg-200 {
-  background-color: var(--xz-color-fg-200) !important;
+._bgcl-text-100 {
+  background-color: var(--xz-color-text-100) !important;
+}
+
+._bgcl-text-200 {
+  background-color: var(--xz-color-text-200) !important;
 }
 
-._bgcl-fg-300 {
-  background-color: var(--xz-color-fg-300) !important;
+._bgcl-text-300 {
+  background-color: var(--xz-color-text-300) !important;
 }
 
 ._bgcl-line-100 {
@@ -2659,16 +2675,16 @@
   background-color: var(--xz-color-primary-bg-200) !important;
 }
 
-._bgcl-primary-fg-50 {
-  background-color: var(--xz-color-primary-fg-50) !important;
-}
-
 ._bgcl-primary-fg-100 {
   background-color: var(--xz-color-primary-fg-100) !important;
 }
 
-._bgcl-primary-fg-200 {
-  background-color: var(--xz-color-primary-fg-200) !important;
+._bgcl-primary-text-100 {
+  background-color: var(--xz-color-primary-text-100) !important;
+}
+
+._bgcl-primary-text-200 {
+  background-color: var(--xz-color-primary-text-200) !important;
 }
 
 ._bgcl-danger-soft-100 {
@@ -2703,16 +2719,16 @@
   background-color: var(--xz-color-danger-bg-200) !important;
 }
 
-._bgcl-danger-fg-50 {
-  background-color: var(--xz-color-danger-fg-50) !important;
-}
-
 ._bgcl-danger-fg-100 {
   background-color: var(--xz-color-danger-fg-100) !important;
 }
 
-._bgcl-danger-fg-200 {
-  background-color: var(--xz-color-danger-fg-200) !important;
+._bgcl-danger-text-100 {
+  background-color: var(--xz-color-danger-text-100) !important;
+}
+
+._bgcl-danger-text-200 {
+  background-color: var(--xz-color-danger-text-200) !important;
 }
 
 ._bgcl-success-soft-100 {
@@ -2747,16 +2763,16 @@
   background-color: var(--xz-color-success-bg-200) !important;
 }
 
-._bgcl-success-fg-50 {
-  background-color: var(--xz-color-success-fg-50) !important;
-}
-
 ._bgcl-success-fg-100 {
   background-color: var(--xz-color-success-fg-100) !important;
 }
 
-._bgcl-success-fg-200 {
-  background-color: var(--xz-color-success-fg-200) !important;
+._bgcl-success-text-100 {
+  background-color: var(--xz-color-success-text-100) !important;
+}
+
+._bgcl-success-text-200 {
+  background-color: var(--xz-color-success-text-200) !important;
 }
 
 ._bgcl-warning-soft-100 {
@@ -2791,16 +2807,16 @@
   background-color: var(--xz-color-warning-bg-200) !important;
 }
 
-._bgcl-warning-fg-50 {
-  background-color: var(--xz-color-warning-fg-50) !important;
-}
-
 ._bgcl-warning-fg-100 {
   background-color: var(--xz-color-warning-fg-100) !important;
 }
 
-._bgcl-warning-fg-200 {
-  background-color: var(--xz-color-warning-fg-200) !important;
+._bgcl-warning-text-100 {
+  background-color: var(--xz-color-warning-text-100) !important;
+}
+
+._bgcl-warning-text-200 {
+  background-color: var(--xz-color-warning-text-200) !important;
 }
 
 ._bgcl-info-soft-100 {
@@ -2835,16 +2851,16 @@
   background-color: var(--xz-color-info-bg-200) !important;
 }
 
-._bgcl-info-fg-50 {
-  background-color: var(--xz-color-info-fg-50) !important;
-}
-
 ._bgcl-info-fg-100 {
   background-color: var(--xz-color-info-fg-100) !important;
 }
 
-._bgcl-info-fg-200 {
-  background-color: var(--xz-color-info-fg-200) !important;
+._bgcl-info-text-100 {
+  background-color: var(--xz-color-info-text-100) !important;
+}
+
+._bgcl-info-text-200 {
+  background-color: var(--xz-color-info-text-200) !important;
 }
 
 ._bgcl-neutral-soft-100 {
@@ -2879,16 +2895,16 @@
   background-color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._bgcl-neutral-fg-50 {
-  background-color: var(--xz-color-neutral-fg-50) !important;
-}
-
 ._bgcl-neutral-fg-100 {
   background-color: var(--xz-color-neutral-fg-100) !important;
 }
 
-._bgcl-neutral-fg-200 {
-  background-color: var(--xz-color-neutral-fg-200) !important;
+._bgcl-neutral-text-100 {
+  background-color: var(--xz-color-neutral-text-100) !important;
+}
+
+._bgcl-neutral-text-200 {
+  background-color: var(--xz-color-neutral-text-200) !important;
 }
 
 ._bgcl-fastwork-100 {
@@ -3348,28 +3364,36 @@
   border-color: var(--xz-color-bg-100) !important;
 }
 
-._bdcl-bg-200 {
-  border-color: var(--xz-color-bg-200) !important;
+._bdcl-surface-100 {
+  border-color: var(--xz-color-surface-100) !important;
+}
+
+._bdcl-surface-200 {
+  border-color: var(--xz-color-surface-200) !important;
 }
 
-._bdcl-bg-300 {
-  border-color: var(--xz-color-bg-300) !important;
+._bdcl-surface-300 {
+  border-color: var(--xz-color-surface-300) !important;
 }
 
-._bdcl-bg-400 {
-  border-color: var(--xz-color-bg-400) !important;
+._bdcl-surface-400 {
+  border-color: var(--xz-color-surface-400) !important;
 }
 
 ._bdcl-fg-100 {
   border-color: var(--xz-color-fg-100) !important;
 }
 
-._bdcl-fg-200 {
-  border-color: var(--xz-color-fg-200) !important;
+._bdcl-text-100 {
+  border-color: var(--xz-color-text-100) !important;
 }
 
-._bdcl-fg-300 {
-  border-color: var(--xz-color-fg-300) !important;
+._bdcl-text-200 {
+  border-color: var(--xz-color-text-200) !important;
+}
+
+._bdcl-text-300 {
+  border-color: var(--xz-color-text-300) !important;
 }
 
 ._bdcl-line-100 {
@@ -3416,16 +3440,16 @@
   border-color: var(--xz-color-primary-bg-200) !important;
 }
 
-._bdcl-primary-fg-50 {
-  border-color: var(--xz-color-primary-fg-50) !important;
-}
-
 ._bdcl-primary-fg-100 {
   border-color: var(--xz-color-primary-fg-100) !important;
 }
 
-._bdcl-primary-fg-200 {
-  border-color: var(--xz-color-primary-fg-200) !important;
+._bdcl-primary-text-100 {
+  border-color: var(--xz-color-primary-text-100) !important;
+}
+
+._bdcl-primary-text-200 {
+  border-color: var(--xz-color-primary-text-200) !important;
 }
 
 ._bdcl-danger-soft-100 {
@@ -3460,16 +3484,16 @@
   border-color: var(--xz-color-danger-bg-200) !important;
 }
 
-._bdcl-danger-fg-50 {
-  border-color: var(--xz-color-danger-fg-50) !important;
-}
-
 ._bdcl-danger-fg-100 {
   border-color: var(--xz-color-danger-fg-100) !important;
 }
 
-._bdcl-danger-fg-200 {
-  border-color: var(--xz-color-danger-fg-200) !important;
+._bdcl-danger-text-100 {
+  border-color: var(--xz-color-danger-text-100) !important;
+}
+
+._bdcl-danger-text-200 {
+  border-color: var(--xz-color-danger-text-200) !important;
 }
 
 ._bdcl-success-soft-100 {
@@ -3504,16 +3528,16 @@
   border-color: var(--xz-color-success-bg-200) !important;
 }
 
-._bdcl-success-fg-50 {
-  border-color: var(--xz-color-success-fg-50) !important;
-}
-
 ._bdcl-success-fg-100 {
   border-color: var(--xz-color-success-fg-100) !important;
 }
 
-._bdcl-success-fg-200 {
-  border-color: var(--xz-color-success-fg-200) !important;
+._bdcl-success-text-100 {
+  border-color: var(--xz-color-success-text-100) !important;
+}
+
+._bdcl-success-text-200 {
+  border-color: var(--xz-color-success-text-200) !important;
 }
 
 ._bdcl-warning-soft-100 {
@@ -3548,16 +3572,16 @@
   border-color: var(--xz-color-warning-bg-200) !important;
 }
 
-._bdcl-warning-fg-50 {
-  border-color: var(--xz-color-warning-fg-50) !important;
-}
-
 ._bdcl-warning-fg-100 {
   border-color: var(--xz-color-warning-fg-100) !important;
 }
 
-._bdcl-warning-fg-200 {
-  border-color: var(--xz-color-warning-fg-200) !important;
+._bdcl-warning-text-100 {
+  border-color: var(--xz-color-warning-text-100) !important;
+}
+
+._bdcl-warning-text-200 {
+  border-color: var(--xz-color-warning-text-200) !important;
 }
 
 ._bdcl-info-soft-100 {
@@ -3592,16 +3616,16 @@
   border-color: var(--xz-color-info-bg-200) !important;
 }
 
-._bdcl-info-fg-50 {
-  border-color: var(--xz-color-info-fg-50) !important;
-}
-
 ._bdcl-info-fg-100 {
   border-color: var(--xz-color-info-fg-100) !important;
 }
 
-._bdcl-info-fg-200 {
-  border-color: var(--xz-color-info-fg-200) !important;
+._bdcl-info-text-100 {
+  border-color: var(--xz-color-info-text-100) !important;
+}
+
+._bdcl-info-text-200 {
+  border-color: var(--xz-color-info-text-200) !important;
 }
 
 ._bdcl-neutral-soft-100 {
@@ -3636,16 +3660,16 @@
   border-color: var(--xz-color-neutral-bg-200) !important;
 }
 
-._bdcl-neutral-fg-50 {
-  border-color: var(--xz-color-neutral-fg-50) !important;
-}
-
 ._bdcl-neutral-fg-100 {
   border-color: var(--xz-color-neutral-fg-100) !important;
 }
 
-._bdcl-neutral-fg-200 {
-  border-color: var(--xz-color-neutral-fg-200) !important;
+._bdcl-neutral-text-100 {
+  border-color: var(--xz-color-neutral-text-100) !important;
+}
+
+._bdcl-neutral-text-200 {
+  border-color: var(--xz-color-neutral-text-200) !important;
 }
 
 ._bdcl-fastwork-100 {

package/dist/component.css

@@ -1 +1 @@
-:root{--xz-button-font-family: var( --xz-font-family-primary, system-ui, sans-serif );--xz-button-font-weight: 600;--xz-button-border-radius: 0.5rem;--xz-button-small-height: 2rem;--xz-button-small-font-size: 0.8125rem;--xz-button-medium-height: 2.5rem;--xz-button-medium-font-size: 0.875rem;--xz-button-large-height: 3rem;--xz-button-large-font-size: 1rem}.xz-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--xz-button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--xz-button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg-50);outline:none;font-weight:var(--xz-button-font-weight);font-size:var(--xz-button-medium-font-size);font-family:var(--xz-button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg-50);border-right-color:var(--xz-color-primary-fg-50);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button.is-size-small{min-height:var(--xz-button-small-height);padding:0 1rem;font-size:var(--xz-button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--xz-button-medium-height);padding:0 1.125rem;font-size:var(--xz-button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--xz-button-large-height);padding:0 1.25rem;font-size:var(--xz-button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 .175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg-50);border-right-color:var(--xz-color-danger-fg-50)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 .175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg-50);border-right-color:var(--xz-color-success-fg-50)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-fg-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-fg-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-fg-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-fg-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-fg-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-fg-200);border-right-color:var(--xz-color-fg-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-bg-100);color:var(--xz-color-primary-fg-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 .175rem var(--xz-color-primary-line-200)}}@media(hover: hover){.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading{color:rgba(0,0,0,0)}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+.xz-button{--button-font-family: var(--xz-font-family-primary, system-ui, sans-serif);--button-font-weight: 600;--button-border-radius: 0.5rem;--button-small-height: 2rem;--button-small-font-size: 0.8125rem;--button-medium-height: 2.5rem;--button-medium-font-size: 0.875rem;--button-large-height: 3rem;--button-large-font-size: 1rem;position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;min-height:var(--button-medium-height);padding:0 1.125rem;border:none;border-radius:var(--button-border-radius);background:var(--xz-color-primary-bg-100);color:var(--xz-color-primary-fg-100);outline:none;font-weight:var(--button-font-weight);font-size:var(--button-medium-font-size);font-family:var(--button-font-family);line-height:100%;cursor:pointer;user-select:none;transition:all .16s ease-in-out}@media(hover: hover){.xz-button:hover::before{background:var(--xz-color-black-alpha-100)}.xz-button:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button>span{z-index:1}.xz-button .start-icon,.xz-button .end-icon{display:flex;align-items:center;min-width:1.375rem}.xz-button .end-icon{justify-content:flex-end}.xz-button::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;transition:all .16s ease-in-out}.xz-button.is-size-small{min-height:var(--button-small-height);padding:0 1rem;font-size:var(--button-small-font-size)}.xz-button.is-size-small .start-icon,.xz-button.is-size-small .end-icon{min-width:1.125rem}.xz-button.is-size-medium{min-height:var(--button-medium-height);padding:0 1.125rem;font-size:var(--button-medium-font-size)}.xz-button.is-size-medium .start-icon,.xz-button.is-size-medium .end-icon{min-width:1.375rem}.xz-button.is-size-large{min-height:var(--button-large-height);padding:0 1.25rem;font-size:var(--button-large-font-size)}.xz-button.is-size-large .start-icon,.xz-button.is-size-large .end-icon{min-width:1.625rem}.xz-button.is-variant-danger{background:var(--xz-color-danger-bg-100)}@media(hover: hover){.xz-button.is-variant-danger:focus{box-shadow:0 0 0 0.175rem var(--xz-color-danger-line-200)}}.xz-button.is-variant-danger.is-loading::after{border-top-color:var(--xz-color-danger-fg-100);border-right-color:var(--xz-color-danger-fg-100)}.xz-button.is-variant-success{background:var(--xz-color-success-bg-100)}@media(hover: hover){.xz-button.is-variant-success:focus{box-shadow:0 0 0 0.175rem var(--xz-color-success-line-200)}}.xz-button.is-variant-success.is-loading::after{border-top-color:var(--xz-color-success-fg-100);border-right-color:var(--xz-color-success-fg-100)}.xz-button.is-variant-secondary{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-primary-text-100)}@media(hover: hover){.xz-button.is-variant-secondary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-primary-text-100)}.xz-button.is-variant-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-secondary.is-loading::after{border-top-color:var(--xz-color-primary-text-100);border-right-color:var(--xz-color-primary-text-100)}.xz-button.is-variant-outline{border:1px solid var(--xz-color-line-100);background:rgba(0,0,0,0);color:var(--xz-color-text-200)}@media(hover: hover){.xz-button.is-variant-outline:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-outline:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-text-100)}.xz-button.is-variant-outline:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-outline.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-tertiary{border:unset;background:var(--xz-color-neutral-soft-100);color:var(--xz-color-text-100)}@media(hover: hover){.xz-button.is-variant-tertiary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-tertiary.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-ghost{border:unset;background:rgba(0,0,0,0);color:var(--xz-color-text-200)}@media(hover: hover){.xz-button.is-variant-ghost:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-ghost.is-loading::after{border-top-color:var(--xz-color-text-200);border-right-color:var(--xz-color-text-200)}.xz-button.is-variant-white{border:1px solid var(--xz-color-line-100);background:var(--xz-color-surface-100);color:var(--xz-color-primary-text-100)}@media(hover: hover){.xz-button.is-variant-white:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}}.xz-button.is-variant-white.is-loading::after{border-top-color:var(--xz-color-primary-text-100);border-right-color:var(--xz-color-primary-text-100)}.xz-button.is-variant-white-secondary{border:1px solid var(--xz-color-white-alpha-1000);background:rgba(0,0,0,0);color:var(--xz-color-white-alpha-1000)}@media(hover: hover){.xz-button.is-variant-white-secondary:focus{box-shadow:0 0 0 0.175rem var(--xz-color-primary-line-200)}.xz-button.is-variant-white-secondary:hover{border:1px solid var(--xz-color-line-200);color:var(--xz-color-white-alpha-1000)}.xz-button.is-variant-white-secondary:hover::before{background:var(--xz-color-black-alpha-100)}}.xz-button.is-variant-white-secondary.is-loading::after{border-top-color:var(--xz-color-white-alpha-1000);border-right-color:var(--xz-color-white-alpha-1000)}.xz-button.is-loading{color:rgba(0,0,0,0);pointer-events:none}.xz-button.is-loading::after{content:"";position:absolute;right:0;left:0;width:1em;height:1em;margin:auto;border:2px solid;border-top-color:var(--xz-color-primary-fg-100);border-right-color:var(--xz-color-primary-fg-100);border-radius:999px;animation:button-loading-spin .48s infinite linear}.xz-button[disabled],.xz-button.is-disabled{opacity:.6;cursor:not-allowed}.xz-button.is-fluid{width:100%}.xz-button.is-pill{border-radius:999px}.xz-button.is-square{aspect-ratio:1/1}@keyframes button-loading-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

package/dist/reset.css

@@ -6,7 +6,7 @@
 html {
   font-size: 100%;
   font-family: var(
-    --font-family-primary,
+    --xz-font-family-primary,
     -apple-system,
     system-ui,
     BlinkMacSystemFont,
@@ -15,7 +15,7 @@ html {
     'Helvetica Neue',
     sans-serif
   );
-  line-height: 1.15;
+  line-height: 1.25;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
@@ -27,7 +27,7 @@ body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  color: var(--color-text-default-100, hsl(215deg 15% 28% / 96%));
+  color: var(--xz-color-text-100);
 }
 
 main {
@@ -43,7 +43,7 @@ main {
 p {
   margin: 0;
   padding: 0;
-  font-family: var(--font-family-primary);
+  font-family: var(--xz-font-family-primary);
   line-height: 1.65;
 }
 
@@ -56,7 +56,7 @@ h5,
 h6 {
   margin: 0;
   padding: 0;
-  line-height: 1.15;
+  line-height: 1.25;
 }
 
 pre {
@@ -241,7 +241,7 @@ hr {
   height: 1px;
   margin: 0;
   border: none;
-  background: var(--color-neutral-200);
+  background: var(--xz-color-line-200);
 }
 
 img,
@@ -251,7 +251,7 @@ object {
 }
 
 progress[value] {
-  --color: hsl(var(--hsl-primary));
+  --color: var(--xz-color-primary-text-100);
 
   width: 100%;
   border-radius: 10em;

package/dist/utilities.css

@@ -0,0 +1 @@
+@media(min-width: 640px){.lo-container{grid-template-columns:1fr 600px 1fr}}@media(min-width: 768px){.lo-container{grid-template-columns:1fr 728px 1fr}}@media(min-width: 1024px){.lo-container{grid-template-columns:1fr 984px 1fr}}@media(min-width: 1280px){.lo-container{grid-template-columns:1fr 1240px 1fr}}@media(min-width: 1536px){.lo-container{grid-template-columns:1fr 1496px 1fr}}.lo-container{display:grid;grid-template-rows:auto;grid-template-columns:12px minmax(0, auto) 12px;width:100%}.lo-container>*{grid-column:2/3}.lo-desktop-container{width:1064px;margin-right:auto;margin-left:auto}.lo-1-11{display:grid;grid-template-columns:1fr 11fr;min-width:0;min-height:0}.lo-2-10{display:grid;grid-template-columns:2fr 10fr;min-width:0;min-height:0}.lo-3-9{display:grid;grid-template-columns:3fr 9fr;min-width:0;min-height:0}.lo-4-8{display:grid;grid-template-columns:4fr 8fr;min-width:0;min-height:0}.lo-5-7{display:grid;grid-template-columns:5fr 7fr;min-width:0;min-height:0}.lo-7-5{display:grid;grid-template-columns:7fr 5fr;min-width:0;min-height:0}.lo-8-4{display:grid;grid-template-columns:8fr 4fr;min-width:0;min-height:0}.lo-9-3{display:grid;grid-template-columns:9fr 3fr;min-width:0;min-height:0}.lo-10-2{display:grid;grid-template-columns:10fr 2fr;min-width:0;min-height:0}.lo-11-1{display:grid;grid-template-columns:11fr 1fr;min-width:0;min-height:0}.lo-1{display:grid;grid-template-columns:repeat(12, 1fr);min-width:0;min-height:0}.lo-2{display:grid;grid-template-columns:repeat(6, 1fr);min-width:0;min-height:0}.lo-3{display:grid;grid-template-columns:repeat(4, 1fr);min-width:0;min-height:0}.lo-4{display:grid;grid-template-columns:repeat(3, 1fr);min-width:0;min-height:0}.lo-6{display:grid;grid-template-columns:repeat(2, 1fr);min-width:0;min-height:0}.lo-12{display:grid;grid-template-columns:1fr;min-width:0;min-height:0}.lo-fluid-right{display:grid;grid-template-columns:max-content 1fr;min-width:0;min-height:0}.lo-fluid-left{display:grid;grid-template-columns:1fr max-content;min-width:0;min-height:0}.lo-fluid-center{display:grid;grid-template-columns:max-content 1fr max-content;min-width:0;min-height:0}.u-scroll-container{flex-grow:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--xz-color-line-200) rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar{width:4px}.u-scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.u-scroll-container::-webkit-scrollbar-thumb{border-radius:999px;background:var(--xz-color-line-200)}.u-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--xz-color-line-300)}[data-theme=dark] .u-theme-image{filter:opacity(0.5);mix-blend-mode:color-burn}.u-all-tap-highlight-transparent *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.u-1by1{aspect-ratio:1/1}.u-3by2{aspect-ratio:3/2}.u-4by3{aspect-ratio:4/3}.u-2by1{aspect-ratio:2/1}.u-16by9{aspect-ratio:16/9}.u-16by10{aspect-ratio:16/10}button.unstyled{all:unset;box-sizing:border-box;cursor:pointer}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fastwork/xosmoz-css",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"description": "CSS utility classes and component styles for Xosmoz design system",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
@@ -16,6 +16,7 @@
 		"./component.css": "./dist/component.css",
 		"./typography.css": "./dist/typography.css",
 		"./radius.css": "./dist/radius.css",
+		"./utilities.css": "./dist/utilities.css",
 		"./index.css": "./dist/index.css",
 		"./all.css": "./dist/all.css"
 	},
@@ -35,7 +36,7 @@
 		"clean": "rm -rf dist"
 	},
 	"dependencies": {
-		"@fastwork/xosmoz-theme": "^0.0.41"
+		"@fastwork/xosmoz-theme": "^0.22.0"
 	},
 	"devDependencies": {
 		"@types/node": "^20.11.0",