winduum 0.1.18 → 0.2.0-beta.1

package/src/ui/control/index.css

@@ -0,0 +1,6 @@
+@import "default.css";
+@import "select.css";
+@import "icon.css";
+@import "floating.css";
+@import "floating-focus.css";
+@import "group.css";

package/src/ui/control/select.css

@@ -0,0 +1,27 @@
+.ui-control:has(select) {
+  --ui-control-icon-select-font-size: 1.5rem;
+  --ui-control-icon-count-r: 2;
+  --ui-control-pr: var(--ui-control-icon-offset-r);
+
+  & :where([class^="icon-"]) {
+    margin-right: calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap));
+  }
+
+  &::after {
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    content: "";
+    position: absolute;
+    z-index: 1;
+    font-size: var(--ui-control-icon-select-font-size);
+    right: var(--ui-control-icon-inset-x);
+    top: calc(var(--ui-control-height) / 2);
+    margin-top: calc(var(--ui-control-icon-select-font-size) / 2 * -1);
+    will-change: transform;
+    transition: transform 200ms;
+    mask: var(--icon-angle-down);
+    pointer-events: none;
+    grid-area: input;
+  }
+}

package/src/ui/heading/default.css

@@ -0,0 +1,12 @@
+.ui-heading {
+  --ui-heading-font-family: var(--font-primary);
+  --ui-heading-font-weight: var(--font-semibold);
+  --ui-heading-font-size: 1.25rem;
+  --ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));
+  --ui-heading-line-height-ratio: 0.375rem;
+
+  font-family: var(--ui-heading-font-family);
+  font-size: var(--ui-heading-font-size);
+  line-height: var(--ui-heading-line-height);
+  font-weight: var(--ui-heading-font-weight);
+}

package/src/ui/heading/index.css

@@ -0,0 +1,3 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";

package/src/ui/heading/lg.css

@@ -0,0 +1,3 @@
+.ui-heading:where(.lg) {
+  --ui-heading-font-size: 1.875rem;
+}

package/src/ui/heading/sm.css

@@ -0,0 +1,4 @@
+.ui-heading:where(.sm) {
+  --ui-heading-font-size: 1.125rem;
+  --ui-heading-line-height-ratio: 0.125rem;
+}

package/src/ui/heading.css

@@ -1,21 +1 @@
-:where(.ui-heading) {
-  --ui-heading-font-family: var(--font-primary);
-  --ui-heading-font-weight: var(--font-semibold);
-  --ui-heading-font-size: 1.25rem;
-  --ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));
-  --ui-heading-line-height-ratio: 0.375rem;
-
-  font-family: var(--ui-heading-font-family);
-  font-size: var(--ui-heading-font-size);
-  line-height: var(--ui-heading-line-height);
-  font-weight: var(--ui-heading-font-weight);
-
-  &:where(.is-sm) {
-    --ui-heading-font-size: 1.125rem;
-    --ui-heading-line-height-ratio: 0.125rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-heading-font-size: 1.875rem;
-  }
-}
+@import "heading/index.css";

package/src/ui/image.css

