winduum 0.1.0

package/src/styles/Ui/Notice.css

@@ -0,0 +1,43 @@
+@layer utilities {
+  :where(.ui-notice) {
+    --color-current: var(--color-accent);
+    --ui-notice-bg: rgb(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-gap: 1rem;
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    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));
+    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/styles/Ui/Progress.css

@@ -0,0 +1,52 @@
+@layer utilities {
+  :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%;
+
+    &.is-sm {
+      --ui-progress-height: 0.5rem;
+    }
+
+    &.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;
+      }
+    }
+  }
+}

package/src/styles/Ui/Radio.css

@@ -0,0 +1,6 @@
+@layer utilities {
+  :where(.ui-radio) {
+    --ui-checkbox-icon: var(--icon-radio);
+    --ui-checkbox-radius: 50%;
+  }
+}

package/src/styles/Ui/Select.css

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

package/src/styles/Ui/Switch.css

@@ -0,0 +1,102 @@
+.ui-switch {
+  --ui-switch-width: 3rem;
+  --ui-switch-height: 1.5rem;
+  --ui-switch-padding: 0.375rem;
+  --ui-switch-bg-raw: var(--color-dark);
+  --ui-switch-radius: 999px;
+  --ui-switch-validity-font-size: 0.875rem;
+  --ui-switch-validity-offset: 0.375rem;
+  --ui-switch-box-shadow: none;
+
+  @nest .dark & {
+    --ui-switch-bg-raw: var(--color-background-300);
+  }
+
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: max-content;
+
+  & em {
+    display: none;
+    width: 100%;
+    font-size: var(--ui-switch-validity-font-size);
+    color: rgb(var(--color-error));
+    font-style: normal;
+    margin-top: var(--ui-switch-validity-offset);
+  }
+
+  &.is-sm {
+    --ui-switch-width: 2.5rem;
+    --ui-switch-height: 1.25rem;
+  }
+
+  &.is-lg {
+    --ui-switch-width: 4rem;
+    --ui-switch-height: 2rem;
+  }
+
+  & input {
+    width: var(--ui-switch-width);
+    height: var(--ui-switch-height);
+    display: block;
+    position: relative;
+    border-radius: var(--ui-switch-radius);
+    background-color: rgb(var(--ui-switch-bg-raw));
+    transition: var(--transition-background), var(--transition-shadow);
+    cursor: pointer;
+    appearance: none;
+    outline: none;
+    color: inherit;
+    box-shadow: var(--ui-switch-box-shadow);
+
+    &::before {
+      width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+      height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+      background-color: rgb(var(--color-light));
+      border-radius: var(--ui-switch-radius);
+      position: absolute;
+      left: var(--ui-switch-height);
+      top: 50%;
+      content: "";
+      display: block;
+      margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
+      transition: left var(--transition-duration), var(--transition-background);
+      transform: translateY(-50%);
+    }
+
+    @nest .is-validated &:invalid {
+      & ~ em {
+        display: block;
+      }
+    }
+
+    &:disabled {
+      opacity: 0.8;
+      pointer-events: none;
+    }
+
+    &:focus {
+      --ui-switch-box-shadow:
+        0 0 0 0 rgb(var(--color-current)),
+        0 0 0 3px rgb(var(--color-current) / 0.2),
+        0 1px 2px 0 rgb(var(--color-current) / 0.05);
+    }
+
+    &:checked {
+      background-color: rgb(var(--color-accent));
+
+      &:focus {
+        --ui-switch-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);
+      }
+
+      &::before {
+        background-color: rgb(var(--color-light));
+        left: 100%;
+      }
+    }
+  }
+}

package/src/styles/Ui/Text.css

