npm - @scania/tegel - Versions diffs - 1.54.0 → 1.55.0-var-batch-8-beta - Mend

@scania/tegel 1.54.0 → 1.55.0-var-batch-8-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (302) hide show

package/dist/collection/components/table/table-body-cell/table-body-cell.css CHANGED Viewed

@@ -11,7 +11,7 @@
   padding: var(--tds-spacing-element-16);
   min-width: 192px;
   vertical-align: top;
-  background-color: transparent;
+  background-color: var(--row-bg);
   transition: background-color 200ms ease;
 }
 :host(.tds-table__body-cell) td * {

package/dist/collection/components/table/table-body-row/table-body-row.css CHANGED Viewed

@@ -2,7 +2,8 @@
   box-sizing: border-box;
   display: table-row;
   border-bottom: 1px solid var(--tds-table-divider);
-  background-color: var(--tds-table-body-row-background);
+  --row-bg: var(--tds-table-body-row-background);
+  background-color: var(--row-bg);
   transition: background-color 200ms ease;
   color: var(--tds-table-color);
 }
@@ -20,15 +21,15 @@
 }
 :host(.tds-table__row:hover) {
-  background-color: var(--tds-table-body-row-background-hover);
+  --row-bg: var(--tds-table-body-row-background-hover);
 }
 :host(.tds-table__row--selected) {
-  background-color: var(--tds-table-body-row-background-selected);
+  --row-bg: var(--tds-table-body-row-background-selected);
 }
 :host(.tds-table__row--selected:hover) {
-  background-color: var(--tds-table-body-row-background-selected-hover);
+  --row-bg: var(--tds-table-body-row-background-selected-hover);
 }
 :host(.tds-table__row--hidden) {

package/dist/collection/components/text-field/text-field.css CHANGED Viewed

@@ -1,6 +1,7 @@
+/* Typography Usage mixins */
 .text-field-input-lg {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -9,7 +10,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
 }
@@ -31,7 +37,7 @@
 .text-field-input-md {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -40,7 +46,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
@@ -62,7 +73,7 @@
 .text-field-input-sm {
   all: unset;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -71,7 +82,12 @@
   height: 100%;
   color: var(--tds-text-field-color);
   background-color: var(--tds-text-field-background);
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-16);
 }
@@ -92,18 +108,19 @@
 }
 .text-field-container {
-  border-radius: 4px 4px 0 0;
   display: flex;
   position: relative;
   height: 56px;
   box-sizing: border-box;
   background-color: var(--tds-text-field-background);
-  border-bottom: 1px solid var(--tds-text-field-border-bottom);
-  border-top: 1px solid transparent;
-  transition: border-bottom-color 200ms ease;
+  border-style: solid;
+  border-color: var(--tds-text-field-border-bottom);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
+  transition: border-color 200ms ease;
 }
 .text-field-container:hover {
-  border-bottom-color: var(--tds-text-field-border-bottom-hover);
+  border-color: var(--tds-text-field-border-bottom-hover);
 }
 .form-text-field-md .text-field-container {
   height: 48px;
@@ -112,8 +129,10 @@
   height: 40px;
 }
 .text-field-container:focus-within {
-  border: 2px solid var(--component--focus-ring-color-strong);
-  margin: 0 -2px;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .text-field-input-container {
@@ -127,7 +146,12 @@
 }
 .text-field-label-outside > * {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   display: block;
   margin-bottom: var(--tds-spacing-element-8);
@@ -135,7 +159,12 @@
 }
 .text-field-label-inside {
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   position: absolute;
   pointer-events: none;
@@ -203,26 +232,46 @@
   color: var(--tds-text-field-placeholder);
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  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);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  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);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 8px;
 }
 .form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-lg ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-lg ~ .text-field-label-inside {
-  font: var(--tds-detail-07);
+  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);
   letter-spacing: var(--tds-detail-07-ls);
   transition: 0.1s ease all;
   top: 12px;
 }
 .text-field-helper {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
@@ -235,16 +284,15 @@
   margin-left: auto;
 }
-.form-text-field-disabled .text-field-container {
+.form-text-field-disabled {
   cursor: not-allowed;
-  border-bottom-color: transparent;
 }
-.form-text-field-disabled .text-field-slot-wrap-prefix > *,
-.form-text-field-disabled .text-field-slot-wrap-suffix > * {
-  color: var(--tds-text-field-ps-color-disabled);
+.form-text-field-disabled .text-field-container,
+.form-text-field-disabled .text-field-label-outside {
+  opacity: var(--tds-text-field-opacity-disabled);
 }
-.form-text-field-disabled .text-field-label-outside > * {
-  color: var(--tds-text-field-label-disabled);
+.form-text-field-disabled .text-field-container {
+  cursor: not-allowed;
 }
 .form-text-field-disabled .text-field-helper {
   color: var(--tds-text-field-helper-disabled);
@@ -268,7 +316,7 @@
   cursor: default;
 }
 .form-text-field-readonly .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-readonly);
+  border-color: var(--tds-text-field-border-bottom-readonly);
 }
 .form-text-field-readonly .text-field-icon__readonly {
   display: block;
@@ -285,14 +333,14 @@
 }
 .form-text-field-success:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-success);
+  border-color: var(--tds-text-field-border-bottom-success);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-helper {
   color: var(--tds-text-field-helper-error);
 }
 .form-text-field-error:not(.form-text-field-readonly) .text-field-container {
-  border-bottom-color: var(--tds-text-field-border-bottom-error);
+  border-color: var(--tds-text-field-border-bottom-error);
 }
 .text-field-helper-error-state {
@@ -306,7 +354,12 @@
 }
 .text-field-textcounter {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-text-field-textcounter);
   float: right;
