From e6468934962e55bdd8b214b7a17b17545daf820d Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Thu, 2 Sep 2021 20:16:43 -0700 Subject: [PATCH] adjust delta to match design --- .../fast-components/docs/api-report.md | 46 ++-- .../src/anchor/fixtures/anchor.html | 186 ++++++--------- .../breadcrumb-item/breadcrumb-item.styles.ts | 15 +- .../src/button/fixtures/button.html | 219 +++++++----------- .../fast-components/src/card/card.styles.ts | 3 +- .../src/checkbox/checkbox.styles.ts | 12 +- .../color/recipes/gradient-shadow-stroke.ts | 48 ---- .../src/color/recipes/underline-stroke.ts | 45 ---- .../color/utilities/base-layer-luminance.ts | 2 +- .../fast-components/src/combobox/index.ts | 24 +- .../fast-components/src/custom-elements.ts | 3 + .../fast-components/src/design-tokens.ts | 135 ++--------- .../src/flipper/flipper.styles.ts | 25 +- .../listbox-option/listbox-option.styles.ts | 136 +++++------ .../fast-components/src/listbox/index.ts | 27 ++- .../src/listbox/listbox.styles.ts | 7 +- .../fast-components/src/menu-item/index.ts | 2 +- .../src/menu-item/menu-item.styles.ts | 33 ++- .../fast-components/src/radio/radio.styles.ts | 13 +- .../fast-components/src/select/index.ts | 5 +- .../src/styles/patterns/button.ts | 25 +- .../src/styles/patterns/input.ts | 27 ++- .../src/switch/switch.styles.ts | 16 +- .../fast-components/src/tab/tab.styles.ts | 15 +- .../fast-components/src/tabs/index.ts | 5 + .../fast-components/src/tabs/tabs.styles.ts | 4 + 26 files changed, 403 insertions(+), 675 deletions(-) delete mode 100644 packages/web-components/fast-components/src/color/recipes/gradient-shadow-stroke.ts delete mode 100644 packages/web-components/fast-components/src/color/recipes/underline-stroke.ts diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 0d331b35fc8..f61a03ad1db 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -44,7 +44,7 @@ import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundati import { HorizontalScrollOptions } from '@microsoft/fast-foundation'; import { Listbox } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; -import { Menu } from '@microsoft/fast-foundation'; +import { Menu as Menu_2 } from '@microsoft/fast-foundation'; import { MenuItem } from '@microsoft/fast-foundation'; import { MenuItemOptions } from '@microsoft/fast-foundation'; import { NumberField as NumberField_2 } from '@microsoft/fast-foundation'; @@ -54,7 +54,7 @@ import { ProgressRingOptions } from '@microsoft/fast-foundation'; import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; import { RadioOptions } from '@microsoft/fast-foundation'; -import { Select } from '@microsoft/fast-foundation'; +import { Select as Select_2 } from '@microsoft/fast-foundation'; import { SelectOptions } from '@microsoft/fast-foundation'; import { Skeleton } from '@microsoft/fast-foundation'; import { Slider } from '@microsoft/fast-foundation'; @@ -64,7 +64,7 @@ import { Switch } from '@microsoft/fast-foundation'; import { SwitchOptions } from '@microsoft/fast-foundation'; import { Tab } from '@microsoft/fast-foundation'; import { TabPanel } from '@microsoft/fast-foundation'; -import { Tabs } from '@microsoft/fast-foundation'; +import { Tabs as Tabs_2 } from '@microsoft/fast-foundation'; import { TextArea as TextArea_2 } from '@microsoft/fast-foundation'; import { TextField as TextField_2 } from '@microsoft/fast-foundation'; import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation'; @@ -165,7 +165,7 @@ export const allComponents: { fastHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; - fastMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; + fastMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; fastNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; fastProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -177,7 +177,7 @@ export const allComponents: { fastSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; fastSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; - fastTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; + fastTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; @@ -677,7 +677,11 @@ export { ListboxOption } // @public export const listboxStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; -export { Menu } +// @public +export class Menu extends Menu_2 { + // @internal (undocumented) + connectedCallback(): void; +} export { MenuItem } @@ -965,7 +969,13 @@ export interface Recipe { evaluate(element: HTMLElement, reference?: Swatch): T; } -export { Select } +// Warning: (ae-internal-missing-underscore) The name "Select" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export class Select extends Select_2 { + // (undocumented) + connectedCallback(): void; +} // @public export const selectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -1087,7 +1097,11 @@ export { TabPanel } // @public export const tabPanelStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; -export { Tabs } +// @public +export class Tabs extends Tabs_2 { + // @internal (undocumented) + connectedCallback(): void; +} // @public export const tabsStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; @@ -1214,14 +1228,14 @@ export const typeRampPlus6LineHeight: import("@microsoft/fast-foundation").CSSDe // // dist/dts/color/palette.d.ts:48:5 - (ae-forgotten-export) The symbol "create" needs to be exported by the entry point index.d.ts // dist/dts/color/palette.d.ts:49:5 - (ae-forgotten-export) The symbol "from" needs to be exported by the entry point index.d.ts -// dist/dts/custom-elements.d.ts:70:5 - (ae-incompatible-release-tags) The symbol "fastButton" is marked as @public, but its signature references "Button" which is marked as @internal -// dist/dts/custom-elements.d.ts:71:5 - (ae-incompatible-release-tags) The symbol "fastCard" is marked as @public, but its signature references "Card" which is marked as @internal -// dist/dts/custom-elements.d.ts:77:5 - (ae-incompatible-release-tags) The symbol "fastDesignSystemProvider" is marked as @public, but its signature references "DesignSystemProvider" which is marked as @internal -// dist/dts/custom-elements.d.ts:79:5 - (ae-incompatible-release-tags) The symbol "fastDisclosure" is marked as @public, but its signature references "Disclosure" which is marked as @internal -// dist/dts/custom-elements.d.ts:95:5 - (ae-incompatible-release-tags) The symbol "fastSliderLabel" is marked as @public, but its signature references "SliderLabel" which is marked as @internal -// dist/dts/custom-elements.d.ts:100:5 - (ae-incompatible-release-tags) The symbol "fastTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal -// dist/dts/custom-elements.d.ts:101:5 - (ae-incompatible-release-tags) The symbol "fastTextField" is marked as @public, but its signature references "TextField" which is marked as @internal -// dist/dts/custom-elements.d.ts:103:5 - (ae-incompatible-release-tags) The symbol "fastToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal +// dist/dts/custom-elements.d.ts:72:5 - (ae-incompatible-release-tags) The symbol "fastButton" is marked as @public, but its signature references "Button" which is marked as @internal +// dist/dts/custom-elements.d.ts:73:5 - (ae-incompatible-release-tags) The symbol "fastCard" is marked as @public, but its signature references "Card" which is marked as @internal +// dist/dts/custom-elements.d.ts:79:5 - (ae-incompatible-release-tags) The symbol "fastDesignSystemProvider" is marked as @public, but its signature references "DesignSystemProvider" which is marked as @internal +// dist/dts/custom-elements.d.ts:81:5 - (ae-incompatible-release-tags) The symbol "fastDisclosure" is marked as @public, but its signature references "Disclosure" which is marked as @internal +// dist/dts/custom-elements.d.ts:97:5 - (ae-incompatible-release-tags) The symbol "fastSliderLabel" is marked as @public, but its signature references "SliderLabel" which is marked as @internal +// dist/dts/custom-elements.d.ts:102:5 - (ae-incompatible-release-tags) The symbol "fastTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal +// dist/dts/custom-elements.d.ts:103:5 - (ae-incompatible-release-tags) The symbol "fastTextField" is marked as @public, but its signature references "TextField" which is marked as @internal +// dist/dts/custom-elements.d.ts:105:5 - (ae-incompatible-release-tags) The symbol "fastToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/fast-components/src/anchor/fixtures/anchor.html b/packages/web-components/fast-components/src/anchor/fixtures/anchor.html index 8e1b2daa1cf..68e8d434def 100644 --- a/packages/web-components/fast-components/src/anchor/fixtures/anchor.html +++ b/packages/web-components/fast-components/src/anchor/fixtures/anchor.html @@ -1,136 +1,86 @@ - -

