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
microsoft · Jun 14, 2021 · 7318554 · 7318554
1 parent 8cb144d
commit 7318554
Show file tree

Hide file tree

Showing 50 changed files with 548 additions and 475 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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
@@ -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
@@ -1,19 +1,19 @@
-import { PaletteRGB } from '../palette';
+import { Palette } from '../palette';
 import { Swatch } from '../swatch';
 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
@@ -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/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
@@ -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 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
@@ -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 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
@@ -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 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-layer.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 neutralFillLayer(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
@@ -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
@@ -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;