Skip to content

Commit 4c2d6e8

Browse files
shaurya947shaurya947
committed
Merge pull request #1746 from shaurya947/consistent-theming-values
Removed hard-coded values from theme-manager
2 parents e128a36 + 202bccc commit 4c2d6e8

File tree

10 files changed

+63
-63
lines changed

10 files changed

+63
-63
lines changed

‎docs/src/app/components/code-example/code-example.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ const CodeExample = React.createClass({
5858

5959
let palette = this.state.muiTheme.rawTheme.palette;
6060
let borderColor = palette.borderColor;
61-
let canvasColor = palette.canvasColor;
61+
let alternateTextColor = palette.alternateTextColor;
6262

6363
let styles = {
6464
root: {
65-
backgroundColor: canvasColor,
65+
backgroundColor: alternateTextColor,
6666
marginBottom: 32,
6767
overflow: 'hidden'
6868
},

‎docs/src/app/components/pages/customization/themes.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const ThemesPage = React.createClass({
6969
},
7070

7171
getStyles() {
72-
let canvasColor = this.state.muiTheme.rawTheme.palette.canvasColor;
72+
let alternateTextColor = this.state.muiTheme.rawTheme.palette.alternateTextColor;
7373
let borderColor = this.state.muiTheme.rawTheme.palette.borderColor;
7474
let styles = {
7575
group: {
@@ -105,7 +105,7 @@ const ThemesPage = React.createClass({
105105
marginBottom: '0px'
106106
},
107107
codeExample: {
108-
backgroundColor: canvasColor,
108+
backgroundColor: alternateTextColor,
109109
marginBottom: '32px'
110110
},
111111
title: {
@@ -118,7 +118,7 @@ const ThemesPage = React.createClass({
118118
color: Typography.textDarkBlack
119119
},
120120
liveExamplePaper: {
121-
backgroundColor: canvasColor,
121+
backgroundColor: alternateTextColor,
122122
marginBottom: 32,
123123
overflow: 'hidden'
124124
},
@@ -167,12 +167,12 @@ const ThemesPage = React.createClass({
167167
' palette: {\n' +
168168
' primary1Color: Colors.cyan500,\n' +
169169
' primary2Color: Colors.cyan700,\n' +
170-
' primary3Color: Colors.cyan100,\n' +
170+
' primary3Color: Colors.lightBlack,\n' +
171171
' accent1Color: Colors.pinkA200,\n' +
172-
' accent2Color: Colors.pinkA400,\n' +
173-
' accent3Color: Colors.pinkA100,\n' +
172+
' accent2Color: Colors.grey100,\n' +
173+
' accent3Color: Colors.grey500,\n' +
174174
' textColor: Colors.darkBlack,\n' +
175-
' canvasColor: Colors.white,\n' +
175+
' alternateTextColor: Colors.white,\n' +
176176
' borderColor: Colors.grey300,\n' +
177177
' disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),\n' +
178178
' },\n' +

‎docs/src/app/components/pages/get-started/installation.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Installation = React.createClass({
5757
color: Typography.textDarkBlack
5858
},
5959
codeExample: {
60-
backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
60+
backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
6161
marginBottom: '32px'
6262
},
6363
inlineCode: {

‎docs/src/app/components/pages/get-started/prerequisites.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Prerequisites = React.createClass({
5757
color: Typography.textDarkBlack
5858
},
5959
codeExample: {
60-
backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
60+
backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
6161
marginBottom: '32px'
6262
},
6363
inlineCode: {

‎src/app-canvas.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const AppCanvas = React.createClass({
3838
render() {
3939
let styles = {
4040
height: '100%',
41-
backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor,
41+
backgroundColor: this.state.muiTheme.rawTheme.palette.alternateTextColor,
4242
WebkitFontSmoothing: 'antialiased',
4343
};
4444

‎src/dialog.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ let Dialog = React.createClass({
212212
main: this.mergeAndPrefix(main, this.props.style),
213213
content: this.mergeAndPrefix(content, this.props.contentStyle),
214214
paper: {
215-
background: this.state.muiTheme.rawTheme.palette.canvasColor,
215+
background: this.state.muiTheme.rawTheme.palette.alternateTextColor,
216216
},
217217
body: this.mergeStyles(body, this.props.bodyStyle),
218218
title: this.mergeStyles(title, this.props.titleStyle),

‎src/styles/raw-themes/dark-raw-theme.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ module.exports = {
66
spacing: Spacing,
77
fontFamily: 'Roboto, sans-serif',
88
palette: {
9-
primary1Color: Colors.grey500,
9+
primary1Color: Colors.cyan700,
1010
primary2Color: Colors.cyan700,
11-
primary3Color: Colors.cyan100,
11+
primary3Color: Colors.grey600,
1212
accent1Color: Colors.pinkA200,
1313
accent2Color: Colors.pinkA400,
1414
accent3Color: Colors.pinkA100,
1515
textColor: Colors.fullWhite,
16-
canvasColor: '#303030',
16+
alternateTextColor: '#303030',
1717
borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3),
1818
disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3),
1919
},

‎src/styles/raw-themes/light-raw-theme.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ module.exports = {
1414
palette: {
1515
primary1Color: Colors.cyan500,
1616
primary2Color: Colors.cyan700,
17-
primary3Color: Colors.cyan100,
17+
primary3Color: Colors.lightBlack,
1818
accent1Color: Colors.pinkA200,
19-
accent2Color: Colors.pinkA400,
20-
accent3Color: Colors.pinkA100,
19+
accent2Color: Colors.grey100,
20+
accent3Color: Colors.grey500,
2121
textColor: Colors.darkBlack,
22-
canvasColor: Colors.white,
22+
alternateTextColor: Colors.white,
2323
borderColor: Colors.grey300,
2424
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
2525
},

‎src/styles/theme-manager.js

+37-37
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
let returnObj = {
1111
appBar: {
1212
color: rawTheme.palette.primary1Color,
13-
textColor: Colors.darkWhite,
13+
textColor: rawTheme.palette.alternateTextColor,
1414
height: rawTheme.spacing.desktopKeylineIncrement,
1515
},
1616
avatar: {
@@ -31,16 +31,16 @@ module.exports = {
3131
},
3232
datePicker: {
3333
color: rawTheme.palette.primary1Color,
34-
textColor: Colors.white,
34+
textColor: rawTheme.palette.alternateTextColor,
3535
calendarTextColor: rawTheme.palette.textColor,
3636
selectColor: rawTheme.palette.primary2Color,
37-
selectTextColor: Colors.white,
37+
selectTextColor: rawTheme.palette.alternateTextColor,
3838
},
3939
dropDownMenu: {
4040
accentColor: rawTheme.palette.borderColor,
4141
},
4242
flatButton: {
43-
color: rawTheme.palette.canvasColor,
43+
color: rawTheme.palette.alternateTextColor,
4444
textColor: rawTheme.palette.textColor,
4545
primaryTextColor: rawTheme.palette.accent1Color,
4646
secondaryTextColor: rawTheme.palette.primary1Color,
@@ -49,24 +49,24 @@ module.exports = {
4949
buttonSize: 56,
5050
miniSize: 40,
5151
color: rawTheme.palette.accent1Color,
52-
iconColor: Colors.white,
52+
iconColor: rawTheme.palette.alternateTextColor,
5353
secondaryColor: rawTheme.palette.primary1Color,
54-
secondaryIconColor: Colors.white,
54+
secondaryIconColor: rawTheme.palette.alternateTextColor,
5555
disabledTextColor: rawTheme.palette.disabledColor,
5656
},
5757
inkBar: {
5858
backgroundColor: rawTheme.palette.accent1Color,
5959
},
6060
leftNav: {
6161
width: rawTheme.spacing.desktopKeylineIncrement * 4,
62-
color: Colors.white,
62+
color: rawTheme.palette.alternateTextColor,
6363
},
6464
listItem: {
6565
nestedLevelDepth: 18,
6666
},
6767
menu: {
68-
backgroundColor: Colors.white,
69-
containerBackgroundColor: Colors.white,
68+
backgroundColor: rawTheme.palette.alternateTextColor,
69+
containerBackgroundColor: rawTheme.palette.alternateTextColor,
7070
},
7171
menuItem: {
7272
dataHeight: 32,
@@ -81,11 +81,11 @@ module.exports = {
8181
textColor: rawTheme.palette.primary1Color,
8282
},
8383
paper: {
84-
backgroundColor: Colors.white,
84+
backgroundColor: rawTheme.palette.alternateTextColor,
8585
},
8686
radioButton: {
8787
borderColor: rawTheme.palette.textColor,
88-
backgroundColor: Colors.white,
88+
backgroundColor: rawTheme.palette.alternateTextColor,
8989
checkedColor: rawTheme.palette.primary1Color,
9090
requiredColor: rawTheme.palette.primary1Color,
9191
disabledColor: rawTheme.palette.disabledColor,
@@ -94,81 +94,81 @@ module.exports = {
9494
labelDisabledColor: rawTheme.palette.disabledColor,
9595
},
9696
raisedButton: {
97-
color: Colors.white,
97+
color: rawTheme.palette.alternateTextColor,
9898
textColor: rawTheme.palette.textColor,
9999
primaryColor: rawTheme.palette.accent1Color,
100-
primaryTextColor: Colors.white,
100+
primaryTextColor: rawTheme.palette.alternateTextColor,
101101
secondaryColor: rawTheme.palette.primary1Color,
102-
secondaryTextColor: Colors.white,
102+
secondaryTextColor: rawTheme.palette.alternateTextColor,
103103
},
104104
refreshIndicator: {
105-
strokeColor: Colors.grey300,
105+
strokeColor: rawTheme.palette.borderColor,
106106
loadingStrokeColor: rawTheme.palette.primary1Color,
107107
},
108108
slider: {
109109
trackSize: 2,
110-
trackColor: Colors.minBlack,
111-
trackColorSelected: Colors.grey500,
110+
trackColor: rawTheme.palette.primary3Color,
111+
trackColorSelected: rawTheme.palette.accent3Color,
112112
handleSize: 12,
113113
handleSizeDisabled: 8,
114114
handleSizeActive: 18,
115-
handleColorZero: Colors.grey400,
116-
handleFillColor: Colors.white,
117-
selectionColor: rawTheme.palette.primary3Color,
115+
handleColorZero: rawTheme.palette.borderColor,
116+
handleFillColor: rawTheme.palette.alternateTextColor,
117+
selectionColor: rawTheme.palette.primary1Color,
118118
rippleColor: rawTheme.palette.primary1Color,
119119
},
120120
snackbar: {
121-
textColor: Colors.white,
122-
backgroundColor: '#323232',
121+
textColor: rawTheme.palette.alternateTextColor,
122+
backgroundColor: rawTheme.palette.textColor,
123123
actionColor: rawTheme.palette.accent1Color,
124124
},
125125
table: {
126-
backgroundColor: Colors.white,
126+
backgroundColor: rawTheme.palette.alternateTextColor,
127127
},
128128
tableHeader: {
129129
borderColor: rawTheme.palette.borderColor,
130130
},
131131
tableHeaderColumn: {
132-
textColor: Colors.lightBlack,
132+
textColor: rawTheme.palette.primary3Color,
133133
height: 56,
134134
spacing: 24,
135135
},
136136
tableFooter: {
137137
borderColor: rawTheme.palette.borderColor,
138-
textColor: Colors.lightBlack,
138+
textColor: rawTheme.palette.primary3Color,
139139
},
140140
tableRow: {
141-
hoverColor: Colors.grey200,
141+
hoverColor: rawTheme.palette.accent2Color,
142142
stripeColor: ColorManipulator.lighten(rawTheme.palette.primary1Color, 0.55),
143-
selectedColor: Colors.grey300,
144-
textColor: Colors.darkBlack,
143+
selectedColor: rawTheme.palette.borderColor,
144+
textColor: rawTheme.palette.textColor,
145145
borderColor: rawTheme.palette.borderColor,
146146
},
147147
tableRowColumn: {
148148
height: 48,
149149
spacing: 24,
150150
},
151151
timePicker: {
152-
color: Colors.white,
153-
textColor: Colors.grey600,
152+
color: rawTheme.palette.alternateTextColor,
153+
textColor: rawTheme.palette.accent3Color,
154154
accentColor: rawTheme.palette.primary1Color,
155-
clockColor: Colors.black,
155+
clockColor: rawTheme.palette.primary3Color,
156156
selectColor: rawTheme.palette.primary2Color,
157-
selectTextColor: Colors.white,
157+
selectTextColor: rawTheme.palette.alternateTextColor,
158158
},
159159
toggle: {
160160
thumbOnColor: rawTheme.palette.primary1Color,
161-
thumbOffColor: Colors.grey50,
162-
thumbDisabledColor: Colors.grey400,
161+
thumbOffColor: rawTheme.palette.accent2Color,
162+
thumbDisabledColor: rawTheme.palette.borderColor,
163163
thumbRequiredColor: rawTheme.palette.primary1Color,
164164
trackOnColor: ColorManipulator.fade(rawTheme.palette.primary1Color, 0.5),
165-
trackOffColor: Colors.minBlack,
166-
trackDisabledColor: Colors.faintBlack,
165+
trackOffColor: rawTheme.palette.primary3Color,
166+
trackDisabledColor: rawTheme.palette.primary3Color,
167167
labelColor: rawTheme.palette.textColor,
168168
labelDisabledColor: rawTheme.palette.disabledColor,
169169
},
170170
toolbar: {
171-
backgroundColor: ColorManipulator.darken('#eeeeee', 0.05),
171+
backgroundColor: ColorManipulator.darken(rawTheme.palette.accent2Color, 0.05),
172172
height: 56,
173173
titleFontSize: 20,
174174
iconColor: 'rgba(0, 0, 0, .40)',

‎test/theming-v12-spec.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ describe('Theming', () => {
5959
let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div');
6060
let firstDiv = appbarDivs[0].getDOMNode();
6161

62-
expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)');
62+
expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)');
6363
});
6464

6565
it('should display with passed down dark theme and overriden specific attribute', () => {
@@ -71,7 +71,7 @@ describe('Theming', () => {
7171
let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1');
7272
let firstH1 = appbarH1s[0].getDOMNode();
7373

74-
expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)');
74+
expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)');
7575
expect(firstH1.style.color).to.equal('rgb(98, 0, 234)');
7676
});
7777

@@ -85,7 +85,7 @@ describe('Theming', () => {
8585
let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div');
8686
let firstDiv = appbarDivs[0].getDOMNode();
8787

88-
expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)');
88+
expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)');
8989
});
9090

9191
it('should display with passed down dark theme and overriden specific attribute', () => {
@@ -97,7 +97,7 @@ describe('Theming', () => {
9797
let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1');
9898
let firstH1 = appbarH1s[0].getDOMNode();
9999

100-
expect(firstDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)');
100+
expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)');
101101
expect(firstH1.style.color).to.equal('rgb(98, 0, 234)');
102102
});
103103

@@ -115,8 +115,8 @@ describe('Theming', () => {
115115
let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'h1');
116116
let firstH1 = appbarH1s[0].getDOMNode();
117117

118-
expect(appbarDiv.style.backgroundColor).to.equal('rgb(158, 158, 158)');
119-
expect(firstH1.style.color).to.equal('rgba(255, 255, 255, 0.867188)');
118+
expect(appbarDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)');
119+
expect(firstH1.style.color).to.equal('rgb(48, 48, 48)');
120120

121121
//simulate button click
122122
TestUtils.Simulate.click(buttonNode);

0 commit comments

Comments
 (0)