@@ -0,0 +1,203 @@
+@layer utilities {
+  :where(.ui-text) {
+    --ui-text-size: 0.875rem;
+    --ui-text-size-line: 0.75rem;
+    --ui-text-weight: var(--font-normal);
+    --ui-text-weight-bold: var(--font-semibold);
+
+    font-weight: var(--ui-text-weight);
+    font-size: var(--ui-text-size);
+    line-height: calc(var(--ui-text-size) + var(--ui-text-size-line));
+
+    &:where(.is-lg) {
+      --ui-text-size: 1.125rem;
+    }
+
+    & :where(a) {
+      text-decoration: underline;
+      transition: var(--transition-color);
+      color: rgb(var(--color-accent));
+
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          color: rgb(var(--color-accent) / 0.7);
+        }
+      }
+
+      &:focus-visible {
+        color: rgb(var(--color-accent) / 0.7);
+      }
+    }
+
+    & :where(b, strong) {
+      font-weight: var(--ui-text-weight-bold);
+    }
+
+    & :where(i, em) {
+      display: inline;
+      font-style: italic;
+    }
+
+    & :where(figure) {
+      margin: 1rem 0;
+
+      @media (--media-md) {
+        margin: 2rem 0;
+      }
+
+      & :where(figcaption) {
+        font-size: 0.875rem;
+        font-weight: var(--font-semibold);
+        margin-top: 0.875rem;
+      }
+    }
+
+    & :where(img) {
+      height: auto !important;
+    }
+
+    & :where(p) {
+      line-height: inherit;
+      margin: 0 0 0.25rem;
+
+      &:empty {
+        line-height: 1rem;
+      }
+
+      &::after {
+        content: "\00a0";
+      }
+    }
+
+    & :where(hr) {
+      margin: 1.25rem 0;
+    }
+
+    & :where(h1, h2, h3, h4, h5, h6) {
+      font-weight: var(--ui-text-weight-bold);
+      font-family: var(--font-secondary);
+      font-size: var(--ui-text-heading-size, 1rem);
+      line-height: calc(var(--ui-text-heading-size) + 0.5rem);
+      margin: 0 0 1.25rem;
+    }
+
+    & h1 {
+      --ui-text-heading-size: 2.25rem;
+    }
+
+    & h2 {
+      --ui-text-heading-size: 1.75rem;
+    }
+
+    & :where(h3, h4) {
+      --ui-text-heading-size: 1.25rem;
+    }
+
+    & :where(table) {
+      border: 0;
+      min-width: 100%;
+
+      & :where(td, th) {
+        padding: 1rem 1.125rem;
+        text-align: left;
+      }
+
+      & :where(thead) {
+        font-weight: var(--ui-text-weight-bold);
+        border-bottom: 1px solid rgb(var(--color-current) / 0.075);
+      }
+
+      & :where(tbody tr) {
+        &:nth-of-type(even) {
+          background-color: rgb(var(--color-current) / 0.05);
+        }
+      }
+    }
+
+    & :where(iframe) {
+      max-width: 100%;
+    }
+
+    & :where(blockquote) {
+      background-color: rgb(var(--color-current) / 0.075);
+      border-left: 0.3125rem solid rgb(var(--color-accent) / 1);
+      padding: 1.25em 1.5em;
+      margin: 0;
+      font-size: inherit;
+    }
+
+    & :where(code) {
+      margin: 0;
+      border-radius: var(--rounded-xs);
+      padding: 0.25rem 0.5rem;
+      font-size: 0.85em;
+      color: #476582;
+      font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+      background-color: rgb(27 31 35 / 0.05);
+
+      @nest .dark & {
+        background-color: rgb(var(--color-background-100));
+        color: rgb(var(--color-primary));
+      }
+    }
+
+    & :where(ol) {
+      margin: 0 0 1.5rem;
+      padding: 0 0 0 1rem;
+
+      & :where(li) {
+        padding-left: 0.5rem;
+
+        &::marker {
+          color: rgb(var(--color-accent));
+        }
+      }
+    }
+
+    & :where(ul) {
+      list-style-type: none !important;
+      margin: 0 0 1.5rem;
+      padding: 0;
+
+      & :where(li) {
+        position: relative;
+        line-height: inherit;
+        padding-left: 1.5rem;
+
+        &:not(:last-of-type) {
+          margin: 0 0 0.5rem;
+        }
+
+        &::before {
+          width: 0.25rem;
+          height: 0.25rem;
+          position: absolute;
+          content: "";
+          border: 1px solid rgb(var(--color-accent));
+          background-color: rgb(var(--color-accent));
+          left: 0;
+          top: 0.625rem;
+          text-indent: 0;
+          border-radius: 50%;
+        }
+      }
+
+      &[style*="square"] {
+        & li {
+          &::before {
+            border-radius: 0;
+          }
+        }
+      }
+
+      &[style*="circle"] {
+        & li {
+          &::before {
+            border-radius: 50%;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/Ui/Title.css

@@ -0,0 +1,22 @@
+@layer utilities {
+  :where(.ui-title) {
+    --ui-title-font-family: var(--font-secondary);
+    --ui-title-font-weight: var(--font-semibold);
+    --ui-title-font-size: 0.875rem;
+    --ui-title-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));
+    --ui-title-line-height-ratio: 0.375rem;
+
+    font-family: var(--ui-title-font-family);
+    font-size: var(--ui-title-font-size);
+    line-height: var(--ui-title-line-height);
+    font-weight: var(--ui-title-font-weight);
+
+    &:where(.is-sm) {
+      --ui-title-font-size: 0.75rem;
+    }
+
+    &:where(.is-lg) {
+      --ui-title-font-size: 1.125rem;
+    }
+  }
+}

package/src/styles/main.css

@@ -0,0 +1,11 @@
+@import "Base/reset.css";
+@import "Base/default.css";
+@import "Base/config.css";
+@import "Base/icons.css";
+@import "Base/keyframes.css";
+@import "Base/theme/default.css";
+@import "Base/theme/dark.css";
+@import "Ui/+.css";
+@import "Components/+.css";
+@import "Libraries/+.css";
+@import "Base/tailwind/base.css";

package/src/templates/Btn.vue

@@ -0,0 +1,11 @@
+<script setup>
+    defineProps({
+        variant: String,
+        state: String,
+        size: String
+    })
+</script>
+
+<template>
+    <button class="ui-btn" :class="[variant, state, size]"><slot></slot></button>
+</template>

package/utils/helpers.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tailwindColors = (colors = []) => {
+    colors.forEach(name => {
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `rgb(var(--color-${name}))`
+            }
+            return `rgb(var(--color-${name}) / ${opacityValue})`
+        };
+    });
+
+    return colors
+};
+
+const tailwindColorsAccent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        result[`.accent-${color}`] = {
+            '--color-accent': `var(--color-${color})`,
+            'accent-color': 'rgb(var(--color-accent))'
+        };
+    });
+
+    return result
+};
+
+const tailwindColorsCurrent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        result[`.text-${color}`] = {
+            '--color-current': `var(--color-${color})`
+        };
+    });
+
+    return result
+};
+
+const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`;
+    });
+
+    return values
+};
+
+const tailwindAnimations = (values) => {
+    const result = {};
+
+    values.forEach(value => {
+        result[`.animation-${value}`] = {
+            'animation-name': value
+        };
+    });
+
+    return result
+};
+
+exports.tailwindAnimations = tailwindAnimations;
+exports.tailwindColors = tailwindColors;
+exports.tailwindColorsAccent = tailwindColorsAccent;
+exports.tailwindColorsCurrent = tailwindColorsCurrent;
+exports.tailwindVariables = tailwindVariables;

package/utils/helpers.js

@@ -0,0 +1,59 @@
+const tailwindColors = (colors = []) => {
+    colors.forEach(name => {
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `rgb(var(--color-${name}))`
+            }
+            return `rgb(var(--color-${name}) / ${opacityValue})`
+        }
+    })
+
+    return colors
+}
+
+const tailwindColorsAccent = (colors = []) => {
+    const result = {}
+
+    colors.forEach(color => {
+        result[`.accent-${color}`] = {
+            '--color-accent': `var(--color-${color})`,
+            'accent-color': 'rgb(var(--color-accent))'
+        }
+    })
+
+    return result
+}
+
+const tailwindColorsCurrent = (colors = []) => {
+    const result = {}
+
+    colors.forEach(color => {
+        result[`.text-${color}`] = {
+            '--color-current': `var(--color-${color})`
+        }
+    })
+
+    return result
+}
+
+const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`
+    })
+
+    return values
+}
+
+const tailwindAnimations = (values) => {
+    const result = {}
+
+    values.forEach(value => {
+        result[`.animation-${value}`] = {
+            'animation-name': value
+        }
+    })
+
+    return result
+}
+
+export { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations }