winduum 1.2.1 → 2.0.0-next.10

package/src/components/switch/interactive.css

@@ -0,0 +1,43 @@
+.x-switch {
+  :where(input) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
+
+    &:where(:required) {
+      & + *::after {
+        color: var(--x-switch-required-color, var(--color-error));
+        content: " *";
+      }
+    }
+
+    &:enabled:focus {
+      --x-switch-outline-offset: var(--x-switch-focus-outline-offset);
+      --x-switch-outline-color-opacity: var(--x-switch-focus-outline-color-opacity, 40%);
+    }
+
+    &:disabled {
+      --x-switch-background-color: var(--x-switch-disabled-background-color, currentColor);
+      --x-switch-background-color-opacity: var(--x-switch-disabled-background-color-opacity, 15%);
+      --x-switch-outline-color: var(--x-switch-disabled-outline-color, currentColor);
+      --x-switch-outline-color-opacity: var(--x-check-disabled-outline-color-opacity, 5%);
+
+      cursor: not-allowed;
+    }
+
+    &:checked {
+      --x-switch-outline-color: var(--color-accent);
+      --x-switch-background-color: var(--color-accent);
+
+      &::before {
+        margin-inline-start: calc(100% - var(--x-switch-icon-size));
+      }
+    }
+
+    &:indeterminate {
+      &::before {
+        margin-inline-start: calc(50% - var(--x-switch-icon-size) / 2);
+      }
+    }
+  }
+}

package/src/components/switch/invalid.css

@@ -0,0 +1,6 @@
+.x-switch {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-switch-outline-color: var(--x-switch-invalid-outline-color, var(--color-error));
+    --x-switch-background-color: var(--x-switch-invalid-background-color, var(--color-error));
+  }
+}

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

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

package/src/{ui/progress → components/switch}/readme.md

@@ -1,4 +1,4 @@
-# [Progress](https://winduum.dev/docs/ui/progress.html)
+# [Switch](https://winduum.dev/docs/components/switch.html)
 
 ## Installation
 ```shell
@@ -8,17 +8,16 @@ 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/progress/index.css" layer(components);
+@import "winduum/src/components/switch/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/progress/default-props.css" layer(components);
-@import "winduum/src/ui/progress/default.css" layer(components);
-@import "winduum/src/ui/progress/meter.css" layer(components);
-@import "winduum/src/ui/progress/sm.css" layer(components);
-@import "winduum/src/ui/progress/lg.css" layer(components);
+@import "winduum/src/components/switch/props/default.css" layer(components);
+@import "winduum/src/components/switch/default.css" layer(components);
+@import "winduum/src/components/switch/interactive.css" layer(components);
+@import "winduum/src/components/switch/invalid.css" layer(components);
 ```
 
 ### Local imports
@@ -26,8 +25,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/progress/assets/index.css" layer(components);
+@import "@/components/switch/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/progress.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/switch.html) to learn more about usage examples.

package/src/components/table/default.css

