(web-components) Design token cleanup (#18410)

* Rename and clean up of design tokens and recipe: - neutralContrastFill -> neutralFillInverse - neutralFillToggle -> neutralFillContrast - neutralFocus -> focusStrokeOuter - neutralFocusInnerAccent -> focusStrokeInner - outline -> stroke - Removed 'selected' colors * Added deprecated alias tokens for renames * Rename neutral fill "contrast" to "strong" Defining visual intent using adjective form opposed to implementation details * Updated a couple more design tokens - cornerRadius -> controlConerRadius - elevatedCornerRadius -> surfaceCornerRadius - removed neutral foreground states * Change files Co-authored-by: Chris Holt <chhol@microsoft.com>
microsoft · Jun 9, 2021 · 4422454 · 4422454
1 parent a51e627
commit 4422454
Show file tree

Hide file tree

Showing 57 changed files with 536 additions and 498 deletions.
diff --git a/change/@fluentui-web-components-65f13306-7054-44e7-bab7-161bfb2ff372.json b/change/@fluentui-web-components-65f13306-7054-44e7-bab7-161bfb2ff372.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Rename and clean up of design tokens and recipe: - neutralContrastFill -> neutralFillInverse - neutralFillToggle -> neutralFillContrast - neutralFocus -> focusStrokeOuter - neutralFocusInnerAccent -> focusStrokeInner - outline -> stroke - Removed 'selected' colors",
+  "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,11 +6,11 @@ import {
   bodyFont,
   density,
   designUnit,
-  focusOutlineWidth,
-  neutralDivider,
-  neutralFocus,
-  neutralForegroundRest,
-  outlineWidth,
+  focusStrokeWidth,
+  neutralStrokeDivider,
+  focusStrokeOuter,
+  neutralForeground,
+  strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
 } from '../../design-tokens';
@@ -24,7 +24,7 @@ export const accordionItemStyles = (context, definition) =>
         flex-direction: column;
         font-size: ${typeRampMinus1FontSize};
         line-height: ${typeRampMinus1LineHeight};
