winduum 1.2.0 → 2.0.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "1.2.0",
+  "version": "2.0.0-next.1",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -96,9 +96,9 @@
       "default": "./src/components/popover/index.js",
       "types": "./src/components/popover/index.d.ts"
     },
-    "./src/ui/range": {
-      "default": "./src/ui/range/index.js",
-      "types": "./src/ui/range/index.d.ts"
+    "./src/components/range": {
+      "default": "./src/components/range/index.js",
+      "types": "./src/components/range/index.d.ts"
     },
     "./src/utilities/ripple": {
       "default": "./src/utilities/ripple/index.js",

package/plugin/index.cjs

@@ -28,7 +28,9 @@ var DotUtility = {
         height: '0.625rem',
         borderRadius: 'var(--rounded-full)',
         backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
-        flexShrink: '0'
+        flexShrink: '0',
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 };
 
@@ -124,20 +126,24 @@ const textColor = ({ value, corePlugins }, settings) => {
  * @param {[]} colors
  * @param {boolean} colorMix
  * @param {boolean} rgb
- * @returns {[]}
+ * @returns {Object}
  */
 const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
+    const result = {
+        current: 'color-mix(in var(--space), currentcolor calc(<alpha-value> * 100%), transparent)'
+    };
+
     colors.forEach(name => {
         if (rgb) {
-            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
+            result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
         }
 
-        colors[name] = colorMix
+        result[name] = colorMix
             ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
             : `rgb(var(--color-${name}) / <alpha-value>)`;
     });
 
-    return colors
+    return result
 };
 
 /**
@@ -210,7 +216,7 @@ const defaultConfig = {
         'warning', 'error', 'info', 'success', 'light', 'dark',
         'main', 'main-primary', 'main-secondary', 'main-tertiary',
         'body', 'body-primary', 'body-secondary', 'body-tertiary',
-        'primary-foreground', 'accent-foreground', 'current-foreground',
+        'primary-foreground', 'accent-foreground',
         'warning-foreground', 'error-foreground', 'info-foreground', 'success-foreground', 'light-foreground', 'dark-foreground',
         'main-foreground', 'main-primary-foreground', 'main-secondary-foreground', 'main-tertiary-foreground',
         'body-foreground', 'body-primary-foreground', 'body-secondary-foreground', 'body-tertiary-foreground'
@@ -222,7 +228,7 @@ const defaultConfig = {
     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'],
     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'],
+    animations: ['ripple', 'spin', 'move-indeterminate'],
     mask: ['check', 'radio', 'angle-up', 'angle-down'],
     screens: {
         xs: '22.5em',

package/plugin/index.js

@@ -1,6 +1,5 @@
 import plugin from 'tailwindcss/plugin'
 import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
-import FlexUtility from './utilities/flex.js'
 import DotUtility from './utilities/dot.js'
 import divideGap from './utilities/divide-gap.js'
 import { accentColor, textColor } from './utilities/color.js'
@@ -24,7 +23,60 @@ export const defaultConfig = {
     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'],
+    fontSize: [
+        {
+            value: 'xs',
+            initial: '0.75rem'
+        },
+        {
+            value: 'sm',
+            initial: '0.875rem'
+        },
+        {
+            value: 'base',
+            initial: '1rem'
+        },
+        {
+            value: 'lg',
+            initial: '1.125rem'
+        },
+        {
+            value: 'xl',
+            initial: '1.25rem'
+        },
+        {
+            value: '2xl',
+            initial: '1.5rem'
+        },
+        {
+            value: '3xl',
+            initial: '1.875rem'
+        },
+        {
+            value: '4xl',
+            initial: '2.25rem'
+        },
+        {
+            value: '5xl',
+            initial: '3rem'
+        },
+        {
+            value: '6xl',
+            initial: '3.75rem'
+        },
+        {
+            value: '7xl',
+            initial: '4.5rem'
+        },
+        {
+            value: '8xl',
+            initial: '6rem'
+        },
+        {
+            value: '9xl',
+            initial: '8rem'
+        }
+    ],
     spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
     animations: ['ripple', 'spin', 'move-indeterminate'],
@@ -79,7 +131,6 @@ export const createPlugin = (userConfig = {}) => {
         addComponents(tailwindPropertyUtilities('mask', userConfig.mask))
         addComponents(divideGap({ theme, e }))
         addComponents({
-            ...FlexUtility,
             ...DotUtility
         })
     }, {
@@ -91,23 +142,23 @@ export const createPlugin = (userConfig = {}) => {
         theme: {
             extend: {
                 transitionProperty: {
-                    DEFAULT: 'var(--transition)'
+                    DEFAULT: 'var(--default-transition-property)'
                 },
                 transitionDuration: {
-                    DEFAULT: 'var(--duration)'
+                    DEFAULT: 'var(--default-transition-duration)'
                 },
-                transitionTimingFunction: tailwindVariables('ease', userConfig.ease),
+                transitionTimingFunction: tailwindVariables('transition-timing-function', userConfig.ease),
                 colors: tailwindColors(userConfig.colors, settings.colorMix, settings.rgb),
-                fontSize: tailwindVariablesFont('text', userConfig.fontSize),
-                fontFamily: tailwindVariables('font', userConfig.fontFamily),
-                fontWeight: tailwindVariables('font', userConfig.fontWeight),
-                zIndex: tailwindVariables('z', userConfig.zIndex, {
+                fontSize: tailwindVariablesFont('font-size', userConfig.fontSize),
+                fontFamily: tailwindVariables('font-family', userConfig.fontFamily),
+                fontWeight: tailwindVariables('font-weight', userConfig.fontWeight),
+                zIndex: tailwindVariables('z-index', userConfig.zIndex, {
                     0: 0,
                     auto: 'auto'
                 }),
                 spacing: tailwindVariables('spacing', userConfig.spacing),
-                borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
-                    DEFAULT: 'var(--rounded)'
+                borderRadius: tailwindVariables('radius', userConfig.borderRadius, {
+                    DEFAULT: 'var(--radius)'
                 }),
                 screens: userConfig.screens
             }

package/plugin/utilities/common.js

@@ -6,7 +6,7 @@
  */
 export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
     const result = {
-        current: 'color-mix(in var(--space), currentcolor calc(<alpha-value> * 100%), transparent)'
+        current: 'color-mix(in var(--default-color-space), currentcolor calc(<alpha-value> * 100%), transparent)'
     }
 
     colors.forEach(name => {
@@ -15,7 +15,7 @@ export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
         }
 
         result[name] = colorMix
-            ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
+            ? `color-mix(in var(--default-color-space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
             : `rgb(var(--color-${name}) / <alpha-value>)`
     })
 
@@ -43,8 +43,8 @@ export const tailwindVariables = (type, variables = [], values = {}) => {
  * @returns {Object}
  */
 export const tailwindVariablesFont = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = [`var(--${type}-${name})`, `calc(var(--${type}-${name}) + 0.5rem)`]
+    variables.forEach(({ value, initial }) => {
+        values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`]
     })
 
     return values