@@ -324,7 +377,12 @@
 .text-field-slot-wrap-prefix,
 .text-field-slot-wrap-suffix {
   align-self: center;
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   margin: 0 0 0 14px;
   color: var(--tds-text-field-ps-color);
@@ -340,6 +398,7 @@
 .text-field-slot-wrap-suffix {
   margin: 0 14px 0 0;
+  color: var(--tds-text-field-ps-color-suffix);
 }
 .text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
   margin: 0 2px 0 0;

package/dist/collection/components/textarea/textarea.css CHANGED Viewed

@@ -1,5 +1,6 @@
+/* Typography Usage mixins */
 .textarea-container {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   position: relative;
   box-sizing: border-box;
   height: auto;
@@ -21,7 +22,7 @@
 }
 .textarea-input {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
   width: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -30,13 +31,20 @@
   height: 100%;
   color: var(--tds-textarea-color);
   background-color: var(--tds-textarea-background);
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   display: block;
   resize: vertical;
-  border-bottom: 1px solid var(--tds-textarea-border-bottom);
-  transition: border-bottom-color 200ms ease;
+  border-style: solid;
+  border-color: var(--tds-textarea-border-bottom);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
+  transition: border-color 200ms ease;
 }
 .textarea-input:read-only {
   background-color: var(--tds-textarea-read-only-background);
@@ -47,18 +55,13 @@
   transition: color 200ms ease;
 }
 .textarea-input:disabled {
-  background-color: var(--tds-textarea-disabled-background);
-  color: var(--tds-textarea-disabled-color);
   cursor: not-allowed;
 }
-.textarea-input:disabled::placeholder {
-  color: var(--tds-textarea-disabled-placeholder);
-}
 .textarea-input::-webkit-resizer {
   display: none;
 }
 .textarea-input:hover {
-  border-bottom-color: var(--tds-textarea-border-bottom-hover);
+  border-color: var(--tds-textarea-border-bottom-hover);
 }
 .textarea-input:hover::placeholder {
   color: var(--tds-textarea-placeholder-hover);
@@ -68,8 +71,6 @@
   box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
-  border-radius: 0;
-  border-bottom: 1px solid transparent;
 }
 .textarea-resizer-icon {
@@ -85,10 +86,17 @@
 }
 .textarea-resizer-icon svg {
   display: block;
+  width: calc(var(--component-textarea-size-resize-width) * 1px);
+  height: calc(var(--component-textarea-size-resize-height) * 1px);
 }
 .textarea-label {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   display: block;
   z-index: 1;
@@ -97,7 +105,12 @@
 }
 .textarea-container.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-02);
+  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);
   letter-spacing: var(--tds-detail-02-ls);
   transition: 0.1s ease all;
   color: var(--tds-textarea-label-inside-color);
@@ -105,9 +118,6 @@
   top: var(--tds-spacing-element-20);
   left: var(--tds-spacing-element-16);
 }
-.textarea-container.textarea-label-inside.textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
-}
 .textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
 }
@@ -119,18 +129,33 @@
   color: var(--tds-textarea-placeholder);
 }
 .textarea-container.textarea-focus.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
+  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);
   letter-spacing: var(--tds-detail-07-ls);
   top: var(--tds-spacing-element-8);
 }
 .textarea-container.textarea-data.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
+  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);
   letter-spacing: var(--tds-detail-07-ls);
   top: var(--tds-spacing-element-8);
 }
 .textarea-textcounter {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-textarea-textcounter);
   float: right;
@@ -139,13 +164,23 @@
   padding-top: var(--tds-spacing-element-4);
 }
 .textarea-textcounter .textfield-textcounter-divider {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   color: var(--tds-textarea-textcounter-divider);
 }
 .textarea-helper {
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
@@ -160,27 +195,30 @@
 }
 .textarea-success .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-success);
+  border-color: var(--tds-textarea-border-bottom-success);
 }
 .textarea-error .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-error);
+  border-color: var(--tds-textarea-border-bottom-error);
 }
 .textarea-error .textarea-helper {
   color: var(--tds-textarea-helper-error);
 }
+.textarea-error .textarea-helper tds-icon {
+  color: var(--tds-textarea-icon-error);
+}
 .textarea-disabled {
   cursor: not-allowed;
 }
+.textarea-disabled .textarea-wrapper,
+.textarea-disabled .textarea-label {
+  opacity: var(--tds-textarea-opacity-disabled);
+}
 .textarea-disabled .textarea-input {
-  border-bottom-color: transparent;
   pointer-events: none;
   user-select: none;
 }
-.textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
-}
 .textarea-disabled .textarea-helper {
   color: var(--tds-textarea-helper-disabled);
 }
@@ -203,7 +241,12 @@
   position: absolute;
   right: 18px;
   top: 48px;
-  font: var(--tds-detail-05);
+  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);
   letter-spacing: var(--tds-detail-05-ls);
   padding: 8px;
   color: var(--tds-textarea-icon-read-only-label-color);
@@ -216,7 +259,7 @@
   display: block;
 }
 .textarea-readonly .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-read-only-color);
+  border-color: var(--tds-textarea-border-bottom-read-only-color);
 }
 .textarea-readonly .textfield-container {
   background-color: transparent;