winduum 0.1.18 → 0.2.0-beta.10

package/src/ui/badge.css

@@ -1,109 +1 @@
-:where(.ui-badge) {
-  --color-current: var(--color-light);
-  --ui-badge-width: max-content;
-  --ui-badge-height: 1.5rem;
-  --ui-badge-py: 0;
-  --ui-badge-px: 0.5rem;
-  --ui-badge-border-radius: var(--rounded-xs);
-  --ui-badge-font-size: 0.75rem;
-  --ui-badge-font-weight: var(--font-normal);
-  --ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));
-  --ui-badge-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));
-  --ui-badge-color-opacity: var(--tw-text-opacity, 1);
-  --ui-badge-outline-width: 1px;
-  --ui-badge-outline-opacity: 0.75;
-  --ui-badge-icon-font-size: 0.875rem;
-  --ui-badge-gap: 0.25rem;
-  --ui-badge-focus-opacity: 0.3;
-  --ui-badge-hover-opacity: 0.8;
-
-  width: var(--ui-badge-width);
-  height: var(--ui-badge-height);
-  padding: var(--ui-badge-py) var(--ui-badge-px);
-  border-radius: var(--ui-badge-border-radius);
-  font-size: var(--ui-badge-font-size);
-  font-weight: var(--ui-badge-font-weight);
-  background-color: var(--ui-badge-bg);
-  color: var(--ui-badge-color);
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 0;
-  gap: var(--ui-badge-gap);
-  transition: var(--transition-opacity);
-
-  & :where(svg) {
-    width: 1em;
-    height: 1em;
-    font-size: var(--ui-badge-icon-font-size);
-  }
-
-  &:where(.is-sm) {
-    --ui-badge-height: 1.25rem;
-    --ui-badge-font-size: 0.625rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-badge-height: 1.75rem;
-  }
-
-  &:where(.is-outline) {
-    outline: var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));
-    outline-offset: calc(var(--ui-badge-outline-width) * -1);
-  }
-
-  &:where(.is-outline, .is-muted) {
-    --color-current: var(--color-accent);
-    --ui-badge-bg: transparent;
-  }
-
-  &:where(.is-muted) {
-    background-color: rgb(var(--color-current) / 0.1);
-  }
-
-  &:where(.is-square, .is-circle) {
-    --ui-badge-px: var(--ui-badge-py);
-    --ui-badge-width: var(--ui-badge-height);
-  }
-
-  &:where(.is-circle) {
-    --ui-badge-border-radius: var(--rounded-full);
-  }
-
-  &:where([href], button) {
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        opacity: var(--ui-badge-hover-opacity);
-      }
-    }
-
-    &:focus-visible {
-      z-index: 2;
-      box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 max(2px, var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity));
-    }
-  }
-}
-
-:where(.ui-badge-group) {
-  display: flex;
-
-  & :where(.ui-badge) {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-left: calc(var(--ui-badge-outline-width) * -1);
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
+@import "badge/index.css";

package/src/ui/btn/bordered-rgb.css

@@ -0,0 +1,3 @@
+.ui-btn:where(.bordered) {
+  border: var(--ui-btn-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-btn-border-opacity));
+}

package/src/ui/btn/bordered.css

@@ -0,0 +1,8 @@
+.ui-btn:where(.bordered) {
+  --ui-btn-border-width: 1px;
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.3) * 100%);
+
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), transparent);
+  padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+  padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+}

package/src/ui/btn/circle.css

@@ -0,0 +1,5 @@
+.ui-btn:where(.circle) {
+  --ui-btn-px: var(--ui-btn-py);
+  --ui-btn-width: var(--ui-btn-height);
+  --ui-btn-border-radius: var(--rounded-full);
+}

package/src/ui/btn/default-rgb.css

