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

package/dist/collection/components/datetime/datetime.css

@@ -1,14 +1,20 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
-.tds-datetime-input[type=datetime-local] ~ .icon-time, .tds-datetime-input[type=date] ~ .icon-time, .tds-datetime-input[type=month] ~ .icon-time, .tds-datetime-input[type=week] ~ .icon-time,
+.tds-datetime-input[type=datetime-local] ~ .icon-time,
 .tds-datetime-input-md[type=datetime-local] ~ .icon-time,
+.tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
+  display: none;
+}
+.tds-datetime-input[type=date] ~ .icon-time,
 .tds-datetime-input-md[type=date] ~ .icon-time,
+.tds-datetime-input-sm[type=date] ~ .icon-time {
+  display: none;
+}
+.tds-datetime-input[type=month] ~ .icon-time,
 .tds-datetime-input-md[type=month] ~ .icon-time,
+.tds-datetime-input-sm[type=month] ~ .icon-time {
+  display: none;
+}
+.tds-datetime-input[type=week] ~ .icon-time,
 .tds-datetime-input-md[type=week] ~ .icon-time,
-.tds-datetime-input-sm[type=datetime-local] ~ .icon-time,
-.tds-datetime-input-sm[type=date] ~ .icon-time,
-.tds-datetime-input-sm[type=month] ~ .icon-time,
 .tds-datetime-input-sm[type=week] ~ .icon-time {
   display: none;
 }
@@ -20,21 +26,17 @@
 
 .tds-datetime-input {
   box-sizing: border-box;
-  border-radius: var(--datetime-border-radius);
+  border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: none;
   outline: none;
   height: 100%;
-  color: var(--datetime-text);
-  background-color: var(--datetime-background);
-  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(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
 .tds-datetime-input * {
@@ -42,46 +44,109 @@
 }
 .tds-datetime-input::placeholder {
   opacity: 1;
-  color: var(--datetime-placeholder);
+  color: var(--tds-datetime-placeholder);
 }
 .tds-datetime-input:focus::placeholder {
-  color: var(--datetime-placeholder-focus);
+  color: var(--tds-datetime-placeholder-color-focus);
 }
 .tds-datetime-input:disabled {
-  background-color: var(--datetime-background-disabled);
-  color: var(--datetime-text-disabled);
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
   cursor: not-allowed;
 }
 .tds-datetime-input:disabled::placeholder {
-  color: var(--datetime-placeholder-disabled);
+  color: var(--tds-datetime-placeholder-disabled);
 }
 .tds-datetime-input:disabled ~ .tds-datetime-label-inside {
-  color: var(--datetime-label-disabled);
+  color: var(--tds-datetime-label-disabled);
+}
+
+.tds-datetime-input-md {
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-16);
+}
+.tds-datetime-input-md * {
+  box-sizing: border-box;
+}
+.tds-datetime-input-md::placeholder {
+  opacity: 1;
+  color: var(--tds-datetime-placeholder);
+}
+.tds-datetime-input-md:focus::placeholder {
+  color: var(--tds-datetime-placeholder-color-focus);
+}
+.tds-datetime-input-md:disabled {
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
+  cursor: not-allowed;
+}
+.tds-datetime-input-md:disabled::placeholder {
+  color: var(--tds-datetime-placeholder-disabled);
+}
+.tds-datetime-input-md:disabled ~ .tds-datetime-label-inside {
+  color: var(--tds-datetime-label-disabled);
 }
 
-.tds-datetime-input-md,
 .tds-datetime-input-sm {
+  box-sizing: border-box;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-datetime-color);
+  background-color: var(--tds-datetime-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
+.tds-datetime-input-sm * {
+  box-sizing: border-box;
+}
+.tds-datetime-input-sm::placeholder {
+  opacity: 1;
+  color: var(--tds-datetime-placeholder);
+}
+.tds-datetime-input-sm:focus::placeholder {
+  color: var(--tds-datetime-placeholder-color-focus);
+}
+.tds-datetime-input-sm:disabled {
+  background-color: var(--tds-datetime-background-disabled);
+  color: var(--tds-datetime-color-disabled);
+  cursor: not-allowed;
+}
+.tds-datetime-input-sm:disabled::placeholder {
+  color: var(--tds-datetime-placeholder-disabled);
+}
+.tds-datetime-input-sm:disabled ~ .tds-datetime-label-inside {
+  color: var(--tds-datetime-label-disabled);
+}
 
 .tds-datetime-container {
-  border-radius: var(--datetime-border-radius);
+  border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
-  background-color: var(--datetime-background);
+  background-color: var(--tds-datetime-background);
+  border-bottom: 1px solid var(--tds-datetime-border-bottom);
   transition: border-bottom-color 200ms ease;
-  border-left: 1px solid var(--datetime-border-color-left);
-  border-right: 1px solid var(--datetime-border-color-right);
-  border-bottom: 1px solid var(--datetime-border-color-bottom);
-  border-top: 1px solid var(--datetime-border-color-top);
 }
 .tds-datetime-container:hover {
-  border-left: 1px solid var(--datetime-border-color-left-hover);
-  border-right: 1px solid var(--datetime-border-color-right-hover);
-  border-bottom: 1px solid var(--datetime-border-color-bottom-hover);
-  border-top: 1px solid var(--datetime-border-color-top-hover);
+  border-bottom-color: var(--tds-datetime-border-bottom-hover);
 }
 .tds-form-datetime-md .tds-datetime-container {
   height: 48px;
@@ -102,31 +167,23 @@
   transform: translateY(-50%);
   right: 18px;
   pointer-events: none;
-  color: var(--datetime-icon);
+  color: var(--tds-datetime-icon);
 }
 
 .tds-datetime-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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
-  color: var(--datetime-label);
+  color: var(--tds-datetime-label-color);
 }
 
 .tds-datetime-label-inside {
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   position: absolute;
   pointer-events: none;
-  color: var(--datetime-label-inside);
+  color: var(--tds-datetime-label-inside-color);
   left: 16px;
 }
 .tds-datetime-label-inside.iphone {
@@ -142,17 +199,6 @@
   min-width: auto;
 }
 
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside,
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
-  font-family: var(--detail-07-font-family);
-  font-size: var(--detail-07-font-size);
-  line-height: var(--detail-07-line-height);
-  font-weight: var(--detail-07-font-weight);
-  letter-spacing: var(--detail-07-letter-spacing);
-  text-transform: var(--detail-07-text-transform);
-  transition: 0.1s ease all;
-}
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input {
   padding-top: var(--tds-spacing-element-24);
   padding-bottom: 15px;
@@ -160,22 +206,68 @@
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
   top: 20px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md,
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-datetime-placeholder-color-focus);
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
+  top: 16px;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-datetime-placeholder-color-focus);
+}
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
   padding-top: var(--tds-spacing-element-20);
   padding-bottom: 11px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
   top: 16px;
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
-  top: 12px;
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ::placeholder {
+  color: transparent;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-datetime-placeholder-color-focus);
 }
