npm - @scania/tegel-lite - Versions diffs - 1.6.0 → 1.7.0-table-vars-beta.1 - Mend

@scania/tegel-lite 1.6.0 → 1.7.0-table-vars-beta.1

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 (356) hide show

package/dist/tl-text-field.css CHANGED Viewed

@@ -211,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)
@@ -273,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;
@@ -521,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;
@@ -549,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;
@@ -577,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;
@@ -817,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;
@@ -837,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 {
@@ -869,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;
@@ -877,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;
@@ -1073,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;
@@ -1117,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;
@@ -1125,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;
@@ -1133,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;
@@ -1448,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 {
@@ -1458,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%;
@@ -1518,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);
@@ -1530,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);
@@ -1550,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;
@@ -1558,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 {
@@ -1600,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);
@@ -1659,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;
@@ -1682,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;
 }
@@ -1707,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);
@@ -1724,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);
@@ -1759,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);
@@ -1797,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 CHANGED Viewed

@@ -220,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 {
@@ -360,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;
@@ -381,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);
@@ -393,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);
@@ -412,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;
@@ -422,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;
@@ -471,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;
@@ -494,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;
 }
@@ -522,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);
@@ -536,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);
 }
@@ -546,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);