Fixed disabled button style

Added floating color for select and combobox Fixed tooltip style
microsoft · Oct 21, 2021 · 6db3fc1 · 6db3fc1
1 parent 6de8026
commit 6db3fc1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts
@@ -4,6 +4,7 @@ import {
   Combobox as FoundationCombobox,
   comboboxTemplate as template,
 } from '@microsoft/fast-foundation';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { comboboxStyles as styles } from './combobox.styles';
 
 /**
@@ -46,6 +47,10 @@ export class Combobox extends FoundationCombobox {
     if (!this.appearance) {
       this.appearance = 'outline';
     }
+
+    if (this.listbox) {
+      fillColor.setValueFor(this.listbox, neutralLayerFloating);
+    }
   }
 }
 

diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts
@@ -1,5 +1,6 @@
 import { attr } from '@microsoft/fast-element';
 import { Select as FoundationSelect, SelectOptions, selectTemplate as template } from '@microsoft/fast-foundation';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { selectStyles as styles } from './select.styles';
 
 /**
@@ -42,6 +43,10 @@ export class Select extends FoundationSelect {
     if (!this.appearance) {
       this.appearance = 'outline';
     }
+
+    if (this.listbox) {
+      fillColor.setValueFor(this.listbox, neutralLayerFloating);
+    }
   }
 }
 

diff --git a/packages/web-components/src/styles/patterns/button.styles.ts b/packages/web-components/src/styles/patterns/button.styles.ts
@@ -299,26 +299,35 @@ export const HypertextStyles = (
       line-height: 1;
       text-decoration: underline 1px;
     }
+
     :host .control:not([href]) {
       background-color: transparent;
     }
+
     :host .control${interactivitySelector} {
       background: transparent;
       color: ${accentForegroundRest};
     }
+
     :host .control${interactivitySelector}:hover {
       background: transparent;
       color: ${accentForegroundHover};
       text-decoration: none;
     }
+
     :host .control${interactivitySelector}:active {
       background: transparent;
       color: ${accentForegroundActive};
       text-decoration: none;
     }
+
     :host .control:${focusVisible} {
       box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important;
     }
+
+    :host .control${nonInteractivitySelector} {
+      background: transparent;
+    }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
@@ -356,6 +365,10 @@ export const LightweightButtonStyles = (
       background: ${neutralFillStealthActive};
       color: ${accentForegroundActive};
     }
+
+    :host .control${nonInteractivitySelector} {
+      background: ${neutralFillStealthRest};
+    }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
@@ -402,6 +415,11 @@ export const OutlineButtonStyles = (
     :host .control${interactivitySelector}:active {
       border-color: ${neutralStrokeActive};
     }
+
+    :host .control${nonInteractivitySelector} {
+      background: transparent !important;
+      border-color: ${neutralStrokeRest};
+    }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`
@@ -436,6 +454,10 @@ export const StealthButtonStyles = (
     :host .control${interactivitySelector}:active {
       background: ${neutralFillStealthActive};
     }
+
+    :host .control${nonInteractivitySelector} {
+      background: ${neutralFillStealthRest};
+    }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(
       css`

diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts
@@ -10,6 +10,7 @@ import {
   controlCornerRadius,
   fillColor,
   neutralForegroundRest,
+  neutralStrokeLayerRest,
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
@@ -32,7 +33,7 @@ export const tooltipStyles: (
     .tooltip {
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
       background: ${fillColor};
       color: ${neutralForegroundRest};
       padding: 4px 12px;
@@ -66,13 +67,14 @@ export const tooltipStyles: (
       width: 12px;
       height: 12px;
       background: ${fillColor};
-      border-radius: calc(${controlCornerRadius} * 1px);
+      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
+      border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
       position: absolute;
     }
 
     fluent-anchored-region.top .tooltip::after {
-      transform: rotate(45deg) translateX(-50%);
-      bottom: 4px;
+      transform: translateX(-50%) rotate(225deg);
+      bottom: 5px;
       left: 50%;
     }
 
@@ -81,8 +83,8 @@ export const tooltipStyles: (
     }
 
     fluent-anchored-region.bottom .tooltip::after {
-      transform: rotate(45deg) translateX(-50%);
-      top: 12px;
+      transform: translateX(-50%) rotate(45deg);
+      top: 5px;
       left: 50%;
     }
 
@@ -91,19 +93,19 @@ export const tooltipStyles: (
     }
 
     fluent-anchored-region.left .tooltip::after {
-      transform: rotate(45deg) translateY(-50%);
+      transform: translateY(-50%) rotate(135deg);
       top: 50%;
-      right: 12px;
+      right: 5px;
     }
 
     fluent-anchored-region.left .tooltip {
       margin-right: 12px;
     }
 
     fluent-anchored-region.right .tooltip::after {
-      transform: rotate(45deg) translateY(-50%);
+      transform: translateY(-50%) rotate(-45deg);
       top: 50%;
-      left: 4px;
+      left: 5px;
     }
 
     fluent-anchored-region.right .tooltip {