From a8e5179f0b06a373d11c47788d5d09c2f57bd2f1 Mon Sep 17 00:00:00 2001 From: FlorianEisenmenger Date: Thu, 11 Jun 2026 15:51:37 +0200 Subject: [PATCH] color variants --- .../_global/styles/theme-colorvariant-02.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-03.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-04.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-10.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-11.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-12.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-13.scss | 155 ++++++++++++++++++ .../_global/styles/theme-colorvariant-14.scss | 155 ++++++++++++++++++ .../stories/_global/styles/themes.config.js | 40 +++++ .../stories/_global/styles/themes.scss | 8 + .../stories/components/teaser/teaser.scss | 2 +- .../stories/sections/teasers/teasers.scss | 2 +- 12 files changed, 1290 insertions(+), 2 deletions(-) create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-02.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-03.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-04.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-10.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-11.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-12.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-13.scss create mode 100644 gfi-ihk-2024/stories/_global/styles/theme-colorvariant-14.scss diff --git a/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-02.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-02.scss new file mode 100644 index 0000000..e3562a7 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-02.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-02"] { + // 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: #E3EBF5; + --swatches-primary-100-o30: rgba(227,235,245,0.3); // #f7f9fc + --swatches-primary-050: #F0F2F5; + // swatches / secondary + --swatches-secondary-700: #7F9654; + --swatches-secondary-500: #AFCC7A; + --swatches-secondary-500-o30: rgba(175,204,122,0.3); // #fdfdfd + --swatches-secondary-300: #CFE0AF; + --swatches-secondary-200: #DFEBCA; + --swatches-secondary-100: #EFF5E4; + // 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-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-secondary-100); + // 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-02"] .variant-base, +[data-theme="colorvariant-02"] .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-02"] .variant-subtle-primary, +[data-theme="colorvariant-02"] .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-02"] .variant-subtle-secondary, +[data-theme="colorvariant-02"] .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-02"] .variant-solid, +[data-theme="colorvariant-02"] .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-02"] .variant-accent, +[data-theme="colorvariant-02"] .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-03.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-03.scss new file mode 100644 index 0000000..418d61d --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-03.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-03"] { + // swatches / primary + --swatches-primary-600: #457B30; + --swatches-primary-500: #56A437; + --swatches-primary-500-rgb: 86, 164, 55; + --swatches-primary-500-o20: rgba(86, 164, 55,0.2); // #ddedd7 + --swatches-primary-400: #BBDBAF; + --swatches-primary-300: #CCE4C3; + --swatches-primary-200: #DDEDD7; + --swatches-primary-100: #EEF6EB; + --swatches-primary-100-o30: rgba(238,246,235,0.3); // #fafcf9 + --swatches-primary-050: #F7FAF5; + // swatches / secondary + --swatches-secondary-700: #DBAC12; + --swatches-secondary-500: #FFCE2E; + --swatches-secondary-500-o30: rgba(255,206,46,0.3); // #fff0c0 + --swatches-secondary-300: #FFF0C0; + --swatches-secondary-200: #FFF5D5; + --swatches-secondary-100: #FFFAEA; + // 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-600); + --buttons-secondary-background: var(--swatches-secondary-500); + // buttons / tertiary + --buttons-tertiary-text: var(--swatches-primary-600); + --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-secondary-100); + // 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-03"] .variant-base, +[data-theme="colorvariant-03"] .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-03"] .variant-subtle-primary, +[data-theme="colorvariant-03"] .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-03"] .variant-subtle-secondary, +[data-theme="colorvariant-03"] .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-03"] .variant-solid, +[data-theme="colorvariant-03"] .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-03"] .variant-accent, +[data-theme="colorvariant-03"] .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-04.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-04.scss new file mode 100644 index 0000000..7dcc682 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-04.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-04"] { + // swatches / primary + --swatches-primary-600: #3D5854; + --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: #ABB5B4; + --swatches-primary-300: #C4CCCA; + --swatches-primary-200: #D5DAD9; + --swatches-primary-100: #E6E9E9; + --swatches-primary-100-o30: rgba(230,233,233,0.3); // #f7f8f8 + --swatches-primary-050: #EEF0F0; + // swatches / secondary + --swatches-secondary-700: #1F6A5E; + --swatches-secondary-500: #298375; + --swatches-secondary-500-o30: rgba(41,131,117,0.3); // #bedad5 + --swatches-secondary-300: #BFDAD6; + --swatches-secondary-200: #D4E6E3; + --swatches-secondary-100: #EAF3F1; + // 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-700); + --text-accent-on-accent: var(--swatches-secondary-300); + --text-accent-on-solid: var(--swatches-secondary-100); + // 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-04"] .variant-base, +[data-theme="colorvariant-04"] .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-04"] .variant-subtle-primary, +[data-theme="colorvariant-04"] .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-04"] .variant-subtle-secondary, +[data-theme="colorvariant-04"] .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-04"] .variant-solid, +[data-theme="colorvariant-04"] .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-04"] .variant-accent, +[data-theme="colorvariant-04"] .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-10.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-10.scss new file mode 100644 index 0000000..e0fa98d --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-10.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-10"] { + // swatches / primary + --swatches-primary-600: #000C19; + --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: #E3EBF5; + --swatches-primary-100-o30: rgba(227,235,245,0.3); // #f7f9fc + --swatches-primary-050: #F0F2F5; + // swatches / secondary + --swatches-secondary-700: #004A69; + --swatches-secondary-500: #00A5E9; + --swatches-secondary-500-o30: rgba(0,165,233,0.3); // #b2e4f8 + --swatches-secondary-300: #8FD7F5; + --swatches-secondary-200: #B2E4F8; + --swatches-secondary-100: #E5F6FD; + // 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-primary-600); + --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-primary-600); + // feedback + --feedback-error: #AA2229; + --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-10"] .variant-base, +[data-theme="colorvariant-10"] .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-10"] .variant-subtle-primary, +[data-theme="colorvariant-10"] .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-10"] .variant-subtle-secondary, +[data-theme="colorvariant-10"] .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-10"] .variant-solid, +[data-theme="colorvariant-10"] .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-10"] .variant-accent, +[data-theme="colorvariant-10"] .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-11.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-11.scss new file mode 100644 index 0000000..dfc20c5 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-11.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-11"] { + // swatches / primary + --swatches-primary-600: #040B4D; + --swatches-primary-500: #040F70; + --swatches-primary-500-rgb: 4, 15, 112; + --swatches-primary-500-o20: rgba(4, 15, 112,0.2); // #cdcfe2 + --swatches-primary-400: #363F8D; + --swatches-primary-300: #B4B7D4; + --swatches-primary-200: #CDCFE2; + --swatches-primary-100: #E6E7F1; + --swatches-primary-100-o30: rgba(230,231,241,0.3); // #f7f8fb + --swatches-primary-050: #F2F3F8; + // swatches / secondary + --swatches-secondary-700: #0A6388; + --swatches-secondary-500: #077EAF; + --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7 + --swatches-secondary-300: #B5D8E7; + --swatches-secondary-200: #CDE5EF; + --swatches-secondary-100: #E6F2F7; + // 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-primary-200); + --text-accent-on-solid: var(--swatches-primary-100); + // feedback + --feedback-error: #AA2229; + --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-11"] .variant-base, +[data-theme="colorvariant-11"] .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-11"] .variant-subtle-primary, +[data-theme="colorvariant-11"] .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-11"] .variant-subtle-secondary, +[data-theme="colorvariant-11"] .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-11"] .variant-solid, +[data-theme="colorvariant-11"] .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-11"] .variant-accent, +[data-theme="colorvariant-11"] .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-12.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-12.scss new file mode 100644 index 0000000..a724658 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-12.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-12"] { + // swatches / primary + --swatches-primary-600: #003836; + --swatches-primary-500: #05625F; + --swatches-primary-500-rgb: 5, 98, 95; + --swatches-primary-500-o20: rgba(5, 98, 95,0.2); // #cde0df + --swatches-primary-400: #356D6D; + --swatches-primary-300: #648F8F; + --swatches-primary-200: #96B3B3; + --swatches-primary-100: #E6EDED; + --swatches-primary-100-o30: rgba(230,237,237,0.3); // #f7fafa + --swatches-primary-050: #F2F7F7; + // swatches / secondary + --swatches-secondary-700: #004D6D; + --swatches-secondary-500: #077EAF; + --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7 + --swatches-secondary-300: #B5D8E7; + --swatches-secondary-200: #CDE5EF; + --swatches-secondary-100: #E6F2F7; + // 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-700); + // buttons / tertiary + --buttons-tertiary-text: var(--swatches-primary-600); + --buttons-tertiary-background: var(--swatches-primary-050); + // text / default + --text-default-standard: var(--swatches-primary-600); + --text-default-on-accent: var(--swatches-neutrals-white); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-primary-100); + --text-accent-on-solid: var(--swatches-secondary-200); + // feedback + --feedback-error: #AA2229; + --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-12"] .variant-base, +[data-theme="colorvariant-12"] .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-12"] .variant-subtle-primary, +[data-theme="colorvariant-12"] .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-12"] .variant-subtle-secondary, +[data-theme="colorvariant-12"] .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-12"] .variant-solid, +[data-theme="colorvariant-12"] .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-12"] .variant-accent, +[data-theme="colorvariant-12"] .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-13.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-13.scss new file mode 100644 index 0000000..476912f --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-13.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-13"] { + // swatches / primary + --swatches-primary-600: #6A0009; + --swatches-primary-500: #AD000F; + --swatches-primary-500-rgb: rgba(173, 0, 15); + --swatches-primary-500-o20: rgba(173, 0, 15,0.2); // #efcccf + --swatches-primary-400: #BE3440; + --swatches-primary-300: #CD636C; + --swatches-primary-200: #DC939A; + --swatches-primary-100: #F7E6E7; + --swatches-primary-100-o30: rgba(247,230,231,0.3); // #fdf7f8 + --swatches-primary-050: #FFF5F6; + // swatches / secondary + --swatches-secondary-700: #004D6D; + --swatches-secondary-500: #005F86; + --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7 + --swatches-secondary-300: #B5D8E7; + --swatches-secondary-200: #CDE5EF; + --swatches-secondary-100: #FEFFFF; + // swatches / neutrals + --swatches-neutrals-white: #FFF; + --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent + // gradient + --gradient-a: var(--swatches-primary-500); + --gradient-b: var(--swatches-secondary-700); + // buttons / secondary + --buttons-secondary-text: var(--swatches-neutrals-white); + --buttons-secondary-background: var(--swatches-secondary-500); + // buttons / tertiary + --buttons-tertiary-text: var(--swatches-primary-600); + --buttons-tertiary-background: var(--swatches-primary-050); + // text / default + --text-default-standard: var(--swatches-primary-600); + --text-default-on-accent: var(--swatches-neutrals-white); + --text-default-on-solid: var(--swatches-neutrals-white); + // text / accent + --text-accent-default: var(--swatches-secondary-700); + --text-accent-on-accent: var(--swatches-primary-050); + --text-accent-on-solid: var(--swatches-secondary-100); + // feedback + --feedback-error: #AA2229; + --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-13"] .variant-base, +[data-theme="colorvariant-13"] .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-13"] .variant-subtle-primary, +[data-theme="colorvariant-13"] .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-13"] .variant-subtle-secondary, +[data-theme="colorvariant-13"] .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-13"] .variant-solid, +[data-theme="colorvariant-13"] .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-13"] .variant-accent, +[data-theme="colorvariant-13"] .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-14.scss b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-14.scss new file mode 100644 index 0000000..3cdf443 --- /dev/null +++ b/gfi-ihk-2024/stories/_global/styles/theme-colorvariant-14.scss @@ -0,0 +1,155 @@ +// IMPORTANT: Change primary color in _svg-vars.scss! + +[data-theme="colorvariant-14"] { + // swatches / primary + --swatches-primary-600: #2F3131; + --swatches-primary-500: #494A4A; + --swatches-primary-500-rgb: 73, 74, 74; + --swatches-primary-500-o20: rgba(73, 74, 74,0.2); // #dbdbdb + --swatches-primary-400: #6F6F6F; + --swatches-primary-300: #8F9090; + --swatches-primary-200: #B3B3B3; + --swatches-primary-100: #EDEDED; + --swatches-primary-100-o30: rgba(237,237,237,0.3); // #fafafa + --swatches-primary-050: #F7F7F7; + // swatches / secondary + --swatches-secondary-700: #00293B; + --swatches-secondary-500: #004D6E; + --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7 + --swatches-secondary-300: #B5D8E7; + --swatches-secondary-200: #CDE5EF; + --swatches-secondary-100: #E6F2F7; + // swatches / neutrals + --swatches-neutrals-white: #FFF; + --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent + // gradient + --gradient-a: var(--swatches-primary-500); + --gradient-b: var(--swatches-secondary-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-600); + --buttons-tertiary-background: var(--swatches-primary-050); + // text / default + --text-default-standard: var(--swatches-primary-600); + --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-primary-100); + --text-accent-on-solid: var(--swatches-neutrals-white); + // feedback + --feedback-error: #AA2229; + --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-14"] .variant-base, +[data-theme="colorvariant-14"] .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-14"] .variant-subtle-primary, +[data-theme="colorvariant-14"] .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-14"] .variant-subtle-secondary, +[data-theme="colorvariant-14"] .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-14"] .variant-solid, +[data-theme="colorvariant-14"] .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-14"] .variant-accent, +[data-theme="colorvariant-14"] .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 52649dd..a795e21 100644 --- a/gfi-ihk-2024/stories/_global/styles/themes.config.js +++ b/gfi-ihk-2024/stories/_global/styles/themes.config.js @@ -12,6 +12,46 @@ export const themes = [ value: 'digitalblue', file: 'theme-digitalblue.scss', }, + { + name: 'Farbvariante 10', + value: 'colorvariant-10', + file: 'theme-colorvariant-10.scss', + }, + { + name: 'Farbvariante 11', + value: 'colorvariant-11', + file: 'theme-colorvariant-11.scss', + }, + { + name: 'Farbvariante 12', + value: 'colorvariant-12', + file: 'theme-colorvariant-12.scss', + }, + { + name: 'Farbvariante 13', + value: 'colorvariant-13', + file: 'theme-colorvariant-13.scss', + }, + { + name: 'Farbvariante 14', + value: 'colorvariant-14', + file: 'theme-colorvariant-14.scss', + }, + { + name: 'Farbvariante 02', + value: 'colorvariant-02', + file: 'theme-colorvariant-02.scss', + }, + { + name: 'Farbvariante 03', + value: 'colorvariant-03', + file: 'theme-colorvariant-03.scss', + }, + { + name: 'Farbvariante 04', + value: 'colorvariant-04', + file: 'theme-colorvariant-04.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 dbaf2c7..13c4fa9 100644 --- a/gfi-ihk-2024/stories/_global/styles/themes.scss +++ b/gfi-ihk-2024/stories/_global/styles/themes.scss @@ -3,3 +3,11 @@ // runtime by toggling the `data-theme` attribute on (see preview.js). @use '../../_global/styles/theme-standard' as *; @use '../../_global/styles/theme-digitalblue' as *; +@use '../../_global/styles/theme-colorvariant-10' as *; +@use '../../_global/styles/theme-colorvariant-11' as *; +@use '../../_global/styles/theme-colorvariant-12' as *; +@use '../../_global/styles/theme-colorvariant-13' as *; +@use '../../_global/styles/theme-colorvariant-14' as *; +@use '../../_global/styles/theme-colorvariant-02' as *; +@use '../../_global/styles/theme-colorvariant-03' as *; +@use '../../_global/styles/theme-colorvariant-04' as *; diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss index 67921b9..bbdf0aa 100644 --- a/gfi-ihk-2024/stories/components/teaser/teaser.scss +++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss @@ -67,7 +67,7 @@ width: 100%; display: block; height: 8px; - background-color: var(--color-decoration); + background-color: var(--color-border); transition: 0.3s ease; z-index: 1; border-bottom-right-radius: 4px; diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss index be72eaa..b2c089f 100644 --- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss +++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss @@ -399,7 +399,7 @@ width: 100%; display: block; height: 8px; - background-color: var(--color-text-accent); + background-color: var(--color-border); transition: 0.3s ease; z-index: 1; border-bottom-right-radius: 4px;