winduum 2.0.0-next.1 → 2.0.0-next.2

package/src/components/tooltip/default.css

@@ -1,27 +1,27 @@
-.tooltip {
+.x-tooltip {
   position: relative;
   display: inline-block;
 
   &::before {
     --tw-content: attr(aria-label);
 
+    background-color: var(--x-tooltip-background-color);
+    color: var(--x-tooltip-color);
+    border-radius: var(--x-tooltip-border-radius);
+    font-size: var(--x-tooltip-font-size);
+    padding: var(--x-tooltip-padding-block) var(--x-tooltip-padding-inline);
+    z-index: var(--x-tooltip-z-index, var(--z-index-20));
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
     content: var(--tw-content);
     opacity: var(--tw-opacity);
     visibility: var(--tw-visibility);
     transform:
       translate(var(--tw-translate-x), var(--tw-translate-y))
       scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    transition-property: var(--default-transition-property);
-    transition-timing-function: var(--transition-timing-function-in-out);
-    transition-duration: var(--default-transition-duration);
     will-change: transform;
-    background-color: var(--tooltip-bg);
-    color: var(--tooltip-color);
-    border-radius: var(--tooltip-border-radius);
-    font-size: var(--tooltip-font-size);
-    padding: var(--tooltip-py) var(--tooltip-px);
-    z-index: var(--z-index-20);
-    width: max-content;
+    inline-size: max-content;
     position: absolute;
     pointer-events: none;
   }
@@ -30,7 +30,7 @@
     &::before {
       --tw-translate-x: -50%;
 
-      margin-block: var(--tooltip-margin-block);
+      margin-block: var(--x-tooltip-margin-block);
       inset-inline-start: 50%;
     }
   }
@@ -39,7 +39,7 @@
     &::before {
       --tw-translate-y: -50%;
 
-      margin-inline: var(--tooltip-margin-inline);
+      margin-inline: var(--x-tooltip-margin-inline);
       inset-block-start: 50%;
     }
   }
@@ -73,8 +73,8 @@
   }
 
   &:not(:hover, :focus)::before {
-    --tw-scale-x: var(--tooltip-scale-x);
-    --tw-scale-y: var(--tooltip-scale-y);
+    --tw-scale-x: var(--x-tooltip-scale-x);
+    --tw-scale-y: var(--x-tooltip-scale-y);
     --tw-opacity: 0;
     --tw-visibility: hidden;
   }

package/src/components/tooltip/index.css

@@ -1,2 +1,2 @@
-@import "default-props.css";
+@import "props/default.css";
 @import "default.css";

package/src/components/tooltip/props/default.css

@@ -0,0 +1,12 @@
+:root, :host {
+  --x-tooltip-background-color: var(--color-main);
+  --x-tooltip-color: var(--color-main-foreground);
+  --x-tooltip-border-radius: var(--radius-md);
+  --x-tooltip-font-size: var(--font-size-sm);
+  --x-tooltip-padding-block: var(--spacing-xs);
+  --x-tooltip-padding-inline: var(--spacing-sm);
+  --x-tooltip-margin-block: var(--spacing-xs);
+  --x-tooltip-margin-inline: var(--spacing-xs);
+  --x-tooltip-scale-x: 0.75;
+  --x-tooltip-scale-y: 0.75;
+}

package/src/components/tooltip/readme.md

