feat: add neutral-contrast-fill color recipe to the design system (#1…

…6824)

* add neutral-contrast-fill recipe

* Change files

* fixed import in behavior

* update api-report

change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "add neutral-contrast-fill recipe",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-02-04T19:30:33.719Z"
+}

packages/web-components/docs/api-report.md

@@ -284,6 +284,14 @@ export interface DesignSystem {
     disabledOpacity: number;
     elevatedCornerRadius?: number;
     focusOutlineWidth: number;
+    // (undocumented)
+    neutralContrastFillActiveDelta: number;
+    // (undocumented)
+    neutralContrastFillFocusDelta: number;
+    // (undocumented)
+    neutralContrastFillHoverDelta: number;
+    // (undocumented)
+    neutralContrastFillRestDelta: number;
     neutralDividerRestDelta: number;
     // (undocumented)
     neutralFillActiveDelta: number;
@@ -502,6 +510,10 @@ export class FluentDesignSystemProvider extends DesignSystemProvider implements
     elevatedCornerRadius: number;
     // (undocumented)
     focusOutlineWidth: number;
+    neutralContrastFillActiveDelta: number;
+    neutralContrastFillFocusDelta: number;
+    neutralContrastFillHoverDelta: number;
+    neutralContrastFillRestDelta: number;
     // (undocumented)
     neutralDividerRestDelta: number;
     // (undocumented)
@@ -732,6 +744,41 @@ export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export const MenuStyles: import("@microsoft/fast-element").ElementStyles;
 
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFill" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFill: SwatchFamilyResolver;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillActive" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillActive: SwatchRecipe;
+
+// @public
+export const neutralContrastFillActiveBehavior: CSSCustomPropertyBehavior;
+
+// @public
+export const neutralContrastFillFocusBehavior: CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillHover" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillHover: SwatchRecipe;
+
+// @public
+export const neutralContrastFillHoverBehavior: CSSCustomPropertyBehavior;
+
+// Warning: (ae-internal-missing-underscore) The name "neutralContrastFillRest" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const neutralContrastFillRest: SwatchRecipe;
+
+// @public
+export const neutralContrastFillRestBehavior: CSSCustomPropertyBehavior;
+
+// @public
+export const neutralContrastForegroundRestBehavior: CSSCustomPropertyBehavior;
+
 // Warning: (ae-internal-missing-underscore) The name "neutralDividerRest" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)

packages/web-components/src/color/index.ts

@@ -66,6 +66,13 @@ export {
   accentFillLargeSelected,
 } from './accent-fill';
 
+export {
+  neutralContrastFill,
+  neutralContrastFillRest,
+  neutralContrastFillHover,
+  neutralContrastFillActive,
+} from './neutral-contrast-fill';
+
 export { neutralFillCard } from './neutral-fill-card';
 
 /**

packages/web-components/src/color/neutral-contrast-fill.ts

@@ -0,0 +1,56 @@
+import {
+  neutralContrastFillActiveDelta,
+  neutralContrastFillFocusDelta,
+  neutralContrastFillHoverDelta,
+  neutralPalette,
+} from '../fluent-design-system';
+import {
+  colorRecipeFactory,
+  SwatchFamilyResolver,
+  swatchFamilyToSwatchRecipeFactory,
+  SwatchFamilyType,
+  SwatchRecipe,
+} from './common';
+import { accessibleAlgorithm } from './accessible-recipe';
+
+/**
+ * @internal
+ */
+export const neutralContrastFill: SwatchFamilyResolver = colorRecipeFactory(
+  accessibleAlgorithm(
+    neutralPalette,
+    14,
+    0,
+    neutralContrastFillHoverDelta,
+    neutralContrastFillActiveDelta,
+    neutralContrastFillFocusDelta,
+  ),
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.rest,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.hover,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.active,
+  neutralContrastFill,
+);
+/**
+ * @internal
+ */
+export const neutralContrastFillFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory(
+  SwatchFamilyType.focus,
+  neutralContrastFill,
+);

packages/web-components/src/design-system-provider/index.ts

@@ -569,6 +569,70 @@ export class FluentDesignSystemProvider extends DesignSystemProvider
     default: DesignSystemDefaults.neutralOutlineFocusDelta,
   })
   public neutralOutlineFocusDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillRestBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-rest-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-rest-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillRestDelta,
