winduum 1.2.1 → 2.0.0-next.1

package/src/components/button/default.css

@@ -0,0 +1,63 @@
+.button {
+  --button-background-color: var(--color-accent);
+  --button-border-color: var(--color-accent);
+  --button-color: var(--color-accent-foreground);
+
+  inline-size: var(--button-width);
+  block-size: var(--button-height);
+  padding: var(--button-padding-block) var(--button-padding-inline);
+  padding-inline: calc(var(--button-padding-inline) - var(--button-border-width));
+  border-radius: var(--button-border-radius);
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  letter-spacing: var(--button-letter-spacing);
+  background-color:
+    color-mix(
+      in var(--button-background-color-space, srgb),
+      var(--button-background-color) var(--button-background-color-opacity, 100%),
+      var(--button-background-color-mix, transparent)
+    );
+  color:
+    color-mix(
+      in var(--button-color-space, srgb),
+      var(--button-color) var(--button-color-opacity, 100%),
+      var(--button-color-mix, transparent)
+    );
+  border:
+    var(--button-border-width)
+    solid
+    color-mix(
+      in var(--button-border-color-space, srgb),
+      var(--button-border-color) var(--button-border-color-opacity, 100%),
+      var(--button-border-color-mix, transparent)
+    );
+  outline:
+    var(--button-outline-width)
+    solid
+    color-mix(
+      in var(--button-outline-color-space, srgb),
+      var(--button-outline-color, transparent) var(--button-outline-color-opacity, 100%),
+      var(--button-outline-color-mix, transparent)
+    );
+  outline-offset: var(--button-outline-offset);
+  gap: var(--button-gap);
+  user-select: none;
+  overflow: clip;
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  line-height: 1;
+  flex-shrink: 0;
+  z-index: 0;
+
+  :where(*) {
+    pointer-events: none;
+  }
+
+  &:where(input)::after {
+    content: attr(aria-label);
+  }
+}

package/src/components/button/fill.css

@@ -0,0 +1,6 @@
+.button:is(.fill) {
+  --button-hover-background-color-mix: var(--color-dark);
+  --button-hover-background-color-opacity: 100%;
+  --button-active-background-color-mix: var(--color-dark);
+  --button-active-background-color-opacity: 90%;
+}

package/src/components/button/ghosted.css

@@ -0,0 +1,14 @@
+.button:is(.ghosted) {
+  --button-disabled-background-color-opacity: 0%;
+  --button-disabled-background-color-mix: transparent;
+  --button-disabled-color: var(--color-accent);
+  --button-active-background-color-opacity: 20%;
+  --button-active-background-color-mix: transparent;
+  --button-active-color: var(--color-accent);
+  --button-hover-background-color-opacity: 10%;
+  --button-hover-background-color-mix: transparent;
+  --button-hover-color: var(--color-accent);
+  --button-focus-outline-offset: -2px;
+  --button-color: var(--color-accent);
+  --button-background-color-opacity: 0%;
+}

package/src/{ui/btn → components/button}/index.css

@@ -1,16 +1,11 @@
+@import "props/default.css";
+@import "props/interactive.css";
 @import "default.css";
-@import "default-props.css";
 @import "interactive.css";
-@import "interactive-props.css";
 @import "sm.css";
 @import "lg.css";
-@import "loading.css";
-@import "loading-props.css";
-@import "wide.css";
 @import "bordered.css";
 @import "ghosted.css";
-@import "gradient.css";
-@import "gradient-bordered.css";
 @import "muted.css";
 @import "raised.css";
 @import "fill.css";

package/src/components/button/interactive.css

