@metreeca/tile
    Preparing search index...

    Variable tileConst

    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.

    Type Declaration

    • 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"