[Darkside] TextField CSS update (#3376)

* ✨ Added darkmode support for Textfield * 💄 Focus visible causes border-color to update * :refactor: Added nesting
navikt · Nov 19, 2024 · f38ab0b · f38ab0b
1 parent c7409c0
commit f38ab0b
Showing 1 changed file with 38 additions and 81 deletions.
diff --git a/@navikt/core/css/darkside/form/text-field.darkside.css b/@navikt/core/css/darkside/form/text-field.darkside.css
@@ -1,107 +1,64 @@
-[data-theme="dark"] {
-  --__ac-textfield-text: var(--a-text-on-inverted);
-  --__ac-textfield-bg: var(--a-surface-inverted);
-  --__ac-textfield-border: var(--a-border-on-inverted);
-  --__ac-textfield-hover-border: var(--a-blue-200);
-  --__ac-textfield-placeholder: var(--a-gray-500);
-  --__ac-textfield-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textfield-text: initial;
-  --__ac-textfield-bg: initial;
-  --__ac-textfield-border: initial;
-  --__ac-textfield-hover-border: initial;
-  --__ac-textfield-placeholder: initial;
-  --__ac-textfield-error-border: initial;
-}
-
 .navds-text-field__input {
   appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
+  padding: var(--ax-spacing-2);
+  background: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
   min-height: 3rem;
   width: 100%;
-  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
-}
-
-.navds-text-field__input[size] {
-  width: auto;
-}
+  color: var(--ax-text-default);
 
-.navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
-}
-
-.navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--a-spacing-2);
-  min-height: 2rem;
-}
-
-.navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action-hover)));
-}
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
 
-.navds-text-field__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textfield-active-border, var(--a-border-action-selected));
-}
+  &:focus-visible {
+    border-color: var(--ax-border-accent-strong);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-text-field__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
   }
-}
 
-/**
-  Error handling
-*/
-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
-}
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }
 
-.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover, :disabled) {
-  box-shadow:
-    0 0 0 1px var(--a-border-danger),
-    var(--a-shadow-focus);
+  &[size] {
+    width: auto;
+  }
 }
 
-@supports not selector(:focus-visible) {
-  .navds-text-field--error > .navds-text-field__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      0 0 0 1px var(--a-border-danger),
-      var(--a-shadow-focus);
-  }
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--ax-spacing-2);
+  min-height: 2rem;
 }
 
-/* Disabled handling */
-.navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
-  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
 }
 
 /**
   * Removes default search icon
   */
-.navds-text-field__input[type="search"]::-webkit-search-decoration,
-.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
+.navds-text-field__input[type="search"] {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
 }
 
 @media (forced-colors: active) {