@@ -0,0 +1,56 @@
+.button {
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-duration: var(--default-transition-duration);
+
+  &:where(.accent-primary),
+  &:where(.accent-body),
+  &:where(.accent-light),
+  &:where(.accent-dark) {
+    --button-hover-background-color-mix: var(--color-accent-foreground);
+  }
+
+  &:is(button, input, :any-link, [role="button"]) {
+    &:hover {
+      --button-background-color: var(--button-hover-background-color, var(--color-accent));
+      --button-background-color-mix: var(--button-hover-background-color-mix);
+      --button-background-color-opacity: var(--button-hover-background-color-opacity);
+      --button-border-color: var(--button-hover-border-color, var(--color-accent));
+      --button-border-color-mix: var(--button-hover-border-color-mix, transparent);
+      --button-border-color-opacity: var(--button-hover-border-color-opacity, 100%);
+      --button-color: var(--button-hover-color, var(--color-accent-foreground));
+      --button-color-mix: var(--button-hover-color-mix, transparent);
+      --button-color-opacity: var(--button-hover-color-opacity, 100%);
+    }
+
+    &:focus {
+      --button-outline-offset: var(--button-focus-outline-offset);
+      --button-outline-color: var(--button-focus-outline-color, var(--color-accent));
+      --button-outline-color-opacity: var(--button-focus-outline-color-opacity);
+    }
+
+    &:active, &:checked, &[data-active] {
+      --button-background-color: var(--button-hover-background-color, var(--color-accent));
+      --button-background-color-mix: var(--button-active-background-color-mix);
+      --button-background-color-opacity: var(--button-active-background-color-opacity);
+      --button-border-color: var(--button-active-border-color, var(--color-accent));
+      --button-border-color-mix: var(--button-active-border-color-mix, transparent);
+      --button-border-color-opacity: var(--button-active-border-color-opacity, 100%);
+      --button-color: var(--button-active-color, var(--color-accent-foreground));
+      --button-color-mix: var(--button-active-color-mix, transparent);
+      --button-color-opacity: var(--button-active-color-opacity, 100%);
+    }
+
+    &:disabled {
+      --button-background-color: var(--button-disabled-background-color, var(--color-accent));
+      --button-background-color-mix: var(--button-disabled-background-color-mix, transparent);
+      --button-background-color-opacity: var(--button-disabled-background-color-opacity, 50%);
+      --button-border-color: var(--button-disabled-border-color, var(--color-accent));
+      --button-border-color-mix: var(--button-disabled-border-color-mix, transparent);
+      --button-border-color-opacity: var(--button-disabled-border-color-opacity, 50%);
+      --button-color: var(--button-disabled-color, var(--color-accent-foreground));
+      --button-color-mix: var(--button-disabled-color-mix, transparent);
+      --button-color-opacity: var(--button-disabled-color-opacity, 50%);
+    }
+  }
+}

package/src/components/button/lg.css

@@ -0,0 +1,4 @@
+.button:is(.lg) {
+  --button-height: 3rem;
+  --button-padding-inline: 1.75rem;
+}

package/src/components/button/muted.css

@@ -0,0 +1,14 @@
+.button:is(.muted) {
+  --button-disabled-background-color-opacity: 5%;
+  --button-disabled-background-color-mix: transparent;
+  --button-disabled-color: var(--color-accent);
+  --button-active-background-color-opacity: 30%;
+  --button-active-background-color-mix: transparent;
+  --button-active-color: var(--color-accent);
+  --button-hover-background-color-opacity: 20%;
+  --button-hover-background-color-mix: transparent;
+  --button-hover-color: var(--color-accent);
+  --button-focus-outline-offset: -2px;
+  --button-color: var(--color-accent);
+  --button-background-color-opacity: 10%;
+}

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

@@ -0,0 +1,11 @@
+:root, :host {
+  --button-outline-width: 2px;
+  --button-border-width: 0px;
+  --button-border-radius: var(--radius);
+  --button-font-size: var(--font-size-sm);
+  --button-font-weight: var(--font-weight-medium);
+  --button-gap: var(--spacing-sm);
+  --button-height: 2.25rem;
+  --button-padding-block: 0.375rem;
+  --button-padding-inline: 0.75rem;
+}

package/src/components/button/props/interactive.css

@@ -0,0 +1,9 @@
+:root, :host {
+  --button-hover-background-color-mix: var(--color-dark);
+  --button-hover-background-color-opacity: 80%;
+  --button-focus-outline-offset: 2px;
+  --button-focus-outline-color-opacity: 50%;
+  --button-active-background-color-mix: var(--color-dark);
+  --button-active-background-color-opacity: 90%;
+  --button-disabled-background-color-opacity: 75%;
+}

package/src/components/button/raised.css

@@ -0,0 +1,6 @@
+.button:is(.raised) {
+  --button-border-width: 1px;
+  --button-border-color-opacity: 75%;
+  --button-border-color: var(--button-background-color);
+  --button-border-color-mix: var(--button-color);
+}

package/src/components/button/readme.md

