/* eslint-disable */

/**
 * Do not edit directly
 * Generated by cocokits 'token-generator'
 */

@mixin use_theme_theme-b {
  :where(.cck-theme-frames-x__theme--theme-b),
  :where([data-cck-theme*='frames-x__theme--theme-b']) {
    @include variables_theme_theme-b;
  }
}

@mixin variables_theme_theme-b {
  --base-surface-1: var(--colors-alpha-light-900);
  --base-surface-2: var(--colors-bronze-50);
  --base-fill-1: var(--colors-bronze-100);
  --base-fill-2: var(--colors-bronze-200);
  --base-fill-3: var(--colors-bronze-300);
  --base-fill-4: var(--colors-bronze-400);
  --base-fill-5: var(--colors-bronze-600);
  --base-border: var(--colors-bronze-200);
  --base-disabled: var(--colors-alpha-dark-200);
  --state-brand-active: var(--colors-orange-600);
  --state-brand-hover: var(--colors-orange-500);
  --state-brand-selected: var(--colors-orange-400);
  --state-danger-active: var(--colors-rose-600);
  --state-danger-hover: var(--colors-rose-400);
  --state-danger-selected: var(--colors-rose-200);
  --state-highlight-active: var(--colors-purple-600);
  --state-highlight-hover: var(--colors-purple-300);
  --state-highlight-selected: var(--colors-purple-200);
  --state-success-active: var(--colors-teal-600);
  --state-success-hover: var(--colors-teal-400);
  --state-success-selected: var(--colors-teal-300);
}