@ptsecurity/mosaic 13.3.1 → 13.4.0

package/design-tokens/legacy-2017/tokens.d.ts

@@ -2394,6 +2394,8 @@ export declare const LightColorSchemeForegroundBorder = "#B3B3B3";
 export declare const LightColorSchemeForegroundIcon = "#999999";
 export declare const LightColorSchemeBackgroundBackground = "white";
 export declare const LightColorSchemeBackgroundBackgroundDisabled = "#F0F0F0";
+export declare const LightColorSchemeBackgroundBackgroundLessContrast = "#F0F0F0";
+export declare const LightColorSchemeBackgroundBackgroundUnder = "#F0F0F0";
 export declare const LightColorSchemeBackgroundOverlayHover = "rgba(black, 0.05)";
 export declare const LightColorSchemeBackgroundOverlayActive = "rgba(black, 0.1)";
 export declare const LightColorSchemeBackgroundOverlayDisabled = "rgba(white, 0.3)";
@@ -4794,6 +4796,8 @@ export declare const DarkColorSchemeForegroundBorder = "#808080";
 export declare const DarkColorSchemeForegroundIcon = "#999999";
 export declare const DarkColorSchemeBackgroundBackground = "#333333";
 export declare const DarkColorSchemeBackgroundBackgroundDisabled = "#666666";
+export declare const DarkColorSchemeBackgroundBackgroundLessContrast = "#666666";
+export declare const DarkColorSchemeBackgroundBackgroundUnder = "darken(#333333, 5%)";
 export declare const DarkColorSchemeBackgroundOverlayHover = "rgba(black, 0.05)";
 export declare const DarkColorSchemeBackgroundOverlayActive = "rgba(black, 0.1)";
 export declare const DarkColorSchemeBackgroundOverlayDisabled = "rgba(white, 0.2)";
@@ -7077,18 +7081,18 @@ export declare const AlertDarkColorSchemeDefaultBorder = "#4D4D4D";
 export declare const AlertDarkColorSchemeDefaultIcon = "#999999";
 export declare const AlertSizeBorderWidth = "1px";
 export declare const AlertSizeBorderRadius = "4px";
-export declare const AlertSizeHorizontalPadding = "16px";
-export declare const AlertSizeVerticalPadding = "13px";
-export declare const AlertSizeIconMargin = "8px";
-export declare const AlertSizeCloseButtonWidth = "16px";
-export declare const AlertSizeSmallVerticalPadding = "11px";
+export declare const AlertSizeHorizontalPadding = "16rem";
+export declare const AlertSizeVerticalPadding = "12rem";
+export declare const AlertSizeIconMargin = "8rem";
+export declare const AlertSizeCloseButtonWidth = "16rem";
+export declare const AlertSizeSmallVerticalPadding = "12rem";
 export declare const AlertFontDefaultHeader = "subheading";
 export declare const AlertFontDefaultBody = "body";
 export declare const AlertFontSmallHeader = "caption";
 export declare const AlertFontSmallBody = "caption";
-export declare const AutocompleteSizePanelPadding = "4px 0";
+export declare const AutocompleteSizePanelPadding = "4rem 0";
 export declare const AutocompleteSizePanelMaxHeight = "256px";
-export declare const AutocompleteSizePanelBorderRadius = "3px";
+export declare const AutocompleteSizePanelBorderRadius = "4px";
 export declare const BadgeLightColorSchemeSolidPrimaryBackground = "#338FCC";
 export declare const BadgeLightColorSchemeSolidPrimaryColor = "white";
 export declare const BadgeLightColorSchemeSolidPrimaryBorder = "#338FCC";
@@ -7169,14 +7173,14 @@ export declare const BadgeDarkColorSchemeSolidSecondBackground = "#4D4D4D";
 export declare const BadgeDarkColorSchemeSolidSecondColor = "white";
 export declare const BadgeSizeDefaultHeight = "24rem";
 export declare const BadgeSizeDefaultMinWidth = "10px";
-export declare const BadgeSizeDefaultPadding = "0 8px";
+export declare const BadgeSizeDefaultPadding = "0 8rem";
 export declare const BadgeSizeDefaultBorderWidth = "1px";
 export declare const BadgeSizeDefaultBorderRadius = "4px";
 export declare const BadgeSizeMiniHeight = "16rem";
 export declare const BadgeSizeMiniMinWidth = "10px";
 export declare const BadgeSizeMiniBorderWidth = "1px";
-export declare const BadgeSizeMiniBorderRadius = "2px";
-export declare const BadgeSizeMiniPadding = "0 4px";
+export declare const BadgeSizeMiniBorderRadius = "2rem";
+export declare const BadgeSizeMiniPadding = "0 4rem";
 export declare const BadgeFontDefaultDefault = "caption";
 export declare const BadgeFontDefaultCaps = "caption-caps";
 export declare const BadgeFontDefaultMono = "caption-mono";
