@bcc-code/component-library-vue 0.7.0 → 0.7.2

package/dist/component-library.js

@@ -1615,15 +1615,15 @@ const Fk = mf(zk, {
   semantic: {
     transitionDuration: "0.2s",
     focusRing: {
-      width: "1px",
+      width: "var(--border-width-1)",
       style: "solid",
       color: "{surface.700}",
-      offset: "2px",
+      offset: "var(--border-width-2)",
       shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
     },
     disabledOpacity: "0.6",
-    iconSize: "1rem",
-    anchorGutter: "0.125rem",
+    iconSize: "var(--space-200)",
+    anchorGutter: "var(--space-25)",
     primary: {
       50: "{emerald.50}",
       100: "{emerald.100}",
@@ -1638,41 +1638,41 @@ const Fk = mf(zk, {
       950: "{emerald.950}"
     },
     formField: {
-      paddingX: "0.75rem",
-      paddingY: "0.25rem",
+      paddingX: "var(--space-150)",
+      paddingY: "var(--space-50)",
       sm: {
-        fontSize: "0.875rem",
-        paddingX: "0.75rem",
-        paddingY: "0.25rem"
+        fontSize: "var(--font-size-sm)",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)"
       },
       lg: {
-        fontSize: "1rem",
-        paddingX: "0.75rem",
-        paddingY: "0.5rem"
+        fontSize: "var(--font-size-md)",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-100)"
       },
       borderRadius: "{border.radius.md}",
       focusRing: {
-        width: "0",
+        width: "var(--border-width-0)",
         style: "none",
         color: "transparent",
-        offset: "0",
+        offset: "var(--border-width-0)",
         shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
       },
       transitionDuration: "{transition.duration}"
     },
     list: {
-      padding: "0.5rem",
-      gap: "0.125rem",
+      padding: "var(--space-100)",
+      gap: "var(--space-25)",
       header: {
-        padding: "0.5rem"
+        padding: "var(--space-100)"
       },
       option: {
-        padding: "0.5rem 0.75rem",
+        padding: "var(--space-100) var(--space-150)",
         borderRadius: "{border.radius.sm}"
       },
       optionGroup: {
-        padding: "0.5rem 0.75rem",
-        fontWeight: "500"
+        padding: "var(--space-100) var(--space-150)",
+        fontWeight: "var(--font-weight-medium)"
       }
     },
     content: {
@@ -1680,20 +1680,20 @@ const Fk = mf(zk, {
     },
     navigation: {
       list: {
-        padding: "0.25rem 0.25rem",
-        gap: "0.125rem"
+        padding: "var(--space-50) var(--space-50)",
+        gap: "var(--space-25)"
       },
       item: {
-        padding: "0.5rem 0.75rem",
+        padding: "var(--space-100) var(--space-150)",
         borderRadius: "{border.radius.sm}",
-        gap: "0.5rem"
+        gap: "var(--space-100)"
       },
       submenuLabel: {
-        padding: "0.5rem 0.75rem",
-        fontWeight: "500"
+        padding: "var(--space-100) var(--space-150)",
+        fontWeight: "var(--font-weight-medium)"
       },
       submenuIcon: {
-        size: "0.75rem"
+        size: "var(--space-150)"
       }
     },
     overlay: {
@@ -1703,12 +1703,12 @@ const Fk = mf(zk, {
       },
       popover: {
         borderRadius: "{border.radius.md}",
-        padding: "1rem 0.75rem",
+        padding: "var(--space-200) var(--space-150)",
         shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
       },
       modal: {
         borderRadius: "{border.radius.xl}",
-        padding: "1rem",
+        padding: "var(--space-200)",
         shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
       },
       navigation: {
@@ -1974,17 +1974,17 @@ const Fk = mf(zk, {
         transitionDuration: "{transition.duration}"
       },
       panel: {
-        borderWidth: "1px",
+        borderWidth: "var(--border-width-1)",
         borderColor: "var(--color-border-default)"
       },
       header: {
         color: "var(--color-text-subtle)",
         hoverColor: "var(--color-text-default)",
         activeColor: "var(--color-text-default)",
-        padding: "1rem",
-        fontWeight: "700",
+        padding: "var(--space-200)",
+        fontWeight: "var(--font-weight-bold)",
         borderRadius: "0",
-        borderWidth: "0",
+        borderWidth: "var(--border-width-0)",
         borderColor: "var(--color-elevation-surface-default)",
         background: "var(--color-elevation-surface-default)",
         hoverBackground: "var(--color-elevation-surface-default)",
@@ -2004,21 +2004,21 @@ const Fk = mf(zk, {
           activeHoverColor: "var(--color-icon-default)"
         },
         first: {
-          topBorderRadius: "0.375rem",
-          borderWidth: "0"
+          topBorderRadius: "var(--border-radius-sm)",
+          borderWidth: "var(--border-width-0)"
         },
         last: {
-          bottomBorderRadius: "0.375rem",
+          bottomBorderRadius: "var(--border-radius-sm)",
           activeBottomBorderRadius: "0"
         },
-        gap: "0.5rem"
+        gap: "var(--space-100)"
       },
       content: {
-        borderWidth: "0",
+        borderWidth: "var(--border-width-0)",
         borderColor: "var(--color-border-default)",
         background: "var(--color-elevation-surface-default)",
         color: "var(--color-text-default)",
-        padding: "1rem 0 1rem 1rem"
+        padding: "var(--space-0) var(--space-200) var(--space-200) var(--space-200)"
       }
     },
     autocomplete: {
@@ -2037,9 +2037,9 @@ const Fk = mf(zk, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "0.375rem",
-        paddingY: "0.125rem",
-        borderRadius: "0.375rem",
+        paddingX: "var(--space-75)",
+        paddingY: "var(--space-25)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
           style: "{form.field.focus.ring.style}",
@@ -2052,13 +2052,13 @@ const Fk = mf(zk, {
       overlay: {
         background: "var(--color-elevation-surface-default)",
         borderColor: "var(--color-border-default)",
-        borderRadius: "0.375rem",
+        borderRadius: "var(--border-radius-sm)",
         color: "{overlay.select.color}",
         shadow: "{overlay.select.shadow}"
       },
       list: {
-        padding: "0.5rem",
-        gap: "0.125rem"
+        padding: "var(--space-100)",
+        gap: "var(--space-25)"
       },
       option: {
         focusBackground: "var(--color-background-accent-gray-subtle-hover)",
@@ -2068,28 +2068,28 @@ const Fk = mf(zk, {
         focusColor: "var(--color-text-default)",
         selectedColor: "var(--color-text-selected)",
         selectedFocusColor: "var(--color-text-selected)",
-        padding: "0.5rem 0.75rem",
-        borderRadius: "0.25rem",
-        gap: "0.5rem"
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
       },
       optionGroup: {
         background: "var(--color-elevation-surface-default)",
         color: "var(--color-text-subtlest)",
         fontWeight: "{list.option.group.font.weight}",
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       dropdown: {
-        width: "2.5rem",
+        width: "var(--space-500)",
         sm: {
-          width: "2rem"
+          width: "var(--space-400)"
         },
         lg: {
-          width: "3rem"
+          width: "var(--space-600)"
         },
         borderColor: "var(--color-border-default)",
         hoverBorderColor: "var(--color-border-default)",
         activeBorderColor: "var(--color-border-default)",
-        borderRadius: "0.375rem",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -2099,10 +2099,10 @@ const Fk = mf(zk, {
         }
       },
       chip: {
-        borderRadius: "0.25rem"
+        borderRadius: "var(--border-radius-xs)"
       },
       emptyMessage: {
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       colorScheme: {
         light: {
@@ -2136,76 +2136,76 @@ const Fk = mf(zk, {
       },
       input: {
         multiple: {
-          gap: "0.25rem",
-          minHeight: "2.5rem"
+          gap: "var(--space-50)",
+          minHeight: "var(--space-500)"
         }
       }
     },
     avatar: {
       root: {
-        width: "2rem",
-        height: "2rem",
-        fontSize: "1rem",
+        width: "var(--space-400)",
+        height: "var(--space-400)",
+        fontSize: "var(--font-size-md)",
         background: "var(--color-background-accent-gray-default)",
         color: "var(--color-text-default)",
-        borderRadius: "0.375rem"
+        borderRadius: "var(--border-radius-sm)"
       },
       icon: {
-        size: "1.25rem"
+        size: "var(--icon-size-sm)"
       },
       group: {
         borderColor: "var(--color-border-inverse)",
-        offset: "-0.75rem"
+        offset: "var(--space-negative-150)"
       },
       lg: {
-        width: "2.5rem",
-        height: "2.5rem",
-        fontSize: "1.25rem",
+        width: "var(--space-500)",
+        height: "var(--space-500)",
+        fontSize: "var(--font-size-lg)",
         icon: {
-          size: "1.5rem"
+          size: "var(--icon-size-md)"
         },
         group: {
-          offset: "-1rem"
+          offset: "var(--space-negative-200)"
         }
       },
       xl: {
-        width: "4rem",
-        height: "4rem",
-        fontSize: "2em",
+        width: "var(--space-800)",
+        height: "var(--space-800)",
+        fontSize: "var(--font-size-2xl)",
         icon: {
-          size: "2rem"
+          size: "var(--icon-size-lg)"
         },
         group: {
-          offset: "-1.5rem"
+          offset: "var(--space-negative-300)"
         }
       }
     },
     badge: {
       root: {
-        borderRadius: "0.375rem",
-        padding: "0.25rem",
-        fontSize: "0.75rem",
-        fontWeight: "700",
-        minWidth: "1.25rem",
-        height: "1.25rem"
+        borderRadius: "var(--border-radius-sm)",
+        padding: "var(--space-0)",
+        fontSize: "var(--font-size-xs)",
+        fontWeight: "var(--font-weight-bold)",
+        minWidth: "var(--space-250)",
+        height: "var(--space-250)"
       },
       dot: {
-        size: "0.5rem"
+        size: "var(--space-100)"
       },
       sm: {
-        fontSize: "0.75rem",
-        minWidth: "1rem",
-        height: "1rem"
+        fontSize: "var(--font-size-xs)",
+        minWidth: "var(--space-200)",
+        height: "var(--space-200)"
       },
       lg: {
-        fontSize: "0.875rem",
-        minWidth: "1.5rem",
-        height: "1.5rem"
+        fontSize: "var(--font-size-sm)",
+        minWidth: "var(--space-300)",
+        height: "var(--space-300)"
       },
       xl: {
-        fontSize: "1rem",
-        minWidth: "2rem",
-        height: "2rem"
+        fontSize: "var(--font-size-md)",
+        minWidth: "var(--space-400)",
+        height: "var(--space-400)"
       },
       colorScheme: {
         light: {
@@ -2275,28 +2275,28 @@ const Fk = mf(zk, {
     },
     button: {
       root: {
-        borderRadius: "0.5rem",
+        borderRadius: "var(--border-radius-md)",
         roundedBorderRadius: "2rem",
-        gap: "0.5rem",
-        paddingX: "1rem",
-        paddingY: "0.375rem",
-        iconOnlyWidth: "2.5rem",
+        gap: "var(--space-100)",
+        paddingX: "var(--space-200)",
+        paddingY: "var(--space-75)",
+        iconOnlyWidth: "var(--space-500)",
         sm: {
-          fontSize: "0.875rem",
-          paddingX: "0.75rem",
-          paddingY: "0.25rem",
-          iconOnlyWidth: "2rem",
-          minHeight: "2rem"
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          iconOnlyWidth: "var(--space-400)",
+          minHeight: "var(--space-400)"
         },
         lg: {
-          fontSize: "1.25rem",
-          paddingX: "1.25rem",
-          paddingY: "0.5rem",
-          iconOnlyWidth: "3rem",
-          minHeight: "3rem"
+          fontSize: "var(--font-size-lg)",
+          paddingX: "var(--space-250)",
+          paddingY: "var(--space-100)",
+          iconOnlyWidth: "var(--space-600)",
+          minHeight: "var(--space-600)"
         },
         label: {
-          fontWeight: "500"
+          fontWeight: "var(--font-weight-medium)"
         },
         raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
         focusRing: {
@@ -2304,9 +2304,9 @@ const Fk = mf(zk, {
           style: "{focus.ring.style}",
           offset: "{focus.ring.offset}"
         },
-        badgeSize: "1rem",
+        badgeSize: "var(--space-200)",
         transitionDuration: "{form.field.transition.duration}",
-        minHeight: "2.5rem"
+        minHeight: "var(--space-500)"
       },
       colorScheme: {
         light: {
@@ -2777,9 +2777,9 @@ const Fk = mf(zk, {
     },
     checkbox: {
       root: {
-        borderRadius: "0.25rem",
-        width: "1.25rem",
-        height: "1.25rem",
+        borderRadius: "var(--border-radius-xs)",
+        width: "var(--space-250)",
+        height: "var(--space-250)",
         background: "var(--color-elevation-surface-default)",
         checkedBackground: "var(--color-background-brand-bolder-default)",
         checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
@@ -2803,46 +2803,46 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          width: "1rem",
-          height: "1rem"
+          width: "var(--space-200)",
+          height: "var(--space-200)"
         },
         lg: {
-          width: "1.5rem",
-          height: "1.5rem"
+          width: "var(--space-300)",
+          height: "var(--space-300)"
         },
-        gap: "0.5rem"
+        gap: "var(--space-100)"
       },
       icon: {
-        size: "1rem",
+        size: "var(--icon-size-xs)",
         color: "var(--color-icon-inverse)",
         checkedColor: "var(--color-icon-inverse)",
         checkedHoverColor: "var(--color-icon-inverse)",
         disabledColor: "var(--color-icon-disabled)",
         sm: {
-          size: "1rem"
+          size: "var(--icon-size-xs)"
         },
         lg: {
-          size: "1.25rem"
+          size: "var(--icon-size-sm)"
         }
       }
     },
     chip: {
       root: {
-        borderRadius: "0.5rem",
-        paddingX: "0.75rem",
-        paddingY: "0.5rem",
-        gap: "0.5rem",
+        borderRadius: "var(--border-radius-md)",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-100)",
+        gap: "var(--space-100)",
         transitionDuration: "{transition.duration}"
       },
       image: {
-        width: "2rem",
-        height: "2rem"
+        width: "var(--space-400)",
+        height: "var(--space-400)"
       },
       icon: {
-        size: "1.25rem"
+        size: "var(--space-250)"
       },
       removeIcon: {
-        size: "1.25rem",
+        size: "var(--space-250)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -2886,20 +2886,20 @@ const Fk = mf(zk, {
       content: {
         background: "transparent",
         color: "var(--color-text-default)",
-        gap: "0.5rem"
+        gap: "var(--space-100)"
       },
       horizontal: {
-        margin: "1rem 0",
-        padding: "0.5rem",
+        margin: "var(--space-200) 0",
+        padding: "var(--space-100)",
         content: {
-          padding: "0 0.5rem"
+          padding: "0 var(--space-100)"
         }
       },
       vertical: {
-        margin: "0 1rem",
-        padding: "0.5rem",
+        margin: "0 var(--space-200)",
+        padding: "var(--space-100)",
         content: {
-          padding: "0.5rem 0"
+          padding: "var(--space-100) 0"
         }
       }
     },
@@ -2908,10 +2908,10 @@ const Fk = mf(zk, {
         background: "var(--color-elevation-surface-default)",
         borderColor: "var(--color-border-input)",
         color: "var(--color-text-subtle)",
-        borderRadius: "0.375rem",
-        padding: "0.5rem",
-        minWidth: "2.5rem",
-        minHeight: "2.5rem"
+        borderRadius: "var(--border-radius-sm)",
+        padding: "var(--space-100)",
+        minWidth: "var(--space-500)",
+        minHeight: "var(--space-500)"
       }
     },
     inputtext: {
@@ -2930,9 +2930,9 @@ const Fk = mf(zk, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "0.75rem",
-        paddingY: "0.25rem",
-        borderRadius: "0.375rem",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
           style: "{form.field.focus.ring.style}",
@@ -2942,19 +2942,19 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          fontSize: "0.875rem",
-          paddingX: "0.75rem",
-          paddingY: "0.125rem",
-          minHeight: "2rem"
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-25)",
+          minHeight: "var(--space-400)"
         },
         lg: {
-          fontSize: "1.25rem",
-          paddingX: "0.75rem",
-          paddingY: "0.5rem",
-          minHeight: "3rem"
+          fontSize: "var(--font-size-lg)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
         },
-        gap: "0.25rem",
-        minHeight: "2.5rem"
+        gap: "var(--space-50)",
+        minHeight: "var(--space-500)"
       }
     },
     listbox: {
@@ -2966,14 +2966,14 @@ const Fk = mf(zk, {
         color: "var(--color-elevation-surface-default)",
         disabledColor: "var(--color-background-accent-gray-default)",
         shadow: "{form.field.shadow}",
-        borderRadius: "0.375rem",
+        borderRadius: "var(--border-radius-sm)",
         transitionDuration: "{form.field.transition.duration}"
       },
       list: {
-        padding: "0.5rem",
-        gap: "0.125rem",
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
         header: {
-          padding: "0.5rem"
+          padding: "var(--space-100)"
         }
       },
       option: {
@@ -2984,22 +2984,22 @@ const Fk = mf(zk, {
         focusColor: "var(--color-text-default)",
         selectedColor: "var(--color-text-selected)",
         selectedFocusColor: "var(--color-text-selected)",
-        padding: "0.5rem 0.75rem",
-        borderRadius: "0.25rem"
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)"
       },
       optionGroup: {
         background: "var(--color-elevation-surface-default)",
         color: "var(--color-text-subtlest)",
         fontWeight: "{list.option.group.font.weight}",
-        padding: "0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       checkmark: {
         color: "var(--color-icon-subtle)",
-        gutterStart: "-0.375rem",
-        gutterEnd: "0.375rem"
+        gutterStart: "var(--space-negative-75)",
+        gutterEnd: "var(--space-75)"
       },
       emptyMessage: {
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       colorScheme: {
         light: {
@@ -3016,46 +3016,44 @@ const Fk = mf(zk, {
     },
     message: {
       root: {
-        borderRadius: "0.375rem",
-        borderWidth: "1px",
+        borderRadius: "var(--border-radius-sm)",
+        borderWidth: "var(--border-width-1)",
         transitionDuration: "{transition.duration}"
       },
       content: {
-        padding: "0.375rem 0.75rem",
-        gap: "0.5rem",
+        padding: "var(--space-75) var(--space-150)",
+        gap: "var(--space-100)",
         sm: {
-          padding: "0.125rem 0.5rem",
-          minHeight: "2rem"
+          padding: "var(--space-25) var(--space-100)"
         },
         lg: {
-          padding: "0.5rem 1rem",
-          minHeight: "3rem"
-        },
-        minHeight: "2.5rem"
+          padding: "var(--space-100) var(--space-200)"
+        }
       },
       text: {
-        fontSize: "0.875rem",
-        fontWeight: "500",
+        fontSize: "var(--font-size-sm)",
+        fontWeight: "var(--font-weight-medium)",
         sm: {
-          fontSize: "0.875rem"
+          fontSize: "var(--font-size-sm)"
         },
         lg: {
-          fontSize: "1rem"
-        }
+          fontSize: "var(--font-size-md)"
+        },
+        lineHeight: "var(--line-height-4)"
       },
       icon: {
-        size: "1.25rem",
+        size: "var(--space-250)",
         sm: {
-          size: "1.25rem"
+          size: "var(--space-250)"
         },
         lg: {
-          size: "1.25rem"
+          size: "var(--space-250)"
         }
       },
       closeButton: {
-        width: "1.5rem",
-        height: "1.5rem",
-        borderRadius: "0.75rem",
+        width: "var(--space-300)",
+        height: "var(--space-300)",
+        borderRadius: "var(--border-radius-lg)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3063,17 +3061,17 @@ const Fk = mf(zk, {
         }
       },
       closeIcon: {
-        size: "1.25rem",
+        size: "var(--space-250)",
         sm: {
-          size: "0.75rem"
+          size: "var(--space-150)"
         },
         lg: {
-          size: "1rem"
+          size: "var(--space-200)"
         }
       },
       simple: {
         content: {
-          padding: "0rem"
+          padding: "var(--space-0)"
         }
       },
       colorScheme: {
@@ -3339,9 +3337,9 @@ const Fk = mf(zk, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "0.75rem",
-        paddingY: "0.25rem",
-        borderRadius: "0.375rem",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
           style: "{form.field.focus.ring.style}",
@@ -3351,35 +3349,35 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          fontSize: "0.875rem",
-          paddingX: "0.75rem",
-          paddingY: "0.25rem",
-          minHeight: "2rem"
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          minHeight: "var(--space-400)"
         },
         lg: {
-          fontSize: "1rem",
-          paddingX: "0.75rem",
-          paddingY: "0.5rem",
-          minHeight: "3rem"
+          fontSize: "var(--font-size-md)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
         },
-        minHeight: "2.5rem"
+        minHeight: "var(--space-500)"
       },
       dropdown: {
-        width: "2.5rem",
+        width: "var(--space-500)",
         color: "var(--color-icon-subtlest)"
       },
       overlay: {
         background: "var(--color-elevation-surface-default)",
         borderColor: "var(--color-border-default)",
-        borderRadius: "0.375rem",
+        borderRadius: "var(--border-radius-sm)",
         color: "{overlay.select.color}",
         shadow: "{overlay.select.shadow}"
       },
       list: {
-        padding: "0.5rem",
-        gap: "0.125rem",
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
         header: {
-          padding: "0.5rem"
+          padding: "var(--space-100)"
         }
       },
       option: {
@@ -3390,45 +3388,45 @@ const Fk = mf(zk, {
         focusColor: "var(--color-text-default)",
         selectedColor: "var(--color-text-selected)",
         selectedFocusColor: "var(--color-text-selected)",
-        padding: "0.5rem 0.75rem",
-        borderRadius: "0.25rem",
-        gap: "0.5rem"
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
       },
       optionGroup: {
         background: "var(--color-elevation-surface-default)",
         color: "var(--color-text-subtlest)",
         fontWeight: "{list.option.group.font.weight}",
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       chip: {
-        borderRadius: "0.25rem"
+        borderRadius: "var(--border-radius-xs)"
       },
       clearIcon: {
         color: "var(--color-icon-subtlest)"
       },
       emptyMessage: {
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       }
     },
     progressbar: {
       root: {
         background: "var(--color-background-accent-gray-default)",
-        borderRadius: "0.375rem",
-        height: "1.25rem"
+        borderRadius: "var(--border-radius-sm)",
+        height: "var(--space-250)"
       },
       value: {
         background: "var(--color-background-brand-bolder-default)"
       },
       label: {
         color: "var(--color-text-inverse)",
-        fontSize: "0.75rem",
-        fontWeight: "500"
+        fontSize: "var(--font-size-xs)",
+        fontWeight: "var(--font-weight-medium)"
       }
     },
     radiobutton: {
       root: {
-        width: "1.25rem",
-        height: "1.25rem",
+        width: "var(--space-250)",
+        height: "var(--space-250)",
         background: "var(--color-elevation-surface-default)",
         checkedBackground: "var(--color-background-brand-bolder-default)",
         checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
@@ -3452,30 +3450,30 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          width: "1rem",
-          height: "1rem"
+          width: "var(--space-200)",
+          height: "var(--space-200)"
         },
         lg: {
-          width: "1.5rem",
-          height: "1.5rem"
+          width: "var(--space-300)",
+          height: "var(--space-300)"
         }
       },
       icon: {
-        size: "0.75rem",
+        size: "var(--space-150)",
         checkedColor: "var(--color-icon-inverse)",
         checkedHoverColor: "var(--color-icon-inverse)",
         disabledColor: "var(--color-icon-disabled)",
         sm: {
-          size: "0.5rem",
+          size: "var(--space-100)",
           borderRadius: "9999px"
         },
         lg: {
-          size: "1rem",
+          size: "var(--space-200)",
           borderRadius: "9999px"
         },
         borderRadius: "9999px"
       },
-      gap: "0.5rem",
+      gap: "var(--space-100)",
       borderRadius: "9999px"
     },
     select: {
@@ -3494,9 +3492,9 @@ const Fk = mf(zk, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "0.75rem",
-        paddingY: "0.25rem",
-        borderRadius: "0.375rem",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
           style: "{form.field.focus.ring.style}",
@@ -3506,35 +3504,35 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          fontSize: "0.875rem",
-          paddingX: "0.75rem",
-          paddingY: "0.25rem",
-          minHeight: "2rem"
+          fontSize: "var(--font-size-sm)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)",
+          minHeight: "var(--space-400)"
         },
         lg: {
-          fontSize: "1rem",
-          paddingX: "0.75rem",
-          paddingY: "0.5rem",
-          minHeight: "3rem"
+          fontSize: "var(--font-size-md)",
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-100)",
+          minHeight: "var(--space-600)"
         },
-        minHeight: "2.5rem"
+        minHeight: "var(--space-500)"
       },
       dropdown: {
-        width: "2.5rem",
+        width: "var(--space-500)",
         color: "var(--color-icon-subtlest)"
       },
       overlay: {
         background: "var(--color-elevation-surface-default)",
         borderColor: "var(--color-border-default)",
-        borderRadius: "0.375rem",
+        borderRadius: "var(--border-radius-sm)",
         color: "{overlay.select.color}",
         shadow: "{overlay.select.shadow}"
       },
       list: {
-        padding: "0.5rem",
-        gap: "0.125rem",
+        padding: "var(--space-100)",
+        gap: "var(--space-25)",
         header: {
-          padding: "0.5rem"
+          padding: "var(--space-100)"
         }
       },
       option: {
@@ -3545,31 +3543,31 @@ const Fk = mf(zk, {
         focusColor: "var(--color-text-default)",
         selectedColor: "var(--color-text-selected)",
         selectedFocusColor: "var(--color-text-selected)",
-        padding: "0.5rem 0.75rem",
-        borderRadius: "0.25rem",
-        gap: "0.5rem"
+        padding: "var(--space-100) var(--space-150)",
+        borderRadius: "var(--border-radius-xs)",
+        gap: "var(--space-100)"
       },
       optionGroup: {
         background: "var(--color-elevation-surface-default)",
         color: "var(--color-text-subtlest)",
         fontWeight: "{list.option.group.font.weight}",
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       },
       clearIcon: {
         color: "var(--color-icon-subtle)"
       },
       checkmark: {
         color: "var(--color-text-subtle)",
-        gutterStart: "-0.375rem",
-        gutterEnd: "0.375rem"
+        gutterStart: "var(--space-negative-75)",
+        gutterEnd: "var(--space-75)"
       },
       emptyMessage: {
-        padding: "0.5rem 0.75rem"
+        padding: "var(--space-100) var(--space-150)"
       }
     },
     selectbutton: {
       root: {
-        borderRadius: "0.5rem"
+        borderRadius: "var(--border-radius-md)"
       },
       colorScheme: {
         light: {
@@ -3604,10 +3602,10 @@ const Fk = mf(zk, {
         color: "var(--color-text-subtlest)",
         hoverColor: "var(--color-text-default)",
         activeColor: "var(--color-text-selected)",
-        padding: "0.75rem",
-        fontWeight: "500",
+        padding: "var(--space-150)",
+        fontWeight: "var(--font-weight-medium)",
         margin: "0 0 -1px 0",
-        gap: "0.5rem",
+        gap: "var(--space-100)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3619,7 +3617,7 @@ const Fk = mf(zk, {
       tabpanel: {
         background: "transparent",
         color: "var(--color-text-default)",
-        padding: "1rem",
+        padding: "var(--space-200)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3632,7 +3630,7 @@ const Fk = mf(zk, {
         background: "{content.background}",
         color: "{text.muted.color}",
         hoverColor: "{text.color}",
-        width: "2.5rem",
+        width: "var(--space-500)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3642,7 +3640,7 @@ const Fk = mf(zk, {
         }
       },
       activeBar: {
-        height: "0.125rem",
+        height: "var(--space-25)",
         bottom: "-1px",
         background: "{primary.color}"
       },
@@ -3661,15 +3659,15 @@ const Fk = mf(zk, {
     },
     tag: {
       root: {
-        fontSize: "0.875rem",
-        fontWeight: "400",
-        padding: "0.5rem 0.25rem",
-        gap: "0.25rem",
-        borderRadius: "0.375rem",
-        roundedBorderRadius: "999px"
+        fontSize: "var(--font-size-sm)",
+        fontWeight: "var(--font-weight-regular)",
+        padding: "var(--space-50) var(--space-100)",
+        gap: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
+        roundedBorderRadius: "var(--border-radius-full)"
       },
       icon: {
-        size: "1rem"
+        size: "var(--icon-size-xs)"
       },
       colorScheme: {
         light: {
@@ -3732,24 +3730,6 @@ const Fk = mf(zk, {
             color: "var(--color-text-inverse)"
           }
         }
-      },
-      sm: {
-        padding: "0.5rem 0.125rem",
-        font: {
-          size: "0.75rem"
-        },
-        icon: {
-          size: "1rem"
-        }
-      },
-      lg: {
-        padding: "0.5rem 0.25rem",
-        font: {
-          size: "1rem"
-        },
-        icon: {
-          size: "1.5rem"
-        }
       }
     },
     textarea: {
@@ -3768,9 +3748,9 @@ const Fk = mf(zk, {
         placeholderColor: "var(--color-text-subtlest)",
         invalidPlaceholderColor: "var(--color-text-danger)",
         shadow: "{form.field.shadow}",
-        paddingX: "0.75rem",
-        paddingY: "0.25rem",
-        borderRadius: "0.375rem",
+        paddingX: "var(--space-150)",
+        paddingY: "var(--space-50)",
+        borderRadius: "var(--border-radius-sm)",
         focusRing: {
           width: "{form.field.focus.ring.width}",
           style: "{form.field.focus.ring.style}",
@@ -3781,47 +3761,47 @@ const Fk = mf(zk, {
         transitionDuration: "{form.field.transition.duration}",
         sm: {
           fontSize: "{form.field.sm.font.size}",
-          paddingX: "0.75rem",
-          paddingY: "0.25rem"
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)"
         },
         lg: {
           fontSize: "{form.field.lg.font.size}",
-          paddingX: "0.75rem",
-          paddingY: "0.25rem"
+          paddingX: "var(--space-150)",
+          paddingY: "var(--space-50)"
         },
-        gap: "1rem",
-        minHeight: "1.5rem"
+        gap: "var(--space-200)",
+        minHeight: "var(--space-300)"
       }
     },
     toast: {
       root: {
         width: "25rem",
-        borderRadius: "0.375rem",
-        borderWidth: "1px",
+        borderRadius: "var(--border-radius-sm)",
+        borderWidth: "var(--border-width-1)",
         transitionDuration: "{transition.duration}"
       },
       icon: {
-        size: "1.25rem"
+        size: "var(--space-250)"
       },
       content: {
-        padding: "0.75rem 1rem",
-        gap: "0.5rem"
+        padding: "var(--space-150) var(--space-200)",
+        gap: "var(--space-100)"
       },
       text: {
-        gap: "0.125rem"
+        gap: "var(--space-25)"
       },
       summary: {
-        fontWeight: "500",
-        fontSize: "1rem"
+        fontWeight: "var(--font-weight-medium)",
+        fontSize: "var(--font-size-md)"
       },
       detail: {
-        fontWeight: "500",
-        fontSize: "0.875rem"
+        fontWeight: "var(--font-weight-medium)",
+        fontSize: "var(--font-size-sm)"
       },
       closeButton: {
-        width: "1.5rem",
-        height: "1.5rem",
-        borderRadius: "0.75rem",
+        width: "var(--space-300)",
+        height: "var(--space-300)",
+        borderRadius: "var(--border-radius-lg)",
         focusRing: {
           width: "{focus.ring.width}",
           style: "{focus.ring.style}",
@@ -3829,7 +3809,7 @@ const Fk = mf(zk, {
         }
       },
       closeIcon: {
-        size: "1.25rem"
+        size: "var(--space-250)"
       },
       colorScheme: {
         light: {
@@ -4014,10 +3994,10 @@ const Fk = mf(zk, {
     },
     togglebutton: {
       root: {
-        padding: "0.25rem",
-        borderRadius: "0.5rem",
-        gap: "0.5rem",
-        fontWeight: "500",
+        padding: "var(--space-50)",
+        borderRadius: "var(--border-radius-md)",
+        gap: "var(--space-100)",
+        fontWeight: "var(--font-weight-medium)",
         disabledBackground: "var(--color-background-disabled-default)",
         disabledBorderColor: "var(--color-background-disabled-default)",
         disabledColor: "var(--color-text-disabled)",
@@ -4031,33 +4011,33 @@ const Fk = mf(zk, {
         },
         transitionDuration: "{form.field.transition.duration}",
         sm: {
-          fontSize: "0.875rem",
-          padding: "0.25rem"
+          fontSize: "var(--font-size-sm)",
+          padding: "var(--space-50)"
         },
         lg: {
           fontSize: "{form.field.lg.font.size}",
-          padding: "0.25rem"
+          padding: "var(--space-50)"
         }
       },
       icon: {
         disabledColor: "var(--color-icon-disabled)"
       },
       content: {
-        padding: "0.25rem 0.5rem",
-        borderRadius: "0.375rem",
+        padding: "var(--space-50) var(--space-100)",
+        borderRadius: "var(--border-radius-sm)",
         checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
         sm: {
-          padding: "0.125rem 0.25rem",
-          minHeight: "1.5rem",
+          padding: "var(--space-25) var(--space-50)",
+          minHeight: "var(--space-300)",
           border: {
-            radius: "0.375rem"
+            radius: "var(--border-radius-sm)"
           }
         },
         lg: {
-          padding: "0.375rem 0.75rem",
-          minHeight: "2.5rem"
+          padding: "var(--space-75) var(--space-150)",
+          minHeight: "var(--space-500)"
         },
-        minHeight: "2rem"
+        minHeight: "var(--space-400)"
       },
       colorScheme: {
         light: {
@@ -4101,24 +4081,23 @@ const Fk = mf(zk, {
           }
         }
       },
-      minHeight: "2.5rem",
-      lineHeight: "16px",
+      minHeight: "var(--space-500)",
       sm: {
-        minHeight: "2rem",
+        minHeight: "var(--space-400)",
         border: {
-          radius: "0.375rem"
+          radius: "var(--border-radius-sm)"
         }
       },
       lg: {
-        minHeight: "3rem"
+        minHeight: "var(--space-600)"
       }
     },
     toggleswitch: {
       root: {
-        width: "2.5rem",
-        height: "1.5rem",
-        borderRadius: "2rem",
-        gap: "0.25rem",
+        width: "var(--space-500)",
+        height: "var(--space-300)",
+        borderRadius: "var(--border-radius-3xl)",
+        gap: "var(--space-50)",
         shadow: "{form.field.shadow}",
         focusRing: {
           width: "{focus.ring.width}",
@@ -4127,7 +4106,7 @@ const Fk = mf(zk, {
           offset: "{focus.ring.offset}",
           shadow: "{focus.ring.shadow}"
         },
-        borderWidth: "1px",
+        borderWidth: "var(--border-width-1)",
         borderColor: "transparent",
         hoverBorderColor: "transparent",
         checkedBorderColor: "transparent",
@@ -4137,8 +4116,8 @@ const Fk = mf(zk, {
         slideDuration: "0.2s"
       },
       handle: {
-        borderRadius: "999px",
-        size: "1rem"
+        borderRadius: "var(--border-radius-full)",
+        size: "var(--space-200)"
       },
       colorScheme: {
         light: {
@@ -4185,7 +4164,7 @@ const Fk = mf(zk, {
     },
     floatlabel: {
       on: {
-        gap: "-0.5rem"
+        gap: "var(--space-negative-100)"
       }
     }
   }