update to use appearance attribute

microsoft · Mar 25, 2021 · d1a4faf · d1a4faf
1 parent 77f443e
commit d1a4faf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
@@ -14,12 +14,12 @@ import {
 import { appearanceBehavior } from '../utilities/behaviors';
 
 export const TextAreaFilledStyles = css`
-  :host(.filled) .control {
+  :host([appearance='filled']) .control {
     background: ${neutralFillRestBehavior.var};
     border-color: transparent;
   }
 
-  :host(.filled:hover:not([disabled])) .control {
+  :host([appearance='filled']:hover:not([disabled])) .control {
     background: ${neutralFillHoverBehavior.var};
     border-color: transparent;
   }

diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
@@ -15,12 +15,12 @@ import {
 import { appearanceBehavior } from '../utilities/behaviors';
 
 export const TextFieldFilledStyles = css`
-  :host(.filled) .root {
+  :host([appearance='filled']) .root {
     background: ${neutralFillRestBehavior.var};
     border-color: transparent;
   }
 
-  :host(.filled:hover:not(.disabled)) .root {
+  :host([appearance='filled']:hover:not(.disabled)) .root {
     background: ${neutralFillHoverBehavior.var};
     border-color: transparent;
   }
@@ -29,15 +29,15 @@ export const TextFieldFilledStyles = css`
   neutralFillRestBehavior,
   forcedColorsStylesheetBehavior(
     css`
-      :host(.filled) .root {
+      :host([appearance='filled']) .root {
         background: ${SystemColors.Field};
         border-color: ${SystemColors.FieldText};
       }
-      :host(.filled:hover:not(.disabled)) .root {
+      :host([appearance='filled']:hover:not(.disabled)) .root {
         background: ${SystemColors.Field};
         border-color: ${SystemColors.Highlight};
       }
-      :host(.filled.disabled) .root {
+      :host([appearance='filled'].disabled) .root {
         border-color: ${SystemColors.GrayText};
         background: ${SystemColors.Field};
       }