Add design system providers

microsoft · May 11, 2020 · fda4c8d · fda4c8d
1 parent 10f941f
commit fda4c8d
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 18 deletions.
diff --git a/sites/fast-website/src/app/components/design-system-provider/index.ts b/sites/fast-website/src/app/components/design-system-provider/index.ts
@@ -0,0 +1 @@
+export { WebsiteDesignSystemProvider } from "./website-design-system-provider";
diff --git a/.../fast-website/src/app/components/design-system-provider/website-design-system-provider.ts b/.../fast-website/src/app/components/design-system-provider/website-design-system-provider.ts
@@ -0,0 +1,23 @@
+import { ColorRGBA64, parseColor } from "@microsoft/fast-colors";
+import {
+    designSystemProperty,
+    designSystemProvider,
+    FASTDesignSystemProvider,
+} from "@microsoft/fast-components";
+import { createColorPalette } from "@microsoft/fast-components-styles-msft";
+import { observable } from "@microsoft/fast-element";
+
+@designSystemProvider("website-design-system-provider")
+export class WebsiteDesignSystemProvider extends FASTDesignSystemProvider {
+    @observable
+    @designSystemProperty({
+        cssCustomProperty: false,
+        default: createColorPalette(parseColor("#F33378") as ColorRGBA64),
+    })
+    public accentPalette: string[];
+
+    accentBaseColorChanged(): void {
+        const parsedColor = parseColor(this.accentBaseColor);
+        this.accentPalette = createColorPalette(parsedColor as ColorRGBA64);
+    }
+}
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
@@ -29,7 +29,7 @@ export const FastFrameStyles = css`
 
     .preview {
         display: flex;
-        background: #c8c8c8;
+        background: var(--background-color);
         align-items: center;
         justify-content: center;
     }

diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -86,9 +86,9 @@ export const FastFrameTemplate = html<FastFrame>`
                     Tab four content. This is for testing.
                 </fast-tab-panel>
             </fast-tabs>
-            <div class="preview">
+            <website-design-system-provider class="preview" background-color="#424242">
                 Preview goes here
-            </div>
+            </website-design-system-provider>
         </div>
     </template>
 `;
diff --git a/sites/fast-website/src/app/components/gradient-picker/index.ts b/sites/fast-website/src/app/components/gradient-picker/index.ts
diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts
@@ -1,3 +1,3 @@
-export { GradientPicker } from "./gradient-picker";
+export { WebsiteDesignSystemProvider } from "./design-system-provider";
 export { FASTSectionHeader } from "./section-header";
 export { FastFrame } from "./fast-frame";
diff --git a/sites/fast-website/src/app/components/section-header/section-header.styles.ts b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
@@ -1,5 +1,5 @@
+import { accentFillRestBehavior, display } from "@microsoft/fast-components";
 import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-components";
 
 export const SectionHeaderStyles = css`
     ${display("flex")} :host {
@@ -9,4 +9,8 @@ export const SectionHeaderStyles = css`
         box-sizing: border-box;
         text-align: center;
     }
+
+    :host ::slotted(.section-badge) {
+        color: var(--accent-fill-rest);
+    }
 `;
diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
@@ -1,10 +1,19 @@
+:root {
+  /* FIXME: Is there a better way to set default props to prevent FOUC? */
+  --background-color: #242424;
+}
+
 body {
   background-color: var(--background-color);
   color: var(--neutral-foreground-rest);
   margin: 0;
   padding: 0;
 }
 
+.body-provider {
+  background-color: var(--background-color);
+}
+
 .wrapper {
   display: grid;
   grid-template-columns: minmax(5vw, 1fr) minmax(0px, 1600px) minmax(5vw, 1fr);
@@ -53,7 +62,6 @@ body {
 }
 
 .section-badge {
-  /* color: var(--accent-foreground-rest); */
   font-weight: bold;
 }
 

diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -6,7 +6,11 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-    <fast-design-system-provider use-defaults>
+    <website-design-system-provider id="body-provider" class="body-provider"
+      use-defaults
+      background-color="#242424"
+      accent-base-color="#F33378"
+    >
       <div class="wrapper">
         <!-- header:start -->
         <header class="header">
@@ -123,6 +127,6 @@
         </footer>
         <!-- footer:end -->
       </div>
-    </fast-design-system-provider>
+    </website-design-system-provider>
   </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { WebsiteDesignSystemProvider } from "./website-design-system-provider";