@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-dev-test-beta.0

package/dist/tl-table.css

@@ -14,18 +14,51 @@ body {
 /**
  * Do not edit directly, this file was auto-generated.
  */
-.tl-table,
-tds-table {
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-table-cell: var(--color-background-layer-01);
+  --component-table-cell-hover: #edeff3;
+  --component-table-pagination-base: #e0e5eb;
+  --component-table-pagination-dropdown: var(--color-background-base);
   --component-table-secondary-cell: var(--color-background-layer-02);
-  --component-table-pagination-dropdown: var(--color-background-layer-01);
-  --component-table-pagination-base: var(--color-background-surface-200);
-  --component-table-cell-hover: var(--color-background-surface-100);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
   --component-table-cell: var(--color-background-layer-01);
+  --component-table-cell-hover: #d6d4c9;
+  --component-table-pagination-base: #d6d4c9;
+  --component-table-pagination-dropdown: var(--color-background-base);
+  --component-table-secondary-cell: var(--color-background-layer-02);
 }
 
-.traton .tl-table,
-.traton tds-table {
-  --component-table-pagination-base: var(--color-background-surface-300);
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-table-cell: var(--color-background-layer-01);
+  --component-table-cell-hover: #1c222b;
+  --component-table-pagination-base: #242c37;
+  --component-table-pagination-dropdown: var(--color-background-layer-01);
+  --component-table-secondary-cell: var(--color-background-layer-02);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-table-cell: var(--color-background-layer-01);
+  --component-table-cell-hover: #003137;
+  --component-table-pagination-base: #004852;
+  --component-table-pagination-dropdown: var(--color-background-layer-01);
+  --component-table-secondary-cell: var(--color-background-layer-02);
 }
 
 .tl-table {
@@ -84,7 +117,7 @@ tds-table {
   --table-zebra-mode: var(--component-table-cell);
 }
 
-.tds-mode-dark .tl-table.tl-table--secondary {
+.tl-mode-dark .tl-table.tl-table--secondary {
   --table-body-cell-hover: var(--color-background-surface-300);
   --table-body-row-hover: var(--color-background-surface-300);
 }

package/dist/tl-text-field.css

@@ -524,8 +524,8 @@
   mask-image: var(--icon-gift-svg);
   background-color: currentcolor;
 }
-.tl-icon--gift inactive {
-  mask-image: var(--icon-gift inactive-svg);
+.tl-icon--gift_inactive {
+  mask-image: var(--icon-gift_inactive-svg);
   background-color: currentcolor;
 }
 .tl-icon--global {
@@ -1268,7 +1268,20 @@
 .tl-text-field--no-min-width {
   min-width: auto;
 }
-.tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
+.tl-text-field:has(.tl-text-field__input:disabled) {
+  cursor: not-allowed;
+}
+.tl-text-field .tl-icon {
+  background-color: var(--text-field-affix);
+}
+:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
+  background-color: var(--text-field-affix-disabled);
+}
+
+.tl-text-field__input-wrapper {
+  position: relative;
+}
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1283,18 +1296,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
-  top: calc(50% + 24px);
-}
-.tl-text-field:has(.tl-text-field__input:disabled) {
-  cursor: not-allowed;
-}
-.tl-text-field .tl-icon {
-  background-color: var(--text-field-affix);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field__input {
   all: unset;
@@ -1438,6 +1439,7 @@
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
   position: absolute;
+  top: 50%;
   left: var(--text-field-label-inside-left, 16px);
   color: var(--text-field-label-inside);
   pointer-events: none;
@@ -1446,18 +1448,6 @@
   transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
   z-index: 1;
 }
-.tl-text-field__label {
-  /* Center label in input row before focus/fill */
-}
-.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__label {
-  top: 28px; /* half of 56px input height */
-}
-.tl-text-field--label-inside.tl-text-field--md .tl-text-field__label {
-  top: 24px; /* half of 48px input height */
-}
-.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__label {
-  top: 20px; /* half of 40px input height */
-}
 .tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
   left: 44px;
 }
@@ -1582,12 +1572,9 @@
   position: absolute;
   left: 16px;
   top: 50%;
-  transform: translateY(calc(-50% - 1px));
+  transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
   color: var(--text-field-affix-disabled);
 }
@@ -1619,12 +1606,9 @@
   position: absolute;
   right: 16px;
   top: 50%;
-  transform: translateY(calc(-50% - 1px));
+  transform: translateY(-50%);
   z-index: 1;
 }
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
   color: var(--text-field-affix-disabled);
 }
@@ -1636,38 +1620,6 @@
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
   background-color: var(--text-field-affix-disabled) !important;
 }
-
-.tl-text-field__suffix {
-  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(--text-field-affix);
-  align-self: center;
-  display: flex;
-  align-items: center;
-  z-index: 1;
-  position: relative;
-  right: 16px;
-  padding-right: 0;
-  z-index: 1;
-}
-.tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
-  transform: translateY(calc(-50% + 24px));
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
-  color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
   background-color: var(--text-field-affix-disabled);
 }

package/dist/tl-toggle.css

@@ -118,7 +118,7 @@
   color: var(--toggle-text);
   margin-bottom: 12px;
 }
-:has(input[type=checkbox]:disabled) .tl-toggle__headline {
+.tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
   color: var(--toggle-disabled);
   user-select: none;
   cursor: not-allowed;