updating class menu, select and tabs file. more color style updates

lebmouse · Sep 3, 2021 · d0c0ff9 · d0c0ff9
1 parent 9006202
commit d0c0ff9
Show file tree

Hide file tree

Showing 14 changed files with 204 additions and 130 deletions.
diff --git a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -12,12 +12,8 @@ import {
     controlCornerRadius,
     focusStrokeOuter,
     focusStrokeWidth,
-    neutralFillActive,
-    neutralFillHover,
-    neutralForegroundActive,
+    neutralFillRest,
     neutralForegroundHover,
-    // neutralForegroundActive,
-    // neutralForegroundHover,
     neutralForegroundRest,
     strokeWidth,
     typeRampBaseFontSize,
@@ -72,18 +68,20 @@ export const breadcrumbItemStyles: (
       padding: 4px 8px;
     }
 
-    .control:hover {
-      background: ${neutralFillHover};
+    .control:hover,
+    .control:active {
+      background: ${neutralFillRest};
       color: ${neutralForegroundHover};
     }
 
     .control:active {
-      background: ${neutralFillActive};
-      color: ${neutralForegroundActive};
+      background: transparent;
+      color: ${neutralForegroundHover};
     }
 
     .control:${focusVisible} {
       border-color: ${focusStrokeOuter};
+      color: ${neutralForegroundHover};
     }
 
     .control:${focusVisible}::after {

diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts
@@ -16,10 +16,6 @@ import {
     disabledOpacity,
     focusStrokeOuter,
     focusStrokeWidth,
-    neutralFillInputActive,
-    neutralFillInputFocus,
-    neutralFillInputHover,
-    neutralFillInputRest,
     neutralForegroundActive,
     neutralForegroundHover,
     neutralForegroundRest,
@@ -95,18 +91,15 @@ export const checkboxStyles: (
 
     :host(:hover) .control,
     :host([aria-checked="true"]:enabled:hover) .control {
-      background: transparent;
       border-color: ${strokeControlStrongHover};
     }
 
     :host[aria-checked="true"]:enabled:active) .control {
-      background: transparent;
       border-color: ${neutralForegroundActive};
     }
 
     :host(:${focusVisible}) .control {
       box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter};
-      background: transparent;
       border-color: ${focusStrokeOuter};
     }
 

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
@@ -18,6 +18,7 @@ import {
     focusStrokeWidth,
     neutralFillStealthActive,
     neutralFillStealthHover,
+    neutralFillStealthRest,
     neutralForegroundHint,
     neutralForegroundRest,
     strokeControlStrongRest,
@@ -52,6 +53,7 @@ export const menuItemStyles: (
       line-height: ${typeRampBaseLineHeight};
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid transparent;
+      background: ${neutralFillStealthRest};
     }
 
     :host(.indent-0) {

diff --git a/packages/web-components/fast-components/src/menu/index.ts b/packages/web-components/fast-components/src/menu/index.ts
@@ -1,9 +1,28 @@
-import { Menu, menuTemplate as template } from "@microsoft/fast-foundation";
+import {
+    Menu as FoundationMenu,
+    menuTemplate as template,
+} from "@microsoft/fast-foundation";
+import { fillColor, neutralLayerFloating } from "../design-tokens";
 import { menuStyles as styles } from "./menu.styles";
 
 /**
- * A function that returns a {@link @microsoft/fast-foundation#Menu} registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#menuTemplate}
+ * The FAST menu class
+ * @public
+ */
+export class Menu extends FoundationMenu {
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+        super.connectedCallback();
+
+        fillColor.setValueFor(this, neutralLayerFloating);
+    }
+}
+
+/**
+ * The FAST Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
+ * {@link @microsoft/fast-foundation#menuTemplate}
  *
  *
  * @public
@@ -21,9 +40,3 @@ export const fastMenu = Menu.compose({
  * @public
  */
 export const menuStyles = styles;
-
-/**
- * Base class for Menu
- * @public
- */
-export { Menu };
diff --git a/packages/web-components/fast-components/src/menu/menu.styles.ts b/packages/web-components/fast-components/src/menu/menu.styles.ts
@@ -10,9 +10,9 @@ import { elevationShadowFlyout } from "../styles/index";
 import {
     controlCornerRadius,
     designUnit,
+    fillColor,
     layerCornerRadius,
     neutralForegroundRest,
-    neutralLayerFloating,
     neutralStrokeDividerRest,
     strokeWidth,
 } from "../design-tokens";
@@ -26,7 +26,7 @@ export const menuStyles: (
 ) =>
     css`
         ${display("block")} :host {
-            background: ${neutralLayerFloating};
+            background: ${fillColor};
             border: calc(${strokeWidth} * 1px) solid transparent;
             border-radius: ${layerCornerRadius};
             box-shadow: ${elevationShadowFlyout};

diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts
@@ -13,13 +13,8 @@ import {
     bodyFont,
     designUnit,
     disabledOpacity,
-    fillColor,
     focusStrokeOuter,
     focusStrokeWidth,
-    neutralFillInputActive,
-    neutralFillInputFocus,
-    neutralFillInputHover,
-    neutralFillInputRest,
     neutralForegroundRest,
     strokeControlStrongActive,
     strokeControlStrongHover,
@@ -102,13 +97,11 @@ export const radioStyles: (
 
     :host(:enabled:hover) .control,
     :host(.checked:enabled:hover) .control {
-      background: transparent;
       border-color: ${strokeControlStrongHover};
     }
 
     :host(:enabled:active) .control,
     :host(.checked:enabled:active) .control {
-      background: transparent;
       border-color: ${strokeControlStrongActive};
     }
 
@@ -118,7 +111,6 @@ export const radioStyles: (
 
     :host(:${focusVisible}) .control,
     :host(.checked:enabled:${focusVisible}) .control {
-      background: transparent;
       border-color: ${focusStrokeOuter};
       box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter};
     }

diff --git a/packages/web-components/fast-components/src/select/index.ts b/packages/web-components/fast-components/src/select/index.ts
@@ -1,13 +1,32 @@
 import {
-    Select,
+    Select as FoundationSelect,
     SelectOptions,
     selectTemplate as template,
 } from "@microsoft/fast-foundation";
+import { fillColor, neutralLayerFloating } from "../design-tokens";
 import { selectStyles as styles } from "./select.styles";
 
 /**
- * A function that returns a {@link @microsoft/fast-foundation#Select} registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#selectTemplate}
+ * The FAST select class
+ * @internal
+ */
+export class Select extends FoundationSelect {
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+        super.connectedCallback();
+
+        const listbox = this.closest(".listbox") as HTMLElement;
+        if (listbox) {
+            fillColor.setValueFor(listbox, neutralLayerFloating);
+        }
+    }
+}
+
+/**
+ * The FAST select Custom Element. Implements, {@link @microsoft/fast-foundation#Select}
+ * {@link @microsoft/fast-foundation#selectTemplate}
  *
  *
  * @public
@@ -30,17 +49,11 @@ export const fastSelect = Select.compose<SelectOptions>({
             d="M3.44084 6.7154C2.96937 6.1766 3.35203 5.33333 4.06799 5.33333H11.9322C12.6481 5.33333 13.0308 6.1766 12.5593 6.7154L8.87809 10.9225C8.41322 11.4537 7.58689 11.4537 7.12202 10.9225L3.44084 6.7154ZM4.43528 6.33333L7.87462 10.264C7.94102 10.3399 8.05909 10.3399 8.12549 10.264L11.5648 6.33333H4.43528Z"
         />
     </svg>
-    `,
+  `,
 });
 
 /**
  * Styles for Select
  * @public
  */
 export const selectStyles = styles;
-
-/**
- * Base class for Select
- * @public
- */
-export { Select };
diff --git a/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts b/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts
@@ -9,7 +9,6 @@ import {
     neutralFillInputHover,
     neutralFillInputRest,
     neutralFillRest,
-    neutralForegroundRest,
 } from "../design-tokens";
 
 export const skeletonStyles: (
@@ -21,15 +20,15 @@ export const skeletonStyles: (
 ) =>
     css`
         ${display("block")} :host {
-            --skeleton-fill-default: #e1dfdd;
+            --skeleton-fill-default: ${neutralFillInputRest};
             overflow: hidden;
             width: 100%;
             position: relative;
             background-color: var(--skeleton-fill, var(--skeleton-fill-default));
             --skeleton-animation-gradient-default: linear-gradient(
                 270deg,
                 var(--skeleton-fill, var(--skeleton-fill-default)) 0%,
-                #f3f2f1 51.13%,
+                ${neutralFillInputHover} 51.13%,
                 var(--skeleton-fill, var(--skeleton-fill-default)) 100%
             );
             --skeleton-animation-timing-default: ease-in-out;

diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts
@@ -17,13 +17,9 @@ import {
     disabledOpacity,
     focusStrokeOuter,
     focusStrokeWidth,
-    neutralFillActive,
-    neutralFillHover,
     neutralFillRest,
     neutralFillStealthRest,
     neutralFillStrongHover,
-    neutralFillStrongRest,
-    strokeControlStrongActive,
     strokeControlStrongHover,
     strokeControlStrongRest,
     strokeWidth,
@@ -79,7 +75,8 @@ export const sliderStyles: (
       border-radius: 50%;
       box-sizing: border-box;
     }
-    :host(:not(.disabled)) .thumb-cursor:hover {
+    :host(:not(.disabled)) .thumb-cursor:hover,
+    :host(:not(.disabled)) .thumb-cursor:active {
       background: ${neutralFillStrongHover};
       border-color: ${strokeControlStrongHover};
     }

diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts
@@ -16,6 +16,7 @@ import {
     controlCornerRadius,
     density,
     designUnit,
+    focusStrokeInner,
     focusStrokeOuter,
     focusStrokeWidth,
     foregroundOnAccentActive,
@@ -194,6 +195,8 @@ export const AccentButtonStyles = (
     }
 
     :host .control:${focusVisible} {
+      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset,
+        0 0 0 calc(((${focusStrokeWidth} * 2) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important;
       color: ${foregroundOnAccentHover};
     }
   `.withBehaviors(

diff --git a/packages/web-components/fast-components/src/tab/tab.styles.ts b/packages/web-components/fast-components/src/tab/tab.styles.ts
@@ -17,8 +17,6 @@ import {
     focusStrokeOuter,
     focusStrokeWidth,
     neutralFillHover,
-    neutralFillRest,
-    neutralFillStealthRest,
     neutralForegroundHover,
     neutralForegroundRest,
     strokeWidth,
@@ -45,14 +43,12 @@ export const tabStyles: (
         padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
         color: ${neutralForegroundRest};
         fill: currentcolor;
-        background: ${neutralFillRest};
         border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid transparent;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         outline: none;
-        margin: 4px;
       }
 
       :host(:not(.disabled):hover),
@@ -64,30 +60,30 @@ export const tabStyles: (
       }
 
       :host(:${focusVisible}) {
-        background: ${neutralFillHover};
         border-color: ${focusStrokeOuter};
         box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
         color: ${neutralForegroundHover};
       }
 
-      :host([aria-selected="true"]) {
-        z-index: 2;
-        background: ${neutralFillHover};
-        color: ${neutralForegroundHover};
-      }
-
       :host([disabled]) {
         cursor: ${disabledCursor};
         opacity: ${disabledOpacity};
-    }
+      }
+
+      :host([disabled]:hover) {
+        background: transparent;
+      }
 
       :host(.vertical) {
         justify-content: start;
-        grid-column: 1 / 3;
+        grid-column: 2 / 3;
       }
 
-      :host(.vertical[aria-selected="true"]) {
+      :host([aria-selected="true"]),
+      :host(.vertical[aria-selected="true"]),
+      :host(.vertical:hover[aria-selected="true"]) {
         z-index: 2;
+        background: ${neutralFillHover};
       }
     `.withBehaviors(
         forcedColorsStylesheetBehavior(
@@ -117,7 +113,7 @@ export const tabStyles: (
             border-color: ${SystemColors.GrayText};
             color: ${SystemColors.GrayText};
             fill: currentcolor;
-        }
+          }
         `
         )
     );