UNPKG

@patreon/studio

Version:

Patreon Studio Design System

357 lines (356 loc) 17.5 kB
/** * This file is generated. Do not edit. * Generated on Mon Jun 02 2025 6:33:51 PM */ export declare const tokens: { readonly component: { readonly button: { readonly action: { readonly default: "var(--component-button-action-default)"; readonly hover: "var(--component-button-action-hover)"; readonly pressed: "var(--component-button-action-pressed)"; }; readonly onAction: { readonly default: "var(--component-button-onAction-default)"; readonly hover: "var(--component-button-onAction-hover)"; readonly pressed: "var(--component-button-onAction-pressed)"; }; }; }; readonly global: { readonly bg: { readonly base: { readonly default: "var(--global-bg-base-default)"; readonly hover: "var(--global-bg-base-hover)"; readonly pressed: "var(--global-bg-base-pressed)"; }; readonly baseAlt: { readonly default: "var(--global-bg-baseAlt-default)"; readonly hover: "var(--global-bg-baseAlt-hover)"; readonly pressed: "var(--global-bg-baseAlt-pressed)"; }; readonly elevated: { readonly default: "var(--global-bg-elevated-default)"; readonly hover: "var(--global-bg-elevated-hover)"; readonly pressed: "var(--global-bg-elevated-pressed)"; }; readonly page: { readonly default: "var(--global-bg-page-default)"; readonly hover: "var(--global-bg-page-hover)"; readonly pressed: "var(--global-bg-page-pressed)"; }; readonly pageAlt: { readonly default: "var(--global-bg-pageAlt-default)"; readonly hover: "var(--global-bg-pageAlt-hover)"; readonly pressed: "var(--global-bg-pageAlt-pressed)"; }; }; readonly border: { readonly action: { readonly default: "var(--global-border-action-default)"; readonly hover: "var(--global-border-action-hover)"; readonly pressed: "var(--global-border-action-pressed)"; }; readonly muted: { readonly default: "var(--global-border-muted-default)"; readonly hover: "var(--global-border-muted-hover)"; readonly pressed: "var(--global-border-muted-pressed)"; }; }; readonly borderWidth: { readonly none: "var(--global-borderWidth-none)"; readonly thick: "var(--global-borderWidth-thick)"; readonly thin: "var(--global-borderWidth-thin)"; }; readonly boxShadow: { readonly high: "var(--global-boxShadow-high)"; readonly low: "var(--global-boxShadow-low)"; readonly mid: "var(--global-boxShadow-mid)"; readonly subtle: "var(--global-boxShadow-subtle)"; }; readonly brand: { readonly discord: "var(--global-brand-discord)"; readonly facebook: "var(--global-brand-facebook)"; readonly google: "var(--global-brand-google)"; readonly memberful: "var(--global-brand-memberful)"; readonly patreon: "var(--global-brand-patreon)"; readonly pinterest: "var(--global-brand-pinterest)"; readonly reddit: "var(--global-brand-reddit)"; readonly spotify: "var(--global-brand-spotify)"; readonly tumblr: "var(--global-brand-tumblr)"; readonly twitch: "var(--global-brand-twitch)"; readonly twitter: "var(--global-brand-twitter)"; readonly youtube: "var(--global-brand-youtube)"; readonly youtubeBlack: "var(--global-brand-youtubeBlack)"; }; readonly constant: { readonly black: { readonly default: "var(--global-constant-black-default)"; readonly hover: "var(--global-constant-black-hover)"; readonly pressed: "var(--global-constant-black-pressed)"; }; readonly blackMuted: { readonly default: "var(--global-constant-blackMuted-default)"; readonly hover: "var(--global-constant-blackMuted-hover)"; readonly pressed: "var(--global-constant-blackMuted-pressed)"; }; readonly blackSubtle: { readonly default: "var(--global-constant-blackSubtle-default)"; readonly hover: "var(--global-constant-blackSubtle-hover)"; readonly pressed: "var(--global-constant-blackSubtle-pressed)"; }; readonly white: { readonly default: "var(--global-constant-white-default)"; readonly hover: "var(--global-constant-white-hover)"; readonly pressed: "var(--global-constant-white-pressed)"; }; readonly whiteMuted: { readonly default: "var(--global-constant-whiteMuted-default)"; readonly hover: "var(--global-constant-whiteMuted-hover)"; readonly pressed: "var(--global-constant-whiteMuted-pressed)"; }; readonly whiteSubtle: { readonly default: "var(--global-constant-whiteSubtle-default)"; readonly hover: "var(--global-constant-whiteSubtle-hover)"; readonly pressed: "var(--global-constant-whiteSubtle-pressed)"; }; }; readonly content: { readonly inverted: { readonly default: "var(--global-content-inverted-default)"; readonly hover: "var(--global-content-inverted-hover)"; readonly pressed: "var(--global-content-inverted-pressed)"; }; readonly invertedMuted: { readonly default: "var(--global-content-invertedMuted-default)"; readonly hover: "var(--global-content-invertedMuted-hover)"; readonly pressed: "var(--global-content-invertedMuted-pressed)"; }; readonly invertedSubtle: { readonly default: "var(--global-content-invertedSubtle-default)"; readonly hover: "var(--global-content-invertedSubtle-hover)"; readonly pressed: "var(--global-content-invertedSubtle-pressed)"; }; readonly muted: { readonly default: "var(--global-content-muted-default)"; readonly hover: "var(--global-content-muted-hover)"; readonly pressed: "var(--global-content-muted-pressed)"; }; readonly regular: { readonly default: "var(--global-content-regular-default)"; readonly hover: "var(--global-content-regular-hover)"; readonly pressed: "var(--global-content-regular-pressed)"; }; readonly subtle: { readonly default: "var(--global-content-subtle-default)"; readonly hover: "var(--global-content-subtle-hover)"; readonly pressed: "var(--global-content-subtle-pressed)"; }; }; readonly critical: { readonly action: { readonly default: "var(--global-critical-action-default)"; readonly hover: "var(--global-critical-action-hover)"; readonly pressed: "var(--global-critical-action-pressed)"; }; readonly muted: { readonly default: "var(--global-critical-muted-default)"; readonly hover: "var(--global-critical-muted-hover)"; readonly pressed: "var(--global-critical-muted-pressed)"; }; readonly onAction: { readonly default: "var(--global-critical-onAction-default)"; readonly hover: "var(--global-critical-onAction-hover)"; readonly pressed: "var(--global-critical-onAction-pressed)"; }; readonly onMuted: { readonly default: "var(--global-critical-onMuted-default)"; readonly hover: "var(--global-critical-onMuted-hover)"; readonly pressed: "var(--global-critical-onMuted-pressed)"; }; }; readonly effects: { readonly lg: "var(--global-effects-lg)"; readonly md: "var(--global-effects-md)"; readonly sm: "var(--global-effects-sm)"; }; readonly icon: { readonly lg: "var(--global-icon-lg)"; readonly md: "var(--global-icon-md)"; readonly sm: "var(--global-icon-sm)"; readonly xl: "var(--global-icon-xl)"; readonly xs: "var(--global-icon-xs)"; }; readonly layer: { readonly z0: "var(--global-layer-z0)"; readonly z1: "var(--global-layer-z1)"; readonly z10: "var(--global-layer-z10)"; readonly z11: "var(--global-layer-z11)"; readonly z12: "var(--global-layer-z12)"; readonly z2: "var(--global-layer-z2)"; readonly z20: "var(--global-layer-z20)"; readonly z3: "var(--global-layer-z3)"; readonly z4: "var(--global-layer-z4)"; readonly z5: "var(--global-layer-z5)"; readonly z6: "var(--global-layer-z6)"; readonly z7: "var(--global-layer-z7)"; readonly z8: "var(--global-layer-z8)"; readonly z9: "var(--global-layer-z9)"; }; readonly nonSemantic: { readonly blueberry: "var(--global-nonSemantic-blueberry)"; readonly holly: "var(--global-nonSemantic-holly)"; readonly honeycomb: "var(--global-nonSemantic-honeycomb)"; readonly jasper: "var(--global-nonSemantic-jasper)"; readonly lavender: "var(--global-nonSemantic-lavender)"; readonly lollipop: "var(--global-nonSemantic-lollipop)"; readonly moonshade: "var(--global-nonSemantic-moonshade)"; readonly ocean: "var(--global-nonSemantic-ocean)"; readonly pumpkin: "var(--global-nonSemantic-pumpkin)"; readonly raspberry: "var(--global-nonSemantic-raspberry)"; }; readonly opacity: { readonly disabled: "var(--global-opacity-disabled)"; readonly enabled: "var(--global-opacity-enabled)"; }; readonly primary: { readonly action: { readonly default: "var(--global-primary-action-default)"; readonly hover: "var(--global-primary-action-hover)"; readonly pressed: "var(--global-primary-action-pressed)"; }; readonly actionBase: { readonly default: "var(--global-primary-actionBase-default)"; readonly hover: "var(--global-primary-actionBase-hover)"; readonly pressed: "var(--global-primary-actionBase-pressed)"; }; readonly muted: { readonly default: "var(--global-primary-muted-default)"; readonly hover: "var(--global-primary-muted-hover)"; readonly pressed: "var(--global-primary-muted-pressed)"; }; readonly onActionBase: { readonly default: "var(--global-primary-onActionBase-default)"; readonly hover: "var(--global-primary-onActionBase-hover)"; readonly pressed: "var(--global-primary-onActionBase-pressed)"; }; readonly onMuted: { readonly default: "var(--global-primary-onMuted-default)"; readonly hover: "var(--global-primary-onMuted-hover)"; readonly pressed: "var(--global-primary-onMuted-pressed)"; }; readonly onSubtle: { readonly default: "var(--global-primary-onSubtle-default)"; readonly hover: "var(--global-primary-onSubtle-hover)"; readonly pressed: "var(--global-primary-onSubtle-pressed)"; }; readonly subtle: { readonly default: "var(--global-primary-subtle-default)"; readonly hover: "var(--global-primary-subtle-hover)"; readonly pressed: "var(--global-primary-subtle-pressed)"; }; }; readonly radius: { readonly circle: "var(--global-radius-circle)"; readonly lg: "var(--global-radius-lg)"; readonly md: "var(--global-radius-md)"; readonly pill: "var(--global-radius-pill)"; readonly sm: "var(--global-radius-sm)"; readonly smMd: "var(--global-radius-smMd)"; readonly xl: "var(--global-radius-xl)"; }; readonly secondary: { readonly action: { readonly default: "var(--global-secondary-action-default)"; readonly hover: "var(--global-secondary-action-hover)"; readonly pressed: "var(--global-secondary-action-pressed)"; }; readonly muted: { readonly default: "var(--global-secondary-muted-default)"; readonly hover: "var(--global-secondary-muted-hover)"; readonly pressed: "var(--global-secondary-muted-pressed)"; }; readonly onAction: { readonly default: "var(--global-secondary-onAction-default)"; readonly hover: "var(--global-secondary-onAction-hover)"; readonly pressed: "var(--global-secondary-onAction-pressed)"; }; readonly onMuted: { readonly default: "var(--global-secondary-onMuted-default)"; readonly hover: "var(--global-secondary-onMuted-hover)"; readonly pressed: "var(--global-secondary-onMuted-pressed)"; }; }; readonly space: { readonly x0: "var(--global-space-x0)"; readonly x12: "var(--global-space-x12)"; readonly x16: "var(--global-space-x16)"; readonly x20: "var(--global-space-x20)"; readonly x24: "var(--global-space-x24)"; readonly x32: "var(--global-space-x32)"; readonly x4: "var(--global-space-x4)"; readonly x40: "var(--global-space-x40)"; readonly x48: "var(--global-space-x48)"; readonly x56: "var(--global-space-x56)"; readonly x8: "var(--global-space-x8)"; }; readonly success: { readonly action: { readonly default: "var(--global-success-action-default)"; readonly hover: "var(--global-success-action-hover)"; readonly pressed: "var(--global-success-action-pressed)"; }; readonly muted: { readonly default: "var(--global-success-muted-default)"; readonly hover: "var(--global-success-muted-hover)"; readonly pressed: "var(--global-success-muted-pressed)"; }; readonly onAction: { readonly default: "var(--global-success-onAction-default)"; readonly hover: "var(--global-success-onAction-hover)"; readonly pressed: "var(--global-success-onAction-pressed)"; }; readonly onMuted: { readonly default: "var(--global-success-onMuted-default)"; readonly hover: "var(--global-success-onMuted-hover)"; readonly pressed: "var(--global-success-onMuted-pressed)"; }; }; readonly transition: { readonly fast: { readonly duration: "var(--global-transition-fast-duration)"; readonly easing: "var(--global-transition-fast-easing)"; }; readonly regular: { readonly duration: "var(--global-transition-regular-duration)"; readonly easing: "var(--global-transition-regular-easing)"; }; readonly slow: { readonly duration: "var(--global-transition-slow-duration)"; readonly easing: "var(--global-transition-slow-easing)"; }; }; readonly warning: { readonly action: { readonly default: "var(--global-warning-action-default)"; readonly hover: "var(--global-warning-action-hover)"; readonly pressed: "var(--global-warning-action-pressed)"; }; readonly muted: { readonly default: "var(--global-warning-muted-default)"; readonly hover: "var(--global-warning-muted-hover)"; readonly pressed: "var(--global-warning-muted-pressed)"; }; readonly onAction: { readonly default: "var(--global-warning-onAction-default)"; readonly hover: "var(--global-warning-onAction-hover)"; readonly pressed: "var(--global-warning-onAction-pressed)"; }; readonly onMuted: { readonly default: "var(--global-warning-onMuted-default)"; readonly hover: "var(--global-warning-onMuted-hover)"; readonly pressed: "var(--global-warning-onMuted-pressed)"; }; }; }; };