color variants

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);
+}

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);
+}

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);
+}

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);
+}

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);
+}

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);
+}

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);
+}

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);
+}

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;

gfi-ihk-2024/stories/_global/styles/themes.scss

@@ -3,3 +3,11 @@
 // runtime by toggling the `data-theme` attribute on <html> (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 *;

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;

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;