From 6d59f3bc7af78b090aaafafa08c6164357d84938 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Fri, 25 Jun 2021 15:18:17 -0700 Subject: [PATCH] Color recipe cleanup (#18732) Removed old color recipes and moved vNext. --- ...-56ab65bd-5398-4300-b73f-2a882dfd6bd3.json | 7 + .../build/generate-default-palettes.js | 29 - packages/web-components/docs/api-report.md | 1320 ++++++++--------- packages/web-components/package.json | 3 +- packages/web-components/src/card/index.ts | 4 +- .../web-components/src/color-vNext/palette.ts | 143 -- .../utilities/base-layer-luminance.ts | 5 - .../src/{color-vNext => color}/README.md | 0 .../src/color/accent-fill.spec.ts | 118 -- .../web-components/src/color/accent-fill.ts | 175 --- .../src/color/accent-foreground-cut.spec.ts | 45 - .../src/color/accent-foreground-cut.ts | 42 - .../src/color/accent-foreground.spec.ts | 136 -- .../src/color/accent-foreground.ts | 154 -- .../src/color/accessible-recipe.ts | 96 -- .../src/color/color-constants.js | 19 - .../web-components/src/color/common.spec.ts | 86 -- packages/web-components/src/color/common.ts | 229 --- .../src/color/create-color-palette.js | 14 - packages/web-components/src/color/index.ts | 117 -- .../src/color/neutral-contrast-fill.spec.ts | 30 - .../src/color/neutral-contrast-fill.ts | 56 - .../src/color/neutral-divider.spec.ts | 29 - .../src/color/neutral-divider.ts | 18 - .../src/color/neutral-fill-card.spec.ts | 59 - .../src/color/neutral-fill-card.ts | 32 - .../src/color/neutral-fill-input.spec.ts | 145 -- .../src/color/neutral-fill-input.ts | 75 - .../src/color/neutral-fill-stealth.spec.ts | 153 -- .../src/color/neutral-fill-stealth.ts | 86 -- .../src/color/neutral-fill-toggle.spec.ts | 30 - .../src/color/neutral-fill-toggle.ts | 60 - .../src/color/neutral-fill.spec.ts | 140 -- .../web-components/src/color/neutral-fill.ts | 76 - .../src/color/neutral-focus.spec.ts | 32 - .../web-components/src/color/neutral-focus.ts | 57 - .../src/color/neutral-foreground-hint.spec.ts | 76 - .../src/color/neutral-foreground-hint.ts | 31 - .../src/color/neutral-foreground-toggle.ts | 43 - .../src/color/neutral-foreground.spec.ts | 67 - .../src/color/neutral-foreground.ts | 60 - .../src/color/neutral-layer.spec.ts | 179 --- .../web-components/src/color/neutral-layer.ts | 173 --- .../src/color/neutral-outline-contrast.ts | 70 - .../src/color/neutral-outline.spec.ts | 107 -- .../src/color/neutral-outline.ts | 77 - .../web-components/src/color/palette.spec.ts | 300 ---- packages/web-components/src/color/palette.ts | 407 ++--- .../src/{color-vNext => color}/recipe.ts | 0 .../src/color/recipes/accent-fill.spec.ts | 59 + .../recipes/accent-fill.ts | 0 .../color/recipes/accent-foreground.spec.ts | 51 + .../recipes/accent-foreground.ts | 0 .../recipes/focus-stroke.ts | 0 .../recipes/foreground-on-accent.spec.ts | 19 + .../recipes/foreground-on-accent.ts | 0 .../recipes/neutral-divider.ts | 0 .../recipes/neutral-fill-contrast.ts | 0 .../recipes/neutral-fill-input.ts | 0 .../recipes/neutral-fill-inverse.ts | 0 .../color/recipes/neutral-fill-layer.spec.ts | 27 + .../recipes/neutral-fill-layer.ts | 0 .../recipes/neutral-fill-stealth.ts | 0 .../recipes/neutral-fill.ts | 0 .../recipes/neutral-foreground-hint.spec.ts | 30 + .../recipes/neutral-foreground-hint.ts | 0 .../color/recipes/neutral-foreground.spec.ts | 20 + .../recipes/neutral-foreground.ts | 0 .../recipes/neutral-layer-1.ts | 0 .../recipes/neutral-layer-2.ts | 0 .../recipes/neutral-layer-3.ts | 0 .../recipes/neutral-layer-4.ts | 0 .../recipes/neutral-layer-card-container.ts | 0 .../recipes/neutral-layer-floating.ts | 0 .../src/color/recipes/neutral-layer.spec.ts | 90 ++ .../recipes/neutral-stroke.ts | 0 .../src/{color-vNext => color}/swatch.ts | 5 + .../color/utilities/base-layer-luminance.ts | 15 + .../utilities/binary-search.ts | 0 .../utilities/color-constants.ts | 0 .../utilities/direction-by-is-dark.ts | 0 .../utilities/is-dark.ts | 0 .../utilities/relative-luminance.ts | 0 .../web-components/src/default-palette.ts | 196 --- .../src/design-system-provider/index.ts | 4 +- packages/web-components/src/design-tokens.ts | 50 +- .../src/fluent-design-system.ts | 492 ------ packages/web-components/src/index.ts | 11 +- .../src/tree-item/tree-item.styles.ts | 2 +- 89 files changed, 1056 insertions(+), 5425 deletions(-) create mode 100644 change/@fluentui-web-components-56ab65bd-5398-4300-b73f-2a882dfd6bd3.json delete mode 100644 packages/web-components/build/generate-default-palettes.js delete mode 100644 packages/web-components/src/color-vNext/palette.ts delete mode 100644 packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts rename packages/web-components/src/{color-vNext => color}/README.md (100%) delete mode 100644 packages/web-components/src/color/accent-fill.spec.ts delete mode 100644 packages/web-components/src/color/accent-fill.ts delete mode 100644 packages/web-components/src/color/accent-foreground-cut.spec.ts delete mode 100644 packages/web-components/src/color/accent-foreground-cut.ts delete mode 100644 packages/web-components/src/color/accent-foreground.spec.ts delete mode 100644 packages/web-components/src/color/accent-foreground.ts delete mode 100644 packages/web-components/src/color/accessible-recipe.ts delete mode 100644 packages/web-components/src/color/color-constants.js delete mode 100644 packages/web-components/src/color/common.spec.ts delete mode 100644 packages/web-components/src/color/common.ts delete mode 100644 packages/web-components/src/color/create-color-palette.js delete mode 100644 packages/web-components/src/color/index.ts delete mode 100644 packages/web-components/src/color/neutral-contrast-fill.spec.ts delete mode 100644 packages/web-components/src/color/neutral-contrast-fill.ts delete mode 100644 packages/web-components/src/color/neutral-divider.spec.ts delete mode 100644 packages/web-components/src/color/neutral-divider.ts delete mode 100644 packages/web-components/src/color/neutral-fill-card.spec.ts delete mode 100644 packages/web-components/src/color/neutral-fill-card.ts delete mode 100644 packages/web-components/src/color/neutral-fill-input.spec.ts delete mode 100644 packages/web-components/src/color/neutral-fill-input.ts delete mode 100644 packages/web-components/src/color/neutral-fill-stealth.spec.ts delete mode 100644 packages/web-components/src/color/neutral-fill-stealth.ts delete mode 100644 packages/web-components/src/color/neutral-fill-toggle.spec.ts delete mode 100644 packages/web-components/src/color/neutral-fill-toggle.ts delete mode 100644 packages/web-components/src/color/neutral-fill.spec.ts delete mode 100644 packages/web-components/src/color/neutral-fill.ts delete mode 100644 packages/web-components/src/color/neutral-focus.spec.ts delete mode 100644 packages/web-components/src/color/neutral-focus.ts delete mode 100644 packages/web-components/src/color/neutral-foreground-hint.spec.ts delete mode 100644 packages/web-components/src/color/neutral-foreground-hint.ts delete mode 100644 packages/web-components/src/color/neutral-foreground-toggle.ts delete mode 100644 packages/web-components/src/color/neutral-foreground.spec.ts delete mode 100644 packages/web-components/src/color/neutral-foreground.ts delete mode 100644 packages/web-components/src/color/neutral-layer.spec.ts delete mode 100644 packages/web-components/src/color/neutral-layer.ts delete mode 100644 packages/web-components/src/color/neutral-outline-contrast.ts delete mode 100644 packages/web-components/src/color/neutral-outline.spec.ts delete mode 100644 packages/web-components/src/color/neutral-outline.ts delete mode 100644 packages/web-components/src/color/palette.spec.ts rename packages/web-components/src/{color-vNext => color}/recipe.ts (100%) create mode 100644 packages/web-components/src/color/recipes/accent-fill.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/accent-fill.ts (100%) create mode 100644 packages/web-components/src/color/recipes/accent-foreground.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/accent-foreground.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/focus-stroke.ts (100%) create mode 100644 packages/web-components/src/color/recipes/foreground-on-accent.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/foreground-on-accent.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-divider.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill-contrast.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill-input.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill-inverse.ts (100%) create mode 100644 packages/web-components/src/color/recipes/neutral-fill-layer.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill-layer.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill-stealth.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-fill.ts (100%) create mode 100644 packages/web-components/src/color/recipes/neutral-foreground-hint.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/neutral-foreground-hint.ts (100%) create mode 100644 packages/web-components/src/color/recipes/neutral-foreground.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/neutral-foreground.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-1.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-2.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-3.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-4.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-card-container.ts (100%) rename packages/web-components/src/{color-vNext => color}/recipes/neutral-layer-floating.ts (100%) create mode 100644 packages/web-components/src/color/recipes/neutral-layer.spec.ts rename packages/web-components/src/{color-vNext => color}/recipes/neutral-stroke.ts (100%) rename packages/web-components/src/{color-vNext => color}/swatch.ts (90%) create mode 100644 packages/web-components/src/color/utilities/base-layer-luminance.ts rename packages/web-components/src/{color-vNext => color}/utilities/binary-search.ts (100%) rename packages/web-components/src/{color-vNext => color}/utilities/color-constants.ts (100%) rename packages/web-components/src/{color-vNext => color}/utilities/direction-by-is-dark.ts (100%) rename packages/web-components/src/{color-vNext => color}/utilities/is-dark.ts (100%) rename packages/web-components/src/{color-vNext => color}/utilities/relative-luminance.ts (100%) delete mode 100644 packages/web-components/src/default-palette.ts delete mode 100644 packages/web-components/src/fluent-design-system.ts diff --git a/change/@fluentui-web-components-56ab65bd-5398-4300-b73f-2a882dfd6bd3.json b/change/@fluentui-web-components-56ab65bd-5398-4300-b73f-2a882dfd6bd3.json new file mode 100644 index 00000000000000..ccfa37582b6917 --- /dev/null +++ b/change/@fluentui-web-components-56ab65bd-5398-4300-b73f-2a882dfd6bd3.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Removed old color recipes and moved vNext.", + "packageName": "@fluentui/web-components", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/build/generate-default-palettes.js b/packages/web-components/build/generate-default-palettes.js deleted file mode 100644 index 22bf988d8a3b97..00000000000000 --- a/packages/web-components/build/generate-default-palettes.js +++ /dev/null @@ -1,29 +0,0 @@ -import fs from 'fs'; -import path from 'path'; -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { createColorPalette } from '../src/color/create-color-palette'; -import { accentBaseColor, neutralBaseColor } from '../src/color/color-constants'; - -const outpath = path.resolve(__dirname, '../src/default-palette.ts'); - -/** - * Define palettes from base colors - */ -const neutralPalette = createColorPalette(parseColorHexRGB(neutralBaseColor)); -const accentPalette = createColorPalette(parseColorHexRGB(accentBaseColor)); - -const file = `/** - * DO NOT EDIT THIS FILE DIRECTLY - * This file generated by web-components/build/${path.parse(__filename).name}${path.parse(__filename).ext} - */ -export const neutralPalette: string[] = ${JSON.stringify(neutralPalette, null, 4)}; -export const accentPalette: string[] = ${JSON.stringify(accentPalette, null, 4)}; -`; - -fs.writeFile(outpath, file, error => { - if (error) { - throw error; - } else { - console.log('\nPalette data written to', outpath, '\n'); - } -}); diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 4c88cfc4847af2..7b977be3bbdaa8 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -5,45 +5,54 @@ ```ts import { Accordion } from '@microsoft/fast-foundation'; +import { AccordionItem } from '@microsoft/fast-foundation'; import { AccordionItemOptions } from '@microsoft/fast-foundation'; import { Anchor as Anchor_2 } from '@microsoft/fast-foundation'; import { AnchoredRegion } from '@microsoft/fast-foundation'; import { Badge as Badge_2 } from '@microsoft/fast-foundation'; +import { BaseProgress } from '@microsoft/fast-foundation'; import { Behavior } from '@microsoft/fast-element'; import { Breadcrumb } from '@microsoft/fast-foundation'; +import { BreadcrumbItem } from '@microsoft/fast-foundation'; import { BreadcrumbItemOptions } from '@microsoft/fast-foundation'; import { Button as Button_2 } from '@microsoft/fast-foundation'; import { Card as Card_2 } from '@microsoft/fast-foundation'; import { CheckboxOptions } from '@microsoft/fast-foundation'; -import { ColorRGBA64 } from '@microsoft/fast-colors'; import { Combobox as Combobox_2 } from '@microsoft/fast-foundation'; import { ComboboxOptions } from '@microsoft/fast-foundation'; import { DataGrid } from '@microsoft/fast-foundation'; import { DataGridCell } from '@microsoft/fast-foundation'; import { DataGridRow } from '@microsoft/fast-foundation'; +import { DesignToken } from '@microsoft/fast-foundation'; import { Dialog } from '@microsoft/fast-foundation'; import { Direction } from '@microsoft/fast-web-utilities'; import { Divider } from '@microsoft/fast-foundation'; import { ElementStyles } from '@microsoft/fast-element'; import { FASTElement } from '@microsoft/fast-element'; +import { Flipper } from '@microsoft/fast-foundation'; import { FlipperOptions } from '@microsoft/fast-foundation'; import { FoundationElement } from '@microsoft/fast-foundation'; import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; +import { HorizontalScrollOptions } from '@microsoft/fast-foundation'; import { Listbox } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; import { Menu } from '@microsoft/fast-foundation'; +import { MenuItem } from '@microsoft/fast-foundation'; import { MenuItemOptions } from '@microsoft/fast-foundation'; import { NumberField as NumberField_2 } from '@microsoft/fast-foundation'; import { NumberFieldOptions } from '@microsoft/fast-foundation'; import { ProgressOptions } from '@microsoft/fast-foundation'; import { ProgressRingOptions } from '@microsoft/fast-foundation'; +import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; import { RadioOptions } from '@microsoft/fast-foundation'; import { Select as Select_2 } from '@microsoft/fast-foundation'; import { SelectOptions } from '@microsoft/fast-foundation'; import { Skeleton } from '@microsoft/fast-foundation'; +import { Slider } from '@microsoft/fast-foundation'; import { SliderLabel } from '@microsoft/fast-foundation'; import { SliderOptions } from '@microsoft/fast-foundation'; +import { Switch } from '@microsoft/fast-foundation'; import { SwitchOptions } from '@microsoft/fast-foundation'; import { Tab } from '@microsoft/fast-foundation'; import { TabPanel } from '@microsoft/fast-foundation'; @@ -51,6 +60,7 @@ import { Tabs } from '@microsoft/fast-foundation'; import { TextArea as TextArea_2 } from '@microsoft/fast-foundation'; import { TextField as TextField_2 } from '@microsoft/fast-foundation'; import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation'; +import { TreeItem } from '@microsoft/fast-foundation'; import { TreeItemOptions } from '@microsoft/fast-foundation'; import { TreeView } from '@microsoft/fast-foundation'; @@ -59,114 +69,78 @@ import { TreeView } from '@microsoft/fast-foundation'; // @internal (undocumented) export const AccentButtonStyles: import("@microsoft/fast-element").ElementStyles; -// Warning: (ae-forgotten-export) The symbol "SwatchFamilyResolver" needs to be exported by the entry point index.d.ts -// Warning: (ae-forgotten-export) The symbol "FillSwatchFamily" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "accentFill" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFill: SwatchFamilyResolver; +// @public (undocumented) +export const accentFillActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "SwatchRecipe" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "accentFillActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillActive: SwatchRecipe; +// @public (undocumented) +export const accentFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillHover: SwatchRecipe; +// @public (undocumented) +export const accentFillFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillLarge" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillLarge: SwatchFamilyResolver; +// @public (undocumented) +export const accentFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillLargeActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillLargeActive: SwatchRecipe; +// @public (undocumented) +export const accentFillHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillLargeHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillLargeHover: SwatchRecipe; +// @public (undocumented) +export const accentFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillLargeRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillLargeRest: SwatchRecipe; +// @public (undocumented) +export const accentFillRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillLargeSelected" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillLargeSelected: SwatchRecipe; +// @public (undocumented) +export const accentFillRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillRest: SwatchRecipe; +// @public (undocumented) +export const accentFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentFillSelected" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentFillSelected: SwatchRecipe; +// @public (undocumented) +export const accentForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForeground" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForeground: SwatchFamilyResolver; +// @public (undocumented) +export const accentForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundActive: SwatchRecipe; +// @public @deprecated (undocumented) +export const accentForegroundCut: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundCut" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const accentForegroundCut: SwatchRecipe; +// @public @deprecated (undocumented) +export const accentForegroundCutLarge: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundCutLarge" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const accentForegroundCutLarge: SwatchRecipe; +// @public (undocumented) +export const accentForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundHover: SwatchRecipe; +// @public (undocumented) +export const accentForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundLarge" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundLarge: SwatchFamilyResolver; +// @public (undocumented) +export const accentForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundLargeActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundLargeActive: SwatchRecipe; +// @public (undocumented) +export const accentForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundLargeHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundLargeHover: SwatchRecipe; +// @public (undocumented) +export const accentForegroundRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundLargeRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundLargeRest: SwatchRecipe; +// @public (undocumented) +export const accentForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "accentForegroundRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const accentForegroundRest: SwatchRecipe; +// @public (undocumented) +export const accentForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const accentPalette: DesignToken>; + +export { Accordion } + +export { AccordionItem } // @public -export const accordionItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const accordionItemStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: AccordionItemOptions) => import("@microsoft/fast-element").ElementStyles; // @public -export const accordionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const accordionStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal // @@ -189,11 +163,13 @@ export class Anchor extends Anchor_2 { // @public export type AnchorAppearance = ButtonAppearance | 'hypertext'; +export { AnchoredRegion } + // @public -export const anchoredRegionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const anchoredRegionStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const anchorStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const anchorStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "Badge" should be prefixed with an underscore because the declaration is marked as @internal // @@ -207,18 +183,38 @@ export class Badge extends Badge_2 { export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; // @public -export const badgeStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const badgeStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "baseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const baseButtonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +// @public (undocumented) +export const baseHeightMultiplier: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const baseHorizontalSpacingMultiplier: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const baseLayerLuminance: import("@microsoft/fast-foundation").CSSDesignToken; + +export { BaseProgress as Progress } + +export { BaseProgress as ProgressRing } + +// @public (undocumented) +export const bodyFont: import("@microsoft/fast-foundation").CSSDesignToken; + +export { Breadcrumb } + +export { BreadcrumbItem } + // @public -export const breadcrumbItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const breadcrumbItemStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: BreadcrumbItemOptions) => import("@microsoft/fast-element").ElementStyles; // @public -export const breadcrumbStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const breadcrumbStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "Button" should be prefixed with an underscore because the declaration is marked as @internal // @@ -237,7 +233,7 @@ export class Button extends Button_2 { export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth'; // @public -export const buttonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const buttonStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public (undocumented) export class Card extends Card_2 { @@ -246,14 +242,17 @@ export class Card extends Card_2 { connectedCallback(): void; // @internal (undocumented) handleChange(source: any, propertyName: string): void; - neutralBaseColor: string; + neutralPaletteSource: string; } // @public -export const cardStyles: import("@microsoft/fast-element").ElementStyles; +export const cardStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const checkboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const checkboxStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: CheckboxOptions) => import("@microsoft/fast-element").ElementStyles; + +// @public (undocumented) +export type ColorRecipe = Recipe; // Warning: (ae-internal-missing-underscore) The name "Combobox" should be prefixed with an underscore because the declaration is marked as @internal // @@ -271,148 +270,31 @@ export class Combobox extends Combobox_2 { export type ComboboxAppearance = SelectAppearance; // @public -export const comboboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const comboboxStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: ComboboxOptions) => import("@microsoft/fast-element").ElementStyles; -// @public -export function createColorPalette(baseColor: any): string[]; +// @public (undocumented) +export const controlCornerRadius: import("@microsoft/fast-foundation").CSSDesignToken; -// @public -export const dataGridCellStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +// @public @deprecated (undocumented) +export const cornerRadius: import("@microsoft/fast-foundation").CSSDesignToken; -// @public -export const dataGridRowStyles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; +export { DataGrid } + +export { DataGridCell } // @public -export const dataGridStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const dataGridCellStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +export { DataGridRow } // @public -export interface DesignSystem { - accentBaseColor: string; - // (undocumented) - accentFillActiveDelta: number; - // (undocumented) - accentFillFocusDelta: number; - // (undocumented) - accentFillHoverDelta: number; - accentFillRestDelta: number; - // (undocumented) - accentFillSelectedDelta: number; - // (undocumented) - accentForegroundActiveDelta: number; - // (undocumented) - accentForegroundFocusDelta: number; - // (undocumented) - accentForegroundHoverDelta: number; - accentForegroundRestDelta: number; - accentPalette: string[]; - backgroundColor: string; - baseHeightMultiplier: number; - baseHorizontalSpacingMultiplier: number; - baseLayerLuminance: number; - cornerRadius: number; - density: number; - designUnit: number; - direction: Direction; - disabledOpacity: number; - elevatedCornerRadius?: number; - focusOutlineWidth: number; - neutralBaseColor: string; - // (undocumented) - neutralContrastFillActiveDelta: number; - // (undocumented) - neutralContrastFillFocusDelta: number; - // (undocumented) - neutralContrastFillHoverDelta: number; - // (undocumented) - neutralContrastFillRestDelta: number; - neutralDividerRestDelta: number; - // (undocumented) - neutralFillActiveDelta: number; - neutralFillCardDelta: number; - // (undocumented) - neutralFillFocusDelta: number; - // (undocumented) - neutralFillHoverDelta: number; - // (undocumented) - neutralFillInputActiveDelta: number; - // (undocumented) - neutralFillInputFocusDelta: number; - // (undocumented) - neutralFillInputHoverDelta: number; - neutralFillInputRestDelta: number; - // (undocumented) - neutralFillInputSelectedDelta: number; - // (undocumented) - neutralFillRestDelta: number; - // (undocumented) - neutralFillSelectedDelta: number; - // (undocumented) - neutralFillStealthActiveDelta: number; - // (undocumented) - neutralFillStealthFocusDelta: number; - // (undocumented) - neutralFillStealthHoverDelta: number; - neutralFillStealthRestDelta: number; - // (undocumented) - neutralFillStealthSelectedDelta: number; - // (undocumented) - neutralFillToggleActiveDelta: number; - // (undocumented) - neutralFillToggleFocusDelta: number; - neutralFillToggleHoverDelta: number; - // (undocumented) - neutralForegroundActiveDelta: number; - // (undocumented) - neutralForegroundFocusDelta: number; - neutralForegroundHoverDelta: number; - // (undocumented) - neutralOutlineActiveDelta: number; - // (undocumented) - neutralOutlineFocusDelta: number; - // (undocumented) - neutralOutlineHoverDelta: number; - neutralOutlineRestDelta: number; - neutralPalette: string[]; - outlineWidth: number; - // (undocumented) - typeRampBaseFontSize: string; - // (undocumented) - typeRampBaseLineHeight: string; - // (undocumented) - typeRampMinus1FontSize: string; - // (undocumented) - typeRampMinus1LineHeight: string; - typeRampMinus2FontSize: string; - // (undocumented) - typeRampMinus2LineHeight: string; - // (undocumented) - typeRampPlus1FontSize: string; - // (undocumented) - typeRampPlus1LineHeight: string; - // (undocumented) - typeRampPlus2FontSize: string; - // (undocumented) - typeRampPlus2LineHeight: string; - // (undocumented) - typeRampPlus3FontSize: string; - // (undocumented) - typeRampPlus3LineHeight: string; - // (undocumented) - typeRampPlus4FontSize: string; - // (undocumented) - typeRampPlus4LineHeight: string; - // (undocumented) - typeRampPlus5FontSize: string; - // (undocumented) - typeRampPlus5LineHeight: string; - // (undocumented) - typeRampPlus6FontSize: string; - // (undocumented) - typeRampPlus6LineHeight: string; -} +export const dataGridRowStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, defintion: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const DesignSystemDefaults: DesignSystem; +export const dataGridStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +// @public (undocumented) +export const density: import("@microsoft/fast-foundation").CSSDesignToken; // @public export class DesignSystemProvider extends FoundationElement { @@ -480,8 +362,16 @@ export class DesignSystemProvider extends FoundationElement { typeRampPlus6LineHeight: string; } +// @public (undocumented) +export const designUnit: import("@microsoft/fast-foundation").CSSDesignToken; + +export { Dialog } + // @public -export const dialogStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const dialogStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +// @public (undocumented) +export const direction: import("@microsoft/fast-foundation").CSSDesignToken; // Warning: (ae-internal-missing-underscore) The name "directionalShadow" should be prefixed with an underscore because the declaration is marked as @internal // @@ -497,30 +387,35 @@ export class DirectionalStyleSheetBehavior implements Behavior { unbind(source: FASTElement & HTMLElement): void; } +// @public (undocumented) +export const disabledOpacity: import("@microsoft/fast-foundation").CSSDesignToken; + +export { Divider } + // @public -export const dividerStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const dividerStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +// @public @deprecated (undocumented) +export const elevatedCornerRadius: import("@microsoft/fast-foundation").CSSDesignToken; // @public export const elevation: string; +// @public (undocumented) +export const fillColor: import("@microsoft/fast-foundation").CSSDesignToken; + // Warning: (ae-internal-missing-underscore) The name "fillStateStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const fillStateStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export { Flipper } + // @public -export const flipperStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const flipperStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: FlipperOptions) => import("@microsoft/fast-element").ElementStyles; // @public -export const fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Accordion>; +export const fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -528,56 +423,18 @@ export const fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast- // Warning: (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal // // @public -export const fluentAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}, typeof Anchor>; +export const fluentAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @beta -export const fluentAnchoredRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof AnchoredRegion>; +export const fluentAnchoredRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // Warning: (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal // // @public -export const fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Badge>; +export const fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Breadcrumb>; +export const fluentBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -585,32 +442,10 @@ export const fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast // Warning: (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal // // @public -export const fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}, typeof Button>; +export const fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: import("@microsoft/fast-element").ViewTemplate; - styles: import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: import("@microsoft/fast-element").ViewTemplate; - styles: import("@microsoft/fast-element").ElementStyles; -}, typeof Card>; +export const fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -619,37 +454,13 @@ export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-found export const fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof DataGrid>; +export const fluentDataGrid: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentDataGridCell: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof DataGridCell>; +export const fluentDataGridCell: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentDataGridRow: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof DataGridRow>; +export const fluentDataGridRow: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentDesignSystemProvider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ @@ -663,64 +474,22 @@ export const fluentDesignSystemProvider: (overrideDefinition?: import("@microsof }, typeof DesignSystemProvider>; // @public -export const fluentDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Dialog>; +export const fluentDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Divider>; +export const fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; -// Warning: (ae-incompatible-release-tags) The symbol "fluentHorizontalScroll" is marked as @public, but its signature references "HorizontalScroll" which is marked as @internal -// // @public -export const fluentHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof HorizontalScroll>; +export const fluentHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Listbox>; +export const fluentListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Menu>; +export const fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -729,15 +498,7 @@ export const fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-found export const fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof ListboxOption>; +export const fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -749,144 +510,82 @@ export const fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-f export const fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof RadioGroup>; +export const fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Skeleton>; +export const fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof SliderLabel>; +export const fluentSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Tab>; +export const fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof TabPanel>; +export const fluentTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public -export const fluentTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Tabs>; +export const fluentTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // Warning: (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal // // @public -export const fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}, typeof TextArea>; +export const fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // Warning: (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal // // @public -export const fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; - shadowOptions: { - delegatesFocus: true; - }; -}, typeof TextField>; +export const fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // Warning: (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal // // @public -export const fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof Tooltip>; +export const fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; // @public export const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ - baseName: string; - template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; - styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -}, typeof TreeView>; +export const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; + +// @public @deprecated (undocumented) +export const focusOutlineWidth: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const focusStrokeInner: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const focusStrokeInnerRecipe: DesignToken; + +// @public (undocumented) +export const focusStrokeOuter: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const focusStrokeOuterRecipe: DesignToken; + +// @public (undocumented) +export const focusStrokeWidth: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const foregroundOnAccentLargeRecipe: DesignToken; + +// @public (undocumented) +export const foregroundOnAccentRecipe: DesignToken; + +// @public (undocumented) +export const foregroundOnAccentRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const foregroundOnAccentRestLarge: import("@microsoft/fast-foundation").CSSDesignToken; // @public export const heightNumber: import("@microsoft/fast-element").CSSDirective; @@ -904,6 +603,9 @@ export class HorizontalScroll extends HorizontalScroll_2 { // @internal (undocumented) export const HypertextStyles: import("@microsoft/fast-element").ElementStyles; +// @public (undocumented) +export type InteractiveColorRecipe = Recipe; + // @public (undocumented) export interface InteractiveSwatchSet { active: Swatch; @@ -912,286 +614,354 @@ export interface InteractiveSwatchSet { rest: Swatch; } +// Warning: (ae-internal-missing-underscore) The name "isDark" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export function isDark(color: Swatch): boolean; + // @public (undocumented) -export function isDarkMode(designSystem: DesignSystem): boolean; +export const layerCornerRadius: import("@microsoft/fast-foundation").CSSDesignToken; // Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const LightweightButtonStyles: import("@microsoft/fast-element").ElementStyles; +export { Listbox } + // @public -export const listboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const listboxStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +export { Menu } + +export { MenuItem } // @public -export const menuItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const menuItemStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: MenuItemOptions) => import("@microsoft/fast-element").ElementStyles; // @public -export const menuStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const menuStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => 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; +// @public @deprecated (undocumented) +export const neutralContrastFillActive: import("@microsoft/fast-foundation").CSSDesignToken; -// 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 @deprecated (undocumented) +export const neutralContrastFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// 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 @deprecated (undocumented) +export const neutralContrastFillFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// 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 @deprecated (undocumented) +export const neutralContrastFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralDividerRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralDividerRest: SwatchRecipe; +// @public @deprecated (undocumented) +export const neutralContrastFillHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "ColorRecipe" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "neutralFill" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFill: ColorRecipe; +// @public @deprecated (undocumented) +export const neutralContrastFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillActive: SwatchRecipe; +// @public @deprecated (undocumented) +export const neutralContrastFillRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "Swatch" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "neutralFillCard" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function neutralFillCard(designSystem: DesignSystem): Swatch_2; +// @public @deprecated (undocumented) +export const neutralContrastFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "SwatchResolver" needs to be exported by the entry point index.d.ts -// -// @internal (undocumented) -export function neutralFillCard(backgroundResolver: SwatchResolver): SwatchResolver; +// @public @deprecated (undocumented) +export const neutralDivider: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillHover: SwatchRecipe; +// @public @deprecated (undocumented) +export const neutralDividerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillInput" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillInput: ColorRecipe; +// @public (undocumented) +export const neutralFillActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillInputActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillInputActive: SwatchRecipe; +// @public (undocumented) +export const neutralFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillInputHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillInputHover: SwatchRecipe; +// @public @deprecated (undocumented) +export const neutralFillCard: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillInputRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillInputRest: SwatchRecipe; +// @public @deprecated (undocumented) +export const neutralFillCardDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillInputSelected" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillInputSelected: SwatchRecipe; +// @public (undocumented) +export const neutralFillFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillRest: SwatchRecipe; +// @public (undocumented) +export const neutralFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillSelected" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillSelected: SwatchRecipe; +// @public (undocumented) +export const neutralFillHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillStealth" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillStealth: ColorRecipe; +// @public (undocumented) +export const neutralFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillStealthActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillStealthActive: ColorRecipe; +// @public (undocumented) +export const neutralFillInputActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillStealthHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillStealthHover: ColorRecipe; +// @public (undocumented) +export const neutralFillInputActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillStealthRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillStealthRest: ColorRecipe; +// @public (undocumented) +export const neutralFillInputFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillStealthSelected" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillStealthSelected: ColorRecipe; +// @public (undocumented) +export const neutralFillInputFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillToggle" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillToggle: SwatchFamilyResolver; +// @public (undocumented) +export const neutralFillInputHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillToggleActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillToggleActive: SwatchRecipe; +// @public (undocumented) +export const neutralFillInputHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillToggleHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillToggleHover: SwatchRecipe; +// @public (undocumented) +export const neutralFillInputRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFillToggleRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFillToggleRest: SwatchRecipe; +// @public (undocumented) +export const neutralFillInputRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralFocus" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralFocus: ColorRecipe; +// @public (undocumented) +export const neutralFillInputRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "DesignSystemResolver" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "neutralFocusInnerAccent" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export function neutralFocusInnerAccent(accentFillColor: DesignSystemResolver): DesignSystemResolver; +// @public (undocumented) +export const neutralFillInverseActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForeground" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralForeground: SwatchFamilyResolver; +// @public (undocumented) +export const neutralFillInverseActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralForegroundActive: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundHint" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralForegroundHint: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundHintLarge" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralForegroundHintLarge: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralForegroundHover: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralForegroundRest: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundToggle" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralForegroundToggle: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralForegroundToggleLarge" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralForegroundToggleLarge: SwatchRecipe; +// @public (undocumented) +export const neutralFillInverseRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerCard" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerCard: ColorRecipe; +// @public (undocumented) +export const neutralFillLayerRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerCardContainer" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerCardContainer: ColorRecipe; +// @public (undocumented) +export const neutralFillLayerRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerFloating" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerFloating: ColorRecipe; +// @public (undocumented) +export const neutralFillLayerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerL1" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerL1: ColorRecipe; +// @public (undocumented) +export const neutralFillRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerL1Alt" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerL1Alt: ColorRecipe; +// @public (undocumented) +export const neutralFillRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerL2" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerL2: ColorRecipe; +// @public (undocumented) +export const neutralFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerL3" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerL3: ColorRecipe; +// @public (undocumented) +export const neutralFillStealthActive: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralLayerL4" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const neutralLayerL4: ColorRecipe; +// @public (undocumented) +export const neutralFillStealthActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-forgotten-export) The symbol "SwatchFamily" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "neutralOutline" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutline: ColorRecipe; +// @public (undocumented) +export const neutralFillStealthFocus: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineActive: SwatchRecipe; +// @public (undocumented) +export const neutralFillStealthFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineContrast" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineContrast: ColorRecipe; +// @public (undocumented) +export const neutralFillStealthHover: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineContrastActive" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineContrastActive: SwatchRecipe; +// @public (undocumented) +export const neutralFillStealthHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineContrastHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineContrastHover: SwatchRecipe; +// @public (undocumented) +export const neutralFillStealthRecipe: DesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineContrastRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineContrastRest: SwatchRecipe; +// @public (undocumented) +export const neutralFillStealthRest: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineHover" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineHover: SwatchRecipe; +// @public (undocumented) +export const neutralFillStealthRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; -// Warning: (ae-internal-missing-underscore) The name "neutralOutlineRest" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const neutralOutlineRest: SwatchRecipe; +// @public (undocumented) +export const neutralFillStrongActive: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongFocus: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongHover: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongRecipe: DesignToken; + +// @public (undocumented) +export const neutralFillStrongRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralFillStrongRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleActive: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleFocus: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleHover: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFillToggleRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFocus: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralFocusInnerAccent: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralForegroundHint: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralForegroundHintRecipe: DesignToken; + +// @public (undocumented) +export const neutralForegroundRecipe: DesignToken; + +// @public (undocumented) +export const neutralForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayer1: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayer1Recipe: DesignToken; + +// @public (undocumented) +export const neutralLayer2: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayer2Recipe: DesignToken; + +// @public (undocumented) +export const neutralLayer3: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayer3Recipe: DesignToken; + +// @public (undocumented) +export const neutralLayer4: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayer4Recipe: DesignToken; + +// @public (undocumented) +export const neutralLayerCardContainer: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayerCardContainerRecipe: DesignToken; + +// @public (undocumented) +export const neutralLayerFloating: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralLayerFloatingRecipe: DesignToken; + +// @public @deprecated (undocumented) +export const neutralLayerL1: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralLayerL2: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralLayerL3: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralLayerL4: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralOutlineActive: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralOutlineFocus: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralOutlineHover: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public @deprecated (undocumented) +export const neutralOutlineRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralPalette: DesignToken>; + +// @public (undocumented) +export const neutralStrokeActive: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeDividerRecipe: DesignToken; + +// @public (undocumented) +export const neutralStrokeDividerRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeDividerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeFocus: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeHover: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeRecipe: DesignToken; + +// @public (undocumented) +export const neutralStrokeRest: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const neutralStrokeRestDelta: import("@microsoft/fast-foundation").CSSDesignToken; // Warning: (ae-internal-missing-underscore) The name "NumberField" should be prefixed with an underscore because the declaration is marked as @internal // @@ -1210,13 +980,16 @@ export type NumberFieldAppearance = 'filled' | 'outline'; export const numberFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const OptionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const OptionStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles; +// @public @deprecated (undocumented) +export const outlineWidth: import("@microsoft/fast-foundation").CSSDesignToken; + // @public export interface Palette { // Warning: (ae-forgotten-export) The symbol "RelativeLuminance" needs to be exported by the entry point index.d.ts @@ -1229,12 +1002,6 @@ export interface Palette { readonly swatches: ReadonlyArray; } -// Warning: (ae-forgotten-export) The symbol "Palette" needs to be exported by the entry point index.d.ts -// Warning: (ae-internal-missing-underscore) The name "palette" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal @deprecated -export function palette(paletteType: PaletteType): DesignSystemResolver; - // @public (undocumented) export type PaletteRGB = Palette; @@ -1243,28 +1010,27 @@ export const PaletteRGB: Readonly<{ create(source: SwatchRGB): PaletteRGB; }>; -// @public @deprecated -export enum PaletteType { - // (undocumented) - accent = "accent", - // (undocumented) - neutral = "neutral" -} - // @public -export function parseColorString(color: string): ColorRGBA64; +export const progressRingStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: ProgressRingOptions) => import("@microsoft/fast-element").ElementStyles; // @public -export const progressRingStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const progressStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: ProgressOptions) => import("@microsoft/fast-element").ElementStyles; -// @public -export const progressStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export { Radio } + +export { RadioGroup } // @public -export const radioGroupStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const radioGroupStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const RadioStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const RadioStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: RadioOptions) => import("@microsoft/fast-element").ElementStyles; + +// @public (undocumented) +export interface Recipe { + // (undocumented) + evaluate(element: HTMLElement, reference?: Swatch): T; +} // Warning: (ae-internal-missing-underscore) The name "Select" should be prefixed with an underscore because the declaration is marked as @internal // @@ -1284,14 +1050,20 @@ export type SelectAppearance = 'filled' | 'outline'; // @public export const selectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export { Skeleton } + // @public -export const skeletonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const skeletonStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +export { Slider } + +export { SliderLabel } // @public -export const sliderLabelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const sliderLabelStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const sliderStyles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; +export const sliderStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: SliderOptions) => import("@microsoft/fast-element").ElementStyles; // @public export enum StandardLuminance { @@ -1306,6 +1078,9 @@ export enum StandardLuminance { // @internal (undocumented) export const StealthButtonStyles: import("@microsoft/fast-element").ElementStyles; +// @public (undocumented) +export const strokeWidth: import("@microsoft/fast-foundation").CSSDesignToken; + // @public export interface Swatch extends RelativeLuminance { // (undocumented) @@ -1327,19 +1102,32 @@ export interface SwatchRGB extends Swatch { // @public (undocumented) export const SwatchRGB: Readonly<{ create(r: number, g: number, b: number): SwatchRGB; + from(obj: { + r: number; + g: number; + b: number; + }): SwatchRGB; }>; +export { Switch } + // @public -export const switchStyles: (context: any, defintiion: any) => import("@microsoft/fast-element").ElementStyles; +export const switchStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, defintiion: SwitchOptions) => import("@microsoft/fast-element").ElementStyles; + +export { Tab } + +export { TabPanel } // @public -export const tabPanelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const tabPanelStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +export { Tabs } // @public -export const tabsStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const tabsStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // @public -export const tabStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const tabStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "TextArea" should be prefixed with an underscore because the declaration is marked as @internal // @@ -1385,11 +1173,69 @@ export class Tooltip extends Tooltip_2 { connectedCallback(): void; } +export { TreeItem } + // @public -export const treeItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const treeItemStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: TreeItemOptions) => import("@microsoft/fast-element").ElementStyles; + +export { TreeView } // @public -export const treeViewStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +export const treeViewStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + +// @public (undocumented) +export const typeRampBaseFontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampBaseLineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampMinus1FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampMinus1LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampMinus2FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampMinus2LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus1FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus1LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus2FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus2LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus3FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus3LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus4FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus4LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus5FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus5LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus6FontSize: import("@microsoft/fast-foundation").CSSDesignToken; + +// @public (undocumented) +export const typeRampPlus6LineHeight: import("@microsoft/fast-foundation").CSSDesignToken; // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 4dfd12727b487d..69a7b60134b2ef 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -25,7 +25,7 @@ "clean": "node ./build/clean.js dist", "doc": "api-extractor run --local", "doc:ci": "api-extractor run --local", - "build": "yarn generate-default-palettes && tsc -p ./tsconfig.json && rollup -c && npm run doc", + "build": "tsc -p ./tsconfig.json && rollup -c && npm run doc", "dev": "tsc -p ./tsconfig.json -w", "tdd": "npm run dev & npm run test-chrome:watch", "prepare": "yarn clean && yarn build", @@ -36,7 +36,6 @@ "code-style": "npm run prettier && npm run lint", "start": "start-storybook -p 6006", "build-storybook": "build-storybook", - "generate-default-palettes": "node -r esm build/generate-default-palettes.js", "test": "yarn doc:ci && yarn test-chrome:verbose", "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index 13d8b01d33019a..a6de32d002a287 100644 --- a/packages/web-components/src/card/index.ts +++ b/packages/web-components/src/card/index.ts @@ -2,8 +2,8 @@ import { composedParent, Card as FoundationCard, cardTemplate as template } from import { attr, Notifier, Observable } from '@microsoft/fast-element'; import { parseColorHexRGB } from '@microsoft/fast-colors'; import { fillColor, neutralFillLayerRecipe, neutralPalette } from '../design-tokens'; -import { Swatch, SwatchRGB } from '../color-vNext/swatch'; -import { PaletteRGB } from '../color-vNext/palette'; +import { Swatch, SwatchRGB } from '../color/swatch'; +import { PaletteRGB } from '../color/palette'; import { cardStyles as styles } from './card.styles'; /** diff --git a/packages/web-components/src/color-vNext/palette.ts b/packages/web-components/src/color-vNext/palette.ts deleted file mode 100644 index 92df02283fb38e..00000000000000 --- a/packages/web-components/src/color-vNext/palette.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { clamp, ColorRGBA64, ComponentStateColorPalette, parseColorHexRGB } from '@microsoft/fast-colors'; -import { Swatch, SwatchRGB } from './swatch'; -import { binarySearch } from './utilities/binary-search'; -import { directionByIsDark } from './utilities/direction-by-is-dark'; -import { contrast, RelativeLuminance } from './utilities/relative-luminance'; - -/** - * A collection of {@link Swatch} instances - * @public - */ -export interface Palette { - readonly source: T; - readonly swatches: ReadonlyArray; - - /** - * Returns a swatch from the palette that most closely matches - * the contrast ratio provided to a provided reference. - */ - colorContrast(reference: Swatch, contrast: number, initialIndex?: number, direction?: 1 | -1): T; - - /** - * Returns the index of the palette that most closely matches - * the relativeLuminance of the provided swatch - */ - closestIndexOf(reference: RelativeLuminance): number; - - /** - * Gets a swatch by index. Index is clamped to the limits - * of the palette so a Swatch will always be returned. - */ - get(index: number): T; -} - -export type PaletteRGB = Palette; - -export const PaletteRGB = Object.freeze({ - create(source: SwatchRGB): PaletteRGB { - return PaletteRGBImpl.from(source); - }, -}); - -/** - * A {@link Palette} representing RGB swatch values. - * @public - */ -class PaletteRGBImpl implements Palette { - /** - * {@inheritdoc Palette.source} - */ - public readonly source: SwatchRGB; - public readonly swatches: ReadonlyArray; - private lastIndex: number; - private reversedSwatches: ReadonlyArray; - /** - * - * @param source - The source color for the palette - * @param swatches - All swatches in the palette - */ - constructor(source: SwatchRGB, swatches: ReadonlyArray) { - this.source = source; - this.swatches = swatches; - - this.reversedSwatches = Object.freeze([...this.swatches].reverse()); - this.lastIndex = this.swatches.length - 1; - } - - /** - * {@inheritdoc Palette.colorContrast} - */ - public colorContrast( - reference: Swatch, - contrastTarget: number, - initialSearchIndex?: number, - direction?: 1 | -1, - ): SwatchRGB { - if (initialSearchIndex === undefined) { - initialSearchIndex = this.closestIndexOf(reference); - } - - let source: ReadonlyArray = this.swatches; - const endSearchIndex = this.lastIndex; - let startSearchIndex = initialSearchIndex; - - if (direction === undefined) { - direction = directionByIsDark(reference); - } - - const condition = (value: SwatchRGB) => contrast(reference, value) >= contrastTarget; - - if (direction === -1) { - source = this.reversedSwatches; - startSearchIndex = endSearchIndex - startSearchIndex; - } - - return binarySearch(source, condition, startSearchIndex, endSearchIndex); - } - - /** - * {@inheritdoc Palette.get} - */ - public get(index: number): SwatchRGB { - return this.swatches[index] || this.swatches[clamp(index, 0, this.lastIndex)]; - } - - /** - * {@inheritdoc Palette.closestIndexOf} - */ - public closestIndexOf(reference: Swatch): number { - const index = this.swatches.indexOf(reference as SwatchRGB); - - if (index !== -1) { - return index; - } - - const closest = this.swatches.reduce((previous, next) => - Math.abs(next.relativeLuminance - reference.relativeLuminance) < - Math.abs(previous.relativeLuminance - reference.relativeLuminance) - ? next - : previous, - ); - - return this.swatches.indexOf(closest); - } - - /** - * Create a color palette from a provided swatch - * @param source - The source swatch to create a palette from - * @returns - */ - static from(source: SwatchRGB): PaletteRGB { - return new PaletteRGBImpl( - source, - Object.freeze( - new ComponentStateColorPalette({ - baseColor: ColorRGBA64.fromObject(source)!, - }).palette.map(x => { - const _x = parseColorHexRGB(x.toStringHexRGB())!; - return SwatchRGB.create(_x.r, _x.g, _x.b); - }), - ), - ); - } -} diff --git a/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts b/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts deleted file mode 100644 index 09fbf998ffd0df..00000000000000 --- a/packages/web-components/src/color-vNext/utilities/base-layer-luminance.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Swatch, SwatchRGB } from '../swatch'; - -export function baseLayerLuminanceSwatch(luminance: number): Swatch { - return SwatchRGB.create(luminance, luminance, luminance); -} diff --git a/packages/web-components/src/color-vNext/README.md b/packages/web-components/src/color/README.md similarity index 100% rename from packages/web-components/src/color-vNext/README.md rename to packages/web-components/src/color/README.md diff --git a/packages/web-components/src/color/accent-fill.spec.ts b/packages/web-components/src/color/accent-fill.spec.ts deleted file mode 100644 index 0105ee85960ab2..00000000000000 --- a/packages/web-components/src/color/accent-fill.spec.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { expect } from 'chai'; -import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { - accentFill, - accentFillActive, - accentFillHover, - accentFillLargeActive, - accentFillLargeHover, - accentFillLargeRest, - accentFillLargeSelected, - accentFillRest, - accentFillSelected, -} from './accent-fill'; -import { findClosestSwatchIndex, Palette } from './palette'; -import { contrast, Swatch } from './common'; -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { neutralBaseColor, accentBaseColor } from './color-constants'; -import { PaletteRGB } from '../color-vNext/palette'; -import { SwatchRGB } from '../color-vNext/swatch'; -import { accentFill as accentFillNew } from '../color-vNext/recipes/accent-fill'; -import { foregroundOnAccent as foregroundOnAccentNew } from '../color-vNext/recipes/foreground-on-accent'; -import { accentForegroundCut } from './accent-foreground-cut'; - -describe('accentFill', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - const accentIndex: number = findClosestSwatchIndex(getAccentPalette, accentBaseColor)(DesignSystemDefaults); - - it('should operate on design system defaults', (): void => { - [ - accentFillActive, - accentFillHover, - accentFillLargeActive, - accentFillLargeHover, - accentFillLargeRest, - accentFillLargeSelected, - accentFillRest, - accentFillSelected, - ].forEach(fn => { - expect(accentPalette).to.include(fn({} as DesignSystem)); - }); - }); - - it('should accept a function that resolves a background swatch', (): void => { - expect(typeof accentFillRest(() => '#FFF')).to.equal('function'); - expect(accentFillRest(() => '#000')({} as DesignSystem)).to.equal(accentPalette[63]); - }); - - it('should have accessible rest and hover colors against accentForegroundCut', (): void => { - const accentColors: Swatch[] = ['#0078D4', '#107C10', '#5C2D91', '#D83B01', '#F2C812']; - - accentColors.forEach((accent: Swatch): void => { - neutralPalette.forEach((swatch: Swatch): void => { - const designSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - accentPaletteSource: ['#FFF', accent, '#000'], - }); - - const accentForegroundCutColor: Swatch = accentForegroundCut(designSystem); - - expect(contrast(accentForegroundCutColor, accentFillRest(designSystem))).to.be.gte(4.5); - expect(contrast(accentForegroundCutColor, accentFillHover(designSystem))).to.be.gte(4.5); - expect(contrast(accentForegroundCutColor, accentFillLargeRest(designSystem))).to.be.gte(3); - expect(contrast(accentForegroundCutColor, accentFillLargeHover(designSystem))).to.be.gte(3); - }); - }); - }); -}); - -describe('ensure parity between old and new recipe implementation', () => { - const neutralColor = parseColorHexRGB(neutralBaseColor)!; - const neutralPalette = PaletteRGB.create(SwatchRGB.create(neutralColor.r, neutralColor.g, neutralColor.b)); - const accentColor = parseColorHexRGB(accentBaseColor)!; - const accentPalette = PaletteRGB.create(SwatchRGB.create(accentColor.r, accentColor.g, accentColor.b)); - neutralPalette.swatches.forEach((newSwatch, index) => { - const { - accentFillHoverDelta, - accentFillActiveDelta, - accentFillFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - } = DesignSystemDefaults; - - const oldValues = accentFill({ - ...DesignSystemDefaults, - backgroundColor: DesignSystemDefaults.neutralPalette[index], - }); - const textColor = foregroundOnAccentNew(accentPalette.source, 4.5); - const newValues = accentFillNew( - accentPalette, - neutralPalette, - newSwatch, - textColor, - 4.5, - accentFillHoverDelta, - accentFillActiveDelta, - accentFillFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - ); - - for (let key in oldValues) { - if (key !== 'selected') { - it(`${newSwatch.toColorString()} old value for ${key} at ${oldValues[key]} should be equal to new value`, () => { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); - }); - } - } - }); -}); diff --git a/packages/web-components/src/color/accent-fill.ts b/packages/web-components/src/color/accent-fill.ts deleted file mode 100644 index c18032ba93faa7..00000000000000 --- a/packages/web-components/src/color/accent-fill.ts +++ /dev/null @@ -1,175 +0,0 @@ -import { inRange } from 'lodash-es'; -import { - accentBaseColor, - accentFillActiveDelta, - accentFillFocusDelta, - accentFillHoverDelta, - accentFillSelectedDelta, - accentPalette, - DesignSystem, - DesignSystemResolver, - neutralFillActiveDelta, - neutralFillHoverDelta, - neutralFillRestDelta, -} from '../fluent-design-system'; -import { accentForegroundCut } from './accent-foreground-cut'; -import { - colorRecipeFactory, - contrast, - designSystemResolverMax, - FillSwatchFamily, - Swatch, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; -import { findClosestBackgroundIndex, findClosestSwatchIndex, getSwatch, isDarkMode, Palette } from './palette'; - -const neutralFillThreshold: DesignSystemResolver = designSystemResolverMax( - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, -); - -function accentFillAlgorithm(contrastTarget: number): DesignSystemResolver { - return (designSystem: DesignSystem): FillSwatchFamily => { - const palette: Palette = accentPalette(designSystem); - const paletteLength: number = palette.length; - const accent: Swatch = accentBaseColor(designSystem); - const textColor: Swatch = accentForegroundCut( - Object.assign({}, designSystem, { - backgroundColor: accent, - }), - ); - const hoverDelta: number = accentFillHoverDelta(designSystem); - - // Use the hover direction that matches the neutral fill recipe. - const backgroundIndex: number = findClosestBackgroundIndex(designSystem); - const swapThreshold: number = neutralFillThreshold(designSystem); - const direction: 1 | -1 = backgroundIndex >= swapThreshold ? -1 : 1; - const maxIndex: number = paletteLength - 1; - const accentIndex: number = findClosestSwatchIndex(accentPalette, accent)(designSystem); - - let accessibleOffset: number = 0; - - // Move the accent color the direction of hover, while maintaining the foreground color. - while ( - accessibleOffset < direction * hoverDelta && - inRange(accentIndex + accessibleOffset + direction, 0, paletteLength) && - contrast(palette[accentIndex + accessibleOffset + direction], textColor) >= contrastTarget && - inRange(accentIndex + accessibleOffset + direction + direction, 0, maxIndex) - ) { - accessibleOffset += direction; - } - - const hoverIndex: number = accentIndex + accessibleOffset; - const restIndex: number = hoverIndex + direction * -1 * hoverDelta; - const activeIndex: number = restIndex + direction * accentFillActiveDelta(designSystem); - const focusIndex: number = restIndex + direction * accentFillFocusDelta(designSystem); - - return { - rest: getSwatch(restIndex, palette), - hover: getSwatch(hoverIndex, palette), - active: getSwatch(activeIndex, palette), - focus: getSwatch(focusIndex, palette), - selected: getSwatch( - restIndex + - (isDarkMode(designSystem) - ? accentFillSelectedDelta(designSystem) * -1 - : accentFillSelectedDelta(designSystem)), - palette, - ), - }; - }; -} - -/** - * @internal - */ -export const accentFill: SwatchFamilyResolver = colorRecipeFactory(accentFillAlgorithm(4.5)); - -/** - * @internal - */ -export const accentFillLarge: SwatchFamilyResolver = colorRecipeFactory(accentFillAlgorithm(3)); - -/** - * @internal - */ -export const accentFillRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - accentFill, -); - -/** - * @internal - */ -export const accentFillHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - accentFill, -); - -/** - * @internal - */ -export const accentFillActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - accentFill, -); - -/** - * @internal - */ -export const accentFillFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - accentFill, -); - -/** - * @internal - */ -export const accentFillSelected: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.selected, - accentFill, -); - -/** - * @internal - */ -export const accentFillLargeRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - accentFillLarge, -); - -/** - * @internal - */ -export const accentFillLargeHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - accentFillLarge, -); - -/** - * @internal - */ -export const accentFillLargeActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - accentFillLarge, -); - -/** - * @internal - */ -export const accentFillLargeFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - accentFillLarge, -); - -/** - * @internal - */ -export const accentFillLargeSelected: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.selected, - accentFillLarge, -); diff --git a/packages/web-components/src/color/accent-foreground-cut.spec.ts b/packages/web-components/src/color/accent-foreground-cut.spec.ts deleted file mode 100644 index 091126d47bbe18..00000000000000 --- a/packages/web-components/src/color/accent-foreground-cut.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystemDefaults, DesignSystem } from '../fluent-design-system'; -import { accentForegroundCut, accentForegroundCutLarge } from './accent-foreground-cut'; -import { neutralBaseColor, accentBaseColor } from "./color-constants"; -import { Swatch } from "./common"; -import { foregroundOnAccent as foregroundOnAccentNew } from "../color-vNext/recipes/foreground-on-accent"; - -describe('Cut text', (): void => { - it('should return white by by default', (): void => { - expect(accentForegroundCut(undefined as any)).to.equal('#FFFFFF'); - expect(accentForegroundCutLarge(undefined as any)).to.equal('#FFFFFF'); - }); - it('should return black when background does not meet contrast ratio', (): void => { - expect(accentForegroundCut((): Swatch => '#FFF')({} as any)).to.equal('#000000'); - expect(accentForegroundCutLarge((): Swatch => '#FFF')({} as any)).to.equal('#000000'); - - expect( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - accentForegroundCut((designSystem: DesignSystem) => '#FFF')(DesignSystemDefaults), - ).to.equal('#000000'); - expect( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - accentForegroundCutLarge((designSystem: DesignSystem) => '#FFF')(DesignSystemDefaults), - ).to.equal('#000000'); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(accentBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - it( - `should be the same for ${palette.source}`, - () => { - expect( - accentForegroundCut( - { ...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.accentBaseColor } - ) - ).to.be.equal( - foregroundOnAccentNew(palette.source, 4.5).toColorString().toUpperCase() - ) - } - ) -}) diff --git a/packages/web-components/src/color/accent-foreground-cut.ts b/packages/web-components/src/color/accent-foreground-cut.ts deleted file mode 100644 index 087d07b4758679..00000000000000 --- a/packages/web-components/src/color/accent-foreground-cut.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { accentBaseColor, DesignSystem } from '../fluent-design-system'; -import { black, white } from './color-constants'; -import { contrast, Swatch, SwatchRecipe, SwatchResolver } from './common'; - -/** - * Function to derive accentForegroundCut from an input background and target contrast ratio - */ -const accentForegroundCutAlgorithm: (backgroundColor: Swatch, targetContrast: number) => Swatch = ( - backgroundColor: Swatch, - targetContrast: number, -): Swatch => { - return contrast(white, backgroundColor) >= targetContrast ? white : black; -}; - -/** - * Factory to create a accent-foreground-cut function that operates on a target contrast ratio - */ -function accentForegroundCutFactory(targetContrast: number): SwatchRecipe { - function accentForegroundCutInternal(designSystem: DesignSystem): Swatch; - function accentForegroundCutInternal(backgroundResolver: SwatchResolver): SwatchResolver; - function accentForegroundCutInternal(arg: any): any { - return typeof arg === 'function' - ? (designSystem: DesignSystem): Swatch => { - return accentForegroundCutAlgorithm(arg(designSystem), targetContrast); - } - : accentForegroundCutAlgorithm(accentBaseColor(arg), targetContrast); - } - - return accentForegroundCutInternal; -} - -/** - * @internal - * Cut text for normal sized text, less than 18pt normal weight - */ -export const accentForegroundCut: SwatchRecipe = accentForegroundCutFactory(4.5); - -/** - * @internal - * Cut text for large sized text, greater than 18pt or 16pt and bold - */ -export const accentForegroundCutLarge: SwatchRecipe = accentForegroundCutFactory(3); diff --git a/packages/web-components/src/color/accent-foreground.spec.ts b/packages/web-components/src/color/accent-foreground.spec.ts deleted file mode 100644 index 642bb4c20a6b51..00000000000000 --- a/packages/web-components/src/color/accent-foreground.spec.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { expect } from 'chai'; -import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { - accentForegroundActive, - accentForegroundHover, - accentForegroundLargeActive, - accentForegroundLargeHover, - accentForegroundLargeRest, - accentForegroundRest, - accentForeground -} from './accent-foreground'; -import { Palette } from './palette'; -import { contrast, Swatch } from './common'; -import { accentBaseColor, neutralBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { accentForeground as accentForegroundNew } from "../color-vNext/recipes/accent-foreground"; - -describe('accentForeground', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should operate on design system defaults', (): void => { - expect(accentForegroundRest({} as DesignSystem)).to.equal(accentPalette[59]); - expect(accentForegroundHover({} as DesignSystem)).to.equal(accentPalette[65]); - expect(accentForegroundActive({} as DesignSystem)).to.equal(accentPalette[55]); - expect(accentForegroundLargeRest({} as DesignSystem)).to.equal(accentPalette[59]); - expect(accentForegroundLargeHover({} as DesignSystem)).to.equal(accentPalette[65]); - expect(accentForegroundLargeActive({} as DesignSystem)).to.equal(accentPalette[55]); - }); - - it('should accept a function that resolves a background swatch', (): void => { - expect(typeof accentForegroundRest(() => '#FFF')).to.equal('function'); - expect(accentForegroundRest(() => '#000')({} as DesignSystem)).to.equal(accentPalette[59]); - expect(typeof accentForegroundRest(() => '#FFFFFF')).to.equal('function'); - expect(accentForegroundRest(() => '#000000')({} as DesignSystem)).to.equal(accentPalette[59]); - }); - - it('should increase contrast on hover state and decrease contrast on active state in either mode', (): void => { - expect(accentPalette.indexOf(accentForegroundHover(DesignSystemDefaults))).to.be.greaterThan( - accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults)), - ); - expect(accentPalette.indexOf(accentForegroundActive(DesignSystemDefaults))).to.be.lessThan( - accentPalette.indexOf(accentForegroundRest(DesignSystemDefaults)), - ); - - const darkDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - backgroundColor: '#000', - }); - expect(accentPalette.indexOf(accentForegroundHover(darkDesignSystem))).to.be.lessThan( - accentPalette.indexOf(accentForegroundRest(darkDesignSystem)), - ); - expect(accentPalette.indexOf(accentForegroundActive(darkDesignSystem))).to.be.greaterThan( - accentPalette.indexOf(accentForegroundRest(darkDesignSystem)), - ); - }); - - it('should have accessible rest and hover colors against the background color', (): void => { - const accentColors: Swatch[] = ['#0078D4', '#107C10', '#5C2D91', '#D83B01', '#F2C812']; - - accentColors.forEach( - /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ - (accent: Swatch): void => { - neutralPalette.forEach((swatch: Swatch): void => { - const designSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - accentPaletteConfig: Object.assign( - {}, - { - steps: 94, - clipLight: 0, - clipDark: 0, - }, - { - baseColor: parseColorHexRGB(swatch), - }, - ), - }); - - expect( - contrast(swatch, accentForegroundRest(designSystem)), - // There are a few states that are impossible to meet contrast on - ).to.be.gte(4.47); - expect( - contrast(swatch, accentForegroundHover(designSystem)), - // There are a few states that are impossible to meet contrast on - ).to.be.gte(3.7); - expect(contrast(swatch, accentForegroundLargeRest(designSystem))).to.be.gte(3); - expect(contrast(swatch, accentForegroundLargeHover(designSystem))).to.be.gte(3); - }); - }, - ); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const neutralBase = parseColorHexRGB(neutralBaseColor)!; - const accentBase = parseColorHexRGB(accentBaseColor)!; - - const neutralPalette = PaletteRGB.create(SwatchRGB.create(neutralBase.r, neutralBase.g, neutralBase.b)); - const accentPalette = PaletteRGB.create(SwatchRGB.create(accentBase.r, accentBase.g, accentBase.b)); - - neutralPalette.swatches.forEach((newSwatch, index) => { - const { - accentForegroundRestDelta, - accentForegroundFocusDelta, - accentForegroundActiveDelta, - accentForegroundHoverDelta - } = DesignSystemDefaults; - const oldValues = accentForeground({ - ...DesignSystemDefaults, - backgroundColor: DesignSystemDefaults.neutralPalette[index], - }); - const newValues = accentForegroundNew( - accentPalette, - newSwatch, - 4.5, - accentForegroundRestDelta, - accentForegroundHoverDelta, - accentForegroundActiveDelta, - accentForegroundFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in newValues) { - expect(oldValues[key]).to.equal( - newValues[key].toColorString().toUpperCase() - ); - } - }); - }); -}); diff --git a/packages/web-components/src/color/accent-foreground.ts b/packages/web-components/src/color/accent-foreground.ts deleted file mode 100644 index 86706f8e0d8bca..00000000000000 --- a/packages/web-components/src/color/accent-foreground.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { - accentBaseColor, - accentForegroundActiveDelta, - accentForegroundFocusDelta, - accentForegroundHoverDelta, - accentForegroundRestDelta, - accentPalette, - backgroundColor, - DesignSystem, - DesignSystemResolver, -} from '../fluent-design-system'; -import { findClosestSwatchIndex, findSwatchIndex, getSwatch, isDarkMode, Palette, swatchByContrast } from './palette'; -import { - colorRecipeFactory, - Swatch, - SwatchFamily, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; - -function accentForegroundAlgorithm(contrastTarget: number): DesignSystemResolver { - return (designSystem: DesignSystem): SwatchFamily => { - const palette: Palette = accentPalette(designSystem); - const accent: Swatch = accentBaseColor(designSystem); - const accentIndex: number = findClosestSwatchIndex(accentPalette, accent)(designSystem); - - const stateDeltas: any = { - rest: accentForegroundRestDelta(designSystem), - hover: accentForegroundHoverDelta(designSystem), - active: accentForegroundActiveDelta(designSystem), - focus: accentForegroundFocusDelta(designSystem), - }; - - const direction: 1 | -1 = isDarkMode(designSystem) ? -1 : 1; - - const startIndex: number = - accentIndex + - (direction === 1 - ? Math.min(stateDeltas.rest, stateDeltas.hover) - : Math.max(direction * stateDeltas.rest, direction * stateDeltas.hover)); - - const accessibleSwatch: Swatch = swatchByContrast( - backgroundColor, // Compare swatches against the background - )( - accentPalette, // Use the accent palette - )( - () => startIndex, // Begin searching based on accent index, direction, and deltas - )( - () => direction, // Search direction based on light/dark mode - )( - (swatchContrast: number) => swatchContrast >= contrastTarget, // A swatch is only valid if the contrast is greater than indicated - )( - designSystem, // Pass the design system - ); - - // One of these will be rest, the other will be hover. Depends on the offsets and the direction. - const accessibleIndex1: number = findSwatchIndex(accentPalette, accessibleSwatch)(designSystem); - const accessibleIndex2: number = accessibleIndex1 + direction * Math.abs(stateDeltas.rest - stateDeltas.hover); - - const indexOneIsRestState: boolean = - direction === 1 - ? stateDeltas.rest < stateDeltas.hover - : direction * stateDeltas.rest > direction * stateDeltas.hover; - - const restIndex: number = indexOneIsRestState ? accessibleIndex1 : accessibleIndex2; - const hoverIndex: number = indexOneIsRestState ? accessibleIndex2 : accessibleIndex1; - - const activeIndex: number = restIndex + direction * stateDeltas.active; - const focusIndex: number = restIndex + direction * stateDeltas.focus; - - return { - rest: getSwatch(restIndex, palette), - hover: getSwatch(hoverIndex, palette), - active: getSwatch(activeIndex, palette), - focus: getSwatch(focusIndex, palette), - }; - }; -} - -/** - * @internal - */ -export const accentForeground: SwatchFamilyResolver = colorRecipeFactory(accentForegroundAlgorithm(4.5)); - -/** - * @internal - */ -export const accentForegroundLarge: SwatchFamilyResolver = colorRecipeFactory(accentForegroundAlgorithm(3)); - -/** - * @internal - */ -export const accentForegroundRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - accentForeground, -); - -/** - * @internal - */ -export const accentForegroundHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - accentForeground, -); - -/** - * @internal - */ -export const accentForegroundActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - accentForeground, -); - -/** - * @internal - */ -export const accentForegroundFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - accentForeground, -); - -/** - * @internal - */ -export const accentForegroundLargeRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - accentForegroundLarge, -); - -/** - * @internal - */ -export const accentForegroundLargeHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - accentForegroundLarge, -); - -/** - * @internal - */ -export const accentForegroundLargeActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - accentForegroundLarge, -); - -/** - * @internal - */ -export const accentForegroundLargeFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - accentForegroundLarge, -); diff --git a/packages/web-components/src/color/accessible-recipe.ts b/packages/web-components/src/color/accessible-recipe.ts deleted file mode 100644 index ae4a2927db901d..00000000000000 --- a/packages/web-components/src/color/accessible-recipe.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { - backgroundColor, - DesignSystem, - DesignSystemResolver, - evaluateDesignSystemResolver, -} from '../fluent-design-system'; -import { Swatch, SwatchFamily } from './common'; -import { - findSwatchIndex, - getSwatch, - isDarkMode, - minContrastTargetFactory, - Palette, - referenceColorInitialIndexResolver, - swatchByContrast, -} from './palette'; - -function indexToSwatchFamily( - accessibleIndex: number, - palette: Palette, - direction: number, - restDelta: number, - hoverDelta: number, - activeDelta: number, - focusDelta: number, -): SwatchFamily { - // One of the indexes will be rest, the other will be hover. Depends on the offsets and the direction. - const accessibleIndex2: number = accessibleIndex + direction * Math.abs(restDelta - hoverDelta); - - const indexOneIsRestState: boolean = - direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta; - - const restIndex: number = indexOneIsRestState ? accessibleIndex : accessibleIndex2; - const hoverIndex: number = indexOneIsRestState ? accessibleIndex2 : accessibleIndex; - - const activeIndex: number = restIndex + direction * activeDelta; - const focusIndex: number = restIndex + direction * focusDelta; - - return { - rest: getSwatch(restIndex, palette), - hover: getSwatch(hoverIndex, palette), - active: getSwatch(activeIndex, palette), - focus: getSwatch(focusIndex, palette), - }; -} - -/** - * @internal - * Function to derive accessible colors from contrast and delta configuration. - * Performs a simple contrast check against the colors and returns - * the color that has the most contrast against the background. If contrast - * cannot be retrieved correctly, function returns black. - */ -export function accessibleAlgorithm( - palette: Palette | DesignSystemResolver, - minContrast: number | DesignSystemResolver, - restDelta: number | DesignSystemResolver, - hoverDelta: number | DesignSystemResolver, - activeDelta: number | DesignSystemResolver, - focusDelta: number | DesignSystemResolver, -): DesignSystemResolver { - return (designSystem: DesignSystem): SwatchFamily => { - const resolvedPalette: Palette = evaluateDesignSystemResolver(palette, designSystem); - const direction: 1 | -1 = isDarkMode(designSystem) ? -1 : 1; - - const accessibleSwatch: Swatch = swatchByContrast( - backgroundColor, // Compare swatches against the background - )( - resolvedPalette, // Use the provided palette - )( - referenceColorInitialIndexResolver, // Begin searching from the background color - )( - () => direction, // Search direction based on light/dark mode - )( - minContrastTargetFactory(evaluateDesignSystemResolver(minContrast, designSystem)), // A swatch is only valid if the contrast is greater than indicated - )( - designSystem, // Pass the design system - ); - - const accessibleIndex: number = findSwatchIndex(palette, accessibleSwatch)(designSystem); - const resolvedRest: number = evaluateDesignSystemResolver(restDelta, designSystem); - const resolvedHover: number = evaluateDesignSystemResolver(hoverDelta, designSystem); - const resolvedActive: number = evaluateDesignSystemResolver(activeDelta, designSystem); - const resolvedFocus: number = evaluateDesignSystemResolver(focusDelta, designSystem); - - return indexToSwatchFamily( - accessibleIndex, - resolvedPalette, - direction, - resolvedRest, - resolvedHover, - resolvedActive, - resolvedFocus, - ); - }; -} diff --git a/packages/web-components/src/color/color-constants.js b/packages/web-components/src/color/color-constants.js deleted file mode 100644 index e24ad5eca39659..00000000000000 --- a/packages/web-components/src/color/color-constants.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @internal - */ -export const white = '#FFFFFF'; - -/** - * @internal - */ -export const black = '#000000'; - -/** - * @internal - */ -export const accentBaseColor = '#0078D4'; - -/** - * @internal - */ -export const neutralBaseColor = '#808080'; diff --git a/packages/web-components/src/color/common.spec.ts b/packages/web-components/src/color/common.spec.ts deleted file mode 100644 index 8f77aef063e448..00000000000000 --- a/packages/web-components/src/color/common.spec.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { expect } from 'chai'; -import { ColorRGBA64 } from '@microsoft/fast-colors'; -import { colorMatches, contrast, isValidColor, parseColorString } from './common'; - -describe('isValidColor', (): void => { - it('should return true when input is a hex color', (): void => { - expect(isValidColor('#000')).to.be.ok; - expect(isValidColor('#000000')).to.be.ok; - }); - it('should return false when input is not a color', (): void => { - expect(isValidColor(undefined as any)).to.not.be.ok; - expect(isValidColor(null as any)).to.not.be.ok; - expect(isValidColor('ooggabooga')).to.not.be.ok; - }); -}); - -describe('colorMatches', (): void => { - it('should throw arguments are not colors', (): void => { - expect((): void => { - colorMatches('dksfjd', 'weeeeeeee'); - }).to.throw(); - }); - - it('should return true if colors are the same', (): void => { - expect(colorMatches('#F00', 'rgb(255, 0, 0)')).to.be.ok; - expect(colorMatches('#000', 'rgb(0, 0, 0)')).to.be.ok; - expect(colorMatches('#FFF', 'rgb(255, 255, 255)')).to.be.ok; - expect(colorMatches('#FF0000', 'rgb(255, 0, 0)')).to.be.ok; - expect(colorMatches('#000000', 'rgb(0, 0, 0)')).to.be.ok; - expect(colorMatches('#FFFFFF', 'rgb(255, 255, 255)')).to.be.ok; - }); - - it('should return false if colors are not the same', (): void => { - expect(colorMatches('#000', '#023')).to.not.be.ok; - expect(colorMatches('#000', '#001')).to.not.be.ok; - expect(colorMatches('#F00', 'rgb(255, 0, 1)')).to.not.be.ok; - expect(colorMatches('#000000', '#002233')).to.not.be.ok; - expect(colorMatches('#000000', '#000011')).to.not.be.ok; - expect(colorMatches('#FF0000', 'rgb(255, 0, 1)')).to.not.be.ok; - }); -}); - -describe('parseColorString', (): void => { - it('should parse #RGB color strings', (): void => { - expect(parseColorString('#FFF') instanceof ColorRGBA64).to.equal(true); - }); - it('should parse #RRGGBB color strings', (): void => { - expect(parseColorString('#001122') instanceof ColorRGBA64).to.equal(true); - }); - it('should throw if the color is a malformed shorthand hex', (): void => { - expect((): void => { - parseColorString('#GGG'); - }).to.throw(); - }); - it('should throw if the color is a malformed hex', (): void => { - expect((): void => { - parseColorString('#zzzzzz'); - }).to.throw(); - }); - it('should throw if the color is a malformed rgb', (): void => { - expect((): void => { - parseColorString('rgb(256, 244, 30)'); - }).to.throw(); - }); - it('should throw if the color is a rgba', (): void => { - expect((): void => { - parseColorString('rgba(255, 244, 30, 1)'); - }).to.throw(); - }); -}); - -describe('contrast', (): void => { - it('should return the contrast between two colors', (): void => { - expect(contrast('#000', '#FFF')).to.equal(21); - expect(contrast('#000000', '#FFFFFF')).to.equal(21); - expect(contrast('rgb(0, 0, 0)', 'rgb(255, 255, 255)')).to.equal(21); - }); - it('should throw if either color cannot be converted to a color', (): void => { - expect((): void => { - contrast('oogabooga', '#000'); - }).to.throw(); - expect((): void => { - contrast('#000', 'oogabooga'); - }).to.throw(); - }); -}); diff --git a/packages/web-components/src/color/common.ts b/packages/web-components/src/color/common.ts deleted file mode 100644 index 926c90bd874275..00000000000000 --- a/packages/web-components/src/color/common.ts +++ /dev/null @@ -1,229 +0,0 @@ -import { - ColorRGBA64, - contrastRatio, - isColorStringHexRGB, - isColorStringWebRGB, - parseColorHexRGB, - parseColorWebRGB, - rgbToRelativeLuminance, -} from '@microsoft/fast-colors'; -import { memoize } from 'lodash-es'; -import { DesignSystem, DesignSystemResolver } from '../fluent-design-system'; - -/** - * Describes the format of a single color in a palette - */ -export type Swatch = string; - -/** - * Interface describing a family of swatches. - */ -export interface SwatchFamily { - /** - * The swatch to apply to the rest state - */ - rest: Swatch; - - /** - * The swatch to apply to the hover state - */ - hover: Swatch; - - /** - * The swatch to apply to the active state - */ - active: Swatch; - - /** - * The swatch to apply to the focus state - */ - focus: Swatch; -} - -/** - * Interface describing a family of swatches applied as fills - */ -export interface FillSwatchFamily extends SwatchFamily { - /** - * The swatch to apply to the selected state - */ - selected: Swatch; -} - -/** - * A DesignSystemResolver that resolves a Swatch - */ -export type SwatchResolver = DesignSystemResolver; - -/** - * A function that accepts a design system and resolves a SwatchFamily or FillSwatchFamily - */ -export type SwatchFamilyResolver = DesignSystemResolver; - -/** - * A function type that resolves a Swatch from a SwatchResolver - * and applies it to the backgroundColor property of the design system - * of the returned DesignSystemResolver - */ -export type DesignSystemResolverFromSwatchResolver = (resolver: SwatchResolver) => DesignSystemResolver; - -/** - * @internal - * The states that a swatch can have - */ -export enum SwatchFamilyType { - rest = 'rest', - hover = 'hover', - active = 'active', - focus = 'focus', - selected = 'selected', -} - -export type ColorRecipe = DesignSystemResolver & DesignSystemResolverFromSwatchResolver; - -export function colorRecipeFactory(recipe: DesignSystemResolver): ColorRecipe { - const memoizedRecipe: typeof recipe = memoize(recipe); - - function curryRecipe(designSystem: DesignSystem): T; - function curryRecipe(backgroundResolver: SwatchResolver): (designSystem: DesignSystem) => T; - function curryRecipe(arg: any): any { - if (typeof arg === 'function') { - return (designSystem: DesignSystem): T => { - return memoizedRecipe( - Object.assign({}, designSystem, { - backgroundColor: arg(designSystem), - }), - ); - }; - } else { - return memoizedRecipe(arg); - } - } - - return curryRecipe; -} - -/** - * A function to apply a named style or recipe. A ColorRecipe has several behaviors: - * 1. When provided a callback function, the color Recipe returns a function that expects a design-system. - * When called, the returned function will call the callback function with the input design-system and apply - * the result of that function as background to the recipe. This is useful for applying text recipes to colors - * other than the design system backgroundColor - * 2. When provided a design system, the recipe will use that design-system to generate the color - */ -export type SwatchRecipe = ColorRecipe; - -/** - * @internal - * Helper function to transform a SwatchFamilyResolver into simple ColorRecipe for simple use - * use in stylesheets. - */ -export function swatchFamilyToSwatchRecipeFactory( - type: keyof T, - callback: SwatchFamilyResolver, -): SwatchRecipe { - const memoizedRecipe: typeof callback = memoize(callback); - return (arg: DesignSystem | SwatchResolver): any => { - if (typeof arg === 'function') { - return (designSystem: DesignSystem): Swatch => { - return memoizedRecipe( - Object.assign({}, designSystem, { - backgroundColor: arg(designSystem), - }), - )[type as string]; - }; - } else { - return memoizedRecipe(arg)[type]; - } - }; -} - -const cache = new Map(); - -/** - * Converts a color string into a ColorRGBA64 instance. - * Supports #RRGGBB and rgb(r, g, b) formats - * - * @public - */ -export function parseColorString(color: string): ColorRGBA64 { - const cached: ColorRGBA64 | void = cache.get(color); - - if (!cached) { - let parsed: ColorRGBA64 | null = parseColorHexRGB(color); - - if (parsed === null) { - parsed = parseColorWebRGB(color); - } - - if (parsed === null) { - throw new Error( - `${color} cannot be converted to a ColorRGBA64. Color strings must be one of the following formats: "#RGB", "#RRGGBB", or "rgb(r, g, b)"`, - ); - } - - cache.set(color, parsed); - return parsed; - } - - return cached; -} - -/** - * @internal - * Determines if a string value represents a color - * Supports #RRGGBB and rgb(r, g, b) formats - */ -export function isValidColor(color: string): boolean { - return isColorStringHexRGB(color) || isColorStringWebRGB(color); -} - -/** - * @internal - * Determines if a color string matches another color. - * Supports #RRGGBB and rgb(r, g, b) formats - */ -export function colorMatches(a: string, b: string): boolean { - return parseColorString(a).equalValue(parseColorString(b)); -} - -/** - * @internal - * Returns the contrast value between two color strings. - * Supports #RRGGBB and rgb(r, g, b) formats. - */ -export const contrast: (a: string, b: string) => number = memoize( - (a: string, b: string): number => { - return contrastRatio(parseColorString(a), parseColorString(b)); - }, - (a: string, b: string): string => a + b, -); - -/** - * @internal - * Returns the relative luminance of a color. If the value is not a color, -1 will be returned - * Supports #RRGGBB and rgb(r, g, b) formats - */ -export function luminance(color: string): number { - return rgbToRelativeLuminance(parseColorString(color)); -} - -/** - * @internal - */ -export function designSystemResolverMax(...args: Array>): DesignSystemResolver { - return (designSystem: DesignSystem): number => - Math.max.apply( - null, - args.map((fn: DesignSystemResolver) => fn(designSystem)), - ); -} - -/** - * @internal - */ -export const clamp: (value: number, min: number, max: number) => number = ( - value: number, - min: number, - max: number, -): number => Math.min(Math.max(value, min), max); diff --git a/packages/web-components/src/color/create-color-palette.js b/packages/web-components/src/color/create-color-palette.js deleted file mode 100644 index 633bc8ff4dda2c..00000000000000 --- a/packages/web-components/src/color/create-color-palette.js +++ /dev/null @@ -1,14 +0,0 @@ -import { ComponentStateColorPalette } from '@microsoft/fast-colors'; - -/** - * Creates a color palette from a provided source color - * @param baseColor - ColorRGBA64 - * @returns string[] - * - * @public - */ -export function createColorPalette(baseColor) { - return new ComponentStateColorPalette({ - baseColor, - }).palette.map(color => color.toStringHexRGB().toUpperCase()); -} diff --git a/packages/web-components/src/color/index.ts b/packages/web-components/src/color/index.ts deleted file mode 100644 index 1dd702ed9edb28..00000000000000 --- a/packages/web-components/src/color/index.ts +++ /dev/null @@ -1,117 +0,0 @@ -/** - * Text exports - */ -export { - neutralForeground, - neutralForegroundRest, - neutralForegroundHover, - neutralForegroundActive, -} from './neutral-foreground'; - -export { neutralForegroundToggle, neutralForegroundToggleLarge } from './neutral-foreground-toggle'; - -export { accentForegroundCut, accentForegroundCutLarge } from './accent-foreground-cut'; - -export { neutralForegroundHint, neutralForegroundHintLarge } from './neutral-foreground-hint'; - -export { - accentForeground, - accentForegroundRest, - accentForegroundHover, - accentForegroundActive, - accentForegroundLarge, - accentForegroundLargeRest, - accentForegroundLargeHover, - accentForegroundLargeActive, -} from './accent-foreground'; - -/** - * Fill exports - */ -export { neutralFill, neutralFillRest, neutralFillHover, neutralFillActive, neutralFillSelected } from './neutral-fill'; - -export { - neutralFillStealth, - neutralFillStealthRest, - neutralFillStealthHover, - neutralFillStealthActive, - neutralFillStealthSelected, -} from './neutral-fill-stealth'; - -export { - neutralFillToggle, - neutralFillToggleRest, - neutralFillToggleHover, - neutralFillToggleActive, -} from './neutral-fill-toggle'; - -export { - neutralFillInput, - neutralFillInputRest, - neutralFillInputHover, - neutralFillInputActive, - neutralFillInputSelected, -} from './neutral-fill-input'; - -export { - accentFill, - accentFillRest, - accentFillHover, - accentFillActive, - accentFillSelected, - accentFillLarge, - accentFillLargeRest, - accentFillLargeHover, - accentFillLargeActive, - accentFillLargeSelected, -} from './accent-fill'; - -export { - neutralContrastFill, - neutralContrastFillRest, - neutralContrastFillHover, - neutralContrastFillActive, -} from './neutral-contrast-fill'; - -export { neutralFillCard } from './neutral-fill-card'; - -/** - * Border exports - */ -export { - neutralOutlineContrast, - neutralOutlineContrastRest, - neutralOutlineContrastHover, - neutralOutlineContrastActive, -} from './neutral-outline-contrast'; - -export { neutralOutline, neutralOutlineRest, neutralOutlineHover, neutralOutlineActive } from './neutral-outline'; - -export { neutralDividerRest } from './neutral-divider'; - -/** - * App layer exports - */ -export { - neutralLayerFloating, - neutralLayerCard, - neutralLayerCardContainer, - neutralLayerL1, - neutralLayerL1Alt, - neutralLayerL2, - neutralLayerL3, - neutralLayerL4, - StandardLuminance, -} from './neutral-layer'; - -/** - * Focus colors - */ -export { neutralFocus, neutralFocusInnerAccent } from './neutral-focus'; - -/** - * Export supporting types - */ -export { isDarkMode, palette, PaletteType, Palette } from './palette'; -export { createColorPalette } from './create-color-palette'; -export { parseColorString } from './common'; diff --git a/packages/web-components/src/color/neutral-contrast-fill.spec.ts b/packages/web-components/src/color/neutral-contrast-fill.spec.ts deleted file mode 100644 index 7ce229e29e72ad..00000000000000 --- a/packages/web-components/src/color/neutral-contrast-fill.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from "chai"; -import { PaletteRGB } from "../color-vNext/palette"; -import { neutralFillInverse as neutralFillInverseNew } from "../color-vNext/recipes/neutral-fill-inverse"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystemDefaults } from "../fluent-design-system"; -import { neutralBaseColor } from "./color-constants"; -import { neutralContrastFill } from "./neutral-contrast-fill"; - -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - const { neutralContrastFillHoverDelta, neutralContrastFillActiveDelta, neutralContrastFillFocusDelta} = DesignSystemDefaults; - const oldValues = neutralContrastFill({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillInverseNew( - palette, - newSwatch, - 0, - neutralContrastFillHoverDelta, - neutralContrastFillActiveDelta, - neutralContrastFillFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) - } - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-contrast-fill.ts b/packages/web-components/src/color/neutral-contrast-fill.ts deleted file mode 100644 index eab977e96a3b75..00000000000000 --- a/packages/web-components/src/color/neutral-contrast-fill.ts +++ /dev/null @@ -1,56 +0,0 @@ -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/color/neutral-divider.spec.ts b/packages/web-components/src/color/neutral-divider.spec.ts deleted file mode 100644 index 35a2703580da68..00000000000000 --- a/packages/web-components/src/color/neutral-divider.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { PaletteRGB } from "../color-vNext/palette"; -import { neutralDivider } from "../color-vNext/recipes/neutral-divider"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystemDefaults } from '../fluent-design-system'; -import { neutralBaseColor } from "./color-constants"; -import { neutralDividerRest } from './neutral-divider'; - -describe('neutralDividerRest', (): void => { - it('should return a string when invoked with an object', (): void => { - expect(typeof neutralDividerRest(DesignSystemDefaults)).to.equal('string'); - }); - - it('should return a function when invoked with a function', (): void => { - expect(typeof neutralDividerRest(() => '#FFF')).to.equal('function'); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch.toColorString()}`, () => { - expect(neutralDivider(palette, newSwatch, DesignSystemDefaults.neutralDividerRestDelta).toColorString().toUpperCase()).to.equal( - neutralDividerRest({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) - ) - }) - }) -}) diff --git a/packages/web-components/src/color/neutral-divider.ts b/packages/web-components/src/color/neutral-divider.ts deleted file mode 100644 index 32f17315ff4394..00000000000000 --- a/packages/web-components/src/color/neutral-divider.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { DesignSystem, neutralDividerRestDelta, neutralPalette } from '../fluent-design-system'; -import { findClosestBackgroundIndex, getSwatch, isDarkMode, Palette } from './palette'; -import { colorRecipeFactory, Swatch, SwatchRecipe, SwatchResolver } from './common'; - -const neutralDividerAlgorithm: SwatchResolver = (designSystem: DesignSystem): Swatch => { - const palette: Palette = neutralPalette(designSystem); - const backgroundIndex: number = findClosestBackgroundIndex(designSystem); - const delta: number = neutralDividerRestDelta(designSystem); - const direction: 1 | -1 = isDarkMode(designSystem) ? -1 : 1; - - const index: number = backgroundIndex + direction * delta; - return getSwatch(index, palette); -}; - -/** - * @internal - */ -export const neutralDividerRest: SwatchRecipe = colorRecipeFactory(neutralDividerAlgorithm); diff --git a/packages/web-components/src/color/neutral-fill-card.spec.ts b/packages/web-components/src/color/neutral-fill-card.spec.ts deleted file mode 100644 index d4343c02d7016d..00000000000000 --- a/packages/web-components/src/color/neutral-fill-card.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from "chai"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; -import { neutralBaseColor } from "./color-constants"; -import { neutralFillCard } from "./neutral-fill-card"; -import { neutralFillLayer as neutralFillLayerNew } from "../color-vNext/recipes/neutral-fill-layer" - -describe('neutralFillCard', (): void => { - it('should operate on design system defaults', (): void => { - expect(neutralFillCard({} as DesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[0], - ); - }); - it('should stay white when the index of the backgroundColor is lower than the offset index', (): void => { - for (let i: number = 0; i < DesignSystemDefaults.neutralFillCardDelta; i++) { - expect( - DesignSystemDefaults.neutralPalette.indexOf( - neutralFillCard( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: DesignSystemDefaults.neutralPalette[i], - }), - ), - ), - ).to.equal(0); - } - }); - it('should return the color at three steps lower than the background color', (): void => { - for (let i: number = 3; i < DesignSystemDefaults.neutralPalette.length; i++) { - expect( - DesignSystemDefaults.neutralPalette.indexOf( - neutralFillCard( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: DesignSystemDefaults.neutralPalette[i], - }), - ), - ), - ).to.equal(i - 3); - } - }); - it('should generate a color based on the background color returned by a provided callback', (): void => { - expect(neutralFillCard(() => DesignSystemDefaults.neutralPalette[4])(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[1], - ); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - const { neutralFillCardDelta } = DesignSystemDefaults; - palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch.toColorString()}`, () => { - expect( - neutralFillCard({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) - ).to.be.equal(neutralFillLayerNew( palette, newSwatch, neutralFillCardDelta).toColorString().toUpperCase()) - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-fill-card.ts b/packages/web-components/src/color/neutral-fill-card.ts deleted file mode 100644 index c4454294a03a33..00000000000000 --- a/packages/web-components/src/color/neutral-fill-card.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { backgroundColor, DesignSystem, neutralFillCardDelta, neutralPalette } from '../fluent-design-system'; -import { Swatch, SwatchResolver } from './common'; -import { findClosestSwatchIndex, getSwatch } from './palette'; - -const neutralCardFillAlgorithm: SwatchResolver = (designSystem: DesignSystem): Swatch => { - const offset: number = neutralFillCardDelta(designSystem); - const index: number = findClosestSwatchIndex(neutralPalette, backgroundColor(designSystem))(designSystem); - return getSwatch(index - offset, neutralPalette(designSystem)); -}; - -/** - * @internal - */ -export function neutralFillCard(designSystem: DesignSystem): Swatch; - -/** - * @internal - */ -export function neutralFillCard(backgroundResolver: SwatchResolver): SwatchResolver; - -/** - * @internal - */ -export function neutralFillCard(arg: any): any { - if (typeof arg === 'function') { - return (designSystem: DesignSystem): Swatch => { - return neutralCardFillAlgorithm(Object.assign({}, designSystem, { backgroundColor: arg(designSystem) })); - }; - } else { - return neutralCardFillAlgorithm(arg); - } -} diff --git a/packages/web-components/src/color/neutral-fill-input.spec.ts b/packages/web-components/src/color/neutral-fill-input.spec.ts deleted file mode 100644 index 324620fa035e61..00000000000000 --- a/packages/web-components/src/color/neutral-fill-input.spec.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { expect } from 'chai'; -import { PaletteRGB } from '../color-vNext/palette'; -import { SwatchRGB } from '../color-vNext/swatch'; -import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { neutralBaseColor } from './color-constants'; -import { clamp, FillSwatchFamily, Swatch } from './common'; -import { - neutralFillInput, - neutralFillInputActive, - neutralFillInputFocus, - neutralFillInputHover, - neutralFillInputRest, - neutralFillInputSelected, -} from './neutral-fill-input'; -import { isDarkMode, Palette } from './palette'; -import { neutralFillInput as neutralFillInputNew } from '../color-vNext/recipes/neutral-fill-input'; - -describe('neutralFillInput', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should operate on design system defaults', (): void => { - [ - neutralFillInputActive, - neutralFillInputFocus, - neutralFillInputHover, - neutralFillInputRest, - neutralFillInputSelected, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); - }); - - it('should always be lighter than the background by the delta in light mode and darker in dark mode', (): void => { - neutralPalette.forEach((swatch: Swatch, index: number): void => { - const designSystem: DesignSystem = { - backgroundColor: neutralPalette[index], - } as DesignSystem; - - expect(neutralFillInputSelected(designSystem)).to.equal( - neutralPalette[ - clamp( - index - DesignSystemDefaults.neutralFillInputRestDelta * (isDarkMode(designSystem) ? -1 : 1), - 0, - neutralPalette.length - 1, - ) - ], - ); - }); - }); - - it('should return the same color from both implementations', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillInputRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillInputHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillInputActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillInputFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillInputSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillInputSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - }); - }); - - it('should have consistent return values', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFillInput(() => swatch)(DesignSystemDefaults); - const rest: Swatch = neutralFillInputRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralFillInputHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralFillInputActive(() => swatch)(DesignSystemDefaults); - const focus: Swatch = neutralFillInputFocus(() => swatch)(DesignSystemDefaults); - const selected: Swatch = neutralFillInputSelected(() => swatch)(DesignSystemDefaults); - - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); - }); -}); -describe('ensure parity between old and new recipe implementation', () => { - const color = parseColorHexRGB(neutralBaseColor)!; - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach((newSwatch, index) => { - const { - neutralFillInputRestDelta, - neutralFillInputHoverDelta, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - } = DesignSystemDefaults; - const oldValues = neutralFillInput({ - ...DesignSystemDefaults, - backgroundColor: DesignSystemDefaults.neutralPalette[index], - }); - const newValues = neutralFillInputNew( - palette, - newSwatch, - neutralFillInputRestDelta, - neutralFillInputHoverDelta, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - if (key !== 'selected') { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); - } - } - }); - }); -}); diff --git a/packages/web-components/src/color/neutral-fill-input.ts b/packages/web-components/src/color/neutral-fill-input.ts deleted file mode 100644 index b1ee4a2c27c8db..00000000000000 --- a/packages/web-components/src/color/neutral-fill-input.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { - DesignSystem, - DesignSystemResolver, - neutralFillInputActiveDelta, - neutralFillInputFocusDelta, - neutralFillInputHoverDelta, - neutralFillInputRestDelta, - neutralFillInputSelectedDelta, - neutralPalette, -} from '../fluent-design-system'; -import { findClosestBackgroundIndex, getSwatch, isDarkMode } from './palette'; -import { ColorRecipe, colorRecipeFactory, FillSwatchFamily, Swatch, SwatchRecipe } from './common'; - -/** - * Algorithm for determining neutral backplate colors - */ -function neutralFillInputAlgorithm(indexResolver: DesignSystemResolver): DesignSystemResolver { - return (designSystem: DesignSystem): Swatch => { - const direction: 1 | -1 = isDarkMode(designSystem) ? -1 : 1; - return getSwatch( - findClosestBackgroundIndex(designSystem) - indexResolver(designSystem) * direction, - neutralPalette(designSystem), - ); - }; -} - -/** - * @internal - */ -export const neutralFillInputRest: SwatchRecipe = colorRecipeFactory( - neutralFillInputAlgorithm(neutralFillInputRestDelta), -); - -/** - * @internal - */ -export const neutralFillInputHover: SwatchRecipe = colorRecipeFactory( - neutralFillInputAlgorithm(neutralFillInputHoverDelta), -); - -/** - * @internal - */ -export const neutralFillInputActive: SwatchRecipe = colorRecipeFactory( - neutralFillInputAlgorithm(neutralFillInputActiveDelta), -); - -/** - * @internal - */ -export const neutralFillInputFocus: SwatchRecipe = colorRecipeFactory( - neutralFillInputAlgorithm(neutralFillInputFocusDelta), -); - -/** - * @internal - */ -export const neutralFillInputSelected: SwatchRecipe = colorRecipeFactory( - neutralFillInputAlgorithm(neutralFillInputSelectedDelta), -); - -/** - * @internal - */ -export const neutralFillInput: ColorRecipe = colorRecipeFactory( - (designSystem: DesignSystem): FillSwatchFamily => { - return { - rest: neutralFillInputRest(designSystem), - hover: neutralFillInputHover(designSystem), - active: neutralFillInputActive(designSystem), - focus: neutralFillInputFocus(designSystem), - selected: neutralFillInputSelected(designSystem), - }; - }, -); diff --git a/packages/web-components/src/color/neutral-fill-stealth.spec.ts b/packages/web-components/src/color/neutral-fill-stealth.spec.ts deleted file mode 100644 index 3cced7d0c282b0..00000000000000 --- a/packages/web-components/src/color/neutral-fill-stealth.spec.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { expect } from 'chai'; -import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { - neutralFillStealth, - neutralFillStealthActive, - neutralFillStealthFocus, - neutralFillStealthHover, - neutralFillStealthRest, - neutralFillStealthSelected, -} from './neutral-fill-stealth'; -import { Palette } from './palette'; -import { FillSwatchFamily, Swatch } from './common'; -import { PaletteRGB } from '../color-vNext/palette'; -import { SwatchRGB } from '../color-vNext/swatch'; -import { neutralBaseColor } from './color-constants'; -import { neutralFillStealth as neutralFillStealthNew } from '../color-vNext/recipes/neutral-fill-stealth'; - -describe('neutralFillStealth', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should operate on design system defaults', (): void => { - [ - neutralFillStealthActive, - neutralFillStealthFocus, - neutralFillStealthHover, - neutralFillStealthRest, - neutralFillStealthSelected, - ].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); - }); - - it('should switch from dark to light after 10 swatches', (): void => { - expect(neutralFillStealthHover(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta], - ); - expect(neutralFillStealthHover(() => neutralPalette[1])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 1], - ); - expect(neutralFillStealthHover(() => neutralPalette[2])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 2], - ); - expect(neutralFillStealthHover(() => neutralPalette[9])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillStealthHoverDelta + 9], - ); - expect(neutralFillStealthHover(() => neutralPalette[10])(DesignSystemDefaults)).to.equal( - neutralPalette[10 - DesignSystemDefaults.neutralFillStealthHoverDelta], - ); - }); - - it('should return the same color from both implementations', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillStealthRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillStealthHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillStealthActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillStealthFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillStealthSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillStealthSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - }); - }); - - it('should have consistent return values', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFillStealth(() => swatch)(DesignSystemDefaults); - const rest: Swatch = neutralFillStealthRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralFillStealthHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralFillStealthActive(() => swatch)(DesignSystemDefaults); - const focus: Swatch = neutralFillStealthFocus(() => swatch)(DesignSystemDefaults); - const selected: Swatch = neutralFillStealthSelected(() => swatch)(DesignSystemDefaults); - - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); - }); -}); -describe('ensure parity between old and new recipe implementation', () => { - const color = parseColorHexRGB(neutralBaseColor)!; - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach((newSwatch, index) => { - const { - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - } = DesignSystemDefaults; - const oldValues = neutralFillStealth({ - ...DesignSystemDefaults, - backgroundColor: DesignSystemDefaults.neutralPalette[index], - }); - const newValues = neutralFillStealthNew( - palette, - newSwatch, - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - if (key !== 'selected') { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); - } - } - }); - }); -}); diff --git a/packages/web-components/src/color/neutral-fill-stealth.ts b/packages/web-components/src/color/neutral-fill-stealth.ts deleted file mode 100644 index 3f3f8dbee02c1f..00000000000000 --- a/packages/web-components/src/color/neutral-fill-stealth.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { - DesignSystem, - DesignSystemResolver, - neutralFillActiveDelta, - neutralFillFocusDelta, - neutralFillHoverDelta, - neutralFillRestDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, - neutralFillStealthHoverDelta, - neutralFillStealthRestDelta, - neutralFillStealthSelectedDelta, - neutralPalette, -} from '../fluent-design-system'; -import { ColorRecipe, colorRecipeFactory, designSystemResolverMax, FillSwatchFamily, Swatch } from './common'; -import { findClosestBackgroundIndex, getSwatch } from './palette'; - -const neutralFillStealthSwapThreshold: DesignSystemResolver = designSystemResolverMax( - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - neutralFillStealthRestDelta, - neutralFillStealthHoverDelta, - neutralFillStealthActiveDelta, - neutralFillStealthFocusDelta, -); - -function neutralFillStealthAlgorithm(deltaResolver: DesignSystemResolver): DesignSystemResolver { - return (designSystem: DesignSystem): Swatch => { - const backgroundIndex: number = findClosestBackgroundIndex(designSystem); - const swapThreshold: number = neutralFillStealthSwapThreshold(designSystem); - - const direction: 1 | -1 = backgroundIndex >= swapThreshold ? -1 : 1; - - return getSwatch(backgroundIndex + direction * deltaResolver(designSystem), neutralPalette(designSystem)); - }; -} - -/** - * @internal - */ -export const neutralFillStealthRest: ColorRecipe = colorRecipeFactory( - neutralFillStealthAlgorithm(neutralFillStealthRestDelta), -); - -/** - * @internal - */ -export const neutralFillStealthHover: ColorRecipe = colorRecipeFactory( - neutralFillStealthAlgorithm(neutralFillStealthHoverDelta), -); - -/** - * @internal - */ -export const neutralFillStealthActive: ColorRecipe = colorRecipeFactory( - neutralFillStealthAlgorithm(neutralFillStealthActiveDelta), -); - -/** - * @internal - */ -export const neutralFillStealthFocus: ColorRecipe = colorRecipeFactory( - neutralFillStealthAlgorithm(neutralFillStealthFocusDelta), -); - -/** - * @internal - */ -export const neutralFillStealthSelected: ColorRecipe = colorRecipeFactory( - neutralFillStealthAlgorithm(neutralFillStealthSelectedDelta), -); - -/** - * @internal - */ -export const neutralFillStealth: ColorRecipe = colorRecipeFactory((designSystem: DesignSystem) => { - return { - rest: neutralFillStealthRest(designSystem), - hover: neutralFillStealthHover(designSystem), - active: neutralFillStealthActive(designSystem), - focus: neutralFillStealthFocus(designSystem), - selected: neutralFillStealthSelected(designSystem), - }; -}); diff --git a/packages/web-components/src/color/neutral-fill-toggle.spec.ts b/packages/web-components/src/color/neutral-fill-toggle.spec.ts deleted file mode 100644 index 974e14b7e99a78..00000000000000 --- a/packages/web-components/src/color/neutral-fill-toggle.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from "chai"; -import { PaletteRGB } from "../color-vNext/palette"; -import { neutralFillContrast as neutralFillContrastNew } from "../color-vNext/recipes/neutral-fill-contrast"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystemDefaults } from "../fluent-design-system"; -import { neutralBaseColor } from "./color-constants"; -import { neutralFillToggle } from "./neutral-fill-toggle"; - -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - const { neutralFillToggleHoverDelta, neutralFillToggleActiveDelta, neutralFillToggleFocusDelta} = DesignSystemDefaults; - const oldValues = neutralFillToggle({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralFillContrastNew( - palette, - newSwatch, - 0, - neutralFillToggleHoverDelta, - neutralFillToggleActiveDelta, - neutralFillToggleFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) - } - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-fill-toggle.ts b/packages/web-components/src/color/neutral-fill-toggle.ts deleted file mode 100644 index 74de0a42e7ec80..00000000000000 --- a/packages/web-components/src/color/neutral-fill-toggle.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { - neutralFillToggleActiveDelta, - neutralFillToggleFocusDelta, - neutralFillToggleHoverDelta, - neutralPalette, -} from '../fluent-design-system'; -import { - colorRecipeFactory, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; -import { accessibleAlgorithm } from './accessible-recipe'; - -/** - * @internal - */ -export const neutralFillToggle: SwatchFamilyResolver = colorRecipeFactory( - accessibleAlgorithm( - neutralPalette, - 4.5, - 0, - neutralFillToggleHoverDelta, - neutralFillToggleActiveDelta, - neutralFillToggleFocusDelta, - ), -); - -/** - * @internal - */ -export const neutralFillToggleRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - neutralFillToggle, -); - -/** - * @internal - */ -export const neutralFillToggleHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - neutralFillToggle, -); - -/** - * @internal - */ -export const neutralFillToggleActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - neutralFillToggle, -); - -/** - * @internal - */ -export const neutralFillToggleFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - neutralFillToggle, -); diff --git a/packages/web-components/src/color/neutral-fill.spec.ts b/packages/web-components/src/color/neutral-fill.spec.ts deleted file mode 100644 index a5f32454abd49c..00000000000000 --- a/packages/web-components/src/color/neutral-fill.spec.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { parseColorHexRGB } from '@microsoft/fast-colors'; -import { expect } from 'chai'; -import { - accentPalette as getAccentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { - neutralFill, - neutralFillActive, - neutralFillFocus, - neutralFillHover, - neutralFillRest, - neutralFillSelected, -} from './neutral-fill'; -import { Palette } from './palette'; -import { FillSwatchFamily, Swatch } from './common'; -import { neutralBaseColor } from './color-constants'; -import { SwatchRGB } from '../color-vNext/swatch'; -import { PaletteRGB } from '../color-vNext/palette'; -import { neutralFill as neutralFillNew } from '../color-vNext/recipes/neutral-fill'; - -describe('neutralFill', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should operate on design system defaults', (): void => { - [neutralFillActive, neutralFillFocus, neutralFillHover, neutralFillRest, neutralFillSelected].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); - }); - - it('should switch from dark to light after 10 swatches', (): void => { - expect(neutralFillRest(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillRestDelta]); - expect(neutralFillHover(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillHoverDelta]); - expect(neutralFillActive(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillActiveDelta], - ); - expect(neutralFillFocus(DesignSystemDefaults)).to.equal(neutralPalette[DesignSystemDefaults.neutralFillFocusDelta]); - expect(neutralFillRest(() => neutralPalette[1])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 1], - ); - expect(neutralFillRest(() => neutralPalette[2])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 2], - ); - expect(neutralFillRest(() => neutralPalette[9])(DesignSystemDefaults)).to.equal( - neutralPalette[DesignSystemDefaults.neutralFillRestDelta + 9], - ); - expect(neutralFillRest(() => neutralPalette[10])(DesignSystemDefaults)).to.equal(neutralPalette[3]); - }); - - it('should return the same color from both implementations', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralFillRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralFillSelected(() => swatch)(DesignSystemDefaults)).to.equal( - neutralFillSelected( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - }); - }); - - it('should have consistent return values', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: FillSwatchFamily = neutralFill(() => swatch)(DesignSystemDefaults); - const rest: Swatch = neutralFillRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralFillHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralFillActive(() => swatch)(DesignSystemDefaults); - const focus: Swatch = neutralFillFocus(() => swatch)(DesignSystemDefaults); - const selected: Swatch = neutralFillSelected(() => swatch)(DesignSystemDefaults); - - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - expect(backplates.selected).to.equal(selected); - }); - }); -}); -describe('ensure parity between old and new recipe implementation', () => { - const color = parseColorHexRGB(neutralBaseColor)!; - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach((newSwatch, index) => { - const { - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - } = DesignSystemDefaults; - const oldValues = neutralFill({ - ...DesignSystemDefaults, - backgroundColor: DesignSystemDefaults.neutralPalette[index], - }); - const newValues = neutralFillNew( - palette, - newSwatch, - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - if (key !== 'selected') { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()); - } - } - }); - }); -}); diff --git a/packages/web-components/src/color/neutral-fill.ts b/packages/web-components/src/color/neutral-fill.ts deleted file mode 100644 index 3d23ed21d79b75..00000000000000 --- a/packages/web-components/src/color/neutral-fill.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { - DesignSystem, - DesignSystemResolver, - neutralFillActiveDelta, - neutralFillFocusDelta, - neutralFillHoverDelta, - neutralFillRestDelta, - neutralFillSelectedDelta, - neutralPalette, -} from '../fluent-design-system'; -import { - ColorRecipe, - colorRecipeFactory, - designSystemResolverMax, - FillSwatchFamily, - Swatch, - SwatchRecipe, -} from './common'; -import { findClosestBackgroundIndex, getSwatch } from './palette'; - -const neutralFillThreshold: DesignSystemResolver = designSystemResolverMax( - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, - neutralFillFocusDelta, -); - -function neutralFillAlgorithm(deltaResolver: DesignSystemResolver): DesignSystemResolver { - return (designSystem: DesignSystem): Swatch => { - const backgroundIndex: number = findClosestBackgroundIndex(designSystem); - const swapThreshold: number = neutralFillThreshold(designSystem); - const direction: 1 | -1 = backgroundIndex >= swapThreshold ? -1 : 1; - - return getSwatch(backgroundIndex + direction * deltaResolver(designSystem), neutralPalette(designSystem)); - }; -} - -/** - * @internal - */ -export const neutralFillRest: SwatchRecipe = colorRecipeFactory(neutralFillAlgorithm(neutralFillRestDelta)); - -/** - * @internal - */ -export const neutralFillHover: SwatchRecipe = colorRecipeFactory(neutralFillAlgorithm(neutralFillHoverDelta)); - -/** - * @internal - */ -export const neutralFillActive: SwatchRecipe = colorRecipeFactory(neutralFillAlgorithm(neutralFillActiveDelta)); - -/** - * @internal - */ -export const neutralFillFocus: SwatchRecipe = colorRecipeFactory(neutralFillAlgorithm(neutralFillFocusDelta)); - -/** - * @internal - */ -export const neutralFillSelected: SwatchRecipe = colorRecipeFactory(neutralFillAlgorithm(neutralFillSelectedDelta)); - -/** - * @internal - */ -export const neutralFill: ColorRecipe = colorRecipeFactory( - (designSystem: DesignSystem): FillSwatchFamily => { - return { - rest: neutralFillRest(designSystem), - hover: neutralFillHover(designSystem), - active: neutralFillActive(designSystem), - focus: neutralFillFocus(designSystem), - selected: neutralFillSelected(designSystem), - }; - }, -); diff --git a/packages/web-components/src/color/neutral-focus.spec.ts b/packages/web-components/src/color/neutral-focus.spec.ts deleted file mode 100644 index cee6bd55345c68..00000000000000 --- a/packages/web-components/src/color/neutral-focus.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; -import { neutralFocus } from './neutral-focus'; -import { contrast } from './common'; -import { neutralBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { focusStrokeOuter as focusStrokeOuterNew } from "../color-vNext/recipes/focus-stroke"; - -describe('neutralFocus', (): void => { - it('should return a string when invoked with an object', (): void => { - expect(typeof neutralFocus(DesignSystemDefaults)).to.equal('string'); - }); - - it('should return a function when invoked with a function', (): void => { - expect(typeof neutralFocus(() => '#FFF')).to.equal('function'); - }); - - it('should operate on default design system if no design system is supplied', (): void => { - expect(contrast(neutralFocus({} as DesignSystem), '#FFF')).to.be.gte(3.5); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch.toColorString()}`, () => { - expect(neutralFocus({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(focusStrokeOuterNew( palette, newSwatch).toColorString().toUpperCase()) - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-focus.ts b/packages/web-components/src/color/neutral-focus.ts deleted file mode 100644 index 932e97f612f466..00000000000000 --- a/packages/web-components/src/color/neutral-focus.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { - accentPalette, - backgroundColor, - DesignSystem, - DesignSystemResolver, - neutralPalette, -} from '../fluent-design-system'; -import { findClosestSwatchIndex, isDarkMode, Palette, swatchByContrast } from './palette'; -import { ColorRecipe, colorRecipeFactory, Swatch, SwatchResolver } from './common'; - -const targetRatio: number = 3.5; - -function neutralFocusIndexResolver(referenceColor: string, palette: Palette, designSystem: DesignSystem): number { - return findClosestSwatchIndex(neutralPalette, referenceColor)(designSystem); -} - -function neutralFocusDirectionResolver(index: number, palette: Palette, designSystem: DesignSystem): 1 | -1 { - return isDarkMode(designSystem) ? -1 : 1; -} - -function neutralFocusContrastCondition(contrastRatio: number): boolean { - return contrastRatio > targetRatio; -} - -const neutralFocusAlgorithm: SwatchResolver = swatchByContrast(backgroundColor)(neutralPalette)( - neutralFocusIndexResolver, -)(neutralFocusDirectionResolver)(neutralFocusContrastCondition); - -/** - * @internal - */ -export const neutralFocus: ColorRecipe = colorRecipeFactory(neutralFocusAlgorithm); - -function neutralFocusInnerAccentIndexResolver( - accentFillColor: DesignSystemResolver, -): (referenceColor: string, sourcePalette: Palette, designSystem: DesignSystem) => number { - return (referenceColor: string, sourcePalette: Palette, designSystem: DesignSystem): number => { - return sourcePalette.indexOf(accentFillColor(designSystem)); - }; -} - -function neutralFocusInnerAccentDirectionResolver( - referenceIndex: number, - palette: string[], - designSystem: DesignSystem, -): 1 | -1 { - return isDarkMode(designSystem) ? 1 : -1; -} - -/** - * @internal - */ -export function neutralFocusInnerAccent(accentFillColor: DesignSystemResolver): DesignSystemResolver { - return swatchByContrast(neutralFocus)(accentPalette)(neutralFocusInnerAccentIndexResolver(accentFillColor))( - neutralFocusInnerAccentDirectionResolver, - )(neutralFocusContrastCondition); -} diff --git a/packages/web-components/src/color/neutral-foreground-hint.spec.ts b/packages/web-components/src/color/neutral-foreground-hint.spec.ts deleted file mode 100644 index 1f5984f3c3de0b..00000000000000 --- a/packages/web-components/src/color/neutral-foreground-hint.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { - accentPalette as getAccentPalette, - DesignSystemDefaults, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { neutralForegroundHint, neutralForegroundHintLarge } from './neutral-foreground-hint'; -import { Palette } from './palette'; -import { contrast, Swatch, SwatchRecipe } from './common'; -import { neutralBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { neutralForegroundHint as neutralForegroundHintNew } from "../color-vNext/recipes/neutral-foreground-hint"; - -describe('neutralForegroundHint', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should implement design system defaults', (): void => { - expect(neutralForegroundHint(undefined as any)).to.equal('#767676'); - }); - - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - it(`${swatch} should resolve a color from the neutral palette`, (): void => { - expect( - neutralPalette.indexOf( - neutralForegroundHint( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ), - ).not.to.equal(-1); - }); - }); - - it('should return the same color from both methods of setting the reference background', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect( - neutralForegroundHint( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ).to.equal(neutralForegroundHint(() => swatch)(DesignSystemDefaults)); - }); - }); - - function retrieveContrast(resolvedSwatch: Swatch, fn: SwatchRecipe): number { - return parseFloat(contrast(fn(() => resolvedSwatch)(DesignSystemDefaults), resolvedSwatch).toPrecision(3)); - } - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - it(`${swatch} should always be at least 4.5 : 1 against the background`, (): void => { - expect( - retrieveContrast(swatch, neutralForegroundHint), - // Because neutralForegroundHint follows the direction patterns of neutralForeground, - // a backgroundColor #777777 is impossible to hit 4.5 against. - ).to.be.gte(swatch === '#777777' ? 4.48 : 4.5); - expect(retrieveContrast(swatch, neutralForegroundHint)).to.be.lessThan(5); - expect(retrieveContrast(swatch, neutralForegroundHintLarge)).to.be.gte(3); - expect(retrieveContrast(swatch, neutralForegroundHintLarge)).to.be.lessThan(3.3); - }); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch.toColorString()}`, () => { - expect(neutralForegroundHintNew(palette, newSwatch).toColorString().toUpperCase()).to.equal( - neutralForegroundHint({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}) - ) - }) - }) -}) diff --git a/packages/web-components/src/color/neutral-foreground-hint.ts b/packages/web-components/src/color/neutral-foreground-hint.ts deleted file mode 100644 index 06b602fe095b5d..00000000000000 --- a/packages/web-components/src/color/neutral-foreground-hint.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { DesignSystemResolver, neutralPalette } from '../fluent-design-system'; -import { - colorRecipeFactory, - SwatchFamily, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; -import { accessibleAlgorithm } from './accessible-recipe'; - -function neutralForegroundHintAlgorithm(targetContrast: number): DesignSystemResolver { - return accessibleAlgorithm(neutralPalette, targetContrast, 0, 0, 0, 0); -} - -/** - * @internal - * Hint text for normal sized text, less than 18pt normal weight - */ -export const neutralForegroundHint: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - colorRecipeFactory(neutralForegroundHintAlgorithm(4.5)), -); - -/** - * @internal - * Hint text for large sized text, greater than 18pt or 16pt and bold - */ -export const neutralForegroundHintLarge: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - colorRecipeFactory(neutralForegroundHintAlgorithm(3)), -); diff --git a/packages/web-components/src/color/neutral-foreground-toggle.ts b/packages/web-components/src/color/neutral-foreground-toggle.ts deleted file mode 100644 index ec45bfc318b866..00000000000000 --- a/packages/web-components/src/color/neutral-foreground-toggle.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { DesignSystem } from '../fluent-design-system'; -import { black, white } from './color-constants'; -import { contrast, Swatch, SwatchRecipe, SwatchResolver } from './common'; -import { neutralFillToggleRest } from './neutral-fill-toggle'; - -/** - * Function to derive neutralForegroundToggle from an input background and target contrast ratio - */ -const neutralForegroundToggleAlgorithm: (backgroundColor: Swatch, targetContrast: number) => Swatch = ( - backgroundColor: Swatch, - targetContrast: number, -): Swatch => { - return contrast(white, backgroundColor) >= targetContrast ? white : black; -}; - -/** - * Factory to create a neutral-foreground-toggle function that operates on a target contrast ratio - */ -function neutralForegroundToggleFactory(targetContrast: number): SwatchRecipe { - function neutralForegroundToggleInternal(designSystem: DesignSystem): Swatch; - function neutralForegroundToggleInternal(backgroundResolver: SwatchResolver): SwatchResolver; - function neutralForegroundToggleInternal(arg: any): any { - return typeof arg === 'function' - ? (designSystem: DesignSystem): Swatch => { - return neutralForegroundToggleAlgorithm(arg(designSystem), targetContrast); - } - : neutralForegroundToggleAlgorithm(neutralFillToggleRest(arg), targetContrast); - } - - return neutralForegroundToggleInternal; -} - -/** - * @internal - * Toggle text for normal sized text, less than 18pt normal weight - */ -export const neutralForegroundToggle: SwatchRecipe = neutralForegroundToggleFactory(4.5); - -/** - * @internal - * Toggle text for large sized text, greater than 18pt or 16pt and bold - */ -export const neutralForegroundToggleLarge: SwatchRecipe = neutralForegroundToggleFactory(3); diff --git a/packages/web-components/src/color/neutral-foreground.spec.ts b/packages/web-components/src/color/neutral-foreground.spec.ts deleted file mode 100644 index 99f87c12222681..00000000000000 --- a/packages/web-components/src/color/neutral-foreground.spec.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { PaletteRGB } from "../color-vNext/palette"; -import { neutralForeground } from "../color-vNext/recipes/neutral-foreground"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { DesignSystemDefaults } from '../fluent-design-system'; -import { neutralForegroundActive, neutralForegroundHover, neutralForegroundRest } from './neutral-foreground'; -import { neutralBaseColor } from "./color-constants"; -import { contrast } from "./common"; - - -describe('neutralForeground', (): void => { - it('should return a string when invoked with an object', (): void => { - expect(typeof neutralForegroundRest(DesignSystemDefaults)).to.equal('string'); - expect(typeof neutralForegroundHover(DesignSystemDefaults)).to.equal('string'); - expect(typeof neutralForegroundActive(DesignSystemDefaults)).to.equal('string'); - }); - - it('should return a function when invoked with a function', (): void => { - expect(typeof neutralForegroundRest(() => '#FFF')).to.equal('function'); - expect(typeof neutralForegroundHover(() => '#FFF')).to.equal('function'); - expect(typeof neutralForegroundActive(() => '#FFF')).to.equal('function'); - }); - - it('should operate on default design system if no design system is supplied', (): void => { - expect(contrast(neutralForegroundRest(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundRest(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundRest(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundRest(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); - - expect(contrast(neutralForegroundHover(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundHover(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundHover(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundHover(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); - - expect(contrast(neutralForegroundActive(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundActive(() => undefined as any)(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundActive(() => '#FFF')(undefined as any), '#FFF')).to.be.gte(14); - expect(contrast(neutralForegroundActive(() => '#FFFFFF')(undefined as any), '#FFF')).to.be.gte(14); - }); - - it('should return correct result with default design system values', (): void => { - expect(contrast(neutralForegroundRest(DesignSystemDefaults), '#FFF')).to.be.gte(14); - }); - - it('should return #FFFFFF with a dark background', (): void => { - expect( - contrast( - neutralForegroundRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: '#000', - }), - ), - '#000', - ), - ).to.be.gte(14); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - it(`should be the same for ${newSwatch.toColorString()}`, () => { - expect(neutralForegroundRest({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]})).to.be.equal(neutralForeground( palette, newSwatch).toColorString().toUpperCase()) - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-foreground.ts b/packages/web-components/src/color/neutral-foreground.ts deleted file mode 100644 index 1f3ef078fc284e..00000000000000 --- a/packages/web-components/src/color/neutral-foreground.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { - neutralForegroundActiveDelta, - neutralForegroundFocusDelta, - neutralForegroundHoverDelta, - neutralPalette, -} from '../fluent-design-system'; -import { - colorRecipeFactory, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; -import { accessibleAlgorithm } from './accessible-recipe'; - -/** - * @internal - */ -export const neutralForeground: SwatchFamilyResolver = colorRecipeFactory( - accessibleAlgorithm( - neutralPalette, - 14, - 0, - neutralForegroundHoverDelta, - neutralForegroundActiveDelta, - neutralForegroundFocusDelta, - ), -); - -/** - * @internal - */ -export const neutralForegroundRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - neutralForeground, -); - -/** - * @internal - */ -export const neutralForegroundHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - neutralForeground, -); - -/** - * @internal - */ -export const neutralForegroundActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - neutralForeground, -); - -/** - * @internal - */ -export const neutralForegroundFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - neutralForeground, -); diff --git a/packages/web-components/src/color/neutral-layer.spec.ts b/packages/web-components/src/color/neutral-layer.spec.ts deleted file mode 100644 index 68c0f44b6892db..00000000000000 --- a/packages/web-components/src/color/neutral-layer.spec.ts +++ /dev/null @@ -1,179 +0,0 @@ -import { parseColorHexRGB } from "@microsoft/fast-colors"; -import { expect } from 'chai'; -import { DesignSystem, DesignSystemDefaults } from '../fluent-design-system'; -import { - neutralLayerCard, - neutralLayerCardContainer, - neutralLayerFloating, - neutralLayerL1, - neutralLayerL2, - neutralLayerL3, - neutralLayerL4, - StandardLuminance, -} from './neutral-layer'; -import { - neutralLayerFloating as neutralLayerFloatingNew -} from '../color-vNext/recipes/neutral-layer-floating'; -import { - neutralLayerCardContainer as neutralLayerCardContainerNew -} from '../color-vNext/recipes/neutral-layer-card-container'; -import { neutralBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; - -const lightModeDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - baseLayerLuminance: StandardLuminance.LightMode, -}); - -const darkModeDesignSystem: DesignSystem = Object.assign({}, DesignSystemDefaults, { - baseLayerLuminance: StandardLuminance.DarkMode, -}); - -const enum NeutralPaletteLightModeOffsets { - L1 = 0, - L2 = 10, - L3 = 13, - L4 = 16, -} - -const enum NeutralPaletteDarkModeOffsets { - L1 = 76, - L2 = 79, - L3 = 82, - L4 = 85, -} - -describe('neutralLayer', (): void => { - describe('L1', (): void => { - it('should return values from L1 when in light mode', (): void => { - expect(neutralLayerL1(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1], - ); - }); - it('should return values from L1 when in dark mode', (): void => { - expect(neutralLayerL1(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1], - ); - }); - it('should operate on a provided background color', (): void => { - expect(neutralLayerL1((): string => '#000000')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L1], - ); - expect(neutralLayerL1((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L1], - ); - }); - }); - - describe('L2', (): void => { - it('should return values from L2 when in light mode', (): void => { - expect(neutralLayerL2(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2], - ); - }); - it('should return values from L2 when in dark mode', (): void => { - expect(neutralLayerL2(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2], - ); - }); - it('should operate on a provided background color', (): void => { - expect(neutralLayerL2((): string => '#000000')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L2], - ); - expect(neutralLayerL2((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L2], - ); - }); - }); - - describe('L3', (): void => { - it('should return values from L3 when in light mode', (): void => { - expect(neutralLayerL3(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3], - ); - }); - it('should return values from L3 when in dark mode', (): void => { - expect(neutralLayerL3(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3], - ); - }); - it('should operate on a provided background color', (): void => { - expect(neutralLayerL3((): string => '#000000')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L3], - ); - expect(neutralLayerL3((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L3], - ); - }); - }); - - describe('L4', (): void => { - it('should return values from L4 when in light mode', (): void => { - expect(neutralLayerL4(lightModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4], - ); - }); - it('should return values from L4 when in dark mode', (): void => { - expect(neutralLayerL4(darkModeDesignSystem)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4], - ); - }); - it('should operate on a provided background color', (): void => { - expect(neutralLayerL4((): string => '#000000')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteDarkModeOffsets.L4], - ); - expect(neutralLayerL4((): string => '#FFFFFF')(DesignSystemDefaults)).to.equal( - DesignSystemDefaults.neutralPalette[NeutralPaletteLightModeOffsets.L4], - ); - }); - }); - - describe('neutralLayerFloating', (): void => { - it('should return a color from the neutral palette', (): void => { - expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerFloating(DesignSystemDefaults))).to.be.ok; - }); - - it('should operate on a provided background color', (): void => { - const color: string = neutralLayerFloating((): string => '#000000')(DesignSystemDefaults); - - expect(color).not.to.equal(neutralLayerFloating(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); - it("should have a new implementation that matches the old implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - - expect(neutralLayerFloating(lightModeDesignSystem)).to.equal(neutralLayerFloatingNew(palette, StandardLuminance.LightMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) - expect(neutralLayerFloating(darkModeDesignSystem)).to.equal(neutralLayerFloatingNew(palette, StandardLuminance.DarkMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) - }) - }); - describe('neutralLayerCardContainer', (): void => { - it('should return a color from the neutral palette', (): void => { - expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerCardContainer(DesignSystemDefaults))).to.be.ok; - }); - it('should operate on a provided background color', (): void => { - const color: string = neutralLayerCardContainer((): string => '#000000')(DesignSystemDefaults); - - expect(color).not.to.equal(neutralLayerCardContainer(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); - it("should have a new implementation that matches the old implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - - expect(neutralLayerCardContainer(lightModeDesignSystem)).to.equal(neutralLayerCardContainerNew(palette, StandardLuminance.LightMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) - expect(neutralLayerCardContainer(darkModeDesignSystem)).to.equal(neutralLayerCardContainerNew(palette, StandardLuminance.DarkMode, lightModeDesignSystem.neutralFillCardDelta).toColorString().toUpperCase()) - }) - }); - describe('neutralLayerCard', (): void => { - it('should return a color from the neutral palette', (): void => { - expect(DesignSystemDefaults.neutralPalette.includes(neutralLayerCard(DesignSystemDefaults))).to.be.ok; - }); - it('should operate on a provided background color', (): void => { - const color: string = neutralLayerCard((): string => '#000000')(DesignSystemDefaults); - - expect(color).not.to.equal(neutralLayerCard(DesignSystemDefaults)); - expect(DesignSystemDefaults.neutralPalette.includes(color)).to.be.ok; - }); - }); -}); diff --git a/packages/web-components/src/color/neutral-layer.ts b/packages/web-components/src/color/neutral-layer.ts deleted file mode 100644 index 1251a5cc5fdce6..00000000000000 --- a/packages/web-components/src/color/neutral-layer.ts +++ /dev/null @@ -1,173 +0,0 @@ -import { clamp, ColorRGBA64 } from '@microsoft/fast-colors'; -import { add, multiply, subtract } from '../utilities/math'; -import { - baseLayerLuminance, - DesignSystem, - DesignSystemResolver, - neutralFillActiveDelta, - neutralFillCardDelta, - neutralFillHoverDelta, - neutralFillRestDelta, - neutralPalette, -} from '../fluent-design-system'; -import { findClosestSwatchIndex, getSwatch, swatchByMode } from './palette'; -import { ColorRecipe, colorRecipeFactory, designSystemResolverMax, Swatch } from './common'; - -/** - * @public - * Recommended values for light and dark mode for `baseLayerLuminance` in the design system. - */ -export enum StandardLuminance { - LightMode = 1, - DarkMode = 0.23, -} - -function luminanceOrBackgroundColor( - luminanceRecipe: DesignSystemResolver, - backgroundRecipe: DesignSystemResolver, -): DesignSystemResolver { - return (designSystem: DesignSystem): string => { - return baseLayerLuminance(designSystem) === -1 ? backgroundRecipe(designSystem) : luminanceRecipe(designSystem); - }; -} - -/** - * Find the palette color that's closest to the desired base layer luminance. - */ -const baseLayerLuminanceSwatch: DesignSystemResolver = (designSystem: DesignSystem): Swatch => { - const luminance: number = baseLayerLuminance(designSystem); - return new ColorRGBA64(luminance, luminance, luminance, 1).toStringHexRGB(); -}; - -/** - * Get the index of the base layer palette color. - */ -const baseLayerLuminanceIndex: DesignSystemResolver = findClosestSwatchIndex( - neutralPalette, - baseLayerLuminanceSwatch, -); - -/** - * Get the actual value of the card layer index, clamped so we can use it to base other layers from. - */ -const neutralLayerCardIndex: DesignSystemResolver = (designSystem: DesignSystem): number => - clamp( - subtract(baseLayerLuminanceIndex, neutralFillCardDelta)(designSystem), - 0, - neutralPalette(designSystem).length - 1, - ); - -/** - * Light mode L2 is significant because it happens at the same point as the neutral fill flip. Use this as the minimum index for L2. - */ -const lightNeutralLayerL2: DesignSystemResolver = designSystemResolverMax( - neutralFillRestDelta, - neutralFillHoverDelta, - neutralFillActiveDelta, -); - -/** - * The index for L2 based on luminance, adjusted for the flip in light mode if necessary. - */ -const neutralLayerL2Index: DesignSystemResolver = designSystemResolverMax( - add(baseLayerLuminanceIndex, neutralFillCardDelta), - lightNeutralLayerL2, -); - -/** - * Dark mode L4 is the darkest recommended background in the standard guidance, which is - * calculated based on luminance to work with variable sized ramps. - */ -const darkNeutralLayerL4: DesignSystemResolver = (designSystem: DesignSystem): number => { - const darkLum: number = 0.14; - const darkColor: ColorRGBA64 = new ColorRGBA64(darkLum, darkLum, darkLum, 1); - const darkRefIndex: number = findClosestSwatchIndex(neutralPalette, darkColor.toStringHexRGB())(designSystem); - return darkRefIndex; -}; - -/** - * @internal - * Used as the background color for floating layers like context menus and flyouts. - */ -export const neutralLayerFloating: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(subtract(neutralLayerCardIndex, neutralFillCardDelta), neutralPalette), - swatchByMode(neutralPalette)(0, subtract(darkNeutralLayerL4, multiply(neutralFillCardDelta, 5))), - ), -); - -/** - * @internal - * Used as the background color for cards. Pair with `neutralLayerCardContainer` for the container background. - */ -export const neutralLayerCard: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(neutralLayerCardIndex, neutralPalette), - swatchByMode(neutralPalette)(0, subtract(darkNeutralLayerL4, multiply(neutralFillCardDelta, 4))), - ), -); - -/** - * @internal - * Used as the background color for card containers. Pair with `neutralLayerCard` for the card backgrounds. - */ -export const neutralLayerCardContainer: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(add(neutralLayerCardIndex, neutralFillCardDelta), neutralPalette), - swatchByMode(neutralPalette)(neutralFillCardDelta, subtract(darkNeutralLayerL4, multiply(neutralFillCardDelta, 3))), - ), -); - -/** - * @internal - * Used as the background color for the primary content layer (L1). - */ -export const neutralLayerL1: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(baseLayerLuminanceIndex, neutralPalette), - swatchByMode(neutralPalette)(0, subtract(darkNeutralLayerL4, multiply(neutralFillCardDelta, 3))), - ), -); - -/** - * @internal - * Alternate darker color for L1 surfaces. Currently the same as card container, but use - * the most applicable semantic named recipe. - */ -export const neutralLayerL1Alt: ColorRecipe = neutralLayerCardContainer; - -/** - * @internal - * Used as the background for the top command surface, logically below L1. - */ -export const neutralLayerL2: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(neutralLayerL2Index, neutralPalette), - swatchByMode(neutralPalette)(lightNeutralLayerL2, subtract(darkNeutralLayerL4, multiply(neutralFillCardDelta, 2))), - ), -); - -/** - * @internal - * Used as the background for secondary command surfaces, logically below L2. - */ -export const neutralLayerL3: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(add(neutralLayerL2Index, neutralFillCardDelta), neutralPalette), - swatchByMode(neutralPalette)( - add(lightNeutralLayerL2, neutralFillCardDelta), - subtract(darkNeutralLayerL4, neutralFillCardDelta), - ), - ), -); - -/** - * @internal - * Used as the background for the lowest command surface or title bar, logically below L3. - */ -export const neutralLayerL4: ColorRecipe = colorRecipeFactory( - luminanceOrBackgroundColor( - getSwatch(add(neutralLayerL2Index, multiply(neutralFillCardDelta, 2)), neutralPalette), - swatchByMode(neutralPalette)(add(lightNeutralLayerL2, multiply(neutralFillCardDelta, 2)), darkNeutralLayerL4), - ), -); diff --git a/packages/web-components/src/color/neutral-outline-contrast.ts b/packages/web-components/src/color/neutral-outline-contrast.ts deleted file mode 100644 index 10864284f5fccd..00000000000000 --- a/packages/web-components/src/color/neutral-outline-contrast.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { subtract } from '../utilities/math'; -import { - neutralOutlineActiveDelta, - neutralOutlineFocusDelta, - neutralOutlineHoverDelta, - neutralOutlineRestDelta, - neutralPalette, -} from '../fluent-design-system'; -import { - ColorRecipe, - colorRecipeFactory, - SwatchFamily, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; - -import { accessibleAlgorithm } from './accessible-recipe'; - -/** - * @internal - */ -export const neutralOutlineContrastAlgorithm: SwatchFamilyResolver = colorRecipeFactory( - accessibleAlgorithm( - neutralPalette, - 3, - 0, - subtract(neutralOutlineHoverDelta, neutralOutlineRestDelta), - subtract(neutralOutlineActiveDelta, neutralOutlineRestDelta), - subtract(neutralOutlineFocusDelta, neutralOutlineRestDelta), - ), -); - -/** - * @internal - */ -export const neutralOutlineContrast: ColorRecipe = colorRecipeFactory(neutralOutlineContrastAlgorithm); - -/** - * @internal - */ -export const neutralOutlineContrastRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - neutralOutlineContrast, -); - -/** - * @internal - */ -export const neutralOutlineContrastHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - neutralOutlineContrast, -); - -/** - * @internal - */ -export const neutralOutlineContrastActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - neutralOutlineContrast, -); - -/** - * @internal - */ -export const neutralOutlineContrastFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - neutralOutlineContrast, -); diff --git a/packages/web-components/src/color/neutral-outline.spec.ts b/packages/web-components/src/color/neutral-outline.spec.ts deleted file mode 100644 index a2af7d846e105d..00000000000000 --- a/packages/web-components/src/color/neutral-outline.spec.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { expect } from 'chai'; -import { isColorStringHexRGB, parseColorHexRGB } from "@microsoft/fast-colors"; -import { - DesignSystem, - DesignSystemDefaults, - accentPalette as getAccentPalette, - neutralPalette as getNeutralPalette, -} from '../fluent-design-system'; -import { - neutralOutline, - neutralOutlineActive, - neutralOutlineFocus, - neutralOutlineHover, - neutralOutlineRest, -} from './neutral-outline'; -import { Palette } from './palette'; -import { Swatch, SwatchFamily } from './common'; -import { neutralBaseColor } from "./color-constants"; -import { PaletteRGB } from "../color-vNext/palette"; -import { SwatchRGB } from "../color-vNext/swatch"; -import { neutralStroke as neutralStrokeNew } from "../color-vNext/recipes/neutral-stroke" - -describe('neutralOutline', (): void => { - const neutralPalette: Palette = getNeutralPalette(DesignSystemDefaults); - const accentPalette: Palette = getAccentPalette(DesignSystemDefaults); - - it('should return by default', (): void => { - [neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest].forEach(fn => { - expect(neutralPalette).to.include(fn({} as DesignSystem)); - }); - }); - - it('should always return a color', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(isColorStringHexRGB(neutralOutlineRest(() => swatch)({} as DesignSystem))).to.equal(true); - }); - }); - - it('should return the same color from both implementations', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - expect(neutralOutlineRest(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineRest( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralOutlineHover(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineHover( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralOutlineActive(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineActive( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - expect(neutralOutlineFocus(() => swatch)(DesignSystemDefaults)).to.equal( - neutralOutlineFocus( - Object.assign({}, DesignSystemDefaults, { - backgroundColor: swatch, - }), - ), - ); - }); - }); - - it('should have consistent return values', (): void => { - neutralPalette.concat(accentPalette).forEach((swatch: Swatch): void => { - const backplates: SwatchFamily = neutralOutline(() => swatch)(DesignSystemDefaults); - const rest: Swatch = neutralOutlineRest(() => swatch)(DesignSystemDefaults); - const hover: Swatch = neutralOutlineHover(() => swatch)(DesignSystemDefaults); - const active: Swatch = neutralOutlineActive(() => swatch)(DesignSystemDefaults); - const focus: Swatch = neutralOutlineFocus(() => swatch)(DesignSystemDefaults); - - expect(backplates.rest).to.equal(rest); - expect(backplates.hover).to.equal(hover); - expect(backplates.active).to.equal(active); - expect(backplates.focus).to.equal(focus); - }); - }); -}); -describe("ensure parity between old and new recipe implementation", () => { - const color = (parseColorHexRGB(neutralBaseColor)!) - const palette = PaletteRGB.create(SwatchRGB.create(color.r, color.g, color.b)); - palette.swatches.forEach(( newSwatch, index ) => { - const { neutralOutlineRestDelta, neutralOutlineHoverDelta, neutralOutlineFocusDelta, neutralOutlineActiveDelta } = DesignSystemDefaults; - const oldValues = neutralOutline({...DesignSystemDefaults, backgroundColor: DesignSystemDefaults.neutralPalette[index]}); - const newValues = neutralStrokeNew( - palette, - newSwatch, - neutralOutlineRestDelta, - neutralOutlineHoverDelta, - neutralOutlineActiveDelta, - neutralOutlineFocusDelta, - ); - it(`should be the same for ${newSwatch.toColorString()}`, () => { - for (let key in oldValues) { - expect(oldValues[key]).to.equal(newValues[key].toColorString().toUpperCase()) - } - }); - }) -}) diff --git a/packages/web-components/src/color/neutral-outline.ts b/packages/web-components/src/color/neutral-outline.ts deleted file mode 100644 index 170d347ee37649..00000000000000 --- a/packages/web-components/src/color/neutral-outline.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { - DesignSystem, - neutralOutlineActiveDelta, - neutralOutlineFocusDelta, - neutralOutlineHoverDelta, - neutralOutlineRestDelta, - neutralPalette, -} from '../fluent-design-system'; -import { findClosestBackgroundIndex, getSwatch, isDarkMode } from './palette'; -import { - ColorRecipe, - colorRecipeFactory, - SwatchFamily, - SwatchFamilyResolver, - swatchFamilyToSwatchRecipeFactory, - SwatchFamilyType, - SwatchRecipe, -} from './common'; - -const neutralOutlineAlgorithm: SwatchFamilyResolver = (designSystem: DesignSystem): SwatchFamily => { - const palette: string[] = neutralPalette(designSystem); - const backgroundIndex: number = findClosestBackgroundIndex(designSystem); - const direction: 1 | -1 = isDarkMode(designSystem) ? -1 : 1; - - const restDelta: number = neutralOutlineRestDelta(designSystem); - const restIndex: number = backgroundIndex + direction * restDelta; - const hoverDelta: number = neutralOutlineHoverDelta(designSystem); - const hoverIndex: number = restIndex + direction * (hoverDelta - restDelta); - const activeDelta: number = neutralOutlineActiveDelta(designSystem); - const activeIndex: number = restIndex + direction * (activeDelta - restDelta); - const focusDelta: number = neutralOutlineFocusDelta(designSystem); - const focusIndex: number = restIndex + direction * (focusDelta - restDelta); - - return { - rest: getSwatch(restIndex, palette), - hover: getSwatch(hoverIndex, palette), - active: getSwatch(activeIndex, palette), - focus: getSwatch(focusIndex, palette), - }; -}; - -/** - * @internal - */ -export const neutralOutline: ColorRecipe = colorRecipeFactory(neutralOutlineAlgorithm); - -/** - * @internal - */ -export const neutralOutlineRest: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.rest, - neutralOutline, -); - -/** - * @internal - */ -export const neutralOutlineHover: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.hover, - neutralOutline, -); - -/** - * @internal - */ -export const neutralOutlineActive: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.active, - neutralOutline, -); - -/** - * @internal - */ -export const neutralOutlineFocus: SwatchRecipe = swatchFamilyToSwatchRecipeFactory( - SwatchFamilyType.focus, - neutralOutline, -); diff --git a/packages/web-components/src/color/palette.spec.ts b/packages/web-components/src/color/palette.spec.ts deleted file mode 100644 index 202c5f27cf9bb5..00000000000000 --- a/packages/web-components/src/color/palette.spec.ts +++ /dev/null @@ -1,300 +0,0 @@ -import chai, { expect } from 'chai'; -import spies from 'chai-spies'; -import { - accentBaseColor, - accentPalette, - DesignSystem, - DesignSystemDefaults, - neutralPalette, -} from '../fluent-design-system'; -import { - findClosestSwatchIndex, - findSwatchIndex, - getSwatch, - palette, - Palette, - PaletteType, - swatchByContrast, - swatchByMode, -} from './palette'; -import { Swatch } from './common'; - -chai.use(spies); - -describe('palette', (): void => { - it('should return a function', (): void => { - expect(typeof palette(PaletteType.accent)).to.equal('function'); - expect(typeof palette(PaletteType.neutral)).to.equal('function'); - }); - - it('should return a function that returns a palette if the argument does not match a palette', (): void => { - expect((palette as any)()()).to.have.length(94); - }); - - it('should return a palette if no designSystem is provided', (): void => { - expect(palette(PaletteType.neutral)(undefined as any)).to.have.length(94); - expect(palette(PaletteType.accent)(undefined as any)).to.have.length(94); - }); - - it('should return upper-case hex values', (): void => { - (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { - expect(swatch).to.equal(swatch.toUpperCase()); - }); - (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { - expect(swatch).to.equal(swatch.toUpperCase()); - }); - }); - - it('should return six-letter hex values', (): void => { - (palette(PaletteType.neutral)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { - expect(swatch.length).to.equal(7); - expect(swatch.charAt(0)).to.equal('#'); - }); - (palette(PaletteType.accent)(DesignSystemDefaults) as Palette).forEach((swatch: Swatch) => { - expect(swatch.length).to.equal(7); - expect(swatch.charAt(0)).to.equal('#'); - }); - }); -}); - -describe('findSwatchIndex', (): void => { - it('should implement design-system defaults', (): void => { - expect(findSwatchIndex(neutralPalette, '#FFF')({} as DesignSystem)).to.equal(0); - expect(findSwatchIndex(accentPalette, accentBaseColor({} as DesignSystem))({} as DesignSystem)).to.equal(59); - }); - - it('should return -1 if the color is not found', (): void => { - expect(findSwatchIndex(neutralPalette, '#FF0000')(DesignSystemDefaults)).to.equal(-1); - expect(findSwatchIndex(accentPalette, '#FF0000')(DesignSystemDefaults)).to.equal(-1); - }); - - it('should find white', (): void => { - expect(findSwatchIndex(neutralPalette, '#FFFFFF')(DesignSystemDefaults)).to.equal(0); - expect(findSwatchIndex(neutralPalette, '#FFF')(DesignSystemDefaults)).to.equal(0); - expect(findSwatchIndex(neutralPalette, 'rgb(255, 255, 255)')(DesignSystemDefaults)).to.equal(0); - }); - - it('should find black', (): void => { - expect(findSwatchIndex(neutralPalette, '#000000')(DesignSystemDefaults)).to.equal(93); - expect(findSwatchIndex(neutralPalette, '#000')(DesignSystemDefaults)).to.equal(93); - expect(findSwatchIndex(neutralPalette, 'rgb(0, 0, 0)')(DesignSystemDefaults)).to.equal(93); - }); - - it('should find accent', (): void => { - expect(findSwatchIndex(accentPalette, accentBaseColor(DesignSystemDefaults))(DesignSystemDefaults)).to.equal(59); - expect(findSwatchIndex(accentPalette, 'rgb(0, 120, 212)')(DesignSystemDefaults)).to.equal(59); - }); -}); - -describe('findClosestSwatchIndex', (): void => { - it('should return 0 if the input swatch cannot be converted to a color', (): void => { - expect(findClosestSwatchIndex(neutralPalette, 'pewpewpew')({} as DesignSystem)).to.equal(0); - }); - it('should operate on design system defaults', (): void => { - expect(findClosestSwatchIndex(neutralPalette, '#FFFFFF')({} as DesignSystem)).to.equal(0); - expect(findClosestSwatchIndex(neutralPalette, '#808080')({} as DesignSystem)).to.equal(49); - expect(findClosestSwatchIndex(neutralPalette, '#000000')({} as DesignSystem)).to.equal(93); - }); - it('should return the index with the closest luminance to the input swatch if the swatch is not in the palette', (): void => { - expect(findClosestSwatchIndex(neutralPalette, '#008000')({} as DesignSystem)).to.equal(56); - expect(findClosestSwatchIndex(neutralPalette, '#F589FF')({} as DesignSystem)).to.equal(30); - }); -}); - -describe('getSwatch', (): void => { - const colorPalette: Palette = ['#FFF', '#F00', '#000']; - - it('should return the first color when the input index is less than 0', (): void => { - expect(getSwatch(-1, colorPalette)).to.equal('#FFF'); - }); - - it('should return the last color when the input index is greater than the last index of the palette', (): void => { - expect(getSwatch(4, colorPalette)).to.equal('#000'); - }); - - it('should return the color at the provided index if the index is within the bounds of the array', (): void => { - expect(getSwatch(0, colorPalette)).to.equal('#FFF'); - expect(getSwatch(1, colorPalette)).to.equal('#F00'); - expect(getSwatch(2, colorPalette)).to.equal('#000'); - }); -}); - -describe('swatchByMode', (): void => { - it('should operate on DesignSystemDefaults', (): void => { - expect(swatchByMode(neutralPalette)(0, 0)({} as DesignSystem)).to.equal(DesignSystemDefaults.neutralPalette[0]); - expect(swatchByMode(accentPalette)(0, 0)({} as DesignSystem)).to.equal(DesignSystemDefaults.accentPalette[0]); - }); - it('should return the dark index color when the background color is dark', (): void => { - expect( - swatchByMode(neutralPalette)(0, 7)({ - backgroundColor: '#000', - } as DesignSystem), - ).to.equal(DesignSystemDefaults.neutralPalette[7]); - expect( - swatchByMode(accentPalette)(0, 7)({ - backgroundColor: '#000', - } as DesignSystem), - ).to.equal(DesignSystemDefaults.accentPalette[7]); - }); -}); - -describe('swatchByContrast', (): void => { - it('should return a function', (): void => { - expect(typeof swatchByContrast({} as any)).to.equal('function'); - }); - describe('indexResolver', (): void => { - it('should pass a reference color as the first argument', (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with('#FFF'); - }); - it('should pass the palette as the second argument', (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const colorPalette: string[] = ['foo']; - - swatchByContrast('#FFF')(() => colorPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with(colorPalette); - }); - it('should pass the designSystem as the third argument', (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const designSystem: DesignSystem = {} as DesignSystem; - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )(designSystem); - expect(indexResolver).to.have.been.called.once; - expect(indexResolver).to.have.been.called.with(designSystem); - }); - }); - describe('directionResolver', (): void => { - it('should pass the reference index as the first argument', (): void => { - const index: number = 20; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(index); - }); - it('should receive the palette length - 1 if the resolved index is greater than the palette length', (): void => { - const index: number = 105; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(neutralPalette({} as DesignSystem).length - 1); - }); - it('should receive 0 if the resolved index is less than 0', (): void => { - const index: number = -20; - const indexResolver = chai.spy(() => index); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(0); - }); - it('should pass the palette as the second argument', (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const colorPalette: string[] = ['foo']; - - swatchByContrast('#FFF')(() => colorPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )({} as DesignSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(colorPalette); - }); - it('should pass the designSystem as the third argument', (): void => { - const indexResolver = chai.spy(() => 0); - const directionResolver = chai.spy(() => 1); - const contrastCondition = chai.spy(() => false); - const designSystem: DesignSystem = {} as DesignSystem; - - swatchByContrast('#FFF')(neutralPalette)(indexResolver as any)(directionResolver as any)( - contrastCondition as any, - )(designSystem); - expect(directionResolver).to.have.been.called.once; - expect(directionResolver).to.have.been.called.with(designSystem); - }); - }); - - it('should return the color at the initial index if it satisfies the predicate', (): void => { - const indexResolver: () => number = (): number => 0; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => true; - const designSystem: DesignSystem = {} as DesignSystem; - const sourcePalette: string[] = ['#111', '#222', '#333']; - - expect( - swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), - ).to.equal(sourcePalette[0]); - }); - it('should return the color at the last index when direction is 1 and no value satisfies the predicate', (): void => { - const indexResolver: () => number = (): number => 0; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - const sourcePalette: string[] = ['#111', '#222', '#333']; - - expect( - swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), - ).to.equal(sourcePalette[sourcePalette.length - 1]); - }); - it('should return the color at the first index when direction is -1 and no value satisfies the predicate', (): void => { - const sourcePalette: string[] = ['#111', '#222', '#333']; - const indexResolver: () => number = (): number => sourcePalette.length - 1; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), - ).to.equal(sourcePalette[sourcePalette.length - 1]); - }); - it('should return the color at the last index when initialIndex is greater than the last index', (): void => { - const sourcePalette: string[] = ['#111', '#222', '#333']; - const indexResolver: () => number = (): number => sourcePalette.length; - const directionResolver: () => 1 | -1 = (): 1 | -1 => 1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), - ).to.equal(sourcePalette[sourcePalette.length - 1]); - }); - it('should return the color at the first index when initialIndex is less than 0', (): void => { - const sourcePalette: string[] = ['#111', '#222', '#333']; - const indexResolver: () => number = (): number => sourcePalette.length; - const directionResolver: () => 1 | -1 = (): 1 | -1 => -1; - const contrastCondition: () => boolean = (): boolean => false; - const designSystem: DesignSystem = {} as DesignSystem; - - expect( - swatchByContrast('#FFF')(() => sourcePalette)(indexResolver)(directionResolver)(contrastCondition)(designSystem), - ).to.equal(sourcePalette[0]); - }); -}); diff --git a/packages/web-components/src/color/palette.ts b/packages/web-components/src/color/palette.ts index 5b7809141dd3d5..7e8f1ff02aec98 100644 --- a/packages/web-components/src/color/palette.ts +++ b/packages/web-components/src/color/palette.ts @@ -1,326 +1,145 @@ -import { - accentPalette, - backgroundColor, - DesignSystem, - DesignSystemResolver, - evaluateDesignSystemResolver, - neutralPalette, -} from '../fluent-design-system'; -import { clamp, colorMatches, contrast, isValidColor, luminance, Swatch, SwatchResolver } from './common'; +import { clamp, ColorRGBA64, ComponentStateColorPalette, parseColorHexRGB } from '@microsoft/fast-colors'; +import { Swatch, SwatchRGB } from './swatch'; +import { binarySearch } from './utilities/binary-search'; +import { directionByIsDark } from './utilities/direction-by-is-dark'; +import { contrast, RelativeLuminance } from './utilities/relative-luminance'; /** - * The named palettes of the MSFT design system - * @deprecated - use neutralPalette and accentPalette functions instead + * A collection of {@link Swatch} instances * @public */ -export enum PaletteType { - neutral = 'neutral', - accent = 'accent', -} +export interface Palette { + readonly source: T; + readonly swatches: ReadonlyArray; -/** - * The structure of a color palette - * - * @public - */ -export type Palette = Swatch[]; + /** + * Returns a swatch from the palette that most closely matches + * the contrast ratio provided to a provided reference. + */ + colorContrast(reference: Swatch, contrast: number, initialIndex?: number, direction?: 1 | -1): T; -/** - * Retrieves a palette by name. This function returns a function that accepts - * a design system, returning a palette a palette or null - * @deprecated - use neutralPalette and accentPalette functions instead - * @internal - */ -export function palette(paletteType: PaletteType): DesignSystemResolver { - return (designSystem: DesignSystem | undefined): Palette => { - switch (paletteType) { - case PaletteType.accent: - return accentPalette(designSystem!); - case PaletteType.neutral: - default: - return neutralPalette(designSystem!); - } - }; -} + /** + * Returns the index of the palette that most closely matches + * the relativeLuminance of the provided swatch + */ + closestIndexOf(reference: RelativeLuminance): number; -/** - * A function to find the index of a swatch in a specified palette. If the color is found, - * otherwise it will return -1 - * - * @internal - */ -export function findSwatchIndex( - paletteResolver: Palette | DesignSystemResolver, - swatch: Swatch, -): DesignSystemResolver { - return (designSystem: DesignSystem): number => { - if (!isValidColor(swatch)) { - return -1; - } + /** + * Gets a swatch by index. Index is clamped to the limits + * of the palette so a Swatch will always be returned. + */ + get(index: number): T; +} - const colorPalette: Palette = evaluateDesignSystemResolver(paletteResolver, designSystem); - const index: number = colorPalette.indexOf(swatch); +/** @public */ +export type PaletteRGB = Palette; - // If we don't find the string exactly, it might be because of color formatting differences - return index !== -1 - ? index - : colorPalette.findIndex((paletteSwatch: Swatch): boolean => { - return isValidColor(paletteSwatch) && colorMatches(swatch, paletteSwatch); - }); - }; -} +/** @public */ +export const PaletteRGB = Object.freeze({ + create(source: SwatchRGB): PaletteRGB { + return PaletteRGBImpl.from(source); + }, +}); /** - * Returns the closest swatch in a palette to an input swatch. - * If the input swatch cannot be converted to a color, 0 will be returned - * - * @internal + * A {@link Palette} representing RGB swatch values. + * @public */ -export function findClosestSwatchIndex( - paletteResolver: Palette | DesignSystemResolver, - swatch: Swatch | DesignSystemResolver, -): DesignSystemResolver { - return (designSystem: DesignSystem): number => { - const resolvedPalette: Palette = evaluateDesignSystemResolver(paletteResolver, designSystem); - const resolvedSwatch: Swatch = evaluateDesignSystemResolver(swatch, designSystem); - const index: number = findSwatchIndex(resolvedPalette, resolvedSwatch)(designSystem); - let swatchLuminance: number; +class PaletteRGBImpl implements Palette { + /** + * {@inheritdoc Palette.source} + */ + public readonly source: SwatchRGB; + public readonly swatches: ReadonlyArray; + private lastIndex: number; + private reversedSwatches: ReadonlyArray; + /** + * + * @param source - The source color for the palette + * @param swatches - All swatches in the palette + */ + constructor(source: SwatchRGB, swatches: ReadonlyArray) { + this.source = source; + this.swatches = swatches; - if (index !== -1) { - return index; - } + this.reversedSwatches = Object.freeze([...this.swatches].reverse()); + this.lastIndex = this.swatches.length - 1; + } - try { - swatchLuminance = luminance(resolvedSwatch); - } catch (e) { - swatchLuminance = -1; + /** + * {@inheritdoc Palette.colorContrast} + */ + public colorContrast( + reference: Swatch, + contrastTarget: number, + initialSearchIndex?: number, + direction?: 1 | -1, + ): SwatchRGB { + if (initialSearchIndex === undefined) { + initialSearchIndex = this.closestIndexOf(reference); } - if (swatchLuminance === -1) { - return 0; - } + let source: ReadonlyArray = this.swatches; + const endSearchIndex = this.lastIndex; + let startSearchIndex = initialSearchIndex; - interface LuminanceMap { - luminance: number; - index: number; + if (direction === undefined) { + direction = directionByIsDark(reference); } - return resolvedPalette - .map( - (mappedSwatch: Swatch, mappedIndex: number): LuminanceMap => { - return { - luminance: luminance(mappedSwatch), - index: mappedIndex, - }; - }, - ) - .reduce( - (previousValue: LuminanceMap, currentValue: LuminanceMap): LuminanceMap => { - return Math.abs(currentValue.luminance - swatchLuminance) < - Math.abs(previousValue.luminance - swatchLuminance) - ? currentValue - : previousValue; - }, - ).index; - }; -} - -/** - * @public - * @privateRemarks - * Determines if the design-system should be considered in "dark mode". - * We're in dark mode if we have more contrast between #000000 and our background - * color than #FFFFFF and our background color. That threshold can be expressed as a relative luminance - * using the contrast formula as (1 + 0.5) / (bg + 0.05) === (bg + 0.05) / (0 + 0.05), - * which reduces to the following, where bg is the relative luminance of the background color - */ -export function isDarkMode(designSystem: DesignSystem): boolean { - return luminance(backgroundColor(designSystem)) <= (-0.1 + Math.sqrt(0.21)) / 2; -} + const condition = (value: SwatchRGB) => contrast(reference, value) >= contrastTarget; -/** - * @internal - * @deprecated - * Determines if the design-system should be considered in "light mode". - */ -export function isLightMode(designSystem: DesignSystem): boolean { - return !isDarkMode(designSystem); -} - -/** - * @internal - * Safely retrieves an index of a palette. The index is clamped to valid - * array indexes so that a swatch is always returned - */ -export function getSwatch(index: number, colorPalette: Palette): Swatch; -export function getSwatch( - index: DesignSystemResolver, - colorPalette: DesignSystemResolver, -): DesignSystemResolver; -export function getSwatch(index: any, colorPalette: any): any { - if (typeof index === 'function') { - return (designSystem: DesignSystem): Swatch => { - return colorPalette(designSystem)[clamp(index(designSystem), 0, colorPalette(designSystem).length - 1)]; - }; - } else { - return colorPalette[clamp(index, 0, colorPalette.length - 1)]; - } -} - -/** - * @internal - */ -export function swatchByMode( - paletteResolver: DesignSystemResolver, -): ( - a: number | DesignSystemResolver, - b: number | DesignSystemResolver, -) => DesignSystemResolver { - return ( - valueA: number | DesignSystemResolver, - valueB?: number | DesignSystemResolver, - ): DesignSystemResolver => { - return (designSystem: DesignSystem): Swatch => { - return getSwatch( - isDarkMode(designSystem) - ? evaluateDesignSystemResolver(valueB!, designSystem) - : evaluateDesignSystemResolver(valueA, designSystem), - paletteResolver(designSystem), - ); - }; - }; -} + if (direction === -1) { + source = this.reversedSwatches; + startSearchIndex = endSearchIndex - startSearchIndex; + } -function binarySearch( - valuesToSearch: T[], - searchCondition: (value: T) => boolean, - startIndex: number = 0, - endIndex: number = valuesToSearch.length - 1, -): T { - if (endIndex === startIndex) { - return valuesToSearch[startIndex]; + return binarySearch(source, condition, startSearchIndex, endSearchIndex); } - const middleIndex: number = Math.floor((endIndex - startIndex) / 2) + startIndex; - - // Check to see if this passes on the item in the center of the array - // if it does check the previous values - if (searchCondition(valuesToSearch[middleIndex])) { - return binarySearch( - valuesToSearch, - searchCondition, - startIndex, - middleIndex, // include this index because it passed the search condition - ); - } else { - return binarySearch( - valuesToSearch, - searchCondition, - middleIndex + 1, // exclude this index because it failed the search condition - endIndex, - ); + /** + * {@inheritdoc Palette.get} + */ + public get(index: number): SwatchRGB { + return this.swatches[index] || this.swatches[clamp(index, 0, this.lastIndex)]; } -} -// disable type-defs because this a deeply curried function and the call-signature is pretty complicated -// and typescript can work it out automatically for consumers -/** - * Retrieves a swatch from an input palette, where the swatch's contrast against the reference color - * passes an input condition. The direction to search in the palette is determined by an input condition. - * Where to begin the search in the palette will be determined another input function that should return the starting index. - * example: swatchByContrast( - * "#FFF" // compare swatches against "#FFF" - * )( - * neutralPalette // use the neutral palette from the DesignSystem - since this is a function, it will be evaluated with the DesignSystem - * )( - * () => 0 // begin searching for a swatch at the beginning of the neutral palette - * )( - * () => 1 // While searching, search in the direction toward the end of the array (-1 moves towards the beginning of the array) - * )( - * minContrastTargetFactory(4.5) // A swatch is only valid if the contrast is greater than 4.5 - * )( - * designSystem // Pass the design-system. The first swatch that passes the previous condition will be returned from this function - * ) - * @internal - */ -export function swatchByContrast(referenceColor: string | SwatchResolver) { /** - * A function that expects a function that resolves a palette + * {@inheritdoc Palette.closestIndexOf} */ - return (paletteResolver: Palette | DesignSystemResolver) => { - /** - * A function that expects a function that resolves the index - * of the palette that the algorithm should begin looking for a swatch at - */ - return (indexResolver: (referenceColor: string, palette: Palette, designSystem: DesignSystem) => number) => { - /** - * A function that expects a function that determines which direction in the - * palette we should look for a swatch relative to the initial index - */ - return (directionResolver: (referenceIndex: number, palette: Palette, designSystem: DesignSystem) => 1 | -1) => { - /** - * A function that expects a function that determines if the contrast - * between the reference color and color from the palette are acceptable - */ - return (contrastCondition: (contrastRatio: number) => boolean): DesignSystemResolver => { - /** - * A function that accepts a design-system. It resolves all of the curried arguments - * and loops over the palette until we reach the bounds of the palette or the condition - * is satisfied. Once either the condition is satisfied or we reach the end of the palette, - * we return the color - */ - return (designSystem: DesignSystem): Swatch => { - const color: Swatch = evaluateDesignSystemResolver(referenceColor, designSystem); - const sourcePalette: Palette = evaluateDesignSystemResolver(paletteResolver, designSystem); - const length: number = sourcePalette.length; - const initialSearchIndex: number = clamp(indexResolver(color, sourcePalette, designSystem), 0, length - 1); - const direction: 1 | -1 = directionResolver(initialSearchIndex, sourcePalette, designSystem); - - function contrastSearchCondition(valueToCheckAgainst: Swatch): boolean { - return contrastCondition(contrast(color, valueToCheckAgainst)); - } - - const constrainedSourcePalette: Palette = [].concat(sourcePalette as any); - const endSearchIndex: number = length - 1; - let startSearchIndex: number = initialSearchIndex; + public closestIndexOf(reference: Swatch): number { + const index = this.swatches.indexOf(reference as SwatchRGB); - if (direction === -1) { - // reverse the palette array when the direction that - // the contrast resolves for is reversed - constrainedSourcePalette.reverse(); - startSearchIndex = endSearchIndex - startSearchIndex; - } - - return binarySearch(constrainedSourcePalette, contrastSearchCondition, startSearchIndex, endSearchIndex); - }; - }; - }; - }; - }; -} + if (index !== -1) { + return index; + } -/** - * @internal - * Resolves the index that the contrast search algorithm should start at - */ -export function referenceColorInitialIndexResolver( - referenceColor: string, - sourcePalette: Palette, - designSystem: DesignSystem, -): number { - return findClosestSwatchIndex(sourcePalette, referenceColor)(designSystem); -} + const closest = this.swatches.reduce((previous, next) => + Math.abs(next.relativeLuminance - reference.relativeLuminance) < + Math.abs(previous.relativeLuminance - reference.relativeLuminance) + ? next + : previous, + ); -/** - * @internal - */ -export function findClosestBackgroundIndex(designSystem: DesignSystem): number { - return findClosestSwatchIndex(neutralPalette, backgroundColor(designSystem))(designSystem); -} + return this.swatches.indexOf(closest); + } -/** - * @internal - */ -export function minContrastTargetFactory(targetContrast: number): (instanceContrast: number) => boolean { - return (instanceContrast: number): boolean => instanceContrast >= targetContrast; + /** + * Create a color palette from a provided swatch + * @param source - The source swatch to create a palette from + * @returns + */ + static from(source: SwatchRGB): PaletteRGB { + return new PaletteRGBImpl( + source, + Object.freeze( + new ComponentStateColorPalette({ + baseColor: ColorRGBA64.fromObject(source)!, + }).palette.map(x => { + const _x = parseColorHexRGB(x.toStringHexRGB())!; + return SwatchRGB.create(_x.r, _x.g, _x.b); + }), + ), + ); + } } diff --git a/packages/web-components/src/color-vNext/recipe.ts b/packages/web-components/src/color/recipe.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipe.ts rename to packages/web-components/src/color/recipe.ts diff --git a/packages/web-components/src/color/recipes/accent-fill.spec.ts b/packages/web-components/src/color/recipes/accent-fill.spec.ts new file mode 100644 index 00000000000000..03145f17599a85 --- /dev/null +++ b/packages/web-components/src/color/recipes/accent-fill.spec.ts @@ -0,0 +1,59 @@ +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { expect } from 'chai'; +import { PaletteRGB } from '../palette'; +import { SwatchRGB } from '../swatch'; +import { accentFill } from './accent-fill'; +import { foregroundOnAccent as foregroundOnAccentNew } from './foreground-on-accent'; + +describe('accentFill', (): void => { + const neutralPalette = PaletteRGB.create(SwatchRGB.create(0.5, 0.5, 0.5)); + + it('should have accessible rest and hover colors against accentForegroundCut', (): void => { + const accentColors = [ + SwatchRGB.from(parseColorHexRGB('#0078D4')!), + SwatchRGB.from(parseColorHexRGB('#107C10')!), + SwatchRGB.from(parseColorHexRGB('#5C2D91')!), + SwatchRGB.from(parseColorHexRGB('#D83B01')!), + SwatchRGB.from(parseColorHexRGB('#F2C812')!), + ]; + + accentColors.forEach((accent: SwatchRGB): void => { + const accentPalette = PaletteRGB.create(accent); + + neutralPalette.swatches.forEach((swatch: SwatchRGB): void => { + const accentForegroundCutColor = foregroundOnAccentNew(accentPalette.source, 4.5); + const accentFillColors = accentFill( + accentPalette, + neutralPalette, + swatch, + accentForegroundCutColor, + 4.5, + 4, + -5, + 0, + 7, + 10, + 5, + ); + const accentFillLargeColors = accentFill( + accentPalette, + neutralPalette, + swatch, + accentForegroundCutColor, + 3, + 4, + -5, + 0, + 7, + 10, + 5, + ); + + expect(accentForegroundCutColor.contrast(accentFillColors.rest)).to.be.gte(4.5); + expect(accentForegroundCutColor.contrast(accentFillColors.hover)).to.be.gte(4.5); + expect(accentForegroundCutColor.contrast(accentFillLargeColors.rest)).to.be.gte(3); + expect(accentForegroundCutColor.contrast(accentFillLargeColors.hover)).to.be.gte(3); + }); + }); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/accent-fill.ts b/packages/web-components/src/color/recipes/accent-fill.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/accent-fill.ts rename to packages/web-components/src/color/recipes/accent-fill.ts diff --git a/packages/web-components/src/color/recipes/accent-foreground.spec.ts b/packages/web-components/src/color/recipes/accent-foreground.spec.ts new file mode 100644 index 00000000000000..706caaec4cc759 --- /dev/null +++ b/packages/web-components/src/color/recipes/accent-foreground.spec.ts @@ -0,0 +1,51 @@ +import { expect } from 'chai'; +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { PaletteRGB } from '../palette'; +import { SwatchRGB } from '../swatch'; +import { accentBase, black, middleGrey, white } from '../utilities/color-constants'; +import { accentForeground } from './accent-foreground'; + +describe('accentForeground', (): void => { + const neutralPalette = PaletteRGB.create(middleGrey); + const accentPalette = PaletteRGB.create(accentBase); + + it('should increase contrast on hover state and decrease contrast on active state in either mode', (): void => { + const lightModeColors = accentForeground(accentPalette, white, 4.5, 0, 6, -4, 0); + const darkModeColors = accentForeground(accentPalette, black, 4.5, 0, 6, -4, 0); + + expect(lightModeColors.hover.contrast(white)).to.be.greaterThan(lightModeColors.rest.contrast(white)); + expect(darkModeColors.hover.contrast(black)).to.be.greaterThan(darkModeColors.rest.contrast(black)); + }); + + it('should have accessible rest and hover colors against the background color', (): void => { + const accentColors = [ + SwatchRGB.from(parseColorHexRGB('#0078D4')!), + SwatchRGB.from(parseColorHexRGB('#107C10')!), + SwatchRGB.from(parseColorHexRGB('#5C2D91')!), + SwatchRGB.from(parseColorHexRGB('#D83B01')!), + SwatchRGB.from(parseColorHexRGB('#F2C812')!), + ]; + + accentColors.forEach( + /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ + (accent): void => { + const accentPalette = PaletteRGB.create(accent); + + neutralPalette.swatches.forEach((swatch): void => { + const smallColors = accentForeground(accentPalette, swatch, 4.5, 0, 6, -4, 0); + const largeColors = accentForeground(accentPalette, swatch, 3, 0, 6, -4, 0); + expect( + swatch.contrast(smallColors.rest), + // There are a few states that are impossible to meet contrast on + ).to.be.gte(4.47); + expect( + swatch.contrast(smallColors.hover), + // There are a few states that are impossible to meet contrast on + ).to.be.gte(3.7); + expect(swatch.contrast(largeColors.rest)).to.be.gte(3); + expect(swatch.contrast(largeColors.hover)).to.be.gte(3); + }); + }, + ); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/accent-foreground.ts b/packages/web-components/src/color/recipes/accent-foreground.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/accent-foreground.ts rename to packages/web-components/src/color/recipes/accent-foreground.ts diff --git a/packages/web-components/src/color-vNext/recipes/focus-stroke.ts b/packages/web-components/src/color/recipes/focus-stroke.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/focus-stroke.ts rename to packages/web-components/src/color/recipes/focus-stroke.ts diff --git a/packages/web-components/src/color/recipes/foreground-on-accent.spec.ts b/packages/web-components/src/color/recipes/foreground-on-accent.spec.ts new file mode 100644 index 00000000000000..d0c7edd655eead --- /dev/null +++ b/packages/web-components/src/color/recipes/foreground-on-accent.spec.ts @@ -0,0 +1,19 @@ +import { expect } from 'chai'; +import { SwatchRGB } from '../swatch'; +import { black } from '../utilities/color-constants'; +import { foregroundOnAccent } from './foreground-on-accent'; + +describe('Cut text', (): void => { + it('should return black when background does not meet contrast ratio', (): void => { + const small = foregroundOnAccent(SwatchRGB.create(1, 1, 1), 4.5) as SwatchRGB; + const large = foregroundOnAccent(SwatchRGB.create(1, 1, 1), 3) as SwatchRGB; + + expect(small.r).to.equal(black.r); + expect(small.g).to.equal(black.g); + expect(small.b).to.equal(black.b); + + expect(large.r).to.equal(black.r); + expect(large.g).to.equal(black.g); + expect(large.b).to.equal(black.b); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/foreground-on-accent.ts b/packages/web-components/src/color/recipes/foreground-on-accent.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/foreground-on-accent.ts rename to packages/web-components/src/color/recipes/foreground-on-accent.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-divider.ts b/packages/web-components/src/color/recipes/neutral-divider.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-divider.ts rename to packages/web-components/src/color/recipes/neutral-divider.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts b/packages/web-components/src/color/recipes/neutral-fill-contrast.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-contrast.ts rename to packages/web-components/src/color/recipes/neutral-fill-contrast.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts b/packages/web-components/src/color/recipes/neutral-fill-input.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-input.ts rename to packages/web-components/src/color/recipes/neutral-fill-input.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts b/packages/web-components/src/color/recipes/neutral-fill-inverse.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-inverse.ts rename to packages/web-components/src/color/recipes/neutral-fill-inverse.ts diff --git a/packages/web-components/src/color/recipes/neutral-fill-layer.spec.ts b/packages/web-components/src/color/recipes/neutral-fill-layer.spec.ts new file mode 100644 index 00000000000000..1db6074f925643 --- /dev/null +++ b/packages/web-components/src/color/recipes/neutral-fill-layer.spec.ts @@ -0,0 +1,27 @@ +import { expect } from 'chai'; +import { PaletteRGB } from '../palette'; +import { SwatchRGB } from '../swatch'; +import { middleGrey } from '../utilities/color-constants'; +import { neutralFillLayer } from './neutral-fill-layer'; + +const neutralPalette = PaletteRGB.create(middleGrey); + +describe('neutralFillLayer', (): void => { + it('should get darker when the index of the backgroundColor is lower than the offset index', (): void => { + const delta = 3; + for (let i: number = 0; i < delta; i++) { + const color = neutralFillLayer(neutralPalette, neutralPalette.get(i), delta); + const resolved = neutralPalette.get(delta + i); + expect(color).to.equal(resolved); + } + }); + it('should return the color at three steps lower than the background color', (): void => { + const delta = 3; + + for (let i: number = delta; i < neutralPalette.swatches.length; i++) { + expect( + neutralPalette.swatches.indexOf(neutralFillLayer(neutralPalette, neutralPalette.get(i), delta) as SwatchRGB), + ).to.equal(i - 3); + } + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-layer.ts b/packages/web-components/src/color/recipes/neutral-fill-layer.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-layer.ts rename to packages/web-components/src/color/recipes/neutral-fill-layer.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts b/packages/web-components/src/color/recipes/neutral-fill-stealth.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill-stealth.ts rename to packages/web-components/src/color/recipes/neutral-fill-stealth.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-fill.ts b/packages/web-components/src/color/recipes/neutral-fill.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-fill.ts rename to packages/web-components/src/color/recipes/neutral-fill.ts diff --git a/packages/web-components/src/color/recipes/neutral-foreground-hint.spec.ts b/packages/web-components/src/color/recipes/neutral-foreground-hint.spec.ts new file mode 100644 index 00000000000000..326aee40421123 --- /dev/null +++ b/packages/web-components/src/color/recipes/neutral-foreground-hint.spec.ts @@ -0,0 +1,30 @@ +import { expect } from 'chai'; +import { PaletteRGB } from '../palette'; +import { SwatchRGB } from '../swatch'; +import { accentBase, middleGrey } from '../utilities/color-constants'; +import { neutralForegroundHint } from './neutral-foreground-hint'; + +describe('neutralForegroundHint', (): void => { + const neutralPalette = PaletteRGB.create(middleGrey); + const accentPalette = PaletteRGB.create(accentBase); + + neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => { + it(`${swatch} should resolve a color from the neutral palette`, (): void => { + expect(neutralPalette.swatches.indexOf(neutralForegroundHint(neutralPalette, swatch) as SwatchRGB)).not.to.equal( + -1, + ); + }); + }); + + neutralPalette.swatches.concat(accentPalette.swatches).forEach((swatch): void => { + it(`${swatch} should always be at least 4.5 : 1 against the background`, (): void => { + expect( + swatch.contrast(neutralForegroundHint(neutralPalette, swatch)), + // retrieveContrast(swatch, neutralForegroundHint_DEPRECATED) + // Because neutralForegroundHint follows the direction patterns of neutralForeground, + // a backgroundColor #777777 is impossible to hit 4.5 against. + ).to.be.gte(swatch.toColorString().toUpperCase() === '#777777' ? 4.48 : 4.5); + expect(swatch.contrast(neutralForegroundHint(neutralPalette, swatch))).to.be.lessThan(5); + }); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts b/packages/web-components/src/color/recipes/neutral-foreground-hint.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-foreground-hint.ts rename to packages/web-components/src/color/recipes/neutral-foreground-hint.ts diff --git a/packages/web-components/src/color/recipes/neutral-foreground.spec.ts b/packages/web-components/src/color/recipes/neutral-foreground.spec.ts new file mode 100644 index 00000000000000..199e85726a704a --- /dev/null +++ b/packages/web-components/src/color/recipes/neutral-foreground.spec.ts @@ -0,0 +1,20 @@ +import { expect } from 'chai'; +import { PaletteRGB } from '../palette'; +import { neutralForeground } from './neutral-foreground'; +import { middleGrey, white } from '../utilities/color-constants'; + +describe('neutralForeground', (): void => { + const neutralPalette = PaletteRGB.create(middleGrey); + + it('should return correct result with default design system values', (): void => { + expect( + neutralForeground(neutralPalette, neutralPalette.get(88)).contrast( + neutralPalette.get(neutralPalette.swatches.length - 1), + ), + ).to.be.gte(14); + }); + + it('should return #FFFFFF with a dark background', (): void => { + expect(neutralForeground(neutralPalette, white).contrast(white)).to.be.gte(14); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-foreground.ts b/packages/web-components/src/color/recipes/neutral-foreground.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-foreground.ts rename to packages/web-components/src/color/recipes/neutral-foreground.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-1.ts b/packages/web-components/src/color/recipes/neutral-layer-1.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-1.ts rename to packages/web-components/src/color/recipes/neutral-layer-1.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-2.ts b/packages/web-components/src/color/recipes/neutral-layer-2.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-2.ts rename to packages/web-components/src/color/recipes/neutral-layer-2.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-3.ts b/packages/web-components/src/color/recipes/neutral-layer-3.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-3.ts rename to packages/web-components/src/color/recipes/neutral-layer-3.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-4.ts b/packages/web-components/src/color/recipes/neutral-layer-4.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-4.ts rename to packages/web-components/src/color/recipes/neutral-layer-4.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts b/packages/web-components/src/color/recipes/neutral-layer-card-container.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-card-container.ts rename to packages/web-components/src/color/recipes/neutral-layer-card-container.ts diff --git a/packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts b/packages/web-components/src/color/recipes/neutral-layer-floating.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-layer-floating.ts rename to packages/web-components/src/color/recipes/neutral-layer-floating.ts diff --git a/packages/web-components/src/color/recipes/neutral-layer.spec.ts b/packages/web-components/src/color/recipes/neutral-layer.spec.ts new file mode 100644 index 00000000000000..7ddc374c40b3e9 --- /dev/null +++ b/packages/web-components/src/color/recipes/neutral-layer.spec.ts @@ -0,0 +1,90 @@ +import { expect } from 'chai'; +import { PaletteRGB } from '../palette'; +import { StandardLuminance } from '../utilities/base-layer-luminance'; +import { middleGrey } from '../utilities/color-constants'; +import { neutralLayerFloating } from './neutral-layer-floating'; +import { neutralLayer1 } from './neutral-layer-1'; +import { neutralLayer2 } from './neutral-layer-2'; +import { neutralLayer3 } from './neutral-layer-3'; +import { neutralLayer4 } from './neutral-layer-4'; +import { SwatchRGB } from '../swatch'; + +const neutralPalette = PaletteRGB.create(middleGrey); + +const enum NeutralPaletteLightModeOffsets { + L1 = 0, + L2 = 10, + L3 = 13, + L4 = 16, +} + +const enum NeutralPaletteDarkModeOffsets { + L1 = 76, + L2 = 79, + L3 = 82, + L4 = 85, +} + +describe('neutralLayer', (): void => { + describe('1', (): void => { + it('should return values from 1 when in light mode', (): void => { + expect(neutralLayer1(neutralPalette, StandardLuminance.LightMode)).to.equal( + neutralPalette.get(NeutralPaletteLightModeOffsets.L1), + ); + }); + it('should return values from 1 when in dark mode', (): void => { + expect(neutralLayer1(neutralPalette, StandardLuminance.DarkMode)).to.equal( + neutralPalette.get(NeutralPaletteDarkModeOffsets.L1), + ); + }); + }); + + describe('2', (): void => { + it('should return values from 2 when in light mode', (): void => { + expect(neutralLayer2(neutralPalette, StandardLuminance.LightMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteLightModeOffsets.L2), + ); + }); + it('should return values from 2 when in dark mode', (): void => { + expect(neutralLayer2(neutralPalette, StandardLuminance.DarkMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteDarkModeOffsets.L2), + ); + }); + }); + + describe('3', (): void => { + it('should return values from 3 when in light mode', (): void => { + expect(neutralLayer3(neutralPalette, StandardLuminance.LightMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteLightModeOffsets.L3), + ); + }); + it('should return values from 3 when in dark mode', (): void => { + expect(neutralLayer3(neutralPalette, StandardLuminance.DarkMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteDarkModeOffsets.L3), + ); + }); + }); + + describe('4', (): void => { + it('should return values from 4 when in light mode', (): void => { + expect(neutralLayer4(neutralPalette, StandardLuminance.LightMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteLightModeOffsets.L4), + ); + }); + it('should return values from 4 when in dark mode', (): void => { + expect(neutralLayer4(neutralPalette, StandardLuminance.DarkMode, 3, 7, 10, 5)).to.equal( + neutralPalette.get(NeutralPaletteDarkModeOffsets.L4), + ); + }); + }); + + describe('neutralLayerFloating', (): void => { + it('should return a color from the neutral palette', (): void => { + expect( + neutralPalette.swatches.includes( + neutralLayerFloating(neutralPalette, StandardLuminance.LightMode, 3) as SwatchRGB, + ), + ).to.be.true; + }); + }); +}); diff --git a/packages/web-components/src/color-vNext/recipes/neutral-stroke.ts b/packages/web-components/src/color/recipes/neutral-stroke.ts similarity index 100% rename from packages/web-components/src/color-vNext/recipes/neutral-stroke.ts rename to packages/web-components/src/color/recipes/neutral-stroke.ts diff --git a/packages/web-components/src/color-vNext/swatch.ts b/packages/web-components/src/color/swatch.ts similarity index 90% rename from packages/web-components/src/color-vNext/swatch.ts rename to packages/web-components/src/color/swatch.ts index 3e761f41a6f7dc..2e688c8d74370e 100644 --- a/packages/web-components/src/color-vNext/swatch.ts +++ b/packages/web-components/src/color/swatch.ts @@ -10,16 +10,21 @@ export interface Swatch extends RelativeLuminance { contrast(target: RelativeLuminance): number; } +/** @public */ export interface SwatchRGB extends Swatch { r: number; g: number; b: number; } +/** @public */ export const SwatchRGB = Object.freeze({ create(r: number, g: number, b: number): SwatchRGB { return new SwatchRGBImpl(r, g, b); }, + from(obj: { r: number; g: number; b: number }): SwatchRGB { + return new SwatchRGBImpl(obj.r, obj.g, obj.b); + }, }); /** diff --git a/packages/web-components/src/color/utilities/base-layer-luminance.ts b/packages/web-components/src/color/utilities/base-layer-luminance.ts new file mode 100644 index 00000000000000..6a60fc26dd1f1d --- /dev/null +++ b/packages/web-components/src/color/utilities/base-layer-luminance.ts @@ -0,0 +1,15 @@ +import { Swatch, SwatchRGB } from '../swatch'; + +export function baseLayerLuminanceSwatch(luminance: number): Swatch { + return SwatchRGB.create(luminance, luminance, luminance); +} + +/** + * Recommended values for light and dark mode for {@link @fluentui/web-components#baseLayerLuminance}. + * + * @public + */ + export enum StandardLuminance { + LightMode = 1, + DarkMode = 0.23, +} diff --git a/packages/web-components/src/color-vNext/utilities/binary-search.ts b/packages/web-components/src/color/utilities/binary-search.ts similarity index 100% rename from packages/web-components/src/color-vNext/utilities/binary-search.ts rename to packages/web-components/src/color/utilities/binary-search.ts diff --git a/packages/web-components/src/color-vNext/utilities/color-constants.ts b/packages/web-components/src/color/utilities/color-constants.ts similarity index 100% rename from packages/web-components/src/color-vNext/utilities/color-constants.ts rename to packages/web-components/src/color/utilities/color-constants.ts diff --git a/packages/web-components/src/color-vNext/utilities/direction-by-is-dark.ts b/packages/web-components/src/color/utilities/direction-by-is-dark.ts similarity index 100% rename from packages/web-components/src/color-vNext/utilities/direction-by-is-dark.ts rename to packages/web-components/src/color/utilities/direction-by-is-dark.ts diff --git a/packages/web-components/src/color-vNext/utilities/is-dark.ts b/packages/web-components/src/color/utilities/is-dark.ts similarity index 100% rename from packages/web-components/src/color-vNext/utilities/is-dark.ts rename to packages/web-components/src/color/utilities/is-dark.ts diff --git a/packages/web-components/src/color-vNext/utilities/relative-luminance.ts b/packages/web-components/src/color/utilities/relative-luminance.ts similarity index 100% rename from packages/web-components/src/color-vNext/utilities/relative-luminance.ts rename to packages/web-components/src/color/utilities/relative-luminance.ts diff --git a/packages/web-components/src/default-palette.ts b/packages/web-components/src/default-palette.ts deleted file mode 100644 index ba340464c54f63..00000000000000 --- a/packages/web-components/src/default-palette.ts +++ /dev/null @@ -1,196 +0,0 @@ -/** - * DO NOT EDIT THIS FILE DIRECTLY - * This file generated by web-components/build/generate-default-palettes.js - */ -export const neutralPalette: string[] = [ - "#FFFFFF", - "#FCFCFC", - "#FAFAFA", - "#F7F7F7", - "#F5F5F5", - "#F2F2F2", - "#EFEFEF", - "#EDEDED", - "#EAEAEA", - "#E8E8E8", - "#E5E5E5", - "#E2E2E2", - "#E0E0E0", - "#DDDDDD", - "#DBDBDB", - "#D8D8D8", - "#D6D6D6", - "#D3D3D3", - "#D0D0D0", - "#CECECE", - "#CBCBCB", - "#C9C9C9", - "#C6C6C6", - "#C3C3C3", - "#C1C1C1", - "#BEBEBE", - "#BCBCBC", - "#B9B9B9", - "#B6B6B6", - "#B4B4B4", - "#B1B1B1", - "#AFAFAF", - "#ACACAC", - "#A9A9A9", - "#A7A7A7", - "#A4A4A4", - "#A2A2A2", - "#9F9F9F", - "#9D9D9D", - "#9A9A9A", - "#979797", - "#959595", - "#929292", - "#909090", - "#8D8D8D", - "#8A8A8A", - "#888888", - "#858585", - "#838383", - "#808080", - "#7D7D7D", - "#7B7B7B", - "#787878", - "#767676", - "#737373", - "#717171", - "#6E6E6E", - "#6B6B6B", - "#696969", - "#666666", - "#646464", - "#616161", - "#5F5F5F", - "#5C5C5C", - "#5A5A5A", - "#575757", - "#545454", - "#525252", - "#4F4F4F", - "#4D4D4D", - "#4A4A4A", - "#484848", - "#454545", - "#424242", - "#404040", - "#3D3D3D", - "#3B3B3B", - "#383838", - "#363636", - "#333333", - "#313131", - "#2E2E2E", - "#2B2B2B", - "#292929", - "#262626", - "#242424", - "#212121", - "#1E1E1E", - "#1B1B1B", - "#181818", - "#151515", - "#121212", - "#101010", - "#000000" -]; -export const accentPalette: string[] = [ - "#FFFFFF", - "#FBFDFE", - "#F6FAFE", - "#F2F8FD", - "#EEF6FC", - "#E9F4FB", - "#E5F1FB", - "#E1EFFA", - "#DCEDF9", - "#D8EAF8", - "#D4E8F8", - "#CFE6F7", - "#CBE4F6", - "#C7E1F6", - "#C2DFF5", - "#BEDDF4", - "#BADAF3", - "#B6D8F3", - "#B1D6F2", - "#ADD4F1", - "#A9D1F0", - "#A4CFF0", - "#A0CDEF", - "#9CCAEE", - "#97C8EE", - "#93C6ED", - "#8FC4EC", - "#8AC1EB", - "#86BFEB", - "#82BDEA", - "#7DBAE9", - "#79B8E8", - "#75B6E8", - "#70B3E7", - "#6CB1E6", - "#68AFE5", - "#63ADE5", - "#5FAAE4", - "#5BA8E3", - "#56A6E3", - "#52A3E2", - "#4EA1E1", - "#499FE0", - "#459DE0", - "#419ADF", - "#3D98DE", - "#3896DD", - "#3493DD", - "#3091DC", - "#2B8FDB", - "#278DDB", - "#238ADA", - "#1E88D9", - "#1A86D8", - "#1683D8", - "#1181D7", - "#0D7FD6", - "#097DD5", - "#047AD5", - "#0078D4", - "#0075CF", - "#0072C9", - "#006FC4", - "#006CBE", - "#0069B9", - "#0066B4", - "#0063AE", - "#0060A9", - "#005CA3", - "#00599E", - "#005699", - "#005393", - "#00508E", - "#004D88", - "#004A83", - "#00477D", - "#004478", - "#004173", - "#003E6D", - "#003B68", - "#003862", - "#00355D", - "#003258", - "#002F52", - "#002B4D", - "#002847", - "#002542", - "#00223C", - "#001F36", - "#001B30", - "#00182B", - "#001525", - "#00121F", - "#000000" -]; diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts index d73cfce8bb0f22..4cb62dc14f3a42 100644 --- a/packages/web-components/src/design-system-provider/index.ts +++ b/packages/web-components/src/design-system-provider/index.ts @@ -8,8 +8,8 @@ import { FoundationElement, } from '@microsoft/fast-foundation'; import { Direction, SystemColors } from '@microsoft/fast-web-utilities'; -import { Palette } from '../color-vNext/palette'; -import { Swatch, SwatchRGB } from '../color-vNext/swatch'; +import { Palette } from '../color/palette'; +import { Swatch, SwatchRGB } from '../color/swatch'; import { accentFillActiveDelta, accentFillFocusDelta, diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts index 49422a36e2cb76..30ce40796acff4 100644 --- a/packages/web-components/src/design-tokens.ts +++ b/packages/web-components/src/design-tokens.ts @@ -1,33 +1,33 @@ import { DesignToken } from '@microsoft/fast-foundation'; import { Direction } from '@microsoft/fast-web-utilities'; -import { Palette, PaletteRGB } from './color-vNext/palette'; -import { Swatch } from './color-vNext/swatch'; -import { accentFill as accentFillAlgorithm } from './color-vNext/recipes/accent-fill'; -import { accentForeground as accentForegroundAlgorithm } from './color-vNext/recipes/accent-foreground'; -import { foregroundOnAccent as foregroundOnAccentAlgorithm } from './color-vNext/recipes/foreground-on-accent'; -import { neutralFillInverse as neutralFillInverseAlgorithm } from './color-vNext/recipes/neutral-fill-inverse'; -import { neutralDivider as neutralDividerAlgorithm } from './color-vNext/recipes/neutral-divider'; -import { neutralFill as neutralFillAlgorithm } from './color-vNext/recipes/neutral-fill'; -import { neutralFillInput as neutralFillInputAlgorithm } from './color-vNext/recipes/neutral-fill-input'; -import { neutralFillLayer as neutralFillLayerAlgorithm } from './color-vNext/recipes/neutral-fill-layer'; -import { neutralFillStealth as neutralFillStealthAlgorithm } from './color-vNext/recipes/neutral-fill-stealth'; -import { neutralFillContrast as neutralFillContrastAlgorithm } from './color-vNext/recipes/neutral-fill-contrast'; +import { Palette, PaletteRGB } from './color/palette'; +import { Swatch } from './color/swatch'; +import { accentFill as accentFillAlgorithm } from './color/recipes/accent-fill'; +import { accentForeground as accentForegroundAlgorithm } from './color/recipes/accent-foreground'; +import { foregroundOnAccent as foregroundOnAccentAlgorithm } from './color/recipes/foreground-on-accent'; +import { neutralFillInverse as neutralFillInverseAlgorithm } from './color/recipes/neutral-fill-inverse'; +import { neutralDivider as neutralDividerAlgorithm } from './color/recipes/neutral-divider'; +import { neutralFill as neutralFillAlgorithm } from './color/recipes/neutral-fill'; +import { neutralFillInput as neutralFillInputAlgorithm } from './color/recipes/neutral-fill-input'; +import { neutralFillLayer as neutralFillLayerAlgorithm } from './color/recipes/neutral-fill-layer'; +import { neutralFillStealth as neutralFillStealthAlgorithm } from './color/recipes/neutral-fill-stealth'; +import { neutralFillContrast as neutralFillContrastAlgorithm } from './color/recipes/neutral-fill-contrast'; import { focusStrokeInner as focusStrokeInnerAlgorithm, focusStrokeOuter as focusStrokeOuterAlgorithm, -} from './color-vNext/recipes/focus-stroke'; -import { neutralForeground as neutralForegroundAlgorithm } from './color-vNext/recipes/neutral-foreground'; -import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color-vNext/recipes/neutral-foreground-hint'; -import { neutralLayerCardContainer as neutralLayerCardContainerAlgorithm } from './color-vNext/recipes/neutral-layer-card-container'; -import { neutralLayerFloating as neutralLayerFloatingAlgorithm } from './color-vNext/recipes/neutral-layer-floating'; -import { neutralLayer1 as neutralLayer1Algorithm } from './color-vNext/recipes/neutral-layer-1'; -import { neutralLayer2 as neutralLayer2Algorithm } from './color-vNext/recipes/neutral-layer-2'; -import { neutralLayer3 as neutralLayer3Algorithm } from './color-vNext/recipes/neutral-layer-3'; -import { neutralLayer4 as neutralLayer4Algorithm } from './color-vNext/recipes/neutral-layer-4'; -import { neutralStroke as neutralStrokeAlgorithm } from './color-vNext/recipes/neutral-stroke'; -import { accentBase, middleGrey } from './color-vNext/utilities/color-constants'; -import { StandardLuminance } from './color'; -import { InteractiveSwatchSet } from './color-vNext/recipe'; +} from './color/recipes/focus-stroke'; +import { neutralForeground as neutralForegroundAlgorithm } from './color/recipes/neutral-foreground'; +import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color/recipes/neutral-foreground-hint'; +import { neutralLayerCardContainer as neutralLayerCardContainerAlgorithm } from './color/recipes/neutral-layer-card-container'; +import { neutralLayerFloating as neutralLayerFloatingAlgorithm } from './color/recipes/neutral-layer-floating'; +import { neutralLayer1 as neutralLayer1Algorithm } from './color/recipes/neutral-layer-1'; +import { neutralLayer2 as neutralLayer2Algorithm } from './color/recipes/neutral-layer-2'; +import { neutralLayer3 as neutralLayer3Algorithm } from './color/recipes/neutral-layer-3'; +import { neutralLayer4 as neutralLayer4Algorithm } from './color/recipes/neutral-layer-4'; +import { neutralStroke as neutralStrokeAlgorithm } from './color/recipes/neutral-stroke'; +import { accentBase, middleGrey } from './color/utilities/color-constants'; +import { StandardLuminance } from './color/utilities/base-layer-luminance'; +import { InteractiveSwatchSet } from './color/recipe'; /** @public */ export interface Recipe { diff --git a/packages/web-components/src/fluent-design-system.ts b/packages/web-components/src/fluent-design-system.ts deleted file mode 100644 index f0c5dd17ff09e2..00000000000000 --- a/packages/web-components/src/fluent-design-system.ts +++ /dev/null @@ -1,492 +0,0 @@ -import { Direction } from '@microsoft/fast-web-utilities'; -import { accentPalette as defaultAccentPalette, neutralPalette as defaultNeutralPalette } from './default-palette'; - -export type DesignSystemResolver = (d: Y) => T; - -export type DensityOffset = -3 | -2 | -1 | 0 | 1 | 2 | 3; - -/** - * Defines the properties in the Fluent Design System - * @public - */ -export interface DesignSystem { - /** - * Type-ramp font-size and line-height values - */ - typeRampMinus2FontSize: string; - typeRampMinus2LineHeight: string; - typeRampMinus1FontSize: string; - typeRampMinus1LineHeight: string; - typeRampBaseFontSize: string; - typeRampBaseLineHeight: string; - typeRampPlus1FontSize: string; - typeRampPlus1LineHeight: string; - typeRampPlus2FontSize: string; - typeRampPlus2LineHeight: string; - typeRampPlus3FontSize: string; - typeRampPlus3LineHeight: string; - typeRampPlus4FontSize: string; - typeRampPlus4LineHeight: string; - typeRampPlus5FontSize: string; - typeRampPlus5LineHeight: string; - typeRampPlus6FontSize: string; - typeRampPlus6LineHeight: string; - - /** - * The background color of the current context. - * May be used to draw an actual background or not. Color recipes evaluated within this context will use this as their basis. - */ - backgroundColor: string; - - /** - * The neutral color, which the neutral palette is based on. - * Keep this value in sync with neutralPalette. - */ - neutralBaseColor: string; - - /** - * The accent color, which the accent palette is based on. - * Keep this value in sync with accentPalette. - */ - accentBaseColor: string; - - /** - * An array of colors in a ramp from light to dark, used to look up values for neutral color recipes. - * Keep this value in sync with neutralBaseColor. - * Generate by calling createColorPalette. - */ - neutralPalette: string[]; - - /** - * An array of colors in a ramp from light to dark, used to lookup values for accent color recipes. - * Keep this value in sync with accentBaseColor. - * Generate by calling createColorPalette. - */ - accentPalette: string[]; - - /** - * The density offset, used with designUnit to calculate height and spacing. - */ - density: number; - - /** - * The grid-unit that UI dimensions are derived from in pixels. - */ - designUnit: number; - - /** - * The primary document direction. - */ - direction: Direction; - - /** - * The number of designUnits used for component height at the base density. - */ - baseHeightMultiplier: number; - - /** - * The number of designUnits used for horizontal spacing at the base density. - */ - baseHorizontalSpacingMultiplier: number; - - /** - * The corner radius applied to controls. - */ - cornerRadius: number; - - /** - * The corner radius applied to elevated surfaces or controls. - */ - elevatedCornerRadius?: number; - - /** - * The width of the standard outline applied to outline components in pixels. - */ - outlineWidth: number; - - /** - * The width of the standard focus outline in pixels. - */ - focusOutlineWidth: number; - - /** - * The opacity of a disabled control. - */ - disabledOpacity: number; - - /** - * Color swatch deltas for the accent-fill recipe. - */ - accentFillRestDelta: number; - accentFillHoverDelta: number; - accentFillActiveDelta: number; - accentFillFocusDelta: number; - accentFillSelectedDelta: number; - - /** - * Color swatch deltas for the accent-foreground recipe. - */ - accentForegroundRestDelta: number; - accentForegroundHoverDelta: number; - accentForegroundActiveDelta: number; - accentForegroundFocusDelta: number; - - /* - * Color swatch deltas for the neutral-fill recipe. - */ - neutralFillRestDelta: number; - neutralFillHoverDelta: number; - neutralFillActiveDelta: number; - neutralFillFocusDelta: number; - neutralFillSelectedDelta: number; - - /** - * Color swatch deltas for the neutral-fill-input recipe. - */ - neutralFillInputRestDelta: number; - neutralFillInputHoverDelta: number; - neutralFillInputActiveDelta: number; - neutralFillInputFocusDelta: number; - neutralFillInputSelectedDelta: number; - - /** - * Color swatch deltas for the neutral-fill-stealth recipe. - */ - neutralFillStealthRestDelta: number; - neutralFillStealthHoverDelta: number; - neutralFillStealthActiveDelta: number; - neutralFillStealthFocusDelta: number; - neutralFillStealthSelectedDelta: number; - - /** - * Configuration for the neutral-fill-toggle recipe. - */ - neutralFillToggleHoverDelta: number; - neutralFillToggleActiveDelta: number; - neutralFillToggleFocusDelta: number; - - /** - * The luminance value to base layer recipes on. - * Sets the luminance value for the L1 layer recipe in a manner that can adjust to variable contrast. - * - * Currently defaults to -1 to turn the feature off and use backgroundColor for layer colors instead. - */ - baseLayerLuminance: number; // 0...1 - - /** - * Color swatch deltas for the neutral-fill-card recipe. - */ - neutralFillCardDelta: number; - - /** - * Color swatch delta for neutral-foreground recipe. - */ - neutralForegroundHoverDelta: number; - neutralForegroundActiveDelta: number; - neutralForegroundFocusDelta: number; - - /** - * Color swatch delta for the neutral-divider recipe. - */ - neutralDividerRestDelta: number; - - /** - * Color swatch deltas for the neutral-outline recipe. - */ - neutralOutlineRestDelta: number; - neutralOutlineHoverDelta: number; - neutralOutlineActiveDelta: number; - neutralOutlineFocusDelta: number; - - /* - * Color swatch deltas for the neutral-contrast-fill recipe. - */ - neutralContrastFillRestDelta: number; - neutralContrastFillHoverDelta: number; - neutralContrastFillActiveDelta: number; - neutralContrastFillFocusDelta: number; -} - -/** - * The default values for {@link DesignSystem} - * @public - */ -export const DesignSystemDefaults: DesignSystem = { - typeRampMinus2FontSize: '10px', - typeRampMinus2LineHeight: '16px', - typeRampMinus1FontSize: '12px', - typeRampMinus1LineHeight: '16px', - typeRampBaseFontSize: '14px', - typeRampBaseLineHeight: '20px', - typeRampPlus1FontSize: '16px', - typeRampPlus1LineHeight: '24px', - typeRampPlus2FontSize: '20px', - typeRampPlus2LineHeight: '28px', - typeRampPlus3FontSize: '28px', - typeRampPlus3LineHeight: '36px', - typeRampPlus4FontSize: '34px', - typeRampPlus4LineHeight: '44px', - typeRampPlus5FontSize: '46px', - typeRampPlus5LineHeight: '56px', - typeRampPlus6FontSize: '60px', - typeRampPlus6LineHeight: '72px', - - accentBaseColor: '#0078D4', - accentPalette: defaultAccentPalette, - backgroundColor: '#FFFFFF', - baseHeightMultiplier: 8, - baseHorizontalSpacingMultiplier: 3, - cornerRadius: 2, - elevatedCornerRadius: 4, - density: 0, - designUnit: 4, - direction: Direction.ltr, - disabledOpacity: 0.3, - focusOutlineWidth: 2, - neutralBaseColor: '#808080', - neutralPalette: defaultNeutralPalette, - outlineWidth: 1, - - /** - * Recipe Deltas - */ - accentFillRestDelta: 0, - accentFillHoverDelta: 4, - accentFillActiveDelta: -5, - accentFillFocusDelta: 0, - accentFillSelectedDelta: 12, - - accentForegroundRestDelta: 0, - accentForegroundHoverDelta: 6, - accentForegroundActiveDelta: -4, - accentForegroundFocusDelta: 0, - - neutralFillRestDelta: 7, - neutralFillHoverDelta: 10, - neutralFillActiveDelta: 5, - neutralFillFocusDelta: 0, - neutralFillSelectedDelta: 7, - - neutralFillInputRestDelta: 0, - neutralFillInputHoverDelta: 0, - neutralFillInputActiveDelta: 0, - neutralFillInputFocusDelta: 0, - neutralFillInputSelectedDelta: 0, - - neutralFillStealthRestDelta: 0, - neutralFillStealthHoverDelta: 5, - neutralFillStealthActiveDelta: 3, - neutralFillStealthFocusDelta: 0, - neutralFillStealthSelectedDelta: 7, - - neutralFillToggleHoverDelta: 8, - neutralFillToggleActiveDelta: -5, - neutralFillToggleFocusDelta: 0, - - baseLayerLuminance: -1, - neutralFillCardDelta: 3, - - neutralForegroundHoverDelta: 0, - neutralForegroundActiveDelta: 0, - neutralForegroundFocusDelta: 0, - - neutralDividerRestDelta: 8, - - neutralOutlineRestDelta: 25, - neutralOutlineHoverDelta: 40, - neutralOutlineActiveDelta: 16, - neutralOutlineFocusDelta: 25, - - neutralContrastFillRestDelta: 0, - neutralContrastFillHoverDelta: -3, - neutralContrastFillActiveDelta: 7, - neutralContrastFillFocusDelta: 0, -}; - -/** - * Returns the argument if basic, otherwise calls the DesignSystemResolver function. - * - * @param arg A value or a DesignSystemResolver function - * @param designSystem The design system config. - */ -export function evaluateDesignSystemResolver(arg: T | DesignSystemResolver, designSystem: DesignSystem): T { - return typeof arg === 'function' ? (arg as DesignSystemResolver)(designSystem) : arg; -} - -/** - * Safely retrieves the value from a key of the DesignSystem. - */ -export function getDesignSystemValue(key: K): (designSystem?: T) => T[K] { - return (designSystem?: T): T[K] => { - return designSystem && designSystem[key] !== undefined ? designSystem[key] : (DesignSystemDefaults as T)[key]; - }; -} - -/** - * Retrieve the backgroundColor when invoked with a DesignSystem - */ -export const backgroundColor: DesignSystemResolver = getDesignSystemValue('backgroundColor'); - -/** - * Retrieve the neutralBaseColor when invoked with a DesignSystem - */ -export const neutralBaseColor: DesignSystemResolver = getDesignSystemValue('neutralBaseColor'); - -/** - * Retrieve the accentBaseColor when invoked with a DesignSystem - */ -export const accentBaseColor: DesignSystemResolver = getDesignSystemValue('accentBaseColor'); - -/** - * Retrieve the cornerRadius when invoked with a DesignSystem - */ -export const cornerRadius: DesignSystemResolver = getDesignSystemValue('cornerRadius'); - -/** - * Retrieve the neutral palette from the design system - */ -export const neutralPalette: DesignSystemResolver = getDesignSystemValue('neutralPalette'); - -/** - * Retrieve the accent palette from the design system - */ -export const accentPalette: DesignSystemResolver = getDesignSystemValue('accentPalette'); - -/** - * Retrieve the designUnit from the design system - */ -export const designUnit: DesignSystemResolver = getDesignSystemValue('designUnit'); - -/** - * Retrieve the baseHeightMultiplier from the design system - */ -export const baseHeightMultiplier: DesignSystemResolver = getDesignSystemValue('baseHeightMultiplier'); - -/** - * Retrieve the baseHorizontalSpacingMultiplier from the design system - */ -export const baseHorizontalSpacingMultiplier: DesignSystemResolver = getDesignSystemValue( - 'baseHorizontalSpacingMultiplier', -); - -/** - * Retrieve the outlineWidth from the design system - */ -export const outlineWidth: DesignSystemResolver = getDesignSystemValue('outlineWidth'); - -/** - * Retrieve the focusOutlineWidth from the design system - */ -export const focusOutlineWidth: DesignSystemResolver = getDesignSystemValue('focusOutlineWidth'); -/** - * Retrieve the disabledOpacity from the design system - */ -export const disabledOpacity: DesignSystemResolver = getDesignSystemValue('disabledOpacity'); - -/** - * Retrieve the disabledOpacity from the design system - */ -export const direction: DesignSystemResolver = getDesignSystemValue('direction'); - -export const accentFillRestDelta: DesignSystemResolver = getDesignSystemValue('accentFillRestDelta'); -export const accentFillHoverDelta: DesignSystemResolver = getDesignSystemValue('accentFillHoverDelta'); -export const accentFillActiveDelta: DesignSystemResolver = getDesignSystemValue('accentFillActiveDelta'); -export const accentFillFocusDelta: DesignSystemResolver = getDesignSystemValue('accentFillFocusDelta'); -export const accentFillSelectedDelta: DesignSystemResolver = getDesignSystemValue('accentFillSelectedDelta'); - -export const accentForegroundRestDelta: DesignSystemResolver = getDesignSystemValue( - 'accentForegroundRestDelta', -); -export const accentForegroundHoverDelta: DesignSystemResolver = getDesignSystemValue( - 'accentForegroundHoverDelta', -); -export const accentForegroundActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'accentForegroundActiveDelta', -); -export const accentForegroundFocusDelta: DesignSystemResolver = getDesignSystemValue( - 'accentForegroundFocusDelta', -); - -export const neutralFillRestDelta: DesignSystemResolver = getDesignSystemValue('neutralFillRestDelta'); -export const neutralFillHoverDelta: DesignSystemResolver = getDesignSystemValue('neutralFillHoverDelta'); -export const neutralFillActiveDelta: DesignSystemResolver = getDesignSystemValue('neutralFillActiveDelta'); -export const neutralFillFocusDelta: DesignSystemResolver = getDesignSystemValue('neutralFillFocusDelta'); -export const neutralFillSelectedDelta: DesignSystemResolver = getDesignSystemValue('neutralFillSelectedDelta'); - -export const neutralFillInputRestDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillInputRestDelta', -); -export const neutralFillInputHoverDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillInputHoverDelta', -); -export const neutralFillInputActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillInputActiveDelta', -); -export const neutralFillInputFocusDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillInputFocusDelta', -); -export const neutralFillInputSelectedDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillInputSelectedDelta', -); - -export const neutralFillStealthRestDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillStealthRestDelta', -); -export const neutralFillStealthHoverDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillStealthHoverDelta', -); -export const neutralFillStealthActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillStealthActiveDelta', -); -export const neutralFillStealthFocusDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillStealthFocusDelta', -); -export const neutralFillStealthSelectedDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillStealthSelectedDelta', -); - -export const neutralFillToggleHoverDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillToggleHoverDelta', -); -export const neutralFillToggleActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillToggleActiveDelta', -); -export const neutralFillToggleFocusDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralFillToggleFocusDelta', -); - -export const baseLayerLuminance: DesignSystemResolver = getDesignSystemValue('baseLayerLuminance'); -export const neutralFillCardDelta: DesignSystemResolver = getDesignSystemValue('neutralFillCardDelta'); - -export const neutralForegroundHoverDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralForegroundHoverDelta', -); -export const neutralForegroundActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralForegroundActiveDelta', -); -export const neutralForegroundFocusDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralForegroundFocusDelta', -); - -export const neutralDividerRestDelta: DesignSystemResolver = getDesignSystemValue('neutralDividerRestDelta'); - -export const neutralOutlineRestDelta: DesignSystemResolver = getDesignSystemValue('neutralOutlineRestDelta'); -export const neutralOutlineHoverDelta: DesignSystemResolver = getDesignSystemValue('neutralOutlineHoverDelta'); -export const neutralOutlineActiveDelta: DesignSystemResolver = getDesignSystemValue( - 'neutralOutlineActiveDelta', -); - -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/index.ts b/packages/web-components/src/index.ts index 2de91fd11b0aba..23aa3b216035de 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -40,9 +40,10 @@ export * from './tree-item/'; export * from './tree-view/'; // export styles and utils +export * from "./design-tokens"; export * from './styles'; -export * from './color'; -export { Palette, PaletteRGB } from "./color-vNext/palette"; -export { InteractiveSwatchSet } from "./color-vNext/recipe"; -export { Swatch, SwatchRGB } from "./color-vNext/swatch"; -export { DesignSystem, DesignSystemDefaults } from './fluent-design-system'; +export { Palette, PaletteRGB } from "./color/palette"; +export { InteractiveSwatchSet } from "./color/recipe"; +export { Swatch, SwatchRGB } from "./color/swatch"; +export { isDark } from "./color/utilities/is-dark"; +export { StandardLuminance } from "./color/utilities/base-layer-luminance"; diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts index 95ce67825b66cb..60064f421fbea5 100644 --- a/packages/web-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/src/tree-item/tree-item.styles.ts @@ -30,7 +30,7 @@ import { typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens'; -import { Swatch } from '../color-vNext/swatch'; +import { Swatch } from '../color/swatch'; const ltr = css` .expand-collapse-glyph {