@scania/tegel 1.33.0-tegel-cli-beta.5 → 1.34.0-multibrand-beta.0

package/dist/collection/components/card/card.css

@@ -1,7 +1,10 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .card {
   box-sizing: border-box;
-  box-shadow: var(--tds-card-box);
-  background-color: var(--tds-card-background);
+  box-shadow: var(--card-box);
+  background-color: var(--card-background);
   display: block;
   border-radius: 4px;
   overflow: hidden;
@@ -10,13 +13,17 @@
   box-sizing: border-box;
 }
 .card.clickable:hover {
-  box-shadow: var(--tds-card-box-hover);
+  box-shadow: var(--card-box-hover);
   cursor: pointer;
 }
 .card .card-header {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
-  padding: 16px;
+  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;
 }
@@ -40,22 +47,24 @@
 .card .header-subheader {
   display: flex;
   flex-direction: column;
+  width: 100%;
   gap: 4px;
 }
 .card .header-subheader .header,
 .card .header-subheader slot[name=header] {
-  color: var(--tds-card-headline);
+  color: var(--card-headline);
 }
 .card .header-subheader .subheader,
 .card .header-subheader slot[name=subheader] {
-  color: var(--tds-card-sub-headline);
+  color: var(--card-sub-headline);
 }
 .card .card-body-img {
   width: 100%;
 }
