Skip to content

Commit

Permalink
Added accent and neutral base color attributes to the design system p…
Browse files Browse the repository at this point in the history 
…rovider (microsoft#5330)

Added accent and neutral base color attributes to the design system provider
Updated DSP to handle a change in base layer luminance
Cleaned up the delta tokens to not render in css
  • Loading branch information
@bheston
bheston authored Jan 25, 2022
1 parent 74e26cd commit 14cf0f9
Show file tree
Hide file tree
Showing 7 changed files with 212 additions and 176 deletions.
7 changes: 7 additions & 0 deletions change/@microsoft-fast-components-f8ddb38a-4380-4383-a6b3-7e1b02feed9c.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Added accent and neutral base color attributes to the design system provider Updated DSP to handle a change in base layer luminance Cleaned up the delta tokens to not render in css",
"packageName": "@microsoft/fast-components",
"email": "47367562+bheston@users.noreply.github.com",
"dependentChangeType": "patch"
}
82 changes: 47 additions & 35 deletions packages/web-components/fast-components/docs/api-report.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,23 +87,26 @@ import { TreeItem } from '@microsoft/fast-foundation';
import { TreeItemOptions } from '@microsoft/fast-foundation';
import { TreeView } from '@microsoft/fast-foundation';

// @public (undocumented)
export const accentColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentFillActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentFillActiveDelta: DesignToken<number>;

// @public (undocumented)
export const accentFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentFillFocusDelta: DesignToken<number>;

// @public (undocumented)
export const accentFillHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentFillHoverDelta: DesignToken<number>;

// @public (undocumented)
export const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -112,25 +115,25 @@ export const accentFillRecipe: DesignToken<InteractiveColorRecipe>;
export const accentFillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentFillRestDelta: DesignToken<number>;

// @public (undocumented)
export const accentForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentForegroundActiveDelta: DesignToken<number>;

// @public (undocumented)
export const accentForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentForegroundFocusDelta: DesignToken<number>;

// @public (undocumented)
export const accentForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentForegroundHoverDelta: DesignToken<number>;

// @public (undocumented)
export const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -139,7 +142,7 @@ export const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
export const accentForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const accentForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const accentForegroundRestDelta: DesignToken<number>;

// @public (undocumented)
export const accentPalette: DesignToken<Palette<Swatch>>;
Expand Down Expand Up @@ -341,7 +344,10 @@ export { Checkbox }
export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles;

// @public (undocumented)
export type ColorRecipe = Recipe<Swatch>;
export interface ColorRecipe {
// (undocumented)
evaluate(element: HTMLElement, reference?: Swatch): Swatch;
}

export { Combobox }

