winduum 0.4.0 → 0.5.0-next.10

package/utils/tailwind.js

@@ -2,7 +2,6 @@ import plugin from 'tailwindcss/plugin'
 import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
 import toColorValue from 'tailwindcss/src/util/toColorValue'
 import { parseColor, formatColor } from 'tailwindcss/src/util/color'
-import lodash from 'lodash'
 
 function withAlphaVariable ({ color, property, variable }) {
     const properties = [].concat(property)
@@ -45,11 +44,13 @@ export const defaultConfig = {
     ],
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
+    ease: ['linear', 'in', 'out', 'in-out'],
     zIndex: [10, 20, 30, 40, 50, 60],
     fontSize: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '3xl', '4xl', '5xl', '6xl', '7xl', '7xl', '8xl', '9xl'],
     spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'section'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
     animations: ['fade-in', 'fade-out', 'fade-in-down', 'fade-out-up', 'ripple', 'spin', 'move-indeterminate'],
+    mask: ['check', 'radio', 'angle-up', 'angle-down'],
     screens: {
         xs: '22.5em',
         sm: '26em',
@@ -63,7 +64,7 @@ export const defaultConfig = {
         '2xxl': '158em'
     },
     settings: {
-        rgb: true,
+        rgb: false,
         colorMix: true
     }
 }
@@ -98,6 +99,18 @@ export const tailwindVariablesFont = (type, variables = [], values = {}) => {
     return values
 }
 
