diff --git a/change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json b/change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json new file mode 100644 index 00000000000000..50fe1d0703311e --- /dev/null +++ b/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" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index f5e36c37bdbf4b..3b0ab638ae9123 100644 --- a/packages/web-components/docs/api-report.md +++ b/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) diff --git a/packages/web-components/src/color/index.ts b/packages/web-components/src/color/index.ts index d9eac0e6cd8ca5..738c3f0e26d106 100644 --- a/packages/web-components/src/color/index.ts +++ b/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'; /** diff --git a/packages/web-components/src/color/neutral-contrast-fill.ts b/packages/web-components/src/color/neutral-contrast-fill.ts new file mode 100644 index 00000000000000..eab977e96a3b75 --- /dev/null +++ b/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, +); diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts index 813025b33e8a59..cc6ffa42f58f71 100644 --- a/packages/web-components/src/design-system-provider/index.ts +++ b/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; } /** diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts index d411356321d7c3..bf60c71433b7b7 100644 --- a/packages/web-components/src/fluent-design-system.ts +++ b/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 = getDesign ); export const neutralOutlineFocusDelta: DesignSystemResolver = getDesignSystemValue('neutralOutlineFocusDelta'); + +export const neutralContrastFillRestDelta: DesignSystemResolver = getDesignSystemValue( + 'neutralContrastFillRestDelta', +); +export const neutralContrastFillHoverDelta: DesignSystemResolver = getDesignSystemValue( + 'neutralContrastFillHoverDelta', +); +export const neutralContrastFillActiveDelta: DesignSystemResolver = getDesignSystemValue( + 'neutralContrastFillActiveDelta', +); +export const neutralContrastFillFocusDelta: DesignSystemResolver = getDesignSystemValue( + 'neutralContrastFillFocusDelta', +); diff --git a/packages/web-components/src/styles/behaviors.ts b/packages/web-components/src/styles/behaviors.ts index 0bc56e7d19c0a6..7f1033d9ed8cd4 100644 --- a/packages/web-components/src/styles/behaviors.ts +++ b/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. *