@@ -14,8 +14,8 @@ Include CSS either globally or to your component _([you can't use TailwindCSS la
 or modular (you can use your own props or CSS)
 
 ```css
+@import "winduum/src/components/tooltip/props/default.css" layer(components);
 @import "winduum/src/components/tooltip/default.css" layer(components);
-@import "winduum/src/components/tooltip/default-props.css" layer(components);
 ```
 
 ### Local imports
@@ -23,7 +23,7 @@ By default, imports are directly from `npm` so you can leverage updates.
 You can also copy and paste the code from this directory to your project and remap the imports to local.
 
 ```css
-@import "@/components/ui/tooltip/assets/index.css" layer(components);
+@import "@/components/tooltip/assets/index.css" layer(components);
 ```
 
 ### Docs

package/src/utilities/divider.css

@@ -6,19 +6,29 @@
   align-self: stretch;
 
   &:where(:not(:empty)) {
-    gap: var(--spacing-md);
+    gap: var(--divider-gap, var(--spacing-md));
   }
 
   &::before, &::after {
     content: "";
     flex-grow: 1;
-    border-block-start: 1px solid color-mix(in var(--default-color-space), var(--color-accent) 15%, transparent);
+    border-block-start:
+      1px solid color-mix(
+        in var(--divider-border-block-color-space, srgb),
+        var(--divider-border-block-color, var(--color-accent)) var(--divider-border-block-color-opacity, 15%),
+        var(--divider-border-block-color-mix, transparent)
+      );
   }
 
   &:where(.flex-col) {
     &::before, &::after {
       border-block-start: 0;
-      border-inline-start: 1px solid color-mix(in var(--default-color-space), var(--color-accent) 15%, transparent);
+      border-inline-start:
+        1px solid color-mix(
+          in var(--divider-border-inline-color-space, srgb),
+          var(--divider-border-inline-color, var(--color-accent)) var(--divider-border-inline-color-opacity, 15%),
+          var(--divider-border-inline-color-mix, transparent)
+        );
     }
   }
 }

package/src/utilities/ripple/index.css

@@ -1,10 +1,15 @@
 .ripple {
-  background-color: color-mix(in var(--default-color-space), currentcolor 40%, transparent);
+  inline-size: var(--ripple-size, 2rem);
+  block-size: var(--ripple-size, 2rem);
+  background-color:
+    color-mix(
+      in var(--ripple-background-color-space, srgb),
+      var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
+      var(--ripple-background-color-mix, transparent)
+    );
+  animation-duration: var(--ripple-animation-duration, 1s);
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  animation-duration: 1s;
   pointer-events: none;
-  width: 2rem;
-  height: 2rem;
 }

package/src/utilities/skeleton/default.css

@@ -1,5 +1,12 @@
 .skeleton {
-  background: linear-gradient(to right, var(--skeleton-from), var(--skeleton-to), var(--skeleton-to), var(--skeleton-from));
+  background:
+    linear-gradient(
+      to right,
+      var(--skeleton-gradient-from),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-from)
+    );
   opacity: var(--skeleton-opacity);
   transition: var(--transition-opacity);
   animation: move-indeterminate 1.5s linear infinite;

package/src/utilities/skeleton/props/default.css

@@ -1,5 +1,5 @@
 :root, :host {
-  --skeleton-opacity: 0.5;
-  --skeleton-from: color-mix(in var(--default-color-space), var(--color-body) 50%, var(--color-main));
-  --skeleton-to: color-mix(in var(--default-color-space), var(--color-body) 80%, var(--color-main));
+  --skeleton-opacity: 50%;
+  --skeleton-gradient-from: color-mix(in var(--default-color-space), var(--color-body) 50%, var(--color-main));
+  --skeleton-gradient-to: color-mix(in var(--default-color-space), var(--color-body) 80%, var(--color-main));
 }

package/src/utilities/swap/default.css

@@ -1,13 +1,13 @@
 .swap {
-  display: inline-grid;
   cursor: var(--cursor-pointer, pointer);
+  display: inline-grid;
 
   > :where(*) {
     transition-property: var(--default-transition-property);
     transition-timing-function: var(--transition-timing-function-in-out);
     transition-duration: var(--default-transition-duration);
     grid-area: 1/-1;
-    opacity: 0;
+    opacity: 0%;
   }
 
   > [aria-hidden="false"],
@@ -15,6 +15,6 @@
   input:indeterminate ~ :where(*:nth-last-child(2)),
   input:checked ~ :where(*:last-child) {
     transform: none;
-    opacity: 1;
+    opacity: 100%;
   }
 }

package/src/components/badge/default-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --badge-font-size: var(--font-size-xs);
-  --badge-height: 1.5rem;
-  --badge-py: 0;
-  --badge-px: 0.5rem;
-  --badge-gap: var(--spacing-xs);
-  --badge-border-radius: var(--radius-lg);
-}

package/src/components/breadcrumb/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --breadcrumb-marker-size: 0.875rem;
-  --breadcrumb-marker: var(--mask-chevron-right);
-  --breadcrumb-gap: var(--spacing-xs);
-}

package/src/components/card/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --card-py: var(--spacing-2xl);
-  --card-px: var(--spacing-3xl);
-}

package/src/components/check/default-props.css

