tile: {
borderStyle: "--tile--border-style";
borderColor: "--tile--border-color";
borderWidth: "--tile--border-width";
borderRadius025: "--tile--border-radius-025";
borderRadius050: "--tile--border-radius-050";
borderRadius075: "--tile--border-radius-075";
borderRadius100: "--tile--border-radius-100";
borderRadius: "--tile--border-radius";
outlineFocus: "--tile--outline-focus";
outlineInvalid: "--tile--outline-invalid";
strokeWidth: "--tile--stroke-width";
color: "--tile--color";
backgroundColor: "--tile--background-color";
colorSubtle: "--tile--color-subtle";
colorStrong: "--tile--color-strong";
colorInfo: "--tile--color-info";
colorPass: "--tile--color-pass";
colorWarn: "--tile--color-warn";
colorFail: "--tile--color-fail";
colorLabel: "--tile--color-label";
colorPlaceholder: "--tile--color-placeholder";
colorEnabled: "--tile--color-enabled";
colorDisabled: "--tile--color-disabled";
colorHover: "--tile--color-hover";
colorPressed: "--tile--color-pressed";
colorSelected: "--tile--color-selected";
colorFocus: "--tile--color-focus";
colorOver: "--tile--color-over";
backgroundColorEdit: "--tile--background-color-edit";
backgroundColorStripe: "--tile--background-color-stripe";
backgroundColorHover: "--tile--background-color-hover";
backgroundColorPressed: "--tile--background-color-pressed";
backgroundColorSelected: "--tile--background-color-selected";
backgroundColorInfo: "--tile--background-color-info";
backgroundColorPass: "--tile--background-color-pass";
backgroundColorWarn: "--tile--background-color-warn";
backgroundColorFail: "--tile--background-color-fail";
backgroundColorRaised: "--tile--background-color-raised";
backgroundColorOverlay: "--tile--background-color-overlay";
backgroundColorSunken: "--tile--background-color-sunken";
backgroundColorBlanket: "--tile--background-color-blanket";
boxShadowRaised: "--tile--box-shadow-raised";
boxShadowOverlay: "--tile--box-shadow-overlay";
boxShadow: "--tile--box-shadow";
zIndexSticky: "--tile--z-index-sticky";
zIndexDropdown: "--tile--z-index-dropdown";
zIndexBlanket: "--tile--z-index-blanket";
zIndexModal: "--tile--z-index-modal";
zIndexToast: "--tile--z-index-toast";
zIndexTooltip: "--tile--z-index-tooltip";
durationFast: "--tile--duration-fast";
durationNormal: "--tile--duration-normal";
durationSlow: "--tile--duration-slow";
easingStandard: "--tile--easing-standard";
easingEnter: "--tile--easing-enter";
easingExit: "--tile--easing-exit";
opacityDisabled: "--tile--opacity-disabled";
opacityLoading: "--tile--opacity-loading";
opacityLocked: "--tile--opacity-locked";
colorGray010: "--tile--color-gray-010";
colorGray020: "--tile--color-gray-020";
colorGray030: "--tile--color-gray-030";
colorGray040: "--tile--color-gray-040";
colorGray050: "--tile--color-gray-050";
colorGray060: "--tile--color-gray-060";
colorGray070: "--tile--color-gray-070";
colorGray080: "--tile--color-gray-080";
colorGray090: "--tile--color-gray-090";
colorGray100: "--tile--color-gray-100";
colorSubtle010: "--tile--color-subtle-010";
colorSubtle020: "--tile--color-subtle-020";
colorSubtle030: "--tile--color-subtle-030";
colorSubtle040: "--tile--color-subtle-040";
colorSubtle050: "--tile--color-subtle-050";
colorSubtle060: "--tile--color-subtle-060";
colorSubtle070: "--tile--color-subtle-070";
colorSubtle080: "--tile--color-subtle-080";
colorSubtle090: "--tile--color-subtle-090";
colorSubtle100: "--tile--color-subtle-100";
colorStrong010: "--tile--color-strong-010";
colorStrong020: "--tile--color-strong-020";
colorStrong030: "--tile--color-strong-030";
colorStrong040: "--tile--color-strong-040";
colorStrong050: "--tile--color-strong-050";
colorStrong060: "--tile--color-strong-060";
colorStrong070: "--tile--color-strong-070";
colorStrong080: "--tile--color-strong-080";
colorStrong090: "--tile--color-strong-090";
colorStrong100: "--tile--color-strong-100";
colorHeat010: "--tile--color-heat-010";
colorHeat020: "--tile--color-heat-020";
colorHeat030: "--tile--color-heat-030";
colorHeat040: "--tile--color-heat-040";
colorHeat050: "--tile--color-heat-050";
colorHeat060: "--tile--color-heat-060";
colorHeat070: "--tile--color-heat-070";
colorHeat080: "--tile--color-heat-080";
colorHeat090: "--tile--color-heat-090";
colorHeat100: "--tile--color-heat-100";
colorSeries1: "--tile--color-series-1";
colorSeries2: "--tile--color-series-2";
colorSeries3: "--tile--color-series-3";
colorSeries4: "--tile--color-series-4";
colorSeries5: "--tile--color-series-5";
colorSeries6: "--tile--color-series-6";
colorSeries7: "--tile--color-series-7";
colorSeries8: "--tile--color-series-8";
colorSeries9: "--tile--color-series-9";
colorArea1: "--tile--color-area-1";
colorArea2: "--tile--color-area-2";
colorArea3: "--tile--color-area-3";
colorArea4: "--tile--color-area-4";
scaling025: "--tile--scaling-025";
scaling050: "--tile--scaling-050";
scaling075: "--tile--scaling-075";
scaling090: "--tile--scaling-090";
scaling100: "--tile--scaling-100";
scaling110: "--tile--scaling-110";
scaling125: "--tile--scaling-125";
scaling150: "--tile--scaling-150";
scaling200: "--tile--scaling-200";
scaling250: "--tile--scaling-250";
spacing025: "--tile--spacing-025";
spacing050: "--tile--spacing-050";
spacing075: "--tile--spacing-075";
spacing100: "--tile--spacing-100";
spacing150: "--tile--spacing-150";
spacing200: "--tile--spacing-200";
spacing250: "--tile--spacing-250";
padding: "--tile--padding";
fontFamily: "--tile--font-family";
fontFamilyHeading: "--tile--font-family-heading";
fontFamilyMono: "--tile--font-family-mono";
fontSize: "--tile--font-size";
fontSizeSmall: "--tile--font-size-small";
fontSizeLarge: "--tile--font-size-large";
fontSizeHeading: "--tile--font-size-heading";
lineHeight: "--tile--line-height";
letterSpacingHeading: "--tile--letter-spacing-heading";
fontWeight: "--tile--font-weight";
fontWeightStrong: "--tile--font-weight-strong";
fontWeightHeavy: "--tile--font-weight-heavy";
viewportSmall: "--tile--viewport-small";
viewportMedium: "--tile--viewport-medium";
viewportLarge: "--tile--viewport-large";
viewportXlarge: "--tile--viewport-xlarge";
look: "--tile--look";
} = ...
The custom property behind every design system token.
Resolves each token name to the custom property carrying its value, which is what css.var reads a token through and what a value taken outside the cascade is looked up by; assigning a token to a subtree goes through css instead. Gathers every token group, so a consumer names a token without knowing which one it belongs to.