@patreon/studio/styles/token-modes.module.css

Patreon Studio Design System

/**
* This file is generated. Do not edit.
* Generated on Mon Jun 02 2025 12:48:47 PM
*/

.shared {
  --global-borderWidth-none: var(--shared-global-borderWidth-none);
  --global-borderWidth-thick: var(--shared-global-borderWidth-thick);
  --global-borderWidth-thin: var(--shared-global-borderWidth-thin);
  --global-boxShadow-high: var(--shared-global-boxShadow-high);
  --global-boxShadow-low: var(--shared-global-boxShadow-low);
  --global-boxShadow-mid: var(--shared-global-boxShadow-mid);
  --global-boxShadow-subtle: var(--shared-global-boxShadow-subtle);
  --global-brand-discord: var(--shared-global-brand-discord);
  --global-brand-facebook: var(--shared-global-brand-facebook);
  --global-brand-google: var(--shared-global-brand-google);
  --global-brand-memberful: var(--shared-global-brand-memberful);
  --global-brand-patreon: var(--shared-global-brand-patreon);
  --global-brand-pinterest: var(--shared-global-brand-pinterest);
  --global-brand-reddit: var(--shared-global-brand-reddit);
  --global-brand-spotify: var(--shared-global-brand-spotify);
  --global-brand-tumblr: var(--shared-global-brand-tumblr);
  --global-brand-twitch: var(--shared-global-brand-twitch);
  --global-brand-twitter: var(--shared-global-brand-twitter);
  --global-brand-youtube: var(--shared-global-brand-youtube);
  --global-brand-youtubeBlack: var(--shared-global-brand-youtubeBlack);
  --global-constant-black-default: var(--shared-global-constant-black-default);
  --global-constant-black-hover: var(--shared-global-constant-black-hover);
  --global-constant-black-pressed: var(--shared-global-constant-black-pressed);
  --global-constant-blackMuted-default: var(--shared-global-constant-blackMuted-default);
  --global-constant-blackMuted-hover: var(--shared-global-constant-blackMuted-hover);
  --global-constant-blackMuted-pressed: var(--shared-global-constant-blackMuted-pressed);
  --global-constant-blackSubtle-default: var(--shared-global-constant-blackSubtle-default);
  --global-constant-blackSubtle-hover: var(--shared-global-constant-blackSubtle-hover);
  --global-constant-blackSubtle-pressed: var(--shared-global-constant-blackSubtle-pressed);
  --global-constant-white-default: var(--shared-global-constant-white-default);
  --global-constant-white-hover: var(--shared-global-constant-white-hover);
  --global-constant-white-pressed: var(--shared-global-constant-white-pressed);
  --global-constant-whiteMuted-default: var(--shared-global-constant-whiteMuted-default);
  --global-constant-whiteMuted-hover: var(--shared-global-constant-whiteMuted-hover);
  --global-constant-whiteMuted-pressed: var(--shared-global-constant-whiteMuted-pressed);
  --global-constant-whiteSubtle-default: var(--shared-global-constant-whiteSubtle-default);
  --global-constant-whiteSubtle-hover: var(--shared-global-constant-whiteSubtle-hover);
  --global-constant-whiteSubtle-pressed: var(--shared-global-constant-whiteSubtle-pressed);
  --global-effects-lg: var(--shared-global-effects-lg);
  --global-effects-md: var(--shared-global-effects-md);
  --global-effects-sm: var(--shared-global-effects-sm);
  --global-icon-lg: var(--shared-global-icon-lg);
  --global-icon-md: var(--shared-global-icon-md);
  --global-icon-sm: var(--shared-global-icon-sm);
  --global-icon-xl: var(--shared-global-icon-xl);
  --global-icon-xs: var(--shared-global-icon-xs);
  --global-layer-z0: var(--shared-global-layer-z0);
  --global-layer-z1: var(--shared-global-layer-z1);
  --global-layer-z10: var(--shared-global-layer-z10);
  --global-layer-z11: var(--shared-global-layer-z11);
  --global-layer-z12: var(--shared-global-layer-z12);
  --global-layer-z2: var(--shared-global-layer-z2);
  --global-layer-z20: var(--shared-global-layer-z20);
  --global-layer-z3: var(--shared-global-layer-z3);
  --global-layer-z4: var(--shared-global-layer-z4);
  --global-layer-z5: var(--shared-global-layer-z5);
  --global-layer-z6: var(--shared-global-layer-z6);
  --global-layer-z7: var(--shared-global-layer-z7);
  --global-layer-z8: var(--shared-global-layer-z8);
  --global-layer-z9: var(--shared-global-layer-z9);
  --global-nonSemantic-blueberry: var(--shared-global-nonSemantic-blueberry);
  --global-nonSemantic-holly: var(--shared-global-nonSemantic-holly);
  --global-nonSemantic-honeycomb: var(--shared-global-nonSemantic-honeycomb);
  --global-nonSemantic-jasper: var(--shared-global-nonSemantic-jasper);
  --global-nonSemantic-lavender: var(--shared-global-nonSemantic-lavender);
  --global-nonSemantic-lollipop: var(--shared-global-nonSemantic-lollipop);
  --global-nonSemantic-moonshade: var(--shared-global-nonSemantic-moonshade);
  --global-nonSemantic-ocean: var(--shared-global-nonSemantic-ocean);
  --global-nonSemantic-pumpkin: var(--shared-global-nonSemantic-pumpkin);
  --global-nonSemantic-raspberry: var(--shared-global-nonSemantic-raspberry);
  --global-opacity-disabled: var(--shared-global-opacity-disabled);
  --global-opacity-enabled: var(--shared-global-opacity-enabled);
  --global-radius-circle: var(--shared-global-radius-circle);
  --global-radius-lg: var(--shared-global-radius-lg);
  --global-radius-md: var(--shared-global-radius-md);
  --global-radius-pill: var(--shared-global-radius-pill);
  --global-radius-sm: var(--shared-global-radius-sm);
  --global-radius-smMd: var(--shared-global-radius-smMd);
  --global-radius-xl: var(--shared-global-radius-xl);
  --global-space-x0: var(--shared-global-space-x0);
  --global-space-x12: var(--shared-global-space-x12);
  --global-space-x16: var(--shared-global-space-x16);
  --global-space-x20: var(--shared-global-space-x20);
  --global-space-x24: var(--shared-global-space-x24);
  --global-space-x32: var(--shared-global-space-x32);
  --global-space-x4: var(--shared-global-space-x4);
  --global-space-x40: var(--shared-global-space-x40);
  --global-space-x48: var(--shared-global-space-x48);
  --global-space-x56: var(--shared-global-space-x56);
  --global-space-x8: var(--shared-global-space-x8);
  --global-transition-fast-duration: var(--shared-global-transition-fast-duration);
  --global-transition-fast-easing: var(--shared-global-transition-fast-easing);
  --global-transition-regular-duration: var(--shared-global-transition-regular-duration);
  --global-transition-regular-easing: var(--shared-global-transition-regular-easing);
  --global-transition-slow-duration: var(--shared-global-transition-slow-duration);
  --global-transition-slow-easing: var(--shared-global-transition-slow-easing);
}

