8 ha cambiato i file con 966 aggiunte e 0 eliminazioni
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss
-
+155 -0gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss
-
+30 -0gfi-ihk-2024/stories/_global/styles/themes.config.js
-
+6 -0gfi-ihk-2024/stories/_global/styles/themes.scss
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-05"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #007896; | |||
| --swatches-primary-500: #0092B7; | |||
| --swatches-primary-500-rgb: 0, 146, 183; | |||
| --swatches-primary-500-o20: rgba(0, 146, 183,0.2); // #cce9f1 | |||
| --swatches-primary-400: #45AFCA; | |||
| --swatches-primary-300: #94D1E1; | |||
| --swatches-primary-200: #B8E0EB; | |||
| --swatches-primary-100: #D9EFF4; | |||
| --swatches-primary-100-o30: rgba(217,239,244,0.3); // #f4fafc | |||
| --swatches-primary-050: #EBF6F9; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #667A00; | |||
| --swatches-secondary-500: #AFD300; | |||
| --swatches-secondary-500-o30: rgba(175,211,0,0.3); // #e7f2b2 | |||
| --swatches-secondary-300: #D1E56B; | |||
| --swatches-secondary-200: #F4F9DB; | |||
| --swatches-secondary-100: #FAFBF3; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-500); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-500); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-500); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-05"] .variant-base, | |||
| [data-theme="colorvariant-05"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-05"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-05"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-05"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-05"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-05"] .variant-solid, | |||
| [data-theme="colorvariant-05"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-05"] .variant-accent, | |||
| [data-theme="colorvariant-05"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-06"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #2B7D81; | |||
| --swatches-primary-500: #34989D; | |||
| --swatches-primary-500-rgb: 52, 152, 157; | |||
| --swatches-primary-500-o20: rgba(52, 152, 157,0.2); // #d6eaeb | |||
| --swatches-primary-400: #6BB4B7; | |||
| --swatches-primary-300: #AAD4D6; | |||
| --swatches-primary-200: #C6E2E4; | |||
| --swatches-primary-100: #E1F0F0; | |||
| --swatches-primary-100-o30: rgba(225,240,240,0.3); // #f6fafa | |||
| --swatches-primary-050: #EFF7F7; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #94771B; | |||
| --swatches-secondary-500: #FFCE2E; | |||
| --swatches-secondary-500-o30: rgba(255,206,46,0.3); // #fff0c0 | |||
| --swatches-secondary-300: #FFE386; | |||
| --swatches-secondary-200: #FFF9E4; | |||
| --swatches-secondary-100: #FFFCF3; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-500); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-500); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-500); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-06"] .variant-base, | |||
| [data-theme="colorvariant-06"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-06"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-06"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-06"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-06"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-06"] .variant-solid, | |||
| [data-theme="colorvariant-06"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-06"] .variant-accent, | |||
| [data-theme="colorvariant-06"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-07"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #9F2000; | |||
| --swatches-primary-500: #C22700; | |||
| --swatches-primary-500-rgb: 194, 39, 0; | |||
| --swatches-primary-500-o20: rgba(194, 39, 0,0.2); // #f3d4cc | |||
| --swatches-primary-400: #D26145; | |||
| --swatches-primary-300: #E5A494; | |||
| --swatches-primary-200: #EEC3B8; | |||
| --swatches-primary-100: #F6DFD9; | |||
| --swatches-primary-100-o30: rgba(246,223,217,0.3); // #fcf5f4 | |||
| --swatches-primary-050: #FAEEEB; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #1E585B; | |||
| --swatches-secondary-500: #34989D; | |||
| --swatches-secondary-500-o30: rgba(52,152,157,0.3); // #c2e0e1 | |||
| --swatches-secondary-300: #89C3C6; | |||
| --swatches-secondary-200: #B2D8DA; | |||
| --swatches-secondary-100: #E3F1F1; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-050); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-050); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-100); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-07"] .variant-base, | |||
| [data-theme="colorvariant-07"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-07"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-07"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-07"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-07"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-07"] .variant-solid, | |||
| [data-theme="colorvariant-07"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-07"] .variant-accent, | |||
| [data-theme="colorvariant-07"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-08"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #4B6A00; | |||
| --swatches-primary-500: #5C8100; | |||
| --swatches-primary-500-rgb: 92, 129, 0; | |||
| --swatches-primary-500-o20: rgba(92, 129, 0,0.2); // #dee6cc | |||
| --swatches-primary-400: #88A345; | |||
| --swatches-primary-300: #BBCA94; | |||
| --swatches-primary-200: #D1DCB8; | |||
| --swatches-primary-100: #E7ECD9; | |||
| --swatches-primary-100-o30: rgba(231,236,217,0.3); // #f8f9f4 | |||
| --swatches-primary-050: #F2F5EB; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #008594; | |||
| --swatches-secondary-500: #00E6FF; | |||
| --swatches-secondary-500-o30: rgba(0,230,255,0.3); // #b2f7ff | |||
| --swatches-secondary-300: #6BF0FF; | |||
| --swatches-secondary-200: #9EF6FF; | |||
| --swatches-secondary-100: #DBFCFF; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-500); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-500); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-500); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-08"] .variant-base, | |||
| [data-theme="colorvariant-08"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-08"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-08"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-08"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-08"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-08"] .variant-solid, | |||
| [data-theme="colorvariant-08"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-08"] .variant-accent, | |||
| [data-theme="colorvariant-08"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-09"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #BD0067; | |||
| --swatches-primary-500: #E6007E; | |||
| --swatches-primary-500-rgb: 230, 0, 126; | |||
| --swatches-primary-500-o20: rgba(230, 0, 126,0.2); // #facce5 | |||
| --swatches-primary-400: #ED45A1; | |||
| --swatches-primary-300: #F494C9; | |||
| --swatches-primary-200: #F8B8DB; | |||
| --swatches-primary-100: #FBD9EC; | |||
| --swatches-primary-100-o30: rgba(251,217,236,0.3); // #fef4f9 | |||
| --swatches-primary-050: #FDEBF5; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #322531; | |||
| --swatches-secondary-500: #563F54; | |||
| --swatches-secondary-500-o30: rgba(86,63,84,0.3); // #ccc5cb | |||
| --swatches-secondary-300: #9D909C; | |||
| --swatches-secondary-200: #BFB6BE; | |||
| --swatches-secondary-100: #E7E4E7; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-050); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-050); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-500); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-09"] .variant-base, | |||
| [data-theme="colorvariant-09"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-09"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-09"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-09"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-09"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-09"] .variant-solid, | |||
| [data-theme="colorvariant-09"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-09"] .variant-accent, | |||
| [data-theme="colorvariant-09"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss
Vedi File
| @@ -0,0 +1,155 @@ | |||
| // IMPORTANT: Change primary color in _svg-vars.scss! | |||
| [data-theme="colorvariant-15"] { | |||
| // swatches / primary | |||
| --swatches-primary-600: #475956; | |||
| --swatches-primary-500: #576C69; | |||
| --swatches-primary-500-rgb: 87, 108, 105; | |||
| --swatches-primary-500-o20: rgba(87, 108, 105,0.2); // #dde2e1 | |||
| --swatches-primary-400: #849492; | |||
| --swatches-primary-300: #B8C1C0; | |||
| --swatches-primary-200: #D0D6D5; | |||
| --swatches-primary-100: #E6E9E8; | |||
| --swatches-primary-100-o30: rgba(230,233,232,0.3); // #f7f8f8 | |||
| --swatches-primary-050: #F2F3F3; | |||
| // swatches / secondary | |||
| --swatches-secondary-700: #184C44; | |||
| --swatches-secondary-500: #298375; | |||
| --swatches-secondary-500-o30: rgba(41,131,117,0.3); // #bedad5 | |||
| --swatches-secondary-300: #83B7AF; | |||
| --swatches-secondary-200: #AED0CB; | |||
| --swatches-secondary-100: #E1EEEC; | |||
| // swatches / neutrals | |||
| --swatches-neutrals-white: #FFF; | |||
| --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent | |||
| // gradient | |||
| --gradient-a: var(--swatches-secondary-500); | |||
| --gradient-b: var(--swatches-primary-500); | |||
| // buttons / secondary | |||
| --buttons-secondary-text: var(--swatches-primary-050); | |||
| --buttons-secondary-background: var(--swatches-secondary-500); | |||
| // buttons / tertiary | |||
| --buttons-tertiary-text: var(--swatches-primary-500); | |||
| --buttons-tertiary-background: var(--swatches-primary-200); | |||
| // text / default | |||
| --text-default-standard: var(--swatches-primary-500); | |||
| --text-default-on-accent: var(--swatches-primary-050); | |||
| --text-default-on-solid: var(--swatches-neutrals-white); | |||
| // text / accent | |||
| --text-accent-default: var(--swatches-secondary-700); | |||
| --text-accent-on-accent: var(--swatches-secondary-200); | |||
| --text-accent-on-solid: var(--swatches-neutrals-white); | |||
| // feedback | |||
| --feedback-error: #D54048; | |||
| --feedback-error-light: #F7D9DA; | |||
| --feedback-warning: #FDC600; | |||
| --feedback-warning-light: #FFF4CC; | |||
| //--text-accent-default-1-500: #4BA490; | |||
| //--text-accent-default-1-100: #DBEDE9; | |||
| } | |||
| [data-theme="colorvariant-15"] .variant-base, | |||
| [data-theme="colorvariant-15"] .variant-base-hover:hover { | |||
| --color-background: var(--swatches-neutrals-white); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-15"] .variant-subtle-primary, | |||
| [data-theme="colorvariant-15"] .variant-subtle-primary-hover:hover { | |||
| --color-background: var(--swatches-primary-100); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-15"] .variant-subtle-secondary, | |||
| [data-theme="colorvariant-15"] .variant-subtle-secondary-hover:hover { | |||
| --color-background: var(--swatches-secondary-200); | |||
| --color-text: var(--text-default-standard); | |||
| --color-text-accent: var(--text-accent-default); | |||
| --color-decoration: var(--swatches-secondary-500); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-secondary-500-o30); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--swatches-neutrals-white); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-15"] .variant-solid, | |||
| [data-theme="colorvariant-15"] .variant-solid-hover:hover { | |||
| --color-background: var(--swatches-primary-500); | |||
| --color-text: var(--swatches-neutrals-white); | |||
| --color-text-accent: var(--text-accent-on-solid); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-100-o30); | |||
| --color-button-primary-background: var(--swatches-neutrals-white); | |||
| --color-button-primary-text: var(--swatches-primary-500); | |||
| --color-button-secondary-background: var(--buttons-secondary-background); | |||
| --color-button-secondary-text: var(--buttons-secondary-text); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
| [data-theme="colorvariant-15"] .variant-accent, | |||
| [data-theme="colorvariant-15"] .variant-accent-hover:hover { | |||
| --color-background: var(--swatches-secondary-500); | |||
| --color-text: var(--text-default-on-accent); | |||
| --color-text-accent: var(--text-accent-on-accent); | |||
| --color-decoration: var(--color-text-accent); | |||
| --color-border: var(--swatches-secondary-500); | |||
| --color-surface-inset: var(--swatches-primary-500-o20); | |||
| --color-button-primary-background: var(--swatches-primary-500); | |||
| --color-button-primary-text: var(--swatches-neutrals-white); | |||
| --color-button-secondary-background: var(--swatches-neutrals-white); | |||
| --color-button-secondary-text: var(--text-accent-default); | |||
| --color-button-tertiary-background: var(--buttons-tertiary-background); | |||
| --color-button-tertiary-text: var(--buttons-tertiary-text); | |||
| --color-button-ghost-background: var(--swatches-neutrals-white-o0); | |||
| --color-button-ghost-text: var(--color-text); | |||
| --color-text-microsite: var(--color-text); | |||
| --color-text-microsite-secondary: var(--color-decoration); | |||
| } | |||
+ 30
- 0
gfi-ihk-2024/stories/_global/styles/themes.config.js
Vedi File
| @@ -52,6 +52,36 @@ export const themes = [ | |||
| value: 'colorvariant-04', | |||
| file: 'theme-colorvariant-04.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 05', | |||
| value: 'colorvariant-05', | |||
| file: 'theme-colorvariant-05.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 06', | |||
| value: 'colorvariant-06', | |||
| file: 'theme-colorvariant-06.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 07', | |||
| value: 'colorvariant-07', | |||
| file: 'theme-colorvariant-07.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 08', | |||
| value: 'colorvariant-08', | |||
| file: 'theme-colorvariant-08.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 09', | |||
| value: 'colorvariant-09', | |||
| file: 'theme-colorvariant-09.scss', | |||
| }, | |||
| { | |||
| name: 'Farbvariante 15', | |||
| value: 'colorvariant-15', | |||
| file: 'theme-colorvariant-15.scss', | |||
| }, | |||
| ]; | |||
| export const defaultTheme = themes[0].value; | |||
+ 6
- 0
gfi-ihk-2024/stories/_global/styles/themes.scss
Vedi File
| @@ -11,3 +11,9 @@ | |||
| @use '../../_global/styles/theme-colorvariant-02' as *; | |||
| @use '../../_global/styles/theme-colorvariant-03' as *; | |||
| @use '../../_global/styles/theme-colorvariant-04' as *; | |||
| @use '../../_global/styles/theme-colorvariant-05' as *; | |||
| @use '../../_global/styles/theme-colorvariant-06' as *; | |||
| @use '../../_global/styles/theme-colorvariant-07' as *; | |||
| @use '../../_global/styles/theme-colorvariant-08' as *; | |||
| @use '../../_global/styles/theme-colorvariant-09' as *; | |||
| @use '../../_global/styles/theme-colorvariant-15' as *; | |||