@bcc-code/design-tokens 5.0.2 → 5.1.0

package/config/primevue.config.js

@@ -1,987 +0,0 @@
-import { definePreset } from "@primeuix/themes";
-import Aura from "@primeuix/themes/aura";
-
-// Import built Aura tokens with references preserved
-import primitives from "../build/primevue/primitive.js";
-import auraLight from "../build/primevue/semantic-light.js";
-import auraDark from "../build/primevue/semantic-dark.js";
-import componentLight from "../build/primevue/component-light.js";
-import componentDark from "../build/primevue/component-dark.js";
-
-const BCCPreset = definePreset(Aura, {
-  primitive: {
-    // BCC primitives
-    color: primitives.color,
-    space: primitives.space,
-    borderRadius: primitives["border-radius"],
-    iconSize: primitives["icon-size"],
-    borderWidth: primitives["border-width"],
-    fontFamily: primitives["font-family"],
-    fontWeight: primitives["font-weight"],
-    lineHeight: primitives["line-height"],
-    fontSize: primitives["font-size"],
-
-    // Aura primitives
-    border: primitives.border,
-    emerald: primitives.emerald,
-    green: primitives.green,
-    lime: primitives.lime,
-    red: primitives.red,
-    orange: primitives.orange,
-    amber: primitives.amber,
-    yellow: primitives.yellow,
-    teal: primitives.teal,
-    cyan: primitives.cyan,
-    sky: primitives.sky,
-    blue: primitives.blue,
-    indigo: primitives.indigo,
-    violet: primitives.violet,
-    purple: primitives.purple,
-    fuchsia: primitives.fuchsia,
-    pink: primitives.pink,
-    rose: primitives.rose,
-    slate: primitives.slate,
-    gray: primitives.gray,
-    zinc: primitives.zinc,
-    neutral: primitives.neutral,
-    stone: primitives.stone,
-  },
-  semantic: {
-    primary: auraLight.primary,
-    transitionDuration: auraLight.transition.duration,
-    focusRing: {
-      width: auraLight.focus.ring.width,
-      style: auraLight.focus.ring.style,
-      color: auraLight.focus.ring.color,
-      offset: auraLight.focus.ring.offset,
-      shadow: auraLight.focus.ring.shadow,
-    },
-    disabledOpacity: auraLight.disabled.opacity,
-    iconSize: auraLight.icon.size,
-    anchorGutter: auraLight.anchor.gutter,
-    formField: {
-      paddingX: auraLight.form.field.padding.x,
-      paddingY: auraLight.form.field.padding.y,
-      sm: {
-        fontSize: auraLight.form.field.sm.font.size,
-        paddingX: auraLight.form.field.sm.padding.x,
-        paddingY: auraLight.form.field.sm.padding.y,
-      },
-      lg: {
-        fontSize: auraLight.form.field.lg.font.size,
-        paddingX: auraLight.form.field.lg.padding.x,
-        paddingY: auraLight.form.field.lg.padding.y,
-      },
-      borderRadius: auraLight.form.field.border.radius,
-      focusRing: {
-        width: auraLight.form.field.focus.ring.width,
-        style: auraLight.form.field.focus.ring.style,
-        color: auraLight.form.field.focus.ring.color,
-        offset: auraLight.form.field.focus.ring.offset,
-        shadow: auraLight.form.field.focus.ring.shadow,
-      },
-      transitionDuration: auraLight.form.field.transition.duration,
-    },
-    list: {
-      padding: auraLight.list.padding,
-      gap: auraLight.list.gap,
-      header: {
-        padding: auraLight.list.header.padding,
-      },
-      option: {
-        padding: auraLight.list.option.padding,
-        borderRadius: auraLight.list.option.border.radius,
-      },
-      optionGroup: {
-        padding: auraLight.list.option.group.padding,
-        fontWeight: auraLight.list.option.group.font.weight,
-      },
-    },
-    content: {
-      borderRadius: auraLight.content.border.radius,
-    },
-    navigation: {
-      list: {
-        padding: auraLight.navigation.list.padding,
-        gap: auraLight.navigation.list.gap,
-      },
-      item: {
-        padding: auraLight.navigation.item.padding,
-        borderRadius: auraLight.navigation.item.border.radius,
-        gap: auraLight.navigation.item.gap,
-      },
-      submenuLabel: {
-        padding: auraLight.navigation.submenu.label.padding,
-        fontWeight: auraLight.navigation.submenu.label.font.weight,
-      },
-      submenuIcon: {
-        size: auraLight.navigation.submenu.icon.size,
-      },
-    },
-    overlay: {
-      select: {
-        borderRadius: auraLight.overlay.select.border.radius,
-        shadow: auraLight.overlay.select.shadow,
-      },
-      popover: {
-        borderRadius: auraLight.overlay.popover.border.radius,
-        padding: auraLight.overlay.popover.padding,
-        shadow: auraLight.overlay.popover.shadow,
-      },
-      modal: {
-        borderRadius: auraLight.overlay.modal.border.radius,
-        padding: auraLight.overlay.modal.padding,
-        shadow: auraLight.overlay.modal.shadow,
-      },
-      navigation: {
-        shadow: auraLight.overlay.navigation.shadow,
-      },
-    },
-    colorScheme: {
-      light: {
-        surface: auraLight.surface,
-        primary: auraLight.primary,
-        highlight: auraLight.highlight,
-        mask: auraLight.mask,
-        formField: auraLight.form.field,
-        content: auraLight.content,
-        text: auraLight.text,
-        overlay: auraLight.overlay,
-        list: auraLight.list,
-        navigation: auraLight.navigation,
-      },
-      dark: {
-        surface: auraDark.surface,
-        primary: auraDark.primary,
-        highlight: auraDark.highlight,
-        mask: auraDark.mask,
-        formField: auraDark.form.field,
-        content: auraDark.content,
-        text: auraDark.text,
-        overlay: auraDark.overlay,
-        list: auraDark.list,
-        navigation: auraDark.navigation,
-      },
-    },
-  },
-  components: {
-    accordion: {
-      panel: {
-        borderWidth: componentLight.accordion.panel.border.width,
-      },
-      header: {
-        padding: componentLight.accordion.header.padding,
-        fontWeight: componentLight.accordion.header.font.weight,
-        first: {
-          borderWidth: componentLight.accordion.header.first.border.width,
-        },
-        gap: `{space.100}`,
-      },
-      content: {
-        padding: componentLight.accordion.content.padding,
-      },
-    },
-    autocomplete: {
-      dropdown: {
-        width: componentLight.autocomplete.dropdown.width,
-        sm: {
-          width: componentLight.autocomplete.dropdown.sm.width,
-        },
-        lg: {
-          width: componentLight.autocomplete.dropdown.lg.width,
-        },
-      },
-      chip: {
-        borderRadius: componentLight.autocomplete.chip.border.radius,
-      },
-      option: {
-        gap: `{space.100}`,
-      },
-      input: {
-        multiple: {
-          gap: `{space.50}`,
-          minHeight: `{space.500}`,
-        },
-      },
-    },
-    avatar: {
-      width: componentLight.avatar.width,
-      height: componentLight.avatar.height,
-      fontSize: componentLight.avatar.font.size,
-      icon: {
-        size: componentLight.avatar.icon.size,
-      },
-      group: {
-        offset: componentLight.avatar.group.offset,
-      },
-      lg: {
-        width: componentLight.avatar.lg.width,
-        height: componentLight.avatar.lg.height,
-        fontSize: componentLight.avatar.lg.font.size,
-        icon: {
-          size: componentLight.avatar.lg.icon.size,
-        },
-        group: {
-          offset: componentLight.avatar.lg.group.offset,
-        },
-      },
-      xl: {
-        width: componentLight.avatar.xl.width,
-        height: componentLight.avatar.xl.height,
-        fontSize: componentLight.avatar.xl.font.size,
-        icon: {
-          size: componentLight.avatar.xl.icon.size,
-        },
-        group: {
-          offset: componentLight.avatar.xl.group.offset,
-        },
-      },
-    },
-    badge: {
-      root: {
-        padding: componentLight.badge.padding,
-        fontSize: componentLight.badge.font.size,
-        fontWeight: componentLight.badge.font.weight,
-        minWidth: componentLight.badge.min.width,
-        height: componentLight.badge.height,
-      },
-      dot: {
-        size: componentLight.badge.dot.size,
-      },
-      circle: {
-        borderRadius: `{borderRadius.full}`,
-      },
-      sm: {
-        fontSize: componentLight.badge.sm.font.size,
-        minWidth: componentLight.badge.sm.min.width,
-        height: componentLight.badge.sm.height,
-      },
-      lg: {
-        fontSize: componentLight.badge.lg.font.size,
-        minWidth: componentLight.badge.lg.min.width,
-        height: componentLight.badge.lg.height,
-      },
-      xl: {
-        fontSize: componentLight.badge.xl.font.size,
-        minWidth: componentLight.badge.xl.min.width,
-        height: componentLight.badge.xl.height,
-      },
-    },
-    button: {
-      root: {
-        roundedBorderRadius: componentLight.button.rounded.border.radius,
-        gap: componentLight.button.gap,
-        iconOnlyWidth: componentLight.button.icon.only.width,
-        minHeight: "{space.500}",
-        sm: {
-          iconOnlyWidth: componentLight.button.sm.icon.only.width,
-          minHeight: "{space.400}",
-        },
-        lg: {
-          iconOnlyWidth: componentLight.button.lg.icon.only.width,
-          minHeight: "{space.600}",
-        },
-        label: {
-          fontWeight: componentLight.button.label.font.weight,
-        },
-        badgeSize: componentLight.button.badge.size,
-      },
-      colorScheme: {
-        light: {
-          primary: {
-            focusRing: {
-              shadow: componentLight.button.primary.focus.ring.shadow,
-            },
-          },
-          secondary: {
-            focusRing: {
-              shadow: componentLight.button.secondary.focus.ring.shadow,
-            },
-          },
-          info: {
-            focusRing: {
-              shadow: componentLight.button.info.focus.ring.shadow,
-            },
-          },
-          success: {
-            focusRing: {
-              shadow: componentLight.button.success.focus.ring.shadow,
-            },
-          },
-          warn: {
-            focusRing: {
-              shadow: componentLight.button.warn.focus.ring.shadow,
-            },
-          },
-          help: {
-            focusRing: {
-              shadow: componentLight.button.help.focus.ring.shadow,
-            },
-          },
-          danger: {
-            focusRing: {
-              shadow: componentLight.button.danger.focus.ring.shadow,
-            },
-          },
-          contrast: {
-            focusRing: {
-              shadow: componentLight.button.contrast.focus.ring.shadow,
-            },
-          },
-        },
-        dark: {
-          primary: {
-            focusRing: {
-              shadow: componentDark.button.primary.focus.ring.shadow,
-            },
-          },
-          secondary: {
-            focusRing: {
-              shadow: componentDark.button.secondary.focus.ring.shadow,
-            },
-          },
-          info: {
-            focusRing: {
-              shadow: componentDark.button.info.focus.ring.shadow,
-            },
-          },
-          success: {
-            focusRing: {
-              shadow: componentDark.button.success.focus.ring.shadow,
-            },
-          },
-          warn: {
-            focusRing: {
-              shadow: componentDark.button.warn.focus.ring.shadow,
-            },
-          },
-          help: {
-            focusRing: {
-              shadow: componentDark.button.help.focus.ring.shadow,
-            },
-          },
-          danger: {
-            focusRing: {
-              shadow: componentDark.button.danger.focus.ring.shadow,
-            },
-          },
-          contrast: {
-            focusRing: {
-              shadow: componentDark.button.contrast.focus.ring.shadow,
-            },
-          },
-        },
-      },
-    },
-    checkbox: {
-      root: {
-        checkedFocusBorderColor: componentLight.checkbox.checked.focus.border.color,
-        gap: `{space.100}`,
-      },
-      icon: {
-        size: componentLight.checkbox.icon.size,
-        sm: {
-          size: componentLight.checkbox.icon.sm.size,
-        },
-        lg: {
-          size: componentLight.checkbox.icon.lg.size,
-        },
-      },
-    },
-    chip: {
-      root: {
-        borderRadius: componentLight.chip.border.radius,
-      },
-      icon: {
-        size: componentLight.chip.icon.size,
-      },
-      removeIcon: {
-        size: componentLight.chip.remove.icon.size,
-        borderRadius: `{borderRadius.full}`,
-      },
-    },
-    divider: {
-      content: {
-        gap: `{space.100}`,
-      },
-      horizontal: {
-        padding: componentLight.divider.horizontal.padding,
-      },
-      vertical: {
-        padding: componentLight.divider.vertical.padding,
-      },
-    },
-    floatlabel: {
-      on: {
-        gap: `{space.negative.100}`,
-      },
-    },
-    inputgroup: {
-      addon: {
-        borderRadius: componentLight.inputgroup.addon.border.radius,
-        minHeight: `{space.500}`,
-      },
-    },
-    inputtext: {
-      root: {
-        borderRadius: componentLight.inputtext.border.radius,
-        paddingY: componentLight.inputtext.padding.y,
-        gap: `{space.50}`,
-        minHeight: `{space.500}`,
-        sm: {
-          paddingX: componentLight.inputtext.sm.padding.x,
-          paddingY: componentLight.inputtext.sm.padding.y,
-          minHeight: `{space.400}`,
-        },
-        lg: {
-          paddingX: componentLight.inputtext.lg.padding.x,
-          paddingY: componentLight.inputtext.lg.padding.y,
-          minHeight: `{space.600}`,
-        },
-      },
-    },
-    listbox: {
-      list: {
-        padding: componentLight.listbox.list.padding,
-      },
-      optionGroup: {
-        padding: componentLight.listbox.option.group.padding,
-      },
-    },
-    message: {
-      content: {
-        padding: componentLight.message.content.padding,
-        minHeight: `{space.500}`,
-        sm: {
-          padding: componentLight.message.content.sm.padding,
-          minHeight: `{space.400}`,
-        },
-        lg: {
-          padding: componentLight.message.content.lg.padding,
-          minHeight: `{space.600}`,
-        },
-      },
-      text: {
-        fontSize: componentLight.message.text.font.size,
-        lg: {
-          fontSize: componentLight.message.text.lg.font.size,
-        },
-      },
-      icon: {
-        size: componentLight.message.icon.size,
-        sm: {
-          size: componentLight.message.icon.sm.size,
-        },
-        lg: {
-          size: componentLight.message.icon.lg.size,
-        },
-      },
-      closeButton: {
-        width: componentLight.message.close.button.width,
-        height: componentLight.message.close.button.height,
-        borderRadius: componentLight.message.close.button.border.radius,
-      },
-      closeIcon: {
-        size: componentLight.message.close.icon.size,
-        sm: {
-          size: componentLight.message.close.icon.sm.size,
-        },
-        lg: {
-          size: componentLight.message.close.icon.lg.size,
-        },
-      },
-      colorScheme: {
-        light: {
-          info: {
-            background: componentLight.message.info.background,
-            shadow: componentLight.message.info.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.info.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          success: {
-            background: componentLight.message.success.background,
-            shadow: componentLight.message.success.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.success.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          warn: {
-            background: componentLight.message.warn.background,
-            shadow: componentLight.message.warn.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.warn.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          error: {
-            background: componentLight.message.error.background,
-            shadow: componentLight.message.error.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.error.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          secondary: {
-            background: componentLight.message.secondary.background,
-            shadow: componentLight.message.secondary.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.secondary.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          contrast: {
-            background: componentLight.message.contrast.background,
-            shadow: componentLight.message.contrast.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.message.contrast.close.button.focus.ring.shadow,
-              },
-            },
-          },
-        },
-        dark: {
-          info: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.info.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          success: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.success.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          warn: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.warn.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          error: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.error.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          secondary: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.secondary.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          contrast: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.message.contrast.close.button.focus.ring.shadow,
-              },
-            },
-          },
-        },
-      },
-    },
-    multiselect: {
-      root: {
-        minHeight: `{space.500}`,
-        sm: {
-          minHeight: `{space.400}`,
-        },
-        lg: {
-          minHeight: `{space.600}`,
-        },
-      },
-      dropdown: {
-        width: componentLight.multiselect.dropdown.width,
-      },
-      header: {
-        padding: componentLight.multiselect.header.padding,
-      },
-      option: {
-        gap: componentLight.multiselect.option.gap,
-      },
-    },
-    progressbar: {
-      height: componentLight.progressbar.height,
-      label: {
-        fontSize: componentLight.progressbar.label.font.size,
-        fontWeight: componentLight.progressbar.label.font.weight,
-      },
-    },
-    radiobutton: {
-      width: componentLight.radiobutton.width,
-      height: componentLight.radiobutton.height,
-      gap: `{space.100}`,
-      borderRadius: `{borderRadius.full}`,
-      checked: {
-        focus: {
-          borderColor: componentLight.radiobutton.checked.focus.border.color,
-        },
-      },
-      icon: {
-        borderRadius: `{borderRadius.full}`,
-        size: componentLight.radiobutton.icon.size,
-        sm: {
-          borderRadius: `{borderRadius.full}`,
-          size: componentLight.radiobutton.icon.sm.size,
-        },
-        lg: {
-          borderRadius: `{borderRadius.full}`,
-          size: componentLight.radiobutton.icon.lg.size,
-        },
-      },
-      sm: {
-        width: componentLight.radiobutton.sm.width,
-        height: componentLight.radiobutton.sm.height,
-      },
-      lg: {
-        width: componentLight.radiobutton.lg.width,
-        height: componentLight.radiobutton.lg.height,
-      },
-    },
-    select: {
-      root: {
-        minHeight: `{space.500}`,
-        sm: {
-          minHeight: `{space.400}`,
-        },
-        lg: {
-          minHeight: `{space.600}`,
-        },
-      },
-      dropdown: {
-        width: componentLight.select.dropdown.width,
-      },
-      option: {
-        gap: `{space.100}`,
-      },
-    },
-    selectbutton: {
-      border: {
-        radius: componentLight.selectbutton.border.radius,
-      },
-    },
-    tabs: {
-      tablist: {
-        border: {
-          width: componentLight.tabs.tablist.border.width,
-        },
-      },
-      tab: {
-        background: componentLight.tabs.tab.background,
-        border: {
-          width: componentLight.tabs.tab.border.width,
-        },
-        active: {
-          background: componentLight.tabs.tab.active.background,
-        },
-        hover: {
-          background: componentLight.tabs.tab.hover.background,
-        },
-        padding: componentLight.tabs.tab.padding,
-        font: {
-          weight: componentLight.tabs.tab.font.weight,
-        },
-        margin: componentLight.tabs.tab.margin,
-        gap: componentLight.tabs.tab.gap,
-      },
-      tabpanel: {
-        padding: componentLight.tabs.tabpanel.padding,
-      },
-      nav: {
-        button: {
-          width: componentLight.tabs.nav.button.width,
-          shadow: componentLight.tabs.nav.button.shadow,
-        },
-      },
-      active: {
-        bar: {
-          height: componentLight.tabs.active.bar.height,
-        },
-      },
-    },
-    tag: {
-      font: {
-        size: componentLight.tag.font.size,
-        weight: componentLight.tag.font.weight,
-      },
-      padding: componentLight.tag.padding,
-      gap: componentLight.tag.gap,
-      rounded: {
-        border: {
-          radius: componentLight.tag.rounded.border.radius,
-        },
-      },
-      icon: {
-        size: componentLight.tag.icon.size,
-      },
-      sm: {
-        padding: `{space.100} {space.25}`,
-        font: {
-          size: `{font-size.xs}`,
-        },
-        icon: {
-          size: `{icon-size.xs}`,
-        },
-      },
-      lg: {
-        padding: `{space.100} {space.50}`,
-        font: {
-          size: `{font-size.md}`,
-        },
-        icon: {
-          size: `{icon-size.md}`,
-        },
-      },
-    },
-    toast: {
-      width: componentLight.toast.width,
-      border: {
-        width: componentLight.toast.border.width,
-      },
-      icon: {
-        size: componentLight.toast.icon.size,
-      },
-      content: {
-        gap: componentLight.toast.content.gap,
-      },
-      text: {
-        gap: componentLight.toast.text.gap,
-      },
-      summary: {
-        fontWeight: componentLight.toast.summary.font.weight,
-        fontSize: componentLight.toast.summary.font.size,
-      },
-      detail: {
-        fontWeight: componentLight.toast.detail.font.weight,
-        fontSize: componentLight.toast.detail.font.size,
-      },
-      closeButton: {
-        width: componentLight.toast.close.button.width,
-        height: componentLight.toast.close.button.height,
-        borderRadius: componentLight.toast.close.button.border.radius,
-      },
-      closeIcon: {
-        size: componentLight.toast.close.icon.size,
-      },
-      colorScheme: {
-        light: {
-          root: {
-            blur: componentLight.toast.blur,
-          },
-          info: {
-            background: componentLight.toast.info.background,
-            shadow: componentLight.toast.info.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.info.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          success: {
-            background: componentLight.toast.success.background,
-            shadow: componentLight.toast.success.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.success.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          warn: {
-            background: componentLight.toast.warn.background,
-            shadow: componentLight.toast.warn.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.warn.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          error: {
-            background: componentLight.toast.error.background,
-            shadow: componentLight.toast.error.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.error.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          secondary: {
-            background: componentLight.toast.secondary.background,
-            shadow: componentLight.toast.secondary.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.secondary.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          contrast: {
-            background: componentLight.toast.contrast.background,
-            shadow: componentLight.toast.contrast.shadow,
-            closeButton: {
-              focusRing: {
-                shadow: componentLight.toast.contrast.close.button.focus.ring.shadow,
-              },
-            },
-          },
-        },
-        dark: {
-          root: {
-            blur: componentDark.toast.blur,
-          },
-          info: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.info.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          success: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.success.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          warn: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.warn.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          error: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.error.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          secondary: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.secondary.close.button.focus.ring.shadow,
-              },
-            },
-          },
-          contrast: {
-            closeButton: {
-              focusRing: {
-                shadow: componentDark.toast.contrast.close.button.focus.ring.shadow,
-              },
-            },
-          },
-        },
-      },
-    },
-    textarea: {
-      root: {
-        gap: `{space.200}`,
-        minHeight: `{space.300}`,
-      },
-    },
-    togglebutton: {
-      padding: componentLight.togglebutton.padding,
-      minHeight: `{space.500}`,
-      lineHeight: `{line-height.2}`,
-      border: {
-        radius: componentLight.togglebutton.border.radius,
-        color: componentLight.togglebutton.border.color,
-      },
-      gap: componentLight.togglebutton.gap,
-      font: {
-        weight: componentLight.togglebutton.font.weight,
-      },
-      sm: {
-        padding: componentLight.togglebutton.sm.padding,
-        minHeight: `{space.400}`,
-        border: {
-          radius: `{border-radius.sm}`,
-        },
-      },
-      lg: {
-        padding: componentLight.togglebutton.lg.padding,
-        minHeight: `{space.600}`,
-      },
-      content: {
-        padding: componentLight.togglebutton.content.padding,
-        minHeight: `{space.400}`,
-        sm: {
-          padding: componentLight.togglebutton.content.sm.padding,
-          minHeight: `{space.300}`,
-          border: {
-            radius: `{border-radius.sm}`,
-          },
-        },
-        lg: {
-          padding: componentLight.togglebutton.content.lg.padding,
-          minHeight: `{space.500}`,
-        },
-      },
-      colorScheme: {
-        light: {
-          icon: {
-            color: componentLight.togglebutton.icon.color,
-            hoverColor: componentLight.togglebutton.icon.hover.color,
-            checkedColor: componentLight.togglebutton.icon.checked.color,
-          },
-        },
-      },
-    },
-    toggleswitch: {
-      width: componentLight.toggleswitch.width,
-      height: componentLight.toggleswitch.height,
-      border: {
-        radius: componentLight.toggleswitch.border.radius,
-        width: componentLight.toggleswitch.border.width,
-        color: componentLight.toggleswitch.border.color,
-      },
-      gap: componentLight.toggleswitch.gap,
-      hover: {
-        borderColor: componentLight.toggleswitch.hover.border.color,
-      },
-      checked: {
-        borderColor: componentLight.toggleswitch.checked.border.color,
-        hoverBorderColor: componentLight.toggleswitch.checked.hover.border.color,
-      },
-      slideDuration: componentLight.toggleswitch.slide.duration,
-      handle: {
-        borderRadius: componentLight.toggleswitch.handle.border.radius,
-        size: componentLight.toggleswitch.handle.size,
-      },
-      colorScheme: {
-        light: {
-          root: {
-            background: componentLight.toggleswitch.background,
-            hoverBackground: componentLight.toggleswitch.hover.background,
-            checkedBackground: componentLight.toggleswitch.checked.background,
-            checkedHoverBackground: componentLight.toggleswitch.checked.hover.background,
-          },
-          handle: {
-            background: componentLight.toggleswitch.handle.background,
-            hoverBackground: componentLight.toggleswitch.handle.hover.background,
-            checkedBackground: componentLight.toggleswitch.handle.checked.background,
-            checkedHoverBackground: componentLight.toggleswitch.handle.checked.hover.background,
-            color: componentLight.toggleswitch.handle.color,
-            hoverColor: componentLight.toggleswitch.handle.hover.color,
-            checkedColor: componentLight.toggleswitch.handle.checked.color,
-            checkedHoverColor: componentLight.toggleswitch.handle.checked.hover.color,
-          },
-        },
-      },
-    },
-  },
-});
-
-export default BCCPreset;