.colorAuto {
  color-scheme: light dark;

  --component-button-action-default: var(--light-component-button-action-default);
  --component-button-action-hover: var(--light-component-button-action-hover);
  --component-button-action-pressed: var(--light-component-button-action-pressed);
  --component-button-onAction-default: var(--light-component-button-onAction-default);
  --component-button-onAction-hover: var(--light-component-button-onAction-hover);
  --component-button-onAction-pressed: var(--light-component-button-onAction-pressed);
  --global-bg-base-default: var(--light-global-bg-base-default);
  --global-bg-base-hover: var(--light-global-bg-base-hover);
  --global-bg-base-pressed: var(--light-global-bg-base-pressed);
  --global-bg-baseAlt-default: var(--light-global-bg-baseAlt-default);
  --global-bg-baseAlt-hover: var(--light-global-bg-baseAlt-hover);
  --global-bg-baseAlt-pressed: var(--light-global-bg-baseAlt-pressed);
  --global-bg-elevated-default: var(--light-global-bg-elevated-default);
  --global-bg-elevated-hover: var(--light-global-bg-elevated-hover);
  --global-bg-elevated-pressed: var(--light-global-bg-elevated-pressed);
  --global-bg-page-default: var(--light-global-bg-page-default);
  --global-bg-page-hover: var(--light-global-bg-page-hover);
  --global-bg-page-pressed: var(--light-global-bg-page-pressed);
  --global-bg-pageAlt-default: var(--light-global-bg-pageAlt-default);
  --global-bg-pageAlt-hover: var(--light-global-bg-pageAlt-hover);
  --global-bg-pageAlt-pressed: var(--light-global-bg-pageAlt-pressed);
  --global-border-action-default: var(--light-global-border-action-default);
  --global-border-action-hover: var(--light-global-border-action-hover);
  --global-border-action-pressed: var(--light-global-border-action-pressed);
  --global-border-muted-default: var(--light-global-border-muted-default);
  --global-border-muted-hover: var(--light-global-border-muted-hover);
  --global-border-muted-pressed: var(--light-global-border-muted-pressed);
  --global-content-inverted-default: var(--light-global-content-inverted-default);
  --global-content-inverted-hover: var(--light-global-content-inverted-hover);
  --global-content-inverted-pressed: var(--light-global-content-inverted-pressed);
  --global-content-invertedMuted-default: var(--light-global-content-invertedMuted-default);
  --global-content-invertedMuted-hover: var(--light-global-content-invertedMuted-hover);
  --global-content-invertedMuted-pressed: var(--light-global-content-invertedMuted-pressed);
  --global-content-invertedSubtle-default: var(--light-global-content-invertedSubtle-default);
  --global-content-invertedSubtle-hover: var(--light-global-content-invertedSubtle-hover);
  --global-content-invertedSubtle-pressed: var(--light-global-content-invertedSubtle-pressed);
  --global-content-muted-default: var(--light-global-content-muted-default);
  --global-content-muted-hover: var(--light-global-content-muted-hover);
  --global-content-muted-pressed: var(--light-global-content-muted-pressed);
  --global-content-regular-default: var(--light-global-content-regular-default);
  --global-content-regular-hover: var(--light-global-content-regular-hover);
  --global-content-regular-pressed: var(--light-global-content-regular-pressed);
  --global-content-subtle-default: var(--light-global-content-subtle-default);
  --global-content-subtle-hover: var(--light-global-content-subtle-hover);
  --global-content-subtle-pressed: var(--light-global-content-subtle-pressed);
  --global-critical-action-default: var(--light-global-critical-action-default);
  --global-critical-action-hover: var(--light-global-critical-action-hover);
  --global-critical-action-pressed: var(--light-global-critical-action-pressed);
  --global-critical-muted-default: var(--light-global-critical-muted-default);
  --global-critical-muted-hover: var(--light-global-critical-muted-hover);
  --global-critical-muted-pressed: var(--light-global-critical-muted-pressed);
  --global-critical-onAction-default: var(--light-global-critical-onAction-default);
  --global-critical-onAction-hover: var(--light-global-critical-onAction-hover);
  --global-critical-onAction-pressed: var(--light-global-critical-onAction-pressed);
  --global-critical-onMuted-default: var(--light-global-critical-onMuted-default);
  --global-critical-onMuted-hover: var(--light-global-critical-onMuted-hover);
  --global-critical-onMuted-pressed: var(--light-global-critical-onMuted-pressed);
  --global-primary-action-default: var(--light-global-primary-action-default);
  --global-primary-action-hover: var(--light-global-primary-action-hover);
  --global-primary-action-pressed: var(--light-global-primary-action-pressed);
  --global-primary-actionBase-default: var(--light-global-primary-actionBase-default);
  --global-primary-actionBase-hover: var(--light-global-primary-actionBase-hover);
  --global-primary-actionBase-pressed: var(--light-global-primary-actionBase-pressed);
  --global-primary-muted-default: var(--light-global-primary-muted-default);
  --global-primary-muted-hover: var(--light-global-primary-muted-hover);
  --global-primary-muted-pressed: var(--light-global-primary-muted-pressed);
  --global-primary-onActionBase-default: var(--light-global-primary-onActionBase-default);
  --global-primary-onActionBase-hover: var(--light-global-primary-onActionBase-hover);
  --global-primary-onActionBase-pressed: var(--light-global-primary-onActionBase-pressed);
  --global-primary-onMuted-default: var(--light-global-primary-onMuted-default);
  --global-primary-onMuted-hover: var(--light-global-primary-onMuted-hover);
  --global-primary-onMuted-pressed: var(--light-global-primary-onMuted-pressed);
  --global-primary-onSubtle-default: var(--light-global-primary-onSubtle-default);
  --global-primary-onSubtle-hover: var(--light-global-primary-onSubtle-hover);
  --global-primary-onSubtle-pressed: var(--light-global-primary-onSubtle-pressed);
  --global-primary-subtle-default: var(--light-global-primary-subtle-default);
  --global-primary-subtle-hover: var(--light-global-primary-subtle-hover);
  --global-primary-subtle-pressed: var(--light-global-primary-subtle-pressed);
  --global-secondary-action-default: var(--light-global-secondary-action-default);
  --global-secondary-action-hover: var(--light-global-secondary-action-hover);
  --global-secondary-action-pressed: var(--light-global-secondary-action-pressed);
  --global-secondary-muted-default: var(--light-global-secondary-muted-default);
  --global-secondary-muted-hover: var(--light-global-secondary-muted-hover);
  --global-secondary-muted-pressed: var(--light-global-secondary-muted-pressed);
  --global-secondary-onAction-default: var(--light-global-secondary-onAction-default);
  --global-secondary-onAction-hover: var(--light-global-secondary-onAction-hover);
  --global-secondary-onAction-pressed: var(--light-global-secondary-onAction-pressed);
  --global-secondary-onMuted-default: var(--light-global-secondary-onMuted-default);
  --global-secondary-onMuted-hover: var(--light-global-secondary-onMuted-hover);
  --global-secondary-onMuted-pressed: var(--light-global-secondary-onMuted-pressed);
  --global-success-action-default: var(--light-global-success-action-default);
  --global-success-action-hover: var(--light-global-success-action-hover);
  --global-success-action-pressed: var(--light-global-success-action-pressed);
  --global-success-muted-default: var(--light-global-success-muted-default);
  --global-success-muted-hover: var(--light-global-success-muted-hover);
  --global-success-muted-pressed: var(--light-global-success-muted-pressed);
  --global-success-onAction-default: var(--light-global-success-onAction-default);
  --global-success-onAction-hover: var(--light-global-success-onAction-hover);
  --global-success-onAction-pressed: var(--light-global-success-onAction-pressed);
  --global-success-onMuted-default: var(--light-global-success-onMuted-default);
  --global-success-onMuted-hover: var(--light-global-success-onMuted-hover);
  --global-success-onMuted-pressed: var(--light-global-success-onMuted-pressed);
  --global-warning-action-default: var(--light-global-warning-action-default);
  --global-warning-action-hover: var(--light-global-warning-action-hover);
  --global-warning-action-pressed: var(--light-global-warning-action-pressed);
  --global-warning-muted-default: var(--light-global-warning-muted-default);
  --global-warning-muted-hover: var(--light-global-warning-muted-hover);
  --global-warning-muted-pressed: var(--light-global-warning-muted-pressed);
  --global-warning-onAction-default: var(--light-global-warning-onAction-default);
  --global-warning-onAction-hover: var(--light-global-warning-onAction-hover);
  --global-warning-onAction-pressed: var(--light-global-warning-onAction-pressed);
  --global-warning-onMuted-default: var(--light-global-warning-onMuted-default);
  --global-warning-onMuted-hover: var(--light-global-warning-onMuted-hover);
  --global-warning-onMuted-pressed: var(--light-global-warning-onMuted-pressed);

  @media (--dark) {
    --component-button-action-default: var(--dark-component-button-action-default);
    --component-button-action-hover: var(--dark-component-button-action-hover);
    --component-button-action-pressed: var(--dark-component-button-action-pressed);
    --component-button-onAction-default: var(--dark-component-button-onAction-default);
    --component-button-onAction-hover: var(--dark-component-button-onAction-hover);
    --component-button-onAction-pressed: var(--dark-component-button-onAction-pressed);
    --global-bg-base-default: var(--dark-global-bg-base-default);
    --global-bg-base-hover: var(--dark-global-bg-base-hover);
    --global-bg-base-pressed: var(--dark-global-bg-base-pressed);
    --global-bg-baseAlt-default: var(--dark-global-bg-baseAlt-default);
    --global-bg-baseAlt-hover: var(--dark-global-bg-baseAlt-hover);
    --global-bg-baseAlt-pressed: var(--dark-global-bg-baseAlt-pressed);
    --global-bg-elevated-default: var(--dark-global-bg-elevated-default);
    --global-bg-elevated-hover: var(--dark-global-bg-elevated-hover);
    --global-bg-elevated-pressed: var(--dark-global-bg-elevated-pressed);
    --global-bg-page-default: var(--dark-global-bg-page-default);
    --global-bg-page-hover: var(--dark-global-bg-page-hover);
    --global-bg-page-pressed: var(--dark-global-bg-page-pressed);
    --global-bg-pageAlt-default: var(--dark-global-bg-pageAlt-default);
    --global-bg-pageAlt-hover: var(--dark-global-bg-pageAlt-hover);
    --global-bg-pageAlt-pressed: var(--dark-global-bg-pageAlt-pressed);
    --global-border-action-default: var(--dark-global-border-action-default);
    --global-border-action-hover: var(--dark-global-border-action-hover);
    --global-border-action-pressed: var(--dark-global-border-action-pressed);
    --global-border-muted-default: var(--dark-global-border-muted-default);
    --global-border-muted-hover: var(--dark-global-border-muted-hover);
    --global-border-muted-pressed: var(--dark-global-border-muted-pressed);
    --global-content-inverted-default: var(--dark-global-content-inverted-default);
    --global-content-inverted-hover: var(--dark-global-content-inverted-hover);
    --global-content-inverted-pressed: var(--dark-global-content-inverted-pressed);
    --global-content-invertedMuted-default: var(--dark-global-content-invertedMuted-default);
    --global-content-invertedMuted-hover: var(--dark-global-content-invertedMuted-hover);
    --global-content-invertedMuted-pressed: var(--dark-global-content-invertedMuted-pressed);
    --global-content-invertedSubtle-default: var(--dark-global-content-invertedSubtle-default);
    --global-content-invertedSubtle-hover: var(--dark-global-content-invertedSubtle-hover);
    --global-content-invertedSubtle-pressed: var(--dark-global-content-invertedSubtle-pressed);
    --global-content-muted-default: var(--dark-global-content-muted-default);
    --global-content-muted-hover: var(--dark-global-content-muted-hover);
    --global-content-muted-pressed: var(--dark-global-content-muted-pressed);
    --global-content-regular-default: var(--dark-global-content-regular-default);
    --global-content-regular-hover: var(--dark-global-content-regular-hover);
    --global-content-regular-pressed: var(--dark-global-content-regular-pressed);
    --global-content-subtle-default: var(--dark-global-content-subtle-default);
    --global-content-subtle-hover: var(--dark-global-content-subtle-hover);
    --global-content-subtle-pressed: var(--dark-global-content-subtle-pressed);
    --global-critical-action-default: var(--dark-global-critical-action-default);
    --global-critical-action-hover: var(--dark-global-critical-action-hover);
    --global-critical-action-pressed: var(--dark-global-critical-action-pressed);
    --global-critical-muted-default: var(--dark-global-critical-muted-default);
    --global-critical-muted-hover: var(--dark-global-critical-muted-hover);
    --global-critical-muted-pressed: var(--dark-global-critical-muted-pressed);
    --global-critical-onAction-default: var(--dark-global-critical-onAction-default);
    --global-critical-onAction-hover: var(--dark-global-critical-onAction-hover);
    --global-critical-onAction-pressed: var(--dark-global-critical-onAction-pressed);
    --global-critical-onMuted-default: var(--dark-global-critical-onMuted-default);
    --global-critical-onMuted-hover: var(--dark-global-critical-onMuted-hover);
    --global-critical-onMuted-pressed: var(--dark-global-critical-onMuted-pressed);
    --global-primary-action-default: var(--dark-global-primary-action-default);
    --global-primary-action-hover: var(--dark-global-primary-action-hover);
    --global-primary-action-pressed: var(--dark-global-primary-action-pressed);
    --global-primary-actionBase-default: var(--dark-global-primary-actionBase-default);
    --global-primary-actionBase-hover: var(--dark-global-primary-actionBase-hover);
    --global-primary-actionBase-pressed: var(--dark-global-primary-actionBase-pressed);
    --global-primary-muted-default: var(--dark-global-primary-muted-default);
    --global-primary-muted-hover: var(--dark-global-primary-muted-hover);
    --global-primary-muted-pressed: var(--dark-global-primary-muted-pressed);
    --global-primary-onActionBase-default: var(--dark-global-primary-onActionBase-default);
    --global-primary-onActionBase-hover: var(--dark-global-primary-onActionBase-hover);
    --global-primary-onActionBase-pressed: var(--dark-global-primary-onActionBase-pressed);
    --global-primary-onMuted-default: var(--dark-global-primary-onMuted-default);
    --global-primary-onMuted-hover: var(--dark-global-primary-onMuted-hover);
    --global-primary-onMuted-pressed: var(--dark-global-primary-onMuted-pressed);
    --global-primary-onSubtle-default: var(--dark-global-primary-onSubtle-default);
    --global-primary-onSubtle-hover: var(--dark-global-primary-onSubtle-hover);
    --global-primary-onSubtle-pressed: var(--dark-global-primary-onSubtle-pressed);
    --global-primary-subtle-default: var(--dark-global-primary-subtle-default);
    --global-primary-subtle-hover: var(--dark-global-primary-subtle-hover);
    --global-primary-subtle-pressed: var(--dark-global-primary-subtle-pressed);
    --global-secondary-action-default: var(--dark-global-secondary-action-default);
    --global-secondary-action-hover: var(--dark-global-secondary-action-hover);
    --global-secondary-action-pressed: var(--dark-global-secondary-action-pressed);
    --global-secondary-muted-default: var(--dark-global-secondary-muted-default);
    --global-secondary-muted-hover: var(--dark-global-secondary-muted-hover);
    --global-secondary-muted-pressed: var(--dark-global-secondary-muted-pressed);
    --global-secondary-onAction-default: var(--dark-global-secondary-onAction-default);
    --global-secondary-onAction-hover: var(--dark-global-secondary-onAction-hover);
    --global-secondary-onAction-pressed: var(--dark-global-secondary-onAction-pressed);
    --global-secondary-onMuted-default: var(--dark-global-secondary-onMuted-default);
    --global-secondary-onMuted-hover: var(--dark-global-secondary-onMuted-hover);
    --global-secondary-onMuted-pressed: var(--dark-global-secondary-onMuted-pressed);
    --global-success-action-default: var(--dark-global-success-action-default);
    --global-success-action-hover: var(--dark-global-success-action-hover);
    --global-success-action-pressed: var(--dark-global-success-action-pressed);
    --global-success-muted-default: var(--dark-global-success-muted-default);
    --global-success-muted-hover: var(--dark-global-success-muted-hover);
    --global-success-muted-pressed: var(--dark-global-success-muted-pressed);
    --global-success-onAction-default: var(--dark-global-success-onAction-default);
    --global-success-onAction-hover: var(--dark-global-success-onAction-hover);
    --global-success-onAction-pressed: var(--dark-global-success-onAction-pressed);
    --global-success-onMuted-default: var(--dark-global-success-onMuted-default);
    --global-success-onMuted-hover: var(--dark-global-success-onMuted-hover);
    --global-success-onMuted-pressed: var(--dark-global-success-onMuted-pressed);
    --global-warning-action-default: var(--dark-global-warning-action-default);
    --global-warning-action-hover: var(--dark-global-warning-action-hover);
    --global-warning-action-pressed: var(--dark-global-warning-action-pressed);
    --global-warning-muted-default: var(--dark-global-warning-muted-default);
    --global-warning-muted-hover: var(--dark-global-warning-muted-hover);
    --global-warning-muted-pressed: var(--dark-global-warning-muted-pressed);
    --global-warning-onAction-default: var(--dark-global-warning-onAction-default);
    --global-warning-onAction-hover: var(--dark-global-warning-onAction-hover);
    --global-warning-onAction-pressed: var(--dark-global-warning-onAction-pressed);
    --global-warning-onMuted-default: var(--dark-global-warning-onMuted-default);
    --global-warning-onMuted-hover: var(--dark-global-warning-onMuted-hover);
    --global-warning-onMuted-pressed: var(--dark-global-warning-onMuted-pressed);
  }
}

