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

package/src/components/text/default.css

@@ -1,9 +1,9 @@
-.text {
-  font-family: var(--text-font-family);
-  font-weight: var(--text-font-weight);
-  font-size: var(--text-font-size);
-  line-height: var(--text-line-height);
-  letter-spacing: var(--text-letter-spacing);
+.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) {
@@ -14,24 +14,8 @@
     margin-block-end: 0;
   }
 
-  :where(a) {
-    transition: var(--transition-color);
-    color: var(--color-accent);
-    text-decoration: underline;
-
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        color: color-mix(in var(--default-color-space), var(--color-accent) 75%, transparent);
-      }
-    }
-
-    &:focus-visible {
-      color: color-mix(in var(--default-color-space), var(--color-accent) 75%, transparent);
-    }
-  }
-
   :where(b, strong) {
-    font-weight: var(--text-content-bold);
+    font-weight: var(--x-text-content-bold);
   }
 
   :where(em) {
@@ -44,7 +28,7 @@
   }
 
   :where(p) {
-    margin-block: var(--text-content-my);
+    margin-block: var(--x-text-p-margin-block, var(--x-text-content-margin-block));
 
     &:empty {
       line-height: 0;
@@ -57,71 +41,113 @@
   }
 
   :where(hr) {
-    --tw-border-opacity: 0.1;
+    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);
 
-    margin-block: var(--text-hr-my);
+    &: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(--text-heading-font-family);
-    font-weight: var(--text-heading-font-weight, var(--text-content-bold));
-    font-size: var(--text-heading-font-size);
-    line-height: var(--text-heading-line-height);
-    letter-spacing: var(--text-heading-letter-spacing);
-    margin-block: var(--text-heading-my);
-    color: var(--text-heading-color);
+    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) {
-    --text-heading-font-size: var(--font-size-4xl);
+    --x-text-heading-font-size: var(--x-text-heading-1-font-size, var(--font-size-4xl));
   }
 
   :where(h2) {
-    --text-heading-font-size: var(--font-size-3xl);
+    --x-text-heading-font-size: var(--x-text-heading-2-font-size, var(--font-size-3xl));
   }
 
   :where(h3) {
-    --text-heading-font-size: var(--font-size-2xl);
+    --x-text-heading-font-size: var(--x-text-heading-3-font-size, var(--font-size-2xl));
   }
 
   :where(h4) {
-    --text-heading-font-size: var(--font-size-xl);
+    --x-text-heading-font-size: var(--x-text-heading-4-font-size, var(--font-size-xl));
   }
 
   :where(h5) {
-    --text-heading-font-size: var(--font-size-lg);
+    --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-width: 100%;
+    min-inline-size: 100%;
 
     :where(td, th) {
-      padding: 1em 1.25em;
+      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(--text-content-bold);
-      border-block-end: 1px solid color-mix(in var(--default-color-space), currentColor 10%, transparent);
+      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(--default-color-space), currentColor 5%, transparent);
+        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: 0.75em;
-    padding-inline-start: 1em;
-    margin-block: var(--text-content-my);
+    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: 0.5em;
-      padding-inline-start: 1ch;
+      margin-block: var(--x-text-list-item-margin-block, 0.5em);
+      padding-inline-start: var(--x-text-list-item-padding-inline-start, 1ch);
     }
   }
 
@@ -132,8 +158,8 @@
 
     & :where(li) {
       &::marker {
-        color: var(--color-accent);
-        font-weight: var(--text-content-bold);
+        color: var(--x-text-list-marker-color, var(--color-accent));
+        font-weight: var(--x-text-list-marker-font-weight, var(--x-text-content-bold));
       }
     }
   }