package/plugin/utilities/dot.js

@@ -1,11 +1,10 @@
 export default {
     '.dot': {
-        '--tw-bg-opacity': '1',
         display: 'inline-flex',
         width: '0.625rem',
         height: '0.625rem',
         borderRadius: 'var(--rounded-full)',
-        backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
+        backgroundColor: 'color-mix(in var(--default-color-space), var(--color-accent) 100%, transparent)',
         flexShrink: '0',
         justifyContent: 'center',
         alignItems: 'center'

package/src/base/config/font.css

@@ -1,11 +1,24 @@
 :root, :host {
-  --font-default: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-primary: var(--font-default);
-  --font-secondary: var(--font-default);
-  --font-bold: 700;
-  --font-semibold: 600;
-  --font-medium: 500;
-  --font-normal: 400;
-  --font-light: 300;
-  --font-thin: 200;
+  --default-font-family: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-primary: var(--default-font-family);
+  --font-family-secondary: var(--default-font-family);
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-thin: 200;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-size-7xl: 4.5rem;
+  --font-size-8xl: 6rem;
+  --font-size-9xl: 8rem;
 }

package/src/base/config/rounded.css

@@ -1,14 +1,14 @@
 :root, :host {
-  --rounded: var(--rounded-xl);
-  --rounded-xs: 0.125rem;
-  --rounded-sm: 0.25rem;
-  --rounded-md: 0.375rem;
-  --rounded-lg: 0.5rem;
-  --rounded-xl: 0.75rem;
-  --rounded-2xl: 1rem;
-  --rounded-3xl: 1.5rem;
-  --rounded-4xl: 2rem;
-  --rounded-5xl: 2.5rem;
-  --rounded-6xl: 3rem;
-  --rounded-full: 9999px;
+  --radius: var(--radius-xl);
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+  --radius-6xl: 3rem;
+  --radius-full: calc(infinity * 1px);
 }

package/src/base/config/transition.css

@@ -1,19 +1,19 @@
 :root, :host {
-  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility;
-  --transition-all: all var(--duration) var(--ease-in-out);
-  --transition-color: color var(--duration) var(--ease-in-out);
-  --transition-background: background var(--duration) var(--ease-in-out);
-  --transition-opacity: opacity var(--duration) var(--ease-in-out);
-  --transition-transform: transform var(--duration) var(--ease-in-out);
-  --transition-border: border-color var(--duration) var(--ease-in-out);
-  --transition-shadow: box-shadow var(--duration) var(--ease-in-out);
-  --duration: 150ms;
-  --ease-linear: linear;
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --default-transition-duration: 150ms;
+  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility;
+  --transition-timing-function-linear: linear;
+  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-all: all var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-color: color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-background: background var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-opacity: opacity var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-transform: transform var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-border: border-color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-shadow: box-shadow var(--default-transition-duration) var(--transition-timing-function-in-out);
 
   @media (prefers-reduced-motion) {
-    --duration: 0;
+    --default-transition-duration: 0;
   }
 }

package/src/base/config/z.css

@@ -1,7 +1,7 @@
 :root, :host {
-  --z-10: 10;
-  --z-20: 20;
-  --z-30: 30;
-  --z-40: 40;
-  --z-50: 50;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
 }

package/src/base/config.css

@@ -2,6 +2,5 @@
 @import "config/mask.css";
 @import "config/rounded.css";
 @import "config/spacing.css";
-@import "config/text.css";
 @import "config/transition.css";
 @import "config/z.css";

package/src/base/defaults.css

@@ -9,7 +9,7 @@
 }
 
 ::selection {
-  color: var(--color-light);
+  color: var(--color-primary-foreground);
   background-color: var(--color-primary);
 }
 
@@ -22,7 +22,7 @@
 :where([type="radio"]:enabled),
 :where(summary:not([aria-disabled="true"])),
 :where([role="button"]:not([aria-disabled="true"])) {
-  cursor: var(--cursor, pointer);
+  cursor: var(--cursor-pointer, pointer);
   user-select: none;
 }
 
@@ -35,31 +35,29 @@
 }
 
 :where(hr) {
-  --tw-border-opacity: 0.15;
-
-  border-block-start: 1px solid color-mix(in var(--space), currentColor calc(var(--tw-border-opacity) * 100%), transparent);
-  border-radius: var(--rounded);
+  background-color: color-mix(in var(--default-color-space), currentColor 100%, transparent);
+  block-size: 1px;
   width: 100%;
 }
 
 :where(code) {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-body-secondary);