@@ -0,0 +1,46 @@
+# [Button](https://winduum.dev/docs/components/button.html)
+
+## Installation
+```shell
+npm i winduum
+```
+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/button/index.css" layer(components);
+```
+
+or modular (you can use your own props or CSS)
+
+```css
+@import "winduum/src/button/default.css" layer(components);
+@import "winduum/src/button/props/default.css" layer(components);
+@import "winduum/src/button/interactive.css" layer(components);
+@import "winduum/src/button/props/interactive.css" layer(components);
+@import "winduum/src/button/sm.css" layer(components);
+@import "winduum/src/button/lg.css" layer(components);
+@import "winduum/src/button/bordered.css" layer(components);
+@import "winduum/src/button/ghosted.css" layer(components);
+@import "winduum/src/button/fill.css" layer(components);
+@import "winduum/src/button/muted.css" layer(components);
+@import "winduum/src/button/raised.css" layer(components);
+@import "winduum/src/button/square.css" layer(components);
+@import "winduum/src/button/circle.css" layer(components);
+```
+
+
+### Local imports
+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/button/assets/index.css" layer(components);
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/button.html) to learn more about usage examples.
+
+### Frameworks
+* [winduum/winduum-vue](https://github.com/winduum/winduum-vue/blob/main/src/button)
+* [winduum/winduum-react](https://github.com/winduum/winduum-react/blob/main/src/button)

package/src/components/button/sm.css

@@ -0,0 +1,4 @@
+.button:is(.sm) {
+  --button-height: 2rem;
+  --button-padding-inline: 1rem;
+}

package/src/components/button/square.css

@@ -0,0 +1,5 @@
+.button:is(.square) {
+  --button-padding-block: 0;
+  --button-padding-inline: 0;
+  --button-width: var(--button-height);
+}

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

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

package/src/components/card/default.css

@@ -1,9 +1,9 @@
-.c-card {
-  --c-card-p: var(--c-card-py) var(--c-card-px);
+.card {
+  --card-p: var(--card-py) var(--card-px);
 
   background-color: var(--color-body-primary);
-  border-radius: var(--rounded-2xl);
-  padding: var(--c-card-p);
+  border-radius: var(--radius-2xl);
+  padding: var(--card-p);
   display: flex;
   flex-direction: column;
 }

package/src/components/carousel/content.css

@@ -1,4 +1,4 @@
-.c-carousel-content {
+.carousel-content {
   display: flex;
   overflow: auto;
   user-select: none;

package/src/components/carousel/default.css

@@ -1,3 +1,3 @@
-.c-carousel {
+.carousel {
   inline-size: 100%;
 }

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

@@ -0,0 +1,13 @@
+: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/default.css

@@ -0,0 +1,74 @@
+.check {
+  --check-outline-color: var(--color-accent);
+  --check-icon-color: var(--color-accent-foreground);
+
+  font-weight: var(--check-font-weight);
+  font-size: var(--check-font-size);
+  line-height: var(--check-line-height);
+  letter-spacing: var(--check-letter-spacing);
+  gap: var(--check-gap);
+  display: inline-flex;
+  text-wrap: pretty;
+
+  &:has([type="radio"]) {
+    --check-icon: var(--mask-radio);
+    --check-border-radius: 50%;
+  }
+
+  :where(a) {
+    color: var(--color-accent);
+    text-decoration: underline;
+  }
+
+  :where(input) {
+    --tw-border-opacity: 0.2;
+    --tw-border-mix: transparent;
+    --tw-outline-opacity: 0;
+    --tw-outline-mix: transparent;
+    --tw-bg-opacity: 0;
+    --tw-bg-mix: transparent;
+
+    width: var(--check-size);
+    height: var(--check-size);
+    border-radius: var(--check-border-radius);
+    background-color: color-mix(in var(--default-color-space), var(--check-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+    border:
+      var(--check-border-width) solid
+      color-mix(
+        in var(--default-color-space),
+        var(--check-border-color) calc(var(--tw-border-opacity) * 100%),
+        var(--tw-border-mix)
+      );
+    outline:
+      var(--check-outline-width) solid
+      color-mix(
+        in var(--default-color-space),
+        var(--check-outline-color) calc(var(--tw-outline-opacity) * 100%),
+        var(--tw-outline-mix)
+      );
+    outline-offset: var(--check-outline-offset);
+    display: flex;
+    flex-shrink: 0;
+
+    &::before {
+      width: var(--check-icon-size);
+      height: var(--check-icon-size);
+      color: var(--check-icon-color);
+      mask: var(--check-icon);
+      transition: inherit;
+      content: "";
+      background-color: currentColor;
+      opacity: 0;
+      transform: scale(0);
+      will-change: transform;
+      margin: auto;
+    }
+
+    &:where(:required) {
+      + *::after {
+        color: var(--color-error);
+        content: " *";
+      }
+    }
+  }
+}

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

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

package/src/components/check/interactive.css

@@ -0,0 +1,50 @@
+.check {
+  --check-hover-border-color: var(--color-accent);
+  --check-hover-bg: var(--color-accent);
+  --check-checked-bg: var(--color-accent);
+  --check-focus-border-color: var(--color-accent);
+
+  :where(input) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
+
+    &:enabled {
+      &:is(:hover, :focus-visible) {
+        --check-border-color: var(--check-hover-border-color);
+        --check-bg: var(--check-hover-bg);
+        --tw-border-opacity: var(--check-hover-border-opacity, 0.75);
+        --tw-bg-opacity: var(--check-hover-bg-opacity, 0.1);
+      }
+
+      &:focus {
+        --check-border-color: var(--check-focus-border-color);
+        --check-outline-offset: var(--check-focus-outline-offset);
+        --tw-border-opacity: var(--check-focus-border-opacity, 0.75);
+        --tw-outline-opacity: var(--check-focus-outline-opacity, 0.2);
+      }
+    }
+
+    &:disabled {
+      --tw-bg-opacity: var(--check-disabled-bg-opacity, 0.15);
+
+      cursor: not-allowed;
+      opacity: var(--check-disabled-opacity);
+    }
+
+    &:where([type="checkbox"]):indeterminate {
+      --check-icon: var(--mask-indeterminate);
+    }
+
+    &:is(:checked, [type="checkbox"]:indeterminate) {
+      --check-bg: var(--check-checked-bg);
+      --tw-bg-opacity: 1;
+      --tw-border-opacity: 0;
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+}

package/src/components/check/invalid.css

@@ -0,0 +1,8 @@
+.check {
+  &.invalid, .validated & :where(input):invalid {
+    --check-border-color: var(--color-error);
+    --check-outline-color: var(--color-error);
+    --check-bg: var(--color-error);
+    --tw-border-opacity: 1;
+  }
+}

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

@@ -0,0 +1,11 @@
+: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/{ui → components}/color/default.css

@@ -1,4 +1,4 @@
-.ui-color {
+.color {
   display: inline-flex;
 
   :where(input) {
@@ -7,25 +7,25 @@
     --tw-outline-opacity: 0;
     --tw-outline-mix: transparent;
 
-    width: var(--ui-color-size);
-    height: var(--ui-color-size);
-    padding: var(--ui-color-p);
-    border-radius: var(--ui-color-border-radius);
+    width: var(--color-size);
+    height: var(--color-size);
+    padding: var(--color-p);
+    border-radius: var(--color-border-radius);
     border:
-      var(--ui-color-border-width) solid
+      var(--color-border-width) solid
       color-mix(
-        in var(--space),
-        var(--ui-color-border-color) calc(var(--tw-border-opacity) * 100%),
+        in var(--default-color-space),
+        var(--color-border-color) calc(var(--tw-border-opacity) * 100%),
         var(--tw-border-mix)
       );
     outline:
-      var(--ui-color-outline-width) solid
+      var(--color-outline-width) solid
       color-mix(
-        in var(--space),
-        var(--ui-color-outline-color) calc(var(--tw-outline-opacity) * 100%),
+        in var(--default-color-space),
+        var(--color-outline-color) calc(var(--tw-outline-opacity) * 100%),
         var(--tw-outline-mix)
       );
-    outline-offset: var(--ui-check-outline-offset);
+    outline-offset: var(--check-outline-offset);
     display: inline-grid;
 
     &::before, &::after {
@@ -36,12 +36,12 @@
     }
 
     &::before {
-      background-color: var(--ui-color-primary);
+      background-color: var(--color-primary);
       border-color: inherit;
     }
 
     &::after {
-      background-color: var(--ui-color-secondary);
+      background-color: var(--color-secondary);
       clip-path: polygon(100% 0, 100% 100%, 0 100%);
     }
   }

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

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

package/src/{ui → components}/color/interactive.css

@@ -1,14 +1,14 @@
-.ui-color {
+.color {
   :where(input) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
 
     &:where(:disabled) {
       cursor: not-allowed;
 
       &::before, &::after {
-        opacity: var(--ui-color-disabled-opacity);
+        opacity: var(--color-disabled-opacity);
       }
     }
 

package/src/components/compare/default.css

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

package/src/components/compare/index.js

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

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

@@ -0,0 +1,5 @@
+: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/color.css

@@ -0,0 +1,24 @@
+.control {
+  > :where(input) {
+    &::-webkit-color-swatch-wrapper {
+      width: var(--control-color-swatch-width);
+      height: var(--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);
+      margin: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: var(--control-color-swatch-border-radius);
+    }
+
+    &[type="color"] ~ label {
+      margin-inline-start: calc(var(--control-px) + var(--control-color-swatch-width));
+    }
+  }
+}