colors

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

@@ -18,7 +18,7 @@
     position: relative;
     z-index: 1;
     max-width: 66.6667%;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 1199px) {
       max-width: 83.3333%;

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

@@ -1,9 +1,9 @@
 :root {
   --theme-color-white: #ffffff;
-  --theme-color-background: #ffffff;
+  --theme-color-background: var(--theme-color-white);
 
   --theme-color-primary: #003366;
-  --theme-color-primary-microsite: #003366;
+  --theme-color-primary-microsite: var(--theme-color-primary);
   --theme-color-primary-rgb: 0, 51, 102;
   --theme-color-primary-dimmed-01: #335C85;
   --theme-color-primary-dimmed-02: #B0C4D6;
@@ -12,7 +12,7 @@
 
 
   --theme-color-secondary: #56BD66;
-  --theme-color-secondary-microsite: #56BD66;
+  --theme-color-secondary-microsite: var(--theme-color-secondary);
   --theme-color-secondary-intensed: #247929;
   --theme-color-secondary-dimmed: #E4F1E4;
 
@@ -27,8 +27,8 @@
   --theme-color-success-dimmed: var(--theme-color-secondary-dimmed);
   --theme-color-warning: #FDC600;
   --theme-color-warning-dimmed: #FFF4CC;
-  --theme-color-error: #EA515A;
-  --theme-color-error-dimmed: #FBDCDE;
+  --theme-color-error: #D54048;
+  --theme-color-error-dimmed: #f7d9da;
   --theme-grey-light: #EFF3F6;
   --theme-24dp: 0px 0px 15px 0px rgba(0, 51, 102, 0.20), 0px 0px 46px 0px rgba(0, 51, 102, 0.12), 0px 0px 38px 0px rgba(0, 51, 102, 0.14);
 

gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss

@@ -137,7 +137,7 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -149,7 +149,7 @@
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: #EA515A;
+          color: var(--theme-color-error);
         }
       }
     }

gfi-ihk-2024/stories/components/accordion/accordion.scss

@@ -65,7 +65,7 @@
     display: flex;
     align-items: center;
     margin: 0 0 0 calc(var(--accordion-icon-width) * -1);
-    background-color: #fff;
+    background-color: var(--theme-color-white);
     text-decoration: none;
     position: relative;
     @include focus-visible;
@@ -293,10 +293,10 @@
     }
 
     &.icon-freie-plaetze:before {
-      color: #2E8533;
+      color: var(--theme-color-secondary-intensed);
     }
     &.icon-geschlossen:before {
-      color: #EA515A;
+      color: var(--theme-color-error);
     }
 
     h4, .like-h4 {

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: #fff;
+  background-color: var(--theme-color-white);
   margin: 0 auto;
   padding-bottom: 0;
 

gfi-ihk-2024/stories/components/election-form/election-form.scss

@@ -2,13 +2,13 @@
 @import '../../_global/styles/vars';
 
 .election-form {
-  --theme-color-link: #fff;
-  --theme-color-link-hover: #fff;
+  --theme-color-link: var(--theme-color-white);
+  --theme-color-link-hover: var(--theme-color-white);
   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: 30px 30px 0 30px;
   border-radius: var(--border-radius-xs);
-  color: #fff;
+  color: var(--theme-color-white);
   margin-top: 40px;
   margin-bottom: 20px;
   @media(max-width: 567px) {

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -98,7 +98,7 @@
       position:relative;
     }
     .ev-cat{
-      color: #003366;
+      color: var(--theme-color-primary);
       font-size: 16px;
       font-family: Source Sans Pro;
       font-weight: 400;
@@ -224,7 +224,7 @@
       &.status {
         &::before {
           @include icon-xsmall-offen;
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -236,7 +236,7 @@
 
         &.reserved::before {
           @include icon-xsmall-geschlossen;
-          color: #EA515A;
+          color: var(--theme-color-error);
         }
       }
     }

gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss

@@ -176,7 +176,7 @@
 
   .mwf-file__dropzone {
     order: 2;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
     border: 2px dashed #ccc;
     display: block;
     text-align: center;

gfi-ihk-2024/stories/components/gallery/gallery.scss

@@ -215,7 +215,7 @@
         z-index: 1;
         font-size: var(--icon-size);
         line-height: 1;
-        color: #fff;
+        color: var(--theme-color-white);
         opacity: 0;
         transition: 0.3s ease;
       }
@@ -272,7 +272,7 @@
   width: 100%;
   height: calc(var(--viewport-height, 1vh) * 100);
   background-color: rgba(#0F1C28, 0.95);
-  color: #fff;
+  color: var(--theme-color-white);
   z-index: 100;
   @include hide;
 
@@ -314,7 +314,7 @@
   }
 
   .text-box {
-    color: #fff;
+    color: var(--theme-color-white);
     font-size: 18px;
     display: flex;
     flex-direction: column;
@@ -410,7 +410,7 @@
     font-size: 30px;
     line-height: 1;
     padding: 10px 0;
-    color: #fff;
+    color: var(--theme-color-white);
     background-color: transparent;
     margin: 15px;
     border: 0;

gfi-ihk-2024/stories/components/global-message/global-message.scss

@@ -25,7 +25,7 @@
   }
 
   &.bold {
-    --theme-color-link: #fff;
+    --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);
@@ -33,10 +33,10 @@
   }
 
   &.alarming {
-    --theme-color-link: #fff;
-    --theme-color-link-hover: #fff;
-    background-color: #EA515A;
-    box-shadow: 0 -1px 0 0 #EA515A;
+    --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);
     color: var(--theme-color-background);
   }
 

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: #fff;
+  background-color: var(--theme-color-white);
   margin: 0 auto;
   padding-bottom: 0;
 

gfi-ihk-2024/stories/components/newsletter-teaser/newsletter-teaser.scss

@@ -1,11 +1,11 @@
 .newsletter-teaser {
-  --theme-color-link: #fff;
-  --theme-color-link-hover: #fff;
+  --theme-color-link: var(--theme-color-white);
+  --theme-color-link-hover: var(--theme-color-white);
   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: #fff;
+  color: var(--theme-color-white);
 
   @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: #fff;
+    border-color: var(--theme-color-white);
 
     + label {
       font-size: var(--font-size-small);

gfi-ihk-2024/stories/sections/events/events.scss

@@ -198,7 +198,7 @@
         //@extend .icon-xsmall-offen;
 
         &:before {
-          color: #2E8533;
+          color: var(--theme-color-secondary-intensed);
         }
 
         &.interested-parties, &.waiting-list {
@@ -213,7 +213,7 @@
           //@extend .icon-xsmall-geschlossen;
 
           &:before {
-            color: #EA515A;
+            color: var(--theme-color-error);
           }
         }
       }

gfi-ihk-2024/stories/sections/tile-grid-wood/tile-grid-wood.scss

@@ -53,7 +53,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -106,7 +106,7 @@
         content: '';
         display: block;
         padding-top: 60%;
-        background-color: #fff;
+        background-color: var(--theme-color-white);
         opacity: 0;
         transition: 0.2s ease;
 

gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss

@@ -53,7 +53,7 @@
     top: 100px;
     padding: 20px 0 10px;
     z-index: 1;
-    background-color: #fff;
+    background-color: var(--theme-color-white);
 
     @media(max-width: 767px) {
       top: 75px;
@@ -106,7 +106,7 @@
         content: '';
         display: block;
         padding-top: 60%;
-        background-color: #fff;
+        background-color: var(--theme-color-white);
         opacity: 0;
         transition: 0.2s ease;