winduum 0.1.18 → 0.2.0-beta.10

package/src/ui/notice.css

@@ -1,11 +1,13 @@
-:where(.ui-notice) {
+.ui-notice {
   --color-current: var(--color-accent);
-  --ui-notice-bg: rgb(var(--color-accent));
+  --ui-notice-bg: 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-outline-width: 1px;
+  --ui-notice-outline-offset: calc(var(--ui-notice-outline-width) * -1);
+  --ui-notice-outline-opacity: 10%;
   --ui-notice-gap: 1.25rem;
 
   position: relative;
@@ -14,28 +16,13 @@
   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));
+  background-color: color-mix(in sRGB, var(--ui-notice-bg) 10%, transparent);
+  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
+  outline-offset: var(--ui-notice-outline-offset);
+  color: 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/ui/progress/default-rgb.css

@@ -0,0 +1,3 @@
+.ui-progress {
+  --ui-progress-bg: rgb(var(--color-accent-rgb) / var(--ui-progress-bg-opacity));
+}

package/src/ui/progress/default.css

@@ -0,0 +1,39 @@
+.ui-progress {
+  --ui-progress-height: 1rem;
+  --ui-progress-border-radius: var(--rounded-full);
+  --ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
+  --ui-progress-bg-opacity: 10%;
+
+  appearance: none;
+  height: var(--ui-progress-height);
+  border-radius: var(--ui-progress-border-radius);
+  background-color: var(--ui-progress-bg);
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background-color: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--color-accent);
+    border-radius: var(--ui-progress-border-radius);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--color-accent);
+    border-radius: var(--ui-progress-border-radius);
+  }
+
+  &:indeterminate {
+    animation: 1.5s linear 0s forwards infinite move-indeterminate;
+    background-image: linear-gradient(to right, var(--color-accent) 30%, var(--ui-progress-bg) 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/ui/progress/index.css

@@ -0,0 +1,3 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";

package/src/ui/progress/lg.css

@@ -0,0 +1,3 @@
+.ui-progress:where(.lg) {
+  --ui-progress-height: 1.5rem;
+}

package/src/ui/progress/sm.css

@@ -0,0 +1,3 @@
+.ui-progress:where(.sm) {
+  --ui-progress-height: 0.5rem;
+}

package/src/ui/progress.css

@@ -1,50 +1 @@
-: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%;
-
-  &:where(.is-sm) {
-    --ui-progress-height: 0.5rem;
-  }
-
-  &:where(.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;
-    }
-  }
-}
+@import "progress/index.css";

package/src/ui/switch-rgb.css

@@ -0,0 +1,11 @@
+.ui-switch {
+  & :where(input) {
+    &:focus {
+      outline-color: rgb(var(--color-current-rgb) / var(--ui-switch-outline-opacity));
+    }
+
+    &:checked {
+      --color-current-rgb: var(--color-accent-rgb);
+    }
+  }
+}

package/src/ui/switch.css

@@ -1,15 +1,15 @@
-:where(.ui-switch) {
+.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;
+  --ui-switch-bg: var(--color-dark);
+  --ui-switch-radius: var(--rounded-full);
+  --ui-switch-outline-width: 3px;
+  --ui-switch-outline-offset: 0;
+  --ui-switch-outline-opacity: 20%;
 
-  .dark & {
-    --ui-switch-bg-raw: var(--color-background-300);
+  :where(.dark) & {
+    --ui-switch-bg: var(--color-body-tertiary);
   }
 
   display: flex;
@@ -17,12 +17,12 @@
   flex-wrap: wrap;
   width: max-content;
 
-  &:where(.is-sm) {
+  &:where(.sm) {
     --ui-switch-width: 2.5rem;
     --ui-switch-height: 1.25rem;
   }
 
-  &:where(.is-lg) {
+  &:where(.lg) {
     --ui-switch-width: 4rem;
     --ui-switch-height: 2rem;
   }
@@ -33,18 +33,21 @@
     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);
+    background-color: var(--ui-switch-bg);
+    transition:
+      var(--transition-background),
+      outline-color var(--transition-duration),
+      outline-offset var(--transition-duration);
     cursor: pointer;
     appearance: none;
-    outline: none;
+    outline: var(--ui-switch-outline-width) solid transparent;
+    outline-offset: 0;
     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));
+      background-color: var(--color-light);
       border-radius: var(--ui-switch-radius);
       position: absolute;
       left: var(--ui-switch-height);
@@ -62,24 +65,16 @@
     }
 
     &: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);
+      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
+      outline-offset: var(--ui-switch-outline-offset);
     }
 
     &: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);
-      }
+      --color-current: var(--color-accent);
+      --ui-switch-bg: var(--color-accent);
 
       &::before {
-        background-color: rgb(var(--color-light));
+        background-color: var(--color-light);
         left: 100%;
       }
     }

package/src/ui/text-rgb.css

@@ -0,0 +1,13 @@
+.ui-text {
+  & :where(table) {
+    & :where(thead) {
+      border-bottom: 1px solid rgb(var(--color-current-rgb) / 7.5%);
+    }
+
+    & :where(tbody tr) {
+      &:nth-of-type(even) {
+        background-color: rgb(var(--color-current-rgb) / 5%);
+      }
+    }
+  }
+}

package/src/ui/text.css