@@ -144,50 +170,54 @@
       list-style-type: "";
 
       &::before {
-        width: var(--text-content-marker-size);
-        height: var(--text-content-marker-size);
+        width: var(--x-text-list-marker-size);
+        height: 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;
-        left: -0.75em;
-        top: 0.5lh;
-        border: 1px solid var(--color-accent);
-        background-color: var(--text-content-marker-bg, var(--color-accent));
-        margin-inline-start: calc((var(--text-content-marker-size) / 2) * -1);
-        margin-block-start: calc(var(--text-content-marker-size) / 2 * -1);
-        border-radius: var(--text-content-marker-radius, 50%);
-        mask: var(--text-content-marker-mask);
         will-change: transform;
         content: "";
       }
     }
 
     &[style*="square"] {
-      --text-content-marker-radius: 0;
+      --x-text-list-marker-border-radius: 0;
     }
 
     &[style*="circle"] {
-      --text-content-marker-bg: transparent;
+      --x-text-list-marker-background-color: transparent;
     }
   }
 
   :where(blockquote) {
-    border-left: 0.375em solid var(--color-accent);
-    padding: 0.5em 1.25em;
-    margin-block: var(--text-content-my);
-    font-size: inherit;
+    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: 87.5%;
+    font-size: var(--x-text-code-font-size, 87.5%);
   }
 
   :where(figure) {
-    margin-block: var(--text-content-my);
+    margin-block: var(--x-text-figure-margin-block, var(--x-text-content-margin-block));
   }
 
   :where(figcaption) {
-    font-size: 87.5%;
-    line-height: 1.5;
-    font-weight: var(--font-weight-semibold);
-    margin-block-start: 0.5em;
+    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

@@ -1,2 +1,2 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.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/components/text/readme.md

@@ -1,4 +1,4 @@
-# [Text](https://winduum.dev/docs/ui/text.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/text/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/text/default-props.css" layer(components);
-@import "winduum/src/ui/text/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/text/assets/index.css" layer(components);
+@import "@/components/text/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/text.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

@@ -1,8 +1,8 @@
-.title {
-  font-family: var(--title-font-family);
-  font-weight: var(--title-font-weight);
-  font-size: var(--title-font-size);
-  line-height: var(--title-line-height);
-  letter-spacing: var(--title-letter-spacing);
+.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/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

@@ -1,3 +1,3 @@
-.title:is(.lg) {
-  --title-font-size: var(--font-size-base);
+.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/components/title/readme.md

@@ -1,4 +1,4 @@
-# [Title](https://winduum.dev/docs/ui/title.html)
+# [Title](https://winduum.dev/docs/components/title.html)
 
 ## Installation
 ```shell
@@ -8,16 +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/title/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/title/default.css" layer(components);
-@import "winduum/src/ui/title/default-props.css" layer(components);
-@import "winduum/src/ui/title/sm.css" layer(components);
-@import "winduum/src/ui/title/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);
 
 ```
 
@@ -26,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/title/assets/index.css" layer(components);
+@import "@/components/title/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/title.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

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

package/src/components/toast/content.css

@@ -1,22 +1,23 @@
-.toast-content {
-  --toast-bg: var(--color-accent);
-  --toast-color: var(--color-accent);
-  --tw-border-mix: var(--color-body-primary);
-  --tw-border-opacity: 0.15;
-
-  border-radius: var(--toast-content-border-radius);
-  padding: var(--toast-content-py) var(--toast-content-px);
-  gap: var(--toast-content-gap);
-  background-color: var(--toast-content-bg);
-  color: var(--toast-color);
-  border: 1px solid color-mix(in var(--default-color-space), var(--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;
 
-  .text {
-    --text-font-size: var(--font-size-sm);
-    --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);
   }
 }

package/src/components/toast/default.css

@@ -1,30 +1,30 @@
-.toast {
-  width: min(100%, var(--toast-width));
-  height: var(--toast-height);
-  transition: all var(--toast-duration) var(--transition-timing-function-in-out);
+.x-toast {
+  inline-size: min(100%, var(--x-toast-inline-size));
+  block-size: var(--x-toast-block-size);
+  transition: all var(--x-toast-transition-duration) var(--x-toast-transition-timing-function, var(--transition-timing-function-in-out));
   position: relative;
   pointer-events: auto;
   display: flex;
   flex-direction: column;
   visibility: hidden;
-  opacity: 0;
+  opacity: 0%;
 
   .flex-col-reverse & {
     justify-content: flex-end;
   }
 
   &.in {
-    margin-block: var(--toaster-spacing-y);
+    margin-block: var(--x-toaster-margin-block);
   }
 
   &.in:where(:nth-last-child(-n+3)) {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
   }
 
   &.out {
     visibility: hidden;
-    opacity: 0;
+    opacity: 0%;
     height: 0;
     margin-block: 0;
   }

package/src/components/toast/index.css

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

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

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-toast-content-border-radius: var(--radius-2xl);
+  --x-toast-content-padding-block: var(--spacing-md);
+  --x-toast-content-padding-inline: var(--spacing-lg);
+  --x-toast-content-gap: var(--spacing-xl);
+  --x-toast-content-background-color: var(--color-body-primary);
+}

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

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

package/src/components/toast/readme.md

@@ -17,9 +17,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/toast/default-props.css" layer(components);
+@import "winduum/src/components/toast/props/default.css" layer(components);
+@import "winduum/src/components/toast/props/content.css" layer(components);
 @import "winduum/src/components/toast/default.css" layer(components);
-@import "winduum/src/components/toast/content-props.css" layer(components);
 @import "winduum/src/components/toast/content.css" layer(components);
 ```
 

package/src/components/toaster/default.css

@@ -1,7 +1,7 @@
-.toaster {
-  z-index: var(--z-index-50);
-  padding: var(--toaster-p);
-  margin-block: calc(var(--toaster-spacing-y) * -1);
+.x-toaster {
+  z-index: var(--x-toaster-z-index, var(--z-index-50));
+  padding: var(--x-toaster-padding);
+  margin-block: calc(var(--x-toaster-margin-block) * -1);
   position: fixed;
   inset: 0;
   pointer-events: none;

package/src/components/toaster/index.css

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

package/src/components/toaster/index.js

@@ -8,7 +8,7 @@ import { animationsFinished, nextRepaint } from '../../common.js'
 export const closeToast = async (element, options = {}) => {
     options = {
         hiddenClass: 'out',
-        heightProperty: '--toast-height',
+        heightProperty: '--x-toast-block-size',
         ...options
     }
 
@@ -36,7 +36,7 @@ export const showToast = async (element, options = {}) => {
     options = {
         visibleClass: 'in',
         autoHide: null,
-        heightProperty: '--toast-height',
+        heightProperty: '--x-toast-block-size',
         close: {},
         ...options
     }
@@ -65,8 +65,8 @@ export const insertToaster = async (element, options = {}) => {
         ...options
     }
 
-    if (!document.querySelector('.toaster')) {
-        element.insertAdjacentHTML('beforeend', `<ol class="toaster ${options.classes}"></ol>`)
+    if (!document.querySelector('.x-toaster')) {
+        element.insertAdjacentHTML('beforeend', `<ol class="x-toaster ${options.classes}"></ol>`)
     }
 }
 
@@ -87,12 +87,12 @@ export const insertToast = async (element, options = {}) => {
     }
 
     element.insertAdjacentHTML('beforeend', `
-        <li class="toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
-            <div class="toast-content">
+        <li class="x-toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
+            <div class="x-toast-content">
                ${options.start}
                 <div class="flex-col">
-                    <div class="ui-title">${options.title}</div>           
-                    <div class="ui-text">${options.text}</div>
+                    <div class="x-title">${options.title}</div>           
+                    <div class="x-text">${options.text}</div>
                 </div>
                 ${options.end}
             </div>

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-toaster-padding: var(--spacing-xl);
+  --x-toaster-margin-block: var(--spacing-xs);
+}

package/src/components/toaster/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/toaster/default-props.css" layer(components);
+@import "winduum/src/components/toaster/props/default.css" layer(components);
 @import "winduum/src/components/toaster/default.css" layer(components);
 ```