@scania/tegel-lite 1.5.0 → 1.7.0-table-vars-beta.0

package/dist/tl-text-field.css

@@ -28,6 +28,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-strong);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--scania-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -62,6 +64,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-subtle);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--traton-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -97,6 +101,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-strong);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--scania-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -131,6 +137,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-subtle);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--traton-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -203,7 +211,7 @@
   --text-field-label-disabled: var(--color-text-disabled);
   --text-field-affix-disabled: var(--color-text-disabled);
   --text-field-textcounter: var(--component--input-text-counter-default);
-  --text-field-opacity-disabled: var(--component--input-opacity-disabled);
+  --text-field-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
   --text-field-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)
@@ -265,6 +273,10 @@
   mask-image: var(--icon-adblue_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--agent {
+  mask-image: var(--icon-agent-svg);
+  background-color: currentcolor;
+}
 .tl-icon--arrow_diagonal {
   mask-image: var(--icon-arrow_diagonal-svg);
   background-color: currentcolor;
@@ -513,10 +525,6 @@
   mask-image: var(--icon-document_tool-svg);
   background-color: currentcolor;
 }
-.tl-icon--document_word {
-  mask-image: var(--icon-document_word-svg);
-  background-color: currentcolor;
-}
 .tl-icon--document_wrong {
   mask-image: var(--icon-document_wrong-svg);
   background-color: currentcolor;
@@ -541,6 +549,10 @@
   mask-image: var(--icon-download-svg);
   background-color: currentcolor;
 }
+.tl-icon--driver {
+  mask-image: var(--icon-driver-svg);
+  background-color: currentcolor;
+}
 .tl-icon--driving_licence {
   mask-image: var(--icon-driving_licence-svg);
   background-color: currentcolor;
@@ -569,6 +581,10 @@
   mask-image: var(--icon-email-svg);
   background-color: currentcolor;
 }
+.tl-icon--employee {
+  mask-image: var(--icon-employee-svg);
+  background-color: currentcolor;
+}
 .tl-icon--engine {
   mask-image: var(--icon-engine-svg);
   background-color: currentcolor;
@@ -809,6 +825,10 @@
   mask-image: var(--icon-layer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--line_chart {
+  mask-image: var(--icon-line_chart-svg);
+  background-color: currentcolor;
+}
 .tl-icon--link {
   mask-image: var(--icon-link-svg);
   background-color: currentcolor;
@@ -829,8 +849,8 @@
   mask-image: var(--icon-lock-svg);
   background-color: currentcolor;
 }
-.tl-icon--lock_inactive {
-  mask-image: var(--icon-lock_inactive-svg);
+.tl-icon--manager {
+  mask-image: var(--icon-manager-svg);
   background-color: currentcolor;
 }
 .tl-icon--map_cursor {
@@ -861,6 +881,10 @@
   mask-image: var(--icon-message-svg);
   background-color: currentcolor;
 }
+.tl-icon--message_ai {
+  mask-image: var(--icon-message_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--message_inactive {
   mask-image: var(--icon-message_inactive-svg);
   background-color: currentcolor;
@@ -869,6 +893,10 @@
   mask-image: var(--icon-microphone-svg);
   background-color: currentcolor;
 }
+.tl-icon--microphone_ai {
+  mask-image: var(--icon-microphone_ai-svg);
+  background-color: currentcolor;
+}
 .tl-icon--microphone_inactive {
   mask-image: var(--icon-microphone_inactive-svg);
   background-color: currentcolor;
@@ -1065,6 +1093,10 @@
   mask-image: var(--icon-save_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--scissor {
+  mask-image: var(--icon-scissor-svg);
+  background-color: currentcolor;
+}
 .tl-icon--search {
   mask-image: var(--icon-search-svg);
   background-color: currentcolor;
@@ -1109,6 +1141,10 @@
   mask-image: var(--icon-sorting-svg);
   background-color: currentcolor;
 }
+.tl-icon--sparkle {
+  mask-image: var(--icon-sparkle-svg);
+  background-color: currentcolor;
+}
 .tl-icon--speedometer {
   mask-image: var(--icon-speedometer-svg);
   background-color: currentcolor;
@@ -1117,6 +1153,10 @@
   mask-image: var(--icon-speedometer_inactive-svg);
   background-color: currentcolor;
 }
+.tl-icon--split {
+  mask-image: var(--icon-split-svg);
+  background-color: currentcolor;
+}
 .tl-icon--star {
   mask-image: var(--icon-star-svg);
   background-color: currentcolor;
@@ -1125,6 +1165,10 @@
   mask-image: var(--icon-support-svg);
   background-color: currentcolor;
 }
+.tl-icon--table {
+  mask-image: var(--icon-table-svg);
+  background-color: currentcolor;
+}
 .tl-icon--target {
   mask-image: var(--icon-target-svg);
   background-color: currentcolor;
@@ -1440,7 +1484,7 @@
 .tl-text-field:has(.tl-text-field__input:disabled) {
   cursor: not-allowed;
 }
-.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
+.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__bottom {
   opacity: var(--text-field-opacity-disabled);
 }
 .tl-text-field .tl-icon {
@@ -1450,7 +1494,8 @@
 .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 {
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
+.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1510,11 +1555,17 @@
   outline-offset: 1px;
   z-index: 1;
 }
-.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  border-color: var(--text-field-border-color-hover);
+.tl-text-field:hover .tl-text-field__input:not(:focus, :disabled) {
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-text-field--error .tl-text-field__input {
-  border-color: var(--text-field-border-color-error);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-text-field--error .tl-text-field__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1522,18 +1573,28 @@
   outline-offset: 1px;
   z-index: 1;
 }
-.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
-  border-color: var(--text-field-border-color-error);
+.tl-text-field--error:hover .tl-text-field__input:not(:focus, :disabled) {
+  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);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
-.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
-  border-color: var(--text-field-border-color-success);
+.tl-text-field--success:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-success-default);
 }
 .tl-text-field__input:disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
-  border-color: var(--text-field-border-color-readonly);
+  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);
+  border-style: solid;
+  border-color: var(--color-border-defined);
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -1542,7 +1603,10 @@
   z-index: 1;
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
-  border-color: var(--text-field-border-color-hover);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
   user-select: auto;
@@ -1550,31 +1614,32 @@
   cursor: default;
   pointer-events: none;
 }
-.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 {
+.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
+.tl-text-field--hide-readonly-icon) .tl-text-field__input {
   padding-right: 54px;
 }
 .tl-text-field--lg .tl-text-field__input {
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  padding: var(--unit-20) var(--unit-16);
   height: 56px;
 }
 .tl-text-field--md .tl-text-field__input {
-  padding: var(--tds-spacing-element-16);
+  padding: var(--unit-16);
   height: 48px;
 }
 .tl-text-field--sm .tl-text-field__input {
-  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
+  padding: var(--unit-12) var(--unit-16);
   height: 40px;
 }
 .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-24);
+  padding-top: var(--unit-24);
   padding-bottom: 15px;
 }
 .tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
-  padding-top: var(--tds-spacing-element-20);
+  padding-top: var(--unit-20);
   padding-bottom: 11px;
 }
 .tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
-  padding-top: var(--tds-spacing-element-16);
+  padding-top: var(--unit-16);
   padding-bottom: 7px;
 }
 .tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
@@ -1592,9 +1657,6 @@
 .tl-text-field--label-inside .tl-text-field__input::placeholder {
   color: transparent !important;
 }
-.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
-  color: var(--text-field-placeholder-disabled) !important;
-}
 
 .tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
   font-family: var(--detail-05-font-family);
@@ -1651,12 +1713,6 @@
   opacity: 0;
   visibility: hidden;
 }
-.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
-  color: var(--text-field-label-disabled);
-}
-.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
-  color: var(--text-field-label-disabled);
-}
 
 .tl-text-field__bottom {
   display: flex;
@@ -1674,9 +1730,6 @@
   color: var(--text-field-helper);
   position: relative;
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__helper {
-  color: var(--color-text-disabled);
-}
 .tl-text-field--error .tl-text-field__helper {
   padding-left: 24px;
 }
@@ -1699,12 +1752,10 @@
 .tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
   display: none;
 }
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
   color: var(--text-field-error);
 }
