winduum 1.2.1 → 2.0.0-next.1

package/src/ui/range/default.css

@@ -1,101 +0,0 @@
-.ui-range {
-  --ui-range-thumb-bg: var(--color-accent);
-  --ui-range-thumb-border-color: var(--ui-range-thumb-bg);
-  --ui-range-track-bg: var(--color-accent);
-  --ui-range-track:
-    linear-gradient(
-      to right,
-      var(--ui-range-track-bg) 0%,
-      var(--ui-range-track-bg) var(--ui-range-track-start),
-      transparent var(--ui-range-track-start),
-      transparent var(--ui-range-track-end)
-    );
-
-  min-block-size: var(--ui-range-thumb-size);
-  display: grid;
-
-  :where(input) {
-    --tw-bg-opacity: 0.1;
-    --tw-bg-mix: var(--color-body);
-
-    block-size: var(--ui-range-track-height);
-    background-color: color-mix(in var(--space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-    position: relative;
-    grid-area: 1/1;
-
-    &::-webkit-slider-runnable-track {
-      block-size: var(--ui-range-track-height);
-      border-radius: var(--rounded-full);
-      background: var(--ui-range-track);
-    }
-
-    &::-moz-range-track {
-      block-size: var(--ui-range-track-height);
-      border-radius: var(--rounded-full);
-      background: var(--ui-range-track);
-    }
-
-    &::-webkit-slider-thumb {
-      --tw-outline-opacity: var(--ui-range-thumb-outline-opacity);
-
-      width: var(--ui-range-thumb-size);
-      height: var(--ui-range-thumb-size);
-      background-color: var(--ui-range-thumb-bg);
-      border-radius: var(--rounded-full);
-      border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
-      outline:
-        var(--ui-range-thumb-outline-width) solid
-        color-mix(
-          in var(--space),
-          var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
-        );
-      margin-block-start: calc((var(--ui-range-thumb-size) - var(--ui-range-track-height)) / 2 * -1);
-      transition: outline-color var(--duration), outline-offset var(--duration);
-      cursor: var(--ui-range-thumb-cursor, grab);
-      appearance: none;
-      pointer-events: auto;
-
-      &:active {
-        --ui-range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-
-    &::-moz-range-thumb {
-      --tw-outline-opacity: var(--ui-range-thumb-outline-opacity);
-
-      width: var(--ui-range-thumb-size);
-      height: var(--ui-range-thumb-size);
-      background-color: var(--ui-range-thumb-bg);
-      border-radius: var(--rounded-full);
-      border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
-      outline:
-        var(--ui-range-thumb-outline-width) solid
-        color-mix(
-          in var(--space),
-          var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
-        );
-      transition: outline-color var(--duration), outline-offset var(--duration);
-      cursor: var(--ui-range-thumb-cursor, grab);
-      appearance: none;
-      pointer-events: auto;
-
-      &:active {
-        --ui-range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-
-      &::-moz-range-thumb {
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-  }
-}

package/src/ui/range/multi.css

@@ -1,22 +0,0 @@
-.ui-range {
-  :where(input) {
-    &:not(:only-of-type) {
-      --ui-range-track:
-        linear-gradient(
-          to right,
-          transparent 0%,
-          transparent var(--ui-range-track-start),
-          var(--ui-range-track-bg) var(--ui-range-track-start),
-          var(--ui-range-track-bg) var(--ui-range-track-end),
-          transparent var(--ui-range-track-end),
-          transparent 100%
-        );
-
-      pointer-events: none;
-
-      ~ input {
-        background: transparent;
-      }
-    }
-  }
-}

package/src/ui/rating/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --ui-rating-color: var(--color-accent);
-  --c-rating-gap: 0.25rem;
-  --c-rating-opacity: 0.2;
-}

package/src/ui/switch/default-props.css

@@ -1,17 +0,0 @@
-:root, :host {
-  --ui-switch-width: 3rem;
-  --ui-switch-height: 1.5rem;
-  --ui-switch-icon-size: 1.125rem;
-  --ui-switch-font-weight: var(--font-normal);
-  --ui-switch-font-size: var(--text-sm);
-  --ui-switch-line-height: calc(1em + 0.25rem);
-  --ui-switch-gap: 0.75rem;
-  --ui-switch-border-radius: var(--rounded-full);
-  --ui-switch-bg: currentColor;
-  --ui-switch-outline-width: 2px;
-  --ui-switch-outline-color: currentColor;
-
-  &.dark {
-    --ui-switch-bg: var(--color-body-tertiary);
-  }
-}

package/src/ui/switch/default.css

@@ -1,46 +0,0 @@
-.ui-switch {
-  font-weight: var(--ui-switch-font-weight);
-  font-size: var(--ui-switch-font-size);
-  line-height: var(--ui-switch-line-height);
-  letter-spacing: var(--ui-switch-letter-spacing);
-  gap: var(--ui-switch-gap);
-  display: inline-flex;
-  text-wrap: pretty;
-
-  :where(a) {
-    color: var(--color-accent);
-    text-decoration: underline;
-  }
-
-  :where(input) {
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-
-    inline-size: var(--ui-switch-width);
-    block-size: var(--ui-switch-height);
-    padding: calc((var(--ui-switch-height) - var(--ui-switch-icon-size)) / 2);
-    border-radius: var(--ui-switch-border-radius);
-    background-color: var(--ui-switch-bg);
-    outline:
-      var(--ui-switch-outline-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-switch-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
-      );
-    outline-offset: var(--ui-switch-outline-offset);
-    display: flex;
-    position: relative;
-    flex-shrink: 0;
-
-    &::before {
-      width: var(--ui-switch-icon-size);
-      height: var(--ui-switch-icon-size);
-      background-color: var(--color-light);
-      transition: var(--transition-all);
-      border-radius: inherit;
-      margin-block: auto;
-      content: "";
-    }
-  }
-}

package/src/ui/switch/interactive-props.css

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

package/src/ui/switch/interactive.css

@@ -1,39 +0,0 @@
-.ui-switch {
-  :where(input) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
-
-    &:where(:required) {
-      & + *::after {
-        color: var(--color-error);
-        content: " *";
-      }
-    }
-
-    &:enabled:focus {
-      --ui-switch-outline-offset: var(--ui-switch-focus-outline-offset);
-      --tw-outline-opacity: 0.4;
-    }
-
-    &:disabled {
-      opacity: var(--ui-switch-disabled-opacity);
-      cursor: not-allowed;
-    }
-
-    &:checked {
-      --ui-switch-outline-color: var(--color-accent);
-      --ui-switch-bg: var(--color-accent);
-
-      &::before {
-        margin-inline-start: calc(100% - var(--ui-switch-icon-size));
-      }
-    }
-
-    &:indeterminate {
-      &::before {
-        margin-inline-start: calc(50% - var(--ui-switch-icon-size) / 2);
-      }
-    }
-  }
-}

package/src/ui/switch/invalid.css

@@ -1,6 +0,0 @@
-.ui-switch {
-  &.invalid :where(input), .validated & :where(input):invalid {
-    --ui-switch-outline-color: var(--color-error);
-    --ui-switch-bg: var(--color-error);
-  }
-}

package/src/ui/text/default-props.css

@@ -1,9 +0,0 @@
-:root, :host {
-  --ui-text-content-bold: var(--font-semibold);
-  --ui-text-content-my: var(--spacing-xl);
-  --ui-text-content-marker-size: 0.375em;
-  --ui-text-line-height: calc(1em + 0.75rem);
-  --ui-text-hr-my: 3em;
-  --ui-text-heading-line-height: calc(1em + 0.375rem);
-  --ui-text-heading-my: 1.5em 0.5em;
-}

package/src/ui/text/default.css

@@ -1,193 +0,0 @@
-.ui-text {
-  font-family: var(--ui-text-font-family);
-  font-weight: var(--ui-text-font-weight);
-  font-size: var(--ui-text-font-size);
-  line-height: var(--ui-text-line-height);
-  letter-spacing: var(--ui-text-letter-spacing);
-  text-wrap: pretty;
-
-  > :is(*:first-child) {
-    margin-block-start: 0;
-  }
-
-  > :is(*:last-child) {
-    margin-block-end: 0;
-  }
-
-  :where(a) {
-    transition: var(--transition-color);
-    color: var(--color-accent);
-    text-decoration: underline;
-
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        color: color-mix(in var(--space), var(--color-accent) 75%, transparent);
-      }
-    }
-
-    &:focus-visible {
-      color: color-mix(in var(--space), var(--color-accent) 75%, transparent);
-    }
-  }
-
-  :where(b, strong) {
-    font-weight: var(--ui-text-content-bold);
-  }
-
-  :where(em) {
-    font-style: italic;
-  }
-
-  :where(img) {
-    display: block;
-    height: auto;
-  }
-
-  :where(p) {
-    margin-block: var(--ui-text-content-my);
-
-    &:empty {
-      line-height: 0;
-      margin: 0;
-
-      &::after {
-        content: "\00a0";
-      }
-    }
-  }
-
-  :where(hr) {
-    --tw-border-opacity: 0.1;
-
-    margin-block: var(--ui-text-hr-my);
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    font-family: var(--ui-text-heading-font-family);
-    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);
-    letter-spacing: var(--ui-text-heading-letter-spacing);
-    margin-block: var(--ui-text-heading-my);
-    color: var(--ui-text-heading-color);
-    text-wrap: balance;
-  }
-
-  :where(h1) {
-    --ui-text-heading-font-size: var(--text-4xl);
-  }
-
-  :where(h2) {
-    --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(h5) {
-    --ui-text-heading-font-size: var(--text-lg);
-  }
-
-  :where(table) {
-    border: 0;
-    min-width: 100%;
-
-    :where(td, th) {
-      padding: 1em 1.25em;
-      text-align: left;
-    }
-
-    :where(thead) {
-      font-weight: var(--ui-text-content-bold);
-      border-block-end: 1px solid color-mix(in var(--space), currentColor 10%, transparent);
-    }
-
-    :where(tbody tr) {
-      &:nth-of-type(even) {
-        background-color: color-mix(in var(--space), currentColor 5%, transparent);
-      }
-    }
-  }
-
-  :where(ol, ul) {
-    margin-inline-start: 0.75em;
-    padding-inline-start: 1em;
-    margin-block: var(--ui-text-content-my);
-
-    :where(li) {
-      margin-block: 0.5em;
-      padding-inline-start: 1ch;
-    }
-  }
-
-  :where(ol) {
-    &:not([type]) {
-      list-style: decimal;
-    }
-
-    & :where(li) {
-      &::marker {
-        color: var(--color-accent);
-        font-weight: var(--ui-text-content-bold);
-      }
-    }
-  }
-
-  :where(ul) {
-    :where(li) {
-      position: relative;
-      list-style-type: "";
-
-      &::before {
-        width: var(--ui-text-content-marker-size);
-        height: var(--ui-text-content-marker-size);
-        position: absolute;
-        left: -0.75em;
-        top: 0.5lh;
-        border: 1px solid var(--color-accent);
-        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"] {
-      --ui-text-content-marker-radius: 0;
-    }
-
-    &[style*="circle"] {
-      --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%;
-  }
-
-  :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-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --ui-title-font-weight: var(--font-semibold);
-  --ui-title-font-size: var(--text-sm);
-  --ui-title-line-height: calc(1em + 0.25rem);
-}

package/src/ui/title/default.css

@@ -1,8 +0,0 @@
-.ui-title {
-  font-family: var(--ui-title-font-family);
-  font-weight: var(--ui-title-font-weight);
-  font-size: var(--ui-title-font-size);
-  line-height: var(--ui-title-line-height);
-  letter-spacing: var(--ui-title-letter-spacing);
-  text-wrap: pretty;
-}

package/src/ui/title/lg.css

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

package/src/ui/title/sm.css

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

package/src/utilities/skeleton/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --skeleton-opacity: 0.5;
-  --skeleton-from: color-mix(in var(--space), var(--color-body) 50%, var(--color-main));
-  --skeleton-to: color-mix(in var(--space), var(--color-body) 80%, var(--color-main));
-}