@@ -0,0 +1,9 @@
+.ui-btn {
+  --color-current-rgb: var(--color-light-rgb);
+  --ui-btn-bg: rgb(var(--color-accent-rgb) / var(--ui-btn-bg-opacity));
+  --ui-btn-color: rgb(var(--color-current-rgb) / var(--ui-btn-color-opacity));
+
+  &:where(.bordered, .muted, .ghosted) {
+    --color-current-rgb: var(--color-accent-rgb);
+  }
+}

package/src/ui/btn/default.css

@@ -0,0 +1,107 @@
+.ui-btn {
+  --color-current: var(--color-accent-current);
+  --ui-btn-width: max-content;
+  --ui-btn-height: 2.25rem;
+  --ui-btn-gap: 0.375rem;
+  --ui-btn-py: 0.375rem;
+  --ui-btn-px: 0.75rem;
+  --ui-btn-border-radius: var(--rounded);
+  --ui-btn-font-size: 0.875rem;
+  --ui-btn-font-weight: var(--font-medium);
+  --ui-btn-letter-spacing: 0;
+  --ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
+  --ui-btn-bg-mix: transparent;
+  --ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
+  --ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
+  --ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
+  --ui-btn-outline-width: 2px;
+  --ui-btn-hover-color: var(--color-current);
+  --ui-btn-hover-bg-mix: black;
+  --ui-btn-hover-bg-opacity: 80%;
+  --ui-btn-active-color: var(--color-current);
+  --ui-btn-active-bg-mix: black;
+  --ui-btn-active-bg-opacity: 90%;
+  --ui-btn-focus-outline-color-mix: transparent;
+  --ui-btn-focus-outline-color-opacity: 50%;
+  --ui-btn-focus-outline-offset: 2px;
+  --ui-btn-disabled-opacity: 70%;
+
+  max-width: var(--ui-btn-width);
+  width: var(--ui-btn-width);
+  height: var(--ui-btn-height);
+  padding: var(--ui-btn-py) var(--ui-btn-px);
+  border-radius: var(--ui-btn-border-radius);
+  font-size: var(--ui-btn-font-size);
+  font-weight: var(--ui-btn-font-weight);
+  letter-spacing: var(--ui-btn-letter-spacing);
+  background-color: var(--ui-btn-bg);
+  color: var(--ui-btn-color);
+  user-select: none;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 0;
+  transition:
+    var(--transition-background),
+    var(--transition-color),
+    outline-color var(--transition-duration),
+    outline-offset 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  gap: var(--ui-btn-gap);
+  outline: var(--ui-btn-outline-width) solid transparent;
+  outline-offset: 0;
+
+  &:where([class*="accent-base"]) {
+    --ui-btn-hover-bg-mix: var(--color-base-mix);
+  }
+
+  &:where([class*="accent-body"]) {
+    --ui-btn-hover-bg-mix: var(--color-body-mix);
+  }
+
+  & :where(svg) {
+    font-size: calc(var(--ui-btn-font-size) + 0.125rem);
+  }
+
+  &:where(.bordered, .muted, .ghosted) {
+    --ui-btn-hover-bg-mix: transparent;
+    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-active-bg-mix: transparent;
+    --ui-btn-active-bg-opacity: 20%;
+    --ui-btn-focus-outline-offset: -2px;
+    --ui-btn-bg-opacity: 0%;
+    --color-current: var(--color-accent);
+  }
+
+  &:is([href], button, [role="button"]) {
+    &:disabled {
+      opacity: var(--ui-btn-disabled-opacity);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          --ui-btn-color: var(--ui-btn-hover-color);
+          --ui-btn-bg-mix: var(--ui-btn-hover-bg-mix);
+          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity);
+        }
+      }
+
+      &:focus {
+        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-outline-color-opacity), var(--ui-btn-focus-outline-color-mix));
+        outline-offset: var(--ui-btn-focus-outline-offset);
+      }
+
+      &:is(:active, .active) {
+        --ui-btn-color: var(--ui-btn-active-color);
+        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix);
+        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity);
+      }
+    }
+  }
+}

package/src/ui/btn/gradient-bordered-rgb.css