@@ -7184,7 +7188,7 @@ export declare const BadgeFontMiniDefault = "extra-small-text";
 export declare const BadgeFontMiniCaps = "extra-small-text-caps";
 export declare const BadgeFontMiniMono = "extra-small-text-mono";
 export declare const ButtonToggleSizeBorderSize = "1px";
-export declare const ButtonToggleSizeBorderRadius = "3px";
+export declare const ButtonToggleSizeBorderRadius = "4px";
 export declare const ButtonLightColorSchemeActiveShadow = "inset 0 1px 2px 0 rgba(black, 0.2)";
 export declare const ButtonLightColorSchemePrimaryColor = "white";
 export declare const ButtonLightColorSchemePrimaryBorder = "#277BB3";
@@ -7237,7 +7241,7 @@ export declare const ButtonDarkColorSchemeErrorStatesActiveBorder = "darken(#808
 export declare const ButtonDarkColorSchemeErrorStatesActiveBackground = "darken(#666666, 5)";
 export declare const ButtonSizeHeight = "32rem";
 export declare const ButtonSizeBorderWidth = "1px";
-export declare const ButtonSizeBorderRadius = "3px";
+export declare const ButtonSizeBorderRadius = "4px";
 export declare const ButtonSizeHorizontalPadding = "12rem";
 export declare const ButtonFontDefault = "body";
 export declare const ButtonFontPrimary = "body-strong";
@@ -7268,7 +7272,7 @@ export declare const CardDarkColorSchemeSuccessShadow = "#4D4D4D";
 export declare const CardDarkColorSchemeInfoVerticalLine = "#57A4D7";
 export declare const CardDarkColorSchemeInfoBackground = "#114E77";
 export declare const CardDarkColorSchemeInfoShadow = "#4D4D4D";
-export declare const CardSizeVerticalLine = "4px";
+export declare const CardSizeVerticalLine = "4rem";
 export declare const CheckboxLightColorSchemeBorder = "#B3B3B3";
 export declare const CheckboxLightColorSchemeStatesCheckedBorder = "#206EA2";
 export declare const CheckboxLightColorSchemeStatesCheckedBackground = "#338FCC";
@@ -7279,8 +7283,8 @@ export declare const CheckboxDarkColorSchemeStatesCheckedBorder = "#57A4D7";
 export declare const CheckboxDarkColorSchemeStatesCheckedBackground = "#206EA2";
 export declare const CheckboxDarkColorSchemeStatesFocusedBorder = "#57A4D7";
 export declare const CheckboxDarkColorSchemeStatesFocusedShadow = "0 0 0 1px #57A4D7";
-export declare const CheckboxSizeWidth = "16px";
-export declare const CheckboxSizeLabelMargin = "8px";
+export declare const CheckboxSizeWidth = "16rem";
+export declare const CheckboxSizeLabelMargin = "8rem";
 export declare const CheckboxSizeBorderWidth = "1px";
 export declare const CheckboxSizeToggleBoxShadow = "inset 0 0 1px 0 rgba(0, 0, 0, 0.2)";
 export declare const CheckboxFontDefault = "body";
@@ -7290,17 +7294,17 @@ export declare const DatepickerBodyLightColorSchemeStatesSelectedColor = "#338FC
 export declare const DatepickerBodyLightColorSchemeStatesSelectedBackground = "#D8EAF7";
 export declare const DatepickerBodyDarkColorSchemeStatesSelectedColor = "#338FCC";
 export declare const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "#114E77";
-export declare const DatepickerBodySizeLabelPaddings = "8px 28px 12px 12px";
-export declare const DatepickerBodySizeCellMinSize = "32px";
+export declare const DatepickerBodySizeLabelPaddings = "8rem 28px 12rem 12rem";
+export declare const DatepickerBodySizeCellMinSize = "32rem";
 export declare const DatepickerBodySizeCellMargin = "5%";
-export declare const DatepickerBodySizeCellPadding = "8px";
+export declare const DatepickerBodySizeCellPadding = "8rem";
 export declare const DatepickerBodySizeCellBorderWidth = "1px";
 export declare const DatepickerBodyFontLabel = "body-strong";
 export declare const DatepickerBodyFontToday = "body-strong";
-export declare const DatepickerCalendarSizePaddingTop = "16px";
-export declare const DatepickerCalendarSizePaddingHorizontal = "8px";
-export declare const DatepickerCalendarSizePaddingBottom = "8px";
-export declare const DatepickerCalendarSizePaddingBlocks = "12px";
+export declare const DatepickerCalendarSizePaddingTop = "16rem";
+export declare const DatepickerCalendarSizePaddingHorizontal = "8rem";
+export declare const DatepickerCalendarSizePaddingBottom = "8rem";
+export declare const DatepickerCalendarSizePaddingBlocks = "12rem";
 export declare const DatepickerCalendarSizeDividerWidth = "1px";
 export declare const DatepickerCalendarSizeIconBorderWidth = "2px";
 export declare const DatepickerCalendarSizeIconPrevIconTransform = "translateX(2px) rotate(-45deg)";
