@patreon/studio/css-config/lib/tokens-reference-object.json

Patreon Studio Design System

{
  "component": {
    "button": {
      "action": {
        "default": "var(--component-button-action-default)",
        "hover": "var(--component-button-action-hover)",
        "pressed": "var(--component-button-action-pressed)"
      },
      "onAction": {
        "default": "var(--component-button-onAction-default)",
        "hover": "var(--component-button-onAction-hover)",
        "pressed": "var(--component-button-onAction-pressed)"
      }
    }
  },
  "global": {
    "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)"
      }
    }
  }
}