@scania/tegel-lite 0.0.1-9

package/dist/tl-button.css

@@ -0,0 +1,283 @@
+.tl-button {
+  --button-transparent: transparent;
+  --button-white: var(--color-brand-neutral-white);
+  --button-black: var(--color-brand-neutral-black);
+  --button-radius: var(--dimension-radius-for-surface-clickable);
+  --button-sm-only-icon-padding: 11px;
+  --button-md-only-icon-padding: 13px;
+  --button-lg-only-icon-padding: 17px;
+  --button-primary-background: var(--color-background-accent-primary-default);
+  --button-primary-background-hover: var(--color-background-accent-primary-hover);
+  --button-primary-background-active: var(--color-background-accent-primary-pressed);
+  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
+  --button-primary-color: var(--component-button-primary-text);
+  --button-primary-color-disabled: var(--color-foreground-text-disabled);
+  --button-primary-border-color: var(--button-transparent);
+  --button-primary-border-color-disabled: var(--button-transparent);
+  --button-primary-background-focus: var(--color-background-accent-primary-focus);
+  --button-primary-color-focus: var(--component-button-primary-text);
+  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-secondary-background: var(--button-transparent);
+  --button-secondary-color: var(--color-foreground-text-strong);
+  --button-secondary-border-color: var(--color-foreground-border-soft);
+  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
+  --button-secondary-border-color-active: var(--color-foreground-border-strong);
+  --button-secondary-background-disabled: var(--button-transparent);
+  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
+  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
+  --button-secondary-background-focus: var(--button-transparent);
+  --button-secondary-color-focus: var(--color-foreground-text-strong);
+  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-ghost-background: var(--button-transparent);
+  --button-ghost-color: var(--color-foreground-text-strong);
+  --button-ghost-border-color: var(--button-transparent);
+  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
+  --button-ghost-border-color-active: var(--color-foreground-border-strong);
+  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
+  --button-ghost-border-color-disabled: var(--button-transparent);
+  --button-ghost-background-focus: var(--button-transparent);
+  --button-ghost-color-focus: var(--color-foreground-text-strong);
+  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
+  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
+  --button-danger-background: var(--color-background-accent-danger-default);
+  --button-danger-color: var(--button-white);
+  --button-danger-border-color: var(--button-transparent);
+  --button-danger-background-hover: var(--color-background-accent-danger-hover);
+  --button-danger-background-active: var(--color-background-accent-danger-pressed);
+  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
+  --button-danger-color-disabled: var(--color-foreground-text-disabled);
+  --button-danger-border-color-disabled: var(--button-transparent);
+  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
+  --button-danger-background-focus: var(--color-background-accent-danger-focus);
+  --button-danger-color-focus: var(--button-white);
+  --button-danger-border-color-focus: var(--button-transparent);
+  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
+}
+.tl-button .tl-button--primary {
+  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
+  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
+}
+.tl-button .tl-button--secondary {
+  --button-primary-background-disabled: var(--button-white);
+  --button-danger-background-disabled: var(--button-white);
+}
+
+.scania .tl-button {
+  --button-outline-width: 2px;
+}
+
+.traton .tl-button {
+  --button-outline-width: 4px;
+}
+
+/* Typography Usage mixins */
+/* Base button styles */
+.tl-button {
+  box-sizing: border-box;
+}
+.tl-button * {
+  box-sizing: border-box;
+}
+.tl-button {
+  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);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: var(--button-radius);
+  border: 1px solid var(--button-secondary-border-color);
+  box-shadow: none;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+}
+.tl-button:focus-visible {
+  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
+  outline-offset: calc(var(--button-outline-width) * -1);
+}
+.tl-button {
+  /* Variants */
+}
+.tl-button--primary {
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-color);
+  border-color: var(--button-primary-border-color);
+}
+.tl-button--primary:hover:not(:disabled) {
+  background-color: var(--button-primary-background-hover);
+}
+.tl-button--primary:disabled {
+  background-color: var(--button-primary-background-disabled);
+  color: var(--button-primary-color-disabled);
+  border-color: var(--button-primary-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tl-button--primary:focus-visible:not(:disabled) {
+  background: var(--button-primary-background-focus);
+  border-color: var(--button-primary-border-color-focus);
+  color: var(--button-primary-color-focus);
+  outline-color: var(--button-primary-outline-color-focus);
+}
+.tl-button--primary:active:not(:disabled):focus-visible {
+  outline: none;
+  outline-offset: none;
+}
+.tl-button--primary:active:not(:disabled) {
+  background-color: var(--button-primary-background-active);
+  border-color: var(--button-primary-background-active);
+}
+.tl-button--secondary {
+  background-color: var(--button-secondary-background);
+  color: var(--button-secondary-color);
+  border-color: var(--button-secondary-border-color);
+}
+.tl-button--secondary:hover:not(:disabled) {
+  border-color: var(--button-secondary-border-color-hover);
+}
+.tl-button--secondary:disabled {
+  background-color: var(--button-secondary-background-disabled);
+  color: var(--button-secondary-color-disabled);
+  border-color: var(--button-secondary-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tl-button--secondary:focus-visible:not(:disabled) {
+  background: var(--button-secondary-background-focus);
+  border-color: var(--button-secondary-border-color-focus);
+  color: var(--button-secondary-color-focus);
+  outline-color: var(--button-secondary-outline-color-focus);
+}
+.tl-button--secondary:active:not(:disabled):focus-visible {
+  outline: none;
+}
+.tl-button--secondary:active:not(:disabled) {
+  border-color: var(--button-secondary-border-color-active);
+}
+.tl-button--ghost {
+  background-color: var(--button-ghost-background);
+  color: var(--button-ghost-color);
+  border-color: var(--button-ghost-border-color);
+}
+.tl-button--ghost:hover:not(:disabled) {
+  border-color: var(--button-ghost-border-color-hover);
+}
+.tl-button--ghost:disabled {
+  color: var(--button-ghost-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tl-button--ghost:focus-visible:not(:disabled) {
+  background: var(--button-ghost-background-focus);
+  border-color: var(--button-ghost-border-color-focus);
+  color: var(--button-ghost-color-focus);
+  outline-color: var(--button-ghost-outline-color-focus);
+}
+.tl-button--ghost:active:not(:disabled):focus-visible {
+  outline: none;
+}
+.tl-button--ghost:active:not(:disabled) {
+  border-color: var(--button-ghost-border-color-active);
+}
+.tl-button--danger {
+  background-color: var(--button-danger-background);
+  color: var(--button-danger-color);
+  border-color: var(--button-danger-border-color);
+}
+.tl-button--danger:hover:not(:disabled) {
+  background-color: var(--button-danger-background-hover);
+}
+.tl-button--danger:disabled {
+  background-color: var(--button-danger-background-disabled);
+  color: var(--button-danger-color-disabled);
+  border-color: var(--button-danger-border-color-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.tl-button--danger:focus-visible:not(:disabled) {
+  background: var(--button-danger-background-focus);
+  border-color: var(--button-danger-border-color-focus);
+  color: var(--button-danger-color-focus);
+  outline-color: var(--button-danger-outline-color-focus);
+}
+.tl-button--danger:active:not(:disabled):focus-visible {
+  outline: none;
+}
+.tl-button--danger:active:not(:disabled) {
+  background-color: var(--button-danger-background-active);
+  border-color: var(--button-danger-border-color-active);
+}
+.tl-button {
+  /* Sizes */
+}
+.tl-button--xs {
+  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
+  height: 24px;
+}
+.tl-button--sm {
+  padding: var(--tds-spacing-element-12);
+  height: 40px;
+}
+.tl-button--md {
+  padding: var(--tds-spacing-element-16);
+  height: 48px;
+}
+.tl-button--lg {
+  padding: var(--tds-spacing-element-20);
+  height: 56px;
+}
+.tl-button {
+  /* Icon specific styles */
+}
+.tl-button--icon.tl-button--sm {
+  padding: 10px var(--tds-spacing-element-12);
+}
+.tl-button--icon.tl-button--sm .tl-icon {
+  margin-left: var(--tds-spacing-element-12);
+}
+.tl-button--icon.tl-button--md {
+  padding: 14px var(--tds-spacing-element-16);
+}
+.tl-button--icon.tl-button--md .tl-icon {
+  margin-left: var(--tds-spacing-element-16);
+}
+.tl-button--icon.tl-button--lg {
+  padding: 18px var(--tds-spacing-element-20);
+}
+.tl-button--icon.tl-button--lg .tl-icon {
+  margin-left: var(--tds-spacing-element-20);
+}
+.tl-button {
+  /* Only icon specific styles */
+}
+.tl-button--only-icon.tl-button--sm {
+  padding: var(--button-sm-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--sm .tl-icon {
+  margin-left: 0;
+}
+.tl-button--only-icon.tl-button--md {
+  padding: var(--button-md-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--md .tl-icon {
+  margin-left: 0;
+}
+.tl-button--only-icon.tl-button--lg {
+  padding: var(--button-lg-only-icon-padding);
+}
+.tl-button--only-icon.tl-button--lg .tl-icon {
+  margin-left: 0;
+}
+.tl-button {
+  /* Full width */
+}
+.tl-button--full-width {
+  width: 100%;
+}

package/dist/tl-card.css

@@ -0,0 +1,229 @@
+.tl-card {
+  --card-background: var(--tds-white);
+  --card-background-primary: var(--component-card-primary);
+  --card-background-secondary: var(--component-card-secondary);
+  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
+  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
+  --card-box: var(--card-box-primary);
+  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
+  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
+  --card-headline: var(--color-foreground-text-strong);
+  --card-sub-headline: var(--color-foreground-text-subtle);
+  --card-body-color: var(--color-foreground-text-defined);
+  --card-divider: var(--color-foreground-border-discrete);
+  --card-icon-color: var(--color-foreground-icon-strong);
+  /* Paddings */
+  --card-body-padding: 0 16px;
+  --card-header-padding: 16px;
+  --card-slotted-padding: 16px;
+  --card-divider-margin: 16px 16px 0;
+}
+.tl-card--primary {
+  --card-box: var(--card-box-primary);
+}
+.tl-card.tl-card--mode-variant-secondary {
+  --card-box: var(--card-box-secondary);
+}
+
+.scania .tl-card {
+  /* Paddings */
+  --card-body-padding: 0 16px;
+  --card-header-padding: 16px;
+  --card-slotted-padding: 16px;
+  --card-divider-margin: 16px 16px 0;
+}
+.scania .tl-card--primary {
+  --card-box: var(--card-box-primary);
+}
+.scania .tl-card--secondary {
+  --card-box: var(--card-box-primary);
+}
+
+.traton .tl-card {
+  --card-box: none;
+  --card-background: transparent;
+  --card-box-hover: none;
+  --card-box-pressed: none;
+  /* Paddings and margins */
+  --card-body-padding: 0;
+  --card-header-padding: 16px 16px 16px 0;
+  --card-slotted-padding: 16px 16px 16px 0;
+  --card-divider-margin: 16px 0 0;
+}
+.traton .tl-card--primary {
+  --card-box: none;
+  --card-background: var(--card-background-secondary);
+}
+.traton .tl-card--secondary {
+  --card-box: none;
+  --card-background: var(--card-background-primary);
+}
+
+/* Dark mode */
+.tds-mode-dark {
+  --card-background-primary: var(--tds-grey-900);
+  --card-background-secondary: var(--tds-grey-850);
+}
+.tds-mode-dark .tl-card {
+  --card-background: var(--card-background-primary);
+}
+.tds-mode-dark .tl-card--primary {
+  --card-box: var(--card-box-primary);
+  --card-background: var(--card-background-primary);
+}
+.tds-mode-dark .tl-card--secondary {
+  --card-box: var(--card-box-primary);
+  --card-background: var(--card-background-secondary);
+}
+
+.traton .tds-mode-dark .tl-card--primary {
+  --card-background: var(--color-background-base);
+}
+
+/* Typography Usage mixins */
+.tl-card {
+  box-sizing: border-box;
+}
+.tl-card * {
+  box-sizing: border-box;
+}
+.tl-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  box-shadow: var(--card-box);
+  background-color: var(--card-background);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.tl-card--clickable {
+  width: 100%;
+  border: none;
+  text-align: left;
+  padding: 0;
+}
+.tl-card--clickable:focus-visible {
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
+}
+.tl-card--clickable:active {
+  box-shadow: var(--card-box-pressed);
+}
+.tl-card--clickable:hover {
+  box-shadow: var(--card-box-hover);
+  cursor: pointer;
+}
+.tl-card--stretch {
+  height: 100%;
+  width: 100%;
+}
+
+.tl-card__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);
+  padding: var(--card-header-padding);
+  display: flex;
+  align-items: center;
+}
+.tl-card__header--below {
+  padding-top: 16px;
+}
+
+.tl-card__thumbnail {
+  inline-size: 36px;
+  block-size: 36px;
+  border-radius: 100%;
+  margin-right: 16px;
+}
+
+.tl-card__headings {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  gap: 4px;
+}
+
+.tl-card__title {
+  color: var(--card-headline);
+}
+
+.tl-card__subtitle {
+  color: var(--card-sub-headline);
+}
+
+.tl-card__image {
+  inline-size: 100%;
+  block-size: auto;
+  display: block;
+}
+
+.tl-card__divider {
+  display: block;
+  margin: var(--card-divider-margin);
+  background-color: var(--card-divider);
+  block-size: 1px;
+}
+
+.tl-card__body {
+  display: block;
+  word-wrap: break-word;
+}
+.tl-card--stretch .tl-card__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.tl-card__content {
+  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);
+  color: var(--card-body-color);
+  padding: var(--card-body-padding);
+  margin-bottom: 16px;
+  margin-top: 16px;
+  max-inline-size: 336px;
+}
+.tl-card--stretch .tl-card__body .tl-card__content {
+  max-inline-size: unset;
+  flex-grow: 1;
+}
+.tl-card--expandable .tl-card__body .tl-card__content {
+  display: none;
+}
+.tl-card--expanded .tl-card__body .tl-card__content {
+  display: block;
+}
+
+.tl-card__bottom-row {
+  display: flex;
+  padding: var(--card-slotted-padding);
+  align-items: flex-end;
+  align-self: stretch;
+}
+
+.tl-card__actions {
+  display: flex;
+  align-items: flex-end;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.tl-card--expandable .tl-card__body .tl-card__header .tl-icon {
+  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
+}
+.tl-card--expanded .tl-card__body .tl-card__header .tl-icon {
+  transform: rotate(180deg);
+}
+.tl-card__bottom-row .tl-icon {
+  color: var(--card-icon-color);
+}

package/dist/tl-checkbox-vars.css

@@ -0,0 +1,38 @@
+.tl-checkbox {
+  --checkbox-label: var(--color-foreground-text-strong);
+  --checkbox-label-disabled: var(--color-foreground-text-disabled);
+  --checkbox-icon: var(--color-foreground-icon-strong);
+  --checkbox-fill: var(--color-foreground-icon-inverse-strong);
+  --checkbox-fill-disabled: var(--color-background-accent-primary-disabled);
+  --checkbox-border: var(--color-foreground-border-strong);
+  --checkbox-border-hover: var(--color-foreground-border-subtle);
+  --checkbox-border-focus: var(--color-foreground-border-accent-focus);
+  --checkbox-border-disabled: var(--color-foreground-border-discrete);
+  --checkbox-background-opacity-hover: 0.12;
+  --checkbox-background-opacity-focus: 0.24;
+  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23ffffff'/></svg>");
+  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
+}
+
+.tds-mode-dark .tl-checkbox {
+  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
+  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%2356657A'/></svg>");
+}
+
+.scania .tl-checkbox {
+  --checkbox-focus-width: 20px;
+  --checkbox-focus-height: 20px;
+  --checkbox-focus-left: 2px;
+  --checkbox-focus-top: 2px;
+}
+
+.traton .tl-checkbox {
+  --checkbox-focus-width: 22px;
+  --checkbox-focus-height: 22px;
+  --checkbox-focus-left: 1px;
+  --checkbox-focus-top: 1px;
+}