@@ -7339,9 +7343,9 @@ export declare const DropdownDividerSizeMargin = "4px 0";
 export declare const DropdownTriggerSizeButtonRightPadding = "8rem";
 export declare const DropdownTriggerSizeRightIconPadding = "2rem";
 export declare const DropdownPanelSizeMaxWidth = "640px";
-export declare const DropdownPanelSizePadding = "4px 0";
+export declare const DropdownPanelSizePadding = "4rem 0";
 export declare const DropdownPanelSizeBorderWidth = "1px";
-export declare const DropdownPanelSizeBorderRadius = "3px";
+export declare const DropdownPanelSizeBorderRadius = "4px";
 export declare const FormFieldLightColorSchemeBorder = "#B3B3B3";
 export declare const FormFieldLightColorSchemeBackground = "white";
 export declare const FormFieldLightColorSchemeStatesHoverBorder = "#999999";
@@ -7354,10 +7358,10 @@ export declare const FormFieldDarkColorSchemeStatesInvalidBorder = "#E76E5C";
 export declare const FormFieldDarkColorSchemeStatesInvalidBackground = "transparent";
 export declare const FormFieldSizeHeight = "32rem";
 export declare const FormFieldSizeBorderWidth = "1px";
-export declare const FormFieldSizeBorderRadius = "3px";
-export declare const FormFieldSizeButtonWidth = "32px";
+export declare const FormFieldSizeBorderRadius = "4px";
+export declare const FormFieldSizeButtonWidth = "32rem";
 export declare const FormFieldFontDefault = "body";
-export declare const FormFieldHintSizeMarginTop = "4px";
+export declare const FormFieldHintSizeMarginTop = "4rem";
 export declare const FormFieldHintFontDefault = "caption";
 export declare const FormFieldPasswordHintLightColorSchemeTextColor = "#4D4D4D";
 export declare const FormFieldPasswordHintLightColorSchemeIconColor = "#4D4D4D";
@@ -7371,28 +7375,76 @@ export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor
 export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#F0F0F0";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesValidTextColor = "#6FBA53";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#6FBA53";
-export declare const FormFieldPasswordHintSizeMarginTop = "8px";
-export declare const FormFieldPasswordHintSizeIconMargin = "4px";
+export declare const FormFieldPasswordHintSizeMarginTop = "8rem";
+export declare const FormFieldPasswordHintSizeIconMargin = "4rem";
 export declare const FormFieldPasswordHintFontDefault = "caption";
 export declare const FormsLightColorSchemeLabel = "#999999";
 export declare const FormsLightColorSchemeLegend = "#4D4D4D";
 export declare const FormsDarkColorSchemeLabel = "#999999";
 export declare const FormsDarkColorSchemeLegend = "#F0F0F0";
-export declare const FormsSizeHorizontalRowMarginBottom = "20px";
-export declare const FormsSizeHorizontalLabelPaddingTop = "6px";
+export declare const FormsSizeHorizontalRowMarginBottom = "20rem";
+export declare const FormsSizeHorizontalLabelPaddingTop = "6rem";
 export declare const FormsSizeHorizontalLabelPaddingBottom = "0";
-export declare const FormsSizeHorizontalControlPaddingLeft = "16px";
-export declare const FormsSizeHorizontalLegendMarginTop = "32px";
-export declare const FormsSizeHorizontalLegendMarginBottom = "16px";
-export declare const FormsSizeVerticalRowMarginBottom = "16px";
+export declare const FormsSizeHorizontalControlPaddingLeft = "16rem";
+export declare const FormsSizeHorizontalLegendMarginTop = "32rem";
+export declare const FormsSizeHorizontalLegendMarginBottom = "16rem";
+export declare const FormsSizeVerticalRowMarginBottom = "16rem";
 export declare const FormsSizeVerticalLabelPaddingTop = "0";
-export declare const FormsSizeVerticalLabelPaddingBottom = "4px";
-export declare const FormsSizeVerticalControlPaddingLeft = "24px";
-export declare const FormsSizeVerticalLegendMarginTop = "32px";
-export declare const FormsSizeVerticalLegendMarginBottom = "12px";
+export declare const FormsSizeVerticalLabelPaddingBottom = "4rem";
+export declare const FormsSizeVerticalControlPaddingLeft = "24rem";
+export declare const FormsSizeVerticalLegendMarginTop = "32rem";
+export declare const FormsSizeVerticalLegendMarginBottom = "12rem";
 export declare const FormsFontDefaultLabel = "body";
 export declare const FormsFontDefaultLegend = "subheading";
