winduum 0.1.18 → 0.2.0-beta.10

package/src/ui/check.css

@@ -0,0 +1,130 @@
+.ui-check {
+  --ui-check-width: 1.375rem;
+  --ui-check-font-size: 0.875rem;
+  --ui-check-gap: 0.625rem;
+  --ui-check-bg: var(--color-body);
+  --ui-check-bg-mix: transparent;
+  --ui-check-bg-opacity: calc(var(--tw-bg-opacity, 0.1) * 100%);
+  --ui-check-border-color: var(--color-current);
+  --ui-check-border-mix: transparent;
+  --ui-check-border-opacity: calc(var(--tw-border-opacity, 0.2) * 100%);
+  --ui-check-border-width: 1px;
+  --ui-check-checked-bg: var(--color-accent);
+  --ui-check-radius: 0.5rem;
+  --ui-check-icon: var(--icon-check);
+  --ui-check-icon-font-size: 1.125rem;
+  --ui-check-box-shadow: none;
+  --ui-check-outline-width: 3px;
+  --ui-check-outline-offset: 0;
+  --ui-check-outline-opacity: 20%;
+  --ui-check-disabled-opacity: 50%;
+
+  display: flex;
+  align-items: center;
+  gap: 0 var(--ui-check-gap);
+  flex-wrap: wrap;
+  width: fit-content;
+  font-size: var(--ui-check-font-size);
+
+  &:has([type="radio"]) {
+    --ui-check-icon: var(--icon-radio);
+    --ui-check-radius: 50%;
+  }
+
+  & :where(label[for], input) {
+    cursor: pointer;
+  }
+
+  & :where(a) {
+    color: var(--color-accent);
+    text-decoration: underline;
+  }
+
+  & :where(input) {
+    display: flex;
+    width: var(--ui-check-width);
+    height: var(--ui-check-width);
+    background-color: color-mix(in sRGB, var(--ui-check-bg) var(--ui-check-bg-opacity), var(--ui-check-bg-mix));
+    border: var(--ui-check-border-width) solid color-mix(in sRGB, var(--ui-check-border-color) var(--ui-check-border-opacity), var(--ui-check-border-mix));
+    border-radius: var(--ui-check-radius);
+    user-select: none;
+    outline: var(--ui-check-outline-width) solid transparent;
+    outline-offset: 0;
+    justify-content: center;
+    align-items: center;
+    transition:
+      var(--transition-border),
+      var(--transition-background),
+      outline-color var(--transition-duration),
+      outline-offset var(--transition-duration);
+    font-size: var(--ui-check-icon-font-size);
+    cursor: pointer;
+
+    &::before {
+      line-height: var(--ui-check-icon-font-size);
+      text-indent: 0;
+      display: block;
+      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
+      color: var(--color-light);
+      content: "";
+      background-color: currentColor;
+      mask: var(--ui-check-icon);
+      opacity: 0;
+      transform: scale(0);
+      will-change: transform;
+      width: 1em;
+      height: 1em;
+    }
+
+    &:where(:required) {
+      & + *::after {
+        color: var(--color-error);
+        content: " *";
+      }
+    }
+
+    &:not(:disabled) {
+      &:is(:hover, :focus-visible) {
+        --ui-check-bg: var(--ui-check-checked-bg);
+        --ui-check-border-color: var(--ui-check-checked-bg);
+        --ui-check-border-opacity: 75%;
+        --ui-check-bg-opacity: 10%;
+      }
+
+      &:focus {
+        --ui-check-border-color: var(--ui-check-checked-bg);
+        --ui-check-border-opacity: 75%;
+
+        outline-color: color-mix(in sRGB, var(--ui-check-checked-bg) var(--ui-check-outline-opacity), transparent);
+        outline-offset: var(--ui-check-outline-offset);
+      }
+    }
+
+    &:disabled {
+      --ui-check-bg-opacity: 15%;
+      --ui-check-bg: var(--color-current);
+
+      cursor: not-allowed;
+      opacity: var(--ui-check-disabled-opacity);
+    }
+
+    &:checked {
+      --ui-check-border-opacity: 0%;
+
+      background-color: var(--ui-check-checked-bg);
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &.invalid, .validated & :where(input):invalid {
+    --color-current: var(--color-error);
+    --ui-check-bg: var(--color-error);
+    --ui-check-border-color: var(--color-error);
+    --ui-check-checked-bg: var(--color-error);
+    --ui-check-border-opacity: 100%;
+  }
+}

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

@@ -0,0 +1,24 @@
+.ui-control {
+  --ui-control-border-color: var(--color-current-rgb);
+
+  & :where(input, textarea, select) {
+    border: var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity));
+
+    &:focus {
+      --ui-control-border-color: var(--color-accent-rgb);
+
+      outline-color: rgb(var(--color-accent-rgb) / var(--ui-control-outline-opacity));
+    }
+
+    &:disabled {
+      background-color: rgb(var(--color-base-rgb) / var(--ui-control-disabled-opacity));
+    }
+  }
+
+  &.invalid, .validated & :where(input, textarea, select):invalid {
+    --ui-control-border-color: var(--color-error-rgb);
+    --color-accent-rgb: var(--color-error-rgb);
+
+    background-color: rgb(var(--color-error-rgb) / var(--ui-control-invalid-bg-opacity));
+  }
+}