-        border-bottom: calc(${outlineWidth} * 1px) solid ${neutralDivider};
+        border-bottom: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider};
     }
 
     .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: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         font-family: inherit;
     }
 
     .button:hover,
     .button:active {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
     .button::before {
@@ -72,9 +72,9 @@ export const accordionItemStyles = (context, definition) =>
 
     .button:${focusVisible}::before {
         outline: none;
-        border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
-        box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px)
-            ${neutralFocus};
+        border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
+        box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)
+            ${focusStrokeOuter};
     }
 
     :host(.expanded) .region {
@@ -128,7 +128,7 @@ export const accordionItemStyles = (context, definition) =>
       css`
             .button:${focusVisible}::before {
                 border-color: ${SystemColors.Highlight};
-                box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${SystemColors.Highlight};
+                box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight};
             }
             .icon {
               fill: ${SystemColors.ButtonText};

diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts
@@ -2,9 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
   bodyFont,
-  neutralDivider,
-  neutralForegroundRest,
-  outlineWidth,
+  neutralStrokeDivider,
+  neutralForeground,
+  strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
 } from '../design-tokens';
@@ -17,7 +17,7 @@ export const accordionStyles = (context, definition) =>
       font-family: ${bodyFont};
       font-size: ${typeRampMinus1FontSize};
       line-height: ${typeRampMinus1LineHeight};
-      color: ${neutralForegroundRest};
-      border-top: calc(${outlineWidth} * 1px) solid ${neutralDivider};
+      color: ${neutralForeground};
+      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider};
     }
   `;
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
@@ -3,9 +3,9 @@ import { display } from '@microsoft/fast-foundation';
 import {
   accentForegroundRest,
   bodyFont,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
   neutralFillRest,
@@ -22,13 +22,13 @@ export const badgeStyles = (context, definition) =>
     }
 
     .control {
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
     }
 
     :host(.lightweight) .control {
       background: transparent;
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
       font-weight: 600;
     }
 
@@ -39,6 +39,6 @@ export const badgeStyles = (context, definition) =>
 
     :host(.neutral) .control {
       background: ${neutralFillRest};
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
     }
   `;
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -6,9 +6,9 @@ import {
   accentForegroundHover,
   accentForegroundRest,
   bodyFont,
-  focusOutlineWidth,
-  neutralForegroundRest,
-  outlineWidth,
+  focusStrokeWidth,
+  neutralForeground,
+  strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
 } from '../design-tokens';
@@ -59,7 +59,7 @@ export const breadcrumbItemStyles = (context, definition) =>
     .control .content::before {
         content: "";
         display: block;
-        height: calc(${outlineWidth} * 1px);
+        height: calc(${strokeWidth} * 1px);
         left: 0;
         position: absolute;
         right: 0;
@@ -76,20 +76,20 @@ export const breadcrumbItemStyles = (context, definition) =>
     }
 
     .control:${focusVisible} .content::before {
-        background: ${neutralForegroundRest};
-        height: calc(${focusOutlineWidth} * 1px);
+        background: ${neutralForeground};
+        height: calc(${focusStrokeWidth} * 1px);
     }
 
     :host(:not([href])),
     :host([aria-current]) .control  {
         font-weight: 600;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         fill: currentcolor;
         cursor: default;
     }
 
     :host([aria-current]) .control:hover .content::before {
-      background: ${neutralForegroundRest};
+      background: ${neutralForeground};
   }
 
     .start {
@@ -104,7 +104,7 @@ export const breadcrumbItemStyles = (context, definition) =>
 
     .separator {
       display: flex;
-      fill: ${neutralForegroundRest};
+      fill: ${neutralForeground};
       margin: 0 6px;
     }
 `.withBehaviors(

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -14,7 +14,7 @@ import {
   neutralFillRest,
   accentFillRest,
   accentForegroundRest,
-  neutralOutlineRest,
+  neutralStrokeRest,
   neutralFillStealthRest,
 } from '../design-tokens';
 
@@ -106,7 +106,7 @@ export const buttonStyles = (context, definition) =>
         :host([appearance='outline'][disabled]:hover),
         :host([appearance='outline'][disabled]:active) {
           background: transparent;
-          border-color: ${neutralOutlineRest};
+          border-color: ${neutralStrokeRest};
         }
 
         ${OutlineButtonStyles}

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 { elevatedCornerRadius } from "../design-tokens";
+import { surfaceCornerRadius } 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(${elevatedCornerRadius} * 1px);
+    border-radius: calc(${surfaceCornerRadius} * 1px);
     ${elevation}
   }
 

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -4,19 +4,19 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
   designUnit,
-  cornerRadius,
-  outlineWidth,
-  neutralOutlineRest,
+  controlCornerRadius,
+  strokeWidth,
+  neutralStrokeRest,
   neutralFillInputRest,
   bodyFont,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
   neutralFillInputHover,
-  neutralOutlineHover,
+  neutralStrokeHover,
   neutralFillInputActive,
-  neutralOutlineActive,
-  neutralFocus,
+  neutralStrokeActive,
+  focusStrokeOuter,
   disabledOpacity,
   fillColor,
 } from '../design-tokens';
@@ -40,8 +40,8 @@ export const checkboxStyles = (context, definition) =>
         width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
         height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
         box-sizing: border-box;
-        border-radius: calc(${cornerRadius} * 1px);
-        border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest};
+        border-radius: calc(${controlCornerRadius} * 1px);
+        border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
         background: ${neutralFillInputRest};
         outline: none;
         cursor: pointer;
