diff --git a/gfi-ihk-2024/.storybook/preview.js b/gfi-ihk-2024/.storybook/preview.js
index f2f85e8..996d46a 100644
--- a/gfi-ihk-2024/.storybook/preview.js
+++ b/gfi-ihk-2024/.storybook/preview.js
@@ -1,3 +1,4 @@
+import '../stories/_global/styles/themes.scss';
import '../stories/_global/styles/main.scss';
import '../stories/_global/styles/fonts.scss';
import '../stories/_global/styles/icons.scss';
@@ -56,3 +57,11 @@ export const parameters = {
],
},
}
+
+export const decorators = [
+ (Story) => {
+ document.documentElement.setAttribute('data-theme', 'standard');
+ document.body.classList.add('variant-base');
+ return Story();
+ },
+];
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_anchors.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_anchors.scss
index f8b52c5..0a0bc9b 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_anchors.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_anchors.scss
@@ -70,7 +70,7 @@
@extend .icon-ankerlink;
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
position: absolute;
font-size: 30px;
line-height: 1;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_bauleitplan.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_bauleitplan.scss
index 0062a81..162d44c 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_bauleitplan.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_bauleitplan.scss
@@ -21,7 +21,7 @@
}
.icon-box {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
font-weight: 400;
text-transform: none;
text-decoration: none !important;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_captcha.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_captcha.scss
index b62b299..e6615c9 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_captcha.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_captcha.scss
@@ -124,7 +124,7 @@
cursor: pointer;
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
}
}
}
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_cookieconsent.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_cookieconsent.scss
index 5d3fba3..0b7afdb 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_cookieconsent.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_cookieconsent.scss
@@ -176,7 +176,7 @@ body {
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
- font-family: "Korb";
+ font-family: "Korb", sans-serif;
display: inline-block;
position: relative;
color: $color-primary;
@@ -268,7 +268,7 @@ body {
padding-top: 1px;
padding-right: 1px;
text-align: center;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
opacity: 0;
background-color: $color-primary;
background-color: var(--theme-color-primary, $color-primary);
@@ -325,7 +325,7 @@ body {
&:after {
@include icon-small-arrow-right-simple;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
position: absolute;
right: 0;
font-size: 20px;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_ihk-finder-form.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_ihk-finder-form.scss
index 7996f87..623d637 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_ihk-finder-form.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_ihk-finder-form.scss
@@ -66,7 +66,7 @@ form.ihk-finder {
border-radius: 0 4px 4px 0;
overflow: hidden;
@extend .icon-lokalisierung;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
font-size: 30px;
cursor: pointer;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss
index 1df7dfa..8e4a7ce 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss
@@ -18,7 +18,7 @@
position: relative;
z-index: 1;
max-width: 66.6667%;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
@media(max-width: 1199px) {
max-width: 83.3333%;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_print.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_print.scss
index e9dbc04..e8d57f7 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_print.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_print.scss
@@ -276,7 +276,7 @@
-webkit-print-color-adjust: exact;
color-adjust: exact !important;
align-items: center;
- font-family: "Korb";
+ font-family: "Korb", sans-serif;
line-height: 1;
text-decoration: none;
border: 0;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_register.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_register.scss
index 2a5e982..2722023 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_register.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_register.scss
@@ -91,7 +91,7 @@
}
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
font-size: 30px;
line-height: 1;
}
@@ -132,7 +132,7 @@
left: 13px;
top: 50%;
margin-top: -15px;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
}
}
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
index fa70d5e..b54799f 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
@@ -17,6 +17,13 @@
}
}
}
+ ul {
+ li {
+ &::marker {
+ color: var(--color-decoration);
+ }
+ }
+ }
ul.contact-buttons {
li {
@@ -119,7 +126,7 @@
&:after {
@include icon-small-link-external;
- font-family: "icons";
+ font-family: "Icons", sans-serif;
color: $color-link-hover;
font-size: 18px;
margin-left: 3px;
@@ -200,7 +207,7 @@
&:after {
@include icon-small-link-external;
- font-family: "icons";
+ font-family: "Icons", sans-serif;
color: $color-link-hover;
font-size: 18px;
margin-left: 3px;
diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss
index 8987b76..91fe1d3 100644
--- a/gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss
+++ b/gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss
@@ -300,7 +300,7 @@
transition: 0.3s ease;
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
}
}
}
@@ -468,7 +468,7 @@
&:before {
font-size: 30px;
line-height: 1;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
}
@media(max-width: 999px) {
@@ -498,7 +498,7 @@
}
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
position: absolute;
font-size: 30px;
line-height: 1;
@@ -606,7 +606,7 @@
cursor: pointer;
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
display: flex;
position: absolute;
font-size: 18px;
@@ -661,7 +661,7 @@
}
&:before {
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
font-size: 20px;
position: absolute;
display: block;
diff --git a/gfi-ihk-2024/stories/_global/styles/_mixins.scss b/gfi-ihk-2024/stories/_global/styles/_mixins.scss
index f2459a9..072110d 100644
--- a/gfi-ihk-2024/stories/_global/styles/_mixins.scss
+++ b/gfi-ihk-2024/stories/_global/styles/_mixins.scss
@@ -1,5 +1,5 @@
@mixin h1 {
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: var(--font-size-h1);
line-height: 1.1;
font-weight: 400;
@@ -11,7 +11,7 @@
}
@mixin h2 {
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: var(--font-size-h2);
line-height: 1.2;
font-weight: 400;
@@ -19,7 +19,7 @@
}
@mixin h3 {
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: var(--font-size-h3);
line-height: 1.2;
font-weight: 400;
@@ -27,7 +27,7 @@
}
@mixin h4 {
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: var(--font-size-h4);
font-style: normal;
font-weight: normal;
@@ -36,7 +36,7 @@
}
@mixin h5 {
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: 22px;
line-height: 1.2;
font-weight: 400;
@@ -115,12 +115,12 @@
transform: rotate(-90deg);
transition: 0.3s ease;
- color: white;
+ color: var(--swatches-neutrals-white);
text-shadow: 0 0 3px rgba(black, 0.6), 0 0 8px rgba(black, 0.6);
width: calc(66.6% + 7px);
padding: 8px 18px;
- //color: var(--theme-color-white);
+ //color: var(--swatches-neutrals-white);
//text-shadow: -2px 2px 0 #000;
//padding: 2px 6px 2px 4px;
//background: #012d59;
@@ -140,18 +140,18 @@
display: block;
width: 100%;
height: var(--input-height);
- background-color: var(--theme-color-white);
- border: 1px solid var(--theme-color-primary);
+ background-color: var(--swatches-neutrals-white);
+ border: 1px solid var(--color-text);
border-radius: var(--border-radius-xs);
padding: 10px 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: var(--font-size-copy);
line-height: 1.4;
transition: 0.3s ease;
- color: var(--theme-color-primary);
+ color: var(--color-text);
&:focus {
- box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
@@ -166,21 +166,21 @@
@mixin focus-visible($inset: false) {
@if $inset {
&.focus-visible:focus {
- box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
&:focus-visible, &.-moz-focusring {
- box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
}
@else {
&.focus-visible:focus {
- box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
&:focus-visible, &.-moz-focusring {
- box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
}
@@ -188,11 +188,11 @@
@mixin focus-standalone($inset: false) {
@if $inset {
- box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed), inset 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: inset 0 0 0 2px var(--swatches-secondary-700), inset 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
@else {
- box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed), 0 0 8px 2px var(--theme-color-secondary-intensed);
+ box-shadow: 0 0 0 2px var(--swatches-secondary-700), 0 0 8px 2px var(--swatches-secondary-700);
outline: 0;
}
}
diff --git a/gfi-ihk-2024/stories/_global/styles/_svg-vars.scss b/gfi-ihk-2024/stories/_global/styles/_svg-vars.scss
new file mode 100644
index 0000000..829bf5c
--- /dev/null
+++ b/gfi-ihk-2024/stories/_global/styles/_svg-vars.scss
@@ -0,0 +1,10 @@
+@function encode-color($color) {
+ @return '%23' + str-slice('#{$color}', 2);
+}
+
+$svg-color: #003366; // = --swatches-primary-500 im standard theme
+
+select,
+select.form-control {
+ background-image: url("data:image/svg+xml,%3Csvg width='43' height='30' viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5001 22L6.27283 10.75L22.7273 10.75L14.5001 22Z' fill='#{encode-color($svg-color)}'/%3E%3C/svg%3E");
+}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/_global/styles/main.scss b/gfi-ihk-2024/stories/_global/styles/main.scss
index 48f0863..0c2a90a 100644
--- a/gfi-ihk-2024/stories/_global/styles/main.scss
+++ b/gfi-ihk-2024/stories/_global/styles/main.scss
@@ -1,6 +1,6 @@
:root {
- --theme-color-white: #ffffff;
- --theme-color-background: var(--theme-color-white);
+ --swatches-neutrals-white: #ffffff;
+ --theme-color-background: var(--swatches-neutrals-white);
--theme-color-primary: #003366;
--theme-color-primary-microsite: var(--theme-color-primary);
@@ -13,15 +13,15 @@
--theme-color-secondary: #56BD66;
--theme-color-secondary-microsite: var(--theme-color-secondary);
- --theme-color-secondary-intensed: #247929;
+ --swatches-secondary-700: #247929;
--theme-color-secondary-dimmed: #E4F1E4;
--theme-color-gradient-01: var(--theme-color-primary);
--theme-color-gradient-02: #4BA490;
--theme-color-gradient-03: #AFCC7A;
- --theme-color-link: var(--theme-color-primary);
- --theme-color-link-hover: var(--theme-color-secondary-intensed);
+ --theme-color-link: var(--text-default-standard);
+ --theme-color-link-hover: var(--swatches-secondary-700);
--theme-color-success: var(--theme-color-secondary);
--theme-color-success-dimmed: var(--theme-color-secondary-dimmed);
diff --git a/gfi-ihk-2024/stories/_global/styles/pictograms.scss b/gfi-ihk-2024/stories/_global/styles/pictograms.scss
index a59e05b..0951f83 100644
--- a/gfi-ihk-2024/stories/_global/styles/pictograms.scss
+++ b/gfi-ihk-2024/stories/_global/styles/pictograms.scss
@@ -331,3 +331,32 @@
.pictogram-einkaufswagen-mit-aufwaertspfeil:before { content: '\e94a'; } /* '' */
.pictogram-einkaufswagen-mit-euro-zeichen:before { content: '\e94b'; } /* '' */
.pictogram-oelfass-mit-eurozeichen:before { content: '\e94c'; } /* '' */
+.pictogram-achterbahn:before { content: '\e94d'; } /* '' */
+.pictogram-dokument-mit-haeckchen:before { content: '\e94e'; } /* '' */
+.pictogram-haende-mit-staffelstab:before { content: '\e94f'; } /* '' */
+.pictogram-ihk-dresden:before { content: '\e950'; } /* '' */
+.pictogram-kreuzfahrtschiff:before { content: '\e951'; } /* '' */
+.pictogram-leuchtturm:before { content: '\e952'; } /* '' */
+.pictogram-moewe:before { content: '\e953'; } /* '' */
+.pictogram-windsack:before { content: '\e954'; } /* '' */
+.pictogram-ki-sparkles:before { content: '\e955'; } /* '' */
+.pictogram-kleiderbuegel:before { content: '\e956'; } /* '' */
+.pictogram-toilettensymbol:before { content: '\e957'; } /* '' */
+.pictogram-pferd:before { content: '\e958'; } /* '' */
+.pictogram-pferdekopf:before { content: '\e959'; } /* '' */
+.pictogram-a:before { content: '\e95a'; } /* '' */
+.pictogram-b:before { content: '\e95b'; } /* '' */
+.pictogram-c:before { content: '\e95c'; } /* '' */
+.pictogram-d:before { content: '\e95d'; } /* '' */
+.pictogram-e:before { content: '\e95e'; } /* '' */
+.pictogram-f:before { content: '\e95f'; } /* '' */
+.pictogram-g:before { content: '\e960'; } /* '' */
+.pictogram-h:before { content: '\e961'; } /* '' */
+.pictogram-i:before { content: '\e962'; } /* '' */
+.pictogram-j:before { content: '\e963'; } /* '' */
+.pictogram-k:before { content: '\e964'; } /* '' */
+.pictogram-l:before { content: '\e965'; } /* '' */
+.pictogram-lippe-zu-detmold:before { content: '\e966'; } /* '' */
+.pictogram-schaf:before { content: '\e967'; } /* '' */
+.pictogram-sonne:before { content: '\e968'; } /* '' */
+.pictogram-fisch:before { content: '\e969'; } /* '' */
diff --git a/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss b/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss
new file mode 100644
index 0000000..ec3eab9
--- /dev/null
+++ b/gfi-ihk-2024/stories/_global/styles/theme-digitalblue.scss
@@ -0,0 +1,2 @@
+[data-theme="digitalblue"] {
+}
diff --git a/gfi-ihk-2024/stories/_global/styles/theme-standard.scss b/gfi-ihk-2024/stories/_global/styles/theme-standard.scss
new file mode 100644
index 0000000..01a8c5c
--- /dev/null
+++ b/gfi-ihk-2024/stories/_global/styles/theme-standard.scss
@@ -0,0 +1,156 @@
+// IMPORTANT: Change primary color in _svg-vars.scss!
+
+[data-theme="standard"] {
+ // swatches / primary
+ --swatches-primary-600: #002346;
+ --swatches-primary-500: #003366;
+ --swatches-primary-500-rgb: 0, 51, 102;
+ --swatches-primary-500-o20: rgba(0,51,102,0.2); // #ccd6e0
+ --swatches-primary-400: #335C85;
+ --swatches-primary-300: #B0C4D6;
+ --swatches-primary-200: #CCD7E6;
+ --swatches-primary-100: #E3EBF5;
+ --swatches-primary-100-o30: rgba(227,235,245,0.3); // #f7f9fc
+ --swatches-primary-050: #F0F2F5;
+ // swatches / secondary
+ --swatches-secondary-700: #247929;
+ --swatches-secondary-500: #56BD66;
+ --swatches-secondary-500-o30: rgba(86,189,102,0.3); // #ccebd1
+ --swatches-secondary-300: #9AD7A3;
+ --swatches-secondary-200: #E4F1E4;
+ --swatches-secondary-100: #EBF2EB;
+ // swatches / neutrals
+ --swatches-neutrals-white: #FFF;
+ --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
+ // gradient
+ --gradient-a: #4BA490;
+ --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-neutrals-white);
+ --text-accent-on-solid: var(--swatches-secondary-500);
+ // 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="standard"] .variant-base,
+[data-theme="standard"] .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="standard"] .variant-subtle-primary,
+[data-theme="standard"] .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="standard"] .variant-subtle-secondary,
+[data-theme="standard"] .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="standard"] .variant-solid,
+[data-theme="standard"] .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="standard"] .variant-accent,
+[data-theme="standard"] .variant-accent-hover:hover {
+ --color-background: var(--swatches-secondary-500);
+ --color-text: var(--text-default-on-accent);
+ --color-text-accent: var(--text-accent-on-accent);
+ --color-decoration: var(--color-text-accent);
+ --color-border: var(--swatches-secondary-500);
+ --color-surface-inset: var(--swatches-primary-500-o20);
+ --color-button-primary-background: var(--swatches-primary-500);
+ --color-button-primary-text: var(--swatches-neutrals-white);
+ --color-button-secondary-background: var(--swatches-neutrals-white);
+ --color-button-secondary-text: var(--text-accent-default);
+ --color-button-tertiary-background: var(--buttons-tertiary-background);
+ --color-button-tertiary-text: var(--buttons-tertiary-text);
+ --color-button-ghost-background: var(--swatches-neutrals-white-o0);
+ --color-button-ghost-text: var(--color-text);
+
+ --color-text-microsite: var(--color-text);
+ --color-text-microsite-secondary: var(--color-decoration);
+}
diff --git a/gfi-ihk-2024/stories/_global/styles/themes.scss b/gfi-ihk-2024/stories/_global/styles/themes.scss
new file mode 100644
index 0000000..e26bb69
--- /dev/null
+++ b/gfi-ihk-2024/stories/_global/styles/themes.scss
@@ -0,0 +1,2 @@
+@import '../../_global/styles/theme-standard';
+//@import '../../_global/styles/theme-digitalblue';
diff --git a/gfi-ihk-2024/stories/_global/styles/typography.scss b/gfi-ihk-2024/stories/_global/styles/typography.scss
index bef6d4d..11187cd 100644
--- a/gfi-ihk-2024/stories/_global/styles/typography.scss
+++ b/gfi-ihk-2024/stories/_global/styles/typography.scss
@@ -11,10 +11,7 @@ html {
--font-source-sans: 'Source Sans Pro', sans-serif;
--font-korb: 'Korb', sans-serif;
- font-family: var(--font-source-sans);
font-size: var(--font-size-copy);
- line-height: 1.5;
- color: var(--theme-color-primary);
@media(max-width: 1339px) {
--font-size-copy: 20px;
@@ -42,6 +39,9 @@ html {
}
body {
+ font-family: var(--font-source-sans);
+ line-height: 1.5;
+ color: var(--color-text);
margin: 0;
}
@@ -83,11 +83,11 @@ h1 + h2 {
}
a {
- color: var(--theme-color-link);
+ color: var(--color-text);
transition: 0.2s ease;
&:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
}
@@ -141,7 +141,7 @@ p, .text, ul.nobreaks {
.main-col section:not(.infobanner) {
p, .text {
&:not(.mwf-upload-dropzone) &:not(.kicker) {
- color: var(--theme-color-primary-microsite);
+ color: var(--color-text-microsite);
}
}
}
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/config.json b/gfi-ihk-2024/stories/assets/fonts/pictograms/config.json
index e2de436..47cf09d 100644
--- a/gfi-ihk-2024/stories/assets/fonts/pictograms/config.json
+++ b/gfi-ihk-2024/stories/assets/fonts/pictograms/config.json
@@ -4667,6 +4667,412 @@
"search": [
"oelfass-mit-eurozeichen"
]
+ },
+ {
+ "uid": "98be791317adab0c7c9cb251667d2f88",
+ "css": "achterbahn",
+ "code": 59725,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M893.9 234.8C811.7 234.8 744.4 272.2 684.6 325.5 625.2 378.4 571.3 448.8 516.5 517 405.3 655.6 289.6 785.9 106.1 785.9 96.3 785.9 88.3 793.9 88.3 803.7V933.5C88.3 943.4 96.3 951.4 106.1 951.4 111.5 951.4 116.3 949 119.6 945.2L219.6 840.2V933.5C219.6 943.4 227.5 951.4 237.4 951.4 247.3 951.4 255.3 943.4 255.3 933.5V841.7L354.3 945.8C357.8 949.5 362.5 951.3 367.2 951.3 367.7 951.4 368.2 951.4 368.7 951.4 374.9 951.4 380.3 948.3 383.5 943.5L482.2 839.8V933.5C482.2 943.4 490.1 951.4 500 951.4 509.9 951.4 517.9 943.4 517.9 933.5V840.2L617.8 945.2C621.1 949 625.9 951.4 631.3 951.4 636.6 951.4 641.3 949.1 644.6 945.4L744.7 840.2V933.6C744.7 943.4 752.7 951.4 762.6 951.4 772.4 951.4 780.4 943.4 780.4 933.6V840.2L880.4 945.2C883.6 949 888.5 951.4 893.9 951.4 903.7 951.4 911.7 943.4 911.7 933.5V252.7C911.7 242.8 903.7 234.8 893.9 234.8ZM350.8 738.6V890.3L257.1 791.8C290.7 777.9 321.7 759.8 350.8 738.6ZM198 811L124 888.8V821.2C149.9 820.1 174.5 816.6 198 811ZM532.5 803.7L613.4 718.7V888.8L532.5 803.7ZM649.2 888.8V723.4L727.8 806.1 649.2 888.8ZM795.1 803.7L876 718.7V888.8L795.1 803.7ZM386.6 888.5V712.4L472.4 798.2 386.6 888.5ZM661.1 684.1L744.7 596.1V772L661.1 684.1ZM780.4 767.3V596.1L861.9 681.7 780.4 767.3ZM517.9 767.3V596.1L599.3 681.7 517.9 767.3ZM482.2 614.4V757.4L412.2 687.5C436.8 664.5 459.9 639.8 482.2 614.4ZM613.4 453.7V644.8L530 557.1C534.8 551.2 539.6 545.3 544.4 539.4 567.9 510.1 590.7 481.1 613.4 453.7ZM649.2 644.8V466L734.2 555.4 649.2 644.8ZM791 555.4L876 466V644.8L791 555.4ZM744.7 322.8V514.6L649.2 414.1V412C668.5 390.4 688.1 370.1 708.3 352.1 720.3 341.5 732.4 331.6 744.7 322.8ZM780.4 514.6V327.9L869.2 421.3 780.4 514.6ZM876 271.3V376.6L796 292.5C821.3 280.8 847.8 273.5 876 271.3ZM693.1 54.1C707.8 44.2 727.8 48 737.8 62.7L791.2 141.7C801.2 156.4 797.3 176.4 782.6 186.3L773.8 192.3C779.7 202.6 781.8 214.7 779.5 226.5 777 239.4 769.5 250.8 758.6 258.2 747.7 265.5 734.3 268.3 721.4 265.8 709.7 263.5 699.2 257.1 691.8 247.7L683.2 253.6C689.2 263.9 691.3 276 689 287.7 686.5 300.7 679 312.1 668.1 319.4 657.2 326.8 643.8 329.5 630.9 327 619.1 324.8 608.7 318.3 601.3 309L588.9 317.4C574.5 327.2 558 327.5 544.5 321.5 539.7 326.8 534.6 332.4 529.9 337.7 527.4 340.4 525.1 343.1 522.9 345.5L537.6 357.8C551.2 369.3 553 389.5 541.6 403.1L534.7 411.3C543.3 419.6 548.6 430.7 549.6 442.6 550.7 455.7 546.6 468.7 538.2 478.8 529.7 488.9 517.6 495.2 504.5 496.3 492.6 497.3 480.7 494 471.1 487L464.4 495C473 503.3 478.3 514.4 479.3 526.3 480.5 539.4 476.3 552.4 467.9 562.5 459.4 572.6 447.3 578.9 434.2 580 422.3 581 410.4 577.7 400.8 570.8L391.2 582.2C364.6 613.9 313 597.6 309.4 556.4L300.7 456.4 300.6 453.2C300.7 445.8 303.3 438.6 308.1 432.9L318.1 421C329.5 407.4 349.8 405.7 363.4 417.1L371.3 423.7 420.2 365.5 412.3 358.9C398.7 347.4 396.9 327.2 408.3 313.6L419.3 300.5C430.7 286.9 451 285.1 464.6 296.5L495.5 322.5C498 319.7 500.7 316.8 503.4 313.8 508.6 307.9 514.3 301.6 519.6 295.8 516.6 288.2 515.5 279.4 517.3 270.1L536.3 171.6 537.1 168.5C539.2 161.4 543.7 155.2 549.9 151L562.8 142.3C577.5 132.4 597.4 136.2 607.4 150.9L613.2 159.5 676.2 116.9 670.3 108.3C660.4 93.6 664.3 73.6 679 63.7L693.1 54.1ZM438 333.8L445.9 340.5C459.5 351.9 461.3 372.2 449.9 385.8L396.4 449.4C385 463 364.7 464.8 351.1 453.4L343.1 446.7 336.4 454.7 345 553.3C345.8 562.8 357.7 566.5 363.9 559.2L511.9 382.9 444.4 326.2 438 333.8ZM424 543.1C426.2 544.2 428.7 544.6 431.1 544.4 434.8 544.1 438.2 542.3 440.5 539.5 442.9 536.7 444.1 533.1 443.7 529.4 443.5 526.9 442.6 524.6 441.2 522.6L424 543.1ZM494.3 459.4C496.5 460.5 498.9 460.9 501.4 460.7 505.1 460.4 508.5 458.7 510.8 455.8 513.2 453 514.3 449.4 514 445.7 513.8 443.2 512.9 440.9 511.5 438.9L494.3 459.4ZM631.2 288.8C633 290.4 635.2 291.5 637.7 292 641.3 292.7 645 291.9 648.1 289.8 651.1 287.8 653.2 284.6 653.9 281 654.4 278.6 654.2 276.1 653.4 273.8L631.2 288.8ZM701.9 91.3L707.8 99.9C717.7 114.6 713.8 134.6 699.1 144.5L630.3 191.1C615.6 201 595.6 197.2 585.6 182.5L579.8 173.9 571.1 179.8 552.4 276.9C550.6 286.3 561 293.1 568.9 287.8L759.6 158.8 710.2 85.7 701.9 91.3ZM721.7 227.5C723.5 229.1 725.8 230.3 728.2 230.7 731.8 231.4 735.5 230.6 738.6 228.6 741.6 226.5 743.7 223.3 744.4 219.7 744.9 217.3 744.7 214.8 743.9 212.5L721.7 227.5Z",
+ "width": 1000
+ },
+ "search": [
+ "achterbahn"
+ ]
+ },
+ {
+ "uid": "0010c96cf06bbcb3114239d3b027c5d8",
+ "css": "dokument-mit-haeckchen",
+ "code": 59726,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M757.2 714.1C764.2 707.1 775.5 707.1 782.5 714.1 789.5 721 789.5 732.3 782.5 739.3L694.5 827.3C687.5 834.3 676.2 834.3 669.2 827.3L621.1 779.2C614.1 772.2 614.1 760.9 621.1 754 628.1 747 639.4 747 646.4 754L681.8 789.4 757.2 714.1ZM644.9 561.2H266.3V525.5H644.9V561.2ZM644.9 461.2H266.3V425.5H644.9V461.2ZM457.3 361.2H266.3V325.5H457.3V361.2ZM727 46.9C760.5 46.9 787.7 74.1 787.7 107.6V613.3H786.3C840.3 645 876.6 703.6 876.6 770.7 876.6 871.4 794.9 953.1 694.1 953.1 634 953.1 580.7 924 547.5 879.1V882.6H184.2C150.6 882.6 123.4 855.4 123.4 821.9V232.9C123.4 208.8 133.2 185.7 150.5 168.9L250 72.1C266.7 56 289 46.9 312.2 46.9H727ZM694.1 624C613.1 624 547.4 689.7 547.4 770.7 547.4 851.7 613.1 917.4 694.1 917.4 775.2 917.4 840.8 851.7 840.8 770.7 840.8 689.7 775.2 624 694.1 624ZM334.7 209.7C334.7 235.3 314 256.1 288.3 256.1H196.5C186.7 256.1 178.7 248.1 178.7 238.3 178.7 228.4 186.7 220.4 196.5 220.4H288.3C294.2 220.4 299 215.6 299 209.7V84.3C290 86.5 281.7 91.2 274.9 97.8L175.4 194.5C165 204.6 159.2 218.4 159.2 232.9V821.9C159.2 835.7 170.4 846.9 184.2 846.9H528.4C517.7 823.7 511.7 797.9 511.7 770.7 511.7 669.9 593.4 588.3 694.1 588.3 714.4 588.3 733.8 591.6 752 597.6V107.6C752 93.8 740.8 82.6 727 82.6H334.7V209.7Z",
+ "width": 1000
+ },
+ "search": [
+ "dokument-mit-haeckchen"
+ ]
+ },
+ {
+ "uid": "2863cad026f3c86dac0e08678653cd12",
+ "css": "haende-mit-staffelstab",
+ "code": 59727,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M930.1 211.5C937.2 204.6 948.5 204.8 955.4 211.8 962.3 218.8 962.1 230.2 955.1 237.1 931.5 260.2 902.4 290.8 874.7 320.1 847.3 349.1 821 377 803.7 393.8 799.4 397.9 793.4 399.6 787.7 398.4 715.3 383.6 683.5 384 657.4 408.2 641.8 422.7 625.2 437.1 616.2 450.8 611.7 457.5 611 461.5 611.1 463.3 611.1 464 611.2 466.5 617.3 470.5 623.1 474.4 630.7 474.3 642.6 465.6 654.2 457.1 664.9 443.5 671 433.4 673.5 429.3 677.5 426.3 682.2 425.2 686.8 424.1 691.8 425 695.8 427.5 702.8 432 711.9 434.4 721.2 435.4 730.6 436.4 738.8 435.8 742.9 435 752.6 433.4 761.8 439.9 763.5 449.6 765.2 459.3 758.7 468.5 749 470.2 741.7 471.5 730.1 472.3 717.5 470.9 714.5 470.6 711.4 470.1 708.2 469.5L852.3 613.7 881.9 584.1C900 566.1 912.7 543.4 918.8 518.7L925.3 492.1C927.6 482.6 937.3 476.7 946.8 479 956.4 481.4 962.3 491 959.9 500.6L953.4 527.2C945.8 558.3 929.8 586.7 907.2 609.3L877.6 638.9 916.4 677.7C929 690.3 929 710.6 916.4 723.2L855.5 784.2C843.2 796.4 823.5 796.7 810.8 785L770.8 747.7 761.9 756.6C743.1 775.1 712.6 775.1 693.8 756.6 689 751.9 685.5 746.5 683.1 740.7 667.2 744.8 649.6 740.6 637.1 728.3 631 722.4 626.9 715.2 624.8 707.6 611.1 708.8 597 704.2 586.5 693.9 572.3 679.8 568.8 659.2 576.2 641.9 571.4 639.7 567 636.6 563.1 632.8 544.3 614.2 544.3 584.1 563.1 565.6L575.9 552.9 359.7 333.3C347.3 320.7 347.4 300.5 359.9 288L420.5 227.3C433.1 214.8 453.5 214.8 466 227.3L626.6 388C628.9 385.9 631.1 383.9 633.1 382 672.4 345.6 719.8 348.6 785.5 361.6 801.9 345.2 824.5 321.3 848.8 295.6 876.3 266.4 905.9 235.2 930.1 211.5ZM387.6 310.8L601.5 528C620.4 512.6 648.5 513.7 666.1 531.1 671.8 536.7 675.7 543.3 678 550.4 692.3 548.5 707.4 553.1 718.4 563.9 728.6 574 733.2 587.4 732.3 600.6 740.3 602.7 747.8 606.8 754.1 613 766.9 625.6 771 643.7 766.3 659.8 771.8 662.1 777.1 665.5 781.6 669.9 795.2 683.3 799 702.8 792.9 719.5L832.6 756.5 888.6 700.5 674 485.8C670.7 488.9 667.3 491.8 663.6 494.5 647.1 506.5 622.1 516.5 597.6 500.3 584.7 491.8 576.4 480.1 575.5 465.7 574.6 452.5 580.2 440.5 586.3 431.2 590.4 425 595.5 418.9 601 412.9L443.3 255.1 387.6 310.8ZM756.2 695C751.7 690.7 744.8 690.3 740 694.1L718.3 715.5C714.4 720.2 714.8 727.1 719.2 731.5 724 736.2 731.7 736.2 736.5 731.5L756.2 712.1C760.9 707.4 760.9 699.7 756.2 695ZM728.6 638C723.9 633.3 716.1 633.3 711.4 638L662.5 686.2 661.7 687.1C657.7 691.9 658 698.9 662.5 703.3 667.3 708 675 708 679.8 703.3L691.8 691.4C692.4 690.7 693.1 690 693.8 689.4L713.5 669.9C714.1 669.3 714.8 668.7 715.4 668.1L728.6 655.1C733.4 650.4 733.4 642.8 728.6 638ZM692.9 589C688.2 584.3 680.4 584.3 675.6 589L612 651.8C607.2 656.5 607.2 664.1 612 668.8 616.7 673.5 624.5 673.5 629.2 668.8L692.9 606C697.7 601.3 697.7 593.7 692.9 589ZM640.7 556.2C635.9 551.5 628.2 551.5 623.4 556.2L588.5 590.6C583.7 595.3 583.7 603 588.5 607.7 593.3 612.4 601 612.4 605.8 607.7L640.7 573.3C645.5 568.5 645.5 560.9 640.7 556.2ZM44.3 228.2C51 220.9 62.3 220.5 69.5 227.2L183.3 332.6 183.8 333.1C198.4 349.1 216.6 361.5 236.8 369.1 258.1 377.2 277.5 389.6 293.5 405.7L444.2 556.3C461.7 573.9 461.7 602.3 444.2 619.9 441.9 622.1 439.5 624 437 625.7L438.7 627.4C456.2 645 456.2 673.4 438.7 691 435.3 694.4 431.5 697.1 427.5 699.2 432.9 714.9 429.4 733.1 416.8 745.7 399.3 763.2 370.8 763.2 353.3 745.7L351.6 743.9C349.9 746.5 347.9 748.9 345.7 751.2 328.1 768.7 299.7 768.7 282.1 751.2L206.4 675.4 206.4 714.1C206.4 740.3 185.2 761.4 159.1 761.4 133 761.4 111.8 740.3 111.8 714.2V571.9L44.8 504.8C37.8 497.8 37.8 486.5 44.8 479.5 51.7 472.6 63 472.6 70 479.5L147.6 557.1 147.6 714.2C147.6 720.5 152.7 725.7 159.1 725.7 165.5 725.7 170.7 720.5 170.7 714.2L170.7 655.9C170.7 632 198.6 619.7 216.1 634.8L217.8 636.3 307.4 725.9C311 729.5 316.8 729.5 320.4 725.9 324 722.3 324 716.5 320.4 712.9L235.6 628.1C228.7 621.1 228.7 609.8 235.6 602.9 242.6 595.9 253.9 595.9 260.9 602.9L292.8 634.8C293.1 635 293.4 635.3 293.8 635.6L378.5 720.4C382.1 724 388 724 391.6 720.4 395.2 716.8 395.2 711 391.6 707.4L375.8 691.6C375.6 691.4 375.4 691.2 375.2 691L290.4 606.2C283.4 599.2 283.4 587.9 290.4 580.9 297.3 574 308.7 574 315.6 580.9L331.7 597C331.8 597.1 331.9 597.2 332 597.3L400.6 665.8C404.2 669.3 409.9 669.3 413.5 665.7 417 662.1 417 656.3 413.5 652.7L380.9 620.1C380.8 620.1 380.7 620 380.6 619.9L295.6 534.9C288.7 527.9 288.7 516.6 295.6 509.6 302.6 502.7 313.9 502.7 320.9 509.6L353.8 542.5C353.8 542.6 353.9 542.6 353.9 542.6L405.9 594.7C409.5 598.2 415.3 598.2 418.9 594.6 422.5 591 422.5 585.2 418.9 581.6L268.3 431C255.8 418.5 240.8 408.8 224.2 402.5 199 393 176.3 377.7 158 357.9L45.3 253.4C38 246.7 37.6 235.4 44.3 228.2Z",
+ "width": 1000
+ },
+ "search": [
+ "haende-mit-staffelstab"
+ ]
+ },
+ {
+ "uid": "7950915165a915b8e59d72c4a2fe7e55",
+ "css": "ihk-dresden",
+ "code": 59728,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M491.1 643.4C506.3 637.6 523.5 637.2 540.9 645.7 553.2 651.6 564.7 661.5 575.6 675.5 592.5 662.6 614.7 650.5 638.2 647.9 654.8 646.1 672.3 649.1 688.2 660.2 698.4 667.3 707.1 677.1 714.5 689.8 729.1 678.5 747.5 668.4 767.2 666.5 783 665 799.4 668.9 813.8 680.9 825.1 690.3 834.4 704 841.6 722 853.8 722.1 867.9 724.6 880.1 732.2 889.5 738.1 897.5 746.9 902.1 759.2 906.5 771.2 907.1 785.3 904 801.3 902.2 811 892.8 817.3 883.1 815.5 873.4 813.6 867.1 804.3 869 794.6 871.2 783.1 870.2 775.9 868.6 771.5 867 767.3 864.5 764.6 861.2 762.5 853.7 757.8 841.8 756.9 832.2 758.4 823.5 759.9 815 754.6 812.3 746.2 805.8 725.3 797.9 714.1 791 708.3 784.5 703 777.8 701.4 770.6 702.1 754.1 703.7 735 717.1 721.8 731.5 717.6 736.1 711.3 738.1 705.2 736.9 699.1 735.7 694 731.4 691.9 725.6 684.6 705.7 675.8 695.1 667.8 689.5 660.1 684.1 651.5 682.4 642 683.4 621.8 685.6 599.4 700.3 584.7 714.7 580.8 718.4 575.4 720.3 570 719.6 564.7 719 559.9 715.9 557 711.3 544.8 691.4 533.8 681.9 525.3 677.8 517.5 674 510.6 674.2 503.9 676.8 496.6 679.6 488.9 685.5 481.6 693.8 474.5 701.9 468.5 711.5 464.3 720.1 461.9 724.9 457.5 728.4 452.4 729.6 447.2 730.8 441.7 729.7 437.4 726.5 415.3 709.7 400.1 705.7 390.5 706.2 381.7 706.6 374.4 711.1 367.9 720.1 361.1 729.5 356.1 742.8 352.9 757.5 349.7 772 348.6 786.6 348.9 797.5 349.1 807.4 341.3 815.6 331.4 815.8 321.6 816 313.4 808.2 313.2 798.4 312.8 784.7 314.2 767.3 318 749.9 321.8 732.7 328.2 714.1 339 699.2 350 683.9 366.3 671.7 388.6 670.5 405.3 669.6 423.2 675.1 442.3 686.7 446 681 450.2 675.4 454.8 670.2 464.3 659.4 476.5 649 491.1 643.4ZM304.1 187.2C308.4 184.3 313.7 183.5 318.7 184.8L548.3 247.7C557.8 250.3 563.4 260.1 560.8 269.6 558.2 279.1 548.4 284.7 538.9 282.1L331.8 225.4V261.9L547.7 313C557.3 315.3 563.3 324.9 561 334.5 558.7 344.1 549.1 350 539.5 347.8L332.9 298.8V663C332.9 668 330.9 672.7 327.2 676.1 323.6 679.5 318.8 681.2 313.8 680.9L32.9 661.3C23.1 660.6 15.7 652.1 16.3 642.3 17 632.4 25.6 625 35.4 625.7L297.2 643.9V308.2L43.5 463.7C35.1 468.9 24.1 466.2 18.9 457.8 13.8 449.4 16.4 438.4 24.8 433.3L296.1 266.9V235.3L41.8 403.5C33.6 409 22.5 406.7 17.1 398.5 11.7 390.3 13.9 379.2 22.1 373.7ZM595.6 263.9C633.8 255.6 686 248.7 740 264.2 778 275.1 801.5 288.2 815 304.9 829.2 322.4 829.9 340.9 829.9 354.7L829.9 497C829.9 497.1 829.9 497.1 829.9 497.2L829.9 634.8C829.9 634.9 829.9 635 829.9 635V642.1C829.9 652 821.9 660 812 660 802.2 660 794.2 652 794.2 642.1V634.5C794.2 632.5 794 631.9 794 631.7 794.2 632.2 794.2 631.5 791.5 629.7 785 625.5 769.1 619.8 732.5 614.3 684.9 607.2 637.9 610.3 601.4 614.4 591.6 615.5 582.7 608.5 581.6 598.7 580.5 588.9 587.6 580 597.4 578.9 635 574.7 685.7 571.2 737.7 579 762.4 582.7 780.7 586.8 794.2 591.7V566.7C794.2 562.5 793.9 560.3 793.4 558.6 793 557.4 792.2 555.7 789.5 553.4 783.2 548 768 540.6 731.6 533.3 685.5 524.2 639.1 528.1 603 533.5 593.2 534.9 584.1 528.2 582.7 518.4 581.2 508.7 588 499.6 597.7 498.2 635.3 492.6 686.4 487.9 738.6 498.3 762.5 503.1 780.6 508.4 794.2 514.8V496.1C794.1 486.6 793.2 481.7 788.2 476.6 781.9 469.9 766.9 460.9 730.9 452.2 687 441.5 639.1 446.2 603.4 452.4 593.7 454.1 584.4 447.6 582.8 437.8 581.1 428.1 587.6 418.9 597.3 417.2 634.4 410.8 688.2 405 739.3 417.4 762.7 423.1 780.7 429.5 794.2 437V431.8L794.1 427.3C793.8 417.4 792.4 410.8 787.3 404.4 780.7 396.2 765.8 385.8 730.2 375.6 684.7 362.5 639.6 366.8 604.1 374.4 594.5 376.5 585 370.4 582.9 360.7 580.8 351.1 587 341.6 596.6 339.5 635.1 331.2 686.7 326 740 341.3 763.1 347.9 780.8 355.3 794.2 363.8V354.7C794.2 342.2 793.2 334.6 787.3 327.3 780.7 319.2 765.7 308.8 730.2 298.6 684.5 285.5 639.2 291 603.2 298.8 593.6 300.9 584 294.8 581.9 285.2 579.8 275.5 585.9 266 595.6 263.9ZM964.3 616.8C974.1 616.2 982.6 623.7 983.2 633.6 983.8 643.4 976.3 651.9 966.4 652.5L866.1 658.6C856.2 659.2 847.8 651.7 847.1 641.9S854 623.6 863.9 623ZM543.6 371.4C553.5 371.4 561.5 379.4 561.5 389.2V598C561.5 607.8 553.5 615.8 543.6 615.8 533.8 615.8 525.8 607.8 525.8 598V389.2C525.8 379.4 533.8 371.4 543.6 371.4ZM252.2 417.6C257.7 415.7 263.7 416.6 268.3 420 273 423.3 275.8 428.7 275.8 434.5V569.4C275.8 579.2 267.8 587.2 257.9 587.2H33C23.1 587.2 15.1 579.2 15.1 569.4 15.1 559.5 23.1 551.5 33 551.5H53.8V521.9L38.7 527C29.3 530.2 19.2 525.1 16.1 515.8 12.9 506.4 18 496.3 27.3 493.2ZM89.6 509.9V551.5H113.8V501.8ZM149.5 489.8V551.5H176.3V480.7ZM212 468.7V551.5H240.1V459.3ZM932 449.7C941.8 449.7 949.8 457.7 949.8 467.6V566.6C949.8 576.4 941.8 584.4 932 584.4 922.1 584.4 914.1 576.4 914.1 566.6V467.6C914.1 457.7 922.1 449.7 932 449.7ZM457.1 370.6C461.3 370.6 464.6 373.5 464.6 377.7V394.6L476 376.6C477.4 374.7 479.5 373.1 482.4 373.1 486.7 373.1 489.9 376.2 489.9 380.3 489.9 381.8 489.4 383.5 488.6 384.6L488.6 384.6 476 402.7C476.1 402.8 483.6 417.7 488.2 427.4 488.5 428.1 489.2 429.3 489.6 430.6 489.9 431.5 490 432.3 490 433.2 490 437.2 486.7 440.2 482.4 440.2 479.3 440.2 476.6 438.3 475.8 436.6 471.4 426.9 464.6 411.8 464.6 411.7V431.1C464.6 435.3 461.3 438.2 457.1 438.2 452.8 438.2 449.5 435.3 449.5 431.1V377.7C449.5 373.5 452.8 370.6 457.1 370.6ZM371.5 356.9C375.7 356.9 379 360.1 379 364.9V428C379 432.8 375.7 436.1 371.5 436.1 367.3 436.1 364 432.8 364 428V364.9C364 360.1 367.3 356.9 371.5 356.9ZM398.6 360.5C402.8 360.5 406.1 363.4 406.1 367.6V392.7L423.1 394.3V373.3C423.1 369.1 426.4 366.2 430.6 366.2 434.8 366.2 438.1 369.1 438.1 373.3V429C438.1 433.2 434.8 436.1 430.6 436.1 426.4 436.1 423.1 433.2 423.1 429V408.2L406.1 406.5V429C406.1 433.2 402.8 436.1 398.6 436.1 394.3 436.1 391.1 433.2 391.1 429V367.6C391.1 363.4 394.3 360.5 398.6 360.5ZM844.3 373C847.5 363.7 857.7 358.7 867 362L973.9 399C983.2 402.2 988.1 412.4 984.9 421.7 981.6 431 971.5 436 962.2 432.7L855.3 395.7C846 392.5 841.1 382.3 844.3 373Z",
+ "width": 1000
+ },
+ "search": [
+ "ihk-dresden"
+ ]
+ },
+ {
+ "uid": "521ed4a5ea981d0b59de49d1aa0883e6",
+ "css": "kreuzfahrtschiff",
+ "code": 59729,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M788.3 261.8C806.1 261.8 820.5 276.2 820.5 294V342.4H824.1C837.7 342.4 849.8 351 854.3 363.6L855.1 366.2 868.9 417.4H883.2C896.9 417.4 908.9 426 913.4 438.7L914.3 441.3 943.1 548.9C943.1 549 943.1 549.1 943.1 549.2 953 556.8 958.3 569.8 954.8 583L919.6 714.3C915.8 728.4 903.1 738.2 888.5 738.2H755.3C745.5 738.2 737.5 730.2 737.5 720.3 737.5 710.5 745.5 702.5 755.3 702.5H885.8L919.1 578.3H84.7L203 702.5H667.4C677.3 702.5 685.3 710.5 685.3 720.3 685.3 730.2 677.3 738.2 667.4 738.2H201.5C192.7 738.2 184.2 734.6 178.2 728.2L53.1 596.9C33.6 576.5 48.1 542.6 76.3 542.6H146.4L227.6 430.7 228.8 429.2C234.9 421.8 244 417.4 253.6 417.4H283.7C283.9 416.9 284.2 416.4 284.5 415.9L317.6 358.5 318.8 356.7C324.7 347.8 334.7 342.4 345.5 342.4H496.1C509.8 342.4 521.8 351 526.4 363.6L527.2 366.2 540.9 417.4H611.7C611.9 416.9 612.2 416.4 612.4 415.9L645.6 358.5 646.8 356.7C652.7 347.8 662.7 342.4 673.5 342.4H716.7C716.9 342.1 717.2 341.6 717.6 340.9 718.5 339.5 719.6 337.7 720.9 335.4 723.6 330.9 727 325.1 730.7 318.6 738.2 305.6 747 290.1 753.7 278.2 759.4 268.1 770.1 261.8 781.7 261.8H788.3ZM190.5 542.6H904.4L896.3 512.2H218.5C216.7 512.2 214.9 511.9 213.2 511.4L190.5 542.6ZM238.5 476.5H886.7L880.5 453.1H255.4L238.5 476.5ZM324.9 417.4H503.9L493.4 378.1H347.5L324.9 417.4ZM652.8 417.4H831.9L821.4 378.1H675.5L652.8 417.4ZM761.7 336.4C760.5 338.5 759.3 340.5 758.2 342.4H784.8V297.5H783.8C777.2 309.3 768.9 323.9 761.7 336.4ZM272.6 620.3C283.7 620.3 292.7 629.3 292.7 640.4 292.7 651.5 283.7 660.4 272.6 660.4 261.5 660.4 252.6 651.5 252.6 640.4 252.6 629.3 261.5 620.3 272.6 620.3ZM375.5 620.3C386.5 620.3 395.5 629.3 395.5 640.4 395.5 651.5 386.5 660.4 375.5 660.4 364.4 660.4 355.4 651.5 355.4 640.4 355.4 629.3 364.4 620.3 375.5 620.3ZM478.3 620.3C489.4 620.3 498.4 629.3 498.4 640.4 498.4 651.5 489.4 660.4 478.3 660.4 467.3 660.4 458.3 651.5 458.3 640.4 458.3 629.3 467.3 620.3 478.3 620.3ZM581.2 620.3C592.3 620.3 601.2 629.3 601.2 640.4 601.2 651.5 592.3 660.4 581.2 660.4 570.1 660.4 561.1 651.5 561.1 640.4 561.1 629.3 570.1 620.3 581.2 620.3ZM684 620.3C695.1 620.3 704.1 629.3 704.1 640.4 704.1 651.5 695.1 660.4 684 660.4 673 660.4 664 651.5 664 640.4 664 629.3 673 620.3 684 620.3ZM786.9 620.3C798 620.3 806.9 629.3 806.9 640.4 806.9 651.5 798 660.4 786.9 660.4 775.8 660.4 766.9 651.5 766.9 640.4 766.9 629.3 775.8 620.3 786.9 620.3Z",
+ "width": 1000
+ },
+ "search": [
+ "kreuzfahrtschiff"
+ ]
+ },
+ {
+ "uid": "e80527a8539c30464e725ec07e6cecb1",
+ "css": "leuchtturm",
+ "code": 59730,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M496.3 15.5C506.2 15.5 514.1 23.5 514.1 33.3V50.7C550.2 58.8 577.2 91 577.2 129.6V194.4C577.2 205.3 571.8 214.9 563.5 220.7L611.6 952.2C612.1 960.7 606.6 968.4 598.4 970.6 504.7 995.7 425.6 981.4 395.7 970.1 388.4 967.3 383.8 960 384.3 952.2L432.4 222.8C422.3 217.4 415.4 206.7 415.4 194.4V129.6C415.4 91 442.3 58.8 478.4 50.7V33.3C478.4 23.5 486.4 15.5 496.3 15.5ZM563.8 769.5C507 779.4 459.5 775.6 432.1 770.1L420.8 940.5C449.7 948 506.8 955 574.9 939.6L563.8 769.5ZM553.8 617.3C506.9 619.3 467.4 618.7 442.1 617.5L434.5 734.1C455.7 739.1 502.8 744.4 561.4 733.6L553.8 617.3ZM544.2 471.6C506.4 469.4 474.2 470 451.8 471.2L444.5 581.9C468.4 583 506.2 583.6 551.4 581.6L544.2 471.6ZM534 316.6C504.1 312.2 478.9 313.4 462.1 315.9L454.2 435.4C476.8 434.3 507 433.9 541.8 435.7L534 316.6ZM464.5 279.6C482.5 277.5 505.5 277.1 531.6 280.3L528.1 226.5H468L464.5 279.6ZM451.1 190.8H541.5V165.4H451.1V190.8ZM496.3 84.4C471.3 84.4 451.1 104.6 451.1 129.6V129.7H541.5V129.6C541.5 104.6 521.2 84.4 496.3 84.4ZM373.4 182.8C382 177.9 392.9 180.8 397.8 189.4 402.8 197.9 399.8 208.8 391.3 213.8L332.9 247.5C324.3 252.4 313.4 249.5 308.5 241 303.5 232.4 306.5 221.5 315 216.6L373.4 182.8ZM602.2 189.4C607.1 180.8 618 177.9 626.6 182.8L685 216.6C693.5 221.5 696.5 232.4 691.5 241 686.6 249.5 675.7 252.4 667.1 247.5L608.7 213.8C600.2 208.8 597.2 197.9 602.2 189.4ZM382.4 130.4C392.2 130.4 400.2 138.4 400.2 148.3 400.2 158.2 392.2 166.2 382.4 166.2H314.9C305 166.2 297 158.2 297 148.3 297 138.4 305 130.4 314.9 130.4H382.4ZM685.1 130.4C695 130.4 703 138.4 703 148.3 703 158.2 695 166.2 685.1 166.2H617.6C607.8 166.2 599.8 158.2 599.8 148.3 599.8 138.4 607.8 130.4 617.6 130.4H685.1ZM308.5 56.5C313.4 48 324.4 45 332.9 50L391.4 83.7C399.9 88.7 402.8 99.6 397.9 108.1 392.9 116.7 382 119.6 373.5 114.7L315.1 80.9C306.5 76 303.6 65.1 308.5 56.5ZM667.1 50C675.7 45 686.6 48 691.5 56.5 696.5 65.1 693.5 76 685 80.9L626.6 114.7C618 119.6 607.1 116.7 602.2 108.1 597.2 99.6 600.2 88.7 608.7 83.7L667.1 50Z",
+ "width": 1000
+ },
+ "search": [
+ "leuchtturm"
+ ]
+ },
+ {
+ "uid": "ce1f78f281f89f440583cec5e2c06122",
+ "css": "moewe",
+ "code": 59731,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M713.4 144.4C723.6 144.4 731.9 152.8 731.9 163 731.9 173.3 723.6 181.6 713.4 181.6 703.1 181.6 694.8 173.3 694.8 163 694.8 152.8 703.1 144.4 713.4 144.4ZM681.5 49.4C719.8 49.4 754.6 59.9 779.9 83.6 794.4 97.3 805 114.6 811.4 135.1H886.9C920.4 135.2 947.6 162.3 947.6 195.9V210.1L947.5 212C946.6 221 939 228 929.8 228H813C811.6 232.4 809.9 236.5 808.1 240.3 801.6 253.8 792.8 263.7 786.1 271.8 779.2 280.1 773.5 287.5 769.2 298 765 308.4 761.6 323 761.6 345.5 761.7 390.2 772.4 412.3 783.7 435 796 459.4 809.6 485.2 809.6 533.5 809.6 582.1 793 628.3 745.1 661.3 708.4 686.7 654.6 703.4 579 709.3V848.4C597.4 848.2 619.6 850.6 640.7 857.8 670.6 868 700.3 888.9 710.8 928.1 712.3 933.5 711.1 939.2 707.7 943.6 704.4 948 699.1 950.6 693.6 950.6H486.6C476.8 950.6 468.8 942.6 468.8 932.7V710.7C409.4 708.2 362 700.9 325.1 691.7 324.2 700.8 316.6 707.9 307.3 707.9H180.8C146.9 707.9 118.8 683.5 112.8 651.4H70.2C60.4 651.4 52.4 643.4 52.4 633.5 52.4 586.9 90.2 549 136.9 549H242.5C243.2 549 243.9 549 244.5 549.1 310.3 475.6 395.9 381.9 436.1 345.3 460.5 323 495 313.2 530.6 314.4 550.1 251.8 547 208.9 547 159.3 547 94.3 605 49.4 681.5 49.4ZM559.8 888.3C541.8 882.9 521 882.3 504.5 883.8V914.9H594.7C588.9 901.6 576.7 893.3 559.8 888.3ZM621.4 889.2C626.2 896.5 630 905 632.2 914.9H665C656.1 904 643.6 896.5 629.1 891.6 626.6 890.7 624 889.9 621.4 889.2ZM543.3 711.2C533.9 711.5 524.1 711.7 514.1 711.7 510.9 711.7 507.7 711.6 504.5 711.6V847.9C516.2 847.1 529.6 847.1 543.3 848.7V711.2ZM681.5 85.1C617.3 85.1 582.7 120.6 582.7 159.3 582.7 206.3 585.9 253.4 566.5 319.3 576.8 321.7 586.9 325.1 596.7 329.3 652.6 353.6 699.4 407.5 699.4 490 699.4 529.4 692.2 560.2 679 584 665.7 608 647 623.7 626.1 633.8 585.7 653.2 536.4 651.4 503.7 651.4H315.5C316.2 651.8 317 652.2 317.6 652.7 319.1 653.2 320.5 653.6 322 654 365.1 666.1 427.9 676 514.1 676 622.2 676 687.2 658 724.8 632 761.1 606.9 773.9 572.9 773.9 533.5 773.9 493.8 763.5 474.2 751.8 451 739.2 425.9 725.9 398 725.9 345.5 725.9 319.4 729.8 300 736.2 284.4 742.6 268.7 751.2 257.9 758.6 249 766.2 239.8 771.7 233.5 775.9 224.8 779.9 216.5 783.1 205.2 783.1 187.1 783.1 150 772 125.2 755.4 109.6 738.6 93.9 713.6 85.2 681.5 85.1ZM149.9 651.4C154.9 663.6 166.8 672.2 180.8 672.2H266.1C250.4 665.3 238.4 658.1 230.1 651.4H149.9ZM136.9 584.7C116.2 584.7 98.6 597.6 91.5 615.7H185.9C186.3 614.9 186.9 614.1 187.5 613.4 194.9 605 203.5 595.3 212.8 584.7H136.9ZM611.7 379.2C585.8 454.1 529.9 509.9 468 543.4 403.2 578.5 328.8 590.7 272.1 571.9 258 587.6 244.8 602.5 233.1 615.7H503.7C539.5 615.7 579.2 616.7 610.6 601.6 625.6 594.4 638.4 583.5 647.8 566.7 657.2 549.6 663.7 525.1 663.7 490 663.7 438.7 641.9 402.1 611.7 379.2ZM580.1 361.1C534.9 342.4 485.9 348.1 460.2 371.6 426.6 402.3 358.9 475.5 298.9 542.1 342 550.5 398.3 540.5 451 512 508.4 480.9 558.7 429.3 580.1 361.1ZM818.2 170.9C818.6 176.1 818.8 181.5 818.8 187.1 818.8 188.9 818.7 190.6 818.7 192.3H911.6C909.9 180.2 899.5 170.9 886.9 170.9H818.2Z",
+ "width": 1000
+ },
+ "search": [
+ "moewe"
+ ]
+ },
+ {
+ "uid": "7c59dffe8995e25335cf3f1dfd9370a7",
+ "css": "windsack",
+ "code": 59732,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M236.5 70C246.4 70 254.4 78 254.4 87.9V896H352.8C362.7 896 370.7 904 370.7 913.9 370.7 923.8 362.7 931.7 352.8 931.7H120.2C110.3 931.7 102.3 923.8 102.3 913.9 102.3 904 110.3 896 120.2 896H218.6V87.9C218.6 78 226.6 70 236.5 70ZM379.7 71.8C383.6 68.9 388.6 67.6 393.6 68.5L883 157.4C891.5 159 897.7 166.4 897.7 175V289.8C897.7 298.4 891.5 305.8 883 307.4L393.6 396.2C387.9 397.3 382.2 395.5 378 391.6 362.2 376.5 338.2 353.6 317.5 334.1 307.1 324.3 297.6 315.4 290.4 308.7 286.8 305.4 283.8 302.6 281.6 300.7 279 298.3 278.3 297.8 278.7 298 270.7 292.3 268.8 281.1 274.6 273.1 280.3 265.1 291.4 263.2 299.5 269 301.1 270.1 303.5 272.3 305.5 274.1 307.9 276.3 311.1 279.2 314.7 282.5 322 289.3 331.6 298.3 342 308.1 351.8 317.4 362.4 327.5 372.5 337.1V127.7C362.4 137.3 351.8 147.4 342 156.7 331.6 166.5 322 175.4 314.7 182.2 311.1 185.6 307.9 188.5 305.5 190.7 303.5 192.4 301.1 194.6 299.5 195.8 291.4 201.5 280.3 199.7 274.6 191.7 268.8 183.6 270.7 172.5 278.7 166.7 278.3 167 279 166.5 281.6 164.1 283.8 162.1 286.8 159.4 290.4 156 297.6 149.4 307.1 140.5 317.5 130.7 338.2 111.2 362.2 88.3 378 73.2L379.7 71.8ZM408.2 357.3L503.6 339.9C502.2 337.4 501.5 334.6 501.5 331.5V124.4L408.2 107.5V357.3ZM537.2 331.5C537.2 332.3 537.1 333.1 537 333.9L628.2 317.3C627.9 316 627.7 314.6 627.7 313.2V151.6C627.7 150.1 627.9 148.8 628.2 147.4L537.2 130.9V331.5ZM663.4 310.9L748.2 295.5C747.9 294.2 747.7 292.7 747.7 291.3V169.1L663.4 153.8V310.9ZM783.4 289.1L862 274.9V189.9L783.4 175.6V289.1Z",
+ "width": 1000
+ },
+ "search": [
+ "windsack"
+ ]
+ },
+ {
+ "uid": "2741bd3b51b943f5495f34f4da69e3df",
+ "css": "ki-sparkles",
+ "code": 59733,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M561.5 857.1C561.5 713.6 445.1 597.2 301.6 597.2 291.7 597.2 283.7 589.2 283.7 579.4 283.7 569.5 291.7 561.5 301.6 561.5 445.1 561.5 561.5 445.1 561.5 301.6 561.5 291.7 569.5 283.7 579.4 283.7 589.2 283.7 597.2 291.7 597.2 301.6 597.2 445.1 713.6 561.5 857.1 561.5 867 561.5 875 569.5 875 579.4 875 589.2 867 597.2 857.1 597.2 713.6 597.2 597.2 713.6 597.2 857.1 597.2 867 589.2 875 579.4 875 569.5 875 561.5 867 561.5 857.1ZM579.4 403C549.5 484.7 484.7 549.5 403 579.4 484.7 609.2 549.5 674 579.4 755.7 609.2 674 674 609.2 755.7 579.4 674 549.5 609.2 484.7 579.4 403ZM263.9 420.6C263.9 353.8 209.7 299.6 142.9 299.6 133 299.6 125 291.6 125 281.8 125 272.5 132 264.9 141 264L142.9 263.9 149.1 263.7C213 260.5 263.9 207.6 263.9 142.9 263.9 133 271.9 125 281.8 125 291.6 125 299.6 133 299.6 142.9 299.6 209.7 353.8 263.9 420.6 263.9 430.5 263.9 438.5 271.9 438.5 281.8 438.5 291.6 430.5 299.6 420.6 299.6 355.9 299.6 303 350.5 299.8 414.4L299.6 420.6 299.5 422.5C298.6 431.5 291 438.5 281.8 438.5 271.9 438.5 263.9 430.5 263.9 420.6ZM281.7 215.5C266.9 243.8 243.8 266.9 215.5 281.7 243.8 296.6 266.9 319.7 281.7 348 296.6 319.7 319.7 296.6 348 281.7 319.7 266.9 296.6 243.8 281.7 215.5Z",
+ "width": 1000
+ },
+ "search": [
+ "ki-sparkles"
+ ]
+ },
+ {
+ "uid": "7fb5b3ad5ced7cdee45af1bade2fb37f",
+ "css": "kleiderbuegel",
+ "code": 59734,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M576.1 306.2C576.1 267.1 544.8 235.7 506.7 235.7 468.6 235.7 437.3 267.1 437.3 306.2 437.3 314.5 438.7 322.4 441.3 329.7 444.5 339 439.6 349.2 430.3 352.5 421 355.7 410.8 350.8 407.5 341.5 403.7 330.4 401.6 318.5 401.6 306.2 401.6 247.7 448.4 200 506.7 200 564.9 200 611.8 247.7 611.8 306.2 611.8 345.4 590.7 379.7 559.3 398.1L558.8 398.4 558.2 398.7 462.2 445.8C462.1 445.9 462.1 445.9 462 445.9L98.5 618.8C64.6 634.9 76.7 685.7 113.1 685.7H879.7C915.2 685.7 928.1 636.7 895.7 619.5L603 463.2C594.3 458.6 591 447.8 595.6 439.1 600.3 430.4 611.1 427.1 619.8 431.7L912.5 588C976.8 622.3 953.4 721.4 879.7 721.4H113.1C37.6 721.4 15.9 618.5 83.2 586.5L446.7 413.7 541.6 367C562.2 354.8 576.1 332.2 576.1 306.2Z",
+ "width": 1000
+ },
+ "search": [
+ "kleiderbuegel"
+ ]
+ },
+ {
+ "uid": "e7d262709619c0965c9669340c9dac10",
+ "css": "toilettensymbol",
+ "code": 59735,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M330 596.5C339.9 597.4 347.1 606.2 346.1 616L318.8 904.4C316.6 928.2 296.6 946.4 272.6 946.4H184.1C160.2 946.4 140.1 928.2 137.9 904.4L110.6 616C109.7 606.2 116.9 597.4 126.7 596.5 136.5 595.6 145.2 602.8 146.1 612.6L173.4 901C174 906.5 178.6 910.7 184.1 910.7H272.6C278.1 910.7 282.8 906.5 283.3 901L310.6 612.6C311.5 602.8 320.2 595.6 330 596.5ZM849.4 791.2C859.2 792.3 866.3 801.1 865.2 810.9L854.8 904.7C853 925 838.3 946.4 814.3 946.4H743.4C719.4 946.4 704.7 925 702.9 904.7L702.9 904.7 692.4 810.9C691.3 801.1 698.4 792.3 708.2 791.2 718 790.1 726.8 797.2 727.9 807L738.4 900.7 738.4 901 738.4 901.4C738.7 905.1 740.1 907.8 741.4 909.3 742 910.1 742.6 910.4 742.9 910.6 743.2 910.7 743.3 910.7 743.4 910.7H814.3C814.3 910.7 814.5 910.7 814.8 910.6 815.1 910.4 815.6 910.1 816.2 909.3 817.6 907.8 818.9 905.1 819.2 901.4L819.3 901 819.3 900.7 829.7 807C830.8 797.2 839.6 790.1 849.4 791.2ZM503.6 48.2C513.5 48.2 521.5 56.2 521.5 66.1V923.2C521.5 933.1 513.5 941.1 503.6 941.1 493.7 941.1 485.7 933.1 485.7 923.2V66.1C485.7 56.2 493.7 48.2 503.6 48.2ZM874.3 504.1C883.8 501.7 893.6 507.5 896 517L958.5 761.6C959.9 767 958.7 772.7 955.3 777 951.9 781.4 946.7 783.9 941.2 783.9H616.4C610.9 783.9 605.7 781.4 602.3 777 598.9 772.7 597.8 767 599.1 761.6L661.6 517C664.1 507.5 673.8 501.7 683.3 504.1 692.9 506.6 698.7 516.3 696.2 525.9L639.4 748.2H918.2L861.4 525.9C859 516.3 864.7 506.6 874.3 504.1ZM303.5 310.7C355.1 310.7 397.7 350.9 400.7 402.4L413.8 584.4C414.5 594.3 407.1 602.8 397.3 603.5 387.5 604.2 378.9 596.8 378.2 587L365.1 405 365 404.8 365 404.7C363.2 372 336.2 346.4 303.5 346.4 302.1 346.4 300.6 346.8 299.3 347.5L255.7 372.1C237.2 382.5 214.6 382.5 196.1 372.1L152.4 347.5C151.2 346.8 149.8 346.4 148.3 346.4 115.7 346.4 88.8 372 87.3 404.6L78.6 586.6C78.1 596.4 69.7 604 59.9 603.6 50 603.1 42.4 594.7 42.9 584.9L51.6 402.9C54.1 351.3 96.6 310.7 148.3 310.7 155.9 310.7 163.4 312.7 170 316.4L213.6 341C221.2 345.3 230.6 345.3 238.2 341L281.8 316.4C288.4 312.7 295.9 310.7 303.5 310.7ZM854 310.7C905.6 310.7 948.2 350.9 951.2 402.4L964.3 584.4C965 594.3 957.6 602.8 947.8 603.5 937.9 604.2 929.4 596.8 928.7 587L915.5 405 915.5 404.8 915.5 404.7C913.7 372 886.7 346.4 854 346.4 852.5 346.4 851.1 346.8 849.8 347.5L806.2 372.1C787.7 382.5 765.1 382.5 746.6 372.1L702.9 347.5C701.7 346.8 700.2 346.4 698.8 346.4 666.2 346.4 639.3 372 637.7 404.6L629 586.6C628.6 596.4 620.2 604 610.3 603.6 600.5 603.1 592.9 594.7 593.4 584.9L602.1 402.9C604.5 351.3 647.1 310.7 698.8 310.7 706.4 310.7 713.8 312.7 720.5 316.4L764.1 341C771.7 345.3 781 345.3 788.7 341L832.2 316.4C838.9 312.7 846.4 310.7 854 310.7ZM234.1 43C292.9 46.3 336.7 100 327 158.9L318.8 209C311.5 253.2 273.2 285.7 228.3 285.7L224.2 285.6C182.5 283.7 147.3 253.9 138.7 213.1L137.9 209 129.7 158.9C119.7 98.1 166.7 42.9 228.3 42.9L234.1 43ZM228.3 78.6C188.7 78.6 158.5 114.1 164.9 153.1L173.2 203.2C177.6 230.2 200.9 250 228.3 250 255.7 250 279.1 230.2 283.5 203.2L291.7 153.1C298.2 114.1 268 78.6 228.3 78.6ZM784.5 43C843.4 46.3 887.1 100 877.5 158.9L869.2 209C862 253.2 823.7 285.7 778.8 285.7L774.6 285.6C733 283.7 697.8 253.9 689.2 213.1L688.4 209 680.2 158.9C670.2 98.1 717.1 42.9 778.8 42.9L784.5 43ZM778.8 78.6C739.1 78.6 709 114.1 715.4 153.1L723.6 203.2C728.1 230.2 751.4 250 778.8 250 806.2 250 829.6 230.2 834 203.2L842.2 153.1C848.6 114.1 818.5 78.6 778.8 78.6Z",
+ "width": 1000
+ },
+ "search": [
+ "toilettensymbol"
+ ]
+ },
+ {
+ "uid": "21a0e62864a736461b7be40efb7a976b",
+ "css": "pferd",
+ "code": 59736,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M740.6 775.4C750.2 773.3 759.7 779.4 761.9 789L768.8 820C773.5 841.1 770.3 863.1 760 882.1L730 937.1C725.2 945.8 714.4 949 705.7 944.3 697.1 939.5 693.9 928.7 698.6 920L728.6 865C734.8 853.6 736.7 840.4 733.9 827.7L727 796.7C724.9 787.1 730.9 777.6 740.6 775.4ZM312.3 254.5V232L270.6 247.2C256.1 252.5 239.9 250.5 227.2 241.8 202.3 224.8 199 189.4 220.4 168.2L291.8 97.2C302 87.1 316.1 82.2 330.3 84L353.6 86.9V57.1C353.6 49.6 358.3 42.9 365.4 40.3 372.5 37.8 380.5 40 385.2 45.8L431.6 102.4C435.6 107.3 440.5 111.5 447 117.4 481.5 148.6 492.1 198 492.8 244.6 493.4 286.5 486.1 329.7 477.7 363.6 501.9 379.3 521.9 389.5 540.9 395.4 562.1 402.1 583 403.7 608.1 400.7 637.3 397.2 668.9 400.6 696 417.3L734.7 441.1 744.7 434.4C739.3 390.3 767.1 348.2 810.7 336.4 868.3 320.7 925 364 925 423.7V614.3C925 621.3 920.9 627.6 914.6 630.5 908.3 633.4 900.8 632.4 895.5 627.8L857.1 594.9 818.1 627.9C812.8 632.4 805.3 633.4 799 630.5 792.7 627.6 788.7 621.2 788.7 614.3V464.3C788.7 454.4 796.7 446.4 806.5 446.4 816.4 446.4 824.4 454.4 824.4 464.3V575.7L845.6 557.8C852.3 552.1 862.1 552.2 868.8 557.9L889.3 575.4V423.7C889.3 387.5 854.9 361.3 820.1 370.8 792.3 378.4 775.2 406.2 780.8 434.4L781.8 439.4C783.2 446.5 780.2 453.7 774.2 457.7L753.2 471.7 774.7 580C775 581.9 775.1 583.7 774.9 585.6L768.8 635.9 830.9 692.8C844.6 705.4 854.1 722 857.9 740.2L876.6 829.1C880.8 848.8 878.1 869.4 869.1 887.4L830.3 965.1C827.2 971.2 821.1 975 814.3 975H757.1C751 975 745.2 971.8 742 966.5 738.7 961.3 738.4 954.7 741.2 949.2L780.2 871.1C785.5 860.4 787.2 848.3 784.8 836.6L774.7 786.2C771.6 770.6 761.8 757.3 747.9 749.7L633.5 687.1C632.7 686.7 631.9 686.2 631.2 685.6L574.6 642.1C562.6 632.9 547.2 629.2 532.3 631.9L516.9 634.7C476.7 642.1 435.2 637.2 397.8 620.6 388.8 616.6 384.7 606.1 388.7 597 392.7 588 403.2 584 412.3 587.9 443.1 601.6 477.3 605.7 510.5 599.6L525.9 596.7C550.7 592.2 576.3 598.4 596.4 613.8L651.9 656.4 765.1 718.3C788.2 731 804.6 753.3 809.8 779.2L819.8 829.6C823.7 849.1 821 869.3 812.2 887.1L786 939.3H803.3L837.2 871.4C842.6 860.6 844.2 848.3 841.7 836.4L823 747.5C820.7 736.6 815 726.7 806.7 719.1L737.9 656C733.7 652.1 731.6 646.4 732.3 640.7L739.1 584.2 716.9 472.1 677.3 447.7C659 436.5 636.2 433.3 612.4 436.1 583 439.7 556.9 437.9 530.2 429.5 503.8 421.2 477.5 406.7 447.1 386.2 440.8 381.9 437.9 374 439.9 366.7 449.2 333.3 457.7 288 457.1 245.2 456.4 201.7 446.4 165 423 143.8 417.6 138.9 410.1 132.5 404 125L389.3 107.1V107.1C389.3 112.3 387.1 117.1 383.2 120.5 379.4 123.9 374.3 125.5 369.2 124.9L325.9 119.4C322.6 119 319.3 120.2 317 122.5L245.6 193.5C240.1 198.9 241 207.9 247.3 212.3 250.6 214.5 254.7 215 258.4 213.7L324.1 189.7 326 189.2C326.6 189 327.3 188.9 327.9 188.8L376.4 182.5 380.9 217.9 348.1 222.2V254.5C348.1 277.9 342.5 300.9 331.7 321.7L305.5 372.5C299.8 383.6 297.2 396 298.1 408.5L303.5 484.4C304 490.5 301.3 496.3 296.5 499.9 291.7 503.6 285.4 504.6 279.7 502.5L202.1 474.8C192.8 471.5 182.5 472.4 173.9 477.3 162.3 484 155.6 496.9 157.1 510.3L173.2 660.7H187.7L175.1 515.8C174.5 509.2 177.6 502.8 183.2 499.2 188.8 495.7 196 495.5 201.7 498.8L318.3 565.4C329.4 571.7 343.5 568.7 351 558.4L390.6 503.8C396.4 495.8 407.5 494 415.5 499.8 423.5 505.6 425.3 516.8 419.5 524.8L379.9 579.4C361.7 604.5 327.5 611.8 300.6 596.4L213.6 546.7 224.9 677C225.4 682 223.7 687 220.3 690.6 216.9 694.3 212.1 696.4 207.1 696.4H157.1C148 696.4 140.4 689.5 139.4 680.5L121.6 514.1C118.6 486.6 132.2 460 156.2 446.3 173.8 436.2 195 434.4 214.1 441.2L265.9 459.7 263.9 430.6C209.8 410.6 165 412.3 137 429.5 110.5 445.8 93.3 480.1 103.3 539.9 104.9 549.7 98.4 558.9 88.6 560.5 78.9 562.1 69.7 555.5 68.1 545.8 56.6 477.1 75.2 425.6 118.3 399.1 156.3 375.7 208.4 375.1 262.8 392.4 264.2 379.8 267.9 367.5 273.8 356.1L300 305.3C308.1 289.6 312.3 272.2 312.3 254.5ZM456.8 82.7C462.4 74.6 473.5 72.6 481.6 78.2 520.4 105.1 537.3 156.4 542.6 205 548 254.4 542 306.7 529.4 341.8 526 351 515.8 355.9 506.5 352.5 497.2 349.2 492.4 338.9 495.8 329.7 506.3 300.5 512 253.7 507.1 208.9 502.1 163.3 486.9 125.4 461.2 107.5 453.1 101.9 451.1 90.8 456.8 82.7Z",
+ "width": 1000
+ },
+ "search": [
+ "pferd"
+ ]
+ },
+ {
+ "uid": "e0396182869b7d1c21836f63e253d9d9",
+ "css": "pferdekopf",
+ "code": 59737,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M441.9 493.1C447.1 484.7 458.1 482.1 466.5 487.3 474.9 492.4 477.5 503.4 472.4 511.8L384.9 653.9C365 686.3 329.7 706 291.6 706 231.2 706 182.1 657 182.1 596.5V298.6C153.1 281.7 131.2 262.6 113.7 239.6 94.6 214.3 81.2 185.2 68.9 151.4 66.9 145.9 67.8 139.9 71.1 135.1 74.4 130.3 79.9 127.5 85.7 127.5H500.3C596.3 129.1 682.3 160.5 749.9 244.1 816.7 326.7 864.3 458.5 889.1 657.6 889.8 662.4 888.4 667.3 885.3 671.1 882.2 674.9 877.7 677.2 872.9 677.6 782.5 684.9 723.5 700.6 679.6 729.3 635.9 757.8 604.8 800.7 573.3 867.3 570.3 873.5 564 877.5 557.1 877.5H385.7C379.3 877.5 373.3 874 370.2 868.4 367 862.8 367.1 855.9 370.4 850.4L533.3 578.8 511.1 562.9C503 557.2 501.2 546 506.9 538 512.6 530 523.8 528.1 531.8 533.9L567.5 559.4C575.1 564.8 577.3 575.1 572.5 583.1L417.3 841.8H545.9C577.3 777.9 611 731.5 660 699.4 707.9 668.1 768.5 651.8 851.3 643.7 826.2 457.7 780.9 339.2 722.1 266.6 664.2 194.9 591.9 166.4 507.9 163.4L499.7 163.2H111.8C120.8 184.5 130.4 202.4 142.2 217.9 158 238.8 178.5 256.4 208.5 272.4 214.2 275.6 217.9 281.6 217.9 288.2V596.5C217.9 637.3 250.9 670.3 291.6 670.3 317.3 670.3 341.1 657 354.5 635.2L441.9 493.1ZM321.4 431C301.7 431 285.7 415.1 285.7 395.3 285.7 375.6 301.7 359.6 321.4 359.6 341.2 359.6 357.1 375.6 357.1 395.3 357.1 415.1 341.2 431 321.4 431Z",
+ "width": 1000
+ },
+ "search": [
+ "pferdekopf"
+ ]
+ },
+ {
+ "uid": "af413e59c0c11973699bcc6075636032",
+ "css": "a",
+ "code": 59738,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.2 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.8 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98.1 371.1 129.4 273.3 195.5 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM568.3 658.6L544.2 574.6H427.4L403.8 659.6C401.8 666.8 395.1 672.5 385.4 672.5 373.6 672.5 364.3 665.3 364.3 655 364.3 651.4 365.4 648.4 365.9 646.8L456.6 345C460.7 331.2 471.4 322 485.8 322 500.1 322 510.9 331.2 515 345L606.2 646.3C606.7 648.4 607.7 652 607.7 655 607.7 665.3 598.5 672.5 586.7 672.5 577 672.5 570.3 666.8 568.3 658.6ZM474 409.6L437.1 539.7H534.5L497.6 409.6 485.8 365 474 409.6Z",
+ "width": 1000
+ },
+ "search": [
+ "a"
+ ]
+ },
+ {
+ "uid": "beb1546edc376ff41bb2070278918020",
+ "css": "b",
+ "code": 59739,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM509.9 671.4H435.6C423.8 671.4 415.6 664.3 415.6 653V341.4C415.6 330.2 424.3 323 435.6 323H503.2C572.4 323 604.1 361.9 604.1 417.3 604.1 456.7 583.1 481.3 561.6 493.1 586.2 502.3 615.9 523.9 615.9 574.1 615.9 637.6 574.4 671.4 509.9 671.4ZM576 574.1C576 535.1 550.9 512.6 510.4 512.6H455.5V635.6H509.9C550.9 635.6 576 613 576 574.1ZM564.2 417.3C564.2 385 543.2 358.9 503.2 358.9H455.5V476.7H503.2C540.6 476.7 564.2 453.1 564.2 417.3Z",
+ "width": 1000
+ },
+ "search": [
+ "b"
+ ]
+ },
+ {
+ "uid": "b3aa147522cfa205cc5d15c2674923c4",
+ "css": "c",
+ "code": 59740,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM488.3 674.5C430.4 674.5 381.2 631.5 381.2 566.4V428C381.2 363 430.4 319.9 488.3 319.9 516.4 319.9 539 328.1 556.4 338.9 564.6 344 568.7 349.1 568.7 357.8 568.7 367.6 560.5 374.7 551.3 374.7 545.1 374.7 540.5 371.7 535.9 369.1 523.1 361.9 506.7 355.8 488.3 355.8 449.8 355.8 421.1 388.1 421.1 428V566.4C421.1 606.4 449.8 638.6 488.3 638.6 506.7 638.6 523.6 631.5 536.4 624.8 541 622.2 545.1 619.7 551.3 619.7 560.5 619.7 568.7 627.4 568.7 637.1 568.7 645.8 565.1 649.9 556.9 655 539 665.8 516.4 674.5 488.3 674.5Z",
+ "width": 1000
+ },
+ "search": [
+ "c"
+ ]
+ },
+ {
+ "uid": "19a77c47dbfe000c5dfa06ab28b0bf90",
+ "css": "d",
+ "code": 59741,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM607.2 425.5V568.9C607.2 631.5 563.6 671.4 502.1 671.4H420.2C408.9 671.4 400.2 664.3 400.2 653V341.4C400.2 330.2 408.9 323 420.2 323H502.1C563.6 323 607.2 363 607.2 425.5ZM440.1 358.9V635.6H502.1C537 635.6 567.2 610.5 567.2 568.9V425.5C567.2 384 537 358.9 502.1 358.9H440.1Z",
+ "width": 1000
+ },
+ "search": [
+ "d"
+ ]
+ },
+ {
+ "uid": "9cce4e2fb7b54a25315ef1bdcf8718ca",
+ "css": "e",
+ "code": 59742,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM453.5 358.9V477.7H556.5C566.3 477.7 573.9 484.9 573.9 495.7 573.9 506.4 566.3 513.6 556.5 513.6H453.5V635.6H573.4C583.2 635.6 590.8 642.2 590.8 653.5 590.8 664.8 583.2 671.4 573.4 671.4H433.5C421.7 671.4 413.6 663.7 413.6 653V341.4C413.6 330.7 422.3 323 433.5 323H573.4C583.2 323 590.8 330.2 590.8 340.9 590.8 351.7 583.2 358.9 573.4 358.9H453.5Z",
+ "width": 1000
+ },
+ "search": [
+ "e"
+ ]
+ },
+ {
+ "uid": "e84bb5933a1549af8e4de600fab3835c",
+ "css": "f",
+ "code": 59743,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM462.9 517.2V654C462.9 665.3 455.2 672.5 442.9 672.5 430.6 672.5 422.9 665.3 422.9 654V341.4C422.9 330.2 431.7 323 442.9 323H583.8C593.6 323 601.3 330.2 601.3 340.9 601.3 351.7 593.6 358.9 583.8 358.9H462.9V481.3H566.9C576.7 481.3 584.4 488.5 584.4 499.3 584.4 510 576.7 517.2 566.9 517.2H462.9Z",
+ "width": 1000
+ },
+ "search": [
+ "f"
+ ]
+ },
+ {
+ "uid": "66be5a5e4695abbf21dc4cb7caa64b81",
+ "css": "g",
+ "code": 59744,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM603.6 495.7V570.5C603.6 631.5 554.9 675.5 496.5 675.5 438 675.5 389.4 631.5 389.4 570.5V427.5C389.4 363 441.6 319.4 498.5 319.4 531.8 319.4 551.3 329.6 571.8 341.9 579 346 584.1 352.2 584.1 359.9 584.1 370.1 576.4 377.3 567.2 377.3 561 377.3 555.9 374.2 551.3 371.7 536.9 363.5 521.1 355.3 498.5 355.3 460.6 355.3 429.3 388.6 429.3 427.5V570.5C429.3 607.9 457.5 639.7 496.5 639.7 535.4 639.7 563.6 608.9 563.6 570.5V513.1H518C508.2 513.1 500.6 506.9 500.6 495.7 500.6 484.4 508.2 478.2 518 478.2H585.1C596.4 478.2 603.6 488.5 603.6 495.7Z",
+ "width": 1000
+ },
+ "search": [
+ "g"
+ ]
+ },
+ {
+ "uid": "7891b3a2ee85618223b17045729c6369",
+ "css": "h",
+ "code": 59745,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM606.6 654C606.6 663.7 598.9 672.5 586.6 672.5 574.3 672.5 566.6 665.3 566.6 654V513.6H433.4V654C433.4 663.7 425.7 672.5 413.4 672.5 401.1 672.5 393.4 665.3 393.4 654V340.4C393.4 329.1 401.6 322 413.4 322 425.2 322 433.4 329.1 433.4 340.4V477.7H566.6V340.4C566.6 329.1 574.8 322 586.6 322 598.4 322 606.6 329.1 606.6 340.4V654Z",
+ "width": 1000
+ },
+ "search": [
+ "h"
+ ]
+ },
+ {
+ "uid": "9df37958ae077f3a7550f5d518e62dc1",
+ "css": "i",
+ "code": 59746,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM500 672.5C487.7 672.5 480 665.3 480 654V340.4C480 329.1 488.2 322 500 322 511.8 322 520 329.1 520 340.4V654C520 665.3 512.3 672.5 500 672.5Z",
+ "width": 1000
+ },
+ "search": [
+ "i"
+ ]
+ },
+ {
+ "uid": "a172918a13676d88039596c33407abbc",
+ "css": "j",
+ "code": 59747,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM515.1 580.2V340.4C515.1 329.1 523.3 322 535.1 322 546.9 322 555.1 329.1 555.1 340.4V580.2C555.1 635 515.1 675.5 460.3 675.5 449 675.5 435.7 673.5 423.9 667.8 415.7 663.7 409.6 657.1 409.6 649.4 409.6 638.6 417.8 631.5 427.5 631.5 439.8 631.5 446 639.7 460.3 639.7 492.1 639.7 515.1 616.1 515.1 580.2Z",
+ "width": 1000
+ },
+ "search": [
+ "j"
+ ]
+ },
+ {
+ "uid": "fed09626e72d7b67d7995d71bc4ba813",
+ "css": "k",
+ "code": 59748,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM440.1 672.5C427.8 672.5 420.1 665.3 420.1 654V340.4C420.1 329.1 428.3 322 440.1 322 451.9 322 460 329.1 460 340.4V473.1C460 476.2 462.6 478.2 465.2 478.2 467.7 478.2 470.8 475.7 472.9 473.1L585.1 329.1C588.7 325 593.3 322 599.9 322 611.7 322 619.4 331.7 619.4 340.9 619.4 346.6 617.9 350.7 615.3 353.7L500.5 495.2 616.8 639.7C618.9 642.2 621.5 646.8 621.5 652.5 621.5 663.2 613.8 672.5 601.5 672.5 593.8 672.5 588.2 667.3 584.6 663.2L473.9 521.3C471.3 518.2 468.2 515.7 465.2 515.7 462.6 515.7 460 517.7 460 520.8V654C460 665.3 452.4 672.5 440.1 672.5Z",
+ "width": 1000
+ },
+ "search": [
+ "k"
+ ]
+ },
+ {
+ "uid": "2b3f74f2d592f9d32e04e1bbbcc8697b",
+ "css": "l",
+ "code": 59749,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M804.4 262C746.4 187.9 663.4 137.4 570.9 120.2 478.4 102.9 382.8 120 302 168.2 221.2 216.4 160.8 292.4 132.1 382 103.3 471.6 108.3 568.6 146 654.8 183.7 741 251.5 810.5 336.8 850.2 422.1 890 518.9 897.2 609.2 870.6 699.4 844.1 776.9 785.4 827 705.8 877.1 626.2 896.5 531 881.4 438.2 879.8 428.4 886.4 419.3 896.2 417.7 905.9 416.1 915.1 422.7 916.7 432.4 933.1 533.9 912 637.9 857.2 724.9 802.5 811.8 717.9 875.9 619.3 904.9 520.7 933.9 414.9 926 321.7 882.6 228.6 839.2 154.4 763.3 113.3 669.1 72.1 575 66.7 469 98 371.1 129.4 273.3 195.4 190.2 283.7 137.5 372 84.9 476.4 66.2 577.5 85.1 678.5 103.9 769.2 159 832.5 240 838.6 247.7 837.2 259 829.4 265 821.7 271.1 810.4 269.7 804.4 262ZM580.1 671.4H444.8C433 671.4 424.8 663.7 424.8 653V340.4C424.8 329.1 433 322 444.8 322 456.6 322 464.8 329.1 464.8 340.4V635.6H580.1C589.8 635.6 597 641.7 597 653.5 597 665.3 589.8 671.4 580.1 671.4Z",
+ "width": 1000
+ },
+ "search": [
+ "l"
+ ]
+ },
+ {
+ "uid": "b5a6a933628da18227e3f7a49164d8d0",
+ "css": "lippe-zu-detmold",
+ "code": 59750,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M30 546.6C49 546.6 69.6 554 86.6 566.5 99 575.7 110 588.1 117.2 603.3 144.9 594.8 168.6 595.4 188.6 605.3 207.8 614.8 220.6 631.6 229.9 649.8 282.5 647.1 317.1 680.9 319.2 714.9 319.7 724.7 312.2 733.2 302.4 733.8 292.5 734.4 284.1 726.8 283.5 717 282.8 705.4 265.6 679.4 221.9 686.5 213.8 687.9 205.8 683.5 202.6 675.9 194.1 655.8 184.6 643.2 172.7 637.3 161.4 631.7 143.6 630.1 113.2 642.7 108.4 644.7 102.8 644.5 98.2 642 93.5 639.6 90.1 635.2 89 630.1 85.7 615.7 76.9 603.8 65.3 595.2 53.7 586.6 40.4 582.3 30 582.3 20.1 582.3 12.1 574.3 12.1 564.5 12.1 554.6 20.1 546.6 30 546.6ZM685.3 523.9V695.8L804.6 708.3V519.6C767 520.9 726.2 522.4 685.3 523.9ZM840.4 697.2L952.6 618.7V543.5L840.4 523.8V697.2ZM533.8 529.4V678.1C533.8 678.7 533.8 679.3 533.7 679.9L649.6 692V525.2C609.4 526.6 569.9 528.1 533.8 529.4ZM414.5 533.9C404.5 534.3 396 534.6 389.3 534.8V664.7L498.1 676.1V530.8C464.9 532 436.1 533.1 414.5 533.9ZM283.5 627.6V413C283.5 403.1 291.5 395.1 301.3 395.1 311.2 395.1 319.2 403.1 319.2 413V627.6C319.2 637.4 311.2 645.4 301.3 645.4 291.5 645.4 283.5 637.4 283.5 627.6ZM840.4 435.7C840.4 436.7 840.3 437.6 840.1 438.5 840.5 438.6 840.8 438.6 841.1 438.7L952.6 466.2V384.9C952.5 384.8 952.4 384.7 952.3 384.6L840.4 282.8V435.7ZM389.3 343.4V453.7C429.4 452 465 450.5 498.1 449V322.7L389.3 343.4ZM649.6 293.9L533.8 315.9V447.4C573.5 445.7 610.7 444 650.1 442.3 649.8 441 649.6 439.6 649.6 438.2V293.9ZM283.5 362.5V301.2H79.3V527.5C79.3 537.4 71.3 545.4 61.5 545.4 51.6 545.4 43.6 537.4 43.6 527.5V355.1H21.4C11.6 355.1 3.6 347.1 3.6 337.2 3.6 327.3 11.6 319.4 21.4 319.4H43.6V283.4C43.6 273.5 51.6 265.5 61.5 265.5H298.6L823.4 168.2 825.6 167.9C830.8 167.6 835.9 169.6 839.6 173.5L983.4 325.7C986.5 329 988.3 333.4 988.3 337.9V628C988.3 633.9 985.4 639.3 980.7 642.7L836.8 743.2C833.3 745.7 829 746.8 824.7 746.3L348.1 696.3C338.3 695.3 331.2 686.5 332.2 676.7 333.3 666.9 342.1 659.8 351.9 660.8L353.6 661V517.6C353.6 508 361.2 500.2 370.8 499.8L370.8 499.8C370.8 499.8 370.9 499.8 370.9 499.8 371.1 499.8 371.2 499.8 371.5 499.8 372 499.8 372.7 499.7 373.6 499.7 375.5 499.6 378.4 499.5 382 499.4 389.3 499.1 399.9 498.7 413.2 498.2 439.7 497.2 477 495.8 520 494.2 605.9 491 714.4 487 804.7 483.8 812.9 483.6 821.1 484.1 829.2 485.6L952.6 507.3V503L832.6 473.4C825 471.5 817.2 470.7 809.4 471.1 637.7 478.4 548.7 482.7 372.2 490.2 367.3 490.4 362.6 488.6 359.1 485.3 355.6 481.9 353.6 477.2 353.6 472.4V328.6C353.6 320 359.7 312.6 368.1 311L819.6 225.3C825.1 224.3 830.8 225.9 835 229.6L896 285.2 820.3 205.1 319.2 298V362.5C319.2 372.3 311.2 380.3 301.3 380.3 291.5 380.3 283.5 372.3 283.5 362.5ZM685.3 438.2C685.3 439.1 685.2 439.9 685.1 440.7 721.3 439.1 760.1 437.4 804.6 435.5V264.5L685.3 287.2V438.2ZM108.8 328.6C113.7 328.6 117.5 331.5 117.5 335.7V392.9C117.5 397.1 113.7 400 108.8 400 103.8 400 100 397.1 100 392.9V335.7C100 331.5 103.8 328.6 108.8 328.6ZM179.7 328.6C184.6 328.6 188.4 331.5 188.4 335.7V392.9C188.4 397.1 184.6 400 179.7 400 174.8 400 170.9 397.1 170.9 392.9V371.3H150V392.9C150 397.1 146.2 400 141.3 400 136.3 400 132.5 397.1 132.5 392.9V335.7C132.5 331.5 136.3 328.6 141.3 328.6 146.2 328.6 150 331.5 150 335.7V357.5H170.9V335.7C170.9 331.5 174.7 328.6 179.7 328.6ZM247.9 328.6C253 328.6 256.7 331.7 256.7 335.8 256.7 337.3 256.2 339 255.2 340.1L255.2 340.1 233.8 364.1 254.9 387.6C255.8 388.5 256.3 389.3 256.7 390.2 257 391 257.1 391.8 257.1 392.7 257.1 396.8 253.2 400 248.1 400 244.6 400 242.1 398.3 240.5 396.4L220.1 372.7V392.9C220.1 397.1 216.3 400 211.4 400 206.4 400 202.6 397.1 202.6 392.9V335.7C202.6 331.5 206.4 328.6 211.4 328.6 216.3 328.6 220.1 331.5 220.1 335.7V356.4L240.5 332.1C242.1 330.2 244.6 328.6 247.9 328.6Z",
+ "width": 1000
+ },
+ "search": [
+ "lippe-zu-detmold"
+ ]
+ },
+ {
+ "uid": "47296f3cfb11653d2d318373ad5074e0",
+ "css": "schaf",
+ "code": 59751,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M457.1 464.3C457.1 476.1 447.5 485.7 435.7 485.7 423.9 485.7 414.3 476.1 414.3 464.3 414.3 452.5 423.9 442.9 435.7 442.9 447.5 442.9 457.1 452.5 457.1 464.3ZM600 464.3C600 476.1 590.4 485.7 578.6 485.7 566.7 485.7 557.1 476.1 557.1 464.3 557.1 452.5 566.7 442.9 578.6 442.9 590.4 442.9 600 452.5 600 464.3ZM435.3 167.6C480.8 122.5 554.1 123.1 598.8 167.9 662.1 152.4 726.3 189.6 744.7 251.6L749.5 252.4C789.1 259.3 820.4 289.6 828.7 328.9 830.7 338.5 824.5 348 814.8 350 805.2 352 795.7 345.8 793.7 336.2 788.4 311.2 768.5 292 743.4 287.6L727.1 284.8C719.8 283.5 714 277.8 712.6 270.5 703 219.6 651.1 188.5 601.7 204.2L598.5 205.2C591.5 207.4 583.8 205.1 579.2 199.4 548.3 161.4 490.9 159.6 457.7 195.7L453.6 200.2C448.5 205.7 440.6 207.5 433.7 204.7 395.1 189.1 351.3 210.2 339.5 250.2L332.9 272.3C330.9 279 325.2 283.9 318.3 284.9 281.6 290 255.9 323.2 259.6 359.5 270.9 354.7 282.4 350.3 294.1 346.5L313.5 340.2 316 339.5C321.9 338.5 328 340.6 332.2 345.1 357 372.1 394.8 383 430.3 373.4L442.7 370 444.4 369.6C448.4 369 452.5 369.6 456 371.6 488.8 389.6 528.1 391.3 562.3 376.3L574.6 370.9 577 370C582.6 368.5 588.8 369.7 593.3 373.6 609.3 387.1 632.6 387.3 648.9 374.2L687 343.3C691.5 339.6 697.5 338.4 703.1 339.9L736.4 349.3C788.1 363.8 835 393.3 870.7 433.4 885.7 450.3 878 477.9 855.2 483.4L840.6 486.9C834.2 488.5 827.6 489.7 821.1 490.5 824.5 498.1 828.1 505.9 831.8 513.4 848.4 547.9 840.9 589.7 812.6 615.1L813.9 623.7C823.3 685.2 784.5 742.9 725.8 758.5 714.8 813 661.2 849.9 605 838.3L591 835.4C544.1 873.4 476.7 873.5 429.5 835.5 372.8 845.5 316.6 813.3 296.9 758.8 244.7 744.3 209.6 694.1 215.2 639.2L217.5 616.9C180.8 591.3 167.3 542.1 187.5 500.8L192.9 489.7C181.6 488.8 170.3 486.9 159.2 483.9 136.5 477.9 129.6 449 147.3 433.3L157 424.8C178.2 406 201.4 389.8 226 376.1L224.9 369.1C216.3 315.4 250.3 265 301.7 251.8L305.2 240C321.9 183.9 380.2 152.5 435.3 167.6ZM674.4 399.4C684 443.6 676 489.8 652.1 528.2L649.1 532.9 638.8 619.1C635.5 646.7 623.5 672.5 604.6 692.9L603.2 694.4C551.4 750 463.2 749.4 412.2 693.1 393.5 672.4 382 646.3 379.4 618.6L371.2 533.3 366.1 526.3C339.1 488.8 328.8 441.9 337.5 396.6 337.6 396 337.8 395.4 337.9 394.8 329.5 390 321.5 384.2 314.2 377.5L305.2 380.4C259.2 395.4 216.8 419.6 180.6 451.6L180.1 452C217.7 459 256.6 452 289.5 432.1 298 427 308.9 429.7 314 438.2 319.1 446.6 316.4 457.6 308 462.7 284.7 476.8 258.8 485.6 232.3 488.9 232 490.5 231.5 492 230.8 493.6L219.6 516.5C206 544.2 217.1 577.6 244.5 591.6 251.1 595 254.9 602 254.2 609.3L250.8 642.8C246.8 681.5 272.5 716.8 310.1 725.3L313.7 726 316.1 726.6C321.6 728.3 325.9 732.6 327.7 738.1L329.4 743.5C342.9 785.8 387 810.1 429.9 798.9L432.1 798.5C437.2 797.8 442.5 799.4 446.4 802.9L448.1 804.4C484 836.7 538.6 836.1 573.8 803.1L575.5 801.7C579.5 798.8 584.7 797.7 589.6 798.7L612.2 803.3C651.8 811.5 689.4 782.7 692 742.5L692.2 740.9C693.3 733.2 699.4 727.1 707.2 725.9 753.7 719 785.7 675.6 778.6 629.1L775.7 610.2C774.6 603.4 777.7 596.5 783.4 592.7 803.6 579.1 810.7 551.8 799.6 528.9 793.9 517.2 788.1 504.6 783.1 492.7 782.8 492.1 782.6 491.5 782.4 490.9 754.4 488.1 727.1 478.4 703.2 462.2 695 456.7 692.9 445.6 698.4 437.4 703.9 429.3 715 427.1 723.2 432.6 755.1 454.2 794.7 461.3 832.2 452.2L838.2 450.8C807.8 419 769.1 395.5 726.8 383.7L702.3 376.8 674.4 399.4ZM439.6 407.9C417 414 393.6 414 371.7 408.5 366.6 442.5 374.9 477.3 395.1 505.4L403 516.4C404.8 519 406 522 406.3 525.1L414.9 615.2C416.8 635.2 425.2 654.2 438.7 669.1 452.7 684.5 470.5 694.2 489.3 698.1V657.7C477 655.4 465.2 650.6 454.4 643.4 446.2 638 444 626.9 449.4 618.7 454.9 610.5 466 608.2 474.2 613.7 494.1 627 520.1 627 540.1 613.7 548.3 608.2 559.4 610.5 564.9 618.7 570.3 626.9 568.1 638 559.9 643.4 549.1 650.6 537.2 655.4 525 657.7V698.5C544.2 695 562.6 685.6 577 670.1L578.4 668.6C592.2 653.8 600.9 634.9 603.3 614.8L614.1 524.7 614.5 522.8C614.9 520.9 615.7 519 616.7 517.4L621.8 509.3C639 481.7 645.8 449 641.3 417.1 620.6 422.4 598.3 419.3 579.6 407.7L576.7 409C534.6 427.5 486.5 426.4 445.4 406.3L439.6 407.9Z",
+ "width": 1000
+ },
+ "search": [
+ "schaf"
+ ]
+ },
+ {
+ "uid": "b786425e9de23c688d8d87c2f4b6701c",
+ "css": "sonne",
+ "code": 59752,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M482.1 857.1V771.4C482.1 761.6 490.1 753.6 500 753.6 509.9 753.6 517.9 761.6 517.9 771.4V857.1C517.9 867 509.9 875 500 875 490.1 875 482.1 867 482.1 857.1ZM294.5 680.2C301.5 673.3 312.8 673.3 319.8 680.2 326.7 687.2 326.7 698.5 319.8 705.5L260.1 765.1C253.1 772.1 241.8 772.1 234.8 765.1 227.9 758.2 227.9 746.9 234.8 739.9L294.5 680.2ZM680.2 680.2C687.2 673.3 698.5 673.3 705.5 680.2L765.1 739.9C772.1 746.9 772.1 758.2 765.1 765.1 758.2 772.1 746.9 772.1 739.9 765.1L680.2 705.5C673.3 698.5 673.3 687.2 680.2 680.2ZM667.9 500C667.9 455.5 650.2 412.8 618.7 381.3 587.2 349.8 544.5 332.1 500 332.1 455.5 332.1 412.8 349.8 381.3 381.3 349.8 412.8 332.1 455.5 332.1 500 332.1 544.5 349.8 587.2 381.3 618.7 412.8 650.2 455.5 667.9 500 667.9 544.5 667.9 587.2 650.2 618.7 618.7 650.2 587.2 667.9 544.5 667.9 500ZM228.6 482.1C238.4 482.1 246.4 490.1 246.4 500 246.4 509.9 238.4 517.9 228.6 517.9H142.9C133 517.9 125 509.9 125 500 125 490.1 133 482.1 142.9 482.1H228.6ZM857.1 482.1C867 482.1 875 490.1 875 500 875 509.9 867 517.9 857.1 517.9H771.4C761.6 517.9 753.6 509.9 753.6 500 753.6 490.1 761.6 482.1 771.4 482.1H857.1ZM234.8 234.8C241.8 227.9 253.1 227.8 260.1 234.8L319.7 294.5C326.7 301.5 326.7 312.8 319.7 319.8 312.8 326.7 301.4 326.7 294.5 319.8L234.8 260.1C227.8 253.1 227.8 241.8 234.8 234.8ZM739.9 234.8C746.9 227.9 758.2 227.9 765.1 234.8 772.1 241.8 772.1 253.1 765.1 260.1L705.5 319.8C698.5 326.7 687.2 326.7 680.2 319.8 673.3 312.8 673.3 301.5 680.2 294.5L739.9 234.8ZM482.1 228.6V142.9C482.1 133 490.1 125 500 125 509.9 125 517.9 133 517.9 142.9V228.6C517.9 238.4 509.9 246.4 500 246.4 490.1 246.4 482.1 238.4 482.1 228.6ZM703.6 500C703.6 554 682.1 605.8 643.9 643.9 605.8 682.1 554 703.6 500 703.6 446 703.6 394.2 682.1 356.1 643.9 317.9 605.8 296.4 554 296.4 500 296.4 446 317.9 394.2 356.1 356.1 394.2 317.9 446 296.4 500 296.4 554 296.4 605.8 317.9 643.9 356.1 682.1 394.2 703.6 446 703.6 500Z",
+ "width": 1000
+ },
+ "search": [
+ "sonne"
+ ]
+ },
+ {
+ "uid": "5bf1792d544fe76652d66546f42ec029",
+ "css": "fisch",
+ "code": 59753,
+ "src": "custom_icons",
+ "selected": true,
+ "svg": {
+ "path": "M347.3 263.4C366.8 261 393.1 261.1 419.9 263.9 508.8 273.4 561 310.4 583.3 334.1 631.4 341.3 675.9 359.9 714.1 383.7 768.4 417.5 811.3 462.6 834.8 503.2 839.4 511.1 837.2 521.3 829.7 526.7 825.4 529.8 818.6 534.9 812.6 539.8 811.7 540.6 810.8 541.4 810 542.1 815.9 547.5 823.8 553.2 829.3 556.9 833.3 559.5 836 563.7 836.9 568.4 837.8 573.1 836.8 578 834 581.9L834 582 834 582C834 582 833.9 582.1 833.9 582.1 833.8 582.2 833.8 582.3 833.7 582.5 833.4 582.8 833.1 583.2 832.7 583.8 831.9 584.9 830.7 586.5 829.2 588.6 826.1 592.7 821.6 598.5 815.9 605.6 804.4 619.6 787.9 638.5 767.7 657.9 727.7 696.2 670.7 739.3 607.3 748.4 600 749.4 592.8 750.3 585.8 751 585.2 751.7 584.5 752.3 583.8 752.9 552.5 776.4 513.9 806.6 462.1 819.5 437.2 825.8 409.3 829.9 385.5 831.4 373.5 832.2 362.3 832.4 352.7 831.8 343.9 831.2 334 829.8 326.6 826.1 317.9 821.8 312.5 814.6 310.3 806.3 308.3 798.9 309.1 791.7 310.1 786.3 311.2 780.8 313 775.5 314.3 771.5 315.9 766.8 316.8 764.3 317.2 762.6 317.3 762 317.5 761.4 317.7 760.8L337 702.7C334.6 701.3 332.1 699.9 329.6 698.5 290.8 676 249.1 645.5 217.4 617.4 208.7 609.7 200.7 602 193.6 594.7 170.1 617.3 150 632.7 122.9 644 106.8 650.7 85.6 655 67.1 655.6 57.8 656 48.2 655.4 39.8 653.1 32 650.9 21.3 646.3 15.9 635.5 9.5 622.6 9.9 610.1 12.5 599.1 14.9 588.9 19.7 578.1 23.2 569.2 28.3 556.5 38 543.7 45.4 535 47 533 48.6 531.2 50.1 529.5 37 505.4 29.7 481.2 27.9 461.1 27 449.6 27.7 438 31.7 428.2 35.8 418 44.6 408 59 406.9L64.8 406.6C93.6 405.9 118.8 416.5 141.1 432.5 160.5 446.4 178.3 464.9 195 484.5 207 472.1 219.4 461.4 225.3 457.5 233.5 452.1 244.6 454.3 250.1 462.5 255.6 470.7 253.3 481.8 245.1 487.2 241.9 489.4 230.1 499.2 218.4 511.8 212.7 517.9 207.4 524.3 203.5 530.2 200 535.3 198.3 539.2 197.6 541.6 197.7 542 197.9 542.6 198.2 543.3 199.6 546.2 202.2 550.1 206.1 555.1 214 565.1 226.1 577.4 241.1 590.7 271.1 617.2 310.8 646.3 347.5 667.5 419.6 709.3 491.1 728.9 602.3 713 607.1 712.3 611.8 711.4 616.6 710.2 612.4 701.4 607.8 691.3 603.5 681.3 596.4 664.8 589.2 646.3 587.2 634.3 585.6 624.6 592.2 615.3 601.9 613.7 611.6 612.1 620.8 618.7 622.5 628.4 623.6 635.5 629 650.1 636.3 667.2 641 678.1 646.1 689 650.5 698.2 684.6 682.6 716.5 657.5 742.9 632.2 761.9 613.9 777.4 596.2 788.2 583 790.4 580.3 792.4 577.7 794.2 575.5 791.3 573.2 788.5 570.9 785.9 568.5 782.1 565.2 778 561.1 775 556.9 773.5 554.8 771.7 551.8 770.5 548.2 769.4 544.6 768.4 538.4 771.6 532L772.5 530.3C774.7 526.5 777.9 523.3 780 521.2 782.9 518.3 786.4 515.2 789.8 512.4 791.6 510.8 793.6 509.3 795.5 507.8 773.9 476.1 738.9 441.2 695.2 414 679.5 404.2 662.7 395.5 645.2 388.3 633.8 406.9 617.1 443.4 614.7 485.4 611.5 538.8 613.4 572.3 614.6 581.4 615.8 591.2 608.8 600.1 599.1 601.4 589.3 602.6 580.3 595.7 579.1 585.9 577.6 573.8 575.8 537.9 579 483.3 581.6 439 597.4 400.4 610.8 376.4 582.6 368.6 552.9 364.9 522.6 367 456.4 371.6 413.2 382.2 381.2 395.5 376 397.6 371.1 399.8 366.5 402.1 364.7 403.8 362.5 405.1 360.1 405.9 359.4 406.1 358.7 406.3 358 406.4 337.7 417.3 321.2 429.6 303.6 442.9 295.7 448.8 284.5 447.2 278.6 439.3 272.7 431.4 274.3 420.2 282.1 414.3 297.5 402.7 313.4 390.8 332.5 379.8L305.7 299.2C303 291.3 305.2 283.7 309.5 278.3 313.1 273.8 317.8 271.2 321.3 269.6 328.5 266.4 337.8 264.5 347.3 263.4ZM351.7 771.7C350.7 775.5 349.2 779.9 348.2 782.9 346.8 786.9 345.8 790.3 345.2 793.2 345.1 793.8 345 794.3 344.9 794.8 345.2 794.9 345.5 795 345.9 795 348.2 795.5 351.3 795.9 355 796.1 362.6 796.6 372.2 796.5 383.1 795.8 405 794.4 430.7 790.6 453.5 784.9 478.9 778.5 500.7 767.2 520.9 754.1 463.1 752.9 415 740.4 369.2 719.1L351.7 771.7ZM64.5 442.4C63.6 445.1 62.9 450.2 63.5 458.1 65 475 72.4 498.7 87.4 522.5 91.6 529.2 90.9 537.8 85.8 543.6L84.8 544.8 84.7 544.8C84.7 544.8 84.7 544.9 84.6 545 84.5 545.1 84.2 545.3 83.9 545.6 83.3 546.2 82.4 547.2 81.3 548.3 79.1 550.7 76 554.1 72.7 558 65.8 566.2 59.3 575.3 56.4 582.5 52 593.4 48.9 600.5 47.3 607.2 46.1 612.1 46.2 615.2 47.2 617.9 47.6 618.1 48.2 618.4 49.1 618.6 52.9 619.6 58.6 620.2 65.9 620 80.5 619.5 97.4 615.9 109.1 611 131.2 601.8 147.8 589.3 170.8 567 169 564.3 167.4 561.6 166.1 559 163.4 553.4 160.6 545.5 162 537L162.7 533.4C164.6 526 168.3 519 172.2 512.8 154.8 492 137.8 474.1 120.2 461.5 102 448.4 83.9 441.6 64.5 442.4ZM416.1 299.4C391.3 296.8 367.8 296.8 351.6 298.8 348.5 299.2 345.8 299.7 343.6 300.1L364.8 363.6C365.7 363.2 366.6 362.8 367.5 362.5 404 347.3 451.2 336.1 520.1 331.4 520.5 331.4 520.9 331.3 521.3 331.3 497.4 317.7 462.9 304.4 416.1 299.4ZM528.5 389.2C537.1 384.4 548 387.5 552.9 396.1 557.7 404.6 554.6 415.5 546 420.4 530.3 429.2 530.3 451.9 546 460.8 551.8 464 555.3 470.2 555.1 476.8 555 483.4 551.2 489.4 545.3 492.3 531 499.4 530.5 519.6 544.4 527.4L546 528.3C551.5 531.4 555 537.2 555.1 543.5 555.3 549.8 552.1 555.7 546.8 559L542 562C529.2 570 530.6 589 544.4 595.1 550.6 597.8 554.8 603.8 555.1 610.6 555.5 617.3 551.9 623.7 546 627L542.9 628.8C530.9 635.5 531.8 653.1 544.4 658.7 553.5 662.6 557.6 673.1 553.6 682.2 549.7 691.2 539.2 695.3 530.1 691.4 497.5 677.1 489.9 637.3 509.2 611.8 493.7 592.2 493.4 563.3 509.6 543.5 494.7 523.6 495 495.5 510.2 475.9 489.9 448.9 496 407.5 528.5 389.2ZM441 429C449.6 424.2 460.5 427.2 465.4 435.8 470.2 444.4 467.2 455.3 458.6 460.1 442.8 469 442.8 491.7 458.6 500.5 464.3 503.8 467.8 509.9 467.7 516.5 467.5 523.1 463.7 529.1 457.8 532.1 443.5 539.2 443.1 559.4 456.9 567.2L458.6 568.1C464.1 571.2 467.5 576.9 467.7 583.2 467.8 589.5 464.6 595.5 459.3 598.8L454.5 601.8C441.8 609.8 443.1 628.8 457 634.9 466 638.8 470.1 649.3 466.2 658.4 462.2 667.4 451.7 671.5 442.6 667.6 408.3 652.5 400.4 609.8 422.1 583.3 407.2 563.4 407.5 535.3 422.7 515.7 402.4 488.7 408.6 447.3 441 429ZM345.6 460.8C354.2 455.9 365.1 459 370 467.6 374.8 476.2 371.7 487.1 363.1 491.9 347.4 500.8 347.4 523.4 363.1 532.3 368.9 535.5 372.4 541.7 372.2 548.3 372.1 554.9 368.3 560.9 362.4 563.8 348.1 571 347.6 591.1 361.5 598.9L363.1 599.8C371.7 604.7 374.8 615.6 370 624.2 365.1 632.8 354.2 635.8 345.6 631L344 630C312.9 612.5 307.6 572.8 327.3 547.4 307 520.5 313.1 479 345.6 460.8ZM684.3 426.7C659 426.7 638.6 447.2 638.6 472.4 638.6 497.6 659 518.1 684.3 518.1 709.5 518.1 729.9 497.6 729.9 472.4 729.9 447.2 709.5 426.7 684.3 426.7ZM684.3 462.4C689.8 462.4 694.2 466.9 694.2 472.4 694.2 477.9 689.8 482.4 684.3 482.4 678.8 482.4 674.3 477.9 674.3 472.4 674.3 466.9 678.8 462.4 684.3 462.4ZM879 325.2C902 325.2 920.7 343.9 920.7 366.9 920.7 390 902 408.6 879 408.6 855.9 408.6 837.3 390 837.3 366.9 837.3 343.9 855.9 325.2 879 325.2ZM879 360.9C875.6 360.9 873 363.6 873 366.9 873 370.2 875.6 372.9 879 372.9 882.3 372.9 884.9 370.2 884.9 366.9 884.9 363.6 882.3 360.9 879 360.9ZM821.4 257.1C833.3 257.1 842.9 266.7 842.9 278.6 842.9 290.4 833.3 300 821.4 300 809.6 300 800 290.4 800 278.6 800 266.7 809.6 257.1 821.4 257.1ZM926.6 182.1C958.4 182.1 984.2 207.9 984.2 239.7 984.2 271.5 958.4 297.3 926.6 297.3 894.8 297.3 869 271.5 869 239.7 869.1 207.9 894.8 182.1 926.6 182.1ZM926.6 217.9C914.6 217.9 904.8 227.7 904.8 239.7 904.8 251.8 914.6 261.6 926.6 261.6 938.7 261.6 948.5 251.8 948.5 239.7 948.5 227.7 938.7 217.9 926.6 217.9Z",
+ "width": 1000
+ },
+ "search": [
+ "fisch"
+ ]
}
]
-}
\ No newline at end of file
+}
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.eot b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.eot
index aa18e7b..7359505 100644
Binary files a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.eot and b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.eot differ
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.svg b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.svg
index e051b4a..9b17c6f 100644
--- a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.svg
+++ b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.svg
@@ -1,7 +1,7 @@
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.ttf b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.ttf
index 458dc6f..be8ce09 100644
Binary files a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.ttf and b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.ttf differ
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff
index 83275ac..917b5c3 100644
Binary files a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff and b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff differ
diff --git a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff2 b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff2
index f76b5f3..26f0959 100644
Binary files a/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff2 and b/gfi-ihk-2024/stories/assets/fonts/pictograms/pictograms.woff2 differ
diff --git a/gfi-ihk-2024/stories/atoms/badge/BadgeComponent.js b/gfi-ihk-2024/stories/atoms/badge/BadgeComponent.js
index 179d314..459fb6a 100644
--- a/gfi-ihk-2024/stories/atoms/badge/BadgeComponent.js
+++ b/gfi-ihk-2024/stories/atoms/badge/BadgeComponent.js
@@ -4,5 +4,5 @@ import {createElement} from "../../_global/scripts/helpers";
export const createBadge = ({
count = 8,
}) => {
- return createElement('span', ['badge'], count.toString());
+ return createElement('span', ['badge', 'variant-base'], count.toString());
}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/atoms/badge/badge.scss b/gfi-ihk-2024/stories/atoms/badge/badge.scss
index 4b63940..33f919b 100644
--- a/gfi-ihk-2024/stories/atoms/badge/badge.scss
+++ b/gfi-ihk-2024/stories/atoms/badge/badge.scss
@@ -9,7 +9,7 @@
vertical-align: top;
min-width: 1.5em;
height: 1.5em;
- background-color: var(--theme-color-primary-dimmed-03);
+ background-color: var(--color-button-tertiary-background);
font-family: 'Korb', sans-serif;
font-size: var(--font-size-copy);
line-height: 1.2em;
diff --git a/gfi-ihk-2024/stories/atoms/blockquote/BlockquoteComponent.js b/gfi-ihk-2024/stories/atoms/blockquote/BlockquoteComponent.js
index eeb6665..58014a3 100644
--- a/gfi-ihk-2024/stories/atoms/blockquote/BlockquoteComponent.js
+++ b/gfi-ihk-2024/stories/atoms/blockquote/BlockquoteComponent.js
@@ -6,7 +6,7 @@ export const createBlockquote = ({
author = 'Max Mustermann, Unternehmer',
type = 'regular',
}) => {
- const blockquote = createElement('blockquote');
+ const blockquote = createElement('blockquote', ['variant-base']);
blockquote.dataset.quoteType = type;
if (typeof quote === 'string') {
createElement('p', [], quote, blockquote);
diff --git a/gfi-ihk-2024/stories/atoms/blockquote/blockquote.scss b/gfi-ihk-2024/stories/atoms/blockquote/blockquote.scss
index 825af3d..c389290 100644
--- a/gfi-ihk-2024/stories/atoms/blockquote/blockquote.scss
+++ b/gfi-ihk-2024/stories/atoms/blockquote/blockquote.scss
@@ -1,5 +1,5 @@
blockquote {
- border-left: 6px solid var(--theme-color-secondary);
+ border-left: 6px solid var(--color-decoration);
margin: 2em 0;
padding-left: 1.2em;
font-style: italic;
@@ -32,8 +32,10 @@ blockquote {
display: block;
width: 30px;
height: 30px;
- background-image: url('../../assets/img/quote.svg');
- background-size: 100%;
+ mask-image: url('../../assets/img/quote.svg');
+ mask-size: 100%;
+ mask-repeat: no-repeat;
+ background-color: var(--color-decoration);
margin: 2px 0 2px -40px;
@media(max-width: 767px) {
@@ -48,8 +50,10 @@ blockquote {
display: block;
width: 30px;
height: 30px;
- background-image: url('../../assets/img/quote.svg');
- background-size: 100%;
+ mask-image: url('../../assets/img/quote.svg');
+ mask-size: 100%;
+ mask-repeat: no-repeat;
+ background-color: var(--color-decoration);
margin: 2px 0 2px -40px;
transform: rotate(180deg);
diff --git a/gfi-ihk-2024/stories/atoms/button/button.scss b/gfi-ihk-2024/stories/atoms/button/button.scss
index 42065b4..aefc09d 100644
--- a/gfi-ihk-2024/stories/atoms/button/button.scss
+++ b/gfi-ihk-2024/stories/atoms/button/button.scss
@@ -2,8 +2,8 @@
@import '../../_global/styles/vars';
.btn {
- --button-bg-color: var(--theme-color-primary);
- --button-text-color: var(--theme-color-white);
+ --button-bg-color: var(--color-button-primary-background);
+ --button-text-color: var(--color-button-primary-text);
--button-padding: 16px 24px;
--button-min-size: 60px;
--button-icon-padding: 58px;
@@ -51,32 +51,32 @@
}
.btn.secondary {
- --button-bg-color: var(--theme-color-secondary);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--color-button-secondary-background);
+ --button-text-color: var(--color-button-secondary-text);
--button-hover-shadow-opacity: 0.4;
}
.btn.white {
- --button-bg-color: var(--theme-color-white);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--color-button-tertiary-background);
+ --button-text-color: var(--color-button-tertiary-text);
--button-hover-shadow-opacity: 0.35;
}
.btn.primary-light {
- --button-bg-color: var(--theme-color-primary-dimmed-03);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--swatches-primary-200);
+ --button-text-color: var(--color-button-primary-background);
--button-hover-shadow-opacity: 0.45;
}
.btn.primary-extra-light {
- --button-bg-color: var(--theme-color-primary-dimmed-04);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--color-button-tertiary-background);
+ --button-text-color: var(--color-button-tertiary-text);
--button-hover-shadow-opacity: 0.5;
}
.btn.secondary-light {
- --button-bg-color: #9AD7A3;
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--swatches-secondary-300);
+ --button-text-color: var(--button-bg-color);
--button-hover-shadow-opacity: 0.45;
}
@@ -94,7 +94,7 @@
transition: 0.3s ease;
}
-.btn:hover::after {
+.btn:hover::after, *:has(.teaser--link:hover) .btn::after {
opacity: var(--button-hover-shadow-opacity);
box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--button-bg-color);
}
diff --git a/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js b/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js
index c709bed..0ccb4a0 100644
--- a/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js
+++ b/gfi-ihk-2024/stories/atoms/event-teaser/EventTeaserComponent.js
@@ -6,7 +6,7 @@ export const createEventTeaser = ({
event = EventTeaserData,
isExtended = false,
}) => {
- const a = createElement('div', ['event-teaser']);
+ const a = createElement('div', ['event-teaser', 'variant-base']);
const dateBox = createElement('div', ['date-box'], null, a);
const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
diff --git a/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss b/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss
index 6794129..2dc7703 100644
--- a/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss
+++ b/gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss
@@ -2,7 +2,7 @@
@import '../../_global/styles/vars';
.event-teaser {
- background-color: white;
+ background-color: var(--color-background);
border-radius: 8px;
overflow: hidden;
display: flex;
@@ -12,10 +12,10 @@
@include focus-visible;
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
.date-box {
- background-color: var(--theme-color-secondary-intensed);
+ background-color: var(--color-text-accent);
}
}
@@ -23,8 +23,8 @@
display: flex;
flex-direction: column;
justify-content: flex-end;
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
margin-right: 18px;
font-family: "Korb", sans-serif;
min-height: 80px;
@@ -96,7 +96,7 @@
line-height: 1.2em;
margin-right: 15px;
margin-bottom: 2px;
- color: var(--theme-color-primary);
+ color: var(--color-text);
&::before {
position: relative;
@@ -106,7 +106,7 @@
line-height: 20px;
margin-right: 5px;
vertical-align: top;
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
@media(max-width: 567px) {
@@ -138,19 +138,19 @@
&.status {
&::before {
@include icon-xsmall-offen;
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
}
&.interested-parties, &.waiting-list {
&::before {
@include icon-xsmall-liste;
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
}
&.reserved::before {
@include icon-xsmall-geschlossen;
- color: var(--theme-color-error);
+ color: var(--feedback-error);
}
}
}
diff --git a/gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss b/gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss
index f6c1ffb..33aa687 100644
--- a/gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss
+++ b/gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss
@@ -13,8 +13,8 @@ input[type="checkbox"], input[type="radio"] {
vertical-align: top;
appearance: none;
-webkit-appearance: none;
- background-color: var(--theme-color-white);
- border: 1px solid var(--theme-color-primary);
+ background-color: var(--swatches-neutrals-white);
+ border: 1px solid var(--swatches-primary-500);
width: var(--input-size);
height: var(--input-size);
border-radius: var(--border-radius-xs);
@@ -27,12 +27,12 @@ input[type="checkbox"], input[type="radio"] {
&:checked {
background-image: url("../../assets/img/check.svg");
- background-color: var(--theme-color-primary);
+ background-color: var(--swatches-primary-500);
}
&.half-checked {
background-image: url("../../assets/img/half-check.svg");
- background-color: var(--theme-color-secondary);
+ background-color: var(--swatches-secondary-500);
}
~ label {
diff --git a/gfi-ihk-2024/stories/atoms/input-select/input-select.scss b/gfi-ihk-2024/stories/atoms/input-select/input-select.scss
index 4da9edb..457fbe3 100644
--- a/gfi-ihk-2024/stories/atoms/input-select/input-select.scss
+++ b/gfi-ihk-2024/stories/atoms/input-select/input-select.scss
@@ -1,12 +1,13 @@
@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';
+@import '../../_global/styles/svg-vars';
select, select.form-control {
@include form-field;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
- background-image: url('../../assets/img/dropdown-arrow.svg');
+ //background-image: url("data:image/svg+xml,%3Csvg width='43' height='30' viewBox='0 0 43 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5001 22L6.27283 10.75L22.7273 10.75L14.5001 22Z' fill='#{encode-color($swatch-primary-500)}'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 36px;
diff --git a/gfi-ihk-2024/stories/atoms/input-text/input-text.scss b/gfi-ihk-2024/stories/atoms/input-text/input-text.scss
index 51b39ac..c9833a0 100644
--- a/gfi-ihk-2024/stories/atoms/input-text/input-text.scss
+++ b/gfi-ihk-2024/stories/atoms/input-text/input-text.scss
@@ -5,24 +5,28 @@ input[type="text"], input[type="email"], input[type="password"], input[type="num
@include form-field;
&::-webkit-input-placeholder {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
+
&:-ms-input-placeholder {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
+
&::placeholder {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
&:focus {
&::-webkit-input-placeholder {
- color: var(--theme-color-secondary-dimmed);
+ color: var(--swatches-secondary-200);
}
+
&:-ms-input-placeholder {
- color: var(--theme-color-secondary-dimmed);
+ color: var(--swatches-secondary-200);
}
+
&::placeholder {
- color: var(--theme-color-secondary-dimmed);
+ color: var(--swatches-secondary-200);
}
}
}
diff --git a/gfi-ihk-2024/stories/atoms/interview-item/InterviewItemComponent.js b/gfi-ihk-2024/stories/atoms/interview-item/InterviewItemComponent.js
index 7af1b02..9300ac6 100644
--- a/gfi-ihk-2024/stories/atoms/interview-item/InterviewItemComponent.js
+++ b/gfi-ihk-2024/stories/atoms/interview-item/InterviewItemComponent.js
@@ -8,7 +8,7 @@ export const createInterviewItem =
text = '',
}) => {
- const div = createElement('div', ['interview-item', partnerClass]);
+ const div = createElement('div', ['interview-item', 'variant-base', partnerClass]);
if (headline) {
const headlineDiv = createElement('div', ['headline'], headline, div);
}
diff --git a/gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss b/gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss
index 91c8ccf..1df1e44 100644
--- a/gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss
+++ b/gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss
@@ -4,17 +4,19 @@
.interview-item {
margin: 40px 50px 20px 0;
padding: 20px;
- border: 2px solid var(--theme-color-primary);
+ border: 2px solid var(--color-text);
border-radius: 20px 20px 20px 0;
font-weight: 400;
+
.headline, strong {
padding-bottom: 10px;
font-weight: 600;
display: inline-block;
}
+
&.partner {
margin: 0 0 20px 50px;
- border-color: var(--theme-color-secondary);
+ border-color: var(--color-decoration);
border-radius: 20px 0 20px 20px;
}
}
@@ -22,6 +24,6 @@
.interview-item-partner {
@extend .interview-item;
margin: 0 0 20px 50px;
- border-color: var(--theme-color-secondary);
+ border-color: var(--color-decoration);
border-radius: 20px 0 20px 20px;
}
diff --git a/gfi-ihk-2024/stories/atoms/label/label.scss b/gfi-ihk-2024/stories/atoms/label/label.scss
index 033283c..7247c18 100644
--- a/gfi-ihk-2024/stories/atoms/label/label.scss
+++ b/gfi-ihk-2024/stories/atoms/label/label.scss
@@ -5,7 +5,7 @@ label {
margin: 0;
a:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
sup {
@@ -13,19 +13,3 @@ label {
margin-left: 0.1em;
}
}
-
-//input[type='radio'], input[type='checkbox'] {
-// ~ label {
-// font-size: var(--font-size-copy);
-// line-height: 1.4;
-// display: inline-block;
-// vertical-align: top;
-// max-width: calc(100% - 40px);
-// margin-top: calc(10px - 0.6em);
-// margin-bottom: 1em;
-//
-// @media(max-width: 999px) {
-// margin-top: calc(10px - 0.65em);
-// }
-// }
-//}
diff --git a/gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss b/gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss
index 18bdfed..ddc0c37 100644
--- a/gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss
+++ b/gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss
@@ -5,7 +5,7 @@ label {
margin: 0;
a:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
span {
diff --git a/gfi-ihk-2024/stories/atoms/pagination/PaginationComponent.js b/gfi-ihk-2024/stories/atoms/pagination/PaginationComponent.js
index 189e4e7..052db9f 100644
--- a/gfi-ihk-2024/stories/atoms/pagination/PaginationComponent.js
+++ b/gfi-ihk-2024/stories/atoms/pagination/PaginationComponent.js
@@ -6,7 +6,7 @@ export const createPagination = ({
length = 5,
current = 1,
}) => {
- const pagination = createElement('div', ['pagination']);
+ const pagination = createElement('div', ['pagination', 'variant-base']);
const ul = createElement('ul', [], null, pagination);
for (let i = 0; i < length; i++) {
const li = createElement('li', [], null, ul);
diff --git a/gfi-ihk-2024/stories/atoms/pagination/pagination.scss b/gfi-ihk-2024/stories/atoms/pagination/pagination.scss
index f4978bd..5ef451f 100644
--- a/gfi-ihk-2024/stories/atoms/pagination/pagination.scss
+++ b/gfi-ihk-2024/stories/atoms/pagination/pagination.scss
@@ -23,8 +23,8 @@
padding-right: 5px;
&.current {
- --button-bg-color: var(--theme-color-primary-dimmed-04);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--color-button-tertiary-background);
+ --button-text-color: var(--color-button-tertiary-text);
&::after {
display: none;
diff --git a/gfi-ihk-2024/stories/atoms/progress-bar/ProgressBarComponent.js b/gfi-ihk-2024/stories/atoms/progress-bar/ProgressBarComponent.js
index 6f0888c..8d22eef 100644
--- a/gfi-ihk-2024/stories/atoms/progress-bar/ProgressBarComponent.js
+++ b/gfi-ihk-2024/stories/atoms/progress-bar/ProgressBarComponent.js
@@ -4,7 +4,7 @@ import {createElement} from "../../_global/scripts/helpers";
export const createProgressBar = ({
progress = 50,
}) => {
- const div = createElement('div', ['progress']);
+ const div = createElement('div', ['progress', 'variant-base']);
const span = createElement('span', ['bar'], null, div);
span.style.width = progress.toString() + '%';
diff --git a/gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss b/gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss
index fd95451..355deb4 100644
--- a/gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss
+++ b/gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss
@@ -2,8 +2,8 @@
@import '../../_global/styles/vars';
.progress {
- --color-fg: var(--theme-color-primary);
- --color-bg: var(--theme-color-primary-dimmed-02);
+ --color-fg: var(--color-text);
+ --color-bg: var(--color-surface-inset);
--bg-opacity: 1;
position: relative;
diff --git a/gfi-ihk-2024/stories/atoms/reading-time/ReadingTimeComponent.js b/gfi-ihk-2024/stories/atoms/reading-time/ReadingTimeComponent.js
index c8682a2..f0be813 100644
--- a/gfi-ihk-2024/stories/atoms/reading-time/ReadingTimeComponent.js
+++ b/gfi-ihk-2024/stories/atoms/reading-time/ReadingTimeComponent.js
@@ -5,7 +5,7 @@ export const createReadingTime =
({
minutes = 6,
}) => {
- const rt = createElement('span', ['reading-time']);
+ const rt = createElement('span', ['reading-time', 'variant-base']);
createElement('span', ['value'], minutes.toString() + ' Min', rt);
createElement('span', ['label'], 'Lesezeit', rt);
diff --git a/gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss b/gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss
index c05d0fe..fafb2d8 100644
--- a/gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss
+++ b/gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss
@@ -2,14 +2,12 @@
@import '../../_global/styles/vars';
.reading-time {
- --color: var(--theme-color-primary);
display: block;
font-size: 0;
font-weight: 700;
font-family: "Korb", sans-serif;
text-transform: uppercase;
- //margin: 8px;
- color: var(--color);
+ color: var(--color-text);
transition: color 0.3s ease;
z-index: 2;
width: 100%;
@@ -22,15 +20,15 @@
}
.value {
- background-color: var(--color);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
padding: 0 6px;
transition: background-color 0.3s ease;
}
}
a:hover .reading-time {
- --color: var(--theme-color-link-hover);
+ color: var(--color-decoration);
}
.teaser .reading-time:last-child {
diff --git a/gfi-ihk-2024/stories/atoms/search-button/search-button.scss b/gfi-ihk-2024/stories/atoms/search-button/search-button.scss
index 432ef30..88d50f9 100644
--- a/gfi-ihk-2024/stories/atoms/search-button/search-button.scss
+++ b/gfi-ihk-2024/stories/atoms/search-button/search-button.scss
@@ -12,16 +12,16 @@ button.search-submit {
height: 80px;
border-radius: 32px;
border: 0;
- background-color: var(--theme-color-secondary);
- color: var(--theme-color-primary);
+ background-color: var(--color-button-secondary-background);
+ color: var(--color-button-secondary-text);
padding: 0 2px 0 0;
cursor: pointer;
transition: 0.25s ease;
@include focus-visible;
&:hover {
- background-color: var(--theme-color-secondary-intensed);
- color: var(--theme-color-background);
+ background-color: var(--color-button-tertiary-background);
+ color: var(--color-button-tertiary-text);
}
&:before {
@@ -35,11 +35,12 @@ button.search-submit {
}
&.secondary {
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
+
&:hover {
- background-color: var(--theme-color-primary-dimmed-04);
- color: var(--theme-color-primary);
+ background-color: var(--color-button-tertiary-background);
+ color: var(--color-button-tertiary-text);
}
}
@@ -55,7 +56,6 @@ button.search-submit {
}
#searchcategoryaddition a {
- //@extend .btn-small;
margin-bottom: 8px;
margin-right: 10px;
}
diff --git a/gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js b/gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js
index f975e05..91a75f7 100644
--- a/gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js
+++ b/gfi-ihk-2024/stories/atoms/search-input/SearchInputComponent.js
@@ -9,7 +9,7 @@ export const createSearchInput = ({
autocomplete = false,
id = 'search-term',
}) => {
- const input = createElement('input', typeahead ? ['search-field', 'typeahead'] : ['search-field']);
+ const input = createElement('input', typeahead ? ['search-field', 'typeahead', 'variant-base'] : ['search-field']);
input.id = id;
input.type = 'search';
if (!autocomplete) {
diff --git a/gfi-ihk-2024/stories/atoms/search-input/search-input.scss b/gfi-ihk-2024/stories/atoms/search-input/search-input.scss
index cfdf7c2..81b15b6 100644
--- a/gfi-ihk-2024/stories/atoms/search-input/search-input.scss
+++ b/gfi-ihk-2024/stories/atoms/search-input/search-input.scss
@@ -4,16 +4,16 @@
input.search-field {
position: relative;
display: block;
- border-radius:var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
+ border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
width: calc(100% - 1px);
height: 80px;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
padding: 24px 90px 24px 24px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
line-height: 32px;
- color: var(--theme-color-primary);
- border: 2px solid var(--theme-color-secondary-intensed);
+ color: var(--color-text);
+ border: 2px solid var(--color-text-accent);
transition: 0.25s ease;
@include focus-visible;
@@ -27,27 +27,30 @@ input.search-field {
}
&:focus, &:active, &.focus-visible, &.focus-visible:focus {
- box-shadow: 0 0 10px var(--theme-color-secondary-intensed), 0 0 4px var(--theme-color-secondary-intensed);
+ box-shadow: 0 0 10px var(--color-text-accent), 0 0 4px var(--color-text-accent);
}
&::-webkit-input-placeholder {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
+
&::-moz-placeholder {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
+
&:-ms-input-placeholder {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
+
&:-moz-placeholder {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
- &:-webkit-autofill:active {
- -webkit-box-shadow: 0 0 0 50px white inset !important;
+ &:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 50px var(--swatches-neutrals-white) inset !important;
}
&::-webkit-search-decoration,
diff --git a/gfi-ihk-2024/stories/atoms/secondary-menu/SecondaryMenuComponent.js b/gfi-ihk-2024/stories/atoms/secondary-menu/SecondaryMenuComponent.js
index 6f45085..9c38729 100644
--- a/gfi-ihk-2024/stories/atoms/secondary-menu/SecondaryMenuComponent.js
+++ b/gfi-ihk-2024/stories/atoms/secondary-menu/SecondaryMenuComponent.js
@@ -21,7 +21,7 @@ export const createSecondaryMenu = ({
}) => {
const wrap = createElement('div', ['secondary-menu-wrapper']);
- const secondary = createElement('div', ['secondary-menu'], null, wrap);
+ const secondary = createElement('div', ['secondary-menu', 'variant-subtle-primary'], null, wrap);
const secondaryUl = createElement('ul', [], null, secondary);
secondaryLinks.map((link) => {
const li = createElement('li', [], null, secondaryUl);
@@ -29,7 +29,7 @@ export const createSecondaryMenu = ({
a.href = '#';
})
- const meta = createElement('div', ['meta-menu'], null, wrap);
+ const meta = createElement('div', ['meta-menu', 'variant-base'], null, wrap);
const metaUl = createElement('ul', [], null, meta);
const contactLi = createElement('li', ['contact'], null, metaUl);
diff --git a/gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss b/gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss
index 0cbe032..4e620ee 100644
--- a/gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss
+++ b/gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss
@@ -4,7 +4,7 @@
.secondary-menu {
position: relative;
z-index: 1;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
text-align: left;
ul {
@@ -131,12 +131,6 @@
margin: 10px 0;
padding: 5px 8px;
text-decoration: none;
- /*
- text-decoration: underline;
- text-decoration-color: transparent;
- text-decoration-thickness: 2px;
- text-underline-offset: 2px;
- */
transition: 0.3s ease;
text-align: center;
border: 0;
@@ -149,7 +143,7 @@
}
&:hover {
- text-decoration-color: var(--theme-color-primary);
+ text-decoration-color: var(--color-text);
}
}
}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss b/gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss
index d694822..4c242b1 100644
--- a/gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss
+++ b/gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss
@@ -37,7 +37,7 @@
display: block;
width: var(--social-icon-size);
height: var(--social-icon-size);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
text-decoration: none;
text-align: center;
font-size: 0;
@@ -53,7 +53,7 @@
line-height: calc(var(--social-icon-size) + 2px);
font-family: "Icons", sans-serif;
margin: -1px;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
}
&.facebook::before {
diff --git a/gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js b/gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js
index e675700..88a52f8 100644
--- a/gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js
+++ b/gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js
@@ -20,7 +20,7 @@ export const createTabs = ({
}
]
}) => {
- const tabs = createElement('div', ['tabs']);
+ const tabs = createElement('div', ['tabs', 'variant-base']);
data.map((item, i) => {
const button = createButton({
size: size,
diff --git a/gfi-ihk-2024/stories/atoms/tabs/tabs.scss b/gfi-ihk-2024/stories/atoms/tabs/tabs.scss
index f59da74..d7d322f 100644
--- a/gfi-ihk-2024/stories/atoms/tabs/tabs.scss
+++ b/gfi-ihk-2024/stories/atoms/tabs/tabs.scss
@@ -13,8 +13,8 @@
}
&.active, &:hover {
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
}
strong {
diff --git a/gfi-ihk-2024/stories/components/a-z/AZComponent.js b/gfi-ihk-2024/stories/components/a-z/AZComponent.js
index 5d8aa9d..00b9bc3 100644
--- a/gfi-ihk-2024/stories/components/a-z/AZComponent.js
+++ b/gfi-ihk-2024/stories/components/a-z/AZComponent.js
@@ -8,7 +8,7 @@ export const createAZ =
({
items = alphabet,
}) => {
- const section = createElement('section', ['a-z']);
+ const section = createElement('section', ['a-z', 'variant-base']);
const list = createElement('ul', ['letters'], null, section);
items.map((item) => {
const hasUrl = item.url && item.url.length > 0;
diff --git a/gfi-ihk-2024/stories/components/a-z/a-z.scss b/gfi-ihk-2024/stories/components/a-z/a-z.scss
index 2b8f38b..3ab5d62 100644
--- a/gfi-ihk-2024/stories/components/a-z/a-z.scss
+++ b/gfi-ihk-2024/stories/components/a-z/a-z.scss
@@ -12,7 +12,7 @@ h1 + .a-z {
.a-z .letters {
position: sticky;
top: var(--header-height);
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
display: flex;
align-items: flex-end;
flex-wrap: wrap;
@@ -20,7 +20,7 @@ h1 + .a-z {
margin: 0 0 0 -2px;
padding: 10px 0 0;
z-index: 2;
- box-shadow: 0 -2px 0 0 var(--theme-color-white);
+ box-shadow: 0 -2px 0 0 var(--color-background);
@media(min-width: 1000px) {
top: 101px;
@@ -47,7 +47,7 @@ h1 + .a-z {
pointer-events: none;
.letter {
- color: var(--theme-color-primary-dimmed-02);
+ opacity: 0.3;
}
}
@@ -63,19 +63,21 @@ h1 + .a-z {
width: 1000px;
left: 100%;
bottom: 0;
- background-color: var(--theme-color-primary-dimmed-02);
+ background-color: var(--color-text);
+ opacity: 0.3;
}
&.active .letter {
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
&:hover {
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
}
&:before {
height: 100%;
- background-color: var(--theme-color-primary);
+ background-color: var(--color-text);
+ opacity: 1;
}
}
}
@@ -90,6 +92,7 @@ h1 + .a-z {
text-align: center;
transition: 0.3s ease;
z-index: 1;
+ color: var(--color-text);
background-color: transparent;
margin: 0;
padding: 0;
@@ -107,22 +110,31 @@ h1 + .a-z {
left: 0;
right: 0;
height: 2px;
- background-color: var(--theme-color-primary-dimmed-02);
+ background-color: var(--color-text);
transition: 0.3s ease;
z-index: -1;
+ opacity: 0.3;
}
&:hover {
- color: var(--theme-color-primary);
+ color: var(--color-text);
&:before {
- background-color: var(--theme-color-primary);
+ background-color: var(--color-text);
+ opacity: 1;
}
}
+
+ &.letter:not(.disabled) span:before {
+ //opacity: 0.3;
+ }
}
span.letter {
- color: var(--theme-color-primary-dimmed-01);
+ color: var(--color-text);
+ &:before {
+ opacity: 1;
+ }
}
}
diff --git a/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js b/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js
index ade76d2..1823d99 100644
--- a/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js
+++ b/gfi-ihk-2024/stories/components/accordion/AccordionComponent.js
@@ -11,7 +11,7 @@ export const createAccordion =
type = 'regular',
items = AccordionData,
}) => {
- const accordion = createElement('div', ['accordion'], null);
+ const accordion = createElement('div', ['accordion', 'variant-base'], null);
accordion.dataset.type = type;
if (title && title.length > 0) {
createElement('h2', ['title'], title, accordion);
@@ -22,7 +22,7 @@ export const createAccordion =
if (type === 'regular') {
items.map((item) => {
const li = createElement('li', [], null, ul);
- const a = createElement('a', ['accordion-toggler'], item.title, li);
+ const a = createElement('a', ['accordion-toggler','variant-subtle-primary-hover'], item.title, li);
const content = createElement('div', ['accordion-content'], item.content, li);
// a.href = '#' + item.id;
@@ -41,8 +41,8 @@ export const createAccordion =
if (type === 'event') {
items.map((item, index) => {
const li = createElement('li', [], null, ul);
- const toggler = createElement('a', ['accordion-toggler'], null, li);
- const content = createElement('div', ['accordion-content'], null, li);
+ const toggler = createElement('a', ['accordion-toggler','variant-subtle-primary-hover'], null, li);
+ const content = createElement('div', ['accordion-content','variant-subtle-primary'], null, li);
toggler.href = '#js-event-' + index;
content.id = 'js-event-' + index;
diff --git a/gfi-ihk-2024/stories/components/accordion/accordion.scss b/gfi-ihk-2024/stories/components/accordion/accordion.scss
index 8d53f07..54b024d 100644
--- a/gfi-ihk-2024/stories/components/accordion/accordion.scss
+++ b/gfi-ihk-2024/stories/components/accordion/accordion.scss
@@ -16,7 +16,7 @@
position: relative;
padding: 0;
list-style: none;
- border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+ border-bottom: 1px solid var(--color-surface-inset);
.richtext & {
padding: 0;
@@ -30,10 +30,11 @@
> li {
padding-left: var(--accordion-icon-width);
+ border-top: 1px solid var(--color-surface-inset);
}
> li.inAccordion {
- border-top: 1px solid var(--theme-color-primary-dimmed-02);
+ border-top: 1px solid var(--color-surface-inset);
margin-bottom: 0;
padding-left: var(--accordion-icon-width);
/*
@@ -44,14 +45,14 @@
left: 0;
bottom: 0;
width: 0.4em;
- background-color: var(--theme-color-secondary-dimmed);
+ background-color: var(--color-button-tertiary-background);
}
*/
/*
&.open {
.accordion-toggler {
- background-color: var(--theme-color-secondary-dimmed);
- color: var(--theme-color-secondary-intensed);
+ background-color: var(--color-button-tertiary-background);
+ color: var(--swatches-secondary-700);
}
}
@@ -65,7 +66,7 @@
display: flex;
align-items: center;
margin: 0 0 0 calc(var(--accordion-icon-width) * -1);
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
text-decoration: none;
position: relative;
@include focus-visible;
@@ -94,10 +95,6 @@
}
}
- &:hover {
- background-color: var(--theme-color-secondary-dimmed);
- }
-
&.focus-visible:focus, &:focus-visible, &.-moz-focusring {
z-index: 1;
}
@@ -124,7 +121,7 @@
background-color: inherit;
}
.accordion-content[id^=js-event] {
- background-color: var(--theme-color-secondary-dimmed);
+ //background-color: var(--color-button-tertiary-background);
}
> ul {
border-bottom: 0;
@@ -136,22 +133,22 @@
&.open {
.accordion-toggler {
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
}
+ li {
- margin-top: 0.4em;
+ // margin-top: 0.4em;
}
}
}
.accordion-toggler {
position: relative;
- box-shadow: 0 1px 0 0 var(--theme-color-primary-dimmed-02);
+ box-shadow: 0 1px 0 0 var(--color-surface-inset);
&:hover {
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
&::before {
@@ -159,8 +156,8 @@
left: 0;
top: 0;
bottom: 0;
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
margin: -1px 0;
text-align: center;
display: flex;
@@ -173,8 +170,9 @@
.accordion-content {
padding: 0;
- border-top: 1px solid var(--theme-color-primary-dimmed-02);
- border-bottom: 1px solid var(--theme-color-primary-dimmed-02);
+ border-top: 1px solid var(--color-surface-inset);
+ border-bottom: 1px solid var(--color-surface-inset);
+ background: var(--color-background);
}
.date-box {
@@ -205,7 +203,7 @@
margin: 0 10px;
+ .event-details {
- border-top: 1px solid var(--theme-color-primary-dimmed-02);
+ border-top: 1px solid var(--color-surface-inset);
}
.event-locationlink > a {
@@ -293,7 +291,7 @@
}
&.icon-freie-plaetze:before {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
&.icon-geschlossen:before {
color: var(--theme-color-error);
diff --git a/gfi-ihk-2024/stories/components/anchor-links/AnchorLinksComponent.js b/gfi-ihk-2024/stories/components/anchor-links/AnchorLinksComponent.js
index 042a8d8..d518028 100644
--- a/gfi-ihk-2024/stories/components/anchor-links/AnchorLinksComponent.js
+++ b/gfi-ihk-2024/stories/components/anchor-links/AnchorLinksComponent.js
@@ -6,13 +6,13 @@ import IHKAnchorLinks from "./anchor-links";
export const createAnchorLinks = ({
titles = ['Beratungsförderung zur Digitalisierung', 'Eine weitere Headline zwischendurch'],
}) => {
- const div = createElement('div', ['anchor-links']);
+ const div = createElement('div', ['anchor-links', 'variant-base']);
const ul = createElement('ul', ['anchors'], null, div);
createElement('li', ['anchors-title'], 'Inhalte auf dieser Seite', ul);
titles.map((title, index) => {
const li = createElement('li', [], null, ul);
- const a = createElement('a', [], title, li);
+ const a = createElement('a', ['variant-subtle-primary-hover'], title, li);
a.href = '#titleInText' + index;
a.dataset.index = index.toString();
});
diff --git a/gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss b/gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss
index d160271..4298a68 100644
--- a/gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss
+++ b/gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss
@@ -22,7 +22,7 @@
margin: -1px 0 0;
height: 55px;
overflow: hidden;
- background-color: white;
+ background-color: var(--color-background);
transition: 0.3s ease;
box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0), 0 0 0 10000px rgba(0, 0, 0, 0);
@@ -59,11 +59,11 @@
padding: 0;
margin: 0;
list-style: none;
- border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+ border-bottom: 1px solid var(--color-surface-inset);
li {
position: relative;
- border-top: 1px solid var(--theme-color-primary-dimmed-03);
+ border-top: 1px solid var(--color-surface-inset);
line-height: 1.2;
&:before {
@@ -75,7 +75,7 @@
left: 3px;
top: 50%;
margin-top: -15px;
- color: var(--theme-color-secondary-microsite);
+ color: var(--color-text-microsite-secondary);
z-index: 1;
pointer-events: none;
}
@@ -87,7 +87,7 @@
padding: 14px 15px 14px 42px;
align-items: center;
min-height: 55px;
- background-color: transparent;
+ background-color: var(--color-background);
margin: 0;
}
@@ -103,14 +103,14 @@
&:before {
content: '';
@include full-size;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--swatches-primary-100);
opacity: 0;
transition: 0.3s ease;
z-index: -1;
}
&:hover {
- color: var(--theme-color-link-hover);
+ //color: var(--theme-color-link-hover);
&:before {
opacity: 0.3;
@@ -128,19 +128,6 @@
}
}
-
-/*
-.main-col .anchors li:not(.anchors-title),.action-col .anchors li:not(.anchors-title) {
- padding: 0;
- margin: 0;
-
- &:after {
- display: none;
- }
-}
-*/
-
-
h2.has-anchor {
position: relative;
font-size: var(--font-size-h2);
diff --git a/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js b/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js
index d145b19..e702077 100644
--- a/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js
+++ b/gfi-ihk-2024/stories/components/artwork/ArtworkComponent.js
@@ -7,7 +7,7 @@ export const createArtwork =
image = 'Berlin',
}) => {
let imageId, imageWidth, imageHeight, imageSize;
- const artworkWrapper = createElement('div', ['artwork-wrapper'], null);
+ const artworkWrapper = createElement('div', ['artwork-wrapper', 'variant-base'], null);
artworkWrapper.dataset.type = type;
if (type === 'artwork-both-sides' ){
createElement('div', ['artwork-left'], '', artworkWrapper);
diff --git a/gfi-ihk-2024/stories/components/artwork/artwork.scss b/gfi-ihk-2024/stories/components/artwork/artwork.scss
index 190ffb6..3825c7b 100644
--- a/gfi-ihk-2024/stories/components/artwork/artwork.scss
+++ b/gfi-ihk-2024/stories/components/artwork/artwork.scss
@@ -60,7 +60,7 @@ section .artwork-wrapper {
&:before {
content: "";
@include full-size;
- background-color: var(--theme-color-primary);
+ background-color: var(--swatches-primary-500);
margin: -16% 0;
border-top-left-radius: 26% 50%;
border-bottom-left-radius: 26% 50%;
@@ -82,7 +82,7 @@ section .artwork-wrapper {
}
&:before {
- background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+ background: linear-gradient(323deg, rgba(75, 164, 144, 0.00) -5.42%, var(--gradient-a) 85.26%), var(--swatches-primary-500);
}
}
@@ -101,11 +101,6 @@ section .artwork-wrapper {
transform: rotate(0) !important;
}
}
- /* @media(max-width: 1199px) {
- width: 50vw;
- margin: 1% -18%;
- max-height: 90vw;
- }*/
@media(max-width: 767px) {
margin: 3% -24%;
@@ -124,14 +119,13 @@ section .artwork-wrapper {
top: 0;
transform-origin: center center;
height: 437px;
- //transform: rotate(-3.762deg);
transform: rotate(0);
overflow: hidden;
&:before {
content: "";
@include full-size;
- background-color: var(--theme-color-primary);
+ background-color: var(--swatches-primary-500);
margin: -16% 0;
border-top-right-radius: 26% 50%;
border-bottom-right-radius: 26% 50%;
@@ -154,29 +148,22 @@ section .artwork-wrapper {
}
&:before {
- background: linear-gradient(-10deg, var(--theme-color-gradient-03) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-01) 90%);
+ background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
}
}
}
[data-type="artwork-background-image"] {
- color: white;
- /*
- &:before {
- content: "";
- position: relative;
- display: block;
- height: 20px;
- }
- */
+ color: var(--color-background);
.image-box {
@include full-size;
&:after {
content: "";
@include full-size;
- background: linear-gradient(120deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+ background: linear-gradient(120deg, rgba(var(--swatches-primary-500-rgb), 1) 0%, rgba(var(--swatches-primary-500-rgb), 0.2) 100%);
+// background: linear-gradient(152deg, rgba(75, 164, 144, 0.00) -25.03%, var(--gradient-a) 96.63%), var(--swatches-primary-500);
}
img {
@@ -194,7 +181,7 @@ section .artwork-wrapper {
.foreground, .background {
&:before {
- background: var(--theme-color-background);
+ background: var(--color-background);
opacity: 0.7;
}
}
@@ -262,12 +249,3 @@ section .artwork-wrapper {
}
}
-/*
-[data-browser="ie"] section[data-type="artwork-image"] .image-box img {
- width: auto;
- max-width: none;
- left: 50%;
- height: 84%;
- transform: rotate(3deg) translate(-50%, 0);
-}
-*/
diff --git a/gfi-ihk-2024/stories/components/card/CardComponent.js b/gfi-ihk-2024/stories/components/card/CardComponent.js
index d272781..4494569 100644
--- a/gfi-ihk-2024/stories/components/card/CardComponent.js
+++ b/gfi-ihk-2024/stories/components/card/CardComponent.js
@@ -9,7 +9,7 @@ export const createCard =
headline = 'Jetzt Teil der IHK-Kampagne werden',
link = 'http://www.ihk24.de',
}) => {
- const card = createElement('div', ['card'], null);
+ const card = createElement('div', ['card', 'variant-base'], null);
const cardInner = createElement('a', ['card-inner'], null, card);
cardInner.href = link;
diff --git a/gfi-ihk-2024/stories/components/card/card.scss b/gfi-ihk-2024/stories/components/card/card.scss
index fb3a679..8602b05 100644
--- a/gfi-ihk-2024/stories/components/card/card.scss
+++ b/gfi-ihk-2024/stories/components/card/card.scss
@@ -5,7 +5,8 @@
&-inner {
display: block;
max-width: 350px;
- background: var(--theme-color-primary);
+ background: var(--color-button-primary-background);
+ background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
border-radius: 16px;
@media(max-width: 645px) {
max-width: 230px;
@@ -22,6 +23,8 @@
position: relative;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
+ clip-path: path("M 0 0 L 350 0 L 350 233 C 237.157 213.1 112.718 213.17 0 233 Z");
+ clip-path: path("M 0 0 L 350 0 L 350 215 C 237.157 195.1 112.718 195.17 0 215 Z");
@media(max-width: 645px) {
height: 153px;
}
@@ -45,24 +48,23 @@
position: relative;
height: 197px;
padding: 0 25px;
- color: var(--theme-color-white);
+ color: var(--color-button-primary-text);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
- background: var(--theme-color-gradient-01);
- background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
+ //background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
@media(max-width: 645px) {
height: 130px;
}
&:before {
- content: '';
- position: absolute;
- left: 0;
- top: -34px;
- width: 100%;
- height: 34px;
- clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
- background: var(--theme-color-gradient-01);
+ //content: '';
+ //position: absolute;
+ //left: 0;
+ //top: -34px;
+ //width: 100%;
+ //height: 34px;
+ //clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
+ //background: var(--color-button-primary-background);
}
.kicker {
diff --git a/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js
index 47ff0c5..e08aea3 100644
--- a/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js
+++ b/gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js
@@ -14,7 +14,7 @@ export const createCommonContentArticle = ({
headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
}) => {
const div = createElement('div');
- const article = createElement('article', ['col', 'magazine-article'], null, div);
+ const article = createElement('article', ['col', 'magazine-article', 'variant-base'], null, div);
if (addArticleComponents) {
createElement('p', ['kicker'], kicker, article);
diff --git a/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss b/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss
index 370d6cc..4d41134 100644
--- a/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss
+++ b/gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss
@@ -6,7 +6,7 @@
z-index: 1;
width: 880px;
max-width: 66.6667%;
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
margin: 0 auto;
padding-bottom: 0;
@@ -14,11 +14,11 @@
max-width: 83.3333%;
}
@media(max-width: 999px) {
- box-shadow: 0 0 0 10px white;
+ box-shadow: 0 0 0 10px var(--swatches-neutrals-white);
}
@media(max-width: 767px) {
max-width: 100%;
- box-shadow: 0 -4px 0 2px white;
+ box-shadow: 0 -4px 0 2px var(--swatches-neutrals-white);
}
.print-share {
diff --git a/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js b/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js
index 68f0e09..b5ae703 100644
--- a/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js
+++ b/gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js
@@ -15,14 +15,14 @@ export const createCommonContent = ({
target: '_self',
}
}) => {
- const common = createElement('div', ['common-content']);
+ const common = createElement('div', ['common-content', 'variant-subtle-primary']);
const p = createElement('p', [], text, common);
const buttons = createElement('div', ['buttons'], null, common);
buttons.appendChild(createButton({
label: noCta.label,
link: noCta.link,
- color: 'primary-light',
+ color: 'white',
size: 'small',
icon: 'schliessen',
iconPosition: 'icon-right'
diff --git a/gfi-ihk-2024/stories/components/common-content/commonContent.scss b/gfi-ihk-2024/stories/components/common-content/commonContent.scss
index b8663a7..8c507e9 100644
--- a/gfi-ihk-2024/stories/components/common-content/commonContent.scss
+++ b/gfi-ihk-2024/stories/components/common-content/commonContent.scss
@@ -4,7 +4,7 @@
.common-content {
margin-top: var(--section-margin);
padding: calc(var(--container-padding) / 2) var(--container-padding);
- background: var(--theme-color-primary-dimmed-04);
+ background: var(--color-background);
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B0C4D6' stroke-width='4' stroke-dasharray='0%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
p {
diff --git a/gfi-ihk-2024/stories/components/contact/ContactComponent.js b/gfi-ihk-2024/stories/components/contact/ContactComponent.js
index 17d4bf9..f8df7b7 100644
--- a/gfi-ihk-2024/stories/components/contact/ContactComponent.js
+++ b/gfi-ihk-2024/stories/components/contact/ContactComponent.js
@@ -11,7 +11,7 @@ export const createContact =
contactCount = 2,
addContainer = false,
}) => {
- const wrapper = createElement('div', ['contact-wrapper']);
+ const wrapper = createElement('div', ['contact-wrapper', 'variant-subtle-primary']);
if (headline && headline.length > 0) {
createElement('div', ['like-h2'], headline, wrapper);
}
diff --git a/gfi-ihk-2024/stories/components/contact/contact.scss b/gfi-ihk-2024/stories/components/contact/contact.scss
index 222c4eb..d04ecef 100644
--- a/gfi-ihk-2024/stories/components/contact/contact.scss
+++ b/gfi-ihk-2024/stories/components/contact/contact.scss
@@ -3,8 +3,8 @@
.contact-wrapper {
position: relative;
- background-color: var(--theme-color-primary-dimmed-04);
- border-bottom: var(--border-width) solid var(--theme-color-secondary);
+ background-color: var(--color-background);
+ border-bottom: var(--border-width) solid var(--color-decoration);
padding: var(--content-box-padding);
overflow: hidden;
font-size: var(--font-size-small);
@@ -17,7 +17,7 @@
h5, .like-h5, h6, .like-h6 {
margin-top: -0.3em;
font-size: var(--font-size-copy);
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
}
.contact-person {
@@ -97,8 +97,8 @@
}
li:not(.active) .btn:not(:hover) {
- background-color: var(--theme-color-primary-dimmed-03);
- color: var(--theme-color-primary);
+ background-color: var(--buttons-tertiary-background);
+ color: var(--buttons-tertiary-text);
}
}
@@ -162,7 +162,7 @@
}
&.ansprechpartner {
- background-color: var(--theme-color-primary-dimmed-03);
+ background-color: var(--swatches-primary-200);
padding: 20px;
border-bottom: none;
}
diff --git a/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js b/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js
index 8d8f448..07df822 100644
--- a/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js
+++ b/gfi-ihk-2024/stories/components/document-list/DocumentListComponent.js
@@ -5,7 +5,7 @@ import {DocumentListData} from "./DocumentListData";
export const createDocumentList = ({
docs = DocumentListData,
}) => {
- const section = createElement('section', ['document-list']);
+ const section = createElement('section', ['document-list', 'variant-base']);
docs.map((doc) => {
const a = createElement('div', ['document-list-item', doc.icon], null, section);
// a.href = doc.link;
diff --git a/gfi-ihk-2024/stories/components/document-list/document-list.scss b/gfi-ihk-2024/stories/components/document-list/document-list.scss
index 9857a07..b1092ee 100644
--- a/gfi-ihk-2024/stories/components/document-list/document-list.scss
+++ b/gfi-ihk-2024/stories/components/document-list/document-list.scss
@@ -12,7 +12,7 @@
display: block;
text-decoration: none;
font-size: var(--font-size-small);
- border: 1px solid var(--theme-color-primary-dimmed-04);
+ border: 1px solid var(--color-surface-inset);
padding: 15px;
border-radius: 4px;
@include focus-visible;
@@ -20,7 +20,7 @@
&:hover {
text-decoration: none;
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
}
+ .document-list-item {
@@ -87,7 +87,7 @@
font-family: "Korb", sans-serif;
font-weight: 700;
font-size: 32px;
- color: var(--theme-color-white);
+ color: var(--color-button-primary-text);
position: absolute;
left: 0;
right: 0;
diff --git a/gfi-ihk-2024/stories/components/election-form/ElectionFormComponent.js b/gfi-ihk-2024/stories/components/election-form/ElectionFormComponent.js
index 061335f..c68f82f 100644
--- a/gfi-ihk-2024/stories/components/election-form/ElectionFormComponent.js
+++ b/gfi-ihk-2024/stories/components/election-form/ElectionFormComponent.js
@@ -14,7 +14,7 @@ export const createElectionForm =
placeholderElectionArea = 'Wahlbezirk',
placeholderElectionCompany = 'Suche nach Name oder Firma',
}) => {
- const electionForm = createElement('div', ['election-form'], null, null, inlineStyles);
+ const electionForm = createElement('div', ['election-form', 'variant-solid'], null, null, inlineStyles);
createElement('h2', [], title, electionForm);
const form = createElement('form', ['election-form--form'], null, electionForm);
diff --git a/gfi-ihk-2024/stories/components/election-form/election-form.scss b/gfi-ihk-2024/stories/components/election-form/election-form.scss
index 237d1e1..5ffaae7 100644
--- a/gfi-ihk-2024/stories/components/election-form/election-form.scss
+++ b/gfi-ihk-2024/stories/components/election-form/election-form.scss
@@ -2,13 +2,14 @@
@import '../../_global/styles/vars';
.election-form {
- --theme-color-link: var(--theme-color-white);
- --theme-color-link-hover: var(--theme-color-white);
+ --theme-color-link: var(--color-text);
+ --theme-color-link-hover: var(--color-text);
font-size: var(--font-size-small);
- background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
+ //background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
+ background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
padding: 30px 30px 0 30px;
border-radius: var(--border-radius-xs);
- color: var(--theme-color-white);
+ color: var(--color-text);
margin-top: 40px;
margin-bottom: 20px;
@media(max-width: 567px) {
diff --git a/gfi-ihk-2024/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js b/gfi-ihk-2024/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js
index dfbee16..12f928b 100644
--- a/gfi-ihk-2024/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js
+++ b/gfi-ihk-2024/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js
@@ -9,7 +9,14 @@ export const createElectionResultListBadge =
closable = false,
colon = false,
}) => {
- const electionResultListBadge = createElement('div', ['election-result-list-badge', inverted ? 'inverted' : 'normal', closable ? 'closable' : 'regular']);
+
+ const electionResultListBadge = createElement('div', [
+ 'election-result-list-badge',
+ ...(inverted
+ ? ['variant-solid', 'variant-subtle-primary-hover', 'inverted']
+ : ['variant-subtle-primary', 'normal']),
+ closable ? 'closable' : 'regular'
+ ]);
const inner = createElement('div', ['badge-inner'], null, electionResultListBadge);
const pPre = preLabel + (colon ? ': ' : '');
const p = createElement('p', [], pPre, inner);
diff --git a/gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss b/gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss
index 249b4ef..4ed5009 100644
--- a/gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss
+++ b/gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss
@@ -4,7 +4,7 @@
.election-result-list-badge {
.badge-inner {
padding: 6px 15px;
- background: var(--theme-color-primary-dimmed-04);
+ background: var(--color-background);
border-radius: 18px;
margin-bottom: 8px;
}
@@ -12,6 +12,7 @@
font-family: "Korb", sans-serif;
font-weight: bold;
margin: 0;
+ color: var(--color-text);
span {
padding-left: 5px;
font-weight: normal;
@@ -19,16 +20,13 @@
}
&.inverted {
p {
- color: var(--theme-color-white);
transition: 0.25s ease;
}
.badge-inner {
- background: var(--theme-color-primary);
transition: 0.25s ease;
&:hover {
- background-color: var(--theme-color-primary-dimmed-04);
p {
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
}
}
@@ -45,7 +43,7 @@
left: 15px;
top: 50%;
margin-top: -9px;
- color: var(--theme-color-white);
+ color: var(--color-text);
display: block;
text-align: center;
font-size: 18px;
@@ -53,7 +51,6 @@
transition: 0.25s ease;
}
&:hover:before {
- color: var(--theme-color-primary);
}
}
}
diff --git a/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js b/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js
index ad8a817..11cc8ed 100644
--- a/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js
+++ b/gfi-ihk-2024/stories/components/election-result-list-item/ElectionResultListItemComponent.js
@@ -8,7 +8,7 @@ export const createElectionResultListItem =
job = 'Grundstücksmakler, Immobilenemakler',
city = 'Kreisfreie Musterstadt, Musterhausen',
}) => {
- const electionResultListItem = createElement('div', ['election-result-list-item']);
+ const electionResultListItem = createElement('div', ['election-result-list-item', 'variant-subtle-primary']);
const topBox = createElement('a', ['top-box'], null, electionResultListItem);
topBox.href = '#';
const imageBox = createElement('div', ['image-box'], null, topBox);
diff --git a/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss b/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss
index 573134c..1d8e680 100644
--- a/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss
+++ b/gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss
@@ -6,7 +6,7 @@
flex-direction: column;
justify-content: space-between;
border-radius: 4px;
- background: var(--theme-grey-light);
+ background: var(--color-background);
text-decoration: none;
width: 312px;
@@ -59,7 +59,7 @@
.job-box,
.city-box {
margin-bottom: 5px;
- background: var(--theme-color-primary-dimmed-04);
+ background: var(--color-surface-inset);
border-radius: 4px;
padding: 4px 0 2px 0;
@media(max-width: 567px) {
@@ -84,7 +84,7 @@
position: absolute;
left: 4px;
top: 50%;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
transform: translate(0, -50%);
}
}
diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js
index a3cde51..63e26fb 100644
--- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js
+++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js
@@ -3,11 +3,6 @@ import {EventTeaserLargeData, EventTeaserLargeImageData} from "./EventTeaserLarg
export default {
title: 'Components/Event Teaser Large',
- parameters: {
- backgrounds: {
- default: 'lightblue',
- },
- },
args: {
event: EventTeaserLargeData,
widemode: false,
diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js
index 1e95680..368917f 100644
--- a/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js
+++ b/gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLargeComponent.js
@@ -11,11 +11,11 @@ export const createEventTeaserLarge = ({
target: '_self',
},
}) => {
- const a = createElement('div', ['event-teaser-large']);
+ const a = createElement('div', ['event-teaser-large', 'variant-subtle-primary']);
if (widemode) {
a.classList.add('widemode');
}
- const blueBox = createElement('div', ['blue-box'], null, a);
+ const blueBox = createElement('div', ['blue-box', 'variant-solid'], null, a);
const imgCon = createElement('div', ['img-con'], null, blueBox);
const textBox = createElement('div', ['text-box', 'date-wrapper'], null, a);
createElement('div', ['icon-box', 'pictogram-' + event.icon.toLowerCase().split(' ').join('-')], null, blueBox);
diff --git a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss
index 9f45144..2673832 100644
--- a/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss
+++ b/gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss
@@ -2,7 +2,7 @@
@import '../../_global/styles/vars';
.event-teaser-large {
- background-color: white;
+ background-color: var(--color-background);
border-radius: 16px;
overflow: hidden;
display: flex;
@@ -17,7 +17,6 @@
align-content: baseline;
flex-flow: column;
justify-content: flex-start;
- background-color: var(--theme-grey-light);
.blue-box {
height:250px;
}
@@ -28,10 +27,10 @@
@include focus-visible;
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
.blue-box {
- background-color: var(--theme-color-secondary-intensed);
+ background-color: var(--color-text-accent);
}
}
@@ -40,10 +39,8 @@
display: flex;
//flex-direction: column;
justify-content: flex-end;
- color: var(--theme-color-white);
- margin-right: 18px;
+ color: var(--color-text);
font-family: "Korb", sans-serif;
- min-height: 80px;
font-size: 14px;
line-height: 1;
padding: 70px 15px 15px 15px;
@@ -57,7 +54,8 @@
min-height:250px;
position: relative;
&:not(.background-image){
- background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
+ //background: linear-gradient(135deg, #036 45.14%, #368484 100%), #D9D9D9;
+ background: linear-gradient(132deg, var(--gradient-b) 26.51%, var(--gradient-a) 100%);
}
.img-con{
position:absolute;
@@ -86,7 +84,7 @@
font-family: 'Pictograms', sans-serif;
font-size: 48px;
line-height: 1;
- color: var(--theme-color-white);
+ color: var(--color-text);
position:absolute;
top:15px;
left:15px;
@@ -99,13 +97,13 @@
position:relative;
}
.ev-cat{
- color: var(--theme-color-primary);
+ color: var(--color-button-tertiary-text);
font-size: 16px;
- font-family: Source Sans Pro;
+ font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.32px;
- background-color:white;
+ background-color: var(--color-button-tertiary-background);
border-radius:8px;
display:inline-block;
padding:5px 7px;
@@ -142,7 +140,7 @@
//align-self: center;
padding: 15px;
//line-height: 1.2;
- background-color: var(--theme-grey-light);
+ //background-color: var(--color-background);
width:100%;
display:flex;
justify-content:space-between;
@@ -182,7 +180,7 @@
line-height: 1.2em;
margin-right: 15px;
margin-bottom: 5px;
- color: var(--theme-color-primary);
+ color: var(--color-text);
&::before {
position: relative;
@@ -192,7 +190,7 @@
line-height: 20px;
margin-right: 5px;
vertical-align: top;
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
@media(max-width: 567px) {
@@ -224,13 +222,13 @@
&.status {
&::before {
@include icon-xsmall-offen;
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
}
&.interested-parties, &.waiting-list {
&::before {
@include icon-xsmall-liste;
- color: var(--theme-color-primary);
+ color: var(--color-text);
}
}
diff --git a/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js b/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js
index 722f2e8..367cb9a 100644
--- a/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js
+++ b/gfi-ihk-2024/stories/components/flockler/FlocklerComponent.js
@@ -6,7 +6,7 @@ export const createFlockler = ({
backgroundColor = true,
headline = 'Aktuelles aus Social Media',
}) => {
- const flockler = createElement('div', ['flockler']);
+ const flockler = createElement('div', ['flockler', 'variant-subtle-primary']);
if (backgroundColor) {
flockler.classList.add('colored')
}
diff --git a/gfi-ihk-2024/stories/components/flockler/flockler.scss b/gfi-ihk-2024/stories/components/flockler/flockler.scss
index febfc94..b27c654 100644
--- a/gfi-ihk-2024/stories/components/flockler/flockler.scss
+++ b/gfi-ihk-2024/stories/components/flockler/flockler.scss
@@ -3,7 +3,7 @@
&.colored {
padding: var(--section-padding) 0;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
h2 {
margin-top: var(--section-headline-margin);
diff --git a/gfi-ihk-2024/stories/components/footer/FooterComponent.js b/gfi-ihk-2024/stories/components/footer/FooterComponent.js
index 94c3a10..d84044e 100644
--- a/gfi-ihk-2024/stories/components/footer/FooterComponent.js
+++ b/gfi-ihk-2024/stories/components/footer/FooterComponent.js
@@ -31,7 +31,7 @@ export const createFooter = ({
legalNav = ['Impressum', 'Datenschutzerklärung', 'Pflichtinformationen nach der DSGVO'],
picto = null
}) => {
- const footer = createElement('footer', ['page-footer']);
+ const footer = createElement('footer', ['page-footer', 'variant-subtle-primary']);
if (picto !== null) {
footer.classList.add('footer-picto');
footer.style.backgroundImage = `url(${picto})`;
diff --git a/gfi-ihk-2024/stories/components/footer/footer.scss b/gfi-ihk-2024/stories/components/footer/footer.scss
index 2d39055..b865b84 100644
--- a/gfi-ihk-2024/stories/components/footer/footer.scss
+++ b/gfi-ihk-2024/stories/components/footer/footer.scss
@@ -3,8 +3,8 @@
.page-footer {
padding: var(--section-padding) 0;
- background-color: var(--theme-color-primary-dimmed-04);
- border-bottom: var(--border-width) solid var(--theme-color-primary);
+ background-color: var(--color-background);
+ border-bottom: var(--border-width) solid var(--color-border);
z-index: 10;
&.footer-picto {
padding-top: calc(var(--section-padding) + 300px);
@@ -107,7 +107,6 @@
.row.barrier-free {
text-align: right;
- color: var(--theme-color-link);
ul {
list-style: none;
@@ -118,7 +117,7 @@
content: '';
position: relative;
display: block;
- border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+ border-bottom: 1px solid var(--color-surface-inset);
margin: 1em 0.5em 0;
}
}
@@ -138,7 +137,7 @@
}
&:hover::before {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
}
@@ -231,7 +230,7 @@
content: "";
position: relative;
display: block;
- border-bottom: 1px solid var(--theme-color-primary-dimmed-03);
+ border-bottom: 1px solid var(--color-surface-inset);
margin: 26px 8px 20px;
}
}
diff --git a/gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss b/gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss
index 098de4c..fdb191e 100644
--- a/gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss
+++ b/gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss
@@ -159,8 +159,8 @@
button {
margin-left: 10px;
padding: 10px 24px;
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
border-radius: var(--border-radius-md);
border: none;
line-height: 1;
@@ -176,12 +176,12 @@
.mwf-file__dropzone {
order: 2;
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
border: 2px dashed #ccc;
display: block;
text-align: center;
label {
- color: var(--theme-color-primary);
+ color: var(--color-text);
font-size: 110%;
font-weight: 200;
line-height: 1.5em;
@@ -195,10 +195,10 @@
bottom: 1em;
transform: translate(-50%, 0);
content: "Datei auswählen";
- background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ background-color: var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
border-radius: var(--border-radius-md);
- box-shadow: 0 0 0 2px var(--theme-color-primary);
+ box-shadow: 0 0 0 2px var(--color-button-primary-background);
cursor: pointer;
display: inline-flex;
font-family: 'Korb', sans-serif;
@@ -226,7 +226,7 @@
.mwf-form__actions {
display: flex;
justify-content: space-between;
- border-top: 1px solid var(--theme-color-primary-dimmed-03);
+ border-top: 1px solid var(--color-surface-inset);
margin-bottom: 20px;
}
@@ -238,11 +238,11 @@ ul.mwf-summary__list {
li.mwf-summary__item {
display: flex;
padding: 15px;
- border-top: 1px solid var(--theme-color-primary-dimmed-03, #ccd7e6);
- border-bottom: 1px solid var(--theme-color-primary-dimmed-03, #ccd7e6);
+ border-top: 1px solid var(--color-surface-inset, #ccd7e6);
+ border-bottom: 1px solid var(--color-surface-inset, #ccd7e6);
&:nth-child(even) {
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--swatches-primary-100);
}
span.mwf-summary-item__label {
@@ -262,7 +262,7 @@ ul.mwf-summary__list {
}
#ui-datepicker-div {
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
border: var(--theme-color-link) 1px solid;
.ui-datepicker-header {
diff --git a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js
index 70e51cf..89b1d19 100644
--- a/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js
+++ b/gfi-ihk-2024/stories/components/gallery/GalleryComponent.js
@@ -11,7 +11,7 @@ export const createGallery =
data = galleryData,
}) => {
const thumbWidth = galleryType === 'single-image' || galleryType === 'first-image' ? 880 : 300;
- const section = createElement('section', ['gallery'], null, null);
+ const section = createElement('section', ['gallery','variant-subtle-primary'], null, null);
section.dataset.type = galleryType;
section.dataset.perPage = itemsPerPage.toString();
diff --git a/gfi-ihk-2024/stories/components/gallery/gallery.scss b/gfi-ihk-2024/stories/components/gallery/gallery.scss
index e319c73..112d48a 100644
--- a/gfi-ihk-2024/stories/components/gallery/gallery.scss
+++ b/gfi-ihk-2024/stories/components/gallery/gallery.scss
@@ -59,7 +59,7 @@
a {
position: relative;
display: block;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
@include focus-visible;
transition: 0.2s ease;
@@ -215,13 +215,13 @@
z-index: 1;
font-size: var(--icon-size);
line-height: 1;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
opacity: 0;
transition: 0.3s ease;
}
&::before {
- background-color: var(--theme-color-primary);
+ background-color: var(--color-text);
opacity: 0;
z-index: 1;
transition: 0.3s ease;
@@ -272,7 +272,7 @@
width: 100%;
height: calc(var(--viewport-height, 1vh) * 100);
background-color: rgba(#0F1C28, 0.95);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
z-index: 100;
@include hide;
@@ -314,7 +314,7 @@
}
.text-box {
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
font-size: 18px;
display: flex;
flex-direction: column;
@@ -347,7 +347,7 @@
margin: -25px 15px;
border: 0;
background-color: transparent;
- color: white;
+ color: var(--swatches-neutrals-white);
cursor: pointer;
&:before {
@@ -410,7 +410,7 @@
font-size: 30px;
line-height: 1;
padding: 10px 0;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
background-color: transparent;
margin: 15px;
border: 0;
diff --git a/gfi-ihk-2024/stories/components/global-message/GlobalMessageComponent.js b/gfi-ihk-2024/stories/components/global-message/GlobalMessageComponent.js
index feeeaf9..ba9df76 100644
--- a/gfi-ihk-2024/stories/components/global-message/GlobalMessageComponent.js
+++ b/gfi-ihk-2024/stories/components/global-message/GlobalMessageComponent.js
@@ -8,7 +8,7 @@ export const createGlobalMessage =
message = 'Leider kommt es durch technische Wartungsmaßnahmen am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
icon = 'icon-info',
}) => {
- const messageWrapper = createElement('section', ['global-message', type]);
+ const messageWrapper = createElement('section', ['global-message','variant-subtle-primary', type]);
messageWrapper.setAttribute('aria-label', 'Wichtige Mitteilung');
const inner = createElement('div', ['inner', icon], null, messageWrapper);
createElement('p', [], message, inner);
diff --git a/gfi-ihk-2024/stories/components/global-message/global-message.scss b/gfi-ihk-2024/stories/components/global-message/global-message.scss
index cb21458..d2a04c0 100644
--- a/gfi-ihk-2024/stories/components/global-message/global-message.scss
+++ b/gfi-ihk-2024/stories/components/global-message/global-message.scss
@@ -6,8 +6,8 @@
display: flex;
align-items: flex-end;
top: var(--header-height);
- background-color: var(--theme-color-primary-dimmed-04);
- box-shadow: 0 -1px 0 0 var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
+ box-shadow: 0 -1px 0 0 var(--color-background);
font-size: var(--font-size-small);
z-index: 99;
transition: top 0.25s $easeOutQuad, max-height 0.4s $easeOutQuad;
@@ -20,24 +20,32 @@
--font-size-small: 14px;
&.light .close {
- background-color: rgba(var(--theme-color-primary-rgb), 0.1);
+ //background-color: rgba(var(--swatches-primary-500-rgb), 0.1);
}
}
&.bold {
- --theme-color-link: var(--theme-color-white);
- --theme-color-link-hover: var(--theme-color-secondary);
- background-color: var(--theme-color-primary);
- box-shadow: 0 -1px 0 0 var(--theme-color-primary);
- color: var(--theme-color-background);
+ background-color: var(--color-button-primary-background);
+ box-shadow: 0 -1px 0 0 var(--color-button-primary-background);
+ color: var(--color-button-primary-text);
+ a {
+ color: var(--color-button-primary-text);
+ &:hover {
+ color: var(--color-decoration);
+ }
+ }
}
&.alarming {
- --theme-color-link: var(--theme-color-white);
- --theme-color-link-hover: var(--theme-color-white);
- background-color: var(--theme-color-error);
- box-shadow: 0 -1px 0 0 var(--theme-color-error);
+ background-color: var(--feedback-error);
+ box-shadow: 0 -1px 0 0 var(--feedback-error);
color: var(--theme-color-background);
+ a {
+ color: var(--swatches-neutrals-white);
+ &:hover {
+ color: var(--swatches-neutrals-white);
+ }
+ }
}
&.open {
diff --git a/gfi-ihk-2024/stories/components/header-search/HeaderSearchComponent.js b/gfi-ihk-2024/stories/components/header-search/HeaderSearchComponent.js
index fa3f339..4c9f77d 100644
--- a/gfi-ihk-2024/stories/components/header-search/HeaderSearchComponent.js
+++ b/gfi-ihk-2024/stories/components/header-search/HeaderSearchComponent.js
@@ -23,7 +23,7 @@ export const createHeaderSearch = ({
outer.appendChild(field);
outer.appendChild(button);
- const nav = createElement('div', ['form-nav'], null, form);
+ const nav = createElement('div', ['form-nav','variant-subtle-primary'], null, form);
nav.appendChild(createSecondaryMenu({}));
return form;
diff --git a/gfi-ihk-2024/stories/components/header/header.js b/gfi-ihk-2024/stories/components/header/header.js
index cfe2588..0f86cb2 100644
--- a/gfi-ihk-2024/stories/components/header/header.js
+++ b/gfi-ihk-2024/stories/components/header/header.js
@@ -62,7 +62,7 @@ class IHKHeader {
initSearch() {
const t = this;
- const formNav = $('').appendTo(t.header.find('.search form'));
+ const formNav = $('').appendTo(t.header.find('.search form'));
t.header.find('nav .secondary').clone().appendTo(formNav);
t.header.find('nav .meta').clone().appendTo(formNav);
diff --git a/gfi-ihk-2024/stories/components/header/header.scss b/gfi-ihk-2024/stories/components/header/header.scss
index da22350..6f9e2c1 100644
--- a/gfi-ihk-2024/stories/components/header/header.scss
+++ b/gfi-ihk-2024/stories/components/header/header.scss
@@ -34,7 +34,7 @@
content: "";
@include full-size;
box-shadow: 0 1px 0 rgba(#fff, 0);
- background-color: var(--theme-color-background);
+ background-color: var(--color-background);
transition: 0.25s $easeOutQuad;
}
@@ -52,7 +52,7 @@
}
&:before {;
- box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
+ box-shadow: 0 1px 0 var(--color-surface-inset);
}
nav {
@@ -69,7 +69,7 @@
--logo-size: 44px;
&:before {
- box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
+ box-shadow: 0 1px 0 var(--color-surface-inset);
}
}
@@ -82,7 +82,7 @@
top: 0;
height: 44px;
width: 100vw;
- background-color: var(--theme-color-background);
+ background-color: var(--color-background);
@include hide(0.3s);
}
@@ -133,7 +133,7 @@
left: 0;
height: calc(100% - 20px);
width: calc(100% - 16px);
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
margin: 8px 12px 8px 8px;
}
@@ -172,7 +172,7 @@
.toggle-nav {
position: relative;
display: block;
- border: 2px solid var(--theme-color-primary-dimmed-04);
+ border: 2px solid var(--color-surface-inset);
background-color: transparent;
padding: 18px 20px 18px 72px;
margin: 0 30px 0 20px;
@@ -182,7 +182,7 @@
line-height: 1.5;
font-weight: 600;
border-radius: 4px;
- color: var(--theme-color-primary);
+ color: var(--color-text);
@include focus-visible;
@media(max-width: 767px) {
@@ -203,7 +203,7 @@
width: 38px;
height: 2px;
border-radius: 2px;
- background-color: var(--theme-color-primary);
+ background-color: var(--color-text);
margin: 0 -19px;
transform: translate3d(0, -1px, 0) rotate(0deg);
transition: margin 0.2s ease 0.2s, transform 0.2s ease 0s, background-color 0.2s ease 0s, opacity 0.2s ease 0s;
@@ -247,7 +247,7 @@
line-height: 1.5;
font-weight: 600;
text-decoration: none;
- color: var(--theme-color-primary);
+ color: var(--color-text);
cursor: pointer;
border-radius: 4px;
transition: 0.25s $easeOutQuad;
@@ -352,7 +352,7 @@
.form-nav {
width: 100%;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
.secondary {
background-color: var(--theme-color-primary-dimmed-04);
@@ -371,7 +371,7 @@
font-weight: 600;
border: 0;
border-radius: 4px;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
background-color: var(--theme-color-primary);
@include focus-visible;
@include hide;
@@ -400,7 +400,7 @@
width: 38px;
height: 2px;
border-radius: 2px;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
margin: -1px -19px;
transform: translate3d(0, 0, 0) rotate(45deg);
transition: 0.3s ease;
@@ -422,7 +422,7 @@
&:after {
content: "";
@include full-size;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
}
.search form, .close-search {
@include show;
@@ -433,13 +433,13 @@
.toggle-nav {
background-color: var(--theme-color-primary);
border-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
transition: 0.2s ease 0s;
&:before, &:after, span:before {
margin-top: 0;
transition: margin 0.2s ease 0s, transform 0.2s ease 0.2s, background-color 0.2s ease 0s, opacity 0.2s ease 0.2s;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
}
}
.toggle-nav:before {
@@ -513,7 +513,7 @@
right: 0;
bottom: 105px;
background-color: var(--theme-color-primary);
- color: white;
+ color: var(--swatches-neutrals-white);
width: 90px;
height: 45px;
display: flex;
@@ -529,7 +529,7 @@
z-index: -1;
&:hover, &:active, &:focus {
- color: white;
+ color: var(--swatches-neutrals-white);
text-decoration: none;
}
@@ -574,7 +574,7 @@
}
.open-search:hover, .contact-nav a:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
}
/*
diff --git a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
index 9272694..1b7dc92 100644
--- a/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
+++ b/gfi-ihk-2024/stories/components/howto-list/HowToListComponent.js
@@ -8,7 +8,7 @@ export const createHowToList =
headline = 'Wie funktioniert’s?',
text = 'Bestimmen Sie die wirtschaftliche Ausrichtung ihrer Region mit! Wählen Sie die nächste Vollversammlung ihrer IHK. Hier erfahren Sie ganz genau, wie sie mitmachen.',
}) => {
- const div = createElement('div', ['howto-list'], null);
+ const div = createElement('div', ['howto-list','variant-base'], null);
const div2 = createElement('div', ['howto-list--left'], null, div);
createElement('h2', [], headline, div2);
createElement('p', [], text, div2);
diff --git a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
index 3c3cdaf..5c3f5ca 100644
--- a/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
+++ b/gfi-ihk-2024/stories/components/howto-list/howto-list.scss
@@ -73,7 +73,7 @@
font-size: 70px;
line-height: 1.4285;
text-align: center;
- color: var(--theme-color-primary) !important;
+ color: var(--color-text) !important;
&:after {
content: "";
position: absolute;
@@ -85,7 +85,7 @@
max-width: 100px;
max-height: 100px;
border-radius: 50%;
- background: var(--theme-color-secondary);
+ background: var(--color-decoration);
}
@media(max-width: 399px) {
position: static;
diff --git a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js
index 7f468a0..c4255e5 100644
--- a/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js
+++ b/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js
@@ -13,7 +13,7 @@ export const createIhkSwitch = ({
zip = false,
zipPlaceholder = 'z.B. 20146 Hamburg'
}) => {
- const wrap = createElement('div', ['ihk-switch']);
+ const wrap = createElement('div', ['ihk-switch','variant-solid']);
const step1 = createElement('div', ['step'], null, wrap);
if (!zip) {
@@ -49,7 +49,7 @@ export const createIhkSwitch = ({
step1.dataset.step = 'zip';
createElement('p', [], p1, step1);
- const inputWrapper = createElement('div', ['input-wrapper'], null, step1);
+ const inputWrapper = createElement('div', ['input-wrapper','variant-base'], null, step1);
inputWrapper.appendChild(createInputText({
placeholder: zipPlaceholder,
isRequired: true,
@@ -82,7 +82,7 @@ const buildButtons = () => {
const no = createButton({
elementType: 'button',
label: 'Nein',
- color: 'primary-extra-light',
+ color: 'secondary',
})
yes.classList.add('stay-here');
diff --git a/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss b/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss
index 21417f7..17b0a67 100644
--- a/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss
+++ b/gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss
@@ -17,7 +17,7 @@
height: 0;
border-style: solid;
border-width: 0 16px 16px 16px;
- border-color: transparent transparent var(--theme-color-primary) transparent;
+ border-color: transparent transparent var(--color-background) transparent;
bottom: 100%;
left: 30px;
}
@@ -53,8 +53,8 @@
.step {
position: absolute;
- background-color: var(--theme-color-primary);
- color: white;
+ background-color: var(--color-background);
+ color: var(--color-text);
padding: 50px 30px 30px;
outline: 1px solid rgba(white, 0.1);
display: none;
@@ -101,10 +101,11 @@
}
a {
- color: white;
+ color: var(--color-text);
+ cursor: pointer;
&:hover {
- color: var(--theme-color-secondary);
+ color: var(--color-text-accent);
}
}
@@ -118,6 +119,7 @@
.input-wrapper {
position: relative;
+ background-color: var(--color-background);
.btn {
position: absolute;
right: 0;
@@ -125,7 +127,7 @@
height: 100%;
padding: 0;
border-radius: 0;
- background: #193f69;
+ background: var(--color-surface-inset);
* {
display: none;
}
@@ -176,7 +178,7 @@
width: 24px;
height: 2px;
transform: translate(-50%, -50%) rotate(45deg);
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
transition: 0.2s ease;
@media(max-width: 767px) {
diff --git a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js
index 0c7ffda..e08b907 100644
--- a/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js
+++ b/gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js
@@ -15,7 +15,11 @@ export const createImageText =
linkname = 'Mehr erfahren',
copyright = 'Copyright'
}) => {
- const div = createElement('div', ['image-text', colored, switched], null);
+ const variantMap = {
+ 'colored': 'variant-subtle-primary',
+ };
+ const variant = variantMap[colored] ?? 'variant-base';
+ const div = createElement('div', ['image-text', colored, switched, variant], null);
const div2 = createElement('div', ['image-text--image'], null, div);
const div3 = createElement('div', ['image-text--text'], null, div);
createImage(image, 1280, 1280, '', [], div2);
diff --git a/gfi-ihk-2024/stories/components/image-text/image-text.scss b/gfi-ihk-2024/stories/components/image-text/image-text.scss
index 4cf5479..12c3b4b 100644
--- a/gfi-ihk-2024/stories/components/image-text/image-text.scss
+++ b/gfi-ihk-2024/stories/components/image-text/image-text.scss
@@ -33,7 +33,7 @@
&.colored {
&:before {
content: '';
- background: var(--theme-grey-light);
+ background: var(--color-background);
position: absolute;
left: 50%;
top: 0;
@@ -77,7 +77,7 @@
width: 100%;
display: block;
height: 8px;
- background-color: var(--theme-color-secondary);
+ background-color: var(--color-border);
transition: 0.3s ease;
z-index: 1;
border-bottom-right-radius: 4px;
@@ -131,7 +131,7 @@
width: 8px;
height: 8px;
border-radius: 3px;
- background-color: var(--theme-color-secondary);
+ background-color: var(--color-decoration);
top: 9px;
@media(max-width: 767px) {
diff --git a/gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js b/gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js
index 006365f..7675eee 100644
--- a/gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js
+++ b/gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js
@@ -14,7 +14,11 @@ export const createInfobox =
ul = 'List Styles werden über externe Klasse Richtext geladen',
ol = 'Lorem ipsum dolor sit',
}) => {
- const infobox = createElement('div', ['infobox', type]);
+ const variantMap = {
+ 'secondary': 'variant-subtle-primary',
+ };
+ const variant = variantMap[type] ?? 'variant-subtle-secondary';
+ const infobox = createElement('div', ['infobox', type, variant]);
const content = createElement('div', ['infobox--content'], null, infobox);
if (full === true) {
diff --git a/gfi-ihk-2024/stories/components/infobox/infobox.scss b/gfi-ihk-2024/stories/components/infobox/infobox.scss
index cbe7e80..1aac61d 100644
--- a/gfi-ihk-2024/stories/components/infobox/infobox.scss
+++ b/gfi-ihk-2024/stories/components/infobox/infobox.scss
@@ -14,7 +14,7 @@
article.col div.strong {
position: relative;
margin: calc(3% + 26px) 0;
- background-color: var(--theme-color-secondary-dimmed);
+ background-color: var(--color-background);
padding: var(--content-box-padding);
border-radius: calc(4 * (var(--border-radius-xs)));
overflow: hidden;
@@ -29,43 +29,29 @@ article.col div.strong {
display: block;
width: 100%;
height: var(--border-width);
- background: var(--theme-color-secondary);
+ background: var(--color-border);
position: absolute;
left: 0;
bottom: 0;
}
&.success {
- background-color: var(--theme-color-success-dimmed);
&:after {
- background: var(--theme-color-success);
}
}
&.error {
- background-color: var(--theme-color-error-dimmed);
+ background-color: var(--feedback-error-light);
+ color: var(--feedback-error);
&:after {
- background: var(--theme-color-error);
+ background: var(--feedback-error);
}
}
&.warning {
- background-color: var(--theme-color-warning-dimmed);
+ background-color: var(--feedback-warning-light);
&:after {
- background: var(--theme-color-warning);
- }
- }
-
- &.secondary {
- background-color: var(--theme-color-primary-dimmed-04);
- &:after {
- background: var(--theme-color-primary);
- }
- blockquote {
- border-left-color: var(--theme-color-primary);
- }
- .icon-box {
- color: var(--theme-color-primary);
+ background: var(--feedback-warning);
}
}
@@ -95,7 +81,7 @@ article.col div.strong {
font-size: 76px;
line-height: 76px;
font-family: "Pictograms", sans-serif;
- color: var(--theme-color-secondary);
+ color: var(--color-decoration);
@media (max-width: 767px) {
position: absolute;
right: 15px;
@@ -117,7 +103,7 @@ article.col div.strong {
.snippingTool {
margin: calc(3% + 26px) 50px;
- background-color: var(--theme-color-secondary-dimmed);
+ background-color: var(--color-background);
padding: var(--content-box-padding);
width: 652px;
diff --git a/gfi-ihk-2024/stories/components/link-collection/LinkCollectionComponent.js b/gfi-ihk-2024/stories/components/link-collection/LinkCollectionComponent.js
index 6f8d8da..62aecb5 100644
--- a/gfi-ihk-2024/stories/components/link-collection/LinkCollectionComponent.js
+++ b/gfi-ihk-2024/stories/components/link-collection/LinkCollectionComponent.js
@@ -12,7 +12,7 @@ export const createLinkCollection =
buttonText = 'Alle Pressemitteilungen anzeigen',
addContainer = false,
}) => {
- const wrapper = createElement('div', ['link-collection']);
+ const wrapper = createElement('div', ['link-collection','variant-subtle-secondary']);
if (headline && headline.length > 0) {
createElement('h2', [], headline, wrapper);
diff --git a/gfi-ihk-2024/stories/components/link-collection/link-collection.scss b/gfi-ihk-2024/stories/components/link-collection/link-collection.scss
index b76f7e6..506bb29 100644
--- a/gfi-ihk-2024/stories/components/link-collection/link-collection.scss
+++ b/gfi-ihk-2024/stories/components/link-collection/link-collection.scss
@@ -1,8 +1,8 @@
.link-collection, .dl-teaser, .ll-teaser, .ll-teaser-text {
margin: var(--section-margin) 0;
- background-color: var(--theme-color-secondary-dimmed);
+ background-color: var(--color-background);
padding: var(--content-box-padding);
- border-bottom: var(--border-width) solid var(--theme-color-secondary);
+ border-bottom: var(--border-width) solid var(--color-border);
@media(max-width: 567px) {
padding: calc(var(--content-box-padding) * 1.5) var(--content-box-padding);
diff --git a/gfi-ihk-2024/stories/components/linklist/LinkListComponent.js b/gfi-ihk-2024/stories/components/linklist/LinkListComponent.js
index cf5e45a..651159f 100644
--- a/gfi-ihk-2024/stories/components/linklist/LinkListComponent.js
+++ b/gfi-ihk-2024/stories/components/linklist/LinkListComponent.js
@@ -6,7 +6,7 @@ export const createLinkList =
({
links = linkListData,
}) => {
- const ul = createElement('ul', ['linklist'], null);
+ const ul = createElement('ul', ['linklist','variant-base'], null);
links.map((item) => {
const li = createElement('li', [], null, ul);
const a = createElement('a', [item.type], item.title, li);
diff --git a/gfi-ihk-2024/stories/components/linklist/linklist.scss b/gfi-ihk-2024/stories/components/linklist/linklist.scss
index caea452..a20e477 100644
--- a/gfi-ihk-2024/stories/components/linklist/linklist.scss
+++ b/gfi-ihk-2024/stories/components/linklist/linklist.scss
@@ -73,7 +73,7 @@
}
&:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
}
diff --git a/gfi-ihk-2024/stories/components/login/LoginComponent.js b/gfi-ihk-2024/stories/components/login/LoginComponent.js
index d28a830..b83e88b 100644
--- a/gfi-ihk-2024/stories/components/login/LoginComponent.js
+++ b/gfi-ihk-2024/stories/components/login/LoginComponent.js
@@ -7,7 +7,7 @@ import {createFormElement} from "../form-element/FormElementComponent";
export const createLoginForm = ({
}) => {
- const form = createElement('form', ['login-form'])
+ const form = createElement('form', ['login-form','variant-subtle-primary'])
const fieldset = createElement('fieldset', [], null, form);
const baseUrl = createElement('input', [], null, fieldset);
const errorUrl = createElement('input', [], null, fieldset);
diff --git a/gfi-ihk-2024/stories/components/login/login.scss b/gfi-ihk-2024/stories/components/login/login.scss
index 59a0e5c..0cb9848 100644
--- a/gfi-ihk-2024/stories/components/login/login.scss
+++ b/gfi-ihk-2024/stories/components/login/login.scss
@@ -5,7 +5,7 @@
position: relative;
display: block;
overflow: hidden;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
padding: var(--content-box-padding);
margin: var(--section-margin) 0;
@@ -56,12 +56,12 @@
.submit {
//@extend .btn;
//@extend .has-icon;
- color: var(--theme-color-primary);
+ color: var(--color-text);
@include focus-visible;
&:hover, &:focus {
- color: var(--theme-color-primary);
- box-shadow: 0 0 0 5px rgba(var(--theme-color-secondary), 0.5);
+ color: var(--color-text);
+ box-shadow: 0 0 0 5px rgba(var(--color-decoration), 0.5);
}
&:before {
diff --git a/gfi-ihk-2024/stories/components/magazine-article/MagazineArticleComponent.js b/gfi-ihk-2024/stories/components/magazine-article/MagazineArticleComponent.js
index 4c4b161..9772e60 100644
--- a/gfi-ihk-2024/stories/components/magazine-article/MagazineArticleComponent.js
+++ b/gfi-ihk-2024/stories/components/magazine-article/MagazineArticleComponent.js
@@ -15,7 +15,7 @@ export const createMagazineArticle = ({
kicker = 'Titelthema',
headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
}) => {
- const article = createElement('article', ['col', 'magazine-article']);
+ const article = createElement('article', ['col', 'magazine-article','variant-base']);
if (addArticleComponents) {
createElement('p', ['kicker'], kicker, article);
diff --git a/gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss b/gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss
index 5522989..9eab836 100644
--- a/gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss
+++ b/gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss
@@ -6,7 +6,7 @@
z-index: 1;
width: 880px;
max-width: 66.6667%;
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
margin: 0 auto;
padding-bottom: 0;
@@ -14,11 +14,11 @@
max-width: 83.3333%;
}
@media(max-width: 999px) {
- box-shadow: 0 0 0 10px white;
+ box-shadow: 0 0 0 10px var(--color-background);
}
@media(max-width: 767px) {
max-width: 100%;
- box-shadow: 0 -4px 0 2px white;
+ box-shadow: 0 -4px 0 2px var(--color-background);
}
.print-share {
diff --git a/gfi-ihk-2024/stories/components/magazine-header/MagazineHeaderComponent.js b/gfi-ihk-2024/stories/components/magazine-header/MagazineHeaderComponent.js
index b541be7..c4df1a0 100644
--- a/gfi-ihk-2024/stories/components/magazine-header/MagazineHeaderComponent.js
+++ b/gfi-ihk-2024/stories/components/magazine-header/MagazineHeaderComponent.js
@@ -13,7 +13,7 @@ export const createMagazineHeader =
backgroundColor = '',
inlineStyles = 'background: ' + backgroundColor + ';',
}) => {
- const header = createElement('section', ['magazine-header', size], null, null);
+ const header = createElement('section', ['magazine-header','variant-solid', size], null, null);
header.setAttribute('aria-label', 'Kopfbereich');
createElement('span', ['gradient'], null, header, inlineStyles);
if (logo && logo.length > 0 && smalltext.length > 0) {
diff --git a/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss b/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss
index cf15f53..6fb0dae 100644
--- a/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss
+++ b/gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss
@@ -12,7 +12,7 @@
line-height: 0;
text-align: center;
pointer-events: none;
- box-shadow: 0 -10px 0 0 var(--theme-color-white);
+ box-shadow: 0 -10px 0 0 var(--swatches-neutrals-white);
margin-top: 0;
@media(max-width: 767px) {
@@ -37,9 +37,9 @@
transform-origin: center 7%;
transform: translate(-50%, -50%);
display: inline-block;
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
font-size: var(--font-size-h1);
- color: white;
+ color: var(--color-text);
line-height: 1;
padding: 15px;
font-weight: 400;
diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js
index b21e7e9..bb1be24 100644
--- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js
+++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js
@@ -11,8 +11,13 @@ export const createMiniTeaser = ({
backgroundImage = null,
}) => {
+ const variantMap = {
+ 'standard': 'variant-subtle-primary',
+ 'infoteaser': 'variant-solid',
+ };
+ const variant = variantMap[type] ?? '';
if (type === 'standard') {
- const tile = createElement('div', ['tile', 'mini-teaser', type], null);
+ const tile = createElement('div', ['tile', 'mini-teaser', type, variant], null);
// tile.href = link;
const textBox = createElement('div', ['text-box'], null, tile);
createElement('div', ['category','like-h5'], category, textBox);
@@ -22,7 +27,7 @@ export const createMiniTeaser = ({
teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
return tile;
} else {
- const tile = createElement('div', ['tile', 'mini-teaser', type], null);
+ const tile = createElement('div', ['tile', 'mini-teaser', type, variant], null);
// tile.href = link;
if (backgroundImage && backgroundImage.length > 0) {
tile.style = 'background-image: url(' + backgroundImage + ');';
diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss
index 8549472..e76690c 100644
--- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss
+++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss
@@ -3,7 +3,7 @@
.mini-teaser {
position: relative;
- background-color: white;
+ background-color: var(--color-background);
overflow: hidden;
width: 100%;
//max-width: 420px;
@@ -13,7 +13,6 @@
line-height: 1.2;
text-align: left;
text-decoration: none;
- background-color: var(--theme-grey-light);
display: block;
.title{
font-size: 22px;
@@ -26,7 +25,7 @@
left: 0;
right: 0;
height: 4px;
- background-color: var(--theme-color-secondary);
+ background-color: var(--color-border);
transition: 0.2s ease;
}
&.standard:hover::before {
@@ -78,7 +77,7 @@
}
}
.title, .category, .btn{
- color:white;
+ color: var(--color-text);
}
.title{
margin-top: 0;
@@ -103,7 +102,7 @@
}
.btn{
background-color: transparent;
- border: 1px solid white;
+ border: 1px solid var(--color-button-primary-background);
margin-left: 0;
align-self: flex-end;
display: inline-block;
@@ -136,7 +135,7 @@
.icon-box {
font-family: 'Pictograms', sans-serif;
line-height: 1;
- color: white;
+ color: var(--color-text);
font-size:48px
}
.category{
diff --git a/gfi-ihk-2024/stories/components/nav/NavComponent.js b/gfi-ihk-2024/stories/components/nav/NavComponent.js
index 612831f..42f3a2d 100644
--- a/gfi-ihk-2024/stories/components/nav/NavComponent.js
+++ b/gfi-ihk-2024/stories/components/nav/NavComponent.js
@@ -22,8 +22,8 @@ export const createNav = ({
}
]
}) => {
- const nav = createElement('nav', []);
- createElement('div', ['overlay-holder'], null, nav);
+ const nav = createElement('nav', ['variant-base']);
+ createElement('div', ['overlay-holder','variant-subtle-primary'], null, nav);
const primary = createElement('div', ['primary'], 'Nav', nav);
primary.dataset.rootUrl = '12191410.json';
diff --git a/gfi-ihk-2024/stories/components/nav/nav.scss b/gfi-ihk-2024/stories/components/nav/nav.scss
index 9470910..6fafe7c 100644
--- a/gfi-ihk-2024/stories/components/nav/nav.scss
+++ b/gfi-ihk-2024/stories/components/nav/nav.scss
@@ -18,9 +18,9 @@
max-width: 100%;
transform: translate3d(1px, 0, 0);
height: calc(var(--viewport-height, 1vh) * 100 - var(--header-height));
- background-color: white;
+ background-color: var(--color-background);
transition: transform 0.25s $easeOutQuad, visibility 0s linear 0.25s;
- box-shadow: -1px 0 0 var(--theme-grey-light);
+ box-shadow: -1px 0 0 var(--color-surface-inset);
z-index: -1;
visibility: hidden;
@@ -36,8 +36,8 @@
top: -100px;
bottom: 0;
z-index: -1;
- background-color: var(--theme-color-primary-dimmed-04);
- border-right: 1px solid rgba(var(--theme-color-primary-rgb), 0.4);
+ background-color: var(--color-background);
+ border-right: 1px solid var(--color-surface-inset);
@include hide;
}
@@ -63,16 +63,16 @@
text-align: left;
overflow-y: hidden;
overflow-x: hidden;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
z-index: 0;
transition: transform 0.3s $easeOutCubic, z-index 0s linear 0.3s;
- box-shadow: 0 50vh 0 0 white;
+ box-shadow: 0 50vh 0 0 var(--swatches-neutrals-white);
pointer-events: none;
&:before {
content: "";
@include full-size;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
z-index: 2;
@include hide;
background-image: url("../../assets/img/preload.svg");
@@ -174,7 +174,7 @@
}
a {
- color: white !important;
+ color: var(--swatches-neutrals-white) !important;
background-color: transparent !important;
&:before {
@@ -185,7 +185,7 @@
&.link, &.overview, &.miscellaneous {
a {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
}
@@ -262,7 +262,7 @@
&.active {
background-color: var(--theme-grey-light);
padding-left: 12px;
- border-left: var(--border-width) solid var(--theme-color-secondary-intensed);
+ border-left: var(--border-width) solid var(--swatches-secondary-700);
}
&:before {
diff --git a/gfi-ihk-2024/stories/components/newsletter-teaser/NewsletterTeaserComponent.js b/gfi-ihk-2024/stories/components/newsletter-teaser/NewsletterTeaserComponent.js
index 2fc2196..219c7fe 100644
--- a/gfi-ihk-2024/stories/components/newsletter-teaser/NewsletterTeaserComponent.js
+++ b/gfi-ihk-2024/stories/components/newsletter-teaser/NewsletterTeaserComponent.js
@@ -23,7 +23,7 @@ export const createNewsletterTeaser =
},
]
}) => {
- const newsletterTeaser = createElement('div', ['newsletter-teaser'], null);
+ const newsletterTeaser = createElement('div', ['newsletter-teaser','variant-solid'], null);
createElement('h2', [], title, newsletterTeaser);
createElement('p', [], introduction, newsletterTeaser);
diff --git a/gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss b/gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss
index 809a466..6b355af 100644
--- a/gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss
+++ b/gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss
@@ -1,11 +1,11 @@
.newsletter-teaser {
- --theme-color-link: var(--theme-color-white);
- --theme-color-link-hover: var(--theme-color-white);
+ --theme-color-link: var(--color-text);
+ --theme-color-link-hover: var(--color-text);
font-size: var(--font-size-small);
background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
padding: var(--content-box-padding);
border-radius: var(--border-radius-xs);
- color: var(--theme-color-white);
+ color: var(--color-text);
@media(max-width: 767px) {
padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);
@@ -66,7 +66,7 @@
input[type="checkbox"] {
margin-right: 0.6em;
margin-left: 0;
- border-color: var(--theme-color-white);
+ border-color: var(--swatches-neutrals-white);
+ label {
font-size: var(--font-size-small);
diff --git a/gfi-ihk-2024/stories/components/page-details/PageDetailsComponent.js b/gfi-ihk-2024/stories/components/page-details/PageDetailsComponent.js
index d75b94d..82d5872 100644
--- a/gfi-ihk-2024/stories/components/page-details/PageDetailsComponent.js
+++ b/gfi-ihk-2024/stories/components/page-details/PageDetailsComponent.js
@@ -6,7 +6,7 @@ export const createPageDetails = ({
docNumber = 4073226,
isIntranet = false,
}) => {
- const section = createElement('section', isIntranet ? ['page-details', 'intranet'] : ['page-details']);
+ const section = createElement('section', isIntranet ? ['page-details', 'intranet','variant-base'] : ['page-details']);
const nav = createElement('nav', ['page-details-list-wrapper'], null, section);
createElement('p', ['visually-hidden'], 'Sie befinden sich hier', nav);
diff --git a/gfi-ihk-2024/stories/components/page-details/page-details.scss b/gfi-ihk-2024/stories/components/page-details/page-details.scss
index 45432e6..550f7f9 100644
--- a/gfi-ihk-2024/stories/components/page-details/page-details.scss
+++ b/gfi-ihk-2024/stories/components/page-details/page-details.scss
@@ -39,7 +39,7 @@
.intranet-short-text {
position: relative;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-surface-inset);
padding: 40px 80px 40px 40px;
overflow: hidden;
@@ -94,7 +94,7 @@
margin: 0 -2px;
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
}
}
@@ -131,7 +131,7 @@
margin-right: -14px;
margin-bottom: initial;
margin-top: initial;
- border: 1px solid var(--theme-color-primary-dimmed-03);
+ border: 1px solid var(--color-surface-inset);
border-radius: 50px;
letter-spacing: 0.015em;
diff --git a/gfi-ihk-2024/stories/components/participation-list-item/ParticipationListItemComponent.js b/gfi-ihk-2024/stories/components/participation-list-item/ParticipationListItemComponent.js
index abdecb7..e6b545b 100644
--- a/gfi-ihk-2024/stories/components/participation-list-item/ParticipationListItemComponent.js
+++ b/gfi-ihk-2024/stories/components/participation-list-item/ParticipationListItemComponent.js
@@ -18,7 +18,7 @@ export const createParticipationListItem = ({
target: '_self',
}
}) => {
- const div = createElement('div', ['participation-list-item']);
+ const div = createElement('div', ['participation-list-item','variant-subtle-primary']);
div.appendChild(createParticipationTeaser({
isListItem: true,
kicker: kicker,
diff --git a/gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss b/gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss
index 16b2c16..26692c1 100644
--- a/gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss
+++ b/gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss
@@ -21,7 +21,7 @@
position: relative;
padding: 20px 20px 12px;
border-radius: var(--border-radius-md);
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
@media(min-width: 768px) {
display: flex;
@@ -30,7 +30,8 @@
flex-direction: row;
}
- &::before {
+ &::before,
+ &::after {
display: none;
}
diff --git a/gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss b/gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss
index 6619595..41ab42f 100644
--- a/gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss
+++ b/gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss
@@ -5,7 +5,7 @@
position: relative;
display: flex;
flex-direction: column;
- background-color: white;
+ background-color: var(--color-background);
overflow: hidden;
width: 100%;
border-radius: var(--border-radius-lg);
@@ -30,20 +30,33 @@
position: absolute;
display: block;
height: 70px;
- background-color: var(--theme-color-primary);
+ background-color: var(--color-button-primary-background);
margin: 0 -24px 10px;
- background-image: url('./topic-meinung.svg');
- background-repeat: no-repeat;
- background-position: center 65%;
- background-size: 60px;
top: 0;
left: 0;
right: 0;
@media(max-width: 567px) {
- font-size: 50px;
margin-top: 0px;
}
}
+ &::after {
+ content: "";
+ position: absolute;
+ z-index: 10;
+ display: block;
+ height: 60px;
+ background-color: var(--color-button-primary-text);
+ mask-image: url('./topic-meinung.svg');
+ mask-repeat: no-repeat;
+ mask-position: center 65%;
+ mask-size: 60px;
+ top: 5px;
+ left: 0;
+ right: 0;
+ @media(max-width: 567px) {
+ font-size: 50px;
+ }
+ }
.text-box {
padding-top: 66px;
}
diff --git a/gfi-ihk-2024/stories/components/print-share/PrintShareComponent.js b/gfi-ihk-2024/stories/components/print-share/PrintShareComponent.js
index 4af8a5f..34b8052 100644
--- a/gfi-ihk-2024/stories/components/print-share/PrintShareComponent.js
+++ b/gfi-ihk-2024/stories/components/print-share/PrintShareComponent.js
@@ -10,7 +10,7 @@ export const createPrintShare =
({
listItems = printShareListItems,
}) => {
- const wrapper = createElement('div', ['print-share']);
+ const wrapper = createElement('div', ['print-share','variant-base']);
const ul = createElement('ul', ['print-share-list'], null, wrapper);
listItems.map((item, index) => {
diff --git a/gfi-ihk-2024/stories/components/print-share/print-share.scss b/gfi-ihk-2024/stories/components/print-share/print-share.scss
index 9956ded..c723b12 100644
--- a/gfi-ihk-2024/stories/components/print-share/print-share.scss
+++ b/gfi-ihk-2024/stories/components/print-share/print-share.scss
@@ -12,7 +12,7 @@
.print-share-list {
position: relative;
display: block;
- border-top: 1px solid var(--theme-color-primary-dimmed-03);
+ border-top: 1px solid var(--color-surface-inset);
list-style: none;
padding: 20px 0;
margin: 0;
@@ -56,7 +56,7 @@
}
&:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
}
diff --git a/gfi-ihk-2024/stories/components/search-form/SearchFormComponent.js b/gfi-ihk-2024/stories/components/search-form/SearchFormComponent.js
index 8071f60..4b5ca07 100644
--- a/gfi-ihk-2024/stories/components/search-form/SearchFormComponent.js
+++ b/gfi-ihk-2024/stories/components/search-form/SearchFormComponent.js
@@ -16,7 +16,7 @@ export const createSearchForm = ({
form.id = 'search-form';
form.onsubmit = 'return false';
- const wrapper = createElement('div', ['search-results-search'], null, form);
+ const wrapper = createElement('div', ['search-results-search','variant-subtle-primary'], null, form);
createElement('h2', [], isExtended ? 'Veranstaltungen' : 'Suche', wrapper);
const fieldset = createElement('fieldset', [], null, wrapper);
createElement('legend', ['visuallyhidden'], 'Suche', fieldset);
@@ -45,7 +45,7 @@ export const createSearchForm = ({
wrapperClasses: 'extend-left',
}))
- const extendedWrapper = createElement('div', ['extended-search'], null, form);
+ const extendedWrapper = createElement('div', ['extended-search','variant-subtle-primary'], null, form);
extendedWrapper.ariaHidden = true;
extendedWrapper.dataset.showExtendedSearch = 'false';
@@ -64,7 +64,7 @@ export const createSearchForm = ({
}))
extendedWrapper.appendChild(createSearchFormButton('Zielgruppe wählen'));
- const targetWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
+ const targetWrapper = createElement('div', ['ev-filter', 'ev-items','variant-subtle-secondary'], null, extendedWrapper);
const targets = SearchTargetGroups;
targets.map((target, index) => {
targetWrapper.appendChild(createFormElement({
@@ -76,7 +76,7 @@ export const createSearchForm = ({
});
extendedWrapper.appendChild(createSearchFormButton('Zeitraum wählen'));
- const timeWrapper = createElement('div', ['ev-filter'], null, extendedWrapper);
+ const timeWrapper = createElement('div', ['ev-filter','variant-subtle-secondary'], null, extendedWrapper);
const timeRow = createElement('div', ['row'], null, timeWrapper);
timeRow.appendChild(createFormElement({
wrapperClasses: 'ev-filter-wrapper data col-sm-3',
@@ -92,7 +92,7 @@ export const createSearchForm = ({
}))
extendedWrapper.appendChild(createSearchFormButton('Ort / Region wählen'));
- const placeWrapper = createElement('div', ['ev-filter'], null, extendedWrapper);
+ const placeWrapper = createElement('div', ['ev-filter','variant-subtle-secondary'], null, extendedWrapper);
const placeRow = createElement('div', ['row'], null, placeWrapper);
const radiusRow = createElement('div', ['row'], null, placeWrapper);
placeRow.appendChild(createFormElement({
@@ -122,7 +122,7 @@ export const createSearchForm = ({
}))
extendedWrapper.appendChild(createSearchFormButton('Kategorie wählen'));
- const categoryWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
+ const categoryWrapper = createElement('div', ['ev-filter', 'ev-items','variant-subtle-secondary'], null, extendedWrapper);
categoryWrapper.appendChild(createCheckboxGroup({}))
categoryWrapper.appendChild(createCheckboxGroup({
title: 'Innovation und Umwelt',
@@ -141,7 +141,7 @@ export const createSearchForm = ({
}))
extendedWrapper.appendChild(createSearchFormButton('Veranstaltungsart wählen'));
- const typeWrapper = createElement('div', ['ev-filter', 'ev-items'], null, extendedWrapper);
+ const typeWrapper = createElement('div', ['ev-filter', 'ev-items','variant-subtle-secondary'], null, extendedWrapper);
const types = SearchTargetGroups;
types.map((typ, index) => {
typeWrapper.appendChild(createFormElement({
diff --git a/gfi-ihk-2024/stories/components/search-form/search-form.js b/gfi-ihk-2024/stories/components/search-form/search-form.js
index b97685f..c500e14 100644
--- a/gfi-ihk-2024/stories/components/search-form/search-form.js
+++ b/gfi-ihk-2024/stories/components/search-form/search-form.js
@@ -170,7 +170,7 @@ class IHKExtendedSearch {
const target = $(e.currentTarget);
target.next('.ev-filter').stop().slideToggle(400, 'easeOutQuad');
window.requestAnimationFrame(() => {
- target.toggleClass('open');
+ target.toggleClass('open variant-subtle-secondary');
})
});
diff --git a/gfi-ihk-2024/stories/components/search-form/search-form.scss b/gfi-ihk-2024/stories/components/search-form/search-form.scss
index 33708f2..ec98252 100644
--- a/gfi-ihk-2024/stories/components/search-form/search-form.scss
+++ b/gfi-ihk-2024/stories/components/search-form/search-form.scss
@@ -4,8 +4,6 @@
.search-filter-form {
--search-padding: 28px;
position: relative;
- background-color: var(--theme-color-primary-dimmed-04);
- padding: 24px var(--search-padding) 0;
margin-bottom: 20px;
input[type="checkbox"] + label, input[type="radio"] + label {
@@ -54,6 +52,8 @@
}
.search-results-search {
+ background-color: var(--color-background);
+ padding: 24px var(--search-padding) 0;
@media(max-width: 567px) {
display: flex;
flex-direction: column;
@@ -68,18 +68,15 @@
.extended-search {
display: none;
- margin: 0 calc(var(--search-padding) * -1);
-
- @media(max-width: 767px) {
- margin: 0 calc(var(--container-padding) * -1);
- }
+ background-color: var(--color-background);
&:before {
content: "";
position: relative;
display: block;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
height: 30px;
+ margin: 0 calc(var(--search-padding) * -1);
@media(max-width: 767px) {
height: 10px;
@@ -117,7 +114,7 @@
.ev-search-btn {
position: relative;
display: block;
- border-top: 1px solid var(--theme-color-white);
+ border-top: 2px solid var(--swatches-neutrals-white);
padding: 13px 20px 13px 58px;
cursor: pointer;
text-decoration: underline;
@@ -156,21 +153,21 @@
}
&.open {
- background-color: var(--theme-color-primary-dimmed-03);
+ background-color: var(--color-background);
&::before {
@include icon-minus;
}
+ .ev-filter {
- background-color: var(--theme-color-primary-dimmed-03);
+ background-color: var(--color-background);
}
}
}
.ev-filter {
display: none;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
transition: background-color 0.2s ease;
padding: 0 var(--search-padding) 20px;
@@ -185,7 +182,7 @@
}
.ev-items .ev-filter-wrapper + .ev-filter-wrapper {
- border-top: 1px solid var(--theme-color-primary-dimmed-02);
+ border-top: 1px solid var(--color-surface-inset);
}
.row {
@@ -239,7 +236,7 @@
.btn-wrapper {
position: relative;
padding: 20px var(--search-padding);
- border-top: 1px solid var(--theme-color-white);
+ border-top: 2px solid var(--swatches-neutrals-white);
@media(min-width: 768px) {
display: flex;
diff --git a/gfi-ihk-2024/stories/components/search-results/SearchResultsComponent.js b/gfi-ihk-2024/stories/components/search-results/SearchResultsComponent.js
index e411596..30b424e 100644
--- a/gfi-ihk-2024/stories/components/search-results/SearchResultsComponent.js
+++ b/gfi-ihk-2024/stories/components/search-results/SearchResultsComponent.js
@@ -12,7 +12,8 @@ import {createEventTeaser} from "../../atoms/event-teaser/EventTeaserComponent";
export const createSearchResults = ({
type = 'downloads',
}) => {
- const wrapper = createElement('div', ['results-wrapper', type]);
+ const variant = type === 'no-border' ? 'variant-base' : 'variant-subtle-primary';
+ const wrapper = createElement('div', ['results-wrapper', variant, type]);
let data = null;
if (type === 'no-border') {
@@ -61,7 +62,7 @@ export const createSearchResults = ({
result.appendChild(createEventTeaser({isExtended: true}));
}
} else {
- const results = createElement('ul', ['results'], null, wrapper);
+ const results = createElement('ul', ['results','variant-base'], null, wrapper);
data.items.map((item) => {
const li = createElement('li', [], null, results);
const a = createElement('a', ['result-link'], item.title, li);
diff --git a/gfi-ihk-2024/stories/components/search-results/search-results.scss b/gfi-ihk-2024/stories/components/search-results/search-results.scss
index 13dca51..cad681e 100644
--- a/gfi-ihk-2024/stories/components/search-results/search-results.scss
+++ b/gfi-ihk-2024/stories/components/search-results/search-results.scss
@@ -30,11 +30,11 @@
&.no-border {
.result {
- border: 1px solid var(--theme-color-primary-dimmed-03);
+ border: 1px solid var(--color-surface-inset);
border-radius: var(--border-radius-xs);
padding: 12px 16px;
font-size: var(--font-size-small);
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
@media(max-width: 767px) {
padding: 10px 12px;
@@ -77,7 +77,7 @@
}
&:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
}
}
@@ -130,7 +130,7 @@
}
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--color-text-accent);
}
}
@@ -183,14 +183,14 @@
a {
display: block;
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
border-radius: var(--border-radius-xs);
padding: 10px 20px;
transition: 0.3s ease;
@include focus-visible();
&:hover {
- color: var(--theme-color-link-hover);
+ color: var(--color-text-accent);
}
@media(max-width: 767px) {
@@ -200,7 +200,7 @@
.fitResult {
display: block;
- background-color: var(--theme-color-white);
+ background-color: var(--color-background);
border-radius: var(--border-radius-xs);
padding: 10px 20px;
@@ -221,7 +221,7 @@
}
&:not(.no-border) {
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
padding: 18px 28px;
@media(max-width: 767px) {
diff --git a/gfi-ihk-2024/stories/components/steps/StepsComponent.js b/gfi-ihk-2024/stories/components/steps/StepsComponent.js
index 377a337..4ea5acc 100644
--- a/gfi-ihk-2024/stories/components/steps/StepsComponent.js
+++ b/gfi-ihk-2024/stories/components/steps/StepsComponent.js
@@ -10,7 +10,7 @@ export const createSteps =
headline = 'Schritt für Schritt zur Soforthilfe',
contents = stepsData,
}) => {
- const steps = createElement('div', ['steps']);
+ const steps = createElement('div', ['steps','variant-subtle-primary']);
if (headline && headline.length > 0) {
createElement('h3', [], headline, steps);
}
diff --git a/gfi-ihk-2024/stories/components/steps/steps.scss b/gfi-ihk-2024/stories/components/steps/steps.scss
index 9ab39a9..6b84aba 100644
--- a/gfi-ihk-2024/stories/components/steps/steps.scss
+++ b/gfi-ihk-2024/stories/components/steps/steps.scss
@@ -4,11 +4,11 @@
.richtext .steps {
.text a, .rte--list a {
&.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
- background-color: var(--theme-color-primary-dimmed-03);
+ background-color: var(--color-background);
&:after {
- outline-color: var(--theme-color-primary-dimmed-03);
- color: var(--theme-color-primary);
+ outline-color: var(--color-background);
+ color: var(--color-text);
}
}
}
@@ -19,7 +19,7 @@
display: block;
margin: var(--section-margin) 0;
padding: var(--content-box-padding) 0;
- background-color: var(--theme-color-primary-dimmed-04);
+ background-color: var(--color-background);
@media(max-width: 567px) {
padding: calc(var(--content-box-padding) * 2) 0;
@@ -38,7 +38,7 @@
content: '';
display: block;
height: 1px;
- background-color: var(--theme-color-primary-dimmed-02);
+ background-color: var(--color-surface-inset);
margin: 0 var(--content-box-padding);
}
@@ -80,7 +80,7 @@
//@extend .icon-pfeil-rechts;
&:active, &:focus, &:active:focus {
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
outline: 0;
}
}
@@ -106,8 +106,8 @@
.btn {
--button-min-size: 38px;
--button-padding: 8px 20px;
- background-color: var(--theme-color-primary-dimmed-03);
- color: var(--theme-color-primary);
+ background-color: var(--color-button-tertiary-background);
+ color: var(--color-button-tertiary-text);
margin: 0;
&::after {
@@ -117,7 +117,7 @@
li.active .btn, .btn:hover {
background-color: var(--theme-color-primary);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
}
}
diff --git a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js
index 0b21b93..cb3f790 100644
--- a/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js
+++ b/gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntryComponent.js
@@ -15,12 +15,12 @@ export const createSuperlistEntrySection = ({
let onlyForStorybook,
section;
if (showInStorybook) {
- onlyForStorybook = createElement('div', centered ? ['superlist', 'centered'] : ['superlist']);
- section = createElement('div', inverted ? ['superlist-entry', 'inverted'] : ['superlist-entry'], null, onlyForStorybook);
+ onlyForStorybook = createElement('div', centered ? ['superlist','variant-subtle-primary', 'centered'] : ['superlist','variant-subtle-primary']);
+ section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base'], null, onlyForStorybook);
} else {
- section = createElement('div', inverted ? ['superlist-entry', 'inverted'] : ['superlist-entry']);
+ section = createElement('div', inverted ? ['superlist-entry', 'inverted', 'variant-solid'] : ['superlist-entry', 'variant-base']);
}
- const graphic = createElement('div', ['graphic'], null, section);
+ const graphic = createElement('div', ['graphic','variant-solid'], null, section);
createElement('div', ['icon-box', icon], null, graphic);
const container = createElement('div', ['textbox'], null, section);
createElement('h3', [], headline, container);
diff --git a/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss b/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss
index a8e966b..0fb219e 100644
--- a/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss
+++ b/gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss
@@ -16,7 +16,7 @@
top: 0;
width: 2px;
height: 100%;
- background: var(--theme-color-primary);
+ background: var(--color-button-primary-background);
@media (min-width: 768px) {
left: 59px;
}
@@ -46,7 +46,7 @@
width: 60px;
height: 60px;
flex-shrink: 0;
- background: var(--theme-color-primary);
+ background: var(--color-background);
border-radius: 50%;
@media (min-width: 768px) {
width: 120px;
@@ -60,7 +60,7 @@
font-size: 35px;
line-height: 60px;
text-align: center;
- color: var(--theme-color-white);
+ color: var(--color-text);
@media (min-width: 768px) {
line-height: 120px;
font-size: 70px;
@@ -73,7 +73,8 @@
.textbox {
flex: 1;
padding: 15px;
- background: var(--theme-color-white);
+ background: var(--color-background);
+ color: var(--color-text);
border-radius: var(--border-radius-sm);
@media (min-width: 768px) {
padding: 30px;
@@ -95,12 +96,13 @@
}
}
&.inverted {
+ &:before {
+ background-color: var(--color-background);
+ }
.textbox {
- background: var(--theme-color-primary);
- color: var(--theme-color-white);
.btn {
- --button-bg-color: var(--theme-color-white);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--color-button-primary-background);
+ --button-text-color: var(--color-button-primary-text);
--button-hover-shadow-opacity: 0.35;
}
}
@@ -174,7 +176,7 @@
}
}
.btn {
- --button-bg-color: var(--theme-color-white);
+ --button-bg-color: var(--swatches-neutrals-white);
--button-text-color: var(--theme-color-primary);
--button-hover-shadow-opacity: 0.35;
}
@@ -183,12 +185,15 @@
justify-content: flex-start;
}
&.inverted {
+ &:before {
+ background-color: var(--color-decoration);
+ }
.textbox {
background: none;
- color: var(--theme-color-primary);
+ color: var(--color-button-primary-text);
.btn {
- --button-bg-color: var(--theme-color-white);
- --button-text-color: var(--theme-color-primary);
+ --button-bg-color: var(--swatches-neutrals-white);
+ --button-text-color: var(--color-button-primary-text);
--button-hover-shadow-opacity: 0.35;
}
}
diff --git a/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss b/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss
index 63e961c..e08ba6a 100644
--- a/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss
+++ b/gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss
@@ -8,7 +8,7 @@
margin-right: -2px;
padding: 10px;
flex: 1 1 100%;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
iframe {
display: block;
diff --git a/gfi-ihk-2024/stories/components/teaser/teaser.scss b/gfi-ihk-2024/stories/components/teaser/teaser.scss
index f108560..10d2597 100644
--- a/gfi-ihk-2024/stories/components/teaser/teaser.scss
+++ b/gfi-ihk-2024/stories/components/teaser/teaser.scss
@@ -2,7 +2,7 @@
@import '../../_global/styles/vars';
.teaser {
- --hero-background: var(--theme-color-white);
+ --hero-background: var(--swatches-neutrals-white);
position: relative;
display: flex;
flex-direction: column;
@@ -123,7 +123,7 @@
left: 0;
top: 0;
font-family: "Pictograms", sans-serif;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
font-size: 90px;
line-height: 1;
@media(min-width: 568px) {
@@ -185,7 +185,7 @@
}
.kicker + .text-box {
- margin-top: 0.1em;
+ margin-top: 0;
border-top: 8px solid var(--theme-color-secondary);
}
@@ -364,9 +364,12 @@
}
@media(max-width: 999px) {
- .kicker, .text-box, .image-box {
+ :has(> .image-box) .kicker,
+ :has(> .image-box) .text-box,
+ :has(> .image-box) .image-box {
width: calc(50% - var(--col-padding));
- @media(min-width: 568px) {
+
+ @media (min-width: 568px) {
max-width: calc(50% - var(--col-padding));
min-width: calc(50% - var(--col-padding));
}
diff --git a/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss b/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss
index a5b604a..192801d 100644
--- a/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss
+++ b/gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss
@@ -6,7 +6,7 @@
position: relative;
display: flex;
flex-direction: column;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
overflow: hidden;
width: 100%;
//max-width: 420px;
diff --git a/gfi-ihk-2024/stories/pages/article/Article.stories.js b/gfi-ihk-2024/stories/pages/article/Article.stories.js
index c865613..598cfec 100644
--- a/gfi-ihk-2024/stories/pages/article/Article.stories.js
+++ b/gfi-ihk-2024/stories/pages/article/Article.stories.js
@@ -30,7 +30,7 @@ ArticlePageMicrosite.args = {
--theme-color-primary-dimmed-04: #FCE6F2 !important;
--theme-color-secondary: #0073A2 !important;
--theme-color-secondary-microsite: #0073A2 !important;
- --theme-color-secondary-intensed: #0073A2 !important;
+ --swatches-secondary-700: #0073A2 !important;
--theme-color-secondary-dimmed: #E6F2F7 !important;
--theme-color-neutral: #636D76 !important;
--theme-color-neutral-background: #EFF3F6 !important;
diff --git a/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss b/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss
index 18fdd53..6031ed3 100644
--- a/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss
+++ b/gfi-ihk-2024/stories/sections/card-slider/card-slider.scss
@@ -158,7 +158,7 @@
right: 0;
color: var(--theme-color-primary);
border-radius: 24px;
- background: var(--theme-color-white);
+ background: var(--swatches-neutrals-white);
--button-hover-shadow-opacity: 0.4;
--button-hover-shadow-size: 6px;
@media(max-width: 768px) {
@@ -207,7 +207,7 @@
max-width: 1340px;
}
.like-h2 {
- max-width: none;
+ max-width: 1340px;
}
}
}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss
index fb135bf..1f357ed 100644
--- a/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss
+++ b/gfi-ihk-2024/stories/sections/election-detail/election-detail.scss
@@ -106,7 +106,7 @@
display: flex;
justify-content: space-between;
background: var(--theme-color-primary);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
@media (max-width: 1023px) {
display: block;
background: none;
@@ -145,7 +145,7 @@
}
.info-box--text {
cursor: pointer;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
&:hover {
color: var(--theme-color-secondary);
}
diff --git a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss
index 45c8f82..77d6455 100644
--- a/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss
+++ b/gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss
@@ -233,13 +233,13 @@
right: 0;
bottom: 0;
border-radius: var(--border-radius-lg);
- box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-04);
+ box-shadow: 0 0 0 2px var(--color-surface-inset);
opacity: 0;
transition: 0.3s ease;
}
&:hover:after{
opacity: 0.4;
- box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
+ box-shadow: 0 0 0 6px var(--color-surface-inset);
}
}
diff --git a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss
index 0c26196..7f05e69 100644
--- a/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss
+++ b/gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss
@@ -12,7 +12,7 @@
margin-top: 24px;
}
.text-box{
- background-color: white !important;
+ background-color: var(--swatches-neutrals-white) !important;
}
h2, .like-h2 {
margin-top: var(--section-headline-margin);
diff --git a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss
index 4f5d90b..9dac1b1 100644
--- a/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss
+++ b/gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss
@@ -13,7 +13,7 @@
.eventoverview-stage {
background-image: url('./hero-veranstaltung-gfx.jpg');
background-size: cover;
- color: white;
+ color: var(--swatches-neutrals-white);
min-height: calc(18vw + 400px);
display: flex;
align-items: center;
@@ -66,15 +66,15 @@
}
.stagetext-box a:not(.btn) {
- color: white;
+ color: var(--swatches-neutrals-white);
+ .btn {
margin-left: 30px;
}
}
.progress {
- --color-bg: var(--theme-color-white);
- --color-fg: var(--theme-color-white);
+ --color-bg: var(--swatches-neutrals-white);
+ --color-fg: var(--swatches-neutrals-white);
--bg-opacity: 0.4;
+ h1, + .text-2 {
diff --git a/gfi-ihk-2024/stories/sections/events/events.scss b/gfi-ihk-2024/stories/sections/events/events.scss
index 0aad221..f6973be 100644
--- a/gfi-ihk-2024/stories/sections/events/events.scss
+++ b/gfi-ihk-2024/stories/sections/events/events.scss
@@ -198,7 +198,7 @@
//@extend .icon-xsmall-offen;
&:before {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
&.interested-parties, &.waiting-list {
diff --git a/gfi-ihk-2024/stories/sections/feature/feature.scss b/gfi-ihk-2024/stories/sections/feature/feature.scss
index 4665d13..494f3da 100644
--- a/gfi-ihk-2024/stories/sections/feature/feature.scss
+++ b/gfi-ihk-2024/stories/sections/feature/feature.scss
@@ -2,9 +2,9 @@
@import '../../_global/styles/vars';
.feature {
- --theme-color-link: var(--theme-color-white);
+ --theme-color-link: var(--swatches-neutrals-white);
--theme-color-link-hover: var(--theme-color-secondary);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
background-color: var(--theme-color-primary);
padding: var(--section-padding) 0;
border-bottom: var(--border-width) solid var(--theme-color-secondary);
@@ -65,7 +65,7 @@
}
a {
- color: white;
+ color: var(--swatches-neutrals-white);
}
.col:nth-child(2) {
@@ -103,7 +103,7 @@
position: relative;
display: block;
padding-top: 100%;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
}
&:before {
diff --git a/gfi-ihk-2024/stories/sections/infobanner/infobanner.scss b/gfi-ihk-2024/stories/sections/infobanner/infobanner.scss
index 5a0331d..68d5694 100644
--- a/gfi-ihk-2024/stories/sections/infobanner/infobanner.scss
+++ b/gfi-ihk-2024/stories/sections/infobanner/infobanner.scss
@@ -7,7 +7,7 @@
.banner {
position: relative;
display: flex;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
background: linear-gradient(130deg, var(--theme-color-gradient-01) 40%,var(--theme-color-gradient-02) 80%,var(--theme-color-gradient-03) 120%);
border-radius: var(--border-radius-xs);
text-decoration: none;
diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
index 39e4aa8..8e3c62f 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
+++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
@@ -16,7 +16,7 @@ section.marketingheader {
}
.text-only .kicker {
- //color: white;
+ //color: var(--swatches-neutrals-white);
}
}
@@ -114,7 +114,7 @@ section.marketingheader {
left: auto;
cursor: pointer;
transition: 0.3s ease;
- border: 1px solid var(--theme-color-primary-dimmed-04);
+ border: 1px solid var(--color-surface-inset);
border-radius: 10px;
height: 34px;
width: 34px;
@@ -130,7 +130,7 @@ section.marketingheader {
width: 17px;
height: 1.5px;
border-radius: 2px;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
transform: translate(-50%, -50%) rotate(45deg);
transition: 0.3s ease;
}
@@ -210,7 +210,7 @@ section.marketingheader {
}
input#search-term {
- border-color: white !important;
+ border-color: var(--swatches-neutrals-white) !important;
height: 60px;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
@@ -229,12 +229,12 @@ section.marketingheader {
button.search-submit {
background-color: var(--theme-color-primary) !important;
- color: white;
+ color: var(--swatches-neutrals-white);
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
- border-color: white !important;
+ border-color: var(--swatches-neutrals-white) !important;
height: 60px;
width: 60px;
font-size: 22px;
@@ -368,7 +368,7 @@ section.marketingheader {
top: 0;
margin: 11px 10px;
z-index: 1;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
padding: 7px 6px 5px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
@@ -436,7 +436,7 @@ section.marketingheader {
}
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
&:before {
height: var(--border-width-hover);
@@ -453,7 +453,7 @@ section.marketingheader {
.outer {
background-color: var(--theme-primary-light-04);
padding: 14px 20px 18px;
- border: 4px solid white;
+ border: 4px solid var(--swatches-neutrals-white);
&::after, &::before {
display: none;
@@ -915,7 +915,7 @@ section.marketingheader {
.text-box {
height: 100%;
- color: white;
+ color: var(--swatches-neutrals-white);
width: var(--container-width);
padding: 0 var(--container-padding);
max-width: 100%;
@@ -924,18 +924,18 @@ section.marketingheader {
position: absolute;
* {
- color: white;
+ color: var(--swatches-neutrals-white);
}
}
.btn {
@media (min-width: 1000px) {
- background-color: white !important;
+ background-color: var(--swatches-neutrals-white) !important;
color: var(--theme-color-primary) !important;
}
&:hover:after {
- box-shadow: 0 0 0 var(--button-hover-shadow-size) white !important;
+ box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--swatches-neutrals-white) !important;
}
}
@@ -985,7 +985,7 @@ section.marketingheader {
.rotation .slider {
border-bottom: 0;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
h3, .like-h2 {
margin-top: 4px;
@@ -1092,7 +1092,7 @@ section.marketingheader {
.btn {
background-color: var(--theme-color-primary);
- color: white;
+ color: var(--swatches-neutrals-white);
&:hover:after {
box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
@@ -1116,7 +1116,7 @@ section.marketingheader {
top: 50%;
width: 80%;
transform: translate(-50%, -50%);
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
text-align: center;
.icon {
width: 100px;
@@ -1130,7 +1130,7 @@ section.marketingheader {
left: 0;
top: 0;
font-family: "Pictograms",sans-serif;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
font-size: 90px;
line-height: 1;
}
@@ -1147,7 +1147,7 @@ section.marketingheader {
}
.text-box {
display: block;
- //color: white;
+ //color: var(--swatches-neutrals-white);
}
}
}
@@ -1168,7 +1168,7 @@ section.marketingheader {
}
@media (max-width: 999px) {
.slider {
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
.text-box:not(:first-child)::before {
diff --git a/gfi-ihk-2024/stories/sections/participation-map/participation-map.scss b/gfi-ihk-2024/stories/sections/participation-map/participation-map.scss
index a231114..49f2d20 100644
--- a/gfi-ihk-2024/stories/sections/participation-map/participation-map.scss
+++ b/gfi-ihk-2024/stories/sections/participation-map/participation-map.scss
@@ -24,7 +24,7 @@
}
.map-text {
- fill: white;
+ fill: var(--swatches-neutrals-white);
transition: 0.3s ease;
}
diff --git a/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss b/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss
index 3dbaf49..dede347 100644
--- a/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss
+++ b/gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss
@@ -4,7 +4,7 @@
.participation-stage {
background-image: url('./beteiligung-cover.jpg');
background-size: cover;
- color: white;
+ color: var(--swatches-neutrals-white);
min-height: calc(18vw + 300px);
display: flex;
align-items: center;
@@ -46,7 +46,7 @@
}
a:not(.btn) {
- color: white;
+ color: var(--swatches-neutrals-white);
+ .btn {
margin-left: 30px;
@@ -54,8 +54,8 @@
}
.progress {
- --color-bg: var(--theme-color-white);
- --color-fg: var(--theme-color-white);
+ --color-bg: var(--swatches-neutrals-white);
+ --color-fg: var(--swatches-neutrals-white);
--bg-opacity: 0.4;
+ h1, + .text-2 {
diff --git a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss b/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss
index 862ca82..b99eac5 100644
--- a/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss
+++ b/gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss
@@ -214,7 +214,7 @@
text-align: center;
font-size: 18px;
padding-bottom: 20px;
- font-family: var(--font-korb);
+ font-family: var(--font-korb), sans-serif;
visibility: hidden;
span {
diff --git a/gfi-ihk-2024/stories/sections/search/search.scss b/gfi-ihk-2024/stories/sections/search/search.scss
index db94390..66f90ce 100644
--- a/gfi-ihk-2024/stories/sections/search/search.scss
+++ b/gfi-ihk-2024/stories/sections/search/search.scss
@@ -125,7 +125,7 @@ section.search {
top: 0;
margin: 11px 10px;
z-index: 1;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
padding: 7px 6px 5px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
@@ -190,7 +190,7 @@ section.search {
}
&:hover {
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
&:before {
height: var(--border-width-hover);
@@ -207,7 +207,7 @@ section.search {
.outer {
background-color: var(--theme-primary-light-04);
padding: 14px 20px 18px;
- border: 4px solid white;
+ border: 4px solid var(--swatches-neutrals-white);
&::after, &::before {
display: none;
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js
index 097f995..258cbe2 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.js
+++ b/gfi-ihk-2024/stories/sections/slider/slider.js
@@ -160,7 +160,9 @@ class IHKSlider {
const t = this;
const prevIndex = index === 0 ? this.slides.length - 1 : index - 1;
const nextIndex = index === this.slides.length - 1 ? 0 : index + 1;
- const allWidth = t.nextWrapper.position().left;
+ const allWidth = this.settings.infinite
+ ? this.slideWrapper.width() * this.slides.length
+ : 0;
if (!offset) {
offset = 0;
@@ -170,7 +172,7 @@ class IHKSlider {
}
t.positionAnimation = {
- x: this.slideWrapper.position().left
+ x: this.slideWrapper.position()?.left ?? 0
}
let target = (index + offset) / -100 * this.slideWrapper.width();
@@ -323,6 +325,9 @@ class IHKSlider {
scrollCheck() {
const w = $(window);
+ const offset = this.section.offset();
+
+ if (!offset) return;
if (w.scrollTop() + w.height() - 200 > this.section.offset().top && w.scrollTop() < this.section.offset().top + this.section.outerHeight() / 2) {
if (!this.inViewport) {
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss
index 3cc48b4..17ebe08 100644
--- a/gfi-ihk-2024/stories/sections/slider/slider.scss
+++ b/gfi-ihk-2024/stories/sections/slider/slider.scss
@@ -283,7 +283,7 @@
line-height: 47px;
margin: 0;
text-align: right;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
background: linear-gradient(90deg, var(--theme-color-gradient-01) 25%,var(--theme-color-gradient-02) 57%,var(--theme-color-gradient-03) 112%);
@media(max-width: 999px) {
min-height: auto;
diff --git a/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js b/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js
index 31913f0..24917f2 100644
--- a/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js
+++ b/gfi-ihk-2024/stories/sections/superlist/SuperlistComponent.js
@@ -10,7 +10,7 @@ export const createSuperlistSection = ({
paragraph = 'Fünf Schritte für eine zukunftsfähige Energiepolitik',
centered = false,
}) => {
- const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']);
+ const section = createElement('section', centered ? ['superlist','variant-subtle-primary', 'centered'] : ['superlist','variant-subtle-primary']);
const container = createElement('div', ['list-container'], null, section);
createElement('p', ['kicker'], kicker, container);
createElement('h2', [], headline, container);
diff --git a/gfi-ihk-2024/stories/sections/superlist/superlist.scss b/gfi-ihk-2024/stories/sections/superlist/superlist.scss
index d9b9ce7..1428101 100644
--- a/gfi-ihk-2024/stories/sections/superlist/superlist.scss
+++ b/gfi-ihk-2024/stories/sections/superlist/superlist.scss
@@ -4,7 +4,7 @@
.superlist {
padding-top: 20px;
padding-bottom: 20px;
- background: var(--theme-color-primary-dimmed-04);
+ background: var(--color-background);
border-radius: var(--border-radius-lg);
@media (min-width: 768px) {
padding-top: 30px;
@@ -25,7 +25,7 @@
display: flex;
flex-direction: column;
padding-top: 40px;
- border-top: 1px solid var(--theme-color-primary-dimmed-02);
+ border-top: 1px solid var(--color-surface-inset);
.btn {
margin: 0 auto;
diff --git a/gfi-ihk-2024/stories/sections/survey/survey.scss b/gfi-ihk-2024/stories/sections/survey/survey.scss
index cba9bea..fc92cda 100644
--- a/gfi-ihk-2024/stories/sections/survey/survey.scss
+++ b/gfi-ihk-2024/stories/sections/survey/survey.scss
@@ -107,8 +107,8 @@
@include focus-visible();
&:checked + label {
- background-color: var(--theme-color-secondary-intensed);
- color: var(--theme-color-white);
+ background-color: var(--swatches-secondary-700);
+ color: var(--swatches-neutrals-white);
}
&:hover + label::after {
diff --git a/gfi-ihk-2024/stories/sections/teasers/teasers.scss b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
index c8434c5..837cf95 100644
--- a/gfi-ihk-2024/stories/sections/teasers/teasers.scss
+++ b/gfi-ihk-2024/stories/sections/teasers/teasers.scss
@@ -27,7 +27,7 @@
align-self: flex-start;
font-family: "Korb", sans-serif;
background: linear-gradient(90deg, var(--theme-color-gradient-01) 20%, var(--theme-color-gradient-02) 70%, var(--theme-color-gradient-03) 100%);
- color: white;
+ color: var(--swatches-neutrals-white);
padding: 6px 12px;
//margin: 6px 0 0;
@@ -256,7 +256,7 @@
}
.title:after {
@include icon-small-stern;
- font-family: "Icons";
+ font-family: "Icons", sans-serif;
position: relative;
font-size: 20px;
top: 7px;
@@ -334,17 +334,21 @@
}
.text-box {
- margin-top: 8px;
+ margin-top: 0;
border-top: 8px solid var(--theme-color-secondary);
}
+ .image-box + .text-box {
+ margin-top: 8px;
+ }
+
.social-box {
border: 4px solid var(--theme-color-primary-dimmed-03);
margin-left: -2px;
margin-right: -2px;
padding: 10px;
flex: 1 1 100%;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
@media(max-width: 767px) {
margin-bottom: 20px;
@@ -494,7 +498,7 @@
position: absolute;
bottom: 100%;
z-index: 1;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
margin-right: 40px;
padding-top: 12px;
padding-right: 24px;
@@ -563,7 +567,7 @@
top: 0;
left: 0;
background-color: red;
- color: white;
+ color: var(--swatches-neutrals-white);
width: 30px;
height: 30px;
line-height: 30px;
diff --git a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss b/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
index adb4ace..a43e889 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
+++ b/gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss
@@ -38,11 +38,11 @@
&:nth-child(odd) {
.tile .tile-outer {
background-color: var(--theme-color-secondary-dimmed);
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
.tile-head-outer {
- background-color: var(--theme-color-secondary-intensed);
+ background-color: var(--swatches-secondary-700);
}
}
}
@@ -53,7 +53,7 @@
top: 100px;
padding: 20px 0 10px;
z-index: 1;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
@media(max-width: 767px) {
top: 75px;
@@ -69,7 +69,7 @@
.tile-head-outer {
position: relative;
display: block;
- color: white;
+ color: var(--swatches-neutrals-white);
background-color: var(--theme-color-primary);
transition: 0.2s ease;
border-top-right-radius: 30px;
@@ -106,7 +106,7 @@
content: '';
display: block;
padding-top: 60%;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
opacity: 0;
transition: 0.2s ease;
@@ -165,7 +165,7 @@
right: -8px;
top: 0;
font-family: "Pictograms", sans-serif;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
font-size: calc(var(--icon-height, 1em) + 14px);
line-height: 1;
}
diff --git a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
index adb4ace..a43e889 100644
--- a/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
+++ b/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss
@@ -38,11 +38,11 @@
&:nth-child(odd) {
.tile .tile-outer {
background-color: var(--theme-color-secondary-dimmed);
- color: var(--theme-color-secondary-intensed);
+ color: var(--swatches-secondary-700);
}
.tile-head-outer {
- background-color: var(--theme-color-secondary-intensed);
+ background-color: var(--swatches-secondary-700);
}
}
}
@@ -53,7 +53,7 @@
top: 100px;
padding: 20px 0 10px;
z-index: 1;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
@media(max-width: 767px) {
top: 75px;
@@ -69,7 +69,7 @@
.tile-head-outer {
position: relative;
display: block;
- color: white;
+ color: var(--swatches-neutrals-white);
background-color: var(--theme-color-primary);
transition: 0.2s ease;
border-top-right-radius: 30px;
@@ -106,7 +106,7 @@
content: '';
display: block;
padding-top: 60%;
- background-color: var(--theme-color-white);
+ background-color: var(--swatches-neutrals-white);
opacity: 0;
transition: 0.2s ease;
@@ -165,7 +165,7 @@
right: -8px;
top: 0;
font-family: "Pictograms", sans-serif;
- color: var(--theme-color-white);
+ color: var(--swatches-neutrals-white);
font-size: calc(var(--icon-height, 1em) + 14px);
line-height: 1;
}
diff --git a/gfi-ihk-2024/stories/sections/timeline/timeline.scss b/gfi-ihk-2024/stories/sections/timeline/timeline.scss
index 3a5730f..40f30a6 100644
--- a/gfi-ihk-2024/stories/sections/timeline/timeline.scss
+++ b/gfi-ihk-2024/stories/sections/timeline/timeline.scss
@@ -28,12 +28,12 @@
margin-right: 10px;
&:not(.active) {
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
color: var(--theme-primary);
}
&:focus{
- color: white;
+ color: var(--swatches-neutrals-white);
}
@media(max-width: 567px) {
@@ -353,7 +353,7 @@
position: relative;
display: block;
background-color: var(--theme-color-primary);
- color: white;
+ color: var(--swatches-neutrals-white);
overflow: hidden;
&::before {
@@ -463,7 +463,7 @@
top: 26px;
bottom: calc(50% - 4px);
width: 4px;
- background-color: white;
+ background-color: var(--swatches-neutrals-white);
z-index: 2;
}
diff --git a/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss b/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss
index ee7a0a4..6023f55 100644
--- a/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss
+++ b/gfi-ihk-2024/stories/sections/video-stage/video-stage.scss
@@ -3,7 +3,7 @@
.video-stage {
background: red;
- color: white;
+ color: var(--swatches-neutrals-white);
min-height: calc(18vw + 300px);
display: flex;
align-items: center;