@scania/tegel-lite 0.0.1-beta.0

package/dist/tl-spinner.css

@@ -0,0 +1,78 @@
+/* Component variables  */
+.tl-spinner {
+  --tl-spinner-background: var(--component-spinner-color);
+  --tl-spinner-background-inverted: var(--color-brand-neutral-white);
+  --tl-spinner-speed: 1.8s;
+  --tl-spinner-speed-lg: 2s;
+  --tl-spinner-radius-xs: 8px;
+  --tl-spinner-radius-sm: 12px;
+  --tl-spinner-radius-md: 26px;
+  --tl-spinner-radius-lg: 42px;
+  --tl-spinner-stroke-width-xs: 3px;
+  --tl-spinner-stroke-width-sm: 4px;
+  --tl-spinner-stroke-width-md: 6px;
+  --tl-spinner-stroke-width-lg: 8px;
+  --tl-spinner-PI: 3.14159265358979;
+  --tl-spinner-radius: var(--tl-spinner-radius-lg);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
+}
+
+.tl-spinner {
+  box-sizing: border-box;
+}
+.tl-spinner * {
+  box-sizing: border-box;
+}
+.tl-spinner {
+  display: block;
+  width: calc(var(--tl-spinner-radius) * 2);
+  height: calc(var(--tl-spinner-radius) * 2);
+  transform: scale(-1, 1) rotate(-90deg);
+}
+.tl-spinner--xs {
+  --tl-spinner-radius: var(--tl-spinner-radius-xs);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-xs);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
+}
+.tl-spinner--sm {
+  --tl-spinner-radius: var(--tl-spinner-radius-sm);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-sm);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
+}
+.tl-spinner--md {
+  --tl-spinner-radius: var(--tl-spinner-radius-md);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-md);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed);
+}
+.tl-spinner--lg {
+  --tl-spinner-radius: var(--tl-spinner-radius-lg);
+  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
+  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
+}
+.tl-spinner--default {
+  stroke: var(--tl-spinner-background);
+}
+.tl-spinner--inverted {
+  stroke: var(--tl-spinner-background-inverted);
+}
+
+.tl-spinner__circle {
+  cx: var(--tl-spinner-radius);
+  cy: var(--tl-spinner-radius);
+  r: calc(var(--tl-spinner-radius) - var(--tl-spinner-stroke-width) / 2);
+  fill: none;
+  --tl-spinner-stroke-dash: calc((2 * var(--tl-spinner-PI)) * var(--tl-spinner-radius));
+  stroke-dasharray: var(--tl-spinner-stroke-dash);
+  stroke-width: var(--tl-spinner-stroke-width);
+  animation: tl-spinner-dash var(--tl-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+}
+
+@keyframes tl-spinner-dash {
+  from {
+    stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
+  }
+  to {
+    stroke-dashoffset: var(--tl-spinner-stroke-dash);
+  }
+}

package/dist/tl-step.css

@@ -0,0 +1,213 @@
+/* Typography Usage mixins */
+.tl-stepper {
+  --stepper-current-number-with-border: var(--color-foreground-border-strong);
+  --stepper-icon-step-border-warning: var(--color-system-danger-default);
+  --stepper-icon-step-border-success: var(--component-stepper-success);
+  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
+  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
+  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
+  --stepper-divider-line: var(--color-foreground-icon-disabled);
+}
+
+.tl-stepper__step {
+  position: relative;
+  display: flex;
+  justify-content: start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.tl-stepper--label-below .tl-stepper__step {
+  flex-direction: column;
+}
+.tl-stepper--lg .tl-stepper__step {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  padding: 0 20px;
+}
+.tl-stepper--sm .tl-stepper__step {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  padding: 0 20px;
+}
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  flex: 1 1 0;
+  min-inline-size: 60px;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
+  flex: 0 0 auto;
+  min-inline-size: auto;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
+}
+.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 40px;
+}
+.tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
+  min-inline-size: 48px;
+}
+.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
+  display: none;
+}
+.tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
+  display: none;
+}
+.tl-stepper--lg .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+}
+.tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
+  height: 36px;
+  width: 1px;
+  top: 40px;
+  left: 36px;
+}
+.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
+  height: 1px;
+  left: calc(50% + 15px + 8px);
+  right: calc(-50% + 15px + 8px);
+  top: 16px;
+}
+.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+.tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
+}
+.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  left: calc(50% + 12px + 8px);
+  right: calc(-50% + 12px + 8px);
+  top: 13px;
+}
+.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-divider-line);
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+
+.tl-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 100px;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  position: relative;
+}
+.tl-stepper--lg .tl-stepper__node {
+  height: 30px;
+  min-width: 30px;
+  font-size: 14px;
+}
+.tl-stepper--sm .tl-stepper__node {
+  height: 24px;
+  min-width: 24px;
+}
+.tl-stepper__step--error .tl-stepper__node {
+  border-color: var(--stepper-icon-step-border-warning);
+  color: var(--stepper-icon-step-border-warning);
+}
+.tl-stepper__step--success .tl-stepper__node {
+  background-color: var(--stepper-icon-step-border-success);
+  border-color: var(--stepper-icon-step-border-success);
+  color: var(--stepper-icon-step-checkmark);
+}
+.tl-stepper__step--current .tl-stepper__node {
+  color: var(--stepper-current-number-with-border);
+}
+.tl-stepper__step--upcoming .tl-stepper__node {
+  border-color: var(--stepper-label-border-upcoming);
+  color: var(--stepper-label-text-upcoming);
+}
+.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
+  justify-content: center;
+}
+.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  background-color: currentcolor;
+}
+.tl-stepper__step--success .tl-stepper__node::after {
+  mask-image: var(--icon-tick-svg);
+}
+.tl-stepper__step--error .tl-stepper__node::after {
+  mask-image: var(--icon-warning-svg);
+}
+
+.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
+.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
+  width: 16px;
+  height: 16px;
+}
+
+.tl-stepper__label {
+  text-align: center;
+}
+.tl-stepper--lg .tl-stepper__label {
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  font-size: 14px;
+}
+.tl-stepper--sm .tl-stepper__label {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+}
+.tl-stepper__step--upcoming .tl-stepper__label {
+  color: var(--stepper-label-text-upcoming);
+  opacity: var(--tds-stepper-label-text-opacity-upcoming);
+}
+.tl-stepper--hide-labels .tl-stepper__label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/tl-stepper.css

@@ -0,0 +1,57 @@
+.tl-stepper {
+  --stepper-current-number-with-border: var(--color-foreground-border-strong);
+  --stepper-icon-step-border-warning: var(--color-system-danger-default);
+  --stepper-icon-step-border-success: var(--component-stepper-success);
+  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
+  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
+  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
+  --stepper-divider-line: var(--color-foreground-icon-disabled);
+}
+
+.tl-stepper {
+  box-sizing: border-box;
+}
+.tl-stepper * {
+  box-sizing: border-box;
+}
+.tl-stepper {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  list-style: none;
+}
+
+.tl-stepper__list {
+  display: flex;
+  justify-content: space-evenly;
+  min-width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
+  width: 100%;
+}
+.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
+  justify-content: flex-start;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
+  min-width: 100%;
+}
+.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
+  display: flex;
+  justify-content: flex-start;
+}
+.tl-stepper--vertical .tl-stepper__list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 52px;
+  min-width: 0;
+}
+.tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
+  gap: 36px;
+}