@@ -54,7 +54,7 @@ export const checkboxStyles = (context, definition) =>
 
     .label {
         font-family: ${bodyFont};
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         ${
           /* 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: ${neutralForegroundRest};
+        fill: ${neutralForeground};
         opacity: 0;
         pointer-events: none;
     }
 
     .indeterminate-indicator {
-        border-radius: calc((${cornerRadius} / 2) * 1px);
-        background: ${neutralForegroundRest};
+        border-radius: calc((${controlCornerRadius} / 2) * 1px);
+        background: ${neutralForeground};
         position: absolute;
         top: 50%;
         left: 50%;
@@ -87,17 +87,17 @@ export const checkboxStyles = (context, definition) =>
 
     :host(:enabled) .control:hover {
         background: ${neutralFillInputHover};
-        border-color: ${neutralOutlineHover};
+        border-color: ${neutralStrokeHover};
     }
 
     :host(:enabled) .control:active {
         background: ${neutralFillInputActive};
-        border-color: ${neutralOutlineActive};
+        border-color: ${neutralStrokeActive};
     }
 
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
-        border-color: ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter};
+        border-color: ${focusStrokeOuter};
     }
 
     :host(.disabled) .label,

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,7 +1,6 @@
 import { inRange } from 'lodash-es';
 import { PaletteRGB } from '../palette';
 import { Swatch } from '../swatch';
-import { isDark } from '../utilities/is-dark';
 
 /**
  * @internal
@@ -15,7 +14,6 @@ export function accentFill(
   hoverDelta: number,
   activeDelta: number,
   focusDelta: number,
-  selectedDelta: number,
   neutralFillRestDelta: number,
   neutralFillHoverDelta: number,
   neutralFillActiveDelta: number,
@@ -42,13 +40,11 @@ export function accentFill(
   const restIndex = hoverIndex + direction * -1 * hoverDelta;
   const activeIndex = restIndex + direction * activeDelta;
   const focusIndex = restIndex + direction * focusDelta;
-  const selectedIndex = restIndex + (isDark(reference) ? selectedDelta * -1 : selectedDelta);
 
   return {
     rest: palette.get(restIndex),
     hover: palette.get(hoverIndex),
     active: palette.get(activeIndex),
     focus: palette.get(focusIndex),
-    selected: palette.get(selectedIndex),
   };
 }
diff --git a/...ext/recipes/neutral-focus-inner-accent.ts → ...s/src/color-vNext/recipes/focus-stroke.ts b/...ext/recipes/neutral-focus-inner-accent.ts → ...s/src/color-vNext/recipes/focus-stroke.ts
@@ -2,7 +2,17 @@ import { PaletteRGB } from '../palette';
 import { Swatch } from '../swatch';
 import { directionByIsDark } from '../utilities/direction-by-is-dark';
 
-export function neutralFocusInnerAccent(palette: PaletteRGB, reference: Swatch, focusColor: Swatch) {
+/**
+ * @internal
+ */
+export function focusStrokeOuter(palette: PaletteRGB, reference: Swatch) {
+  return palette.colorContrast(reference, 3.5);
+}
+
+/**
+ * @internal
+ */
+export function focusStrokeInner(palette: PaletteRGB, reference: Swatch, focusColor: Swatch) {
   return palette.colorContrast(
     focusColor,
     3.5,

diff --git a/...olor-vNext/recipes/neutral-fill-toggle.ts → ...or-vNext/recipes/neutral-fill-contrast.ts b/...olor-vNext/recipes/neutral-fill-toggle.ts → ...or-vNext/recipes/neutral-fill-contrast.ts
@@ -5,7 +5,7 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark';
 /**
  * @internal
  */
-export function neutralFillToggle(
+export function neutralFillContrast(
   palette: PaletteRGB,
   reference: Swatch,
   restDelta: number,

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
@@ -12,7 +12,6 @@ export function neutralFillInput(
   hoverDelta: number,
   activeDelta: number,
   focusDelta: number,
-  selectedDelta: number,
 ) {
   const direction = directionByIsDark(reference);
   const referenceIndex = palette.closestIndexOf(reference);
@@ -22,6 +21,5 @@ export function neutralFillInput(
     hover: palette.get(referenceIndex - direction * hoverDelta),
     active: palette.get(referenceIndex - direction * activeDelta),
     focus: palette.get(referenceIndex - direction * focusDelta),
-    selected: palette.get(referenceIndex - direction * selectedDelta),
   };
 }
diff --git a/...or-vNext/recipes/neutral-contrast-fill.ts → ...lor-vNext/recipes/neutral-fill-inverse.ts b/...or-vNext/recipes/neutral-contrast-fill.ts → ...lor-vNext/recipes/neutral-fill-inverse.ts
@@ -5,7 +5,7 @@ import { directionByIsDark } from '../utilities/direction-by-is-dark';
 /**
  * @internal
  */
-export function neutralContrastFill(
+export function neutralFillInverse(
   palette: PaletteRGB,
   reference: Swatch,
   restDelta: number,