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

package/src/components/compare/default.css

@@ -1,6 +1,6 @@
-.compare {
-  --compare-position: 50%;
-  --compare-clip-path: polygon(0% 0, var(--compare-position) 0%, var(--compare-position) 100%, 0 100%);
+.x-compare {
+  --x-compare-position: 50%;
+  --x-compare-clip-path: polygon(0% 0, var(--x-compare-position) 0%, var(--x-compare-position) 100%, 0 100%);
 
   display: grid;
   overflow: hidden;
@@ -15,7 +15,7 @@
 
   &::before {
     background-color: var(--color-accent);
-    inset-inline-start: var(--compare-position);
+    inset-inline-start: var(--x-compare-position);
     inline-size: 1px;
     content: "";
   }
@@ -23,18 +23,17 @@
   > :where(input) {
     pointer-events: auto;
     cursor: grab;
-    opacity: 0;
+    opacity: 0%;
 
-    &:is(:focus-visible, :active) {
-      ~ .button {
-        --tw-bg-mix: var(--button-hover-bg-mix, var(--color-dark));
-        --tw-bg-opacity: 0.8;
-      }
+    &:active ~ .x-button {
+      --x-button-background-color-mix: var(--x-button-active-background-color-mix, var(--color-dark));
+      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity, 80%);
     }
 
-    &:focus-visible ~ .button {
-      --button-outline-offset: 2px;
-      --tw-outline-opacity: 0.5;
+    &:focus-visible ~ .x-button {
+      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
+      --x-button-outline-offset: var(--x-button-focus-outline-offset, 2px);
+      --x-button-outline-color-opacity: var(--x-button-focus-outline-opacity, 50%);
     }
 
     &:active {
@@ -42,13 +41,13 @@
     }
   }
 
-  > :where(.button) {
-    inset-inline-start: var(--compare-position);
-    margin-inline-start: calc(var(--button-width) / 2 * -1);
+  > :where(.x-button) {
+    inset-inline-start: var(--x-compare-position);
+    margin-inline-start: calc(var(--x-button-width) / 2 * -1);
     margin-block: auto;
   }
 
-  > :where(.image) {
+  > :where(.x-image) {
     display: grid;
     z-index: 0;
 
@@ -58,7 +57,7 @@
       grid-area: 1/1;
 
       &:first-child {
-        clip-path: var(--compare-clip-path);
+        clip-path: var(--x-compare-clip-path);
         position: relative;
       }
     }

package/src/components/compare/index.js

@@ -5,8 +5,8 @@
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
     const { selector, positionProperty } = {
-        selector: '.compare',
-        positionProperty: '--compare-position',
+        selector: '.x-compare',
+        positionProperty: '--x-compare-position',
         ...options
     }
 

package/src/components/control/color.css

@@ -1,24 +1,24 @@
-.control {
+.x-control {
   > :where(input) {
     &::-webkit-color-swatch-wrapper {
-      width: var(--control-color-swatch-width);
-      height: var(--control-color-swatch-height);
+      inline-size: var(--x-control-color-swatch-width);
+      block-size: var(--x-control-color-swatch-height);
       padding: 0;
     }
 
     &::-moz-color-swatch {
-      width: var(--control-color-swatch-width);
-      height: var(--control-color-swatch-height);
-      border-radius: var(--control-color-swatch-border-radius);
+      inline-size: var(--x-control-color-swatch-width);
+      block-size: var(--x-control-color-swatch-height);
+      border-radius: var(--x-control-color-swatch-border-radius);
       margin: 0;
     }
 
     &::-webkit-color-swatch {
-      border-radius: var(--control-color-swatch-border-radius);
+      border-radius: var(--x-control-color-swatch-border-radius);
     }
 
     &[type="color"] ~ label {
-      margin-inline-start: calc(var(--control-px) + var(--control-color-swatch-width));
+      margin-inline-start: calc(var(--x-control-padding-inline) + var(--x-control-color-swatch-width));
     }
   }
 }

package/src/components/control/default.css

@@ -1,57 +1,54 @@
-.control {
-  --control-outline-color: var(--color-accent);
-  --tw-bg-opacity: 1;
-  --tw-bg-mix: transparent;
-  --tw-border-opacity: 0.15;
-  --tw-border-mix: transparent;
-  --tw-outline-opacity: 0;
-  --tw-outline-mix: transparent;
-
+.x-control {
   display: grid;
-  block-size: var(--control-height);
-  font-family: var(--control-font-family);
-  font-weight: var(--control-font-weight);
-  font-size: var(--control-font-size);
-  letter-spacing: var(--control-letter-spacing);
-  background-color: color-mix(in var(--default-color-space), var(--control-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: var(--control-color);
-  border-radius: var(--control-border-radius);
+  block-size: var(--x-control-height);
+  font-family: var(--x-control-font-family);
+  font-weight: var(--x-control-font-weight);
+  font-size: var(--x-control-font-size);
+  letter-spacing: var(--x-control-letter-spacing);
+  color: var(--x-control-color);
+  border-radius: var(--x-control-border-radius);
+  background-color:
+    color-mix(
+      in var(--x-control-background-color-space, srgb),
+      var(--x-control-background-color) var(--x-control-background-color-opacity, 100%),
+      var(--x-control-background-color-mix, transparent)
+    );
   border:
-    var(--control-border-width) solid
+    var(--x-control-border-width) solid
     color-mix(
-      in var(--default-color-space),
-      var(--control-border-color) calc(var(--tw-border-opacity) * 100%),
-      var(--tw-border-mix)
+      in var(--x-control-border-color-space, srgb),
+      var(--x-control-border-color) var(--x-control-border-color-opacity, 15%),
+      var(--x-control-border-color-mix, transparent)
     );
   outline:
-    var(--control-outline-width) solid
+    var(--x-control-outline-width) solid
     color-mix(
-      in var(--default-color-space),
-      var(--control-outline-color) calc(var(--tw-outline-opacity) * 100%),
-      var(--tw-outline-mix)
+      in var(--x-control-outline-color-space, srgb),
+      var(--x-control-outline-color, var(--color-accent)) var(--x-control-outline-color-opacity, 0%),
+      var(--x-control-outline-color-mix, transparent)
     );
-  outline-offset: var(--control-outline-offset);
+  outline-offset: var(--x-control-outline-offset);
   grid-template:
-    [control-start] calc(var(--control-py) - var(--control-border-width))
-    [control-p] 1fr
-    calc(var(--control-py) - var(--control-border-width)) [control-end] /
-    [control-start] var(--control-px)
-    [control-p] 1fr
-    var(--control-px) [control-end];
+    [x-control-start] calc(var(--x-control-padding-block) - var(--x-control-border-width))
+    [x-control-padding] 1fr
+    calc(var(--x-control-padding-block) - var(--x-control-border-width)) [x-control-end] /
+    [x-control-start] var(--x-control-padding-inline)
+    [x-control-padding] 1fr
+    var(--x-control-padding-inline) [x-control-end];
 
   &:has(textarea) {
     height: auto;
   }
 
   > :where(*) {
-    grid-area: control-p;
+    grid-area: x-control-padding;
     align-self: center;
   }
 
   > :where(input, textarea, select) {
-    padding-block: var(--control-py);
-    padding-inline: calc(var(--control-px) + var(--control-ps, 0rem)) calc(var(--control-px) + var(--control-pe, 0rem));
-    grid-area: control;
+    padding-block: var(--x-control-padding-block);
+    padding-inline: calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-start, 0px)) calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-end, 0px));
+    grid-area: x-control;
     text-overflow: ellipsis;
     overflow: clip;
     align-self: stretch;
@@ -65,13 +62,13 @@
 
   > :where(input, textarea) {
     &::placeholder {
-      color: var(--control-placeholder-color);
-      opacity: var(--control-placeholder-opacity);
+      color: var(--x-control-placeholder-color);
+      opacity: var(--x-control-placeholder-opacity);
     }
   }
 
   > :where(textarea) {
-    min-block-size: var(--control-height-textarea);
+    min-block-size: var(--x-control-height-textarea);
     resize: vertical;
   }
 }

package/src/components/control/file.css

@@ -1,25 +1,27 @@
-.control:where(:has([type="file"])) {
+.x-control:where(:has([type="file"])) {
   overflow: clip;
 
   > :where([type="file"]) {
-    --color-accent: currentColor;
-    --tw-bg-opacity: 0.15;
-
     &::file-selector-button {
       all: unset;
-      background-color: color-mix(in var(--default-color-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent);
-      block-size: calc(var(--control-height) - var(--control-border-width) * 2);
-      padding-inline: var(--control-px);
-      margin-inline: calc(var(--control-px) * -1) var(--control-px);
-      margin-block-start: calc(var(--control-py) * -1);
-      border-start-end-radius: var(--control-border-radius, var(--rounded));
-      border-end-end-radius: var(--control-border-radius, var(--rounded));
+      background-color:
+        color-mix(
+          in var(--x-control-file-background-color-space, srgb),
+          var(--x-control-file-background-color, currentColor) var(--x-control-file-background-color-opacity, 15%),
+          var(--x-control-file-background-color-mix, transparent)
+        );
+      block-size: calc(var(--x-control-height) - var(--x-control-border-width) * 2);
+      padding-inline: var(--x-control-padding-inline);
+      margin-inline: calc(var(--x-control-padding-inline) * -1) var(--x-control-padding-inline);
+      margin-block-start: calc(var(--x-control-padding-block) * -1);
+      border-start-end-radius: var(--x-control-border-radius);
+      border-end-end-radius: var(--x-control-border-radius);
       transition: var(--transition-background);
       cursor: pointer;
     }
 
     &:is(:hover, :focus) {
-      --tw-bg-opacity: 0.2;
+      --x-control-file-background-color-opacity: 20%;
     }
   }
 }

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

@@ -1,12 +1,12 @@
-.control:where(:has(:not([type="color"]) ~ label)) {
-  --control-label-focus-opacity: 0.5;
-  --control-placeholder-color: transparent;
+.x-control:where(:has(:not([type="color"]) ~ label)) {
+  --x-control-label-focus-opacity: 50%;
+  --x-control-placeholder-color: transparent;
 
   > :where(input, textarea, select) {
     &:is(:focus, :not(:placeholder-shown)) {
       ~ label {
-        transform: translateY(calc(var(--control-label-translate-y) * -1)) scale(var(--control-label-scale));
-        opacity: var(--control-label-focus-opacity);
+        transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
+        opacity: var(--x-control-label-focus-opacity);
       }
     }
   }

package/src/components/control/floating.css

@@ -1,17 +1,17 @@
-.control:where(:has(:not([type="color"]) ~ label)) {
+.x-control:where(:has(:not([type="color"]) ~ label)) {
   > :where(label) {
-    margin-inline: var(--control-ps, 0) var(--control-pe, 0);
+    margin-inline: var(--x-control-padding-inline-start, 0) var(--x-control-padding-inline-end, 0);
+    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
     pointer-events: none;
     transform-origin: 0 50%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: clip;
     will-change: transform;
-    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
   }
 
   > :where(textarea) {
-    padding-block-start: calc(var(--control-py) + var(--control-label-translate-y) * var(--control-label-scale));
+    padding-block-start: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale));
 
     + :where(label) {
       align-self: start;
@@ -19,18 +19,18 @@
   }
 
   > :where(input, select) {
-    padding-block: calc(var(--control-py) + var(--control-label-translate-y) * var(--control-label-scale)) calc(var(--control-py) - var(--control-label-translate-y) * var(--control-label-scale));
+    padding-block: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale)) calc(var(--x-control-padding-block) - var(--x-control-label-translate-y) * var(--x-control-label-scale));
 
     &::-webkit-calendar-picker-indicator,
     &::-webkit-search-cancel-button,
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
-      transform: translateY(calc(var(--control-label-translate-y) * var(--control-label-scale) * -1));
+      transform: translateY(calc(var(--x-control-label-translate-y) * var(--x-control-label-scale) * -1));
     }
   }
 
   &:where(:has(:required)) :where(label)::after {
-    color: var(--color-error);
+    color: var(--x-control-required-color, var(--color-error));
     content: " *";
   }
 }

package/src/components/control/icon.css

@@ -1,6 +1,6 @@
-.control {
-  --control-s: calc(var(--control-icon-count-s, 1) * (var(--control-icon-size) + var(--control-icon-gap)) - var(--control-icon-gap));
-  --control-e: calc(var(--control-icon-count-e, 1) * (var(--control-icon-size) + var(--control-icon-gap)) - var(--control-icon-gap));
+.x-control {
+  --x-control-start: calc(var(--x-control-icon-count-start, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
+  --x-control-end: calc(var(--x-control-icon-count-end, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
 
   &:has(textarea) {
     :where(.me-auto), :where(.ms-auto) {
@@ -9,23 +9,23 @@
   }
 
   &:has(.me-auto) {
-    --control-ps: calc(var(--control-s) + var(--control-px));
+    --x-control-padding-inline-start: calc(var(--x-control-start) + var(--x-control-padding-inline));
   }
 
   &:has(.ms-auto) {
-    --control-pe: calc(var(--control-e) + var(--control-px));
+    --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline));
   }
 
   &:has(.me-auto > *:nth-child(2)) {
-    --control-icon-count-s: 2;
+    --x-control-icon-count-start: 2;
   }
 
   &:has(.ms-auto > *:nth-child(2)) {
-    --control-icon-count-e: 2;
+    --x-control-icon-count-end: 2;
   }
 
   :where(.me-auto), :where(.ms-auto) {
-    gap: var(--control-icon-gap);
+    gap: var(--x-control-icon-gap);
     display: flex;
     align-items: center;
   }

package/src/components/control/index.css

@@ -1,16 +1,15 @@
-@import "default-props.css";
+@import "props/default.css";
+@import "props/color.css";
+@import "props/icon.css";
+@import "props/floating.css";
+@import "props/select.css";
 @import "default.css";
 @import "interactive.css";
-@import "interactive-props.css";
 @import "invalid.css";
-@import "color-props.css";
 @import "color.css";
 @import "icon.css";
-@import "icon-props.css";
 @import "file.css";
-@import "floating-props.css";
 @import "floating.css";
 @import "floating-interactive.css";
-@import "select-props.css";
 @import "select.css";
 @import "select-multiple.css";

package/src/components/control/interactive.css

@@ -1,19 +1,19 @@
-.control {
-  --control-focus-border-color: var(--color-accent);
-
+.x-control {
   transition-property: var(--default-transition-property);
   transition-timing-function: var(--transition-timing-function-in-out);
   transition-duration: var(--default-transition-duration);
 
   &:focus-within {
-    --control-border-color: var(--control-focus-border-color);
-    --control-outline-offset: var(--control-focus-outline-offset);
-    --tw-border-opacity: var(--control-focus-border-opacity, 1);
-    --tw-outline-opacity: var(--control-focus-outline-opacity, 0.2);
+    --x-control-border-color: var(--x-control-focus-border-color, var(--color-accent));
+    --x-control-border-color-opacity: var(--x-control-focus-border-color-opacity, 100%);
+    --x-control-outline-offset: var(--x-control-focus-outline-offset);
+    --x-control-outline-color-opacity: var(--x-control-focus-outline-color-opacity, 20%);
   }
 
   &.disabled, &:has(:where(input, textarea, select):disabled) {
-    --control-bg: currentColor;
-    --tw-bg-opacity: var(--control-disabled-opacity);
+    --x-control-background-color: var(--x-control-disabled-background-color, currentColor);
+    --x-control-background-color-opacity: var(--x-control-disabled-background-color-opacity, 5%);
+    --x-control-border-color: var(--x-control-disabled-border-color, currentColor);
+    --x-control-border-color-opacity: var(--x-control-disabled-border-color-opacity);
   }
 }

package/src/components/control/invalid.css

@@ -1,10 +1,10 @@
-.control {
+.x-control {
   &.invalid, &:has(:user-invalid), .validated &:has(:invalid) {
-    --control-border-color: var(--control-invalid-border-color, var(--color-error));
-    --control-outline-color: var(--control-invalid-outline-color, var(--color-error));
-    --control-color: var(--control-invalid-color, var(--color-error));
-    --control-bg: var(--control-invalid-bg, var(--color-error));
-    --tw-bg-opacity: var(--control-invalid-bg-opacity, 0.1);
-    --tw-border-opacity: var(--control-invalid-border-opacity, 1);
+    --x-control-background-color: var(--x-control-invalid-background-color, var(--color-error));
+    --x-control-background-color-opacity: var(--x-control-invalid-background-color-opacity, 10%);
+    --x-control-border-color: var(--x-control-invalid-border-color, var(--color-error));
+    --x-control-border-color-opacity: var(--x-control-invalid-border-color-opacity, 100%);
+    --x-control-outline-color: var(--x-control-invalid-outline-color, var(--color-error));
+    --x-control-color: var(--x-control-invalid-color, var(--color-error));
   }
 }

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

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

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

@@ -0,0 +1,16 @@
+:root, :host {
+  --x-control-height: 3rem;
+  --x-control-height-textarea: 8rem;
+  --x-control-padding-inline: 0.75rem;
+  --x-control-padding-block: 0.75rem;
+  --x-control-border-width: 1px;
+  --x-control-border-radius: var(--radius);
+  --x-control-border-color: currentColor;
+  --x-control-font-weight: var(--font-weight-medium);
+  --x-control-font-size: var(--font-size-sm);
+  --x-control-background-color: transparent;
+  --x-control-color: currentColor;
+  --x-control-outline-width: 3px;
+  --x-control-placeholder-color: currentColor;
+  --x-control-placeholder-opacity: 50%;
+}

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

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

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

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

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

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

package/src/components/control/readme.md

@@ -1,4 +1,4 @@
-# [Control](https://winduum.dev/docs/ui/control.html)
+# [Control](https://winduum.dev/docs/components/control.html)
 
 ## Installation
 ```shell
@@ -8,28 +8,27 @@ Learn more how to set up Winduum [here](https://winduum.dev/docs/).
 Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
 
 ```css
-@import "winduum/src/ui/control/index.css" layer(components);
+@import "winduum/src/components/control/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/control/default-props.css" layer(components);
-@import "winduum/src/ui/control/default.css" layer(components);
-@import "winduum/src/ui/control/interactive.css" layer(components);
-@import "winduum/src/ui/control/interactive-props.css" layer(components);
-@import "winduum/src/ui/control/invalid.css" layer(components);
-@import "winduum/src/ui/control/color-props.css" layer(components);
-@import "winduum/src/ui/control/color.css" layer(components);
-@import "winduum/src/ui/control/icon.css" layer(components);
-@import "winduum/src/ui/control/icon-props.css" layer(components);
-@import "winduum/src/ui/control/file.css" layer(components);
-@import "winduum/src/ui/control/floating-props.css" layer(components);
-@import "winduum/src/ui/control/floating.css" layer(components);
-@import "winduum/src/ui/control/floating-interactive.css" layer(components);
-@import "winduum/src/ui/control/select-props.css" layer(components);
-@import "winduum/src/ui/control/select.css" layer(components);
-@import "winduum/src/ui/control/select-multiple.css" layer(components);
+@import "winduum/src/components/control/props/default.css" layer(components);
+@import "winduum/src/components/control/props/color.css" layer(components);
+@import "winduum/src/components/control/props/icon.css" layer(components);
+@import "winduum/src/components/control/props/floating.css" layer(components);
+@import "winduum/src/components/control/props/select.css" layer(components);
+@import "winduum/src/components/control/default.css" layer(components);
+@import "winduum/src/components/control/interactive.css" layer(components);
+@import "winduum/src/components/control/invalid.css" layer(components);
+@import "winduum/src/components/control/color.css" layer(components);
+@import "winduum/src/components/control/icon.css" layer(components);
+@import "winduum/src/components/control/file.css" layer(components);
+@import "winduum/src/components/control/floating.css" layer(components);
+@import "winduum/src/components/control/floating-interactive.css" layer(components);
+@import "winduum/src/components/control/select.css" layer(components);
+@import "winduum/src/components/control/select-multiple.css" layer(components);
 ```
 
 ### Local imports
@@ -37,8 +36,8 @@ 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/control/assets/index.css" layer(components);
+@import "@/components/control/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/control.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/control.html) to learn more about usage examples.

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

@@ -1,5 +1,5 @@
-.control:has(select[multiple]) {
-  --control-height: auto;
+.x-control:has(select[multiple]) {
+  --x-control-height: auto;
 
   select {
     overflow-y: auto;

package/src/components/control/select.css

@@ -1,16 +1,16 @@
-.control:has(select:not([multiple])) {
-  --control-pe: calc(var(--control-select-icon-size) + var(--control-select-icon-me));
+.x-control:has(select:not([multiple])) {
+  --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline) + var(--x-control-select-icon-margin-inline-end));
 
   &:has(.ms-auto) {
-    --control-icon-count-e: 2;
+    --x-control-icon-count-end: 2;
   }
 
   &::after {
-    width: var(--control-select-icon-size);
-    height: var(--control-select-icon-size);
+    inline-size: var(--x-control-select-icon-size);
+    block-size: var(--x-control-select-icon-size);
     mask: var(--mask-angle-down);
-    margin-inline: auto var(--control-select-icon-me);
-    grid-area: control-p;
+    margin-inline: auto var(--x-control-select-icon-margin-inline-end);
+    grid-area: x-control-padding;
     background-color: currentColor;
     pointer-events: none;
     align-self: center;
@@ -18,6 +18,6 @@
   }
 
   :where(.ms-auto) {
-    margin-inline-end: var(--control-select-icon-size);
+    margin-inline-end: var(--x-control-select-icon-size);
   }
 }

package/src/components/dialog/content.css

@@ -1,13 +1,13 @@
-.dialog-content {
-  background-color: var(--color-body-primary);
-  border-radius: var(--radius-3xl);
-  padding: var(--dialog-content-py) var(--dialog-content-px);
-  inline-size: min(100%, var(--dialog-content-width));
+.x-dialog-content {
+  background-color: var(--x-dialog-content-background-color, var(--color-body-primary));
+  border-radius: var(--x-dialog-content-border-radius, var(--radius-3xl));
+  padding: var(--x-dialog-content-padding-block) var(--x-dialog-content-padding-inline);
+  inline-size: min(100%, var(--x-dialog-content-inline-size));
   transition: var(--transition-transform), var(--transition-opacity);
   margin: auto;
 
   :where(dialog:not(.open)) & {
     transform: translateY(-2rem);
-    opacity: 0;
+    opacity: 0%;
   }
 }

package/src/components/dialog/default.css

@@ -1,9 +1,12 @@
-.dialog {
-  --tw-bg-opacity: var(--dialog-bg-opacity);
-
-  z-index: var(--z-index-30);
-  padding: var(--dialog-py) var(--dialog-px);
-  background-color: color-mix(in var(--default-color-space), var(--dialog-bg) calc(var(--tw-bg-opacity) * 100%), transparent);
+.x-dialog {
+  z-index: var(--x-dialog-z-index, var(--z-index-30));
+  padding: var(--x-dialog-padding-block) var(--x-dialog-padding-inline);
+  background-color:
+    color-mix(
+      in var(--x-dialog-background-color-space, srgb),
+      var(--x-dialog-background-color) var(--x-dialog-background-color-opacity),
+      var(--x-dialog-background-color-mix, transparent)
+    );
   transition: var(--transition-background);
   display: flex;
   position: fixed;
@@ -21,8 +24,8 @@
   }
 }
 
-html:has(.dialog[open]) {
-  padding-inline-end: var(--scrollbar-width);
+html:has(.x-dialog[open]) {
+  padding-inline-end: var(--default-scrollbar-width);
   scrollbar-width: none;
 
   &::-webkit-scrollbar {