@@ -1,7 +1,7 @@
-.c-table {
-  max-width: 100%;
-  border-radius: var(--c-table-border-radius);
-  background-color: var(--color-body-primary);
+.x-table {
+  border-radius: var(--x-table-border-radius);
+  background-color: var(--x-table-background-color, var(--color-body-primary));
+  max-inline-size: 100%;
   overflow: auto;
 
   :where(table) {
@@ -11,22 +11,22 @@
   }
 
   :where(thead tr:not(:first-child), tbody tr, tfoot tr) {
-    border-block-start: var(--c-table-cell-border-block-width) solid var(--color-body-tertiary);
+    border-block-start: var(--x-table-cell-border-block-width) solid var(--x-table-border-color, var(--color-body-tertiary));
   }
 
   :where(td, th) {
-    padding: var(--c-table-cell-spacing-y) var(--c-table-cell-spacing-x);
-    height: var(--c-table-cell-height);
-    border-color: var(--color-body-tertiary);
-    border-inline-width: var(--c-table-cell-border-inline-width, 0);
+    padding: var(--x-table-cell-spacing-y) var(--x-table-cell-spacing-x);
+    block-size: var(--x-table-cell-block-size);
+    border-color: var(--x-table-border-color, var(--color-body-tertiary));
+    border-inline-width: var(--x-table-cell-border-inline-width, 0);
 
     &:first-child {
-      padding-inline-start: var(--c-table-px);
+      padding-inline-start: var(--x-table-padding-inline);
       border-inline-start: 0;
     }
 
     &:last-child {
-      padding-inline-end: var(--c-table-px);
+      padding-inline-end: var(--x-table-padding-inline);
       border-inline-end: 0;
     }
   }

package/src/components/table/index.css

@@ -1,4 +1,3 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.css";
 @import "interactive.css";
-@import "interactive-props.css";

package/src/components/table/interactive.css

@@ -1,14 +1,12 @@
-.c-table {
-  --c-table-outline-accent-color: var(--color-accent);
-
+.x-table {
   :where(tbody:first-child, tfoot:first-child) {
     :where(tr:first-child) {
       &, :where(th,td):where(:first-child) {
-        border-start-start-radius: var(--c-table-border-radius);
+        border-start-start-radius: var(--x-table-border-radius);
       }
 
       &, :where(th,td):where(:last-child) {
-        border-start-end-radius: var(--c-table-border-radius);
+        border-start-end-radius: var(--x-table-border-radius);
       }
     }
   }
@@ -16,26 +14,28 @@
   :where(tbody:last-child, tfoot:last-child) {
     :where(tr:last-child) {
       &, :where(th,td):where(:first-child) {
-        border-end-start-radius: var(--c-table-border-radius);
+        border-end-start-radius: var(--x-table-border-radius);
       }
 
       &, :where(th,td):where(:last-child) {
-        border-end-end-radius: var(--c-table-border-radius);
+        border-end-end-radius: var(--x-table-border-radius);
       }
     }
   }
 
   :where(tr, th, td):where([tabindex="0"]), :where(.outline) {
     transition: var(--transition-all);
-    outline: var(--c-table-outline-width) solid transparent;
-    outline-offset: calc(var(--c-table-outline-width) * -1);
+    outline: var(--x-table-outline-width, 1px) solid transparent;
+    outline-offset: calc(var(--x-table-outline-width, 1px) * -1);
 
     &:is(:hover, :focus-visible, .active) {
-      --tw-bg-opacity: var(--c-table-outline-bg-opacity);
-      --tw-bg-mix: transparent;
-
-      background-color: color-mix(in var(--space), var(--c-table-outline-accent-color) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-      outline-color: var(--c-table-outline-accent-color);
+      background-color:
+        color-mix(
+          in var(--x-table-outline-background-color-space, srgb),
+          var(--x-table-outline-accent-color, var(--color-accent)) var(--x-table-outline-background-color-opacity, 5%),
+          var(--x-table-outline-background-color-mix, transparent)
+        );
+      outline-color: var(--x-table-outline-accent-color, var(--color-accent));
     }
   }
 }

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

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

package/src/components/table/readme.md

@@ -14,10 +14,9 @@ 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/table/props/default.css";
 @import "winduum/src/components/table/default.css";
-@import "winduum/src/components/table/default-props.css";
 @import "winduum/src/components/table/interactive.css";
-@import "winduum/src/components/table/interactive-props.css";
 ```
 
 ### Local imports

package/src/components/tabs/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "list.css";

package/src/components/tabs/list.css

@@ -0,0 +1,8 @@
+.x-tabs-list {
+  background-color: var(--x-tabs-list-background-color, var(--color-body-secondary));
+  gap: var(--x-tabs-list-gap, var(--spacing-xs));
+  padding: var(--x-tabs-list-padding, var(--spacing-xs));
+  border-radius: var(--x-tabs-list-border-radius, var(--radius));
+  display: flex;
+  inline-size: max-content;
+}

package/src/components/tabs/readme.md

@@ -14,7 +14,7 @@ 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/tabs/default.css" layer(components);
+@import "winduum/src/components/tabs/list.css" layer(components);
 ```
 
 

package/src/components/text/default.css

@@ -0,0 +1,223 @@
+.x-text {
+  font-family: var(--x-text-font-family);
+  font-weight: var(--x-text-font-weight);
+  font-size: var(--x-text-font-size);
+  line-height: var(--x-text-line-height);
+  letter-spacing: var(--x-text-letter-spacing);
+  text-wrap: pretty;
+
+  > :is(*:first-child) {
+    margin-block-start: 0;
+  }
+
+  > :is(*:last-child) {
+    margin-block-end: 0;
+  }
+
+  :where(b, strong) {
+    font-weight: var(--x-text-content-bold);
+  }
+
+  :where(em) {
+    font-style: italic;
+  }
+
+  :where(img) {
+    display: block;
+    height: auto;
+  }
+
+  :where(p) {
+    margin-block: var(--x-text-p-margin-block, var(--x-text-content-margin-block));
+
+    &:empty {
+      line-height: 0;
+      margin: 0;
+
+      &::after {
+        content: "\00a0";
+      }
+    }
+  }
+
+  :where(hr) {
+    margin-block: var(--x-text-hr-margin-block);
+    background-color:
+      color-mix(
+        in var(--x-text-hr-background-color-space, srgb),
+        var(--x-text-hr-background-color, currentColor) var(--x-text-hr-background-color-opacity, 10%),
+        var(--x-text-hr-background-color-mix, transparent)
+      );
+  }
+
+  :where(a) {
+    color: var(--x-text-link-color, var(--color-accent));
+    text-decoration: var(--x-text-link-text-decoration, underline);
+    transition: var(--transition-color);
+
+    &:hover {
+      color:
+        color-mix(
+          in var(--x-text-link-hover-color-space, srgb),
+          var(--x-text-link-hover-color, var(--color-accent)) var(--x-text-link-hover-color-opacity, 75%),
+          var(--x-text-link-hover-color-mix, transparent)
+        );
+    }
+
+    &:focus-visible {
+      color:
+        color-mix(
+          in var(--x-text-link-focus-color-space, srgb),
+          var(--x-text-link-focus-color, var(--color-accent)) var(--x-text-link-focus-color-opacity, 75%),
+          var(--x-text-link-focus-color-mix, transparent)
+        );
+    }
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--x-text-heading-font-family);
+    font-weight: var(--x-text-heading-font-weight, var(--x-text-content-bold));
+    font-size: var(--x-text-heading-font-size);
+    line-height: var(--x-text-heading-line-height);
+    letter-spacing: var(--x-text-heading-letter-spacing);
+    margin-block: var(--x-text-heading-margin-block);
+    color: var(--x-text-heading-color);
+    text-wrap: balance;
+  }
+
+  :where(h1) {
+    --x-text-heading-font-size: var(--x-text-heading-1-font-size, var(--font-size-4xl));
+  }
+
+  :where(h2) {
+    --x-text-heading-font-size: var(--x-text-heading-2-font-size, var(--font-size-3xl));
+  }
+
+  :where(h3) {
+    --x-text-heading-font-size: var(--x-text-heading-3-font-size, var(--font-size-2xl));
+  }
+
+  :where(h4) {
+    --x-text-heading-font-size: var(--x-text-heading-4-font-size, var(--font-size-xl));
+  }
+
+  :where(h5) {
+    --x-text-heading-font-size: var(--x-text-heading-5-font-size, var(--font-size-lg));
+  }
+
+  :where(h6) {
+    --x-text-heading-font-size: var(--x-text-heading-6-font-size);
+  }
+
+  :where(table) {
+    border: 0;
+    min-inline-size: 100%;
+
+    :where(td, th) {
+      padding: var(--x-text-table-cell-padding-block, 1em) var(--x-text-table-cell-padding-inline, 1.25em);
+      text-align: left;
+    }
+
+    :where(thead) {
+      font-weight: var(--x-text-table-thead-font-weight, var(--x-text-content-bold));
+      border-block-end:
+        1px solid color-mix(
+          in var(--x-text-table-thead-border-color-space, srgb),
+          var(--x-text-table-thead-border-color, currentColor) var(--x-text-table-thead-border-color-opacity, 10%),
+          var(--x-text-table-thead-border-color-mix, transparent)
+        );
+    }
+
+    :where(tbody tr) {
+      &:nth-of-type(even) {
+        background-color:
+          color-mix(
+            in var(--x-text-table-row-even-background-color-space, srgb),
+            var(--x-text-table-row-even-background-color, currentColor) var(--x-text-table-row-even-background-color-opacity, 5%),
+            var(--x-text-table-row-even-background-color-mix, transparent)
+          );
+      }
+    }
+  }
+
+  :where(ol, ul) {
+    margin-inline-start: var(--x-text-list-margin-inline-start, 0.75em);
+    padding-inline-start: var(--x-text-list-padding-inline-start, 1em);
+    margin-block: var(--x-text-list-margin-block, var(--x-text-content-margin-block));
+
+    :where(li) {
+      margin-block: var(--x-text-list-item-margin-block, 0.5em);
+      padding-inline-start: var(--x-text-list-item-padding-inline-start, 1ch);
+    }
+  }
+
+  :where(ol) {
+    &:not([type]) {
+      list-style: decimal;
+    }
+
+    & :where(li) {
+      &::marker {
+        color: var(--x-text-list-marker-color, var(--color-accent));
+        font-weight: var(--x-text-list-marker-font-weight, var(--x-text-content-bold));
+      }
+    }
+  }
+
+  :where(ul) {
+    :where(li) {
+      position: relative;
+      list-style-type: "";
+
+      &::before {
+        inline-size: var(--x-text-list-marker-size);
+        block-size: var(--x-text-list-marker-size);
+        inset-inline-start: var(--x-text-list-marker-inset-inline-start, -0.75em);
+        inset-block-start: var(--x-text-list-marker-inset-block-start, 0.5lh);
+        border:
+          var(--x-text-list-marker-border-width, 1px) solid
+          var(--x-text-list-marker-border-color, var(--color-accent));
+        background-color: var(--x-text-list-marker-background-color, var(--color-accent));
+        margin-inline-start: calc((var(--x-text-list-marker-size) / 2) * -1);
+        margin-block-start: calc(var(--x-text-list-marker-size) / 2 * -1);
+        border-radius: var(--x-text-list-marker-border-radius, 50%);
+        mask: var(--x-text-list-marker-mask);
+        position: absolute;
+        will-change: transform;
+        content: "";
+      }
+    }
+
+    &[style*="square"] {
+      --x-text-list-marker-border-radius: 0;
+    }
+
+    &[style*="circle"] {
+      --x-text-list-marker-background-color: transparent;
+    }
+  }
+
+  :where(blockquote) {
+    border-inline-start:
+      var(--x-text-blockquote-border-inline-start-width, 0.375em) solid
+      var(--x-text-blockquote-border-inline-start-color, var(--color-accent));
+    margin-block: var(--x-text-blockquote-margin-block, var(--x-text-content-margin-block));
+    padding: var(--x-text-blockquote-padding-block, 0.5em) var(--x-text-blockquote-padding-inline, 1.25em);
+    font-size: var(--x-text-blockquote-font-size, inherit);
+  }
+
+  :where(code) {
+    font-size: var(--x-text-code-font-size, 87.5%);
+  }
+
+  :where(figure) {
+    margin-block: var(--x-text-figure-margin-block, var(--x-text-content-margin-block));
+  }
+
+  :where(figcaption) {
+    font-size: var(--x-text-figcaption-font-size, 87.5%);
+    font-weight: var(--x-text-figcaption-font-weight, var(--font-weight-semibold));
+    line-height: var(--x-text-figcaption-line-height, 1.5);
+    margin-block-start: var(--x-text-figcaption-margin-block-start, 0.5em);
+  }
+}

package/src/components/text/index.css

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

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

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

package/src/{ui/info → components/text}/readme.md

@@ -1,4 +1,4 @@
-# [Info](https://winduum.dev/docs/ui/info.html)
+# [Text](https://winduum.dev/docs/components/text.html)
 
 ## Installation
 ```shell
@@ -8,14 +8,14 @@ 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/info/index.css" layer(components);
+@import "winduum/src/components/text/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/info/default-props.css" layer(components);
-@import "winduum/src/ui/info/default.css" layer(components);
+@import "winduum/src/components/text/props/default.css" layer(components);
+@import "winduum/src/components/text/default.css" layer(components);
 ```
 
 ### Local imports
@@ -23,8 +23,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/info/assets/index.css" layer(components);
+@import "@/components/text/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/info.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/text.html) to learn more about usage examples.

package/src/components/title/default.css

@@ -0,0 +1,8 @@
+.x-title {
+  font-family: var(--x-title-font-family);
+  font-weight: var(--x-title-font-weight);
+  font-size: var(--x-title-font-size);
+  line-height: var(--x-title-line-height);
+  letter-spacing: var(--x-title-letter-spacing);
+  text-wrap: pretty;
+}

package/src/{ui → components}/title/index.css

@@ -1,4 +1,4 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.css";
 @import "sm.css";
 @import "lg.css";

package/src/components/title/lg.css

@@ -0,0 +1,3 @@
+.x-title:is(.lg) {
+  --x-title-font-size: var(--font-size-base);
+}

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

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

package/src/{ui/heading → components/title}/readme.md

@@ -1,4 +1,4 @@
-# [Heading](https://winduum.dev/docs/ui/heading.html)
+# [Title](https://winduum.dev/docs/components/title.html)
 
 ## Installation
 ```shell
@@ -8,16 +8,17 @@ 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/heading/index.css" layer(components);
+@import "winduum/src/components/title/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/heading/default-props.css" layer(components);
-@import "winduum/src/ui/heading/default.css" layer(components);
-@import "winduum/src/ui/heading/sm.css" layer(components);
-@import "winduum/src/ui/heading/lg.css" layer(components);
+@import "winduum/src/components/title/props/default.css" layer(components);
+@import "winduum/src/components/title/default.css" layer(components);
+@import "winduum/src/components/title/sm.css" layer(components);
+@import "winduum/src/components/title/lg.css" layer(components);
+
 ```
 
 ### Local imports
@@ -25,8 +26,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/heading/assets/index.css" layer(components);
+@import "@/components/title/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/heading.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/title.html) to learn more about usage examples.

package/src/components/title/sm.css

@@ -0,0 +1,3 @@
+.x-title:is(.sm) {
+  --x-title-font-size: var(--font-size-xs);
+}

package/src/components/toast/content.css

@@ -1,22 +1,23 @@
-.c-toast-content {
-  --c-toast-bg: var(--color-accent);
-  --c-toast-color: var(--color-accent);
-  --tw-border-mix: var(--color-body-primary);
-  --tw-border-opacity: 0.15;
-
-  border-radius: var(--c-toast-content-border-radius);
-  padding: var(--c-toast-content-py) var(--c-toast-content-px);
-  gap: var(--c-toast-content-gap);
-  background-color: var(--c-toast-content-bg);
-  color: var(--c-toast-color);
-  border: 1px solid color-mix(in var(--space), var(--c-toast-bg) calc(var(--tw-border-opacity) * 100%), var(--tw-border-mix));
+.x-toast-content {
+  border-radius: var(--x-toast-content-border-radius);
+  padding: var(--x-toast-content-padding-block) var(--x-toast-content-padding-inline);
+  gap: var(--x-toast-content-gap);
+  background-color: var(--x-toast-content-background-color);
+  color: var(--x-toast-content-color, var(--color-accent));
+  border:
+    var(--x-toast-content-border-width, 1px) solid
+    color-mix(
+      in var(--x-toast-content-border-color-space, srgb),
+      var(--x-toast-content-border-color, var(--color-accent)) var(--x-toast-content-border-color-opacity, 15%),
+      var(--x-toast-content-border-color-mix, var(--color-body-primary))
+    );
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
   align-items: center;
   display: flex;
   height: fit-content;
 
-  .ui-text {
-    --ui-text-font-size: var(--text-sm);
-    --ui-text-line-height: calc(1em + 0.375rem);
+  .x-text {
+    --x-text-font-size: var(--font-size-sm);
+    --x-text-line-height: calc(1em + 0.375rem);
   }
 }