-.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
 .tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
   top: 8px;
 }
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input ~ .tds-datetime-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 12px;
+}
 
 .tds-datetime-bar {
   position: absolute;
@@ -184,11 +276,11 @@
 .tds-datetime-bar::before, .tds-datetime-bar::after {
   content: "";
   height: 2px;
+  top: 54px;
   width: 0;
   position: absolute;
-  background: var(--datetime-highlight);
+  background: var(--tds-datetime-bar);
   transition: 0.35s ease all;
-  top: 54px;
 }
 .tds-form-datetime-md .tds-datetime-bar::before, .tds-form-datetime-md .tds-datetime-bar::after {
   top: 46px;
@@ -207,16 +299,12 @@
 }
 
 .tds-datetime-helper {
-  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);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   flex-basis: 100%;
   padding-top: var(--tds-spacing-element-4);
-  color: var(--datetime-helper);
+  color: var(--tds-datetime-helper);
 }
 .tds-datetime-helper .tds-helper {
   display: inline-flex;
@@ -224,54 +312,69 @@
 }
 
 .tds-form-datetime-disabled .tds-datetime-container {
-  cursor: not-allowed;
-  border-color: transparent;
+  border-bottom-color: transparent;
 }
 .tds-form-datetime-disabled .datetime-icon tds-icon {
-  color: var(--datetime-icon-disabled);
+  color: var(--tds-datetime-icon-disabled);
 }
 .tds-form-datetime-disabled .tds-datetime-label {
-  color: var(--datetime-label-disabled);
+  color: var(--tds-datetime-label-disabled);
   cursor: not-allowed;
 }
 
 .tds-form-datetime-success .tds-datetime-container {
-  border-left: 1px solid var(--datetime-border-color-left-success);
-  border-right: 1px solid var(--datetime-border-color-right-success);
-  border-bottom: 1px solid var(--datetime-border-color-bottom-success);
-  border-top: 1px solid var(--datetime-border-color-top-success);
+  border-bottom-color: var(--tds-datetime-border-bottom-success);
   color: var(--tds-datetime-color-success);
 }