package/src/ui/control/default.css

@@ -0,0 +1,94 @@
+.ui-control {
+  --ui-control-height: 3rem;
+  --ui-control-height-textarea: 8rem;
+  --ui-control-pt-floating: 1.25rem;
+  --ui-control-pb-floating: 0.4375rem;
+  --ui-control-py: 0.875rem;
+  --ui-control-px: 0.875rem;
+  --ui-control-pl: var(--ui-control-px);
+  --ui-control-pr: var(--ui-control-px);
+  --ui-control-bg: var(--color-body);
+  --ui-control-color: currentColor;
+  --ui-control-placeholder-color: currentColor;
+  --ui-control-placeholder-opacity: 0.5;
+  --ui-control-font-size: 0.875rem;
+  --ui-control-font-weight: var(--font-medium);
+  --ui-control-border-width: 1px;
+  --ui-control-border-color: var(--color-current);
+  --ui-control-border-mix: transparent;
+  --ui-control-border-opacity: 15%;
+  --ui-control-border-radius: var(--rounded);
+  --ui-control-outline-width: 3px;
+  --ui-control-outline-offset: 0;
+  --ui-control-outline-opacity: 20%;
+  --ui-control-disabled-opacity: 5%;
+  --ui-control-invalid-bg-opacity: 10%;
+
+  display: grid;
+  grid-template-areas: "input";
+  font-size: var(--ui-control-font-size);
+  position: relative;
+  border-radius: var(--ui-control-border-radius);
+
+  & :where(input, textarea, select) {
+    grid-area: input;
+    background-clip: padding-box;
+    background-color: var(--ui-control-bg);
+    padding: var(--ui-control-py) var(--ui-control-pr) var(--ui-control-py) var(--ui-control-pl);
+    transition:
+      var(--transition-border),
+      outline-color var(--transition-duration),
+      outline-offset var(--transition-duration);
+    line-height: normal;
+    font-size: inherit;
+    height: var(--ui-control-height);
+    font-weight: var(--ui-control-font-weight);
+    border-radius: inherit;
+    color: var(--ui-control-color);
+    border: var(--ui-control-border-width) solid color-mix(in sRGB, var(--ui-control-border-color) var(--ui-control-border-opacity), var(--ui-control-border-mix));
+    outline: var(--ui-control-outline-width) solid transparent;
+    outline-offset: 0;
+
+    &:focus {
+      --ui-control-border-opacity: 100%;
+      --ui-control-border-color: var(--color-accent);
+
+      outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-control-outline-opacity), transparent);
+      outline-offset: var(--ui-control-outline-offset);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: color-mix(in sRGB, var(--color-base) var(--ui-control-disabled-opacity), var(--ui-control-bg));
+    }
+
+    &:required ~ label {
+      &::after {
+        color: var(--color-error);
+        content: " *";
+      }
+    }
+  }
+
+  & :where(input, textarea) {
+    &::placeholder {
+      color: var(--ui-control-placeholder-color);
+      opacity: var(--ui-control-placeholder-opacity);
+    }
+  }
+
+  & :where(textarea) {
+    resize: vertical;
+    overflow: hidden;
+    min-height: var(--ui-control-height-textarea);
+  }
+
+  &.invalid, .validated & :where(input, textarea, select):invalid {
+    --ui-control-border-opacity: 100%;
+    --ui-control-border-color: var(--color-error);
+    --ui-control-color: var(--color-error);
+    --color-accent: var(--color-error);
+
+    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-invalid-bg-opacity), var(--ui-control-bg));
+  }
+}