+  })
+  public neutralContrastFillRestDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fillrecipe. See {@link @microsoft/fast-components#neutralContrastFillHoverBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-hover-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-hover-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillHoverDelta,
+  })
+  public neutralContrastFillHoverDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillActiveBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-active-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-active-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillActiveDelta,
+  })
+  public neutralContrastFillActiveDelta: number;
+
+  /**
+   * The distance from the resolved neutral contrast fill color for the rest state of the neutral-contrast-fill recipe. See {@link @microsoft/fast-components#neutralContrastFillFocusBehavior} for usage in CSS.
+   *
+   * @remarks
+   * HTML attribute: neutral-contrast-fill-focus-delta
+   *
+   * CSS custom property: N/A
+   */
+  @designSystemProperty({
+    attribute: 'neutral-contrast-fill-focus-delta',
+    converter: nullableNumberConverter,
+    cssCustomProperty: false,
+    default: DesignSystemDefaults.neutralContrastFillFocusDelta,
+  })
+  public neutralContrastFillFocusDelta: number;
 }
 
 /**

packages/web-components/src/fluent-design-system.ts

@@ -190,6 +190,14 @@ export interface DesignSystem {
   neutralOutlineHoverDelta: number;
   neutralOutlineActiveDelta: number;
   neutralOutlineFocusDelta: number;
+
+  /*
+   * Color swatch deltas for the neutral-contrast-fill recipe.
+   */
+  neutralContrastFillRestDelta: number;
+  neutralContrastFillHoverDelta: number;
+  neutralContrastFillActiveDelta: number;
+  neutralContrastFillFocusDelta: number;
 }
 
 /**
@@ -280,6 +288,11 @@ export const DesignSystemDefaults: DesignSystem = {
   neutralOutlineHoverDelta: 40,
   neutralOutlineActiveDelta: 16,
   neutralOutlineFocusDelta: 25,
+
+  neutralContrastFillRestDelta: 0,
+  neutralContrastFillHoverDelta: -3,
+  neutralContrastFillActiveDelta: 7,
+  neutralContrastFillFocusDelta: 0,
 };
 
 /**
@@ -451,3 +464,16 @@ export const neutralOutlineActiveDelta: DesignSystemResolver<number> = getDesign
 );
 
 export const neutralOutlineFocusDelta: DesignSystemResolver<number> = getDesignSystemValue('neutralOutlineFocusDelta');
+
+export const neutralContrastFillRestDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillRestDelta',
+);
+export const neutralContrastFillHoverDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillHoverDelta',
+);
+export const neutralContrastFillActiveDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillActiveDelta',
+);
+export const neutralContrastFillFocusDelta: DesignSystemResolver<number> = getDesignSystemValue(
+  'neutralContrastFillFocusDelta',
+);

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

@@ -6,6 +6,8 @@ import {
   accentForeground,
   accentForegroundCut,
   accentForegroundLarge,
+  neutralContrastFill,
+  neutralContrastFillRest,
   neutralDividerRest,
   neutralFill,
   neutralFillCard,
@@ -17,6 +19,7 @@ import {
   neutralForeground,
   neutralForegroundHint,
   neutralForegroundHintLarge,
+  neutralForegroundRest,
   neutralForegroundToggle,
   neutralForegroundToggleLarge,
   neutralLayerCard,
@@ -581,7 +584,51 @@ export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior = cssCus
   neutralFocusInnerAccent(accentBaseColor),
   FluentDesignSystemProvider.findProvider,
 );
-
+/**
+ * Behavior to resolve and make available the neutral-contrast-foreground-rest CSS custom property.
+ * @public
+ */
+export const neutralContrastForegroundRestBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-foreground-rest',
+  x => neutralForegroundRest(neutralContrastFillRest)(x),
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-rest CSS custom property.
+ * @public
+ */
+export const neutralContrastFillRestBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-rest',
+  x => neutralContrastFill(x).rest,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-hover CSS custom property.
+ * @public
+ */
+export const neutralContrastFillHoverBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-hover',
+  x => neutralContrastFill(x).hover,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-active CSS custom property.
+ * @public
+ */
+export const neutralContrastFillActiveBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-active',
+  x => neutralContrastFill(x).active,
+  FluentDesignSystemProvider.findProvider,
+);
+/**
+ * Behavior to resolve and make available the neutral-contrast-fill-focus CSS custom property.
+ * @public
+ */
+export const neutralContrastFillFocusBehavior = cssCustomPropertyBehaviorFactory(
+  'neutral-contrast-fill-focus',
+  x => neutralContrastFill(x).focus,
+  FluentDesignSystemProvider.findProvider,
+);
 /**
  * Behavior to resolve and make available the inline-start CSS custom property.
  *