-export declare const InputSizePadding = "0 16px";
+export declare const IconLightColorSchemeSecondaryDefault = "#999999";
+export declare const IconLightColorSchemeSecondaryStatesHover = "#4D4D4D";
+export declare const IconLightColorSchemeSecondaryStatesActive = "#333333";
+export declare const IconLightColorSchemeSecondaryStatesDisabled = "mix(#999999, transparent, 30%)";
+export declare const IconLightColorSchemePrimaryDefault = "#57A4D7";
+export declare const IconLightColorSchemePrimaryStatesHover = "#114E77";
+export declare const IconLightColorSchemePrimaryStatesActive = "#07314D";
+export declare const IconLightColorSchemePrimaryStatesDisabled = "mix(#57A4D7, transparent, 30%)";
+export declare const IconLightColorSchemeInfoDefault = "#57A4D7";
+export declare const IconLightColorSchemeInfoStatesHover = "#114E77";
+export declare const IconLightColorSchemeInfoStatesActive = "#07314D";
+export declare const IconLightColorSchemeInfoStatesDisabled = "mix(#57A4D7, transparent, 30%)";
+export declare const IconLightColorSchemeSuccessDefault = "#6FBA53";
+export declare const IconLightColorSchemeSuccessStatesHover = "#276211";
+export declare const IconLightColorSchemeSuccessStatesActive = "#163F07";
+export declare const IconLightColorSchemeSuccessStatesDisabled = "mix(#6FBA53, transparent, 30%)";
+export declare const IconLightColorSchemeWarningDefault = "#DFA739";
+export declare const IconLightColorSchemeWarningStatesHover = "#7D5504";
+export declare const IconLightColorSchemeWarningStatesActive = "#503602";
+export declare const IconLightColorSchemeWarningStatesDisabled = "mix(#DFA739, transparent, 30%)";
+export declare const IconLightColorSchemeErrorDefault = "#E76E5C";
+export declare const IconLightColorSchemeErrorStatesHover = "#832112";
+export declare const IconLightColorSchemeErrorStatesActive = "#541208";
+export declare const IconLightColorSchemeErrorStatesDisabled = "mix(#E76E5C, transparent, 30%)";
+export declare const IconDarkColorSchemeSecondaryDefault = "#808080";
+export declare const IconDarkColorSchemeSecondaryStatesHover = "#666666";
+export declare const IconDarkColorSchemeSecondaryStatesActive = "#4D4D4D";
+export declare const IconDarkColorSchemeSecondaryStatesDisabled = "mix(#808080, transparent, 30%)";
+export declare const IconDarkColorSchemePrimaryDefault = "#338FCC";
+export declare const IconDarkColorSchemePrimaryStatesHover = "#206EA2";
+export declare const IconDarkColorSchemePrimaryStatesActive = "#114E77";
+export declare const IconDarkColorSchemePrimaryStatesDisabled = "mix(#338FCC, transparent, 30%)";
+export declare const IconDarkColorSchemeInfoDefault = "#338FCC";
+export declare const IconDarkColorSchemeInfoStatesHover = "#206EA2";
+export declare const IconDarkColorSchemeInfoStatesActive = "#114E77";
+export declare const IconDarkColorSchemeInfoStatesDisabled = "mix(#338FCC, transparent, 30%)";
+export declare const IconDarkColorSchemeSuccessDefault = "#52A832";
+export declare const IconDarkColorSchemeSuccessStatesHover = "#3B8520";
+export declare const IconDarkColorSchemeSuccessStatesActive = "#276211";
+export declare const IconDarkColorSchemeSuccessStatesDisabled = "mix(#52A832, transparent, 30%)";
+export declare const IconDarkColorSchemeWarningDefault = "#D6930D";
+export declare const IconDarkColorSchemeWarningStatesHover = "#AA7408";
+export declare const IconDarkColorSchemeWarningStatesActive = "#7D5504";
+export declare const IconDarkColorSchemeWarningStatesDisabled = "mix(#D6930D, transparent, 30%)";
+export declare const IconDarkColorSchemeErrorDefault = "#E04D36";
+export declare const IconDarkColorSchemeErrorStatesHover = "#B23522";
+export declare const IconDarkColorSchemeErrorStatesActive = "#832112";
+export declare const IconDarkColorSchemeErrorStatesDisabled = "mix(#E04D36, transparent, 30%)";
+export declare const InputSizePadding = "0 12rem";
 export declare const InputSizeWidth = "100%";
 export declare const InputFontDefault = "body";
 export declare const InputFontMonospace = "body-mono";
@@ -7432,34 +7484,34 @@ export declare const ModalSizeSmall = "400px";
 export declare const ModalSizeNormal = "640px";
 export declare const ModalSizeLarge = "960px";
 export declare const ModalSizeTop = "48px";
-export declare const ModalSizeCloseWidth = "56px";
+export declare const ModalSizeCloseWidth = "56rem";
 export declare const ModalSizeBorderRadius = "4px";
 export declare const ModalSizeBorderWidth = "1px";
 export declare const ModalHeaderLightColorSchemeBorder = "#E6E6E6";
 export declare const ModalHeaderDarkColorSchemeBorder = "#666666";
 export declare const ModalHeaderSizeBorderRadius = "4px 4px 0 0";
 export declare const ModalHeaderSizeHeight = "56rem";
-export declare const ModalHeaderSizePadding = "0 16px";
+export declare const ModalHeaderSizePadding = "0 16rem";
 export declare const ModalHeaderFontDefault = "title";
 export declare const ModalBodySizeMaxHeight = "calc(100vh - 260px)";
