fix: focus visuals and style clean up (#3145)

* fix: focus visuals and style clean up * More clean up * Updated Focus visuals
microsoft · May 18, 2020 · 34063c9 · 34063c9
1 parent 23eca38
commit 34063c9
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 96 deletions.
diff --git a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
@@ -11,10 +11,8 @@ export const BadgeStyles = css`
     ${display("inline-block")} :host {
         box-sizing: border-box;
         font-family: var(--body-font);
-        ${/* Font size, weight, and line height are temporary - 
-            replace when adaptive typography is figured out */ ""} font-size: 12px;
-        font-weight: 400;
-        line-height: 18px;
+        font-size: var(--type-ramp-minus-1-font-size);
+        line-height: var(--type-ramp-minus-1-height);
     }
 
     .badge {

diff --git a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts
@@ -8,9 +8,12 @@ import {
 import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
     heightNumber,
+    neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles";
@@ -40,6 +43,11 @@ export const CheckboxStyles = css`
         cursor: pointer;
     }
 
+    .label__hidden {
+        display: none;
+        visibility: hidden;
+    }
+
     .label {
         font-family: var(--body-font);
         color: var(--neutral-foreground-rest);
@@ -48,9 +56,8 @@ export const CheckboxStyles = css`
         } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
         margin-inline-end: calc(var(--design-unit) * 2px + 2px);
         cursor: pointer;
-        ${
-            /* Font size is temporary - replace when adaptive typography is figured out */ ""
-        } font-size: calc(1rem + (var(--density) * 2px));
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
     }
 
     .checked-indicator {
@@ -73,13 +80,18 @@ export const CheckboxStyles = css`
         opacity: 0;
     }
 
-    .control:hover {
+    :host(:enabled) .control:hover {
         background: var(--neutral-fill-input-hover);
         border-color: var(--neutral-outline-hover);
     }
 
+    :host(:enabled) .control:active {
+        background: var(--neutral-fill-input-active);
+        border-color: var(--neutral-outline-active);
+    }
+
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
         border-color: var(--neutral-focus);
     }
 
@@ -99,9 +111,12 @@ export const CheckboxStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
+    neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts
@@ -8,9 +8,12 @@ import {
 } from "@microsoft/fast-foundation";
 import {
     heightNumber,
+    neutralFillActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles";
@@ -44,6 +47,11 @@ export const RadioStyles = css`
         cursor: pointer;
     }
 
+    .label__hidden {
+        display: none;
+        visibility: hidden;
+    }
+
     .label {
         font-family: var(--body-font);
         color: var(--neutral-foreground-rest);
@@ -52,9 +60,8 @@ export const RadioStyles = css`
         } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
         margin-inline-end: calc(var(--design-unit) * 2px + 2px);
         cursor: pointer;
-        ${
-            /* Font size is temporary - replace when adaptive typography is figured out */ ""
-        } font-size: calc(1rem + (var(--density) * 2px));
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
     }
 
     .checked-indicator {
@@ -72,13 +79,18 @@ export const RadioStyles = css`
         pointer-events: none;
     }
 
-    .control:hover {
+    :host(:enabled) .control:hover{
         background: var(--neutral-fill-input-hover);
         border-color: var(--neutral-outline-hover);
     }
 
+    :host(:enabled) .control:active {
+        background: var(--neutral-fill-input-active);
+        border-color: var(--neutral-outline-active);
+    }
+
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
         border-color: var(--neutral-focus);
     }
 
@@ -97,9 +109,12 @@ export const RadioStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
+    neutralFillActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts
@@ -8,6 +8,7 @@ import {
 } from "@microsoft/fast-foundation";
 import {
     heightNumber,
+    neutralFocusBehavior,
     neutralForegroundActiveBehavior,
     neutralForegroundHoverBehavior,
     neutralForegroundRestBehavior,
@@ -25,7 +26,6 @@ export const SliderStyles = css`
         --thumb-translate: calc(var(--thumb-size) * 0.5);
         --track-overhang: calc((var(--design-unit) / 2) * -1);
         align-items: center;
-        outline: none;
         width: 100%;
         margin: calc(var(--design-unit) * 1px) 0;
         user-select: none;
@@ -47,6 +47,9 @@ export const SliderStyles = css`
         height: 100%;
         grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
     }
+    :host(:${focusVisible}) .thumb-cursor {
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+    }
     .thumb-container {
         position: absolute;
         height: calc(var(--thumb-size) * 1px);
@@ -110,6 +113,7 @@ export const SliderStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
+    neutralFocusBehavior,
     neutralForegroundActiveBehavior,
     neutralForegroundHoverBehavior,
     neutralForegroundRestBehavior,

diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts
@@ -9,10 +9,8 @@ export const BaseButtonStyles = css`
     }
 
     .control {
-        ${
-            /* Font size is temporary - 
-            replace when adaptive typography is figured out */ ""
-        } font-size: 14px;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
         line-height: 1;
         box-sizing: border-box;
         display: inline-flex;

diff --git a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts
@@ -7,12 +7,15 @@ import {
     forcedColorsStylesheetBehavior,
 } from "@microsoft/fast-foundation";
 import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
     heightNumber,
     neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
     neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
@@ -27,6 +30,7 @@ export const SwitchStyles = css`
     ${display("inline-flex")} :host {
         align-items: center;
         outline: none;
+        font-family: var(--body-font);
         margin: calc(var(--design-unit) * 1px) 0;
         ${
             /*
@@ -58,22 +62,19 @@ export const SwitchStyles = css`
         border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
     }
 
