@mekari/pixel3-styled-system 0.1.1 → 0.1.2-dev.1

package/tokens/tokens.d.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
-export type Token = "borders.none" | "borders.sm" | "borders.md" | "borders.lg" | "colors.currentcolor" | "colors.dark" | "colors.white" | "colors.background" | "colors.overlay" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "colors.colorPalette" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25"
+export type Token = "borderWidths.none" | "borderWidths.sm" | "borderWidths.md" | "borderWidths.lg" | "colors.debug" | "colors.currentcolor" | "colors.dark" | "colors.background" | "colors.overlay" | "colors.white" | "colors.vibrantPurple" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "borderWidths.xl" | "borderWidths.2xl" | "colors.dark.100" | "colors.dark.200" | "colors.dark.250" | "colors.dark.300" | "colors.dark.350" | "colors.dark.400" | "colors.dark.500" | "colors.dark.600" | "colors.dark.700" | "colors.dark.800" | "colors.dark.900" | "colors.dark.1000" | "colors.dark.-100" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.1000" | "colors.blue.200" | "colors.blue.300" | "colors.blue.600" | "colors.blue.800" | "colors.blue.900" | "colors.blue.1000" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.1000" | "colors.violet.200" | "colors.violet.300" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.1000" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.1000" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.600" | "colors.red.800" | "colors.red.900" | "colors.red.1000" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.600" | "colors.orange.800" | "colors.orange.900" | "colors.orange.1000" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.1000" | "colors.lime.200" | "colors.lime.300" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.1000" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.600" | "colors.green.800" | "colors.green.900" | "colors.green.1000" | "colors.teal.200" | "colors.teal.300" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.1000" | "spacing.10" | "colors.background.surface" | "colors.background.stage" | "colors.background.overlay" | "colors.background.disabled" | "colors.background.inverse" | "colors.background.shadow" | "colors.background.neutral" | "colors.background.neutral.hovered" | "colors.background.neutral.pressed" | "colors.background.neutral.subtle" | "colors.background.neutral.subtle.hovered" | "colors.background.neutral.subtle.pressed" | "colors.background.neutral.bold" | "colors.background.neutral.bold.hovered" | "colors.background.neutral.bold.pressed" | "colors.background.brand" | "colors.background.brand.hovered" | "colors.background.brand.pressed" | "colors.background.brand.selected" | "colors.background.brand.bold" | "colors.background.brand.bold.hovered" | "colors.background.brand.bold.pressed" | "colors.background.brand.bold.selected" | "colors.background.tertiary" | "colors.background.tertiary.hovered" | "colors.background.tertiary.pressed" | "colors.background.danger" | "colors.background.danger.hovered" | "colors.background.danger.pressed" | "colors.background.danger.bold" | "colors.background.danger.bold.hovered" | "colors.background.danger.bold.pressed" | "colors.background.warning" | "colors.background.warning.hovered" | "colors.background.warning.pressed" | "colors.background.warning.bold" | "colors.background.warning.bold.hovered" | "colors.background.warning.bold.pressed" | "colors.background.success" | "colors.background.success.hovered" | "colors.background.success.pressed" | "colors.background.success.bold" | "colors.background.success.bold.hovered" | "colors.background.success.bold.pressed" | "colors.background.highlight" | "colors.background.highlight.hovered" | "colors.background.highlight.pressed" | "colors.background.highlight.bold" | "colors.background.highlight.bold.hovered" | "colors.background.highlight.bold.pressed" | "colors.nav.parent" | "colors.nav.stack" | "colors.nav.stack.hovered" | "colors.text.default" | "colors.text.default.static" | "colors.text.secondary" | "colors.text.secondary.pressed" | "colors.text.placeholder" | "colors.text.disabled" | "colors.text.inverse" | "colors.text.inverse.static" | "colors.text.selected" | "colors.text.danger" | "colors.text.danger.pressed" | "colors.text.warning" | "colors.text.warning.inverse" | "colors.text.success" | "colors.text.highlight" | "colors.text.information" | "colors.text.link" | "colors.text.link.pressed" | "colors.icon.default" | "colors.icon.disabled" | "colors.icon.inverse" | "colors.icon.inverse.static" | "colors.icon.selected" | "colors.icon.brand" | "colors.icon.danger" | "colors.icon.warning" | "colors.icon.warning.inverse" | "colors.icon.success" | "colors.icon.highlight" | "colors.icon.information" | "colors.icon.subtle" | "colors.icon.logo" | "colors.border.default" | "colors.border.bold" | "colors.border.disabled" | "colors.border.form" | "colors.border.focused" | "colors.border.inverse" | "colors.border.selected" | "colors.border.selected.hovered" | "colors.border.selected.disabled" | "colors.border.brand" | "colors.border.danger" | "colors.border.warning" | "colors.border.success" | "colors.border.highlight" | "colors.border.information" | "colors.chart.cat01" | "colors.chart.cat01.bold" | "colors.chart.cat02" | "colors.chart.cat02.bold" | "colors.chart.cat03" | "colors.chart.cat03.bold" | "colors.chart.cat04" | "colors.chart.cat04.bold" | "colors.chart.cat05" | "colors.chart.cat05.bold" | "colors.chart.cat06" | "colors.chart.cat06.bold" | "colors.chart.cat07" | "colors.chart.cat07.bold" | "colors.chart.cat08" | "colors.chart.cat08.bold" | "spacing.4xs" | "spacing.3xs" | "spacing.2xs" | "spacing.xs" | "spacing.sm" | "spacing.md" | "spacing.lg" | "spacing.xl" | "spacing.2xl" | "spacing.3xl" | "spacing.4xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-10" | "spacing.-4xs" | "spacing.-3xs" | "spacing.-2xs" | "spacing.-xs" | "spacing.-sm" | "spacing.-md" | "spacing.-lg" | "spacing.-xl" | "spacing.-2xl" | "spacing.-3xl" | "spacing.-4xl" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university"
 