@@ -1,13 +0,0 @@
-:root, :host {
-  --check-size: 1.25rem;
-  --check-icon-size: 1.125rem;
-  --check-icon: var(--mask-check);
-  --check-gap: var(--spacing-md);
-  --check-font-size: var(--font-size-sm);
-  --check-line-height: calc(1em + 0.25rem);
-  --check-border-radius: var(--radius-md);
-  --check-border-width: 1px;
-  --check-bg: currentColor;
-  --check-border-color: currentColor;
-  --check-outline-width: 3px;
-}

package/src/components/check/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --check-disabled-opacity: 0.5;
-}

package/src/components/color/default-props.css

@@ -1,11 +0,0 @@
-:root, :host {
-  --color-primary: currentColor;
-  --color-secondary: transparent;
-  --color-size: 1.75rem;
-  --color-p: var(--spacing-xs);
-  --color-border-width: 2px;
-  --color-border-color: currentColor;
-  --color-border-radius: var(--radius-full);
-  --color-outline-width: 3px;
-  --color-outline-color: var(--color-border-color);
-}

package/src/components/color/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --color-disabled-opacity: 0.5;
-}

package/src/components/control/color-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --control-color-swatch-width: 1.25rem;
-  --control-color-swatch-height: 1.25rem;
-  --control-color-swatch-border-radius: var(--radius-full);
-}

package/src/components/control/default-props.css

@@ -1,16 +0,0 @@
-:root, :host {
-  --control-height: 3rem;
-  --control-height-textarea: 8rem;
-  --control-px: 0.75rem;
-  --control-py: 0.75rem;
-  --control-border-width: 1px;
-  --control-font-weight: var(--font-weight-medium);
-  --control-font-size: var(--font-size-sm);
-  --control-bg: transparent;
-  --control-color: currentColor;
-  --control-border-radius: var(--radius);
-  --control-border-color: currentColor;
-  --control-outline-width: 3px;
-  --control-placeholder-color: currentColor;
-  --control-placeholder-opacity: 0.5;
-}

package/src/components/control/floating-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --control-label-translate-y: 0.625rem;
-  --control-label-scale: 0.8;
-}

package/src/components/control/icon-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --control-icon-size: 1.25rem;
-  --control-icon-gap: 0.375rem;
-}

package/src/components/control/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --control-disabled-opacity: 0.05;
-}

package/src/components/control/select-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --control-select-icon-size: 1.5rem;
-  --control-select-icon-me: -0.25rem;
-}

package/src/components/dialog/content-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --dialog-content-py: 2rem;
-  --dialog-content-px: 1.5rem;
-  --dialog-content-width: 35rem;
-}

package/src/components/dialog/default-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --dialog-py: 2rem;
-  --dialog-px: 1.5rem;
-  --dialog-bg: var(--color-dark);
-  --dialog-bg-opacity: 0.8;
-}

package/src/components/drawer/content-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --drawer-content-py: 2rem;
-  --drawer-content-px: 1.5rem;
-  --drawer-content-width: calc(100vw - 4rem);
-  --drawer-content-height: 100%;
-}

package/src/components/drawer/default-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --drawer-bg-opacity: 0.75;
-}

package/src/components/heading/default-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --heading-font-family: var(--font-family-primary);
-  --heading-font-weight: var(--font-weight-semibold);
-  --heading-font-size: var(--font-size-xl);
-  --heading-line-height: calc(1em + 0.375rem);
-}

package/src/components/info/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --info-font-size: var(--font-size-xs);
-  --info-line-height: calc(1em + 0.25rem);
-}

package/src/components/label/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --label-font-size: var(--font-size-sm);
-  --label-line-height: calc(1em + 0.25rem);
-}

package/src/components/link/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --link-font-size: var(--font-size-sm);
-  --link-line-height: calc(1em + 0.25rem);
-}

package/src/components/link/interactive-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --link-hover-color: currentColor;
-  --link-hover-color-opacity: 0.75;
-  --link-hover-color-mix: transparent;
-}

package/src/components/notice/default-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --notice-py: 1.25rem;
-  --notice-px: 1.5rem;
-  --notice-font-size: var(--font-size-sm);
-  --notice-border-radius: var(--radius);
-  --notice-outline-width: 1px;
-  --notice-outline-offset: calc(var(--notice-outline-width, 1px) * -1);
-}