.colorLight {
  color-scheme: light;

  --component-button-action-default: var(--light-component-button-action-default);
  --component-button-action-hover: var(--light-component-button-action-hover);
  --component-button-action-pressed: var(--light-component-button-action-pressed);
  --component-button-onAction-default: var(--light-component-button-onAction-default);
  --component-button-onAction-hover: var(--light-component-button-onAction-hover);
  --component-button-onAction-pressed: var(--light-component-button-onAction-pressed);
  --global-bg-base-default: var(--light-global-bg-base-default);
  --global-bg-base-hover: var(--light-global-bg-base-hover);
  --global-bg-base-pressed: var(--light-global-bg-base-pressed);
  --global-bg-baseAlt-default: var(--light-global-bg-baseAlt-default);
  --global-bg-baseAlt-hover: var(--light-global-bg-baseAlt-hover);
  --global-bg-baseAlt-pressed: var(--light-global-bg-baseAlt-pressed);
  --global-bg-elevated-default: var(--light-global-bg-elevated-default);
  --global-bg-elevated-hover: var(--light-global-bg-elevated-hover);
  --global-bg-elevated-pressed: var(--light-global-bg-elevated-pressed);
  --global-bg-page-default: var(--light-global-bg-page-default);
  --global-bg-page-hover: var(--light-global-bg-page-hover);
  --global-bg-page-pressed: var(--light-global-bg-page-pressed);
  --global-bg-pageAlt-default: var(--light-global-bg-pageAlt-default);
  --global-bg-pageAlt-hover: var(--light-global-bg-pageAlt-hover);
  --global-bg-pageAlt-pressed: var(--light-global-bg-pageAlt-pressed);
  --global-border-action-default: var(--light-global-border-action-default);
  --global-border-action-hover: var(--light-global-border-action-hover);
  --global-border-action-pressed: var(--light-global-border-action-pressed);
  --global-border-muted-default: var(--light-global-border-muted-default);
  --global-border-muted-hover: var(--light-global-border-muted-hover);
  --global-border-muted-pressed: var(--light-global-border-muted-pressed);
  --global-content-inverted-default: var(--light-global-content-inverted-default);
  --global-content-inverted-hover: var(--light-global-content-inverted-hover);
  --global-content-inverted-pressed: var(--light-global-content-inverted-pressed);
  --global-content-invertedMuted-default: var(--light-global-content-invertedMuted-default);
  --global-content-invertedMuted-hover: var(--light-global-content-invertedMuted-hover);
  --global-content-invertedMuted-pressed: var(--light-global-content-invertedMuted-pressed);
  --global-content-invertedSubtle-default: var(--light-global-content-invertedSubtle-default);
  --global-content-invertedSubtle-hover: var(--light-global-content-invertedSubtle-hover);
  --global-content-invertedSubtle-pressed: var(--light-global-content-invertedSubtle-pressed);
  --global-content-muted-default: var(--light-global-content-muted-default);
  --global-content-muted-hover: var(--light-global-content-muted-hover);
  --global-content-muted-pressed: var(--light-global-content-muted-pressed);
  --global-content-regular-default: var(--light-global-content-regular-default);
  --global-content-regular-hover: var(--light-global-content-regular-hover);
  --global-content-regular-pressed: var(--light-global-content-regular-pressed);
  --global-content-subtle-default: var(--light-global-content-subtle-default);
  --global-content-subtle-hover: var(--light-global-content-subtle-hover);
  --global-content-subtle-pressed: var(--light-global-content-subtle-pressed);
  --global-critical-action-default: var(--light-global-critical-action-default);
  --global-critical-action-hover: var(--light-global-critical-action-hover);
  --global-critical-action-pressed: var(--light-global-critical-action-pressed);
  --global-critical-muted-default: var(--light-global-critical-muted-default);
  --global-critical-muted-hover: var(--light-global-critical-muted-hover);
  --global-critical-muted-pressed: var(--light-global-critical-muted-pressed);
  --global-critical-onAction-default: var(--light-global-critical-onAction-default);
  --global-critical-onAction-hover: var(--light-global-critical-onAction-hover);
  --global-critical-onAction-pressed: var(--light-global-critical-onAction-pressed);
  --global-critical-onMuted-default: var(--light-global-critical-onMuted-default);
  --global-critical-onMuted-hover: var(--light-global-critical-onMuted-hover);
  --global-critical-onMuted-pressed: var(--light-global-critical-onMuted-pressed);
  --global-primary-action-default: var(--light-global-primary-action-default);
  --global-primary-action-hover: var(--light-global-primary-action-hover);
  --global-primary-action-pressed: var(--light-global-primary-action-pressed);
  --global-primary-actionBase-default: var(--light-global-primary-actionBase-default);
  --global-primary-actionBase-hover: var(--light-global-primary-actionBase-hover);
  --global-primary-actionBase-pressed: var(--light-global-primary-actionBase-pressed);
  --global-primary-muted-default: var(--light-global-primary-muted-default);
  --global-primary-muted-hover: var(--light-global-primary-muted-hover);
  --global-primary-muted-pressed: var(--light-global-primary-muted-pressed);
  --global-primary-onActionBase-default: var(--light-global-primary-onActionBase-default);
  --global-primary-onActionBase-hover: var(--light-global-primary-onActionBase-hover);
  --global-primary-onActionBase-pressed: var(--light-global-primary-onActionBase-pressed);
  --global-primary-onMuted-default: var(--light-global-primary-onMuted-default);
  --global-primary-onMuted-hover: var(--light-global-primary-onMuted-hover);
  --global-primary-onMuted-pressed: var(--light-global-primary-onMuted-pressed);
  --global-primary-onSubtle-default: var(--light-global-primary-onSubtle-default);
  --global-primary-onSubtle-hover: var(--light-global-primary-onSubtle-hover);
  --global-primary-onSubtle-pressed: var(--light-global-primary-onSubtle-pressed);
  --global-primary-subtle-default: var(--light-global-primary-subtle-default);
  --global-primary-subtle-hover: var(--light-global-primary-subtle-hover);
  --global-primary-subtle-pressed: var(--light-global-primary-subtle-pressed);
  --global-secondary-action-default: var(--light-global-secondary-action-default);
  --global-secondary-action-hover: var(--light-global-secondary-action-hover);
  --global-secondary-action-pressed: var(--light-global-secondary-action-pressed);
  --global-secondary-muted-default: var(--light-global-secondary-muted-default);
  --global-secondary-muted-hover: var(--light-global-secondary-muted-hover);
  --global-secondary-muted-pressed: var(--light-global-secondary-muted-pressed);
  --global-secondary-onAction-default: var(--light-global-secondary-onAction-default);
  --global-secondary-onAction-hover: var(--light-global-secondary-onAction-hover);
  --global-secondary-onAction-pressed: var(--light-global-secondary-onAction-pressed);
  --global-secondary-onMuted-default: var(--light-global-secondary-onMuted-default);
  --global-secondary-onMuted-hover: var(--light-global-secondary-onMuted-hover);
  --global-secondary-onMuted-pressed: var(--light-global-secondary-onMuted-pressed);
  --global-success-action-default: var(--light-global-success-action-default);
  --global-success-action-hover: var(--light-global-success-action-hover);
  --global-success-action-pressed: var(--light-global-success-action-pressed);
  --global-success-muted-default: var(--light-global-success-muted-default);
  --global-success-muted-hover: var(--light-global-success-muted-hover);
  --global-success-muted-pressed: var(--light-global-success-muted-pressed);
  --global-success-onAction-default: var(--light-global-success-onAction-default);
  --global-success-onAction-hover: var(--light-global-success-onAction-hover);
  --global-success-onAction-pressed: var(--light-global-success-onAction-pressed);
  --global-success-onMuted-default: var(--light-global-success-onMuted-default);
  --global-success-onMuted-hover: var(--light-global-success-onMuted-hover);
  --global-success-onMuted-pressed: var(--light-global-success-onMuted-pressed);
  --global-warning-action-default: var(--light-global-warning-action-default);
  --global-warning-action-hover: var(--light-global-warning-action-hover);
  --global-warning-action-pressed: var(--light-global-warning-action-pressed);
  --global-warning-muted-default: var(--light-global-warning-muted-default);
  --global-warning-muted-hover: var(--light-global-warning-muted-hover);
  --global-warning-muted-pressed: var(--light-global-warning-muted-pressed);
  --global-warning-onAction-default: var(--light-global-warning-onAction-default);
  --global-warning-onAction-hover: var(--light-global-warning-onAction-hover);
  --global-warning-onAction-pressed: var(--light-global-warning-onAction-pressed);
  --global-warning-onMuted-default: var(--light-global-warning-onMuted-default);
  --global-warning-onMuted-hover: var(--light-global-warning-onMuted-hover);
  --global-warning-onMuted-pressed: var(--light-global-warning-onMuted-pressed);

  @media (--dark) {
    --component-button-action-default: var(--light-component-button-action-default);
    --component-button-action-hover: var(--light-component-button-action-hover);
    --component-button-action-pressed: var(--light-component-button-action-pressed);
    --component-button-onAction-default: var(--light-component-button-onAction-default);
    --component-button-onAction-hover: var(--light-component-button-onAction-hover);
    --component-button-onAction-pressed: var(--light-component-button-onAction-pressed);
    --global-bg-base-default: var(--light-global-bg-base-default);
    --global-bg-base-hover: var(--light-global-bg-base-hover);
    --global-bg-base-pressed: var(--light-global-bg-base-pressed);
    --global-bg-baseAlt-default: var(--light-global-bg-baseAlt-default);
    --global-bg-baseAlt-hover: var(--light-global-bg-baseAlt-hover);
    --global-bg-baseAlt-pressed: var(--light-global-bg-baseAlt-pressed);
    --global-bg-elevated-default: var(--light-global-bg-elevated-default);
    --global-bg-elevated-hover: var(--light-global-bg-elevated-hover);
    --global-bg-elevated-pressed: var(--light-global-bg-elevated-pressed);
    --global-bg-page-default: var(--light-global-bg-page-default);
    --global-bg-page-hover: var(--light-global-bg-page-hover);
    --global-bg-page-pressed: var(--light-global-bg-page-pressed);
    --global-bg-pageAlt-default: var(--light-global-bg-pageAlt-default);
    --global-bg-pageAlt-hover: var(--light-global-bg-pageAlt-hover);
    --global-bg-pageAlt-pressed: var(--light-global-bg-pageAlt-pressed);
    --global-border-action-default: var(--light-global-border-action-default);
    --global-border-action-hover: var(--light-global-border-action-hover);
    --global-border-action-pressed: var(--light-global-border-action-pressed);
    --global-border-muted-default: var(--light-global-border-muted-default);
    --global-border-muted-hover: var(--light-global-border-muted-hover);
    --global-border-muted-pressed: var(--light-global-border-muted-pressed);
    --global-content-inverted-default: var(--light-global-content-inverted-default);
    --global-content-inverted-hover: var(--light-global-content-inverted-hover);
    --global-content-inverted-pressed: var(--light-global-content-inverted-pressed);
    --global-content-invertedMuted-default: var(--light-global-content-invertedMuted-default);
    --global-content-invertedMuted-hover: var(--light-global-content-invertedMuted-hover);
    --global-content-invertedMuted-pressed: var(--light-global-content-invertedMuted-pressed);
    --global-content-invertedSubtle-default: var(--light-global-content-invertedSubtle-default);
    --global-content-invertedSubtle-hover: var(--light-global-content-invertedSubtle-hover);
    --global-content-invertedSubtle-pressed: var(--light-global-content-invertedSubtle-pressed);
    --global-content-muted-default: var(--light-global-content-muted-default);
    --global-content-muted-hover: var(--light-global-content-muted-hover);
    --global-content-muted-pressed: var(--light-global-content-muted-pressed);
    --global-content-regular-default: var(--light-global-content-regular-default);
    --global-content-regular-hover: var(--light-global-content-regular-hover);
    --global-content-regular-pressed: var(--light-global-content-regular-pressed);
    --global-content-subtle-default: var(--light-global-content-subtle-default);
    --global-content-subtle-hover: var(--light-global-content-subtle-hover);
    --global-content-subtle-pressed: var(--light-global-content-subtle-pressed);
    --global-critical-action-default: var(--light-global-critical-action-default);
    --global-critical-action-hover: var(--light-global-critical-action-hover);
    --global-critical-action-pressed: var(--light-global-critical-action-pressed);
    --global-critical-muted-default: var(--light-global-critical-muted-default);
    --global-critical-muted-hover: var(--light-global-critical-muted-hover);
    --global-critical-muted-pressed: var(--light-global-critical-muted-pressed);
    --global-critical-onAction-default: var(--light-global-critical-onAction-default);
    --global-critical-onAction-hover: var(--light-global-critical-onAction-hover);
    --global-critical-onAction-pressed: var(--light-global-critical-onAction-pressed);
    --global-critical-onMuted-default: var(--light-global-critical-onMuted-default);
    --global-critical-onMuted-hover: var(--light-global-critical-onMuted-hover);
    --global-critical-onMuted-pressed: var(--light-global-critical-onMuted-pressed);
    --global-primary-action-default: var(--light-global-primary-action-default);
    --global-primary-action-hover: var(--light-global-primary-action-hover);
    --global-primary-action-pressed: var(--light-global-primary-action-pressed);
    --global-primary-actionBase-default: var(--light-global-primary-actionBase-default);
    --global-primary-actionBase-hover: var(--light-global-primary-actionBase-hover);
    --global-primary-actionBase-pressed: var(--light-global-primary-actionBase-pressed);
    --global-primary-muted-default: var(--light-global-primary-muted-default);
    --global-primary-muted-hover: var(--light-global-primary-muted-hover);
    --global-primary-muted-pressed: var(--light-global-primary-muted-pressed);
    --global-primary-onActionBase-default: var(--light-global-primary-onActionBase-default);
    --global-primary-onActionBase-hover: var(--light-global-primary-onActionBase-hover);
    --global-primary-onActionBase-pressed: var(--light-global-primary-onActionBase-pressed);
    --global-primary-onMuted-default: var(--light-global-primary-onMuted-default);
    --global-primary-onMuted-hover: var(--light-global-primary-onMuted-hover);
    --global-primary-onMuted-pressed: var(--light-global-primary-onMuted-pressed);
    --global-primary-onSubtle-default: var(--light-global-primary-onSubtle-default);
    --global-primary-onSubtle-hover: var(--light-global-primary-onSubtle-hover);
    --global-primary-onSubtle-pressed: var(--light-global-primary-onSubtle-pressed);
    --global-primary-subtle-default: var(--light-global-primary-subtle-default);
    --global-primary-subtle-hover: var(--light-global-primary-subtle-hover);
    --global-primary-subtle-pressed: var(--light-global-primary-subtle-pressed);
    --global-secondary-action-default: var(--light-global-secondary-action-default);
    --global-secondary-action-hover: var(--light-global-secondary-action-hover);
    --global-secondary-action-pressed: var(--light-global-secondary-action-pressed);
    --global-secondary-muted-default: var(--light-global-secondary-muted-default);
    --global-secondary-muted-hover: var(--light-global-secondary-muted-hover);
    --global-secondary-muted-pressed: var(--light-global-secondary-muted-pressed);
    --global-secondary-onAction-default: var(--light-global-secondary-onAction-default);
    --global-secondary-onAction-hover: var(--light-global-secondary-onAction-hover);
    --global-secondary-onAction-pressed: var(--light-global-secondary-onAction-pressed);
    --global-secondary-onMuted-default: var(--light-global-secondary-onMuted-default);
    --global-secondary-onMuted-hover: var(--light-global-secondary-onMuted-hover);
    --global-secondary-onMuted-pressed: var(--light-global-secondary-onMuted-pressed);
    --global-success-action-default: var(--light-global-success-action-default);
    --global-success-action-hover: var(--light-global-success-action-hover);
    --global-success-action-pressed: var(--light-global-success-action-pressed);
    --global-success-muted-default: var(--light-global-success-muted-default);
    --global-success-muted-hover: var(--light-global-success-muted-hover);
    --global-success-muted-pressed: var(--light-global-success-muted-pressed);
    --global-success-onAction-default: var(--light-global-success-onAction-default);
    --global-success-onAction-hover: var(--light-global-success-onAction-hover);
    --global-success-onAction-pressed: var(--light-global-success-onAction-pressed);
    --global-success-onMuted-default: var(--light-global-success-onMuted-default);
    --global-success-onMuted-hover: var(--light-global-success-onMuted-hover);
    --global-success-onMuted-pressed: var(--light-global-success-onMuted-pressed);
    --global-warning-action-default: var(--light-global-warning-action-default);
    --global-warning-action-hover: var(--light-global-warning-action-hover);
    --global-warning-action-pressed: var(--light-global-warning-action-pressed);
    --global-warning-muted-default: var(--light-global-warning-muted-default);
    --global-warning-muted-hover: var(--light-global-warning-muted-hover);
    --global-warning-muted-pressed: var(--light-global-warning-muted-pressed);
    --global-warning-onAction-default: var(--light-global-warning-onAction-default);
    --global-warning-onAction-hover: var(--light-global-warning-onAction-hover);
    --global-warning-onAction-pressed: var(--light-global-warning-onAction-pressed);
    --global-warning-onMuted-default: var(--light-global-warning-onMuted-default);
    --global-warning-onMuted-hover: var(--light-global-warning-onMuted-hover);
    --global-warning-onMuted-pressed: var(--light-global-warning-onMuted-pressed);
  }
}

