diff --git a/change/@fluentui-web-components-65f13306-7054-44e7-bab7-161bfb2ff372.json b/change/@fluentui-web-components-65f13306-7054-44e7-bab7-161bfb2ff372.json new file mode 100644 index 00000000000000..9570a1ddc649ab --- /dev/null +++ b/change/@fluentui-web-components-65f13306-7054-44e7-bab7-161bfb2ff372.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Rename and clean up of design tokens and recipe: - neutralContrastFill -> neutralFillInverse - neutralFillToggle -> neutralFillContrast - neutralFocus -> focusStrokeOuter - neutralFocusInnerAccent -> focusStrokeInner - outline -> stroke - Removed 'selected' colors", + "packageName": "@fluentui/web-components", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts index 69fcdc73ba1b5a..14f0926317f7e1 100644 --- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts +++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts @@ -6,11 +6,11 @@ import { bodyFont, density, designUnit, - focusOutlineWidth, - neutralDivider, - neutralFocus, - neutralForegroundRest, - outlineWidth, + focusStrokeWidth, + neutralStrokeDivider, + focusStrokeOuter, + neutralForeground, + strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../../design-tokens'; @@ -24,7 +24,7 @@ export const accordionItemStyles = (context, definition) => flex-direction: column; font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; - border-bottom: calc(${outlineWidth} * 1px) solid ${neutralDivider}; + border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; } .region { @@ -49,14 +49,14 @@ export const accordionItemStyles = (context, definition) => padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px); text-align: left; height: calc(${heightNumber} * 1px); - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; font-family: inherit; } .button:hover, .button:active { - color: ${neutralForegroundRest}; + color: ${neutralForeground}; } .button::before { @@ -72,9 +72,9 @@ export const accordionItemStyles = (context, definition) => .button:${focusVisible}::before { outline: none; - border: calc(${outlineWidth} * 1px) solid ${neutralFocus}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) - ${neutralFocus}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) + ${focusStrokeOuter}; } :host(.expanded) .region { @@ -128,7 +128,7 @@ export const accordionItemStyles = (context, definition) => css` .button:${focusVisible}::before { border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${SystemColors.Highlight}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}; } .icon { fill: ${SystemColors.ButtonText}; diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts index a60a11b93eb961..5c651d928457ec 100644 --- a/packages/web-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/src/accordion/accordion.styles.ts @@ -2,9 +2,9 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { bodyFont, - neutralDivider, - neutralForegroundRest, - outlineWidth, + neutralStrokeDivider, + neutralForeground, + strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens'; @@ -17,7 +17,7 @@ export const accordionStyles = (context, definition) => font-family: ${bodyFont}; font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; - color: ${neutralForegroundRest}; - border-top: calc(${outlineWidth} * 1px) solid ${neutralDivider}; + color: ${neutralForeground}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; } `; diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts index 9072d2d1fcce0f..61869fa894c457 100644 --- a/packages/web-components/src/badge/badge.styles.ts +++ b/packages/web-components/src/badge/badge.styles.ts @@ -3,9 +3,9 @@ import { display } from '@microsoft/fast-foundation'; import { accentForegroundRest, bodyFont, - cornerRadius, + controlCornerRadius, designUnit, - neutralForegroundRest, + neutralForeground, typeRampMinus1FontSize, typeRampMinus1LineHeight, neutralFillRest, @@ -22,13 +22,13 @@ export const badgeStyles = (context, definition) => } .control { - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px); } :host(.lightweight) .control { background: transparent; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; font-weight: 600; } @@ -39,6 +39,6 @@ export const badgeStyles = (context, definition) => :host(.neutral) .control { background: ${neutralFillRest}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; } `; diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts index ce1edb064b1902..49b75ab0d0110c 100644 --- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts +++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts @@ -6,9 +6,9 @@ import { accentForegroundHover, accentForegroundRest, bodyFont, - focusOutlineWidth, - neutralForegroundRest, - outlineWidth, + focusStrokeWidth, + neutralForeground, + strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens'; @@ -59,7 +59,7 @@ export const breadcrumbItemStyles = (context, definition) => .control .content::before { content: ""; display: block; - height: calc(${outlineWidth} * 1px); + height: calc(${strokeWidth} * 1px); left: 0; position: absolute; right: 0; @@ -76,20 +76,20 @@ export const breadcrumbItemStyles = (context, definition) => } .control:${focusVisible} .content::before { - background: ${neutralForegroundRest}; - height: calc(${focusOutlineWidth} * 1px); + background: ${neutralForeground}; + height: calc(${focusStrokeWidth} * 1px); } :host(:not([href])), :host([aria-current]) .control { font-weight: 600; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; fill: currentcolor; cursor: default; } :host([aria-current]) .control:hover .content::before { - background: ${neutralForegroundRest}; + background: ${neutralForeground}; } .start { @@ -104,7 +104,7 @@ export const breadcrumbItemStyles = (context, definition) => .separator { display: flex; - fill: ${neutralForegroundRest}; + fill: ${neutralForeground}; margin: 0 6px; } `.withBehaviors( diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index 18e6b7414656da..1129e3dc6ce00f 100644 --- a/packages/web-components/src/button/button.styles.ts +++ b/packages/web-components/src/button/button.styles.ts @@ -14,7 +14,7 @@ import { neutralFillRest, accentFillRest, accentForegroundRest, - neutralOutlineRest, + neutralStrokeRest, neutralFillStealthRest, } from '../design-tokens'; @@ -106,7 +106,7 @@ export const buttonStyles = (context, definition) => :host([appearance='outline'][disabled]:hover), :host([appearance='outline'][disabled]:active) { background: transparent; - border-color: ${neutralOutlineRest}; + border-color: ${neutralStrokeRest}; } ${OutlineButtonStyles} diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index 919ca0c8031d11..9dd0727f4360e3 100644 --- a/packages/web-components/src/card/card.styles.ts +++ b/packages/web-components/src/card/card.styles.ts @@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { elevation } from '../styles'; -import { elevatedCornerRadius } from "../design-tokens"; +import { surfaceCornerRadius } from '../design-tokens'; export const CardStyles = css` ${display('block')} :host { @@ -12,7 +12,7 @@ export const CardStyles = css` height: var(--card-height, 100%); width: var(--card-width, 100%); box-sizing: border-box; - border-radius: calc(${elevatedCornerRadius} * 1px); + border-radius: calc(${surfaceCornerRadius} * 1px); ${elevation} } diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts index 58c267f879385f..1a8541b8c19363 100644 --- a/packages/web-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/src/checkbox/checkbox.styles.ts @@ -4,19 +4,19 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles'; import { designUnit, - cornerRadius, - outlineWidth, - neutralOutlineRest, + controlCornerRadius, + strokeWidth, + neutralStrokeRest, neutralFillInputRest, bodyFont, - neutralForegroundRest, + neutralForeground, typeRampBaseFontSize, typeRampBaseLineHeight, neutralFillInputHover, - neutralOutlineHover, + neutralStrokeHover, neutralFillInputActive, - neutralOutlineActive, - neutralFocus, + neutralStrokeActive, + focusStrokeOuter, disabledOpacity, fillColor, } from '../design-tokens'; @@ -40,8 +40,8 @@ export const checkboxStyles = (context, definition) => width: calc((${heightNumber} / 2 + ${designUnit}) * 1px); height: calc((${heightNumber} / 2 + ${designUnit}) * 1px); box-sizing: border-box; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; background: ${neutralFillInputRest}; outline: none; cursor: pointer; @@ -54,7 +54,7 @@ export const checkboxStyles = (context, definition) => .label { font-family: ${bodyFont}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; ${ /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ '' } padding-inline-start: calc(${designUnit} * 2px + 2px); @@ -68,14 +68,14 @@ export const checkboxStyles = (context, definition) => width: 100%; height: 100%; display: block; - fill: ${neutralForegroundRest}; + fill: ${neutralForeground}; opacity: 0; pointer-events: none; } .indeterminate-indicator { - border-radius: calc((${cornerRadius} / 2) * 1px); - background: ${neutralForegroundRest}; + border-radius: calc((${controlCornerRadius} / 2) * 1px); + background: ${neutralForeground}; position: absolute; top: 50%; left: 50%; @@ -87,17 +87,17 @@ export const checkboxStyles = (context, definition) => :host(:enabled) .control:hover { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host(:enabled) .control:active { background: ${neutralFillInputActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host(:${focusVisible}) .control { - box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter}; + border-color: ${focusStrokeOuter}; } :host(.disabled) .label, diff --git a/packages/web-components/src/color-vNext/recipes/accent-fill.ts b/packages/web-components/src/color-vNext/recipes/accent-fill.ts index 8beaccb8bd8076..6fcf13d9711631 100644 --- a/packages/web-components/src/color-vNext/recipes/accent-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/accent-fill.ts @@ -1,7 +1,6 @@ import { inRange } from 'lodash-es'; import { PaletteRGB } from '../palette'; import { Swatch } from '../swatch'; -import { isDark } from '../utilities/is-dark'; /** * @internal @@ -15,7 +14,6 @@ export function accentFill( hoverDelta: number, activeDelta: number, focusDelta: number, - selectedDelta: number, neutralFillRestDelta: number, neutralFillHoverDelta: number, neutralFillActiveDelta: number, @@ -42,13 +40,11 @@ export function accentFill( const restIndex = hoverIndex + direction * -1 * hoverDelta; const activeIndex = restIndex + direction * activeDelta; const focusIndex = restIndex + direction * focusDelta; - const selectedIndex = restIndex + (isDark(reference) ? selectedDelta * -1 : selectedDelta); return { rest: palette.get(restIndex), hover: palette.get(hoverIndex), active: palette.get(activeIndex), focus: palette.get(focusIndex), - selected: palette.get(selectedIndex), }; } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-focus-inner-accent.ts b/packages/web-components/src/color-vNext/recipes/focus-stroke.ts similarity index 53% rename from packages/web-components/src/color-vNext/recipes/neutral-focus-inner-accent.ts rename to packages/web-components/src/color-vNext/recipes/focus-stroke.ts index 933e901e6995e1..5c0968d1954f98 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-focus-inner-accent.ts +++ b/packages/web-components/src/color-vNext/recipes/focus-stroke.ts @@ -2,7 +2,17 @@ import { PaletteRGB } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; -export function neutralFocusInnerAccent(palette: PaletteRGB, reference: Swatch, focusColor: Swatch) { +/** + * @internal + */ +export function focusStrokeOuter(palette: PaletteRGB, reference: Swatch) { + return palette.colorContrast(reference, 3.5); +} + +/** + * @internal + */ +export function focusStrokeInner(palette: PaletteRGB, reference: Swatch, focusColor: Swatch) { return palette.colorContrast( focusColor, 3.5, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-toggle.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts similarity index 96% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-toggle.ts rename to packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts index f96e1dce1cc49d..6adb01265d6867 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-toggle.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts @@ -5,7 +5,7 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; /** * @internal */ -export function neutralFillToggle( +export function neutralFillContrast( palette: PaletteRGB, reference: Swatch, restDelta: number, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts index 51984d0b28144e..2afa0757697246 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts @@ -12,7 +12,6 @@ export function neutralFillInput( hoverDelta: number, activeDelta: number, focusDelta: number, - selectedDelta: number, ) { const direction = directionByIsDark(reference); const referenceIndex = palette.closestIndexOf(reference); @@ -22,6 +21,5 @@ export function neutralFillInput( hover: palette.get(referenceIndex - direction * hoverDelta), active: palette.get(referenceIndex - direction * activeDelta), focus: palette.get(referenceIndex - direction * focusDelta), - selected: palette.get(referenceIndex - direction * selectedDelta), }; } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-contrast-fill.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts similarity index 96% rename from packages/web-components/src/color-vNext/recipes/neutral-contrast-fill.ts rename to packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts index a6db7f346b22d4..418b0e27e5a237 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-contrast-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts @@ -5,7 +5,7 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; /** * @internal */ -export function neutralContrastFill( +export function neutralFillInverse( palette: PaletteRGB, reference: Swatch, restDelta: number, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts index bca50d1403a648..e1fed4efe7bcc3 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts @@ -11,7 +11,6 @@ export function neutralFillStealth( hoverDelta: number, activeDelta: number, focusDelta: number, - selectedDelta: number, fillRestDelta: number, fillHoverDelta: number, fillActiveDelta: number, @@ -36,6 +35,5 @@ export function neutralFillStealth( hover: palette.get(referenceIndex + direction * hoverDelta), active: palette.get(referenceIndex + direction * activeDelta), focus: palette.get(referenceIndex + direction * focusDelta), - selected: palette.get(referenceIndex + direction * selectedDelta), }; } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill.ts index 3e8bef1f5e6b1d..df35a0519469bf 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill.ts @@ -18,7 +18,6 @@ export function neutralFill( hoverDelta: number, activeDelta: number, focusDelta: number, - selectedDelta: number, ) { const referenceIndex = palette.closestIndexOf(reference); const threshold = Math.max(restDelta, hoverDelta, activeDelta, focusDelta); @@ -29,6 +28,5 @@ export function neutralFill( hover: palette.get(referenceIndex + direction * hoverDelta), active: palette.get(referenceIndex + direction * activeDelta), focus: palette.get(referenceIndex + direction * focusDelta), - selected: palette.get(referenceIndex + direction * selectedDelta), }; } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-focus.ts b/packages/web-components/src/color-vNext/recipes/neutral-focus.ts deleted file mode 100644 index c1f84cbf5625b8..00000000000000 --- a/packages/web-components/src/color-vNext/recipes/neutral-focus.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { PaletteRGB } from '../palette'; -import { Swatch } from '../swatch'; - -/** - * @internal - */ -export function neutralFocus(palette: PaletteRGB, reference: Swatch) { - return palette.colorContrast(reference, 3.5); -} diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts index f0aa2cc3cc5a42..0ae059fc93f312 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts @@ -1,7 +1,9 @@ import { PaletteRGB } from '../palette'; -import { Swatch } from '../swatch'; import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; +/** + * @internal + */ export function neutralLayerL1(palette: PaletteRGB, baseLayerLuminance: number) { return palette.get(palette.closestIndexOf(baseLayerLuminanceSwatch(baseLayerLuminance))); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts index f7b4768b72a0db..4af6f3152bd2c8 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts @@ -1,6 +1,9 @@ import { PaletteRGB } from '../palette'; import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; +/** + * @internal + */ export function neutralLayerL2Index( palette: PaletteRGB, luminance: number, @@ -17,6 +20,9 @@ export function neutralLayerL2Index( ); } +/** + * @internal + */ export function neutralLayerL2( palette: PaletteRGB, luminance: number, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-L3.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-L3.ts index f0416e0ed1dfc4..12e8cdad4c9410 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L3.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-L3.ts @@ -1,6 +1,9 @@ import { PaletteRGB } from '../palette'; import { neutralLayerL2Index } from './neutral-layer-L2'; +/** + * @internal + */ export function neutralLayerL3( palette: PaletteRGB, luminance: number, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-L4.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-L4.ts index 7b75a75668cd76..b320985a85346d 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L4.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-L4.ts @@ -1,6 +1,9 @@ import { PaletteRGB } from '../palette'; import { neutralLayerL2Index } from './neutral-layer-L2'; +/** + * @internal + */ export function neutralLayerL4( palette: PaletteRGB, luminance: number, diff --git a/packages/web-components/src/color-vNext/recipes/neutral-outline.ts b/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts similarity index 96% rename from packages/web-components/src/color-vNext/recipes/neutral-outline.ts rename to packages/web-components/src/color-vNext/recipes/neutral-stroke.ts index d0149486594760..1bcb4614cbcfa6 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-outline.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts @@ -5,7 +5,7 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; /** * @internal */ -export function neutralOutline( +export function neutralStroke( palette: PaletteRGB, reference: Swatch, restDelta: number, diff --git a/packages/web-components/src/color/accent-fill.spec.ts b/packages/web-components/src/color/accent-fill.spec.ts index e0a291f761cab7..1002ac1cd65345 100644 --- a/packages/web-components/src/color/accent-fill.spec.ts +++ b/packages/web-components/src/color/accent-fill.spec.ts @@ -86,7 +86,6 @@ describe("ensure parity between old and new recipe implementation", () => { accentFillHoverDelta, accentFillActiveDelta, accentFillFocusDelta, - accentFillSelectedDelta, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, @@ -103,7 +102,6 @@ describe("ensure parity between old and new recipe implementation", () => { accentFillHoverDelta, accentFillActiveDelta, accentFillFocusDelta, - accentFillSelectedDelta, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta diff --git a/packages/web-components/src/color/neutral-contrast-fill.spec.ts b/packages/web-components/src/color/neutral-contrast-fill.spec.ts index a06338284288fb..0ea3a344291521 100644 --- a/packages/web-components/src/color/neutral-contrast-fill.spec.ts +++ b/packages/web-components/src/color/neutral-contrast-fill.spec.ts @@ -1,7 +1,7 @@ import { parseColorHexRGB } from "@microsoft/fast-colors"; import { expect } from "chai"; import { PaletteRGB } from "../color-vNext/palette"; -import { neutralContrastFill as neutralContrastFillNew } from "../color-vNext/recipes/neutral-contrast-fill"; +import { neutralFillInverse as neutralFillInverseNew } from "../color-vNext/recipes/neutral-fill-inverse"; import { SwatchRGB } from "../color-vNext/swatch"; import { DesignSystemDefaults } from "../fluent-design-system"; import { neutralBaseColor } from "./color-constants"; @@ -13,7 +13,7 @@ describe("ensure parity between old and new recipe implementation", () => { palette.swatches.forEach(( newSwatch, index ) => { const { neutralContrastFillHoverDelta, neutralContrastFillActiveDelta, neutralContrastFillFocusDelta} = DesignSystemDefaults; const oldValues = neutralContrastFill({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralContrastFillNew( + const newValues = neutralFillInverseNew( palette, newSwatch, 0, diff --git a/packages/web-components/src/color/neutral-fill-input.spec.ts b/packages/web-components/src/color/neutral-fill-input.spec.ts index 74ab26b1397734..92b4059af35f64 100644 --- a/packages/web-components/src/color/neutral-fill-input.spec.ts +++ b/packages/web-components/src/color/neutral-fill-input.spec.ts @@ -120,8 +120,7 @@ describe("ensure parity between old and new recipe implementation", () => { neutralFillInputRestDelta, neutralFillInputHoverDelta, neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - neutralFillInputSelectedDelta + neutralFillInputFocusDelta } = DesignSystemDefaults; const oldValues = neutralFillInput({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); const newValues = neutralFillInputNew( @@ -130,8 +129,7 @@ describe("ensure parity between old and new recipe implementation", () => { neutralFillInputRestDelta, neutralFillInputHoverDelta, neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - neutralFillInputSelectedDelta + neutralFillInputFocusDelta ); it(`should be the same for ${newSwatch}`, () => { for (let key in oldValues) { diff --git a/packages/web-components/src/color/neutral-fill-stealth.spec.ts b/packages/web-components/src/color/neutral-fill-stealth.spec.ts index 7cb6cd2ce5413f..7b3618a12665a0 100644 --- a/packages/web-components/src/color/neutral-fill-stealth.spec.ts +++ b/packages/web-components/src/color/neutral-fill-stealth.spec.ts @@ -121,7 +121,6 @@ describe("ensure parity between old and new recipe implementation", () => { neutralFillStealthHoverDelta, neutralFillStealthActiveDelta, neutralFillStealthFocusDelta, - neutralFillStealthSelectedDelta, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, @@ -135,7 +134,6 @@ describe("ensure parity between old and new recipe implementation", () => { neutralFillStealthHoverDelta, neutralFillStealthActiveDelta, neutralFillStealthFocusDelta, - neutralFillStealthSelectedDelta, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, diff --git a/packages/web-components/src/color/neutral-fill-toggle.spec.ts b/packages/web-components/src/color/neutral-fill-toggle.spec.ts index 1c750cf6ed57f0..2ee71bab0e165d 100644 --- a/packages/web-components/src/color/neutral-fill-toggle.spec.ts +++ b/packages/web-components/src/color/neutral-fill-toggle.spec.ts @@ -1,7 +1,7 @@ import { parseColorHexRGB } from "@microsoft/fast-colors"; import { expect } from "chai"; import { PaletteRGB } from "../color-vNext/palette"; -import { neutralFillToggle as neutralFillToggleNew } from "../color-vNext/recipes/neutral-fill-toggle"; +import { neutralFillContrast as neutralFillContrastNew } from "../color-vNext/recipes/neutral-fill-contrast"; import { SwatchRGB } from "../color-vNext/swatch"; import { DesignSystemDefaults } from "../fluent-design-system"; import { neutralBaseColor } from "./color-constants"; @@ -13,7 +13,7 @@ describe("ensure parity between old and new recipe implementation", () => { palette.swatches.forEach(( newSwatch, index ) => { const { neutralFillToggleHoverDelta, neutralFillToggleActiveDelta, neutralFillToggleFocusDelta} = DesignSystemDefaults; const oldValues = neutralFillToggle({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillToggleNew( + const newValues = neutralFillContrastNew( palette, newSwatch, 0, diff --git a/packages/web-components/src/color/neutral-fill.spec.ts b/packages/web-components/src/color/neutral-fill.spec.ts index 15024e73fe40f4..e24e760662433e 100644 --- a/packages/web-components/src/color/neutral-fill.spec.ts +++ b/packages/web-components/src/color/neutral-fill.spec.ts @@ -111,9 +111,9 @@ describe("ensure parity between old and new recipe implementation", () => { const color = (parseColorHexRGB(neutralBaseColor)!) const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); palette.swatches.forEach(( newSwatch, index ) => { - const { neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, neutralFillFocusDelta, neutralFillSelectedDelta } = DesignSystemDefaults; + const { neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, neutralFillFocusDelta } = DesignSystemDefaults; const oldValues = neutralFill({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillNew(palette, newSwatch, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, neutralFillFocusDelta, neutralFillSelectedDelta ); + const newValues = neutralFillNew(palette, newSwatch, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta, neutralFillFocusDelta ); it(`should be the same for ${newSwatch}`, () => { for (let key in oldValues) { expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) diff --git a/packages/web-components/src/color/neutral-focus.spec.ts b/packages/web-components/src/color/neutral-focus.spec.ts index 73edb558572c60..3c4f29e3aa16b2 100644 --- a/packages/web-components/src/color/neutral-focus.spec.ts +++ b/packages/web-components/src/color/neutral-focus.spec.ts @@ -6,7 +6,7 @@ import { contrast } from './common'; import { neutralBaseColor } from "./color-constants"; import { PaletteRGB } from "../color-vNext/palette"; import { SwatchRGB } from "../color-vNext/swatch"; -import { neutralFocus as neutralFocusNew } from "../color-vNext/recipes/neutral-focus"; +import { focusStrokeOuter as focusStrokeOuterNew } from "../color-vNext/recipes/focus-stroke"; describe('neutralFocus', (): void => { it('should return a string when invoked with an object', (): void => { @@ -26,7 +26,7 @@ describe("ensure parity between old and new recipe implementation", () => { const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); palette.swatches.forEach(( newSwatch, index ) => { it(`should be the same for ${newSwatch}`, () => { - expect(neutralFocus({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(neutralFocusNew( palette, newSwatch).toColorString().toUpperCase()) + expect(neutralFocus({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(focusStrokeOuterNew( palette, newSwatch).toColorString().toUpperCase()) }); }) }) diff --git a/packages/web-components/src/color/neutral-outline.spec.ts b/packages/web-components/src/color/neutral-outline.spec.ts index af942280a234c5..eb55a16a95ec7b 100644 --- a/packages/web-components/src/color/neutral-outline.spec.ts +++ b/packages/web-components/src/color/neutral-outline.spec.ts @@ -18,7 +18,7 @@ import { Swatch, SwatchFamily } from './common'; import { neutralBaseColor } from "./color-constants"; import { PaletteRGB } from "../color-vNext/palette"; import { SwatchRGB } from "../color-vNext/swatch"; -import { neutralOutline as neutralOutlineNew } from "../color-vNext/recipes/neutral-outline" +import { neutralStroke as neutralStrokeNew } from "../color-vNext/recipes/neutral-stroke" describe('neutralOutline', (): void => { const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); @@ -90,7 +90,7 @@ describe("ensure parity between old and new recipe implementation", () => { palette.swatches.forEach(( newSwatch, index ) => { const { neutralOutlineRestDelta, neutralOutlineHoverDelta, neutralOutlineFocusDelta, neutralOutlineActiveDelta } = DesignSystemDefaults; const oldValues = neutralOutline({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralOutlineNew( + const newValues = neutralStrokeNew( palette, newSwatch, neutralOutlineRestDelta, diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts index dc5a327f70b74f..b184f09f542d34 100644 --- a/packages/web-components/src/combobox/combobox.styles.ts +++ b/packages/web-components/src/combobox/combobox.styles.ts @@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element'; import { disabledCursor, focusVisible } from '@microsoft/fast-foundation'; import { selectFilledStyles, selectStyles } from '../select/select.styles'; import { appearanceBehavior } from '../utilities/behaviors'; -import { typeRampBaseFontSize, typeRampBaseLineHeight, outlineWidth } from '../design-tokens'; +import { typeRampBaseFontSize, typeRampBaseLineHeight, strokeWidth } from '../design-tokens'; export const comboboxStyles = (context, definition) => css` @@ -29,7 +29,7 @@ export const comboboxStyles = (context, definition) => color: inherit; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; - height: calc(100% - ${outlineWidth} * 1px)); + height: calc(100% - ${strokeWidth} * 1px)); margin: auto 0; width: 100%; } diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts index c95260883acadf..3ff2fddc68c472 100644 --- a/packages/web-components/src/data-grid/data-grid-cell.styles.ts +++ b/packages/web-components/src/data-grid/data-grid-cell.styles.ts @@ -3,11 +3,11 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { bodyFont, - cornerRadius, + controlCornerRadius, designUnit, - neutralFocus, - neutralForegroundRest, - outlineWidth, + focusStrokeOuter, + neutralForeground, + strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens'; @@ -16,16 +16,16 @@ export const dataGridCellStyles = (context, definition) => css` :host { padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px); - color: ${neutralForegroundRest}; + color: ${neutralForeground}; box-sizing: border-box; font-family: ${bodyFont}; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; font-weight: 400; - border: transparent calc(${outlineWidth} * 1px) solid; + border: transparent calc(${strokeWidth} * 1px) solid; overflow: hidden; white-space: nowrap; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); } :host(.column-header) { @@ -33,8 +33,8 @@ export const dataGridCellStyles = (context, definition) => } :host(:${focusVisible}) { - border: ${neutralFocus} calc(${outlineWidth} * 1px) solid; - color: ${neutralForegroundRest}; + border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid; + color: ${neutralForeground}; } `.withBehaviors( diff --git a/packages/web-components/src/data-grid/data-grid-row.styles.ts b/packages/web-components/src/data-grid/data-grid-row.styles.ts index 83e29e5bab857f..e585d50fe1d2a7 100644 --- a/packages/web-components/src/data-grid/data-grid-row.styles.ts +++ b/packages/web-components/src/data-grid/data-grid-row.styles.ts @@ -1,6 +1,6 @@ import { css } from '@microsoft/fast-element'; import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; -import { neutralFillRest, outlineWidth, neutralDivider } from '../design-tokens'; +import { neutralFillRest, strokeWidth, neutralStrokeDivider } from '../design-tokens'; export const dataGridRowStyles = (context, defintion) => css` @@ -9,7 +9,7 @@ export const dataGridRowStyles = (context, defintion) => padding: 1px 0; box-sizing: border-box; width: 100%; - border-bottom: calc(${outlineWidth} * 1px) solid ${neutralDivider}; + border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; } :host(.header) { diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index 40fb2b7b78f773..232f3263db891e 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -4,17 +4,19 @@ import { PaletteRGB } from './color-vNext/palette'; import { accentFill as accentFillAlgorithm } from './color-vNext/recipes/accent-fill'; import { accentForeground as accentForegroundAlgorithm } from './color-vNext/recipes/accent-foreground'; import { accentForegroundCut as accentForegroundCutAlgorithm } from './color-vNext/recipes/accent-foreground-cut'; -import { neutralContrastFill as neutralContrastFillAlgorithm } from './color-vNext/recipes/neutral-contrast-fill'; +import { neutralFillInverse as neutralFillInverseAlgorithm } from './color-vNext/recipes/neutral-fill-inverse'; import { neutralDivider as neutralDividerAlgorithm } from './color-vNext/recipes/neutral-divider'; import { SwatchRGB } from './color-vNext/swatch'; import { neutralFillCard as neutralFillCardAlgorithm } from './color-vNext/recipes/neutral-fill-card'; import { neutralFillInput as NeutralFillInputAlgorithm } from './color-vNext/recipes/neutral-fill-input'; import { neutralFillStealth as neutralFillStealthAlgorithm } from './color-vNext/recipes/neutral-fill-stealth'; -import { neutralFillToggle as neutralFillToggleAlgorithm } from './color-vNext/recipes/neutral-fill-toggle'; +import { neutralFillContrast as neutralFillContrastAlgorithm } from './color-vNext/recipes/neutral-fill-contrast'; import { neutralFill as neutralFillAlgorithm } from './color-vNext/recipes/neutral-fill'; -import { neutralFocus as neutralFocusAlgorithm } from './color-vNext/recipes/neutral-focus'; -import { neutralFocusInnerAccent as neutralFocusInnerAccentAlgorithm } from './color-vNext/recipes/neutral-focus-inner-accent'; -import { neutralOutline as NeutralOutlineAlgorithm } from './color-vNext/recipes/neutral-outline'; +import { + focusStrokeInner as focusStrokeInnerAlgorithm, + focusStrokeOuter as focusStrokeOuterAlgorithm, +} from './color-vNext/recipes/focus-stroke'; +import { neutralStroke as neutralStrokeAlgorithm } from './color-vNext/recipes/neutral-stroke'; import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color-vNext/recipes/neutral-foreground-hint'; import { neutralForeground as neutralForegroundAlgorithm } from './color-vNext/recipes/neutral-foreground'; import { neutralLayerFloating as neutralLayerFloatingAlgorithm } from './color-vNext/recipes/neutral-layer-floating'; @@ -31,7 +33,6 @@ export const accentFillRestDelta = create('accent-fill-rest-delta').with export const accentFillHoverDelta = create('accent-fill-hover-delta').withDefault(4); export const accentFillActiveDelta = create('accent-fill-active-delta').withDefault(-5); export const accentFillFocusDelta = create('accent-fill-focus-delta').withDefault(0); -export const accentFillSelectedDelta = create('accent-fill-selected-delta').withDefault(12); export const accentForegroundRestDelta = create('accent-foreground-rest-delta').withDefault(0); export const accentForegroundHoverDelta = create('accent-foreground-hover-delta').withDefault(6); @@ -42,49 +43,78 @@ export const bodyFont = create('body-font').withDefault('Segoe UI, sans- export const baseHeightMultiplier = create('base-height-multiplier').withDefault(8); export const baseHorizontalSpacingMultiplier = create('base-horizontal-spacing-multiplier').withDefault(3); export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode); -export const cornerRadius = create('corner-radius').withDefault(4); +export const controlCornerRadius = create('corner-radius').withDefault(4); +/** @deprecated */ +export const cornerRadius = controlCornerRadius; export const density = create('density').withDefault(0); export const designUnit = create('design-unit').withDefault(4); export const direction = create('direction').withDefault(Direction.ltr); export const disabledOpacity = create('disabled-opacity').withDefault(0.3); -export const elevatedCornerRadius = create('elevated-corner-radius').withDefault(4); -export const focusOutlineWidth = create('focus-outline-width').withDefault(2); - -export const neutralContrastFillRestDelta = create('neutral-contrast-fill-rest-delta').withDefault(0); -export const neutralContrastFillHoverDelta = create('neutral-contrast-fill-hover-delta').withDefault(-3); -export const neutralContrastFillActiveDelta = create('neutral-contrast-fill-active-delta').withDefault(7); -export const neutralContrastFillFocusDelta = create('neutral-contrast-fill-focus-delta').withDefault(0); - -export const neutralDividerRestDelta = create('neutral-divider-rest-delta').withDefault(8); +export const surfaceCornerRadius = create('elevated-corner-radius').withDefault(4); +/** @deprecated */ +export const elevatedCornerRadius = surfaceCornerRadius; +export const focusStrokeWidth = create('focus-stroke-width').withDefault(2); +/** @deprecated */ +export const focusOutlineWidth = focusStrokeWidth; + +export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0); +export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3); +export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7); +export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0); +/** @deprecated */ +export const neutralContrastFillRestDelta = neutralFillInverseRestDelta; +/** @deprecated */ +export const neutralContrastFillHoverDelta = neutralFillInverseHoverDelta; +/** @deprecated */ +export const neutralContrastFillActiveDelta = neutralFillInverseActiveDelta; +/** @deprecated */ +export const neutralContrastFillFocusDelta = neutralFillInverseFocusDelta; + +export const neutralStrokeDividerRestDelta = create('neutral-stroke-divider-rest-delta').withDefault(8); +/** @deprecated */ +export const neutralDividerRestDelta = neutralStrokeDividerRestDelta; export const neutralFillActiveDelta = create('neutral-fill-active-delta').withDefault(5); -export const neutralFillCardDelta = create('neutral-fill-card-delta').withDefault(3); +export const neutralFillCardRestDelta = create('neutral-fill-card-rest-delta').withDefault(3); +/** @deprecated */ +export const neutralFillCardDelta = neutralFillCardRestDelta; export const neutralFillFocusDelta = create('neutral-fill-focus-delta').withDefault(0); export const neutralFillHoverDelta = create('neutral-fill-hover-delta').withDefault(10); + export const neutralFillInputActiveDelta = create('neutral-fill-input-active-delta').withDefault(0); export const neutralFillInputFocusDelta = create('neutral-fill-input-focus-delta').withDefault(0); export const neutralFillInputHoverDelta = create('neutral-fill-input-hover-delta').withDefault(0); export const neutralFillInputRestDelta = create('neutral-fill-input-rest-delta').withDefault(0); -export const neutralFillInputSelectedDelta = create('neutral-fill-input-selected-delta').withDefault(0); + export const neutralFillRestDelta = create('neutral-fill-rest-delta').withDefault(7); -export const neutralFillSelectedDelta = create('neutral-fill-selected-delta').withDefault(7); + export const neutralFillStealthActiveDelta = create('neutral-fill-stealth-active-delta').withDefault(3); export const neutralFillStealthFocusDelta = create('neutral-fill-stealth-focus-delta').withDefault(0); export const neutralFillStealthHoverDelta = create('neutral-fill-stealth-hover-delta').withDefault(5); export const neutralFillStealthRestDelta = create('neutral-fill-stealth-rest-delta').withDefault(0); -export const neutralFillStealthSelectedDelta = create('neutral-fill-stealth-selected-delta').withDefault(7); -export const neutralFillToggleRestDelta = create('neutral-fill-toggle-rest-delta').withDefault(0); -export const neutralFillToggleActiveDelta = create('neutral-fill-toggle-active-delta').withDefault(-5); -export const neutralFillToggleFocusDelta = create('neutral-fill-toggle-focus-delta').withDefault(0); -export const neutralFillToggleHoverDelta = create('neutral-fill-toggle-hover-delta').withDefault(8); -export const neutralForegroundActiveDelta = create('neutral-foreground-active-delta').withDefault(0); -export const neutralForegroundFocusDelta = create('neutral-foreground-focus-delta').withDefault(0); -export const neutralForegroundHoverDelta = create('neutral-foreground-hover-delta').withDefault(0); -export const neutralOutlineActiveDelta = create('neutral-outline-active-delta').withDefault(16); -export const neutralOutlineFocusDelta = create('neutral-outline-focus-delta').withDefault(25); -export const neutralOutlineHoverDelta = create('neutral-outline-hover-delta').withDefault(40); -export const neutralOutlineRestDelta = create('neutral-outline-rest-delta').withDefault(25); -export const outlineWidth = create('outline-width').withDefault(1); + +export const neutralFillStrongRestDelta = create('neutral-fill-strong-rest-delta').withDefault(0); +export const neutralFillStrongActiveDelta = create('neutral-fill-strong-active-delta').withDefault(-5); +export const neutralFillStrongFocusDelta = create('neutral-fill-strong-focus-delta').withDefault(0); +export const neutralFillStrongHoverDelta = create('neutral-fill-strong-hover-delta').withDefault(8); +/** @deprecated */ +export const neutralFillToggleRestDelta = neutralFillStrongRestDelta; +/** @deprecated */ +export const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta; +/** @deprecated */ +export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta; +/** @deprecated */ +export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta; + +export const neutralStrokeActiveDelta = create('neutral-stroke-active-delta').withDefault(16); +export const neutralStrokeFocusDelta = create('neutral-stroke-focus-delta').withDefault(25); +export const neutralStrokeHoverDelta = create('neutral-stroke-hover-delta').withDefault(40); +export const neutralStrokeRestDelta = create('neutral-stroke-rest-delta').withDefault(25); + +export const strokeWidth = create('stroke-width').withDefault(1); +/** @deprecated */ +export const outlineWidth = strokeWidth; + export const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px'); export const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px'); export const typeRampMinus1FontSize = create('type-ramp-minus1-font-size').withDefault('12px'); @@ -106,6 +136,7 @@ export const typeRampPlus6LineHeight = create('type-ramp-plus6-line-heig export const neutralPalette = create('neutral-palette').withDefault(PaletteRGB.create(middleGrey)); export const accentPalette = create('accent-palette').withDefault(PaletteRGB.create(accentBase)); + export const fillColor = create('fill-color').withDefault(element => { const palette = neutralPalette.getValueFor(element); return palette.get(0); @@ -148,7 +179,6 @@ const accentFillByContrast = (contrast: number) => (element: HTMLElement, fill?: accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), - accentFillSelectedDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), @@ -170,9 +200,6 @@ export const accentFillActive = create('accent-fill-active').withDefa export const accentFillFocus = create('accent-fill-focus').withDefault((element: HTMLElement) => { return DI.findResponsibleContainer(element).get(AccentFill)(element).focus; }); -export const accentFillSelected = create('accent-fill-selected').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentFill)(element).selected; -}); const accentForegroundByContrast = (contrast: number) => (element: HTMLElement) => { return accentForegroundAlgorithm( @@ -196,7 +223,6 @@ export const AccentForeground = DI.createInterface< export const accentForegroundRest = create('accent-foreground-rest').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).rest, ); - export const accentForegroundHover = create('accent-foreground-hover').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).hover, ); @@ -208,18 +234,22 @@ export const accentForegroundFocus = create('accent-foreground-focus' ); // Neutral Divider -export const NeutralDivider = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-divider', builder => - builder.instance((element: HTMLElement) => - neutralDividerAlgorithm( - neutralPalette.getValueFor(element), - fillColor.getValueFor(element), - neutralDividerRestDelta.getValueFor(element), +export const NeutralStrokeDivider = DI.createInterface<(element: HTMLElement) => SwatchRGB>( + 'neutral-stroke-divider', + builder => + builder.instance((element: HTMLElement) => + neutralDividerAlgorithm( + neutralPalette.getValueFor(element), + fillColor.getValueFor(element), + neutralStrokeDividerRestDelta.getValueFor(element), + ), ), - ), ); -export const neutralDivider = create('neutral-divider').withDefault(element => - DI.findResponsibleContainer(element).get(NeutralDivider)(element), +export const neutralStrokeDivider = create('neutral-stroke-divider').withDefault(element => + DI.findResponsibleContainer(element).get(NeutralStrokeDivider)(element), ); +/** @deprecated */ +export const neutralDivider = neutralStrokeDivider; // Neutral Fill Card export const NeutralFillCard = DI.createInterface<(element: HTMLElement, fill?: SwatchRGB) => SwatchRGB>( @@ -229,7 +259,7 @@ export const NeutralFillCard = DI.createInterface<(element: HTMLElement, fill?: neutralFillCardAlgorithm( neutralPalette.getValueFor(element), fill || fillColor.getValueFor(element), - neutralFillCardDelta.getValueFor(element), + neutralFillCardRestDelta.getValueFor(element), ), ), ); @@ -237,37 +267,42 @@ export const neutralFillCard = create('neutral-fill-card').withDefaul DI.findResponsibleContainer(element).get(NeutralFillCard)(element), ); -// Neutral Contrast Fill -export const NeutralContrastFill = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-contrast-fill', builder => +// Neutral Fill Inverse +export const NeutralFillInverse = DI.createInterface< + (element: HTMLElement, fill?: SwatchRGB) => ReturnType +>('neutral-fill-inverse', builder => builder.instance((element: HTMLElement, fill?: SwatchRGB) => - neutralContrastFillAlgorithm( + neutralFillInverseAlgorithm( neutralPalette.getValueFor(element), fill || fillColor.getValueFor(element), - neutralContrastFillRestDelta.getValueFor(element), - neutralContrastFillHoverDelta.getValueFor(element), - neutralContrastFillActiveDelta.getValueFor(element), - neutralContrastFillFocusDelta.getValueFor(element), + neutralFillInverseRestDelta.getValueFor(element), + neutralFillInverseHoverDelta.getValueFor(element), + neutralFillInverseActiveDelta.getValueFor(element), + neutralFillInverseFocusDelta.getValueFor(element), ), ), ); -export const neutralContrastFillRest = create('neutral-contrast-fill-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralContrastFill)(element).rest, +export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).rest, ); - -export const neutralContrastFillHover = create('neutral-contrast-fill-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralContrastFill)(element).hover, +export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).hover, ); - -export const neutralContrastFillActive = create('neutral-contrast-fill-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralContrastFill)(element).active, +export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).active, ); - -export const neutralContrastFillFocus = create('neutral-contrast-fill-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralContrastFill)(element).focus, +export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).focus, ); +/** @deprecated */ +export const neutralContrastFillRest = neutralFillInverseRest; +/** @deprecated */ +export const neutralContrastFillHover = neutralFillInverseHover; +/** @deprecated */ +export const neutralContrastFillActive = neutralFillInverseActive; +/** @deprecated */ +export const neutralContrastFillFocus = neutralFillInverseFocus; // Neutral Fill Input export const NeutralFillInput = DI.createInterface< @@ -281,7 +316,6 @@ export const NeutralFillInput = DI.createInterface< neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element), - neutralFillInputSelectedDelta.getValueFor(element), ); }), ); @@ -292,16 +326,12 @@ export const neutralFillInputRest = create('neutral-fill-input-rest') export const neutralFillInputHover = create('neutral-fill-input-hover').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).hover, ); - export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).focus, ); export const neutralFillInputActive = create('neutral-fill-input-active').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).active, ); -export const neutralFillInputSelected = create('neutral-fill-input-selected').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).selected, -); // Neutral Fill Stealth export const NeutralFillStealth = DI.createInterface< @@ -315,7 +345,6 @@ export const NeutralFillStealth = DI.createInterface< neutralFillStealthHoverDelta.getValueFor(element), neutralFillStealthActiveDelta.getValueFor(element), neutralFillStealthFocusDelta.getValueFor(element), - neutralFillStealthSelectedDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), @@ -327,53 +356,54 @@ export const NeutralFillStealth = DI.createInterface< export const neutralFillStealthRest = create('neutral-fill-stealth-rest').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).rest, ); - export const neutralFillStealthHover = create('neutral-fill-stealth-hover').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).hover, ); - export const neutralFillStealthActive = create('neutral-fill-stealth-active').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).active, ); export const neutralFillStealthFocus = create('neutral-fill-stealth-focus').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).focus, ); -export const neutralFillStealthSelected = create('neutral-fill-stealth-selected').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).selected, -); -// Neutral Fill Toggle +// Neutral Fill Strong // TODO: none of these are actually used, do we need them? -export const NeutralFillToggle = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill-toggle', builder => +export const NeutralFillStrong = DI.createInterface< + (element: HTMLElement, fill?: SwatchRGB) => ReturnType +>('neutral-fill-strong', builder => builder.instance((element: HTMLElement, fill?: SwatchRGB) => - neutralFillToggleAlgorithm( + neutralFillContrastAlgorithm( neutralPalette.getValueFor(element), fill || fillColor.getValueFor(element), - neutralFillToggleRestDelta.getValueFor(element), - neutralFillToggleHoverDelta.getValueFor(element), - neutralFillToggleActiveDelta.getValueFor(element), - neutralFillToggleFocusDelta.getValueFor(element), + neutralFillStrongRestDelta.getValueFor(element), + neutralFillStrongHoverDelta.getValueFor(element), + neutralFillStrongActiveDelta.getValueFor(element), + neutralFillStrongFocusDelta.getValueFor(element), ), ), ); -export const neutralFillToggleRest = create('neutral-fill-toggle-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillToggle)(element).rest, +export const neutralFillStrongRest = create('neutral-fill-strong-rest').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).rest, ); - -export const neutralFillToggleHover = create('neutral-fill-toggle-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillToggle)(element).hover, +export const neutralFillStrongHover = create('neutral-fill-strong-hover').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).hover, ); - -export const neutralFillToggleActive = create('neutral-fill-toggle-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillToggle)(element).active, +export const neutralFillStrongActive = create('neutral-fill-strong-active').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).active, ); - -export const neutralFillToggleFocus = create('neutral-fill-toggle-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillToggle)(element).focus, +export const neutralFillStrongFocus = create('neutral-fill-strong-focus').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).focus, ); +/** @deprecated */ +export const neutralFillToggleRest = neutralFillStrongRest; +/** @deprecated */ +export const neutralFillToggleHover = neutralFillStrongHover; +/** @deprecated */ +export const neutralFillToggleActive = neutralFillStrongActive; +/** @deprecated */ +export const neutralFillToggleFocus = neutralFillStrongFocus; + // Neutral Fill export const NeutralFill = DI.createInterface< (element: HTMLElement, fill?: SwatchRGB) => ReturnType @@ -386,7 +416,6 @@ export const NeutralFill = DI.createInterface< neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element), - neutralFillSelectedDelta.getValueFor(element), ), ), ); @@ -402,36 +431,36 @@ export const neutralFillActive = create('neutral-fill-active').withDe export const neutralFillFocus = create('neutral-fill-focus').withDefault( (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).focus, ); -export const neutralFillSelected = create('neutral-fill-selected').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).selected, -); -// Neutral Focus -export const NeutralFocus = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-focus', builder => +// Focus Stroke Outer +export const FocusStrokeOuter = DI.createInterface<(element: HTMLElement) => SwatchRGB>('focus-stroke-outer', builder => builder.instance((element: HTMLElement) => - neutralFocusAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), + focusStrokeOuterAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), ), ); -export const neutralFocus = create('neutral-focus').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralFocus)(element), + +export const focusStrokeOuter = create('focus-stroke-outer').withDefault((element: HTMLElement) => + DI.findResponsibleContainer(element).get(FocusStrokeOuter)(element), ); +/** @deprecated */ +export const neutralFocus = focusStrokeOuter; -// Neutral Focus Inner Accent -export const NeutralFocusInnerAccent = DI.createInterface<(element: HTMLElement) => SwatchRGB>( - 'neutral-focus-inner-accent', - builder => - builder.instance((element: HTMLElement) => - neutralFocusInnerAccentAlgorithm( - accentPalette.getValueFor(element), - fillColor.getValueFor(element), - neutralFocus.getValueFor(element), - ), +// Focus Stroke Inner +export const FocusStrokeInner = DI.createInterface<(element: HTMLElement) => SwatchRGB>('focus-stroke-inner', builder => + builder.instance((element: HTMLElement) => + focusStrokeInnerAlgorithm( + accentPalette.getValueFor(element), + fillColor.getValueFor(element), + focusStrokeOuter.getValueFor(element), ), + ), ); -export const neutralFocusInnerAccent = create( - 'neutral-focus-inner-accent', -).withDefault((element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFocusInnerAccent)(element)); +export const focusStrokeInner = create('focus-stroke-inner').withDefault((element: HTMLElement) => + DI.findResponsibleContainer(element).get(FocusStrokeInner)(element), +); +/** @deprecated */ +export const neutralFocusInnerAccent = focusStrokeInner; // Neutral Foreground Hint export const NeutralForegroundHint = DI.createInterface<(element: HTMLElement) => SwatchRGB>( @@ -455,37 +484,39 @@ export const NeutralForeground = DI.createInterface< ), ); -export const neutralForegroundRest = create('neutral-foreground-rest').withDefault((element: HTMLElement) => +export const neutralForeground = create('neutral-foreground').withDefault((element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralForeground)(element), ); +/** @deprecated */ +export const neutralForegroundRest = neutralForeground; -// Neutral Outline -export const NeutralOutline = DI.createInterface<(element: HTMLElement) => ReturnType>( - 'neutral-outline', +// Neutral Stroke +export const NeutralStroke = DI.createInterface<(element: HTMLElement) => ReturnType>( + 'neutral-stroke', builder => builder.instance((element: HTMLElement) => - NeutralOutlineAlgorithm( + neutralStrokeAlgorithm( neutralPalette.getValueFor(element), fillColor.getValueFor(element), - neutralOutlineRestDelta.getValueFor(element), - neutralOutlineHoverDelta.getValueFor(element), - neutralOutlineActiveDelta.getValueFor(element), - neutralOutlineFocusDelta.getValueFor(element), + neutralStrokeRestDelta.getValueFor(element), + neutralStrokeHoverDelta.getValueFor(element), + neutralStrokeActiveDelta.getValueFor(element), + neutralStrokeFocusDelta.getValueFor(element), ), ), ); -export const neutralOutlineRest = create('neutral-outline-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralOutline)(element).rest, +export const neutralStrokeRest = create('neutral-stroke-rest').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).rest, ); -export const neutralOutlineHover = create('neutral-outline-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralOutline)(element).hover, +export const neutralStrokeHover = create('neutral-stroke-hover').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).hover, ); -export const neutralOutlineActive = create('neutral-outline-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralOutline)(element).active, +export const neutralStrokeActive = create('neutral-stroke-active').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).active, ); -export const neutralOutlineFocus = create('neutral-outline-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralOutline)(element).focus, +export const neutralStrokeFocus = create('neutral-stroke-focus').withDefault( + (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).focus, ); // Neutral Layer Floating @@ -496,7 +527,7 @@ export const NeutralLayerFloating = DI.createInterface<(element: HTMLElement) => neutralLayerFloatingAlgorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardDelta.getValueFor(element), + neutralFillCardRestDelta.getValueFor(element), ), ), ); @@ -522,7 +553,7 @@ export const NeutralLayerL2 = DI.createInterface<(element: HTMLElement) => Swatc neutralLayerL2Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardDelta.getValueFor(element), + neutralFillCardRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), @@ -540,7 +571,7 @@ export const NeutralLayerL3 = DI.createInterface<(element: HTMLElement) => Swatc neutralLayerL3Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardDelta.getValueFor(element), + neutralFillCardRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), @@ -558,7 +589,7 @@ export const NeutralLayerL4 = DI.createInterface<(element: HTMLElement) => Swatc neutralLayerL4Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardDelta.getValueFor(element), + neutralFillCardRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts index 36a3b18c5f38c1..9dc4b0448b0819 100644 --- a/packages/web-components/src/dialog/dialog.styles.ts +++ b/packages/web-components/src/dialog/dialog.styles.ts @@ -1,6 +1,6 @@ import { css } from '@microsoft/fast-element'; import { elevation } from '../styles'; -import { elevatedCornerRadius, fillColor, outlineWidth } from '../design-tokens'; +import { surfaceCornerRadius, fillColor, strokeWidth } from '../design-tokens'; export const dialogStyles = (context, definition) => css` :host([hidden]) { @@ -39,11 +39,11 @@ export const dialogStyles = (context, definition) => css` ${elevation} margin-top: auto; margin-bottom: auto; - border-radius: calc(${elevatedCornerRadius} * 1px); + border-radius: calc(${surfaceCornerRadius} * 1px); width: var(--dialog-width); height: var(--dialog-height); background: ${fillColor}; z-index: 1; - border: calc(${outlineWidth} * 1px) solid transparent; + border: calc(${strokeWidth} * 1px) solid transparent; } `; diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts index 16742c69fcc110..2cca71b8655331 100644 --- a/packages/web-components/src/divider/divider.styles.ts +++ b/packages/web-components/src/divider/divider.styles.ts @@ -1,6 +1,6 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; -import { designUnit, neutralDivider, outlineWidth } from '../design-tokens'; +import { designUnit, neutralStrokeDivider, strokeWidth } from '../design-tokens'; export const dividerStyles = (context, definition) => css` @@ -9,6 +9,6 @@ export const dividerStyles = (context, definition) => height: 0; margin: calc(${designUnit} * 1px) 0; border: none; - border-top: calc(${outlineWidth} * 1px) solid ${neutralDivider}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; } `; diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts index ad865a9228aff3..6adfa73b2bce09 100644 --- a/packages/web-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/src/flipper/flipper.styles.ts @@ -3,16 +3,16 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles'; import { - neutralForegroundRest, + neutralForeground, neutralFillStealthRest, - neutralOutlineRest, + neutralStrokeRest, disabledOpacity, neutralFillStealthHover, - neutralOutlineHover, - neutralFocus, + neutralStrokeHover, + focusStrokeOuter, neutralFillStealthActive, - neutralOutlineActive, - outlineWidth, + neutralStrokeActive, + strokeWidth, } from '../design-tokens'; export const flipperStyles = (context, definition) => @@ -25,7 +25,7 @@ export const flipperStyles = (context, definition) => margin: 0; position: relative; fill: currentcolor; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; background: transparent; border: none; outline: none; @@ -36,7 +36,7 @@ export const flipperStyles = (context, definition) => content: ""; opacity: 0.8; background: ${neutralFillStealthRest}; - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; border-radius: 50%; position: absolute; top: 0; @@ -67,7 +67,7 @@ export const flipperStyles = (context, definition) => :host(:hover)::before { background: ${neutralFillStealthHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host(:${focusVisible}) { @@ -75,13 +75,13 @@ export const flipperStyles = (context, definition) => } :host(:${focusVisible})::before { - box-shadow: 0 0 0 1px ${neutralFocus} inset; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; + border-color: ${focusStrokeOuter}; } :host(:active)::before { background: ${neutralFillStealthActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host::-moz-focus-inner { diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts index 94a30c256c4a1b..7cee0d6bb68a27 100644 --- a/packages/web-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts @@ -4,14 +4,14 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles/size'; import { bodyFont, - cornerRadius, - focusOutlineWidth, - neutralForegroundRest, + controlCornerRadius, + focusStrokeWidth, + neutralForeground, typeRampBaseFontSize, typeRampBaseLineHeight, designUnit, - neutralFocusInnerAccent, - neutralFocus, + focusStrokeInner, + focusStrokeOuter, accentFillHover, accentForegroundCut, accentFillActive, @@ -24,10 +24,10 @@ export const optionStyles = (context, definition) => css` ${display('inline-flex')} :host { font-family: ${bodyFont}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${focusOutlineWidth} * 1px) solid transparent; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${focusStrokeWidth} * 1px) solid transparent; box-sizing: border-box; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; fill: currentcolor; font-size: ${typeRampBaseFontSize}; @@ -43,8 +43,8 @@ export const optionStyles = (context, definition) => } :host(:${focusVisible}) { - box-shadow: 0 0 0 calc(${focusOutlineWidth} * 1px) inset ${neutralFocusInnerAccent}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner}; + border-color: ${focusStrokeOuter}; background: ${accentFillHover}; color: ${accentForegroundCut}; } @@ -61,12 +61,12 @@ export const optionStyles = (context, definition) => :host(:not([aria-selected="true"]):hover) { background: ${neutralFillHover}; - color: ${neutralForegroundRest}}; + color: ${neutralForeground}}; } :host(:not([aria-selected="true"]):active) { background: ${neutralFillActive}; - color: ${neutralForegroundRest}}; + color: ${neutralForeground}}; } :host([disabled]) { diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts index 6cdd20c1ddef57..1d689a40a22354 100644 --- a/packages/web-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/src/listbox/listbox.styles.ts @@ -3,28 +3,28 @@ import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsof import { SystemColors } from '@microsoft/fast-web-utilities'; import { neutralLayerFloating, - neutralOutlineRest, - neutralFocus, - outlineWidth, - cornerRadius, + neutralStrokeRest, + focusStrokeOuter, + strokeWidth, + controlCornerRadius, designUnit, - focusOutlineWidth, + focusStrokeWidth, } from '../design-tokens'; export const listboxStyles = (context, definition) => css` ${display('inline-flex')} :host { background: ${neutralLayerFloating}; - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; - border-radius: calc(${cornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; + border-radius: calc(${controlCornerRadius} * 1px); box-sizing: border-box; flex-direction: column; padding: calc(${designUnit} * 1px) 0; } :host(:focus-within:not([disabled])) { - border-color: ${neutralFocus}; - box-shadow: 0 0 0 1px ${neutralFocus} inset; + border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; } `.withBehaviors( forcedColorsStylesheetBehavior( @@ -32,7 +32,7 @@ export const listboxStyles = (context, definition) => :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { background: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc(${focusOutlineWidth} * 1px) inset ${SystemColors.HighlightText}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText}; color: ${SystemColors.HighlightText}; fill: currentcolor; } @@ -40,7 +40,7 @@ export const listboxStyles = (context, definition) => :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { background: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc(${focusOutlineWidth} * 1px) inset ${SystemColors.HighlightText}; + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText}; color: ${SystemColors.HighlightText}; fill: currentcolor; } diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts index 506fdc59ab3ff7..104db3d00eae50 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -4,18 +4,18 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles/index'; import { designUnit, - neutralForegroundRest, + neutralForeground, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, - cornerRadius, - outlineWidth, - neutralFocus, + controlCornerRadius, + strokeWidth, + focusStrokeOuter, neutralForegroundHint, neutralFillStealthHover, neutralFillStealthActive, disabledOpacity, - focusOutlineWidth, + focusStrokeWidth, } from '../design-tokens'; export const menuItemStyles = (context, definition) => @@ -34,13 +34,13 @@ export const menuItemStyles = (context, definition) => padding: 0; margin: 0 calc(${designUnit} * 1px); white-space: nowrap; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; fill: currentcolor; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid transparent; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid transparent; } :host(.indent-0) { @@ -77,8 +77,8 @@ export const menuItemStyles = (context, definition) => } :host(:${focusVisible}) { - border: calc(${outlineWidth} * 1px) solid ${neutralFocus}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}; } :host(:hover) { @@ -89,7 +89,7 @@ export const menuItemStyles = (context, definition) => :host(:active), :host(.expanded) { background: ${neutralFillStealthActive}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; } :host([disabled]) { @@ -131,7 +131,7 @@ export const menuItemStyles = (context, definition) => :host(:active) .start, :host(:active) .end, :host(:active)::slotted(svg) { - fill: ${neutralForegroundRest}; + fill: ${neutralForeground}; } :host(.indent-1[aria-haspopup="menu"]), @@ -186,7 +186,7 @@ export const menuItemStyles = (context, definition) => } :host .checkbox { - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); } :host .radio { @@ -210,7 +210,7 @@ export const menuItemStyles = (context, definition) => width: 100%; height: 100%; display: block; - fill: ${neutralForegroundRest}; + fill: ${neutralForeground}; pointer-events: none; } @@ -254,7 +254,7 @@ export const menuItemStyles = (context, definition) => :host(:${focusVisible}) { background: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc(${outlineWidth} * 1px) inset ${SystemColors.HighlightText}; + box-shadow: 0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText}; color: ${SystemColors.HighlightText}; fill: currentcolor; } diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 509f1ead795a97..6417fc0c9643db 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -3,11 +3,11 @@ import { display } from '@microsoft/fast-foundation'; import { elevation } from '../styles/index'; import { neutralLayerFloating, - outlineWidth, - elevatedCornerRadius, - cornerRadius, + strokeWidth, + surfaceCornerRadius, + controlCornerRadius, designUnit, - neutralDivider, + neutralStrokeDivider, } from '../design-tokens'; export const menuStyles = (context, definition) => @@ -15,11 +15,11 @@ export const menuStyles = (context, definition) => ${display('block')} :host { --elevation: 11; background: ${neutralLayerFloating}; - border: calc(${outlineWidth} * 1px) solid transparent; - border-radius: ${elevatedCornerRadius}; + border: calc(${strokeWidth} * 1px) solid transparent; + border-radius: ${surfaceCornerRadius}; ${elevation} margin: 0; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); padding: calc(${designUnit} * 1px) 0; max-width: 368px; min-width: 64px; @@ -35,6 +35,6 @@ export const menuStyles = (context, definition) => height: 0; margin: 0; border: none; - border-top: calc(${outlineWidth} * 1px) solid ${neutralDivider}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; } `; diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts index d01cb48638b4d5..d17b4cbb34f7d2 100644 --- a/packages/web-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/src/number-field/number-field.styles.ts @@ -6,19 +6,19 @@ import { appearanceBehavior } from '../utilities/behaviors'; import { neutralFillRest, neutralFillHover, - neutralForegroundRest, + neutralForeground, neutralFillInputRest, - neutralOutlineRest, - cornerRadius, - outlineWidth, + neutralStrokeRest, + controlCornerRadius, + strokeWidth, designUnit, typeRampBaseFontSize, typeRampBaseLineHeight, neutralFillInputHover, neutralFillInputActive, - neutralOutlineHover, - neutralOutlineActive, - neutralFocus, + neutralStrokeHover, + neutralStrokeActive, + focusStrokeOuter, disabledOpacity, bodyFont, } from '../design-tokens'; @@ -83,10 +83,10 @@ export const numberFieldStyles = (context, definition) => position: relative; display: flex; flex-direction: row; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; background: ${neutralFillInputRest}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; height: calc(${heightNumber} * 1px); } @@ -119,7 +119,7 @@ export const numberFieldStyles = (context, definition) => .label { display: block; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -151,11 +151,11 @@ export const numberFieldStyles = (context, definition) => } .step-up:before { - border-bottom-color: ${neutralForegroundRest}; + border-bottom-color: ${neutralForeground}; } .step-down:before { - border-top-color: ${neutralForegroundRest}; + border-top-color: ${neutralForeground}; } ::slotted(svg) { @@ -178,17 +178,17 @@ export const numberFieldStyles = (context, definition) => :host(:hover:not([disabled])) .root { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host(:active:not([disabled])) .root { background: ${neutralFillInputActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host(:focus-within:not([disabled])) .root { - border-color: ${neutralFocus}; - box-shadow: 0 0 0 1px ${neutralFocus} inset; + border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; } :host(:hover:not([disabled])) .controls, @@ -208,7 +208,7 @@ export const numberFieldStyles = (context, definition) => } :host([disabled]) .control { - border-color: ${neutralOutlineRest}; + border-color: ${neutralStrokeRest}; } `.withBehaviors( appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), diff --git a/packages/web-components/src/progress/progress/progress.styles.ts b/packages/web-components/src/progress/progress/progress.styles.ts index f7f2874a831ea5..b9181dfeb7b7c3 100644 --- a/packages/web-components/src/progress/progress/progress.styles.ts +++ b/packages/web-components/src/progress/progress/progress.styles.ts @@ -6,7 +6,7 @@ import { neutralFillRest, accentForegroundRest, neutralForegroundHint, - outlineWidth, + strokeWidth, } from '../../design-tokens'; export const progressStyles = (context, definition) => @@ -123,7 +123,7 @@ export const progressStyles = (context, definition) => } .progress { background-color: ${SystemColors.Field}; - border: calc(${outlineWidth} * 1px) solid ${SystemColors.FieldText}; + border: calc(${strokeWidth} * 1px) solid ${SystemColors.FieldText}; } :host(.paused) .indeterminate-indicator-1, .indeterminate-indicator-2 { diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts index b943f018e10cc0..c3fc485d58f504 100644 --- a/packages/web-components/src/radio/radio.styles.ts +++ b/packages/web-components/src/radio/radio.styles.ts @@ -4,15 +4,15 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } import { heightNumber } from '../styles'; import { designUnit, - outlineWidth, - neutralOutlineRest, + strokeWidth, + neutralStrokeRest, neutralFillInputRest, - neutralForegroundRest, + neutralForeground, neutralFillInputHover, - neutralOutlineHover, + neutralStrokeHover, neutralFillInputActive, - neutralOutlineActive, - neutralFocus, + neutralStrokeActive, + focusStrokeOuter, disabledOpacity, fillColor, } from '../design-tokens'; @@ -41,7 +41,7 @@ export const radioStyles = (context, definition) => height: calc(var(--input-size) * 1px); box-sizing: border-box; border-radius: 50%; - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; background: ${neutralFillInputRest}; outline: none; cursor: pointer; @@ -54,7 +54,7 @@ export const radioStyles = (context, definition) => .label { font-family: var(--body-font); - color: ${neutralForegroundRest}; + color: ${neutralForeground}; ${ /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ '' } padding-inline-start: calc(${designUnit} * 2px + 2px); @@ -76,25 +76,25 @@ export const radioStyles = (context, definition) => bottom: 5px; border-radius: 50%; display: inline-block; - background: ${neutralForegroundRest}; - fill: ${neutralForegroundRest}; + background: ${neutralForeground}; + fill: ${neutralForeground}; opacity: 0; pointer-events: none; } :host(:enabled) .control:hover{ background: ${neutralFillInputHover}; - border-color:${neutralOutlineHover}; + border-color:${neutralStrokeHover}; } :host(:enabled) .control:active { background:${neutralFillInputActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host(:${focusVisible}) .control { - box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter}; + border-color: ${focusStrokeOuter}; } :host(.disabled) .label, diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts index c29a3e51468993..47cdf9ee263beb 100644 --- a/packages/web-components/src/select/select.styles.ts +++ b/packages/web-components/src/select/select.styles.ts @@ -7,25 +7,25 @@ import { appearanceBehavior } from '../utilities/behaviors'; import { neutralFillRest, neutralFillHover, - neutralFocus, + focusStrokeOuter, neutralFillInputRest, - neutralOutlineRest, - neutralForegroundRest, + neutralStrokeRest, + neutralForeground, neutralLayerFloating, - outlineWidth, - cornerRadius, + strokeWidth, + controlCornerRadius, designUnit, typeRampBaseFontSize, typeRampBaseLineHeight, neutralFillInputHover, - neutralOutlineHover, - neutralFocusInnerAccent, + neutralStrokeHover, + focusStrokeInner, accentFillHover, accentForegroundCut, disabledOpacity, neutralFillStealthRest, neutralFillInputActive, - neutralOutlineActive, + neutralStrokeActive, bodyFont, } from '../design-tokens'; @@ -41,7 +41,7 @@ export const selectFilledStyles = (context, definition) => css` } :host([appearance="filled"]:${focusVisible}) { - border-color: ${neutralFocus}; + border-color: ${focusStrokeOuter}; } `; @@ -50,10 +50,10 @@ export const selectStyles = (context, definition) => ${display('inline-flex')} :host { --elevation: 14; background: ${neutralFillInputRest}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; box-sizing: border-box; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; font-family: ${bodyFont}; height: calc(${heightNumber} * 1px); position: relative; @@ -65,7 +65,7 @@ export const selectStyles = (context, definition) => .listbox { ${elevation} background: ${neutralLayerFloating}; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); box-sizing: border-box; display: inline-flex; flex-direction: column; @@ -98,7 +98,7 @@ export const selectStyles = (context, definition) => :host(:not([disabled]):hover) { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host(:focus) { @@ -106,21 +106,21 @@ export const selectStyles = (context, definition) => } :host(:${focusVisible}) { - border-color: ${neutralFocus}; + border-color: ${focusStrokeOuter}; outline: none; box-shadow: - 0 0 0 1px inset ${neutralFocus}; + 0 0 0 1px inset ${focusStrokeOuter}; } :host([open]:${focusVisible}) { - border-color: ${neutralOutlineRest}; + border-color: ${neutralStrokeRest}; outline: none; box-shadow: none; } :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) { - box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccent}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${focusStrokeInner}; + border-color: ${focusStrokeOuter}; background: ${accentFillHover}; color: ${accentForegroundCut}; } @@ -137,13 +137,13 @@ export const selectStyles = (context, definition) => :host([disabled]:hover) { background: ${neutralFillStealthRest}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; fill: currentcolor; } :host(:not([disabled])) .control:active { background: ${neutralFillInputActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host([open][position="above"]) .listbox, diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts index 90eb47f25f6931..610145e35baf98 100644 --- a/packages/web-components/src/skeleton/skeleton.styles.ts +++ b/packages/web-components/src/skeleton/skeleton.styles.ts @@ -1,6 +1,6 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; -import { cornerRadius, neutralFillRest } from '../design-tokens'; +import { controlCornerRadius, neutralFillRest } from '../design-tokens'; export const skeletonStyles = (context, definition) => css` @@ -20,7 +20,7 @@ export const skeletonStyles = (context, definition) => } :host(.rect) { - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); } :host(.circle) { diff --git a/packages/web-components/src/slider-label/slider-label.styles.ts b/packages/web-components/src/slider-label/slider-label.styles.ts index 632ee9a7e1e175..7abdcfe6765b59 100644 --- a/packages/web-components/src/slider-label/slider-label.styles.ts +++ b/packages/web-components/src/slider-label/slider-label.styles.ts @@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { heightNumber } from '../styles'; -import { bodyFont, neutralOutlineRest, designUnit, disabledOpacity } from '../design-tokens'; +import { bodyFont, neutralStrokeRest, designUnit, disabledOpacity } from '../design-tokens'; export const sliderLabelStyles = (context, definition) => css` @@ -47,7 +47,7 @@ export const sliderLabelStyles = (context, definition) => .mark { width: calc((${designUnit} / 2) * 1px); height: calc(${heightNumber} * 0.25 * 1px); - background: ${neutralOutlineRest}; + background: ${neutralStrokeRest}; justify-self: center; } :host(.vertical) .mark { diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts index 80a1b5e9b24d29..6ee7be50a371b5 100644 --- a/packages/web-components/src/slider/slider.styles.ts +++ b/packages/web-components/src/slider/slider.styles.ts @@ -4,13 +4,13 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } import { heightNumber } from '../styles'; import { designUnit, - cornerRadius, - neutralFocus, - neutralForegroundRest, - neutralOutlineHover, - neutralOutlineActive, + controlCornerRadius, + focusStrokeOuter, + neutralForeground, + neutralStrokeHover, + neutralStrokeActive, density, - neutralOutlineRest, + neutralStrokeRest, disabledOpacity, fillColor, } from '../design-tokens'; @@ -27,7 +27,7 @@ export const sliderStyles = (context, defintion) => margin: calc(${designUnit} * 1px) 0; user-select: none; box-sizing: border-box; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); outline: none; cursor: pointer; } @@ -45,7 +45,7 @@ export const sliderStyles = (context, defintion) => grid-template-columns: calc(var(--thumb-size) * 1px) 1fr; } :host(:${focusVisible}) .thumb-cursor { - box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus}; + box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter}; } .thumb-container { position: absolute; @@ -57,16 +57,16 @@ export const sliderStyles = (context, defintion) => border: none; width: calc(var(--thumb-size) * 1px); height: calc(var(--thumb-size) * 1px); - background: ${neutralForegroundRest}; + background: ${neutralForeground}; border-radius: 50%; } .thumb-cursor:hover { - background: ${neutralForegroundRest};; - border-color: ${neutralOutlineHover}; + background: ${neutralForeground};; + border-color: ${neutralStrokeHover}; } .thumb-cursor:active { - background: ${neutralForegroundRest}; - border-color: ${neutralOutlineActive}; + background: ${neutralForeground}; + border-color: ${neutralStrokeActive}; } :host(.horizontal) .thumb-container { transform: translateX(calc(var(--thumb-translate) * 1px)); @@ -92,7 +92,7 @@ export const sliderStyles = (context, defintion) => height: 100%; } .track { - background: ${neutralOutlineRest}; + background: ${neutralStrokeRest}; position: absolute; } :host(.vertical) { diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts index 5de2d0805d03cf..338eaedda144dc 100644 --- a/packages/web-components/src/styles/patterns/button.ts +++ b/packages/web-components/src/styles/patterns/button.ts @@ -4,28 +4,28 @@ import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsof import { heightNumber } from '../size'; import { neutralFillRest, - neutralForegroundRest, + neutralForeground, typeRampBaseFontSize, typeRampBaseLineHeight, - cornerRadius, + controlCornerRadius, designUnit, density, - outlineWidth, + strokeWidth, neutralFillHover, neutralFillActive, - neutralFocus, - focusOutlineWidth, + focusStrokeOuter, + focusStrokeWidth, accentFillRest, accentForegroundCut, accentFillHover, accentFillActive, - neutralFocusInnerAccent, + focusStrokeInner, accentForegroundRest, accentForegroundHover, accentForegroundActive, - neutralOutlineRest, - neutralOutlineHover, - neutralOutlineActive, + neutralStrokeRest, + neutralStrokeHover, + neutralStrokeActive, neutralFillStealthRest, neutralFillStealthHover, neutralFillStealthActive, @@ -45,8 +45,8 @@ export const baseButtonStyles = (context, definition) => height: calc(${heightNumber} * 1px); min-width: calc(${heightNumber} * 1px); background-color: ${neutralFillRest}; - color: ${neutralForegroundRest}; - border-radius: calc(${cornerRadius} * 1px); + color: ${neutralForeground}; + border-radius: calc(${controlCornerRadius} * 1px); fill: currentcolor; cursor: pointer; } @@ -63,7 +63,7 @@ export const baseButtonStyles = (context, definition) => white-space: nowrap; outline: none; text-decoration: none; - border: calc(${outlineWidth} * 1px) solid transparent; + border: calc(${strokeWidth} * 1px) solid transparent; color: inherit; border-radius: inherit; fill: inherit; @@ -91,8 +91,8 @@ export const baseButtonStyles = (context, definition) => } .control:${focusVisible} { - border: calc(${outlineWidth} * 1px) solid ${neutralFocus}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}; } .control::-moz-focus-inner { @@ -149,7 +149,7 @@ export const baseButtonStyles = (context, definition) => forced-color-adjust: none; background-color: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${SystemColors.ButtonText}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.ButtonText}; color: ${SystemColors.HighlightText}; } @@ -196,7 +196,7 @@ export const AccentButtonStyles = css` } :host([appearance="accent"]) .control:${focusVisible} { - box-shadow: 0 0 0 calc(${focusOutlineWidth} * 1px) inset ${neutralFocusInnerAccent}, 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus} + box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner}, 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} } `.withBehaviors( forcedColorsStylesheetBehavior( @@ -268,7 +268,7 @@ export const HypertextStyles = css` :host([appearance="hypertext"]) .control:visited { background: transparent; color: ${accentForegroundRest}; - border-bottom: calc(${outlineWidth} * 1px) solid ${accentForegroundRest}; + border-bottom: calc(${strokeWidth} * 1px) solid ${accentForegroundRest}; } :host([appearance="hypertext"]) .control:hover { border-bottom-color: ${accentForegroundHover}; @@ -277,8 +277,8 @@ export const HypertextStyles = css` border-bottom-color: ${accentForegroundActive}; } :host([appearance="hypertext"]) .control:${focusVisible} { - border-bottom: calc(${focusOutlineWidth} * 1px) solid ${neutralFocus}; - margin-bottom: calc(calc(${outlineWidth} - ${focusOutlineWidth}) * 1px); + border-bottom: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter}; + margin-bottom: calc(calc(${strokeWidth} - ${focusStrokeWidth}) * 1px); } `.withBehaviors( forcedColorsStylesheetBehavior( @@ -323,7 +323,7 @@ export const LightweightButtonStyles = css` :host([appearance="lightweight"]) .content::before { content: ""; display: block; - height: calc(${outlineWidth} * 1px); + height: calc(${strokeWidth} * 1px); position: absolute; top: calc(1em + 3px); width: 100%; @@ -338,8 +338,8 @@ export const LightweightButtonStyles = css` } :host([appearance="lightweight"]) .control:${focusVisible} .content::before { - background: ${neutralForegroundRest}; - height: calc(${focusOutlineWidth} * 1px); + background: ${neutralForeground}; + height: calc(${focusStrokeWidth} * 1px); } `.withBehaviors( forcedColorsStylesheetBehavior( @@ -379,15 +379,15 @@ export const LightweightButtonStyles = css` export const OutlineButtonStyles = css` :host([appearance="outline"]) { background: transparent; - border-color: ${neutralOutlineRest}; + border-color: ${neutralStrokeRest}; } :host([appearance="outline"]:hover) { - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host([appearance="outline"]:active) { - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host([appearance="outline"]) .control { @@ -395,8 +395,8 @@ export const OutlineButtonStyles = css` } :host([appearance="outline"]) .control:${focusVisible} { - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}; + border-color: ${focusStrokeOuter}; } `.withBehaviors( forcedColorsStylesheetBehavior( diff --git a/packages/web-components/src/styles/patterns/input.ts b/packages/web-components/src/styles/patterns/input.ts index b55798d3b565fa..90276f4f065f77 100644 --- a/packages/web-components/src/styles/patterns/input.ts +++ b/packages/web-components/src/styles/patterns/input.ts @@ -1,6 +1,6 @@ import { css, ElementStyles } from '@microsoft/fast-element'; import { accentFillRestBehavior } from '../behaviors'; -import { focusOutlineWidth, accentFillRest, cornerRadius } from '../../design-tokens'; +import { focusStrokeWidth, accentFillRest, controlCornerRadius } from '../../design-tokens'; /** * @internal @@ -11,9 +11,9 @@ export const fillStateStyles = (context, definition) => css` content: ''; position: absolute; bottom: 0; - border-bottom: calc(${focusOutlineWidth} * 1px) solid ${accentFillRest}; - border-bottom-left-radius: calc(${cornerRadius} * 1px); - border-bottom-right-radius: calc(${cornerRadius} * 1px); + border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest}; + border-bottom-left-radius: calc(${controlCornerRadius} * 1px); + border-bottom-right-radius: calc(${controlCornerRadius} * 1px); z-index: 2; transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1); } diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts index 313e4906389345..bdda5347bdb23c 100644 --- a/packages/web-components/src/switch/switch.styles.ts +++ b/packages/web-components/src/switch/switch.styles.ts @@ -7,14 +7,14 @@ import { designUnit, disabledOpacity, neutralFillInputRest, - neutralOutlineRest, + neutralStrokeRest, neutralFillInputHover, - neutralOutlineHover, + neutralStrokeHover, neutralFillInputActive, - neutralOutlineActive, - neutralFocus, - neutralForegroundRest, - outlineWidth, + neutralStrokeActive, + focusStrokeOuter, + neutralForeground, + strokeWidth, accentForegroundCut, accentFillRest, accentFillHover, @@ -62,23 +62,23 @@ export const switchStyles = (context, defintiion) => height: calc(((${heightNumber} / 2) + ${designUnit}) * 1px); background: ${neutralFillInputRest}; border-radius: calc(${heightNumber} * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; } :host(:enabled) .switch:hover { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; cursor: pointer; } :host(:enabled) .switch:active { background: ${neutralFillInputActive}; - border-color: ${neutralOutlineActive}; + border-color: ${neutralStrokeActive}; } :host(:${focusVisible}) .switch { - box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus}; - border-color: ${neutralFocus}; + box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter}; + border-color: ${focusStrokeOuter}; } .checked-indicator { @@ -86,13 +86,13 @@ export const switchStyles = (context, defintiion) => height: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px); width: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px); top: calc(${designUnit} * 1px); - background: ${neutralForegroundRest}; + background: ${neutralForeground}; border-radius: 50%; transition: all 0.2s ease-in-out; } .status-message { - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -104,7 +104,7 @@ export const switchStyles = (context, defintiion) => } .label { - color: ${neutralForegroundRest}; + color: ${neutralForeground}; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; margin-inline-end: calc(${designUnit} * 2px + 2px); @@ -134,7 +134,7 @@ export const switchStyles = (context, defintiion) => } :host([aria-checked="true"]:${focusVisible}:enabled) .switch { - box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus}; + box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter}; border-color: transparent; } diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts index 4a7753cf59f635..8e4e94c7223504 100644 --- a/packages/web-components/src/tabs/tab/tab.styles.ts +++ b/packages/web-components/src/tabs/tab/tab.styles.ts @@ -8,11 +8,11 @@ import { bodyFont, designUnit, density, - neutralForegroundRest, - cornerRadius, - outlineWidth, - neutralFocus, - focusOutlineWidth, + neutralForeground, + controlCornerRadius, + strokeWidth, + focusStrokeOuter, + focusStrokeWidth, } from '../../design-tokens'; export const tabStyles = (context, definition) => @@ -25,9 +25,9 @@ export const tabStyles = (context, definition) => line-height: ${typeRampBaseLineHeight}; height: calc(${heightNumber} * 1px); padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px); - color: ${neutralForegroundRest}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid transparent; + color: ${neutralForeground}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid transparent; align-items: center; justify-content: center; grid-row: 1; @@ -40,14 +40,14 @@ export const tabStyles = (context, definition) => :host(:hover), :host(:active) { - color: ${neutralForegroundRest}; + color: ${neutralForeground}; } :host(:${focusVisible}) { outline: none; - border: calc(${outlineWidth} * 1px) solid ${neutralFocus}; - box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) - ${neutralFocus}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) + ${focusStrokeOuter}; } :host(:focus) { @@ -65,7 +65,7 @@ export const tabStyles = (context, definition) => :host(.vertical:hover), :host(.vertical:active) { - color: ${neutralForegroundRest}; + color: ${neutralForeground}; } :host(.vertical:hover[aria-selected="true"]) { diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts index 5640fdcbb30735..5319ffca7d8224 100644 --- a/packages/web-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/src/tabs/tabs.styles.ts @@ -5,9 +5,9 @@ import { bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, - cornerRadius, + controlCornerRadius, accentFillRest, - neutralForegroundRest, + neutralForeground, } from '../design-tokens'; export const tabsStyles = (context, definition) => @@ -17,7 +17,7 @@ export const tabsStyles = (context, definition) => font-family: ${bodyFont}; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; } @@ -41,7 +41,7 @@ export const tabsStyles = (context, definition) => grid-column: 1; width: 20px; height: 3px; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); justify-self: center; background: ${accentFillRest}; } @@ -89,7 +89,7 @@ export const tabsStyles = (context, definition) => grid-row: 1; width: 3px; height: 20px; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); align-self: center; background: ${accentFillRest}; } diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts index 075a217845f4b2..b76e5c94d397d9 100644 --- a/packages/web-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/src/text-area/text-area.styles.ts @@ -6,13 +6,13 @@ import { appearanceBehavior } from '../utilities/behaviors'; import { neutralFillRest, neutralFillHover, - neutralForegroundRest, + neutralForeground, neutralFillInputRest, - neutralOutlineRest, + neutralStrokeRest, neutralFillInputHover, - neutralOutlineHover, - neutralFocus, - outlineWidth, + neutralStrokeHover, + focusStrokeOuter, + strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, designUnit, @@ -65,10 +65,10 @@ export const textAreaStyles = (context, definition) => .control { box-sizing: border-box; position: relative; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; background: ${neutralFillInputRest}; border-radius: calc(var(--corner-radius) * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; height: calc(${heightNumber} * 2px); font: inherit; font-size: ${typeRampBaseFontSize}; @@ -80,7 +80,7 @@ export const textAreaStyles = (context, definition) => .control:hover:enabled { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } .control:hover, @@ -91,8 +91,8 @@ export const textAreaStyles = (context, definition) => } :host(:focus-within) .control { - border-color: ${neutralFocus}; - box-shadow: 0 0 0 1px ${neutralFocus} inset; + border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; } :host(.resize-both) .control { @@ -114,7 +114,7 @@ export const textAreaStyles = (context, definition) => .label { display: block; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; $font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts index f60d3619f8ba80..1101e801857e4a 100644 --- a/packages/web-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/src/text-field/text-field.styles.ts @@ -7,16 +7,16 @@ import { neutralFillRest, neutralFillHover, bodyFont, - neutralForegroundRest, + neutralForeground, neutralFillInputRest, - cornerRadius, - outlineWidth, - neutralOutlineRest, + controlCornerRadius, + strokeWidth, + neutralStrokeRest, typeRampBaseFontSize, typeRampBaseLineHeight, neutralFillInputHover, - neutralOutlineHover, - neutralFocus, + neutralStrokeHover, + focusStrokeOuter, disabledOpacity, } from '../design-tokens'; @@ -79,10 +79,10 @@ export const textFieldStyles = (context, definition) => position: relative; display: flex; flex-direction: row; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; background: ${neutralFillInputRest}; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest}; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; height: calc(${heightNumber} * 1px); } @@ -96,7 +96,7 @@ export const textFieldStyles = (context, definition) => margin-bottom: auto; border: none; padding: 0 calc(var(--design-unit) * 2px + 1px); - color: ${neutralForegroundRest}; + color: ${neutralForeground}; font-family: inherit; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -111,7 +111,7 @@ export const textFieldStyles = (context, definition) => .label { display: block; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -146,12 +146,12 @@ export const textFieldStyles = (context, definition) => :host(:hover:not(.disabled)) .root { background: ${neutralFillInputHover}; - border-color: ${neutralOutlineHover}; + border-color: ${neutralStrokeHover}; } :host(:focus-within:not(.disabled)) .root { - border-color: ${neutralFocus}; - box-shadow: 0 0 0 1px ${neutralFocus} inset; + border-color: ${focusStrokeOuter}; + box-shadow: 0 0 0 1px ${focusStrokeOuter} inset; } :host(.disabled) .label, diff --git a/packages/web-components/src/tooltip/index.ts b/packages/web-components/src/tooltip/index.ts index 536817febfed05..44addb1960bdae 100644 --- a/packages/web-components/src/tooltip/index.ts +++ b/packages/web-components/src/tooltip/index.ts @@ -1,5 +1,5 @@ import { DI, Tooltip as FoundationTooltip, tooltipTemplate as template } from '@microsoft/fast-foundation'; -import { fillColor, NeutralContrastFill } from '../design-tokens'; +import { fillColor, NeutralFillInverse } from '../design-tokens'; import { tooltipStyles as styles } from './tooltip.styles'; /** @@ -13,7 +13,7 @@ export class Tooltip extends FoundationTooltip { public connectedCallback(): void { super.connectedCallback(); - const recipe = DI.findResponsibleContainer(this.parentElement!).get(NeutralContrastFill); + const recipe = DI.findResponsibleContainer(this.parentElement!).get(NeutralFillInverse); const parentFill = fillColor.getValueFor(this.parentElement!); fillColor.setValueFor(this, (target: HTMLElement) => recipe(target, parentFill).rest); diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts index 171e396fcc78e4..8b76184dd67688 100644 --- a/packages/web-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/src/tooltip/tooltip.styles.ts @@ -2,9 +2,9 @@ import { css } from '@microsoft/fast-element'; import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { elevation } from '../styles/index'; import { - cornerRadius, - outlineWidth, - neutralForegroundRest, + controlCornerRadius, + strokeWidth, + neutralForeground, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -25,10 +25,10 @@ export const tooltipStyles = (context, definition) => .tooltip { box-sizing: border-box; - border-radius: calc(${cornerRadius} * 1px); - border: calc(${outlineWidth} * 1px) solid transparent; + border-radius: calc(${controlCornerRadius} * 1px); + border: calc(${strokeWidth} * 1px) solid transparent; background: ${fillColor}; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; padding: 4px 12px; height: fit-content; width: fit-content; @@ -60,7 +60,7 @@ export const tooltipStyles = (context, definition) => width: 12px; height: 12px; background: ${fillColor}; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); position: absolute; } diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts index 53ac435685f087..f5de768aa359f1 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -10,24 +10,24 @@ import { import { SystemColors } from '@microsoft/fast-web-utilities'; import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index'; import { - focusOutlineWidth, baseHeightMultiplier, designUnit, density, - neutralForegroundRest, + neutralForeground, neutralFillStealthRest, bodyFont, - neutralFocus, + focusStrokeOuter, typeRampBaseFontSize, typeRampBaseLineHeight, disabledOpacity, accentForegroundRest, - cornerRadius, - outlineWidth, + controlCornerRadius, + strokeWidth, neutralFillStealthHover, neutralFillStealthActive, - neutralFillStealthSelected, NeutralFillStealth, + neutralFillRest, + NeutralFill, } from '../design-tokens'; import { SwatchRGB } from '../color-vNext/swatch'; @@ -73,8 +73,9 @@ const expandCollapseHoverBehavior = DesignToken.create('tree-item-exp const selectedExpandCollapseHoverBehavior = DesignToken.create( 'tree-item-expand-collapse-selected-hover', ).withDefault((target: HTMLElement) => { - const recipe = DI.findResponsibleContainer(target).get(NeutralFillStealth); - return recipe(target, recipe(target).hover).selected; + const baseRecipe = DI.findResponsibleContainer(target).get(NeutralFill); + const buttonRecipe = DI.findResponsibleContainer(target).get(NeutralFillStealth); + return buttonRecipe(target, baseRecipe(target).rest).hover; }); export const treeItemStyles = (context, definition) => @@ -83,7 +84,7 @@ export const treeItemStyles = (context, definition) => contain: content; position: relative; outline: none; - color: ${neutralForegroundRest}; + color: ${neutralForeground}; background: ${neutralFillStealthRest}; cursor: pointer; font-family: ${bodyFont}; @@ -103,14 +104,14 @@ export const treeItemStyles = (context, definition) => display: flex; position: relative; box-sizing: border-box; - border: calc(${outlineWidth} * 1px) solid transparent; + border: calc(${strokeWidth} * 1px) solid transparent; height: calc((${heightNumber} + 1) * 1px); } :host(:${focusVisible}) .positioning-region { - border: calc(${outlineWidth} * 1px) solid ${neutralFocus}; - border-radius: calc(${cornerRadius} * 1px); - color: ${neutralForegroundRest}; + border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; + border-radius: calc(${controlCornerRadius} * 1px); + color: ${neutralForeground}; } .positioning-region::before { @@ -171,7 +172,7 @@ export const treeItemStyles = (context, definition) => transition: transform 0.1s linear; transform: rotate(-45deg); pointer-events: none; - fill: ${neutralForegroundRest}; + fill: ${neutralForeground}; } .start, .end { @@ -224,7 +225,7 @@ export const treeItemStyles = (context, definition) => } :host([selected]) .positioning-region { - background: ${neutralFillStealthSelected}; + background: ${neutralFillRest}; } :host([selected]) .expand-collapse-button:hover { @@ -242,7 +243,7 @@ export const treeItemStyles = (context, definition) => /* The french fry background needs to be calculated based on the selected background state for this control. We currently have no way of chaning that, so setting to accent-foreground-rest for the time being */ '' } background: ${accentForegroundRest}; - border-radius: calc(${cornerRadius} * 1px); + border-radius: calc(${controlCornerRadius} * 1px); } ::slotted(fluent-tree-item) {