(web-components) Design token update II (#18561)

Rename accentForegroundCut -> foregroundOnAccent Rename card and surface -> layer 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 · Jul 2, 2021 · beb5650 · beb5650
1 parent d31f31d
commit beb5650
Show file tree

Hide file tree

Showing 68 changed files with 919 additions and 663 deletions.
diff --git a/change/@fluentui-web-components-31ded262-0d0f-44d5-a7a0-337d99eb5a53.json 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
@@ -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/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
@@ -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/...or-vNext/recipes/accent-foreground-cut.ts → ...lor-vNext/recipes/foreground-on-accent.ts b/...or-vNext/recipes/accent-foreground-cut.ts → ...lor-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
@@ -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/.../color-vNext/recipes/neutral-fill-card.ts → ...color-vNext/recipes/neutral-fill-layer.ts b/.../color-vNext/recipes/neutral-fill-card.ts → ...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);