diff --git a/change/@fluentui-web-components-31ded262-0d0f-44d5-a7a0-337d99eb5a53.json b/change/@fluentui-web-components-31ded262-0d0f-44d5-a7a0-337d99eb5a53.json new file mode 100644 index 0000000000000..ca555e579765b --- /dev/null +++ b/change/@fluentui-web-components-31ded262-0d0f-44d5-a7a0-337d99eb5a53.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Migrated recipes from DI to Design Tokens Renamed neutralForeground back to neutralForegroundRest Removed the \"L\" from layer names Added some typing and made `RGB` type imports less specific", + "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 14f0926317f7e..e45f567e6e2fe 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,10 +6,10 @@ import { bodyFont, density, designUnit, - focusStrokeWidth, - neutralStrokeDivider, focusStrokeOuter, - neutralForeground, + focusStrokeWidth, + neutralForegroundRest, + neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, @@ -24,7 +24,7 @@ export const accordionItemStyles = (context, definition) => flex-direction: column; font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; - border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; + border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}; } .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: ${neutralForeground}; + color: ${neutralForegroundRest}; cursor: pointer; font-family: inherit; } .button:hover, .button:active { - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } .button::before { diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts index 5c651d928457e..9014c76a0e411 100644 --- a/packages/web-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/src/accordion/accordion.styles.ts @@ -2,8 +2,8 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { bodyFont, - neutralStrokeDivider, - neutralForeground, + neutralForegroundRest, + neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, @@ -17,7 +17,7 @@ export const accordionStyles = (context, definition) => font-family: ${bodyFont}; font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; - color: ${neutralForeground}; - border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; + color: ${neutralForegroundRest}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}; } `; diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts index 61869fa894c45..6fc5716db5819 100644 --- a/packages/web-components/src/badge/badge.styles.ts +++ b/packages/web-components/src/badge/badge.styles.ts @@ -5,7 +5,7 @@ import { bodyFont, controlCornerRadius, designUnit, - neutralForeground, + neutralForegroundRest, typeRampMinus1FontSize, typeRampMinus1LineHeight, neutralFillRest, @@ -28,7 +28,7 @@ export const badgeStyles = (context, definition) => :host(.lightweight) .control { background: transparent; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; font-weight: 600; } @@ -39,6 +39,6 @@ export const badgeStyles = (context, definition) => :host(.neutral) .control { background: ${neutralFillRest}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } `; 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 49b75ab0d0110..9f4f8d5bce881 100644 --- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts +++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts @@ -7,7 +7,7 @@ import { accentForegroundRest, bodyFont, focusStrokeWidth, - neutralForeground, + neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -76,20 +76,20 @@ export const breadcrumbItemStyles = (context, definition) => } .control:${focusVisible} .content::before { - background: ${neutralForeground}; + background: ${neutralForegroundRest}; height: calc(${focusStrokeWidth} * 1px); } :host(:not([href])), :host([aria-current]) .control { font-weight: 600; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; fill: currentcolor; cursor: default; } :host([aria-current]) .control:hover .content::before { - background: ${neutralForeground}; + background: ${neutralForegroundRest}; } .start { @@ -104,7 +104,7 @@ export const breadcrumbItemStyles = (context, definition) => .separator { display: flex; - fill: ${neutralForeground}; + fill: ${neutralForegroundRest}; margin: 0 6px; } `.withBehaviors( diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index 9dd0727f4360e..b1a56ff6ffea2 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 { surfaceCornerRadius } from '../design-tokens'; +import { layerCornerRadius } 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(${surfaceCornerRadius} * 1px); + border-radius: calc(${layerCornerRadius} * 1px); ${elevation} } diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts index 1a8541b8c1936..ddfbde9388c9c 100644 --- a/packages/web-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/src/checkbox/checkbox.styles.ts @@ -9,7 +9,7 @@ import { neutralStrokeRest, neutralFillInputRest, bodyFont, - neutralForeground, + neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, neutralFillInputHover, @@ -54,7 +54,7 @@ export const checkboxStyles = (context, definition) => .label { font-family: ${bodyFont}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; ${ /* 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: ${neutralForeground}; + fill: ${neutralForegroundRest}; opacity: 0; pointer-events: none; } .indeterminate-indicator { border-radius: calc((${controlCornerRadius} / 2) * 1px); - background: ${neutralForeground}; + background: ${neutralForegroundRest}; position: absolute; top: 50%; left: 50%; diff --git a/packages/web-components/src/color-vNext/recipe.ts b/packages/web-components/src/color-vNext/recipe.ts new file mode 100644 index 0000000000000..dde826a5a32a9 --- /dev/null +++ b/packages/web-components/src/color-vNext/recipe.ts @@ -0,0 +1,23 @@ +import { Swatch } from './swatch'; + +export interface SwatchFamily { + /** + * The swatch to apply to the rest state + */ + rest: Swatch; + + /** + * The swatch to apply to the hover state + */ + hover: Swatch; + + /** + * The swatch to apply to the active state + */ + active: Swatch; + + /** + * The swatch to apply to the focus state + */ + focus: Swatch; +} 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 6fcf13d971163..29bb34bc0fba9 100644 --- a/packages/web-components/src/color-vNext/recipes/accent-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/accent-fill.ts @@ -1,13 +1,13 @@ import { inRange } from 'lodash-es'; -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; /** * @internal */ export function accentFill( - palette: PaletteRGB, - neutralPaletteRGB: PaletteRGB, + palette: Palette, + neutralPaletteRGB: Palette, reference: Swatch, textColor: Swatch, contrastTarget: number, @@ -17,7 +17,7 @@ export function accentFill( neutralFillRestDelta: number, neutralFillHoverDelta: number, neutralFillActiveDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const accent = palette.source; const referenceIndex = neutralPaletteRGB.closestIndexOf(reference); const swapThreshold = Math.max(neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta); diff --git a/packages/web-components/src/color-vNext/recipes/accent-foreground.ts b/packages/web-components/src/color-vNext/recipes/accent-foreground.ts index 98baddf91572d..cad11adf6a48f 100644 --- a/packages/web-components/src/color-vNext/recipes/accent-foreground.ts +++ b/packages/web-components/src/color-vNext/recipes/accent-foreground.ts @@ -1,4 +1,4 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -6,14 +6,14 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * @internal */ export function accentForeground( - palette: PaletteRGB, + palette: Palette, reference: Swatch, contrastTarget: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const accent = palette.source; const accentIndex = palette.closestIndexOf(accent); const direction = directionByIsDark(reference); diff --git a/packages/web-components/src/color-vNext/recipes/focus-stroke.ts b/packages/web-components/src/color-vNext/recipes/focus-stroke.ts index 5c0968d1954f9..2d6820e71dc0d 100644 --- a/packages/web-components/src/color-vNext/recipes/focus-stroke.ts +++ b/packages/web-components/src/color-vNext/recipes/focus-stroke.ts @@ -1,18 +1,18 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; /** * @internal */ -export function focusStrokeOuter(palette: PaletteRGB, reference: Swatch) { +export function focusStrokeOuter(palette: Palette, reference: Swatch) { return palette.colorContrast(reference, 3.5); } /** * @internal */ -export function focusStrokeInner(palette: PaletteRGB, reference: Swatch, focusColor: Swatch) { +export function focusStrokeInner(palette: Palette, reference: Swatch, focusColor: Swatch) { return palette.colorContrast( focusColor, 3.5, diff --git a/packages/web-components/src/color-vNext/recipes/accent-foreground-cut.ts b/packages/web-components/src/color-vNext/recipes/foreground-on-accent.ts similarity index 70% rename from packages/web-components/src/color-vNext/recipes/accent-foreground-cut.ts rename to packages/web-components/src/color-vNext/recipes/foreground-on-accent.ts index 3569a795ebbc2..8d2688b9a1137 100644 --- a/packages/web-components/src/color-vNext/recipes/accent-foreground-cut.ts +++ b/packages/web-components/src/color-vNext/recipes/foreground-on-accent.ts @@ -4,6 +4,6 @@ import { black, white } from '../utilities/color-constants'; /** * @internal */ -export function accentForegroundCut(reference: Swatch, contrastTarget: number) { +export function foregroundOnAccent(reference: Swatch, contrastTarget: number) { return reference.contrast(white) >= contrastTarget ? white : black; } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-divider.ts b/packages/web-components/src/color-vNext/recipes/neutral-divider.ts index 88ed5a7b29d9e..f0069f3a1283e 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-divider.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-divider.ts @@ -1,5 +1,5 @@ import { Swatch } from '../swatch'; -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; /** @@ -10,6 +10,6 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * * @internal */ -export function neutralDivider(palette: PaletteRGB, reference: Swatch, delta: number) { +export function neutralDivider(palette: Palette, reference: Swatch, delta: number): Swatch { return palette.get(palette.closestIndexOf(reference) + directionByIsDark(reference) * delta); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts index 6adb01265d686..513c0f588d940 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts @@ -1,4 +1,4 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -6,13 +6,13 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * @internal */ export function neutralFillContrast( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const direction = directionByIsDark(reference); const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 4.5)); const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta); 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 2afa075769724..f650bb4f7cdd2 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 @@ -1,4 +1,4 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -6,13 +6,13 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * @internal */ export function neutralFillInput( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const direction = directionByIsDark(reference); const referenceIndex = palette.closestIndexOf(reference); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts index 418b0e27e5a23..f2ba849af365c 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts @@ -1,4 +1,4 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -6,13 +6,13 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * @internal */ export function neutralFillInverse( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const direction = directionByIsDark(reference); const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 14)); const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-card.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-layer.ts similarity index 55% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-card.ts rename to packages/web-components/src/color-vNext/recipes/neutral-fill-layer.ts index c0acf63d993bd..2961dc64d241e 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill-card.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill-layer.ts @@ -1,10 +1,10 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; /** * @internal */ -export function neutralFillCard(palette: PaletteRGB, reference: Swatch, delta: number) { +export function neutralFillLayer(palette: Palette, reference: Swatch, delta: number): Swatch { const referenceIndex = palette.closestIndexOf(reference); return palette.get(referenceIndex - delta); 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 e1fed4efe7bcc..70d29e9349ec8 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 @@ -1,11 +1,11 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; /** * @internal */ export function neutralFillStealth( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, @@ -15,7 +15,7 @@ export function neutralFillStealth( fillHoverDelta: number, fillActiveDelta: number, fillFocusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const swapThreshold = Math.max( restDelta, hoverDelta, 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 df35a0519469b..21ca42dde2f7a 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-fill.ts @@ -1,4 +1,4 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; /** @@ -12,13 +12,13 @@ import { Swatch } from '../swatch'; * @internal */ export function neutralFill( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const referenceIndex = palette.closestIndexOf(reference); const threshold = Math.max(restDelta, hoverDelta, activeDelta, focusDelta); const direction = referenceIndex >= threshold ? -1 : 1; diff --git a/packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts b/packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts index 981e01aa9d5f0..ea53f40bce5b9 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts @@ -1,5 +1,5 @@ +import { Palette } from '../palette'; import { Swatch } from '../swatch'; -import { PaletteRGB } from '../palette'; /** * The neutralForegroundHint color recipe @@ -8,6 +8,6 @@ import { PaletteRGB } from '../palette'; * * @internal */ -export function neutralForegroundHint(palette: PaletteRGB, reference: Swatch) { +export function neutralForegroundHint(palette: Palette, reference: Swatch): Swatch { return palette.colorContrast(reference, 4.5); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-foreground.ts b/packages/web-components/src/color-vNext/recipes/neutral-foreground.ts index 35c64910f122e..d1e821940e8a1 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-foreground.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-foreground.ts @@ -1,9 +1,9 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; import { Swatch } from '../swatch'; /** * @internal */ -export function neutralForeground(palette: PaletteRGB, reference: Swatch) { +export function neutralForeground(palette: Palette, reference: Swatch): Swatch { return palette.colorContrast(reference, 14); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-1.ts similarity index 54% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts rename to packages/web-components/src/color-vNext/recipes/neutral-layer-1.ts index 0ae059fc93f31..c5f108beec617 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L1.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-1.ts @@ -1,9 +1,10 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; /** * @internal */ -export function neutralLayerL1(palette: PaletteRGB, baseLayerLuminance: number) { +export function neutralLayer1(palette: Palette, baseLayerLuminance: number): Swatch { 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-2.ts similarity index 62% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts rename to packages/web-components/src/color-vNext/recipes/neutral-layer-2.ts index 4af6f3152bd2c..3597571bd1f77 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L2.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-2.ts @@ -1,19 +1,20 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; /** * @internal */ -export function neutralLayerL2Index( - palette: PaletteRGB, +export function neutralLayer2Index( + palette: Palette, luminance: number, - cardDelta: number, + layerDelta: number, fillRestDelta: number, fillHoverDelta: number, fillActiveDelta: number, -) { +): number { return Math.max( - palette.closestIndexOf(baseLayerLuminanceSwatch(luminance)) + cardDelta, + palette.closestIndexOf(baseLayerLuminanceSwatch(luminance)) + layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta, @@ -23,15 +24,15 @@ export function neutralLayerL2Index( /** * @internal */ -export function neutralLayerL2( - palette: PaletteRGB, +export function neutralLayer2( + palette: Palette, luminance: number, - cardDelta: number, + layerDelta: number, fillRestDelta: number, fillHoverDelta: number, fillActiveDelta: number, -) { +): Swatch { return palette.get( - neutralLayerL2Index(palette, luminance, cardDelta, fillRestDelta, fillHoverDelta, fillActiveDelta), + neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta), ); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-3.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-3.ts new file mode 100644 index 0000000000000..0b9defff08667 --- /dev/null +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-3.ts @@ -0,0 +1,19 @@ +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; +import { neutralLayer2Index } from './neutral-layer-2'; + +/** + * @internal + */ +export function neutralLayer3( + palette: Palette, + luminance: number, + layerDelta: number, + fillRestDelta: number, + fillHoverDelta: number, + fillActiveDelta: number, +): Swatch { + return palette.get( + neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + layerDelta, + ); +} diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-4.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-4.ts new file mode 100644 index 0000000000000..4a260a94e94aa --- /dev/null +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-4.ts @@ -0,0 +1,19 @@ +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; +import { neutralLayer2Index } from './neutral-layer-2'; + +/** + * @internal + */ +export function neutralLayer4( + palette: Palette, + luminance: number, + layerDelta: number, + fillRestDelta: number, + fillHoverDelta: number, + fillActiveDelta: number, +): Swatch { + return palette.get( + neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + layerDelta * 2, + ); +} 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 deleted file mode 100644 index 12e8cdad4c941..0000000000000 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L3.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { PaletteRGB } from '../palette'; -import { neutralLayerL2Index } from './neutral-layer-L2'; - -/** - * @internal - */ -export function neutralLayerL3( - palette: PaletteRGB, - luminance: number, - cardDelta: number, - fillRestDelta: number, - fillHoverDelta: number, - fillActiveDelta: number, -) { - return palette.get( - neutralLayerL2Index(palette, luminance, cardDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + cardDelta, - ); -} 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 deleted file mode 100644 index b320985a85346..0000000000000 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-L4.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { PaletteRGB } from '../palette'; -import { neutralLayerL2Index } from './neutral-layer-L2'; - -/** - * @internal - */ -export function neutralLayerL4( - palette: PaletteRGB, - luminance: number, - cardDelta: number, - fillRestDelta: number, - fillHoverDelta: number, - fillActiveDelta: number, -) { - return palette.get( - neutralLayerL2Index(palette, luminance, cardDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + cardDelta * 2, - ); -} diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts new file mode 100644 index 0000000000000..0bc149bf0e7b5 --- /dev/null +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts @@ -0,0 +1,20 @@ +import { clamp } from '@microsoft/fast-colors'; +import { PaletteRGB } from '../palette'; +import { SwatchRGB } from '../swatch'; +import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; + +/** + * @internal + */ +export function neutralLayerCardContainer( + palette: PaletteRGB, + relativeLuminance: number, + layerDelta: number, +): SwatchRGB { + const oldCardIndex: number = clamp( + palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - layerDelta, + 0, + palette.swatches.length - 1, + ); + return palette.get(oldCardIndex + layerDelta); +} diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-card.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-card.ts deleted file mode 100644 index f050d507bb8fe..0000000000000 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-card.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { PaletteRGB } from '../palette'; -import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; - -/** - * @internal - */ -export function neutralLayerCard(palette: PaletteRGB, relativeLuminance: number, cardDelta: number) { - return palette.get(palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - cardDelta); -} diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts index cb90ef69bdde6..28b5177a4b5d5 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts @@ -1,10 +1,11 @@ -import { PaletteRGB } from '../palette'; -import { neutralLayerCard } from './neutral-layer-card'; +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; +import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; /** * @internal */ -export function neutralLayerFloating(palette: PaletteRGB, relativeLuminance: number, cardDelta: number) { - const cardIndex = palette.closestIndexOf(neutralLayerCard(palette, relativeLuminance, cardDelta)); - return palette.get(cardIndex - cardDelta); +export function neutralLayerFloating(palette: Palette, relativeLuminance: number, layerDelta: number): Swatch { + const cardIndex = palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - layerDelta; + return palette.get(cardIndex - layerDelta); } diff --git a/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts b/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts index 1bcb4614cbcfa..cd367e6f4fc7a 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts @@ -12,7 +12,7 @@ export function neutralStroke( hoverDelta: number, activeDelta: number, focusDelta: number, -) { +): Record<"rest" | "hover" | "active" | "focus", Swatch> { const referenceIndex = palette.closestIndexOf(reference); const direction = directionByIsDark(reference); diff --git a/packages/web-components/src/color/accent-fill.spec.ts b/packages/web-components/src/color/accent-fill.spec.ts index 1002ac1cd6534..0105ee85960ab 100644 --- a/packages/web-components/src/color/accent-fill.spec.ts +++ b/packages/web-components/src/color/accent-fill.spec.ts @@ -18,22 +18,19 @@ import { } from './accent-fill'; import { findClosestSwatchIndex, Palette } from './palette'; import { contrast, Swatch } from './common'; -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { neutralBaseColor, accentBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { accentFill as accentFillNew } from "../color-vNext/recipes/accent-fill"; -import { accentForegroundCut as accentForegroundCutNew } from '../color-vNext/recipes/accent-foreground-cut'; +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { neutralBaseColor, accentBaseColor } from './color-constants'; +import { PaletteRGB } from '../color-vNext/palette'; +import { SwatchRGB } from '../color-vNext/swatch'; +import { accentFill as accentFillNew } from '../color-vNext/recipes/accent-fill'; +import { foregroundOnAccent as foregroundOnAccentNew } from '../color-vNext/recipes/foreground-on-accent'; import { accentForegroundCut } from './accent-foreground-cut'; describe('accentFill', (): void => { const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - const accentIndex: number = findClosestSwatchIndex( - getAccentPalette, - accentBaseColor, - )(DesignSystemDefaults); + const accentIndex: number = findClosestSwatchIndex(getAccentPalette, accentBaseColor)(DesignSystemDefaults); it('should operate on design system defaults', (): void => { [ @@ -76,41 +73,46 @@ describe('accentFill', (): void => { }); }); -describe("ensure parity between old and new recipe implementation", () => { - const neutralColor = (parseColorHexRGB(neutralBaseColor)!) +describe('ensure parity between old and new recipe implementation', () => { + const neutralColor = parseColorHexRGB(neutralBaseColor)!; const neutralPalette = PaletteRGB.create(SwatchRGB.create(neutralColor.r, neutralColor.g, neutralColor.b)); - const accentColor = (parseColorHexRGB(accentBaseColor)!) + const accentColor = parseColorHexRGB(accentBaseColor)!; const accentPalette = PaletteRGB.create(SwatchRGB.create(accentColor.r, accentColor.g, accentColor.b)); - neutralPalette.swatches.forEach(( newSwatch, index ) => { - const { - accentFillHoverDelta, - accentFillActiveDelta, - accentFillFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - } = DesignSystemDefaults; + neutralPalette.swatches.forEach((newSwatch, index) => { + const { + accentFillHoverDelta, + accentFillActiveDelta, + accentFillFocusDelta, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + } = DesignSystemDefaults; - const oldValues = accentFill({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const textColor = accentForegroundCutNew(accentPalette.source, 4.5); - const newValues = accentFillNew( - accentPalette, - neutralPalette, - newSwatch, - textColor, - 4.5, - accentFillHoverDelta, - accentFillActiveDelta, - accentFillFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta - ) + const oldValues = accentFill({ + ...DesignSystemDefaults, + backgroundColor: DesignSystemDefaults.neutralPalette[index], + }); + const textColor = foregroundOnAccentNew(accentPalette.source, 4.5); + const newValues = accentFillNew( + accentPalette, + neutralPalette, + newSwatch, + textColor, + 4.5, + accentFillHoverDelta, + accentFillActiveDelta, + accentFillFocusDelta, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + ); - for (let key in oldValues) { - it(`${newSwatch.toColorString()}old value for ${key} at ${oldValues[key]} should be equal to new value`, () => { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) - } ) - } - }) -}) + for (let key in oldValues) { + if (key !== 'selected') { + it(`${newSwatch.toColorString()} old value for ${key} at ${oldValues[key]} should be equal to new value`, () => { + expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); + }); + } + } + }); +}); diff --git a/packages/web-components/src/color/accent-foreground-cut.spec.ts b/packages/web-components/src/color/accent-foreground-cut.spec.ts index 4a013a97c0ba0..091126d47bbe1 100644 --- a/packages/web-components/src/color/accent-foreground-cut.spec.ts +++ b/packages/web-components/src/color/accent-foreground-cut.spec.ts @@ -6,7 +6,7 @@ import { DesignSystemDefaults, DesignSystem } from '../fluent-design-system'; import { accentForegroundCut, accentForegroundCutLarge } from './accent-foreground-cut'; import { neutralBaseColor, accentBaseColor } from "./color-constants"; import { Swatch } from "./common"; -import { accentForegroundCut as accentForegroundCutNew } from "../color-vNext/recipes/accent-foreground-cut"; +import { foregroundOnAccent as foregroundOnAccentNew } from "../color-vNext/recipes/foreground-on-accent"; describe('Cut text', (): void => { it('should return white by by default', (): void => { @@ -38,7 +38,7 @@ describe("ensure parity between old and new recipe implementation", () => { { ...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.accentBaseColor } ) ).to.be.equal( - accentForegroundCutNew(palette.source, 4.5).toColorString().toUpperCase() + foregroundOnAccentNew(palette.source, 4.5).toColorString().toUpperCase() ) } ) diff --git a/packages/web-components/src/color/accent-foreground.spec.ts b/packages/web-components/src/color/accent-foreground.spec.ts index 1bca007eb5eec..642bb4c20a6b5 100644 --- a/packages/web-components/src/color/accent-foreground.spec.ts +++ b/packages/web-components/src/color/accent-foreground.spec.ts @@ -125,7 +125,7 @@ describe("ensure parity between old and new recipe implementation", () => { accentForegroundActiveDelta, accentForegroundFocusDelta, ); - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { for (let key in newValues) { expect(oldValues[key]).to.equal( newValues[key].toColorString().toUpperCase() 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 0ea3a34429152..7ce229e29e72a 100644 --- a/packages/web-components/src/color/neutral-contrast-fill.spec.ts +++ b/packages/web-components/src/color/neutral-contrast-fill.spec.ts @@ -21,7 +21,7 @@ describe("ensure parity between old and new recipe implementation", () => { neutralContrastFillActiveDelta, neutralContrastFillFocusDelta, ); - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { for (let key in oldValues) { expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) } diff --git a/packages/web-components/src/color/neutral-divider.spec.ts b/packages/web-components/src/color/neutral-divider.spec.ts index 5facf632d7e0f..35a2703580da6 100644 --- a/packages/web-components/src/color/neutral-divider.spec.ts +++ b/packages/web-components/src/color/neutral-divider.spec.ts @@ -20,7 +20,7 @@ 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 ) => { - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { expect(neutralDivider(palette, newSwatch, DesignSystemDefaults.neutralDividerRestDelta).toColorString().toUpperCase()).to.equal( neutralDividerRest({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) ) diff --git a/packages/web-components/src/color/neutral-fill-card.spec.ts b/packages/web-components/src/color/neutral-fill-card.spec.ts index e8d0852684ffb..d4343c02d7016 100644 --- a/packages/web-components/src/color/neutral-fill-card.spec.ts +++ b/packages/web-components/src/color/neutral-fill-card.spec.ts @@ -5,7 +5,7 @@ import { SwatchRGB } from "../color-vNext/swatch"; import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; import { neutralBaseColor } from "./color-constants"; import { neutralFillCard } from "./neutral-fill-card"; -import { neutralFillCard as neutralFillCardNew } from "../color-vNext/recipes/neutral-fill-card" +import { neutralFillLayer as neutralFillLayerNew } from "../color-vNext/recipes/neutral-fill-layer" describe('neutralFillCard', (): void => { it('should operate on design system defaults', (): void => { @@ -50,10 +50,10 @@ describe("ensure parity between old and new recipe implementation", () => { const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); const { neutralFillCardDelta } = DesignSystemDefaults; palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { expect( neutralFillCard({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) - ).to.be.equal(neutralFillCardNew( palette, newSwatch, neutralFillCardDelta).toColorString().toUpperCase()) + ).to.be.equal(neutralFillLayerNew( palette, newSwatch, neutralFillCardDelta).toColorString().toUpperCase()) }); }) }) 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 92b4059af35f6..324620fa035e6 100644 --- a/packages/web-components/src/color/neutral-fill-input.spec.ts +++ b/packages/web-components/src/color/neutral-fill-input.spec.ts @@ -1,14 +1,14 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from "chai"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { expect } from 'chai'; +import { PaletteRGB } from '../color-vNext/palette'; +import { SwatchRGB } from '../color-vNext/swatch'; import { accentPalette as getAccentPalette, DesignSystem, DesignSystemDefaults, neutralPalette as getNeutralPalette, } from '../fluent-design-system'; -import { neutralBaseColor } from "./color-constants"; +import { neutralBaseColor } from './color-constants'; import { clamp, FillSwatchFamily, Swatch } from './common'; import { neutralFillInput, @@ -19,7 +19,7 @@ import { neutralFillInputSelected, } from './neutral-fill-input'; import { isDarkMode, Palette } from './palette'; -import { neutralFillInput as neutralFillInputNew } from "../color-vNext/recipes/neutral-fill-input"; +import { neutralFillInput as neutralFillInputNew } from '../color-vNext/recipes/neutral-fill-input'; describe('neutralFillInput', (): void => { const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); @@ -112,29 +112,34 @@ describe('neutralFillInput', (): void => { }); }); }); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) +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 { - neutralFillInputRestDelta, - neutralFillInputHoverDelta, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta - } = DesignSystemDefaults; - const oldValues = neutralFillInput({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillInputNew( - palette, - newSwatch, - neutralFillInputRestDelta, - neutralFillInputHoverDelta, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta - ); - it(`should be the same for ${newSwatch}`, () => { - for (let key in oldValues) { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) - } - }); - }) -}) + palette.swatches.forEach((newSwatch, index) => { + const { + neutralFillInputRestDelta, + neutralFillInputHoverDelta, + neutralFillInputActiveDelta, + neutralFillInputFocusDelta, + } = DesignSystemDefaults; + const oldValues = neutralFillInput({ + ...DesignSystemDefaults, + backgroundColor: DesignSystemDefaults.neutralPalette[index], + }); + const newValues = neutralFillInputNew( + palette, + newSwatch, + neutralFillInputRestDelta, + neutralFillInputHoverDelta, + neutralFillInputActiveDelta, + neutralFillInputFocusDelta, + ); + it(`should be the same for ${newSwatch.toColorString()}`, () => { + for (let key in oldValues) { + if (key !== 'selected') { + expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); + } + } + }); + }); +}); 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 7b3618a12665a..3cced7d0c282b 100644 --- a/packages/web-components/src/color/neutral-fill-stealth.spec.ts +++ b/packages/web-components/src/color/neutral-fill-stealth.spec.ts @@ -1,4 +1,4 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; +import { parseColorHexRGB } from '@microsoft/fast-colors'; import { expect } from 'chai'; import { accentPalette as getAccentPalette, @@ -16,10 +16,10 @@ import { } from './neutral-fill-stealth'; import { Palette } from './palette'; import { FillSwatchFamily, Swatch } from './common'; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { neutralBaseColor } from "./color-constants"; -import { neutralFillStealth as neutralFillStealthNew } from "../color-vNext/recipes/neutral-fill-stealth"; +import { PaletteRGB } from '../color-vNext/palette'; +import { SwatchRGB } from '../color-vNext/swatch'; +import { neutralBaseColor } from './color-constants'; +import { neutralFillStealth as neutralFillStealthNew } from '../color-vNext/recipes/neutral-fill-stealth'; describe('neutralFillStealth', (): void => { const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); @@ -112,37 +112,42 @@ describe('neutralFillStealth', (): void => { }); }); }); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) +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 { - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta - } = DesignSystemDefaults; - const oldValues = neutralFillStealth({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillStealthNew( - palette, - newSwatch, - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - 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()) - } - }); - }) -}) + palette.swatches.forEach((newSwatch, index) => { + const { + neutralFillStealthRestDelta, + neutralFillStealthHoverDelta, + neutralFillStealthActiveDelta, + neutralFillStealthFocusDelta, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + neutralFillFocusDelta, + } = DesignSystemDefaults; + const oldValues = neutralFillStealth({ + ...DesignSystemDefaults, + backgroundColor: DesignSystemDefaults.neutralPalette[index], + }); + const newValues = neutralFillStealthNew( + palette, + newSwatch, + neutralFillStealthRestDelta, + neutralFillStealthHoverDelta, + neutralFillStealthActiveDelta, + neutralFillStealthFocusDelta, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + neutralFillFocusDelta, + ); + it(`should be the same for ${newSwatch.toColorString()}`, () => { + for (let key in oldValues) { + if (key !== 'selected') { + expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); + } + } + }); + }); +}); 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 2ee71bab0e165..974e14b7e99a7 100644 --- a/packages/web-components/src/color/neutral-fill-toggle.spec.ts +++ b/packages/web-components/src/color/neutral-fill-toggle.spec.ts @@ -21,7 +21,7 @@ describe("ensure parity between old and new recipe implementation", () => { neutralFillToggleActiveDelta, neutralFillToggleFocusDelta, ); - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { for (let key in oldValues) { expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) } diff --git a/packages/web-components/src/color/neutral-fill.spec.ts b/packages/web-components/src/color/neutral-fill.spec.ts index e24e760662433..a5f32454abd49 100644 --- a/packages/web-components/src/color/neutral-fill.spec.ts +++ b/packages/web-components/src/color/neutral-fill.spec.ts @@ -1,4 +1,4 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; +import { parseColorHexRGB } from '@microsoft/fast-colors'; import { expect } from 'chai'; import { accentPalette as getAccentPalette, @@ -16,10 +16,10 @@ import { } from './neutral-fill'; import { Palette } from './palette'; import { FillSwatchFamily, Swatch } from './common'; -import { neutralBaseColor } from "./color-constants"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { PaletteRGB } from "../color-vNext/palette"; -import { neutralFill as neutralFillNew } from "../color-vNext/recipes/neutral-fill" +import { neutralBaseColor } from './color-constants'; +import { SwatchRGB } from '../color-vNext/swatch'; +import { PaletteRGB } from '../color-vNext/palette'; +import { neutralFill as neutralFillNew } from '../color-vNext/recipes/neutral-fill'; describe('neutralFill', (): void => { const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); @@ -107,17 +107,34 @@ describe('neutralFill', (): void => { }); }); }); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) +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 } = DesignSystemDefaults; - const oldValues = neutralFill({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - 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()) - } - }); - }) -}) + palette.swatches.forEach((newSwatch, index) => { + const { + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + neutralFillFocusDelta, + } = DesignSystemDefaults; + const oldValues = neutralFill({ + ...DesignSystemDefaults, + backgroundColor: DesignSystemDefaults.neutralPalette[index], + }); + const newValues = neutralFillNew( + palette, + newSwatch, + neutralFillRestDelta, + neutralFillHoverDelta, + neutralFillActiveDelta, + neutralFillFocusDelta, + ); + it(`should be the same for ${newSwatch.toColorString()}`, () => { + for (let key in oldValues) { + if (key !== 'selected') { + 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 3c4f29e3aa16b..cee6bd55345c6 100644 --- a/packages/web-components/src/color/neutral-focus.spec.ts +++ b/packages/web-components/src/color/neutral-focus.spec.ts @@ -25,7 +25,7 @@ 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 ) => { - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { expect(neutralFocus({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(focusStrokeOuterNew( palette, newSwatch).toColorString().toUpperCase()) }); }) diff --git a/packages/web-components/src/color/neutral-foreground-hint.spec.ts b/packages/web-components/src/color/neutral-foreground-hint.spec.ts index 75d8bae6f569a..1f5984f3c3de0 100644 --- a/packages/web-components/src/color/neutral-foreground-hint.spec.ts +++ b/packages/web-components/src/color/neutral-foreground-hint.spec.ts @@ -67,7 +67,7 @@ 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 ) => { - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { expect(neutralForegroundHintNew(palette, newSwatch).toColorString().toUpperCase()).to.equal( neutralForegroundHint({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) ) diff --git a/packages/web-components/src/color/neutral-foreground.spec.ts b/packages/web-components/src/color/neutral-foreground.spec.ts index 84a37d11b359c..99f87c1222268 100644 --- a/packages/web-components/src/color/neutral-foreground.spec.ts +++ b/packages/web-components/src/color/neutral-foreground.spec.ts @@ -60,7 +60,7 @@ 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 ) => { - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { expect(neutralForegroundRest({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(neutralForeground( palette, newSwatch).toColorString().toUpperCase()) }); }) diff --git a/packages/web-components/src/color/neutral-layer.spec.ts b/packages/web-components/src/color/neutral-layer.spec.ts index 74cdb9ce30afb..68c0f44b6892d 100644 --- a/packages/web-components/src/color/neutral-layer.spec.ts +++ b/packages/web-components/src/color/neutral-layer.spec.ts @@ -15,8 +15,8 @@ import { neutralLayerFloating as neutralLayerFloatingNew } from '../color-vNext/recipes/neutral-layer-floating'; import { - neutralLayerCard as neutralLayerCardNew -} from '../color-vNext/recipes/neutral-layer-card'; + neutralLayerCardContainer as neutralLayerCardContainerNew +} from '../color-vNext/recipes/neutral-layer-card-container'; import { neutralBaseColor } from "./color-constants"; import { PaletteRGB } from "../color-vNext/palette"; import { SwatchRGB } from "../color-vNext/swatch"; @@ -157,6 +157,13 @@ describe('neutralLayer', (): void => { expect(color).not.to.equal(neutralLayerCardContainer(DesignSystemDefaults)); expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; }); + it("should have a new implementation that matches the old implementation", () => { + const color = (parseColorHexRGB(neutralBaseColor)!) + const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); + + expect(neutralLayerCardContainer(lightModeDesignSystem)).to.equal(neutralLayerCardContainerNew(palette, StandardLuminance.LightMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) + expect(neutralLayerCardContainer(darkModeDesignSystem)).to.equal(neutralLayerCardContainerNew(palette, StandardLuminance.DarkMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) + }) }); describe('neutralLayerCard', (): void => { it('should return a color from the neutral palette', (): void => { @@ -168,12 +175,5 @@ describe('neutralLayer', (): void => { expect(color).not.to.equal(neutralLayerCard(DesignSystemDefaults)); expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; }); - it("should have a new implementation that matches the old implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - - expect(neutralLayerCard(lightModeDesignSystem)).to.equal(neutralLayerCardNew(palette, StandardLuminance.LightMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) - expect(neutralLayerCard(darkModeDesignSystem)).to.equal(neutralLayerCardNew(palette, StandardLuminance.DarkMode, lightModeDesignSystem.neutralFillCardDelta).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 eb55a16a95ec7..a2af7d846e105 100644 --- a/packages/web-components/src/color/neutral-outline.spec.ts +++ b/packages/web-components/src/color/neutral-outline.spec.ts @@ -98,7 +98,7 @@ describe("ensure parity between old and new recipe implementation", () => { neutralOutlineActiveDelta, neutralOutlineFocusDelta, ); - it(`should be the same for ${newSwatch}`, () => { + it(`should be the same for ${newSwatch.toColorString()}`, () => { for (let key in oldValues) { expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) } 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 3ff2fddc68c47..6d7efe4f90000 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 @@ -6,7 +6,7 @@ import { controlCornerRadius, designUnit, focusStrokeOuter, - neutralForeground, + neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -16,7 +16,7 @@ export const dataGridCellStyles = (context, definition) => css` :host { padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px); - color: ${neutralForeground}; + color: ${neutralForegroundRest}; box-sizing: border-box; font-family: ${bodyFont}; font-size: ${typeRampBaseFontSize}; @@ -34,7 +34,7 @@ export const dataGridCellStyles = (context, definition) => :host(:${focusVisible}) { border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } `.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 e585d50fe1d2a..afd8a4ef6c991 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, strokeWidth, neutralStrokeDivider } from '../design-tokens'; +import { neutralFillRest, neutralStrokeDividerRest, strokeWidth } 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(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; + border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}; } :host(.header) { diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index 232f3263db891..78cb16c30a3dc 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -1,143 +1,224 @@ -import { DesignToken, DI } from '@microsoft/fast-foundation'; +import { DesignToken } from '@microsoft/fast-foundation'; import { Direction } from '@microsoft/fast-web-utilities'; import { PaletteRGB } from './color-vNext/palette'; +import { Swatch, SwatchRGB } from './color-vNext/swatch'; 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 { foregroundOnAccent as foregroundOnAccentAlgorithm } from './color-vNext/recipes/foreground-on-accent'; 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 { neutralFill as neutralFillAlgorithm } from './color-vNext/recipes/neutral-fill'; +import { neutralFillInput as neutralFillInputAlgorithm } from './color-vNext/recipes/neutral-fill-input'; +import { neutralFillLayer as neutralFillLayerAlgorithm } from './color-vNext/recipes/neutral-fill-layer'; import { neutralFillStealth as neutralFillStealthAlgorithm } from './color-vNext/recipes/neutral-fill-stealth'; import { neutralFillContrast as neutralFillContrastAlgorithm } from './color-vNext/recipes/neutral-fill-contrast'; -import { neutralFill as neutralFillAlgorithm } from './color-vNext/recipes/neutral-fill'; 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'; -import { neutralLayerL1 as neutralLayerL1Algorithm } from './color-vNext/recipes/neutral-layer-L1'; -import { neutralLayerL2 as neutralLayerL2Algorithm } from './color-vNext/recipes/neutral-layer-L2'; -import { neutralLayerL3 as neutralLayerL3Algorithm } from './color-vNext/recipes/neutral-layer-L3'; -import { neutralLayerL4 as neutralLayerL4Algorithm } from './color-vNext/recipes/neutral-layer-L4'; +import { neutralLayer1 as neutralLayer1Algorithm } from './color-vNext/recipes/neutral-layer-1'; +import { neutralLayer2 as neutralLayer2Algorithm } from './color-vNext/recipes/neutral-layer-2'; +import { neutralLayer3 as neutralLayer3Algorithm } from './color-vNext/recipes/neutral-layer-3'; +import { neutralLayer4 as neutralLayer4Algorithm } from './color-vNext/recipes/neutral-layer-4'; +import { neutralStroke as neutralStrokeAlgorithm } from './color-vNext/recipes/neutral-stroke'; import { accentBase, middleGrey } from './color-vNext/utilities/color-constants'; import { StandardLuminance } from './color'; +import { SwatchFamily } from './color-vNext/recipe'; + +// eslint-disable-next-line @typescript-eslint/ban-types +export interface Recipe | symbol | {}> { + evaluate(element: HTMLElement, reference?: Swatch): T; +} + +export type ColorRecipe = Recipe; + +export type ColorFamilyRecipe = Recipe; const { create } = DesignToken; +/** @public */ export const accentFillRestDelta = create('accent-fill-rest-delta').withDefault(0); +/** @public */ export const accentFillHoverDelta = create('accent-fill-hover-delta').withDefault(4); +/** @public */ export const accentFillActiveDelta = create('accent-fill-active-delta').withDefault(-5); +/** @public */ export const accentFillFocusDelta = create('accent-fill-focus-delta').withDefault(0); +/** @public */ export const accentForegroundRestDelta = create('accent-foreground-rest-delta').withDefault(0); +/** @public */ export const accentForegroundHoverDelta = create('accent-foreground-hover-delta').withDefault(6); +/** @public */ export const accentForegroundActiveDelta = create('accent-foreground-active-delta').withDefault(-4); +/** @public */ export const accentForegroundFocusDelta = create('accent-foreground-focus-delta').withDefault(0); +/** @public */ export const bodyFont = create('body-font').withDefault('Segoe UI, sans-serif'); +/** @public */ export const baseHeightMultiplier = create('base-height-multiplier').withDefault(8); +/** @public */ export const baseHorizontalSpacingMultiplier = create('base-horizontal-spacing-multiplier').withDefault(3); +/** @public */ export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode); -export const controlCornerRadius = create('corner-radius').withDefault(4); -/** @deprecated */ +/** @public */ +export const controlCornerRadius = create('control-corner-radius').withDefault(4); +/** @public @deprecated Use controlCornerRadius */ export const cornerRadius = controlCornerRadius; +/** @public */ export const density = create('density').withDefault(0); +/** @public */ export const designUnit = create('design-unit').withDefault(4); +/** @public */ export const direction = create('direction').withDefault(Direction.ltr); +/** @public */ export const disabledOpacity = create('disabled-opacity').withDefault(0.3); -export const surfaceCornerRadius = create('elevated-corner-radius').withDefault(4); -/** @deprecated */ -export const elevatedCornerRadius = surfaceCornerRadius; +/** @public */ +export const layerCornerRadius = create('layer-corner-radius').withDefault(4); +/** @public @deprecated Use layerCornerRadius */ +export const elevatedCornerRadius = layerCornerRadius; +/** @public */ export const focusStrokeWidth = create('focus-stroke-width').withDefault(2); -/** @deprecated */ +/** @public @deprecated Use focusStrokeWidth */ export const focusOutlineWidth = focusStrokeWidth; +/** @public */ export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0); +/** @public */ export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3); +/** @public */ export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7); +/** @public */ export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0); -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseRestDelta */ export const neutralContrastFillRestDelta = neutralFillInverseRestDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseHoverDelta */ export const neutralContrastFillHoverDelta = neutralFillInverseHoverDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseActiveDelta */ export const neutralContrastFillActiveDelta = neutralFillInverseActiveDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseFocusDelta */ export const neutralContrastFillFocusDelta = neutralFillInverseFocusDelta; +/** @public */ export const neutralStrokeDividerRestDelta = create('neutral-stroke-divider-rest-delta').withDefault(8); -/** @deprecated */ +/** @public @deprecated Use neutralStrokeDividerRestDelta */ export const neutralDividerRestDelta = neutralStrokeDividerRestDelta; +/** @public */ export const neutralFillActiveDelta = create('neutral-fill-active-delta').withDefault(5); -export const neutralFillCardRestDelta = create('neutral-fill-card-rest-delta').withDefault(3); -/** @deprecated */ -export const neutralFillCardDelta = neutralFillCardRestDelta; +/** @public */ +export const neutralFillLayerRestDelta = create('neutral-fill-layer-rest-delta').withDefault(3); +/** @public @deprecated Use neutralFillLayerRestDelta */ +export const neutralFillCardDelta = neutralFillLayerRestDelta; +/** @public */ export const neutralFillFocusDelta = create('neutral-fill-focus-delta').withDefault(0); +/** @public */ export const neutralFillHoverDelta = create('neutral-fill-hover-delta').withDefault(10); +/** @public */ export const neutralFillInputActiveDelta = create('neutral-fill-input-active-delta').withDefault(0); +/** @public */ export const neutralFillInputFocusDelta = create('neutral-fill-input-focus-delta').withDefault(0); +/** @public */ export const neutralFillInputHoverDelta = create('neutral-fill-input-hover-delta').withDefault(0); +/** @public */ export const neutralFillInputRestDelta = create('neutral-fill-input-rest-delta').withDefault(0); +/** @public */ export const neutralFillRestDelta = create('neutral-fill-rest-delta').withDefault(7); +/** @public */ export const neutralFillStealthActiveDelta = create('neutral-fill-stealth-active-delta').withDefault(3); +/** @public */ export const neutralFillStealthFocusDelta = create('neutral-fill-stealth-focus-delta').withDefault(0); +/** @public */ export const neutralFillStealthHoverDelta = create('neutral-fill-stealth-hover-delta').withDefault(5); +/** @public */ export const neutralFillStealthRestDelta = create('neutral-fill-stealth-rest-delta').withDefault(0); +/** @public */ export const neutralFillStrongRestDelta = create('neutral-fill-strong-rest-delta').withDefault(0); +/** @public */ export const neutralFillStrongActiveDelta = create('neutral-fill-strong-active-delta').withDefault(-5); +/** @public */ export const neutralFillStrongFocusDelta = create('neutral-fill-strong-focus-delta').withDefault(0); +/** @public */ export const neutralFillStrongHoverDelta = create('neutral-fill-strong-hover-delta').withDefault(8); -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongRestDelta */ export const neutralFillToggleRestDelta = neutralFillStrongRestDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongHoverDelta */ export const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongActiveDelta */ export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongFocusDelta */ export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta; +/** @public */ export const neutralStrokeActiveDelta = create('neutral-stroke-active-delta').withDefault(16); +/** @public */ export const neutralStrokeFocusDelta = create('neutral-stroke-focus-delta').withDefault(25); +/** @public */ export const neutralStrokeHoverDelta = create('neutral-stroke-hover-delta').withDefault(40); +/** @public */ export const neutralStrokeRestDelta = create('neutral-stroke-rest-delta').withDefault(25); +/** @public */ export const strokeWidth = create('stroke-width').withDefault(1); -/** @deprecated */ +/** @public @deprecated Use strokeWidth */ export const outlineWidth = strokeWidth; +/** @public */ export const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px'); +/** @public */ export const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px'); +/** @public */ export const typeRampMinus1FontSize = create('type-ramp-minus1-font-size').withDefault('12px'); +/** @public */ export const typeRampMinus1LineHeight = create('type-ramp-minus1-line-height').withDefault('16px'); +/** @public */ export const typeRampMinus2FontSize = create('type-ramp-minus2-font-size').withDefault('10px'); +/** @public */ export const typeRampMinus2LineHeight = create('type-ramp-minus2-line-height').withDefault('14px'); +/** @public */ export const typeRampPlus1FontSize = create('type-ramp-plus1-font-size').withDefault('16px'); +/** @public */ export const typeRampPlus1LineHeight = create('type-ramp-plus1-line-height').withDefault('22px'); +/** @public */ export const typeRampPlus2FontSize = create('type-ramp-plus2-font-size').withDefault('20px'); +/** @public */ export const typeRampPlus2LineHeight = create('type-ramp-plus2-line-height').withDefault('28px'); +/** @public */ export const typeRampPlus3FontSize = create('type-ramp-plus3-font-size').withDefault('24px'); +/** @public */ export const typeRampPlus3LineHeight = create('type-ramp-plus3-line-height').withDefault('32px'); +/** @public */ export const typeRampPlus4FontSize = create('type-ramp-plus4-font-size').withDefault('28px'); +/** @public */ export const typeRampPlus4LineHeight = create('type-ramp-plus4-line-height').withDefault('36px'); +/** @public */ export const typeRampPlus5FontSize = create('type-ramp-plus5-font-size').withDefault('32px'); +/** @public */ export const typeRampPlus5LineHeight = create('type-ramp-plus5-line-height').withDefault('40px'); +/** @public */ export const typeRampPlus6FontSize = create('type-ramp-plus6-font-size').withDefault('40px'); +/** @public */ export const typeRampPlus6LineHeight = create('type-ramp-plus6-line-height').withDefault('52px'); -export const neutralPalette = create('neutral-palette').withDefault(PaletteRGB.create(middleGrey)); -export const accentPalette = create('accent-palette').withDefault(PaletteRGB.create(accentBase)); +/** @public */ +export const neutralPalette = create({ name: 'neutral-palette', cssCustomPropertyName: null }).withDefault( + PaletteRGB.create(middleGrey), +); +/** @public */ +export const accentPalette = create({ name: 'accent-palette', cssCustomPropertyName: null }).withDefault( + PaletteRGB.create(accentBase), +); -export const fillColor = create('fill-color').withDefault(element => { +/** @public */ +export const fillColor = create('fill-color').withDefault(element => { const palette = neutralPalette.getValueFor(element); return palette.get(0); }); @@ -147,34 +228,46 @@ enum ContrastTarget { large = 7, } -// Accent Foreground Cut -const accentForegroundCutByContrast = (contrast: number) => (element: HTMLElement) => - accentForegroundCutAlgorithm(accentPalette.getValueFor(element).source, contrast); -export const AccentForegroundCut = DI.createInterface<(element: HTMLElement) => SwatchRGB>( - 'accent-foreground-cut', - builder => builder.instance((element: HTMLElement) => accentForegroundCutByContrast(ContrastTarget.normal)(element)), -); -export const AccentForegroundCutLarge = DI.createInterface<(element: HTMLElement) => SwatchRGB>( - 'accent-foreground-cut-large', - builder => builder.instance((element: HTMLElement) => accentForegroundCutByContrast(ContrastTarget.large)(element)), -); - -export const accentForegroundCut = create('accent-foreground-cut').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentForegroundCut)(element); +// Foreground On Accent +const foregroundOnAccentByContrast = (contrast: number) => (element: HTMLElement) => + foregroundOnAccentAlgorithm(accentPalette.getValueFor(element).source, contrast); +/** @public */ +export const foregroundOnAccentRecipe = create({ + name: 'foreground-on-accent-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchRGB => + foregroundOnAccentByContrast(ContrastTarget.normal)(element), }); -export const accentForegroundCutLarge = create('accent-foreground-cut-large').withDefault( - (element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentForegroundCutLarge)(element); - }, +/** @public */ +export const foregroundOnAccentLargeRecipe = create({ + name: 'foreground-on-accent-large-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchRGB => + foregroundOnAccentByContrast(ContrastTarget.large)(element), +}); + +/** @public */ +export const foregroundOnAccentRest = create('foreground-on-accent-rest').withDefault((element: HTMLElement) => + foregroundOnAccentRecipe.getValueFor(element).evaluate(element), ); +/** @public @deprecated Use foregroundOnAccentRest */ +export const accentForegroundCut = foregroundOnAccentRest; +/** @public */ +export const foregroundOnAccentRestLarge = create( + 'foreground-on-accent-rest-large', +).withDefault((element: HTMLElement) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element)); +/** @public @deprecated Use foregroundOnAccentRestLarge */ +export const accentForegroundCutLarge = foregroundOnAccentRestLarge; // Accent Fill -const accentFillByContrast = (contrast: number) => (element: HTMLElement, fill?: SwatchRGB) => { +const accentFillByContrast = (contrast: number) => (element: HTMLElement, reference?: SwatchRGB) => { return accentFillAlgorithm( accentPalette.getValueFor(element), neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), - accentForegroundCut.getValueFor(element), + reference || fillColor.getValueFor(element), + foregroundOnAccentRest.getValueFor(element), contrast, accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), @@ -184,23 +277,33 @@ const accentFillByContrast = (contrast: number) => (element: HTMLElement, fill?: neutralFillActiveDelta.getValueFor(element), ); }; -export const AccentFill = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('accent-fill', builder => builder.instance(accentFillByContrast(ContrastTarget.normal))); +/** @public */ +export const accentFillRecipe = create({ + name: 'accent-fill-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + accentFillByContrast(ContrastTarget.normal)(element), +}); -export const accentFillRest = create('accent-fill-rest').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentFill)(element).rest; +/** @public */ +export const accentFillRest = create('accent-fill-rest').withDefault((element: HTMLElement) => { + return accentFillRecipe.getValueFor(element).evaluate(element).rest; }); -export const accentFillHover = create('accent-fill-hover').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentFill)(element).hover; +/** @public */ +export const accentFillHover = create('accent-fill-hover').withDefault((element: HTMLElement) => { + return accentFillRecipe.getValueFor(element).evaluate(element).hover; }); -export const accentFillActive = create('accent-fill-active').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentFill)(element).active; +/** @public */ +export const accentFillActive = create('accent-fill-active').withDefault((element: HTMLElement) => { + return accentFillRecipe.getValueFor(element).evaluate(element).active; }); -export const accentFillFocus = create('accent-fill-focus').withDefault((element: HTMLElement) => { - return DI.findResponsibleContainer(element).get(AccentFill)(element).focus; +/** @public */ +export const accentFillFocus = create('accent-fill-focus').withDefault((element: HTMLElement) => { + return accentFillRecipe.getValueFor(element).evaluate(element).focus; }); +// Accent Foreground const accentForegroundByContrast = (contrast: number) => (element: HTMLElement) => { return accentForegroundAlgorithm( accentPalette.getValueFor(element), @@ -213,134 +316,158 @@ const accentForegroundByContrast = (contrast: number) => (element: HTMLElement) ); }; -/** - * Accent Foreground - */ -export const AccentForeground = DI.createInterface< - (element: HTMLElement) => ReturnType ->('accent-foreground', builder => builder.instance(accentForegroundByContrast(ContrastTarget.normal))); +/** @public */ +export const accentForegroundRecipe = create({ + name: 'accent-foreground-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + accentForegroundByContrast(ContrastTarget.normal)(element), +}); -export const accentForegroundRest = create('accent-foreground-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).rest, +/** @public */ +export const accentForegroundRest = create('accent-foreground-rest').withDefault( + (element: HTMLElement) => accentForegroundRecipe.getValueFor(element).evaluate(element).rest, ); -export const accentForegroundHover = create('accent-foreground-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).hover, +/** @public */ +export const accentForegroundHover = create('accent-foreground-hover').withDefault( + (element: HTMLElement) => accentForegroundRecipe.getValueFor(element).evaluate(element).hover, ); -export const accentForegroundActive = create('accent-foreground-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).active, +/** @public */ +export const accentForegroundActive = create('accent-foreground-active').withDefault( + (element: HTMLElement) => accentForegroundRecipe.getValueFor(element).evaluate(element).active, ); -export const accentForegroundFocus = create('accent-foreground-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(AccentForeground)(element).focus, +/** @public */ +export const accentForegroundFocus = create('accent-foreground-focus').withDefault( + (element: HTMLElement) => accentForegroundRecipe.getValueFor(element).evaluate(element).focus, ); // Neutral Divider -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), - ), +/** @public */ +export const neutralStrokeDividerRecipe = create({ + name: 'neutral-stroke-divider-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): Swatch => + neutralDividerAlgorithm( + neutralPalette.getValueFor(element), + fillColor.getValueFor(element), + neutralStrokeDividerRestDelta.getValueFor(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>( - 'neutral-fill-card', - builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => - neutralFillCardAlgorithm( - neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), - neutralFillCardRestDelta.getValueFor(element), - ), +}); +/** @public */ +export const neutralStrokeDividerRest = create('neutral-stroke-divider-rest').withDefault(element => + neutralStrokeDividerRecipe.getValueFor(element).evaluate(element), +); +/** @public @deprecated Use neutralStrokeDividerRest */ +export const neutralDivider = neutralStrokeDividerRest; + +// Neutral Fill Layer +/** @public */ +export const neutralFillLayerRecipe = create({ + name: 'neutral-fill-layer-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): Swatch => + neutralFillLayerAlgorithm( + neutralPalette.getValueFor(element), + reference || fillColor.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), ), +}); +/** @public */ +export const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault((element: HTMLElement) => + neutralFillLayerRecipe.getValueFor(element).evaluate(element), ); -export const neutralFillCard = create('neutral-fill-card').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralFillCard)(element), -); +/** @public @deprecated Use neutralFillLayerRest */ +export const neutralFillCard = neutralFillLayerRest; // Neutral Fill Inverse -export const NeutralFillInverse = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill-inverse', builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => +/** @public */ +export const neutralFillInverseRecipe = create({ + name: 'neutral-fill-inverse-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => neutralFillInverseAlgorithm( neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralFillInverseRestDelta.getValueFor(element), neutralFillInverseHoverDelta.getValueFor(element), neutralFillInverseActiveDelta.getValueFor(element), neutralFillInverseFocusDelta.getValueFor(element), ), - ), -); +}); -export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).rest, +/** @public */ +export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault( + (element: HTMLElement) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).hover, +/** @public */ +export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault( + (element: HTMLElement) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).active, +/** @public */ +export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault( + (element: HTMLElement) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).active, ); -export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInverse)(element).focus, +/** @public */ +export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault( + (element: HTMLElement) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).focus, ); -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseRest */ export const neutralContrastFillRest = neutralFillInverseRest; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseHover */ export const neutralContrastFillHover = neutralFillInverseHover; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseActive */ export const neutralContrastFillActive = neutralFillInverseActive; -/** @deprecated */ +/** @public @deprecated Use neutralFillInverseFocus */ export const neutralContrastFillFocus = neutralFillInverseFocus; // Neutral Fill Input -export const NeutralFillInput = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill-input', builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => { - return NeutralFillInputAlgorithm( +/** @public */ +export const neutralFillInputRecipe = create({ + name: 'neutral-fill-input-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + neutralFillInputAlgorithm( neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element), - ); - }), -); + ), +}); -export const neutralFillInputRest = create('neutral-fill-input-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).rest, +/** @public */ +export const neutralFillInputRest = create('neutral-fill-input-rest').withDefault( + (element: HTMLElement) => neutralFillInputRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralFillInputHover = create('neutral-fill-input-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).hover, +/** @public */ +export const neutralFillInputHover = create('neutral-fill-input-hover').withDefault( + (element: HTMLElement) => neutralFillInputRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).focus, +/** @public */ +export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault( + (element: HTMLElement) => neutralFillInputRecipe.getValueFor(element).evaluate(element).focus, ); -export const neutralFillInputActive = create('neutral-fill-input-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillInput)(element).active, +/** @public */ +export const neutralFillInputActive = create('neutral-fill-input-active').withDefault( + (element: HTMLElement) => neutralFillInputRecipe.getValueFor(element).evaluate(element).active, ); // Neutral Fill Stealth -export const NeutralFillStealth = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill-stealth', builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => +/** @public */ +export const neutralFillStealthRecipe = create({ + name: 'neutral-fill-stealth-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => neutralFillStealthAlgorithm( neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralFillStealthRestDelta.getValueFor(element), neutralFillStealthHoverDelta.getValueFor(element), neutralFillStealthActiveDelta.getValueFor(element), @@ -350,253 +477,308 @@ export const NeutralFillStealth = DI.createInterface< neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element), ), - ), -); +}); -export const neutralFillStealthRest = create('neutral-fill-stealth-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).rest, +/** @public */ +export const neutralFillStealthRest = create('neutral-fill-stealth-rest').withDefault( + (element: HTMLElement) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralFillStealthHover = create('neutral-fill-stealth-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).hover, +/** @public */ +export const neutralFillStealthHover = create('neutral-fill-stealth-hover').withDefault( + (element: HTMLElement) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralFillStealthActive = create('neutral-fill-stealth-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).active, +/** @public */ +export const neutralFillStealthActive = create('neutral-fill-stealth-active').withDefault( + (element: HTMLElement) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).active, ); -export const neutralFillStealthFocus = create('neutral-fill-stealth-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStealth)(element).focus, +/** @public */ +export const neutralFillStealthFocus = create('neutral-fill-stealth-focus').withDefault( + (element: HTMLElement) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).focus, ); // Neutral Fill Strong // TODO: none of these are actually used, do we need them? -export const NeutralFillStrong = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill-strong', builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => +/** @public */ +export const neutralFillStrongRecipe = create({ + name: 'neutral-fill-strong-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => neutralFillContrastAlgorithm( neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralFillStrongRestDelta.getValueFor(element), neutralFillStrongHoverDelta.getValueFor(element), neutralFillStrongActiveDelta.getValueFor(element), neutralFillStrongFocusDelta.getValueFor(element), ), - ), -); +}); -export const neutralFillStrongRest = create('neutral-fill-strong-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).rest, +/** @public */ +export const neutralFillStrongRest = create('neutral-fill-strong-rest').withDefault( + (element: HTMLElement) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralFillStrongHover = create('neutral-fill-strong-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).hover, +/** @public */ +export const neutralFillStrongHover = create('neutral-fill-strong-hover').withDefault( + (element: HTMLElement) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralFillStrongActive = create('neutral-fill-strong-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).active, +/** @public */ +export const neutralFillStrongActive = create('neutral-fill-strong-active').withDefault( + (element: HTMLElement) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).active, ); -export const neutralFillStrongFocus = create('neutral-fill-strong-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFillStrong)(element).focus, +/** @public */ +export const neutralFillStrongFocus = create('neutral-fill-strong-focus').withDefault( + (element: HTMLElement) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).focus, ); -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongRest */ export const neutralFillToggleRest = neutralFillStrongRest; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongHover */ export const neutralFillToggleHover = neutralFillStrongHover; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongActive */ export const neutralFillToggleActive = neutralFillStrongActive; -/** @deprecated */ +/** @public @deprecated Use neutralFillStrongFocus */ export const neutralFillToggleFocus = neutralFillStrongFocus; // Neutral Fill -export const NeutralFill = DI.createInterface< - (element: HTMLElement, fill?: SwatchRGB) => ReturnType ->('neutral-fill', builder => - builder.instance((element: HTMLElement, fill?: SwatchRGB) => +/** @public */ +export const neutralFillRecipe = create({ + name: 'neutral-fill-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => neutralFillAlgorithm( neutralPalette.getValueFor(element), - fill || fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element), ), - ), -); -export const neutralFillRest = create('neutral-fill-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).rest, +}); +/** @public */ +export const neutralFillRest = create('neutral-fill-rest').withDefault( + (element: HTMLElement) => neutralFillRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralFillHover = create('neutral-fill-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).hover, +/** @public */ +export const neutralFillHover = create('neutral-fill-hover').withDefault( + (element: HTMLElement) => neutralFillRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralFillActive = create('neutral-fill-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).active, +/** @public */ +export const neutralFillActive = create('neutral-fill-active').withDefault( + (element: HTMLElement) => neutralFillRecipe.getValueFor(element).evaluate(element).active, ); -export const neutralFillFocus = create('neutral-fill-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralFill)(element).focus, +/** @public */ +export const neutralFillFocus = create('neutral-fill-focus').withDefault( + (element: HTMLElement) => neutralFillRecipe.getValueFor(element).evaluate(element).focus, ); // Focus Stroke Outer -export const FocusStrokeOuter = DI.createInterface<(element: HTMLElement) => SwatchRGB>('focus-stroke-outer', builder => - builder.instance((element: HTMLElement) => +/** @public */ +export const focusStrokeOuterRecipe = create({ + name: 'focus-stroke-outer-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => focusStrokeOuterAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), - ), -); +}); -export const focusStrokeOuter = create('focus-stroke-outer').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(FocusStrokeOuter)(element), +/** @public */ +export const focusStrokeOuter = create('focus-stroke-outer').withDefault((element: HTMLElement) => + focusStrokeOuterRecipe.getValueFor(element).evaluate(element), ); -/** @deprecated */ +/** @public @deprecated Use focusStrokeOuter */ export const neutralFocus = focusStrokeOuter; // Focus Stroke Inner -export const FocusStrokeInner = DI.createInterface<(element: HTMLElement) => SwatchRGB>('focus-stroke-inner', builder => - builder.instance((element: HTMLElement) => +/** @public */ +export const focusStrokeInnerRecipe = create({ + name: 'focus-stroke-inner-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => focusStrokeInnerAlgorithm( accentPalette.getValueFor(element), fillColor.getValueFor(element), focusStrokeOuter.getValueFor(element), ), - ), -); +}); -export const focusStrokeInner = create('focus-stroke-inner').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(FocusStrokeInner)(element), +/** @public */ +export const focusStrokeInner = create('focus-stroke-inner').withDefault((element: HTMLElement) => + focusStrokeInnerRecipe.getValueFor(element).evaluate(element), ); -/** @deprecated */ +/** @public @deprecated Use focusStrokeInner */ export const neutralFocusInnerAccent = focusStrokeInner; // Neutral Foreground Hint -export const NeutralForegroundHint = DI.createInterface<(element: HTMLElement) => SwatchRGB>( - 'neutral-foreground-hint', - builder => - builder.instance((element: HTMLElement) => - neutralForegroundHintAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), - ), -); +/** @public */ +export const neutralForegroundHintRecipe = create({ + name: 'neutral-foreground-hint-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralForegroundHintAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), +}); -export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralForegroundHint)(element), +/** @public */ +export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element: HTMLElement) => + neutralForegroundHintRecipe.getValueFor(element).evaluate(element), ); // Neutral Foreground -export const NeutralForeground = DI.createInterface< - (element: HTMLElement) => ReturnType ->('neutral-foreground', builder => - builder.instance((element: HTMLElement) => +/** @public */ +export const neutralForegroundRecipe = create({ + name: 'neutral-foreground-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => neutralForegroundAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)), - ), -); +}); -export const neutralForeground = create('neutral-foreground').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralForeground)(element), +/** @public */ +export const neutralForegroundRest = create('neutral-foreground-rest').withDefault((element: HTMLElement) => + neutralForegroundRecipe.getValueFor(element).evaluate(element), ); -/** @deprecated */ -export const neutralForegroundRest = neutralForeground; // Neutral Stroke -export const NeutralStroke = DI.createInterface<(element: HTMLElement) => ReturnType>( - 'neutral-stroke', - builder => - builder.instance((element: HTMLElement) => - neutralStrokeAlgorithm( - neutralPalette.getValueFor(element), - fillColor.getValueFor(element), - neutralStrokeRestDelta.getValueFor(element), - neutralStrokeHoverDelta.getValueFor(element), - neutralStrokeActiveDelta.getValueFor(element), - neutralStrokeFocusDelta.getValueFor(element), - ), - ), -); +/** @public */ +export const neutralStrokeRecipe = create({ + name: 'neutral-stroke-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): SwatchFamily => { + return neutralStrokeAlgorithm( + neutralPalette.getValueFor(element), + fillColor.getValueFor(element), + neutralStrokeRestDelta.getValueFor(element), + neutralStrokeHoverDelta.getValueFor(element), + neutralStrokeActiveDelta.getValueFor(element), + neutralStrokeFocusDelta.getValueFor(element), + ); + }, +}); -export const neutralStrokeRest = create('neutral-stroke-rest').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).rest, +/** @public */ +export const neutralStrokeRest = create('neutral-stroke-rest').withDefault( + (element: HTMLElement) => neutralStrokeRecipe.getValueFor(element).evaluate(element).rest, ); -export const neutralStrokeHover = create('neutral-stroke-hover').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).hover, +/** @public */ +export const neutralStrokeHover = create('neutral-stroke-hover').withDefault( + (element: HTMLElement) => neutralStrokeRecipe.getValueFor(element).evaluate(element).hover, ); -export const neutralStrokeActive = create('neutral-stroke-active').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).active, +/** @public */ +export const neutralStrokeActive = create('neutral-stroke-active').withDefault( + (element: HTMLElement) => neutralStrokeRecipe.getValueFor(element).evaluate(element).active, ); -export const neutralStrokeFocus = create('neutral-stroke-focus').withDefault( - (element: HTMLElement) => DI.findResponsibleContainer(element).get(NeutralStroke)(element).focus, +/** @public */ +export const neutralStrokeFocus = create('neutral-stroke-focus').withDefault( + (element: HTMLElement) => neutralStrokeRecipe.getValueFor(element).evaluate(element).focus, ); +/** @public @deprecated Use neutralStrokeRest */ +export const neutralOutlineRest = neutralStrokeRest; +/** @public @deprecated Use neutralStrokeHover */ +export const neutralOutlineHover = neutralStrokeHover; +/** @public @deprecated Use neutralStrokeActive */ +export const neutralOutlineActive = neutralStrokeActive; +/** @public @deprecated Use neutralStrokeFocus */ +export const neutralOutlineFocus = neutralStrokeFocus; // Neutral Layer Floating -export const NeutralLayerFloating = DI.createInterface<(element: HTMLElement) => SwatchRGB>( - 'neutral-layer-floating', - builder => - builder.instance((element: HTMLElement) => - neutralLayerFloatingAlgorithm( - neutralPalette.getValueFor(element), - baseLayerLuminance.getValueFor(element), - neutralFillCardRestDelta.getValueFor(element), - ), +/** @public */ +export const neutralLayerFloatingRecipe = create({ + name: 'neutral-layer-floating-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayerFloatingAlgorithm( + neutralPalette.getValueFor(element), + baseLayerLuminance.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), ), -); +}); -export const neutralLayerFloating = create('neutral-layer-floating').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralLayerFloating)(element), +/** @public */ +export const neutralLayerFloating = create('neutral-layer-floating').withDefault((element: HTMLElement) => + neutralLayerFloatingRecipe.getValueFor(element).evaluate(element), ); -// Neutral Layer L1 -export const NeutralLayerL1 = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-layer-L1', builder => - builder.instance((element: HTMLElement) => - neutralLayerL1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)), - ), -); +// Neutral Layer 1 +/** @public */ +export const neutralLayer1Recipe = create({ + name: 'neutral-layer-1-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)), +}); -export const neutralLayerL1 = create('neutral-layer-L1').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralLayerL1)(element), +/** @public */ +export const neutralLayer1 = create('neutral-layer-1').withDefault((element: HTMLElement) => + neutralLayer1Recipe.getValueFor(element).evaluate(element), ); -// Neutral Layer L2 -export const NeutralLayerL2 = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-layer-L2', builder => - builder.instance((element: HTMLElement) => - neutralLayerL2Algorithm( +// Neutral Layer 2 +/** @public */ +export const neutralLayer2Recipe = create({ + name: 'neutral-layer-2-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayer2Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardRestDelta.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), ), - ), -); +}); -export const neutralLayerL2 = create('neutral-layer-L2').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralLayerL2)(element), +/** @public */ +export const neutralLayer2 = create('neutral-layer-2').withDefault((element: HTMLElement) => + neutralLayer2Recipe.getValueFor(element).evaluate(element), ); -// Neutral Layer L3 -export const NeutralLayerL3 = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-layer-L3', builder => - builder.instance((element: HTMLElement) => - neutralLayerL3Algorithm( +// Neutral Layer 3 +/** @public */ +export const neutralLayer3Recipe = create({ + name: 'neutral-layer-3-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayer3Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardRestDelta.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), ), - ), -); +}); -export const neutralLayerL3 = create('neutral-layer-L3').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralLayerL3)(element), +/** @public */ +export const neutralLayer3 = create('neutral-layer-3').withDefault((element: HTMLElement) => + neutralLayer3Recipe.getValueFor(element).evaluate(element), ); -// Neutral Layer L4 -export const NeutralLayerL4 = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-layer-L4', builder => - builder.instance((element: HTMLElement) => - neutralLayerL4Algorithm( +// Neutral Layer 4 +/** @public */ +export const neutralLayer4Recipe = create({ + name: 'neutral-layer-4-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayer4Algorithm( neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), - neutralFillCardRestDelta.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), ), - ), -); +}); -export const neutralLayerL4 = create('neutral-layer-L4').withDefault((element: HTMLElement) => - DI.findResponsibleContainer(element).get(NeutralLayerL4)(element), +/** @public */ +export const neutralLayer4 = create('neutral-layer-4').withDefault((element: HTMLElement) => + neutralLayer4Recipe.getValueFor(element).evaluate(element), ); diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts index 9dc4b0448b081..73f10ac5d00df 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 { surfaceCornerRadius, fillColor, strokeWidth } from '../design-tokens'; +import { fillColor, layerCornerRadius, strokeWidth } from '../design-tokens'; export const dialogStyles = (context, definition) => css` :host([hidden]) { @@ -39,7 +39,7 @@ export const dialogStyles = (context, definition) => css` ${elevation} margin-top: auto; margin-bottom: auto; - border-radius: calc(${surfaceCornerRadius} * 1px); + border-radius: calc(${layerCornerRadius} * 1px); width: var(--dialog-width); height: var(--dialog-height); background: ${fillColor}; diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts index 2cca71b865533..bb12d95e8125f 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, neutralStrokeDivider, strokeWidth } from '../design-tokens'; +import { designUnit, neutralStrokeDividerRest, 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(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}; } `; diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts index 6adfa73b2bce0..2213da0538b58 100644 --- a/packages/web-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/src/flipper/flipper.styles.ts @@ -3,7 +3,7 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles'; import { - neutralForeground, + neutralForegroundRest, neutralFillStealthRest, neutralStrokeRest, disabledOpacity, @@ -25,7 +25,7 @@ export const flipperStyles = (context, definition) => margin: 0; position: relative; fill: currentcolor; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; background: transparent; border: none; outline: none; 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 7cee0d6bb68a2..3ab386987767c 100644 --- a/packages/web-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts @@ -6,7 +6,7 @@ import { bodyFont, controlCornerRadius, focusStrokeWidth, - neutralForeground, + neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, designUnit, @@ -27,7 +27,7 @@ export const optionStyles = (context, definition) => border-radius: calc(${controlCornerRadius} * 1px); border: calc(${focusStrokeWidth} * 1px) solid transparent; box-sizing: border-box; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; cursor: pointer; fill: currentcolor; font-size: ${typeRampBaseFontSize}; @@ -61,12 +61,12 @@ export const optionStyles = (context, definition) => :host(:not([aria-selected="true"]):hover) { background: ${neutralFillHover}; - color: ${neutralForeground}}; + color: ${neutralForegroundRest}}; } :host(:not([aria-selected="true"]):active) { background: ${neutralFillActive}; - color: ${neutralForeground}}; + color: ${neutralForegroundRest}}; } :host([disabled]) { 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 104db3d00eae5..0fec1f4302411 100644 --- a/packages/web-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/src/menu-item/menu-item.styles.ts @@ -4,7 +4,7 @@ import { SystemColors } from '@microsoft/fast-web-utilities'; import { heightNumber } from '../styles/index'; import { designUnit, - neutralForeground, + neutralForegroundRest, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -34,7 +34,7 @@ export const menuItemStyles = (context, definition) => padding: 0; margin: 0 calc(${designUnit} * 1px); white-space: nowrap; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; fill: currentcolor; cursor: pointer; font-size: ${typeRampBaseFontSize}; @@ -89,7 +89,7 @@ export const menuItemStyles = (context, definition) => :host(:active), :host(.expanded) { background: ${neutralFillStealthActive}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } :host([disabled]) { @@ -131,7 +131,7 @@ export const menuItemStyles = (context, definition) => :host(:active) .start, :host(:active) .end, :host(:active)::slotted(svg) { - fill: ${neutralForeground}; + fill: ${neutralForegroundRest}; } :host(.indent-1[aria-haspopup="menu"]), @@ -210,7 +210,7 @@ export const menuItemStyles = (context, definition) => width: 100%; height: 100%; display: block; - fill: ${neutralForeground}; + fill: ${neutralForegroundRest}; pointer-events: none; } diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts index 6417fc0c9643d..12538d2a8fb23 100644 --- a/packages/web-components/src/menu/menu.styles.ts +++ b/packages/web-components/src/menu/menu.styles.ts @@ -2,12 +2,12 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { elevation } from '../styles/index'; import { - neutralLayerFloating, - strokeWidth, - surfaceCornerRadius, controlCornerRadius, designUnit, - neutralStrokeDivider, + layerCornerRadius, + neutralLayerFloating, + neutralStrokeDividerRest, + strokeWidth, } from '../design-tokens'; export const menuStyles = (context, definition) => @@ -16,7 +16,7 @@ export const menuStyles = (context, definition) => --elevation: 11; background: ${neutralLayerFloating}; border: calc(${strokeWidth} * 1px) solid transparent; - border-radius: ${surfaceCornerRadius}; + border-radius: ${layerCornerRadius}; ${elevation} margin: 0; border-radius: calc(${controlCornerRadius} * 1px); @@ -35,6 +35,6 @@ export const menuStyles = (context, definition) => height: 0; margin: 0; border: none; - border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider}; + border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}; } `; 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 d17b4cbb34f7d..92bfb444a1e47 100644 --- a/packages/web-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/src/number-field/number-field.styles.ts @@ -6,7 +6,7 @@ import { appearanceBehavior } from '../utilities/behaviors'; import { neutralFillRest, neutralFillHover, - neutralForeground, + neutralForegroundRest, neutralFillInputRest, neutralStrokeRest, controlCornerRadius, @@ -83,7 +83,7 @@ export const numberFieldStyles = (context, definition) => position: relative; display: flex; flex-direction: row; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; background: ${neutralFillInputRest}; border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; @@ -119,7 +119,7 @@ export const numberFieldStyles = (context, definition) => .label { display: block; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -151,11 +151,11 @@ export const numberFieldStyles = (context, definition) => } .step-up:before { - border-bottom-color: ${neutralForeground}; + border-bottom-color: ${neutralForegroundRest}; } .step-down:before { - border-top-color: ${neutralForeground}; + border-top-color: ${neutralForegroundRest}; } ::slotted(svg) { diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts index c3fc485d58f50..5301f2d77d893 100644 --- a/packages/web-components/src/radio/radio.styles.ts +++ b/packages/web-components/src/radio/radio.styles.ts @@ -7,7 +7,7 @@ import { strokeWidth, neutralStrokeRest, neutralFillInputRest, - neutralForeground, + neutralForegroundRest, neutralFillInputHover, neutralStrokeHover, neutralFillInputActive, @@ -54,7 +54,7 @@ export const radioStyles = (context, definition) => .label { font-family: var(--body-font); - color: ${neutralForeground}; + color: ${neutralForegroundRest}; ${ /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ '' } padding-inline-start: calc(${designUnit} * 2px + 2px); @@ -76,8 +76,8 @@ export const radioStyles = (context, definition) => bottom: 5px; border-radius: 50%; display: inline-block; - background: ${neutralForeground}; - fill: ${neutralForeground}; + background: ${neutralForegroundRest}; + fill: ${neutralForegroundRest}; opacity: 0; pointer-events: none; } diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts index 47cdf9ee263be..e0348022da1dd 100644 --- a/packages/web-components/src/select/select.styles.ts +++ b/packages/web-components/src/select/select.styles.ts @@ -10,7 +10,7 @@ import { focusStrokeOuter, neutralFillInputRest, neutralStrokeRest, - neutralForeground, + neutralForegroundRest, neutralLayerFloating, strokeWidth, controlCornerRadius, @@ -53,7 +53,7 @@ export const selectStyles = (context, definition) => border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; box-sizing: border-box; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; font-family: ${bodyFont}; height: calc(${heightNumber} * 1px); position: relative; @@ -137,7 +137,7 @@ export const selectStyles = (context, definition) => :host([disabled]:hover) { background: ${neutralFillStealthRest}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; fill: currentcolor; } diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts index 6ee7be50a371b..c78d33622f8bb 100644 --- a/packages/web-components/src/slider/slider.styles.ts +++ b/packages/web-components/src/slider/slider.styles.ts @@ -6,7 +6,7 @@ import { designUnit, controlCornerRadius, focusStrokeOuter, - neutralForeground, + neutralForegroundRest, neutralStrokeHover, neutralStrokeActive, density, @@ -57,15 +57,15 @@ export const sliderStyles = (context, defintion) => border: none; width: calc(var(--thumb-size) * 1px); height: calc(var(--thumb-size) * 1px); - background: ${neutralForeground}; + background: ${neutralForegroundRest}; border-radius: 50%; } .thumb-cursor:hover { - background: ${neutralForeground};; + background: ${neutralForegroundRest};; border-color: ${neutralStrokeHover}; } .thumb-cursor:active { - background: ${neutralForeground}; + background: ${neutralForegroundRest}; border-color: ${neutralStrokeActive}; } :host(.horizontal) .thumb-container { diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts index 338eaedda144d..f0e1b378267ec 100644 --- a/packages/web-components/src/styles/patterns/button.ts +++ b/packages/web-components/src/styles/patterns/button.ts @@ -4,7 +4,7 @@ import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsof import { heightNumber } from '../size'; import { neutralFillRest, - neutralForeground, + neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, controlCornerRadius, @@ -45,7 +45,7 @@ export const baseButtonStyles = (context, definition) => height: calc(${heightNumber} * 1px); min-width: calc(${heightNumber} * 1px); background-color: ${neutralFillRest}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; border-radius: calc(${controlCornerRadius} * 1px); fill: currentcolor; cursor: pointer; @@ -338,7 +338,7 @@ export const LightweightButtonStyles = css` } :host([appearance="lightweight"]) .control:${focusVisible} .content::before { - background: ${neutralForeground}; + background: ${neutralForegroundRest}; height: calc(${focusStrokeWidth} * 1px); } `.withBehaviors( diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts index bdda5347bdb23..24b0e1a9be5da 100644 --- a/packages/web-components/src/switch/switch.styles.ts +++ b/packages/web-components/src/switch/switch.styles.ts @@ -13,7 +13,7 @@ import { neutralFillInputActive, neutralStrokeActive, focusStrokeOuter, - neutralForeground, + neutralForegroundRest, strokeWidth, accentForegroundCut, accentFillRest, @@ -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: ${neutralForeground}; + background: ${neutralForegroundRest}; border-radius: 50%; transition: all 0.2s ease-in-out; } .status-message { - color: ${neutralForeground}; + color: ${neutralForegroundRest}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -104,7 +104,7 @@ export const switchStyles = (context, defintiion) => } .label { - color: ${neutralForeground}; + color: ${neutralForegroundRest}; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; margin-inline-end: calc(${designUnit} * 2px + 2px); diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts index 8e4e94c722350..d0de22bc2e611 100644 --- a/packages/web-components/src/tabs/tab/tab.styles.ts +++ b/packages/web-components/src/tabs/tab/tab.styles.ts @@ -8,7 +8,7 @@ import { bodyFont, designUnit, density, - neutralForeground, + neutralForegroundRest, controlCornerRadius, strokeWidth, focusStrokeOuter, @@ -25,7 +25,7 @@ export const tabStyles = (context, definition) => line-height: ${typeRampBaseLineHeight}; height: calc(${heightNumber} * 1px); padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px); - color: ${neutralForeground}; + color: ${neutralForegroundRest}; border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid transparent; align-items: center; @@ -40,7 +40,7 @@ export const tabStyles = (context, definition) => :host(:hover), :host(:active) { - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } :host(:${focusVisible}) { @@ -65,7 +65,7 @@ export const tabStyles = (context, definition) => :host(.vertical:hover), :host(.vertical:active) { - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } :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 5319ffca7d822..d4c2e33d136c0 100644 --- a/packages/web-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/src/tabs/tabs.styles.ts @@ -7,7 +7,7 @@ import { typeRampBaseLineHeight, controlCornerRadius, accentFillRest, - neutralForeground, + neutralForegroundRest, } 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: ${neutralForeground}; + color: ${neutralForegroundRest}; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; } 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 b76e5c94d397d..28564e2192172 100644 --- a/packages/web-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/src/text-area/text-area.styles.ts @@ -6,7 +6,7 @@ import { appearanceBehavior } from '../utilities/behaviors'; import { neutralFillRest, neutralFillHover, - neutralForeground, + neutralForegroundRest, neutralFillInputRest, neutralStrokeRest, neutralFillInputHover, @@ -65,7 +65,7 @@ export const textAreaStyles = (context, definition) => .control { box-sizing: border-box; position: relative; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; background: ${neutralFillInputRest}; border-radius: calc(var(--corner-radius) * 1px); border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; @@ -114,7 +114,7 @@ export const textAreaStyles = (context, definition) => .label { display: block; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; 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 1101e801857e4..e72911ee83adf 100644 --- a/packages/web-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/src/text-field/text-field.styles.ts @@ -7,7 +7,7 @@ import { neutralFillRest, neutralFillHover, bodyFont, - neutralForeground, + neutralForegroundRest, neutralFillInputRest, controlCornerRadius, strokeWidth, @@ -79,7 +79,7 @@ export const textFieldStyles = (context, definition) => position: relative; display: flex; flex-direction: row; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; background: ${neutralFillInputRest}; border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest}; @@ -96,7 +96,7 @@ export const textFieldStyles = (context, definition) => margin-bottom: auto; border: none; padding: 0 calc(var(--design-unit) * 2px + 1px); - color: ${neutralForeground}; + color: ${neutralForegroundRest}; font-family: inherit; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; @@ -111,7 +111,7 @@ export const textFieldStyles = (context, definition) => .label { display: block; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; cursor: pointer; font-size: ${typeRampBaseFontSize}; line-height: ${typeRampBaseLineHeight}; diff --git a/packages/web-components/src/tooltip/index.ts b/packages/web-components/src/tooltip/index.ts index 44addb1960bda..65f7a20390aa4 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, NeutralFillInverse } from '../design-tokens'; +import { Tooltip as FoundationTooltip, tooltipTemplate as template } from '@microsoft/fast-foundation'; +import { fillColor, neutralFillInverseRecipe } from '../design-tokens'; import { tooltipStyles as styles } from './tooltip.styles'; /** @@ -13,10 +13,10 @@ export class Tooltip extends FoundationTooltip { public connectedCallback(): void { super.connectedCallback(); - const recipe = DI.findResponsibleContainer(this.parentElement!).get(NeutralFillInverse); + const recipe = neutralFillInverseRecipe.getValueFor(this); const parentFill = fillColor.getValueFor(this.parentElement!); - fillColor.setValueFor(this, (target: HTMLElement) => recipe(target, parentFill).rest); + fillColor.setValueFor(this, (target: HTMLElement) => recipe.evaluate(target, parentFill).rest); } } diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts index 8b76184dd6768..ffdc98d450c7f 100644 --- a/packages/web-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/src/tooltip/tooltip.styles.ts @@ -4,7 +4,7 @@ import { elevation } from '../styles/index'; import { controlCornerRadius, strokeWidth, - neutralForeground, + neutralForegroundRest, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, @@ -28,7 +28,7 @@ export const tooltipStyles = (context, definition) => border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid transparent; background: ${fillColor}; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; padding: 4px 12px; height: fit-content; width: fit-content; 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 f5de768aa359f..3aa493d4948f6 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -1,7 +1,6 @@ import { css, cssPartial } from '@microsoft/fast-element'; import { DesignToken, - DI, disabledCursor, display, focusVisible, @@ -10,26 +9,26 @@ import { import { SystemColors } from '@microsoft/fast-web-utilities'; import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index'; import { + accentForegroundRest, baseHeightMultiplier, - designUnit, - density, - neutralForeground, - neutralFillStealthRest, bodyFont, + controlCornerRadius, + density, + designUnit, + disabledOpacity, focusStrokeOuter, + neutralFillRecipe, + neutralFillRest, + neutralFillStealthActive, + neutralFillStealthHover, + neutralFillStealthRecipe, + neutralFillStealthRest, + neutralForegroundRest, + strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, - disabledOpacity, - accentForegroundRest, - controlCornerRadius, - strokeWidth, - neutralFillStealthHover, - neutralFillStealthActive, - NeutralFillStealth, - neutralFillRest, - NeutralFill, } from '../design-tokens'; -import { SwatchRGB } from '../color-vNext/swatch'; +import { Swatch } from '../color-vNext/swatch'; const ltr = css` .expand-collapse-glyph { @@ -63,19 +62,19 @@ const rtl = css` export const expandCollapseButtonSize = cssPartial`((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`; -const expandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-hover').withDefault( +const expandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-hover').withDefault( (target: HTMLElement) => { - const recipe = DI.findResponsibleContainer(target).get(NeutralFillStealth); - return recipe(target, recipe(target).hover).hover; + const recipe = neutralFillStealthRecipe.getValueFor(target); + return recipe.evaluate(target, recipe.evaluate(target).hover).hover; }, ); -const selectedExpandCollapseHoverBehavior = DesignToken.create( +const selectedExpandCollapseHoverBehavior = DesignToken.create( 'tree-item-expand-collapse-selected-hover', ).withDefault((target: HTMLElement) => { - const baseRecipe = DI.findResponsibleContainer(target).get(NeutralFill); - const buttonRecipe = DI.findResponsibleContainer(target).get(NeutralFillStealth); - return buttonRecipe(target, baseRecipe(target).rest).hover; + const baseRecipe = neutralFillRecipe.getValueFor(target); + const buttonRecipe = neutralFillStealthRecipe.getValueFor(target); + return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover; }); export const treeItemStyles = (context, definition) => @@ -84,7 +83,7 @@ export const treeItemStyles = (context, definition) => contain: content; position: relative; outline: none; - color: ${neutralForeground}; + color: ${neutralForegroundRest}; background: ${neutralFillStealthRest}; cursor: pointer; font-family: ${bodyFont}; @@ -111,7 +110,7 @@ export const treeItemStyles = (context, definition) => :host(:${focusVisible}) .positioning-region { border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter}; border-radius: calc(${controlCornerRadius} * 1px); - color: ${neutralForeground}; + color: ${neutralForegroundRest}; } .positioning-region::before { @@ -172,7 +171,7 @@ export const treeItemStyles = (context, definition) => transition: transform 0.1s linear; transform: rotate(-45deg); pointer-events: none; - fill: ${neutralForeground}; + fill: ${neutralForegroundRest}; } .start, .end {