@@ -1,4 +1,4 @@
-:where(.ui-text) {
+.ui-text {
   --ui-text-size: 0.875rem;
   --ui-text-size-line: 0.75rem;
   --ui-text-weight: var(--font-normal);
@@ -11,23 +11,23 @@
   font-size: var(--ui-text-size);
   line-height: calc(var(--ui-text-size) + var(--ui-text-size-line));
 
-  &:where(.is-lg) {
+  &:where(.lg) {
     --ui-text-size: 1.125rem;
   }
 
   & :where(a) {
     text-decoration: underline;
     transition: var(--transition-color);
-    color: rgb(var(--color-accent));
+    color: var(--color-accent);
 
     &:hover {
       @media (hover: hover) and (pointer: fine) {
-        color: rgb(var(--color-accent) / 0.7);
+        color: color-mix(in sRGB, var(--color-accent) 70%, transparent);
       }
     }
 
     &:focus-visible {
-      color: rgb(var(--color-accent) / 0.7);
+      color: color-mix(in sRGB, var(--color-accent) 70%, transparent);
     }
   }
 
@@ -117,12 +117,12 @@
 
     & :where(thead) {
       font-weight: var(--ui-text-weight-bold);
-      border-bottom: 1px solid rgb(var(--color-current) / 0.075);
+      border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
     }
 
     & :where(tbody tr) {
       &:nth-of-type(even) {
-        background-color: rgb(var(--color-current) / 0.05);
+        background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
       }
     }
   }
@@ -137,7 +137,7 @@
   }
 
   & :where(blockquote) {
-    border-left: 0.3125rem solid rgb(var(--color-accent) / 1);
+    border-left: 0.3125rem solid var(--color-accent);
     padding: 0.5rem 1.25rem;
     margin: 1rem 0;
     font-size: inherit;
@@ -148,12 +148,12 @@
     border-radius: var(--rounded-xs);
     padding: 0.25rem 0.375rem;
     font-size: 0.85em;
-    color: rgb(var(--color-accent));
+    color: var(--color-accent);
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-    background-color: rgb(27 31 35 / 0.05);
+    background-color: rgb(27 31 35 / 5%);
 
-    .dark & {
-      background-color: rgb(var(--color-background-200));
+    :where(.dark) & {
+      background-color: var(--color-body-secondary);
     }
   }
 
@@ -173,7 +173,7 @@
       }
 
       &::marker {
-        color: rgb(var(--color-accent));
+        color: var(--color-accent);
         font-weight: var(--ui-text-weight-bold);
       }
     }
@@ -198,8 +198,8 @@
         height: 0.375rem;
         position: absolute;
         content: "";
-        border: 1px solid rgb(var(--color-accent));
-        background-color: rgb(var(--color-accent));
+        border: 1px solid var(--color-accent);
+        background-color: var(--color-accent);
         left: 0;
         top: 0.6875rem;
         text-indent: 0;

package/src/ui/title/default.css

@@ -0,0 +1,12 @@
+.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);
+}

package/src/ui/title/index.css

@@ -0,0 +1,3 @@
+@import "default.css";
+@import "sm.css";
+@import "lg.css";

package/src/ui/title/lg.css

@@ -0,0 +1,3 @@
+.ui-title:where(.lg) {
+  --ui-title-font-size: 1.125rem;
+}

package/src/ui/title/sm.css

@@ -0,0 +1,3 @@
+.ui-title:where(.sm) {
+  --ui-title-font-size: 0.75rem;
+}

package/src/ui/title.css

@@ -1,20 +1 @@
-: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;
-  }
-}
+@import "title/index.css";

package/tailwind.config.cjs

@@ -5,6 +5,6 @@ module.exports = {
     './playground/**/*.{js,html,vue}'
   ],
   plugins: [
-    require('winduum')()
+    require('./utils/tailwind.cjs')()
   ],
 }

package/utils/tailwind.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
 
 var plugin = require('tailwindcss/plugin');
 var twColors = require('tailwindcss/colors');
@@ -7,30 +8,32 @@ var lodash = require('lodash');
 
 const defaultConfig = {
     colors: [
-        'background', 'default', 'light', 'dark', 'primary', 'secondary',
-        'warning', 'error', 'info', 'success', 'accent', `current`
+        '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'
     }
 };
 
-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)
+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));
 
@@ -42,9 +45,9 @@ 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]]);
@@ -56,11 +59,19 @@ const getTailwindColors = (twColors) => {
 
 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)`
         };
     });
 
@@ -75,11 +86,15 @@ const tailwindColorsAccent = (colors = []) => {
             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))`
             };
         }
     });
@@ -130,10 +145,21 @@ const tailwindAnimations = (values) => {
 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,
@@ -153,18 +179,18 @@ const createPlugin = (userConfig = {}) => {
                     DEFAULT: 'var(--rounded)'
                 }),
                 screens: userConfig.screens
-            },
+            }
         }
     })
 };
 
-module.exports.createPlugin = createPlugin;
-module.exports = createPlugin;
-module.exports.defaultConfig = defaultConfig;
-module.exports.getTailwindColors = getTailwindColors;
-module.exports.hexToRgb = hexToRgb;
-module.exports.tailwindAnimations = tailwindAnimations;
-module.exports.tailwindColors = tailwindColors;
-module.exports.tailwindColorsAccent = tailwindColorsAccent;
-module.exports.tailwindColorsCurrent = tailwindColorsCurrent;
-module.exports.tailwindVariables = tailwindVariables;
+exports.createPlugin = createPlugin;
+exports.default = createPlugin;
+exports.defaultConfig = defaultConfig;
+exports.getTailwindColors = getTailwindColors;
+exports.hexToRgb = hexToRgb;
+exports.tailwindAnimations = tailwindAnimations;
+exports.tailwindColors = tailwindColors;
+exports.tailwindColorsAccent = tailwindColorsAccent;
+exports.tailwindColorsCurrent = tailwindColorsCurrent;
+exports.tailwindVariables = tailwindVariables;