winduum 0.1.18 → 0.2.0-beta.10

package/utils/tailwind.js

@@ -1,34 +1,35 @@
 import plugin from 'tailwindcss/plugin'
-import twColors from "tailwindcss/colors"
+import twColors from 'tailwindcss/colors'
 import lodash from 'lodash'
 
 export const defaultConfig = {
     colors: [
-        'default', 'light', 'dark', 'primary', 'secondary',
-        'warning', 'error', 'info', 'success', 'accent', `current`,
-        'background', 'background-lighter', 'background-darker'
+        'light', 'dark', 'primary',
+        'warning', 'error', 'info', 'success', 'accent', 'current',
+        'base', 'base-primary', 'base-secondary', 'base-tertiary',
+        'body', 'body-primary', 'body-secondary', 'body-tertiary'
     ],
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
     zIndex: [10, 20, 30, 40, 50, 60],
     spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
-    animations: ['fade-in', 'fade-out', 'ripple'],
+    animations: ['fade-in', 'fade-out', 'fade-in-down', 'fade-out-up', 'ripple', 'spin', 'move-indeterminate'],
     screens: {
-        'xs': '22.5em',
-        'sm': '26em',
-        'md': '48em',
-        'lg': '60em',
-        'xl': '76em',
+        xs: '22.5em',
+        sm: '26em',
+        md: '48em',
+        lg: '60em',
+        xl: '76em',
         '2xl': '82em',
         '3xl': '88em',
         '4xl': '100em',
-        'xxl': '126em',
+        xxl: '126em',
         '2xxl': '158em'
     }
 }
 
-export const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
+export const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
     .substring(1).match(/.{2}/g)
     .map(x => parseInt(x, 16))
 
@@ -40,9 +41,9 @@ export const getTailwindColors = (twColors) => {
             return
         }
 
-        if (typeof twColors[color] === "object") {
+        if (typeof twColors[color] === 'object') {
             Object.keys(twColors[color]).forEach(variant => {
-                accentColors.push([`${color.replace(/[A-Z]/g, m => "-" + m.toLowerCase())}-${variant}`, twColors[color][variant]])
+                accentColors.push([`${color.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}-${variant}`, twColors[color][variant]])
             })
         } else {
             accentColors.push([color, twColors[color]])
@@ -54,11 +55,19 @@ export const getTailwindColors = (twColors) => {
 
 export const tailwindColors = (colors = []) => {
     colors.forEach(name => {
+        colors[name + '-rgb'] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `rgb(var(--color-${name}-rgb))`
+            }
+            return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
+        }
+
         colors[name] = ({ opacityValue }) => {
             if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}))`
+                return `var(--color-${name})`
             }
-            return `rgb(var(--color-${name}) / ${opacityValue})`
+
+            return `color-mix(in sRGB, var(--color-${name}) calc(${opacityValue} * 100%), transparent)`
         }
     })
 
@@ -66,27 +75,31 @@ export const tailwindColors = (colors = []) => {
 }
 
 export const tailwindColorsAccent = (colors = []) => {
-    const result = {};
+    const result = {}
 
     colors.forEach(color => {
         if (Array.isArray(color)) {
             const rgb = hexToRgb(color[1])
 
             result[`.accent-${color[0]}`] = {
-                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`
+                '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             }
         } else {
             result[`.accent-${color}`] = {
-                '--color-accent': `var(--color-${color})`
+                '--color-accent-rgb': `var(--color-${color}-rgb)`,
+                '--color-accent': `var(--color-${color})`,
+                '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
             }
         }
     })
 
     return result
-};
+}
 
 export const tailwindColorsCurrent = (colors = []) => {
-    const result = {};
+    const result = {}
 
     colors.forEach(color => {
         if (Array.isArray(color)) {
@@ -103,7 +116,7 @@ export const tailwindColorsCurrent = (colors = []) => {
     })
 
     return result
-};
+}
 
 export const tailwindVariables = (type, variables = [], values = {}) => {
     variables.forEach(name => {
@@ -128,10 +141,21 @@ export const tailwindAnimations = (values) => {
 export const createPlugin = (userConfig = {}) => {
     userConfig = lodash.merge(defaultConfig, userConfig)
 
-    return plugin(({addUtilities}) => {
+    return plugin(({ addUtilities, theme, variants, e }) => {
         addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)))
         addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)))
         addUtilities(tailwindAnimations(userConfig.animations))
+        addUtilities([
+            Object.entries(theme('spacing')).map(([key, value]) => {
+                return {
+                    [`.${e(`sq-${key}`)}`]: {
+                        '--sq': `${value}`,
+                        width: 'var(--sq)',
+                        height: 'var(--sq)'
+                    }
+                }
+            })
+        ], variants('sq'))
     }, {
         corePlugins: {
             preflight: false,
@@ -151,7 +175,7 @@ export const createPlugin = (userConfig = {}) => {
                     DEFAULT: 'var(--rounded)'
                 }),
                 screens: userConfig.screens
-            },
+            }
         }
     })
 }

