feat: Add new acrylic theme

Author: myxvisual

docs/src/assets/images/blurBackground/viktor-jakovlev-LL4gcqlNvPU-unsplash.jpg

@@ -150,9 +150,9 @@ export default class DocsTreeView extends React.Component<DocsTreeViewProps, Doc
     return (
       <div
         style={theme.prefixStyle({
+          ...theme.acrylicTexture40.style,
           width: 320,
           padding: "10px 0",
-          background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.chromeLow,
           ...style
         })}
         {...attributes}

docs/src/components/DocsTreeView/index.tsx

@@ -89,14 +89,10 @@ function getStyles(footer: Footer): {
 
   return {
     root: prefixStyle({
+      ...theme.acrylicTexture40.style,
       zIndex: theme.zIndex.header,
       fontSize: 14,
       color: theme.baseHigh,
-      background: theme.useFluentDesign ? (
-        theme.isDarkTheme ? "hsla(0, 0%, 0%, 0.95)" : "hsla(0, 0%, 100%, 0.95)"
-      ) : (
-        theme.isDarkTheme ? "hsla(0, 0%, 5%, 0.85)" : "hsla(0, 0%, 95%, 0.85)"
-      ),
       minHeight: footerHeight,
       ...style
     }),

docs/src/components/Wrapper/components/Footer.tsx

@@ -218,11 +218,7 @@ function getStyles(header: Header): {
     root: prefixStyle({
       fontSize: 14,
       color: theme.baseHigh,
-      background: theme.useFluentDesign ? (
-        theme.isDarkTheme ? "hsla(0, 0%, 0%, 0.95)" : "hsla(0, 0%, 100%, 0.95)"
-      ) : (
-        theme.isDarkTheme ? "hsla(0, 0%, 5%, 0.85)" : "hsla(0, 0%, 95%, 0.85)"
-      ),
+      ...theme.acrylicTexture40.style,
       boxShadow: theme.isDarkTheme ? void 0 : `0 2px 8px ${theme.listLow}`,
       width: "100%",
       height: headerHeight,

docs/src/components/Wrapper/components/Header.tsx

@@ -85,7 +85,8 @@ function getStyles(wrapperWithCategories: WrapperWithCategories) {
       margin: "0 auto"
     }),
     side: prefixStyle({
-      background: theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh,
+      background: theme.altMediumLow,
+      // ...theme.acrylicTexture60.style,
       width: notPhoneTablet ? "calc(100% - 320px)" : "100%",
       ...(theme.useFluentDesign ? void 0 : getStripedBackground(4, tinycolor(theme.baseHigh).setAlpha(0.025).toRgbString(), "transparent")),
       minHeight: "100%"

docs/src/components/WrapperWithCategories/index.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
 
-import AutoSuggestBox from "react-uwp/AutoSuggestBox";
-
 export default class SimpleExample extends React.Component {
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
@@ -21,6 +19,7 @@ export default class SimpleExample extends React.Component {
       outline: "none",
       border: `1px solid ${theme.listAccentLow}`
     };
+    
     return (
       <div
         style={theme.prefixStyle({
@@ -34,13 +33,13 @@ export default class SimpleExample extends React.Component {
           background: theme.desktopBackground
         })}
       >
-        <span style={{ ...itemStyle, background: theme.acrylicTexture40.background }}>
+        <span style={{ ...itemStyle, ...theme.acrylicTexture40.style }}>
           theme.acrylicTexture40.background
         </span>
-        <span style={{ ...itemStyle, background: theme.acrylicTexture60.background }}>
+        <span style={{ ...itemStyle, ...theme.acrylicTexture60.style }}>
           theme.acrylicTexture60.background
         </span>
-        <span style={{ ...itemStyle, background: theme.acrylicTexture80.background }}>
+        <span style={{ ...itemStyle, ...theme.acrylicTexture80.style }}>
           theme.acrylicTexture80.background
         </span>
       </div>

docs/src/routes/Styles/Acrylic/SimpleExample.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { Router, RouteComponent, browserHistory } from "react-router";
+import { Router, browserHistory } from "react-router";
 
 import Theme from "react-uwp/Theme";
 import getTheme from "react-uwp/styles/getTheme";
 import Wrapper from "../components/Wrapper";
 import WrapperWithCategories from "../components/WrapperWithCategories";
-import setStaticAcrylicTexture from "utils/setStaticAcrylicTexture";
 
 export interface RouterCallback {
   (error: any, component?: any): void;
@@ -22,8 +21,6 @@ export class ThemeWrapper extends React.Component {
     return (
       <Theme
         theme={theme}
-        needGenerateAcrylic={false}
-        // themeWillUpdate={setStaticAcrylicTexture}
       >
         {children}
       </Theme>

docs/src/routes/index.tsx

@@ -315,12 +315,12 @@ function getStyles(calendarView: CalendarView): {
 
   return {
     root: prefixStyle({
+      ...theme.acrylicTexture80.style,
       display: "inline-block",
       verticalAlign: "middle",
       fontSize: 14,
       color: theme.baseHigh,
       width: 296,
-      background: background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh),
       border: `2px solid ${theme.baseLow}`,
       ...style
     }),

docs/src/utils/setStaticAcrylicTexture.ts

@@ -339,8 +339,7 @@ function getStyles(colorPicker: ColorPicker): {
     context: { theme },
     props: {
       style,
-      size,
-      defaultColor
+      size
     },
     state: { h, s, v }
   } = colorPicker;