-export type ColorPalette = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash"
+export type ColorPalette = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand"
 
-export type BorderToken = "none" | "sm" | "md" | "lg"
+export type BorderWidthToken = "none" | "sm" | "md" | "lg" | "xl" | "2xl"
 
-export type ColorToken = "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "colorPalette" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.25"
+export type ColorToken = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "dark.100" | "dark.200" | "dark.250" | "dark.300" | "dark.350" | "dark.400" | "dark.500" | "dark.600" | "dark.700" | "dark.800" | "dark.900" | "dark.1000" | "dark.-100" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.1000" | "blue.200" | "blue.300" | "blue.600" | "blue.800" | "blue.900" | "blue.1000" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.1000" | "violet.200" | "violet.300" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.1000" | "fuchsia.200" | "fuchsia.300" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.1000" | "red.100" | "red.200" | "red.300" | "red.600" | "red.800" | "red.900" | "red.1000" | "orange.100" | "orange.200" | "orange.300" | "orange.600" | "orange.800" | "orange.900" | "orange.1000" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.1000" | "lime.200" | "lime.300" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.1000" | "green.100" | "green.200" | "green.300" | "green.600" | "green.800" | "green.900" | "green.1000" | "teal.200" | "teal.300" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.1000" | "background.surface" | "background.stage" | "background.overlay" | "background.disabled" | "background.inverse" | "background.shadow" | "background.neutral" | "background.neutral.hovered" | "background.neutral.pressed" | "background.neutral.subtle" | "background.neutral.subtle.hovered" | "background.neutral.subtle.pressed" | "background.neutral.bold" | "background.neutral.bold.hovered" | "background.neutral.bold.pressed" | "background.brand" | "background.brand.hovered" | "background.brand.pressed" | "background.brand.selected" | "background.brand.bold" | "background.brand.bold.hovered" | "background.brand.bold.pressed" | "background.brand.bold.selected" | "background.tertiary" | "background.tertiary.hovered" | "background.tertiary.pressed" | "background.danger" | "background.danger.hovered" | "background.danger.pressed" | "background.danger.bold" | "background.danger.bold.hovered" | "background.danger.bold.pressed" | "background.warning" | "background.warning.hovered" | "background.warning.pressed" | "background.warning.bold" | "background.warning.bold.hovered" | "background.warning.bold.pressed" | "background.success" | "background.success.hovered" | "background.success.pressed" | "background.success.bold" | "background.success.bold.hovered" | "background.success.bold.pressed" | "background.highlight" | "background.highlight.hovered" | "background.highlight.pressed" | "background.highlight.bold" | "background.highlight.bold.hovered" | "background.highlight.bold.pressed" | "nav.parent" | "nav.stack" | "nav.stack.hovered" | "text.default" | "text.default.static" | "text.secondary" | "text.secondary.pressed" | "text.placeholder" | "text.disabled" | "text.inverse" | "text.inverse.static" | "text.selected" | "text.danger" | "text.danger.pressed" | "text.warning" | "text.warning.inverse" | "text.success" | "text.highlight" | "text.information" | "text.link" | "text.link.pressed" | "icon.default" | "icon.disabled" | "icon.inverse" | "icon.inverse.static" | "icon.selected" | "icon.brand" | "icon.danger" | "icon.warning" | "icon.warning.inverse" | "icon.success" | "icon.highlight" | "icon.information" | "icon.subtle" | "icon.logo" | "border.default" | "border.bold" | "border.disabled" | "border.form" | "border.focused" | "border.inverse" | "border.selected" | "border.selected.hovered" | "border.selected.disabled" | "border.brand" | "border.danger" | "border.warning" | "border.success" | "border.highlight" | "border.information" | "chart.cat01" | "chart.cat01.bold" | "chart.cat02" | "chart.cat02.bold" | "chart.cat03" | "chart.cat03.bold" | "chart.cat04" | "chart.cat04.bold" | "chart.cat05" | "chart.cat05.bold" | "chart.cat06" | "chart.cat06.bold" | "chart.cat07" | "chart.cat07.bold" | "chart.cat08" | "chart.cat08.bold" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.25" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university"
 
 export type DurationToken = "slow" | "normal" | "fast"
 
