feat: Add new acrylic theme

myxvisual · Nov 23, 2019 · 096b823 · 096b823
1 parent fa58536
commit 096b823
Show file tree

Hide file tree

Showing 29 changed files with 202 additions and 297 deletions.
diff --git a/docs/src/assets/images/blurBackground/viktor-jakovlev-LL4gcqlNvPU-unsplash.jpg b/docs/src/assets/images/blurBackground/viktor-jakovlev-LL4gcqlNvPU-unsplash.jpg
diff --git a/docs/src/components/DocsTreeView/index.tsx b/docs/src/components/DocsTreeView/index.tsx
@@ -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}

diff --git a/docs/src/components/Wrapper/components/Footer.tsx b/docs/src/components/Wrapper/components/Footer.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
     }),

diff --git a/docs/src/components/Wrapper/components/Header.tsx b/docs/src/components/Wrapper/components/Header.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,

diff --git a/docs/src/components/WrapperWithCategories/index.tsx b/docs/src/components/WrapperWithCategories/index.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%"

diff --git a/docs/src/routes/Styles/Acrylic/SimpleExample.tsx b/docs/src/routes/Styles/Acrylic/SimpleExample.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>

diff --git a/docs/src/routes/index.tsx b/docs/src/routes/index.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>

diff --git a/docs/src/utils/setStaticAcrylicTexture.ts b/docs/src/utils/setStaticAcrylicTexture.ts
diff --git a/src/CalendarView/index.tsx b/src/CalendarView/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
     }),

diff --git a/src/ColorPicker/index.tsx b/src/ColorPicker/index.tsx
@@ -339,8 +339,7 @@ function getStyles(colorPicker: ColorPicker): {
     context: { theme },
     props: {
       style,
-      size,
-      defaultColor
+      size
     },
     state: { h, s, v }
   } = colorPicker;

diff --git a/src/ContentDialog/index.tsx b/src/ContentDialog/index.tsx
@@ -274,7 +274,7 @@ function getStyles(contentDialog: ContentDialog): {
       ...style
     }),
     container: prefixStyle({
-      background: background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh),
+      ...theme.acrylicTexture80.style,
       border: `1px solid ${theme.baseLow}`,
       flex: "0 0 auto",
       width: "80%",

diff --git a/src/DatePicker/index.tsx b/src/DatePicker/index.tsx
@@ -296,7 +296,6 @@ function getStyles(datePicker: DatePicker): {
     }
   } = datePicker;
   const { prefixStyle } = theme;