-    .switch:hover {
-        cursor: pointer;
-    }
-
-    .switch:hover {
+    :host(:enabled) .switch:hover {
         background: var(--neutral-fill-input-hover);
         border-color: var(--neutral-outline-hover);
+        cursor: pointer;
     }
 
-    .switch:active {
+    :host(:enabled) .switch:active {
         background: var(--neutral-fill-input-active);
         border-color: var(--neutral-outline-active);
     }
 
     :host(:${focusVisible}) .switch {
-        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
         border-color: var(--neutral-focus);
     }
 
@@ -89,20 +90,21 @@ export const SwitchStyles = css`
     }
 
     .status-message {
-        font-family: var(--body-font);
         color: var(--neutral-foreground-rest);
         cursor: pointer;
-        ${
-            /* Font size is temporary - replace when adaptive typography is figured out */ ""
-        } font-size: calc(1rem + (var(--density) * 2px));
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+    }
+
+    .label__hidden {
+        display: none;
+        visibility: hidden;
     }
 
     .label {
         color: var(--neutral-foreground-rest);
-
-        ${
-            /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ ""
-        } margin-inline-end: calc(var(--design-unit) * 2px + 2px);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
     }
 
     ::slotted(*) {
@@ -120,6 +122,19 @@ export const SwitchStyles = css`
         background: var(--accent-fill-rest);
     }
 
+    :host(.checked:enabled) .switch:hover {
+        background: var(--accent-fill-hover);
+    }
+
+    :host(.checked:enabled) .switch:active {
+        background: var(--accent-fill-active);
+    }
+
+    :host(.checked:${focusVisible}:enabled) .switch {
+        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus);
+        border-color: transparent;
+    }
+
     .unchecked-message {
         display: block;
     }
@@ -136,11 +151,14 @@ export const SwitchStyles = css`
         display: block;
     }
 `.withBehaviors(
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
     neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralForegroundRestBehavior,
     neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,

diff --git a/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts
@@ -7,10 +7,8 @@ export const TabsStyles = css`
     ${display("grid")} :host {
         box-sizing: border-box;
         font-family: var(--body-font);
-        ${/* Font size, weight, and line height are temporary - 
-            replace when adaptive typography is figured out */ ""} font-size: 12px;
-        font-weight: 400;
-        line-height: 18px;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
         color: var(--neutral-foreground-rest);
         grid-template-columns: auto 1fr auto;
         grid-template-rows: auto 1fr;

diff --git a/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts
@@ -33,14 +33,9 @@ export const TextAreaStyles = css`
         border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
         height: calc(${heightNumber} * 2px);
         font: inherit;
-        ${
-            /* Font size, weight, and line height are temporary - 
-            replace when adaptive typography is figured out */ ""
-        } font-size: 14px;
-        font-weight: 400px;
-        line-height: 20px;
-        padding-top: calc(var(--design-unit) * 1.5);
-        padding-bottom: calc(var(--design-unit) * 1.5);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2px + 1px);
         max-width: 100%;
         resize: none;
     }
@@ -84,16 +79,17 @@ export const TextAreaStyles = css`
         resize: vertical;
     }
 
+    .label__hidden {
+        display: none;
+        visibility: hidden;
+    }
+
     .label {
         display: block;
         color: var(--neutral-foreground-rest);
         cursor: pointer;
-        ${
-            /* Font size, weight, and line height temporary - 
-            replace when adaptive typography is figured out */ ""
-        } font-size: 14px;
-        font-weight: 400px;
-        line-height: 20px;
+        $font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
         margin-bottom: 4px;
     }