@scania/tegel-lite 0.0.1-beta.0

package/dist/tl-accordion.css

@@ -0,0 +1,258 @@
+.tl-accordion {
+  /* Border & Background */
+  --accordion-border: var(--color-foreground-border-discrete);
+  --accordion-background: transparent;
+  /* Hover backgrounds */
+  --accordion-background-hover-primary: var(--color-background-layer-01);
+  --accordion-background-hover-secondary: var(--color-background-layer-02);
+  --accordion-background-hover: var(--accordion-background-hover-primary);
+  /* Focus & Active states */
+  --accordion-background-focus: var(--color-background-layer-01);
+  --accordion-background-active: var(--color-background-layer-02);
+  /* Text & Icon colours */
+  --accordion-text: var(--color-foreground-text-strong);
+  --accordion-icon: var(--color-foreground-icon-strong);
+  /* Borders & Disabled */
+  --accordion-border-focus: var(--color-foreground-border-strong);
+  --accordion-text-disabled: var(--color-foreground-text-disabled);
+}
+
+/* Mode variants */
+.tds-mode-light .tl-accordion--primary,
+.tds-mode-light .tl-accordion .tl-accordion--primary {
+  background-color: var(--accordion-background-hover-secondary);
+  --accordion-background-hover: var(--accordion-background-hover-primary);
+}
+
+.tds-mode-light .tl-accordion--secondary,
+.tds-mode-light .tl-accordion .tl-accordion--secondary {
+  background-color: var(--accordion-background-hover-primary);
+  --accordion-background-hover: var(--accordion-background-hover-secondary);
+}
+
+.tds-mode-dark .tl-accordion--primary,
+.tds-mode-dark .tl-accordion .tl-accordion--primary {
+  background-color: var(--accordion-background-hover-secondary);
+  --accordion-background-hover: var(--accordion-background-hover-primary);
+}
+
+.tds-mode-dark .tl-accordion--secondary,
+.tds-mode-dark .tl-accordion .tl-accordion--secondary {
+  background-color: var(--accordion-background-hover-primary);
+  --accordion-background-hover: var(--accordion-background-hover-secondary);
+}
+
+/* Typography Usage mixins */
+.tl-accordion__item {
+  box-sizing: border-box;
+}
+.tl-accordion__item * {
+  box-sizing: border-box;
+}
+.tl-accordion__item {
+  list-style: none;
+  color: var(--accordion-text);
+  position: relative;
+  border-top: 1px solid var(--accordion-border);
+  width: 100%;
+}
+.tl-accordion__item button {
+  border: none;
+}
+.tl-accordion__item:last-child {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--accordion-border);
+}
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+  background-color: var(--accordion-background-hover);
+}
+.tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
+.tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
+  background-color: var(--accordion-background-active);
+}
+.tl-accordion__item {
+  /* Focus state  */
+}
+.tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
+  outline: 2px solid var(--color-foreground-border-accent-focus);
+  outline-offset: 1px;
+  background-color: var(--accordion-background-focus);
+}
+.tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
+  background-color: transparent;
+}
+.tl-accordion__item--less-padding .tl-accordion__panel {
+  padding-right: var(--tds-spacing-element-16);
+}
+
+.tl-accordion__title {
+  flex-grow: 2;
+  text-align: left;
+  color: var(--color-foreground-text-strong);
+}
+.tl-accordion__item--disabled .tl-accordion__title {
+  color: var(--accordion-text-disabled);
+}
+.tl-accordion__item--icon-start .tl-accordion__header-icon-start .tl-accordion__title {
+  order: 1;
+}
+
+.tl-accordion__panel {
+  cursor: default;
+  padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);
+  display: none;
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
+}
+.tl-accordion__panel p {
+  margin: 0;
+  padding: 0;
+}
+.tl-accordion__item--disabled .tl-accordion__panel {
+  color: var(--accordion-text-disabled);
+  cursor: not-allowed;
+}
+.tl-accordion__item--expanded .tl-accordion__panel {
+  display: block;
+  padding-bottom: 31px;
+}
+
+.tl-accordion__header-icon-start,
+.tl-accordion__header-icon-end {
+  box-sizing: border-box;
+}
+.tl-accordion__header-icon-start *,
+.tl-accordion__header-icon-end * {
+  box-sizing: border-box;
+}
+.tl-accordion__header-icon-start,
+.tl-accordion__header-icon-end {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--tds-spacing-element-16);
+  background-color: var(--accordion-background);
+  position: relative;
+}
+.tl-accordion__header-icon-start::after,
+.tl-accordion__header-icon-end::after {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: var(--accordion-icon);
+  mask-image: var(--icon-chevron_down-svg);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transform-origin: center;
+  transition: transform 0.15s ease-in-out;
+  flex-shrink: 0;
+}
+.tl-accordion__item--disabled .tl-accordion__header-icon-start::after,
+.tl-accordion__item--disabled .tl-accordion__header-icon-end::after {
+  background-color: var(--accordion-text-disabled);
+}
+.tl-accordion__item--expanded .tl-accordion__header-icon-start::after,
+.tl-accordion__item--expanded .tl-accordion__header-icon-end::after {
+  transform: rotate(180deg);
+}
+.tl-accordion__header-icon-start button,
+.tl-accordion__header-icon-end button {
+  all: unset;
+  box-sizing: border-box;
+}
+.tl-accordion__header-icon-start button *,
+.tl-accordion__header-icon-end button * {
+  box-sizing: border-box;
+}
+.tl-accordion__header-icon-start button,
+.tl-accordion__header-icon-end button {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--tds-spacing-element-16);
+  background-color: var(--accordion-background);
+}
+.tl-accordion__header-icon-start .tl-accordion__icon,
+.tl-accordion__header-icon-end .tl-accordion__icon {
+  transform-origin: center;
+  transition: transform 0.15s ease-in-out;
+  color: var(--accordion-icon);
+}
+.tl-accordion__item--disabled .tl-accordion__header-icon-start,
+.tl-accordion__item--disabled .tl-accordion__header-icon-end {
+  color: var(--accordion-text-disabled);
+  cursor: not-allowed;
+}
+.tl-accordion__item--expanded .tl-accordion__header-icon-start,
+.tl-accordion__item--expanded .tl-accordion__header-icon-end {
+  background-color: var(--color-background-surface-100);
+}
+.tl-accordion__header-icon-start:active,
+.tl-accordion__header-icon-end:active {
+  outline: none;
+}
+.tl-accordion__header-icon-start:focus, .tl-accordion__header-icon-start:focus-visible, .tl-accordion__header-icon-start:focus-within,
+.tl-accordion__header-icon-end:focus,
+.tl-accordion__header-icon-end:focus-visible,
+.tl-accordion__header-icon-end:focus-within {
+  outline: none !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.tl-accordion__header-icon-start::after {
+  order: 0;
+  margin-right: var(--tds-spacing-element-16);
+}
+.tl-accordion__item--expanded .tl-accordion__header-icon-start::after {
+  margin-left: 0;
+  margin-right: var(--tds-spacing-element-16);
+}
+
+.tl-accordion__header-icon-end::after {
+  margin-left: var(--tds-spacing-element-32);
+}
+.tl-accordion__item--expanded .tl-accordion__header-icon-end::after {
+  margin-right: 0;
+  margin-left: var(--tds-spacing-element-32);
+}
+
+.tl-accordion {
+  display: block;
+  box-sizing: border-box;
+}
+.tl-accordion * {
+  box-sizing: border-box;
+}
+.tl-accordion {
+  width: 100%;
+  background-color: var(--accordion-background);
+}
+.tl-accordion--hide-last-border .tl-accordion__item:last-child {
+  border-bottom: none;
+}
+
+.tl-accordion__header-icon-start,
+.tl-accordion__header-icon-end {
+  position: relative;
+}

package/dist/tl-badge.css

@@ -0,0 +1,44 @@
+.tl-badge {
+  --badge-background-color: var(--component-badge-background);
+  --badge-color-text: var(--component-badge-text);
+}
+
+/* Typography Usage mixins */
+.tl-badge {
+  box-sizing: border-box;
+}
+.tl-badge * {
+  box-sizing: border-box;
+}
+.tl-badge {
+  display: block;
+  border-radius: 12px;
+  background-color: var(--badge-background-color);
+  text-align: center;
+}
+.tl-badge--sm {
+  height: 8px;
+  width: 8px;
+  line-height: 8px;
+}
+.tl-badge--lg {
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+.tl-badge--pill {
+  display: inline-block;
+  width: unset;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.tl-badge--hidden {
+  display: none;
+}
+
+.tl-badge__text {
+  font-size: 12px;
+  color: var(--badge-color-text);
+  font-family: var(--detail-01-font-family);
+  font-weight: bold;
+}

package/dist/tl-banner.css

@@ -0,0 +1,94 @@
+:root,
+.tds-mode-light,
+.tds-mode-dark {
+  --banner-text: var(--color-foreground-text-strong);
+  --banner-close-icon: var(--color-foreground-icon-strong);
+  --banner-background-default: var(--color-background-layer-01);
+  --banner-prefix-default: var(--color-foreground-icon-strong);
+  --banner-background-info: var(--color-system-info-discrete);
+  --banner-prefix-info: var(--color-system-info-default);
+  --banner-background-error: var(--color-system-danger-discrete);
+  --banner-prefix-error: var(--color-system-danger-default);
+}
+
+/* Typography Usage mixins */
+.tl-banner {
+  display: flex;
+  background-color: var(--banner-background-default);
+  padding: 16px 20px;
+  position: relative;
+}
+.tl-banner--error {
+  background-color: var(--banner-background-error);
+}
+.tl-banner--information {
+  background-color: var(--banner-background-info);
+}
+.tl-banner--error .tl-banner__icon {
+  color: var(--banner-prefix-error);
+}
+.tl-banner--information .tl-banner__icon {
+  color: var(--banner-prefix-info);
+}
+
+.tl-banner__icon {
+  padding-right: 12px;
+  color: var(--banner-prefix-default);
+  flex-shrink: 0;
+}
+
+.tl-banner__content {
+  color: var(--banner-text);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.tl-banner__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tl-banner__header {
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
+  margin: 0;
+}
+
+.tl-banner__subheader {
+  display: block;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  margin: 0;
+}
+
+.tl-banner__actions {
+  display: block;
+  width: fit-content;
+  padding-top: 12px;
+}
+
+.tl-banner__close {
+  color: var(--banner-close-icon);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  width: 20px;
+}
+.tl-banner__close:focus-visible {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}

package/dist/tl-block.css

@@ -0,0 +1,122 @@
+.tl-block {
+  --block-background: var(--color-background-layer-01);
+  --block-text-color: var(--color-foreground-text-strong);
+  --block-background-mode-primary: var(--color-background-layer-01);
+  --block-background-mode-secondary: var(--color-background-layer-02);
+  --block-background-even: var(--color-background-layer-01);
+  --block-background-odd: var(--color-background-layer-02);
+  --block-padding: 16px;
+  --block-border-radius: 4px;
+}
+
+/* Typography Usage mixins */
+.tl-block {
+  box-sizing: border-box;
+}
+.tl-block * {
+  box-sizing: border-box;
+}
+.tl-block {
+  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);
+  background-color: var(--block-background);
+  color: var(--block-text-color);
+  border-radius: var(--block-border-radius);
+  padding: var(--block-padding);
+}
+.tl-block h2 {
+  font-family: var(--headline-02-font-family);
+  font-size: var(--headline-02-font-size);
+  line-height: var(--headline-02-line-height);
+  font-weight: var(--headline-02-font-weight);
+  letter-spacing: var(--headline-02-letter-spacing);
+  text-transform: var(--headline-02-text-transform);
+}
+.tl-block p {
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+}
+.tl-block--primary {
+  background-color: var(--block-background-mode-primary);
+}
+.tl-block--secondary {
+  background-color: var(--block-background-mode-secondary);
+}
+
+.tl-block--primary .tl-block {
+  background-color: var(--block-background-odd);
+}
+
+.tl-block--primary .tl-block .tl-block {
+  background-color: var(--block-background-even);
+}
+
+.tl-block--primary .tl-block .tl-block .tl-block {
+  background-color: var(--block-background-odd);
+}
+
+.tl-block--primary .tl-block .tl-block .tl-block .tl-block {
+  background-color: var(--block-background-even);
+}
+
+.tl-block--secondary .tl-block {
+  background-color: var(--block-background-even);
+}
+
+.tl-block--secondary .tl-block .tl-block {
+  background-color: var(--block-background-odd);
+}
+
+.tl-block--secondary .tl-block .tl-block .tl-block {
+  background-color: var(--block-background-even);
+}
+
+.tl-block--secondary .tl-block .tl-block .tl-block .tl-block {
+  background-color: var(--block-background-odd);
+}
+
+.tl-block--primary .tl-block h3,
+.tl-block--secondary .tl-block h3 {
+  font-family: var(--headline-04-font-family);
+  font-size: var(--headline-04-font-size);
+  line-height: var(--headline-04-line-height);
+  font-weight: var(--headline-04-font-weight);
+  letter-spacing: var(--headline-04-letter-spacing);
+  text-transform: var(--headline-04-text-transform);
+}
+.tl-block--primary .tl-block p,
+.tl-block--secondary .tl-block p {
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
+}
+
+.tl-block--primary .tl-block .tl-block h4,
+.tl-block--secondary .tl-block .tl-block h4 {
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
+}
+.tl-block--primary .tl-block .tl-block p,
+.tl-block--secondary .tl-block .tl-block p {
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
+}

package/dist/tl-breadcrumbs.css

@@ -0,0 +1,75 @@
+@charset "UTF-8";
+.tl-breadcrumbs {
+  --breadcrumb-label: var(--color-foreground-text-strong);
+  --breadcrumb-hover: var(--color-foreground-text-strong);
+  --breadcrumb-current: var(--color-foreground-text-subtle);
+  --breadcrumb-separator-color: var(--color-foreground-text-strong);
+  --breadcrumb-separator-margin: 4px;
+  --breadcrumb-separator-width: 4px;
+  --breadcrumb-separator-height: 8px;
+  --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
+  --breadcrumb-focus-outline-width: 2px;
+}
+
+/* Typography Usage mixins */
+.tl-breadcrumbs {
+  box-sizing: border-box;
+}
+.tl-breadcrumbs * {
+  box-sizing: border-box;
+}
+.tl-breadcrumbs ol {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+}
+.tl-breadcrumbs li {
+  display: inline-block;
+}
+.tl-breadcrumbs li::after {
+  content: "›";
+  color: var(--breadcrumb-separator-color);
+  margin-right: var(--breadcrumb-separator-margin);
+  margin-left: var(--breadcrumb-separator-margin);
+  display: inline-block;
+  width: var(--breadcrumb-separator-width);
+  height: var(--breadcrumb-separator-height);
+}
+.tl-breadcrumbs li:has([aria-current])::after {
+  display: none;
+}
+.tl-breadcrumbs a {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--breadcrumb-label);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.tl-breadcrumbs a:hover {
+  color: var(--breadcrumb-hover);
+  text-decoration: underline;
+}
+.tl-breadcrumbs a:focus-visible {
+  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
+}
+.tl-breadcrumbs a[aria-current=page] {
+  pointer-events: none;
+  cursor: default;
+  color: var(--breadcrumb-current);
+}
+.tl-breadcrumbs a[aria-current=page]:hover {
+  text-decoration: none;
+  cursor: not-allowed;
+}