From 8e5d11b34d3eb91d5131634dd76064a49bd37129 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Thu, 17 Jun 2021 17:10:21 -0700 Subject: [PATCH] (web-components) standardized remaining design token recipe types (#18602) Standardized remaining design token recipe types --- ...-610e5188-329e-4066-b3ba-dd0be153a535.json | 7 ++ .../web-components/src/color-vNext/recipe.ts | 3 +- .../src/color-vNext/recipes/accent-fill.ts | 7 +- .../color-vNext/recipes/accent-foreground.ts | 3 +- .../recipes/neutral-fill-contrast.ts | 3 +- .../color-vNext/recipes/neutral-fill-input.ts | 3 +- .../recipes/neutral-fill-inverse.ts | 3 +- .../recipes/neutral-fill-stealth.ts | 3 +- .../src/color-vNext/recipes/neutral-fill.ts | 3 +- .../recipes/neutral-layer-card-container.ts | 8 +- .../src/color-vNext/recipes/neutral-stroke.ts | 7 +- .../utilities/base-layer-luminance.ts | 4 +- packages/web-components/src/design-tokens.ts | 110 +++++++++++------- 13 files changed, 104 insertions(+), 60 deletions(-) create mode 100644 change/@fluentui-web-components-610e5188-329e-4066-b3ba-dd0be153a535.json diff --git a/change/@fluentui-web-components-610e5188-329e-4066-b3ba-dd0be153a535.json b/change/@fluentui-web-components-610e5188-329e-4066-b3ba-dd0be153a535.json new file mode 100644 index 0000000000000..186475eef4232 --- /dev/null +++ b/change/@fluentui-web-components-610e5188-329e-4066-b3ba-dd0be153a535.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Standardized remaining design token recipe types", + "packageName": "@fluentui/web-components", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/color-vNext/recipe.ts b/packages/web-components/src/color-vNext/recipe.ts index dde826a5a32a9..76068c5e39560 100644 --- a/packages/web-components/src/color-vNext/recipe.ts +++ b/packages/web-components/src/color-vNext/recipe.ts @@ -1,6 +1,7 @@ import { Swatch } from './swatch'; -export interface SwatchFamily { +/** @public */ +export interface InteractiveSwatchSet { /** * The swatch to apply to the rest state */ 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 29bb34bc0fba9..65337500a2d6c 100644 --- a/packages/web-components/src/color-vNext/recipes/accent-fill.ts +++ b/packages/web-components/src/color-vNext/recipes/accent-fill.ts @@ -1,5 +1,6 @@ import { inRange } from 'lodash-es'; import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; /** @@ -7,7 +8,7 @@ import { Swatch } from '../swatch'; */ export function accentFill( palette: Palette, - neutralPaletteRGB: Palette, + neutralPalette: Palette, reference: Swatch, textColor: Swatch, contrastTarget: number, @@ -17,9 +18,9 @@ export function accentFill( neutralFillRestDelta: number, neutralFillHoverDelta: number, neutralFillActiveDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { const accent = palette.source; - const referenceIndex = neutralPaletteRGB.closestIndexOf(reference); + const referenceIndex = neutralPalette.closestIndexOf(reference); const swapThreshold = Math.max(neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta); const direction = referenceIndex >= swapThreshold ? -1 : 1; const paletteLength = palette.swatches.length; 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 cad11adf6a48f..d7f36a0d03c49 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,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -13,7 +14,7 @@ export function accentForeground( hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { const accent = palette.source; const accentIndex = palette.closestIndexOf(accent); const direction = directionByIsDark(reference); 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 513c0f588d940..f5baee323d747 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,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -12,7 +13,7 @@ export function neutralFillContrast( hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { 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 f650bb4f7cdd2..440744ee3b4d4 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,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -12,7 +13,7 @@ export function neutralFillInput( hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { 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 f2ba849af365c..a64264a48e4cd 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,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -12,7 +13,7 @@ export function neutralFillInverse( hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { 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-stealth.ts b/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts index 70d29e9349ec8..95bb1d26a3a6e 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,4 +1,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; /** @@ -15,7 +16,7 @@ export function neutralFillStealth( fillHoverDelta: number, fillActiveDelta: number, fillFocusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { 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 21ca42dde2f7a..6349f89019cc6 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,5 @@ import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; /** @@ -18,7 +19,7 @@ export function neutralFill( hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { 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-layer-card-container.ts b/packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts index 0bc149bf0e7b5..8923a1676c21f 100644 --- 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 @@ -1,16 +1,16 @@ import { clamp } from '@microsoft/fast-colors'; -import { PaletteRGB } from '../palette'; -import { SwatchRGB } from '../swatch'; +import { Palette } from '../palette'; +import { Swatch } from '../swatch'; import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance'; /** * @internal */ export function neutralLayerCardContainer( - palette: PaletteRGB, + palette: Palette, relativeLuminance: number, layerDelta: number, -): SwatchRGB { +): Swatch { const oldCardIndex: number = clamp( palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - layerDelta, 0, 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 cd367e6f4fc7a..c51920192c0cb 100644 --- a/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts +++ b/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts @@ -1,4 +1,5 @@ -import { PaletteRGB } from '../palette'; +import { Palette } from '../palette'; +import { InteractiveSwatchSet } from '../recipe'; import { Swatch } from '../swatch'; import { directionByIsDark } from '../utilities/direction-by-is-dark'; @@ -6,13 +7,13 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark'; * @internal */ export function neutralStroke( - palette: PaletteRGB, + palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, -): Record<"rest" | "hover" | "active" | "focus", Swatch> { +): InteractiveSwatchSet { const referenceIndex = palette.closestIndexOf(reference); const direction = directionByIsDark(reference); diff --git a/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts b/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts index 0345451adf360..09fbf998ffd0d 100644 --- a/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts +++ b/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts @@ -1,5 +1,5 @@ -import { SwatchRGB } from '../swatch'; +import { Swatch, SwatchRGB } from '../swatch'; -export function baseLayerLuminanceSwatch(luminance: number) { +export function baseLayerLuminanceSwatch(luminance: number): Swatch { return SwatchRGB.create(luminance, luminance, luminance); } diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index 78cb16c30a3dc..49422a36e2cb7 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -1,7 +1,7 @@ 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 { Palette, PaletteRGB } from './color-vNext/palette'; +import { Swatch } 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 { foregroundOnAccent as foregroundOnAccentAlgorithm } from './color-vNext/recipes/foreground-on-accent'; @@ -16,8 +16,9 @@ import { focusStrokeInner as focusStrokeInnerAlgorithm, focusStrokeOuter as focusStrokeOuterAlgorithm, } from './color-vNext/recipes/focus-stroke'; -import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color-vNext/recipes/neutral-foreground-hint'; import { neutralForeground as neutralForegroundAlgorithm } from './color-vNext/recipes/neutral-foreground'; +import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color-vNext/recipes/neutral-foreground-hint'; +import { neutralLayerCardContainer as neutralLayerCardContainerAlgorithm } from './color-vNext/recipes/neutral-layer-card-container'; import { neutralLayerFloating as neutralLayerFloatingAlgorithm } from './color-vNext/recipes/neutral-layer-floating'; import { neutralLayer1 as neutralLayer1Algorithm } from './color-vNext/recipes/neutral-layer-1'; import { neutralLayer2 as neutralLayer2Algorithm } from './color-vNext/recipes/neutral-layer-2'; @@ -26,16 +27,18 @@ import { neutralLayer4 as neutralLayer4Algorithm } from './color-vNext/recipes/n 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'; +import { InteractiveSwatchSet } from './color-vNext/recipe'; -// eslint-disable-next-line @typescript-eslint/ban-types -export interface Recipe | symbol | {}> { +/** @public */ +export interface Recipe { evaluate(element: HTMLElement, reference?: Swatch): T; } +/** @public */ export type ColorRecipe = Recipe; -export type ColorFamilyRecipe = Recipe; +/** @public */ +export type InteractiveColorRecipe = Recipe; const { create } = DesignToken; @@ -209,11 +212,11 @@ export const typeRampPlus6FontSize = create('type-ramp-plus6-font-size') export const typeRampPlus6LineHeight = create('type-ramp-plus6-line-height').withDefault('52px'); /** @public */ -export const neutralPalette = create({ name: 'neutral-palette', cssCustomPropertyName: null }).withDefault( +export const neutralPalette = create({ name: 'neutral-palette', cssCustomPropertyName: null }).withDefault( PaletteRGB.create(middleGrey), ); /** @public */ -export const accentPalette = create({ name: 'accent-palette', cssCustomPropertyName: null }).withDefault( +export const accentPalette = create({ name: 'accent-palette', cssCustomPropertyName: null }).withDefault( PaletteRGB.create(accentBase), ); @@ -229,23 +232,23 @@ enum ContrastTarget { } // Foreground On Accent -const foregroundOnAccentByContrast = (contrast: number) => (element: HTMLElement) => - foregroundOnAccentAlgorithm(accentPalette.getValueFor(element).source, contrast); +const foregroundOnAccentByContrast = (contrast: number) => (element: HTMLElement, reference?: Swatch) => + foregroundOnAccentAlgorithm(reference || fillColor.getValueFor(element), contrast); /** @public */ export const foregroundOnAccentRecipe = create({ name: 'foreground-on-accent-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchRGB => - foregroundOnAccentByContrast(ContrastTarget.normal)(element), + evaluate: (element: HTMLElement, reference?: Swatch): Swatch => + foregroundOnAccentByContrast(ContrastTarget.normal)(element, reference), }); /** @public */ export const foregroundOnAccentLargeRecipe = create({ name: 'foreground-on-accent-large-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchRGB => - foregroundOnAccentByContrast(ContrastTarget.large)(element), + evaluate: (element: HTMLElement, reference?: Swatch): Swatch => + foregroundOnAccentByContrast(ContrastTarget.large)(element, reference), }); /** @public */ @@ -262,8 +265,8 @@ export const foregroundOnAccentRestLarge = create( export const accentForegroundCutLarge = foregroundOnAccentRestLarge; // Accent Fill -const accentFillByContrast = (contrast: number) => (element: HTMLElement, reference?: SwatchRGB) => { - return accentFillAlgorithm( +const accentFillByContrast = (contrast: number) => (element: HTMLElement, reference?: Swatch) => + accentFillAlgorithm( accentPalette.getValueFor(element), neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -276,14 +279,13 @@ const accentFillByContrast = (contrast: number) => (element: HTMLElement, refere neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), ); -}; /** @public */ -export const accentFillRecipe = create({ +export const accentFillRecipe = create({ name: 'accent-fill-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => - accentFillByContrast(ContrastTarget.normal)(element), + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => + accentFillByContrast(ContrastTarget.normal)(element, reference), }); /** @public */ @@ -304,25 +306,24 @@ export const accentFillFocus = create('accent-fill-focus').withDefault(( }); // Accent Foreground -const accentForegroundByContrast = (contrast: number) => (element: HTMLElement) => { - return accentForegroundAlgorithm( +const accentForegroundByContrast = (contrast: number) => (element: HTMLElement, reference?: Swatch) => + accentForegroundAlgorithm( accentPalette.getValueFor(element), - fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), contrast, accentForegroundRestDelta.getValueFor(element), accentForegroundHoverDelta.getValueFor(element), accentForegroundActiveDelta.getValueFor(element), accentForegroundFocusDelta.getValueFor(element), ); -}; /** @public */ -export const accentForegroundRecipe = create({ +export const accentForegroundRecipe = create({ name: 'accent-foreground-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => - accentForegroundByContrast(ContrastTarget.normal)(element), + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => + accentForegroundByContrast(ContrastTarget.normal)(element, reference), }); /** @public */ @@ -351,7 +352,7 @@ export const neutralStrokeDividerRecipe = create({ evaluate: (element: HTMLElement, reference?: Swatch): Swatch => neutralDividerAlgorithm( neutralPalette.getValueFor(element), - fillColor.getValueFor(element), + reference || fillColor.getValueFor(element), neutralStrokeDividerRestDelta.getValueFor(element), ), }); @@ -384,11 +385,11 @@ export const neutralFillCard = neutralFillLayerRest; // Neutral Fill Inverse /** @public */ -export const neutralFillInverseRecipe = create({ +export const neutralFillInverseRecipe = create({ name: 'neutral-fill-inverse-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => neutralFillInverseAlgorithm( neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -426,11 +427,11 @@ export const neutralContrastFillFocus = neutralFillInverseFocus; // Neutral Fill Input /** @public */ -export const neutralFillInputRecipe = create({ +export const neutralFillInputRecipe = create({ name: 'neutral-fill-input-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => neutralFillInputAlgorithm( neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -460,11 +461,11 @@ export const neutralFillInputActive = create('neutral-fill-input-active' // Neutral Fill Stealth /** @public */ -export const neutralFillStealthRecipe = create({ +export const neutralFillStealthRecipe = create({ name: 'neutral-fill-stealth-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => neutralFillStealthAlgorithm( neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -499,11 +500,11 @@ export const neutralFillStealthFocus = create('neutral-fill-stealth-focu // Neutral Fill Strong // TODO: none of these are actually used, do we need them? /** @public */ -export const neutralFillStrongRecipe = create({ +export const neutralFillStrongRecipe = create({ name: 'neutral-fill-strong-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => neutralFillContrastAlgorithm( neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -541,11 +542,11 @@ export const neutralFillToggleFocus = neutralFillStrongFocus; // Neutral Fill /** @public */ -export const neutralFillRecipe = create({ +export const neutralFillRecipe = create({ name: 'neutral-fill-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement, reference?: Swatch): SwatchFamily => + evaluate: (element: HTMLElement, reference?: Swatch): InteractiveSwatchSet => neutralFillAlgorithm( neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), @@ -642,11 +643,11 @@ export const neutralForegroundRest = create('neutral-foreground-rest').w // Neutral Stroke /** @public */ -export const neutralStrokeRecipe = create({ +export const neutralStrokeRecipe = create({ name: 'neutral-stroke-recipe', cssCustomPropertyName: null, }).withDefault({ - evaluate: (element: HTMLElement): SwatchFamily => { + evaluate: (element: HTMLElement): InteractiveSwatchSet => { return neutralStrokeAlgorithm( neutralPalette.getValueFor(element), fillColor.getValueFor(element), @@ -683,6 +684,25 @@ export const neutralOutlineActive = neutralStrokeActive; /** @public @deprecated Use neutralStrokeFocus */ export const neutralOutlineFocus = neutralStrokeFocus; +// Neutral Layer Card Container +/** @public */ +export const neutralLayerCardContainerRecipe = create({ + name: 'neutral-layer-card-container-recipe', + cssCustomPropertyName: null, +}).withDefault({ + evaluate: (element: HTMLElement): Swatch => + neutralLayerCardContainerAlgorithm( + neutralPalette.getValueFor(element), + baseLayerLuminance.getValueFor(element), + neutralFillLayerRestDelta.getValueFor(element), + ), +}); + +/** @public */ +export const neutralLayerCardContainer = create( + 'neutral-layer-card-container', +).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element)); + // Neutral Layer Floating /** @public */ export const neutralLayerFloatingRecipe = create({ @@ -716,6 +736,8 @@ export const neutralLayer1Recipe = create({ export const neutralLayer1 = create('neutral-layer-1').withDefault((element: HTMLElement) => neutralLayer1Recipe.getValueFor(element).evaluate(element), ); +/** @public @deprecated Use neutralLayer1 */ +export const neutralLayerL1 = neutralLayer1; // Neutral Layer 2 /** @public */ @@ -738,6 +760,8 @@ export const neutralLayer2Recipe = create({ export const neutralLayer2 = create('neutral-layer-2').withDefault((element: HTMLElement) => neutralLayer2Recipe.getValueFor(element).evaluate(element), ); +/** @public @deprecated Use neutralLayer2 */ +export const neutralLayerL2 = neutralLayer2; // Neutral Layer 3 /** @public */ @@ -760,6 +784,8 @@ export const neutralLayer3Recipe = create({ export const neutralLayer3 = create('neutral-layer-3').withDefault((element: HTMLElement) => neutralLayer3Recipe.getValueFor(element).evaluate(element), ); +/** @public @deprecated Use neutralLayer3 */ +export const neutralLayerL3 = neutralLayer3; // Neutral Layer 4 /** @public */ @@ -782,3 +808,5 @@ export const neutralLayer4Recipe = create({ export const neutralLayer4 = create('neutral-layer-4').withDefault((element: HTMLElement) => neutralLayer4Recipe.getValueFor(element).evaluate(element), ); +/** @public @deprecated Use neutralLayer4 */ +export const neutralLayerL4 = neutralLayer4;