-  const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.chromeLow);
 
   return {
     root: prefixStyle({
@@ -318,12 +317,12 @@ function getStyles(datePicker: DatePicker): {
       ...style
     }),
     pickerModal: prefixStyle({
+      ...theme.acrylicTexture80.style,
       overflow: "hidden",
       flex: "0 0 auto",
       display: "flex",
       flexDirection: "column",
       position: "absolute",
-      background: currBackground,
       top: 0,
       left: 0,
       width: "100%",

diff --git a/src/DropDownMenu/index.tsx b/src/DropDownMenu/index.tsx
@@ -251,7 +251,6 @@ function getStyles(dropDownMenu: DropDownMenu) {
   } = dropDownMenu;
   const { prefixStyle } = theme;
 
-  const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.chromeLow);
   const haveWrapperStyle = wrapperAttributes && wrapperAttributes.style;
   const zIndex = (style && style.zIndex) ? style.zIndex : (showList ? theme.zIndex.dropDownMenu : 1);
 
@@ -266,11 +265,11 @@ function getStyles(dropDownMenu: DropDownMenu) {
       zIndex
     }) as React.CSSProperties,
     wrapper: prefixStyle({
+      ...theme.acrylicTexture80.style,
       position: "absolute",
       top: 0,
       left: 0,
       color: theme.baseMediumHigh,
-      background: currBackground,
       width: itemWidth,
       height: showList ? values.length * itemHeight + 16 : itemHeight + padding,
       overflowX: "hidden",

diff --git a/src/ListView/index.tsx b/src/ListView/index.tsx
@@ -72,16 +72,15 @@ export class ListView extends React.Component<ListViewProps, ListViewState> {
     const { isDarkTheme } = theme;
     const isFocus = focus || focusIndex === index;
     const defaultBG = isFocus ? theme.listAccentLow : "none";
-    const focusBG = isFocus ? theme.listAccentHigh : (theme.useFluentDesign ? theme.acrylicTexture40.background : theme.listLow);
-    const clickBG = isFocus ? theme.accent : theme.chromeHigh;
 
     const itemStyles = theme.prepareStyle({
       className: "list-view-item",
       style: theme.prefixStyle({
         background: defaultBG,
         color: disabled ? theme.baseLow : theme.baseHigh,
         "&:hover": {
-          background: focusBG
+          ...theme.acrylicTexture40.style,
+          background: isFocus ? theme.listAccentHigh : theme.acrylicTexture40.style.background
         },
         "&:active": {
           transform: "scale(0.99)"
@@ -155,18 +154,17 @@ function getStyles(listView: ListView): {
 } {
   const { context, props: { listItemStyle, background, style } } = listView;
   const { theme } = context;
-  const { prefixStyle } = theme;
 
   return {
     root: theme.prefixStyle({
+      ...(background ? { ...theme.acrylicTexture60.style, background } : theme.acrylicTexture60.style),
       width: 320,
       display: "inline-block",
       verticalAlign: "middle",
       fontSize: 14,
       padding: "8px 0",
       color: theme.baseMediumHigh,
       border: `1px solid ${theme.useFluentDesign ? theme.listLow : theme.altHigh}`,
-      background: background || (theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow),
       transition: "all .25s",
       ...style
     }),

diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx
@@ -226,6 +226,7 @@ function getStyles(menuItem: MenuItem): {
       textOverflow: "ellipsis"
     },
     child: prefixStyle({
+      ...theme.acrylicTexture60.style,
       transform: `translate3d(${expanded ? 0 : `-${itemHeight}px`}, 0, 0)`,
       opacity: expanded ? 1 : 0,
       pointerEvents: expanded ? "all" : "none",
@@ -234,7 +235,6 @@ function getStyles(menuItem: MenuItem): {
       top: -1,
       left: "100%",
       width: "100%",
-      background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
       border: `1px solid ${theme.listLow}`
     })
   };

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
@@ -128,9 +128,9 @@ function getStyles(menu: Menu): {
 
   return {
     root: prefixStyle({
+      ...theme.acrylicTexture60.style,
       width: 240,
       color: theme.baseHigh,
-      background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
       border: `1px solid ${theme.listLow}`,
       ...style
     })

diff --git a/src/NavigationView/index.tsx b/src/NavigationView/index.tsx
@@ -343,7 +343,6 @@ function getStyles(NavigationView: NavigationView): {
   let minHeight = isMinimal ? 0 : 48;
   if (navigationTopNodes) minHeight += 48 * navigationTopNodes.length;
   if (navigationBottomNodes) minHeight += 48 * navigationBottomNodes.length;
-  const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture40.background : theme.altHigh);
   const transition = "width .25s ease-in-out";
 
   return {
@@ -356,12 +355,12 @@ function getStyles(NavigationView: NavigationView): {
       ...style
     }),
     topIcon: prefixStyle({
+      ...theme.acrylicTexture40.style,
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "flex-start",
       width: isMinimal ? "100%" : expandedWidth,
-      background: currBackground,
       flex: "0 0 auto",
       zIndex: 1
     }),
@@ -375,6 +374,7 @@ function getStyles(NavigationView: NavigationView): {
       textOverflow: "ellipsis"
     }),
     paneParent: prefixStyle({
+      ...(isMinimal ? theme.acrylicTexture40.style : {}),
       display: "inline-block",
       verticalAlign: "top",
       width: isMinimal ? "100%" : (isOverLay ? currInitWidth : (expanded ? expandedWidth : currInitWidth)),
@@ -383,22 +383,20 @@ function getStyles(NavigationView: NavigationView): {
       zIndex: isOverLay || isMinimal ? 1 : void 0,
       position: isOverLay ? "absolute" : void 0,
       top: isOverLay ? 0 : void 0,
-      background: isMinimal ? currBackground : void 0,
       transition
     }),
     pane: prefixStyle({
+      ...theme.acrylicTexture40.style,
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
       justifyContent: "space-between",
-      background: currBackground,
       overflow: isMinimal ? void 0 : "hidden",
       width: expanded ? expandedWidth : (isMinimal ? 0 : currInitWidth),
       ...(isMinimal ? {
         position: "absolute",
         top: 0,
         left: 0,
-        background: currBackground
       } as React.CSSProperties : void 0),
       height: "100%",
       transition,

diff --git a/src/SplitView/index.tsx b/src/SplitView/index.tsx
@@ -152,7 +152,7 @@ function getStyles(splitView: SplitView): {
   return {
     root: prefixStyle({
       color: theme.baseHigh,
-      background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
+      ...theme.acrylicTexture60.style,
       display: "inline-block",
       position: "relative",
       margin: 0,
@@ -174,7 +174,7 @@ function getStyles(splitView: SplitView): {
       overflow: "hidden"
     }),
     pane: prefixStyle({
-      background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.altHigh,
+      ...theme.acrylicTexture40.style,
       transition,
       boxShadow: theme.useFluentDesign ? `rgba(0, 0, 0, 0.34) 0px 4px 24px` : void 0,
       ...(isCompact ? {

diff --git a/src/Theme/StyleManagerSheet.tsx b/src/Theme/StyleManagerSheet.tsx