package/src/ui/control/floating-focus.css

@@ -0,0 +1,8 @@
+.ui-control:where(.floating) {
+  & :where(input, textarea, select) {
+    &:is(:focus, :not(:placeholder-shown)) ~ label {
+      transform: var(--ui-control-floating-label-focus-transform);
+      opacity: var(--ui-control-floating-label-focus-opacity);
+    }
+  }
+}

package/src/ui/control/floating.css

@@ -0,0 +1,31 @@
+.ui-control:where(.floating) {
+  --ui-control-floating-label-font-size: 0.875rem;
+  --ui-control-floating-label-font-weight: var(--font-medium);
+  --ui-control-floating-label-focus-transform: translateY(-0.6875rem) scale(0.8);
+  --ui-control-floating-label-focus-opacity: 50%;
+  --ui-control-floating-label-transition-duration: 0.4s;
+  --ui-control-placeholder-color: transparent;
+
+  & :where(label) {
+    grid-area: input;
+    align-self: start;
+    pointer-events: none;
+    transition: transform var(--ui-control-floating-label-transition-duration) 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-control-floating-label-font-weight);
+    margin-left: var(--ui-control-pl);
+    margin-right: var(--ui-control-pr);
+    line-height: var(--ui-control-floating-label-font-size);
+    margin-top: calc(var(--ui-control-height) / 2 - (var(--ui-control-font-size) / 2));
+  }
+
+  & :where(input, textarea, select) {
+    padding-top: calc(var(--ui-control-pt-floating));
+    padding-bottom: calc(var(--ui-control-pb-floating));
+  }
+}

package/src/ui/control/icon.css

@@ -0,0 +1,66 @@
+.ui-control {
+  --ui-control-icon-font-size: 1.25rem;
+  --ui-control-icon-count-l: 1;
+  --ui-control-icon-count-r: 1;
+  --ui-control-icon-gap: 0.375rem;
+  --ui-control-icon-inset-x: calc(var(--ui-control-px) - 0.25rem);
+  --ui-control-icon-inset-x-gap: 0.125rem;
+  --ui-control-icon-offset-l: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-l));
+  --ui-control-icon-offset-r: calc(var(--ui-control-icon-inset-x) + var(--ui-control-icon-inset-x-gap) + (var(--ui-control-icon-font-size) + var(--ui-control-icon-gap)) * var(--ui-control-icon-count-r));
+
+  &:has(.icon-l) {
+    --ui-control-pl: var(--ui-control-icon-offset-l);
+  }
+
+  &:has(.icon-r) {
+    --ui-control-pr: var(--ui-control-icon-offset-r);
+  }
+
+  &:has(.icon-l > *:nth-child(2)) {
+    --ui-control-icon-count-r: 2;
+  }
+
+  &:has(.icon-r > *:nth-child(2)) {
+    --ui-control-icon-count-r: 2;
+  }
+
+  & :where(svg) {
+    font-size: var(--ui-control-icon-font-size);
+    width: 1em;
+    height: var(--ui-control-height);
+  }
+
+  & :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-control-icon-gap);
+    transition: var(--transition-opacity);
+
+    &:where(.icon-l) {
+      left: var(--ui-control-icon-inset-x);
+      margin-right: auto;
+    }
+
+    &:where(.icon-r) {
+      right: var(--ui-control-icon-inset-x);
+      margin-left: auto;
+    }
+  }
+
+  & :where([aria-label]) {
+    &::after {
+      content: attr(aria-label);
+      font-size: var(--ui-control-font-size);
+      min-width: var(--ui-control-icon-font-size);
+      text-align: center;
+      line-height: var(--ui-control-icon-font-size);
+      display: block;
+    }
+  }
+}