@@ -1,13 +1,13 @@
-:where(.ui-image) {
-  --ui-image-bg: rgb(var(--color-background-200));
-  --ui-image-border-radius: 0;
+.ui-image {
+  --ui-image-bg: var(--color-body-secondary);
 
   position: relative;
   display: block;
   background-color: var(--ui-image-bg);
-  border-radius: var(--ui-image-border-radius);
+  border-radius: inherit;
 
   & > * {
+    display: block;
     width: 100%;
     height: 100%;
     border-radius: inherit;

package/src/ui/{+.css → index.css}

@@ -1,6 +1,6 @@
 @import "badge.css";
-@import "btn.css";
-@import "checkbox.css";
+@import "btn/index.css";
+@import "check.css";
 @import "heading.css";
 @import "image.css";
 @import "info.css";
@@ -9,8 +9,6 @@
 @import "link.css";
 @import "notice.css";
 @import "progress.css";
-@import "radio.css";
-@import "select.css";
 @import "switch.css";
 @import "text.css";
 @import "title.css";

package/src/ui/info.css

@@ -1,4 +1,4 @@
-:where(.ui-info) {
+.ui-info {
   --ui-info-font-size: 0.75rem;
   --ui-info-font-weight: var(--font-normal);
 

package/src/ui/input.css

@@ -1,226 +1 @@
-:where(.ui-input, .ui-select) {
-  --ui-input-height: 3rem;
-  --ui-input-height-textarea: 8rem;
-  --ui-input-pt-floating: 1.25rem;
-  --ui-input-pb-floating: 0.4375rem;
-  --ui-input-py: 0.875rem;
-  --ui-input-px: 0.875rem;
-  --ui-input-pl: var(--ui-input-px);
-  --ui-input-pr: var(--ui-input-px);
-  --ui-input-bg: rgb(var(--color-background));
-  --ui-input-color: currentColor;
-  --ui-input-placeholder-color: currentColor;
-  --ui-input-placeholder-opacity: 0.5;
-  --ui-input-font-size: 0.875rem;
-  --ui-input-font-weight: var(--font-medium);
-  --ui-input-border-width: 1px;
-  --ui-input-border-color: var(--color-current);
-  --ui-input-border-opacity: 0.15;
-  --ui-input-border-radius: var(--rounded);
-  --ui-input-box-shadow: none;
-  --ui-input-icon-font-size: 1.25rem;
-  --ui-input-icon-count-l: 1;
-  --ui-input-icon-count-r: 1;
-  --ui-input-icon-gap: 0.375rem;
-  --ui-input-icon-inset-x: calc(var(--ui-input-px) - 0.25rem);
-  --ui-input-icon-inset-x-gap: 0.125rem;
-  --ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));
-  --ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));
-  --ui-input-label-floating-font-size: 0.875rem;
-  --ui-input-label-floating-font-weight: var(--font-medium);
-  --ui-input-label-floating-focus-transform: translateY(-0.6875rem) scale(0.8);
-  --ui-input-label-floating-focus-opacity: 0.5;
-
-  display: grid;
-  grid-template-areas: "input";
-  font-size: var(--ui-input-font-size);
-  position: relative;
-
-  &:has(.icon-l) {
-    --ui-input-pl: var(--ui-input-icon-offset-l);
-  }
-
-  &:has(.icon-r) {
-    --ui-input-pr: var(--ui-input-icon-offset-r);
-  }
-
-  &:has(.icon-l > *:nth-child(2)) {
-    --ui-input-icon-count-r: 2;
-  }
-
-  &:has(.icon-r > *:nth-child(2)) {
-    --ui-input-icon-count-r: 2;
-  }
-
-  & :where(svg) {
-    font-size: var(--ui-input-icon-font-size);
-    width: 1em;
-    height: var(--ui-input-height);
-  }
-
-  & :where(input, textarea, select) {
-    grid-area: input;
-    background-clip: padding-box;
-    background-color: var(--ui-input-bg);
-    padding: var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);
-    transition: var(--transition-border), var(--transition-shadow);
-    box-shadow: var(--ui-input-box-shadow);
-    line-height: normal;
-    font-size: inherit;
-    height: var(--ui-input-height);
-    font-weight: var(--ui-input-font-weight);
-    border-radius: var(--ui-input-border-radius);
-    color: var(--ui-input-color);
-    border: var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
-
-    &:focus {
-      --ui-input-border-opacity: 1;
-      --ui-input-border-color: var(--color-accent);
-      --ui-input-box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 3px rgb(var(--color-accent) / 0.2),
-        0 1px 2px 0 rgb(var(--color-current) / 0.05);
-    }
-
-    &:disabled {
-      cursor: default;
-      background-color: rgb(var(--color-default) / 0.1);
-    }
-
-    &:required ~ label {
-      &::after {
-        color: rgb(var(--color-error));
-        content: " *";
-      }
-    }
-  }
-
-  & :where(input, textarea) {
-    &::placeholder {
-      color: var(--ui-input-placeholder-color);
-      opacity: var(--ui-input-placeholder-opacity);
-    }
-  }
-
-  & :where(textarea) {
-    resize: vertical;
-    overflow: hidden;
-    min-height: var(--ui-input-height-textarea);
-  }
-
-  & :where([class^="icon-"]) {
-    grid-area: input;
-    content: "";
-    position: relative;
-    line-height: 1em;
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    align-items: center;
-    gap: var(--ui-input-icon-gap);
-    transition: var(--transition-opacity);
-
-    &:where(.icon-l) {
-      left: var(--ui-input-icon-inset-x);
-      margin-right: auto;
-    }
-
-    &:where(.icon-r) {
-      right: var(--ui-input-icon-inset-x);
-      margin-left: auto;
-    }
-  }
-
-  & :where([aria-label]) {
-    &::after {
-      content: attr(aria-label);
-      font-size: var(--ui-input-font-size);
-      min-width: var(--ui-input-icon-font-size);
-      text-align: center;
-      line-height: var(--ui-input-icon-font-size);
-      display: block;
-    }
-  }
-
-  & :where([class*="lib-hint"]) {
-    &::after {
-      white-space: normal;
-      line-height: 1.5;
-      word-wrap: normal;
-      width: 10rem;
-      font-weight: var(--font-normal);
-      font-size: 0.75rem;
-    }
-  }
-
-  &:where(.is-floating) {
-    --ui-input-placeholder-color: transparent;
-
-    & :where(label) {
-      grid-area: input;
-      align-self: start;
-      pointer-events: none;
-      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color), var(--transition-opacity);
-      transform-origin: 0 50%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transform: perspective(100px);
-      will-change: transform;
-      font-weight: var(--ui-input-label-floating-font-weight);
-      margin-left: var(--ui-input-pl);
-      margin-right: var(--ui-input-pr);
-      line-height: var(--ui-input-label-floating-font-size);
-      margin-top: calc(var(--ui-input-height) / 2 - (var(--ui-input-font-size) / 2));
-    }
-
-    & :where(input, textarea, select) {
-      padding-top: calc(var(--ui-input-pt-floating));
-      padding-bottom: calc(var(--ui-input-pb-floating));
-
-      &:is(:focus, :not(:placeholder-shown)) ~ label {
-        transform: var(--ui-input-label-floating-focus-transform);
-        opacity: var(--ui-input-label-floating-focus-opacity);
-      }
-    }
-  }
-
-  &.is-invalid, .is-validated & :where(input, textarea, select):invalid {
-    --ui-input-bg: rgb(var(--color-error) / 0.1);
-    --ui-input-border-opacity: 1;
-    --ui-input-border-color: var(--color-error);
-    --ui-input-color: rgb(var(--color-error));
-    --color-accent: var(--color-error);
-  }
-}
-
-:where(.ui-input-group) {
-  display: flex;
-  flex-wrap: wrap;
-
-  & :where(.ui-btn) {
-    --ui-btn-outline-width: 1px;
-    --ui-btn-height: 3rem;
-
-    flex-grow: 1;
-    height: auto;
-  }
-
-  & > * {
-    &:not(:first-child) {
-      margin-left: calc(var(--ui-input-border-width) * -1);
-
-      &, & :where(input, select) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:not(:last-child) {
-      &, & :where(input, select) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-}
+@import "control/index.css";

package/src/ui/label.css

@@ -1,4 +1,4 @@
-:where(.ui-label) {
+.ui-label {
   --ui-label-font-size: 0.875rem;
   --ui-label-font-weight: var(--font-medium);
 

package/src/ui/link/default.css

@@ -0,0 +1,33 @@
+.ui-link {
+  --ui-link-font-size: 0.875rem;
+  --ui-link-font-weight: var(--font-semibold);
+  --ui-link-hover-color: var(--color-accent);
+  --ui-link-hover-opacity: 1;
+  --ui-link-active-opacity: 0.8;
+  --ui-link-gap: 0.5rem;
+
+  font-size: var(--ui-link-font-size);
+  font-weight: var(--ui-link-font-weight);
+  transition: var(--transition-opacity), var(--transition-color);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  gap: var(--ui-link-gap);
+
+  &:is([href], button) {
+    &:hover {
+      @media (hover: hover) and (pointer: fine) {
+        color: var(--ui-link-hover-color);
+        opacity: var(--ui-link-hover-opacity);
+      }
+    }
+
+    &:active {
+      opacity: var(--ui-link-active-opacity);
+    }
+
+    &:focus-visible {
+      color: var(--ui-link-hover-color);
+    }
+  }
+}

package/src/ui/link/index.css

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

package/src/ui/link/underlined.css

@@ -0,0 +1,47 @@
+.ui-link:where(.underlined) {
+  --ui-link-underline-color: currentColor;
+  --ui-link-underline-width: 1px;
+  --ui-link-underline-opacity: 0;
+  --ui-link-underline-transform: translateY(-0.125rem);
+
+  &:where(.underlined-visible) {
+    --ui-link-underline-opacity: 1;
+    --ui-link-underline-transform: none;
+    --ui-link-underline-color: var(--color-accent);
+  }
+
+  &::after, & span::after {
+    content: "";
+    border-bottom: var(--ui-link-underline-width) solid var(--ui-link-underline-color);
+    opacity: var(--ui-link-underline-opacity);
+    position: absolute;
+    inset: auto 0 0;
+    transition: var(--transition-opacity), var(--transition-transform);
+    transform: var(--ui-link-underline-transform);
+  }
+
+  &:has(svg) {
+    &::after {
+      content: normal;
+    }
+  }
+
+  & :where(span) {
+    position: relative;
+    inset: auto;
+  }
+
+  &:is([href], button) {
+    &:hover {
+      @media (hover: hover) and (pointer: fine) {
+        --ui-link-underline-opacity: 1;
+        --ui-link-underline-transform: none;
+      }
+    }
+
+    &:focus-visible {
+      --ui-link-underline-opacity: 1;
+      --ui-link-underline-transform: none;
+    }
+  }
+}

package/src/ui/link.css

@@ -1,45 +1 @@
-:where(.ui-link) {
-  --ui-link-font-size: 0.875rem;
-  --ui-link-font-weight: var(--font-semibold);
-  --ui-link-hover-color: rgb(var(--color-accent));
-  --ui-link-hover-opacity: 0.8;
-  --ui-link-underline-width: 1px;
-  --ui-link-underline-opacity: 0;
-  --ui-link-underline-transform: translateY(-0.125rem);
-
-  font-size: var(--ui-link-font-size);
-  font-weight: var(--ui-link-font-weight);
-  transition: var(--transition-opacity), var(--transition-color);
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  &:where(.is-underline)::after {
-    content: "";
-    border-bottom: var(--ui-link-underline-width) solid currentColor;
-    opacity: var(--ui-link-underline-opacity);
-    position: absolute;
-    inset: auto 0 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transform: var(--ui-link-underline-transform);
-  }
-
-  &:hover {
-    @media (hover: hover) and (pointer: fine) {
-      --ui-link-underline-opacity: 1;
-      --ui-link-underline-transform: none;
-
-      color: var(--ui-link-hover-color);
-      opacity: var(--ui-link-hover-opacity);
-    }
-  }
-
-  &:active {
-    opacity: var(--ui-link-hover-opacity);
-  }
-
-  &:where(:focus-visible) {
-    --ui-link-underline-opacity: 1;
-    --ui-link-underline-transform: none;
-  }
-}
+@import "link/index.css";

package/src/ui/notice.css

@@ -1,11 +1,13 @@
-:where(.ui-notice) {
+.ui-notice {
   --color-current: var(--color-accent);
-  --ui-notice-bg: rgb(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-opacity: 0.1;
+  --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;
@@ -14,28 +16,13 @@
   padding: var(--ui-notice-py) var(--ui-notice-px);
   font-size: var(--ui-notice-font-size);
   border-radius: var(--ui-notice-border-radius);
-  color: rgb(var(--color-current));
+  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);
+  color: var(--color-current);
   gap: var(--ui-notice-gap);
 
   & :where(hr) {
     --tw-border-opacity: 0.2;
   }
-
-  &::before, &::after {
-    position: absolute;
-    inset: 0;
-    border-radius: var(--ui-notice-border-radius);
-    z-index: -1;
-    content: "";
-  }
-
-  &::before {
-    background-color: var(--ui-notice-bg);
-    opacity: var(--ui-notice-outline-opacity);
-  }
-
-  &::after {
-    box-shadow: inset 0 0 0 1px var(--ui-notice-bg);
-    opacity: var(--ui-notice-outline-opacity);
-  }
 }

package/src/ui/progress/default.css

@@ -0,0 +1,39 @@
+.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%;
+
+  appearance: none;
+  height: var(--ui-progress-height);
+  border-radius: var(--ui-progress-border-radius);
+  background-color: var(--ui-progress-bg);
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background-color: transparent;
+  }
+
+  &::-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 {
+    animation: 1.5s linear 0s forwards infinite move-indeterminate;
+    background-image: linear-gradient(to right, var(--color-accent) 30%, var(--ui-progress-bg) 30%);
+    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/index.css

@@ -0,0 +1,3 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";

package/src/ui/progress/lg.css

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

package/src/ui/progress/sm.css

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

package/src/ui/progress.css

@@ -1,50 +1 @@
-:where(.ui-progress) {
-  --ui-progress-height: 1rem;
-  --ui-progress-border-radius: var(--rounded-full);
-  --ui-progress-bg: var(--color-background-200);
-  --ui-progress-bg-opacity: 1;
-
-  appearance: none;
-  box-shadow: none;
-  border: 0;
-  height: var(--ui-progress-height);
-  border-radius: var(--ui-progress-border-radius);
-  background-color: rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));
-  color: rgb(var(--color-accent));
-  width: 100%;
-
-  &:where(.is-sm) {
-    --ui-progress-height: 0.5rem;
-  }
-
-  &:where(.is-lg) {
-    --ui-progress-height: 1.5rem;
-  }
-
-  &::-webkit-progress-bar {
-    background-color: transparent;
-  }
-
-  &::-webkit-progress-value {
-    background-color: currentColor;
-    border-radius: var(--ui-progress-border-radius);
-  }
-
-  &::-moz-progress-bar {
-    background-color: currentColor;
-    border-radius: var(--ui-progress-border-radius);
-  }
-
-  &:indeterminate {
-    animation: 1.5s linear 0s forwards infinite move-indeterminate;
-    background-image: linear-gradient(to right, currentColor 30%, rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);
-    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;
-    }
-  }
-}
+@import "progress/index.css";