winduum 0.1.18 → 0.2.0-beta.1

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.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) 0.75%, 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) 0.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,31 @@ var lodash = require('lodash');
 
 const defaultConfig = {
     colors: [
-        'background', 'default', 'light', 'dark', 'primary', 'secondary',
-        'warning', 'error', 'info', 'success', 'accent', `current`
+        'light', 'dark', 'primary', 'secondary',
+        'warning', 'error', 'info', 'success', 'accent', 'current',
+        'base', '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 +44,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]]);
@@ -58,9 +60,9 @@ const tailwindColors = (colors = []) => {
     colors.forEach(name => {
         colors[name] = ({ opacityValue }) => {
             if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}))`
+                return `rgb(var(--color-${name}-rgb))`
             }
-            return `rgb(var(--color-${name}) / ${opacityValue})`
+            return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
         };
     });
 
@@ -75,10 +77,12 @@ 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]})`
             };
         } else {
             result[`.accent-${color}`] = {
+                '--color-accent-rgb': `var(--color-${color}-rgb)`,
                 '--color-accent': `var(--color-${color})`
             };
         }
@@ -130,10 +134,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 +168,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;

package/utils/tailwind.js

@@ -1,34 +1,34 @@
 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', 'secondary',
+        'warning', 'error', 'info', 'success', 'accent', 'current',
+        'base', '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 +40,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]])
@@ -56,9 +56,9 @@ export const tailwindColors = (colors = []) => {
     colors.forEach(name => {
         colors[name] = ({ opacityValue }) => {
             if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}))`
+                return `rgb(var(--color-${name}-rgb))`
             }
-            return `rgb(var(--color-${name}) / ${opacityValue})`
+            return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
         }
     })
 
@@ -66,27 +66,29 @@ 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]})`
             }
         } else {
             result[`.accent-${color}`] = {
+                '--color-accent-rgb': `var(--color-${color}-rgb)`,
                 '--color-accent': `var(--color-${color})`
             }
         }
     })
 
     return result
-};
+}
 
 export const tailwindColorsCurrent = (colors = []) => {
-    const result = {};
+    const result = {}
 
     colors.forEach(color => {
         if (Array.isArray(color)) {
@@ -103,7 +105,7 @@ export const tailwindColorsCurrent = (colors = []) => {
     })
 
     return result
-};
+}
 
 export const tailwindVariables = (type, variables = [], values = {}) => {
     variables.forEach(name => {
@@ -128,10 +130,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 +164,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/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;
-  }
-}