winduum 1.2.1 → 2.0.0-next.2

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/switch/readme.md

@@ -1,32 +0,0 @@
-# [Switch](https://winduum.dev/docs/ui/switch.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/ui/switch/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/switch/default-props.css" layer(components);
-@import "winduum/src/ui/switch/default.css" layer(components);
-@import "winduum/src/ui/switch/interactive.css" layer(components);
-@import "winduum/src/ui/switch/invalid.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/ui/switch/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/switch.html) to learn more about usage examples.

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/text/index.css

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

package/src/ui/text/readme.md

@@ -1,30 +0,0 @@
-# [Text](https://winduum.dev/docs/ui/text.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/ui/text/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/text/default-props.css" layer(components);
-@import "winduum/src/ui/text/default.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/ui/text/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/text.html) to learn more about usage examples.

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));
-}