-.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
-  background-color: var(--color-text-disabled);
-}
 
 .tl-text-field__charcounter {
   font-family: var(--detail-05-font-family);
@@ -1716,20 +1767,15 @@
   margin-left: auto;
   color: var(--text-field-textcounter);
 }
-:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
-  color: var(--color-text-disabled);
-}
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
   color: var(--text-field-error);
 }
-.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
+.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
+:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
   color: var(--text-field-error);
 }
 
-.tl-text-field__charcounter-divider {
-  color: var(--color-text-disabled);
-}
-
 .tl-text-field__prefix {
   font-family: var(--detail-02-font-family);
   font-size: var(--detail-02-font-size);
@@ -1751,18 +1797,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-: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);
-}
-: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);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field__suffix {
   font-family: var(--detail-02-font-family);
@@ -1789,20 +1823,6 @@
   transform: translateY(-50%);
   z-index: 1;
 }
-: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) !important;
-}
-:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
-  background-color: var(--text-field-affix-disabled);
-}
 
 .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
 .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {

package/dist/tl-textarea.css

@@ -28,6 +28,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-strong);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--scania-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -62,6 +64,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-subtle);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--traton-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -97,6 +101,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-strong);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--scania-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -131,6 +137,8 @@
   --component--input-icon-prefix-default: var(--color-text-defined);
   --component--input-icon-suffix-default: var(--color-text-defined);
   --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-icon-control-default: var(--color-icon-subtle);