-  border-radius: var(--rounded-sm);
+  border-radius: var(--radius-sm);
   color: var(--color-accent);
 }
 
 :where(kbd) {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-body-secondary);
-  border-radius: var(--rounded-sm);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-body-tertiary);
 }
 
 :where(html) {
-  color-scheme: var(--scheme);
-  font-family: var(--font-primary);
-  font-weight: var(--font-normal);
+  color-scheme: var(--default-color-scheme);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-normal);
   block-size: 100%;
   line-height: 1.5;
   text-size-adjust: 100%;

package/src/base/keyframes.css

@@ -20,3 +20,15 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes fade-in {
+  from {
+    opacity: 0
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1
+  }
+}

package/src/base/reset.css

@@ -44,7 +44,8 @@
 :where(tr),
 :where(ul),
 :where(progress),
-:where(meter) {
+:where(meter),
+:where([popover]) {
   all: unset;
   display: revert;
 }
@@ -181,9 +182,3 @@ Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 ::-webkit-details-marker {
   display: none;
 }
-
-/* Fix popover default colors */
-:where([popover]) {
-  background-color: inherit;
-  color: inherit;
-}

package/src/base/theme/dark-rgb.css

@@ -1,5 +1,5 @@
 :root.dark, :host.dark {
-  --scheme: dark;
+  --default-color-scheme: dark;
   --color-main: rgb(var(--color-main-rgb));
   --color-body: rgb(var(--color-body-rgb));
   --color-main-rgb: 255 255 255;

package/src/base/theme/dark.css

@@ -1,5 +1,5 @@
 :root.dark, :host.dark {
-  --scheme: dark;
+  --default-color-scheme: dark;
   --color-main: var(--color-light);
   --color-body: var(--color-dark);
 }

package/src/base/theme/default-rgb.css

@@ -1,6 +1,6 @@
 :root, :host {
-  --space: sRGB;
-  --scheme: light;
+  --default-color-space: sRGB;
+  --default-color-scheme: light;
   --color-current: rgb(var(--color-current-rgb));
   --color-current-foreground: rgb(var(--color-current-foreground-rgb));
   --color-accent: rgb(var(--color-accent-rgb));
@@ -10,13 +10,13 @@
   --color-main: var(--color-main-primary);
   --color-main-foreground: rgb(var(--color-main-foreground-rgb));
   --color-main-primary: rgb(var(--color-main-rgb));
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: var(--color-body-primary);
   --color-body-foreground: rgb(var(--color-body-foreground-rgb));
   --color-body-primary: rgb(var(--color-body-rgb));
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: rgb(var(--color-light-rgb));
   --color-light-foreground: rgb(var(--color-light-foreground-rgb));
   --color-dark: rgb(var(--color-dark-rgb));

package/src/base/theme/default.css

@@ -1,6 +1,6 @@
 :root, :host {
-  --space: sRGB;
-  --scheme: light;
+  --default-color-space: sRGB;
+  --default-color-scheme: light;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-primary: #3b82f6; /* color.blue.500 */
@@ -8,13 +8,13 @@
   --color-main: #171717; /* color.neutral.900 */
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: #fff; /* color.white */
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: #fff; /* color.white */
   --color-light-foreground: var(--color-dark);
   --color-dark: #171717; /* color.neutral.900 */

package/src/components/badge/bordered.css

@@ -0,0 +1,16 @@
+.badge {
+  &:where(.bordered) {
+    --badge-border-color: var(--color-accent);
+    --badge-border-width: 1px;
+    --tw-border-opacity: 1;
+    --tw-border-mix: transparent;
+
+    border: var(--badge-border-width) solid color-mix(in var(--default-color-space), var(--badge-border-color) calc(var(--tw-border-opacity) * 100%), var(--tw-border-mix));
+    padding-inline: calc(var(--badge-px) - var(--badge-border-width));
+  }
+
+  &:is(.bordered) {
+    --badge-color: var(--color-accent);
+    --tw-bg-opacity: 0;
+  }
+}

package/src/components/badge/circle.css

@@ -0,0 +1,5 @@
+.badge:is(.circle) {
+  --badge-px: var(--badge-py);
+  --badge-width: var(--badge-height);
+  --badge-border-radius: var(--radius-full);
+}

package/src/components/badge/default-props.css

@@ -0,0 +1,8 @@
+:root, :host {
+  --badge-font-size: var(--font-size-xs);
+  --badge-height: 1.5rem;
+  --badge-py: 0;
+  --badge-px: 0.5rem;
+  --badge-gap: var(--spacing-xs);
+  --badge-border-radius: var(--radius-lg);
+}

package/src/components/badge/default.css

@@ -0,0 +1,26 @@
+.badge {
+  --badge-bg: var(--color-accent);
+  --badge-color: var(--color-accent-foreground);
+  --tw-bg-opacity: 1;
+  --tw-text-opacity: 1;
+  --tw-bg-mix: transparent;
+  --tw-text-mix: transparent;
+
+  width: var(--badge-width);
+  height: var(--badge-height);
+  padding: var(--badge-py) var(--badge-px);
+  border-radius: var(--badge-border-radius);
+  font-family: var(--badge-font-family);
+  font-weight: var(--badge-font-weight);
+  font-size: var(--badge-font-size);
+  letter-spacing: var(--badge-letter-spacing);
+  background-color: color-mix(in var(--default-color-space), var(--badge-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+  color: color-mix(in var(--default-color-space), var(--badge-color) calc(var(--tw-text-opacity) * 100%), var(--tw-text-mix));
+  gap: var(--badge-gap);
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+}

package/src/components/badge/lg.css

@@ -0,0 +1,3 @@
+.badge:is(.lg) {
+  --badge-height: 1.75rem;
+}

package/src/components/badge/muted.css

@@ -0,0 +1,4 @@
+.badge:is(.muted) {
+  --badge-color: var(--color-accent);
+  --tw-bg-opacity: 0.1;
+}

package/src/components/badge/sm.css

@@ -0,0 +1,4 @@
+.badge:is(.sm) {
+  --badge-height: 1.25rem;
+  --badge-font-size: 0.625rem;
+}

package/src/components/badge/square.css

@@ -0,0 +1,4 @@
+.badge:is(.square) {
+  --badge-px: var(--badge-py);
+  --badge-width: var(--badge-height);
+}

package/src/components/breadcrumb/default-props.css

@@ -1,5 +1,5 @@
 :root, :host {
-  --c-breadcrumb-marker-size: 0.875rem;
-  --c-breadcrumb-marker: var(--mask-chevron-right);
-  --c-breadcrumb-gap: var(--spacing-xs);
+  --breadcrumb-marker-size: 0.875rem;
+  --breadcrumb-marker: var(--mask-chevron-right);
+  --breadcrumb-gap: var(--spacing-xs);
 }

package/src/components/breadcrumb/default.css

@@ -1,4 +1,4 @@
-.c-breadcrumb {
+.breadcrumb {
   > :where(ul, ol) {
     &, > li {
       display: flex;
@@ -8,11 +8,11 @@
     > li {
       &:not(:last-child)::after {
         content: "";
-        mask: var(--c-breadcrumb-marker);
+        mask: var(--breadcrumb-marker);
         background-color: currentColor;
-        margin-inline: var(--c-breadcrumb-gap);
-        width: var(--c-breadcrumb-marker-size);
-        height: var(--c-breadcrumb-marker-size);
+        margin-inline: var(--breadcrumb-gap);
+        width: var(--breadcrumb-marker-size);
+        height: var(--breadcrumb-marker-size);
         flex-shrink: 0;
       }
     }