From 4edc53cb4845a0d1f46a851a1fe5916e40998af3 Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Fri, 15 May 2020 09:34:18 -0700 Subject: [PATCH 1/3] fix: focus visuals and style clean up --- .../src/checkbox/checkbox.styles.ts | 13 ++++++++- .../src/radio/radio.styles.ts | 13 ++++++++- .../src/slider/slider.styles.ts | 6 +++- .../src/switch/switch.styles.ts | 28 +++++++++++++++---- .../src/text-area/text-area.styles.ts | 3 +- .../src/text-field/text-field.styles.ts | 3 +- .../src/checkbox/checkbox.styles.ts | 14 ++++++---- .../fast-components/src/radio/radio.styles.ts | 12 ++++---- .../src/slider/slider.styles.ts | 8 +++++- .../src/styles/patterns/button.ts | 5 ++++ .../src/switch/switch.styles.ts | 20 +++++++------ .../src/text-area/text-area.styles.ts | 3 +- .../src/text-field/text-field.styles.ts | 3 +- 13 files changed, 94 insertions(+), 37 deletions(-) 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 index 72235529505..197491f7860 100644 --- 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"; @@ -73,11 +76,16 @@ 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; border-color: var(--neutral-focus); @@ -99,9 +107,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 index 08b9e23342a..e2dfe97afca 100644 --- 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"; @@ -72,11 +75,16 @@ 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; border-color: var(--neutral-focus); @@ -97,9 +105,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 index a62d61e3450..89fa551f60a 100644 --- 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(--neutral-focus) inset; + } .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/switch/switch.styles.ts b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts index 662f501b934..d3b63976649 100644 --- 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, @@ -58,16 +61,13 @@ 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); } @@ -120,6 +120,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 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + .unchecked-message { display: block; } @@ -136,11 +149,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/text-area/text-area.styles.ts b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts index 4bce8252b76..44218470edc 100644 --- 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 @@ -39,8 +39,7 @@ export const TextAreaStyles = css` } 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); + padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2px + 1px); max-width: 100%; resize: none; } diff --git a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts index 77a19ec157a..7093c9118ad 100644 --- a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts @@ -41,7 +41,6 @@ export const TextFieldStyles = css` -webkit-appearance: none; background: transparent; border: 0; - padding: 0; height: calc(100% - 4px); margin-top: auto; margin-bottom: auto; @@ -97,7 +96,7 @@ export const TextFieldStyles = css` border-color: var(--neutral-outline-hover); } - :host(:focus-within) .root { + :host(:focus-within:not(.disabled)) .root { border-color: var(--neutral-focus); box-shadow: 0 0 0 1px var(--neutral-focus) inset; } diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts index 0a5e4447338..46ea05f05bb 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -15,6 +15,7 @@ import { neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, @@ -83,13 +84,13 @@ export const CheckboxStyles = css` opacity: 0; } - .control:hover { + :host(:enabled) .control:hover { background: var(--neutral-fill-input-hover); border-color: var(--neutral-outline-hover); } - .control:active { - background: var(--neutral-fill-input-active); + :host(:enabled) .control:active { + background: var(--neutral-fill-input-active); border-color: var(--neutral-outline-active); } @@ -103,17 +104,17 @@ export const CheckboxStyles = css` border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest); } - :host(.checked) .control:hover { + :host(.checked:enabled) .control:hover { background: var(--accent-fill-hover); border: calc(var(--outline-width) * 1px) solid var(--accent-fill-hover); } - :host(.checked) .control:active { + :host(.checked:enabled) .control:active { background: var(--accent-fill-active); border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active); } - :host(.checked:${focusVisible}) .control { + :host(.checked:${focusVisible}:enabled) .control { box-shadow: 0 0 0 1px var(--neutral-focus) inset; border-color: var(--neutral-focus); } @@ -142,6 +143,7 @@ export const CheckboxStyles = css` neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts index 41ebecf37f9..71cb9cd761d 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -15,6 +15,7 @@ import { neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, @@ -82,12 +83,12 @@ 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); } - .control:active { + :host(:enabled) .control:active { background: var(--neutral-fill-input-active); border-color: var(--neutral-outline-active); } @@ -102,17 +103,17 @@ export const RadioStyles = css` border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest); } - :host(.checked) .control:hover { + :host(.checked:enabled) .control:hover { background: var(--accent-fill-hover); border: calc(var(--outline-width) * 1px) solid var(--accent-fill-hover); } - :host(.checked) .control:active { + :host(.checked:enabled) .control:active { background: var(--accent-fill-active); border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active); } - :host(.checked:${focusVisible}) .control { + :host(.checked:${focusVisible}:enabled) .control { box-shadow: 0 0 0 1px var(--neutral-focus) inset; border-color: var(--neutral-focus); } @@ -139,6 +140,7 @@ export const RadioStyles = css` neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts index e9949e0544f..41dc890c466 100644 --- a/packages/web-components/fast-components/src/slider/slider.styles.ts +++ b/packages/web-components/fast-components/src/slider/slider.styles.ts @@ -8,6 +8,7 @@ import { import { SystemColors } from "@microsoft/fast-web-utilities"; import { heightNumber, + neutralFocusBehavior, neutralForegroundActiveBehavior, neutralForegroundHoverBehavior, neutralForegroundRestBehavior, @@ -26,7 +27,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; @@ -48,6 +48,11 @@ 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(--neutral-focus) inset; + } + .thumb-container { position: absolute; height: calc(var(--thumb-size) * 1px); @@ -114,6 +119,7 @@ export const SliderStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( + neutralFocusBehavior, neutralForegroundActiveBehavior, neutralForegroundHoverBehavior, neutralForegroundRestBehavior, diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts index f3e52413f20..4e53f3af8b1 100644 --- a/packages/web-components/fast-components/src/styles/patterns/button.ts +++ b/packages/web-components/fast-components/src/styles/patterns/button.ts @@ -176,6 +176,11 @@ export const OutlineButtonStyles = css` :host(.outline) .control:active { border-color: var(--accent-fill-active); } + + :host(.outline) .control:${focusVisible} { + border: calc(var(--outline-width) * 1px) solid var(--neutral-focus); + box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) var(--neutral-focus); + } `; export const StealthButtonStyles = css` diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts index 958a6ba3188..611942076d5 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -15,6 +15,7 @@ import { neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, @@ -60,16 +61,13 @@ 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); } @@ -130,16 +128,21 @@ export const SwitchStyles = css` border-color: var(--accent-fill-rest); } - :host(.checked) .switch:hover { + :host(.checked:enabled) .switch:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); } - :host(.checked) .switch:active { + :host(.checked:enabled) .switch:active { background: var(--accent-fill-active); border-color: var(--accent-fill-active); } + :host(.checked:${focusVisible}:enabled) .switch { + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + .unchecked-message { display: block; } @@ -163,6 +166,7 @@ export const SwitchStyles = css` neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, + neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, diff --git a/packages/web-components/fast-components/src/text-area/text-area.styles.ts b/packages/web-components/fast-components/src/text-area/text-area.styles.ts index b66edaabee4..cf3fd3a7457 100644 --- a/packages/web-components/fast-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/fast-components/src/text-area/text-area.styles.ts @@ -38,8 +38,7 @@ export const TextAreaStyles = css` font: inherit; font-size: var(--type-ramp-base-font-size); line-height: var(--type-ramp-base-line-height); - padding-top: calc(var(--design-unit) * 1.5); - padding-bottom: calc(var(--design-unit) * 1.5); + padding: calc(var(--design-unit) * 2px + 1px); max-width: 100%; resize: none; } diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts index 1da583b3b65..74155111378 100644 --- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts @@ -43,7 +43,6 @@ export const TextFieldStyles = css` -webkit-appearance: none; background: transparent; border: 0; - padding: 0; height: calc(100% - 4px); margin-top: auto; margin-bottom: auto; @@ -104,7 +103,7 @@ export const TextFieldStyles = css` border-color: var(--accent-fill-active); } - :host(:focus-within) .root { + :host(:focus-within:not(.disabled)) .root { border-color: var(--neutral-focus); box-shadow: 0 0 0 1px var(--neutral-focus) inset; } From f087747861521e742becda1f55690cf49033c9fd Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Fri, 15 May 2020 09:51:23 -0700 Subject: [PATCH 2/3] More clean up --- .../src/badge/badge.styles.ts | 6 ++---- .../src/checkbox/checkbox.styles.ts | 10 ++++++--- .../src/radio/radio.styles.ts | 10 ++++++--- .../src/styles/patterns/button.ts | 6 ++---- .../src/switch/switch.styles.ts | 18 +++++++++------- .../src/tabs/tabs.styles.ts | 6 ++---- .../src/text-area/text-area.styles.ts | 21 ++++++++----------- .../src/text-field/text-field.styles.ts | 18 ++++++++-------- .../src/switch/switch.styles.ts | 2 +- 9 files changed, 49 insertions(+), 48 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 index 56f41d07346..540d422214b 100644 --- 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 index 197491f7860..ff683a2853c 100644 --- a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts @@ -43,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); @@ -51,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 { 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 index e2dfe97afca..fe780729a8c 100644 --- a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts @@ -47,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); @@ -55,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 { 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 index 03ae0785778..7681d517128 100644 --- 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 index d3b63976649..9fee401e3bc 100644 --- a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts @@ -30,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; ${ /* @@ -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(*) { 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 index d87bcb23c82..837eb37ca6e 100644 --- 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 index 44218470edc..19840937e11 100644 --- 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,12 +33,8 @@ 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; + 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; @@ -83,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; } diff --git a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts index 7093c9118ad..db888c4e5ea 100644 --- a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts @@ -47,11 +47,8 @@ export const TextFieldStyles = css` border: none; padding: 0 calc(var(--design-unit) * 2px + 1px); color: var(--neutral-foreground-rest); - ${ - /* Font size is temporary - - replace when adaptive typography is figured out */ "" - } font-size: 14px; - line-height: 20px; + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); } .control:hover, @@ -61,14 +58,17 @@ export const TextFieldStyles = css` outline: none; } + .label__hidden { + display: none; + visibility: hidden; + } + .label { display: block; color: var(--neutral-foreground-rest); cursor: pointer; - ${ - /* 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); margin-bottom: 4px; } diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts index 611942076d5..047b723f32a 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -30,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; ${ /* @@ -89,7 +90,6 @@ export const SwitchStyles = css` } .status-message { - font-family: var(--body-font); color: var(--neutral-foreground-rest); cursor: pointer; font-size: var(--type-ramp-base-font-size); From 99b83b320a06959000e10701fd0aa1f69fd0cc59 Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Fri, 15 May 2020 11:30:00 -0700 Subject: [PATCH 3/3] Updated Focus visuals --- .../fast-components-msft/src/checkbox/checkbox.styles.ts | 2 +- .../fast-components-msft/src/radio/radio.styles.ts | 2 +- .../fast-components-msft/src/slider/slider.styles.ts | 2 +- .../fast-components-msft/src/switch/switch.styles.ts | 6 +++--- .../fast-components/src/checkbox/checkbox.styles.ts | 8 +++++--- .../fast-components/src/flipper/flipper.styles.ts | 4 +++- .../fast-components/src/menu-item/menu-item.styles.ts | 3 +++ .../fast-components/src/radio/radio.styles.ts | 6 +++--- .../fast-components/src/slider/slider.styles.ts | 2 +- .../fast-components/src/switch/switch.styles.ts | 6 +++--- 10 files changed, 24 insertions(+), 17 deletions(-) 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 index ff683a2853c..ddcfb3f974c 100644 --- a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts @@ -91,7 +91,7 @@ export const CheckboxStyles = css` } :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); } 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 index fe780729a8c..c721ba37dba 100644 --- a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts @@ -90,7 +90,7 @@ export const RadioStyles = css` } :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); } 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 index 89fa551f60a..1cb3fc28cd9 100644 --- a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts +++ b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts @@ -48,7 +48,7 @@ export const SliderStyles = css` grid-template-columns: calc(var(--thumb-size) * 1px) 1fr; } :host(:${focusVisible}) .thumb-cursor { - box-shadow: 0 0 0 2px var(--neutral-focus) inset; + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); } .thumb-container { position: absolute; 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 index 9fee401e3bc..ccfa4e51043 100644 --- a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts @@ -74,7 +74,7 @@ export const SwitchStyles = css` } :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); } @@ -131,8 +131,8 @@ export const SwitchStyles = css` } :host(.checked:${focusVisible}:enabled) .switch { - box-shadow: 0 0 0 1px var(--neutral-focus) inset; - border-color: var(--neutral-focus); + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); + border-color: transparent; } .unchecked-message { diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts index 46ea05f05bb..2e3d1c7a604 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -16,6 +16,7 @@ import { neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, @@ -95,7 +96,7 @@ export const CheckboxStyles = css` } :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); } @@ -115,8 +116,8 @@ export const CheckboxStyles = css` } :host(.checked:${focusVisible}:enabled) .control { - box-shadow: 0 0 0 1px var(--neutral-focus) inset; - border-color: var(--neutral-focus); + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); + border-color: transparent; } @@ -144,6 +145,7 @@ export const CheckboxStyles = css` neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts index c72df4e464e..b352053a9b7 100644 --- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts @@ -14,6 +14,7 @@ import { heightNumber, neutralFillStealthRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineRestBehavior, } from "../styles"; @@ -83,7 +84,7 @@ export const FlipperStyles = css` } :host(:${focusVisible})::before { - box-shadow: 0 0 0 1px var(--neutral-focus) inset; + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent); border-color: var(--neutral-focus); } @@ -97,6 +98,7 @@ export const FlipperStyles = css` accentForegroundCutRestBehavior, neutralFillStealthRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineRestBehavior, forcedColorsStylesheetBehavior( diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts index ed29eca4f3e..b82879c3dac 100644 --- a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts @@ -7,6 +7,7 @@ import { heightNumber, neutralFillStealthRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, } from "../styles"; @@ -33,6 +34,7 @@ export const MenuItemStyles = css` } :host(:${focusVisible}) { + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent); border-color: var(--neutral-focus); background: var(--accent-fill-hover); color: var(--accent-foreground-cut-rest); @@ -99,5 +101,6 @@ export const MenuItemStyles = css` accentForegroundCutRestBehavior, neutralFillStealthRestBehavior, neutralFocusBehavior, + neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior ); diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts index 71cb9cd761d..a666ff4f43b 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -94,7 +94,7 @@ export const RadioStyles = css` } :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); } @@ -114,8 +114,8 @@ export const RadioStyles = css` } :host(.checked:${focusVisible}:enabled) .control { - box-shadow: 0 0 0 1px var(--neutral-focus) inset; - border-color: var(--neutral-focus); + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); + border-color: transparent; } :host(.disabled) .label, diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts index 41dc890c466..f0fc20c1403 100644 --- a/packages/web-components/fast-components/src/slider/slider.styles.ts +++ b/packages/web-components/fast-components/src/slider/slider.styles.ts @@ -50,7 +50,7 @@ export const SliderStyles = css` } :host(:${focusVisible}) .thumb-cursor { - box-shadow: 0 0 0 2px var(--neutral-focus) inset; + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); } .thumb-container { diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts index 047b723f32a..39231db0686 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -74,7 +74,7 @@ export const SwitchStyles = css` } :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); } @@ -139,8 +139,8 @@ export const SwitchStyles = css` } :host(.checked:${focusVisible}:enabled) .switch { - box-shadow: 0 0 0 1px var(--neutral-focus) inset; - border-color: var(--neutral-focus); + box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--neutral-focus); + border-color: transparent; } .unchecked-message {