From a8ae140e2f2ee8d45dfdab0bd22a42e8ab525363 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Mon, 21 Jun 2021 15:10:26 -0700 Subject: [PATCH] (web-components) fix card color (#18631) Updated Card color handling for new design tokens Updated fill-color handling in design-system-provider Added neutral-fill-layer-rest-delta to design-system-provider Updated use of fluent-design-system-provider in samples Cleaned up styles and sorted imports --- ...-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json | 7 + packages/web-components/docs/api-report.md | 561 +++++--------- .../web-components/src/badge/badge.styles.ts | 10 +- .../src/button/button.styles.ts | 6 +- .../web-components/src/card/card.styles.ts | 3 +- .../src/card/fixtures/card.html | 25 +- packages/web-components/src/card/index.ts | 112 +-- .../src/checkbox/checkbox.styles.ts | 22 +- .../src/combobox/combobox.styles.ts | 2 +- .../web-components/src/custom-elements.ts | 4 +- .../src/design-system-provider/index.ts | 71 +- .../src/flipper/flipper.styles.ts | 10 +- packages/web-components/src/index.ts | 3 + .../listbox-option/listbox-option.styles.ts | 24 +- .../src/listbox/listbox.styles.ts | 8 +- .../src/menu-item/menu-item.styles.ts | 18 +- .../src/number-field/number-field.styles.ts | 22 +- .../progress-ring/progress-ring.styles.ts | 2 +- .../src/progress/progress/progress.styles.ts | 2 +- .../web-components/src/radio/radio.styles.ts | 16 +- .../src/select/select.styles.ts | 30 +- .../src/skeleton/fixtures/base.html | 2 +- .../src/slider-label/slider-label.styles.ts | 2 +- .../src/slider/fixtures/slider.html | 4 +- .../src/slider/slider.styles.ts | 10 +- .../web-components/src/styles/behaviors.ts | 682 ------------------ packages/web-components/src/styles/index.ts | 1 - .../src/styles/patterns/button.ts | 46 +- .../src/styles/patterns/input.ts | 5 +- .../src/switch/switch.styles.ts | 24 +- .../src/tabs/tab-panel/tab-panel.styles.ts | 2 +- .../web-components/src/tabs/tab/tab.styles.ts | 12 +- .../web-components/src/tabs/tabs.styles.ts | 6 +- .../src/text-area/text-area.styles.ts | 12 +- .../src/text-field/text-field.styles.ts | 18 +- .../src/tooltip/tooltip.styles.ts | 6 +- 36 files changed, 483 insertions(+), 1307 deletions(-) create mode 100644 change/@fluentui-web-components-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json delete mode 100644 packages/web-components/src/styles/behaviors.ts diff --git a/change/@fluentui-web-components-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json b/change/@fluentui-web-components-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json new file mode 100644 index 00000000000000..ff8b4c00dd2d8a --- /dev/null +++ b/change/@fluentui-web-components-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Updated Card color handling for new design tokens Updated fill-color handling in design-system-provider Added neutral-fill-layer-rest-delta to design-system-provider Updated use of fluent-design-system-provider in samples Cleaned up styles and sorted imports", + "packageName": "@fluentui/web-components", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 68d4408498b05a..4c88cfc4847af2 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -13,21 +13,21 @@ import { Behavior } from '@microsoft/fast-element'; import { Breadcrumb } 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 { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation'; import { DataGrid } from '@microsoft/fast-foundation'; import { DataGridCell } from '@microsoft/fast-foundation'; import { DataGridRow } from '@microsoft/fast-foundation'; -import { DesignSystemProvider } 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 { FlipperOptions } from '@microsoft/fast-foundation'; +import { FoundationElement } from '@microsoft/fast-foundation'; import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; import { Listbox } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; @@ -57,7 +57,7 @@ import { TreeView } from '@microsoft/fast-foundation'; // Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export const AccentButtonStyles: ElementStyles; +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 @@ -72,20 +72,11 @@ export const accentFill: SwatchFamilyResolver; // @internal (undocumented) export const accentFillActive: SwatchRecipe; -// @public -export const accentFillActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillHoverBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "accentFillLarge" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -96,52 +87,31 @@ export const accentFillLarge: SwatchFamilyResolver; // @internal (undocumented) export const accentFillLargeActive: SwatchRecipe; -// @public -export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentFillSelectedBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "accentForeground" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -152,9 +122,6 @@ export const accentForeground: SwatchFamilyResolver; // @internal (undocumented) export const accentForegroundActive: SwatchRecipe; -// @public -export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "accentForegroundCut" should be prefixed with an underscore because the declaration is marked as @internal // // @internal @@ -165,20 +132,11 @@ export const accentForegroundCut: SwatchRecipe; // @internal export const accentForegroundCutLarge: SwatchRecipe; -// @public -export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "accentForegroundLarge" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -189,36 +147,21 @@ export const accentForegroundLarge: SwatchFamilyResolver; // @internal (undocumented) export const accentForegroundLargeActive: SwatchRecipe; -// @public -export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const accentForegroundRestBehavior: CSSCustomPropertyBehavior; - // @public export const accordionItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -269,7 +212,7 @@ export const badgeStyles: (context: any, definition: any) => import("@microsoft/ // 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) => ElementStyles; +export const baseButtonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export const breadcrumbItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -296,8 +239,18 @@ export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' // @public export const buttonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +// @public (undocumented) +export class Card extends Card_2 { + cardFillColor: string; + // (undocumented) + connectedCallback(): void; + // @internal (undocumented) + handleChange(source: any, propertyName: string): void; + neutralBaseColor: string; + } + // @public -export const CardStyles: import("@microsoft/fast-element").ElementStyles; +export const cardStyles: import("@microsoft/fast-element").ElementStyles; // @public export const checkboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -461,6 +414,72 @@ export interface DesignSystem { // @public export const DesignSystemDefaults: DesignSystem; +// @public +export class DesignSystemProvider extends FoundationElement { + constructor(); + accentFillActiveDelta: number; + accentFillFocusDelta: number; + accentFillHoverDelta: number; + accentFillRestDelta: number; + accentForegroundActiveDelta: number; + accentForegroundFocusDelta: number; + accentForegroundHoverDelta: number; + accentForegroundRestDelta: number; + accentPalette: Palette; + baseHeightMultiplier: number; + baseHorizontalSpacingMultiplier: number; + baseLayerLuminance: number; + controlCornerRadius: number; + density: number; + designUnit: number; + direction: Direction; + disabledOpacity: number; + fillColor: Swatch; + focusStrokeWidth: number; + neutralFillActiveDelta: number; + neutralFillFocusDelta: number; + neutralFillHoverDelta: number; + neutralFillInputActiveDelta: number; + neutralFillInputFocusDelta: number; + neutralFillInputHoverDelta: number; + neutralFillInputRestDelta: number; + neutralFillLayerRestDelta: number; + neutralFillRestDelta: number; + neutralFillStealthActiveDelta: number; + neutralFillStealthFocusDelta: number; + neutralFillStealthHoverDelta: number; + neutralFillStealthRestDelta: number; + neutralFillStrongActiveDelta: number; + neutralFillStrongFocusDelta: number; + neutralFillStrongHoverDelta: number; + neutralPalette: Palette; + neutralStrokeActiveDelta: number; + neutralStrokeDividerRestDelta: number; + neutralStrokeFocusDelta: number; + neutralStrokeHoverDelta: number; + neutralStrokeRestDelta: number; + noPaint: boolean; + strokeWidth: number; + typeRampBaseFontSize: string; + typeRampBaseLineHeight: string; + typeRampMinus1FontSize: string; + typeRampMinus1LineHeight: string; + typeRampMinus2FontSize: string; + typeRampMinus2LineHeight: 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; +} + // @public export const dialogStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -487,7 +506,7 @@ export const elevation: string; // 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) => ElementStyles; +export const fillStateStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export const flipperStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -583,13 +602,15 @@ export const fluentButton: (overrideDefinition?: import("@microsoft/fast-foundat }, typeof Button>; // @public -export class FluentCard extends FluentDesignSystemProvider { - cardBackgroundColor: string; - // (undocumented) - connectedCallback(): void; - // @internal (undocumented) - handleChange(source: DesignSystem, name: string): void; -} +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>; // @public export const fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -631,163 +652,15 @@ export const fluentDataGridRow: (overrideDefinition?: import("@microsoft/fast-fo }, typeof DataGridRow>; // @public -export type FluentDesignSystem = Omit; - -// @public -export class FluentDesignSystemProvider extends DesignSystemProvider implements Omit { - // (undocumented) - accentBaseColor: string; - // (undocumented) - protected accentBaseColorChanged(oldValue: string, newValue: string): void; - // (undocumented) - accentFillActiveDelta: number; - // (undocumented) - accentFillFocusDelta: number; - // (undocumented) - accentFillHoverDelta: number; - // (undocumented) - accentFillRestDelta: number; - // (undocumented) - accentFillSelectedDelta: number; - // (undocumented) - accentForegroundActiveDelta: number; - // (undocumented) - accentForegroundFocusDelta: number; - // (undocumented) - accentForegroundHoverDelta: number; - // (undocumented) - accentForegroundRestDelta: number; - // (undocumented) - accentPalette: string[]; - backgroundColor: string; - // (undocumented) - protected backgroundColorChanged(): void; - // (undocumented) - baseHeightMultiplier: number; - // (undocumented) - baseHorizontalSpacingMultiplier: number; - // (undocumented) - baseLayerLuminance: number; - // (undocumented) - cornerRadius: number; - // Warning: (ae-forgotten-export) The symbol "DensityOffset" needs to be exported by the entry point index.d.ts - // - // (undocumented) - density: DensityOffset; - // (undocumented) - designUnit: number; - // (undocumented) - direction: Direction; - // (undocumented) - disabledOpacity: number; - // (undocumented) - elevatedCornerRadius: number; - // (undocumented) - focusOutlineWidth: number; - // (undocumented) - neutralBaseColor: string; - // (undocumented) - protected neutralBaseColorChanged(oldValue: string, newValue: string): void; - neutralContrastFillActiveDelta: number; - neutralContrastFillFocusDelta: number; - neutralContrastFillHoverDelta: number; - neutralContrastFillRestDelta: number; - // (undocumented) - neutralDividerRestDelta: number; - // (undocumented) - neutralFillActiveDelta: number; - // (undocumented) - neutralFillCardDelta: number; - // (undocumented) - neutralFillFocusDelta: number; - // (undocumented) - neutralFillHoverDelta: number; - // (undocumented) - neutralFillInputActiveDelta: number; - // (undocumented) - neutralFillInputFocusDelta: number; - // (undocumented) - neutralFillInputHoverDelta: number; - // (undocumented) - neutralFillInputRestDelta: number; - // (undocumented) - neutralFillInputSelectedDelta: number; - // (undocumented) - neutralFillRestDelta: number; - // (undocumented) - neutralFillSelectedDelta: number; - // (undocumented) - neutralFillStealthActiveDelta: number; - // (undocumented) - neutralFillStealthFocusDelta: number; - // (undocumented) - neutralFillStealthHoverDelta: number; - // (undocumented) - neutralFillStealthRestDelta: number; - // (undocumented) - neutralFillStealthSelectedDelta: number; - // (undocumented) - neutralFillToggleActiveDelta: number; - // (undocumented) - neutralFillToggleFocusDelta: number; - // (undocumented) - neutralFillToggleHoverDelta: number; - // (undocumented) - neutralForegroundActiveDelta: number; - // (undocumented) - neutralForegroundFocusDelta: number; - // (undocumented) - neutralForegroundHoverDelta: number; - // (undocumented) - neutralOutlineActiveDelta: number; - // (undocumented) - neutralOutlineFocusDelta: number; - // (undocumented) - neutralOutlineHoverDelta: number; - // (undocumented) - neutralOutlineRestDelta: number; - // (undocumented) - neutralPalette: string[]; - noPaint: boolean; - // (undocumented) - outlineWidth: number; - // (undocumented) - typeRampBaseFontSize: string; - // (undocumented) - typeRampBaseLineHeight: string; - // (undocumented) - typeRampMinus1FontSize: string; - // (undocumented) - typeRampMinus1LineHeight: string; - // (undocumented) - 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 fluentDesignSystemProvider: (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 DesignSystemProvider>; // @public export const fluentDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ @@ -1029,13 +902,15 @@ export class HorizontalScroll extends HorizontalScroll_2 { // Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export const HypertextStyles: ElementStyles; - -// @public -export const inlineEndBehavior: CSSCustomPropertyBehavior; +export const HypertextStyles: import("@microsoft/fast-element").ElementStyles; -// @public -export const inlineStartBehavior: CSSCustomPropertyBehavior; +// @public (undocumented) +export interface InteractiveSwatchSet { + active: Swatch; + focus: Swatch; + hover: Swatch; + rest: Swatch; +} // @public (undocumented) export function isDarkMode(designSystem: DesignSystem): boolean; @@ -1043,7 +918,7 @@ export function isDarkMode(designSystem: DesignSystem): boolean; // 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: ElementStyles; +export const LightweightButtonStyles: import("@microsoft/fast-element").ElementStyles; // @public export const listboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; @@ -1064,39 +939,21 @@ export const neutralContrastFill: SwatchFamilyResolver; // @internal (undocumented) export const neutralContrastFillActive: SwatchRecipe; -// @public -export const neutralContrastFillActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralContrastFillFocusBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralContrastFillHover" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const neutralContrastFillHover: SwatchRecipe; -// @public -export const neutralContrastFillHoverBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralContrastFillRest" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const neutralContrastFillRest: SwatchRecipe; -// @public -export const neutralContrastFillRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralContrastForegroundRestBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralDividerRest" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) export const neutralDividerRest: SwatchRecipe; -// @public -export const neutralDividerRestBehavior: CSSCustomPropertyBehavior; - // 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 // @@ -1108,34 +965,22 @@ export const neutralFill: ColorRecipe; // @internal (undocumented) export const neutralFillActive: SwatchRecipe; -// @public -export const neutralFillActiveBehavior: CSSCustomPropertyBehavior; - // 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; +export function neutralFillCard(designSystem: DesignSystem): Swatch_2; // 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 -export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillHoverBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralFillInput" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -1146,28 +991,16 @@ export const neutralFillInput: ColorRecipe; // @internal (undocumented) export const neutralFillInputActive: SwatchRecipe; -// @public -export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralFillInputSelected" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -1178,17 +1011,11 @@ export const neutralFillInputSelected: SwatchRecipe; // @internal (undocumented) export const neutralFillRest: SwatchRecipe; -// @public -export const neutralFillRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralFillStealth" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -1197,37 +1024,22 @@ export const neutralFillStealth: ColorRecipe; // 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 -export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior; +export const neutralFillStealthActive: ColorRecipe; // 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 -export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior; +export const neutralFillStealthHover: ColorRecipe; // 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 -export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior; +export const neutralFillStealthRest: ColorRecipe; // 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 -export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior; +export const neutralFillStealthSelected: ColorRecipe; // Warning: (ae-internal-missing-underscore) The name "neutralFillToggle" should be prefixed with an underscore because the declaration is marked as @internal // @@ -1239,35 +1051,20 @@ export const neutralFillToggle: SwatchFamilyResolver; // @internal (undocumented) export const neutralFillToggleActive: SwatchRecipe; -// @public -export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralFocusBehavior: CSSCustomPropertyBehavior; +export const neutralFocus: ColorRecipe; // 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 @@ -1275,9 +1072,6 @@ export const neutralFocusBehavior: CSSCustomPropertyBehavior; // @internal (undocumented) export function neutralFocusInnerAccent(accentFillColor: DesignSystemResolver): DesignSystemResolver; -// @public -export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralForeground" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -1288,123 +1082,75 @@ export const neutralForeground: SwatchFamilyResolver; // @internal (undocumented) export const neutralForegroundActive: SwatchRecipe; -// @public -export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralLayerCardBehavior: CSSCustomPropertyBehavior; +export const neutralLayerCard: ColorRecipe; // 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 -export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior; +export const neutralLayerCardContainer: ColorRecipe; // 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 -export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior; +export const neutralLayerFloating: ColorRecipe; // 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; +export const neutralLayerL1: ColorRecipe; // 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 -export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL1Behavior: CSSCustomPropertyBehavior; +export const neutralLayerL1Alt: ColorRecipe; // 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 -export const neutralLayerL2Behavior: CSSCustomPropertyBehavior; +export const neutralLayerL2: ColorRecipe; // 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 -export const neutralLayerL3Behavior: CSSCustomPropertyBehavior; +export const neutralLayerL3: ColorRecipe; // 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 -export const neutralLayerL4Behavior: CSSCustomPropertyBehavior; +export const neutralLayerL4: ColorRecipe; // 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 @@ -1417,9 +1163,6 @@ export const neutralOutline: ColorRecipe; // @internal (undocumented) export const neutralOutlineActive: SwatchRecipe; -// @public -export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "neutralOutlineContrast" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -1440,25 +1183,16 @@ export const neutralOutlineContrastHover: SwatchRecipe; // @internal (undocumented) export const neutralOutlineContrastRest: SwatchRecipe; -// @public -export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior; - // 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 -export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior; - // Warning: (ae-internal-missing-underscore) The name "NumberField" should be prefixed with an underscore because the declaration is marked as @internal // // @internal @@ -1481,15 +1215,33 @@ export const OptionStyles: (context: any, definition: any) => import("@microsoft // 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: ElementStyles; +export const OutlineButtonStyles: import("@microsoft/fast-element").ElementStyles; // @public -export type Palette = Swatch[]; +export interface Palette { + // Warning: (ae-forgotten-export) The symbol "RelativeLuminance" needs to be exported by the entry point index.d.ts + closestIndexOf(reference: RelativeLuminance): number; + colorContrast(reference: Swatch, contrast: number, initialIndex?: number, direction?: 1 | -1): T; + get(index: number): T; + // (undocumented) + readonly source: T; + // (undocumented) + 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; +export function palette(paletteType: PaletteType): DesignSystemResolver; + +// @public (undocumented) +export type PaletteRGB = Palette; + +// @public (undocumented) +export const PaletteRGB: Readonly<{ + create(source: SwatchRGB): PaletteRGB; +}>; // @public @deprecated export enum PaletteType { @@ -1552,7 +1304,30 @@ export enum StandardLuminance { // Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) -export const StealthButtonStyles: ElementStyles; +export const StealthButtonStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export interface Swatch extends RelativeLuminance { + // (undocumented) + contrast(target: RelativeLuminance): number; + // (undocumented) + toColorString(): string; +} + +// @public (undocumented) +export interface SwatchRGB extends Swatch { + // (undocumented) + b: number; + // (undocumented) + g: number; + // (undocumented) + r: number; +} + +// @public (undocumented) +export const SwatchRGB: Readonly<{ + create(r: number, g: number, b: number): SwatchRGB; +}>; // @public export const switchStyles: (context: any, defintiion: any) => import("@microsoft/fast-element").ElementStyles; diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts index 6fc5716db5819c..2fe7afaeea1e70 100644 --- a/packages/web-components/src/badge/badge.styles.ts +++ b/packages/web-components/src/badge/badge.styles.ts @@ -1,15 +1,15 @@ import { css } from '@microsoft/fast-element'; import { display } from '@microsoft/fast-foundation'; import { - accentForegroundRest, + accentFillRest, bodyFont, controlCornerRadius, designUnit, + foregroundOnAccentRest, + neutralFillRest, neutralForegroundRest, typeRampMinus1FontSize, typeRampMinus1LineHeight, - neutralFillRest, - accentForegroundCut, } from '../design-tokens'; export const badgeStyles = (context, definition) => @@ -33,8 +33,8 @@ export const badgeStyles = (context, definition) => } :host(.accent) .control { - background: ${accentForegroundRest}; - color: ${accentForegroundCut}; + background: ${accentFillRest}; + color: ${foregroundOnAccentRest}; } :host(.neutral) .control { diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index 1129e3dc6ce00f..f2df497aa744e7 100644 --- a/packages/web-components/src/button/button.styles.ts +++ b/packages/web-components/src/button/button.styles.ts @@ -10,12 +10,12 @@ import { } from '../styles/'; import { appearanceBehavior } from '../utilities/behaviors'; import { - disabledOpacity, - neutralFillRest, accentFillRest, accentForegroundRest, - neutralStrokeRest, + disabledOpacity, + neutralFillRest, neutralFillStealthRest, + neutralStrokeRest, } from '../design-tokens'; export const buttonStyles = (context, definition) => diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts index b1a56ff6ffea27..69ef340bd01dc5 100644 --- a/packages/web-components/src/card/card.styles.ts +++ b/packages/web-components/src/card/card.styles.ts @@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element'; import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation'; import { SystemColors } from '@microsoft/fast-web-utilities'; import { elevation } from '../styles'; -import { layerCornerRadius } from '../design-tokens'; +import { fillColor, layerCornerRadius } from '../design-tokens'; export const CardStyles = css` ${display('block')} :host { @@ -12,6 +12,7 @@ export const CardStyles = css` height: var(--card-height, 100%); width: var(--card-width, 100%); box-sizing: border-box; + background: ${fillColor}; border-radius: calc(${layerCornerRadius} * 1px); ${elevation} } diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html index d419cb2cbcfa2a..9327f279bc3e5d 100644 --- a/packages/web-components/src/card/fixtures/card.html +++ b/packages/web-components/src/card/fixtures/card.html @@ -1,5 +1,8 @@ - +