package/src/components/popover/content-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --popover-content-bg: var(--color-body-primary);
-  --popover-content-border-radius: var(--radius);
-  --popover-content-py: var(--spacing-sm);
-  --popover-content-px: var(--spacing-sm);
-  --popover-content-scale-y: 0.75;
-  --popover-content-scale-x: 0.75;
-}

package/src/components/progress/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --progress-height: 1rem;
-  --progress-border-radius: var(--radius-full);
-}

package/src/components/range/default-props.css

@@ -1,10 +0,0 @@
-:root, :host {
-  --range-track-height: 0.375rem;
-  --range-thumb-size: 1.125rem;
-  --range-thumb-border-width: 0;
-  --range-thumb-outline-width: 2px;
-  --range-thumb-outline-opacity: 0;
-  --range-thumb-focus-outline-opacity: 0.5;
-  --range-track-start: 0%;
-  --range-track-end: 100%;
-}

package/src/components/rating/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --rating-color: var(--color-accent);
-  --rating-gap: 0.25rem;
-  --rating-opacity: 0.2;
-}

package/src/components/switch/default-props.css

@@ -1,17 +0,0 @@
-:root, :host {
-  --switch-width: 3rem;
-  --switch-height: 1.5rem;
-  --switch-icon-size: 1.125rem;
-  --switch-font-weight: var(--font-weight-normal);
-  --switch-font-size: var(--font-size-sm);
-  --switch-line-height: calc(1em + 0.25rem);
-  --switch-gap: 0.75rem;
-  --switch-border-radius: var(--radius-full);
-  --switch-bg: currentColor;
-  --switch-outline-width: 2px;
-  --switch-outline-color: currentColor;
-
-  &.dark {
-    --switch-bg: var(--color-body-tertiary);
-  }
-}

package/src/components/switch/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --switch-disabled-opacity: 0.5;
-}

package/src/components/table/default-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --table-border-radius: var(--radius);
-  --table-px: 1rem;
-  --table-cell-spacing-x: 0.625rem;
-  --table-cell-spacing-y: 0.875rem;
-  --table-cell-height: auto;
-  --table-cell-border-block-width: 1px;
-}

package/src/components/table/interactive-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --table-outline-bg-opacity: 0.05;
-  --table-outline-width: 1px;
-}

package/src/components/text/default-props.css

@@ -1,9 +0,0 @@
-:root, :host {
-  --text-content-bold: var(--font-weight-semibold);
-  --text-content-my: var(--spacing-xl);
-  --text-content-marker-size: 0.375em;
-  --text-line-height: calc(1em + 0.75rem);
-  --text-hr-my: 3em;
-  --text-heading-line-height: calc(1em + 0.375rem);
-  --text-heading-my: 1.5em 0.5em;
-}

package/src/components/title/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --title-font-weight: var(--font-weight-semibold);
-  --title-font-size: var(--font-size-sm);
-  --title-line-height: calc(1em + 0.25rem);
-}

package/src/components/toast/content-props.css

@@ -1,7 +0,0 @@
-:root, :host {
-  --toast-content-border-radius: var(--radius-2xl);
-  --toast-content-py: var(--spacing-md);
-  --toast-content-px: var(--spacing-lg);
-  --toast-content-gap: var(--spacing-xl);
-  --toast-content-bg: var(--color-body-primary);
-}

package/src/components/toast/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --toast-width: 20rem;
-  --toast-duration: calc(var(--default-transition-duration) * 2);
-}

package/src/components/toaster/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --toaster-p: var(--spacing-xl);
-  --toaster-spacing-y: var(--spacing-xs);
-}

package/src/components/tooltip/default-props.css

@@ -1,12 +0,0 @@
-:root, :host {
-  --tooltip-bg: var(--color-main);
-  --tooltip-color: var(--color-main-foreground);
-  --tooltip-border-radius: var(--radius-md);
-  --tooltip-font-size: var(--font-size-sm);
-  --tooltip-py: var(--spacing-xs);
-  --tooltip-px: var(--spacing-sm);
-  --tooltip-margin-block: var(--spacing-xs);
-  --tooltip-margin-inline: var(--spacing-xs);
-  --tooltip-scale-x: 0.75;
-  --tooltip-scale-y: 0.75;
-}