winduum 0.4.0 → 0.5.0-next.10

package/src/ui/image.css

@@ -1,32 +1,21 @@
 .ui-image {
   position: relative;
-  display: block;
+  display: flex;
   border-radius: inherit;
   flex-shrink: 0;
+  max-width: max-content;
 
-  &:not([class*="bg-"])::before {
-    content: "";
+  &::before {
     position: absolute;
     inset: 0;
-    background:
-      linear-gradient(
-        270deg,
-        color-mix(in sRGB, var(--color-body) 50%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
-        color-mix(in sRGB, var(--color-body) 50%, var(--color-main))
-      );
-    background-size: 400% 100%;
-    animation: skeleton-wave 1.5s linear infinite;
-    border-radius: inherit;
     z-index: -1;
-    opacity: 0.3;
+    border-radius: inherit;
   }
 
-  & > *:not(source) {
-    display: block;
-    width: 100%;
-    height: 100%;
+  & > :where(img, video, iframe, object, svg) {
     border-radius: inherit;
+    min-width: 100%;
+    height: auto;
+    object-fit: cover;
   }
 }

package/src/ui/index.css

@@ -7,7 +7,6 @@
 @import "image.css";
 @import "info.css";
 @import "label.css";
-@import "link.css";
 @import "notice.css";
 @import "progress.css";
 @import "switch.css";

package/src/ui/info.css

@@ -1,7 +1,8 @@
 .ui-info {
-  --ui-info-font-size: 0.75rem;
-  --ui-info-font-weight: var(--font-normal);
-
-  font-size: var(--ui-info-font-size);
-  font-weight: var(--ui-info-font-weight);
+  font-family: var(--ui-info-font-family, inherit);
+  font-weight: var(--ui-info-font-weight, inherit);
+  font-size: var(--ui-info-font-size, var(--text-xs));
+  line-height: var(--ui-info-line-height, calc(1em + var(--ui-info-line-height-ratio, 0.15lh)));
+  letter-spacing: var(--ui-info-letter-spacing, inherit);
+  text-wrap: balance;
 }

package/src/ui/label.css

@@ -1,7 +1,8 @@
 .ui-label {
-  --ui-label-font-size: 0.875rem;
-  --ui-label-font-weight: var(--font-medium);
-
-  font-size: var(--ui-label-font-size);
-  font-weight: var(--ui-label-font-weight);
+  font-family: var(--ui-label-font-family, inherit);
+  font-weight: var(--ui-label-font-weight, inherit);
+  font-size: var(--ui-label-font-size, var(--text-sm));
+  line-height: var(--ui-label-line-height, calc(1em + var(--ui-label-line-height-ratio, 0.15lh)));
+  letter-spacing: var(--ui-label-letter-spacing, inherit);
+  text-wrap: balance;
 }

package/src/ui/notice.css

@@ -1,26 +1,18 @@
 .ui-notice {
   --color-current: var(--color-accent);
-  --ui-notice-bg: var(--color-accent);
-  --ui-notice-py: 1.25rem;
-  --ui-notice-px: 1.5rem;
-  --ui-notice-font-size: 0.875rem;
-  --ui-notice-border-radius: var(--rounded);
   --ui-notice-outline-width: 1px;
-  --ui-notice-outline-offset: calc(var(--ui-notice-outline-width) * -1);
-  --ui-notice-outline-opacity: 10%;
-  --ui-notice-gap: 1.25rem;
 
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: var(--ui-notice-py) var(--ui-notice-px);
-  font-size: var(--ui-notice-font-size);
-  border-radius: var(--ui-notice-border-radius);
-  background-color: color-mix(in sRGB, var(--ui-notice-bg) 10%, transparent);
-  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
-  outline-offset: var(--ui-notice-outline-offset);
+  padding: var(--ui-notice-py, 1.25rem) var(--ui-notice-px, 1.5rem);
+  font-size: var(--ui-notice-font-size, var(--text-sm));
+  border-radius:  var(--rounded);
+  background-color: color-mix(in sRGB, var(--color-accent) 10%, transparent);
+  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-notice-outline-opacity, 10%), transparent);
+  outline-offset: var(--ui-notice-outline-offset, calc(var(--ui-notice-outline-width) * -1));
   color: var(--color-accent);
-  gap: var(--ui-notice-gap);
+  gap: var(--ui-notice-gap, 1.25rem);
   text-wrap: balance;
 
   & :where(hr) {

package/src/ui/progress/default.css

@@ -1,14 +1,13 @@
 .ui-progress {
-  --ui-progress-height: 1rem;
-  --ui-progress-border-radius: var(--rounded-full);
   --ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
-  --ui-progress-bg-opacity: 10%;
+  --ui-progress-bg-opacity: calc(var(--tw-bg-opacity, 1) * 10%);
 
   appearance: none;
-  height: var(--ui-progress-height);
-  border-radius: var(--ui-progress-border-radius);
+  height: var(--ui-progress-height, 1rem);
+  border-radius: var(--ui-progress-border-radius, var(--rounded-full));
   background-color: var(--ui-progress-bg);
   width: 100%;
+  overflow: clip;
 
   &::-webkit-progress-bar {
     background-color: transparent;
@@ -16,12 +15,10 @@
 
   &::-webkit-progress-value {
     background-color: var(--color-accent);
-    border-radius: var(--ui-progress-border-radius);
   }
 
   &::-moz-progress-bar {
     background-color: var(--color-accent);
-    border-radius: var(--ui-progress-border-radius);
   }
 
   &:indeterminate {
@@ -30,7 +27,6 @@
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 150% 150%;
-    border-radius: var(--ui-progress-border-radius);
 
     &::-moz-progress-bar {
       background-color: transparent;

package/src/ui/progress/lg.css

@@ -1,3 +1,3 @@
-.ui-progress:where(.lg) {
+.ui-progress:is(.lg) {
   --ui-progress-height: 1.5rem;
 }

package/src/ui/progress/sm.css

@@ -1,3 +1,3 @@
-.ui-progress:where(.sm) {
+.ui-progress:is(.sm) {
   --ui-progress-height: 0.5rem;
 }

package/src/ui/switch.css

@@ -1,24 +1,18 @@
 .ui-switch {
   --ui-switch-width: 3rem;
   --ui-switch-height: 1.5rem;
-  --ui-switch-font-size: 0.875rem;
-  --ui-switch-gap: 0.625rem;
-  --ui-switch-padding: 0.375rem;
-  --ui-switch-bg: var(--color-dark);
-  --ui-switch-radius: var(--rounded-full);
-  --ui-switch-outline-width: 3px;
-  --ui-switch-outline-offset: 0;
-  --ui-switch-outline-opacity: 20%;
+  --ui-check-icon-size: 1.125rem;
 
   :where(.dark) & {
     --ui-switch-bg: var(--color-body-tertiary);
   }
 
-  display: flex;
-  align-items: center;
-  gap: 0 var(--ui-switch-gap);
-  width: fit-content;
-  font-size: var(--ui-switch-font-size);
+  display: inline-flex;
+  gap: var(--ui-switch-gap, 0.75rem);
+  font-weight: var(--ui-switch-font-weight, var(--font-normal));
+  font-size: var(--ui-switch-font-size, var(--text-sm));
+  line-height: var(--ui-switch-line-height, calc(1em + var(--ui-switch-line-height-ratio, 0.25lh)));
+  letter-spacing: var(--ui-switch-letter-spacing, inherit);
   text-wrap: balance;
 
   & :where(label[for], input) {
@@ -31,34 +25,28 @@
   }
 
   & :where(input) {
+    display: flex;
     width: var(--ui-switch-width);
     height: var(--ui-switch-height);
-    display: block;
-    position: relative;
-    border-radius: var(--ui-switch-radius);
-    background-color: var(--ui-switch-bg);
-    transition:
-      var(--transition-background),
-      outline-color var(--transition-duration),
-      outline-offset var(--transition-duration);
-    appearance: none;
-    outline: var(--ui-switch-outline-width) solid transparent;
+    background-color: var(--ui-switch-bg, var(--color-dark));
+    border-radius: var(--ui-switch-radius, var(--rounded-full));
+    outline: var(--ui-switch-outline-width, 3px) solid transparent;
     outline-offset: 0;
-    color: inherit;
+    transition-property: var(--transition);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--duration);
+    flex-shrink: 0;
+    position: relative;
+    padding: calc((var(--ui-switch-height) - var(--ui-check-icon-size)) / 2);
 
     &::before {
-      width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      background-color: var(--color-light);
-      border-radius: var(--ui-switch-radius);
-      position: absolute;
-      left: var(--ui-switch-height);
-      top: 50%;
       content: "";
-      display: block;
-      margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
-      transition: left var(--transition-duration), var(--transition-background);
-      transform: translateY(-50%);
+      width: var(--ui-check-icon-size);
+      height: var(--ui-check-icon-size);
+      background-color: var(--color-light);
+      border-radius: inherit;
+      margin-block: auto;
+      transition: var(--transition-all);
     }
 
     &:where(:required) {
@@ -69,13 +57,13 @@
     }
 
     &:disabled {
-      opacity: 0.8;
-      pointer-events: none;
+      cursor: not-allowed;
+      opacity: var(--ui-switch-disabled-opacity, 0.5);
     }
 
     &:focus {
-      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
-      outline-offset: var(--ui-switch-outline-offset);
+      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity, 20%), transparent);
+      outline-offset: var(--ui-switch-outline-offset, 0);
     }
 
     &:checked {
@@ -83,8 +71,7 @@
       --ui-switch-bg: var(--color-accent);
 
       &::before {
-        background-color: var(--color-light);
-        left: 100%;
+        margin-left: calc(100% - var(--ui-check-icon-size));
       }
     }
   }

package/src/ui/text.css

@@ -1,14 +1,21 @@
 .ui-text {
-  --ui-text-size: 0.875rem;
-  --ui-text-size-line: 0.75rem;
-  --ui-text-weight: var(--font-normal);
-  --ui-text-weight-bold: var(--font-semibold);
-  --ui-text-content-my: 1rem;
-  --ui-text-content-my-lg: 2rem;
+  --ui-text-content-bold: var(--font-semibold);
+  --ui-text-content-my: 1.25em;
+  --ui-text-content-marker-size: 0.375em;
 
-  font-weight: var(--ui-text-weight);
-  font-size: var(--ui-text-size);
-  line-height: calc(var(--ui-text-size) + var(--ui-text-size-line));
+  font-family: var(--ui-text-font-family, var(--font-primary));
+  font-weight: var(--ui-text-font-weight, var(--font-normal));
+  font-size: var(--ui-text-font-size, inherit);
+  line-height: var(--ui-text-line-height, calc(1em + var(--ui-text-line-height-ratio, 0.5lh)));
+  letter-spacing: var(--ui-text-letter-spacing, 0);
+
+  & > :is(*:first-child) {
+    margin-block-start: 0;
+  }
+
+  & > :is(*:last-child) {
+    margin-block-end: 0;
+  }
 
   & :where(a) {
     text-decoration: underline;
@@ -27,78 +34,66 @@
   }
 
   & :where(b, strong) {
-    font-weight: var(--ui-text-weight-bold);
-  }
-
-  & :where(i, em) {
-    display: inline;
-    font-style: italic;
-  }
-
-  & :where(figure) {
-    margin: var(--ui-text-content-my) 0;
+    font-weight: var(--ui-text-content-bold);
   }
 
-  & :where(figcaption) {
-    font-size: 0.875rem;
-    font-weight: var(--font-semibold);
-    margin-top: 0.25rem;
-    line-height: 1.5;
+  & :where(s, u, em, i) {
+    all: revert;
   }
 
   & :where(img) {
+    display: block;
     height: auto;
   }
 
   & :where(p) {
-    line-height: inherit;
-
-    &:not(:only-child) {
-      margin: var(--ui-text-content-my) 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+    margin-block: var(--ui-text-content-my);
 
     &:empty {
-      line-height: var(--ui-text-content-my);
+      line-height: 0;
       margin: 0;
-    }
 
-    &::after {
-      content: "\00a0";
+      &::after {
+        content: "\00a0";
+      }
     }
   }
 
   & :where(hr) {
     --tw-border-opacity: 0.1;
 
-    margin: var(--ui-text-content-my-lg) 0;
+    margin-block: var(--ui-text-hr-my, 3em);
   }
 
   & :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: var(--ui-text-weight-bold);
-    font-family: var(--font-secondary);
-    font-size: var(--ui-text-heading-size, 1rem);
-    line-height: calc(var(--ui-text-heading-size) + 0.5rem);
-    margin: var(--ui-text-content-my-lg) 0 var(--ui-text-content-my);
-
-    &:first-child {
-      margin-top: 0;
-    }
+    font-family: var(--ui-text-heading-font-family, var(--font-secondary));
+    font-weight: var(--ui-text-heading-font-weight, var(--ui-text-content-bold));
+    font-size: var(--ui-text-heading-font-size);
+    line-height: var(--ui-text-heading-line-height, calc(1em + var(--ui-text-heading-line-height-ratio, 0.25lh)));
+    letter-spacing: var(--ui-text-heading-letter-spacing);
+    margin-block: var(--ui-text-heading-my, 1.5em 0.5em);
+    color: var(--ui-text-heading-color, inherit);
+    text-wrap: balance;
   }
 
   & :where(h1) {
-    --ui-text-heading-size: 2.25rem;
+    --ui-text-heading-font-size: var(--text-4xl);
   }
 
   & :where(h2) {
-    --ui-text-heading-size: 1.75rem;
+    --ui-text-heading-font-size: var(--text-3xl);
+  }
+
+  & :where(h3) {
+    --ui-text-heading-font-size: var(--text-2xl);
+  }
+
+  & :where(h4) {
+    --ui-text-heading-font-size: var(--text-xl);
   }
 
-  & :where(h3, h4) {
-    --ui-text-heading-size: 1.25rem;
+  & :where(h5) {
+    --ui-text-heading-font-size: var(--text-lg);
   }
 
   & :where(table) {
@@ -106,12 +101,12 @@
     min-width: 100%;
 
     & :where(td, th) {
-      padding: 1rem 1.25rem;
+      padding: 1em 1.25em;
       text-align: left;
     }
 
     & :where(thead) {
-      font-weight: var(--ui-text-weight-bold);
+      font-weight: var(--ui-text-content-bold);
       border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
     }
 
@@ -122,96 +117,90 @@
     }
   }
 
-  & :where(iframe) {
-    max-width: 100%;
-  }
+  & :where(ol, ul) {
+    margin-inline-start: 0.75em;
+    padding-inline-start: 1em;
+    margin-block: var(--ui-text-content-my);
 
-  & :where(blockquote) {
-    border-left: 0.3125rem solid var(--color-accent);
-    padding: 0.5rem 1.25rem;
-    margin: 1rem 0;
-    font-size: inherit;
-  }
-
-  & :where(code) {
-    margin: 0 0.25rem;
-    border-radius: var(--rounded-sm);
-    padding: 0.25rem 0.375rem;
-    font-size: 0.85em;
-    color: var(--color-accent);
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-    background-color: rgb(27 31 35 / 5%);
-
-    :where(.dark) & {
-      background-color: var(--color-body-secondary);
+    & :where(li) {
+      margin-block: 0.5em;
+      padding-inline-start: 1ch;
     }
   }
 
   & :where(ol) {
-    margin: var(--ui-text-content-my) 0;
-    padding: 0 0 0 1rem;
-
     &:not([type]) {
       list-style: decimal;
     }
 
     & :where(li) {
-      padding-left: 0.5rem;
-
-      &:not(:last-child) {
-        margin: 0 0 0.5rem;
-      }
-
       &::marker {
         color: var(--color-accent);
-        font-weight: var(--ui-text-weight-bold);
+        font-weight: var(--ui-text-content-bold);
       }
     }
   }
 
   & :where(ul) {
-    list-style-type: none !important;
-    margin: var(--ui-text-content-my) 0;
-    padding: 0;
-
     & :where(li) {
       position: relative;
-      line-height: inherit;
-      padding-left: 1.25rem;
-
-      &:not(:last-child) {
-        margin: 0 0 0.5rem;
-      }
+      list-style-type: "";
 
       &::before {
-        width: 0.375rem;
-        height: 0.375rem;
+        width: var(--ui-text-content-marker-size);
+        height: var(--ui-text-content-marker-size);
         position: absolute;
-        content: "";
+        left: -0.75em;
+        top: 0.5lh;
         border: 1px solid var(--color-accent);
-        background-color: var(--color-accent);
-        left: 0;
-        top: 0.6875rem;
-        text-indent: 0;
-        border-radius: 50%;
+        background-color: var(--ui-text-content-marker-bg, var(--color-accent));
+        margin-inline-start: calc((var(--ui-text-content-marker-size) / 2) * -1);
+        margin-block-start: calc(var(--ui-text-content-marker-size) / 2 * -1);
+        border-radius: var(--ui-text-content-marker-radius, 50%);
+        mask: var(--ui-text-content-marker-mask);
+        will-change: transform;
+        content: "";
       }
     }
 
     &[style*="square"] {
-      & :where(li) {
-        &::before {
-          border-radius: 0;
-        }
-      }
+      --ui-text-content-marker-radius: 0;
     }
 
     &[style*="circle"] {
-      & :where(li) {
-        &::before {
-          border-radius: 50%;
-          background-color: transparent;
-        }
-      }
+      --ui-text-content-marker-bg: transparent;
+    }
+  }
+
+  & :where(blockquote) {
+    border-left: 0.375em solid var(--color-accent);
+    padding: 0.5em 1.25em;
+    margin-block: var(--ui-text-content-my);
+    font-size: inherit;
+  }
+
+  & :where(code) {
+    font-size: 87.5%;
+    margin-inline: var(--spacing-xs);
+    border-radius: var(--rounded-sm);
+    padding: 0.25em 0.375em;
+    color: var(--color-accent);
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+    background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
+
+    :where(.dark) & {
+      background-color: var(--color-body-secondary);
     }
   }
+
+  & :where(figure) {
+    margin-block: var(--ui-text-content-my);
+  }
+
+  & :where(figcaption) {
+    font-size: 87.5%;
+    line-height: 1.5;
+    font-weight: var(--font-semibold);
+    margin-block-start: 0.5em;
+  }
 }

package/src/ui/title/default.css

@@ -1,15 +1,8 @@
 .ui-title {
-  --ui-title-font-family: var(--font-secondary);
-  --ui-title-font-weight: var(--font-semibold);
-  --ui-title-font-size: 0.875rem;
-  --ui-title-line-height: calc(var(--ui-title-font-size) + var(--ui-title-line-height-ratio));
-  --ui-title-line-height-ratio: 0.375rem;
-  --ui-title-letter-spacing: 0;
-
-  font-family: var(--ui-title-font-family);
-  font-size: var(--ui-title-font-size);
-  line-height: var(--ui-title-line-height);
-  font-weight: var(--ui-title-font-weight);
-  letter-spacing: var(--ui-title-letter-spacing);
+  font-family: var(--ui-title-font-family, var(--font-secondary));
+  font-weight: var(--ui-title-font-weight, var(--font-semibold));
+  font-size: var(--ui-title-font-size, var(--text-sm));
+  line-height: var(--ui-title-line-height, calc(1em + var(--ui-title-line-height-ratio, 0.15lh)));
+  letter-spacing: var(--ui-title-letter-spacing, 0);
   text-wrap: balance;
 }

package/src/ui/title/lg.css

@@ -1,3 +1,3 @@
-.ui-title:where(.lg) {
-  --ui-title-font-size: 1.125rem;
+.ui-title:is(.lg) {
+  --ui-title-font-size: var(--text-base);
 }

package/src/ui/title/sm.css

@@ -1,3 +1,3 @@
-.ui-title:where(.sm) {
-  --ui-title-font-size: 0.75rem;
+.ui-title:is(.sm) {
+  --ui-title-font-size: var(--text-xs);
 }

package/tailwind.config.js

@@ -1,4 +1,6 @@
 import winduum from './utils/tailwind.js'
+import containerQueries from '@tailwindcss/container-queries'
+import animate from 'tailwindcss-animate'
 
 export default {
     darkMode: 'class',
@@ -7,6 +9,8 @@ export default {
         './playground/**/*.{js,html,vue}'
     ],
     plugins: [
-        winduum()
+        winduum(),
+        containerQueries,
+        animate
     ]
 }

package/utils/tailwind.cjs

@@ -235,6 +235,9 @@ const createPlugin = (userConfig = {}) => {
         },
         theme: {
             extend: {
+                transitionDuration: {
+                    DEFAULT: 'var(--transition-duration)'
+                },
                 colors: tailwindColors(userConfig.colors),
                 fontSize: tailwindVariablesFont('text', userConfig.fontSize),
                 fontFamily: tailwindVariables('font', userConfig.fontFamily),