@@ -27,14 +27,14 @@ export type ShadowToken = "xs" | "sm" | "md" | "lg" | "focus" | "xl" | "2xl" | "
 
 export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16" | "20" | "22" | "56" | "65" | "0.25" | "0.5" | "2.5" | "7.5" | "9.5" | "full" | "sm" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | "16" | "20" | "24" | "32" | "40" | "64" | "0.5" | "1.5" | "-0" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-12" | "-16" | "-20" | "-24" | "-32" | "-40" | "-64" | "-0.5" | "-1.5" | "-10" | "-4xs" | "-3xs" | "-2xs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-2xl" | "-3xl" | "-4xl" | "10" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
 
 export type ZIndexToken = "hide" | "base" | "docked" | "sticky" | "overlay" | "modal" | "popover" | "tooltip"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl"
 
 export type Tokens = {
-		borders: BorderToken
+		borderWidths: BorderWidthToken
 		colors: ColorToken
 		durations: DurationToken
 		fonts: FontToken

package/types/conditions.d.ts

@@ -12,7 +12,7 @@ export interface Conditions {
 	"_focusVisible": string
 	/** `&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])` */
 	"_disabled": string
-	/** `&[data-active=true], [data-active]` */
+	/** `&:is(:active, [data-active=true])` */
 	"_active": string
 	/** `&:visited` */
 	"_visited": string
@@ -200,6 +200,8 @@ export interface Conditions {
 	"_placementLeft": string
 	/** `&[data-placement=right]` */
 	"_placementRight": string
+	/** `[data-panda-theme=next] &` */
+	"_nextTheme": string
 	/** `@media screen and (min-width: 22.5rem)` */
 	"sm": string
 	/** `@media screen and (min-width: 22.5rem) and (max-width: 47.9975rem)` */
@@ -236,6 +238,8 @@ export interface Conditions {
 	"mdToXl": string
 	/** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
 	"lgToXl": string
+	/** `& [data-panda-theme=next]` */
+	"_themeNext": string
 	/** The base (=no conditions) styles to apply  */
 	"base": string
 }

package/types/prop-type.d.ts

@@ -57,9 +57,11 @@ export interface UtilityValues {
 	marginInlineStart: "auto" | Tokens["spacing"];
 	spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
 	spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
+	outlineWidth: Tokens["borderWidths"];
 	outlineColor: Tokens["colors"];
-	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	divideX: Tokens["borderWidths"];
+	divideY: Tokens["borderWidths"];
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -110,27 +112,25 @@ export interface UtilityValues {
 	borderEndStartRadius: Tokens["radii"];
 	borderEndEndRadius: Tokens["radii"];
 	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
-	border: Tokens["borders"];
+	borderWidth: Tokens["borderWidths"];
+	borderTopWidth: Tokens["borderWidths"];
+	borderLeftWidth: Tokens["borderWidths"];
+	borderRightWidth: Tokens["borderWidths"];
+	borderBottomWidth: Tokens["borderWidths"];
 	borderColor: Tokens["colors"];
-	borderInline: Tokens["borders"];
+	borderInlineWidth: Tokens["borderWidths"];
 	borderInlineColor: Tokens["colors"];
-	borderBlock: Tokens["borders"];
+	borderBlockWidth: Tokens["borderWidths"];
 	borderBlockColor: Tokens["colors"];
-	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
-	borderInlineStart: Tokens["borders"];
+	borderInlineStartWidth: Tokens["borderWidths"];
 	borderInlineStartColor: Tokens["colors"];
-	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
-	borderInlineEnd: Tokens["borders"];
+	borderInlineEndWidth: Tokens["borderWidths"];
 	borderInlineEndColor: Tokens["colors"];
-	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
-	borderBottom: Tokens["borders"];
 	borderBottomColor: Tokens["colors"];
-	borderBlockEnd: Tokens["borders"];
 	borderBlockEndColor: Tokens["colors"];
-	borderBlockStart: Tokens["borders"];
 	borderBlockStartColor: Tokens["colors"];
 	opacity: Tokens["opacity"];
 	boxShadow: Tokens["shadows"];
@@ -143,7 +143,7 @@ export interface UtilityValues {
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
-	animationName: "fade-in" | "fade-out" | "spin";
+	animationName: "fade-in" | "fade-out" | "spin" | "border-shine";
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
 	rotate: "auto" | "auto-3d" | CssProperties["rotate"];
@@ -192,10 +192,11 @@ export interface UtilityValues {
 	scrollSnapMarginRight: Tokens["spacing"];
 	fill: Tokens["colors"];
 	stroke: Tokens["colors"];
+	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	colorPalette: "currentcolor" | "dark" | "white" | "background" | "overlay" | "brand" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash";
+	colorPalette: "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand";
 	textStyle: "overline" | "body.sm" | "body.md" | "label.sm" | "label.md" | "h3" | "h2" | "h1";
 }
 

package/types/style-props.d.ts

@@ -766,7 +766,7 @@ blockSize?: ConditionalValue<UtilityValues["blockSize"] | CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border
    */
-border?: ConditionalValue<UtilityValues["border"] | CssVars | CssProperties["border"] | AnyString>
+border?: ConditionalValue<CssProperties["border"] | AnyString>
  /**
    * The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
    *
@@ -778,7 +778,7 @@ border?: ConditionalValue<UtilityValues["border"] | CssVars | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block
    */
-borderBlock?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssProperties["borderBlock"] | AnyString>
+borderBlock?: ConditionalValue<CssProperties["borderBlock"] | AnyString>
  /**
    * The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -820,7 +820,7 @@ borderBlockStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStyle"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
    */
-borderBlockWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
+borderBlockWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-block-end`** CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
    *
@@ -832,7 +832,7 @@ borderBlockWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end
    */
-borderBlockEnd?: ConditionalValue<UtilityValues["borderBlockEnd"] | CssVars | CssProperties["borderBlockEnd"] | AnyString>
+borderBlockEnd?: ConditionalValue<CssProperties["borderBlockEnd"] | AnyString>
  /**
    * The **`border-block-end-color`** CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -886,7 +886,7 @@ borderBlockEndWidth?: ConditionalValue<CssProperties["borderBlockEndWidth"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start
    */
-borderBlockStart?: ConditionalValue<UtilityValues["borderBlockStart"] | CssVars | CssProperties["borderBlockStart"] | AnyString>
+borderBlockStart?: ConditionalValue<CssProperties["borderBlockStart"] | AnyString>
  /**
    * The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -940,7 +940,7 @@ borderBlockStartWidth?: ConditionalValue<CssProperties["borderBlockStartWidth"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom
    */
-borderBottom?: ConditionalValue<UtilityValues["borderBottom"] | CssVars | CssProperties["borderBottom"] | AnyString>
+borderBottom?: ConditionalValue<CssProperties["borderBottom"] | AnyString>
  /**
    * The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.
    *
@@ -1012,7 +1012,7 @@ borderBottomStyle?: ConditionalValue<CssVars | CssProperties["borderBottomStyle"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-width
    */
-borderBottomWidth?: ConditionalValue<CssProperties["borderBottomWidth"] | AnyString>
+borderBottomWidth?: ConditionalValue<UtilityValues["borderBottomWidth"] | CssVars | CssProperties["borderBottomWidth"] | AnyString>
  /**
    * The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.
    *
@@ -1161,7 +1161,7 @@ borderImageWidth?: ConditionalValue<CssProperties["borderImageWidth"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline
    */
-borderInline?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperties["borderInline"] | AnyString>
+borderInline?: ConditionalValue<CssProperties["borderInline"] | AnyString>
  /**
    * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
    *
@@ -1173,7 +1173,7 @@ borderInline?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
    */
-borderInlineEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssProperties["borderInlineEnd"] | AnyString>
+borderInlineEnd?: ConditionalValue<CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1215,7 +1215,7 @@ borderInlineStyle?: ConditionalValue<CssVars | CssProperties["borderInlineStyle"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderInlineWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyString>
+borderInlineWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
  /**
    * The **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1260,7 +1260,7 @@ borderInlineEndStyle?: ConditionalValue<CssVars | CssProperties["borderInlineEnd
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
    */
-borderInlineEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] | AnyString>
+borderInlineEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"] | AnyString>
  /**
    * The **`border-inline-start`** CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
    *
@@ -1272,7 +1272,7 @@ borderInlineEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start
    */
-borderInlineStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | CssProperties["borderInlineStart"] | AnyString>
+borderInlineStart?: ConditionalValue<CssProperties["borderInlineStart"] | AnyString>
  /**
    * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1316,7 +1316,7 @@ borderInlineStartStyle?: ConditionalValue<CssVars | CssProperties["borderInlineS
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
-borderInlineStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"] | AnyString>
+borderInlineStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"] | AnyString>
  /**
    * The **`border-left`** shorthand CSS property sets all the properties of an element's left border.
    *
@@ -1328,7 +1328,7 @@ borderInlineStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left
    */
-borderLeft?: ConditionalValue<UtilityValues["borderLeft"] | CssVars | CssProperties["borderLeft"] | AnyString>
+borderLeft?: ConditionalValue<CssProperties["borderLeft"] | AnyString>
  /**
    * The **`border-left-color`** CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties `border-color` or `border-left`.
    *
@@ -1370,7 +1370,7 @@ borderLeftStyle?: ConditionalValue<CssVars | CssProperties["borderLeftStyle"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left-width
    */
-borderLeftWidth?: ConditionalValue<CssProperties["borderLeftWidth"] | AnyString>
+borderLeftWidth?: ConditionalValue<UtilityValues["borderLeftWidth"] | CssVars | CssProperties["borderLeftWidth"] | AnyString>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -1395,7 +1395,7 @@ borderRadius?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right
    */
-borderRight?: ConditionalValue<UtilityValues["borderRight"] | CssVars | CssProperties["borderRight"] | AnyString>
+borderRight?: ConditionalValue<CssProperties["borderRight"] | AnyString>
  /**
    * The **`border-right-color`** CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties `border-color` or `border-right`.
    *
@@ -1437,7 +1437,7 @@ borderRightStyle?: ConditionalValue<CssVars | CssProperties["borderRightStyle"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right-width
    */
-borderRightWidth?: ConditionalValue<CssProperties["borderRightWidth"] | AnyString>
+borderRightWidth?: ConditionalValue<UtilityValues["borderRightWidth"] | CssVars | CssProperties["borderRightWidth"] | AnyString>
  /**
    * The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `<table>`. This property applies only when `border-collapse` is `separate`.
    *
@@ -1503,7 +1503,7 @@ borderStyle?: ConditionalValue<CssProperties["borderStyle"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top
    */
-borderTop?: ConditionalValue<UtilityValues["borderTop"] | CssVars | CssProperties["borderTop"] | AnyString>
+borderTop?: ConditionalValue<CssProperties["borderTop"] | AnyString>
  /**
    * The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`.
    *
@@ -1575,7 +1575,7 @@ borderTopStyle?: ConditionalValue<CssVars | CssProperties["borderTopStyle"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
    */
-borderTopWidth?: ConditionalValue<CssProperties["borderTopWidth"] | AnyString>
+borderTopWidth?: ConditionalValue<UtilityValues["borderTopWidth"] | CssVars | CssProperties["borderTopWidth"] | AnyString>
  /**
    * The **`border-width`** shorthand CSS property sets the width of an element's border.
    *
@@ -1587,7 +1587,7 @@ borderTopWidth?: ConditionalValue<CssProperties["borderTopWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-width
    */
-borderWidth?: ConditionalValue<CssProperties["borderWidth"] | AnyString>
+borderWidth?: ConditionalValue<UtilityValues["borderWidth"] | CssVars | CssProperties["borderWidth"] | AnyString>
  /**
    * The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.
    *
@@ -4111,7 +4111,7 @@ orphans?: ConditionalValue<CssProperties["orphans"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline
    */
-outline?: ConditionalValue<UtilityValues["outline"] | CssVars | CssProperties["outline"] | AnyString>
+outline?: ConditionalValue<CssProperties["outline"] | AnyString>
  /**
    * The **`outline-color`** CSS property sets the color of an element's outline.
    *
@@ -4167,7 +4167,7 @@ outlineStyle?: ConditionalValue<CssVars | CssProperties["outlineStyle"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-outlineWidth?: ConditionalValue<CssProperties["outlineWidth"] | AnyString>
+outlineWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"] | AnyString>
  /**
    * The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
    *
@@ -6195,7 +6195,7 @@ zoom?: ConditionalValue<CssProperties["zoom"] | AnyString>
  strokeLinejoin?: ConditionalValue<CssProperties["strokeLinejoin"] | AnyString>
  strokeMiterlimit?: ConditionalValue<CssProperties["strokeMiterlimit"] | AnyString>
  strokeOpacity?: ConditionalValue<CssProperties["strokeOpacity"] | AnyString>
- strokeWidth?: ConditionalValue<CssProperties["strokeWidth"] | AnyString>
+ strokeWidth?: ConditionalValue<UtilityValues["strokeWidth"] | CssVars | CssProperties["strokeWidth"] | AnyString>
  textAnchor?: ConditionalValue<CssProperties["textAnchor"] | AnyString>
  vectorEffect?: ConditionalValue<CssProperties["vectorEffect"] | AnyString>
  /**
@@ -6672,7 +6672,7 @@ marginStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-ringWidth?: ConditionalValue<CssProperties["outlineWidth"] | AnyString>
+ringWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"] | AnyString>
  /**
    * The **`outline-color`** CSS property sets the color of an element's outline.
    *
@@ -6698,7 +6698,7 @@ ringColor?: ConditionalValue<UtilityValues["outlineColor"] | CssVars | CssProper
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline
    */
-ring?: ConditionalValue<UtilityValues["outline"] | CssVars | CssProperties["outline"] | AnyString>
+ring?: ConditionalValue<CssProperties["outline"] | AnyString>
  /**
    * The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.
    *
@@ -7113,7 +7113,7 @@ roundedEndEnd?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssVars |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline
    */
-borderX?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperties["borderInline"] | AnyString>
+borderX?: ConditionalValue<CssProperties["borderInline"] | AnyString>
  /**
    * The **`border-inline-width`** CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7127,7 +7127,7 @@ borderX?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderXWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyString>
+borderXWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
  /**
    * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7153,7 +7153,7 @@ borderXColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssVars | C
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block
    */
-borderY?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssProperties["borderBlock"] | AnyString>
+borderY?: ConditionalValue<CssProperties["borderBlock"] | AnyString>
  /**
    * The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7167,7 +7167,7 @@ borderY?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
    */
-borderYWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
+borderYWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7193,7 +7193,7 @@ borderYColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start
    */
-borderStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | CssProperties["borderInlineStart"] | AnyString>
+borderStart?: ConditionalValue<CssProperties["borderInlineStart"] | AnyString>
  /**
    * The **`border-inline-start-width`** CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7207,7 +7207,7 @@ borderStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
-borderStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"] | AnyString>
+borderStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"] | AnyString>
  /**
    * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7234,7 +7234,7 @@ borderStartColor?: ConditionalValue<UtilityValues["borderInlineStartColor"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
    */
-borderEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssProperties["borderInlineEnd"] | AnyString>
+borderEnd?: ConditionalValue<CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-end-width`** CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7249,7 +7249,7 @@ borderEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
    */
-borderEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] | AnyString>
+borderEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"] | AnyString>
  /**
    * The **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7336,8 +7336,8 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
  hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | CssVars | AnyString>
  spaceX?: ConditionalValue<UtilityValues["spaceX"] | CssVars | AnyString>
  spaceY?: ConditionalValue<UtilityValues["spaceY"] | CssVars | AnyString>
- divideX?: ConditionalValue<string | number | AnyString>
- divideY?: ConditionalValue<string | number | AnyString>
+ divideX?: ConditionalValue<UtilityValues["divideX"] | CssVars | AnyString>
+ divideY?: ConditionalValue<UtilityValues["divideY"] | CssVars | AnyString>
  divideColor?: ConditionalValue<UtilityValues["divideColor"] | CssVars | AnyString>
  divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | CssVars | AnyString>
  fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | CssVars | AnyString>