refactor: Update new Theme logic

Author: myxvisual

docs/scripts/parser.ts

@@ -160,7 +160,7 @@ export class Parser {
         break;
       }
       default: {
-        console.log(`Missing parse kind: ${node.kind}`);
+        // console.log(`Missing parse kind: ${node.kind}`);
         break;
       }
     }
@@ -195,9 +195,8 @@ export class Parser {
     try {
       documentation = ts.displayPartsToString(symbol.getDocumentationComment(void 0)) || void 0;
     } catch (error) {
-      console.error(error);
+      // console.error(error);
     }
-
     // console.log(name, symbol.flags);
 
     let newSymbol: any = symbol;

docs/src/utils/setStaticAcrylicTexture.ts

@@ -27,7 +27,7 @@ export default function setStaticAcrylicTexture(theme: ReactUWP.ThemeType) {
     }
   } else {
     if (theme.useFluentDesign && !theme.haveAcrylicTextures) {
-      theme.generateAcrylicTextures(theme, newTheme => theme.updateTheme(newTheme));
+      theme.generateAcrylicTextures(newTheme => theme.updateTheme(newTheme));
     }
   }
 }

src/MarkdownRender/index.tsx

@@ -81,7 +81,7 @@ export class MarkdownRender extends React.Component<MarkdownRenderProps> {
     }
 
     const CSSText = getCSSText(theme, `react-uwp-markdown`) + "\n" + markdownStyleString;
-    theme.styleManager.addCSSTextWithUpdate(CSSText);
+    theme.styleManager.addCSSText(CSSText);
   }
 
   render() {

src/ProgressBar/index.tsx

@@ -94,7 +94,7 @@ ${vendorPrefixes.map(str => `@${str}keyframes ProgressBar {
       styles: inlineStyles
     });
     const onlyClassName = this.getOnlyClassName();
-    theme.styleManager.addCSSTextWithUpdate(this.getCSSText(onlyClassName));
+    theme.styleManager.addCSSText(this.getCSSText(onlyClassName));
 
     return (
       <div

src/ProgressRing/index.tsx

@@ -104,7 +104,7 @@ ${vendorPrefixes.map(str => `@${str}keyframes CircleLoopFade {
     } = this.props;
     const { theme } = this.context;
     const onlyClassName = this.getOnlyClassName();
-    theme.styleManager.addCSSTextWithUpdate(this.getCSSText(onlyClassName));
+    theme.styleManager.addCSSText(this.getCSSText(onlyClassName));
 
     const inlineStyles = getStyles(this);
     const styles = theme.prepareStyles({

src/Theme/StyleManagerSheet.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface StyleManagerSheetState {
+  CSSText?: string;
+}
+
+export class StyleManagerSheet extends React.Component<StyleManagerSheetState, StyleManagerSheetState> {
+  state: StyleManagerSheetState = {
+    CSSText: this.props.CSSText
+  };
+
+  render() {
+    return (
+      <style>{this.state.CSSText}</style>
+    );
+  }
+}

src/Theme/getBaseCSSText.tsx

@@ -1,12 +1,12 @@
 
-function getBaseCSS(theme: ReactUWP.ThemeType, themeClassName = "uwp-base", scrollBarStyleSelector = "*") {
+function getBaseCSS(theme: ReactUWP.ThemeType, scrollBarStyleSelector = "*") {
   return `* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-.${themeClassName} * {
+* {
   font-family: ${theme.fonts.sansSerifFonts.split(", ").map((font: string) => `"${font}"`).join(", ")};
 }
 
@@ -34,18 +34,18 @@ ${scrollBarStyleSelector}::-webkit-scrollbar {
   -webkit-appearance: none
 }
 
-.${themeClassName} *:after, .${themeClassName} *:before {
+*:after, *:before {
   box-sizing: border-box;
 }
 
-.${themeClassName} {
+{
   -webkit-text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.${themeClassName} input, .${themeClassName} textarea {
+input, textarea {
   box-shadow: none;
   border-radius: none;
 }