Updated a couple more design tokens

- cornerRadius -> controlConerRadius
- elevatedCornerRadius -> surfaceCornerRadius
- removed neutral foreground states

packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts

@@ -9,7 +9,7 @@ import {
  focusStrokeWidth,
  neutralStrokeDivider,
  focusStrokeOuter,
- neutralForegroundRest,
+ neutralForeground,
  strokeWidth,
  typeRampMinus1FontSize,
  typeRampMinus1LineHeight,
@@ -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 {

packages/web-components/src/accordion/accordion.styles.ts

@@ -3,7 +3,7 @@ import { display } from '@microsoft/fast-foundation';
 import {
  bodyFont,
  neutralStrokeDivider,
- neutralForegroundRest,
+ neutralForeground,
  strokeWidth,
  typeRampMinus1FontSize,
  typeRampMinus1LineHeight,
@@ -17,7 +17,7 @@ export const accordionStyles = (context, definition) =>
  font-family: ${bodyFont};
  font-size: ${typeRampMinus1FontSize};
  line-height: ${typeRampMinus1LineHeight};
- color: ${neutralForegroundRest};
+ 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

@@ -7,7 +7,7 @@ import {
  accentForegroundRest,
  bodyFont,
  focusStrokeWidth,
- neutralForegroundRest,
+ neutralForeground,
  strokeWidth,
  typeRampBaseFontSize,
  typeRampBaseLineHeight,
@@ -76,20 +76,20 @@ export const breadcrumbItemStyles = (context, definition) =>
  }
 
  .control:${focusVisible} .content::before {
- background: ${neutralForegroundRest};
+ 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/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,12 +4,12 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
  designUnit,
- cornerRadius,
+ controlCornerRadius,
  strokeWidth,
  neutralStrokeRest,
  neutralFillInputRest,
  bodyFont,
- neutralForegroundRest,
+ neutralForeground,
  typeRampBaseFontSize,
  typeRampBaseLineHeight,
  neutralFillInputHover,
@@ -40,7 +40,7 @@ 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-radius: calc(${controlCornerRadius} * 1px);
  border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
  background: ${neutralFillInputRest};
  outline: none;
@@ -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%;

packages/web-components/src/data-grid/data-grid-cell.styles.ts

@@ -3,10 +3,10 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
  bodyFont,
- cornerRadius,
+ controlCornerRadius,
  designUnit,
  focusStrokeOuter,
- neutralForegroundRest,
+ neutralForeground,
  strokeWidth,
  typeRampBaseFontSize,
  typeRampBaseLineHeight,
@@ -16,7 +16,7 @@ export const dataGridCellStyles = (context, definition) =>
  css`
  :host {
  padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
- color: ${neutralForegroundRest};
+ color: ${neutralForeground};
  box-sizing: border-box;
  font-family: ${bodyFont};
  font-size: ${typeRampBaseFontSize};
@@ -25,7 +25,7 @@ export const dataGridCellStyles = (context, definition) =>
  border: transparent calc(${strokeWidth} * 1px) solid;
  overflow: hidden;
  white-space: nowrap;
- border-radius: calc(${cornerRadius} * 1px);
+ border-radius: calc(${controlCornerRadius} * 1px);
  }
 
  :host(.column-header) {
@@ -34,7 +34,7 @@ export const dataGridCellStyles = (context, definition) =>
 
  :host(:${focusVisible}) {
  border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid;
- color: ${neutralForegroundRest};
+ color: ${neutralForeground};
  }
 
 `.withBehaviors(

packages/web-components/src/design-tokens.ts

@@ -43,12 +43,16 @@ export const bodyFont = create<string>('body-font').withDefault('Segoe UI, sans-
 export const baseHeightMultiplier = create<number>('base-height-multiplier').withDefault(8);
 export const baseHorizontalSpacingMultiplier = create<number>('base-horizontal-spacing-multiplier').withDefault(3);
 export const baseLayerLuminance = create<number>('base-layer-luminance').withDefault(StandardLuminance.LightMode);
-export const cornerRadius = create<number>('corner-radius').withDefault(4);
+export const controlCornerRadius = create<number>('corner-radius').withDefault(4);
+/** @deprecated */
+export const cornerRadius = controlCornerRadius;
 export const density = create<number>('density').withDefault(0);
 export const designUnit = create<number>('design-unit').withDefault(4);
 export const direction = create<Direction>('direction').withDefault(Direction.ltr);
 export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.3);
-export const elevatedCornerRadius = create<number>('elevated-corner-radius').withDefault(4);
+export const surfaceCornerRadius = create<number>('elevated-corner-radius').withDefault(4);
+/** @deprecated */
+export const elevatedCornerRadius = surfaceCornerRadius;
 export const focusStrokeWidth = create<number>('focus-stroke-width').withDefault(2);
 /** @deprecated */
 export const focusOutlineWidth = focusStrokeWidth;
@@ -102,10 +106,6 @@ export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta;
 /** @deprecated */
 export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta;
 
-export const neutralForegroundActiveDelta = create<number>('neutral-foreground-active-delta').withDefault(0);
-export const neutralForegroundFocusDelta = create<number>('neutral-foreground-focus-delta').withDefault(0);
-export const neutralForegroundHoverDelta = create<number>('neutral-foreground-hover-delta').withDefault(0);
-
 export const neutralStrokeActiveDelta = create<number>('neutral-stroke-active-delta').withDefault(16);
 export const neutralStrokeFocusDelta = create<number>('neutral-stroke-focus-delta').withDefault(25);
 export const neutralStrokeHoverDelta = create<number>('neutral-stroke-hover-delta').withDefault(40);
@@ -484,9 +484,11 @@ export const NeutralForeground = DI.createInterface<
  ),
 );
 
-export const neutralForegroundRest = create<SwatchRGB>('neutral-foreground-rest').withDefault((element: HTMLElement) =>
+export const neutralForeground = create<SwatchRGB>('neutral-foreground').withDefault((element: HTMLElement) =>
  DI.findResponsibleContainer(element).get(NeutralForeground)(element),
 );
+/** @deprecated */
+export const neutralForegroundRest = neutralForeground;
 
 // Neutral Stroke
 export const NeutralStroke = DI.createInterface<(element: HTMLElement) => ReturnType<typeof neutralStrokeAlgorithm>>(

packages/web-components/src/dialog/dialog.styles.ts

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { elevation } from '../styles';
-import { elevatedCornerRadius, fillColor, strokeWidth } from '../design-tokens';
+import { surfaceCornerRadius, fillColor, strokeWidth } from '../design-tokens';
 
 export const dialogStyles = (context, definition) => css`
  :host([hidden]) {
@@ -39,7 +39,7 @@ export const dialogStyles = (context, definition) => css`
  ${elevation}
  margin-top: auto;
  margin-bottom: auto;
- border-radius: calc(${elevatedCornerRadius} * 1px);
+ border-radius: calc(${surfaceCornerRadius} * 1px);
  width: var(--dialog-width);
  height: var(--dialog-height);
  background: ${fillColor};

packages/web-components/src/flipper/flipper.styles.ts

@@ -3,7 +3,7 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior }
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
- neutralForegroundRest,
+ neutralForeground,
  neutralFillStealthRest,
  neutralStrokeRest,
  disabledOpacity,
@@ -25,7 +25,7 @@ export const flipperStyles = (context, definition) =>
  margin: 0;
  position: relative;
  fill: currentcolor;
- color: ${neutralForegroundRest};
+ color: ${neutralForeground};
  background: transparent;
  border: none;
  outline: none;

packages/web-components/src/listbox-option/listbox-option.styles.ts

@@ -4,9 +4,9 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
 import {
  bodyFont,
- cornerRadius,
+ controlCornerRadius,
  focusStrokeWidth,
- neutralForegroundRest,
+ neutralForeground,
  typeRampBaseFontSize,
  typeRampBaseLineHeight,
  designUnit,
@@ -24,10 +24,10 @@ export const optionStyles = (context, definition) =>
  css`
  ${display('inline-flex')} :host {
  font-family: ${bodyFont};
- border-radius: calc(${cornerRadius} * 1px);
+ border-radius: calc(${controlCornerRadius} * 1px);
  border: calc(${focusStrokeWidth} * 1px) solid transparent;
  box-sizing: border-box;
- color: ${neutralForegroundRest};
+ color: ${neutralForeground};
  cursor: pointer;
  fill: currentcolor;
  font-size: ${typeRampBaseFontSize};
@@ -61,12 +61,12 @@ export const optionStyles = (context, definition) =>
 
  :host(:not([aria-selected="true"]):hover) {
  background: ${neutralFillHover};
- color: ${neutralForegroundRest}};
+ color: ${neutralForeground}};
  }
 
  :host(:not([aria-selected="true"]):active) {
  background: ${neutralFillActive};
- color: ${neutralForegroundRest}};
+ color: ${neutralForeground}};
  }
 
  :host([disabled]) {

packages/web-components/src/listbox/listbox.styles.ts

@@ -6,7 +6,7 @@ import {
  neutralStrokeRest,
  focusStrokeOuter,
  strokeWidth,
- cornerRadius,
+ controlCornerRadius,
  designUnit,
  focusStrokeWidth,
 } from '../design-tokens';
@@ -16,7 +16,7 @@ export const listboxStyles = (context, definition) =>
  ${display('inline-flex')} :host {
  background: ${neutralLayerFloating};
  border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
- border-radius: calc(${cornerRadius} * 1px);
+ border-radius: calc(${controlCornerRadius} * 1px);
  box-sizing: border-box;
  flex-direction: column;
  padding: calc(${designUnit} * 1px) 0;