-.tds-form-datetime-success .tds-datetime-bar::before,
-.tds-form-datetime-success .tds-datetime-bar::after {
+.tds-form-datetime-success .tds-datetime-bar::before, .tds-form-datetime-success .tds-datetime-bar::after {
   background: var(--tds-datetime-bar-sucess);
 }
 
 .tds-form-datetime-error .tds-datetime-helper {
-  color: var(--datetime-helper-error);
+  color: var(--tds-datetime-helper-error);
 }
 .tds-form-datetime-error .tds-datetime-container {
-  border-left: 1px solid var(--datetime-border-color-left-error);
-  border-right: 1px solid var(--datetime-border-color-right-error);
-  border-bottom: 1px solid var(--datetime-border-color-bottom-error);
-  border-top: 1px solid var(--datetime-border-color-top-error);
+  border-bottom-color: var(--tds-datetime-border-bottom-error);
 }
-.tds-form-datetime-error .tds-datetime-bar::before,
-.tds-form-datetime-error .tds-datetime-bar::after {
-  background: var(--datetime-highlight-error);
+.tds-form-datetime-error .tds-datetime-bar::before, .tds-form-datetime-error .tds-datetime-bar::after {
+  background: var(--tds-datetime-bar-error);
 }
 .tds-form-datetime-error .datetime-icon tds-icon {
-  color: var(--datetime-icon-error);
+  color: var(--tds-datetime-icon-error);
+}
+
+.tds-datetime-textcounter {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-datetime-textcounter);
+  float: right;
+}
+.tds-datetime-textcounter .tds-datetime-textcounter-divider {
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-datetime-textcounter-divider);
 }
 
 /* Datetime picker icon remove testing */
-input[type=datetime-local]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-calendar-picker-indicator,
+input[type=datetime-local]::-webkit-inner-spin-button,
+input[type=datetime-local]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 input[type=date]::-webkit-inner-spin-button,
-input[type=date]::-webkit-calendar-picker-indicator,
+input[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 input[type=month]::-webkit-inner-spin-button,
-input[type=month]::-webkit-calendar-picker-indicator,
+input[type=month]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 input[type=week]::-webkit-inner-spin-button,
-input[type=week]::-webkit-calendar-picker-indicator,
+input[type=week]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 input[type=time]::-webkit-inner-spin-button,
 input[type=time]::-webkit-calendar-picker-indicator {
   opacity: 0;
@@ -282,12 +385,4 @@ input[type=time]::-webkit-calendar-picker-indicator {
   .type-date .icon-datetime-local {
     display: none;
   }
-}
-.tds-form-datetime.tds-datetime-focus .tds-datetime-container {
-  border-left: 1px solid var(--datetime-border-color-left-focus);
-  border-right: 1px solid var(--datetime-border-color-right-focus);
-  border-bottom: 1px solid var(--datetime-border-color-bottom-focus);
-  border-top: 1px solid var(--datetime-border-color-top-focus);
-  outline: 2px solid var(--datetime-outline-color-focus);
-  outline-offset: -1px;
 }

package/dist/collection/components/divider/divider.css

@@ -1,10 +1,25 @@
 .divider {
   box-sizing: border-box;
-  background-color: var(--divider-color);
+  background-color: var(--tds-divider-background);
 }
 .divider * {
   box-sizing: border-box;
 }
+.divider.discrete {
+  background-color: var(--tds-divider-background-discrete);
+}
+.divider.subtle {
+  background-color: var(--tds-divider-background-subtle);
+}
+.divider.soft {
+  background-color: var(--tds-divider-background-soft);
+}
+.divider.defined {
+  background-color: var(--tds-divider-background-defined);
+}
+.divider.dark-blue {
+  background-color: var(--tds-divider-background-dark-blue);
+}
 .divider.horizontal {
   width: 100%;
   height: 1px;

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -1,36 +1,28 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
-  background-color: var(--dropdown-option-background);
+  background-color: var(--tds-dropdown-option-background);
 }
 :host * {
   box-sizing: border-box;
 }
 :host .dropdown-option {
-  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(--dropdown-text);
-  border-bottom: 1px solid var(--dropdown-option-border);
+  color: var(--tds-dropdown-option-color);
+  border-bottom: 1px solid var(--tds-dropdown-option-border);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   overflow-wrap: anywhere;
   transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
 :host .dropdown-option.selected {
-  background-color: var(--dropdown-option-background-selected);
+  background-color: var(--tds-dropdown-option-background-selected);
 }
 :host .dropdown-option.disabled {
-  color: var(--dropdown-option-disabled);
+  color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  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;
+  outline: 2px solid var(--tds-dropdown-option-focus);
+  box-shadow: inset 0 0 0 3px var(--tds-white);
   outline-offset: -2px;
 }
 :host .dropdown-option button {
@@ -77,11 +69,11 @@
   padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
-  background-color: var(--dropdown-option-background-hover);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: pointer;
 }
 :host .dropdown-option:hover.disabled {
-  background-color: var(--dropdown-option-background);
+  border-bottom-color: var(--tds-dropdown-option-border-hover);
   cursor: not-allowed;
 }