+  --component--input-icon-control-hover: var(--component--input-icon-control-default);
   --component--input-opacity-disabled: var(--traton-opacity-25);
   --component--input-text-counter-default: var(--color-text-defined);
   --component--input-text-label-default: var(--color-text-strong);
@@ -212,16 +220,7 @@
   --textarea-error-icon: var(--component--input-icon-error-default);
   --textarea-textcounter: var(--component--input-text-counter-default);
   --textarea-resize-icon: var(--component-textarea-icon-resize-default);
-  --textarea-opacity-disabled: var(--component--input-opacity-disabled);
-  --textarea-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);
-  --textarea-border-color: var(--component--input-border-default);
-  --textarea-border-color-hover: var(--component--input-border-hover);
-  --textarea-border-color-success: var(--component--input-border-success-default);
-  --textarea-border-color-error: var(--component--input-border-error-default);
-  --textarea-border-color-readonly: var(--color-border-strong);
+  --textarea-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
   --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
 }
 .tl-textarea--primary {
@@ -352,10 +351,14 @@
   font-weight: var(--detail-02-font-weight);
   letter-spacing: var(--detail-02-letter-spacing);
   text-transform: var(--detail-02-text-transform);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-default);
   display: block;
   position: relative;
   width: 100%;
-  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  padding: var(--unit-20) var(--unit-16);
   color: var(--textarea-text);
   resize: vertical;
   z-index: 0;
@@ -373,10 +376,16 @@
   display: none;
 }
 .tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
-  border-color: var(--textarea-border-color-hover);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-textarea--error .tl-textarea__input {
-  border-color: var(--textarea-border-color-error);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-textarea--error .tl-textarea__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -385,17 +394,26 @@
   z-index: 1;
 }
 .tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
-  border-color: var(--textarea-border-color-error);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-text-error-default);
 }
 .tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
-  border-color: var(--textarea-border-color-success);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-success-default);
 }
 .tl-textarea__input:disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
-  border-color: var(--textarea-border-color-readonly);
+  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);
+  border-style: solid;
+  border-color: var(--color-border-defined);
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
   outline: 2px solid var(--component--focus-ring-color-strong);
@@ -404,7 +422,10 @@
   z-index: 1;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
-  border-color: var(--textarea-border-color-hover);
+  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);
+  border-style: solid;
+  border-color: var(--component--input-border-hover);
 }
 .tl-textarea--label-inside .tl-textarea__input {
   padding-top: 26px;
@@ -414,9 +435,6 @@
   color: transparent;
   transform: translateY(1px);
 }
-.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
-  color: var(--textarea-placeholder-disabled) !important;
-}
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
   user-select: auto;
   caret-color: transparent;
@@ -463,12 +481,8 @@
   letter-spacing: var(--detail-07-letter-spacing);
   text-transform: var(--detail-07-text-transform);
   top: 8px;
-  color: var(--textarea-label-disabled);
   transform: translateY(0);
 }
-.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
-  color: var(--textarea-label-disabled);
-}
 
 .tl-textarea__bottom {
   display: flex;
@@ -486,9 +500,6 @@
   color: var(--textarea-helper);
   position: relative;
 }
-:has(.tl-textarea__input:disabled) .tl-textarea__helper {
-  color: var(--color-text-disabled);
-}
 .tl-textarea--error .tl-textarea__helper {
   padding-left: 24px;
 }
@@ -514,9 +525,6 @@
 .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
   color: var(--textarea-error);
 }
-.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
-  background-color: var(--color-text-disabled);
-}
 
 .tl-textarea__charcounter {
   font-family: var(--detail-05-font-family);
@@ -528,9 +536,6 @@
   margin-left: auto;
   color: var(--textarea-textcounter);
 }
-:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
-  color: var(--color-text-disabled);
-}
 .tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
   color: var(--textarea-error);
 }
@@ -538,10 +543,6 @@
   color: var(--textarea-error);
 }
 
-.tl-textarea__charcounter-divider {
-  color: var(--color-text-disabled);
-}
-
 .tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
 .tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
   font-family: var(--detail-07-font-family);