@patreon/studio
Version:
Patreon Studio Design System
341 lines • 13.2 kB
JavaScript
/**
* This file is generated. Do not edit.
* Generated on Thu May 29 2025 10:31:19 PM
*/
export const globalTokens = {
bg: {
base: {
default: 'var(--global-bg-base-default)',
hover: 'var(--global-bg-base-hover)',
pressed: 'var(--global-bg-base-pressed)',
},
baseAlt: {
default: 'var(--global-bg-baseAlt-default)',
hover: 'var(--global-bg-baseAlt-hover)',
pressed: 'var(--global-bg-baseAlt-pressed)',
},
elevated: {
default: 'var(--global-bg-elevated-default)',
hover: 'var(--global-bg-elevated-hover)',
pressed: 'var(--global-bg-elevated-pressed)',
},
page: {
default: 'var(--global-bg-page-default)',
hover: 'var(--global-bg-page-hover)',
pressed: 'var(--global-bg-page-pressed)',
},
pageAlt: {
default: 'var(--global-bg-pageAlt-default)',
hover: 'var(--global-bg-pageAlt-hover)',
pressed: 'var(--global-bg-pageAlt-pressed)',
},
},
border: {
action: {
default: 'var(--global-border-action-default)',
hover: 'var(--global-border-action-hover)',
pressed: 'var(--global-border-action-pressed)',
},
muted: {
default: 'var(--global-border-muted-default)',
hover: 'var(--global-border-muted-hover)',
pressed: 'var(--global-border-muted-pressed)',
},
},
borderWidth: {
none: 'var(--global-borderWidth-none)',
thick: 'var(--global-borderWidth-thick)',
thin: 'var(--global-borderWidth-thin)',
},
boxShadow: {
high: 'var(--global-boxShadow-high)',
low: 'var(--global-boxShadow-low)',
mid: 'var(--global-boxShadow-mid)',
subtle: 'var(--global-boxShadow-subtle)',
},
brand: {
discord: 'var(--global-brand-discord)',
facebook: 'var(--global-brand-facebook)',
google: 'var(--global-brand-google)',
memberful: 'var(--global-brand-memberful)',
patreon: 'var(--global-brand-patreon)',
pinterest: 'var(--global-brand-pinterest)',
reddit: 'var(--global-brand-reddit)',
spotify: 'var(--global-brand-spotify)',
tumblr: 'var(--global-brand-tumblr)',
twitch: 'var(--global-brand-twitch)',
twitter: 'var(--global-brand-twitter)',
youtube: 'var(--global-brand-youtube)',
youtubeBlack: 'var(--global-brand-youtubeBlack)',
},
constant: {
black: {
default: 'var(--global-constant-black-default)',
hover: 'var(--global-constant-black-hover)',
pressed: 'var(--global-constant-black-pressed)',
},
blackMuted: {
default: 'var(--global-constant-blackMuted-default)',
hover: 'var(--global-constant-blackMuted-hover)',
pressed: 'var(--global-constant-blackMuted-pressed)',
},
blackSubtle: {
default: 'var(--global-constant-blackSubtle-default)',
hover: 'var(--global-constant-blackSubtle-hover)',
pressed: 'var(--global-constant-blackSubtle-pressed)',
},
white: {
default: 'var(--global-constant-white-default)',
hover: 'var(--global-constant-white-hover)',
pressed: 'var(--global-constant-white-pressed)',
},
whiteMuted: {
default: 'var(--global-constant-whiteMuted-default)',
hover: 'var(--global-constant-whiteMuted-hover)',
pressed: 'var(--global-constant-whiteMuted-pressed)',
},
whiteSubtle: {
default: 'var(--global-constant-whiteSubtle-default)',
hover: 'var(--global-constant-whiteSubtle-hover)',
pressed: 'var(--global-constant-whiteSubtle-pressed)',
},
},
content: {
inverted: {
default: 'var(--global-content-inverted-default)',
hover: 'var(--global-content-inverted-hover)',
pressed: 'var(--global-content-inverted-pressed)',
},
invertedMuted: {
default: 'var(--global-content-invertedMuted-default)',
hover: 'var(--global-content-invertedMuted-hover)',
pressed: 'var(--global-content-invertedMuted-pressed)',
},
invertedSubtle: {
default: 'var(--global-content-invertedSubtle-default)',
hover: 'var(--global-content-invertedSubtle-hover)',
pressed: 'var(--global-content-invertedSubtle-pressed)',
},
muted: {
default: 'var(--global-content-muted-default)',
hover: 'var(--global-content-muted-hover)',
pressed: 'var(--global-content-muted-pressed)',
},
regular: {
default: 'var(--global-content-regular-default)',
hover: 'var(--global-content-regular-hover)',
pressed: 'var(--global-content-regular-pressed)',
},
subtle: {
default: 'var(--global-content-subtle-default)',
hover: 'var(--global-content-subtle-hover)',
pressed: 'var(--global-content-subtle-pressed)',
},
},
critical: {
action: {
default: 'var(--global-critical-action-default)',
hover: 'var(--global-critical-action-hover)',
pressed: 'var(--global-critical-action-pressed)',
},
muted: {
default: 'var(--global-critical-muted-default)',
hover: 'var(--global-critical-muted-hover)',
pressed: 'var(--global-critical-muted-pressed)',
},
onAction: {
default: 'var(--global-critical-onAction-default)',
hover: 'var(--global-critical-onAction-hover)',
pressed: 'var(--global-critical-onAction-pressed)',
},
onMuted: {
default: 'var(--global-critical-onMuted-default)',
hover: 'var(--global-critical-onMuted-hover)',
pressed: 'var(--global-critical-onMuted-pressed)',
},
},
effects: {
lg: 'var(--global-effects-lg)',
md: 'var(--global-effects-md)',
sm: 'var(--global-effects-sm)',
},
icon: {
lg: 'var(--global-icon-lg)',
md: 'var(--global-icon-md)',
sm: 'var(--global-icon-sm)',
xl: 'var(--global-icon-xl)',
xs: 'var(--global-icon-xs)',
},
layer: {
z0: 'var(--global-layer-z0)',
z1: 'var(--global-layer-z1)',
z10: 'var(--global-layer-z10)',
z11: 'var(--global-layer-z11)',
z12: 'var(--global-layer-z12)',
z2: 'var(--global-layer-z2)',
z20: 'var(--global-layer-z20)',
z3: 'var(--global-layer-z3)',
z4: 'var(--global-layer-z4)',
z5: 'var(--global-layer-z5)',
z6: 'var(--global-layer-z6)',
z7: 'var(--global-layer-z7)',
z8: 'var(--global-layer-z8)',
z9: 'var(--global-layer-z9)',
},
nonSemantic: {
blueberry: 'var(--global-nonSemantic-blueberry)',
holly: 'var(--global-nonSemantic-holly)',
honeycomb: 'var(--global-nonSemantic-honeycomb)',
jasper: 'var(--global-nonSemantic-jasper)',
lavender: 'var(--global-nonSemantic-lavender)',
lollipop: 'var(--global-nonSemantic-lollipop)',
moonshade: 'var(--global-nonSemantic-moonshade)',
ocean: 'var(--global-nonSemantic-ocean)',
pumpkin: 'var(--global-nonSemantic-pumpkin)',
raspberry: 'var(--global-nonSemantic-raspberry)',
},
opacity: {
disabled: 'var(--global-opacity-disabled)',
enabled: 'var(--global-opacity-enabled)',
},
primary: {
action: {
default: 'var(--global-primary-action-default)',
hover: 'var(--global-primary-action-hover)',
pressed: 'var(--global-primary-action-pressed)',
},
actionBase: {
default: 'var(--global-primary-actionBase-default)',
hover: 'var(--global-primary-actionBase-hover)',
pressed: 'var(--global-primary-actionBase-pressed)',
},
muted: {
default: 'var(--global-primary-muted-default)',
hover: 'var(--global-primary-muted-hover)',
pressed: 'var(--global-primary-muted-pressed)',
},
onActionBase: {
default: 'var(--global-primary-onActionBase-default)',
hover: 'var(--global-primary-onActionBase-hover)',
pressed: 'var(--global-primary-onActionBase-pressed)',
},
onMuted: {
default: 'var(--global-primary-onMuted-default)',
hover: 'var(--global-primary-onMuted-hover)',
pressed: 'var(--global-primary-onMuted-pressed)',
},
onSubtle: {
default: 'var(--global-primary-onSubtle-default)',
hover: 'var(--global-primary-onSubtle-hover)',
pressed: 'var(--global-primary-onSubtle-pressed)',
},
subtle: {
default: 'var(--global-primary-subtle-default)',
hover: 'var(--global-primary-subtle-hover)',
pressed: 'var(--global-primary-subtle-pressed)',
},
},
radius: {
circle: 'var(--global-radius-circle)',
lg: 'var(--global-radius-lg)',
md: 'var(--global-radius-md)',
pill: 'var(--global-radius-pill)',
sm: 'var(--global-radius-sm)',
smMd: 'var(--global-radius-smMd)',
xl: 'var(--global-radius-xl)',
},
secondary: {
action: {
default: 'var(--global-secondary-action-default)',
hover: 'var(--global-secondary-action-hover)',
pressed: 'var(--global-secondary-action-pressed)',
},
muted: {
default: 'var(--global-secondary-muted-default)',
hover: 'var(--global-secondary-muted-hover)',
pressed: 'var(--global-secondary-muted-pressed)',
},
onAction: {
default: 'var(--global-secondary-onAction-default)',
hover: 'var(--global-secondary-onAction-hover)',
pressed: 'var(--global-secondary-onAction-pressed)',
},
onMuted: {
default: 'var(--global-secondary-onMuted-default)',
hover: 'var(--global-secondary-onMuted-hover)',
pressed: 'var(--global-secondary-onMuted-pressed)',
},
},
space: {
x0: 'var(--global-space-x0)',
x12: 'var(--global-space-x12)',
x16: 'var(--global-space-x16)',
x20: 'var(--global-space-x20)',
x24: 'var(--global-space-x24)',
x32: 'var(--global-space-x32)',
x4: 'var(--global-space-x4)',
x40: 'var(--global-space-x40)',
x48: 'var(--global-space-x48)',
x56: 'var(--global-space-x56)',
x8: 'var(--global-space-x8)',
},
success: {
action: {
default: 'var(--global-success-action-default)',
hover: 'var(--global-success-action-hover)',
pressed: 'var(--global-success-action-pressed)',
},
muted: {
default: 'var(--global-success-muted-default)',
hover: 'var(--global-success-muted-hover)',
pressed: 'var(--global-success-muted-pressed)',
},
onAction: {
default: 'var(--global-success-onAction-default)',
hover: 'var(--global-success-onAction-hover)',
pressed: 'var(--global-success-onAction-pressed)',
},
onMuted: {
default: 'var(--global-success-onMuted-default)',
hover: 'var(--global-success-onMuted-hover)',
pressed: 'var(--global-success-onMuted-pressed)',
},
},
transition: {
fast: {
duration: 'var(--global-transition-fast-duration)',
easing: 'var(--global-transition-fast-easing)',
},
regular: {
duration: 'var(--global-transition-regular-duration)',
easing: 'var(--global-transition-regular-easing)',
},
slow: {
duration: 'var(--global-transition-slow-duration)',
easing: 'var(--global-transition-slow-easing)',
},
},
warning: {
action: {
default: 'var(--global-warning-action-default)',
hover: 'var(--global-warning-action-hover)',
pressed: 'var(--global-warning-action-pressed)',
},
muted: {
default: 'var(--global-warning-muted-default)',
hover: 'var(--global-warning-muted-hover)',
pressed: 'var(--global-warning-muted-pressed)',
},
onAction: {
default: 'var(--global-warning-onAction-default)',
hover: 'var(--global-warning-onAction-hover)',
pressed: 'var(--global-warning-onAction-pressed)',
},
onMuted: {
default: 'var(--global-warning-onMuted-default)',
hover: 'var(--global-warning-onMuted-hover)',
pressed: 'var(--global-warning-onMuted-pressed)',
},
},
};
//# sourceMappingURL=global.js.map