package/src/ui/control/index.css

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

package/src/ui/control/select.css

@@ -0,0 +1,28 @@
+.ui-control:has(select) {
+  --ui-control-icon-select-font-size: 1.5rem;
+  --ui-control-pr: var(--ui-control-icon-offset-r);
+
+  &:has(.icon-r) {
+    --ui-control-icon-count-r: 2;
+  }
+
+  & :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);
+    mask: var(--icon-angle-down);
+    pointer-events: none;
+    grid-area: input;
+  }
+}

package/src/ui/control.css

@@ -0,0 +1 @@
+@import "control/index.css";

package/src/ui/group.css

@@ -0,0 +1,34 @@
+.ui-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:has(.ui-control) {
+    :where(.ui-btn) {
+      --ui-btn-border-width: 1px;
+      --ui-btn-border-opacity: 15%;
+      --ui-btn-height: auto;
+
+      min-width: 3rem;
+    }
+  }
+
+  :where(.ui-btn) {
+    --ui-btn-focus-outline-offset: 0;
+  }
+
+  & > * {
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      &, & :where(input, select) {
+        border-left: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}

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,16 +1,15 @@
 @import "badge.css";
-@import "btn.css";
-@import "checkbox.css";
+@import "btn/index.css";
+@import "check.css";
+@import "control.css";
+@import "group.css";
 @import "heading.css";
 @import "image.css";
 @import "info.css";
-@import "input.css";
 @import "label.css";
 @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/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,36 @@
+.ui-link {
+  --color-accent: var(--color-current);
+  --ui-link-font-size: 0.875rem;
+  --ui-link-font-weight: var(--font-medium);
+  --ui-link-letter-spacing: 0;
+  --ui-link-hover-color: var(--color-accent);
+  --ui-link-hover-opacity: 0.75;
+  --ui-link-active-opacity: 0.75;
+  --ui-link-gap: 0.5rem;
+
+  font-size: var(--ui-link-font-size);
+  font-weight: var(--ui-link-font-weight);
+  letter-spacing: var(--ui-link-letter-spacing);
+  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);
+      }
+    }
+
+    &:focus-visible {
+      color: var(--ui-link-hover-color);
+    }
+
+    &:active {
+      opacity: var(--ui-link-active-opacity);
+    }
+  }
+}

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,50 @@
+.ui-link:where([class*="underlined"]) {
+  --ui-link-hover-opacity: 1;
+  --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);
+    --ui-link-hover-opacity: 0.75;
+    --ui-link-active-opacity: 0.75;
+  }
+
+  &::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-rgb.css

@@ -0,0 +1,6 @@
+.ui-notice {
+  --ui-notice-bg: var(--color-accent-rgb);
+
+  background-color: rgb(var(--ui-notice-bg) / 10%);
+  outline: var(--ui-notice-outline-width) solid rgb(var(--ui-notice-bg) / var(--ui-notice-outline-opacity));
+}