-export declare const ModalBodySizePadding = "16px 24px 24px";
+export declare const ModalBodySizePadding = "16rem 24rem 24rem";
 export declare const ModalBodyFontDefault = "body";
 export declare const ModalFooterLightColorSchemeBorder = "#E6E6E6";
 export declare const ModalFooterDarkColorSchemeBorder = "#666666";
 export declare const ModalFooterSizeBorderRadius = "0 0 4px 4px";
 export declare const ModalFooterSizeHeight = "64rem";
 export declare const ModalFooterSizePadding = "0 16rem";
-export declare const ModalConfirmSizePadding = "24px";
+export declare const ModalConfirmSizePadding = "24rem";
 export declare const NavbarLightColorSchemeBackground = "#114E77";
 export declare const NavbarLightColorSchemeDividerBackground = "rgba(255, 255, 255, 0.3)";
 export declare const NavbarDarkColorSchemeBackground = "#114E77";
 export declare const NavbarDarkColorSchemeDividerBackground = "rgba(255, 255, 255, 0.3)";
-export declare const NavbarSizeIconMargin = "6px";
+export declare const NavbarSizeIconMargin = "6rem";
 export declare const NavbarSizeRightIconMargin = "2rem";
 export declare const NavbarFontTitle = "body";
 export declare const VerticalNavbarSizeStatesExpandedWidth = "240px";
-export declare const VerticalNavbarSizeStatesCollapsedWidth = "56px";
-export declare const VerticalNavbarSizeIconMargin = "16px";
+export declare const VerticalNavbarSizeStatesCollapsedWidth = "56rem";
+export declare const VerticalNavbarSizeIconMargin = "16rem";
 export declare const NavbarItemLightColorSchemeText = "#D8EAF7";
 export declare const NavbarItemLightColorSchemeIcon = "#D8EAF7";
 export declare const NavbarItemLightColorSchemeStatesActive = "rgba(0, 0, 0, 0.1)";
@@ -7474,16 +7526,16 @@ export declare const NavbarItemDarkColorSchemeStatesSelected = "#206EA2";
 export declare const NavbarItemDarkColorSchemeStatesHover = "rgba(255, 255, 255, 0.1)";
 export declare const NavbarItemDarkColorSchemeStatesProgress = "#07314D";
 export declare const NavbarItemDarkColorSchemeStatesDisabledOpacity = 0.3;
-export declare const NavbarItemSizePadding = "16px";
-export declare const NavbarItemSizeHeight = "48px";
-export declare const NavbarItemSizeHeightVertical = "56px";
-export declare const NavbarBrandSizePadding = "12px";
-export declare const NavbarBrandSizeMarginRight = "24px";
+export declare const NavbarItemSizePadding = "16rem";
+export declare const NavbarItemSizeHeight = "48rem";
+export declare const NavbarItemSizeHeightVertical = "56rem";
+export declare const NavbarBrandSizePadding = "12rem";
+export declare const NavbarBrandSizeMarginRight = "24rem";
 export declare const NavbarBrandFontTitle = "title";
 export declare const OptgroupSizePaddingLeft = "17px";
 export declare const OptgroupFontDefault = "subheading";
-export declare const OptionSizeHorizontalPadding = "16px";
-export declare const OptionSizeHeight = "32px";
+export declare const OptionSizeHorizontalPadding = "12rem";
+export declare const OptionSizeHeight = "32rem";
 export declare const OptionSizeBorderWidth = "2px";
 export declare const OptionFontDefault = "body";
 export declare const PopoverLightColorSchemeBackground = "white";
@@ -7495,8 +7547,8 @@ export declare const PopoverDarkColorSchemeText = "#F0F0F0";
 export declare const PopoverDarkColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopoverDarkColorSchemeBorder = "#4D4D4D";
 export declare const PopoverSizeMaxHeight = "480px";
-export declare const PopoverSizePadding = "16px";
-export declare const PopoverSizeBorderRadius = "3px";
+export declare const PopoverSizePadding = "16rem";
+export declare const PopoverSizeBorderRadius = "4px";
 export declare const PopoverSizeArrowSize = "12px";
 export declare const PopoverSizeTriggerMargin = "9px";
 export declare const PopoverSizeSmallWidth = "200px";
@@ -7510,15 +7562,15 @@ export declare const PopoverHeaderDarkColorSchemeBorder = "transparent";
 export declare const PopoverHeaderDarkColorSchemeText = "#F0F0F0";
 export declare const PopoverHeaderDarkColorSchemeBackground = "#4D4D4D";
 export declare const PopoverHeaderSizeHeight = "40rem";
-export declare const PopoverHeaderSizePadding = "0 16px";
+export declare const PopoverHeaderSizePadding = "0 16rem";
 export declare const PopoverHeaderFontDefault = "subheading";
 export declare const PopoverFooterLightColorSchemeBorder = "#F0F0F0";
 export declare const PopoverFooterLightColorSchemeBackground = "#F0F0F0";
 export declare const PopoverFooterDarkColorSchemeBorder = "transparent";
 export declare const PopoverFooterDarkColorSchemeBackground = "transparent";
