For a long time, Abyss provided a set of "tokens" to allow teams to access standardized values for colors, typography, spacing, and more. These legacy tokens have been removed in Abyss V2 in favor of our new design token system.
Teams that were not using these legacy tokens previously will not need to make any changes to their codebase beyond the normal component migrations, but teams that were using them will need to perform some migration steps. The largest challenge is that there is not a one-to-one mapping between the legacy tokens and the new design tokens. To better align with the Abyss V2 Design System, we highly recommend that teams migrate to the new design tokens. However, for teams wanting to minimize up-front work, there is an alternative. Both methods are described below.
Breakpoint tokens
The breakpoint tokens are the exception to the removal of the legacy tokens. While the Abyss Design System does not officially contain breakpoint tokens, we still use and support breakpoint tokens for various practical reasons, such as mobile responsive views. However, the token values have been updated to match the new design standards. The new breakpoint token values are as follows:
| Token | Legacy Value | New Value |
|---|---|---|
'xs' | 0px | 0px |
'sm' | 464px | 360px |
'md' | 744px | 744px |
'lg' | 984px | 1248px |
'xl' | 1248px | (Removed) |
You will likely see some minor layout differences due to these changes. If you'd like to maintain the legacy breakpoint values, you can add them as custom tokens as described in Method 2 below. If you choose not to do this, you will need to remove all uses of the 'xl' breakpoint token from your codebase, as it has been removed. Simply replace it with the 'lg' token and adjust any other breakpoints as needed.
Method 1: Mapping to new design tokens (Preferred)
The preferred method for migrating away from legacy tokens is to update your usages of them to the new design tokens. This will ensure your application is fully aligned with the Abyss V2 Design System and will benefit from any future updates to the design tokens. Additionally, as the legacy tokens have been removed, this method will make it easier for the Abyss team to provide support.
When migrating to the new design tokens, you will need to identify the appropriate design token that matches the legacy token you were using. Generally speaking, this will mean finding the closest matching semantic token and replacing the legacy token with that semantic token. For example, if you were previously using '$primary1' for the background color of a Box, you would replace it with '$web.semantic.color.surface.container.primary', as both map to the same color—the primary brand color—and semantically, the Box is used as a container.
<Box color="$primary1"> Legacy token usage</Box>
<Box color="$web.semantic.color.surface.container.primary"> New design token usage</Box>However, if you were using '$primary1' for the text color of a Text component, you would instead replace it with '$web.semantic.color.text.content.primary' because even though the color is the same, the semantic use of the color is different.
<Text color="$primary1"> Legacy token usage</Text>
<Text color="$web.semantic.color.text.content.primary"> New design token usage</Text>Note: While it is possible to use core tokens directly, we strongly recommend using semantic tokens whenever possible. Semantic tokens provide context for how a token should be used, which helps ensure consistency across your application.
Additionally, there will likely be some cases where a direct mapping is not possible. In these cases, you will either need to:
- Use a hard-coded value that matches the legacy token (not recommended),
- Find a semantic token that is close enough, or
- Create a custom token in your theme override to match the legacy token (see Method 2 below).
See our migration table below for help finding the appropriate tokens.
Typography
Migrating typography tokens may require additional adjustments beyond simply replacing the token. This is because the new typography tokens, particularly the font weight tokens, are based upon the font family used in the theme, thus, changing the application theme will require a change in all typography tokens. We recommend that you migrate any text using legacy typography tokens to the new Heading, Text, and Link components. This will ensure that your typography is consistent with the Abyss V2 Design System and will automatically adapt to changes in the base theme. You can read more about the new typography system in the Typography documentation.
<Text size="$lg" fontWeight="$bold"> Legacy usage</Text>
<Text fontSize="lg" fontWeight="bold"> New usage</Text>Data visualization colors
Since the new design token system does not yet include specific tokens for data visualization colors, we have carried the previous data visualization color legacy tokens, such as '$primaryDvz1', over as an object within the V1Charts component.
| Before | After |
|---|---|
| '$[dvzColor]' | V1Charts.colors.[dvzColor] |
It is technically possible to access these outside of the chart components, but we recommend only using them within the context of charts to ensure consistency. Here is an example of how to migrate a chart using legacy tokens to use the new design tokens:
import { V1Charts } from '@uhg-abyss/web/ui/Charts';
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
const data = { labels, datasets: [ { label: 'Dataset 1', data: [65, 59, 80, 81, 56, 55, 40], // borderColor: '$primaryDvz1', // Legacy token usage borderColor: V1Charts.colors.primaryDvz1, // New usage backgroundColor: V1Charts.colors.primaryDvz1, }, ],};
return ( <React.Fragment> <V1Charts.Bar data={data} title="Profile Views" subtitle="The feature shows you profile view statistics." xAxisLabel="Month" yAxisLabel="Views" /> </React.Fragment>);Method 2: Adding custom tokens
The quickest way to migrate to V2 with minimal token changes is to reintroduce any legacy tokens used in your application as custom tokens in your theme overrides in the createTheme tool. These tokens will be added into the theme and can be used in the same way as before.
The reason we discourage this method is that it adds extra maintenance overhead for your team and is inconsistent with the Abyss V2 Design System. However, it is valid as a temporary solution to minimize up-front work and allow your team to migrate to the new design tokens over time.
Legacy tokens reference
Below are all the legacy tokens we supported in Abyss V1. You can use this as a reference when migrating your application to use the new design tokens.
{ "media": { "screen >= $xs": "(min-width: 0px)", "screen >= $sm": "(min-width: 464px)", "screen < $sm": "(max-width: 463px)", "screen >= $md": "(min-width: 744px)", "screen < $md": "(max-width: 743px)", "screen >= $lg": "(min-width: 984px)", "screen < $lg": "(max-width: 983px)", "screen >= $xl": "(min-width: 1248px)", "screen < $xl": "(max-width: 1247px)" }, "breakpoints": { "xs": 0, "sm": 464, "md": 744, "lg": 984, "xl": 1248 }, "colors": { "core-color-black": "#000000", "core-color-white": "#FFFFFF", "core-color-gray1": "#FAFAFA", "core-color-gray2": "#F3F3F3", "core-color-gray3": "#E5E5E6", "core-color-gray4": "#CBCCCD", "core-color-gray5": "#929496", "core-color-gray6": "#7D7F81", "core-color-gray7": "#4B4D4F", "core-color-gray8": "#323334", "core-color-gray9": "#212223", "core-color-gray-5": "#FAFAFA", "core-color-success1": "#007000", "core-color-success2": "#F2F8E6", "core-color-error1": "#C40000", "core-color-error2": "#FCF0F0", "core-color-error3": "#990000", "core-color-warning1": "#C24E14", "core-color-warning2": "#FFFBEB", "core-color-info1": "#196ECF", "core-color-info2": "#EDF3FB", "core-color-foreground": "#424242", "core-color-background": "#F4F4F4", "core-color-primaryDvz1": "#15A796", "core-color-primaryDvz2": "#218371", "core-color-primaryDvz3": "#AEE2D5", "core-color-secondaryDvz1": "#C72887", "core-color-secondaryDvz2": "#8C195E", "core-color-secondaryDvz3": "#F6BCDC", "core-color-purpleDvz1": "#8061BC", "core-color-purpleDvz2": "#422C88", "core-color-purpleDvz3": "#D9CFEB", "core-color-tangerineDvz1": "#E4780C", "core-color-tangerineDvz2": "#B85B06", "core-color-tangerineDvz3": "#FFD7B3", "core-color-sapphireDvz1": "#1E82CB", "core-color-sapphireDvz2": "#155C8E", "core-color-sapphireDvz3": "#C4DFF6", "core-color-statusDvz1": "#03AB03", "core-color-statusDvz2": "#007000", "core-color-statusDvz3": "#B7ECB0", "core-color-redDvz1": "#FF1A1A", "core-color-redDvz2": "#C40000", "core-color-redDvz3": "#FEB5B1", "core-color-pink-60": "#C72887", "core-color-pink-80": "#C72887", "core-color-purple-60": "#8061BC", "core-color-purple-80": "#8061BC", "core-color-tangerine-60": "#E4780C", "core-color-tangerine-80": "#E4780C", "core-color-sapphire-60": "#1E82CB", "core-color-sapphire-80": "#1E82CB", "core-color-turquoise-60": "#15A796", "core-color-turquoise-80": "#15A796", "core-color-turquoise-100": "#149E8F", "core-color-aqua-5": "#EEF8FB", "core-color-aqua-10": "#E4F1F5", "core-color-aqua-15": "#E5F8FB", "core-color-aqua-20": "#D9F6FA", "core-color-aqua-25": "#EEFBF9", "core-color-aqua-30": "#D4F1F5", "core-color-aqua-35": "#E5FBF8", "core-color-aqua-40": "#D4F5F2", "core-color-peach-5": "#FAF8F2", "core-color-peach-10": "#F5F3ED", "core-color-peach-20": "#FCF6F1", "core-color-peach-30": "#F7EFE9", "core-color-skyBlue-0": "#FAFCFF", "core-color-skyBlue-5": "#F7FCFD", "core-color-skyBlue-10": "#F1F6F7", "core-color-skyBlue-15": "#F8F8FF", "core-color-skyBlue-20": "#F6F5FF", "core-color-skyBlue-30": "#D3D1E4", "core-color-transparent": "rgba(255, 255, 255, 0)", "core-color-neutral-0": "#FFFFFF", "core-color-neutral-1": "#FAFDFF", "core-color-neutral-5": "#FAFAFA", "core-color-neutral-10": "#F3F3F3", "core-color-neutral-15": "#F0F0F0", "core-color-neutral-20": "#E5E5E6", "core-color-neutral-25": "#FAFBFF", "core-color-neutral-30": "#CBCCCD", "core-color-neutral-35": "#F3F5FB", "core-color-neutral-40": "#E5E8F0", "core-color-neutral-45": "#CBCFDB", "core-color-neutral-50": "#929496", "core-color-neutral-55": "#8A96A0", "core-color-neutral-60": "#7D7F81", "core-color-neutral-65": "#7D8C97", "core-color-neutral-70": "#6D6F70", "core-color-neutral-75": "#626974", "core-color-neutral-80": "#4B4D4F", "core-color-neutral-85": "#414B59", "core-color-neutral-90": "#323334", "core-color-neutral-95": "#222324", "core-color-neutral-100": "#000000", "core-color-neutral-110": "#19191A", "core-color-brand-5": "#EDF3FB", "core-color-brand-10": "#E3EEFA", "core-color-brand-20": "#D9E9FA", "core-color-brand-60": "#196ECF", "core-color-brand-70": "#0C55B8", "core-color-brand-80": "#004BA0", "core-color-brand-90": "#003A8D", "core-color-brand-100": "#002677", "core-color-brand-110": "#001D5B", "core-color-brand-120": "#00184D", "core-color-warmWhite-5": "#FAF5F2", "core-color-warmWhite-10": "#FAF8F2", "core-color-warmWhite-15": "#EDE9E7", "core-color-warmWhite-20": "#F5F3ED", "core-color-warmWhite-40": "#EBE8E1", "core-color-warmWhite-50": "#E4DAD1", "core-color-pacific-5": "#EEFAFF", "core-color-pacific-10": "#ECFAFC", "core-color-pacific-15": "#E5F7FF", "core-color-pacific-20": "#D9F6FA", "core-color-pacific-30": "#A5DFE7", "core-color-pacific-40": "#B2DEF2", "core-color-pacific-50": "#B2EBF2", "core-color-pacific-100": "#00BED5", "core-color-blue-0": "#EDECFC", "core-color-blue-5": "#EDF3FB", "core-color-blue-10": "#EEF4FF", "core-color-blue-15": "#E9EFFA", "core-color-blue-50": "#C5D2EC", "core-color-blue-60": "#C3D8F2", "core-color-blue-80": "#126ECF", "core-color-blue-100": "#224AA0", "core-color-yellow-10": "#FEF9EA", "core-color-yellow-50": "#E5DBBB", "core-color-yellow-100": "#F5B700", "core-color-yellow-120": "#D2800F", "core-color-yellow-130": "#D2800A", "core-color-yellow-140": "#826100", "core-color-yellow-160": "#bd7309", "core-color-yellow-170": "#ad6a08", "core-color-orange-10": "#FFFBEB", "core-color-orange-50": "#F3D8C0", "core-color-orange-100": "#FF612B", "core-color-orange-120": "#C24E14", "core-color-green-10": "#EFF6EF", "core-color-green-20": "#F0F9ED", "core-color-green-30": "#E6F5E6", "core-color-green-50": "#BFDBBF", "core-color-green-80": "#1EA21C", "core-color-green-90": "#567000", "core-color-green-100": "#007000", "core-color-red-5": "#FBEAF1", "core-color-red-10": "#FCF0F0", "core-color-red-40": "#F9D1D1", "core-color-red-50": "#F1C0C0", "core-color-red-60": "#E8C0C0", "core-color-red-100": "#C40000", "core-color-red-110": "#B20000", "core-color-red-120": "#990000", "core-color-red-130": "#890000", "black": "#000000", "white": "#FFFFFF", "gray1": "#FAFAFA", "gray2": "#F3F3F3", "gray3": "#E5E5E6", "gray4": "#CBCCCD", "gray5": "#929496", "gray6": "#7D7F81", "gray7": "#4B4D4F", "gray8": "#323334", "gray9": "#212223", "success1": "#007000", "success2": "#F2F8E6", "error1": "#C40000", "error2": "#FCF0F0", "error3": "#990000", "warning1": "#C24E14", "warning2": "#FFFBEB", "info1": "#196ECF", "info2": "#EDF3FB", "foreground": "#424242", "background": "#F4F4F4", "primaryDvz1": "#15A796", "primaryDvz2": "#218371", "primaryDvz3": "#AEE2D5", "secondaryDvz1": "#C72887", "secondaryDvz2": "#8C195E", "secondaryDvz3": "#F6BCDC", "purpleDvz1": "#8061BC", "purpleDvz2": "#422C88", "purpleDvz3": "#D9CFEB", "tangerineDvz1": "#E4780C", "tangerineDvz2": "#B85B06", "tangerineDvz3": "#FFD7B3", "sapphireDvz1": "#1E82CB", "sapphireDvz2": "#155C8E", "sapphireDvz3": "#C4DFF6", "statusDvz1": "#03AB03", "statusDvz2": "#007000", "statusDvz3": "#B7ECB0", "redDvz1": "#FF1A1A", "redDvz2": "#C40000", "redDvz3": "#FEB5B1", "primary1": "#002677", "primary2": "#FFFFFF", "secondary1": "#00BED5", "secondary2": "#F5B700", "secondary3": "#FF6814", "accent1": "#196ECF", "interactive1": "#196ECF", "interactive2": "#004BA0", "interactive3": "#D9E9FA", "interactive4": "#00184D", "tint1": "#EEF8FB", "tint2": "#E5F8FB", "tint3": "#D0F1F5", "tint4": "#A5DFE7", "pastel1": "#EEF8FB", "pastel2": "#F7FCFD", "pastel3": "#FCF6F1", "pastel4": "#EFF9EF", "successLight": "#F0F9ED", "green-20": "#F0F9ED", "tabBackground": "$core.color.neutral.5", "iconButtonHover": "$interactive3", "selectedOption": "$tint2", "buttonOutlineHover": "$interactive3", "closeIconHover": "$tint2", "footerBackground": "$primary1", "footerText": "$primary2", "footerLinkHover": "$primary2", "footerBorder": "$primary2", "toggleTabsSelected": "$interactive1", "carouselControlsDefault": "$core.color.neutral.5", "carouselControlsWhite": "$interactive3", "carouselControlsPrimary": "$interactive3", "carouselControlsSecondary": "$core.color.neutral.0", "carouselContentDefault": "$tint2", "carouselContentWhite": "$core.color.neutral.0", "carouselContentPrimary": "$primary1", "carouselContentSecondary": "$interactive1", "carouselButtonDefault": "$primary1", "carouselButtonWhite": "$interactive4", "carouselButtonPrimary": "$core.color.neutral.0", "carouselButtonSecondary": "$core.color.neutral.0", "loadingSpinnerPrimary1": "$primary1", "avatarContentAquaBgc": "$pastel1", "avatarContentMintBgc": "$pastel4", "avatarContentPeachBgc": "$pastel3", "avatarContentBlueBgc": "$pastel2", "avatarContentAquaBorderColor": "$primary1", "avatarContentMintBorderColor": "$success1", "avatarContentPeachBorderColor": "$warning1", "avatarContentBlueBorderColor": "$primary1", "navMenuBackgroundDefault": "$primary1", "navMenuBackgroundHover": "$primary2", "navMenuTextDefault": "$primary2", "navMenuTextHover": "$primary1", "cardBase-color-border-container": "$web.semantic.color.border.content.secondary", "cardBase-color-surface-container": "$web.semantic.color.surface.container.secondary", "accordion-color-background-root": "$core.color.gray1", "accordion-color-background-content": "$core.color.white", "accordion-color-background-trigger-default": "transparent", "accordion-color-background-trigger-closedOpen": "$core.color.white", "accordion-color-background-trigger-hover": "$core.color.gray1", "accordion-color-background-trigger-disabled": "$core.color.gray3", "accordion-color-border-root": "blue", "accordion-color-text-content": "$primary1", "accordion-color-text-header-disabled": "$core.color.gray6", "accordion-color-text-subtext-default": "$core.color.black", "accordion-color-text-subtext-disabled": "$core.color.gray6", "accordion-color-text-trigger": "$primary1", "accordion-color-fill-chevron-disabled": "$core.color.gray6", "alert-color-background-container-base": "$core.color.white", "alert-color-background-container-success": "$core.color.success2", "alert-color-background-container-error": "$core.color.error2", "alert-color-background-container-warning": "$core.color.warning2", "alert-color-background-container-info": "$core.color.info2", "alert-color-background-closeButton-hover": "$core.color.white", "alert-color-background-actionButton-error": "$core.color.white", "alert-color-background-actionButton-warning": "$core.color.white", "alert-color-background-actionButton-info": "$core.color.white", "alert-color-background-actionButton-success": "$core.color.white", "alert-color-border-root-success": "$core.color.success1", "alert-color-border-root-error": "$core.color.error1", "alert-color-border-root-warning": "$core.color.warning1", "alert-color-border-root-info": "$core.color.info1", "alert-color-border-actionButton-error": "$core.color.error1", "alert-color-border-actionButton-warning": "$core.color.warning1", "alert-color-border-actionButton-info": "$core.color.info1", "alert-color-border-actionButton-success": "$core.color.success1", "alert-color-text-alertBody-timestamp-true": "$core.color.gray8", "alert-color-text-actionButton-default": "$core.color.gray8", "alert-color-text-actionButton-hover": "$core.color.gray8", "alert-color-icon-closeButton": "$core.color.gray8", "alert-color-icon-alertIcon-error": "$core.color.error1", "alert-color-icon-alertIcon-info": "$core.color.info1", "alert-color-icon-alertIcon-success": "$core.color.success1", "alert-color-icon-alertIcon-warning": "$core.color.warning1", "avatar-color-background-content-colorTheme-aqua": "$avatarContentAquaBgc", "avatar-color-background-content-colorTheme-mint": "$avatarContentMintBgc", "avatar-color-background-content-colorTheme-peach": "$avatarContentPeachBgc", "avatar-color-background-content-colorTheme-skyBlue": "$avatarContentBlueBgc", "avatar-color-background-content-solid": "$primary1", "avatar-color-border-content-colorTheme-aqua": "$avatarContentAquaBorderColor", "avatar-color-border-content-colorTheme-mint": "$avatarContentMintBorderColor", "avatar-color-border-content-colorTheme-peach": "$avatarContentPeachBorderColor", "avatar-color-border-content-colorTheme-skyBlue": "$avatarContentBlueBorderColor", "avatar-color-text-content-colorTheme-aqua": "$avatarContentAquaBorderColor", "avatar-color-text-content-colorTheme-mint": "$avatarContentMintBorderColor", "avatar-color-text-content-colorTheme-peach": "$avatarContentPeachBorderColor", "avatar-color-text-content-colorTheme-skyBlue": "$avatarContentBlueBorderColor", "avatar-color-text-content-solid": "$core.color.white", "avatar-color-fill-content-colorTheme-aqua": "$avatarContentAquaBorderColor", "avatar-color-fill-content-colorTheme-mint": "$avatarContentMintBorderColor", "avatar-color-fill-content-colorTheme-peach": "$avatarContentPeachBorderColor", "avatar-color-fill-content-colorTheme-skyBlue": "$avatarContentBlueBorderColor", "avatar-color-fill-content-solid": "$core.color.white", "badge-color-background-container-success": "$core.color.success2", "badge-color-background-container-warning": "$core.color.warning2", "badge-color-background-container-error": "$core.color.error2", "badge-color-background-container-info": "$core.color.info2", "badge-color-background-container-neutral": "$core.color.gray2", "badge-color-text-container-success": "$core.color.success1", "badge-color-text-container-warning": "$core.color.warning1", "badge-color-text-container-error": "$core.color.error1", "badge-color-text-container-info": "$core.color.info1", "badge-color-text-container-neutral": "$core.color.gray7", "badge-color-border-container-success": "$core.color.success1", "badge-color-border-container-warning": "$core.color.warning1", "badge-color-border-container-error": "$core.color.error1", "badge-color-border-container-info": "$core.color.info1", "badge-color-border-container-neutral": "$core.color.gray7", "breadcrumbs-color-text-current-default": "$core.color.gray8", "breadcrumbs-color-text-current-darkMode-true": "$core.color.white", "breadcrumbs-color-text-link-darkMode-true": "$core.color.white", "breadcrumbs-color-icon-darkMode-true": "$core.color.white", "breadcrumbs-color-icon-darkMode-false": "$core.color.gray8", "breadcrumbs-color-background-list-darkMode-true": "$primary1", "button-color-text-root-default": "$core.color.white", "button-color-text-root-solid-default": "$primary2", "button-color-text-root-solid-hover": "$core.color.white", "button-color-text-root-outline": "$primary1", "button-color-text-root-destructive-default": "$core.color.error1", "button-color-text-root-destructive-hover": "$core.color.white", "button-color-text-root-tertiary-default": "$interactive1", "button-color-text-root-tertiary-hover": "$primary1", "button-color-text-root-alternate": "$core.color.white", "button-color-text-root-isDisabled-true": "$core.color.gray5", "button-color-text-root-tertiaryIsDisabled": "$core.color.gray5", "button-color-background-root-solid-hover": "$interactive1", "button-color-background-root-solid-default": "$primary1", "button-color-background-root-outline-default": "$core.color.white", "button-color-background-root-outline-hover": "$buttonOutlineHover", "button-color-background-root-destructive-default": "$core.color.white", "button-color-background-root-destructive-hover": "$core.color.error1", "button-color-background-root-alternate-default": "$primary1", "button-color-background-root-alternate-hover": "$interactive1", "button-color-background-root-ghost-hover": "$core.color.gray4", "button-color-background-root-isDisabled-true": "$core.color.gray3", "button-color-background-root-tertiaryIsDisabled": "transparent", "button-color-border-root-solid-default": "$primary1", "button-color-border-root-solid-hover": "$interactive1", "button-color-border-root-outline-default": "$primary1", "button-color-border-root-destructive": "$core.color.error1", "button-color-border-root-tertiary-hover": "none", "button-color-border-root-alternate-default": "$core.color.white", "button-color-border-root-isDisabled-true": "$core.color.gray3", "button-color-border-root-tertiaryIsDisabled": "$core.color.error1", "button-color-fill-svg-solid-default": "$primary2", "button-color-fill-svg-solid-hover": "$core.color.white", "button-color-fill-svg-outline-default": "$primary1", "button-color-fill-svg-destructive-default": "$core.color.error1", "button-color-fill-svg-destructive-hover": "$core.color.white", "button-color-fill-svg-tertiary-default": "$interactive1", "button-color-fill-svg-tertiary-hover": "$primary1", "button-color-fill-svg-alternate": "$core.color.white", "button-color-fill-svg-isDisabled-true": "$core.color.gray5", "button-color-fill-svg-tertiaryIsDisabled": "$core.color.gray5", "card-color-border-root": "$core.color.gray4", "card-color-border-section": "$core.color.gray4", "card-color-background-root-isNested-true": "$core.color.gray1", "card-color-background-root-isNested-false": "$core.color.white", "card-color-background-header-default": "$core.color.gray3", "card-color-background-header-isNested-true": "$core.color.gray2", "card-color-background-collapseButton-default": "$core.color.white", "card-color-background-collapseButton-hover": "$core.color.gray2", "card-color-text-header-default": "$core.color.gray8", "carousel-color-text-title-default": "$primary1", "carousel-color-text-title-white": "$primary1", "carousel-color-text-title-primary": "$core.color.white", "carousel-color-text-title-secondary": "$core.color.white", "carousel-color-text-slide-variant-default": "$core.color.gray8", "carousel-color-text-slide-variant-white": "$primary1", "carousel-color-text-slide-variant-primary": "$core.color.white", "carousel-color-text-slide-variant-secondary": "$core.color.white", "carousel-color-text-navBullets-isActive": "$core.color.white", "carousel-color-text-playPause": "$core.color.gray8", "carousel-color-text-navLeft": "$core.color.gray8", "carousel-color-text-navRight": "$core.color.gray8", "carousel-color-text-slideButton-primary-default": "$primary1", "carousel-color-text-slideButton-primary-hover": "$primary1", "carousel-color-text-slideButton-secondary-default": "$primary1", "carousel-color-text-slideButton-secondary-hover": "$primary1", "carousel-color-background-bulletContainer-hover": "$primary1", "carousel-color-background-bulletContainer-isActive-hover": "$interactive2", "carousel-color-background-bullets-default": "$core.color.gray6", "carousel-color-background-bullets-isActive": "$interactive1", "carousel-color-background-navMinimalButton": "transparent", "carousel-color-background-slide-variant-default": "$carouselContentDefault", "carousel-color-background-slide-variant-white": "$carouselContentWhite", "carousel-color-background-slide-variant-primary": "$carouselContentPrimary", "carousel-color-background-slide-variant-secondary": "$carouselContentSecondary", "carousel-color-background-slideButton-default-default": "$carouselButtonDefault", "carousel-color-background-slideButton-default-hover": "$interactive1", "carousel-color-background-slideButton-white-default": "$carouselButtonWhite", "carousel-color-background-slideButton-white-hover": "$interactive1", "carousel-color-background-slideButton-primary-default": "$carouselButtonPrimary", "carousel-color-background-slideButton-primary-hover": "$core.color.gray3", "carousel-color-background-slideButton-secondary-default": "$carouselButtonSecondary", "carousel-color-background-slideButton-secondary-hover": "$core.color.gray3", "carousel-color-background-navBullets-default-hover": "$gray2", "carousel-color-background-navBullets-isActive": "$interactive1", "carousel-color-background-navButton-default-hover": "$core.color.gray2", "carousel-color-background-navButton-default-disabled": "$core.color.gray4", "carousel-color-background-controls-variant-default": "$carouselControlsDefault", "carousel-color-background-controls-variant-white": "$carouselControlsWhite", "carousel-color-background-controls-variant-primary": "$carouselControlsPrimary", "carousel-color-background-controls-variant-secondary": "$carouselControlsSecondary", "carousel-color-fill-navMinimalButton-default": "$interactive1", "carousel-color-fill-navMinimalButton-focusVisible": "$interactive2", "carousel-color-fill-navMinimalButton-hover": "$interactive2", "carousel-color-fill-navMinimalButton-active": "$interactive2", "carousel-color-fill-navMinimalButton-isDisabled": "$core.color.gray8", "carousel-color-fill-navMinimalIcon": "$core.color.gray8", "carousel-color-border-slideButton-default-hover": "$interactive1", "carousel-color-border-slideButton-white-default": "$carouselButtonWhite", "carousel-color-border-slideButton-white-hover": "$interactive1", "carousel-color-border-slideButton-primary-default": "$primary1", "carousel-color-border-slideButton-primary-hover": "$primary1", "carousel-color-border-slideButton-secondary-default": "$primary1", "carousel-color-border-slideButton-secondary-hover": "$primary1", "chip-color-text-chipText": "$core.color.gray8", "chip-color-background-closeButton-focus": "$interactive3", "chip-color-background-root-default": "$core.color.gray2", "chip-color-background-root-hoverOrFocus": "$interactive3", "chip-color-background-root-hoverAndFocus": "$interactive3", "chip-color-background-root-focusWithin": "$interactive3", "chip-color-fill-closeButton-focus": "$core.color.error1", "chip-color-fill-closeButton-hoverOrFocus": "$core.color.error1", "chip-color-border-root-outline-true": "$core.color.gray6", "chip-color-icon": "$core.color.gray8", "formInput-color-background-root-default-default": "$core.color.white", "formInput-color-background-root-default-disabled": "$core.color.gray3", "formInput-color-background-root-inputType-checkbox-default": "$core.color.white", "formInput-color-background-root-inputType-checkbox-disabled": "$core.color.white", "formInput-color-background-root-inputType-checkbox-checked": "$interactive1", "formInput-color-background-root-inputType-radio-checked-before": "$interactive1", "formInput-color-background-root-inputType-radio-disabled-default": "$core.color.white", "formInput-color-background-root-inputType-radio-disabled-before": "$core.color.gray5", "formInput-color-background-root-inputType-toggle-default": "$core.color.white", "formInput-color-background-root-inputType-toggle-after": "$core.color.gray6", "formInput-color-background-root-inputType-toggle-disabled-default": "$core.color.gray5", "formInput-color-background-root-inputType-toggle-disabled-after": "$core.color.white", "formInput-color-background-root-inputType-toggle-checked": "$interactive1", "formInput-color-background-root-inputType-toggle-checkedAfter": "$core.color.white", "formInput-color-background-root-inputType-number-default": "$primary2", "formInput-color-background-root-inputType-number-disabled": "$primary2", "formInput-color-background-root-compoundVariants-checkboxError-checked": "$core.color.error1", "formInput-color-background-root-compoundVariants-radioError-checked-before": "$core.color.error1", "formInput-color-background-root-dynamic": "$tint2", "formInput-color-border-root-default-default": "$core.color.gray6", "formInput-color-border-root-default-disabled": "$core.color.gray3", "formInput-color-border-root-error-true-default": "$core.color.error1", "formInput-color-border-root-error-true-hover": "$core.color.error1", "formInput-color-border-root-error-true-focusVisible": "$core.color.error1", "formInput-color-border-root-inputType-checkbox-disabled": "$core.color.gray5", "formInput-color-border-root-inputType-checkbox-checked": "$interactive1", "formInput-color-border-root-inputType-radio-disabled": "$core.color.gray5", "formInput-color-border-root-inputType-radio-checked": "$interactive1", "formInput-color-border-root-inputType-toggle-default": "$core.color.gray6", "formInput-color-border-root-inputType-toggle-disabled": "$core.color.gray5", "formInput-color-border-root-inputType-toggle-checked": "$interactive1", "formInput-color-border-root-inputType-number-default": "$core.color.gray8", "formInput-color-border-root-inputType-number-disabled": "$core.color.gray4", "formInput-color-border-root-compoundVariants-checkboxError-focus": "$core.color.error1", "formInput-color-border-root-compoundVariants-checkboxError-checked": "$core.color.error1", "formInput-color-border-root-compoundVariants-radioError-focus": "$core.color.error1", "formInput-color-border-root-compoundVariants-radioError-checked": "$core.color.error1", "formInput-color-border-root-compoundVariants-timeError-focusWithin": "$core.color.error1", "formInput-color-text-root-default-default": "$core.color.gray8", "formInput-color-text-root-default-disabled": "$core.color.gray7", "formInput-color-text-root-default-placeholder": "$core.color.gray7", "formInput-color-text-root-default-childPlaceholder": "$core.color.gray7", "formInput-color-text-root-inputType-checkbox-default": "$core.color.white", "formInput-color-text-root-inputType-checkbox-checked": "$core.color.white", "formInput-color-text-root-inputType-radio-disabled": "$core.color.gray5", "formInput-color-text-root-inputType-number-default": "$core.color.gray9", "formInput-color-text-root-inputType-number-disabled": "$core.color.gray4", "formInput-color-text-root-dynamic-placeholder": "$gray7", "formInput-color-text-root-dynamic-childPlaceholder": "$gray7", "formInput-color-focusRing-root-default-focus": "$interactive1", "formInput-color-focusRing-root-error-true-focusVisible": "$core.color.error1", "formInput-color-focusRing-root-inputType-time-focusWithin": "$interactive1", "formInput-color-focusRing-root-compoundVariants-checkboxError-focus": "$core.color.error1", "formInput-color-focusRing-root-compoundVariants-radioError-focus": "$core.color.error1", "formInput-color-focusRing-root-compoundVariants-timeError-focusWithin": "$core.color.error1", "formInputAddon-color-background-root-default": "$core.color.gray2", "formInputAddon-color-background-root-disabled": "$core.color.gray3", "formInputAddon-color-border-root-default": "$core.color.gray6", "formInputAddon-color-border-root-disabled": "$core.color.gray3", "formInputAddon-color-border-root-error": "$core.color.error1", "formInputAddon-color-text-root-disabled": "$core.color.gray5", "formInputCheckbox-color-background-checkboxContainer-checkedDisabled": "$core.color.gray5", "formInputCheckbox-color-text-icon": "$core.color.white", "formInputClear-color-text-clearIcon-default": "$core.color.gray6", "formInputClear-color-text-clearIcon-hover": "$error1", "formInputDescriptors-color-text-content-isInvalid-true": "$core.color.error1", "formInputDescriptors-color-text-content-isInvalid-false": "$core.color.gray6", "formInputDescriptors-color-text-content-subtext": "$core.color.gray8", "formInputLabel-color-text-label-default": "$core.color.gray8", "formInputLabel-color-text-label-isDisabled": "$core.color.gray5", "formInputLabel-color-text-requiredIcon": "$core.color.error1", "formInputLabel-color-text-helperIcon": "$interactive1", "icon-color-fill-default": "$interactive1", "iconMaterial-color-default": "$interactive1", "link-color-text-default": "$interactive1", "link-color-text-disabled": "$core.color.gray5", "link-color-text-hover": "$interactive2", "navMenu-color-background-drawerMenuItem-hover": "$core.color.gray2", "navMenu-color-background-itemLink-hover": "$core.color.gray2", "navMenu-color-background-itemLink-disabled-default": "$core.color.gray1", "navMenu-color-background-itemLink-disabled-hover": "$core.color.gray1", "navMenu-color-background-link-default-hover": "$navMenuBackgroundHover", "navMenu-color-background-link-inverted-hover": "$navMenuBackgroundDefault", "navMenu-color-background-list-inverted": "$core.color.white", "navMenu-color-background-menuTrigger-default-hover": "$navMenuBackgroundHover", "navMenu-color-background-menuTrigger-inverted-hover": "$navMenuBackgroundDefault", "navMenu-color-background-root-default": "$navMenuBackgroundDefault", "navMenu-color-background-root-inverted": "$core.color.white", "navMenu-color-background-scrollButton-default-default": "$navMenuBackgroundDefault", "navMenu-color-background-scrollButton-default-hover": "$navMenuBackgroundHover", "navMenu-color-background-scrollButton-inverted-default": "$navMenuBackgroundHover", "navMenu-color-background-scrollButton-inverted-hover": "$navMenuBackgroundDefault", "navMenu-color-background-viewport-default": "$core.color.white", "navMenu-color-border-columnContainer": "$core.color.gray4", "navMenu-color-fill-columnTitleExternalIcon": "$primary1", "navMenu-color-fill-itemLinkExternalIcon-default": "$interactive1", "navMenu-color-fill-itemLinkExternalIcon-disabled": "$core.color.gray5", "navMenu-color-fill-linkIcon-inverted-hover": "$navMenuTextDefault", "navMenu-color-fill-menuTriggerIcon-default-open-default": "$primary1", "navMenu-color-fill-menuTriggerIcon-default-open-hover": "$navMenuTextHover", "navMenu-color-fill-menuTriggerIcon-default-closed": "$navMenuTextDefault", "navMenu-color-fill-menuTriggerIcon-inverted-closed": "$primary1", "navMenu-color-fill-menuTriggerIcon-inverted-open-default": "$core.color.white", "navMenu-color-fill-menuTriggerIcon-inverted-open-hover": "$navMenuTextDefault", "navMenu-color-fill-routerHeaderIcon": "$interactive1", "navMenu-color-fill-scrollButtonIcon-default-default": "$navMenuBackgroundDefault", "navMenu-color-fill-scrollButtonIcon-default-hover": "$navMenuBackgroundHover", "navMenu-color-fill-scrollButtonIcon-inverted-default": "$navMenuBackgroundDefault", "navMenu-color-fill-scrollButtonIcon-inverted-hover": "$navMenuBackgroundHover", "navMenu-color-focus-root": "$interactive1", "navMenu-color-focus-drawerMenuItem": "$interactive1", "navMenu-color-text-columnTitle-default": "$primary1", "navMenu-color-text-columnTitle-action-hover": "$interactive2", "navMenu-color-text-drawerMenuItem": "$interactive1", "navMenu-color-text-itemLinkText-default": "$core.color.gray8", "navMenu-color-text-itemLinkText-disabled": "$core.color.gray5", "navMenu-color-text-itemLinkTitle-default": "$interactive1", "navMenu-color-text-itemLinkTitle-disabled": "$core.color.gray5", "navMenu-color-text-link-default-default": "$navMenuTextDefault", "navMenu-color-text-link-default-hover": "$navMenuTextHover", "navMenu-color-text-link-inverted-default": "$navMenuTextHover", "navMenu-color-text-link-inverted-hover": "$navMenuTextDefault", "navMenu-color-text-menuTrigger-default-default": "$navMenuTextDefault", "navMenu-color-text-menuTrigger-default-hover": "$navMenuTextHover", "navMenu-color-text-menuTrigger-inverted-default": "$navMenuTextHover", "navMenu-color-text-menuTrigger-inverted-hover": "$navMenuTextDefault", "pageBodyIntro-color-background-requiredKeyColorBox": "$tint2", "pageBodyIntro-color-background-requiredKeyContainer": "$core.color.white", "pageBodyIntro-color-background-root": "$core.color.white", "pageBodyIntro-color-border-link-active": "$interactive1", "pageBodyIntro-color-border-linkDivider": "$core.color.gray4", "pageBodyIntro-color-border-profileDataDivider": "$core.color.gray4", "pageBodyIntro-color-border-requiredKeyColorBox": "$core.color.gray4", "pageBodyIntro-color-border-requiredKeyContainer": "$core.color.gray4", "pageBodyIntro-color-fill-requiredKeyRequiredIcon": "$error1", "pageBodyIntro-color-text-link-active": "$core.color.gray8", "pageBodyIntro-color-text-profileHeadingText": "$accent1", "pageBodyIntro-color-text-titleText": "$primary1", "pageFooter-color-background-root": "$footerBackground", "pageFooter-color-border-links": "$footerBorder", "pageFooter-color-border-subFooterDivider": "$footerBorder", "pageFooter-color-text-link-default": "$footerText", "pageFooter-color-text-link-hover": "$footerLinkHover", "pageFooter-color-text-links": "$footerText", "pageFooter-color-text-sectionTitle": "$footerText", "pageFooter-color-text-subFooter": "$footerText", "pageFooter-color-text-subFooterLink-default": "$footerText", "pageFooter-color-text-subFooterLink-hover": "$footerLinkHover", "pagination-color-text-paginationButton-default": "$interactive1", "pagination-color-text-paginationButton-isDisabled-true": "$core.color.gray5", "pagination-color-text-pageButton-default": "$interactive1", "pagination-color-text-pageButton-isActive-true": "$core.color.gray8", "pagination-color-text-abbreviatedContainer": "$core.color.gray7", "pagination-color-text-ellipsis": "$core.color.gray6", "pagination-color-border-paginationButton-isDisabled-true": "$core.color.gray4", "pagination-color-border-paginationButton-disabledLeft": "$core.color.gray4", "pagination-color-border-paginationButton-disabledRight": "$core.color.gray4", "pagination-color-border-pageButton-default": "$core.color.gray4", "pagination-color-border-pageButton-isActive-true": "$core.color.gray6", "pagination-color-border-container": "$core.color.gray4", "pagination-color-border-divider": "$core.color.gray4", "pagination-color-fill-paginationButton-isDisabled-true": "$core.color.gray5", "pagination-color-fill-ellipsis": "$core.color.gray6", "pagination-color-background-container": "$primary2", "pagination-color-background-pageButton-isActive-true": "$primary2", "pagination-color-background-pageButton-isDisabled-true": "$core.color.gray4", "progressBar-color-background-bar": "$core.color.white", "progressBar-color-background-filler": "$success1", "progressBar-color-border-root": "$core.color.gray5", "progressBar-color-text-label": "$core.color.gray8", "progressBar-color-text-progressLabel": "$core.color.white", "progressBar-color-text-subText": "$core.color.gray8", "radioGroup-color-border-root-default": "transparent", "radioGroup-color-border-root-error": "$error1", "radioGroup-color-text-radioButtonRoot-disabled": "$core.color.gray5", "selectInput-color-background-option-focused-default": "$core.color.gray2", "selectInput-color-background-option-focused-disabled": "$core.color.gray3", "selectInput-color-background-option-focused-selected-default": "$core.color.gray4", "selectInput-color-background-option-focused-selected-hover": "$core.color.gray4", "selectInput-color-background-option-disabled-hover": "$core.color.gray3", "selectInput-color-background-option-selected-default": "$selectedOption", "selectInput-color-background-option-selected-hover": "$info2", "selectInput-color-background-optionList": "$core.color.white", "selectInput-color-background-optionListContainer": "$core.color.white", "selectInput-color-background-section": "$core.color.gray2", "selectInput-color-border-input-error": "$error1", "selectInput-color-border-input-open": "$interactive1", "selectInput-color-border-optionListContainer-error": "$error1", "selectInput-color-border-optionListContainer-open": "$interactive1", "selectInput-color-borderTop-input-open-placedTop": "$core.color.gray4", "selectInput-color-borderBottom-input-open-placedBottom": "$core.color.gray4", "selectInput-color-fill-icon-default": "$interactive1", "selectInput-color-fill-icon-disabled": "$core.color.gray5", "selectInput-color-fill-icon-hover": "$interactive1", "selectInput-color-fill-optionIcon-selected": "$core.color.gray8", "selectInput-color-focusRing-input-error": "$error1", "selectInput-color-text-noOptions": "$core.color.gray7", "selectInput-color-text-option-default": "$core.color.gray8", "selectInput-color-text-option-disabled": "$core.color.gray5", "selectInput-color-text-option-selected": "$core.color.gray8", "selectInput-color-text-section": "$core.color.black", "stepIndicator-color-background-stepBar-active": "$interactive1", "stepIndicator-color-background-stepBar-default-inactive": "$core.color.gray6", "stepIndicator-color-background-stepBar-minimal-inactive": "$core.color.gray8", "stepIndicator-color-background-stepIcon-default-default": "$core.color.white", "stepIndicator-color-background-stepIcon-default-complete-hover": "$interactive3", "stepIndicator-color-background-stepIcon-default-incompleteInactive-hover": "$core.color.gray5", "stepIndicator-color-background-stepIcon-minimal-default": "$core.color.gray8", "stepIndicator-color-background-stepIcon-minimal-complete-default": "$core.color.white", "stepIndicator-color-background-stepIcon-minimal-complete-hover": "$core.color.white", "stepIndicator-color-background-stepIcon-minimal-current": "$core.color.white", "stepIndicator-color-background-stepIcon-minimal-incompleteInactive-hover": "$core.color.white", "stepIndicator-color-border-stepIcon-default-default": "$core.color.gray6", "stepIndicator-color-border-stepIcon-default-currentCompletedInteractive": "$core.color.white", "stepIndicator-color-border-stepIcon-default-incompleteInactive": "$core.color.gray6", "stepIndicator-color-border-stepIcon-minimal-default": "$core.color.gray8", "stepIndicator-color-border-stepIcon-minimal-complete": "$core.color.gray8", "stepIndicator-color-border-stepRoot": "$core.color.gray6", "stepIndicator-color-fill-scrollButton": "$interactive1", "stepIndicator-color-fill-stepIcon-default-default": "$core.color.gray8", "stepIndicator-color-fill-stepIcon-default-complete-hover": "$core.color.gray8", "stepIndicator-color-fill-stepIcon-default-incompleteInactive-static": "$core.color.gray8", "stepIndicator-color-fill-stepIcon-default-incompleteInactive-hover": "$core.color.white", "stepIndicator-color-fill-stepIcon-current": "$core.color.white", "stepIndicator-color-outline-stepIcon": "$interactive1", "stepIndicator-color-text-stepIcon-current": "$core.color.white", "stepIndicator-color-text-stepIcon-default-complete-hover": "$core.color.gray8", "stepIndicator-color-text-stepIcon-default-incompleteInactive-static": "$core.color.gray8", "stepIndicator-color-text-stepIcon-default-incompleteInactive-hover": "$core.color.white", "stepIndicator-color-text-stepRoot": "$core.color.gray8", "tabs-color-background-contentContainer": "$core.color.white", "tabs-color-background-tab-arrow-inactive": "$tabBackground", "tabs-color-background-tab-default": "$core.color.white", "tabs-color-background-tab-enclosed-active": "$core.color.white", "tabs-color-background-tab-enclosed-inactive": "$tabBackground", "tabs-color-border-right-tab-enclosed-column-active": "transparent", "tabs-color-border-bottom-tab-enclosed-row-active": "transparent", "tabs-color-border-activeLine": "$accent1", "tabs-color-border-contentContainer": "$core.color.gray3", "tabs-color-border-list": "$core.color.gray3", "tabs-color-border-tab-default": "$core.color.gray3", "tabs-color-border-tab-enclosed-column-active": "$core.color.gray3", "tabs-color-border-tab-enclosed-row-active": "$core.color.gray3", "tabs-color-focusRing-tab": "$interactive1", "tabs-color-text-tab-active": "$core.color.gray8", "tabs-color-text-tab-default": "$interactive1", "tabs-color-text-tab-disabled": "$core.color.gray5", "tabs-color-text-tabSubText": "$core.color.gray7", "textInput-color-border-iconButton": "black", "textInput-color-background-iconButton-default-hover": "$iconButtonHover", "textInput-color-background-iconButton-default-focus": "$primary1", "textInput-color-background-iconButton-isDisabled-true-default": "$gray3", "textInput-color-background-iconButton-isDisabled-true-hover": "transparent", "textInput-color-background-formWrapper": "$primary1", "textInput-color-fill-iconButton-default-focus": "$white", "textInput-color-fill-iconButton-isDisabled-true": "$gray5", "textInput-color-fill-formWrapper": "$white", "timeline-color-background-itemBullet-horizontal-default": "$core.color.white", "timeline-color-background-itemBullet-horizontal-active-withChild": "transparent", "timeline-color-background-itemBullet-vertical-default": "$core.color.white", "timeline-color-background-itemBullet-vertical-active-withChild": "transparent", "timeline-color-default": "$core.color.gray6", "timeline-color-text-item-vertical": "$core.color.black", "timeline-color-text-itemBullet-horizontal-default": "$core.color.white", "timeline-color-text-itemBullet-horizontal-active-withChild": "$core.color.white", "timeline-color-text-itemBullet-vertical-default": "$core.color.white", "timeline-color-text-itemBullet-vertical-active-withChild": "$core.color.white", "toast-color-text-container": "$core.color.white", "toast-color-text-title": "$core.color.white", "toast-color-background-container-warning": "$core.color.warning1", "toast-color-background-container-success": "$core.color.success1", "toast-color-background-container-error": "$core.color.error3", "toast-color-background-container-info": "$core.color.info1", "toast-color-background-toastClose-hover": "$core.color.white", "toast-color-focusRing-toastClose": "$interactive1", "toast-color-fill-toastClose-default": "$core.color.white", "toast-color-fill-toastClose-hover": "$core.color.black", "toast-color-fill-icon": "$core.color.white", "toggleTabs-color-border-root-error": "$core.color.error1", "toggleTabs-color-border-tabRoot-display-row": "$core.color.gray4", "toggleTabs-color-border-tabRoot-display-column": "$core.color.gray4", "toggleTabs-color-background-container": "$gray2", "toggleTabs-color-background-selectedTab-default": "$interactive1", "toggleTabs-color-background-selectedTab-error": "$core.color.error1", "toggleTabs-color-text-tabLabel-default": "$core.color.gray7", "toggleTabs-color-text-tabLabel-isDisabled-true": "$core.color.gray4", "toggleTabs-color-text-tabLabel-checked-true": "$core.color.white", "toggleTabs-color-text-tabLabel-checkedDisabled-false-hover": "$interactive1", "toggleTabs-color-fill-tabLabel-isDisabled-true": "$core.color.gray4", "toggleTabs-color-fill-tabLabel-checked-true": "$core.color.white" }, "space": { "core-space-xs": "4px", "core-space-sm": "8px", "core-space-md": "16px", "core-space-lg": "24px", "core-space-xl": "48px", "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "48px", "cardBase-spacing-padding-all-container": "$web.semantic.spacing.scale.lg", "accordion-space-paddingHorizontal-content": "20px", "accordion-space-paddingHorizontal-trigger": "20px", "accordion-space-paddingVertical-content": "15px", "accordion-space-paddingVertical-trigger": "0px", "accordion-space-paddingBottom-headerContainer": "0px", "accordion-space-marginTop-item": "0px", "alert-space-padding-container": "$core.space.sm", "alert-space-padding-actionButton": "$core.space.sm", "alert-space-paddingTop-childrenContainer": "$core.space.xs", "alert-space-marginTop-alertBody": "$core.space.xs", "alert-space-marginTop-inlineText": "$core.space.xs", "alert-space-marginTop-actionButton": "4px", "alert-space-marginRight-iconContainer": "$core.space.sm", "alert-space-marginRight-headerSection": "$core.space.sm", "alert-space-marginRight-actionButton": "$core.space.sm", "alert-space-marginHorizontal-inlineText": "0px", "alert-space-marginBottom-inlineText": "0px", "alert-space-marginLeft-externalIcon": "$core.space.xs", "badge-space-paddingTop-container": "2px", "badge-space-paddingRight-container": "8px", "badge-space-paddingBottom-container": "2px", "badge-space-paddingLeft-container": "8px", "badge-space-marginLeft-icon": "$core.space.xs", "breadcrumbs-space-margin-list": "0px", "breadcrumbs-space-padding-list": "0px", "breadcrumbs-space-paddingBottom-list-darkMode-true": "$core.space.xs", "breadcrumbs-space-paddingTop-list-darkMode-true": "$core.space.xs", "button-space-padding-content": "$core.space.md", "card-space-marginTop-innerCard": "$core.space.lg", "card-space-marginLeft-buttonContainer": "$core.space.sm", "card-space-paddingLeft-header-size-small": "12px", "card-space-paddingLeft-header-size-medium": "$core.space.lg", "card-space-paddingRight-header-size-small": "12px", "card-space-paddingRight-header-size-medium": "$core.space.lg", "card-space-padding-buttonContainer": "$core.space.sm", "card-space-padding-section-size-small": "12px", "card-space-paddingHorizontal-section-size-medium": "$core.space.lg", "card-space-paddingVertical-section-size-medium": "$core.space.md", "carousel-space-padding-swiperContainer": "0px", "carousel-space-padding-contentWrapper": "24px", "carousel-space-padding-navMinimalButtonContainer": "3px", "carousel-space-padding-navMinimalPaginationContainer": "3px", "carousel-space-paddingBottom-content": "24px", "carousel-space-paddingBottom-title": "16px", "chip-space-marginRight-iconContainer": "$core.space.xs", "chip-space-marginLeft-closeButton": "$core.space.xs", "chip-space-paddingHorizontal-root": "$core.space.sm", "chip-space-paddingVertical-root": "$core.space.xs", "formInput-space-paddingRight-root-iconRight-1": "35px", "formInput-space-paddingRight-root-iconRight-2": "70px", "formInput-space-paddingRight-root-iconRight-3": "105px", "formInput-space-paddingRight-root-compoundVariants-roundedIconRight-1": "40px", "formInput-space-paddingRight-root-compoundVariants-roundedIconRight-2": "75px", "formInput-space-paddingRight-root-compoundVariants-roundedIconRight-3": "110px", "formInput-space-paddingLeft-root-inputLeftElement-true": "35px", "formInput-space-paddingLeft-root-inputType-text": "$core.space.sm", "formInput-space-paddingLeft-root-inputType-time": "$core.space.sm", "formInput-space-paddingLeft-root-compoundVariants-roundedText": "$core.space.md", "formInput-space-paddingLeft-root-compoundVariants-roundedInputLeftElement": "40px", "formInput-space-padding-root-inputType-textArea": "$core.space.sm", "formInput-space-padding-root-inputType-radio": "0px", "formInput-space-paddingVertical-root-inputType-number": "4px", "formInput-space-paddingHorizontal-root-inputType-number": "9px", "formInput-space-gap-root-inputType-number": "10px", "formInputAddon-space-paddingVertical-root": "1px", "formInputAddon-space-paddingHorizontal-root": "8px", "formInputClear-space-padding-clearButton": "0px", "formInputDescriptors-space-paddingTop-content-default": "$core.space.xs", "formInputDescriptors-space-paddingTop-content-displayAsColumn": "0px", "formInputDescriptors-space-marginLeft-content-default": "$core.space.md", "formInputDescriptors-space-marginLeft-content-displayAsColumn": "0px", "formInputElement-space-padding-formInputElementWrapper": "1px", "formInputLabel-space-marginBottom-label-default": "$core.space.xs", "formInputLabel-space-marginBottom-label-inputType-checkbox": "0px", "formInputLabel-space-marginLeft-requiredIndicator": "$core.space.xs", "formInputLabel-space-marginLeft-helper-required": "$core.space.sm", "formInputLabel-space-paddingVertical-label-inputType-checkbox": "0px", "formInputLabel-space-paddingHorizontal-label-inputType-checkbox": "$core.space.sm", "formInputWrapper-space-marginTop": "$core.space.sm", "link-space-marginLeft-externalIcon": "$core.space.xs", "navMenu-space-gap-menuTrigger": "2px", "navMenu-space-margin-columnList": "0px", "navMenu-space-margin-columnTitle": "0px", "navMenu-space-marginLeft-columnContainer": "$core.space.lg", "navMenu-space-marginLeft-columnTitleExternalIcon": "$core.space.xs", "navMenu-space-marginLeft-itemLinkTitleExternalIcon": "$core.space.xs", "navMenu-space-marginBottom-itemLinkTitle": "5px", "navMenu-space-padding-columnList": "$core.space.lg", "navMenu-space-padding-drawerMenuItem": "$core.space.md", "navMenu-space-paddingRight-link-default": "$core.space.lg", "navMenu-space-paddingRight-link-inStateRouter": "0px", "navMenu-space-paddingRight-menuTrigger": "$core.space.lg", "navMenu-space-paddingLeft-columnContainer": "$core.space.lg", "navMenu-space-paddingLeft-link-default": "$core.space.lg", "navMenu-space-paddingLeft-link-inStateRouter": "0px", "navMenu-space-paddingLeft-menuTrigger": "$core.space.lg", "navMenu-space-paddingHorizontal-columnList": "$core.space.lg", "navMenu-space-paddingHorizontal-columnTitle": "0px", "navMenu-space-paddingHorizontal-itemLink": "$core.space.sm", "navMenu-space-paddingHorizontal-scrollButton": "$core.space.xs", "navMenu-space-paddingVertical-columnList": "$core.space.sm", "navMenu-space-paddingVertical-columnTitle": "$core.space.sm", "navMenu-space-paddingVertical-itemLink": "$core.space.xs", "navMenu-space-paddingVertical-scrollButton": "0px", "pageBody-space-paddingHorizontal-container": "$core.space.md", "pageBodyIntro-space-marginRight-linkDivider": "$core.space.sm", "pageBodyIntro-space-marginRight-profileDataDivider": "$core.space.sm", "pageBodyIntro-space-marginRight-profileItemLabel": "$core.space.xs", "pageBodyIntro-space-marginBottom-profileContainer-statusOnBottom": "$core.space.sm", "pageBodyIntro-space-marginBottom-profileHeadingStatusContainer": "$core.space.sm", "pageBodyIntro-space-marginBottom-profileHeadingText-hasStatusSection": "$core.space.sm", "pageBodyIntro-space-marginBottom-requiredKeyText": "$core.space.xs", "pageBodyIntro-space-marginLeft-linkDivider": "$core.space.sm", "pageBodyIntro-space-marginLeft-profileDataDivider": "$core.space.sm", "pageBodyIntro-space-marginLeft-requiredKeyRequiredIndicator": "$core.space.xs", "pageBodyIntro-space-paddingRight-root": "$core.space.lg", "pageBodyIntro-space-paddingLeft-root": "$core.space.lg", "pageFooter-space-gap-links": "40px", "pageFooter-space-marginTop-links": "$core.space.lg", "pageFooter-space-marginTop-linkItem": "$core.space.md", "pageFooter-space-marginRight-subFooterDivider": "$core.space.sm", "pageFooter-space-marginBottom-brandmarkWrapper": "$core.space.md", "pageFooter-space-marginBottom-copyrightContainer": "0px", "pageFooter-space-marginBottom-links": "$core.space.xs", "pageFooter-space-marginBottom-section": "$core.space.lg", "pageFooter-space-marginBottom-sectionTitle": "$core.space.md", "pageFooter-space-marginLeft-subFooterDivider": "$core.space.sm", "pageFooter-space-marginHorizontal-container": "auto", "pageFooter-space-marginVertical-container": "0px", "pageFooter-space-paddingHorizontal-container": "$core.space.lg", "pageFooter-space-paddingVertical-container": "$core.space.md", "pagination-space-padding-paginationButton": "9px", "pagination-space-padding-resultsLabel": "0px", "pagination-space-padding-resultCount": "0px", "pagination-space-padding-rowCount": "0px", "pagination-space-paddingTop-pageButton": "2px", "pagination-space-paddingTop-buttonText": "2px", "pagination-space-paddingLeft-pageButton": "$core.space.sm", "pagination-space-paddingLeft-ellipsis": "$core.space.sm", "pagination-space-paddingRight-pageButton": "$core.space.sm", "pagination-space-paddingRight-ellipsis": "$core.space.sm", "pagination-space-paddingVertical-abbreviatedContainer": "12px", "pagination-space-paddingHorizontal-abbreviatedContainer": "9px", "pagination-space-paddingBottom-ellipsis": "$core.space.xs", "pagination-space-margin-resultsLabel": "0px", "pagination-space-marginRight-resultsLabel": "$core.space.sm", "pagination-space-marginVertical-resultCount": "0px", "pagination-space-marginVertical-rowCount": "0px", "pagination-space-marginHorizontal-resultCount": "$core.space.sm", "pagination-space-marginHorizontal-rowCount": "$core.space.sm", "pagination-space-marginTop-resultCountAdditional": "$core.space.xs", "progressBar-space-margin-progressLabel": "0px", "progressBar-space-marginBottom-label": "0px", "progressBar-space-paddingRight-filler": "3px", "radioGroup-space-margin-root": "0px", "radioGroup-space-marginTop-radioButtonRoot-row": "0px", "radioGroup-space-marginBottom-container-error": "0px", "radioGroup-space-marginBottom-label": "0px", "radioGroup-space-padding-root-default": "0px", "radioGroup-space-padding-root-error": "$core.space.sm", "radioGroup-space-paddingHorizontal-label": "$core.space.sm", "radioGroup-space-paddingVertical-label": "0px", "selectInput-space-margin-noOptions": "$core.space.xs", "selectInput-space-marginLeft-optionContent-span": "$core.space.xs", "selectInput-space-marginLeft-optionIcon": "$core.space.sm", "selectInput-space-scrollMargin-option": "$core.space.sm", "selectInput-space-scrollMargin-section": "$core.space.sm", "selectInput-space-padding-option": "$core.space.sm", "selectInput-space-padding-section": "$core.space.sm", "selectInput-space-paddingBottom-input-open": "1px", "selectInput-space-paddingLeft-option-inSection": "$core.space.md", "selectInput-space-paddingHorizontal-noOptions": "$core.space.sm", "selectInput-space-paddingVertical-noOptions": "$core.space.xs", "stepIndicator-space-margin-root": "0px", "stepIndicator-space-marginTop-stepLabel": "$core.space.sm", "stepIndicator-space-marginVertical-stepIcon": "0px", "stepIndicator-space-padding-stepIcon-default": "$core.space.xs", "stepIndicator-space-padding-stepIcon-minimal-complete-hover": "$core.space.xs", "stepIndicator-space-padding-stepIcon-minimal-incompleteInactive-hover": "$core.space.xs", "stepIndicator-space-paddingHorizontal-scrollButton": "$core.space.xs", "stepIndicator-space-paddingVertical-scrollButton": "0px", "tabs-space-marginRight-tab-enclosed-column": "-1px", "tabs-space-marginRight-tab-enclosed-row": "$core.space.xs", "tabs-space-marginBottom-tab-enclosed-column": "$core.space.xs", "tabs-space-marginBottom-tab-enclosed-row": "-1px", "tabs-space-paddingTop-contentContainer-arrowRow": "42px", "tabs-space-paddingTop-tab": "$core.space.sm", "tabs-space-paddingBottom-tab": "$core.space.sm", "tabs-space-paddingLeft-contentContainer-arrowColumn": "42px", "tabs-space-paddingHorizontal-contentContainer": "$core.space.md", "tabs-space-paddingVertical-contentContainer": "$core.space.lg", "textInput-space-padding-iconButton": "0px", "timeline-space-marginTop-container-horizontal": "$core.space.md", "timeline-space-marginTop-item-vertical": "$core.space.xl", "timeline-space-marginTop-itemTitle-horizontal": "$core.space.md", "timeline-space-marginBottom-itemTitle-horizontal": "2px", "timeline-space-marginBottom-itemTitle-vertical": "2px", "timeline-space-paddingRight-item-horizontal-default": "$core.space.md", "timeline-space-paddingRight-item-horizontal-centered": "0px", "timeline-space-paddingRight-item-vertical-rightAlign": "$core.space.md", "timeline-space-paddingRight-itemContent-horizontal-default": "0px", "timeline-space-paddingRight-itemContent-horizontal-centered": "$core.space.sm", "timeline-space-paddingLeft-item-vertical-leftAlign": "$core.space.md", "timeline-space-paddingLeft-itemContent-horizontal-default": "0px", "timeline-space-paddingLeft-itemContent-horizontal-centered": "$core.space.sm", "toast-space-marginTop-container": "$core.space.sm", "toast-space-padding-container": "$core.space.md", "toast-space-marginRight-body-withCloseButton-true": "$core.space.md", "toast-space-marginRight-body-withCloseButton-false": "$core.space.sm", "toast-space-marginRight-icon": "$core.space.sm", "toast-space-marginRight-loadingContainer": "$core.space.md", "toast-space-margin-title": "0px", "toggleSwitch-space-paddingLeft-toggleLabel": "$core.space.sm", "toggleSwitch-space-marginBottom-toggleLabel": "0px", "toggleTabs-space-padding-root-default": "0px", "toggleTabs-space-padding-root-error": "$core.space.sm", "toggleTabs-space-padding-container": "$core.space.xs", "toggleTabs-space-padding-tabLabel": "$core.space.sm", "toggleTabs-space-margin-root": "0px", "toggleTabs-space-margin-tabLabel": "0px", "toggleTabs-space-marginBottom-container-error": "$core.space.sm" }, "sizes": { "core-size-xs": "0px", "core-size-sm": "360px", "core-size-md": "744px", "core-size-lg": "1248px", "core-size-xl": "1920px", "xs": "0px", "sm": "464px", "md": "744px", "lg": "984px", "xl": "1248px", "accordion-fontSize-icon-chevron": "24px", "accordion-size-minHeight-trigger": "45px", "accordion-size-width-root": "100%", "alert-size-minHeight-container": "48px", "alert-size-width-closeButton": "20px", "alert-size-width-headerContainer": "100%", "alert-size-width-root": "100%", "alert-size-height-closeButton": "20px", "alert-size-height-actionButton": "32px", "alert-fontSize-alertIcon": "26px", "alert-fontSize-closeButton": "22px", "alert-fontSize-externalIcon": "18px", "avatar-size-width-image": "100%", "avatar-size-height-image": "100%", "avatar-size-sizes-default": "40px", "avatar-size-sizes-sm": "32px", "avatar-size-sizes-md": "40px", "avatar-size-sizes-lg": "48px", "badge-size-height-container": "22px", "badge-size-maxWidth-container": "220px", "button-size-root-default": "40px", "button-size-root-sm": "32px", "button-size-root-md": "40px", "button-size-root-lg": "48px", "card-size-height-root-fullHeight-true": "100%", "card-size-minHeight-header-size-small": "52px", "card-size-minHeight-header-size-medium": "68px", "carousel-size-width-container-compact": "300px", "carousel-size-width-slideContainer": "100%", "carousel-size-width-bulletContainer": "24px", "carousel-size-width-bullets-default": "6px", "carousel-size-width-bullets-isActive": "16px", "carousel-size-width-navMinimalButton": "32px", "carousel-size-height-slideContainer": "10%", "carousel-size-height-bulletContainer": "24px", "carousel-size-height-bullets-default": "6px", "carousel-size-height-bullets-isActive": "6px", "carousel-size-height-navMinimalButton": "32px", "carousel-size-height-slide": "100%", "carousel-size-height-navBullets-rounded-true": "32px", "carousel-size-height-navBullets-rounded-false": "48px", "carousel-size-height-navButton-rounded-true": "32px", "carousel-size-height-navButton-rounded-false": "48px", "carousel-size-minHeight-content": "162px", "carousel-size-maxHeight-content": "161px", "carousel-size-minWidth-slide": "0px", "carousel-fontSize-navMinimalIcon": "26px", "carousel-fontSize-playPause": "24px", "carousel-fontSize-navLeft": "26px", "carousel-fontSize-navRight": "26px", "chip-size-minWidth-iconContainer": "16px", "chip-size-maxWidth-iconContainer": "15px", "chip-size-width-closeButton": "13px", "chip-size-height-closeButton": "13px", "chip-size-height-root": "24px", "chip-size-icon-closeButton": "15px", "formInput-size-width-root-default": "100%", "formInput-size-width-root-inputType-toggleTab": "0px", "formInput-size-width-root-inputType-number": "100%", "formInput-size-minHeight-root-inputType-text": "38px", "formInput-size-minHeight-root-inputType-textArea": "38px", "formInput-size-minHeight-root-inputType-time": "38px", "formInput-size-height-root-inputType-toggleTab": "0px", "formInput-size-height-root-inputType-number": "38px", "formInputAddon-size-minHeight-root": "38px", "formInputCheckbox-size-width-icon": "24px", "formInputClear-size-width-clearButton": "35px", "formInputClear-size-height-clearButton": "100%", "formInputElement-size-height-inputElementWrapper": "100%", "formInputElement-size-height-formInputElementWrapper": "100%", "formInputElement-size-minWidth-inputElementWrapper": "35px", "icon-fontSize-default": "24px", "icon-fontSize-xs": "12px", "icon-fontSize-sm": "16px", "icon-fontSize-md": "24px", "icon-fontSize-lg": "48px", "icon-fontSize-xl": "64px", "iconMaterial-fontSize-default": "24px", "navMenu-size-height-link": "100%", "navMenu-size-height-linkRoot-topLevel": "100%", "navMenu-size-height-list": "100%", "navMenu-size-height-menu": "100%", "navMenu-size-height-menuTrigger": "100%", "navMenu-size-maxWidth-root": "$core.size.xl", "navMenu-size-minHeight-columnTitle-hasMultipleColumns": "40px", "navMenu-size-minHeight-container": "52px", "navMenu-size-minHeight-link": "52px", "navMenu-size-minHeight-menuTrigger": "52px", "navMenu-size-minWidth-viewportContainer": "350px", "navMenu-size-width-column": "100%", "navMenu-size-width-columnContainer": "100%", "navMenu-size-width-columnList": "100%", "navMenu-size-width-container": "100%", "navMenu-size-width-menuItem": "100%", "navMenu-size-width-removeScroll": "100%", "navMenu-size-width-root": "100%", "navMenu-size-width-routerHeaderContainer": "100%", "navMenu-size-width-viewport": "100%", "navMenu-size-width-viewportContainer": "100%", "pageBody-size-maxWidth-container-default": "$core.size.lg", "pageBody-size-maxWidth-container-fullWidth": "100%", "pageBodyIntro-size-height-linkDivider": "24px", "pageBodyIntro-size-height-profileDataDivider": "14px", "pageBodyIntro-size-height-requiredKeyColorBox": "30px", "pageBodyIntro-size-height-requiredKeyContainer": "50px", "pageBodyIntro-size-maxWidth-root": "$core.size.xl", "pageBodyIntro-size-minHeight-rowContainer": "48px", "pageBodyIntro-size-minWidth-profileHeadingStatusContainer": "215px", "pageBodyIntro-size-width-requiredKeyColorBox": "30px", "pageBodyIntro-size-width-requiredKeyContainer": "136px", "pageFooter-size-height-subFooterDivider": "9px", "pageFooter-size-maxWidth-container-default": "$core.size.xl", "pageFooter-size-maxWidth-container-fullWidth": "100%", "pageFooter-size-width-container": "100%", "pagination-size-height-paginationButton": "36px", "pagination-size-height-pageButton": "36px", "pagination-size-height-container": "36px", "pagination-size-height-divider": "24px", "pagination-size-height-ellipsis": "36px", "pagination-size-height-pageSizeContainer": "100%", "pagination-size-height-pageSizeSelectInput": "115px", "pagination-size-minWidth-pageButton": "32px", "pagination-size-minWidth-ellipsis": "32px", "progressBar-size-height-root": "20px", "progressBar-size-width-root": "100%", "radioGroup-size-default": "24px", "radioGroup-size-sm": "20px", "radioGroup-size-md": "24px", "selectInput-size-height-iconContainer": "100%", "selectInput-size-maxHeight-optionListContainer": "185px", "selectInput-size-width-iconContainer": "35px", "selectInput-size-width-inputContainer": "100%", "selectInput-size-width-optionContent": "100%", "selectInput-size-width-optionList": "100%", "selectInput-size-width-root": "100%", "stepIndicator-size-height-scrollButton": "30px", "stepIndicator-size-width-scrollButton": "30px", "tabs-size-xs": "40px", "tabs-size-sm": "52px", "tabs-size-md": "64px", "tabs-size-lg": "80px", "tabs-size-xl": "96px", "tabs-size-width-root": "100%", "textInput-size-width-iconButton": "35px", "textInput-size-width-formInputWrapperContainer": "100%", "textInput-size-width-root": "100%", "textInput-size-height-iconButton": "100%", "toast-size-minHeight-toastClose": "25px", "toast-size-minWidth-toastClose": "25px", "toast-size-height-body": "100%", "toast-fontSize-toastClose": "20px", "toggleSwitch-size-default": "24px", "toggleSwitch-size-sm": "18px", "toggleSwitch-size-md": "24px", "toggleSwitch-size-lg": "32px", "toggleTabs-size-width-container-fullWidth": "100%" }, "fontSizes": { "core-fontSize-2xs": "11px", "core-fontSize-xs": "12px", "core-fontSize-sm": "14px", "core-fontSize-md": "16px", "core-fontSize-lg": "18px", "core-fontSize-xl": "20px", "2xs": "11px", "xs": "12px", "sm": "14px", "md": "16px", "lg": "18px", "xl": "20px", "accordion-fontSize-content": "15px", "accordion-fontSize-headerContainer": "$core.font-size.md", "accordion-fontSize-subtext": "$core.font-size.sm", "accordion-fontSize-itemHeader": "15px", "accordion-fontSize-trigger": "15px", "alert-fontSize-container": "$core.font-size.sm", "alert-fontSize-alertBody-timestamp-true": "$core.font-size.xs", "badge-fontSize-content": "$core.font-size.sm", "breadcrumbs-fontSize-current": "$core.font-size.md", "breadcrumbs-fontSize-default": "$core.font-size.md", "breadcrumbs-fontSize-xs": "$core.font-size.xs", "breadcrumbs-fontSize-sm": "$core.font-size.sm", "breadcrumbs-fontSize-md": "$core.font-size.md", "breadcrumbs-fontSize-lg": "$core.font-size.lg", "breadcrumbs-fontSize-xl": "$core.font-size.xl", "breadcrumbs-fontSize-icon": "24px", "button-fontSize-default": "$core.font-size.md", "card-fontSize-header-default": "$core.font-size.lg", "card-fontSize-header-size-small": "$core.font-size.sm", "card-fontSize-section-size-small": "$core.font-size.sm", "card-fontSize-section-size-medium": "$core.font-size.md", "carousel-fontSize-content": "15px", "carousel-fontSize-title": "28px", "checkbox-fontSize-default": "24px", "checkbox-fontSize-xs": "14px", "checkbox-fontSize-sm": "18px", "checkbox-fontSize-md": "24px", "checkbox-fontSize-lg": "30px", "checkbox-fontSize-xl": "40px", "chip-fontSize-chipText": "$core.font-size.xs", "formInput-fontSize-root-default-default": "$core.font-size.sm", "formInput-fontSize-root-default-touchCallout-true": "$core.font-size.sm", "formInput-fontSize-root-default-touchCallout-false": "$core.font-size.md", "formInputClear-fontSize-clearIcon": "$core.font-size.sm", "formInputDescriptors-fontSize-content": "$core.font-size.sm", "formInputLabel-fontSize-label": "$core.font-size.md", "formInputLabel-fontSize-helperIcon": "16px", "formInputLabel-fontSize-requiredIcon": "10px", "iconBrand-fontSize-default": "24px", "link-fontSize-default": "$core.font-size.md", "link-fontSize-xs": "12.64px", "link-fontSize-sm": "$core.font-size.sm", "link-fontSize-md": "$core.font-size.md", "link-fontSize-lg": "$core.font-size.lg", "link-fontSize-xl": "22px", "navMenu-fontSize-columnTitle": "$core.font-size.lg", "navMenu-fontSize-itemLinkText": "$core.font-size.md", "navMenu-fontSize-itemLinkTitle": "$core.font-size.md", "navMenu-fontSize-link": "$core.font-size.md", "navMenu-fontSize-menuTrigger": "$core.font-size.md", "pageBodyIntro-fontSize-link": "$core.font-size.md", "pageBodyIntro-fontSize-profileDataListItem": "$core.font-size.sm", "pageBodyIntro-fontSize-profileHeadingText": "20.25px", "pageBodyIntro-fontSize-requiredKeyRequiredIndicator": "$core.font-size.xl", "pageBodyIntro-fontSize-requiredKeyText": "$core.font-size.md", "pageBodyIntro-fontSize-titleText": "28.83px", "pageFooter-fontSize-copyright": "$core.font-size.xs", "pageFooter-fontSize-sectionTitle": "$core.font-size.xl", "pageFooter-fontSize-subFooter": "$core.font-size.xs", "pageFooter-fontSize-subFooterLink": "$core.font-size.xs", "pagination-fontSize-paginationButton": "$core.font-size.sm", "pagination-fontSize-buttonText": "$core.font-size.sm", "pagination-fontSize-abbreviatedContainer": "$core.font-size.sm", "pagination-fontSize-resultsLabel": "$core.font-size.sm", "pagination-fontSize-resultCount": "$core.font-size.sm", "pagination-fontSize-rowCount": "$core.font-size.sm", "progressBar-fontSize-centerLabel": "$core.font-size.md", "progressBar-fontSize-label": "$core.font-size.md", "progressBar-fontSize-maxLabel": "$core.font-size.sm", "progressBar-fontSize-minLabel": "$core.font-size.sm", "progressBar-fontSize-progressLabel": "$core.font-size.sm", "progressBar-fontSize-subText": "$core.font-size.sm", "selectInput-fontSize-option": "$core.font-size.sm", "selectInput-fontSize-section": "$core.font-size.sm", "tabs-fontSize-tab-lg": "$core.font-size.lg", "tabs-fontSize-tab-md": "$core.font-size.md", "tabs-fontSize-tabSubText": "$core.font-size.xs", "toast-fontSize-description": "$core.font-size.md", "toggleTabs-fontSize-tabLabel": "$core.font-size.sm" }, "fontWeights": { "core-fontWeight-lighter": "200", "core-fontWeight-light": "300", "core-fontWeight-normal": "400", "core-fontWeight-medium": "500", "core-fontWeight-semibold": "600", "core-fontWeight-bold": "700", "core-fontWeight-xbold": "800", "lighter": 200, "light": 300, "normal": 400, "medium": 500, "semibold": 600, "bold": 700, "xbold": 800, "footerFontWeight": "$core.font-weight.bold", "dropDownButtonFontWeight": "$core.font-weight.semibold", "dropDownMenuFontWeight": "$core.font-weight.medium", "toggleTabsFontWeight": "$core.font-weight.semibold", "toolTipFontWeight": "$core.font-weight.medium", "indicatorFontWeight": "$core.font-weight.bold", "accordion-fontWeight-itemHeader": "$core.font-weight.semibold", "avatar-fontWeight-content": "$core.font-weight.medium", "badge-fontWeight-content": "$core.font-weight.bold", "breadcrumbs-fontWeight-current": "$core.font-weight.bold", "breadcrumbs-fontWeight-dividerContainer": "$core.font-weight.medium", "breadcrumbs-fontWeight-link-true": "$core.font-weight.medium", "breadcrumbs-fontWeight-link-false": "$core.font-weight.medium", "button-fontWeight-root": "$core.font-weight.bold", "card-fontWeight-header": "$core.font-weight.bold", "formInputDescriptors-fontWeight-content": "$core.font-weight.medium", "formInputLabel-fontWeight-label-default": "$core.font-weight.bold", "formInputLabel-fontWeight-label-inputType-checkbox": "$core.font-weight.normal", "link-fontWeight-semibold": "$core.font-weight.semibold", "navMenu-fontWeight-columnTitle": "$core.font-weight.bold", "navMenu-fontWeight-itemLinkText": "$core.font-weight.normal", "navMenu-fontWeight-itemLinkTitle": "$core.font-weight.bold", "navMenu-fontWeight-link": "$core.font-weight.bold", "navMenu-fontWeight-menuTrigger": "$core.font-weight.bold", "pageBodyIntro-fontWeight-link": "$core.font-weight.bold", "pageBodyIntro-fontWeight-profileHeadingText": "$core.font-weight.bold", "pageBodyIntro-fontWeight-profileItemLabel": "$core.font-weight.medium", "pageBodyIntro-fontWeight-profileItemValue": "$core.font-weight.bold", "pageBodyIntro-fontWeight-requiredKeyText": "$core.font-weight.bold", "pageBodyIntro-fontWeight-titleText": "$core.font-weight.semibold", "pageFooter-fontWeight-link": "$footerFontWeight", "pageFooter-fontWeight-links": "$footerFontWeight", "pageFooter-fontWeight-sectionTitle": "$core.font-weight.bold", "pagination-fontWeight-paginationButton": "$core.font-weight.semibold", "pagination-fontWeight-buttonText": "$core.font-weight.semibold", "pagination-fontWeight-abbreviatedContainer": "$core.font-weight.semibold", "progressBar-fontWeight-centerLabel": "$core.font-weight.bold", "progressBar-fontWeight-label": "$core.font-weight.bold", "progressBar-fontWeight-maxLabel": "$core.font-weight.bold", "progressBar-fontWeight-minLabel": "$core.font-weight.bold", "progressBar-fontWeight-progressLabel": "$core.font-weight.bold", "progressBar-fontWeight-subText": "$core.font-weight.normal", "radioGroup-fontWeight-label": "$core.font-weight.normal", "selectInput-fontWeight-section": "$core.font-weight.bold", "stepIndicator-fontWeight-stepIcon": "$core.font-weight.bold", "stepIndicator-fontWeight-stepRoot-default": "$core.font-weight.normal", "stepIndicator-fontWeight-stepRoot-current": "$core.font-weight.bold", "tabs-fontWeight-tab-default": "$core.font-weight.bold", "tabs-fontWeight-tab-enclosed": "$core.font-weight.semibold", "tabs-fontWeight-tab-line": "$core.font-weight.semibold", "tabs-fontWeight-tabSubText": "$core.font-weight.normal", "timeline-fontWeight-itemTitle-horizontal": "$core.font-weight.medium", "timeline-fontWeight-itemTitle-vertical": "$core.font-weight.medium", "toast-fontWeight-title": "$core.font-weight.bold", "toggleSwitch-fontWeight-toggleLabel": "$core.font-weight.normal", "toggleTabs-fontWeight-tabLabel": "$toggleTabsFontWeight" }, "fonts": { "core-fonts-code": "Menlo, Monaco, Lucida Console, monospace", "core-fonts-markdown": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", "code": "Menlo, Monaco, Lucida Console, monospace", "markdown": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"", "primary": "AbyssUHCSans, Arial, sans-serif", "heading": "AbyssUHCSerif, Georgia Bold, serif", "accordion-fontFamily": "$primary", "avatar-fontFamily": "$primary", "card-fontFamily-header": "$primary", "formInput-fontFamily-root": "$primary", "link-fontFamily": "$primary", "navMenu-fontFamily-columnTitle": "$primary", "navMenu-fontFamily-itemLinkText": "$primary", "navMenu-fontFamily-itemLinkTitle": "$primary", "pageBodyIntro-fontFamily-profileHeadingText": "$primary", "pagination-fontFamily-paginationButton": "$primary", "pagination-fontFamily-buttonText": "$primary", "pagination-fontFamily-abbreviatedContainer": "$primary", "progressBar-fontFamily-label": "$primary", "selectInput-fontFamily-option": "$primary", "selectInput-fontFamily-section": "$primary", "tabs-fontFamily-tab": "$primary", "toggleTabs-fontFamily-tabLabel": "$primary" }, "radii": { "core-borderRadius-xl": "20px", "cardBase-borderRadius-all-container": "$web.semantic.border-radius.container.large", "accordion-borderRadius-root": "6px", "accordion-borderRadius-item": "4px", "alert-borderRadius-container": "4px", "alert-borderRadius-closeButton": "4px", "alert-borderRadius-actionButton": "4px", "avatar-borderRadius-root": "$core.border-radius.full", "avatar-borderRadius-image": "$core.border-radius.full", "avatar-borderRadius-content": "$core.border-radius.full", "badge-borderRadius-container-rounded-true": "100px", "badge-borderRadius-container-rounded-false": "4px", "button-borderRadius-root-default": "50px", "button-borderRadius-root-tertiary": "0px", "card-borderRadius-all-root": "4px", "card-borderRadius-all-collapseButton": "40px", "card-borderRadius-topLeft-header": "4px", "card-borderRadius-topRight-header": "4px", "carousel-borderRadius-bullets": "50px", "carousel-borderRadius-navBullets-rounded": "50%", "carousel-borderRadius-navButton-rounded": "50%", "chip-borderRadius-root": "100px", "formInput-borderRadius-all-root-default": "$core.border-radius.xs", "formInput-borderRadius-all-root-inputType-radio-default": "50%", "formInput-borderRadius-all-root-inputType-radio-disabled-before": "50%", "formInput-borderRadius-all-root-inputType-radio-checked-before": "50%", "formInput-borderRadius-all-root-inputType-toggle-after": "50%", "formInput-borderRadius-all-root-inputType-number": "0px", "formInput-borderRadius-topLeft-root-leftAddOn-true": "0px", "formInput-borderRadius-bottomLeft-root-leftAddOn-true": "0px", "formInput-borderRadius-topRight-root-rightAddOn-true": "0px", "formInput-borderRadius-bottomRight-root-rightAddOn-true": "0px", "formInputAddon-borderRadius-topLeft-orientation-left": "4px", "formInputAddon-borderRadius-bottomLeft-orientation-left": "4px", "formInputAddon-borderRadius-topRight-orientation-right": "4px", "formInputAddon-borderRadius-bottomRight-orientation-right": "4px", "formInputClear-borderRadius-clearButton": "4px", "navMenu-borderRadius-itemLink": "$core.border-radius.xs", "navMenu-borderRadius-viewport": "$core.border-radius.xs", "pageBodyIntro-borderRadius-requiredKeyContainer": "3px", "pagination-borderRadius-paginationButton-default": "0px", "pagination-borderRadius-paginationButton-left": "4px", "pagination-borderRadius-paginationButton-right": "4px", "pagination-borderRadius-container": "5px", "progressBar-borderRadius-root": "3px", "radioGroup-borderRadius-root": "5px", "selectInput-borderRadius-inputContainer": "4px", "selectInput-borderRadius-topLeft-input-open-placedBottom": "4px", "selectInput-borderRadius-topLeft-input-open-placedTop": "0px", "selectInput-borderRadius-topLeft-optionList-open-placedBottom": "0px", "selectInput-borderRadius-topLeft-optionList-open-placedTop": "4px", "selectInput-borderRadius-topLeft-optionListContainer-open-placedBottom": "0px", "selectInput-borderRadius-topLeft-optionListContainer-open-placedTop": "4px", "selectInput-borderRadius-topRight-input-open-placedBottom": "4px", "selectInput-borderRadius-topRight-input-open-placedTop": "0px", "selectInput-borderRadius-topRight-optionList-open-placedBottom": "0px", "selectInput-borderRadius-topRight-optionList-open-placedTop": "4px", "selectInput-borderRadius-topRight-optionListContainer-open-placedBottom": "0px", "selectInput-borderRadius-topRight-optionListContainer-open-placedTop": "4px", "selectInput-borderRadius-bottomRight-input-open-placedBottom": "0px", "selectInput-borderRadius-bottomRight-input-open-placedTop": "4px", "selectInput-borderRadius-bottomRight-optionList-open-placedBottom": "4px", "selectInput-borderRadius-bottomRight-optionList-open-placedTop": "0px", "selectInput-borderRadius-bottomRight-optionListContainer-open-placedBottom": "4px", "selectInput-borderRadius-bottomRight-optionListContainer-open-placedTop": "0px", "selectInput-borderRadius-bottomLeft-input-open-placedBottom": "0px", "selectInput-borderRadius-bottomLeft-input-open-placedTop": "4px", "selectInput-borderRadius-bottomLeft-optionList-open-placedBottom": "4px", "selectInput-borderRadius-bottomLeft-optionList-open-placedTop": "0px", "selectInput-borderRadius-bottomLeft-optionListContainer-open-placedBottom": "4px", "selectInput-borderRadius-bottomLeft-optionListContainer-open-placedTop": "0px", "stepIndicator-borderRadius-stepIcon": "$core.border-radius.full", "stepIndicator-borderRadius-scrollButton": "50%", "tabs-borderRadius-topRight-contentContainer-enclosed": "5px", "tabs-borderRadius-topRight-tab-enclosed": "5px", "tabs-borderRadius-topLeft-tab-enclosed": "5px", "tabs-borderRadius-bottomRight-contentContainer-enclosed": "5px", "tabs-borderRadius-bottomLeft-contentContainer-enclosed": "5px", "tabs-borderRadius-bottomLeft-tab-enclosed": "5px", "textInput-borderRadius-all-iconButton": "0px", "textInput-borderRadius-all-formWrapper": "4px", "textInput-borderRadius-topRight-iconButton": "3px", "textInput-borderRadius-bottomRight-iconButton": "3px", "timeline-borderRadius-itemBullet-horizontal": "$core.border-radius.full", "timeline-borderRadius-itemBullet-vertical": "$core.border-radius.full", "toast-borderRadius-container": "8px", "toast-borderRadius-toastClose": "50%", "toggleSwitch-borderRadius-toggleSwitch": "40px", "toggleTabs-borderRadius-root": "5px", "toggleTabs-borderRadius-selectedTab-default": "4px", "toggleTabs-borderRadius-selectedTab-sm": "0px", "toggleTabs-borderRadius-selectedTab-md": "4px", "toggleTabs-borderRadius-selectedTab-lg": "24px" }, "borderWidths": { "cardBase-borderWidth-all-container": "$web.semantic.border-width.container", "accordion-borderWidth-border-root": "10px", "accordion-borderWidth-borderBottom-trigger": "1px", "alert-borderWidth-container": "1px", "alert-borderWidth-actionButton": "1px", "alert-borderWidth-borderLeftWidth-container": "3px", "avatar-borderWidth-content-outline": "1px", "badge-borderWidth-container-outline-true": "2px", "button-borderWidth-root-solid": "1px", "button-borderWidth-root-outline": "1px", "button-borderWidth-root-destructive": "1px", "button-borderWidth-root-alternate": "1px", "card-borderWidth-root": "1px", "card-borderWidth-section": "1px", "chip-borderWidth-root-outline-true": "1px", "formInput-borderWidth-root-default": "1px", "formInput-borderWidth-root-inputType-checkbox": "2px", "formInput-borderWidth-root-inputType-radio": "2px", "formInput-borderWidth-root-inputType-toggle": "2px", "formInput-borderWidth-root-inputType-toggleTab": "0px", "formInput-borderWidth-root-inputType-numberVertical": "1px", "formInput-borderWidth-root-inputType-numberHorizontal": "0px", "formInputAddon-borderWidth-root": "1px", "formInputCheckbox-borderWidth-icon": "3px", "link-borderWidth": "2px", "navMenu-borderWidth-columnContainer": "1px", "pageBodyIntro-borderWidth-link-active": "4px", "pageBodyIntro-borderWidth-linkDivider": "0.5px", "pageBodyIntro-borderWidth-profileDataDivider": "2px", "pageBodyIntro-borderWidth-requiredKeyColorBox": "1px", "pageBodyIntro-borderWidth-requiredKeyContainer": "1px", "pageFooter-borderWidth-links": "1px", "pageFooter-borderWidth-subFooterDivider": "1px", "pagination-borderWidth-paginationButton-isDisabled-true": "1px", "pagination-borderWidth-paginationButton-disabledLeft": "1px", "pagination-borderWidth-paginationButton-disabledRight": "1px", "pagination-borderWidth-pageButton-default": "1px", "pagination-borderWidth-pageButton-isActive-true": "1px", "pagination-borderWidth-container": "1px", "pagination-borderWidth-divider": "1px", "progressBar-borderWidth-root": "2px", "radioGroup-borderWidth-root": "1px", "selectInput-borderWidth-optionListContainer-open": "1px", "stepIndicator-borderWidth-stepIcon-default-default": "3px", "stepIndicator-borderWidth-stepIcon-default-currentCompletedInteractive": "2px", "stepIndicator-borderWidth-stepIcon-minimal-currentCompletedInteractive": "2px", "stepIndicator-borderWidth-stepIcon-minimal-complete-hover": "3px", "stepIndicator-borderWidth-stepIcon-minimal-incompleteInactive-hover": "3px", "stepIndicator-borderWidth-stepIcon-outline": "3px", "tabs-borderWidth-top-activeLine-arrow-row": "4px", "tabs-borderWidth-top-activeLine-enclosed-row": "4px", "tabs-borderWidth-top-activeLine-line-row": "4px", "tabs-borderWidth-top-contentContainer": "1px", "tabs-borderWidth-top-tab-arrow": "1px", "tabs-borderWidth-right-activeLine-line-column": "4px", "tabs-borderWidth-right-contentContainer": "1px", "tabs-borderWidth-right-tab-arrow-row": "1px", "tabs-borderWidth-right-tab-line-column": "0px", "tabs-borderWidth-bottom-contentContainer": "1px", "tabs-borderWidth-bottom-tab-arrow-column": "1px", "tabs-borderWidth-left-activeLine-arrow-column": "4px", "tabs-borderWidth-left-activeLine-enclosed-column": "4px", "tabs-borderWidth-left-contentContainer": "1px", "tabs-borderWidth-left-tab-arrow": "1px", "tabs-borderWidth-list-displayRow": "1px", "tabs-borderWidth-list-line": "1px", "tabs-borderWidth-tab-default": "0px", "tabs-borderWidth-tab-enclosed": "1px", "timeline-borderWidth-itemBullet-horizontal": "2px", "timeline-borderWidth-itemBullet-vertical": "2px", "toggleTabs-borderWidth-root": "1px", "toggleTabs-borderWidth-tabRoot-display-row": "1px", "toggleTabs-borderWidth-tabRoot-display-column": "1px" }, "opacities": {}, "lineHeights": { "core-lineHeight-2xs": "12px", "core-lineHeight-xs": "16px", "core-lineHeight-sm": "18px", "core-lineHeight-md": "20px", "core-lineHeight-lg": "24px", "core-lineHeight-xl": "24px", "accordion-lineHeight-headerContainer": "140%", "accordion-lineHeight-itemHeader": "100%", "accordion-lineHeight-trigger": "100%", "alert-lineHeight-container": "$core.line-height.sm", "avatar-lineHeight-content": "$core.line-height.lg", "breadcrumbs-lineHeight-dividerContainer": "0px", "card-lineHeight-header": "1.5", "carousel-lineHeight-content": "150%", "carousel-lineHeight-title": "26px", "chip-lineHeight-chipText": "1", "formInput-lineHeight-root": "$core.line-height.lg", "formInputDescriptors-lineHeight-content": "16px", "formInputLabel-lineHeight-requiredIndicator": "0", "formInputLabel-lineHeight-requiredIcon": "0", "link-lineHeight": "$core.line-height.lg", "navMenu-lineHeight-columnTitle": "27px", "navMenu-lineHeight-columnTitleExternalIcon": "0px", "navMenu-lineHeight-itemLinkText": "1.4", "navMenu-lineHeight-itemLinkTitle": "1.2", "navMenu-lineHeight-itemLinkTitleExternalIcon": "0px", "pageBodyIntro-lineHeight-link": "$core.line-height.md", "pageBodyIntro-lineHeight-profileDataListItem": "22px", "pageBodyIntro-lineHeight-profileHeadingText": "1.5rem", "pageBodyIntro-lineHeight-requiredKeyRequiredIcon": "14px", "pageBodyIntro-lineHeight-requiredKeyRequiredIndicator": "14px", "pagination-lineHeight-resultsLabel": "100%", "pagination-lineHeight-resultCount": "100%", "pagination-lineHeight-rowCount": "100%", "progressBar-lineHeight-label": "1.5", "progressBar-lineHeight-subText": "20px", "stepIndicator-lineHeight-stepLabel": "$core.line-height.sm", "tabs-lineHeight-tabSubText": "$core.line-height.md", "timeline-lineHeight-itemTitle-horizontal": "1", "timeline-lineHeight-itemTitle-vertical": "1", "toast-lineHeight-icon": "0px", "toast-lineHeight-description": "1.5" }, "letterSpacings": {}, "textCase": {}, "textDecoration": {}, "typography": {}, "borderStyles": { "accordion-borderStyle-border-root": "solid", "accordion-borderStyle-borderBottom-trigger": "solid", "alert-borderStyle-container": "solid", "avatar-borderStyle-content-outline": "solid", "badge-borderStyle-container-outline-true": "solid", "button-borderStyle-root-solid": "solid", "button-borderStyle-root-outline": "solid", "button-borderStyle-root-destructive": "solid", "button-borderStyle-root-tertiary": "none", "button-borderStyle-root-alternate": "solid", "card-borderStyle-root": "solid", "carousel-borderStyle-slideButton-primary-default": "solid", "carousel-borderStyle-slideButton-primary-hover": "solid", "carousel-borderStyle-slideButton-secondary-default": "solid", "carousel-borderStyle-slideButton-secondary-hover": "solid", "chip-borderStyle-root-outline-true": "solid", "formInput-border-root-default": "solid", "formInput-border-root-inputType-number": "solid", "formInputAddon-border-root": "solid", "pagination-border-paginationButton-isDisabled-true": "solid", "pagination-border-paginationButton-disabledLeft": "solid", "pagination-border-paginationButton-disabledRight": "solid", "pagination-border-pageButton-default": "solid", "pagination-border-pageButton-isActive-true": "solid", "pagination-border-container": "solid", "pagination-border-divider": "solid" }}Legacy tokens migration table
To help with your migration, we've additionally created an interactive table that shows each legacy token, its resolved value, and all matching semantic tokens in the new system. You can click on any token to copy it to your clipboard.
Note: Some legacy tokens may not have direct semantic token matches. In these cases, you'll need to either find a semantically similar token, use a core token directly, or add a custom token to your theme.
| Resolved Value | Legacy Tokens | Semantic Tokens |
|---|---|---|
-1px | $tabs-space-marginBottom-tab-enclosed-row $tabs-space-marginRight-tab-enclosed-column | No matching semantic tokens found |
-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' | $core-fonts-markdown | No matching semantic tokens found |
-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" | $markdown | No matching semantic tokens found |
#000000 | $accordion-color-text-subtext-default $black $core-color-black $core-color-neutral-100 $selectInput-color-text-section $timeline-color-text-item-vertical $toast-color-fill-toastClose-hover | $web.semantic.color.icon.interactive.active.neutral $web.semantic.color.icon.interactive.active.secondary $web.semantic.color.surface.interactive.standards.active.default.neutral $web.semantic.color.text.footer.active $web.semantic.color.text.interactive.active.neutral $web.semantic.color.text.interactive.active.secondary |
#00184D | $carousel-color-background-slideButton-white-default $carousel-color-border-slideButton-white-default $carouselButtonWhite $core-color-brand-120 $interactive4 | $web.semantic.color.icon.interactive.active.primary $web.semantic.color.surface.interactive.controls.active.selected.pickers $web.semantic.color.surface.interactive.nav-menu-item.active.default $web.semantic.color.surface.interactive.nav-menu-item.active.selected $web.semantic.color.surface.interactive.standards.active.default.primary |
#001D5B | $core-color-brand-110 | No matching semantic tokens found |
#002677 | $accordion-color-text-content $accordion-color-text-trigger $avatar-color-background-content-solid $avatar-color-border-content-colorTheme-aqua $avatar-color-border-content-colorTheme-skyBlue $avatar-color-fill-content-colorTheme-aqua $avatar-color-fill-content-colorTheme-skyBlue $avatar-color-text-content-colorTheme-aqua $avatar-color-text-content-colorTheme-skyBlue $avatarContentAquaBorderColor $avatarContentBlueBorderColor $breadcrumbs-color-background-list-darkMode-true $button-color-background-root-alternate-default $button-color-background-root-solid-default $button-color-border-root-outline-default $button-color-border-root-solid-default $button-color-fill-svg-outline-default $button-color-fill-svg-tertiary-hover $button-color-text-root-outline $button-color-text-root-tertiary-hover $carousel-color-background-bulletContainer-hover $carousel-color-background-slide-variant-primary $carousel-color-background-slideButton-default-default $carousel-color-border-slideButton-primary-default $carousel-color-border-slideButton-primary-hover $carousel-color-border-slideButton-secondary-default $carousel-color-border-slideButton-secondary-hover $carousel-color-text-slide-variant-white $carousel-color-text-slideButton-primary-default $carousel-color-text-slideButton-primary-hover $carousel-color-text-slideButton-secondary-default $carousel-color-text-slideButton-secondary-hover $carousel-color-text-title-default $carousel-color-text-title-white $carouselButtonDefault $carouselContentPrimary $core-color-brand-100 $footerBackground $loadingSpinnerPrimary1 $navMenu-color-background-link-inverted-hover $navMenu-color-background-menuTrigger-inverted-hover $navMenu-color-background-root-default $navMenu-color-background-scrollButton-default-default $navMenu-color-background-scrollButton-inverted-hover $navMenu-color-fill-columnTitleExternalIcon $navMenu-color-fill-menuTriggerIcon-default-open-default $navMenu-color-fill-menuTriggerIcon-default-open-hover $navMenu-color-fill-menuTriggerIcon-inverted-closed $navMenu-color-fill-scrollButtonIcon-default-default $navMenu-color-fill-scrollButtonIcon-inverted-default $navMenu-color-text-columnTitle-default $navMenu-color-text-link-default-hover $navMenu-color-text-link-inverted-default $navMenu-color-text-menuTrigger-default-hover $navMenu-color-text-menuTrigger-inverted-default $navMenuBackgroundDefault $navMenuTextHover $pageBodyIntro-color-text-titleText $pageFooter-color-background-root $primary1 $textInput-color-background-formWrapper $textInput-color-background-iconButton-default-focus | $web.semantic.color.border.content.primary $web.semantic.color.border.interactive.controls.active.selected $web.semantic.color.icon.content.primary $web.semantic.color.icon.interactive.active.tertiary $web.semantic.color.icon.interactive.rest.primary $web.semantic.color.surface.container.header.topLevelNav $web.semantic.color.surface.container.primary $web.semantic.color.surface.interactive.controls.active.selected.choice $web.semantic.color.surface.interactive.controls.rest.selected.pickers $web.semantic.color.surface.interactive.nav-menu-item.rest.default $web.semantic.color.surface.interactive.standards.active.selected.tertiary $web.semantic.color.surface.interactive.standards.rest.default.primary $web.semantic.color.text.content.primary $web.semantic.color.text.interactive.active.primary $web.semantic.color.text.label.cta.primary |
#003A8D | $core-color-brand-90 | No matching semantic tokens found |
#004BA0 | $carousel-color-background-bulletContainer-isActive-hover $carousel-color-fill-navMinimalButton-active $carousel-color-fill-navMinimalButton-focusVisible $carousel-color-fill-navMinimalButton-hover $core-color-brand-80 $interactive2 $link-color-text-hover $navMenu-color-text-columnTitle-action-hover | $web.semantic.color.border.interactive.controls.hover.selected $web.semantic.color.border.interactive.focus.regular $web.semantic.color.icon.interactive.hover.primary $web.semantic.color.icon.interactive.hover.tertiary $web.semantic.color.surface.interactive.controls.hover.selected.choice $web.semantic.color.surface.interactive.controls.hover.selected.pickers $web.semantic.color.surface.interactive.nav-menu-item.hover.default $web.semantic.color.surface.interactive.nav-menu-item.hover.selected $web.semantic.color.surface.interactive.standards.hover.default.primary $web.semantic.color.surface.interactive.standards.hover.selected.tertiary $web.semantic.color.text.interactive.hover.primary |
#007000 | $alert-color-border-actionButton-success $alert-color-border-root-success $alert-color-icon-alertIcon-success $avatar-color-border-content-colorTheme-mint $avatar-color-fill-content-colorTheme-mint $avatar-color-text-content-colorTheme-mint $avatarContentMintBorderColor $badge-color-border-container-success $badge-color-text-container-success $core-color-green-100 $core-color-statusDvz2 $core-color-success1 $progressBar-color-background-filler $statusDvz2 $success1 $toast-color-background-container-success | $web.semantic.color.border.status.saturated.success $web.semantic.color.icon.status.success $web.semantic.color.surface.container.status.success.saturated $web.semantic.color.text.status.success |
#00BED5 | $core-color-pacific-100 $secondary1 | No matching semantic tokens found |
#03AB03 | $core-color-statusDvz1 $statusDvz1 | No matching semantic tokens found |
#0C55B8 | $core-color-brand-70 | No matching semantic tokens found |
#126ECF | $core-color-blue-80 | $web.semantic.color.border.status.saturated.info $web.semantic.color.icon.status.info $web.semantic.color.text.status.info |
#149E8F | $core-color-turquoise-100 | $web.semantic.color.surface.decorative.turquoise.1 |
#155C8E | $core-color-sapphireDvz2 $sapphireDvz2 | No matching semantic tokens found |
#15A796 | $core-color-primaryDvz1 $core-color-turquoise-60 $core-color-turquoise-80 $primaryDvz1 | No matching semantic tokens found |
#19191A | $core-color-neutral-110 | No matching semantic tokens found |
#196ECF | $accent1 $alert-color-border-actionButton-info $alert-color-border-root-info $alert-color-icon-alertIcon-info $badge-color-border-container-info $badge-color-text-container-info $button-color-background-root-alternate-hover $button-color-background-root-solid-hover $button-color-border-root-solid-hover $button-color-fill-svg-tertiary-default $button-color-text-root-tertiary-default $carousel-color-background-bullets-isActive $carousel-color-background-navBullets-isActive $carousel-color-background-slide-variant-secondary $carousel-color-background-slideButton-default-hover $carousel-color-background-slideButton-white-hover $carousel-color-border-slideButton-default-hover $carousel-color-border-slideButton-white-hover $carousel-color-fill-navMinimalButton-default $carouselContentSecondary $core-color-brand-60 $core-color-info1 $formInput-color-background-root-inputType-checkbox-checked $formInput-color-background-root-inputType-radio-checked-before $formInput-color-background-root-inputType-toggle-checked $formInput-color-border-root-inputType-checkbox-checked $formInput-color-border-root-inputType-radio-checked $formInput-color-border-root-inputType-toggle-checked $formInput-color-focusRing-root-default-focus $formInput-color-focusRing-root-inputType-time-focusWithin $formInputLabel-color-text-helperIcon $icon-color-fill-default $iconMaterial-color-default $info1 $interactive1 $link-color-text-default $navMenu-color-fill-itemLinkExternalIcon-default $navMenu-color-fill-routerHeaderIcon $navMenu-color-focus-drawerMenuItem $navMenu-color-focus-root $navMenu-color-text-drawerMenuItem $navMenu-color-text-itemLinkTitle-default $pageBodyIntro-color-border-link-active $pageBodyIntro-color-text-profileHeadingText $pagination-color-text-pageButton-default $pagination-color-text-paginationButton-default $selectInput-color-border-input-open $selectInput-color-border-optionListContainer-open $selectInput-color-fill-icon-default $selectInput-color-fill-icon-hover $stepIndicator-color-background-stepBar-active $stepIndicator-color-fill-scrollButton $stepIndicator-color-outline-stepIcon $tabs-color-border-activeLine $tabs-color-focusRing-tab $tabs-color-text-tab-default $toast-color-background-container-info $toast-color-focusRing-toastClose $toggleTabs-color-background-selectedTab-default $toggleTabs-color-text-tabLabel-checkedDisabled-false-hover $toggleTabsSelected | $web.semantic.color.border.interactive.controls.rest.selected $web.semantic.color.border.interactive.forms.hover $web.semantic.color.border.interactive.state-affordance.selected $web.semantic.color.icon.interactive.rest.tertiary $web.semantic.color.surface.container.status.info.saturated $web.semantic.color.surface.interactive.controls.rest.selected.choice $web.semantic.color.surface.interactive.nav-menu-item.rest.selected $web.semantic.color.surface.interactive.standards.rest.selected.tertiary $web.semantic.color.text.interactive.rest.primary |
#1E82CB | $core-color-sapphire-60 $core-color-sapphire-80 $core-color-sapphireDvz1 $sapphireDvz1 | No matching semantic tokens found |
#1EA21C | $core-color-green-80 | No matching semantic tokens found |
#212223 | $core-color-gray9 $formInput-color-text-root-inputType-number-default $gray9 | No matching semantic tokens found |
#218371 | $core-color-primaryDvz2 $primaryDvz2 | No matching semantic tokens found |
#222324 | $core-color-neutral-95 | $web.semantic.color.icon.interactive.hover.neutral $web.semantic.color.surface.interactive.standards.hover.default.neutral $web.semantic.color.text.interactive.hover.neutral |
#224AA0 | $core-color-blue-100 | No matching semantic tokens found |
#323334 | $alert-color-icon-closeButton $alert-color-text-actionButton-default $alert-color-text-actionButton-hover $alert-color-text-alertBody-timestamp-true $breadcrumbs-color-icon-darkMode-false $breadcrumbs-color-text-current-default $card-color-text-header-default $carousel-color-fill-navMinimalButton-isDisabled $carousel-color-fill-navMinimalIcon $carousel-color-text-navLeft $carousel-color-text-navRight $carousel-color-text-playPause $carousel-color-text-slide-variant-default $chip-color-icon $chip-color-text-chipText $core-color-gray8 $core-color-neutral-90 $formInput-color-border-root-inputType-number-default $formInput-color-text-root-default-default $formInputDescriptors-color-text-content-subtext $formInputLabel-color-text-label-default $gray8 $navMenu-color-text-itemLinkText-default $pageBodyIntro-color-text-link-active $pagination-color-text-pageButton-isActive-true $progressBar-color-text-label $progressBar-color-text-subText $selectInput-color-fill-optionIcon-selected $selectInput-color-text-option-default $selectInput-color-text-option-selected $stepIndicator-color-background-stepBar-minimal-inactive $stepIndicator-color-background-stepIcon-minimal-default $stepIndicator-color-border-stepIcon-minimal-complete $stepIndicator-color-border-stepIcon-minimal-default $stepIndicator-color-fill-stepIcon-default-complete-hover $stepIndicator-color-fill-stepIcon-default-default $stepIndicator-color-fill-stepIcon-default-incompleteInactive-static $stepIndicator-color-text-stepIcon-default-complete-hover $stepIndicator-color-text-stepIcon-default-incompleteInactive-static $stepIndicator-color-text-stepRoot $tabs-color-text-tab-active | $web.semantic.color.border.content.neutral $web.semantic.color.border.interactive.controls.active.default $web.semantic.color.icon.content.secondary $web.semantic.color.icon.interactive.hover.secondary $web.semantic.color.icon.interactive.rest.neutral $web.semantic.color.surface.interactive.standards.active.default.tertiary $web.semantic.color.surface.interactive.standards.rest.default.neutral $web.semantic.color.text.content.secondary $web.semantic.color.text.footer.hover $web.semantic.color.text.interactive.hover.secondary $web.semantic.color.text.interactive.rest.neutral $web.semantic.color.text.label.cta.secondary |
#414B59 | $core-color-neutral-85 | No matching semantic tokens found |
#422C88 | $core-color-purpleDvz2 $purpleDvz2 | No matching semantic tokens found |
#424242 | $core-color-foreground $foreground | No matching semantic tokens found |
#4B4D4F | $badge-color-border-container-neutral $badge-color-text-container-neutral $core-color-gray7 $core-color-neutral-80 $formInput-color-text-root-default-childPlaceholder $formInput-color-text-root-default-disabled $formInput-color-text-root-default-placeholder $formInput-color-text-root-dynamic-childPlaceholder $formInput-color-text-root-dynamic-placeholder $gray7 $pagination-color-text-abbreviatedContainer $selectInput-color-text-noOptions $tabs-color-text-tabSubText $toggleTabs-color-text-tabLabel-default | $web.semantic.color.border.interactive.controls.hover.default $web.semantic.color.border.interactive.forms.rest $web.semantic.color.border.status.saturated.neutral $web.semantic.color.icon.interactive.disabled.primary $web.semantic.color.icon.interactive.rest.secondary $web.semantic.color.icon.status.neutral $web.semantic.color.surface.container.inverse $web.semantic.color.surface.container.status.neutral.saturated $web.semantic.color.surface.interactive.standards.hover.default.tertiary $web.semantic.color.text.content.tertiary $web.semantic.color.text.footer.rest $web.semantic.color.text.interactive.rest.secondary $web.semantic.color.text.label.cta.disabled $web.semantic.color.text.label.forms.primary $web.semantic.color.text.status.neutral |
#567000 | $core-color-green-90 | No matching semantic tokens found |
#626974 | $core-color-neutral-75 | No matching semantic tokens found |
#6D6F70 | $core-color-neutral-70 | No matching semantic tokens found |
#7D7F81 | $accordion-color-fill-chevron-disabled $accordion-color-text-header-disabled $accordion-color-text-subtext-disabled $carousel-color-background-bullets-default $chip-color-border-root-outline-true $core-color-gray6 $core-color-neutral-60 $formInput-color-background-root-inputType-toggle-after $formInput-color-border-root-default-default $formInput-color-border-root-inputType-toggle-default $formInputAddon-color-border-root-default $formInputClear-color-text-clearIcon-default $formInputDescriptors-color-text-content-isInvalid-false $gray6 $pagination-color-border-pageButton-isActive-true $pagination-color-fill-ellipsis $pagination-color-text-ellipsis $stepIndicator-color-background-stepBar-default-inactive $stepIndicator-color-border-stepIcon-default-default $stepIndicator-color-border-stepIcon-default-incompleteInactive $stepIndicator-color-border-stepRoot $timeline-color-default | $web.semantic.color.border.interactive.controls.disabled.default $web.semantic.color.border.interactive.controls.disabled.selected $web.semantic.color.border.interactive.controls.rest.default $web.semantic.color.icon.interactive.disabled.secondary $web.semantic.color.surface.interactive.controls.disabled.selected.choice $web.semantic.color.surface.interactive.standards.rest.default.tertiary $web.semantic.color.text.interactive.disabled.primary |
#7D8C97 | $core-color-neutral-65 | No matching semantic tokens found |
#8061BC | $core-color-purple-60 $core-color-purple-80 $core-color-purpleDvz1 $purpleDvz1 | No matching semantic tokens found |
#826100 | $core-color-yellow-140 | No matching semantic tokens found |
#890000 | $core-color-red-130 | $web.semantic.color.icon.interactive.active.status.error $web.semantic.color.text.interactive.active.status.error |
#8A96A0 | $core-color-neutral-55 | No matching semantic tokens found |
#8C195E | $core-color-secondaryDvz2 $secondaryDvz2 | No matching semantic tokens found |
#929496 | $button-color-fill-svg-isDisabled-true $button-color-fill-svg-tertiaryIsDisabled $button-color-text-root-isDisabled-true $button-color-text-root-tertiaryIsDisabled $core-color-gray5 $core-color-neutral-50 $formInput-color-background-root-inputType-radio-disabled-before $formInput-color-background-root-inputType-toggle-disabled-default $formInput-color-border-root-inputType-checkbox-disabled $formInput-color-border-root-inputType-radio-disabled $formInput-color-border-root-inputType-toggle-disabled $formInput-color-text-root-inputType-radio-disabled $formInputAddon-color-text-root-disabled $formInputCheckbox-color-background-checkboxContainer-checkedDisabled $formInputLabel-color-text-label-isDisabled $gray5 $link-color-text-disabled $navMenu-color-fill-itemLinkExternalIcon-disabled $navMenu-color-text-itemLinkText-disabled $navMenu-color-text-itemLinkTitle-disabled $pagination-color-fill-paginationButton-isDisabled-true $pagination-color-text-paginationButton-isDisabled-true $progressBar-color-border-root $radioGroup-color-text-radioButtonRoot-disabled $selectInput-color-fill-icon-disabled $selectInput-color-text-option-disabled $stepIndicator-color-background-stepIcon-default-incompleteInactive-hover $tabs-color-text-tab-disabled $textInput-color-fill-iconButton-isDisabled-true | No matching semantic tokens found |
#990000 | $core-color-error3 $core-color-red-120 $error3 $toast-color-background-container-error | $web.semantic.color.border.status.saturated.error $web.semantic.color.icon.interactive.rest.status.error $web.semantic.color.icon.status.error $web.semantic.color.surface.container.status.error.saturated $web.semantic.color.surface.interactive.standards.active.default.status.error $web.semantic.color.surface.interactive.standards.rest.default.status.error $web.semantic.color.text.interactive.rest.status.error $web.semantic.color.text.status.error |
#A5DFE7 | $core-color-pacific-30 $tint4 | No matching semantic tokens found |
#ad6a08 | $core-color-yellow-170 | $web.semantic.color.icon.interactive.decorative.active |
#AEE2D5 | $core-color-primaryDvz3 $primaryDvz3 | No matching semantic tokens found |
#B20000 | $core-color-red-110 | $web.semantic.color.icon.interactive.hover.status.error $web.semantic.color.surface.interactive.standards.hover.default.status.error $web.semantic.color.text.interactive.hover.status.error |
#B2DEF2 | $core-color-pacific-40 | No matching semantic tokens found |
#B2EBF2 | $core-color-pacific-50 | No matching semantic tokens found |
#B7ECB0 | $core-color-statusDvz3 $statusDvz3 | No matching semantic tokens found |
#B85B06 | $core-color-tangerineDvz2 $tangerineDvz2 | No matching semantic tokens found |
#bd7309 | $core-color-yellow-160 | No matching semantic tokens found |
#BFDBBF | $core-color-green-50 | $web.semantic.color.border.status.subtle.success |
#C24E14 | $alert-color-border-actionButton-warning $alert-color-border-root-warning $alert-color-icon-alertIcon-warning $avatar-color-border-content-colorTheme-peach $avatar-color-fill-content-colorTheme-peach $avatar-color-text-content-colorTheme-peach $avatarContentPeachBorderColor $badge-color-border-container-warning $badge-color-text-container-warning $core-color-orange-120 $core-color-warning1 $toast-color-background-container-warning $warning1 | $web.semantic.color.border.status.saturated.warning $web.semantic.color.icon.status.warning $web.semantic.color.surface.container.status.warning.saturated $web.semantic.color.text.status.warning |
#C3D8F2 | $core-color-blue-60 | $web.semantic.color.border.status.subtle.info |
#C40000 | $alert-color-border-actionButton-error $alert-color-border-root-error $alert-color-icon-alertIcon-error $badge-color-border-container-error $badge-color-text-container-error $button-color-background-root-destructive-hover $button-color-border-root-destructive $button-color-border-root-tertiaryIsDisabled $button-color-fill-svg-destructive-default $button-color-text-root-destructive-default $chip-color-fill-closeButton-focus $chip-color-fill-closeButton-hoverOrFocus $core-color-error1 $core-color-red-100 $core-color-redDvz2 $error1 $formInput-color-background-root-compoundVariants-checkboxError-checked $formInput-color-background-root-compoundVariants-radioError-checked-before $formInput-color-border-root-compoundVariants-checkboxError-checked $formInput-color-border-root-compoundVariants-checkboxError-focus $formInput-color-border-root-compoundVariants-radioError-checked $formInput-color-border-root-compoundVariants-radioError-focus $formInput-color-border-root-compoundVariants-timeError-focusWithin $formInput-color-border-root-error-true-default $formInput-color-border-root-error-true-focusVisible $formInput-color-border-root-error-true-hover $formInput-color-focusRing-root-compoundVariants-checkboxError-focus $formInput-color-focusRing-root-compoundVariants-radioError-focus $formInput-color-focusRing-root-compoundVariants-timeError-focusWithin $formInput-color-focusRing-root-error-true-focusVisible $formInputAddon-color-border-root-error $formInputClear-color-text-clearIcon-hover $formInputDescriptors-color-text-content-isInvalid-true $formInputLabel-color-text-requiredIcon $pageBodyIntro-color-fill-requiredKeyRequiredIcon $radioGroup-color-border-root-error $redDvz2 $selectInput-color-border-input-error $selectInput-color-border-optionListContainer-error $selectInput-color-focusRing-input-error $toggleTabs-color-background-selectedTab-error $toggleTabs-color-border-root-error | No matching semantic tokens found |
#C4DFF6 | $core-color-sapphireDvz3 $sapphireDvz3 | No matching semantic tokens found |
#C5D2EC | $core-color-blue-50 | No matching semantic tokens found |
#C72887 | $core-color-pink-60 $core-color-pink-80 $core-color-secondaryDvz1 $secondaryDvz1 | No matching semantic tokens found |
#CBCCCD | $button-color-background-root-ghost-hover $card-color-border-root $card-color-border-section $cardBase-color-border-container $carousel-color-background-navButton-default-disabled $core-color-gray4 $core-color-neutral-30 $formInput-color-border-root-inputType-number-disabled $formInput-color-text-root-inputType-number-disabled $gray4 $navMenu-color-border-columnContainer $pageBodyIntro-color-border-linkDivider $pageBodyIntro-color-border-profileDataDivider $pageBodyIntro-color-border-requiredKeyColorBox $pageBodyIntro-color-border-requiredKeyContainer $pagination-color-background-pageButton-isDisabled-true $pagination-color-border-container $pagination-color-border-divider $pagination-color-border-pageButton-default $pagination-color-border-paginationButton-disabledLeft $pagination-color-border-paginationButton-disabledRight $pagination-color-border-paginationButton-isDisabled-true $selectInput-color-background-option-focused-selected-default $selectInput-color-background-option-focused-selected-hover $selectInput-color-borderBottom-input-open-placedBottom $selectInput-color-borderTop-input-open-placedTop $toggleTabs-color-border-tabRoot-display-column $toggleTabs-color-border-tabRoot-display-row $toggleTabs-color-fill-tabLabel-isDisabled-true $toggleTabs-color-text-tabLabel-isDisabled-true | $web.semantic.color.border.content.secondary $web.semantic.color.border.interactive.state-affordance.default $web.semantic.color.border.status.subtle.neutral $web.semantic.color.surface.interactive.controls.disabled.default.choice $web.semantic.color.surface.interactive.standards.active.default.quaternary $web.semantic.color.surface.interactive.standards.disabled.default.quaternary $web.semantic.color.surface.interactive.standards.disabled.default.tertiary $web.semantic.color.surface.interactive.standards.disabled.selected.quaternary $web.semantic.color.surface.interactive.standards.disabled.selected.tertiary |
#CBCFDB | $core-color-neutral-45 | No matching semantic tokens found |
#D0F1F5 | $tint3 | No matching semantic tokens found |
#D2800A | $core-color-yellow-130 | No matching semantic tokens found |
#D2800F | $core-color-yellow-120 | $web.semantic.color.border.content.decorative.gold.2 $web.semantic.color.icon.interactive.decorative.hover $web.semantic.color.icon.interactive.decorative.rest $web.semantic.color.surface.decorative.gold.2 |
#D3D1E4 | $core-color-skyBlue-30 | No matching semantic tokens found |
#D4F1F5 | $core-color-aqua-30 | No matching semantic tokens found |
#D4F5F2 | $core-color-aqua-40 | No matching semantic tokens found |
#D9CFEB | $core-color-purpleDvz3 $purpleDvz3 | No matching semantic tokens found |
#D9E9FA | $button-color-background-root-outline-hover $buttonOutlineHover $carousel-color-background-controls-variant-primary $carousel-color-background-controls-variant-white $carouselControlsPrimary $carouselControlsWhite $chip-color-background-closeButton-focus $chip-color-background-root-focusWithin $chip-color-background-root-hoverAndFocus $chip-color-background-root-hoverOrFocus $core-color-brand-20 $iconButtonHover $interactive3 $stepIndicator-color-background-stepIcon-default-complete-hover $textInput-color-background-iconButton-default-hover | $web.semantic.color.surface.interactive.controls.selection $web.semantic.color.surface.interactive.standards.active.selected.quaternary $web.semantic.color.surface.interactive.standards.active.selected.secondary |
#D9F6FA | $core-color-aqua-20 $core-color-pacific-20 | No matching semantic tokens found |
#E3EEFA | $core-color-brand-10 | $web.semantic.color.surface.interactive.buttons.active.cta $web.semantic.color.surface.interactive.standards.hover.selected.quaternary $web.semantic.color.surface.interactive.standards.hover.selected.secondary |
#E4780C | $core-color-tangerine-60 $core-color-tangerine-80 $core-color-tangerineDvz1 $tangerineDvz1 | No matching semantic tokens found |
#E4DAD1 | $core-color-warmWhite-50 | No matching semantic tokens found |
#E4F1F5 | $core-color-aqua-10 | No matching semantic tokens found |
#E5DBBB | $core-color-yellow-50 | No matching semantic tokens found |
#E5E5E6 | $accordion-color-background-trigger-disabled $button-color-background-root-isDisabled-true $button-color-border-root-isDisabled-true $card-color-background-header-default $carousel-color-background-slideButton-primary-hover $carousel-color-background-slideButton-secondary-hover $core-color-gray3 $core-color-neutral-20 $formInput-color-background-root-default-disabled $formInput-color-border-root-default-disabled $formInputAddon-color-background-root-disabled $formInputAddon-color-border-root-disabled $gray3 $selectInput-color-background-option-disabled-hover $selectInput-color-background-option-focused-disabled $tabs-color-border-contentContainer $tabs-color-border-list $tabs-color-border-tab-default $tabs-color-border-tab-enclosed-column-active $tabs-color-border-tab-enclosed-row-active $textInput-color-background-iconButton-isDisabled-true-default | $web.semantic.color.border.content.tertiary $web.semantic.color.border.interactive.buttons.active.alt $web.semantic.color.icon.interactive.active.primary-alt $web.semantic.color.surface.interactive.controls.active.default.pickers $web.semantic.color.surface.interactive.standards.active.default.secondary $web.semantic.color.surface.interactive.standards.hover.default.quaternary $web.semantic.color.text.interactive.active.alt |
#E5E8F0 | $core-color-neutral-40 | No matching semantic tokens found |
#E5F7FF | $core-color-pacific-15 | No matching semantic tokens found |
#E5F8FB | $carousel-color-background-slide-variant-default $carouselContentDefault $closeIconHover $core-color-aqua-15 $formInput-color-background-root-dynamic $pageBodyIntro-color-background-requiredKeyColorBox $selectInput-color-background-option-selected-default $selectedOption $tint2 | $web.semantic.color.surface.container.emphasis.4 |
#E5FBF8 | $core-color-aqua-35 | No matching semantic tokens found |
#E6F5E6 | $core-color-green-30 | No matching semantic tokens found |
#E8C0C0 | $core-color-red-60 | $web.semantic.color.border.status.subtle.error |
#E9EFFA | $core-color-blue-15 | No matching semantic tokens found |
#EBE8E1 | $core-color-warmWhite-40 | No matching semantic tokens found |
#ECFAFC | $core-color-pacific-10 | No matching semantic tokens found |
#EDE9E7 | $core-color-warmWhite-15 | No matching semantic tokens found |
#EDECFC | $core-color-blue-0 | No matching semantic tokens found |
#EDF3FB | $alert-color-background-container-info $badge-color-background-container-info $core-color-blue-5 $core-color-brand-5 $core-color-info2 $info2 $selectInput-color-background-option-selected-hover | $web.semantic.color.surface.interactive.buttons.hover.cta $web.semantic.color.surface.interactive.standards.rest.selected.quaternary $web.semantic.color.surface.interactive.standards.rest.selected.secondary |
#EEF4FF | $core-color-blue-10 | $web.semantic.color.surface.container.status.info.tint |
#EEF8FB | $avatar-color-background-content-colorTheme-aqua $avatarContentAquaBgc $core-color-aqua-5 $pastel1 $tint1 | No matching semantic tokens found |
#EEFAFF | $core-color-pacific-5 | No matching semantic tokens found |
#EEFBF9 | $core-color-aqua-25 | No matching semantic tokens found |
#EFF6EF | $core-color-green-10 | No matching semantic tokens found |
#EFF9EF | $avatar-color-background-content-colorTheme-mint $avatarContentMintBgc $pastel4 | No matching semantic tokens found |
#F0F0F0 | $core-color-neutral-15 | No matching semantic tokens found |
#F0F9ED | $core-color-green-20 $green-20 $successLight | $web.semantic.color.surface.container.emphasis.1 $web.semantic.color.surface.container.status.success.tint |
#F1C0C0 | $core-color-red-50 | No matching semantic tokens found |
#F1F6F7 | $core-color-skyBlue-10 | No matching semantic tokens found |
#F2F8E6 | $alert-color-background-container-success $badge-color-background-container-success $core-color-success2 $success2 | No matching semantic tokens found |
#F3D8C0 | $core-color-orange-50 | $web.semantic.color.border.status.subtle.warning |
#F3F3F3 | $badge-color-background-container-neutral $card-color-background-collapseButton-hover $card-color-background-header-isNested-true $carousel-color-background-navBullets-default-hover $carousel-color-background-navButton-default-hover $chip-color-background-root-default $core-color-gray2 $core-color-neutral-10 $formInputAddon-color-background-root-default $gray2 $navMenu-color-background-drawerMenuItem-hover $navMenu-color-background-itemLink-hover $selectInput-color-background-option-focused-default $selectInput-color-background-section $toggleTabs-color-background-container | $web.semantic.color.border.interactive.buttons.hover.alt $web.semantic.color.icon.interactive.hover.primary-alt $web.semantic.color.surface.backgrounds.secondary $web.semantic.color.surface.container.status.neutral.tint $web.semantic.color.surface.container.tertiary $web.semantic.color.surface.interactive.controls.hover.default.pickers $web.semantic.color.surface.interactive.standards.disabled.default.primary $web.semantic.color.surface.interactive.standards.disabled.default.secondary $web.semantic.color.surface.interactive.standards.hover.default.secondary $web.semantic.color.surface.interactive.standards.rest.default.quaternary $web.semantic.color.text.interactive.hover.alt |
#F3F5FB | $core-color-neutral-35 | No matching semantic tokens found |
#F4F4F4 | $background $core-color-background | No matching semantic tokens found |
#F5B700 | $core-color-yellow-100 $secondary2 | $web.semantic.color.border.content.decorative.gold.1 $web.semantic.color.icon.content.decorative.1 $web.semantic.color.surface.decorative.gold.1 |
#F5F3ED | $core-color-peach-10 $core-color-warmWhite-20 | $web.semantic.color.surface.interactive.buttons.active.neutral |
#F6BCDC | $core-color-secondaryDvz3 $secondaryDvz3 | No matching semantic tokens found |
#F6F5FF | $core-color-skyBlue-20 | No matching semantic tokens found |
#F7EFE9 | $core-color-peach-30 | No matching semantic tokens found |
#F7FCFD | $avatar-color-background-content-colorTheme-skyBlue $avatarContentBlueBgc $core-color-skyBlue-5 $pastel2 | No matching semantic tokens found |
#F8F8FF | $core-color-skyBlue-15 | No matching semantic tokens found |
#F9D1D1 | $core-color-red-40 | $web.semantic.color.surface.interactive.buttons.active.pair-error |
#FAF5F2 | $core-color-warmWhite-5 | No matching semantic tokens found |
#FAF8F2 | $core-color-peach-5 $core-color-warmWhite-10 | $web.semantic.color.surface.container.emphasis.2 $web.semantic.color.surface.interactive.buttons.hover.neutral |
#FAFAFA | $accordion-color-background-root $accordion-color-background-trigger-hover $card-color-background-root-isNested-true $carousel-color-background-controls-variant-default $carouselControlsDefault $core-color-gray-5 $core-color-gray1 $core-color-neutral-5 $gray1 $navMenu-color-background-itemLink-disabled-default $navMenu-color-background-itemLink-disabled-hover $tabBackground $tabs-color-background-tab-arrow-inactive $tabs-color-background-tab-enclosed-inactive | No matching semantic tokens found |
#FAFBFF | $core-color-neutral-25 | No matching semantic tokens found |
#FAFCFF | $core-color-skyBlue-0 | $web.semantic.color.surface.container.emphasis.3 |
#FAFDFF | $core-color-neutral-1 | No matching semantic tokens found |
#FBEAF1 | $core-color-red-5 | No matching semantic tokens found |
#FCF0F0 | $alert-color-background-container-error $badge-color-background-container-error $core-color-error2 $core-color-red-10 $error2 | $web.semantic.color.surface.container.status.error.tint $web.semantic.color.surface.interactive.buttons.hover.pair-error |
#FCF6F1 | $avatar-color-background-content-colorTheme-peach $avatarContentPeachBgc $core-color-peach-20 $pastel3 | No matching semantic tokens found |
#FEB5B1 | $core-color-redDvz3 $redDvz3 | No matching semantic tokens found |
#FEF9EA | $core-color-yellow-10 | No matching semantic tokens found |
#FF1A1A | $core-color-redDvz1 $redDvz1 | No matching semantic tokens found |
#FF612B | $core-color-orange-100 | No matching semantic tokens found |
#FF6814 | $secondary3 | No matching semantic tokens found |
#FFD7B3 | $core-color-tangerineDvz3 $tangerineDvz3 | No matching semantic tokens found |
#FFFBEB | $alert-color-background-container-warning $badge-color-background-container-warning $core-color-orange-10 $core-color-warning2 $warning2 | $web.semantic.color.surface.container.status.warning.tint |
#FFFFFF | $accordion-color-background-content $accordion-color-background-trigger-closedOpen $alert-color-background-actionButton-error $alert-color-background-actionButton-info $alert-color-background-actionButton-success $alert-color-background-actionButton-warning $alert-color-background-closeButton-hover $alert-color-background-container-base $avatar-color-fill-content-solid $avatar-color-text-content-solid $breadcrumbs-color-icon-darkMode-true $breadcrumbs-color-text-current-darkMode-true $breadcrumbs-color-text-link-darkMode-true $button-color-background-root-destructive-default $button-color-background-root-outline-default $button-color-border-root-alternate-default $button-color-fill-svg-alternate $button-color-fill-svg-destructive-hover $button-color-fill-svg-solid-default $button-color-fill-svg-solid-hover $button-color-text-root-alternate $button-color-text-root-default $button-color-text-root-destructive-hover $button-color-text-root-solid-default $button-color-text-root-solid-hover $card-color-background-collapseButton-default $card-color-background-root-isNested-false $cardBase-color-surface-container $carousel-color-background-controls-variant-secondary $carousel-color-background-slide-variant-white $carousel-color-background-slideButton-primary-default $carousel-color-background-slideButton-secondary-default $carousel-color-text-navBullets-isActive $carousel-color-text-slide-variant-primary $carousel-color-text-slide-variant-secondary $carousel-color-text-title-primary $carousel-color-text-title-secondary $carouselButtonPrimary $carouselButtonSecondary $carouselContentWhite $carouselControlsSecondary $core-color-neutral-0 $core-color-white $footerBorder $footerLinkHover $footerText $formInput-color-background-root-default-default $formInput-color-background-root-inputType-checkbox-default $formInput-color-background-root-inputType-checkbox-disabled $formInput-color-background-root-inputType-number-default $formInput-color-background-root-inputType-number-disabled $formInput-color-background-root-inputType-radio-disabled-default $formInput-color-background-root-inputType-toggle-checkedAfter $formInput-color-background-root-inputType-toggle-default $formInput-color-background-root-inputType-toggle-disabled-after $formInput-color-text-root-inputType-checkbox-checked $formInput-color-text-root-inputType-checkbox-default $formInputCheckbox-color-text-icon $navMenu-color-background-link-default-hover $navMenu-color-background-list-inverted $navMenu-color-background-menuTrigger-default-hover $navMenu-color-background-root-inverted $navMenu-color-background-scrollButton-default-hover $navMenu-color-background-scrollButton-inverted-default $navMenu-color-background-viewport-default $navMenu-color-fill-linkIcon-inverted-hover $navMenu-color-fill-menuTriggerIcon-default-closed $navMenu-color-fill-menuTriggerIcon-inverted-open-default $navMenu-color-fill-menuTriggerIcon-inverted-open-hover $navMenu-color-fill-scrollButtonIcon-default-hover $navMenu-color-fill-scrollButtonIcon-inverted-hover $navMenu-color-text-link-default-default $navMenu-color-text-link-inverted-hover $navMenu-color-text-menuTrigger-default-default $navMenu-color-text-menuTrigger-inverted-hover $navMenuBackgroundHover $navMenuTextDefault $pageBodyIntro-color-background-requiredKeyContainer $pageBodyIntro-color-background-root $pageFooter-color-border-links $pageFooter-color-border-subFooterDivider $pageFooter-color-text-link-default $pageFooter-color-text-link-hover $pageFooter-color-text-links $pageFooter-color-text-sectionTitle $pageFooter-color-text-subFooter $pageFooter-color-text-subFooterLink-default $pageFooter-color-text-subFooterLink-hover $pagination-color-background-container $pagination-color-background-pageButton-isActive-true $primary2 $progressBar-color-background-bar $progressBar-color-text-progressLabel $selectInput-color-background-optionList $selectInput-color-background-optionListContainer $stepIndicator-color-background-stepIcon-default-default $stepIndicator-color-background-stepIcon-minimal-complete-default $stepIndicator-color-background-stepIcon-minimal-complete-hover $stepIndicator-color-background-stepIcon-minimal-current $stepIndicator-color-background-stepIcon-minimal-incompleteInactive-hover $stepIndicator-color-border-stepIcon-default-currentCompletedInteractive $stepIndicator-color-fill-stepIcon-current $stepIndicator-color-fill-stepIcon-default-incompleteInactive-hover $stepIndicator-color-text-stepIcon-current $stepIndicator-color-text-stepIcon-default-incompleteInactive-hover $tabs-color-background-contentContainer $tabs-color-background-tab-default $tabs-color-background-tab-enclosed-active $textInput-color-fill-formWrapper $textInput-color-fill-iconButton-default-focus $timeline-color-background-itemBullet-horizontal-default $timeline-color-background-itemBullet-vertical-default $timeline-color-text-itemBullet-horizontal-active-withChild $timeline-color-text-itemBullet-horizontal-default $timeline-color-text-itemBullet-vertical-active-withChild $timeline-color-text-itemBullet-vertical-default $toast-color-background-toastClose-hover $toast-color-fill-icon $toast-color-fill-toastClose-default $toast-color-text-container $toast-color-text-title $toggleTabs-color-fill-tabLabel-checked-true $toggleTabs-color-text-tabLabel-checked-true $white | $web.semantic.color.border.content.alt $web.semantic.color.border.content.decorative.branding $web.semantic.color.border.interactive.buttons.rest.alt $web.semantic.color.border.interactive.focus.alt $web.semantic.color.icon.content.header $web.semantic.color.icon.content.primary-alt $web.semantic.color.icon.interactive.rest.primary-alt $web.semantic.color.surface.backgrounds.primary $web.semantic.color.surface.container.header.main $web.semantic.color.surface.container.secondary $web.semantic.color.surface.interactive.buttons.rest.cta $web.semantic.color.surface.interactive.buttons.rest.neutral $web.semantic.color.surface.interactive.buttons.rest.pair-error $web.semantic.color.surface.interactive.controls.active.default.choice $web.semantic.color.surface.interactive.controls.hover.default.choice $web.semantic.color.surface.interactive.controls.rest.default.choice $web.semantic.color.surface.interactive.controls.rest.default.pickers $web.semantic.color.surface.interactive.standards.rest.default.secondary $web.semantic.color.text.content.primary-alt $web.semantic.color.text.interactive.rest.alt $web.semantic.color.text.label.cta.header.active $web.semantic.color.text.label.cta.header.default $web.semantic.color.text.label.cta.primary-alt |
0 | $formInputLabel-lineHeight-requiredIcon $formInputLabel-lineHeight-requiredIndicator | No matching semantic tokens found |
0.5px | $pageBodyIntro-borderWidth-linkDivider | $web.semantic.border-width.indicator.subtle |
0px | $accordion-space-marginTop-item $accordion-space-paddingBottom-headerContainer $accordion-space-paddingVertical-trigger $alert-space-marginBottom-inlineText $alert-space-marginHorizontal-inlineText $breadcrumbs-lineHeight-dividerContainer $breadcrumbs-space-margin-list $breadcrumbs-space-padding-list $button-borderRadius-root-tertiary $carousel-size-minWidth-slide $carousel-space-padding-swiperContainer $core-size-xs $formInput-borderRadius-all-root-inputType-number $formInput-borderRadius-bottomLeft-root-leftAddOn-true $formInput-borderRadius-bottomRight-root-rightAddOn-true $formInput-borderRadius-topLeft-root-leftAddOn-true $formInput-borderRadius-topRight-root-rightAddOn-true $formInput-borderWidth-root-inputType-numberHorizontal $formInput-borderWidth-root-inputType-toggleTab $formInput-size-height-root-inputType-toggleTab $formInput-size-width-root-inputType-toggleTab $formInput-space-padding-root-inputType-radio $formInputClear-space-padding-clearButton $formInputDescriptors-space-marginLeft-content-displayAsColumn $formInputDescriptors-space-paddingTop-content-displayAsColumn $formInputLabel-space-marginBottom-label-inputType-checkbox $formInputLabel-space-paddingVertical-label-inputType-checkbox $navMenu-lineHeight-columnTitleExternalIcon $navMenu-lineHeight-itemLinkTitleExternalIcon $navMenu-space-margin-columnList $navMenu-space-margin-columnTitle $navMenu-space-paddingHorizontal-columnTitle $navMenu-space-paddingLeft-link-inStateRouter $navMenu-space-paddingRight-link-inStateRouter $navMenu-space-paddingVertical-scrollButton $pageFooter-space-marginBottom-copyrightContainer $pageFooter-space-marginVertical-container $pagination-borderRadius-paginationButton-default $pagination-space-margin-resultsLabel $pagination-space-marginVertical-resultCount $pagination-space-marginVertical-rowCount $pagination-space-padding-resultCount $pagination-space-padding-resultsLabel $pagination-space-padding-rowCount $progressBar-space-margin-progressLabel $progressBar-space-marginBottom-label $radioGroup-space-margin-root $radioGroup-space-marginBottom-container-error $radioGroup-space-marginBottom-label $radioGroup-space-marginTop-radioButtonRoot-row $radioGroup-space-padding-root-default $radioGroup-space-paddingVertical-label $selectInput-borderRadius-bottomLeft-input-open-placedBottom $selectInput-borderRadius-bottomLeft-optionList-open-placedTop $selectInput-borderRadius-bottomLeft-optionListContainer-open-placedTop $selectInput-borderRadius-bottomRight-input-open-placedBottom $selectInput-borderRadius-bottomRight-optionList-open-placedTop $selectInput-borderRadius-bottomRight-optionListContainer-open-placedTop $selectInput-borderRadius-topLeft-input-open-placedTop $selectInput-borderRadius-topLeft-optionList-open-placedBottom $selectInput-borderRadius-topLeft-optionListContainer-open-placedBottom $selectInput-borderRadius-topRight-input-open-placedTop $selectInput-borderRadius-topRight-optionList-open-placedBottom $selectInput-borderRadius-topRight-optionListContainer-open-placedBottom $stepIndicator-space-margin-root $stepIndicator-space-marginVertical-stepIcon $stepIndicator-space-paddingVertical-scrollButton $tabs-borderWidth-right-tab-line-column $tabs-borderWidth-tab-default $textInput-borderRadius-all-iconButton $textInput-space-padding-iconButton $timeline-space-paddingLeft-itemContent-horizontal-default $timeline-space-paddingRight-item-horizontal-centered $timeline-space-paddingRight-itemContent-horizontal-default $toast-lineHeight-icon $toast-space-margin-title $toggleSwitch-space-marginBottom-toggleLabel $toggleTabs-borderRadius-selectedTab-sm $toggleTabs-space-margin-root $toggleTabs-space-margin-tabLabel $toggleTabs-space-padding-root-default $xs | $web.semantic.border-radius.container.full $web.semantic.border-radius.controls.fill |
1 | $chip-lineHeight-chipText $timeline-lineHeight-itemTitle-horizontal $timeline-lineHeight-itemTitle-vertical | No matching semantic tokens found |
1.2 | $navMenu-lineHeight-itemLinkTitle | No matching semantic tokens found |
1.4 | $navMenu-lineHeight-itemLinkText | No matching semantic tokens found |
1.5 | $card-lineHeight-header $progressBar-lineHeight-label $toast-lineHeight-description | No matching semantic tokens found |
1.5rem | $pageBodyIntro-lineHeight-profileHeadingText | No matching semantic tokens found |
10% | $carousel-size-height-slideContainer | No matching semantic tokens found |
100% | $accordion-lineHeight-itemHeader $accordion-lineHeight-trigger $accordion-size-width-root $alert-size-width-headerContainer $alert-size-width-root $avatar-size-height-image $avatar-size-width-image $card-size-height-root-fullHeight-true $carousel-size-height-slide $carousel-size-width-slideContainer $formInput-size-width-root-default $formInput-size-width-root-inputType-number $formInputClear-size-height-clearButton $formInputElement-size-height-formInputElementWrapper $formInputElement-size-height-inputElementWrapper $navMenu-size-height-link $navMenu-size-height-linkRoot-topLevel $navMenu-size-height-list $navMenu-size-height-menu $navMenu-size-height-menuTrigger $navMenu-size-width-column $navMenu-size-width-columnContainer $navMenu-size-width-columnList $navMenu-size-width-container $navMenu-size-width-menuItem $navMenu-size-width-removeScroll $navMenu-size-width-root $navMenu-size-width-routerHeaderContainer $navMenu-size-width-viewport $navMenu-size-width-viewportContainer $pageBody-size-maxWidth-container-fullWidth $pageFooter-size-maxWidth-container-fullWidth $pageFooter-size-width-container $pagination-lineHeight-resultCount $pagination-lineHeight-resultsLabel $pagination-lineHeight-rowCount $pagination-size-height-pageSizeContainer $progressBar-size-width-root $selectInput-size-height-iconContainer $selectInput-size-width-inputContainer $selectInput-size-width-optionContent $selectInput-size-width-optionList $selectInput-size-width-root $tabs-size-width-root $textInput-size-height-iconButton $textInput-size-width-formInputWrapperContainer $textInput-size-width-root $toast-size-height-body $toggleTabs-size-width-container-fullWidth | $web.semantic.sizing.height.full $web.semantic.sizing.width.full |
100px | $badge-borderRadius-container-rounded-true $chip-borderRadius-root | No matching semantic tokens found |
105px | $formInput-space-paddingRight-root-iconRight-3 | No matching semantic tokens found |
10px | $accordion-borderWidth-border-root $formInput-space-gap-root-inputType-number $formInputLabel-fontSize-requiredIcon | No matching semantic tokens found |
110px | $formInput-space-paddingRight-root-compoundVariants-roundedIconRight-3 | No matching semantic tokens found |
115px | $pagination-size-height-pageSizeSelectInput | No matching semantic tokens found |
11px | $2xs $core-fontSize-2xs | No matching semantic tokens found |
12.64px | $link-fontSize-xs | No matching semantic tokens found |
1248px | $core-size-lg $pageBody-size-maxWidth-container-default $xl | No matching semantic tokens found |
12px | $card-space-padding-section-size-small $card-space-paddingLeft-header-size-small $card-space-paddingRight-header-size-small $core-fontSize-xs $core-lineHeight-2xs $icon-fontSize-xs $pagination-space-paddingVertical-abbreviatedContainer $xs | $web.semantic.border-radius.container.emphasis $web.semantic.spacing.scale.md |
136px | $pageBodyIntro-size-width-requiredKeyContainer | No matching semantic tokens found |
13px | $chip-size-height-closeButton $chip-size-width-closeButton | No matching semantic tokens found |
140% | $accordion-lineHeight-headerContainer | No matching semantic tokens found |
14px | $checkbox-fontSize-xs $core-fontSize-sm $pageBodyIntro-lineHeight-requiredKeyRequiredIcon $pageBodyIntro-lineHeight-requiredKeyRequiredIndicator $pageBodyIntro-size-height-profileDataDivider $sm | No matching semantic tokens found |
150% | $carousel-lineHeight-content | No matching semantic tokens found |
15px | $accordion-fontSize-content $accordion-fontSize-itemHeader $accordion-fontSize-trigger $accordion-space-paddingVertical-content $carousel-fontSize-content $chip-size-icon-closeButton $chip-size-maxWidth-iconContainer | No matching semantic tokens found |
161px | $carousel-size-maxHeight-content | No matching semantic tokens found |
162px | $carousel-size-minHeight-content | No matching semantic tokens found |
16px | $button-space-padding-content $card-space-paddingVertical-section-size-medium $cardBase-spacing-padding-all-container $carousel-size-width-bullets-isActive $carousel-space-paddingBottom-title $chip-size-minWidth-iconContainer $core-fontSize-md $core-lineHeight-xs $core-space-md $formInput-space-paddingLeft-root-compoundVariants-roundedText $formInputDescriptors-lineHeight-content $formInputDescriptors-space-marginLeft-content-default $formInputLabel-fontSize-helperIcon $icon-fontSize-sm $md $md $navMenu-space-padding-drawerMenuItem $pageBody-space-paddingHorizontal-container $pageFooter-space-marginBottom-brandmarkWrapper $pageFooter-space-marginBottom-sectionTitle $pageFooter-space-marginTop-linkItem $pageFooter-space-paddingVertical-container $selectInput-space-paddingLeft-option-inSection $tabs-space-paddingHorizontal-contentContainer $timeline-space-marginTop-container-horizontal $timeline-space-marginTop-itemTitle-horizontal $timeline-space-paddingLeft-item-vertical-leftAlign $timeline-space-paddingRight-item-horizontal-default $timeline-space-paddingRight-item-vertical-rightAlign $toast-space-marginRight-body-withCloseButton-true $toast-space-marginRight-loadingContainer $toast-space-padding-container | $web.semantic.sizing.icon.utility.xs $web.semantic.spacing.scale.lg |
185px | $selectInput-size-maxHeight-optionListContainer | No matching semantic tokens found |
18px | $alert-fontSize-externalIcon $alert-lineHeight-container $checkbox-fontSize-sm $core-fontSize-lg $core-lineHeight-sm $lg $stepIndicator-lineHeight-stepLabel $toggleSwitch-size-sm | No matching semantic tokens found |
1920px | $core-size-xl $navMenu-size-maxWidth-root $pageBodyIntro-size-maxWidth-root $pageFooter-size-maxWidth-container-default | No matching semantic tokens found |
1px | $accordion-borderWidth-borderBottom-trigger $alert-borderWidth-actionButton $alert-borderWidth-container $avatar-borderWidth-content-outline $button-borderWidth-root-alternate $button-borderWidth-root-destructive $button-borderWidth-root-outline $button-borderWidth-root-solid $card-borderWidth-root $card-borderWidth-section $cardBase-borderWidth-all-container $chip-borderWidth-root-outline-true $formInput-borderWidth-root-default $formInput-borderWidth-root-inputType-numberVertical $formInputAddon-borderWidth-root $formInputAddon-space-paddingVertical-root $formInputElement-space-padding-formInputElementWrapper $navMenu-borderWidth-columnContainer $pageBodyIntro-borderWidth-requiredKeyColorBox $pageBodyIntro-borderWidth-requiredKeyContainer $pageFooter-borderWidth-links $pageFooter-borderWidth-subFooterDivider $pagination-borderWidth-container $pagination-borderWidth-divider $pagination-borderWidth-pageButton-default $pagination-borderWidth-pageButton-isActive-true $pagination-borderWidth-paginationButton-disabledLeft $pagination-borderWidth-paginationButton-disabledRight $pagination-borderWidth-paginationButton-isDisabled-true $radioGroup-borderWidth-root $selectInput-borderWidth-optionListContainer-open $selectInput-space-paddingBottom-input-open $tabs-borderWidth-bottom-contentContainer $tabs-borderWidth-bottom-tab-arrow-column $tabs-borderWidth-left-contentContainer $tabs-borderWidth-left-tab-arrow $tabs-borderWidth-list-displayRow $tabs-borderWidth-list-line $tabs-borderWidth-right-contentContainer $tabs-borderWidth-right-tab-arrow-row $tabs-borderWidth-tab-enclosed $tabs-borderWidth-top-contentContainer $tabs-borderWidth-top-tab-arrow $toggleTabs-borderWidth-root $toggleTabs-borderWidth-tabRoot-display-column $toggleTabs-borderWidth-tabRoot-display-row | $web.semantic.border-width.container $web.semantic.border-width.cta $web.semantic.border-width.fields.default $web.semantic.border-width.icons $web.semantic.border-width.indicator.default $web.semantic.border-width.separator |
20.25px | $pageBodyIntro-fontSize-profileHeadingText | No matching semantic tokens found |
200 | $core-fontWeight-lighter $lighter | No matching semantic tokens found |
20px | $accordion-space-paddingHorizontal-content $accordion-space-paddingHorizontal-trigger $alert-size-height-closeButton $alert-size-width-closeButton $core-borderRadius-xl $core-fontSize-xl $core-lineHeight-md $pageBodyIntro-lineHeight-link $progressBar-lineHeight-subText $progressBar-size-height-root $radioGroup-size-sm $tabs-lineHeight-tabSubText $toast-fontSize-toastClose $xl | $web.semantic.sizing.all.xxs $web.semantic.sizing.icon.utility.sm |
215px | $pageBodyIntro-size-minWidth-profileHeadingStatusContainer | No matching semantic tokens found |
220px | $badge-size-maxWidth-container | No matching semantic tokens found |
22px | $alert-fontSize-closeButton $badge-size-height-container $link-fontSize-xl $pageBodyIntro-lineHeight-profileDataListItem | No matching semantic tokens found |
24px | $accordion-fontSize-icon-chevron $avatar-lineHeight-content $breadcrumbs-fontSize-icon $card-space-marginTop-innerCard $card-space-paddingHorizontal-section-size-medium $card-space-paddingLeft-header-size-medium $card-space-paddingRight-header-size-medium $carousel-fontSize-playPause $carousel-size-height-bulletContainer $carousel-size-width-bulletContainer $carousel-space-padding-contentWrapper $carousel-space-paddingBottom-content $checkbox-fontSize-default $checkbox-fontSize-md $chip-size-height-root $core-lineHeight-lg $core-lineHeight-xl $core-space-lg $formInput-lineHeight-root $formInputCheckbox-size-width-icon $icon-fontSize-default $icon-fontSize-md $iconBrand-fontSize-default $iconMaterial-fontSize-default $lg $link-lineHeight $navMenu-space-marginLeft-columnContainer $navMenu-space-padding-columnList $navMenu-space-paddingHorizontal-columnList $navMenu-space-paddingLeft-columnContainer $navMenu-space-paddingLeft-link-default $navMenu-space-paddingLeft-menuTrigger $navMenu-space-paddingRight-link-default $navMenu-space-paddingRight-menuTrigger $pageBodyIntro-size-height-linkDivider $pageBodyIntro-space-paddingLeft-root $pageBodyIntro-space-paddingRight-root $pageFooter-space-marginBottom-section $pageFooter-space-marginTop-links $pageFooter-space-paddingHorizontal-container $pagination-size-height-divider $radioGroup-size-default $radioGroup-size-md $tabs-space-paddingVertical-contentContainer $toggleSwitch-size-default $toggleSwitch-size-md $toggleTabs-borderRadius-selectedTab-lg | $web.semantic.sizing.icon.utility.md $web.semantic.spacing.scale.xl |
25px | $toast-size-minHeight-toastClose $toast-size-minWidth-toastClose | No matching semantic tokens found |
26px | $alert-fontSize-alertIcon $carousel-fontSize-navLeft $carousel-fontSize-navMinimalIcon $carousel-fontSize-navRight $carousel-lineHeight-title | No matching semantic tokens found |
27px | $navMenu-lineHeight-columnTitle | No matching semantic tokens found |
28.83px | $pageBodyIntro-fontSize-titleText | No matching semantic tokens found |
28px | $carousel-fontSize-title | No matching semantic tokens found |
2px | $badge-borderWidth-container-outline-true $badge-space-paddingBottom-container $badge-space-paddingTop-container $formInput-borderWidth-root-inputType-checkbox $formInput-borderWidth-root-inputType-radio $formInput-borderWidth-root-inputType-toggle $link-borderWidth $navMenu-space-gap-menuTrigger $pageBodyIntro-borderWidth-profileDataDivider $pagination-space-paddingTop-buttonText $pagination-space-paddingTop-pageButton $progressBar-borderWidth-root $stepIndicator-borderWidth-stepIcon-default-currentCompletedInteractive $stepIndicator-borderWidth-stepIcon-minimal-currentCompletedInteractive $timeline-borderWidth-itemBullet-horizontal $timeline-borderWidth-itemBullet-vertical $timeline-space-marginBottom-itemTitle-horizontal $timeline-space-marginBottom-itemTitle-vertical | $web.semantic.border-width.controls $web.semantic.border-width.double-focus $web.semantic.border-width.indicator.dashed $web.semantic.border-width.indicator.thick $web.semantic.spacing.focus $web.semantic.spacing.scale.xxs |
300 | $core-fontWeight-light $light | No matching semantic tokens found |
300px | $carousel-size-width-container-compact | No matching semantic tokens found |
30px | $checkbox-fontSize-lg $pageBodyIntro-size-height-requiredKeyColorBox $pageBodyIntro-size-width-requiredKeyColorBox $stepIndicator-size-height-scrollButton $stepIndicator-size-width-scrollButton | No matching semantic tokens found |
32px | $alert-size-height-actionButton $avatar-size-sizes-sm $button-size-root-sm $carousel-size-height-navBullets-rounded-true $carousel-size-height-navButton-rounded-true $carousel-size-height-navMinimalButton $carousel-size-width-navMinimalButton $pagination-size-minWidth-ellipsis $pagination-size-minWidth-pageButton $toggleSwitch-size-lg | $web.semantic.sizing.all.sm $web.semantic.sizing.height.min.sm $web.semantic.sizing.height.sm $web.semantic.sizing.width.min.sm $web.semantic.sizing.width.sm $web.semantic.spacing.scale.2xl $web.semantic.spacing.standards.subSections |
350px | $navMenu-size-minWidth-viewportContainer | No matching semantic tokens found |
35px | $formInput-space-paddingLeft-root-inputLeftElement-true $formInput-space-paddingRight-root-iconRight-1 $formInputClear-size-width-clearButton $formInputElement-size-minWidth-inputElementWrapper $selectInput-size-width-iconContainer $textInput-size-width-iconButton | No matching semantic tokens found |
360px | $core-size-sm | No matching semantic tokens found |
36px | $pagination-size-height-container $pagination-size-height-ellipsis $pagination-size-height-pageButton $pagination-size-height-paginationButton | No matching semantic tokens found |
38px | $formInput-size-height-root-inputType-number $formInput-size-minHeight-root-inputType-text $formInput-size-minHeight-root-inputType-textArea $formInput-size-minHeight-root-inputType-time $formInputAddon-size-minHeight-root | No matching semantic tokens found |
3px | $alert-borderWidth-borderLeftWidth-container $carousel-space-padding-navMinimalButtonContainer $carousel-space-padding-navMinimalPaginationContainer $formInputCheckbox-borderWidth-icon $pageBodyIntro-borderRadius-requiredKeyContainer $progressBar-borderRadius-root $progressBar-space-paddingRight-filler $stepIndicator-borderWidth-stepIcon-default-default $stepIndicator-borderWidth-stepIcon-minimal-complete-hover $stepIndicator-borderWidth-stepIcon-minimal-incompleteInactive-hover $stepIndicator-borderWidth-stepIcon-outline $textInput-borderRadius-bottomRight-iconButton $textInput-borderRadius-topRight-iconButton | $web.semantic.border-width.fields.active $web.semantic.border-width.focus |
400 | $core-fontWeight-normal $normal | No matching semantic tokens found |
40px | $avatar-size-sizes-default $avatar-size-sizes-md $button-size-root-default $button-size-root-md $card-borderRadius-all-collapseButton $checkbox-fontSize-xl $formInput-space-paddingLeft-root-compoundVariants-roundedInputLeftElement $formInput-space-paddingRight-root-compoundVariants-roundedIconRight-1 $navMenu-size-minHeight-columnTitle-hasMultipleColumns $pageFooter-space-gap-links $tabs-size-xs $toggleSwitch-borderRadius-toggleSwitch | $web.semantic.sizing.all.md $web.semantic.sizing.height.md $web.semantic.sizing.height.min.md $web.semantic.sizing.icon.illustrative.xs $web.semantic.sizing.width.md $web.semantic.sizing.width.min.md $web.semantic.spacing.scale.3xl |
42px | $tabs-space-paddingLeft-contentContainer-arrowColumn $tabs-space-paddingTop-contentContainer-arrowRow | No matching semantic tokens found |
45px | $accordion-size-minHeight-trigger | No matching semantic tokens found |
464px | $sm | No matching semantic tokens found |
48px | $alert-size-minHeight-container $avatar-size-sizes-lg $button-size-root-lg $carousel-size-height-navBullets-rounded-false $carousel-size-height-navButton-rounded-false $core-space-xl $icon-fontSize-lg $pageBodyIntro-size-minHeight-rowContainer $timeline-space-marginTop-item-vertical $xl | $web.semantic.sizing.all.lg $web.semantic.sizing.height.lg $web.semantic.sizing.height.min.lg $web.semantic.sizing.icon.illustrative.sm $web.semantic.sizing.width.lg $web.semantic.sizing.width.min.lg $web.semantic.spacing.scale.4xl $web.semantic.spacing.standards.sectionPaddingTopBottom |
4px | $accordion-borderRadius-item $alert-borderRadius-actionButton $alert-borderRadius-closeButton $alert-borderRadius-container $alert-space-marginLeft-externalIcon $alert-space-marginTop-actionButton $alert-space-marginTop-alertBody $alert-space-marginTop-inlineText $alert-space-paddingTop-childrenContainer $badge-borderRadius-container-rounded-false $badge-space-marginLeft-icon $breadcrumbs-space-paddingBottom-list-darkMode-true $breadcrumbs-space-paddingTop-list-darkMode-true $card-borderRadius-all-root $card-borderRadius-topLeft-header $card-borderRadius-topRight-header $chip-space-marginLeft-closeButton $chip-space-marginRight-iconContainer $chip-space-paddingVertical-root $core-space-xs $formInput-borderRadius-all-root-default $formInput-space-paddingVertical-root-inputType-number $formInputAddon-borderRadius-bottomLeft-orientation-left $formInputAddon-borderRadius-bottomRight-orientation-right $formInputAddon-borderRadius-topLeft-orientation-left $formInputAddon-borderRadius-topRight-orientation-right $formInputClear-borderRadius-clearButton $formInputDescriptors-space-paddingTop-content-default $formInputLabel-space-marginBottom-label-default $formInputLabel-space-marginLeft-requiredIndicator $link-space-marginLeft-externalIcon $navMenu-borderRadius-itemLink $navMenu-borderRadius-viewport $navMenu-space-marginLeft-columnTitleExternalIcon $navMenu-space-marginLeft-itemLinkTitleExternalIcon $navMenu-space-paddingHorizontal-scrollButton $navMenu-space-paddingVertical-itemLink $pageBodyIntro-borderWidth-link-active $pageBodyIntro-space-marginBottom-requiredKeyText $pageBodyIntro-space-marginLeft-requiredKeyRequiredIndicator $pageBodyIntro-space-marginRight-profileItemLabel $pageFooter-space-marginBottom-links $pagination-borderRadius-paginationButton-left $pagination-borderRadius-paginationButton-right $pagination-space-marginTop-resultCountAdditional $pagination-space-paddingBottom-ellipsis $selectInput-borderRadius-bottomLeft-input-open-placedTop $selectInput-borderRadius-bottomLeft-optionList-open-placedBottom $selectInput-borderRadius-bottomLeft-optionListContainer-open-placedBottom $selectInput-borderRadius-bottomRight-input-open-placedTop $selectInput-borderRadius-bottomRight-optionList-open-placedBottom $selectInput-borderRadius-bottomRight-optionListContainer-open-placedBottom $selectInput-borderRadius-inputContainer $selectInput-borderRadius-topLeft-input-open-placedBottom $selectInput-borderRadius-topLeft-optionList-open-placedTop $selectInput-borderRadius-topLeft-optionListContainer-open-placedTop $selectInput-borderRadius-topRight-input-open-placedBottom $selectInput-borderRadius-topRight-optionList-open-placedTop $selectInput-borderRadius-topRight-optionListContainer-open-placedTop $selectInput-space-margin-noOptions $selectInput-space-marginLeft-optionContent-span $selectInput-space-paddingVertical-noOptions $stepIndicator-space-padding-stepIcon-default $stepIndicator-space-padding-stepIcon-minimal-complete-hover $stepIndicator-space-padding-stepIcon-minimal-incompleteInactive-hover $stepIndicator-space-paddingHorizontal-scrollButton $tabs-borderWidth-left-activeLine-arrow-column $tabs-borderWidth-left-activeLine-enclosed-column $tabs-borderWidth-right-activeLine-line-column $tabs-borderWidth-top-activeLine-arrow-row $tabs-borderWidth-top-activeLine-enclosed-row $tabs-borderWidth-top-activeLine-line-row $tabs-space-marginBottom-tab-enclosed-column $tabs-space-marginRight-tab-enclosed-row $textInput-borderRadius-all-formWrapper $toggleTabs-borderRadius-selectedTab-default $toggleTabs-borderRadius-selectedTab-md $toggleTabs-space-padding-container $xs | $web.semantic.border-radius.container.menu $web.semantic.border-radius.container.small $web.semantic.border-radius.controls.fields $web.semantic.border-radius.controls.soft $web.semantic.spacing.scale.xs $web.semantic.spacing.standards.hMD-XS:p |
50% | $carousel-borderRadius-navBullets-rounded $carousel-borderRadius-navButton-rounded $formInput-borderRadius-all-root-inputType-radio-checked-before $formInput-borderRadius-all-root-inputType-radio-default $formInput-borderRadius-all-root-inputType-radio-disabled-before $formInput-borderRadius-all-root-inputType-toggle-after $stepIndicator-borderRadius-scrollButton $toast-borderRadius-toastClose | No matching semantic tokens found |
500 | $core-fontWeight-medium $medium | No matching semantic tokens found |
500px | $avatar-borderRadius-content $avatar-borderRadius-image $avatar-borderRadius-root $stepIndicator-borderRadius-stepIcon $timeline-borderRadius-itemBullet-horizontal $timeline-borderRadius-itemBullet-vertical | $web.semantic.border-radius.container.round $web.semantic.border-radius.controls.cta $web.semantic.border-radius.controls.round |
50px | $button-borderRadius-root-default $carousel-borderRadius-bullets $pageBodyIntro-size-height-requiredKeyContainer | No matching semantic tokens found |
52px | $card-size-minHeight-header-size-small $navMenu-size-minHeight-container $navMenu-size-minHeight-link $navMenu-size-minHeight-menuTrigger $tabs-size-sm | No matching semantic tokens found |
5px | $navMenu-space-marginBottom-itemLinkTitle $pagination-borderRadius-container $radioGroup-borderRadius-root $tabs-borderRadius-bottomLeft-contentContainer-enclosed $tabs-borderRadius-bottomLeft-tab-enclosed $tabs-borderRadius-bottomRight-contentContainer-enclosed $tabs-borderRadius-topLeft-tab-enclosed $tabs-borderRadius-topRight-contentContainer-enclosed $tabs-borderRadius-topRight-tab-enclosed $toggleTabs-borderRadius-root | No matching semantic tokens found |
600 | $core-fontWeight-semibold $semibold | No matching semantic tokens found |
64px | $icon-fontSize-xl $tabs-size-md | $web.semantic.sizing.icon.illustrative.md $web.semantic.spacing.scale.5xl |
68px | $card-size-minHeight-header-size-medium | No matching semantic tokens found |
6px | $accordion-borderRadius-root $carousel-size-height-bullets-default $carousel-size-height-bullets-isActive $carousel-size-width-bullets-default | No matching semantic tokens found |
700 | $bold $core-fontWeight-bold | No matching semantic tokens found |
70px | $formInput-space-paddingRight-root-iconRight-2 | No matching semantic tokens found |
744px | $core-size-md $md | No matching semantic tokens found |
75px | $formInput-space-paddingRight-root-compoundVariants-roundedIconRight-2 | No matching semantic tokens found |
800 | $core-fontWeight-xbold $xbold | No matching semantic tokens found |
80px | $tabs-size-lg | $web.semantic.sizing.all.xxl $web.semantic.sizing.icon.illustrative.lg $web.semantic.spacing.scale.6xl |
8px | $alert-space-marginRight-actionButton $alert-space-marginRight-headerSection $alert-space-marginRight-iconContainer $alert-space-padding-actionButton $alert-space-padding-container $badge-space-paddingLeft-container $badge-space-paddingRight-container $card-space-marginLeft-buttonContainer $card-space-padding-buttonContainer $cardBase-borderRadius-all-container $chip-space-paddingHorizontal-root $core-space-sm $formInput-space-padding-root-inputType-textArea $formInput-space-paddingLeft-root-inputType-text $formInput-space-paddingLeft-root-inputType-time $formInputAddon-space-paddingHorizontal-root $formInputLabel-space-marginLeft-helper-required $formInputLabel-space-paddingHorizontal-label-inputType-checkbox $formInputWrapper-space-marginTop $navMenu-space-paddingHorizontal-itemLink $navMenu-space-paddingVertical-columnList $navMenu-space-paddingVertical-columnTitle $pageBodyIntro-space-marginBottom-profileContainer-statusOnBottom $pageBodyIntro-space-marginBottom-profileHeadingStatusContainer $pageBodyIntro-space-marginBottom-profileHeadingText-hasStatusSection $pageBodyIntro-space-marginLeft-linkDivider $pageBodyIntro-space-marginLeft-profileDataDivider $pageBodyIntro-space-marginRight-linkDivider $pageBodyIntro-space-marginRight-profileDataDivider $pageFooter-space-marginLeft-subFooterDivider $pageFooter-space-marginRight-subFooterDivider $pagination-space-marginHorizontal-resultCount $pagination-space-marginHorizontal-rowCount $pagination-space-marginRight-resultsLabel $pagination-space-paddingLeft-ellipsis $pagination-space-paddingLeft-pageButton $pagination-space-paddingRight-ellipsis $pagination-space-paddingRight-pageButton $radioGroup-space-padding-root-error $radioGroup-space-paddingHorizontal-label $selectInput-space-marginLeft-optionIcon $selectInput-space-padding-option $selectInput-space-padding-section $selectInput-space-paddingHorizontal-noOptions $selectInput-space-scrollMargin-option $selectInput-space-scrollMargin-section $sm $stepIndicator-space-marginTop-stepLabel $tabs-space-paddingBottom-tab $tabs-space-paddingTop-tab $timeline-space-paddingLeft-itemContent-horizontal-centered $timeline-space-paddingRight-itemContent-horizontal-centered $toast-borderRadius-container $toast-space-marginRight-body-withCloseButton-false $toast-space-marginRight-icon $toast-space-marginTop-container $toggleSwitch-space-paddingLeft-toggleLabel $toggleTabs-space-marginBottom-container-error $toggleTabs-space-padding-root-error $toggleTabs-space-padding-tabLabel | $web.semantic.border-radius.container.large $web.semantic.border-radius.controls.medium $web.semantic.spacing.scale.sm $web.semantic.spacing.standards.hXXL-MD:p |
96px | $tabs-size-xl | No matching semantic tokens found |
984px | $lg | No matching semantic tokens found |
9px | $formInput-space-paddingHorizontal-root-inputType-number $pageFooter-size-height-subFooterDivider $pagination-space-padding-paginationButton $pagination-space-paddingHorizontal-abbreviatedContainer | No matching semantic tokens found |
AbyssUHCSans, Arial, sans-serif | $accordion-fontFamily $avatar-fontFamily $card-fontFamily-header $formInput-fontFamily-root $link-fontFamily $navMenu-fontFamily-columnTitle $navMenu-fontFamily-itemLinkText $navMenu-fontFamily-itemLinkTitle $pageBodyIntro-fontFamily-profileHeadingText $pagination-fontFamily-abbreviatedContainer $pagination-fontFamily-buttonText $pagination-fontFamily-paginationButton $primary $progressBar-fontFamily-label $selectInput-fontFamily-option $selectInput-fontFamily-section $tabs-fontFamily-tab $toggleTabs-fontFamily-tabLabel | No matching semantic tokens found |
AbyssUHCSerif, Georgia Bold, serif | $heading | No matching semantic tokens found |
auto | $pageFooter-space-marginHorizontal-container | No matching semantic tokens found |
black | $textInput-color-border-iconButton | No matching semantic tokens found |
blue | $accordion-color-border-root | No matching semantic tokens found |
Menlo, Monaco, Lucida Console, monospace | $code $core-fonts-code | No matching semantic tokens found |
none | $button-borderStyle-root-tertiary $button-color-border-root-tertiary-hover | No matching semantic tokens found |
rgba(255, 255, 255, 0) | $core-color-transparent | No matching semantic tokens found |
solid | $accordion-borderStyle-border-root $accordion-borderStyle-borderBottom-trigger $alert-borderStyle-container $avatar-borderStyle-content-outline $badge-borderStyle-container-outline-true $button-borderStyle-root-alternate $button-borderStyle-root-destructive $button-borderStyle-root-outline $button-borderStyle-root-solid $card-borderStyle-root $carousel-borderStyle-slideButton-primary-default $carousel-borderStyle-slideButton-primary-hover $carousel-borderStyle-slideButton-secondary-default $carousel-borderStyle-slideButton-secondary-hover $chip-borderStyle-root-outline-true $formInput-border-root-default $formInput-border-root-inputType-number $formInputAddon-border-root $pagination-border-container $pagination-border-divider $pagination-border-pageButton-default $pagination-border-pageButton-isActive-true $pagination-border-paginationButton-disabledLeft $pagination-border-paginationButton-disabledRight $pagination-border-paginationButton-isDisabled-true | No matching semantic tokens found |
transparent | $accordion-color-background-trigger-default $button-color-background-root-tertiaryIsDisabled $carousel-color-background-navMinimalButton $radioGroup-color-border-root-default $tabs-color-border-bottom-tab-enclosed-row-active $tabs-color-border-right-tab-enclosed-column-active $textInput-color-background-iconButton-isDisabled-true-hover $timeline-color-background-itemBullet-horizontal-active-withChild $timeline-color-background-itemBullet-vertical-active-withChild | No matching semantic tokens found |