(web-components) Design token cleanup

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"
+}

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};

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};
  }
  `;

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};
  }
  `;

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(

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}

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}
  }
 

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,

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),
  };
 }

packages/web-components/src/color-vNext/recipes/neutral-focus-inner-accent.ts → packages/web-components/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,

packages/web-components/src/color-vNext/recipes/neutral-fill-toggle.ts → packages/web-components/src/color-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,

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),
  };
 }

packages/web-components/src/color-vNext/recipes/neutral-contrast-fill.ts → packages/web-components/src/color-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,