-export declare const PopoverFooterSizeMarginTop = "8px";
-export declare const PopoverFooterSizePadding = "12px 16px";
-export declare const PopoverFooterSizeHeight = "56px";
+export declare const PopoverFooterSizeMarginTop = "8rem";
+export declare const PopoverFooterSizePadding = "12rem 16rem";
+export declare const PopoverFooterSizeHeight = "56rem";
 export declare const PopoverFooterFontDefault = "body";
 export declare const PopupLightColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopupLightColorSchemeBorder = "#B3B3B3";
@@ -7532,8 +7584,8 @@ export declare const PopupDarkColorSchemeBackground = "#4D4D4D";
 export declare const PopupDarkColorSchemeFooterBackground = "transparent";
 export declare const ProgressBarLightColorSchemeBackground = "#F0F0F0";
 export declare const ProgressBarDarkColorSchemeBackground = "#666666";
-export declare const ProgressBarSizeHeight = "4px";
-export declare const ProgressSpinnerSizeSize = "16px";
+export declare const ProgressBarSizeHeight = "4rem";
+export declare const ProgressSpinnerSizeSize = "16rem";
 export declare const RadioLightColorSchemeOuterCircleBorder = "#B3B3B3";
 export declare const RadioLightColorSchemeInnerCircleBorder = "transparent";
 export declare const RadioLightColorSchemeStatesCheckedOuterCircleBorder = "#338FCC";
@@ -7551,29 +7603,29 @@ export declare const RadioDarkColorSchemeStatesFocusedInnerCircleShadow = "0 0 0
 export declare const RadioSizeSize = "14px";
 export declare const RadioSizeLabelMargin = "8px";
 export declare const RadioFontDefault = "body";
-export declare const SelectSizeLeftPadding = "16px";
-export declare const SelectSizeRightPadding = "8px";
-export declare const SelectSizeLeftPaddingMultiple = "8px";
+export declare const SelectSizeLeftPadding = "12rem";
+export declare const SelectSizeRightPadding = "6rem";
+export declare const SelectSizeLeftPaddingMultiple = "12rem";
 export declare const SelectFontDefault = "body";
 export declare const SelectPanelSizeMaxHeight = "232px";
 export declare const SelectPanelSizeMaxWidth = "640px";
-export declare const SelectPanelSizeVerticalPadding = "4px";
+export declare const SelectPanelSizeVerticalPadding = "4rem";
 export declare const SelectPanelSizeBorderWidth = "1px";
-export declare const SelectPanelSizeBorderRadius = "3px";
+export declare const SelectPanelSizeBorderRadius = "4px";
 export declare const SelectPanelFontDefault = "body";
 export declare const SidepanelLightColorSchemeBorder = "#B3B3B3";
 export declare const SidepanelDarkColorSchemeBorder = "#333333";
 export declare const SidepanelFontDefault = "body";
 export declare const SidepanelHeaderSizeHeight = "56rem";
 export declare const SidepanelHeaderSizePadding = "0 16rem";
-export declare const SidepanelHeaderSizeClosePadding = "0 0 0 8px";
+export declare const SidepanelHeaderSizeClosePadding = "0 0 0 8rem";
 export declare const SidepanelHeaderFontDefault = "title";
 export declare const SidepanelFooterSizeHeight = "64rem";
 export declare const SidepanelFooterSizePadding = "0 16rem";
 export declare const SidepanelFooterFontDefault = "body";
 export declare const TableSizeBorderWidth = "1px";
-export declare const TableSizeRowPaddingVertical = "8px";
-export declare const TableSizeRowPaddingHorizontal = "16px";
+export declare const TableSizeRowPaddingVertical = "8rem";
+export declare const TableSizeRowPaddingHorizontal = "16rem";
 export declare const TableFontHeader = "caption";
 export declare const TableFontBody = "body-tabular";
 export declare const TabsLightColorSchemeBorder = "#B3B3B3";
@@ -7598,12 +7650,12 @@ export declare const TabsDarkColorSchemeStateEmptyText = "#999999";
 export declare const TabsDarkColorSchemeStateDisabledIcon = "#999999";
 export declare const TabsDarkColorSchemeStateDisabledText = "#999999";
 export declare const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
-export declare const TabsSizeHeight = "40px";
-export declare const TabsSizeHighlightHeight = "4px";
-export declare const TabsSizePaddingHorizontal = "16px";
+export declare const TabsSizeHeight = "40rem";
+export declare const TabsSizeHighlightHeight = "4rem";
+export declare const TabsSizePaddingHorizontal = "16rem";
 export declare const TabsSizeBorderWidth = "1px";
-export declare const TabsSizeBorderRadius = "3px";
-export declare const TabsSizeLabelIconMargin = "8px";
+export declare const TabsSizeBorderRadius = "4px";
+export declare const TabsSizeLabelIconMargin = "8rem";
 export declare const TabsFontDefault = "body";
 export declare const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
 export declare const VerticalTabsLightColorSchemeStateSelectedBackground = "#D8EAF7";
