spawntree
/
ihk24
4
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

more color variants

master
FlorianEisenmenger пре 4 часа
родитељ
dfb4de7916
комит
998847a5e7
8 измењених фајлова са 966 додато и 0 уклоњено
Подељен поглед
Diff Options
Show Stats Download Patch File Download Diff File
  1. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss
  2. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss
  3. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss
  4. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss
  5. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss
  6. +155
    -0
      gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss
  7. +30
    -0
      gfi-ihk-2024/stories/_global/styles/themes.config.js
  8. +6
    -0
      gfi-ihk-2024/stories/_global/styles/themes.scss

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-05.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-05"] {
// swatches / primary
--swatches-primary-600: #007896;
--swatches-primary-500: #0092B7;
--swatches-primary-500-rgb: 0, 146, 183;
--swatches-primary-500-o20: rgba(0, 146, 183,0.2); // #cce9f1
--swatches-primary-400: #45AFCA;
--swatches-primary-300: #94D1E1;
--swatches-primary-200: #B8E0EB;
--swatches-primary-100: #D9EFF4;
--swatches-primary-100-o30: rgba(217,239,244,0.3); // #f4fafc
--swatches-primary-050: #EBF6F9;
// swatches / secondary
--swatches-secondary-700: #667A00;
--swatches-secondary-500: #AFD300;
--swatches-secondary-500-o30: rgba(175,211,0,0.3); // #e7f2b2
--swatches-secondary-300: #D1E56B;
--swatches-secondary-200: #F4F9DB;
--swatches-secondary-100: #FAFBF3;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-500);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-500);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-500);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-05"] .variant-base,
[data-theme="colorvariant-05"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-05"] .variant-subtle-primary,
[data-theme="colorvariant-05"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-05"] .variant-subtle-secondary,
[data-theme="colorvariant-05"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-05"] .variant-solid,
[data-theme="colorvariant-05"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-05"] .variant-accent,
[data-theme="colorvariant-05"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-06.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-06"] {
// swatches / primary
--swatches-primary-600: #2B7D81;
--swatches-primary-500: #34989D;
--swatches-primary-500-rgb: 52, 152, 157;
--swatches-primary-500-o20: rgba(52, 152, 157,0.2); // #d6eaeb
--swatches-primary-400: #6BB4B7;
--swatches-primary-300: #AAD4D6;
--swatches-primary-200: #C6E2E4;
--swatches-primary-100: #E1F0F0;
--swatches-primary-100-o30: rgba(225,240,240,0.3); // #f6fafa
--swatches-primary-050: #EFF7F7;
// swatches / secondary
--swatches-secondary-700: #94771B;
--swatches-secondary-500: #FFCE2E;
--swatches-secondary-500-o30: rgba(255,206,46,0.3); // #fff0c0
--swatches-secondary-300: #FFE386;
--swatches-secondary-200: #FFF9E4;
--swatches-secondary-100: #FFFCF3;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-500);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-500);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-500);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-06"] .variant-base,
[data-theme="colorvariant-06"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-06"] .variant-subtle-primary,
[data-theme="colorvariant-06"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-06"] .variant-subtle-secondary,
[data-theme="colorvariant-06"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-06"] .variant-solid,
[data-theme="colorvariant-06"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-06"] .variant-accent,
[data-theme="colorvariant-06"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-07.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-07"] {
// swatches / primary
--swatches-primary-600: #9F2000;
--swatches-primary-500: #C22700;
--swatches-primary-500-rgb: 194, 39, 0;
--swatches-primary-500-o20: rgba(194, 39, 0,0.2); // #f3d4cc
--swatches-primary-400: #D26145;
--swatches-primary-300: #E5A494;
--swatches-primary-200: #EEC3B8;
--swatches-primary-100: #F6DFD9;
--swatches-primary-100-o30: rgba(246,223,217,0.3); // #fcf5f4
--swatches-primary-050: #FAEEEB;
// swatches / secondary
--swatches-secondary-700: #1E585B;
--swatches-secondary-500: #34989D;
--swatches-secondary-500-o30: rgba(52,152,157,0.3); // #c2e0e1
--swatches-secondary-300: #89C3C6;
--swatches-secondary-200: #B2D8DA;
--swatches-secondary-100: #E3F1F1;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-050);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-050);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-100);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-07"] .variant-base,
[data-theme="colorvariant-07"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-07"] .variant-subtle-primary,
[data-theme="colorvariant-07"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-07"] .variant-subtle-secondary,
[data-theme="colorvariant-07"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-07"] .variant-solid,
[data-theme="colorvariant-07"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-07"] .variant-accent,
[data-theme="colorvariant-07"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-08.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-08"] {
// swatches / primary
--swatches-primary-600: #4B6A00;
--swatches-primary-500: #5C8100;
--swatches-primary-500-rgb: 92, 129, 0;
--swatches-primary-500-o20: rgba(92, 129, 0,0.2); // #dee6cc
--swatches-primary-400: #88A345;
--swatches-primary-300: #BBCA94;
--swatches-primary-200: #D1DCB8;
--swatches-primary-100: #E7ECD9;
--swatches-primary-100-o30: rgba(231,236,217,0.3); // #f8f9f4
--swatches-primary-050: #F2F5EB;
// swatches / secondary
--swatches-secondary-700: #008594;
--swatches-secondary-500: #00E6FF;
--swatches-secondary-500-o30: rgba(0,230,255,0.3); // #b2f7ff
--swatches-secondary-300: #6BF0FF;
--swatches-secondary-200: #9EF6FF;
--swatches-secondary-100: #DBFCFF;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-500);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-500);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-500);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-08"] .variant-base,
[data-theme="colorvariant-08"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-08"] .variant-subtle-primary,
[data-theme="colorvariant-08"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-08"] .variant-subtle-secondary,
[data-theme="colorvariant-08"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-08"] .variant-solid,
[data-theme="colorvariant-08"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-08"] .variant-accent,
[data-theme="colorvariant-08"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-09.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-09"] {
// swatches / primary
--swatches-primary-600: #BD0067;
--swatches-primary-500: #E6007E;
--swatches-primary-500-rgb: 230, 0, 126;
--swatches-primary-500-o20: rgba(230, 0, 126,0.2); // #facce5
--swatches-primary-400: #ED45A1;
--swatches-primary-300: #F494C9;
--swatches-primary-200: #F8B8DB;
--swatches-primary-100: #FBD9EC;
--swatches-primary-100-o30: rgba(251,217,236,0.3); // #fef4f9
--swatches-primary-050: #FDEBF5;
// swatches / secondary
--swatches-secondary-700: #322531;
--swatches-secondary-500: #563F54;
--swatches-secondary-500-o30: rgba(86,63,84,0.3); // #ccc5cb
--swatches-secondary-300: #9D909C;
--swatches-secondary-200: #BFB6BE;
--swatches-secondary-100: #E7E4E7;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-050);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-050);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-500);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-09"] .variant-base,
[data-theme="colorvariant-09"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-09"] .variant-subtle-primary,
[data-theme="colorvariant-09"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-09"] .variant-subtle-secondary,
[data-theme="colorvariant-09"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-09"] .variant-solid,
[data-theme="colorvariant-09"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-09"] .variant-accent,
[data-theme="colorvariant-09"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 155
- 0
gfi-ihk-2024/stories/_global/styles/theme-colorvariant-15.scss Прегледај датотеку

@@ -0,0 +1,155 @@
// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-15"] {
// swatches / primary
--swatches-primary-600: #475956;
--swatches-primary-500: #576C69;
--swatches-primary-500-rgb: 87, 108, 105;
--swatches-primary-500-o20: rgba(87, 108, 105,0.2); // #dde2e1
--swatches-primary-400: #849492;
--swatches-primary-300: #B8C1C0;
--swatches-primary-200: #D0D6D5;
--swatches-primary-100: #E6E9E8;
--swatches-primary-100-o30: rgba(230,233,232,0.3); // #f7f8f8
--swatches-primary-050: #F2F3F3;
// swatches / secondary
--swatches-secondary-700: #184C44;
--swatches-secondary-500: #298375;
--swatches-secondary-500-o30: rgba(41,131,117,0.3); // #bedad5
--swatches-secondary-300: #83B7AF;
--swatches-secondary-200: #AED0CB;
--swatches-secondary-100: #E1EEEC;
// swatches / neutrals
--swatches-neutrals-white: #FFF;
--swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
// gradient
--gradient-a: var(--swatches-secondary-500);
--gradient-b: var(--swatches-primary-500);
// buttons / secondary
--buttons-secondary-text: var(--swatches-primary-050);
--buttons-secondary-background: var(--swatches-secondary-500);
// buttons / tertiary
--buttons-tertiary-text: var(--swatches-primary-500);
--buttons-tertiary-background: var(--swatches-primary-200);
// text / default
--text-default-standard: var(--swatches-primary-500);
--text-default-on-accent: var(--swatches-primary-050);
--text-default-on-solid: var(--swatches-neutrals-white);
// text / accent
--text-accent-default: var(--swatches-secondary-700);
--text-accent-on-accent: var(--swatches-secondary-200);
--text-accent-on-solid: var(--swatches-neutrals-white);
// feedback
--feedback-error: #D54048;
--feedback-error-light: #F7D9DA;
--feedback-warning: #FDC600;
--feedback-warning-light: #FFF4CC;

//--text-accent-default-1-500: #4BA490;
//--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-15"] .variant-base,
[data-theme="colorvariant-15"] .variant-base-hover:hover {
--color-background: var(--swatches-neutrals-white);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-15"] .variant-subtle-primary,
[data-theme="colorvariant-15"] .variant-subtle-primary-hover:hover {
--color-background: var(--swatches-primary-100);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-15"] .variant-subtle-secondary,
[data-theme="colorvariant-15"] .variant-subtle-secondary-hover:hover {
--color-background: var(--swatches-secondary-200);
--color-text: var(--text-default-standard);
--color-text-accent: var(--text-accent-default);
--color-decoration: var(--swatches-secondary-500);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-secondary-500-o30);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--swatches-neutrals-white);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-15"] .variant-solid,
[data-theme="colorvariant-15"] .variant-solid-hover:hover {
--color-background: var(--swatches-primary-500);
--color-text: var(--swatches-neutrals-white);
--color-text-accent: var(--text-accent-on-solid);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-100-o30);
--color-button-primary-background: var(--swatches-neutrals-white);
--color-button-primary-text: var(--swatches-primary-500);
--color-button-secondary-background: var(--buttons-secondary-background);
--color-button-secondary-text: var(--buttons-secondary-text);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-15"] .variant-accent,
[data-theme="colorvariant-15"] .variant-accent-hover:hover {
--color-background: var(--swatches-secondary-500);
--color-text: var(--text-default-on-accent);
--color-text-accent: var(--text-accent-on-accent);
--color-decoration: var(--color-text-accent);
--color-border: var(--swatches-secondary-500);
--color-surface-inset: var(--swatches-primary-500-o20);
--color-button-primary-background: var(--swatches-primary-500);
--color-button-primary-text: var(--swatches-neutrals-white);
--color-button-secondary-background: var(--swatches-neutrals-white);
--color-button-secondary-text: var(--text-accent-default);
--color-button-tertiary-background: var(--buttons-tertiary-background);
--color-button-tertiary-text: var(--buttons-tertiary-text);
--color-button-ghost-background: var(--swatches-neutrals-white-o0);
--color-button-ghost-text: var(--color-text);

--color-text-microsite: var(--color-text);
--color-text-microsite-secondary: var(--color-decoration);
}

+ 30
- 0
gfi-ihk-2024/stories/_global/styles/themes.config.js Прегледај датотеку

@@ -52,6 +52,36 @@ export const themes = [
value: 'colorvariant-04',
file: 'theme-colorvariant-04.scss',
},
{
name: 'Farbvariante 05',
value: 'colorvariant-05',
file: 'theme-colorvariant-05.scss',
},
{
name: 'Farbvariante 06',
value: 'colorvariant-06',
file: 'theme-colorvariant-06.scss',
},
{
name: 'Farbvariante 07',
value: 'colorvariant-07',
file: 'theme-colorvariant-07.scss',
},
{
name: 'Farbvariante 08',
value: 'colorvariant-08',
file: 'theme-colorvariant-08.scss',
},
{
name: 'Farbvariante 09',
value: 'colorvariant-09',
file: 'theme-colorvariant-09.scss',
},
{
name: 'Farbvariante 15',
value: 'colorvariant-15',
file: 'theme-colorvariant-15.scss',
},
];

export const defaultTheme = themes[0].value;

+ 6
- 0
gfi-ihk-2024/stories/_global/styles/themes.scss Прегледај датотеку

@@ -11,3 +11,9 @@
@use '../../_global/styles/theme-colorvariant-02' as *;
@use '../../_global/styles/theme-colorvariant-03' as *;
@use '../../_global/styles/theme-colorvariant-04' as *;
@use '../../_global/styles/theme-colorvariant-05' as *;
@use '../../_global/styles/theme-colorvariant-06' as *;
@use '../../_global/styles/theme-colorvariant-07' as *;
@use '../../_global/styles/theme-colorvariant-08' as *;
@use '../../_global/styles/theme-colorvariant-09' as *;
@use '../../_global/styles/theme-colorvariant-15' as *;

Write Preview
Loading…
Откажи
Сачувај