diff --git a/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts index 2e0baca19f9..d245afa2b2f 100644 --- a/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts +++ b/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts @@ -140,13 +140,11 @@ export const accordionItemStyles: ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - .button:${focusVisible}::before { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}; - } - .icon { - fill: ${SystemColors.ButtonText}; - } - ` + .button:${focusVisible}::before { + forced-color-adjust: none; + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight}; + } + ` ) ); 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 b38067ec4b9..8e1b2daa1cf 100644 --- a/packages/web-components/fast-components/src/anchor/fixtures/anchor.html +++ b/packages/web-components/fast-components/src/anchor/fixtures/anchor.html @@ -1,98 +1,136 @@ -

Anchor

+ -

Default

-Anchor +

Anchor

+

with href / without href

-

Inline

-Cancel -Submit +

Default

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

With target

+
+ Anchor + Anchor +
-

Neutral

-Button +

Neutral

+
+ Anchor + Anchor +
-

Accent

-Anchor +

Accent

+
+ Anchor + Anchor +
-

Hypertext

-Anchor -
-
-Anchor (no href) +

Hypertext

+
+ Anchor + Anchor +
+

Inline

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod - ipsam cupiditate, voluptate, corrupti - doloremque totam + Lorem ipsum dolor sit + amet (no href) + 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 -
- - The next anchor is intentionally short, and this anchor is intentionally long - -
-Hi +

Lightweight

+
+ Anchor + Anchor +
-

Outline

-Anchor +

Outline

+
+ Anchor + Anchor +
-

Stealth

-Anchor +

Stealth

+
+ Anchor + Anchor +
-

With start

- - Anchor - - - - +

With start

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

With end

- - Anchor - - - - +

With end

+
+ + Anchor + + + + + + 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 5a9d19c7ea3..143cd2c58af 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 @@ -113,12 +113,26 @@ export const breadcrumbItemStyles: ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host(:not([href])) { - color: ${SystemColors.ButtonText}; - fill: currentcolor; - } - .separator { - fill: ${SystemColors.ButtonText}; + :host, + .control { + border-color: ${SystemColors.ButtonFace}; + } + .control .content::after { + content: ""; + display: block; + height: calc(${strokeWidth} * 1px); + } + .control:hover .content::after , + .control:active .content::after, + .control:${focusVisible} .content::after { + background: ${SystemColors.LinkText}; + } + :host(:not([href])) { + color: ${SystemColors.ButtonText}; + fill: currentcolor; + } + .separator { + fill: ${SystemColors.ButtonText}; } ` ) diff --git a/packages/web-components/fast-components/src/breadcrumb-item/fixtures/base.html b/packages/web-components/fast-components/src/breadcrumb-item/fixtures/base.html index 1753c70a591..768988783a5 100644 --- a/packages/web-components/fast-components/src/breadcrumb-item/fixtures/base.html +++ b/packages/web-components/fast-components/src/breadcrumb-item/fixtures/base.html @@ -1,27 +1,37 @@

Breadcrumbs

-

Default

-Breadcrumb item +

Default

+Breadcrumb item -

Without href

+

No href

Breadcrumb item -

With start

- +

Default with custom separator

+ Breadcrumb item - + -

With end

- +

With start

+ Breadcrumb item - + + + + +

With end

+ + Breadcrumb item + + diff --git a/packages/web-components/fast-components/src/button/button.styles.ts b/packages/web-components/fast-components/src/button/button.styles.ts index f79c7aa84bc..1415d56f87d 100644 --- a/packages/web-components/fast-components/src/button/button.styles.ts +++ b/packages/web-components/fast-components/src/button/button.styles.ts @@ -5,6 +5,7 @@ import { forcedColorsStylesheetBehavior, FoundationElementDefinition, } from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; import { AccentButtonStyles, baseButtonStyles, @@ -34,8 +35,14 @@ export const buttonStyles: ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host([disabled]) { + :host([disabled]), + :host([disabled]) .control { opacity: 1; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.GrayText} !important; + box-shadow: none !important; + color: ${SystemColors.GrayText}; + fill: currentcolor; } ` ), @@ -45,7 +52,18 @@ export const buttonStyles: ( ), appearanceBehavior( "lightweight", - LightweightButtonStyles(context, definition, interactivitySelector) + css` + ${LightweightButtonStyles(context, definition, interactivitySelector)} + `.withBehaviors( + forcedColorsStylesheetBehavior( + css` + :host([disabled]), + :host([disabled]) .control { + border-color: ${SystemColors.ButtonFace} !important; + } + ` + ) + ) ), appearanceBehavior( "outline", @@ -53,6 +71,17 @@ export const buttonStyles: ( ), appearanceBehavior( "stealth", - StealthButtonStyles(context, definition, interactivitySelector) + css` + ${StealthButtonStyles(context, definition, interactivitySelector)} + `.withBehaviors( + forcedColorsStylesheetBehavior( + css` + :host([disabled]), + :host([disabled]) .control { + border-color: ${SystemColors.ButtonFace} !important; + } + ` + ) + ) ) ); 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 eba15993fbf..8d7b677e968 100644 --- a/packages/web-components/fast-components/src/button/fixtures/button.html +++ b/packages/web-components/fast-components/src/button/fixtures/button.html @@ -1,97 +1,151 @@ -