@@ -7661,24 +7713,24 @@ export declare const TagsDarkColorSchemeErrorStatesHoverIcon = "#F4B7AE";
 export declare const TagsDarkColorSchemeErrorStatesFocused = "#E76E5C";
 export declare const TagsDarkColorSchemeErrorStatesDisabledText = "mix(#E76E5C, transparent, 50%)";
 export declare const TagsDarkColorSchemeErrorStatesDisabledBackground = "mix(#E76E5C, transparent, 10%)";
-export declare const TagsSizeMargin = "2px";
-export declare const TagsSizeHeight = "24px";
+export declare const TagsSizeMargin = "2rem";
+export declare const TagsSizeHeight = "24rem";
 export declare const TagsSizeBorderWidth = "1px";
 export declare const TagsSizeBorderRadius = "4px";
 export declare const TagsSizeIconPadding = "4rem";
-export declare const TagsSizeTextMargin = "8px";
+export declare const TagsSizeTextMargin = "8rem";
 export declare const TagsFontDefault = "caption";
 export declare const TagsFontMono = "caption-mono";
 export declare const TagsFontCaps = "caption-caps";
-export declare const TagListSizePadding = "1px 6px";
+export declare const TagListSizePadding = "1px 12rem";
 export declare const TagInputSizeHeight = "22px";
-export declare const TagInputSizeMargin = "2px 4px";
+export declare const TagInputSizeMargin = "2px 4rem";
 export declare const TagInputFontDefault = "body";
 export declare const TextareaSizeMinHeight = "50px";
-export declare const TextareaSizePadding = "5px 16px";
+export declare const TextareaSizePadding = "5 12rem";
 export declare const TextareaFontDefault = "body";
 export declare const TextareaFontMono = "body-mono";
-export declare const TimepickerSizePaddingRight = "16px";
+export declare const TimepickerSizePaddingRight = "16rem";
 export declare const ToggleLightColorSchemeBorder = "#B3B3B3";
 export declare const ToggleLightColorSchemeBackground = "linear-gradient(to bottom, #E6E6E6, #F0F0F0)";
 export declare const ToggleLightColorSchemeCircleBorder = "#B3B3B3";
@@ -7700,7 +7752,7 @@ export declare const ToggleDarkColorSchemeErrorCheckedBackground = "#E76E5C";
 export declare const ToggleSizeHeight = "16px";
 export declare const ToggleSizeWidth = "28px";
 export declare const ToggleSizeBorderRadius = "9px";
-export declare const ToggleSizeLabelMargin = "8px";
+export declare const ToggleSizeLabelMargin = "8rem";
 export declare const ToggleFontDefault = "body";
 export declare const ToggleSmallSizeHeight = "14px";
 export declare const ToggleSmallSizeWidth = "24px";
@@ -7722,8 +7774,8 @@ export declare const TooltipDarkColorSchemeWarningText = "#4D4D4D";
 export declare const TooltipDarkColorSchemeWarningBorder = "#F0D49B";
 export declare const TooltipSizeMaxWidth = "300px";
 export declare const TooltipSizeBorderWidth = "1px";
-export declare const TooltipSizeBorderRadius = "3px";
-export declare const TooltipSizePadding = "8px 16px";
+export declare const TooltipSizeBorderRadius = "4px";
+export declare const TooltipSizePadding = "8rem 16rem";
 export declare const TooltipSizeArrowSize = "12px";
 export declare const TooltipSizeTriggerMargin = "9px";
 export declare const TooltipFontDefault = "caption";
@@ -7735,10 +7787,10 @@ export declare const ExtendedTooltipDarkColorSchemeBackground = "#4D4D4D";
 export declare const ExtendedTooltipDarkColorSchemeText = "#F0F0F0";
 export declare const ExtendedTooltipDarkColorSchemeBorder = "#999999";
 export declare const ExtendedTooltipDarkColorSchemeShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2)";
-export declare const ExtendedTooltipSizeBorderRadius = "3px";
+export declare const ExtendedTooltipSizeBorderRadius = "4px";
 export declare const ExtendedTooltipSizeArrowSize = "12px";
 export declare const ExtendedTooltipSizeTriggerMargin = "9px";
-export declare const ExtendedTooltipSizePadding = "8px 16px";
+export declare const ExtendedTooltipSizePadding = "8rem 16rem";
 export declare const ExtendedTooltipSizeMaxHeight = "480px";
 export declare const ExtendedTooltipFontDefault = "caption";
 export declare const ExtendedTooltipHeaderLightColorSchemeBorder = "#E6E6E6";
@@ -7748,9 +7800,9 @@ export declare const ExtendedTooltipHeaderDarkColorSchemeBorder = "#F0F0F0";
 export declare const ExtendedTooltipHeaderDarkColorSchemeText = "#F0F0F0";
 export declare const ExtendedTooltipHeaderDarkColorSchemeBackground = "#4D4D4D";
 export declare const ExtendedTooltipHeaderSizeHeight = "40px";
