@cck-ui/core 0.4.8 → 0.4.10

package/styles/global.css

@@ -1,56 +1,40 @@
-[data-respect-reduced-motion] {
-  @media (prefers-reduced-motion: reduce) {
-    [data-reduce-motion] {
+@media (prefers-reduced-motion: reduce) {
+    [data-respect-reduced-motion] [data-reduce-motion] {
       transition: none;
       animation: none;
     }
   }
-}
 
-.c-light-hidden {
-  @mixin light {
+[data-c-color-scheme='light'] .c-light-hidden {
     display: none;
-  }
 }
 
-.c-dark-hidden {
-  @mixin dark {
+[data-c-color-scheme='dark'] .c-dark-hidden {
     display: none;
-  }
 }
 
-.c-focus-auto {
-  &:focus-visible {
+.c-focus-auto:focus-visible {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-always {
-  &:focus {
+.c-focus-always:focus {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-never {
-  &:focus {
+.c-focus-never:focus {
     outline: none;
   }
-}
 
-.c-active {
-  &:active {
-    transform: translateY(rem(1px));
+.c-active:active {
+    transform: translateY(calc(0.0625rem * var(--c-scale)));
   }
 
-  fieldset:disabled &:active {
+fieldset:disabled .c-active:active {
     transform: none;
   }
-}
 
-.c-rotate-rtl {
-  @mixin where-rtl {
+:where([dir="rtl"]) .c-rotate-rtl {
     transform: rotate(180deg);
-  }
 }

package/styles/global.layer.css

@@ -1,57 +1,41 @@
-@layer cck {[data-respect-reduced-motion] {
-  @media (prefers-reduced-motion: reduce) {
-    [data-reduce-motion] {
+@layer cck {@media (prefers-reduced-motion: reduce) {
+    [data-respect-reduced-motion] [data-reduce-motion] {
       transition: none;
       animation: none;
     }
   }
-}
 
-.c-light-hidden {
-  @mixin light {
+[data-c-color-scheme='light'] .c-light-hidden {
     display: none;
-  }
 }
 
-.c-dark-hidden {
-  @mixin dark {
+[data-c-color-scheme='dark'] .c-dark-hidden {
     display: none;
-  }
 }
 
-.c-focus-auto {
-  &:focus-visible {
+.c-focus-auto:focus-visible {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-always {
-  &:focus {
+.c-focus-always:focus {
     outline: 2px solid var(--c-primary-color-filled);
-    outline-offset: 2px;
+    outline-offset: calc(0.125rem * var(--c-scale));
   }
-}
 
-.c-focus-never {
-  &:focus {
+.c-focus-never:focus {
     outline: none;
   }
-}
 
-.c-active {
-  &:active {
-    transform: translateY(rem(1px));
+.c-active:active {
+    transform: translateY(calc(0.0625rem * var(--c-scale)));
   }
 
-  fieldset:disabled &:active {
+fieldset:disabled .c-active:active {
     transform: none;
   }
-}
 
-.c-rotate-rtl {
-  @mixin where-rtl {
+:where([dir="rtl"]) .c-rotate-rtl {
     transform: rotate(180deg);
-  }
 }
 }

package/styles/group.css

@@ -5,11 +5,9 @@
   justify-content: var(--group-justify, flex-start);
   align-items: var(--group-align, center);
   gap: var(--group-gap, var(--c-spacing-md));
+}
 
-  &:where([data-grow]) {
-    & > * {
+  .m_c9afe370:where([data-grow]) > * {
       flex-grow: 1;
       max-width: var(--group-child-width);
     }
-  }
-}

package/styles/group.layer.css

@@ -5,12 +5,10 @@
   justify-content: var(--group-justify, flex-start);
   align-items: var(--group-align, center);
   gap: var(--group-gap, var(--c-spacing-md));
+}
 
-  &:where([data-grow]) {
-    & > * {
+  .m_c9afe370:where([data-grow]) > * {
       flex-grow: 1;
       max-width: var(--group-child-width);
     }
-  }
-}
 }

package/styles/loader.css

@@ -1,9 +1,9 @@
 .m_a244865c {
-  --loader-size-xs: 18px;
-  --loader-size-sm: 22px;
-  --loader-size-md: 36px;
-  --loader-size-lg: 44px;
-  --loader-size-xl: 58px;
+  --loader-size-xs: calc(1.125rem * var(--c-scale));
+  --loader-size-sm: calc(1.375rem * var(--c-scale));
+  --loader-size-md: calc(2.25rem * var(--c-scale));
+  --loader-size-lg: calc(2.75rem * var(--c-scale));
+  --loader-size-xl: calc(3.625rem * var(--c-scale));
   --loader-size: var(--loader-size-md);
   --loader-color: var(--c-primary-color-filled);
 }
@@ -39,20 +39,20 @@
   flex: 1;
   background: var(--loader-color);
   animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
-  border-radius: 2px;
+  border-radius: calc(0.125rem * var(--c-scale));
+}
 
-  &:nth-of-type(1) {
+.m_919edf59:nth-of-type(1) {
     animation-delay: -240ms;
   }
 
-  &:nth-of-type(2) {
+.m_919edf59:nth-of-type(2) {
     animation-delay: -120ms;
   }
 
-  &:nth-of-type(3) {
+.m_919edf59:nth-of-type(3) {
     animation-delay: 0;
   }
-}
 
 @keyframes m_24cd2081 {
   0%,
@@ -83,11 +83,11 @@
   border-radius: 50%;
   background: var(--loader-color);
   animation: m_24cd2081 0.8s infinite linear;
+}
 
-  &:nth-child(2) {
+.m_919ee88f:nth-child(2) {
     animation-delay: 0.4s;
   }
-}
 
 @keyframes m_1309882b {
   0% {
@@ -103,17 +103,17 @@
   display: inline-block;
   width: var(--loader-size);
   height: var(--loader-size);
+}
 
-  &::after {
+.m_c87fd4ff::after {
     content: '';
     display: block;
     width: var(--loader-size);
     height: var(--loader-size);
-    border-radius: 10000px;
+    border-radius: calc(625rem * var(--c-scale));
     border-width: calc(var(--loader-size) / 8);
     border-style: solid;
     border-color: var(--loader-color) var(--loader-color) var(--loader-color)
       transparent;
     animation: m_1309882b 1.2s linear infinite;
   }
-}

package/styles/loader.layer.css

@@ -1,9 +1,9 @@
 @layer cck {.m_a244865c {
-  --loader-size-xs: 18px;
-  --loader-size-sm: 22px;
-  --loader-size-md: 36px;
-  --loader-size-lg: 44px;
-  --loader-size-xl: 58px;
+  --loader-size-xs: calc(1.125rem * var(--c-scale));
+  --loader-size-sm: calc(1.375rem * var(--c-scale));
+  --loader-size-md: calc(2.25rem * var(--c-scale));
+  --loader-size-lg: calc(2.75rem * var(--c-scale));
+  --loader-size-xl: calc(3.625rem * var(--c-scale));
   --loader-size: var(--loader-size-md);
   --loader-color: var(--c-primary-color-filled);
 }
@@ -39,20 +39,20 @@
   flex: 1;
   background: var(--loader-color);
   animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
-  border-radius: 2px;
+  border-radius: calc(0.125rem * var(--c-scale));
+}
 
-  &:nth-of-type(1) {
+.m_919edf59:nth-of-type(1) {
     animation-delay: -240ms;
   }
 
-  &:nth-of-type(2) {
+.m_919edf59:nth-of-type(2) {
     animation-delay: -120ms;
   }
 
-  &:nth-of-type(3) {
+.m_919edf59:nth-of-type(3) {
     animation-delay: 0;
   }
-}
 
 @keyframes m_24cd2081 {
   0%,
@@ -83,11 +83,11 @@
   border-radius: 50%;
   background: var(--loader-color);
   animation: m_24cd2081 0.8s infinite linear;
+}
 
-  &:nth-child(2) {
+.m_919ee88f:nth-child(2) {
     animation-delay: 0.4s;
   }
-}
 
 @keyframes m_1309882b {
   0% {
@@ -103,18 +103,18 @@
   display: inline-block;
   width: var(--loader-size);
   height: var(--loader-size);
+}
 
-  &::after {
+.m_c87fd4ff::after {
     content: '';
     display: block;
     width: var(--loader-size);
     height: var(--loader-size);
-    border-radius: 10000px;
+    border-radius: calc(625rem * var(--c-scale));
     border-width: calc(var(--loader-size) / 8);
     border-style: solid;
     border-color: var(--loader-color) var(--loader-color) var(--loader-color)
       transparent;
     animation: m_1309882b 1.2s linear infinite;
   }
-}
 }

package/styles/text.css

@@ -7,31 +7,32 @@
   text-wrap: var(--text-text-wrap, var(--c-text-wrap));
   margin: 0;
   padding: 0;
+}
 
-  &:where([data-truncate]) {
+  .m_3f669182:where([data-truncate]) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  &:where([data-truncate='start']) {
+  .m_3f669182:where([data-truncate='start']) {
     direction: rtl;
     text-align: end;
+  }
 
-    @mixin where-rtl {
+  :where([dir="rtl"]) .m_3f669182:where([data-truncate='start']) {
       direction: ltr;
       text-align: start;
-    }
-  }
+}
 
-  &:where([data-variant='gradient']) {
+  .m_3f669182:where([data-variant='gradient']) {
     background-image: var(--text-gradient);
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
   }
 
-  &:where([data-line-clamp]) {
+  .m_3f669182:where([data-line-clamp]) {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -39,13 +40,12 @@
     -webkit-box-orient: vertical;
   }
 
-  &:where([data-inherit]) {
+  .m_3f669182:where([data-inherit]) {
     line-height: inherit;
     font-weight: inherit;
     font-size: inherit;
   }
 
-  &:where([data-inline]) {
+  .m_3f669182:where([data-inline]) {
     line-height: 1;
   }
-}

package/styles/text.layer.css

@@ -7,31 +7,32 @@
   text-wrap: var(--text-text-wrap, var(--c-text-wrap));
   margin: 0;
   padding: 0;
+}
 
-  &:where([data-truncate]) {
+  .m_3f669182:where([data-truncate]) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  &:where([data-truncate='start']) {
+  .m_3f669182:where([data-truncate='start']) {
     direction: rtl;
     text-align: end;
+  }
 
-    @mixin where-rtl {
+  :where([dir="rtl"]) .m_3f669182:where([data-truncate='start']) {
       direction: ltr;
       text-align: start;
-    }
-  }
+}
 
-  &:where([data-variant='gradient']) {
+  .m_3f669182:where([data-variant='gradient']) {
     background-image: var(--text-gradient);
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
   }
 
-  &:where([data-line-clamp]) {
+  .m_3f669182:where([data-line-clamp]) {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -39,14 +40,13 @@
     -webkit-box-orient: vertical;
   }
 
-  &:where([data-inherit]) {
+  .m_3f669182:where([data-inherit]) {
     line-height: inherit;
     font-weight: inherit;
     font-size: inherit;
   }
 
-  &:where([data-inline]) {
+  .m_3f669182:where([data-inline]) {
     line-height: 1;
   }
-}
 }