@@ -0,0 +1,13 @@
+:is(.ui-btn.gradient-bordered) {
+  --color-current-rgb: var(--color-base-rgb);
+
+  &::before {
+    background-color: rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)));
+  }
+
+  &:where(.hover-fill) {
+    &::before {
+      background-color: rgb(var(--color-body-rgb) / var(--ui-btn-bg-opacity));
+    }
+  }
+}

package/src/ui/btn/gradient-bordered.css

@@ -0,0 +1,28 @@
+:is(.ui-btn.gradient-bordered) {
+  --ui-btn-border-width: 2px;
+  --ui-btn-hover-bg-mix: transparent;
+  --ui-btn-hover-bg-opacity: 10%;
+  --ui-btn-active-bg-mix: transparent;
+  --ui-btn-active-bg-opacity: 20%;
+  --ui-btn-focus-outline-offset: 0;
+  --ui-btn-bg-opacity: 0%;
+  --color-current: var(--color-base);
+
+  &::before {
+    content: "";
+    position: absolute;
+    background-color: color-mix(in sRGB, var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    inset: var(--ui-btn-border-width);
+    border-radius: calc(var(--ui-btn-border-radius) / 1.25);
+    z-index: -1;
+    transition: var(--transition-background);
+  }
+
+  &:where(.hover-fill) {
+    --ui-btn-bg-opacity: 100%;
+
+    &::before {
+      background-color: color-mix(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
+    }
+  }
+}

package/src/ui/btn/gradient.css

@@ -0,0 +1,10 @@
+.ui-btn:where(.gradient) {
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: color-mix(in sRGB, var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    z-index: -1;
+    transition: var(--transition-background);
+  }
+}

package/src/ui/btn/hover-fill.css

@@ -0,0 +1,8 @@
+.ui-btn:where(.hover-fill) {
+  --ui-btn-hover-bg-mix: black;
+  --ui-btn-hover-bg-opacity: 100%;
+  --ui-btn-active-bg-mix: black;
+  --ui-btn-active-bg-opacity: 90%;
+  --ui-btn-hover-color: var(--color-light);
+  --ui-btn-active-color: var(--color-light);
+}

package/src/ui/btn/index.css

@@ -0,0 +1,13 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";
+@import "loading.css";
+@import "wide.css";
+@import "bordered.css";
+@import "hover-fill.css";
+@import "gradient.css";
+@import "gradient-bordered.css";
+@import "muted.css";
+@import "raised.css";
+@import "square.css";
+@import "circle.css";

package/src/ui/btn/lg.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.lg) {
+  --ui-btn-height: 3rem;
+  --ui-btn-px: 1.75rem;
+}

package/src/ui/btn/loading.css

@@ -0,0 +1,27 @@
+.ui-btn:is(.loading) {
+  --ui-btn-loading-width: 1rem;
+  --ui-btn-loading-border-width: 2px;
+
+  pointer-events: none;
+  color: transparent;
+
+  & > * {
+    opacity: 0;
+  }
+
+  &::after {
+    z-index: 1;
+    width: var(--ui-btn-loading-width);
+    height: var(--ui-btn-loading-width);
+    content: "";
+    border: var(--ui-btn-loading-border-width) solid var(--color-current);
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.45s infinite linear;
+    position: absolute;
+    margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
+    margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
+    left: 50%;
+    top: 50%;
+  }
+}

package/src/ui/btn/muted.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.muted) {
+  --ui-btn-hover-bg-opacity: 30%;
+  --ui-btn-bg-opacity: 10%;
+}

package/src/ui/btn/raised.css

@@ -0,0 +1,8 @@
+.ui-btn:where(.raised) {
+  --ui-btn-border-width: 2px;
+  --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
+
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
+  padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+  padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
+}

package/src/ui/btn/sm.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.sm) {
+  --ui-btn-height: 2rem;
+  --ui-btn-px: 1rem;
+}

