@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.0

package/dist/tl-spinner.css

@@ -1,78 +0,0 @@
-/* Component variables  */
-.tl-spinner {
-  --tl-spinner-background: var(--component-spinner-background-default);
-  --tl-spinner-background-inverted: var(--component-spinner-background-default-inverse);
-  --tl-spinner-speed: 1.8s;
-  --tl-spinner-speed-lg: 2s;
-  --tl-spinner-radius-xs: calc(var(--component-spinner-size-extra-small) / 2 * 1px);
-  --tl-spinner-radius-sm: calc(var(--component-spinner-size-small) / 2 * 1px);
-  --tl-spinner-radius-md: calc(var(--component-spinner-size-medium) / 2 * 1px);
-  --tl-spinner-radius-lg: calc(var(--component-spinner-size-large) / 2 * 1px);
-  --tl-spinner-stroke-width-xs: calc(var(--component-spinner-stroke-extra-small) * 1px);
-  --tl-spinner-stroke-width-sm: calc(var(--component-spinner-stroke-small) * 1px);
-  --tl-spinner-stroke-width-md: calc(var(--component-spinner-stroke-medium) * 1px);
-  --tl-spinner-stroke-width-lg: calc(var(--component-spinner-stroke-large) * 1px);
-  --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

@@ -1,239 +0,0 @@
-/* Typography Usage mixins */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root,
-.tds-mode-light,
-.scania .tds-mode-light,
-.scania .tl-mode-light {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.traton .tds-mode-light,
-.traton .tl-mode-light {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark,
-.scania .tl-mode-dark {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.traton .tds-mode-dark,
-.traton .tl-mode-dark {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.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

@@ -1,83 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root,
-.tds-mode-light,
-.scania .tds-mode-light,
-.scania .tl-mode-light {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.traton .tds-mode-light,
-.traton .tl-mode-light {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark,
-.scania .tl-mode-dark {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.traton .tds-mode-dark,
-.traton .tl-mode-dark {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
-.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;
-}