From 44325d5fa73a4d1ff077697e418118783b649e81 Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Thu, 4 Feb 2021 11:26:16 -0800 Subject: [PATCH 1/4] add neutral-contrast-fill recipe --- packages/web-components/docs/api-report.md | 51 +++++++++++++++ packages/web-components/src/color/index.ts | 7 ++ .../src/color/neutral-contrast-fill.ts | 56 ++++++++++++++++ .../src/design-system-provider/index.ts | 64 +++++++++++++++++++ .../src/fluent-design-system.ts | 26 ++++++++ .../web-components/src/styles/behaviors.ts | 49 +++++++++++++- 6 files changed, 252 insertions(+), 1 deletion(-) create mode 100644 packages/web-components/src/color/neutral-contrast-fill.ts diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index f5e36c37bdbf4b..5ebf7c5ced4e5e 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -13,6 +13,7 @@ import { Breadcrumb } from '@microsoft/fast-foundation'; import { BreadcrumbItem } from '@microsoft/fast-foundation'; import { Button } from '@microsoft/fast-foundation'; import { Checkbox } from '@microsoft/fast-foundation'; +import { ColorRGBA64 } from '@microsoft/fast-colors'; import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation'; import { DesignSystemProvider } from '@microsoft/fast-foundation'; import { Dialog } from '@microsoft/fast-foundation'; @@ -284,6 +285,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 +511,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 +745,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) @@ -1126,6 +1174,9 @@ export enum PaletteType { neutral = "neutral" } +// @public +export function parseColorString(color: string): ColorRGBA64; + // @public export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles; 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..043f1a26af294e 100644 --- a/packages/web-components/src/styles/behaviors.ts +++ b/packages/web-components/src/styles/behaviors.ts @@ -7,6 +7,8 @@ import { accentForegroundCut, accentForegroundLarge, neutralDividerRest, + neutralContrastFill, + neutralContrastFillRest, neutralFill, neutralFillCard, neutralFillInput, @@ -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. * From 55fb77d036920158949531e117d26a3a83dac9c3 Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Thu, 4 Feb 2021 11:30:33 -0800 Subject: [PATCH 2/4] Change files --- ...0-33-users-khamu-add-neutral-contrast-fill-recipe.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/@fluentui-web-components-2021-02-04-11-30-33-users-khamu-add-neutral-contrast-fill-recipe.json 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" +} From 5be20fbf11b091bacdcebfb804e3a08fbea5dff0 Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Thu, 4 Feb 2021 14:37:51 -0800 Subject: [PATCH 3/4] fixed import in behavior --- packages/web-components/src/styles/behaviors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/styles/behaviors.ts b/packages/web-components/src/styles/behaviors.ts index 043f1a26af294e..7f1033d9ed8cd4 100644 --- a/packages/web-components/src/styles/behaviors.ts +++ b/packages/web-components/src/styles/behaviors.ts @@ -6,9 +6,9 @@ import { accentForeground, accentForegroundCut, accentForegroundLarge, - neutralDividerRest, neutralContrastFill, neutralContrastFillRest, + neutralDividerRest, neutralFill, neutralFillCard, neutralFillInput, From 263474e6b973876c63f77c86b07167be7cd354a9 Mon Sep 17 00:00:00 2001 From: Kham Udom Date: Mon, 8 Feb 2021 10:34:28 -0800 Subject: [PATCH 4/4] update api-report --- packages/web-components/docs/api-report.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 5ebf7c5ced4e5e..3b0ab638ae9123 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -13,7 +13,6 @@ import { Breadcrumb } from '@microsoft/fast-foundation'; import { BreadcrumbItem } from '@microsoft/fast-foundation'; import { Button } from '@microsoft/fast-foundation'; import { Checkbox } from '@microsoft/fast-foundation'; -import { ColorRGBA64 } from '@microsoft/fast-colors'; import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation'; import { DesignSystemProvider } from '@microsoft/fast-foundation'; import { Dialog } from '@microsoft/fast-foundation'; @@ -1174,9 +1173,6 @@ export enum PaletteType { neutral = "neutral" } -// @public -export function parseColorString(color: string): ColorRGBA64; - // @public export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles;