@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0

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

@@ -1,10 +1,7 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 .card {
   box-sizing: border-box;
-  box-shadow: var(--card-box);
-  background-color: var(--card-background);
+  box-shadow: var(--tds-card-box);
+  background-color: var(--tds-card-background);
   display: block;
   border-radius: 4px;
   overflow: hidden;
@@ -13,17 +10,13 @@
   box-sizing: border-box;
 }
 .card.clickable:hover {
-  box-shadow: var(--card-box-hover);
+  box-shadow: var(--tds-card-box-hover);
   cursor: pointer;
 }
 .card .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);
+  font: var(--tds-headline-06);
+  letter-spacing: var(--tds-headline-06-ls);
+  padding: 16px;
   display: flex;
   align-items: center;
 }
@@ -52,19 +45,18 @@
 }
 .card .header-subheader .header,
 .card .header-subheader slot[name=header] {
-  color: var(--card-headline);
+  color: var(--tds-card-headline);
 }
 .card .header-subheader .subheader,
 .card .header-subheader slot[name=subheader] {
-  color: var(--card-sub-headline);
+  color: var(--tds-card-sub-headline);
 }
 .card .card-body-img {
   width: 100%;
 }
-.card tds-divider {
-  display: block;
+.card .tds-divider {
   margin: 16px 16px 0;
-  background-color: var(--card-divider);
+  background-color: var(--tds-card-divider);
   height: 1px;
 }
 .card .card-body {
@@ -72,22 +64,19 @@
   word-wrap: break-word;
 }
 .card slot[name=body]::slotted(*) {
-  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);
+  /* !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;
   margin-bottom: 16px;
   margin-top: 16px;
   max-width: 336px;
 }
 .card slot[name=actions]::slotted(*) {
   display: flex;
-  padding: var(--card-slotted-padding);
-  color: var(--card-icon-color);
+  padding: 16px;
+  color: var(--tds-card-icon-color);
 }
 
 button {
@@ -101,7 +90,7 @@ button:focus-visible {
   outline-offset: -2px;
 }
 button:active {
-  box-shadow: var(--card-box-pressed);
+  box-shadow: var(--tds-card-box-pressed);
 }
 
 .below-header-stretch,

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

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

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

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