Skip to content

Commit 096b823

Browse files
myxvisualmyxvisual
committed
feat: Add new acrylic theme
1 parent fa58536 commit 096b823

File tree

29 files changed

+202
-297
lines changed

29 files changed

+202
-297
lines changed

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

3.36 MB
Loading

‎docs/src/components/DocsTreeView/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,9 @@ export default class DocsTreeView extends React.Component<DocsTreeViewProps, Doc
150150
return (
151151
<div
152152
style={theme.prefixStyle({
153+
...theme.acrylicTexture40.style,
153154
width: 320,
154155
padding: "10px 0",
155-
background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.chromeLow,
156156
...style
157157
})}
158158
{...attributes}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,10 @@ function getStyles(footer: Footer): {
8989

9090
return {
9191
root: prefixStyle({
92+
...theme.acrylicTexture40.style,
9293
zIndex: theme.zIndex.header,
9394
fontSize: 14,
9495
color: theme.baseHigh,
95-
background: theme.useFluentDesign ? (
96-
theme.isDarkTheme ? "hsla(0, 0%, 0%, 0.95)" : "hsla(0, 0%, 100%, 0.95)"
97-
) : (
98-
theme.isDarkTheme ? "hsla(0, 0%, 5%, 0.85)" : "hsla(0, 0%, 95%, 0.85)"
99-
),
10096
minHeight: footerHeight,
10197
...style
10298
}),

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,11 +218,7 @@ function getStyles(header: Header): {
218218
root: prefixStyle({
219219
fontSize: 14,
220220
color: theme.baseHigh,
221-
background: theme.useFluentDesign ? (
222-
theme.isDarkTheme ? "hsla(0, 0%, 0%, 0.95)" : "hsla(0, 0%, 100%, 0.95)"
223-
) : (
224-
theme.isDarkTheme ? "hsla(0, 0%, 5%, 0.85)" : "hsla(0, 0%, 95%, 0.85)"
225-
),
221+
...theme.acrylicTexture40.style,
226222
boxShadow: theme.isDarkTheme ? void 0 : `0 2px 8px ${theme.listLow}`,
227223
width: "100%",
228224
height: headerHeight,

‎docs/src/components/WrapperWithCategories/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,8 @@ function getStyles(wrapperWithCategories: WrapperWithCategories) {
8585
margin: "0 auto"
8686
}),
8787
side: prefixStyle({
88-
background: theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh,
88+
background: theme.altMediumLow,
89+
// ...theme.acrylicTexture60.style,
8990
width: notPhoneTablet ? "calc(100% - 320px)" : "100%",
9091
...(theme.useFluentDesign ? void 0 : getStripedBackground(4, tinycolor(theme.baseHigh).setAlpha(0.025).toRgbString(), "transparent")),
9192
minHeight: "100%"

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import * as React from "react";
22
import * as PropTypes from "prop-types";
33

4-
import AutoSuggestBox from "react-uwp/AutoSuggestBox";
5-
64
export default class SimpleExample extends React.Component {
75
static contextTypes = { theme: PropTypes.object };
86
context: { theme: ReactUWP.ThemeType };
@@ -21,6 +19,7 @@ export default class SimpleExample extends React.Component {
2119
outline: "none",
2220
border: `1px solid ${theme.listAccentLow}`
2321
};
22+
2423
return (
2524
<div
2625
style={theme.prefixStyle({
@@ -34,13 +33,13 @@ export default class SimpleExample extends React.Component {
3433
background: theme.desktopBackground
3534
})}
3635
>
37-
<span style={{ ...itemStyle, background: theme.acrylicTexture40.background }}>
36+
<span style={{ ...itemStyle, ...theme.acrylicTexture40.style }}>
3837
theme.acrylicTexture40.background
3938
</span>
40-
<span style={{ ...itemStyle, background: theme.acrylicTexture60.background }}>
39+
<span style={{ ...itemStyle, ...theme.acrylicTexture60.style }}>
4140
theme.acrylicTexture60.background
4241
</span>
43-
<span style={{ ...itemStyle, background: theme.acrylicTexture80.background }}>
42+
<span style={{ ...itemStyle, ...theme.acrylicTexture80.style }}>
4443
theme.acrylicTexture80.background
4544
</span>
4645
</div>

‎docs/src/routes/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as React from "react";
2-
import { Router, RouteComponent, browserHistory } from "react-router";
2+
import { Router, browserHistory } from "react-router";
33

44
import Theme from "react-uwp/Theme";
55
import getTheme from "react-uwp/styles/getTheme";
66
import Wrapper from "../components/Wrapper";
77
import WrapperWithCategories from "../components/WrapperWithCategories";
8-
import setStaticAcrylicTexture from "utils/setStaticAcrylicTexture";
98

109
export interface RouterCallback {
1110
(error: any, component?: any): void;
@@ -22,8 +21,6 @@ export class ThemeWrapper extends React.Component {
2221
return (
2322
<Theme
2423
theme={theme}
25-
needGenerateAcrylic={false}
26-
// themeWillUpdate={setStaticAcrylicTexture}
2724
>
2825
{children}
2926
</Theme>

‎docs/src/utils/setStaticAcrylicTexture.ts

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/CalendarView/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,12 +315,12 @@ function getStyles(calendarView: CalendarView): {
315315

316316
return {
317317
root: prefixStyle({
318+
...theme.acrylicTexture80.style,
318319
display: "inline-block",
319320
verticalAlign: "middle",
320321
fontSize: 14,
321322
color: theme.baseHigh,
322323
width: 296,
323-
background: background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh),
324324
border: `2px solid ${theme.baseLow}`,
325325
...style
326326
}),

‎src/ColorPicker/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,7 @@ function getStyles(colorPicker: ColorPicker): {
339339
context: { theme },
340340
props: {
341341
style,
342-
size,
343-
defaultColor
342+
size
344343
},
345344
state: { h, s, v }
346345
} = colorPicker;

‎src/ContentDialog/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ function getStyles(contentDialog: ContentDialog): {
274274
...style
275275
}),
276276
container: prefixStyle({
277-
background: background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.altHigh),
277+
...theme.acrylicTexture80.style,
278278
border: `1px solid ${theme.baseLow}`,
279279
flex: "0 0 auto",
280280
width: "80%",

‎src/DatePicker/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,6 @@ function getStyles(datePicker: DatePicker): {
296296
}
297297
} = datePicker;
298298
const { prefixStyle } = theme;
299-
const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.chromeLow);
300299

301300
return {
302301
root: prefixStyle({
@@ -318,12 +317,12 @@ function getStyles(datePicker: DatePicker): {
318317
...style
319318
}),
320319
pickerModal: prefixStyle({
320+
...theme.acrylicTexture80.style,
321321
overflow: "hidden",
322322
flex: "0 0 auto",
323323
display: "flex",
324324
flexDirection: "column",
325325
position: "absolute",
326-
background: currBackground,
327326
top: 0,
328327
left: 0,
329328
width: "100%",

‎src/DropDownMenu/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,6 @@ function getStyles(dropDownMenu: DropDownMenu) {
251251
} = dropDownMenu;
252252
const { prefixStyle } = theme;
253253

254-
const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture80.background : theme.chromeLow);
255254
const haveWrapperStyle = wrapperAttributes && wrapperAttributes.style;
256255
const zIndex = (style && style.zIndex) ? style.zIndex : (showList ? theme.zIndex.dropDownMenu : 1);
257256

@@ -266,11 +265,11 @@ function getStyles(dropDownMenu: DropDownMenu) {
266265
zIndex
267266
}) as React.CSSProperties,
268267
wrapper: prefixStyle({
268+
...theme.acrylicTexture80.style,
269269
position: "absolute",
270270
top: 0,
271271
left: 0,
272272
color: theme.baseMediumHigh,
273-
background: currBackground,
274273
width: itemWidth,
275274
height: showList ? values.length * itemHeight + 16 : itemHeight + padding,
276275
overflowX: "hidden",

‎src/ListView/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,15 @@ export class ListView extends React.Component<ListViewProps, ListViewState> {
7272
const { isDarkTheme } = theme;
7373
const isFocus = focus || focusIndex === index;
7474
const defaultBG = isFocus ? theme.listAccentLow : "none";
75-
const focusBG = isFocus ? theme.listAccentHigh : (theme.useFluentDesign ? theme.acrylicTexture40.background : theme.listLow);
76-
const clickBG = isFocus ? theme.accent : theme.chromeHigh;
7775

7876
const itemStyles = theme.prepareStyle({
7977
className: "list-view-item",
8078
style: theme.prefixStyle({
8179
background: defaultBG,
8280
color: disabled ? theme.baseLow : theme.baseHigh,
8381
"&:hover": {
84-
background: focusBG
82+
...theme.acrylicTexture40.style,
83+
background: isFocus ? theme.listAccentHigh : theme.acrylicTexture40.style.background
8584
},
8685
"&:active": {
8786
transform: "scale(0.99)"
@@ -155,18 +154,17 @@ function getStyles(listView: ListView): {
155154
} {
156155
const { context, props: { listItemStyle, background, style } } = listView;
157156
const { theme } = context;
158-
const { prefixStyle } = theme;
159157

160158
return {
161159
root: theme.prefixStyle({
160+
...(background ? { ...theme.acrylicTexture60.style, background } : theme.acrylicTexture60.style),
162161
width: 320,
163162
display: "inline-block",
164163
verticalAlign: "middle",
165164
fontSize: 14,
166165
padding: "8px 0",
167166
color: theme.baseMediumHigh,
168167
border: `1px solid ${theme.useFluentDesign ? theme.listLow : theme.altHigh}`,
169-
background: background || (theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow),
170168
transition: "all .25s",
171169
...style
172170
}),

‎src/Menu/MenuItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ function getStyles(menuItem: MenuItem): {
226226
textOverflow: "ellipsis"
227227
},
228228
child: prefixStyle({
229+
...theme.acrylicTexture60.style,
229230
transform: `translate3d(${expanded ? 0 : `-${itemHeight}px`}, 0, 0)`,
230231
opacity: expanded ? 1 : 0,
231232
pointerEvents: expanded ? "all" : "none",
@@ -234,7 +235,6 @@ function getStyles(menuItem: MenuItem): {
234235
top: -1,
235236
left: "100%",
236237
width: "100%",
237-
background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
238238
border: `1px solid ${theme.listLow}`
239239
})
240240
};

‎src/Menu/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,9 +128,9 @@ function getStyles(menu: Menu): {
128128

129129
return {
130130
root: prefixStyle({
131+
...theme.acrylicTexture60.style,
131132
width: 240,
132133
color: theme.baseHigh,
133-
background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
134134
border: `1px solid ${theme.listLow}`,
135135
...style
136136
})

‎src/NavigationView/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,6 @@ function getStyles(NavigationView: NavigationView): {
343343
let minHeight = isMinimal ? 0 : 48;
344344
if (navigationTopNodes) minHeight += 48 * navigationTopNodes.length;
345345
if (navigationBottomNodes) minHeight += 48 * navigationBottomNodes.length;
346-
const currBackground = background || (theme.useFluentDesign ? theme.acrylicTexture40.background : theme.altHigh);
347346
const transition = "width .25s ease-in-out";
348347

349348
return {
@@ -356,12 +355,12 @@ function getStyles(NavigationView: NavigationView): {
356355
...style
357356
}),
358357
topIcon: prefixStyle({
358+
...theme.acrylicTexture40.style,
359359
display: "flex",
360360
flexDirection: "row",
361361
alignItems: "center",
362362
justifyContent: "flex-start",
363363
width: isMinimal ? "100%" : expandedWidth,
364-
background: currBackground,
365364
flex: "0 0 auto",
366365
zIndex: 1
367366
}),
@@ -375,6 +374,7 @@ function getStyles(NavigationView: NavigationView): {
375374
textOverflow: "ellipsis"
376375
}),
377376
paneParent: prefixStyle({
377+
...(isMinimal ? theme.acrylicTexture40.style : {}),
378378
display: "inline-block",
379379
verticalAlign: "top",
380380
width: isMinimal ? "100%" : (isOverLay ? currInitWidth : (expanded ? expandedWidth : currInitWidth)),
@@ -383,22 +383,20 @@ function getStyles(NavigationView: NavigationView): {
383383
zIndex: isOverLay || isMinimal ? 1 : void 0,
384384
position: isOverLay ? "absolute" : void 0,
385385
top: isOverLay ? 0 : void 0,
386-
background: isMinimal ? currBackground : void 0,
387386
transition
388387
}),
389388
pane: prefixStyle({
389+
...theme.acrylicTexture40.style,
390390
display: "flex",
391391
flexDirection: "column",
392392
alignItems: "flex-start",
393393
justifyContent: "space-between",
394-
background: currBackground,
395394
overflow: isMinimal ? void 0 : "hidden",
396395
width: expanded ? expandedWidth : (isMinimal ? 0 : currInitWidth),
397396
...(isMinimal ? {
398397
position: "absolute",
399398
top: 0,
400399
left: 0,
401-
background: currBackground
402400
} as React.CSSProperties : void 0),
403401
height: "100%",
404402
transition,

‎src/SplitView/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ function getStyles(splitView: SplitView): {
152152
return {
153153
root: prefixStyle({
154154
color: theme.baseHigh,
155-
background: theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow,
155+
...theme.acrylicTexture60.style,
156156
display: "inline-block",
157157
position: "relative",
158158
margin: 0,
@@ -174,7 +174,7 @@ function getStyles(splitView: SplitView): {
174174
overflow: "hidden"
175175
}),
176176
pane: prefixStyle({
177-
background: theme.useFluentDesign ? theme.acrylicTexture40.background : theme.altHigh,
177+
...theme.acrylicTexture40.style,
178178
transition,
179179
boxShadow: theme.useFluentDesign ? `rgba(0, 0, 0, 0.34) 0px 4px 24px` : void 0,
180180
...(isCompact ? {

‎src/Theme/StyleManagerSheet.tsx

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)