-.card .tds-divider {
+.card tds-divider {
+  display: block;
   margin: 16px 16px 0;
-  background-color: var(--tds-card-divider);
+  background-color: var(--card-divider);
   height: 1px;
 }
 .card .card-body {
@@ -63,19 +72,22 @@
   word-wrap: break-word;
 }
 .card slot[name=body]::slotted(*) {
-  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  font: var(--tds-detail-03) !important;
-  letter-spacing: var(--tds-detail-03-ls) !important;
-  color: var(--tds-card-body-color);
-  padding: 0 16px;
+  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-width: 336px;
 }
 .card slot[name=actions]::slotted(*) {
   display: flex;
-  padding: 16px;
-  color: var(--tds-card-icon-color);
+  padding: var(--card-slotted-padding);
+  color: var(--card-icon-color);
 }
 
 button {
@@ -89,7 +101,7 @@ button:focus-visible {
   outline-offset: -2px;
 }
 button:active {
-  box-shadow: var(--tds-card-box-pressed);
+  box-shadow: var(--card-box-pressed);
 }
 
 .below-header-stretch,

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   align-items: center;
   position: relative;
@@ -6,9 +9,13 @@
 
 .tds-checkbox {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-checkbox-text);
+  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(--checkbox-label);
   display: flex;
   align-items: center;
   margin-left: -4px;
@@ -30,7 +37,7 @@
   align-self: flex-start;
 }
 .tds-checkbox input[type=checkbox] + label {
-  color: var(--tds-checkbox-color);
+  color: var(--checkbox-label);
   padding-left: var(--tds-spacing-element-4);
   padding-top: var(--tds-spacing-element-4);
   padding-bottom: var(--tds-spacing-element-4);
@@ -59,8 +66,8 @@
   border-radius: 4px;
 }
 .tds-checkbox input[type=checkbox]::after {
-  border: 1px solid var(--tds-checkbox-interaction-01);
-  background-color: var(--tds-checkbox-interaction-02);
+  border: 1px solid var(--checkbox-border);
+  background-color: var(--checkbox-fill);
   width: 16px;
   height: 16px;
   left: 4px;
@@ -68,38 +75,38 @@
   border-radius: 2px;
 }
 .tds-checkbox input[type=checkbox]:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--checkbox-background-opacity-hover);
 }
 .tds-checkbox input[type=checkbox]:focus::before {
-  background-color: var(--tds-checkbox-background-focus);
-  opacity: var(--tds-checkbox-background-opacity-focus);
+  background-color: var(--checkbox-border-focus);
+  opacity: var(--checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
-.tds-checkbox input[type=checkbox]:disabled, .tds-checkbox input[type=checkbox].disabled {
+.tds-checkbox input[type=checkbox]:disabled {
   cursor: not-allowed;
 }
-.tds-checkbox input[type=checkbox]:disabled::after, .tds-checkbox input[type=checkbox].disabled::after {
-  border-color: var(--tds-checkbox-border-color-disabled-after);
+.tds-checkbox input[type=checkbox]:disabled::after {
+  border-color: var(--checkbox-border-disabled);
 }
-.tds-checkbox input[type=checkbox]:disabled + label, .tds-checkbox input[type=checkbox].disabled + label {
-  color: var(--tds-checkbox-disabled);
+.tds-checkbox input[type=checkbox]:disabled + label {
+  color: var(--checkbox-label-disabled);
   cursor: not-allowed;
 }
-.tds-checkbox input[type=checkbox]:disabled:hover::before, .tds-checkbox input[type=checkbox].disabled:hover::before {
+.tds-checkbox input[type=checkbox]:disabled:hover::before {
   display: none;
 }
 .tds-checkbox input[type=checkbox]:checked::after {
-  background-image: var(--tds-checkbox-background-img);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-image);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
 .tds-checkbox input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-checkbox-background-hover);
-  opacity: var(--tds-checkbox-background-opacity-hover);
+  background-color: var(--checkbox-border-hover);
+  opacity: var(--checkbox-background-opacity-hover);
 }
-.tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before, .tds-checkbox input[type=checkbox]:checked.disabled:hover::before, .tds-checkbox input[type=checkbox]:checked.disabled::before {
+.tds-checkbox input[type=checkbox]:checked:disabled:hover::before, .tds-checkbox input[type=checkbox]:checked:disabled::before {
   display: block;
   width: 16px;
   height: 16px;
@@ -107,14 +114,14 @@
   top: 4px;
   border: 1px solid #b0b7c4;
 }
-.tds-checkbox input[type=checkbox]:checked:disabled::after, .tds-checkbox input[type=checkbox]:checked.disabled::after {
-  background-image: var(--tds-checkbox-background-img-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+.tds-checkbox input[type=checkbox]:checked:disabled::after {
+  background-image: var(--checkbox-background-image-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }
 .tds-checkbox input[type=checkbox]:indeterminate::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate);
-  background-color: var(--tds-checkbox-interaction-01);
+  background-image: var(--checkbox-background-image-indeterminate);
+  background-color: var(--checkbox-border);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -127,7 +134,7 @@
   border: 1px solid #b0b7c4;
 }
 .tds-checkbox input[type=checkbox]:indeterminate:disabled::after {
-  background-image: var(--tds-checkbox-background-img-indeterminate-disabled);
-  background-color: var(--tds-checkbox-interaction-02);
-  color: var(--tds-checkbox-color-disabled-after);
+  background-image: var(--checkbox-background-image-indeterminate-disabled);
+  background-color: var(--checkbox-fill-disabled);
+  color: var(--checkbox-border-disabled);
 }

package/dist/collection/components/chip/chip.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 /* Styling for slotted content */
 ::slotted(*) {
   display: inline-flex;
@@ -13,22 +16,26 @@
   display: inline-flex;
 }
 .component .tds-chip-component label {
-  background-color: var(--tds-chips-background);
-  color: var(--tds-chips-color);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  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);
+  background-color: var(--chips-background);
+  color: var(--chips-text);
   display: inline-flex;
   align-items: center;
-  border-radius: 16px;
+  border-radius: var(--chips-border-radius);
   cursor: pointer;
   white-space: nowrap;
 }
 .component .tds-chip-component label:hover {
-  background-color: var(--tds-chips-background-hover);
+  background-color: var(--chips-background-hover);
 }
 .component .tds-chip-component.disabled label {
-  background-color: var(--tds-chips-background-disabled);
-  color: var(--tds-chips-text-disabled);
+  background-color: var(--chips-background-disabled);
+  color: var(--chips-text-disabled);
   cursor: default;
   pointer-events: none;
 }
@@ -36,12 +43,12 @@
   pointer-events: none;
 }
 .component .tds-chip-component.disabled input[type=radio]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active-disabled);
-  color: var(--tds-chips-text-checked-disabled);
+  background-color: var(--chips-background-active);
+  color: var(--chips-text-checked-disabled);
 }
 .component .tds-chip-component.disabled input[type=checkbox]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active-disabled);
-  color: var(--tds-chips-text-checked-disabled);
+  background-color: var(--chips-background-active);
+  color: var(--chips-text-checked-disabled);
 }
 .component .tds-chip-component.lg label {
   height: 32px;
@@ -77,16 +84,21 @@
   z-index: -1;
 }
 .component .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  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;
-  z-index: 1;
-  background-color: var(--tds-chips-background-focus);
+  background-color: var(--chips-background-focus);
+}
+.component .tds-chip-component input:checked:focus-visible + label {
+  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;
+  background-color: var(--chip-focused-on-selected);
 }
 .component .tds-chip-component input:checked + label {
-  background-color: var(--tds-chips-background-active);
-  color: var(--tds-chips-color-active);
+  background-color: var(--chips-background-active);
+  color: var(--chips-text-active);
 }
 .component .tds-chip-component input:checked + label:hover {
-  background-color: var(--tds-chips-background-active-hover);
+  background-color: var(--chips-background-active-hover);
 }