fixed high contrast style in fast component and msft (microsoft#3425)

Ynsszr · Jul 2, 2020 · f7c1a5e · f7c1a5e
1 parent 0fafba5
commit f7c1a5e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 34 deletions.
diff --git a/packages/web-components/fast-components-msft/src/tree-item/fixtures/tree-item.html b/packages/web-components/fast-components-msft/src/tree-item/fixtures/tree-item.html
@@ -59,4 +59,27 @@ <h4>After content</h4>
         </svg>
         Tree item
     </fast-tree-item>
+
+    <h4>Disabled</h4>
+    <fast-tree-item disabled>
+        <svg
+            slot="start"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
+        </svg>
+        Tree item disabled
+        <svg
+            slot="end"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
+        </svg>
+    </fast-tree-item>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components-msft/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components-msft/src/tree-item/tree-item.styles.ts
@@ -199,37 +199,58 @@ export const TreeItemStyles = css`
     neutralForegroundRestBehavior,
     forcedColorsStylesheetBehavior(
         css`
-
         :host {
             forced-color-adjust: none;
             border-color: transparent;
             background: ${SystemColors.Field};
         }
-        :host([selected]) .content-region {
+        :host .content-region {
+            color: ${SystemColors.FieldText};
+        }
+        :host .content-region .expand-collapse-glyph,
+        :host .content-region .start,
+        :host .content-region .end {
+            fill: ${SystemColors.FieldText};
+        }
+        :host .positioning-region:hover,
+        :host([selected]) .positioning-region {
             background: ${SystemColors.Highlight};
+        }
+        :host .positioning-region:hover .content-region,
+        :host([selected]) .positioning-region .content-region {
             color: ${SystemColors.HighlightText};
         }
-        :host([selected]) .content-region .before-content,
-        :host([selected]) .content-region .after-content,
+        :host .positioning-region:hover .content-region .expand-collapse-glyph,
+        :host .positioning-region:hover .content-region .start,
+        :host .positioning-region:hover .content-region .end,
         :host([selected]) .content-region .expand-collapse-glyph,
-        .positioning-region:hover .before-content,
-        .positioning-region:hover .after-content,
-        .positioning-region:hover .expand-collapse-glyph,
-        :host(:${focusVisible}:hover) .content-region .expand-collapse-glyph {
+        :host([selected]) .content-region .start,
+        :host([selected]) .content-region .end {
             fill: ${SystemColors.HighlightText};
         }
-        :host(:${focusVisible}) .content-region {
-            border-color: ${SystemColors.Highlight};
+        :host([selected])::after {
+            background: ${SystemColors.Field}
         }
-        :host([selected]:${focusVisible}) .content-region {
+        :host(:${focusVisible}) .positioning-region {
             border-color: ${SystemColors.FieldText};
             box-shadow: 0 0 0 2px inset ${SystemColors.Field};
         }
-        :host(:${focusVisible}:hover) .content-region,
-        .positioning-region:hover {
-            background: ${SystemColors.Highlight};
-            color: ${SystemColors.HighlightText};
+        :host([disabled]) .content-region,
+        :host([disabled]) .positioning-region:hover .content-region {
+            opacity: 1;
+            color: ${SystemColors.GrayText};
+        }
+        :host([disabled]) .content-region .expand-collapse-glyph,
+        :host([disabled]) .content-region .start,
+        :host([disabled]) .content-region .end,
+        :host([disabled]) .positioning-region:hover .content-region .expand-collapse-glyph,
+        :host([disabled]) .positioning-region:hover .content-region .start,
+        :host([disabled]) .positioning-region:hover .content-region .end {
+            fill: ${SystemColors.GrayText};
+        }
+        :host([disabled]) .positioning-region:hover {
+            background: ${SystemColors.Field};
         }
-    `
+        `
     )
 );
diff --git a/packages/web-components/fast-components/src/tree-item/fixtures/tree-item.html b/packages/web-components/fast-components/src/tree-item/fixtures/tree-item.html
@@ -9,7 +9,7 @@ <h4>Selected</h4>
     <h4>Before content</h4>
     <fast-tree-item>
         <svg
-            slot="before-content"
+            slot="start"
             width="16"
             height="16"
             viewBox="0 0 16 16"
@@ -22,7 +22,7 @@ <h4>Before content</h4>
     <br />
     <fast-tree-item selected>
         <svg
-            slot="before-content"
+            slot="start"
             width="16"
             height="16"
             viewBox="0 0 16 16"
@@ -36,7 +36,7 @@ <h4>Before content</h4>
     <h4>After content</h4>
     <fast-tree-item>
         <svg
-            slot="after-content"
+            slot="end"
             width="16"
             height="16"
             viewBox="0 0 16 16"
@@ -49,7 +49,7 @@ <h4>After content</h4>
     <br />
     <fast-tree-item selected>
         <svg
-            slot="after-content"
+            slot="end"
             width="16"
             height="16"
             viewBox="0 0 16 16"
@@ -59,4 +59,27 @@ <h4>After content</h4>
         </svg>
         Tree item
     </fast-tree-item>
+
+    <h4>Disabled</h4>
+    <fast-tree-item disabled>
+        <svg
+            slot="start"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
+        </svg>
+        Tree item disabled
+        <svg
+            slot="end"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
+        </svg>
+    </fast-tree-item>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts
@@ -205,30 +205,47 @@ export const TreeItemStyles = css`
             border-color: transparent;
             background: ${SystemColors.Field};
         }
-        :host([selected]) .content-region {
+        :host .content-region .expand-collapse-glyph {
+            fill: ${SystemColors.FieldText};
+        }
+        :host .positioning-region:hover,
+        :host([selected]) .positioning-region {
             background: ${SystemColors.Highlight};
+        }
+        :host .positioning-region:hover .content-region,
+        :host([selected]) .positioning-region .content-region {
             color: ${SystemColors.HighlightText};
         }
-        :host([selected]) .content-region .before-content,
-        :host([selected]) .content-region .after-content,
+        :host .positioning-region:hover .content-region .expand-collapse-glyph,
+        :host .positioning-region:hover .content-region .start,
+        :host .positioning-region:hover .content-region .end,
         :host([selected]) .content-region .expand-collapse-glyph,
-        .positioning-region:hover .before-content,
-        .positioning-region:hover .after-content,
-        .positioning-region:hover .expand-collapse-glyph,
-        :host(:${focusVisible}:hover) .content-region .expand-collapse-glyph {
+        :host([selected]) .content-region .start,
+        :host([selected]) .content-region .end {
             fill: ${SystemColors.HighlightText};
         }
-        :host(:${focusVisible}) .content-region {
-            border-color: ${SystemColors.Highlight};
+        :host([selected])::after {
+            background: ${SystemColors.Field};
         }
-        :host([selected]:${focusVisible}) .content-region {
+        :host(:${focusVisible}) .positioning-region {
             border-color: ${SystemColors.FieldText};
             box-shadow: 0 0 0 2px inset ${SystemColors.Field};
         }
-        :host(:${focusVisible}:hover) .content-region,
-        .positioning-region:hover {
-            background: ${SystemColors.Highlight};
-            color: ${SystemColors.HighlightText};
+        :host([disabled]) .content-region,
+        :host([disabled]) .positioning-region:hover .content-region {
+            opacity: 1;
+            color: ${SystemColors.GrayText};
+        }
+        :host([disabled]) .content-region .expand-collapse-glyph,
+        :host([disabled]) .content-region .start,
+        :host([disabled]) .content-region .end,
+        :host([disabled]) .positioning-region:hover .content-region .expand-collapse-glyph,
+        :host([disabled]) .positioning-region:hover .content-region .start,
+        :host([disabled]) .positioning-region:hover .content-region .end {
+            fill: ${SystemColors.GrayText};
+        }
+        :host([disabled]) .positioning-region:hover {
+            background: ${SystemColors.Field};
         }
         `
     )