ihk24/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss

// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="digitalblue"] {
  // swatches / primary
  --swatches-primary-600: #002346;
  --swatches-primary-500: #003366;
  --swatches-primary-500-rgb: 0, 51, 102;
  --swatches-primary-500-o20: rgba(0,51,102,0.2); // #ccd6e0
  --swatches-primary-400: #335C85;
  --swatches-primary-300: #B0C4D6;
  --swatches-primary-200: #CCD7E6;
  --swatches-primary-100: #EDF3FA;
  --swatches-primary-100-o30: rgba(237,243,250,0.3); // #fafbfd
  --swatches-primary-050: #F5F8FC;
  // swatches / secondary
  --swatches-secondary-700: #2456D0;
  --swatches-secondary-500: #2C62E8;
  --swatches-secondary-500-o30: rgba(44,98,232,0.3); // #bfd0f8
  --swatches-secondary-300: #CAD8F9;
  --swatches-secondary-200: #EAEFFD;
  --swatches-secondary-100: #F3F6FD;
  // swatches / neutrals
  --swatches-neutrals-white: #FFF;
  --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
  // gradient
  --gradient-a: var(--swatches-secondary-500);
  --gradient-b: var(--swatches-primary-500);
  // buttons / secondary
  --buttons-secondary-text: var(--swatches-neutrals-white);
  --buttons-secondary-background: var(--swatches-secondary-500);
  // buttons / tertiary
  --buttons-tertiary-text: var(--swatches-primary-500);
  --buttons-tertiary-background: var(--swatches-primary-200);
  // text / default
  --text-default-standard: var(--swatches-primary-500);
  --text-default-on-accent: var(--swatches-neutrals-white);
  --text-default-on-solid: var(--swatches-neutrals-white);
  // text / accent
  --text-accent-default: var(--swatches-secondary-500);
  --text-accent-on-accent: var(--swatches-secondary-300);
  --text-accent-on-solid: var(--swatches-primary-200);
  // feedback
  --feedback-error: #D54048;
  --feedback-error-light: #F7D9DA;
  --feedback-warning: #FDC600;
  --feedback-warning-light: #FFF4CC;

  //--text-accent-default-1-500: #4BA490;
  //--text-accent-default-1-100: #DBEDE9;
}

[data-theme="digitalblue"] .variant-base,
[data-theme="digitalblue"] .variant-base-hover:hover {
  --color-background: var(--swatches-neutrals-white);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="digitalblue"] .variant-subtle-primary,
[data-theme="digitalblue"] .variant-subtle-primary-hover:hover {
  --color-background: var(--swatches-primary-100);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--swatches-neutrals-white);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="digitalblue"] .variant-subtle-secondary,
[data-theme="digitalblue"] .variant-subtle-secondary-hover:hover {
  --color-background: var(--swatches-secondary-200);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-secondary-500-o30);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--swatches-neutrals-white);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="digitalblue"] .variant-solid,
[data-theme="digitalblue"] .variant-solid-hover:hover {
  --color-background: var(--swatches-primary-500);
  --color-text: var(--swatches-neutrals-white);
  --color-text-accent: var(--text-accent-on-solid);
  --color-decoration: var(--color-text-accent);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-100-o30);
  --color-button-primary-background: var(--swatches-neutrals-white);
  --color-button-primary-text: var(--swatches-primary-500);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="digitalblue"] .variant-accent,
[data-theme="digitalblue"] .variant-accent-hover:hover {
  --color-background: var(--swatches-secondary-500);
  --color-text: var(--text-default-on-accent);
  --color-text-accent: var(--text-accent-on-accent);
  --color-decoration: var(--color-text-accent);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--swatches-neutrals-white);
  --color-button-secondary-text: var(--text-accent-default);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}