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', | value: 'colorvariant-04', | ||||
| file: 'theme-colorvariant-04.scss', | 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; | 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-02' as *; | ||||
| @use '../../_global/styles/theme-colorvariant-03' as *; | @use '../../_global/styles/theme-colorvariant-03' as *; | ||||
| @use '../../_global/styles/theme-colorvariant-04' 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 *; | |||||