package/src/ui/checkbox.css

@@ -1,106 +0,0 @@
-:where(.ui-checkbox, .ui-radio) {
-  --ui-checkbox-width: 1.375rem;
-  --ui-checkbox-font-size: 0.875rem;
-  --ui-checkbox-gap: 0.625rem;
-  --ui-checkbox-bg-raw: var(--color-background);
-  --ui-checkbox-bg-opacity: 0.1;
-  --ui-checkbox-border-color-raw: var(--color-current);
-  --ui-checkbox-border-color-opacity: 0.2;
-  --ui-checkbox-checked-bg-raw: var(--color-accent);
-  --ui-checkbox-radius: 0.5rem;
-  --ui-checkbox-icon: var(--icon-check);
-  --ui-checkbox-icon-font-size: 1.125rem;
-  --ui-checkbox-validity-font-size: 0.875rem;
-  --ui-checkbox-validity-offset: 0.375rem;
-  --ui-checkbox-box-shadow: none;
-
-  display: flex;
-  align-items: center;
-  gap: 0 var(--ui-checkbox-gap);
-  flex-wrap: wrap;
-  width: max-content;
-  font-size: var(--ui-checkbox-font-size);
-
-  & :where(label[for], input) {
-    cursor: pointer;
-  }
-
-  & a {
-    color: rgb(var(--color-accent));
-    text-decoration: underline;
-  }
-
-  & input {
-    --color-current: var(--color-light);
-
-    display: flex;
-    width: var(--ui-checkbox-width);
-    height: var(--ui-checkbox-width);
-    background-color: rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));
-    border: 1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));
-    border-radius: var(--ui-checkbox-radius);
-    user-select: none;
-    outline: none;
-    justify-content: center;
-    align-items: center;
-    transition: var(--transition-border), var(--transition-background), var(--transition-shadow);
-    box-shadow: var(--ui-checkbox-box-shadow);
-    font-size: var(--ui-checkbox-icon-font-size);
-
-    &::before {
-      line-height: var(--ui-checkbox-icon-font-size);
-      text-indent: 0;
-      display: block;
-      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
-      color: rgb(var(--color-current));
-      content: "";
-      background-color: currentColor;
-      mask: var(--ui-checkbox-icon);
-      opacity: 0;
-      transform: scale(0);
-      will-change: transform;
-      width: 1em;
-      height: 1em;
-    }
-
-    &:where(:required) {
-      & + *::after {
-        color: rgb(var(--color-error));
-        content: " *";
-      }
-    }
-
-    &:is(:hover, :focus-visible) {
-      --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
-      --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
-      --tw-border-opacity: 0.75;
-      --tw-bg-opacity: 0.1;
-    }
-
-    &:focus {
-      --ui-checkbox-box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.2),
-        0 1px 2px 0 rgb(var(--color-current) / 0.05);
-    }
-
-    &:checked {
-      --tw-border-opacity: 0;
-
-      background-color: rgb(var(--ui-checkbox-checked-bg-raw));
-
-      &::before {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-
-  &.is-invalid, .is-validated & :where(input):invalid {
-    --ui-checkbox-bg-raw: var(--color-error);
-    --ui-checkbox-border-color-raw: var(--color-error);
-    --ui-checkbox-checked-bg-raw: var(--color-error);
-    --color-current: var(--color-error);
-    --tw-border-opacity: 1;
-  }
-}

package/src/ui/input.css

@@ -1,226 +0,0 @@
-: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;
-      }
-    }
-  }
-}

package/src/ui/radio.css

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

package/src/ui/select.css

@@ -1,27 +0,0 @@
-: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;
-  }
-}