(web-components) standardized remaining design token recipe types (#1…

…8602) Standardized remaining design token recipe types
microsoft · Jul 2, 2021 · 8e5d11b · 8e5d11b
1 parent beb5650
commit 8e5d11b
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 60 deletions.
diff --git a/change/@fluentui-web-components-610e5188-329e-4066-b3ba-dd0be153a535.json 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
@@ -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
@@ -1,13 +1,14 @@
 import { inRange } from 'lodash-es';
 import { Palette } from '../palette';
+import { InteractiveSwatchSet } from '../recipe';
 import { Swatch } from '../swatch';
 
 /**
  * @internal
  */
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,18 +1,19 @@
-import { PaletteRGB } from '../palette';
+import { Palette } from '../palette';
+import { InteractiveSwatchSet } from '../recipe';
 import { Swatch } from '../swatch';
 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
@@ -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);
 }