Expand Down Expand Up @@ -374,6 +380,7 @@ export const density: import("@microsoft/fast-foundation").CSSDesignToken<number
// @internal
export class DesignSystemProvider extends FoundationElement {
constructor();
accentColor: Swatch;
accentFillActiveDelta: number;
accentFillFocusDelta: number;
accentFillHoverDelta: number;
Expand All @@ -382,7 +389,6 @@ export class DesignSystemProvider extends FoundationElement {
accentForegroundFocusDelta: number;
accentForegroundHoverDelta: number;
accentForegroundRestDelta: number;
accentPalette: Palette;
baseHeightMultiplier: number;
baseHorizontalSpacingMultiplier: number;
baseLayerLuminance: number;
Expand All @@ -393,6 +399,7 @@ export class DesignSystemProvider extends FoundationElement {
disabledOpacity: number;
fillColor: Swatch;
focusStrokeWidth: number;
neutralColor: Swatch;
neutralFillActiveDelta: number;
neutralFillFocusDelta: number;
neutralFillHoverDelta: number;
Expand All @@ -409,7 +416,6 @@ export class DesignSystemProvider extends FoundationElement {
neutralFillStrongActiveDelta: number;
neutralFillStrongFocusDelta: number;
neutralFillStrongHoverDelta: number;
neutralPalette: Palette;
neutralStrokeActiveDelta: number;
neutralStrokeDividerRestDelta: number;
neutralStrokeFocusDelta: number;
Expand Down Expand Up @@ -761,7 +767,10 @@ export const horizontalSliderLabelStyles: ElementStyles;
export const imgTemplate: import("@microsoft/fast-element").ViewTemplate<Avatar, any>;

// @public (undocumented)
export type InteractiveColorRecipe = Recipe<InteractiveSwatchSet>;
export interface InteractiveColorRecipe {
// (undocumented)
evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
}

// @public (undocumented)
export interface InteractiveSwatchSet {
Expand Down Expand Up @@ -795,41 +804,44 @@ export const menuItemStyles: (context: ElementDefinitionContext, definition: Men
// @public
export const menuStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

// @public (undocumented)
export const neutralColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillActiveDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillFocusDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillHoverDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillInputActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillInputActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillInputActiveDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillInputFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillInputFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillInputFocusDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillInputHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillInputHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillInputHoverDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -838,7 +850,7 @@ export const neutralFillInputRecipe: DesignToken<InteractiveColorRecipe>;
export const neutralFillInputRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillInputRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillInputRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillLayerRecipe: DesignToken<ColorRecipe>;
Expand All @@ -847,7 +859,7 @@ export const neutralFillLayerRecipe: DesignToken<ColorRecipe>;
export const neutralFillLayerRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillLayerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillLayerRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -856,25 +868,25 @@ export const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
export const neutralFillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStealthActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStealthActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStealthActiveDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStealthFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStealthFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStealthFocusDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStealthHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStealthHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStealthHoverDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -883,25 +895,25 @@ export const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
export const neutralFillStealthRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStealthRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStealthRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStrongActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStrongActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStrongActiveDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStrongFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStrongFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStrongFocusDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStrongHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStrongHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStrongHoverDelta: DesignToken<number>;

// @public (undocumented)
export const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -910,7 +922,7 @@ export const neutralFillStrongRecipe: DesignToken<InteractiveColorRecipe>;
export const neutralFillStrongRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralFillStrongRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralFillStrongRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralForegroundHint: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
Expand Down Expand Up @@ -967,7 +979,7 @@ export const neutralPalette: DesignToken<Palette<Swatch>>;
export const neutralStrokeActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralStrokeActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralStrokeActiveDelta: DesignToken<number>;

// @public (undocumented)
export const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
Expand All @@ -976,19 +988,19 @@ export const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
export const neutralStrokeDividerRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralStrokeDividerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralStrokeDividerRestDelta: DesignToken<number>;

// @public (undocumented)
export const neutralStrokeFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralStrokeFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralStrokeFocusDelta: DesignToken<number>;

// @public (undocumented)
export const neutralStrokeHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralStrokeHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralStrokeHoverDelta: DesignToken<number>;

// @public (undocumented)
export const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
Expand All @@ -997,7 +1009,7 @@ export const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
export const neutralStrokeRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;

// @public (undocumented)
export const neutralStrokeRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
export const neutralStrokeRestDelta: DesignToken<number>;

// Warning: (ae-internal-missing-underscore) The name "NumberField" should be prefixed with an underscore because the declaration is marked as @internal
//
Expand Down Expand Up @@ -1072,7 +1084,7 @@ export const radioGroupStyles: (context: ElementDefinitionContext, definition: F
// @public
export const radioStyles: (context: ElementDefinitionContext, definition: RadioOptions) => ElementStyles;

// @public (undocumented)
// @public @deprecated (undocumented)
export interface Recipe<T> {
// (undocumented)
evaluate(element: HTMLElement, reference?: Swatch): T;
Expand Down
3 changes: 1 addition & 2 deletions packages/web-components/fast-components/src/color/utilities/color-constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,4 @@ export const middleGrey = SwatchRGB.create(0.5, 0.5, 0.5);
* @internal
*/
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
const base = parseColorHexRGB("#DA1A5F")!;
export const accentBase = SwatchRGB.create(base.r, base.g, base.b);
export const accentBase = SwatchRGB.from(parseColorHexRGB("#DA1A5F")!);
14 changes: 11 additions & 3 deletions .../fast-components/src/design-system-provider/design-system-provider.vscode.definition.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@
"required": false
},
{
"name": "accent-base-color",
"title": "Accent base color",
"description": "The accent palette base color",
"name": "accent-color",
"title": "Accent color",
"description": "The accent color",
"type": "string",
"default": "#DA1A5F",
"required": false
},
{
"name": "neutral-color",
"title": "Neutral color",
"description": "The neutral color",
"type": "string",
"default": "#808080",
"required": false
},
{
"name": "density",
"title": "Density",
Expand Down
Loading

0 comments on commit 14cf0f9

Please sign in to comment.