section timeline

.gitignore

@@ -32,3 +32,5 @@ log
 #storybook
 /storybook/stories/_old/
 /storybook/storybook-static/
+
+/gfi-ihk-2024/.claude

gfi-ihk-2024/stories/sections/timeline/TimelineComponent.js

@@ -1,4 +1,5 @@
 import './timeline.scss';
+import '../slider/slider.scss';
 import $ from 'jquery';
 import {createElement, createImage} from "../../_global/scripts/helpers";
 import {TimelineData} from "./TimelineData";
@@ -9,11 +10,11 @@ export const createTimeline = ({
   single = false,
   data = TimelineData,
 }) => {
-  const wrapper = createElement('div', ['timelines']);
+  const wrapper = createElement('div', ['timelines','variant-subtle-primary']);
   const tabsWrapper = createElement('div', ['timeline-tabs'], null, wrapper);
   const timelineWrapper = createElement('section', ['timeline'], null, wrapper);
   createElement('div', ['item-slider'], null, timelineWrapper);
-  const years = createElement('div', ['years'], null, timelineWrapper);
+  const years = createElement('div', ['years','variant-solid'], null, timelineWrapper);
   const container = createElement('div', ['container'], null, years);
   const yearsWrapper = createElement('div', ['years-wrapper'], null, container);
   const tabsData = [];
@@ -80,9 +81,7 @@ export const createTimeline = ({
     tabsWrapper.appendChild(createTabs({size: 'small', color: 'white', data: tabsData}));
   }
 
-  $(document).ready(() => {
-    new IHKTimeline($(timelineWrapper));
-  })
+  new IHKTimeline($(timelineWrapper));
 
   return wrapper;
 }

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

@@ -4,7 +4,7 @@
 .timeline-tabs {
   position: relative;
   display: block;
-  background-color: var(--theme-color-primary-dimmed-04);
+  background-color: var(--color-background);
   padding: 24px 20px 0;
   margin-bottom: -5px;
 
@@ -28,12 +28,12 @@
     margin-right: 10px;
 
     &:not(.active) {
-      background-color: var(--swatches-neutrals-white);
-      color: var(--theme-primary);
+      background-color: var(--color-background);
+      color: var(--color-text);
     }
 
     &:focus{
-      color: var(--swatches-neutrals-white);
+      color: var(--color-text);
     }
 
     @media(max-width: 567px) {
@@ -73,7 +73,7 @@
   .item-slider {
     position: relative;
     display: block;
-    background-color: var(--theme-color-primary-dimmed-04);
+    background-color: var(--color-background);
     min-height: 460px;
     font-weight: 600;
 
@@ -129,7 +129,7 @@
       &::before {
         @include icon-small-arrow-right-simple;
         font-family: "Icons", sans-serif;
-        color: var(--theme-color-primary);
+        color: var(--color-text);
         font-weight: 400;
       }
 
@@ -352,8 +352,8 @@
   .years {
     position: relative;
     display: block;
-    background-color: var(--theme-color-primary);
-    color: var(--swatches-neutrals-white);
+    background-color: var(--color-background);
+    color: var(--color-text);
     overflow: hidden;
 
     &::before {
@@ -364,7 +364,7 @@
       top: 50%;
       margin-top: -4px;
       height: 8px;
-      background-color: var(--theme-color-secondary);
+      background-color: var(--color-border);
 
       @media(max-width: 999px) {
         margin-top: 8px;
@@ -420,7 +420,7 @@
         &::before {
           content: "";
           @include full-size;
-          background-color: var(--theme-color-primary);
+          background-color: var(--color-background);
           margin: 0 -8px;
           z-index: -1;
           transition: 0.2s ease;
@@ -434,7 +434,7 @@
       }
 
       &.current .year {
-        color: var(--theme-color-secondary);
+        color: var(--color-text-accent);
       }
 
       &.last {
@@ -463,7 +463,7 @@
         top: 26px;
         bottom: calc(50% - 4px);
         width: 4px;
-        background-color: var(--swatches-neutrals-white);
+        background-color: var(--color-text);
         z-index: 2;
       }
 
@@ -526,7 +526,7 @@
         &::before {
           content: "";
           @include full-size;
-          background-color: var(--theme-color-primary);
+          background-color: var(--color-background);
           margin: 0 -16px;
           z-index: -1;
           transition: 0.2s ease;
@@ -541,11 +541,11 @@
 
       &.current {
         &::before {
-          background-color: var(--theme-color-secondary);
+          background-color: var(--color-text-accent);
         }
 
         .year {
-          color: var(--theme-color-secondary);
+          color: var(--color-text-accent);
 
           &::before {
             opacity: 1;
@@ -588,7 +588,7 @@
         }
 
         &:hover, &.active {
-          color: var(--theme-color-secondary);
+          color: var(--color-text-accent);
         }
 
         p {