Anchor

-

with href / without href

-

Default

-
- Anchor - Anchor -
+

Default

+Anchor + +

Inline

+Cancel +Submit -

With target

-
- Anchor - Anchor -
+
With target
+Anchor -

Neutral

-
- Anchor - Anchor -
+

Neutral

+Button -

Accent

-
- Anchor - Anchor -
+

Accent

+Anchor -

Hypertext

-
- Anchor - Anchor -
+

Hypertext

+Anchor +
+
+Anchor (no href) -

Inline

- Lorem ipsum dolor sit - amet (no href) - consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, - voluptate, corrupti - - doloremque totam - + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod + ipsam cupiditate, voluptate, corrupti + doloremque totam dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.

+
+ + The next anchor is intentionally short, and this anchor is intentionally long + + +
+
+Hi -

Lightweight

-
- Anchor - Anchor -
+

Lightweight

+Anchor +
+ + The next anchor is intentionally short, and this anchor is intentionally long + +
+Hi -

Outline

-
- Anchor - Anchor -
+

Outline

+Anchor -

Stealth

-
- Anchor - Anchor -
+

Stealth

+Anchor -

With start

-
- - Anchor - - - - - - Anchor - - - - -
+

With start

+ + Anchor + + + + -

With end

-
- - Anchor - - - - - - Anchor - - - - -
+

With end

+ + Anchor + + + + -

Icon in default slot

-
- - - - - - - - - - -
+

Icon in default slot

+ + + + + -

With aria-label

-
- - -
+

With aria-label

