Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries)
Setup JS const ctMap = new Map ([["Accordion.borderWidths.header.border" , "{borderWidths.default}" ], ["Accordion.radii.default" , "{radii.obj.default}" ], ["Accordion.spacing.content.padding.indent" , "{spacing.padding.content.indent.md}" ], ["Accordion.spacing.content.padding.wide" , "{spacing.padding.none}" ], ["Accordion.spacing.drawer.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Accordion.spacing.drawer.padding.vert.top" , "{spacing.padding.obj.vert.loose}" ], ["Accordion.spacing.drawer.padding.vert.bottom" , "spacing.padding.obj.vert.loose" ], ["Accordion.spacing.header.gap.label-toLeadingSlot" , "{spacing.gap.obj.horz.default}" ], ["Accordion.spacing.header.gap.label-toTrailingSlot" , "{spacing.gap.obj.horz.default}" ], ["Accordion.spacing.header.gap.trailingLabel-toIcon" , "{spacing.gap.obj.horz.default}" ], ["Accordion.spacing.header.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Accordion.spacing.header.padding.vert" , "{spacing.padding.obj.vert.loose}" ], ["Alert.spacing.gap.text-toActions" , "{spacing.gap.obj.vert.default}" ], ["Alert.spacing.gap.text-toLeading" , "{spacing.gap.obj.horz.default}" ], ["Alert.spacing.gap.text-toTrailing" , "{spacing.gap.obj.horz.default}" ], ["Alert.spacing.padding.default" , "{spacing.padding.obj.default}" ], ["Alert.borderWidths.default" , "{borderWidths.default}" ], ["Alert.radii.default" , "{radii.obj.default}" ], ["Avatar.spacing.xs.icon.padding" , "0rem" ], ["Avatar.spacing.sm.icon.padding" , "0rem" ], ["Avatar.spacing.md.icon.padding" , "0rem" ], ["Avatar.spacing.lg.icon.padding" , "0rem" ], ["Avatar.spacing.xl.icon.padding" , "0rem" ], ["Avatar.spacing.xxl.icon.padding" , "0rem" ], ["Avatar.borderWidths.default" , "{borderWidths.default}" ], ["Avatar.radii.default" , "{radii.obj.ellipse}" ], ["Avatar.sizes.xs.icon" , "0.625rem" ], ["Avatar.sizes.xs.size" , "{sizes.obj.xs}" ], ["Avatar.sizes.sm.icon" , "0.875rem" ], ["Avatar.sizes.sm.size" , "{sizes.obj.sm}" ], ["Avatar.sizes.md.icon" , "1.3125rem" ], ["Avatar.sizes.md.size" , "{sizes.obj.md}" ], ["Avatar.sizes.lg.icon" , "1.75rem" ], ["Avatar.sizes.lg.size" , "{sizes.obj.lg}" ], ["Avatar.sizes.xl.icon" , "2.625rem" ], ["Avatar.sizes.xl.size" , "{sizes.obj.xl}" ], ["Avatar.sizes.xxl.icon" , "4.375rem" ], ["Avatar.sizes.xxl.size" , "{sizes.obj.xxl}" ], ["AvatarBadge.borderWidths.sm" , "{borderWidths.thick}" ], ["AvatarBadge.borderWidths.md" , "{borderWidths.thick}" ], ["AvatarBadge.borderWidths.lg" , "{borderWidths.thick}" ], ["AvatarBadge.radii.sm" , "{radii.obj.ellipse}" ], ["AvatarBadge.radii.md" , "{radii.obj.ellipse}" ], ["AvatarBadge.radii.lg" , "{radii.obj.ellipse}" ], ["AvatarBadge.spacing.padding.sm.default" , "{spacing.150}" ], ["AvatarBadge.spacing.padding.sm.bare" , "{spacing.padding.none}" ], ["AvatarBadge.spacing.padding.md.default" , "{spacing.250}" ], ["AvatarBadge.spacing.padding.md.bare" , "{spacing.padding.obj.tightest}" ], ["AvatarBadge.spacing.padding.lg.default" , "{spacing.250}" ], ["AvatarBadge.spacing.padding.lg.bare" , "{spacing.padding.obj.vert.tightest}" ], ["Badge.radii.default" , "{radii.obj.default}" ], ["Badge.spacing.gap.label-toIcon" , "{spacing.gap.obj.horz.tighter}" ], ["Badge.spacing.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Badge.spacing.padding.vert" , "{spacing.padding.obj.horz.tightest}" ], ["Banner.radii.default" , "{radii.none}" ], ["Banner.spacing.gap.content-toClose" , "{spacing.gap.obj.horz.default}" ], ["Banner.spacing.gap.icon-toText" , "{spacing.gap.obj.horz.default}" ], ["Banner.spacing.gap.text-toActions.horz" , "{spacing.gap.obj.horz.default}" ], ["Banner.spacing.gap.text-toActions.vert" , "{spacing.gap.obj.vert.default}" ], ["Banner.spacing.padding" , "{spacing.padding.obj.default}" ], ["Button.borderWidths.default" , "{borderWidths.default}" ], ["Button.borderWidths.selected" , "{borderWidths.selected}" ], ["Button.radii.sm" , "{radii.action.default}" ], ["Button.radii.md" , "{radii.action.default}" ], ["Button.radii.lg" , "{radii.action.default}" ], ["Button.spacing.sm.gap.label-toIcon" , "{spacing.gap.obj.horz.tight}" ], ["Button.spacing.sm.padding.bare.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.sm.padding.bare.horz-narrow" , "{spacing.padding.obj.horz.tighter}" ], ["Button.spacing.sm.padding.bare.horz-narrowest" , "{spacing.padding.none}" ], ["Button.spacing.sm.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.sm.padding.vert" , "{spacing.padding.obj.vert.loose}" ], ["Button.spacing.md.gap.label-toIcon" , "{spacing.gap.obj.horz.tight}" ], ["Button.spacing.md.padding.bare.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.md.padding.bare.horz-narrow" , "{spacing.padding.obj.horz.tighter}" ], ["Button.spacing.md.padding.bare.horz-narrowest" , "{spacing.padding.none}" ], ["Button.spacing.md.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.md.padding.vert" , "{spacing.padding.obj.vert.loose}" ], ["Button.spacing.lg.gap.label-toIcon" , "{spacing.gap.obj.horz.tight}" ], ["Button.spacing.lg.padding.bare.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.lg.padding.bare.horz-narrow" , "{spacing.padding.obj.horz.tighter}" ], ["Button.spacing.lg.padding.bare.horz-narrowest" , "{spacing.padding.none}" ], ["Button.spacing.lg.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Button.spacing.lg.padding.vert" , "{spacing.padding.obj.vert.loose}" ], ["ButtonGroup.radii.conjoined" , "{radii.none}" ], ["ButtonGroup.spacing.gap.conjoined" , "{spacing.gap.group.conjoined-offsetBorder}" ], ["ButtonGroup.spacing.gap.horz.default" , "{spacing.gap.group.horz.default}" ], ["ButtonGroup.spacing.gap.horz.wide" , "{spacing.gap.group.horz.loose}" ], ["ButtonGroup.spacing.gap.vert.default" , "{spacing.gap.group.vert.default}" ], ["Card.borderWidths.default" , "{borderWidths.default}" ], ["Card.borderWidths.selected" , "{borderWidths.selected}" ], ["Card.borderWidths.decorator.height" , "{sizes.pipe.weight.thicker}" ], ["Card.radii.default" , "{radii.obj.default}" ], ["Checkbox.borderWidths.box" , "{borderWidths.thick}" ], ["Checkbox.sizes.box" , "{sizes.control.sm}" ], ["Checkbox.sizes.frame" , "{sizes.control.sm}" ], ["Checkbox.radii.box" , "{radii.control.square}" ], ["Chip.borderWidths.assist.default" , "{borderWidths.default}" ], ["Chip.borderWidths.assist.selected" , "{borderWidths.selected}" ], ["Chip.borderWidths.filter.default" , "{borderWidths.default}" ], ["Chip.borderWidths.filter.selected" , "{borderWidths.selected}" ], ["Chip.borderWidths.input.default" , "{borderWidths.default}" ], ["Chip.borderWidths.input.selected" , "{borderWidths.selected}" ], ["Chip.sizes.assist.min-height" , "{sizes.obj.sm}" ], ["Chip.sizes.assist.slot" , "{sizes.obj.xs}" ], ["Chip.sizes.filter.min-height" , "{sizes.obj.sm}" ], ["Chip.sizes.filter.slot" , "{sizes.obj.xs}" ], ["Chip.sizes.input.min-height" , "{sizes.obj.sm}" ], ["Chip.sizes.input.slot" , "{sizes.obj.xs}" ], ["Chip.radii.assist.default" , "{radii.action.round}" ], ["Chip.radii.filter.default" , "{radii.action.round}" ], ["Chip.radii.input.default" , "{radii.action.round}" ], ["Chip.spacing.assist.gap.label-toSlotLeading" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.assist.gap.label-toSlotTrailing" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.assist.gap.label-toSlots" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.assist.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Chip.spacing.assist.padding.vert" , "{spacing.padding.obj.vert.tightest}" ], ["Chip.spacing.filter.gap.chip-toMenu" , "{spacing.gap.obj.vert.tight}" ], ["Chip.spacing.filter.gap.label-toSlotLeading" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.filter.gap.label-toSlotTrailing" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.filter.gap.label-toSlots" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.filter.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Chip.spacing.filter.padding.vert" , "{spacing.padding.obj.vert.tightest}" ], ["Chip.spacing.input.gap.label-toSlotLeading" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.input.gap.label-toSlotTrailing" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.input.gap.label-toSlots" , "{spacing.gap.obj.horz.tight}" ], ["Chip.spacing.input.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Chip.spacing.input.padding.vert" , "{spacing.padding.obj.vert.tightest}" ], ["ChipGroup.spacing.gap.between-chips-horz" , "{spacing.gap.group.horz.default}" ], ["ChipGroup.spacing.gap.between-chips-vert" , "{spacing.gap.group.vert.looser}" ], ["ChipGroup.spacing.padding.elevated.offset" , "{spacing.padding.none}" ], ["ChipGroup.spacing.padding.horz" , "{spacing.padding.none}" ], ["ChipGroup.spacing.padding.vert" , "{spacing.padding.none}" ], ["ChipGroup.spacing.padding.screen.mobile.leading" , "{spacing.padding.screen.mobile.horz}" ], ["ChipGroup.spacing.padding.screen.mobile.trailing" , "{spacing.padding.none}" ], ["Divider.sizes.weight.default.emphasis.horizontal" , "{sizes.pipe.weight.thick}" ], ["Divider.sizes.weight.default.horizontal" , "{sizes.pipe.weight.default}" ], ["Divider.sizes.weight.default.vertical" , "{sizes.pipe.weight.default}" ], ["Divider.radii.default" , "{radii.none}" ], ["Fieldset.sizes.helperArea.icon" , "{sizes.icon.sm}" ], ["Fieldset.spacing.gap.controls-toHelperArea" , "{spacing.gap.obj.vert.tight}" ], ["Fieldset.spacing.gap.controls-toLagendArea" , "{spacing.gap.obj.vert.tight}" ], ["Fieldset.spacing.helperArea.gap.text-toIcon" , "{spacing.gap.obj.horz.tighter}" ], ["Fieldset.spacing.labelArea.gap.legend-toOptional" , "{spacing.gap.obj.horz.tightest}" ], ["Fieldset.spacing.labelArea.gap.legend-toRequired" , "{spacing.gap.obj.horz.tightest}" ], ["Fieldset.spacing.labeledControlArea.padding.left" , "{spacing.padding.obj.horz.tighter}" ], ["FormField.sizes.helperArea.icon" , "{sizes.icon.sm}" ], ["FormField.spacing.gap.field-toHelperArea" , "{spacing.gap.obj.vert.tight}" ], ["FormField.spacing.gap.field-toLabelArea" , "{spacing.gap.obj.vert.tight}" ], ["FormField.spacing.helperArea.gap.text-toCharCount" , "{spacing.gap.obj.horz.tighter}" ], ["FormField.spacing.helperArea.gap.text-toIcon" , "{spacing.gap.obj.horz.tighter}" ], ["FormField.spacing.helperArea.padding.horz" , "{spacing.padding.none}" ], ["FormField.spacing.labelArea.gap.label-toOptional" , "{spacing.gap.obj.horz.tightest}" ], ["FormField.spacing.labelArea.gap.label-toRequired" , "{spacing.gap.obj.horz.tightest}" ], ["FormField.spacing.labelArea.padding.horz" , "{spacing.padding.none}" ], ["Gleam.colors.bg.base" , "{colors.bg.feedback.notify.hero-fixed}" ], ["Gleam.colors.text.base" , "{colors.text.onHero.neutral-fixed}" ], ["Gleam.colors.info.bg.base" , "{colors.bg.feedback.info.inverse}" ], ["Gleam.colors.info.text.base" , "{colors.text.onInverse.neutral}" ], ["Gleam.colors.new.bg.base" , "{colors.bg.feedback.success.hero}" ], ["Gleam.colors.new.text.base" , "{colors.text.onHero.neutral}" ], ["Gleam.colors.onInverse.info.bg.base" , "{colors.bg.feedback.info.soft}" ], ["Gleam.colors.onInverse.info.text.base" , "{colors.text.feedback.info.strong}" ], ["Gleam.colors.onInverse.new.bg.base" , "{colors.bg.feedback.success.soft}" ], ["Gleam.colors.onInverse.new.text.base" , "{colors.text.feedback.success.hero}" ], ["Gleam.sizes.height" , "{sizes.obj.xxs}" ], ["Gleam.sizes.width" , "{sizes.obj.xxs}" ], ["Gleam.radii.default" , "{radii.obj.capsule}" ], ["Gleam.spacing.padding.horz" , "{spacing.150}" ], ["IconButton.radii.circle" , "{radii.action.circle}" ], ["IconButton.radii.square" , "{radii.action.default}" ], ["IconButton.spacing.xs" , "{spacing.150}" ], ["IconButton.spacing.sm" , "{spacing.250}" ], ["IconButton.spacing.md" , "{spacing.250}" ], ["IconButton.spacing.lg" , "{spacing.padding.obj.default}" ], ["Input.borderWidths.active" , "{borderWidths.selected}" ], ["Input.borderWidths.default" , "{borderWidths.default}" ], ["Input.sizes.sm.slot" , "{sizes.obj.xs}" ], ["Input.sizes.md.slot" , "{sizes.obj.xs}" ], ["Input.sizes.lg.slot" , "{sizes.obj.xs}" ], ["Input.radii.sm" , "{radii.obj.default}" ], ["Input.radii.md" , "{radii.obj.default}" ], ["Input.radii.lg" , "{radii.obj.default}" ], ["Input.spacing.sm.gap.input-toAdornment" , "{spacing.gap.group.default}" ], ["Input.spacing.sm.gap.input-toLeadingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.sm.gap.input-toTrailingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.sm.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Input.spacing.sm.padding.readOnly-leading" , "{spacing.padding.none}" ], ["Input.spacing.sm.padding.vert" , "{spacing.150}" ], ["Input.spacing.md.gap.input-toAdornment" , "{spacing.gap.group.default}" ], ["Input.spacing.md.gap.input-toLeadingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.md.gap.input-toTrailingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.md.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Input.spacing.md.padding.readOnly-leading" , "{spacing.padding.none}" ], ["Input.spacing.md.padding.vert" , "{spacing.250}" ], ["Input.spacing.lg.gap.input-toAdornment" , "{spacing.gap.group.default}" ], ["Input.spacing.lg.gap.input-toLeadingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.lg.gap.input-toTrailingSlot" , "{spacing.gap.obj.horz.default}" ], ["Input.spacing.lg.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Input.spacing.lg.padding.readOnly-leading" , "{spacing.padding.none}" ], ["Input.spacing.lg.padding.vert" , "{spacing.padding.obj.vert.loose}" ], ["LabeledControl.spacing.gap.control-toLabel" , "{spacing.gap.obj.horz.tight}" ], ["LabeledControl.spacing.padding.vert.default" , "{spacing.250}" ], ["LabeledControl.spacing.padding.vert.largeSwitch" , "0.4375rem" ], ["LabeledInput.radii.default" , "{radii.obj.default}" ], ["LabeledInput.spacing.gap.label-toInputText" , "{spacing.gap.none}" ], ["LabeledInput.spacing.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["LabeledInput.spacing.padding.horz-readOnly" , "{spacing.padding.none}" ], ["LabeledInput.spacing.padding.vert" , "{spacing.150}" ], ["LabeledInput.spacing.padding.vert-readOnly" , "{spacing.padding.obj.vert.loose}" ], ["Link.spacing.gap.icon-toLabel" , "{spacing.gap.obj.horz.tight}" ], ["List.spacing.gap.default" , "{spacing.gap.group.conjoined}" ], ["List.spacing.decorator.padding.horz-ol" , "{spacing.150}" ], ["List.spacing.decorator.padding.horz-ul" , "{spacing.250}" ], ["List.spacing.item.gap.decorator-toText" , "{spacing.gap.none}" ], ["List.spacing.item.padding.horz" , "{spacing.padding.none}" ], ["List.spacing.item.padding.vert" , "{spacing.padding.none}" ], ["Popover.radii.default" , "{radii.obj.default}" ], ["Popover.spacing.padding.horz" , "{spacing.padding.obj.horz.default}" ], ["Popover.spacing.padding.vert-bottom" , "{spacing.padding.obj.vert.loose}" ], ["Popover.spacing.padding.vert-top" , "{spacing.padding.obj.vert.loose}" ], ["Popover.spacing.content.gap.content-toActions" , "{spacing.gap.obj.vert.looser}" ], ["Popover.spacing.content.gap.content-toIllustration" , "{spacing.gap.obj.horz.tight}" ], ["Popover.spacing.content.gap.content-toBody" , "{spacing.gap.obj.vert.tight}" ], ["Popover.spacing.content.padding.default" , "{spacing.padding.obj.default}" ], ["Popover.spacing.header.gap.content-toSlot" , "{spacing.gap.obj.horz.tight}" ], ["Popover.spacing.header.padding.default" , "{spacing.padding.obj.default}" ], ["ProgressMeter.borderWidths.node.active" , "{borderWidths.control.selected}" ], ["ProgressMeter.sizes.node.active" , "{sizes.control.handle.knob.sm}" ], ["ProgressMeter.sizes.node.inactive" , "{sizes.control.indicator.xs}" ], ["ProgressMeter.sizes.track.thickness" , "{sizes.pipe.weight.thickest}" ], ["ProgressMeter.opacity.node.active.focusRing" , "{opacity.stateLayer.focus}" ], ["ProgressMeter.radii.node.default" , "{radii.control.circle}" ], ["ProgressMeter.radii.track.default" , "{radii.control.default}" ], ["ProgressMeter.spacing.horizontal.gap.label-toMeta" , "{spacing.gap.none}" ], ["ProgressMeter.spacing.horizontal.gap.node-toLabel" , "{spacing.gap.obj.vert.loose}" ], ["ProgressMeter.spacing.vertical.gap.label-toMeta" , "{spacing.gap.none}" ], ["ProgressMeter.spacing.vertical.gap.node-toLabel" , "{spacing.gap.obj.vert.loose}" ], ["ShowHide.colors.icon.default.base" , "{colors.icon.action.strong.default}" ], ["ShowHide.colors.icon.hover.base" , "{colors.icon.action.strong.hover}" ], ["ShowHide.colors.icon.pressed.base" , "{colors.icon.action.strong.pressed}" ], ["ShowHide.colors.label.default.base" , "{colors.text.action.strong.default}" ], ["ShowHide.colors.label.hover.base" , "{colors.text.action.strong.hover}" ], ["ShowHide.colors.label.pressed.base" , "{colors.text.action.strong.pressed}" ], ["ShowHide.spacing.gap.label-toIcon" , "{spacing.gap.obj.horz.tight}" ], ["Tag.radii.small.default" , "{radii.obj.default}" ], ["Tag.radii.medium.default" , "{radii.obj.default}" ], ["Tag.spacing.small.gap.label-toIcon" , "{spacing.gap.obj.horz.tighter}" ], ["Tag.spacing.small.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Tag.spacing.small.padding.vert" , "{spacing.padding.obj.vert.tightest}" ], ["Tag.spacing.medium.gap.label-toIcon" , "{spacing.gap.obj.horz.tighter}" ], ["Tag.spacing.medium.padding.horz" , "{spacing.padding.obj.horz.tighter}" ], ["Tag.spacing.medium.padding.vert" , "{spacing.padding.obj.vert.tightest}" ], ["TextButton.spacing.gap.label-toIcon" , "{spacing.gap.obj.horz.tight}" ], ["Toast.spacing.gap.content-toClose" , "{spacing.gap.obj.horz.default}" ], ["Toast.spacing.gap.content-toLeadingSlot" , "{spacing.gap.obj.horz.default}" ], ["Toast.spacing.gap.content-toTrailingSlot" , "{spacing.gap.obj.horz.default}" ], ["Toast.spacing.padding.default" , "{spacing.padding.obj.default}" ], ["Toast.radii.default" , "{radii.obj.default}" ], ["Upsell.borderWidths.card" , "{borderWidths.default}" ], ["Upsell.radii.banner.default" , "{radii.none}" ], ["Upsell.radii.card.default" , "{radii.obj.default}" ], ["Upsell.radii.card.fullWidth" , "{radii.none}" ], ["Upsell.spacing.banner.gap.content-toActions" , "{spacing.gap.none}" ], ["Upsell.spacing.banner.gap.content-toClose" , "{spacing.gap.obj.horz.default}" ], ["Upsell.spacing.banner.gap.content-toFineprint" , "{spacing.gap.obj.vert.tight}" ], ["Upsell.spacing.banner.gap.icon-toContent" , "{spacing.gap.obj.horz.default}" ], ["Upsell.spacing.banner.gap.img-toContent" , "{spacing.gap.obj.vert.default}" ], ["Upsell.spacing.banner.gap.mobile.heading-toMessage" , "{spacing.gap.group.vert.conjoined}" ], ["Upsell.spacing.banner.gap.desktop.content-toActions" , "{spacing.gap.obj.horz.default}" ], ["Upsell.spacing.banner.gap.desktop.content-toMessage" , "{spacing.gap.group.horz.tighter}" ], ["Upsell.spacing.banner.padding.horz" , "{spacing.padding.obj.default}" ], ["Upsell.spacing.banner.padding.vert" , "{spacing.padding.obj.default}" ], ["Upsell.spacing.card.gap.actions-toLegal" , "{spacing.gap.obj.vert.tight}" ], ["Upsell.spacing.card.gap.content-toAction" , "{spacing.gap.obj.vert.default}" ], ["Upsell.spacing.card.gap.content-toClose" , "{spacing.gap.obj.horz.default}" ], ["Upsell.spacing.card.gap.heading-toBody" , "{spacing.gap.group.vert.conjoined}" ], ["Upsell.spacing.card.gap.icon-toContent" , "{spacing.gap.obj.horz.default}" ], ["Upsell.spacing.card.gap.img-toContent" , "{spacing.gap.obj.vert.default}" ], ["Upsell.spacing.card.padding.horz" , "{spacing.padding.obj.default}" ], ["Upsell.spacing.card.padding.vert" , "{spacing.padding.obj.default}" ]])
const ct = (a ) => ctMap.has (a) ? ctMap.get (a) : "panda-plugin-ct_alias-not-found" ;
const obj = {
Accordion : {
borderWidths : { header : { border : { value : '{borderWidths.default}' } } },
radii : { default : { value : '{radii.obj.default}' } },
spacing : {
content : {
padding : {
indent : { value : '{spacing.padding.content.indent.md}' },
wide : { value : '{spacing.padding.none}' },
},
},
drawer : {
padding : {
horz : { value : '{spacing.padding.obj.horz.default}' },
vert : {
top : { value : '{spacing.padding.obj.vert.loose}' },
bottom : { value : 'spacing.padding.obj.vert.loose' },
},
},
},
header : {
gap : {
'label-toLeadingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'label-toTrailingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'trailingLabel-toIcon' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : {
horz : { value : '{spacing.padding.obj.horz.default}' },
vert : { value : '{spacing.padding.obj.vert.loose}' },
},
},
},
},
Alert : {
spacing : {
gap : {
'text-toActions' : { value : '{spacing.gap.obj.vert.default}' },
'text-toLeading' : { value : '{spacing.gap.obj.horz.default}' },
'text-toTrailing' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : { default : { value : '{spacing.padding.obj.default}' } },
},
borderWidths : { default : { value : '{borderWidths.default}' } },
radii : { default : { value : '{radii.obj.default}' } },
},
Avatar : {
spacing : {
xs : { icon : { padding : { value : '0rem' } } },
sm : { icon : { padding : { value : '0rem' } } },
md : { icon : { padding : { value : '0rem' } } },
lg : { icon : { padding : { value : '0rem' } } },
xl : { icon : { padding : { value : '0rem' } } },
xxl : { icon : { padding : { value : '0rem' } } },
},
borderWidths : { default : { value : '{borderWidths.default}' } },
radii : { default : { value : '{radii.obj.ellipse}' } },
sizes : {
xs : { icon : { value : '0.625rem' }, size : { value : '{sizes.obj.xs}' } },
sm : { icon : { value : '0.875rem' }, size : { value : '{sizes.obj.sm}' } },
md : { icon : { value : '1.3125rem' }, size : { value : '{sizes.obj.md}' } },
lg : { icon : { value : '1.75rem' }, size : { value : '{sizes.obj.lg}' } },
xl : { icon : { value : '2.625rem' }, size : { value : '{sizes.obj.xl}' } },
xxl : { icon : { value : '4.375rem' }, size : { value : '{sizes.obj.xxl}' } },
},
},
AvatarBadge : {
borderWidths : {
sm : { value : '{borderWidths.thick}' },
md : { value : '{borderWidths.thick}' },
lg : { value : '{borderWidths.thick}' },
},
radii : {
sm : { value : '{radii.obj.ellipse}' },
md : { value : '{radii.obj.ellipse}' },
lg : { value : '{radii.obj.ellipse}' },
},
spacing : {
padding : {
sm : { default : { value : '{spacing.150}' }, bare : { value : '{spacing.padding.none}' } },
md : {
default : { value : '{spacing.250}' },
bare : { value : '{spacing.padding.obj.tightest}' },
},
lg : {
default : { value : '{spacing.250}' },
bare : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
Badge : {
radii : { default : { value : '{radii.obj.default}' } },
spacing : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tighter}' } },
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.horz.tightest}' },
},
},
},
Banner : {
radii : { default : { value : '{radii.none}' } },
spacing : {
gap : {
'content-toClose' : { value : '{spacing.gap.obj.horz.default}' },
'icon-toText' : { value : '{spacing.gap.obj.horz.default}' },
'text-toActions' : {
horz : { value : '{spacing.gap.obj.horz.default}' },
vert : { value : '{spacing.gap.obj.vert.default}' },
},
},
padding : { value : '{spacing.padding.obj.default}' },
},
},
Button : {
borderWidths : {
default : { value : '{borderWidths.default}' },
selected : { value : '{borderWidths.selected}' },
},
radii : {
sm : { value : '{radii.action.default}' },
md : { value : '{radii.action.default}' },
lg : { value : '{radii.action.default}' },
},
spacing : {
sm : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tight}' } },
padding : {
bare : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'horz-narrow' : { value : '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest' : { value : '{spacing.padding.none}' },
},
horz : { value : '{spacing.padding.obj.horz.default}' },
vert : { value : '{spacing.padding.obj.vert.loose}' },
},
},
md : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tight}' } },
padding : {
bare : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'horz-narrow' : { value : '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest' : { value : '{spacing.padding.none}' },
},
horz : { value : '{spacing.padding.obj.horz.default}' },
vert : { value : '{spacing.padding.obj.vert.loose}' },
},
},
lg : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tight}' } },
padding : {
bare : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'horz-narrow' : { value : '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest' : { value : '{spacing.padding.none}' },
},
horz : { value : '{spacing.padding.obj.horz.default}' },
vert : { value : '{spacing.padding.obj.vert.loose}' },
},
},
},
},
ButtonGroup : {
radii : { conjoined : { value : '{radii.none}' } },
spacing : {
gap : {
conjoined : { value : '{spacing.gap.group.conjoined-offsetBorder}' },
horz : {
default : { value : '{spacing.gap.group.horz.default}' },
wide : { value : '{spacing.gap.group.horz.loose}' },
},
vert : { default : { value : '{spacing.gap.group.vert.default}' } },
},
},
},
Card : {
borderWidths : {
default : { value : '{borderWidths.default}' },
selected : { value : '{borderWidths.selected}' },
decorator : { height : { value : '{sizes.pipe.weight.thicker}' } },
},
radii : { default : { value : '{radii.obj.default}' } },
},
Checkbox : {
borderWidths : { box : { value : '{borderWidths.thick}' } },
sizes : { box : { value : '{sizes.control.sm}' }, frame : { value : '{sizes.control.sm}' } },
radii : { box : { value : '{radii.control.square}' } },
},
Chip : {
borderWidths : {
assist : {
default : { value : '{borderWidths.default}' },
selected : { value : '{borderWidths.selected}' },
},
filter : {
default : { value : '{borderWidths.default}' },
selected : { value : '{borderWidths.selected}' },
},
input : {
default : { value : '{borderWidths.default}' },
selected : { value : '{borderWidths.selected}' },
},
},
sizes : {
assist : { 'min-height' : { value : '{sizes.obj.sm}' }, 'slot' : { value : '{sizes.obj.xs}' } },
filter : { 'min-height' : { value : '{sizes.obj.sm}' }, 'slot' : { value : '{sizes.obj.xs}' } },
input : { 'min-height' : { value : '{sizes.obj.sm}' }, 'slot' : { value : '{sizes.obj.xs}' } },
},
radii : {
assist : { default : { value : '{radii.action.round}' } },
filter : { default : { value : '{radii.action.round}' } },
input : { default : { value : '{radii.action.round}' } },
},
spacing : {
assist : {
gap : {
'label-toSlotLeading' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlots' : { value : '{spacing.gap.obj.horz.tight}' },
},
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
filter : {
gap : {
'chip-toMenu' : { value : '{spacing.gap.obj.vert.tight}' },
'label-toSlotLeading' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlots' : { value : '{spacing.gap.obj.horz.tight}' },
},
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
input : {
gap : {
'label-toSlotLeading' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing' : { value : '{spacing.gap.obj.horz.tight}' },
'label-toSlots' : { value : '{spacing.gap.obj.horz.tight}' },
},
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
ChipGroup : {
spacing : {
gap : {
'between-chips-horz' : { value : '{spacing.gap.group.horz.default}' },
'between-chips-vert' : { value : '{spacing.gap.group.vert.looser}' },
},
padding : {
elevated : { offset : { value : '{spacing.padding.none}' } },
horz : { value : '{spacing.padding.none}' },
vert : { value : '{spacing.padding.none}' },
screen : {
mobile : {
leading : { value : '{spacing.padding.screen.mobile.horz}' },
trailing : { value : '{spacing.padding.none}' },
},
},
},
},
},
Divider : {
sizes : {
weight : {
default : {
emphasis : { horizontal : { value : '{sizes.pipe.weight.thick}' } },
horizontal : { value : '{sizes.pipe.weight.default}' },
vertical : { value : '{sizes.pipe.weight.default}' },
},
},
},
radii : { default : { value : '{radii.none}' } },
},
Fieldset : {
sizes : { helperArea : { icon : { value : '{sizes.icon.sm}' } } },
spacing : {
gap : {
'controls-toHelperArea' : { value : '{spacing.gap.obj.vert.tight}' },
'controls-toLagendArea' : { value : '{spacing.gap.obj.vert.tight}' },
},
helperArea : { gap : { 'text-toIcon' : { value : '{spacing.gap.obj.horz.tighter}' } } },
labelArea : {
gap : {
'legend-toOptional' : { value : '{spacing.gap.obj.horz.tightest}' },
'legend-toRequired' : { value : '{spacing.gap.obj.horz.tightest}' },
},
},
labeledControlArea : { padding : { left : { value : '{spacing.padding.obj.horz.tighter}' } } },
},
},
FormField : {
sizes : { helperArea : { icon : { value : '{sizes.icon.sm}' } } },
spacing : {
gap : {
'field-toHelperArea' : { value : '{spacing.gap.obj.vert.tight}' },
'field-toLabelArea' : { value : '{spacing.gap.obj.vert.tight}' },
},
helperArea : {
gap : {
'text-toCharCount' : { value : '{spacing.gap.obj.horz.tighter}' },
'text-toIcon' : { value : '{spacing.gap.obj.horz.tighter}' },
},
padding : { horz : { value : '{spacing.padding.none}' } },
},
labelArea : {
gap : {
'label-toOptional' : { value : '{spacing.gap.obj.horz.tightest}' },
'label-toRequired' : { value : '{spacing.gap.obj.horz.tightest}' },
},
padding : { horz : { value : '{spacing.padding.none}' } },
},
},
},
Gleam : {
colors : {
bg : { base : { value : '{colors.bg.feedback.notify.hero-fixed}' } },
text : { base : { value : '{colors.text.onHero.neutral-fixed}' } },
info : {
bg : { base : { value : '{colors.bg.feedback.info.inverse}' } },
text : { base : { value : '{colors.text.onInverse.neutral}' } },
},
new : {
bg : { base : { value : '{colors.bg.feedback.success.hero}' } },
text : { base : { value : '{colors.text.onHero.neutral}' } },
},
onInverse : {
info : {
bg : { base : { value : '{colors.bg.feedback.info.soft}' } },
text : { base : { value : '{colors.text.feedback.info.strong}' } },
},
new : {
bg : { base : { value : '{colors.bg.feedback.success.soft}' } },
text : { base : { value : '{colors.text.feedback.success.hero}' } },
},
},
},
sizes : { height : { value : '{sizes.obj.xxs}' }, width : { value : '{sizes.obj.xxs}' } },
radii : { default : { value : '{radii.obj.capsule}' } },
spacing : { padding : { horz : { value : '{spacing.150}' } } },
},
IconButton : {
radii : {
circle : { value : '{radii.action.circle}' },
square : { value : '{radii.action.default}' },
},
spacing : {
xs : { value : '{spacing.150}' },
sm : { value : '{spacing.250}' },
md : { value : '{spacing.250}' },
lg : { value : '{spacing.padding.obj.default}' },
},
},
Input : {
borderWidths : {
active : { value : '{borderWidths.selected}' },
default : { value : '{borderWidths.default}' },
},
sizes : {
sm : { slot : { value : '{sizes.obj.xs}' } },
md : { slot : { value : '{sizes.obj.xs}' } },
lg : { slot : { value : '{sizes.obj.xs}' } },
},
radii : {
sm : { value : '{radii.obj.default}' },
md : { value : '{radii.obj.default}' },
lg : { value : '{radii.obj.default}' },
},
spacing : {
sm : {
gap : {
'input-toAdornment' : { value : '{spacing.gap.group.default}' },
'input-toLeadingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'readOnly-leading' : { value : '{spacing.padding.none}' },
'vert' : { value : '{spacing.150}' },
},
},
md : {
gap : {
'input-toAdornment' : { value : '{spacing.gap.group.default}' },
'input-toLeadingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'readOnly-leading' : { value : '{spacing.padding.none}' },
'vert' : { value : '{spacing.250}' },
},
},
lg : {
gap : {
'input-toAdornment' : { value : '{spacing.gap.group.default}' },
'input-toLeadingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'readOnly-leading' : { value : '{spacing.padding.none}' },
'vert' : { value : '{spacing.padding.obj.vert.loose}' },
},
},
},
},
LabeledControl : {
spacing : {
gap : { 'control-toLabel' : { value : '{spacing.gap.obj.horz.tight}' } },
padding : {
vert : { default : { value : '{spacing.250}' }, largeSwitch : { value : '0.4375rem' } },
},
},
},
LabeledInput : {
radii : { default : { value : '{radii.obj.default}' } },
spacing : {
gap : { 'label-toInputText' : { value : '{spacing.gap.none}' } },
padding : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'horz-readOnly' : { value : '{spacing.padding.none}' },
'vert' : { value : '{spacing.150}' },
'vert-readOnly' : { value : '{spacing.padding.obj.vert.loose}' },
},
},
},
Link : { spacing : { gap : { 'icon-toLabel' : { value : '{spacing.gap.obj.horz.tight}' } } } },
List : {
spacing : {
gap : { default : { value : '{spacing.gap.group.conjoined}' } },
decorator : {
padding : { 'horz-ol' : { value : '{spacing.150}' }, 'horz-ul' : { value : '{spacing.250}' } },
},
item : {
gap : { 'decorator-toText' : { value : '{spacing.gap.none}' } },
padding : {
horz : { value : '{spacing.padding.none}' },
vert : { value : '{spacing.padding.none}' },
},
},
},
},
Popover : {
radii : { default : { value : '{radii.obj.default}' } },
spacing : {
padding : {
'horz' : { value : '{spacing.padding.obj.horz.default}' },
'vert-bottom' : { value : '{spacing.padding.obj.vert.loose}' },
'vert-top' : { value : '{spacing.padding.obj.vert.loose}' },
},
content : {
gap : {
'content-toActions' : { value : '{spacing.gap.obj.vert.looser}' },
'content-toIllustration' : { value : '{spacing.gap.obj.horz.tight}' },
'content-toBody' : { value : '{spacing.gap.obj.vert.tight}' },
},
padding : { default : { value : '{spacing.padding.obj.default}' } },
},
header : {
gap : { 'content-toSlot' : { value : '{spacing.gap.obj.horz.tight}' } },
padding : { default : { value : '{spacing.padding.obj.default}' } },
},
},
},
ProgressMeter : {
borderWidths : { node : { active : { value : '{borderWidths.control.selected}' } } },
sizes : {
node : {
active : { value : '{sizes.control.handle.knob.sm}' },
inactive : { value : '{sizes.control.indicator.xs}' },
},
track : { thickness : { value : '{sizes.pipe.weight.thickest}' } },
},
opacity : { node : { active : { focusRing : { value : '{opacity.stateLayer.focus}' } } } },
radii : {
node : { default : { value : '{radii.control.circle}' } },
track : { default : { value : '{radii.control.default}' } },
},
spacing : {
horizontal : {
gap : {
'label-toMeta' : { value : '{spacing.gap.none}' },
'node-toLabel' : { value : '{spacing.gap.obj.vert.loose}' },
},
},
vertical : {
gap : {
'label-toMeta' : { value : '{spacing.gap.none}' },
'node-toLabel' : { value : '{spacing.gap.obj.vert.loose}' },
},
},
},
},
ShowHide : {
colors : {
icon : {
default : { base : { value : '{colors.icon.action.strong.default}' } },
hover : { base : { value : '{colors.icon.action.strong.hover}' } },
pressed : { base : { value : '{colors.icon.action.strong.pressed}' } },
},
label : {
default : { base : { value : '{colors.text.action.strong.default}' } },
hover : { base : { value : '{colors.text.action.strong.hover}' } },
pressed : { base : { value : '{colors.text.action.strong.pressed}' } },
},
},
spacing : { gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tight}' } } },
},
Tag : {
radii : {
small : { default : { value : '{radii.obj.default}' } },
medium : { default : { value : '{radii.obj.default}' } },
},
spacing : {
small : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tighter}' } },
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
medium : {
gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tighter}' } },
padding : {
horz : { value : '{spacing.padding.obj.horz.tighter}' },
vert : { value : '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
TextButton : { spacing : { gap : { 'label-toIcon' : { value : '{spacing.gap.obj.horz.tight}' } } } },
Toast : {
spacing : {
gap : {
'content-toClose' : { value : '{spacing.gap.obj.horz.default}' },
'content-toLeadingSlot' : { value : '{spacing.gap.obj.horz.default}' },
'content-toTrailingSlot' : { value : '{spacing.gap.obj.horz.default}' },
},
padding : { default : { value : '{spacing.padding.obj.default}' } },
},
radii : { default : { value : '{radii.obj.default}' } },
},
Upsell : {
borderWidths : { card : { value : '{borderWidths.default}' } },
radii : {
banner : { default : { value : '{radii.none}' } },
card : { default : { value : '{radii.obj.default}' }, fullWidth : { value : '{radii.none}' } },
},
spacing : {
banner : {
gap : {
'content-toActions' : { value : '{spacing.gap.none}' },
'content-toClose' : { value : '{spacing.gap.obj.horz.default}' },
'content-toFineprint' : { value : '{spacing.gap.obj.vert.tight}' },
'icon-toContent' : { value : '{spacing.gap.obj.horz.default}' },
'img-toContent' : { value : '{spacing.gap.obj.vert.default}' },
'mobile' : { 'heading-toMessage' : { value : '{spacing.gap.group.vert.conjoined}' } },
'desktop' : {
'content-toActions' : { value : '{spacing.gap.obj.horz.default}' },
'content-toMessage' : { value : '{spacing.gap.group.horz.tighter}' },
},
},
padding : {
horz : { value : '{spacing.padding.obj.default}' },
vert : { value : '{spacing.padding.obj.default}' },
},
},
card : {
gap : {
'actions-toLegal' : { value : '{spacing.gap.obj.vert.tight}' },
'content-toAction' : { value : '{spacing.gap.obj.vert.default}' },
'content-toClose' : { value : '{spacing.gap.obj.horz.default}' },
'heading-toBody' : { value : '{spacing.gap.group.vert.conjoined}' },
'icon-toContent' : { value : '{spacing.gap.obj.horz.default}' },
'img-toContent' : { value : '{spacing.gap.obj.vert.default}' },
},
padding : {
horz : { value : '{spacing.padding.obj.default}' },
vert : { value : '{spacing.padding.obj.default}' },
},
},
},
},
}
const get = (path ) => {
if (!path) return missing;
const parts = path.split ('.' );
let current = obj;
for (const part of parts) {
if (!current[part]) break ;
current = current[part];
}
if (typeof current === 'string' ) {
return `"${current} "` ;
}
if (typeof current === 'object' && 'value' in current) {
return typeof current.value === 'string'
? `"${current.value} "`
: JSON .stringify (current.value );
}
return ;
}
Teardown JS