fix: style default fast web components (#3138)

* feat: default fast component styling
microsoft · May 18, 2020 · 6bc4695 · 6bc4695
1 parent 17c609d
commit 6bc4695
Show file tree

Hide file tree

Showing 14 changed files with 265 additions and 75 deletions.
diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
@@ -5,9 +5,15 @@ import { disabledCursor, display } from "../styles";
 import { focusVisible } from "../styles/focus";
 import { heightNumber } from "../styles/size";
 import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles/recipes";
@@ -58,14 +64,14 @@ export const CheckboxStyles = css`
         width: 100%;
         height: 100%;
         display: block;
-        fill: var(--neutral-foreground-rest);
+        fill: var(--accent-foreground-cut-rest);
         opacity: 0;
         pointer-events: none;
     }
 
     .indeterminate-indicator {
         border-radius: calc(var(--corner-radius) * 1px);
-        background: var(--neutral-foreground-rest);
+        background: var(--accent-foreground-cut-rest);
         position: absolute;
         top: 25%;
         right: 25%;
@@ -79,11 +85,37 @@ export const CheckboxStyles = css`
         border-color: var(--neutral-outline-hover);
     }
 
+    .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);
     }
 
+    :host(.checked) .control {
+        background: var(--accent-fill-rest);
+        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
+    }
+
+    :host(.checked) .control:hover {
+        background: var(--accent-fill-hover);
+        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-hover);
+    }
+
+    :host(.checked) .control:active {
+        background: var(--accent-fill-active);
+        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active);
+    }
+
+    :host(.checked:${focusVisible}) .control {
+        box-shadow: 0 0 0 1px var(--neutral-focus) inset;
+        border-color: var(--neutral-focus);
+    }
+
+
     :host(.disabled) .label,
     :host(.readonly) .label,
     :host(.readonly) .control,
