Tokens for Timeline

components/lib/themes/aura/timeline/index.js

@@ -1,10 +1,32 @@
 export default {
+    event: {
+        minHeight: '5rem'
+    },
+    horizontal: {
+        eventContent: {
+            padding: '1rem 0'
+        }
+    },
+    vertical: {
+        eventContent: {
+            padding: '0 1rem'
+        }
+    },
     eventMarker: {
+        size: '1.125rem',
+        borderRadius: '50%',
+        borderWidth: '2px',
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        contentColor: '{primary.color}'
+        content: {
+            borderRadius: '50%',
+            size: '0.375rem',
+            background: '{primary.color}',
+            insetShadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
+        }
     },
     eventConnector: {
-        color: '{content.border.color}'
+        color: '{content.border.color}',
+        size: '2px'
     }
 };

components/lib/themes/lara/timeline/index.js

@@ -1,10 +1,32 @@
 export default {
+    event: {
+        minHeight: '5rem'
+    },
+    horizontal: {
+        eventContent: {
+            padding: '1rem 0'
+        }
+    },
+    vertical: {
+        eventContent: {
+            padding: '0 1rem'
+        }
+    },
     eventMarker: {
+        size: '1.125rem',
+        borderRadius: '50%',
+        borderWidth: '2px',
         background: '{content.background}',
-        borderColor: '{content.border.color}',
+        borderColor: '{primary.color}',
-        contentColor: '{primary.color}'
+        content: {
+            borderRadius: '50%',
+            size: '0.375rem',
+            background: 'transparent',
+            insetShadow: 'none'
+        }
     },
     eventConnector: {
-        color: '{content.border.color}'
+        color: '{content.border.color}',
+        size: '2px'
     }
 };

components/lib/timeline/style/TimelineStyle.js

@@ -49,17 +49,17 @@ const theme = ({ dt }) => `
 
 .p-timeline-vertical .p-timeline-event-opposite,
 .p-timeline-vertical .p-timeline-event-content {
-    padding: 0 1rem;
+    padding: ${dt('timeline.vertical.event.content.padding')};
 }
 
 .p-timeline-vertical .p-timeline-event-connector {
-    width: 2px;
+    width: ${dt('timeline.event.connector.size')};
 }
 
 .p-timeline-event {
     display: flex;
     position: relative;
-    min-height: 70px;
+    min-height: ${dt('timeline.event.min.height')};
 }
 
 .p-timeline-event:last-child {
@@ -68,12 +68,10 @@ const theme = ({ dt }) => `
 
 .p-timeline-event-opposite {
     flex: 1;
-    padding: 0 1rem;
 }
 
 .p-timeline-event-content {
     flex: 1;
-    padding: 0 1rem;
 }
 
 .p-timeline-event-separator {
@@ -89,19 +87,21 @@ const theme = ({ dt }) => `
     justify-content: center;
     position: relative;
     align-self: baseline;
-    border: 2px solid ${dt('timeline.event.marker.border.color')};
+    border-width: ${dt('timeline.event.marker.border.width')};
-    border-radius: 50%;
+    border-style: solid;
-    width: 1.125rem;
+    border-color: ${dt('timeline.event.marker.border.color')};
-    height: 1.125rem;
+    border-radius: ${dt('timeline.event.marker.border.radius')};
-    background-color: ${dt('timeline.event.marker.background')};
+    width: ${dt('timeline.event.marker.size')};
+    height: ${dt('timeline.event.marker.size')};
+    background: ${dt('timeline.event.marker.background')};
 }
 
 .p-timeline-event-marker::before {
     content: " ";
-    border-radius: 50%;
+    border-radius: ${dt('timeline.event.marker.content.border.radius')};
-    width: 0.375rem;
+    width: ${dt('timeline.event.marker.content.size')};
-    height: 0.375rem;
+    height:${dt('timeline.event.marker.content.size')};
-    background: ${dt('timeline.event.marker.content.color')};
+    background: ${dt('timeline.event.marker.content.background')};
 }
 
 .p-timeline-event-marker::after {
@@ -109,8 +109,8 @@ const theme = ({ dt }) => `
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 50%;
+    border-radius: ${dt('timeline.event.marker.border.radius')};
-    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};
 }
 
 .p-timeline-event-connector {
@@ -137,12 +137,12 @@ const theme = ({ dt }) => `
 
 .p-timeline-horizontal .p-timeline-event-connector {
     width: 100%;
-    height: 2px;
+    height: ${dt('timeline.event.connector.size')};
 }
 
 .p-timeline-horizontal .p-timeline-event-opposite,
 .p-timeline-horizontal .p-timeline-event-content {
-    padding: 1rem 0;
+    padding: ${dt('timeline.horizontal.event.content.padding')};
 }
 
 .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {