@dnb/eufemia 9.17.2 → 9.21.0

package/components/timeline/style/dnb-timeline.css

@@ -0,0 +1,307 @@
+/*
+* DNB Timeline
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-timeline {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-timeline *,
+  .dnb-timeline ::before,
+  .dnb-timeline ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-timeline ::before,
+  .dnb-timeline ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Timeline component
+*
+*/
+/*
+* Timeline theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+:root {
+  --timeline-icon-height--small: var(--button-height--small);
+  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-border-radius--small: calc(var(--timeline-icon-height--small)/2);
+  --timeline-icon-border-radius--small: calc(
+    var(--timeline-icon-height--small) / 2
+  );
+  --timeline-icon-height--medium: var(--button-height--medium);
+  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-border-radius--medium: calc(var(--timeline-icon-height--medium)/2);
+  --timeline-icon-border-radius--medium: calc(
+    var(--timeline-icon-height--medium) / 2
+  );
+  --timeline-icon-width-diff: calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);
+  --timeline-icon-width-diff: calc(
+    (
+        var(--timeline-icon-width--medium) -
+          var(--timeline-icon-width--small)
+      ) / 2
+  );
+  --timeline-border-spacing: var(--spacing-small);
+  --timeline-border-spacing--icon-adjusted: calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing));
+  --timeline-border-spacing--icon-adjusted: calc(
+    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
+  ); }
+
+.dnb-timeline__item {
+  margin-left: 0.25rem;
+  margin-left: calc(
+    (
+        2rem -
+          1.5rem) / 2
+  );
+  margin-left: var(--timeline-icon-width-diff); }
+  .dnb-timeline__item__label__icon {
+    width: 1.5rem;
+    width: var(--timeline-icon-width--small);
+    line-height: 1.5rem;
+    line-height: var(--timeline-icon-height--small);
+    border-radius: 0.75rem;
+    border-radius: calc(
+    1.5rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--small);
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-80);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #333;
+                box-shadow: inset 0 0 0 1px #333;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+                box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+  .dnb-timeline__item__label__name {
+    margin-left: 1.25rem;
+    margin-left: calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem);
+    margin-left: var(--timeline-border-spacing--icon-adjusted);
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+  .dnb-timeline__item__content {
+    margin-left: 0.75rem;
+    margin-left: calc(1.5rem / 2);
+    margin-left: calc(var(--timeline-icon-width--small)/2);
+    margin-left: calc(var(--timeline-icon-width--small) / 2);
+    padding-left: 2rem;
+    padding-left: calc(1.5rem / 2 + calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem));
+    padding-left: calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted));
+    padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
+    border-left: 1px dashed #737373;
+    border-left: 1px dashed var(--color-black-55); }
+  .dnb-timeline__item--completed .dnb-timeline__item__content {
+    border-left: 1px solid #333;
+    border-left: 1px solid var(--color-black-80); }
+  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+    color: #333;
+    color: var(--color-black-80); }
+  .dnb-timeline__item--current .dnb-timeline__item__content {
+    margin-left: 1rem;
+    margin-left: calc(2rem / 2);
+    margin-left: calc(var(--timeline-icon-width--medium)/2);
+    margin-left: calc(var(--timeline-icon-width--medium) / 2);
+    padding-left: 2rem;
+    padding-left: calc(2rem / 2 + 1rem);
+    padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
+    padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+    margin-left: 1rem;
+    margin-left: var(--timeline-border-spacing);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__icon {
+    width: 2rem;
+    width: var(--timeline-icon-width--medium);
+    line-height: 2rem;
+    line-height: var(--timeline-icon-height--medium);
+    border-radius: 1rem;
+    border-radius: calc(
+    2rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--medium); }
+  .dnb-timeline__item--current {
+    margin-left: 0; }
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+    font-weight: normal;
+    font-weight: var(--font-weight-basis);
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+    color: #737373;
+    color: var(--color-black-55);
+    background-color: #f8f8f8;
+    background-color: var(--color-black-3);
+    --border-color: var(--color-black-3);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #f8f8f8;
+                box-shadow: inset 0 0 0 1px #f8f8f8;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-3);
+                box-shadow: inset 0 0 0 1px var(--color-black-3); } }
+  .dnb-timeline__item:only-child {
+    margin-left: 0; }
+  .dnb-timeline__item:last-child .dnb-timeline__item__content {
+    border-left: none; }
+
+.dnb-timeline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column; }
+  .dnb-timeline__item__label {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: left;
+    padding: 0; }
+    .dnb-timeline__item__label__icon {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      height: auto;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      padding: 0; }
+    .dnb-timeline__item__label__name {
+      cursor: text; }
+  .dnb-timeline__item__content {
+    padding-bottom: 1rem;
+    padding-bottom: var(--spacing-small); }
+    .dnb-timeline__item__content__date {
+      cursor: text;
+      font-size: 0.875rem;
+      font-size: var(--font-size-x-small);
+      font-weight: normal;
+      font-weight: var(--font-weight-basis);
+      color: #737373;
+      color: var(--color-black-55); }
+    .dnb-timeline__item__content__info {
+      padding-top: 0.5rem;
+      padding-top: var(--spacing-x-small); }

package/components/timeline/style/dnb-timeline.min.css

@@ -0,0 +1 @@
+.dnb-timeline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-timeline *,.dnb-timeline :after,.dnb-timeline :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-timeline :after,.dnb-timeline :before{text-decoration:inherit;vertical-align:inherit}:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #333;box-shadow:inset 0 0 0 1px #333;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-80);box-shadow:inset 0 0 0 1px var(--color-black-80)}}.dnb-timeline__item__label__name{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__name{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__name{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__name{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);background-color:#f8f8f8;background-color:var(--color-black-3);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}.dnb-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-timeline__item__label{text-align:left}.dnb-timeline__item__label,.dnb-timeline__item__label__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}.dnb-timeline__item__label__icon{-ms-flex-negative:0;-webkit-box-pack:center;-ms-flex-pack:center;flex-shrink:0;height:auto;justify-content:center}.dnb-timeline__item__label__name{cursor:text}.dnb-timeline__item__content{padding-bottom:1rem;padding-bottom:var(--spacing-small)}.dnb-timeline__item__content__date{color:#737373;color:var(--color-black-55);cursor:text;font-size:.875rem;font-size:var(--font-size-x-small);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item__content__info{padding-top:.5rem;padding-top:var(--spacing-x-small)}

package/components/timeline/style/dnb-timeline.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Timeline
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-timeline {
+  @include componentReset();
+}
+
+@import './_timeline.scss';

package/components/timeline/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-timeline.scss'

package/components/timeline/style/index.js

@@ -0,0 +1 @@
+import "./dnb-timeline.min.css";

package/components/timeline/style/themes/dnb-timeline-theme-ui.css

@@ -0,0 +1,185 @@
+/*
+* Timeline theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+:root {
+  --timeline-icon-height--small: var(--button-height--small);
+  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-border-radius--small: calc(var(--timeline-icon-height--small)/2);
+  --timeline-icon-border-radius--small: calc(
+    var(--timeline-icon-height--small) / 2
+  );
+  --timeline-icon-height--medium: var(--button-height--medium);
+  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-border-radius--medium: calc(var(--timeline-icon-height--medium)/2);
+  --timeline-icon-border-radius--medium: calc(
+    var(--timeline-icon-height--medium) / 2
+  );
+  --timeline-icon-width-diff: calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);
+  --timeline-icon-width-diff: calc(
+    (
+        var(--timeline-icon-width--medium) -
+          var(--timeline-icon-width--small)
+      ) / 2
+  );
+  --timeline-border-spacing: var(--spacing-small);
+  --timeline-border-spacing--icon-adjusted: calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing));
+  --timeline-border-spacing--icon-adjusted: calc(
+    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
+  ); }
+
+.dnb-timeline__item {
+  margin-left: 0.25rem;
+  margin-left: calc(
+    (
+        2rem -
+          1.5rem) / 2
+  );
+  margin-left: var(--timeline-icon-width-diff); }
+  .dnb-timeline__item__label__icon {
+    width: 1.5rem;
+    width: var(--timeline-icon-width--small);
+    line-height: 1.5rem;
+    line-height: var(--timeline-icon-height--small);
+    border-radius: 0.75rem;
+    border-radius: calc(
+    1.5rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--small);
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-80);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #333;
+                box-shadow: inset 0 0 0 1px #333;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+                box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+  .dnb-timeline__item__label__name {
+    margin-left: 1.25rem;
+    margin-left: calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem);
+    margin-left: var(--timeline-border-spacing--icon-adjusted);
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+  .dnb-timeline__item__content {
+    margin-left: 0.75rem;
+    margin-left: calc(1.5rem / 2);
+    margin-left: calc(var(--timeline-icon-width--small)/2);
+    margin-left: calc(var(--timeline-icon-width--small) / 2);
+    padding-left: 2rem;
+    padding-left: calc(1.5rem / 2 + calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem));
+    padding-left: calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted));
+    padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
+    border-left: 1px dashed #737373;
+    border-left: 1px dashed var(--color-black-55); }
+  .dnb-timeline__item--completed .dnb-timeline__item__content {
+    border-left: 1px solid #333;
+    border-left: 1px solid var(--color-black-80); }
+  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+    color: #333;
+    color: var(--color-black-80); }
+  .dnb-timeline__item--current .dnb-timeline__item__content {
+    margin-left: 1rem;
+    margin-left: calc(2rem / 2);
+    margin-left: calc(var(--timeline-icon-width--medium)/2);
+    margin-left: calc(var(--timeline-icon-width--medium) / 2);
+    padding-left: 2rem;
+    padding-left: calc(2rem / 2 + 1rem);
+    padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
+    padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+    margin-left: 1rem;
+    margin-left: var(--timeline-border-spacing);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__icon {
+    width: 2rem;
+    width: var(--timeline-icon-width--medium);
+    line-height: 2rem;
+    line-height: var(--timeline-icon-height--medium);
+    border-radius: 1rem;
+    border-radius: calc(
+    2rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--medium); }
+  .dnb-timeline__item--current {
+    margin-left: 0; }
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+    font-weight: normal;
+    font-weight: var(--font-weight-basis);
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+    color: #737373;
+    color: var(--color-black-55);
+    background-color: #f8f8f8;
+    background-color: var(--color-black-3);
+    --border-color: var(--color-black-3);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #f8f8f8;
+                box-shadow: inset 0 0 0 1px #f8f8f8;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-3);
+                box-shadow: inset 0 0 0 1px var(--color-black-3); } }
+  .dnb-timeline__item:only-child {
+    margin-left: 0; }
+  .dnb-timeline__item:last-child .dnb-timeline__item__content {
+    border-left: none; }

package/components/timeline/style/themes/dnb-timeline-theme-ui.min.css

@@ -0,0 +1 @@
+:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #333;box-shadow:inset 0 0 0 1px #333;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-80);box-shadow:inset 0 0 0 1px var(--color-black-80)}}.dnb-timeline__item__label__name{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__name{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__name{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__name{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);background-color:#f8f8f8;background-color:var(--color-black-3);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}

package/components/timeline/style/themes/dnb-timeline-theme-ui.scss

@@ -0,0 +1,105 @@
+/*
+* Timeline theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+@import '../../../button/style/themes/_button-mixins.scss';
+
+:root {
+  --timeline-icon-height--small: var(--button-height--small);
+  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-border-radius--small: calc(
+    var(--timeline-icon-height--small) / 2
+  );
+  --timeline-icon-height--medium: var(--button-height--medium);
+  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-border-radius--medium: calc(
+    var(--timeline-icon-height--medium) / 2
+  );
+  --timeline-icon-width-diff: calc(
+    (
+        var(--timeline-icon-width--medium) -
+          var(--timeline-icon-width--small)
+      ) / 2
+  );
+  --timeline-border-spacing: var(--spacing-small);
+  --timeline-border-spacing--icon-adjusted: calc(
+    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
+  );
+}
+
+@mixin centerBorder(
+  $width: var(--timeline-icon-width--medium),
+  $spacing: var(--timeline-border-spacing--icon-adjusted)
+) {
+  margin-left: calc(#{$width} / 2);
+  padding-left: calc(#{$width} / 2 + #{$spacing});
+}
+
+.dnb-timeline {
+  &__item {
+    margin-left: var(--timeline-icon-width-diff);
+    &__label {
+      &__icon {
+        width: var(--timeline-icon-width--small);
+        line-height: var(--timeline-icon-height--small);
+        border-radius: var(--timeline-icon-border-radius--small);
+        color: var(--color-black-80);
+        background-color: var(--color-white);
+        @include fakeBorder(var(--color-black-80), 0.0625rem, inset, true);
+      }
+      &__name {
+        margin-left: var(--timeline-border-spacing--icon-adjusted);
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-small);
+      }
+    }
+    &__content {
+      @include centerBorder(var(--timeline-icon-width--small));
+      border-left: 1px dashed var(--color-black-55);
+    }
+
+    &--completed &__content {
+      border-left: 1px solid var(--color-black-80);
+    }
+    &--completed &__label__name {
+      color: var(--color-black-80);
+    }
+    &--current &__content {
+      @include centerBorder(
+        var(--timeline-icon-width--medium),
+        var(--timeline-border-spacing)
+      );
+    }
+    &--current &__label__name {
+      margin-left: var(--timeline-border-spacing);
+      font-weight: var(--font-weight-medium);
+      font-size: var(--font-size-basis);
+      line-height: var(--line-height-basis);
+    }
+    &--current &__label__icon {
+      width: var(--timeline-icon-width--medium);
+      line-height: var(--timeline-icon-height--medium);
+      border-radius: var(--timeline-icon-border-radius--medium);
+    }
+    &--current {
+      margin-left: 0;
+    }
+    &--upcoming &__label__name {
+      font-weight: var(--font-weight-basis);
+      color: var(--color-black-55);
+    }
+    &--upcoming:not(.dnb-skeleton) &__label__icon {
+      color: var(--color-black-55);
+      background-color: var(--color-black-3);
+      @include fakeBorder(var(--color-black-3), 0.0625rem, inset, true);
+    }
+    &:only-child {
+      margin-left: 0;
+    }
+    &:last-child &__content {
+      border-left: none;
+    }
+  }
+}

package/components/timeline/style/themes/ui.js

@@ -0,0 +1 @@
+import "./dnb-timeline-theme-ui.min.css";

package/components/timeline/style.js

@@ -0,0 +1 @@
+import "./style/dnb-timeline.min.css";