color variable migration: components and sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss

@@ -110,8 +110,6 @@
       }
 
       &:hover {
-        //color: var(--theme-color-link-hover);
-
         &:before {
           opacity: 0.3;
         }

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

@@ -6,8 +6,8 @@
 }
 
 .election-form {
-  --theme-color-link: var(--color-text);
-  --theme-color-link-hover: var(--color-text);
+  --color-text-accent: var(--color-text);
+  --color-decoration: var(--color-text);
   padding: 30px 30px 0 30px;
   border-radius: var(--border-radius-xs);
   color: var(--color-text);

gfi-ihk-2024/stories/components/header-search/header-search.scss

@@ -14,7 +14,7 @@
   left: 0;
   right: 0;
   height: calc(var(--viewport-height, 1vh) * 100 - var(--header-height));
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--swatches-primary-100);
 
   .outer {
     position: relative;
@@ -27,17 +27,17 @@
 
   .form-nav {
     width: 100%;
-    background-color: var(--theme-color-background);
+    background-color: var(--color-background);
 
     .secondary {
-      background-color: var(--theme-color-primary-dimmed-04);
+      background-color: var(--swatches-primary-100);
     }
   }
 
   .secondary {
     position: relative;
     z-index: 1;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100);
     text-align: left;
 
     ul {
@@ -182,7 +182,7 @@
       }
 
       &:hover {
-        text-decoration-color: var(--theme-color-primary);
+        text-decoration-color: var(--swatches-primary-500);
       }
     }
   }

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

@@ -333,7 +333,7 @@
     left: 0;
     right: 0;
     height: calc(var(--viewport-height, 1vh) * 100 - 100px);
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100);
     @include hide;
 
     @media(max-width: 767px) {
@@ -355,7 +355,7 @@
     background-color: var(--swatches-neutrals-white);
 
     .secondary {
-      background-color: var(--theme-color-primary-dimmed-04);
+      background-color: var(--swatches-primary-100);
     }
   }
 
@@ -372,7 +372,7 @@
     border: 0;
     border-radius: 4px;
     color: var(--swatches-neutrals-white);
-    background-color: var(--theme-color-primary);
+    background-color: var(--swatches-primary-500);
     @include focus-visible;
     @include hide;
     z-index: 2;