package/src/ui/btn/square.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.square) {
+  --ui-btn-px: var(--ui-btn-py);
+  --ui-btn-width: var(--ui-btn-height);
+}

package/src/ui/btn/wide.css

@@ -0,0 +1,4 @@
+.ui-btn:where(.wide) {
+  padding-left: calc(var(--ui-btn-px) * 1.5);
+  padding-right: calc(var(--ui-btn-px) * 1.5);
+}

package/src/ui/btn.css

@@ -1,234 +1 @@
-:where(.ui-btn) {
-  --color-current: var(--color-light);
-  --ui-btn-width: max-content;
-  --ui-btn-height: 2.25rem;
-  --ui-btn-py: 0.375rem;
-  --ui-btn-px: 0.75rem;
-  --ui-btn-border-radius: var(--rounded);
-  --ui-btn-font-size: 0.875rem;
-  --ui-btn-font-weight: var(--font-medium);
-  --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
-  --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));
-  --ui-btn-color-opacity: var(--tw-text-opacity, 1);
-  --ui-btn-hover-filter: invert(1);
-  --ui-btn-hover-opacity: 0.2;
-  --ui-btn-focus-opacity: 0.3;
-  --ui-btn-disabled-opacity: 0.7;
-  --ui-btn-outline-width: 2px;
-  --ui-btn-outline-opacity: 0.5;
-  --ui-btn-icon-font-size: 1.25rem;
-  --ui-btn-gap: 0.375rem;
-  --ui-btn-loading-width: 1rem;
-  --ui-btn-loading-border-width: 2px;
-
-  width: var(--ui-btn-width);
-  height: var(--ui-btn-height);
-  padding: var(--ui-btn-py) var(--ui-btn-px);
-  border-radius: var(--ui-btn-border-radius);
-  font-size: var(--ui-btn-font-size);
-  font-weight: var(--ui-btn-font-weight);
-  background-color: var(--ui-btn-bg);
-  color: var(--ui-btn-color);
-  user-select: none;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 0;
-  transition: var(--transition-opacity), var(--transition-background), var(--transition-color), var(--transition-shadow);
-  gap: var(--ui-btn-gap);
-
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-color: rgb(var(--color-current));
-    filter: var(--ui-btn-hover-filter);
-    z-index: -1;
-    opacity: 0;
-    transition: var(--transition-opacity);
-  }
-
-  & :where(svg) {
-    width: 1em;
-    height: 1em;
-    font-size: var(--ui-btn-icon-font-size);
-  }
-
-  &:where(.is-sm) {
-    --ui-btn-height: 2rem;
-    --ui-btn-px: 1rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-btn-height: 3rem;
-    --ui-btn-px: 1.75rem;
-  }
-
-  &:where(.is-loading) {
-    pointer-events: none;
-    color: transparent !important;
-
-    & > * {
-      opacity: 0;
-    }
-
-    &::after {
-      z-index: 1;
-      width: var(--ui-btn-loading-width);
-      height: var(--ui-btn-loading-width);
-      content: "";
-      border: var(--ui-btn-loading-border-width) solid rgb(var(--color-current));
-      border-right-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.45s infinite linear;
-      position: absolute;
-      margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
-      margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
-      left: 50%;
-      top: 50%;
-    }
-  }
-
-  &:where(.is-wide) {
-    padding-left: calc(var(--ui-btn-px) * 2);
-    padding-right: calc(var(--ui-btn-px) * 2);
-  }
-
-  &:where(.is-outline, .is-muted, .is-text) {
-    --color-current: var(--color-accent);
-    --ui-btn-hover-opacity: 0.1;
-    --ui-btn-hover-filter: none;
-
-    background-color: transparent;
-
-    &::before {
-      background-color: var(--ui-btn-bg);
-    }
-  }
-
-  &:where(.is-outline) {
-    --ui-btn-focus-opacity: 0.15;
-
-    outline: var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));
-    outline-offset: calc(var(--ui-btn-outline-width) * -1);
-  }
-
-  &:where(.is-outline-gradient) {
-    --ui-btn-focus-opacity: 0.15;
-    --color-accent: var(--color-default);
-    --color-current: var(--color-accent);
-
-    &.is-loading.is-hover-fill {
-      --color-current: var(--color-light);
-    }
-
-    &:not(.is-loading) {
-      &::after {
-        content: "";
-        position: absolute;
-        background-color: rgb(var(--color-background));
-        inset: var(--ui-btn-outline-width);
-        border-radius: calc(var(--ui-btn-border-radius) / 1.25);
-        z-index: -1;
-        transition: var(--transition-opacity);
-      }
-    }
-  }
-
-  &:where(.is-muted) {
-    --ui-btn-hover-opacity: 0.3;
-
-    &::before {
-      opacity: 0.1;
-    }
-  }
-
-  &:where(.is-raised) {
-    --ui-btn-outline-opacity: 0.15;
-
-    outline: var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));
-    outline-offset: calc(var(--ui-btn-outline-width) * -1);
-  }
-
-  &:where(.is-square, .is-circle) {
-    --ui-btn-py: var(--ui-btn-py);
-    --ui-btn-width: var(--ui-btn-height);
-  }
-
-  &:where(.is-circle) {
-    --ui-btn-border-radius: var(--rounded-full);
-  }
-
-  &:where(.is-hover-fill) {
-    --ui-btn-hover-opacity: 1;
-  }
-
-  &:not(:disabled):hover {
-    @media (hover: hover) and (pointer: fine) {
-      &::before {
-        opacity: var(--ui-btn-hover-opacity);
-      }
-
-      &.is-hover-fill {
-        --color-current: var(--color-light);
-      }
-
-      &.is-outline-gradient {
-        &::before, &::after {
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  &:is(:not(:disabled):active, .is-active) {
-    &::before {
-      opacity: var(--ui-btn-hover-opacity);
-    }
-
-    &.is-outline-gradient {
-      &::before, &::after {
-        opacity: 0;
-      }
-    }
-
-    &.is-hover-fill {
-      --color-current: var(--color-light);
-    }
-  }
-
-  &:focus-visible {
-    z-index: 2;
-    box-shadow:
-      0 0 0 0 rgb(var(--color-current)),
-      0 0 0 max(2px, var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity));
-  }
-
-  &:disabled {
-    opacity: var(--ui-btn-disabled-opacity);
-    cursor: not-allowed;
-  }
-}
-
-:where(.ui-btn-group) {
-  display: flex;
-
-  & :where(.ui-btn) {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-left: calc(var(--ui-btn-outline-width) * -1);
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
+@import "btn/index.css";

package/src/ui/check-rgb.css

@@ -0,0 +1,31 @@
+.ui-check {
+  --ui-check-bg: var(--color-body-rgb);
+  --ui-check-border-color: var(--color-current-rgb);
+  --ui-check-checked-bg: var(--color-accent-rgb);
+
+  & :where(input) {
+    background-color: rgb(var(--ui-check-bg) / var(--ui-check-bg-opacity));
+    border: var(--ui-check-border-width) solid rgb(var(--ui-check-border-color) / var(--ui-check-border-opacity));
+
+    &:not(:disabled) {
+      &:focus {
+        outline-color: rgb(var(--ui-check-checked-bg) / var(--ui-check-outline-opacity));
+      }
+    }
+
+    &:disabled {
+      --ui-check-bg: var(--color-current-rgb);
+    }
+
+    &:checked {
+      background-color: rgb(var(--ui-check-checked-bg));
+    }
+  }
+
+  &.invalid, .validated & :where(input):invalid {
+    --color-current-rgb: var(--color-error-rgb);
+    --ui-check-bg: var(--color-error-rgb);
+    --ui-check-border-color: var(--color-error-rgb);
+    --ui-check-checked-bg: var(--color-error-rgb);
+  }
+}