+ 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 index ef251cc0509..2f8375f454b 100644 --- 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 @@ -13,6 +13,11 @@ import { focusStrokeOuter, focusStrokeWidth, neutralFillRest, + neutralFillStealthActive, + neutralFillStealthFocus, + neutralFillStealthHover, + neutralFillStealthRest, + neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, @@ -57,6 +62,7 @@ export const breadcrumbItemStyles: ( position: relative; align-items: center; box-sizing: border-box; + background: ${neutralFillStealthRest}; color: ${neutralForegroundRest}; cursor: pointer; display: flex; @@ -68,15 +74,14 @@ export const breadcrumbItemStyles: ( padding: 4px 8px; } - .control:hover, - .control:active { - background: ${neutralFillRest}; + .control:hover { + background: ${neutralFillStealthHover}; color: ${neutralForegroundHover}; } .control:active { - background: transparent; - color: ${neutralForegroundHover}; + background: ${neutralFillStealthActive}; + color: ${neutralForegroundActive}; } .control:${focusVisible} { diff --git a/packages/web-components/fast-components/src/button/fixtures/button.html b/packages/web-components/fast-components/src/button/fixtures/button.html index 8d7b677e968..6a9e690f373 100644 --- a/packages/web-components/fast-components/src/button/fixtures/button.html +++ b/packages/web-components/fast-components/src/button/fixtures/button.html @@ -1,151 +1,92 @@ - -

Button

-

enabled / disabled

-

Default

-
- Button - Button -
+

Default

+Button + +

Inline

+Cancel +Submit + +

disabled

+Button +

autofocus

+Button + +

Neutral

+Button +

disabled

+Button -
autofocus
-
- Button - Button -
+

Accent

+Button +

disabled

+Button -

Neutral

-
- Button - Button -
+

Lightweight

+Button +

disabled

+Button -

Accent

-
- Button - Button -
+

Outline

+Button +

disabled

+Button -

Lightweight

-
- Button - Button -
+

Stealth

+Button +

disabled

+Button -

Outline

-
- Button - Button -
+

With start

+ + Button + + + + -

Stealth

-
- Button - Button -
+

With end

+ + Button + + + + -

With start

-
- - Button - - - - - - Button - - - - -
+

Icon in default slot

+ + + + + -

With end

-
- - Button - - - - - - Button - - - - -
+

With aria-label

+Button -

Icon in default slot

-
- - - - - - - - - - -
+
+ + Submit +
-

With aria-label

-
- Button - Button -
+
+ + Reset +
diff --git a/packages/web-components/fast-components/src/card/card.styles.ts b/packages/web-components/fast-components/src/card/card.styles.ts index 9ea0571d834..8ca404e5ba7 100644 --- a/packages/web-components/fast-components/src/card/card.styles.ts +++ b/packages/web-components/fast-components/src/card/card.styles.ts @@ -10,7 +10,6 @@ import { fillColor, layerCornerRadius, neutralForegroundRest, - neutralStrokeRest, strokeWidth, } from "../design-tokens"; import { @@ -35,7 +34,7 @@ export const cardStyles: ( width: var(--card-width, 100%); box-sizing: border-box; background: ${fillColor}; - border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; + border: calc(${strokeWidth} * 1px) solid transparent; border-radius: calc(${layerCornerRadius} * 1px); box-shadow: ${elevationShadowCardRest}; color: ${neutralForegroundRest}; 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 7cd9dd6e3c9..4073933f356 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -19,6 +19,7 @@ import { neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, + strokeControlStrongFocus, strokeControlStrongHover, strokeControlStrongRest, strokeWidth, @@ -79,7 +80,7 @@ export const checkboxStyles: ( justify-content: center; width: 100%; height: 100%; - fill: ${neutralForegroundRest}; + fill: ${neutralForegroundHover}; opacity: 0; pointer-events: none; } @@ -99,8 +100,8 @@ export const checkboxStyles: ( } :host(:${focusVisible}) .control { - box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter}; - border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${strokeControlStrongFocus}; + border-color: ${strokeControlStrongFocus}; } :host(.disabled) .label, @@ -120,11 +121,6 @@ export const checkboxStyles: ( fill: ${neutralForegroundHover}; } - :host([aria-checked="true"]:enabled:active) slot[name="checked-indicator"], - :host([aria-checked="true"]:enabled:active) slot[name="indeterminate-indicator"] { - fill: ${neutralForegroundActive}; - } - :host(.disabled) { opacity: ${disabledOpacity}; } diff --git a/packages/web-components/fast-components/src/color/recipes/gradient-shadow-stroke.ts b/packages/web-components/fast-components/src/color/recipes/gradient-shadow-stroke.ts deleted file mode 100644 index 24fedb9c150..00000000000 --- a/packages/web-components/fast-components/src/color/recipes/gradient-shadow-stroke.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { InteractiveSet } from "../../design-tokens"; -import { Palette } from "../palette"; -import { Swatch } from "../swatch"; -import { directionByIsDark } from "../utilities/direction-by-is-dark"; - -/** - * @internal - */ -export function gradientShadowStroke( - palette: Palette, - reference: Swatch, - restDelta: number, - hoverDelta: number, - activeDelta: number, - focusDelta: number, - shadowDelta: number, - shadowPercentage: number = 10 -): InteractiveSet { - const referenceIndex = palette.closestIndexOf(reference); - const direction = directionByIsDark(reference); - - const restIndex = referenceIndex + direction * restDelta; - const hoverIndex = restIndex + direction * (hoverDelta - restDelta); - const activeIndex = restIndex + direction * (activeDelta - restDelta); - const focusIndex = restIndex + direction * (focusDelta - restDelta); - - const startPosition = direction === -1 ? shadowPercentage : 100 - shadowPercentage; - - function gradientHelper(index: number, applyShadow: boolean): string { - const color = palette.get(index); - if (applyShadow) { - // Shadow is actually "highlight" on top in dark mode. - const shadowColor = palette.get(index + direction * shadowDelta); - const startColor = direction === -1 ? shadowColor : color; - const endColor = direction === -1 ? color : shadowColor; - return `linear-gradient(${startColor.toColorString()} ${startPosition}%, ${endColor.toColorString()})`; - } else { - return color.toColorString(); - } - } - - return { - rest: gradientHelper(restIndex, true), - hover: gradientHelper(hoverIndex, true), - active: gradientHelper(activeIndex, false), - focus: gradientHelper(focusIndex, true), - }; -} diff --git a/packages/web-components/fast-components/src/color/recipes/underline-stroke.ts b/packages/web-components/fast-components/src/color/recipes/underline-stroke.ts deleted file mode 100644 index a334ceae122..00000000000 --- a/packages/web-components/fast-components/src/color/recipes/underline-stroke.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { InteractiveSet } from "../../design-tokens"; -import { Palette } from "../palette"; -import { Swatch } from "../swatch"; -import { directionByIsDark } from "../utilities/direction-by-is-dark"; - -/** - * @internal - */ -export function underlineStroke( - palette: Palette, - reference: Swatch, - restDelta: number, - hoverDelta: number, - activeDelta: number, - focusDelta: number, - shadowDelta: number, - width: string -): InteractiveSet { - const referenceIndex = palette.closestIndexOf(reference); - const direction = directionByIsDark(reference); - - const restIndex = referenceIndex + direction * restDelta; - const hoverIndex = restIndex + direction * (hoverDelta - restDelta); - const activeIndex = restIndex + direction * (activeDelta - restDelta); - const focusIndex = restIndex + direction * (focusDelta - restDelta); - - const midPosition = `calc(100% - ${width})`; - - function gradientHelper(index: number, applyShadow: boolean): string { - const color = palette.get(index); - if (applyShadow) { - const underlineColor = palette.get(index + direction * shadowDelta); - return `linear-gradient(${color.toColorString()} ${midPosition}, ${underlineColor.toColorString()} ${midPosition}, ${underlineColor.toColorString()})`; - } else { - return color.toColorString(); - } - } - - return { - rest: gradientHelper(restIndex, true), - hover: gradientHelper(hoverIndex, true), - active: gradientHelper(activeIndex, false), - focus: gradientHelper(focusIndex, true), - }; -} diff --git a/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts b/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts index 1188ccd0880..b08a02f38f3 100644 --- a/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts +++ b/packages/web-components/fast-components/src/color/utilities/base-layer-luminance.ts @@ -11,5 +11,5 @@ export function baseLayerLuminanceSwatch(luminance: number) { */ export enum StandardLuminance { LightMode = 1, - DarkMode = 0.23, + DarkMode = 0.09, } diff --git a/packages/web-components/fast-components/src/combobox/index.ts b/packages/web-components/fast-components/src/combobox/index.ts index e3f442ffd5f..1c28cfa7752 100644 --- a/packages/web-components/fast-components/src/combobox/index.ts +++ b/packages/web-components/fast-components/src/combobox/index.ts @@ -1,8 +1,9 @@ import { - Combobox, ComboboxOptions, + Combobox as FondationCombobox, comboboxTemplate as template, } from "@microsoft/fast-foundation"; +import { fillColor, neutralLayerFloating } from "../design-tokens"; import { comboboxStyles as styles } from "./combobox.styles"; /** @@ -11,6 +12,21 @@ import { comboboxStyles as styles } from "./combobox.styles"; */ export type ComboboxAppearance = "filled" | "outline"; +/** + * The FAST select class + * @internal + */ +export class Combobox extends FondationCombobox { + /** + * @internal + */ + public connectedCallback(): void { + super.connectedCallback(); + + fillColor.setValueFor(this, neutralLayerFloating); + } +} + /** * A function that returns a {@link @microsoft/fast-foundation#Combobox} registration for configuring the component with a DesignSystem. * Implements {@link @microsoft/fast-foundation#comboboxTemplate} @@ -39,9 +55,3 @@ export const fastCombobox = Combobox.compose({ * @public */ export const comboboxStyles = styles; - -/** - * Base class for Combobox - * @public - */ -export { Combobox }; diff --git a/packages/web-components/fast-components/src/custom-elements.ts b/packages/web-components/fast-components/src/custom-elements.ts index 1626ff9a666..f4bf11a34ba 100644 --- a/packages/web-components/fast-components/src/custom-elements.ts +++ b/packages/web-components/fast-components/src/custom-elements.ts @@ -51,7 +51,10 @@ import type { Card } from "./card/index"; import type { DesignSystemProvider } from "./design-system-provider/index"; import type { Disclosure } from "./disclosure/index"; import type { HorizontalScroll } from "./horizontal-scroll/index"; +import type { Listbox } from "./listbox/index"; +import type { Menu } from "./menu/index"; import type { SliderLabel } from "./slider-label/index"; +import type { Tabs } from "./tabs/index"; import type { TextArea } from "./text-area/index"; import type { TextField } from "./text-field/index"; import type { Toolbar } from "./toolbar/index"; diff --git a/packages/web-components/fast-components/src/design-tokens.ts b/packages/web-components/fast-components/src/design-tokens.ts index 18cd1be64e5..d2af9b8ad22 100644 --- a/packages/web-components/fast-components/src/design-tokens.ts +++ b/packages/web-components/fast-components/src/design-tokens.ts @@ -5,8 +5,6 @@ import { Swatch } from "./color/swatch"; import { accentFill as accentFillAlgorithm } from "./color/recipes/accent-fill"; import { accentForeground as accentForegroundAlgorithm } from "./color/recipes/accent-foreground"; import { foregroundOnAccent as foregroundOnAccentAlgorithm } from "./color/recipes/foreground-on-accent"; -import { gradientShadowStroke as gradientShadowStrokeAlgorithm } from "./color/recipes/gradient-shadow-stroke"; -import { underlineStroke as underlineStrokeAlgorithm } from "./color/recipes/underline-stroke"; import { neutralFill as neutralFillAlgorithm } from "./color/recipes/neutral-fill"; import { neutralFillInput as neutralFillInputAlgorithm } from "./color/recipes/neutral-fill-input"; import { neutralFillLayer as neutralFillLayerAlgorithm } from "./color/recipes/neutral-fill-layer"; @@ -69,7 +67,7 @@ export const baseLayerLuminance = create("base-layer-luminance").withDef StandardLuminance.DarkMode ); /** @public */ -export const controlCornerRadius = create("control-corner-radius").withDefault(4); +export const controlCornerRadius = create("control-corner-radius").withDefault(6); /** @public */ export const density = create("density").withDefault(0); /** @public */ @@ -198,37 +196,37 @@ export const accentForegroundFocusDelta = create( /** @public */ export const neutralFillRestDelta = create("neutral-fill-rest-delta").withDefault( - 7 + 4 ); /** @public */ export const neutralFillHoverDelta = create( "neutral-fill-hover-delta" -).withDefault(10); +).withDefault(4); /** @public */ export const neutralFillActiveDelta = create( "neutral-fill-active-delta" -).withDefault(5); +).withDefault(10); /** @public */ export const neutralFillFocusDelta = create( "neutral-fill-focus-delta" -).withDefault(0); +).withDefault(5); /** @public */ export const neutralFillInputRestDelta = create( "neutral-fill-input-rest-delta" -).withDefault(1); +).withDefault(0); /** @public */ export const neutralFillInputHoverDelta = create( "neutral-fill-input-hover-delta" -).withDefault(2); +).withDefault(0); /** @public */ export const neutralFillInputActiveDelta = create( "neutral-fill-input-active-delta" -).withDefault(3); +).withDefault(0); /** @public */ export const neutralFillInputFocusDelta = create( "neutral-fill-input-focus-delta" -).withDefault(1); +).withDefault(0); /** @public */ export const neutralFillStealthRestDelta = create( @@ -237,15 +235,15 @@ export const neutralFillStealthRestDelta = create( /** @public */ export const neutralFillStealthHoverDelta = create( "neutral-fill-stealth-hover-delta" -).withDefault(5); +).withDefault(4); /** @public */ export const neutralFillStealthActiveDelta = create( "neutral-fill-stealth-active-delta" -).withDefault(3); +).withDefault(10); /** @public */ export const neutralFillStealthFocusDelta = create( "neutral-fill-stealth-focus-delta" -).withDefault(0); +).withDefault(4); /** @public */ export const neutralFillStrongRestDelta = create( @@ -272,15 +270,15 @@ export const neutralFillLayerRestDelta = create( /** @public */ export const neutralStrokeRestDelta = create( "neutral-stroke-rest-delta" -).withDefault(25); +).withDefault(49); /** @public */ export const neutralStrokeHoverDelta = create( "neutral-stroke-hover-delta" -).withDefault(40); +).withDefault(49); /** @public */ export const neutralStrokeActiveDelta = create( "neutral-stroke-active-delta" -).withDefault(16); +).withDefault(90); /** @public */ export const neutralStrokeFocusDelta = create( "neutral-stroke-focus-delta" @@ -876,99 +874,6 @@ export const focusStrokeInner = create( focusStrokeInnerRecipe.getValueFor(element).evaluate(element) ); -// Stroke Control -/** @public */ -export const strokeControlRecipe = create({ - name: "stroke-control-recipe", - cssCustomPropertyName: null, -}).withDefault({ - evaluate: ( - element: HTMLElement - ): Record<"rest" | "hover" | "active" | "focus", string> => { - return gradientShadowStrokeAlgorithm( - neutralPalette.getValueFor(element), - fillColor.getValueFor(element), - neutralStrokeRestDelta.getValueFor(element), - neutralStrokeHoverDelta.getValueFor(element), - neutralStrokeActiveDelta.getValueFor(element), - neutralStrokeFocusDelta.getValueFor(element), - 4 - ); - }, -}); - -/** @public */ -export const strokeControlRest = create("stroke-control-rest").withDefault( - (element: HTMLElement) => - strokeControlRecipe.getValueFor(element).evaluate(element).rest -); -/** @public */ -export const strokeControlHover = create("stroke-control-hover").withDefault( - (element: HTMLElement) => - strokeControlRecipe.getValueFor(element).evaluate(element).hover -); -/** @public */ -export const strokeControlActive = create("stroke-control-active").withDefault( - (element: HTMLElement) => - strokeControlRecipe.getValueFor(element).evaluate(element).active -); -/** @public */ -export const strokeControlFocus = create("stroke-control-focus").withDefault( - (element: HTMLElement) => - strokeControlRecipe.getValueFor(element).evaluate(element).focus -); - -// Stroke Control Text -/** @public */ -export const strokeControlTextRecipe = create({ - name: "stroke-control-text-recipe", - cssCustomPropertyName: null, -}).withDefault({ - evaluate: ( - element: HTMLElement - ): Record<"rest" | "hover" | "active" | "focus", string> => { - return underlineStrokeAlgorithm( - neutralPalette.getValueFor(element), - fillColor.getValueFor(element), - neutralStrokeRestDelta.getValueFor(element), - neutralStrokeHoverDelta.getValueFor(element), - neutralStrokeActiveDelta.getValueFor(element), - neutralStrokeFocusDelta.getValueFor(element), - 20, - strokeWidth.getValueFor(element) + "px" - ); - }, -}); - -/** @public */ -export const strokeControlTextRest = create( - "stroke-control-text-rest" -).withDefault( - (element: HTMLElement) => - strokeControlTextRecipe.getValueFor(element).evaluate(element).rest -); -/** @public */ -export const strokeControlTextHover = create( - "stroke-control-text-hover" -).withDefault( - (element: HTMLElement) => - strokeControlTextRecipe.getValueFor(element).evaluate(element).hover -); -/** @public */ -export const strokeControlTextActive = create( - "stroke-control-text-active" -).withDefault( - (element: HTMLElement) => - strokeControlTextRecipe.getValueFor(element).evaluate(element).active -); -/** @public */ -export const strokeControlTextFocus = create( - "stroke-control-text-focus" -).withDefault( - (element: HTMLElement) => - strokeControlTextRecipe.getValueFor(element).evaluate(element).focus -); - // Stroke Control Strong /** @public */ export const strokeControlStrongRecipe = create({ @@ -981,9 +886,9 @@ export const strokeControlStrongRecipe = create({ reference || fillColor.getValueFor(element), 5.5, 0, - 12, + 42, 24, - 12 + 42 ), }); @@ -1046,10 +951,10 @@ export const neutralForegroundRecipe = create({ neutralForegroundAlgorithm( neutralPalette.getValueFor(element), fillColor.getValueFor(element), - 8, - 12, + 10, + 24, 24, - 12 + 24 ), }); 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 0f4f7264029..cada0baa4a5 100644 --- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts @@ -15,11 +15,13 @@ import { focusStrokeOuter, focusStrokeWidth, neutralFillActive, + neutralFillFocus, neutralFillHover, neutralFillRest, - neutralFillStrongActive, - neutralFillStrongHover, - neutralFillStrongRest, + neutralForegroundActive, + neutralForegroundFocus, + neutralForegroundHover, + neutralForegroundRest, } from "../design-tokens"; export const flipperStyles: ( @@ -34,7 +36,7 @@ export const flipperStyles: ( align-items: center; margin: 0; fill: currentcolor; - color: ${neutralFillStrongRest}; + color: ${neutralForegroundRest}; background: ${neutralFillRest}; box-sizing: border-box; border: calc(${focusStrokeWidth} * 1px) solid transparent; @@ -55,21 +57,20 @@ export const flipperStyles: ( :host(:not(.disabled):hover) { cursor: pointer; - } - - :host(:not(.disabled):hover) { - background: ${neutralFillRest}; - fill: ${neutralFillStrongHover}; + background: ${neutralFillHover}; + fill: ${neutralForegroundHover}; } :host(:not(.disabled):active) { - background: ${neutralFillRest}; - fill: ${neutralFillStrongActive}; + background: ${neutralFillActive}; + fill: ${neutralForegroundActive}; } :host(:${focusVisible}) { + background: ${neutralFillFocus}; border-color: ${focusStrokeOuter}; - box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter}; + fill: ${neutralForegroundFocus}; } :host::-moz-focus-inner { diff --git a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts index 6201e0a2a75..1b80e61056a 100644 --- a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts @@ -25,6 +25,7 @@ import { neutralFillStealthHover, neutralFillStealthRest, neutralForegroundActive, + neutralForegroundFocus, neutralForegroundHover, neutralForegroundRest, typeRampBaseFontSize, @@ -39,90 +40,67 @@ export const optionStyles: ( definition: FoundationElementDefinition ) => css` - ${display("inline-flex")} :host { - position: relative; - font-family: ${bodyFont}; - background: ${neutralFillStealthRest}; - border-radius: calc(${controlCornerRadius} * 1px); - border: calc(${focusStrokeWidth} * 1px) solid transparent; - box-sizing: border-box; - color: ${neutralForegroundRest}; - cursor: pointer; - fill: currentcolor; - font-size: ${typeRampBaseFontSize}; - height: calc(${heightNumber} * 1px); - line-height: ${typeRampBaseLineHeight}; - margin: 0 calc(${designUnit} * 1px); - outline: none; - overflow: hidden; - align-items: center; - padding: 0 calc(${designUnit} * 2.25px); - user-select: none; - white-space: nowrap; - } + ${display("inline-flex")} :host { + position: relative; + font-family: ${bodyFont}; + background: ${neutralFillStealthRest}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${focusStrokeWidth} * 1px) solid transparent; + box-sizing: border-box; + color: ${neutralForegroundRest}; + cursor: pointer; + fill: currentcolor; + font-size: ${typeRampBaseFontSize}; + height: calc(${heightNumber} * 1px); + line-height: ${typeRampBaseLineHeight}; + margin: 0 calc(${designUnit} * 1px); + outline: none; + overflow: hidden; + align-items: center; + padding: 0 calc(${designUnit} * 2.25px); + user-select: none; + white-space: nowrap; + } - :host(:not([disabled]):hover) { - background: ${neutralFillStealthHover}; - color: ${neutralForegroundHover}; - } + :host(:not([disabled]):hover) { + background: ${neutralFillStealthHover}; + color: ${neutralForegroundHover}; + } - :host(:not([disabled]):active) { - background: ${neutralFillStealthActive}; - color: ${neutralForegroundActive}; - } + :host([aria-selected="true"]), + :host(:not([disabled]):active), + :host(:not([disabled])[aria-selected="true"]:hover), + :host(:not([disabled])[aria-selected="true"]:active) { + background: ${neutralFillStealthActive}; + color: ${neutralForegroundActive}; + } - :host(:${focusVisible}) { - border-color: ${focusStrokeOuter}; - background: ${neutralFillStealthFocus}; - } + :host([disabled]) { + cursor: ${disabledCursor}; + opacity: ${disabledOpacity}; + } - :host([aria-selected="true"]) { - background: ${neutralFillHover}; - color: ${neutralForegroundHover}; - } + .content { + grid-column-start: 2; + justify-self: start; + overflow: hidden; + text-overflow: ellipsis; + } - :host(:not([disabled])[aria-selected="true"]:hover) { - background: ${neutralFillHover}; - } + .start, + .end, + ::slotted(svg) { + display: flex; + } - :host(:not([disabled])[aria-selected="true"]:active) { - background: ${neutralFillActive}; - } + ::slotted([slot="end"]) { + margin-inline-start: 1ch; + } - :host(:not([disabled]):not([aria-selected="true"]):hover) { - background: ${neutralFillStealthHover}; - } - - :host(:not([disabled]):not([aria-selected='true']):active) { - background: ${neutralFillStealthActive}; - } - - :host([disabled]) { - cursor: ${disabledCursor}; - opacity: ${disabledOpacity}; - } - - .content { - grid-column-start: 2; - justify-self: start; - overflow: hidden; - text-overflow: ellipsis; - } - - .start, - .end, - ::slotted(svg) { - display: flex; - } - - ::slotted([slot="end"]) { - margin-inline-start: 1ch; - } - - ::slotted([slot="start"]) { - margin-inline-end: 1ch; - } - `.withBehaviors( + ::slotted([slot="start"]) { + margin-inline-end: 1ch; + } + `.withBehaviors( forcedColorsStylesheetBehavior( css` :host { @@ -146,10 +124,6 @@ export const optionStyles: ( fill: currentcolor; opacity: 1; } - :host([aria-selected="true"])::before, - :host(:not([disabled]):active)::before { - background: ${SystemColors.HighlightText}; - } ` ) ); diff --git a/packages/web-components/fast-components/src/listbox/index.ts b/packages/web-components/fast-components/src/listbox/index.ts index 43dba429662..79ed1e56e6c 100644 --- a/packages/web-components/fast-components/src/listbox/index.ts +++ b/packages/web-components/fast-components/src/listbox/index.ts @@ -1,6 +1,25 @@ -import { Listbox, listboxTemplate as template } from "@microsoft/fast-foundation"; +import { + Listbox as FoundationListbox, + listboxTemplate as template, +} from "@microsoft/fast-foundation"; +import { fillColor, neutralLayerFloating } from "../design-tokens"; import { listboxStyles as styles } from "./listbox.styles"; +/** + * The Listbox menu class + * @public + */ +export class Listbox extends FoundationListbox { + /** + * @internal + */ + public connectedCallback(): void { + super.connectedCallback(); + + fillColor.setValueFor(this, neutralLayerFloating); + } +} + /** * A function that returns a {@link @microsoft/fast-foundation#Listbox} registration for configuring the component with a DesignSystem. * Implements {@link @microsoft/fast-foundation#listboxTemplate} @@ -22,9 +41,3 @@ export const fastListbox = Listbox.compose({ * @public */ export const listboxStyles = styles; - -/** - * Base class for Listbox - * @public - */ -export { Listbox }; diff --git a/packages/web-components/fast-components/src/listbox/listbox.styles.ts b/packages/web-components/fast-components/src/listbox/listbox.styles.ts index dd245c93598..f98b4ba8dbe 100644 --- a/packages/web-components/fast-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/fast-components/src/listbox/listbox.styles.ts @@ -10,9 +10,9 @@ import { SystemColors } from "@microsoft/fast-web-utilities"; import { controlCornerRadius, designUnit, + fillColor, focusStrokeOuter, focusStrokeWidth, - neutralStrokeRest, strokeWidth, } from "../design-tokens"; @@ -25,7 +25,8 @@ export const listboxStyles: ( ) => css` ${display("inline-flex")} :host { - border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; + background: ${fillColor}; + border: calc(${strokeWidth} * 1px) solid transparent; border-radius: calc(${controlCornerRadius} * 1px); box-sizing: border-box; flex-direction: column; @@ -35,7 +36,7 @@ export const listboxStyles: ( :host(:focus-within:not([disabled])) { border-color: ${focusStrokeOuter}; - box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; } `.withBehaviors( forcedColorsStylesheetBehavior( diff --git a/packages/web-components/fast-components/src/menu-item/index.ts b/packages/web-components/fast-components/src/menu-item/index.ts index 78960dbd5db..06013ed5e40 100644 --- a/packages/web-components/fast-components/src/menu-item/index.ts +++ b/packages/web-components/fast-components/src/menu-item/index.ts @@ -38,7 +38,7 @@ export const fastMenuItem = MenuItem.compose({ `, radioIndicator: ` - + `, }); 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 5f47744d314..ac7a6306907 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 @@ -17,11 +17,14 @@ import { focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, + neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, + neutralForegroundActive, + neutralForegroundFocus, neutralForegroundHint, + neutralForegroundHover, neutralForegroundRest, - strokeControlStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -104,19 +107,22 @@ export const menuItemStyles: ( grid-column: 4; } - :host(:${focusVisible}) { - border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; - box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; - } - :host(:not([disabled]):hover) { background: ${neutralFillStealthHover}; + color: ${neutralForegroundHover}; } :host(:not([disabled]):active), :host(.expanded) { background: ${neutralFillStealthActive}; - color: ${neutralForegroundRest}; + color: ${neutralForegroundActive}; + } + + :host(:${focusVisible}) { + background: ${neutralFillStealthFocus}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; + color: ${neutralForegroundFocus}; } :host([disabled]) { @@ -186,19 +192,6 @@ export const menuItemStyles: ( outline: none; } - :host .checkbox, - :host .radio { - border: calc(${strokeWidth} * 1px) solid ${strokeControlStrongRest}; - } - - :host .checkbox { - border-radius: calc(${controlCornerRadius} * 1px); - } - - :host .radio { - border-radius: 999px; - } - :host .checkbox-indicator, :host .radio-indicator, slot[name="checkbox-indicator"], 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 63825b8571c..29e60cecc2c 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -15,8 +15,10 @@ import { disabledOpacity, focusStrokeOuter, focusStrokeWidth, + neutralForegroundHover, neutralForegroundRest, strokeControlStrongActive, + strokeControlStrongFocus, strokeControlStrongHover, strokeControlStrongRest, strokeWidth, @@ -85,7 +87,7 @@ export const radioStyles: ( justify-content: center; width: 100%; height: 100%; - fill: ${neutralForegroundRest}; + fill: ${neutralForegroundHover}; opacity: 0; pointer-events: none; } @@ -100,19 +102,14 @@ export const radioStyles: ( border-color: ${strokeControlStrongHover}; } - :host(:enabled:active) .control, - :host(.checked:enabled:active) .control { - border-color: ${strokeControlStrongActive}; - } - :host(:enabled:active) slot[name="checked-indicator"] { opacity: 1; } :host(:${focusVisible}) .control, :host(.checked:enabled:${focusVisible}) .control { - border-color: ${focusStrokeOuter}; - box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter}; + border-color: ${strokeControlStrongFocus}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${strokeControlStrongFocus}; } :host(.disabled) .label, diff --git a/packages/web-components/fast-components/src/select/index.ts b/packages/web-components/fast-components/src/select/index.ts index f4d6c4389b0..0ad3652eb66 100644 --- a/packages/web-components/fast-components/src/select/index.ts +++ b/packages/web-components/fast-components/src/select/index.ts @@ -17,10 +17,7 @@ export class Select extends FoundationSelect { public connectedCallback(): void { super.connectedCallback(); - const listbox = this.closest(".listbox") as HTMLElement; - if (listbox) { - fillColor.setValueFor(listbox, neutralLayerFloating); - } + fillColor.setValueFor(this, neutralLayerFloating); } } 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 04ee0cee4be..57934469a39 100644 --- a/packages/web-components/fast-components/src/styles/patterns/button.ts +++ b/packages/web-components/fast-components/src/styles/patterns/button.ts @@ -10,6 +10,7 @@ import { import { heightNumber } from "../size"; import { accentFillActive, + accentFillFocus, accentFillHover, accentFillRest, bodyFont, @@ -23,6 +24,7 @@ import { foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, + neutralFillFocus, neutralFillHover, neutralFillRest, neutralFillStealthActive, @@ -31,9 +33,9 @@ import { neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, - strokeControlActive, - strokeControlHover, - strokeControlRest, + neutralStrokeActive, + neutralStrokeHover, + neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -57,7 +59,6 @@ export const baseButtonStyles = ( line-height: ${typeRampBaseLineHeight}; height: calc(${heightNumber} * 1px); min-width: calc(${heightNumber} * 1px); - color: ${neutralForegroundRest}; border-radius: calc(${controlCornerRadius} * 1px); fill: currentcolor; cursor: pointer; @@ -75,7 +76,7 @@ export const baseButtonStyles = ( white-space: nowrap; outline: none; text-decoration: none; - color: inherit; + color: ${neutralForegroundRest}; border-radius: inherit; fill: inherit; cursor: inherit; @@ -104,6 +105,7 @@ export const baseButtonStyles = ( } :host .control:${focusVisible} { + background: ${neutralFillFocus}; border-color: ${focusStrokeOuter} !important; box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset !important; color: ${neutralForegroundHover}; @@ -195,6 +197,7 @@ export const AccentButtonStyles = ( } :host .control:${focusVisible} { + background: ${accentFillFocus}; box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset, 0 0 0 calc(((${focusStrokeWidth} * 2) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important; color: ${foregroundOnAccentHover}; @@ -376,16 +379,18 @@ export const OutlineButtonStyles = ( ) => css` :host .control { - background: transparent !important; - border-color: ${strokeControlRest}; + background: transparent; + border-color: ${neutralStrokeRest} !important; } - :host .control${interactivitySelector}:active { - border-color: ${strokeControlHover}; + :host .control${interactivitySelector}:hover { + background: transparent; + border-color: ${neutralStrokeHover} !important; } :host .control${interactivitySelector}:active { - border-color: ${strokeControlActive}; + background: transparent; + border-color: ${neutralStrokeActive} !important; } `.withBehaviors( forcedColorsStylesheetBehavior( diff --git a/packages/web-components/fast-components/src/styles/patterns/input.ts b/packages/web-components/fast-components/src/styles/patterns/input.ts index 68ffaf7b0c1..0e9810d13ff 100644 --- a/packages/web-components/fast-components/src/styles/patterns/input.ts +++ b/packages/web-components/fast-components/src/styles/patterns/input.ts @@ -13,18 +13,19 @@ import { focusStrokeOuter, focusStrokeWidth, neutralFillActive, + neutralFillFocus, neutralFillHover, - neutralFillInputActive, + neutralFillInputFocus, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralForegroundActive, + neutralForegroundFocus, neutralForegroundHover, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, - strokeControlRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -58,6 +59,7 @@ export const inputStyles: ( box-sizing: border-box; position: relative; color: inherit; + fill: inherit; background: ${neutralFillInputRest}; border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; border-radius: calc(${controlCornerRadius} * 1px); @@ -119,16 +121,17 @@ export const inputStateStyles: ( :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}, :host(:active:not([disabled])) ${rootSelector}, :host(:focus-within:not([disabled])) ${rootSelector} { - background: ${neutralFillInputRest}; + background: ${neutralFillInputHover}; border-color: ${neutralStrokeHover}; - box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${neutralStrokeHover} inset; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset; color: ${neutralForegroundHover}; } :host(:${focusVisible}:not([disabled])) ${rootSelector} { + background: ${neutralFillInputFocus}; border-color: ${focusStrokeOuter}; box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; - color: ${neutralForegroundHover}; + color: ${neutralForegroundFocus}; } `; @@ -147,27 +150,29 @@ export const inputFilledStyles: ( :host ${rootSelector} { background: ${neutralFillRest}; border-color: transparent; + color: ${neutralForegroundRest}; } :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}, :host(:active:not([disabled])) ${rootSelector}, :host(:focus-within:not([disabled])) ${rootSelector} { - background: ${neutralFillRest}; - border-color: ${neutralStrokeRest}; + background: ${neutralFillHover}; + border-color: ${neutralFillActive}; box-shadow: none; color: ${neutralForegroundHover}; } - :host(:active:not([disabled])) ${rootSelector}, - :host(:focus-within:not([disabled])) ${rootSelector} { - background: ${neutralFillRest}; + :host(:active:not([disabled])) ${rootSelector} { + background: ${neutralFillActive}; + border-color: ${neutralFillActive}; color: ${neutralForegroundActive}; } :host(:${focusVisible}:not([disabled])) ${rootSelector} { + background: ${neutralFillFocus}; border-color: ${focusStrokeOuter}; box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset; - color: ${neutralForegroundHover}; + color: ${neutralForegroundFocus}; } `; 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 76c032f1576..9154e4fb95d 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -14,12 +14,10 @@ import { disabledOpacity, focusStrokeOuter, focusStrokeWidth, - neutralFillInputActive, - neutralFillInputHover, - neutralFillInputRest, neutralForegroundHover, neutralForegroundRest, strokeControlStrongActive, + strokeControlStrongFocus, strokeControlStrongHover, strokeControlStrongRest, strokeWidth, @@ -76,21 +74,13 @@ export const switchStyles: ( :host(:enabled:hover) .switch, :host([aria-checked="true"]:enabled:hover) .switch { - background: transparent; border-color: ${strokeControlStrongHover}; } - :host(:enabled:active) .switch, - :host([aria-checked="true"]:enabled:active) .switch { - background: transparent; - border-color: ${strokeControlStrongActive}; - } - :host(:${focusVisible}) .switch, :host([aria-checked="true"]:${focusVisible}:enabled) .switch { - background: transparent; - box-shadow: 0 0 0 3px ${focusStrokeOuter}; - border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${strokeControlStrongFocus}; + border-color: ${strokeControlStrongFocus}; } slot[name="switch"] { diff --git a/packages/web-components/fast-components/src/tab/tab.styles.ts b/packages/web-components/fast-components/src/tab/tab.styles.ts index 1312b808154..19b65375a84 100644 --- a/packages/web-components/fast-components/src/tab/tab.styles.ts +++ b/packages/web-components/fast-components/src/tab/tab.styles.ts @@ -9,6 +9,8 @@ import { } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; import { + accentFillHover, + accentFillRest, bodyFont, controlCornerRadius, density, @@ -16,6 +18,8 @@ import { disabledOpacity, focusStrokeOuter, focusStrokeWidth, + foregroundOnAccentHover, + foregroundOnAccentRest, neutralFillHover, neutralForegroundHover, neutralForegroundRest, @@ -83,7 +87,16 @@ export const tabStyles: ( :host(.vertical[aria-selected="true"]), :host(.vertical:hover[aria-selected="true"]) { z-index: 2; - background: ${neutralFillHover}; + background: ${accentFillRest}; + color: ${foregroundOnAccentRest} + } + + :host([aria-selected="true"]:hover), + :host(.vertical[aria-selected="true"]:hover), + :host(.vertical:hover[aria-selected="true"]) { + z-index: 2; + background: ${accentFillHover}; + color: ${foregroundOnAccentHover} } `.withBehaviors( forcedColorsStylesheetBehavior( diff --git a/packages/web-components/fast-components/src/tabs/index.ts b/packages/web-components/fast-components/src/tabs/index.ts index c8fe772f192..bfc7c2e56d5 100644 --- a/packages/web-components/fast-components/src/tabs/index.ts +++ b/packages/web-components/fast-components/src/tabs/index.ts @@ -16,6 +16,11 @@ export class Tabs extends FoundationTabs { public connectedCallback(): void { super.connectedCallback(); + const tablist = this.closest(".tab-list") as HTMLElement; + if (tablist) { + fillColor.setValueFor(tablist, neutralLayerFloating); + } + fillColor.setValueFor(this, neutralLayerFloating); } } diff --git a/packages/web-components/fast-components/src/tabs/tabs.styles.ts b/packages/web-components/fast-components/src/tabs/tabs.styles.ts index 674eb59624b..b066f1fdad7 100644 --- a/packages/web-components/fast-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tabs.styles.ts @@ -58,6 +58,7 @@ export const tabsStyles: ( align-self: center; } + /* .activeIndicator { grid-row: 2; grid-column: 1; @@ -72,6 +73,7 @@ export const tabsStyles: ( .activeIndicatorTransition { transition: transform 0.2s ease-in-out; } + */ .tabpanel { grid-row: 2; @@ -109,6 +111,7 @@ export const tabsStyles: ( grid-row: 3; } + /* :host(.vertical) .activeIndicator { grid-column: 1; grid-row: 1; @@ -123,6 +126,7 @@ export const tabsStyles: ( :host(.vertical) .activeIndicatorTransition { transition: transform 0.2s linear; } + */ `.withBehaviors( forcedColorsStylesheetBehavior( css`