@patreon/studio
Version:
Patreon Studio Design System
341 lines (340 loc) • 15.6 kB
TypeScript
/**
* This file is generated. Do not edit.
* Generated on Thu May 29 2025 10:31:19 PM
*/
export declare const globalTokens: {
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)";
};
};
};