@@ -431,8 +431,8 @@
 
   &.nav-open {
     .toggle-nav {
-      background-color: var(--theme-color-primary);
-      border-color: var(--theme-color-primary);
+      background-color: var(--swatches-primary-500);
+      border-color: var(--swatches-primary-500);
       color: var(--swatches-neutrals-white);
       transition: 0.2s ease 0s;
 
@@ -481,7 +481,7 @@
     height: 100px;
 
     &:before {
-      box-shadow: 0 1px 0 rgba(var(--theme-color-primary-rgb), 0.2);
+      box-shadow: 0 1px 0 var(--swatches-primary-500-o20);
     }
 
     .logo {
@@ -512,7 +512,7 @@
   position: fixed;
   right: 0;
   bottom: 105px;
-  background-color: var(--theme-color-primary);
+  background-color: var(--swatches-primary-500);
   color: var(--swatches-neutrals-white);
   width: 90px;
   height: 45px;
@@ -560,17 +560,17 @@
 
 .mobile .page-header {
   .primary a {
-    -webkit-tap-highlight-color: rgba(var(--theme-color-primary-rgb), 0.1);
+    -webkit-tap-highlight-color: rgba(var(--swatches-primary-500-rgb), 0.1);
   }
 
   li.open > a {
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100);
   }
 }
 
 .desktop .page-header {
   &:not(.nav-open) .toggle-nav:hover {
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100); 
   }
 
   .open-search:hover, .contact-nav a:hover {

gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss

@@ -14,6 +14,7 @@
   pointer-events: none;
   box-shadow: 0 -10px 0 0 var(--swatches-neutrals-white);
   margin-top: 0;
+  container-type: inline-size;
 
   @media(max-width: 767px) {
     --magazine-header-height: 70px;
@@ -26,7 +27,8 @@
 
   .gradient {
     @include full-size;
-    background: linear-gradient(90deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+    @include gradient;
+    // background: linear-gradient(90deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
     transform-origin: center top;
   }
 

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -1,6 +1,10 @@
 @use '../../_global/styles/mixins' as *;
 @use '../../_global/styles/vars' as *;
 
+*:has(> .mini-teaser) {
+  container-type: inline-size;
+}
+
 .mini-teaser {
   position: relative;
   background-color: var(--color-background);
@@ -44,9 +48,12 @@
     }
   }
   &.infoteaser{
-    background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+    @include gradient;
     position: relative;
+    container-type: inline-size;
+
     &:after{
+      @include gradient;
       content:"";
       position:absolute;
       left:0;
@@ -54,22 +61,20 @@
       top:0;
       bottom:0;
       z-index:-1;
-      background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);
     }
     &.background-image{
       background-size:cover;
       &:after{
+        content:"";
         position:absolute;
         top:0;
         left:0;
         bottom:0;
         right:0;
         z-index: 0;
-        content:"";
         opacity: 0.6;
         background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
         background-blend-mode: overlay;
-
       }
       .text-box{
         position: relative;

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

@@ -84,7 +84,7 @@
       &:after {
         content: "";
         @include full-size;
-        background-color: var(--theme-color-primary);
+        background-color: var(--swatches-primary-500);
         opacity: 0.1;
         transition: 0.3s $easeInOutSine;
       }
@@ -129,7 +129,7 @@
         z-index: 1;
 
         a {
-          background-color: var(--theme-color-primary-dimmed-04);
+          background-color: var(--swatches-primary-100);
           padding-left: 60px;
           padding-right: 20px;
           overflow: hidden;
@@ -154,11 +154,12 @@
 
       &.magazine-nav {
         position: relative;
+        container-type: inline-size;
 
         &:before {
           content: "";
           @include full-size;
-          background: linear-gradient(90deg, var(--theme-color-gradient-01) 20%, var(--theme-color-gradient-02) 70%, var(--theme-color-gradient-03) 100%);
+          @include gradient;
           transition: 0.3s ease;
           width: 100%;
         }
@@ -256,11 +257,11 @@
       min-height: 61px;
       text-decoration: none;
       transition: 0.3s $easeOutSine;
-      border-bottom: 1px solid rgba(var(--theme-color-primary-rgb), 0.1);
+      border-bottom: 1px solid rgba(var(--swatches-primary-500-rgb), 0.1);
       @include focus-visible(true);
 
       &.active {
-        background-color: var(--theme-grey-light);
+        background-color: var(--swatches-primary-100);
         padding-left: 12px;
         border-left: var(--border-width) solid var(--swatches-secondary-700);
       }
@@ -290,7 +291,7 @@
 
       &:hover {
         text-decoration: none;
-        background-color: rgba(var(--theme-color-primary-rgb), 0.06);
+        background-color: rgba(var(--swatches-primary-500-rgb), 0.06);
       }
     }
 
@@ -335,7 +336,7 @@
   .secondary {
     position: relative;
     z-index: 1;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100);
     text-align: left;
 
     ul {
@@ -480,7 +481,7 @@
       }
 
       &:hover {
-        text-decoration-color: var(--theme-color-primary);
+        text-decoration-color: var(--swatches-primary-500);
       }
     }
   }

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

@@ -3,16 +3,21 @@
 
 .infobanner {
   margin: var(--section-margin) auto;
+  container-type: inline-size;
+
+  * > .banner {
+    container-type: inline-size;
+  }
 
   .banner {
     position: relative;
     display: flex;
     color: var(--color-text);
-    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;
     transition: 0.25s ease;
     @include focus-visible;
+    @include gradient;
 
     &.focus-visible:focus .btn {
       @include focus-standalone;
@@ -68,7 +73,7 @@
     display: flex;
     justify-content: space-between;
     flex: 1 1 100%;
-    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%);
     border-radius: var(--border-radius-xs);
 
     @media(max-width: 567px) {
@@ -76,6 +81,10 @@
     }
   }
 
+  &:not(.has-image-box) .text-wrapper {
+    background: none;
+  }
+
   .text-box {
     padding: 18px 24px;
     min-height: 180px;

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

@@ -17,6 +17,7 @@
   h1 {
     position: relative;
     padding-bottom: 0.7em;
+    container-type: inline-size;
 
     &:first-child {
       margin-top: 0.1em;
@@ -32,9 +33,9 @@
       left: 0.05em;
       bottom: calc(0.15em - var(--border-width) / 2);
       height: var(--border-width);
-      background: linear-gradient(85deg, var(--theme-color-gradient-01) 0%, var(--theme-color-gradient-02) 50%, var(--theme-color-gradient-03) 100%);
       width: calc(50vw + 460px);
-
+      @include gradient;
+      
       @media(max-width: 999px) {
         width: calc(100% + 30px);
       }

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

@@ -6,12 +6,12 @@ section.marketingheader {
 
   &.miniinfoteaser {
     .kicker {
-      //color: var(--theme-color-secondary);
+      //color: var(--swatches-secondary-500);
     }
 
     .mini-teaser {
       .category {
-        color: var(--theme-color-secondary);
+        color: var(--swatches-secondary-500);
       }
     }
 
@@ -71,7 +71,7 @@ section.marketingheader {
     position: relative;
     overflow: hidden;
     margin: 0;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--swatches-primary-100);
     height: 100px;
     transition: all .6s ease-in-out;
     background-size: cover;
@@ -118,7 +118,7 @@ section.marketingheader {
         border-radius: 10px;
         height: 34px;
         width: 34px;
-        background-color: var(--theme-color-primary);
+        background-color: var(--swatches-primary-500);
         @include focus-visible;
         z-index: 2;
 
@@ -223,12 +223,12 @@ section.marketingheader {
       }
 
       &::placeholder {
-        color: var(--theme-color-primary) !important;
+        color: var(--swatches-primary-500) !important;
       }
     }
 
     button.search-submit {
-      background-color: var(--theme-color-primary) !important;
+      background-color: var(--swatches-primary-500) !important;
       color: var(--swatches-neutrals-white);
       border-top-left-radius: 0 !important;
       border-bottom-left-radius: 0 !important;
@@ -380,7 +380,7 @@ section.marketingheader {
           }
 
           .outer {
-            background-color: var(--theme-color-primary-dimmed-04);
+            background-color: var(--swatches-primary-100);
           }
 
           p {
@@ -413,7 +413,7 @@ section.marketingheader {
         box-shadow: 0 4px 20px -5px rgba(#000, 0.25);
         transition: 0.25s ease;
         line-height: 1.2;
-        background-color: var(--theme-color-background);
+        background-color: var(--color-background);
         overflow: hidden;
         @include focus-visible();
 
@@ -431,7 +431,7 @@ section.marketingheader {
           left: 0;
           right: 0;
           height: var(--border-width);
-          background-color: var(--theme-color-secondary);
+          background-color: var(--swatches-secondary-500);
           transition: 0.25s $easeOutQuad;
         }
 
@@ -451,7 +451,7 @@ section.marketingheader {
       }
 
       .outer {
-        background-color: var(--theme-primary-light-04);
+        background-color: var(--swatches-primary-100);
         padding: 14px 20px 18px;
         border: 4px solid var(--swatches-neutrals-white);
 
@@ -494,7 +494,7 @@ section.marketingheader {
           font-weight: 500;
 
           &:hover {
-            color: var(--color-secondary-dark);
+            color: var(--swatches-secondary-700);
           }
         }
       }
@@ -931,7 +931,7 @@ section.marketingheader {
       .btn {
         @media (min-width: 1000px) {
           background-color: var(--swatches-neutrals-white) !important;
-          color: var(--theme-color-primary) !important;
+          color: var(--swatches-primary-500) !important;
         }
 
         &:hover:after {
@@ -1039,7 +1039,7 @@ section.marketingheader {
 
         button.btn::before {
           width: 0;
-          background-color: var(--theme-grey-light);
+          background-color: var(--swatches-primary-100);
           content: "";
           z-index: 0;
           height: 100%;
@@ -1068,7 +1068,7 @@ section.marketingheader {
     }
 
     .text-box {
-      color: var(--theme-color-primary);
+      color: var(--swatches-primary-500);
       padding: 30px 20px 24px 20px;
       display: flex;
       flex-flow: column;
@@ -1087,22 +1087,24 @@ section.marketingheader {
       }
 
       &:not(:first-child)::before {
-        background-color: var(--theme-color-primary-dimmed-04);
+        background-color: var(--swatches-primary-100);
       }
 
       .btn {
-        background-color: var(--theme-color-primary);
+        background-color: var(--swatches-primary-500);
         color: var(--swatches-neutrals-white);
 
         &:hover:after {
-          box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
+          box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--swatches-primary-500);
         }
       }
     }
 
     .text-only {
+      container-type: inline-size;
+
       .image-box {
-        background: linear-gradient(149deg, var(--theme-color-gradient-01) 46.62%, var(--theme-color-gradient-02) 84.79%, var(--theme-color-gradient-03) 112.16%);
+        @include gradient;
         @media (max-width: 999px) {
           width: calc(100vw - (2 * var(--container-padding)));
           height: calc((100vw - (2 * var(--container-padding))) * 2 / 3);

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

@@ -221,6 +221,7 @@
       position: static;
       background-color: transparent;
       max-width: none;
+      container-type: inline-size;
 
       @media(max-width: 999px) {
         //justify-content: flex-start;
@@ -232,7 +233,7 @@
 
       &:after {
         content: "";
-        background: linear-gradient(130deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 100%);
+        @include gradient;
         position: absolute;
         top: 0;
         left: 0;
@@ -284,7 +285,7 @@
     margin: 0;
     text-align: right;
     color: var(--color-text);
-    background: linear-gradient(90deg, var(--theme-color-gradient-01) 25%,var(--theme-color-gradient-02) 57%,var(--theme-color-gradient-03) 112%);
+    @include gradient;
     @media(max-width: 999px) {
       min-height: auto;
     }

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

@@ -4,6 +4,7 @@
 .teasers:not([data-items="1"]) {
   position: relative;
   display: block;
+  container-type: inline-size;
 
   @media(min-width: 1000px) {
     margin-bottom: -10px;
@@ -20,15 +21,20 @@
     }
   }
 
+  * > .magazine-indicator {
+    container-type: inline-size;
+  }
+
 // Wird der noch genutzt?
   .magazine-indicator {
     //position: relative;
     display: inline-block;
     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%);
+    // background: linear-gradient(90deg, var(--theme-color-gradient-01) 20%, var(--theme-color-gradient-02) 70%, var(--theme-color-gradient-03) 100%);
     color: var(--swatches-neutrals-white);
     padding: 6px 12px;
+    @include gradient;
     //margin: 6px 0 0;
 
     position: absolute;
@@ -368,12 +374,13 @@
     flex-grow: 0;
     flex-shrink: 0;
     border-radius: 4px;
+    container-type: inline-size;
 
     &.chart {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(130deg, var(--theme-color-gradient-01) 46%, var(--theme-color-gradient-02) 123%, var(--theme-color-gradient-03) 255%);
+      @include gradient;
     }
 
     &:before {
@@ -587,14 +594,15 @@
     margin-bottom: 1.2em;
     line-height: 1.2;
     margin-top: 0;
+    container-type: inline-size;
 
     &::before {
       content: "";
       position: relative;
       display: block;
-      background: linear-gradient(90deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
       height: calc(var(--border-width) / 2);
       margin: 0 0.05em 0.5em;
+      @include gradient;
     }
   }
 }