.colorDark {
  color-scheme: dark;

  --component-button-action-default: var(--dark-component-button-action-default);
  --component-button-action-hover: var(--dark-component-button-action-hover);
  --component-button-action-pressed: var(--dark-component-button-action-pressed);
  --component-button-onAction-default: var(--dark-component-button-onAction-default);
  --component-button-onAction-hover: var(--dark-component-button-onAction-hover);
  --component-button-onAction-pressed: var(--dark-component-button-onAction-pressed);
  --global-bg-base-default: var(--dark-global-bg-base-default);
  --global-bg-base-hover: var(--dark-global-bg-base-hover);
  --global-bg-base-pressed: var(--dark-global-bg-base-pressed);
  --global-bg-baseAlt-default: var(--dark-global-bg-baseAlt-default);
  --global-bg-baseAlt-hover: var(--dark-global-bg-baseAlt-hover);
  --global-bg-baseAlt-pressed: var(--dark-global-bg-baseAlt-pressed);
  --global-bg-elevated-default: var(--dark-global-bg-elevated-default);
  --global-bg-elevated-hover: var(--dark-global-bg-elevated-hover);
  --global-bg-elevated-pressed: var(--dark-global-bg-elevated-pressed);
  --global-bg-page-default: var(--dark-global-bg-page-default);
  --global-bg-page-hover: var(--dark-global-bg-page-hover);
  --global-bg-page-pressed: var(--dark-global-bg-page-pressed);
  --global-bg-pageAlt-default: var(--dark-global-bg-pageAlt-default);
  --global-bg-pageAlt-hover: var(--dark-global-bg-pageAlt-hover);
  --global-bg-pageAlt-pressed: var(--dark-global-bg-pageAlt-pressed);
  --global-border-action-default: var(--dark-global-border-action-default);
  --global-border-action-hover: var(--dark-global-border-action-hover);
  --global-border-action-pressed: var(--dark-global-border-action-pressed);
  --global-border-muted-default: var(--dark-global-border-muted-default);
  --global-border-muted-hover: var(--dark-global-border-muted-hover);
  --global-border-muted-pressed: var(--dark-global-border-muted-pressed);
  --global-content-inverted-default: var(--dark-global-content-inverted-default);
  --global-content-inverted-hover: var(--dark-global-content-inverted-hover);
  --global-content-inverted-pressed: var(--dark-global-content-inverted-pressed);
  --global-content-invertedMuted-default: var(--dark-global-content-invertedMuted-default);
  --global-content-invertedMuted-hover: var(--dark-global-content-invertedMuted-hover);
  --global-content-invertedMuted-pressed: var(--dark-global-content-invertedMuted-pressed);
  --global-content-invertedSubtle-default: var(--dark-global-content-invertedSubtle-default);
  --global-content-invertedSubtle-hover: var(--dark-global-content-invertedSubtle-hover);
  --global-content-invertedSubtle-pressed: var(--dark-global-content-invertedSubtle-pressed);
  --global-content-muted-default: var(--dark-global-content-muted-default);
  --global-content-muted-hover: var(--dark-global-content-muted-hover);
  --global-content-muted-pressed: var(--dark-global-content-muted-pressed);
  --global-content-regular-default: var(--dark-global-content-regular-default);
  --global-content-regular-hover: var(--dark-global-content-regular-hover);
  --global-content-regular-pressed: var(--dark-global-content-regular-pressed);
  --global-content-subtle-default: var(--dark-global-content-subtle-default);
  --global-content-subtle-hover: var(--dark-global-content-subtle-hover);
  --global-content-subtle-pressed: var(--dark-global-content-subtle-pressed);
  --global-critical-action-default: var(--dark-global-critical-action-default);
  --global-critical-action-hover: var(--dark-global-critical-action-hover);
  --global-critical-action-pressed: var(--dark-global-critical-action-pressed);
  --global-critical-muted-default: var(--dark-global-critical-muted-default);
  --global-critical-muted-hover: var(--dark-global-critical-muted-hover);
  --global-critical-muted-pressed: var(--dark-global-critical-muted-pressed);
  --global-critical-onAction-default: var(--dark-global-critical-onAction-default);
  --global-critical-onAction-hover: var(--dark-global-critical-onAction-hover);
  --global-critical-onAction-pressed: var(--dark-global-critical-onAction-pressed);
  --global-critical-onMuted-default: var(--dark-global-critical-onMuted-default);
  --global-critical-onMuted-hover: var(--dark-global-critical-onMuted-hover);
  --global-critical-onMuted-pressed: var(--dark-global-critical-onMuted-pressed);
  --global-primary-action-default: var(--dark-global-primary-action-default);
  --global-primary-action-hover: var(--dark-global-primary-action-hover);
  --global-primary-action-pressed: var(--dark-global-primary-action-pressed);
  --global-primary-actionBase-default: var(--dark-global-primary-actionBase-default);
  --global-primary-actionBase-hover: var(--dark-global-primary-actionBase-hover);
  --global-primary-actionBase-pressed: var(--dark-global-primary-actionBase-pressed);
  --global-primary-muted-default: var(--dark-global-primary-muted-default);
  --global-primary-muted-hover: var(--dark-global-primary-muted-hover);
  --global-primary-muted-pressed: var(--dark-global-primary-muted-pressed);
  --global-primary-onActionBase-default: var(--dark-global-primary-onActionBase-default);
  --global-primary-onActionBase-hover: var(--dark-global-primary-onActionBase-hover);
  --global-primary-onActionBase-pressed: var(--dark-global-primary-onActionBase-pressed);
  --global-primary-onMuted-default: var(--dark-global-primary-onMuted-default);
  --global-primary-onMuted-hover: var(--dark-global-primary-onMuted-hover);
  --global-primary-onMuted-pressed: var(--dark-global-primary-onMuted-pressed);
  --global-primary-onSubtle-default: var(--dark-global-primary-onSubtle-default);
  --global-primary-onSubtle-hover: var(--dark-global-primary-onSubtle-hover);
  --global-primary-onSubtle-pressed: var(--dark-global-primary-onSubtle-pressed);
  --global-primary-subtle-default: var(--dark-global-primary-subtle-default);
  --global-primary-subtle-hover: var(--dark-global-primary-subtle-hover);
  --global-primary-subtle-pressed: var(--dark-global-primary-subtle-pressed);
  --global-secondary-action-default: var(--dark-global-secondary-action-default);
  --global-secondary-action-hover: var(--dark-global-secondary-action-hover);
  --global-secondary-action-pressed: var(--dark-global-secondary-action-pressed);
  --global-secondary-muted-default: var(--dark-global-secondary-muted-default);
  --global-secondary-muted-hover: var(--dark-global-secondary-muted-hover);
  --global-secondary-muted-pressed: var(--dark-global-secondary-muted-pressed);
  --global-secondary-onAction-default: var(--dark-global-secondary-onAction-default);
  --global-secondary-onAction-hover: var(--dark-global-secondary-onAction-hover);
  --global-secondary-onAction-pressed: var(--dark-global-secondary-onAction-pressed);
  --global-secondary-onMuted-default: var(--dark-global-secondary-onMuted-default);
  --global-secondary-onMuted-hover: var(--dark-global-secondary-onMuted-hover);
  --global-se