diff --git a/packages/fast-components-react-msft/app/app.tsx b/packages/fast-components-react-msft/app/app.tsx index aae891ef285..812a144631f 100644 --- a/packages/fast-components-react-msft/app/app.tsx +++ b/packages/fast-components-react-msft/app/app.tsx @@ -15,6 +15,7 @@ import { DesignSystem, DesignSystemDefaults, } from "@microsoft/fast-components-styles-msft"; +import designSystemSchema from "../../fast-components-styles-msft/src/design-system/design-system.schema.json"; import { Plugin, PluginProps } from "@microsoft/fast-tooling-react"; import { HypertextClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft"; @@ -139,6 +140,10 @@ export default class App extends React.Component<{}, AppState> { activeTheme={this.getThemeById(this.state.theme)} showTransparencyToggle={true} styleEditing={true} + designSystemEditing={{ + data: DesignSystemDefaults, + schema: designSystemSchema, + }} > FAST Documentation diff --git a/packages/fast-components-styles-msft/src/design-system/design-system.schema.json b/packages/fast-components-styles-msft/src/design-system/design-system.schema.json new file mode 100644 index 00000000000..f43e6ba7303 --- /dev/null +++ b/packages/fast-components-styles-msft/src/design-system/design-system.schema.json @@ -0,0 +1,243 @@ +{ + "$schema": "http://json-schema.org/schema#", + "title": "Design System", + "description": "A design system's schema definition.", + "id": "design-system", + "type": "object", + "properties": { + "backgroundColor": { + "title": "Background color", + "type": "string", + "default": "#FFFFFF" + }, + "contrast": { + "title": "Contrast", + "type": "number", + "default": 0 + }, + "density": { + "title": "Density", + "type": "number", + "enum": [ + -3, + -2, + -1, + 0, + 1, + 2, + 3 + ], + "default": 0 + }, + "designUnit": { + "title": "Design unit", + "type": "number", + "default": 4 + }, + "baseHeightMultiplier": { + "title": "Base height multiplier", + "type": "number", + "default": 8 + }, + "baseHorizontalSpacingMultiplier": { + "title": "Base horizontal spacing multiplier", + "type": "number", + "default": 3 + }, + "direction": { + "title": "Direction", + "type": "string", + "enum": [ + "ltr", + "rtl" + ], + "default": "ltr" + }, + "fontWeight": { + "title": "Font weight", + "type": "object", + "properties": { + "light": { + "title": "Light", + "type": "number", + "default": 100 + }, + "semilight": { + "title": "Semilight", + "type": "number", + "default": 200 + }, + "normal": { + "title": "Normal", + "type": "number", + "default": 400 + }, + "semibold": { + "title": "Semibold", + "type": "number", + "default": 600 + }, + "bold": { + "title": "Bold", + "type": "number", + "default": 700 + } + } + }, + "cornerRadius": { + "title": "Corner radius", + "type": "number", + "default": 2 + }, + "outlineWidth": { + "title": "Outline width", + "type": "number", + "default": 1 + }, + "focusOutlineWidth": { + "title": "Focus outline width", + "type": "number", + "default": 2 + }, + "disabledOpacity": { + "title": "Disabled opacity", + "type": "number", + "default": 0.3 + }, + "accentFillRestDelta": { + "title": "Accent fill rest delta", + "type": "number", + "default": 0 + }, + "accentFillHoverDelta": { + "title": "Accent fill hover delta", + "type": "number", + "default": 2 + }, + "accentFillActiveDelta": { + "title": "Accent fill active delta", + "type": "number", + "default": 4 + }, + "accentFillSelectedDelta": { + "title": "Accent fill selected delta", + "type": "number", + "default": 12 + }, + "accentForegroundRestDelta": { + "title": "Accent foreground rest delta", + "type": "number", + "default": 0 + }, + "accentForegroundHoverDelta": { + "title": "Accent foreground hover delta", + "type": "number", + "default": 4 + }, + "accentForegroundActiveDelta": { + "title": "Accent foreground active delta", + "type": "number", + "default": 8 + }, + "neutralFillRestDelta": { + "title": "Neutral fill rest delta", + "type": "number", + "default": 4 + }, + "neutralFillHoverDelta": { + "title": "Neutral fill hover delta", + "type": "number", + "default": 3 + }, + "neutralFillActiveDelta": { + "title": "Neutral fill active delta", + "type": "number", + "default": 2 + }, + "neutralFillSelectedDelta": { + "title": "Neutral fill selected delta", + "type": "number", + "default": 8 + }, + "neutralFillInputRestDelta": { + "title": "Neutral fill input rest delta", + "type": "number", + "default": 4 + }, + "neutralFillInputHoverDelta": { + "title": "Neutral fill input hover delta", + "type": "number", + "default": 4 + }, + "neutralFillInputActiveDelta": { + "title": "Neutral fill input active delta", + "type": "number", + "default": 4 + }, + "neutralFillInputSelectedDelta": { + "title": "Neutral fill input selected delta", + "type": "number", + "default": 4 + }, + "neutralFillStealthRestDelta": { + "title": "Neutral fill stealth rest delta", + "type": "number", + "default": 0 + }, + "neutralFillStealthHoverDelta": { + "title": "Neutral fill stealth hover delta", + "type": "number", + "default": 3 + }, + "neutralFillStealthActiveDelta": { + "title": "Neutral fill stealth active delta", + "type": "number", + "default": 2 + }, + "neutralFillStealthSelectedDelta": { + "title": "Neutral fill stealth selected delta", + "type": "number", + "default": 8 + }, + "neutralFillCardDelta": { + "title": "Neutral fill card delta", + "type": "number", + "default": 2 + }, + "neutralForegroundDarkIndex": { + "title": "Neutral foreground dark index", + "type": "number", + "default": 58 + }, + "neutralForegroundLightIndex": { + "title": "Neutral foreground light index", + "type": "number", + "default": 0 + }, + "neutralForegroundHoverDelta": { + "title": "Neutral foreground hover delta", + "type": "number", + "default": 8 + }, + "neutralForegroundActiveDelta": { + "title": "Neutral foreground active delta", + "type": "number", + "default": 16 + }, + "neutralOutlineRestDelta": { + "title": "Neutral outline rest delta", + "type": "number", + "default": 12 + }, + "neutralOutlineHoverDelta": { + "title": "Neutral outline hover delta", + "type": "number", + "default": 24 + }, + "neutralOutlineActiveDelta": { + "title": "Neutral outline active delta", + "type": "number", + "default": 18 + } + } +} \ No newline at end of file diff --git a/packages/fast-development-site-react/src/components/site/configuration-panel.tsx b/packages/fast-development-site-react/src/components/site/configuration-panel.tsx index 19e526b1512..c2ce978620c 100644 --- a/packages/fast-development-site-react/src/components/site/configuration-panel.tsx +++ b/packages/fast-development-site-react/src/components/site/configuration-panel.tsx @@ -11,14 +11,21 @@ import manageJss, { ManagedJSSProps, } from "@microsoft/fast-jss-manager-react"; +export interface DesignSystemEditingConfig { + data: any; + schema: any; +} + export interface ConfigurationPanelProps { formChildOptions: any; schema: any; data: any; dataLocation: string; onChange: any; + designSystemOnChange: (data: any) => void; onLocationUpdate: (dataLocation: string) => void; styleEditing?: boolean; + designSystemEditing?: DesignSystemEditingConfig; } export interface ConfigurationPanelManagedClasses { @@ -68,6 +75,7 @@ class ConfigurationPanel extends React.Component< {this.renderForm()} {this.renderCSSEditor()} {this.renderCSSPropertyEditor()} + {this.renderDesignSystemEditor()} ); } @@ -134,6 +142,22 @@ class ConfigurationPanel extends React.Component< } } + private renderDesignSystemEditor(): React.ReactNode { + if (!!this.props.designSystemEditing) { + return ( + + {this.renderCategoryTitle("Design System")} +
+ + ); + } + } + private renderCategoryTitle(text: string): React.ReactNode { return (

diff --git a/packages/fast-development-site-react/src/components/site/index.tsx b/packages/fast-development-site-react/src/components/site/index.tsx index 39d2eff033b..dfb8a60d723 100644 --- a/packages/fast-development-site-react/src/components/site/index.tsx +++ b/packages/fast-development-site-react/src/components/site/index.tsx @@ -36,7 +36,7 @@ import SiteCategoryIcon from "./category-icon"; import SiteCategoryItem from "./category-item"; import ActionBar from "./action-bar"; import DevTools, { Framework } from "./dev-tools"; -import ConfigurationPanel from "./configuration-panel"; +import ConfigurationPanel, { DesignSystemEditingConfig } from "./configuration-panel"; import NotFound from "./not-found"; import ComponentView, { ComponentViewTypes } from "./component-view"; import { @@ -76,6 +76,7 @@ export interface SiteProps { onUpdateDirection?: (ltr: Direction) => void; onUpdateTheme?: (theme: string) => void; styleEditing?: boolean; + designSystemEditing?: DesignSystemEditingConfig; locales?: string[]; themes?: Theme[]; activeTheme?: Theme; @@ -130,6 +131,7 @@ export interface SiteState { locale: string; theme: Theme; navigationLevel: NavigationLevel; + designSystem: any; } export enum SiteSlot { @@ -411,6 +413,7 @@ class Site extends React.Component< locale: "en", theme: this.props.activeTheme || this.getInitialTheme(), navigationLevel: NavigationLevel.catalog, + designSystem: this.props.designSystemEditing.data, }; } @@ -798,6 +801,12 @@ class Site extends React.Component< } }; + private handleDesignSystemDataChange = (data: any): void => { + this.setState({ + designSystem: data, + }); + }; + private handleToggleDevToolsView = (): void => { this.setState({ devToolsView: !this.state.devToolsView, @@ -939,6 +948,11 @@ class Site extends React.Component< formChildOptions={this.props.formChildOptions} onLocationUpdate={this.handleLocationUpdate} styleEditing={this.props.styleEditing} + designSystemEditing={{ + schema: this.props.designSystemEditing.schema, + data: this.state.designSystem, + }} + designSystemOnChange={this.handleDesignSystemDataChange} /> ); } @@ -971,7 +985,10 @@ class Site extends React.Component< transparentBackground={ this.state.componentBackgroundTransparent } - designSystem={componentItem.props.designSystem} + designSystem={ + this.state.designSystem || + componentItem.props.designSystem + } active={index === this.state.activeComponentIndex} view={this.state.componentView} > @@ -1018,7 +1035,7 @@ class Site extends React.Component< background={this.generateComponentWrapperBackground()} dir={isRTL(this.state.locale) ? Direction.rtl : Direction.ltr} transparentBackground={this.state.componentBackgroundTransparent} - designSystem={component.props.designSystem} + designSystem={this.state.designSystem || component.props.designSystem} active={true} view={this.state.componentView} >