Button

- -

Default

-Button + -

Inline

-Cancel -Submit - -

disabled

-Button -

autofocus

-Button +

Button

+

enabled / disabled

-

Neutral

-Button -

disabled

-Button +

Default

+
+ Button + Button +
-

Accent

-Button -

disabled

-Button +
autofocus
+
+ Button + Button +
-

Lightweight

-Button -

disabled

-Button +

Neutral

+
+ Button + Button +
-

Outline

-Button -

disabled

-Button +

Accent

+
+ Button + Button +
-

Stealth

-Button -

disabled

-Button +

Lightweight

+
+ Button + Button +
-

With start

- - Button - - - - +

Outline

+
+ Button + Button +
-

With end

- - Button - - - - +

Stealth

+
+ Button + Button +
-

Icon in default slot

- - - - - +

With start

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

With aria-label

-Button +

With end

+
+ + Button + + + + + + Button + + + + +
-
- - Submit -
+

Icon in default slot

+
+ + + + + + + + + + +
-
- - Reset -
+

With aria-label

+
+ Button + Button +
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 d73dc3b4dd8..9ea0571d834 100644 --- a/packages/web-components/fast-components/src/card/card.styles.ts +++ b/packages/web-components/fast-components/src/card/card.styles.ts @@ -60,9 +60,9 @@ export const cardStyles: ( forcedColorsStylesheetBehavior( css` :host { - forced-color-adjust: none; background: ${SystemColors.Canvas}; - box-shadow: 0 0 0 1px ${SystemColors.CanvasText}; + color: ${SystemColors.CanvasText}; + fill: currentcolor; } ` ) 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 ed19b79902a..22b6c41365a 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -138,65 +138,63 @@ export const checkboxStyles: ( forcedColorsStylesheetBehavior( css` .control { - forced-color-adjust: none; border-color: ${SystemColors.FieldText}; background: ${SystemColors.Field}; } - :host(:enabled) .control:hover, - .control:active { - border-color: ${SystemColors.Highlight}; - background: ${SystemColors.Field}; - } - slot[name='checked-indicator'] { - fill: ${SystemColors.FieldText}; - } + slot[name='checked-indicator'], slot[name='indeterminate-indicator'] { fill: ${SystemColors.FieldText}; } - :host(:${focusVisible}) .control { + :host(:enabled:hover) .control, + :host(:enabled:active) .control { border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; + background: ${SystemColors.Field}; } - :host(.checked:${focusVisible}:enabled) .control { - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; + :host(:enabled:${focusVisible}) .control, + :host(.checked:enabled:${focusVisible}) .control { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText}; } :host(.checked) .control { background: ${SystemColors.Highlight}; border-color: ${SystemColors.Highlight}; } - :host(.checked) .control:hover, - .control:active { - background: ${SystemColors.HighlightText}; - } - :host(.checked) slot[name='checked-indicator'] { - fill: ${SystemColors.HighlightText}; - } - :host(.checked) .control:hover slot[name='checked-indicator'] { - fill: ${SystemColors.Highlight}; + :host(.checked:enabled:hover) .control, + :host(.checked:enabled:active) .control { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight} } + :host(.checked) slot[name='checked-indicator'], :host(.checked) slot[name='indeterminate-indicator'] { fill: ${SystemColors.HighlightText}; } - :host(.checked) .control:hover slot[name='indeterminate-indicator'] { + :host(.checked:enabled:hover) slot[name='checked-indicator'], + :host(.checked:enabled:${focusVisible}) slot[name='checked-indicator'], + :host(.checked:enabled:hover) slot[name='indeterminate-indicator'], + :host(.checked:enabled:${focusVisible}) slot[name='indeterminate-indicator'] { fill: ${SystemColors.Highlight}; } :host(.disabled) { opacity: 1; } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } :host(.disabled) .control { - forced-color-adjust: none; border-color: ${SystemColors.GrayText}; background: ${SystemColors.Field}; } :host(.disabled) slot[name='indeterminate-indicator'], :host(.checked.disabled) .control:hover slot[name='indeterminate-indicator'] { - forced-color-adjust: none; - fill: ${SystemColors.GrayText}; + color: ${SystemColors.GrayText}; + fill: currentcolor; } :host(.disabled) slot[name='checked-indicator'], :host(.checked.disabled) .control:hover slot[name='checked-indicator'] { - forced-color-adjust: none; - fill: ${SystemColors.GrayText}; + color: ${SystemColors.GrayText}; + fill: currentcolor; } ` ) 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 e94d882e5fd..6201e0a2a75 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 @@ -126,17 +126,19 @@ export const optionStyles: ( forcedColorsStylesheetBehavior( css` :host { + background: ${SystemColors.ButtonFace}; border-color: transparent; color: ${SystemColors.ButtonText}; forced-color-adjust: none; } - - :host(:not([aria-selected="true"]):hover), + :host(:not([disabled])[aria-selected="true"]:hover), + :host(:not([disabled])[aria-selected="true"]:active), + :host(:not([disabled]):not([aria-selected="true"]):hover), + :host(:not([disabled]):not([aria-selected="true"]):active), :host([aria-selected="true"]) { background: ${SystemColors.Highlight}; color: ${SystemColors.HighlightText}; } - :host([disabled]), :host([disabled]:not([aria-selected="true"]):hover) { background: ${SystemColors.Canvas}; @@ -144,6 +146,10 @@ 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/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts index ee715d7b071..28de0bc0291 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 @@ -180,8 +180,8 @@ export const menuItemStyles: ( align-items: center; justify-content: center; position: relative; - width: 20px; - height: 20px; + width: calc((${heightNumber} / 2 + ${designUnit}) * 1px); + height: calc((${heightNumber} / 2 + ${designUnit}) * 1px); box-sizing: border-box; outline: none; } @@ -220,90 +220,52 @@ export const menuItemStyles: ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host { - forced-color-adjust: none; - border-color: transparent; - color: ${SystemColors.ButtonText}; - fill: ${SystemColors.ButtonText}; - } - :host(:hover) { - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - :host(:hover) .start, - :host(:hover) .end, - :host(:hover)::slotted(svg), - :host(:active) .start, - :host(:active) .end, - :host(:active)::slotted(svg) { - fill: ${SystemColors.HighlightText}; - } - - :host(.expanded) { - background: ${SystemColors.Highlight}; - border-color: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - :host(:${focusVisible}) { - background: ${SystemColors.Highlight}; - border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText}; - color: ${SystemColors.HighlightText}; - fill: currentcolor; - } - - :host([disabled]), - :host([disabled]:hover), - :host([disabled]:hover) .start, - :host([disabled]:hover) .end, - :host([disabled]:hover)::slotted(svg) { - background: ${SystemColors.Canvas}; - color: ${SystemColors.GrayText}; - fill: currentcolor; - opacity: 1; - } - - :host .expanded-toggle, - :host .checkbox, - :host .radio { - border-color: ${SystemColors.ButtonText}; - background: ${SystemColors.HighlightText}; - } - - :host([checked]) .checkbox, - :host([checked]) .radio { - background: ${SystemColors.HighlightText}; - border-color: ${SystemColors.HighlightText}; - } - - :host(:hover) .expanded-toggle, - :host(:hover) .checkbox, - :host(:hover) .radio, - :host(:${focusVisible}) .expanded-toggle, - :host(:${focusVisible}) .checkbox, - :host(:${focusVisible}) .radio, - :host([checked]:hover) .checkbox, - :host([checked]:hover) .radio, - :host([checked]:${focusVisible}) .checkbox, - :host([checked]:${focusVisible}) .radio { - border-color: ${SystemColors.HighlightText}; - } - - :host([aria-checked="true"]) { - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - :host([aria-checked="true"]) .checkbox-indicator, - :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]), - :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) { - fill: ${SystemColors.Highlight}; - } - - :host([aria-checked="true"]) .radio-indicator { - background: ${SystemColors.Highlight}; - } - ` + :host, + ::slotted([slot='end']:not(svg)) { + border-color: ${SystemColors.ButtonFace}; + color: ${SystemColors.ButtonText}; + fill: ${SystemColors.ButtonText}; + } + :host(:not([disabled]):hover), + :host(:not([disabled]):hover) ::slotted([slot='end']:not(svg)), + :host(:not([disabled]):${focusVisible}) ::slotted([slot='end']:not(svg)), + :host(:${focusVisible}), + :host(.expanded) { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.Highlight}; + box-shadow: none; + color: ${SystemColors.HighlightText}; + fill: currentcolor; + } + :host([disabled]), + :host([disabled]:hover), + :host([disabled]:hover) .start, + :host([disabled]:hover) .end, + :host([disabled]:hover)::slotted(svg) { + background: ${SystemColors.Canvas}; + color: ${SystemColors.GrayText}; + fill: currentcolor; + opacity: 1; + } + :host([disabled]:${focusVisible}) { + border-color: ${SystemColors.GrayText}; + } + :host(:not([disabled]):hover) .checkbox, + :host(:not([disabled]):hover) .radio, + :host(:not([disabled]):${focusVisible}) .checkbox, + :host(:not([disabled]):${focusVisible}) .radio { + background: ${SystemColors.Field}; + border-color: ${SystemColors.HighlightText}; + } + :host([aria-checked="true"]) slot[name="radio-indicator"] { + border-radius: 999px; + } + :host([aria-checked="true"]) slot[name="checkbox-indicator"], + :host([aria-checked="true"]) slot[name="radio-indicator"] { + background: ${SystemColors.Field}; + fill: ${SystemColors.ButtonText}; + } + ` ) ); 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 df1cdbe7a26..5f6bcc5155e 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -148,52 +148,54 @@ export const radioStyles: ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - .control { - forced-color-adjust: none; - border-color: ${SystemColors.FieldText}; - background: ${SystemColors.Field}; - } - :host(:enabled) .control:hover, - .control:active { - border-color: ${SystemColors.Highlight}; - background: ${SystemColors.Field}; - } - :host(:${focusVisible}) .control { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; - } - :host(.checked:${focusVisible}:enabled) .control { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; - } - :host(.checked:enabled) .control:hover, - .control:active { - border-color: ${SystemColors.Highlight}; - background: ${SystemColors.Highlight}; - } - :host(.checked) slot[name="checked-indicator"] { - fill: ${SystemColors.Highlight}; - } - :host(.checked) .control:hover slot[name="checked-indicator"] { - fill: ${SystemColors.HighlightText}; - } - :host(.disabled) { - forced-color-adjust: none; - opacity: 1; - } - :host(.disabled) .label { - color: ${SystemColors.GrayText}; - } - :host(.disabled) .control, - :host(.checked.disabled) .control:hover, - .control:active { - background: ${SystemColors.Field}; - border-color: ${SystemColors.GrayText}; - } - :host(.disabled) slot[name="checked-indicator"], - :host(.checked.disabled) .control:hover slot[name="checked-indicator"] { - fill: ${SystemColors.GrayText}; - } - ` + .control { + border-color: ${SystemColors.FieldText}; + background: ${SystemColors.Field}; + } + :host(:enabled:hover) .control, + .control:active { + border-color: ${SystemColors.Highlight}; + background: ${SystemColors.Field}; + } + :host(.checked) .control { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.Highlight}; + } + :host(.checked:enabled:hover) .control, + .control:active { + border-color: ${SystemColors.Highlight}; + background: ${SystemColors.HighlightText}; + } + :host(:${focusVisible}) .control, + :host(.checked:enabled:${focusVisible}) .control { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText}; + } + :host(.checked) slot[name='checked-indicator'] { + fill: ${SystemColors.HighlightText}; + } + :host(.checked:enabled:hover) slot[name='checked-indicator'], + :host(.checked:enabled:${focusVisible}) slot[name='checked-indicator'] { + fill: ${SystemColors.Highlight}; + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } + :host(.disabled) .control, + :host(.checked.disabled:hover) .control, + .control:active { + background: ${SystemColors.Field}; + border-color: ${SystemColors.GrayText}; + } + :host(.disabled) slot[name='checked-indicator'], + :host(.checked.disabled) .control:hover slot[name='checked-indicator'] { + fill: ${SystemColors.GrayText}; + } + ` ) ); 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 3ce42be5eaf..dab3c082a23 100644 --- a/packages/web-components/fast-components/src/styles/patterns/button.ts +++ b/packages/web-components/fast-components/src/styles/patterns/button.ts @@ -131,52 +131,40 @@ export const baseButtonStyles = ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host, - :host .control { - background-color: ${SystemColors.ButtonFace}; - border-color: ${SystemColors.ButtonText}; - color: ${SystemColors.ButtonText}; - fill: currentcolor; - } - - :host .control${interactivitySelector}:hover { - forced-color-adjust: none; - background-color: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - .control:${focusVisible}, - :host .control:${focusVisible}, - :host(:${focusVisible}) .control { - forced-color-adjust: none; - background-color: ${SystemColors.Highlight}; - border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.ButtonText}; - color: ${SystemColors.HighlightText}; - } - - .control${interactivitySelector}:hover, - :host .control:hover { - border-color: ${SystemColors.ButtonText}; - } - - :host([href]) .control { - border-color: ${SystemColors.LinkText}; - color: ${SystemColors.LinkText}; - } - - :host([href]) .control:hover, - :host(.neutral[href]) .control:hover, - :host(.outline[href]) .control:hover, - :host([href]) .control:${focusVisible}{ - forced-color-adjust: none; - background: ${SystemColors.ButtonFace}; - border-color: ${SystemColors.LinkText}; - box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset; - color: ${SystemColors.LinkText}; - fill: currentcolor; - } - ` + :host .control${interactivitySelector}:hover { + forced-color-adjust: none; + border-color: ${SystemColors.ButtonText}; + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + :host .control:${focusVisible} { + forced-color-adjust: none; + border-color: ${SystemColors.ButtonText} !important; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.ButtonText} !important; + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.ButtonText}; + } + :host([href]) .control { + border-color: ${SystemColors.LinkText}; + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.LinkText}; + fill: currentcolor; + } + :host([href]) .control:hover, + :host(.neutral[href]) .control:hover, + :host(.outline[href]) .control:hover { + forced-color-adjust: none; + border-color: ${SystemColors.LinkText} !important; + box-shadow: 0 0 0 1px ${SystemColors.LinkText} !important; + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.LinkText}; + } + :host([href]) .control:${focusVisible} { + forced-color-adjust: none; + border-color: ${SystemColors.LinkText} !important; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} !important; + } + ` ) ); @@ -205,48 +193,42 @@ export const AccentButtonStyles = ( } :host .control:${focusVisible} { - box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset; color: ${foregroundOnAccentHover}; } `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host .control { - forced-color-adjust: none; - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - :host .control${interactivitySelector}:hover, - :host .control${interactivitySelector}:active { - background: ${SystemColors.HighlightText}; - border-color: ${SystemColors.Highlight}; - color: ${SystemColors.Highlight}; - } - - :host .control:${focusVisible} { - border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset; - } - - :host([href]) .control { - background: ${SystemColors.LinkText}; - color: ${SystemColors.HighlightText}; - } - - :host([href]) .control:hover { - background: ${SystemColors.ButtonFace}; - border-color: ${SystemColors.LinkText}; - box-shadow: none; - color: ${SystemColors.LinkText}; - fill: currentcolor; - } - - :host([href]) .control:${focusVisible} { - border-color: ${SystemColors.LinkText}; - box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset; - } - ` + :host .control { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + :host .control${interactivitySelector}:hover, + :host .control${interactivitySelector}:active { + background: ${SystemColors.HighlightText}; + border-color: ${SystemColors.Highlight}; + color: ${SystemColors.Highlight}; + } + :host .control:${focusVisible} { + border-color: ${SystemColors.HighlightText} !important; + background: ${SystemColors.Highlight}; + } + :host([href]) .control { + background: ${SystemColors.LinkText}; + color: ${SystemColors.HighlightText}; + } + :host([href]) .control:hover { + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.LinkText}; + box-shadow: none; + color: ${SystemColors.LinkText}; + fill: currentcolor; + } + :host([href]) .control:${focusVisible} { + border-color: ${SystemColors.HighlightText} !important; + box-shadow: 0 0 0 calc((${focusStrokeWidth} * 1px) ${SystemColors.LinkText} !important; + } + ` ) ); @@ -350,34 +332,33 @@ export const LightweightButtonStyles = ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host { - color: ${SystemColors.ButtonText}; - } - :host .control${interactivitySelector}:hover, - :host .control${interactivitySelector}:active, - :host .control:${focusVisible} { - forced-color-adjust: none; - background: ${SystemColors.ButtonFace}; - color: ${SystemColors.Highlight}; - } - :host .control${interactivitySelector}:hover .content::before, - :host .control${interactivitySelector}:active .content::before, - :host .control:${focusVisible} .content::before { - background: ${SystemColors.Highlight}; - } - - :host([href]) .control:hover, - :host([href]) .control:${focusVisible} { - background: ${SystemColors.ButtonFace}; - box-shadow: none; - color: ${SystemColors.LinkText}; - } - - :host([href]) .control:hover .content::before, - :host([href]) .control:${focusVisible} .content::before { - background: ${SystemColors.LinkText}; - } - ` + :host .control { + border-color: ${SystemColors.ButtonFace} !important; + color: ${SystemColors.ButtonText}; + } + :host .control${interactivitySelector}:hover, + :host .control${interactivitySelector}:active, + :host .control:${focusVisible} { + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.Highlight}; + } + :host .control${interactivitySelector}:hover .content::before, + :host .control${interactivitySelector}:active .content::before, + :host .control:not([disabled]):focus-visible .content::before { + background: ${SystemColors.Highlight}; + } + :host([href]) .control:hover, + :host([href]) .control:${focusVisible} { + border-color: ${SystemColors.ButtonFace} !important; + box-shadow: none !important; + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.LinkText}; + } + :host([href]) .control:hover .content::before, + :host([href]) .control:${focusVisible} .content::before { + background: ${SystemColors.LinkText}; + } + ` ) ); @@ -401,12 +382,28 @@ export const OutlineButtonStyles = ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host { + :host .control { border-color: ${SystemColors.ButtonText}; } + :host .control${interactivitySelector}:hover { + border-color: ${SystemColors.Highlight}; + color: ${SystemColors.Highlight}; + } + :host .control${interactivitySelector}:${focusVisible} { + forced-color-adjust: none; + border-color: ${SystemColors.Highlight} !important; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight} !important; + color: ${SystemColors.Highlight}; + } :host([href]) { border-color: ${SystemColors.LinkText}; } + :host([href]) .control${interactivitySelector}:${focusVisible} { + forced-color-adjust: none; + border-color: ${SystemColors.LinkText} !important; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} !important; + color: ${SystemColors.LinkText}; + } ` ) ); @@ -435,45 +432,36 @@ export const StealthButtonStyles = ( `.withBehaviors( forcedColorsStylesheetBehavior( css` - :host, :host .control { - forced-color-adjust: none; background: ${SystemColors.ButtonFace}; - border-color: transparent; + border-color: ${SystemColors.ButtonFace}; color: ${SystemColors.ButtonText}; fill: currentcolor; } :host .control${interactivitySelector}:hover, - :host .control${interactivitySelector}:active { - background: ${SystemColors.Highlight}; - border-color: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - fill: currentcolor; - } - - :host .control:${focusVisible} { + :host .control${interactivitySelector}:active, + :host .control${interactivitySelector}:${focusVisible}{ + border-color: ${SystemColors.Highlight} !important; + box-shadow: none !important; background: ${SystemColors.Highlight}; - box-shadow: 0 0 0 1px ${SystemColors.Highlight}; color: ${SystemColors.HighlightText}; fill: currentcolor; } :host([href]) .control { + border-color: ${SystemColors.ButtonFace}; color: ${SystemColors.LinkText}; } - :host(:hover[href]) .control, - :host(:${focusVisible}[href]) .control { + :host([href]) .control${interactivitySelector}:hover, + :host([href]) .control${interactivitySelector}:active, + :host([href]) .control${interactivitySelector}:${focusVisible} { background: ${SystemColors.LinkText}; - border-color: ${SystemColors.LinkText}; + border-color: ${SystemColors.LinkText} !important; color: ${SystemColors.HighlightText}; fill: currentcolor; } - - :host(:${focusVisible}[href]) .control { - box-shadow: 0 0 0 1px ${SystemColors.LinkText}; - } ` ) ); 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 0024e4d9c76..f681d6ec27b 100644 --- a/packages/web-components/fast-components/src/styles/patterns/input.ts +++ b/packages/web-components/fast-components/src/styles/patterns/input.ts @@ -173,21 +173,32 @@ export const inputForcedColorStyles: ( ) => css` ${rootSelector} { forced-color-adjust: none; - background: ${SystemColors.ButtonFace}; - border-color: ${SystemColors.ButtonText}; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; } - :host(:hover:not([disabled])) ${rootSelector} { - background: ${SystemColors.ButtonFace}; + :host(:hover:not([disabled])) ${rootSelector}, :host(:hover:not([disabled])) .control, + :host(:hover:not([disabled]):not(:focus-within)) .control { + background: ${SystemColors.Field}; border-color: ${SystemColors.Highlight}; } + :host(:hover:not([disabled])) .controls, + :host(:focus-within:not([disabled])) .controls { + background: transparent; + color: ${SystemColors.FieldText}; + fill: currentcolor; + } + :host(:hover:not([disabled]):not(:focus-within)) .root { + background: ${SystemColors.ButtonFace}; + } :host(:focus-within:enabled) ${rootSelector} { border-color: ${SystemColors.Highlight}; box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; } .control, - ::placeholder, - ::-webkit-input-placeholder { + ::-webkit-input-placeholder, + ::slotted(svg) { color: ${SystemColors.FieldText}; + fill: currentcolor; } :host([disabled]) { opacity: 1; @@ -198,7 +209,8 @@ export const inputForcedColorStyles: ( } :host([disabled]) ::placeholder, :host([disabled]) ::-webkit-input-placeholder, - :host([disabled]) .label { + :host([disabled]) .label, + ::placeholder { color: ${SystemColors.GrayText}; } `; 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 10495b2ffe2..a6eeb93268d 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -13,6 +13,7 @@ import { designUnit, disabledOpacity, focusStrokeOuter, + focusStrokeWidth, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, @@ -172,56 +173,46 @@ export const switchStyles: ( ), forcedColorsStylesheetBehavior( css` - slot[name="switch"], - :host(:enabled) .switch:active slot[name="switch"] { - forced-color-adjust: none; - background: ${SystemColors.FieldText}; - } - .switch { - forced-color-adjust: none; - background: ${SystemColors.Field}; - border-color: ${SystemColors.FieldText}; - } - :host(:enabled) .switch:hover { - background: ${SystemColors.HighlightText}; - border-color: ${SystemColors.Highlight}; - } - :host(.checked) .switch { - background: ${SystemColors.Highlight}; - border-color: ${SystemColors.Highlight}; - } - :host(.checked:enabled) .switch:hover, - :host(:enabled) .switch:active { - background: ${SystemColors.HighlightText}; - border-color: ${SystemColors.Highlight}; - } - :host(.checked) slot[name="switch"] { - background: ${SystemColors.HighlightText}; - } - :host(.checked:enabled) .switch:hover slot[name="switch"] { - background: ${SystemColors.Highlight}; - } - :host(:${focusVisible}) .switch { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; - } - :host(.checked:${focusVisible}:enabled) .switch { - box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; - } - :host(.disabled) { - opacity: 1; - } - :host(.disabled) slot[name="switch"] { - background: ${SystemColors.GrayText}; - } - :host(.disabled) .switch { - background: ${SystemColors.Field}; - border-color: ${SystemColors.GrayText}; - } - .status-message, - .label { - color: ${SystemColors.FieldText}; - } - ` + :host { + forced-color-adjust: auto; + } + .switch { + background: ${SystemColors.Field}; + } + slot[name="switch"] { + background: none; + border: none; + fill: ${SystemColors.FieldText}; + } + :host(:enabled:hover) .switch { + border-color: ${SystemColors.Highlight}; + } + :host(:enabled:${focusVisible}) .switch, + :host([aria-checked="true"]:enabled:${focusVisible}) .switch { + forced-color-adjust: none; + border-color: ${SystemColors.FieldText}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText}; + } + :host(.checked) .switch { + background: ${SystemColors.Highlight}; + } + :host([aria-checked="true"]) .switch slot[name="switch"] { + fill: ${SystemColors.HighlightText}; + } + :host([aria-checked='true']:enabled:hover) .switch slot[name='switch'], + :host([aria-checked='true']:enabled) .switch:hover slot[name='switch'] { + fill: ${SystemColors.Highlight}; + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled) .switch { + background: ${SystemColors.Field}; + border-color: ${SystemColors.GrayText}; + } + :host(.disabled) slot[name='switch'] { + fill: ${SystemColors.GrayText}; + } + ` ) ); 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 c802857a493..efd65dff6cd 100644 --- a/packages/web-components/fast-components/src/tab/tab.styles.ts +++ b/packages/web-components/fast-components/src/tab/tab.styles.ts @@ -78,8 +78,6 @@ export const tabStyles: ( opacity: ${disabledOpacity}; } - - :host(.vertical) { justify-content: start; grid-column: 1 / 3; @@ -95,26 +93,23 @@ export const tabStyles: ( forcedColorsStylesheetBehavior( css` :host { - forced-color-adjust: none; - border-color: transparent; + background: ${SystemColors.ButtonFace}; color: ${SystemColors.ButtonText}; fill: currentcolor; } :host(:hover), :host(.vertical:hover), + :host([aria-selected="true"]), :host([aria-selected="true"]:hover) { - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - fill: currentcolor; - } - :host([aria-selected="true"]) { - background: ${SystemColors.HighlightText}; + border-color: ${SystemColors.Highlight}; color: ${SystemColors.Highlight}; fill: currentcolor; } :host(:${focusVisible}) { - border-color: ${SystemColors.ButtonText}; - box-shadow: none; + forced-color-adjust: none; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight} inset; } ` ) diff --git a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts index a13b7d42b14..9e3db2c25c9 100644 --- a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts @@ -239,36 +239,39 @@ export const treeItemStyles: ( new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior( css` - :host { - forced-color-adjust: none; - border-color: transparent; - background: ${SystemColors.Field}; - color: ${SystemColors.FieldText}; - } - :host(:not([disabled])) .positioning-region:hover, - :host([selected]) .positioning-region { - background: ${SystemColors.Highlight}; - } - :host .positioning-region:hover .content-region, - :host([selected]) .positioning-region .content-region { - color: ${SystemColors.HighlightText}; - } - :host([selected])::after { - background: ${SystemColors.Field}; - } - :host(:${focusVisible}) .positioning-region { - border-color: ${SystemColors.FieldText}; - box-shadow: 0 0 0 2px inset ${SystemColors.Field}; - } - :host([disabled]) .content-region, - :host([disabled]) .positioning-region:hover .content-region { - opacity: 1; - color: ${SystemColors.GrayText}; - } - :host(.nested) .expand-collapse-button:hover { - background: ${SystemColors.Field}; - fill: ${SystemColors.FieldText}; - } - ` + :host { + forced-color-adjust: none; + border-color: transparent; + background: ${SystemColors.ButtonFace}; + color: ${SystemColors.ButtonText}; + } + .positioning-region { + background: ${SystemColors.ButtonFace}; + } + :host(:not([disabled])) .positioning-region:hover, + :host(:not([disabled])[selected]) .positioning-region { + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + :host([selected])::after { + background: ${SystemColors.HighlightText}; + } + :host(:${focusVisible}) .positioning-region { + border-color: ${SystemColors.ButtonText}; + box-shadow: 0 0 0 2px inset ${SystemColors.ButtonFace}; + } + :host([disabled]) { + opacity: 1; + } + :host([disabled]) .positioning-region { + color: ${SystemColors.GrayText}; + fill: currentcolor; + } + :host(.nested) .expand-collapse-button:hover, + :host(:not([disabled])[selected]) .expand-collapse-button:hover { + background: ${SystemColors.ButtonFace}; + fill: ${SystemColors.ButtonText}; + } + ` ) );