feat: improve customization trough css properties

Author: stampaaaron

src/components/Timeline.css

@@ -1,12 +1,17 @@
 :where(.timeline) {
   --line-width: 0.2rem;
   --line-color: black;
-  --marker-mark-size: 1rem;
-  --marker-mark-color: var(--line-color);
-  --marker-mark-radius: 50%;
-  --marker-offset: 2rem;
+  --marker-size: 1rem;
+  --marker-color: var(--line-color);
+  --marker-radius: 50%;
+  --marker-offset: 3rem;
   --pointer-height: 2rem;
   --pointer-width: 1rem;
+  --card-background: whitesmoke;
+  --card-radius: 0.1rem;
+  --card-offset: 1rem;
+  --card-shadow: unset;
+  --card-padding: 1rem;
 
   position: relative;
 }
@@ -26,7 +31,7 @@
   display: flex;
   align-items: flex-start;
   transition: top 0.1s;
-  gap: 1rem;
+  gap: var(--card-offset);
 }
 
 .timeline-item--left {
@@ -39,10 +44,10 @@
 }
 
 .timeline-item__marker {
-  border-radius: var(--marker-mark-radius);
-  width: var(--marker-mark-size);
-  height: var(--marker-mark-size);
-  background-color: var(--marker-mark-color);
+  border-radius: var(--marker-radius);
+  width: var(--marker-size);
+  height: var(--marker-size);
+  background-color: var(--marker-color);
   margin-top: var(--marker-offset);
 }
 
@@ -54,13 +59,14 @@
 }
 
 .timeline-card {
-  background-color: white;
-  border: 0.2rem solid black;
-  padding: 1rem;
+  background-color: var(--card-background);
+  border-radius: var(--card-radius);
+  padding: var(--card-padding);
   display: flex;
   flex-direction: column;
   flex: 1;
   position: relative;
+  filter: drop-shadow(var(--card-shadow));
 }
 
 .timeline-card img {
@@ -72,9 +78,13 @@
   margin-left: auto;
 }
 
+.timeline-card__title {
+  font-weight: bold;
+}
+
 .timeline-card__pointer {
   clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
-  background-color: white;
+  background-color: var(--card-background);
   top: var(--marker-offset);
   width: var(--pointer-width);
   height: var(--pointer-height);

src/components/Timeline.stories.css

@@ -6,21 +6,15 @@
 .styled-timeline {
   --line-width: 2px;
   --line-color: gray;
-  --marker-inner-color: hotpink;
   --marker-color: gray;
-  --marker-size: 1.5rem;
+  --card-background: white;
+  --card-shadow: 2px 2px 5px rgb(0, 0, 0, 0.1);
+  --card-padding: 2rem;
 
   font-family: sans-serif;
   line-height: 1.4;
 }
 
-.styled-timeline .timeline-card {
-  border: none;
-  padding: 2rem;
-  border-radius: 0.2rem;
-  filter: drop-shadow(2px 2px 5px rgb(0, 0, 0, 0.2));
-}
-
 .styled-timeline .timeline-card__title {
   font-size: 1.5rem;
   margin-bottom: 1rem;

src/components/Timeline.stories.mdx

@@ -49,6 +49,7 @@ export const items = [
 <Story name="Basic">
 <Timeline
   items={items}
+  offset={{ left: 100, right: 200 }}
 />
 
 </Story>