From 998847a5e7125ffcda6cff77d104c71e8b5c0008 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Mon, 15 Jun 2026 12:15:04 +0200 Subject: [PATCH] more color variants --- .../_global/styles/theme-colorvariant-05.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-06.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-07.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-08.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-09.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-15.scss | 155 ++++++++++++++++++ .../stories/_global/styles/themes.config.js | 30 ++++ .../stories/_global/styles/themes.scss | 6 + 8 files changed, 966 insertions(+) create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss new file mode 100644 index 0000000..8d8cbe7 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-05"] { + // swatches / primary + --swatches-primary-600: #007896; + --swatches-primary-500: #0092B7; + --swatches-primary-500-rgb: 0, 146, 183; + --swatches-primary-500-o20: rgba(0, 146, 183,0.2); // #cce9f1 + --swatches-primary-400: #45AFCA; + --swatches-primary-300: #94D1E1; + --swatches-primary-200: #B8E0EB; + --swatches-primary-100: #D9EFF4; + --swatches-primary-100-o30: rgba(217,239,244,0.3); // #f4fafc + --swatches-primary-050: #EBF6F9; + // swatches / secondary + --swatches-secondary-700: #667A00; + --swatches-secondary-500: #AFD300; + --swatches-secondary-500-o30: rgba(175,211,0,0.3); // #e7f2b2 + --swatches-secondary-300: #D1E56B; + --swatches-secondary-200: #F4F9DB; + --swatches-secondary-100: #FAFBF3; + // 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-primary-500); + --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-primary-500); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-500); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-05"] .variant-base, +[data-theme="colorvariant-05"] .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="colorvariant-05"] .variant-subtle-primary, +[data-theme="colorvariant-05"] .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="colorvariant-05"] .variant-subtle-secondary, +[data-theme="colorvariant-05"] .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="colorvariant-05"] .variant-solid, +[data-theme="colorvariant-05"] .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="colorvariant-05"] .variant-accent, +[data-theme="colorvariant-05"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss new file mode 100644 index 0000000..04704fe --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-06"] { + // swatches / primary + --swatches-primary-600: #2B7D81; + --swatches-primary-500: #34989D; + --swatches-primary-500-rgb: 52, 152, 157; + --swatches-primary-500-o20: rgba(52, 152, 157,0.2); // #d6eaeb + --swatches-primary-400: #6BB4B7; + --swatches-primary-300: #AAD4D6; + --swatches-primary-200: #C6E2E4; + --swatches-primary-100: #E1F0F0; + --swatches-primary-100-o30: rgba(225,240,240,0.3); // #f6fafa + --swatches-primary-050: #EFF7F7; + // swatches / secondary + --swatches-secondary-700: #94771B; + --swatches-secondary-500: #FFCE2E; + --swatches-secondary-500-o30: rgba(255,206,46,0.3); // #fff0c0 + --swatches-secondary-300: #FFE386; + --swatches-secondary-200: #FFF9E4; + --swatches-secondary-100: #FFFCF3; + // 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-primary-500); + --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-primary-500); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-500); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-06"] .variant-base, +[data-theme="colorvariant-06"] .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="colorvariant-06"] .variant-subtle-primary, +[data-theme="colorvariant-06"] .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="colorvariant-06"] .variant-subtle-secondary, +[data-theme="colorvariant-06"] .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="colorvariant-06"] .variant-solid, +[data-theme="colorvariant-06"] .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="colorvariant-06"] .variant-accent, +[data-theme="colorvariant-06"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss new file mode 100644 index 0000000..feb0b0a --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-07"] { + // swatches / primary + --swatches-primary-600: #9F2000; + --swatches-primary-500: #C22700; + --swatches-primary-500-rgb: 194, 39, 0; + --swatches-primary-500-o20: rgba(194, 39, 0,0.2); // #f3d4cc + --swatches-primary-400: #D26145; + --swatches-primary-300: #E5A494; + --swatches-primary-200: #EEC3B8; + --swatches-primary-100: #F6DFD9; + --swatches-primary-100-o30: rgba(246,223,217,0.3); // #fcf5f4 + --swatches-primary-050: #FAEEEB; + // swatches / secondary + --swatches-secondary-700: #1E585B; + --swatches-secondary-500: #34989D; + --swatches-secondary-500-o30: rgba(52,152,157,0.3); // #c2e0e1 + --swatches-secondary-300: #89C3C6; + --swatches-secondary-200: #B2D8DA; + --swatches-secondary-100: #E3F1F1; + // 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-primary-050); + --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-primary-050); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-100); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-07"] .variant-base, +[data-theme="colorvariant-07"] .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="colorvariant-07"] .variant-subtle-primary, +[data-theme="colorvariant-07"] .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="colorvariant-07"] .variant-subtle-secondary, +[data-theme="colorvariant-07"] .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="colorvariant-07"] .variant-solid, +[data-theme="colorvariant-07"] .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="colorvariant-07"] .variant-accent, +[data-theme="colorvariant-07"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss new file mode 100644 index 0000000..cc02188 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-08"] { + // swatches / primary + --swatches-primary-600: #4B6A00; + --swatches-primary-500: #5C8100; + --swatches-primary-500-rgb: 92, 129, 0; + --swatches-primary-500-o20: rgba(92, 129, 0,0.2); // #dee6cc + --swatches-primary-400: #88A345; + --swatches-primary-300: #BBCA94; + --swatches-primary-200: #D1DCB8; + --swatches-primary-100: #E7ECD9; + --swatches-primary-100-o30: rgba(231,236,217,0.3); // #f8f9f4 + --swatches-primary-050: #F2F5EB; + // swatches / secondary + --swatches-secondary-700: #008594; + --swatches-secondary-500: #00E6FF; + --swatches-secondary-500-o30: rgba(0,230,255,0.3); // #b2f7ff + --swatches-secondary-300: #6BF0FF; + --swatches-secondary-200: #9EF6FF; + --swatches-secondary-100: #DBFCFF; + // 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-primary-500); + --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-primary-500); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-500); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-08"] .variant-base, +[data-theme="colorvariant-08"] .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="colorvariant-08"] .variant-subtle-primary, +[data-theme="colorvariant-08"] .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="colorvariant-08"] .variant-subtle-secondary, +[data-theme="colorvariant-08"] .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="colorvariant-08"] .variant-solid, +[data-theme="colorvariant-08"] .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="colorvariant-08"] .variant-accent, +[data-theme="colorvariant-08"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss new file mode 100644 index 0000000..9584b7c --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-09"] { + // swatches / primary + --swatches-primary-600: #BD0067; + --swatches-primary-500: #E6007E; + --swatches-primary-500-rgb: 230, 0, 126; + --swatches-primary-500-o20: rgba(230, 0, 126,0.2); // #facce5 + --swatches-primary-400: #ED45A1; + --swatches-primary-300: #F494C9; + --swatches-primary-200: #F8B8DB; + --swatches-primary-100: #FBD9EC; + --swatches-primary-100-o30: rgba(251,217,236,0.3); // #fef4f9 + --swatches-primary-050: #FDEBF5; + // swatches / secondary + --swatches-secondary-700: #322531; + --swatches-secondary-500: #563F54; + --swatches-secondary-500-o30: rgba(86,63,84,0.3); // #ccc5cb + --swatches-secondary-300: #9D909C; + --swatches-secondary-200: #BFB6BE; + --swatches-secondary-100: #E7E4E7; + // 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-primary-050); + --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-primary-050); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-500); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-09"] .variant-base, +[data-theme="colorvariant-09"] .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="colorvariant-09"] .variant-subtle-primary, +[data-theme="colorvariant-09"] .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="colorvariant-09"] .variant-subtle-secondary, +[data-theme="colorvariant-09"] .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="colorvariant-09"] .variant-solid, +[data-theme="colorvariant-09"] .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="colorvariant-09"] .variant-accent, +[data-theme="colorvariant-09"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss new file mode 100644 index 0000000..c1be1c4 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-15"] { + // swatches / primary + --swatches-primary-600: #475956; + --swatches-primary-500: #576C69; + --swatches-primary-500-rgb: 87, 108, 105; + --swatches-primary-500-o20: rgba(87, 108, 105,0.2); // #dde2e1 + --swatches-primary-400: #849492; + --swatches-primary-300: #B8C1C0; + --swatches-primary-200: #D0D6D5; + --swatches-primary-100: #E6E9E8; + --swatches-primary-100-o30: rgba(230,233,232,0.3); // #f7f8f8 + --swatches-primary-050: #F2F3F3; + // swatches / secondary + --swatches-secondary-700: #184C44; + --swatches-secondary-500: #298375; + --swatches-secondary-500-o30: rgba(41,131,117,0.3); // #bedad5 + --swatches-secondary-300: #83B7AF; + --swatches-secondary-200: #AED0CB; + --swatches-secondary-100: #E1EEEC; + // 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-primary-050); + --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-primary-050); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-secondary-200); + --text-accent-on-solid: var(--swatches-neutrals-white); + // 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="colorvariant-15"] .variant-base, +[data-theme="colorvariant-15"] .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="colorvariant-15"] .variant-subtle-primary, +[data-theme="colorvariant-15"] .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="colorvariant-15"] .variant-subtle-secondary, +[data-theme="colorvariant-15"] .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="colorvariant-15"] .variant-solid, +[data-theme="colorvariant-15"] .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="colorvariant-15"] .variant-accent, +[data-theme="colorvariant-15"] .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); +} diff --git a/gfi-ihk-2024/stories/_global/styles/themes.config.js b/gfi-ihk-2024/stories/_global/styles/themes.config.js index a795e21..49e877b 100644 --- a/gfi-ihk-2024/stories/_global/styles/themes.config.js +++ b/gfi-ihk-2024/stories/_global/styles/themes.config.js @@ -52,6 +52,36 @@ export const themes = [ value: 'colorvariant-04', file: 'theme-colorvariant-04.scss', }, + { + name: 'Farbvariante 05', + value: 'colorvariant-05', + file: 'theme-colorvariant-05.scss', + }, + { + name: 'Farbvariante 06', + value: 'colorvariant-06', + file: 'theme-colorvariant-06.scss', + }, + { + name: 'Farbvariante 07', + value: 'colorvariant-07', + file: 'theme-colorvariant-07.scss', + }, + { + name: 'Farbvariante 08', + value: 'colorvariant-08', + file: 'theme-colorvariant-08.scss', + }, + { + name: 'Farbvariante 09', + value: 'colorvariant-09', + file: 'theme-colorvariant-09.scss', + }, + { + name: 'Farbvariante 15', + value: 'colorvariant-15', + file: 'theme-colorvariant-15.scss', + }, ]; export const defaultTheme = themes[0].value; diff --git a/gfi-ihk-2024/stories/_global/styles/themes.scss b/gfi-ihk-2024/stories/_global/styles/themes.scss index 13c4fa9..0157ed3 100644 --- a/gfi-ihk-2024/stories/_global/styles/themes.scss +++ b/gfi-ihk-2024/stories/_global/styles/themes.scss @@ -11,3 +11,9 @@ @use '../../_global/styles/theme-colorvariant-02' as *; @use '../../_global/styles/theme-colorvariant-03' as *; @use '../../_global/styles/theme-colorvariant-04' as *; +@use '../../_global/styles/theme-colorvariant-05' as *; +@use '../../_global/styles/theme-colorvariant-06' as *; +@use '../../_global/styles/theme-colorvariant-07' as *; +@use '../../_global/styles/theme-colorvariant-08' as *; +@use '../../_global/styles/theme-colorvariant-09' as *; +@use '../../_global/styles/theme-colorvariant-15' as *;