-export declare const ExtendedTooltipHeaderSizePadding = "10px 16px";
+export declare const ExtendedTooltipHeaderSizePadding = "8rem 16rem";
 export declare const ExtendedTooltipHeaderFontDefault = "subheading";
-export declare const TreeSizeNodeHeight = "32px";
+export declare const TreeSizeNodeHeight = "32rem";
 export declare const TreeSizePaddingLeft = "12rem";
 export declare const TreeSizeTogglePadding = "4rem";
 export declare const TreeSizeIconPadding = "8rem";

package/design-tokens/pt-2022/tokens/components/alert.json5

@@ -55,18 +55,18 @@
             }
         },
         size: {
-            'border-width': { value: '1px' },
-            'border-radius': { value: '4px' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
 
-            'horizontal-padding': { value: '{padding.control-horizontal}' },
-            'vertical-padding': { value: '13px' },
+            'horizontal-padding': { value: '{size.l}' },
+            'vertical-padding': { value: '{size.m}' },
 
-            'icon-margin': { value: '{margin.iconText_M-horizontal}' },
+            'icon-margin': { value: '{size.s}' },
 
-            'close-button-width': { value: '16px' },
+            'close-button-width': { value: '{size.l}' },
 
             small: {
-                'vertical-padding': { value: '11px' }
+                'vertical-padding': { value: '{size.m}' }
             }
         },
         font: {

package/design-tokens/pt-2022/tokens/components/autocomplete.json5

@@ -2,9 +2,9 @@
     autocomplete: {
         size: {
             panel: {
-                padding: { value: '4px 0' },
+                padding: { value: '{size.xxs} 0' },
                 'max-height': { value: '256px' },
-                'border-radius': { value: '3px' }
+                'border-radius': { value: '{size.border-radius}' }
             }
         }
     }

package/design-tokens/pt-2022/tokens/components/badge.json5

@@ -146,16 +146,16 @@
             default: {
                 height: { value: '{size.xxl}' },
                 'min-width': { value: '10px' },
-                padding: { value: '0 8px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '4px' }
+                padding: { value: '0 {size.s}' },
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.border-radius}' }
             },
             mini: {
                 height: { value: '{size.l}' },
                 'min-width': { value: '10px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '2px' },
-                padding: { value: '0 4px' }
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.3xs}' },
+                padding: { value: '0 {size.xxs}' }
             }
         },
         font: {

package/design-tokens/pt-2022/tokens/components/button-toggle.json5

@@ -2,8 +2,8 @@
     'button-toggle': {
         size: {
             border: {
-                size: { value: '1px' },
-                radius: { value: '3px' }
+                size: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             }
         }
     }

package/design-tokens/pt-2022/tokens/components/button.json5

@@ -122,8 +122,8 @@
         size: {
             height: { value: '{size.3xl}' },
 
-            'border-width': { value: '1px' },
-            'border-radius': { value: '3px' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
 
             'horizontal-padding': { value: '{size.m}' }
         },

package/design-tokens/pt-2022/tokens/components/card.json5

@@ -45,7 +45,7 @@
             }
         },
         size: {
-            'vertical-line': { value: '4px' }
+            'vertical-line': { value: '{size.xxs}' }
         }
     }
 }

package/design-tokens/pt-2022/tokens/components/checkbox.json5

@@ -27,9 +27,9 @@
             }
         },
         size: {
-            width: { value: '16px' },
-            'label-margin': { value: '{margin.iconText_M-horizontal}' },
-            'border-width': { value: '1px' },
+            width: { value: '{size.l}' },
+            'label-margin': { value: '{size.s}' },
+            'border-width': { value: '{size.border-width}' },
             'toggle-box-shadow': { value: 'inset 0 0 1px 0 rgba(0, 0, 0, 0.2)' }
         },
         font: {

package/design-tokens/pt-2022/tokens/components/datepicker.json5

@@ -24,13 +24,13 @@
         },
         size: {
             label: {
-                'paddings': { value: '8px 28px 12px 12px' }
+                'paddings': { value: '{size.s} 28px {size.m} {size.m}' }
             },
             cell: {
-                'min-size': { value: '32px' },
+                'min-size': { value: '{size.3xl}' },
                 margin: { value: '5%' },
-                padding: { value: '8px' },
-                'border-width': { value: '1px' }
+                padding: { value: '{size.s}' },
+                'border-width': { value: '{size.border-width}' }
             }
         },
         font: {
@@ -40,10 +40,10 @@
     },
     'datepicker-calendar': {
         size: {
-            'padding-top': { value: '16px' },
-            'padding-horizontal': { value: '8px' },
-            'padding-bottom': { value: '8px' },
-            'padding-blocks': { value: '12px' },
+            'padding-top': { value: '{size.l}' },
+            'padding-horizontal': { value: '{size.s}' },
+            'padding-bottom': { value: '{size.s}' },
+            'padding-blocks': { value: '{size.m}' },
 
             'divider-width': { value: '1px' },