@@ -100,9 +132,15 @@ export const CheckboxStyles = css`
         opacity: var(--disabled-opacity);
     }
 `.withBehaviors(
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
+    neutralFillInputActiveBehavior,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
     neutralForegroundRestBehavior,
+    neutralOutlineActiveBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(

diff --git a/packages/web-components/fast-components/src/fast-design-system.ts b/packages/web-components/fast-components/src/fast-design-system.ts
@@ -201,9 +201,9 @@ export const fastDesignSystemDefaults: FASTDesignSystem = {
     backgroundColor: "#181818",
     density: 0,
     designUnit: 4,
-    baseHeightMultiplier: 8,
+    baseHeightMultiplier: 10,
     baseHorizontalSpacingMultiplier: 3,
-    cornerRadius: 2,
+    cornerRadius: 3,
     focusOutlineWidth: 2,
     disabledOpacity: 0.3,
     outlineWidth: 1,

diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts
@@ -4,13 +4,13 @@ import { SystemColors } from "@microsoft/fast-web-utilities";
 import { disabledCursor, display, focusVisible } from "../styles";
 import { heightNumber } from "../styles/size";
 import {
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "../styles/recipes";
 
@@ -22,18 +22,17 @@ export const FlipperStyles = css`
         align-items: center;
         margin: 0;
         position: relative;
-        fill: var(--neutral-foreground-rest);
-        color: var(--neutral-foreground-rest);
+        fill: var(--accent-foreground-cut-rest);
+        color: var(--accent-foreground-cut-rest);
         background: transparent;
         border: none;
         padding: 0;
     }
 
     :host::before {
         content: "";
-        opacity: 0.8;
-        background: var(--neutral-fill-stealth-rest);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+        background: var(--accent-fill-rest);
+        border: calc(var(--outline-width) * 1px) solid var(--accent-fill-rest);
         border-radius: 50%;
         position: absolute;
         top: 0;
@@ -56,11 +55,23 @@ export const FlipperStyles = css`
     :host(.disabled) {
         opacity: var(--disabled-opacity);
         cursor: ${disabledCursor};
+        fill: var(--neutral-foreground-rest);
+        color: var(--neutral-foreground-rest);
+    }
+
+    :host(.disabled)::before {
+        background: var(--neutral-fill-stealth-rest);
+        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
     }
 
-    :host(:hover)::before {
-        background: var(--neutral-fill-stealth-hover);
-        border-color: var(--neutral-outline-hover);
+    :host(:hover:enabled)::before {
+        background: var(--accent-fill-hover);
+        border-color: var(--accent-fill-hover);
+    }
+
+    :host(:active:enabled)::before {
+        background: var(--accent-fill-active);
+        border-color: var(--accent-fill-active);
     }
 
     :host(:${focusVisible}) {
@@ -72,22 +83,17 @@ export const FlipperStyles = css`
         border-color: var(--neutral-focus);
     }
 
-    :host(:active)::before {
-        background: var(--neutral-fill-stealth-active);
-        border-color: var(--neutral-outline-active);
-    }
-
     :host::-moz-focus-inner {
         border: 0;
     }
 `.withBehaviors(
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    accentForegroundCutRestBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralForegroundRestBehavior,
-    neutralOutlineActiveBehavior,
-    neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
     forcedColorsStylesheetBehavior(
         css`

diff --git a/packages/web-components/fast-components/src/menu-item/fixtures/menu-item.html b/packages/web-components/fast-components/src/menu-item/fixtures/menu-item.html
@@ -7,6 +7,29 @@ <h4>Default (menuitem)</h4>
     <h4>Disabled</h4>
     <fast-menu-item disabled>Menu item 1</fast-menu-item>
 
+    <h4>Disabled Start End</h4>
+    <fast-menu-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>
+        Menu item 1
+        <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-menu-item>
+
     <h4>menuitemcheckbox</h4>
     <fast-menu-item role="menuitemcheckbox">Menu item 1</fast-menu-item>
 

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
@@ -1,11 +1,12 @@
 import { css } from "@microsoft/fast-element";
 import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentForegroundCutRestBehavior,
     disabledCursor,
     display,
     focusVisible,
     heightNumber,
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralForegroundRestBehavior,
@@ -35,21 +36,37 @@ export const MenuItemStyles = css`
 
     :host(:${focusVisible}) {
         border-color: var(--neutral-focus);
+        background: var(--accent-fill-hover);
+        color: var(--accent-foreground-cut-rest);
     }
 
     :host(:hover) {
-        background: var(--neutral-fill-stealth-hover);
+        background: var(--accent-fill-hover);
+        color: var(--accent-foreground-cut-rest);
     }
 
     :host(:active) {
-        background: var(--neutral-fill-stealth-active);
+        background: var(--accent-fill-active);
+        color: var(--accent-foreground-cut-rest);
     }
 
     :host(.disabled) {
         cursor: ${disabledCursor};
         opacity: var(--disabled-opacity);
     }
 
+    :host(.disabled:hover) {
+        color: var(--neutral-foreground-rest);
+        fill: var(--neutral-foreground-rest);
+        background: var(--neutral-fill-stealth-rest)
+    }
+
+    :host(.disabled:hover) .start,
+    :host(.disabled:hover) .end,
+    :host(.disabled:hover)::slotted(svg) {
+        fill: var(--neutral-foreground-rest);
+    }
+
     .content {
         grid-column-start: 2;
         justify-self: start;
@@ -66,9 +83,22 @@ export const MenuItemStyles = css`
         } width: 16px;
         height: 16px;
     }
+
+    :host(:hover) .start,
+    :host(:hover) .end,
+    :host(:hover)::slotted(svg){
+        fill: var(--accent-foreground-cut-rest);
+    }
+
+    :host(:active) .start,
+    :host(:active) .end,
+    :host(:active)::slotted(svg) {
+        fill: var(--accent-foreground-cut-rest);
+    }
 `.withBehaviors(
-    neutralFillStealthActiveBehavior,
-    neutralFillStealthHoverBehavior,
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentForegroundCutRestBehavior,
     neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralForegroundRestBehavior

diff --git a/packages/web-components/fast-components/src/menu/menu.styles.ts b/packages/web-components/fast-components/src/menu/menu.styles.ts
@@ -12,6 +12,7 @@ export const MenuStyles = css`
         background: var(--neutral-layer-floating);
         border-radius: var(--elevated-corner-radius);
         ${elevation} margin: 0;
+        border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 1px) 0;
         max-width: 368px;
         min-width: 64px;