diff --git a/sites/fast-creator/app/creator.props.ts b/sites/fast-creator/app/creator.props.ts index ef3868e328b..038d508a23e 100644 --- a/sites/fast-creator/app/creator.props.ts +++ b/sites/fast-creator/app/creator.props.ts @@ -2,7 +2,6 @@ import { ManagedClasses } from "@microsoft/fast-components-class-name-contracts- import { Direction } from "@microsoft/fast-web-utilities"; import { DataDictionary } from "@microsoft/fast-tooling"; import { StandardLuminance } from "@microsoft/fast-components-styles-msft"; -import { CreatorClassNameContract } from "./creator.style"; /** * Data for a single view @@ -73,7 +72,7 @@ export interface ProjectFile { }; } -export type CreatorManagedClasses = ManagedClasses; +export type CreatorManagedClasses = ManagedClasses<{}>; export type CreatorHandledProps = CreatorManagedClasses; diff --git a/sites/fast-creator/app/creator.style.ts b/sites/fast-creator/app/creator.style.ts index fee07db1067..26c53df50fc 100644 --- a/sites/fast-creator/app/creator.style.ts +++ b/sites/fast-creator/app/creator.style.ts @@ -1,17 +1,8 @@ +import { ComponentStyles, CSSRules } from "@microsoft/fast-jss-manager-react"; import { - ComponentStyles, - CSSRules, - ManagedClasses, -} from "@microsoft/fast-jss-manager-react"; -import { - applyCornerRadius, DesignSystem, - neutralFillActive, - neutralFillHover, - neutralFillRest, neutralLayerFloating, neutralLayerL2, - neutralLayerL3, } from "@microsoft/fast-components-styles-msft"; export function applyScrollbarStyle(): CSSRules<{}> { @@ -32,22 +23,7 @@ export function applyScrollbarStyle(): CSSRules<{}> { }; } -export interface CreatorClassNameContract { - creator?: string; - creator_uploadInput?: string; - creator_colorPicker?: string; - creator_devToolsPanel?: string; - creator_navigationPanel?: string; - creator_navigationPanelRegion?: string; - creator_navigationPanelContent?: string; - creator_paneTitleContainer?: string; - creator_propertiesPanel?: string; - creator_toolbar?: string; - creator_viewerControlRegion?: string; - creator_viewerPanel?: string; -} - -const style: ComponentStyles = { +const style: ComponentStyles<{}, DesignSystem> = { "@font-face": [ { fontFamily: "SegoeUIVF", @@ -70,84 +46,6 @@ const style: ComponentStyles = { margin: "0", }, }, - creator: {}, - creator_uploadInput: { - position: "absolute", - width: "20px", - overflow: "hidden", - opacity: "0", - }, - creator_colorPicker: { - background: neutralFillRest(neutralLayerL2), - border: "none", - width: "23px", - height: "22px", - ...applyCornerRadius(), - "&:hover": { - background: neutralFillHover(neutralLayerL2), - }, - "&:active": { - background: neutralFillActive(neutralLayerL2), - }, - "&:focus": { - outline: "none", - }, - }, - creator_devToolsPanel: { - width: "100%", - boxShadow: - "0px 0.6px 1.8px rgba(0, 0, 0, 0.11) inset, 0px 3.2px 7.2px rgba(0, 0, 0, 0.13) inset", - }, - creator_navigationPanel: { - overflowY: "auto", - overflowX: "hidden", - background: neutralLayerL3, - boxShadow: - "-0.6px 0px 1.8px rgba(0, 0, 0, 0.11) inset, -3.2px 0px 7.2px rgba(0, 0, 0, 0.13) inset", - }, - creator_navigationPanelRegion: { - height: "calc(100% - 39px)", - }, - creator_navigationPanelContent: { - height: "calc(100% - 32px)", - overflow: "auto", - ...applyScrollbarStyle(), - }, - creator_paneTitleContainer: { - height: "32px", - display: "flex", - boxSizing: "border-box", - alignItems: "center", - justifyContent: "space-between", - paddingLeft: "10px", - }, - creator_propertiesPanel: { - background: neutralLayerL3, - boxShadow: - "0.6px 0px 1.8px rgba(0, 0, 0, 0.11) inset, 3.2px 0px 7.2px rgba(0, 0, 0, 0.13) inset", - overflow: "auto", - ...applyScrollbarStyle(), - }, - creator_viewerPanel: { - width: "100%", - height: "calc(100% - 32px)", - overflow: "auto", - ...applyScrollbarStyle(), - }, - creator_viewerControlRegion: { - display: "flex", - alignItems: "center", - }, - creator_toolbar: { - padding: "0 8px", - height: "32px", - display: "flex", - verticalAlign: "middle", - alignItems: "center", - background: neutralLayerL2, - boxShadow: - "0px -0.6px 1.8px rgba(0, 0, 0, 0.11) inset, 0px -3.2px 7.2px rgba(0, 0, 0, 0.13) inset", - }, }; export default style;