+export const tailwindPropertyUtilities = (type, variables = []) => {
+    const result = {}
+
+    variables.forEach(name => {
+        result[`.${type}-${name}`] = {
+            [type]: `var(--${type}-${name})`
+        }
+    })
+
+    return result
+}
+
 export const tailwindAnimations = (values) => {
     const result = {}
 
@@ -110,8 +123,23 @@ export const tailwindAnimations = (values) => {
     return result
 }
 
+export const tailwindMask = (values) => {
+    const result = {}
+
+    values.forEach(value => {
+        result[`.mask-${value}`] = {
+            mask: value
+        }
+    })
+
+    return result
+}
+
 export const createPlugin = (userConfig = {}) => {
-    userConfig = lodash.merge(defaultConfig, userConfig)
+    userConfig = {
+        ...defaultConfig,
+        userConfig
+    }
 
     return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
         matchUtilities(
@@ -212,25 +240,40 @@ export const createPlugin = (userConfig = {}) => {
             { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
         )
         addUtilities(tailwindAnimations(userConfig.animations))
+        addUtilities(tailwindPropertyUtilities('mask', userConfig.mask))
         addUtilities([
             Object.entries(theme('spacing')).map(([key, value]) => {
                 return {
-                    [`.${e(`sq-${key}`)}`]: {
-                        width: value,
-                        height: value
+                    [`.${e(`divide-gap-x-${key}`)}`]: {
+                        '& > :where(*:not(:first-child))': {
+                            paddingLeft: value,
+                            marginLeft: value
+                        }
+                    },
+                    [`.${e(`divide-gap-y-${key}`)}`]: {
+                        '& > :where(*:not(:first-child))': {
+                            paddingTop: value,
+                            marginTop: value
+                        }
                     }
                 }
             })
-        ], variants('sq'))
+        ])
     }, {
         corePlugins: {
             preflight: false,
-            container: false,
             textColor: false,
             accentColor: false
         },
         theme: {
             extend: {
+                transitionProperty: {
+                    DEFAULT: 'var(--transition)'
+                },
+                transitionDuration: {
+                    DEFAULT: 'var(--duration)'
+                },
+                transitionTimingFunction: tailwindVariables('ease', userConfig.ease),
                 colors: tailwindColors(userConfig.colors),
                 fontSize: tailwindVariablesFont('text', userConfig.fontSize),
                 fontFamily: tailwindVariables('font', userConfig.fontFamily),

package/src/base/tailwind/gutters.css

@@ -1,343 +0,0 @@
-@layer utilities {
-  :where(.row) {
-    --gx: 0rem;
-    --gy: 0rem;
-
-    display: flex;
-    margin: calc(var(--gy) / -2) calc(var(--gx) / -2) calc(var(--gy) / -2) calc(var(--gx) / -2);
-
-    & > * {
-      padding: calc(var(--gy) / 2) calc(var(--gx) / 2) calc(var(--gy) / 2) calc(var(--gx) / 2);
-    }
-  }
-
-  :where(.row-y) {
-    --gy: 0rem;
-
-    display: flex;
-    margin-top: calc(var(--gy) / -2);
-    margin-bottom: calc(var(--gy) / -2);
-
-    & > * {
-      padding-top: calc(var(--gy) / 2);
-      padding-bottom: calc(var(--gy) / 2);
-    }
-  }
-
-  :where(.row-x) {
-    --gx: 0rem;
-
-    display: flex;
-    margin-left: calc(var(--gx) / -2);
-    margin-right: calc(var(--gx) / -2);
-
-    & > * {
-      padding-left: calc(var(--gx) / 2);
-      padding-right: calc(var(--gx) / 2);
-    }
-  }
-
-  :where(.col) {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .g-0 {
-    --gx: 0rem;
-    --gy: 0rem;
-  }
-
-  .g-1 {
-    --gx: 0.25rem;
-    --gy: 0.25rem;
-  }
-
-  .g-2 {
-    --gx: 0.5rem;
-    --gy: 0.5rem;
-  }
-
-  .g-3 {
-    --gx: 0.75rem;
-    --gy: 0.75rem;
-  }
-
-  .g-4 {
-    --gx: 1rem;
-    --gy: 1rem;
-  }
-
-  .g-5 {
-    --gx: 1.25rem;
-    --gy: 1.25rem;
-  }
-
-  .g-6 {
-    --gx: 1.5rem;
-    --gy: 1.5rem;
-  }
-
-  .g-7 {
-    --gx: 1.75rem;
-    --gy: 1.75rem;
-  }
-
-  .g-8 {
-    --gx: 2rem;
-    --gy: 2rem;
-  }
-
-  .g-9 {
-    --gx: 2.25rem;
-    --gy: 2.25rem;
-  }
-
-  .g-10 {
-    --gx: 2.5rem;
-    --gy: 2.5rem;
-  }
-
-  .g-11 {
-    --gx: 2.75rem;
-    --gy: 2.75rem;
-  }
-
-  .g-12 {
-    --gx: 3rem;
-    --gy: 3rem;
-  }
-
-  .g-14 {
-    --gx: 3.5rem;
-    --gy: 3.5rem;
-  }
-
-  .g-16 {
-    --gx: 4rem;
-    --gy: 4rem;
-  }
-
-  .g-20 {
-    --gx: 5rem;
-    --gy: 5rem;
-  }
-
-  .g-24 {
-    --gx: 6rem;
-    --gy: 6rem;
-  }
-
-  .g-28 {
-    --gx: 7rem;
-    --gy: 7rem;
-  }
-
-  .g-32 {
-    --gx: 8rem;
-    --gy: 8rem;
-  }
-
-  .gx-0 {
-    --gx: 0;
-  }
-
-  .gx-1 {
-    --gx: 0.25rem;
-  }
-
-  .gx-2 {
-    --gx: 0.5rem;
-  }
-
-  .gx-3 {
-    --gx: 0.75rem;
-  }
-
-  .gx-4 {
-    --gx: 1rem;
-  }
-
-  .gx-5 {
-    --gx: 1.25rem;
-  }
-
-  .gx-6 {
-    --gx: 1.5rem;
-  }
-
-  .gx-7 {
-    --gx: 1.75rem;
-  }
-
-  .gx-8 {
-    --gx: 2rem;
-  }
-
-  .gx-9 {
-    --gx: 2.25rem;
-  }
-
-  .gx-10 {
-    --gx: 2.5rem;
-  }
-
-  .gx-11 {
-    --gx: 2.75rem;
-  }
-
-  .gx-12 {
-    --gx: 3rem;
-  }
-
-  .gx-14 {
-    --gx: 3.5rem;
-  }
-
-  .gx-16 {
-    --gx: 4rem;
-  }
-
-  .gx-20 {
-    --gx: 5rem;
-  }
-
-  .gx-24 {
-    --gx: 6rem;
-  }
-
-  .gx-28 {
-    --gx: 7rem;
-  }
-
-  .gx-32 {
-    --gx: 8rem;
-  }
-
-  .gy-0 {
-    --gy: 0;
-  }
-
-  .gy-1 {
-    --gy: 0.25rem;
-  }
-
-  .gy-2 {
-    --gy: 0.5rem;
-  }
-
-  .gy-3 {
-    --gy: 0.75rem;
-  }
-
-  .gy-4 {
-    --gy: 1rem;
-  }
-
-  .gy-5 {
-    --gy: 1.25rem;
-  }
-
-  .gy-6 {
-    --gy: 1.5rem;
-  }
-
-  .gy-7 {
-    --gy: 1.75rem;
-  }
-
-  .gy-8 {
-    --gy: 2rem;
-  }
-
-  .gy-9 {
-    --gy: 2.25rem;
-  }
-
-  .gy-10 {
-    --gy: 2.5rem;
-  }
-
-  .gy-11 {
-    --gy: 2.75rem;
-  }
-
-  .gy-12 {
-    --gy: 3rem;
-  }
-
-  .gy-14 {
-    --gy: 3.5rem;
-  }
-
-  .gy-16 {
-    --gy: 4rem;
-  }
-
-  .gy-20 {
-    --gy: 5rem;
-  }
-
-  .gy-24 {
-    --gy: 6rem;
-  }
-
-  .gy-28 {
-    --gy: 7rem;
-  }
-
-  .gy-32 {
-    --gy: 8rem;
-  }
-
-  .col-auto {
-    width: auto;
-  }
-
-  .col-1 {
-    width: 8.3333%;
-  }
-
-  .col-2 {
-    width: 16.6667%;
-  }
-
-  .col-3 {
-    width: 25%;
-  }
-
-  .col-4 {
-    width: 33.3333%;
-  }
-
-  .col-5 {
-    width: 41.6667%;
-  }
-
-  .col-6 {
-    width: 50%;
-  }
-
-  .col-7 {
-    width: 58.3333%;
-  }
-
-  .col-8 {
-    width: 66.6667%;
-  }
-
-  .col-9 {
-    width: 75%;
-  }
-
-  .col-10 {
-    width: 83.3333%;
-  }
-
-  .col-11 {
-    width: 91.6667%;
-  }
-
-  .col-12 {
-    width: 100%;
-  }
-}

package/src/ui/control/floating-focus.css

@@ -1,12 +0,0 @@
-.ui-control:has(:not([type="color"]) ~ label) {
-  --ui-control-label-focus-transform: translateY(-0.6875rem) scale(0.8);
-  --ui-control-label-focus-opacity: 50%;
-  --ui-control-placeholder-color: transparent;
-
-  & :where(input, textarea, select) {
-    &:is(:focus, :not(:placeholder-shown)) ~ label {
-      transform: var(--ui-control-label-focus-transform);
-      opacity: var(--ui-control-label-focus-opacity);
-    }
-  }
-}

package/src/ui/link/default.css

@@ -1,39 +0,0 @@
-.ui-link {
-  --color-accent: var(--color-current);
-  --ui-link-color: inherit;
-  --ui-link-font-size: 0.875rem;
-  --ui-link-font-weight: var(--font-medium);
-  --ui-link-letter-spacing: 0;
-  --ui-link-hover-color: var(--color-accent);
-  --ui-link-hover-opacity: 0.75;
-  --ui-link-active-opacity: 1;
-  --ui-link-gap: 0.5rem;
-
-  font-size: var(--ui-link-font-size);
-  font-weight: var(--ui-link-font-weight);
-  letter-spacing: var(--ui-link-letter-spacing);
-  transition: var(--transition-opacity), var(--transition-color);
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  gap: var(--ui-link-gap);
-  color: var(--ui-link-color);
-
-  &:is([href], button) {
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        color: var(--ui-link-hover-color);
-        opacity: var(--ui-link-hover-opacity);
-      }
-    }
-
-    &:focus-visible {
-      color: var(--ui-link-hover-color);
-      opacity: var(--ui-link-hover-opacity);
-    }
-
-    &:active {
-      opacity: var(--ui-link-active-opacity);
-    }
-  }
-}

package/src/ui/link/index.css

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

package/src/ui/link/underlined.css

@@ -1,51 +0,0 @@
-.ui-link:where([class*="underlined"]) {
-  --ui-link-hover-opacity: 1;
-  --ui-link-active-opacity: 0.75;
-  --ui-link-underline-color: currentColor;
-  --ui-link-underline-width: 1px;
-  --ui-link-underline-opacity: 0;
-  --ui-link-underline-transform: translateY(-0.125rem);
-
-  &:where(.underlined-visible) {
-    --ui-link-underline-opacity: 1;
-    --ui-link-underline-transform: none;
-    --ui-link-underline-color: var(--color-accent);
-    --ui-link-hover-opacity: 0.75;
-    --ui-link-active-opacity: 1;
-  }
-
-  &::after, & span::after {
-    content: "";
-    border-bottom: var(--ui-link-underline-width) solid var(--ui-link-underline-color);
-    opacity: var(--ui-link-underline-opacity);
-    position: absolute;
-    inset: auto 0 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transform: var(--ui-link-underline-transform);
-  }
-
-  &:has(svg) {
-    &::after {
-      content: normal;
-    }
-  }
-
-  & :where(span) {
-    position: relative;
-    inset: auto;
-  }
-
-  &:is([href], button) {
-    &:hover {
-      @media (hover: hover) and (pointer: fine) {
-        --ui-link-underline-opacity: 1;
-        --ui-link-underline-transform: none;
-      }
-    }
-
-    &:focus-visible {
-      --ui-link-underline-opacity: 1;
-      --ui-link-underline-transform: none;
-    }
-  }
-}

package/src/ui/link.css

@@ -1 +0,0 @@
-@import "link/index.css";