fix: tk-network (#2117)

* fix: do not show placeholder if readonly

* fix: chrome background color on dark mode autocomplete

* fix: switch hcm

* fix: readonly hcm border

packages/components/src/components/switch/switch.css

@@ -301,3 +301,12 @@ scale-switch scale-icon-action-success {
 [data-platform='android'] .switch--disabled .switch__thumb {
   color: var(--telekom-color-ui-strong);
 }
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .switch__toggle {
+    border: 1px solid;
+  }
+  scale-icon-action-checkmark {
+    visibility: hidden !important;
+  }
+}

packages/components/src/components/text-field/text-field.css

@@ -297,3 +297,17 @@ input[type='month']::-webkit-calendar-picker-indicator {
   position: absolute;
   right: 12px;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  color-scheme: dark;
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .text-field--readonly input,
+  .text-field--readonly .text-field__control {
+    border: 1px solid;
+  }
+}

packages/components/src/components/text-field/text-field.tsx

@@ -269,7 +269,9 @@ export class TextField {
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
             onKeyDown={this.handleKeyDown}
-            {...(!!this.placeholder ? { placeholder: this.placeholder } : {})}
+            {...(!!this.placeholder && !this.readonly
+              ? { placeholder: this.placeholder }
+              : {})}
             disabled={this.disabled}
             readonly={this.readonly}
             autocomplete={this.inputAutocomplete}