Skip to content

Commit c0e5a1b

Browse files
ara4nara4n
authored
Merge pull request element-hq#2973 from vector-im/matthew/postcss
Switch CSS to using postcss, and implement a dark theme.
2 parents 641a5c2 + acb85b7 commit c0e5a1b

84 files changed

Lines changed: 667 additions & 606 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"reskindex": "reskindex -h src/header",
3030
"build:res": "node scripts/copy-res.js",
3131
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
32-
"build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
32+
"build:css": "mkdirp build && postcss -c postcss.config.json",
3333
"build:compile": "babel --source-maps -d lib src",
3434
"build:bundle": "NODE_ENV=production webpack -p --progress",
3535
"build:bundle:dev": "webpack --optimize-occurence-order --progress",
@@ -40,7 +40,7 @@
4040
"start:res": "node scripts/copy-res.js -w",
4141
"start:js": "webpack-dev-server -w --progress",
4242
"start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
43-
"start:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
43+
"start:css": "mkdirp build && postcss -c postcss.config.json -w",
4444
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
4545
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
4646
"clean": "rimraf build lib webapp electron/dist",
@@ -76,6 +76,7 @@
7676
"url": "^0.11.0"
7777
},
7878
"devDependencies": {
79+
"autoprefixer": "^6.6.0",
7980
"babel-cli": "^6.5.2",
8081
"babel-core": "^6.14.0",
8182
"babel-eslint": "^6.1.0",
@@ -90,7 +91,6 @@
9091
"babel-preset-es2017": "^6.16.0",
9192
"babel-preset-react": "^6.16.0",
9293
"babel-preset-stage-2": "^6.17.0",
93-
"catw": "^1.0.1",
9494
"chokidar": "^1.6.1",
9595
"cpx": "^1.3.2",
9696
"css-raw-loader": "^0.1.1",
@@ -114,6 +114,14 @@
114114
"mocha": "^2.4.5",
115115
"parallelshell": "^1.2.0",
116116
"phantomjs-prebuilt": "^2.1.7",
117+
"postcss-cli": "^2.6.0",
118+
"postcss-extend": "^1.0.5",
119+
"postcss-import": "^9.0.0",
120+
"postcss-mixins": "^5.4.1",
121+
"postcss-nested": "^1.0.0",
122+
"postcss-scss": "^0.4.0",
123+
"postcss-simple-vars": "^3.0.0",
124+
"postcss-strip-inline-comments": "^0.1.5",
117125
"react-addons-perf": "^15.4.0",
118126
"react-addons-test-utils": "^15.4.0",
119127
"rimraf": "^2.4.3",

‎postcss.config.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"use": [
3+
"postcss-import",
4+
"autoprefixer",
5+
"postcss-simple-vars",
6+
"postcss-extend",
7+
"postcss-nested",
8+
"postcss-mixins",
9+
"postcss-strip-inline-comments"
10+
],
11+
"parser": "postcss-scss",
12+
"input": "src/skins/vector/css/themes/[^_]*.scss",
13+
"dir": "build",
14+
"local-plugins": true
15+
}

src/skins/vector/css/common.css renamed to src/skins/vector/css/_common.scss

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ body {
2929
Arial here. */
3030
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
3131
font-size: 15px;
32-
color: #454545;
32+
background-color: $primary-bg-color;
33+
color: $primary-fg-color;
3334
border: 0px;
3435
margin: 0px;
3536
/* This should render the fonts the same accross browsers */
@@ -41,7 +42,7 @@ div.error {
4142
}
4243

4344
h2 {
44-
color: #454545;
45+
color: $primary-fg-color;
4546
font-weight: 400;
4647
font-size: 18px;
4748
margin-top: 16px;
@@ -51,15 +52,20 @@ h2 {
5152
a:hover,
5253
a:link,
5354
a:visited {
54-
color: #76cfa6;
55+
color: $accent-color;
56+
}
57+
58+
input[type=text] {
59+
background-color: $primary-bg-color;
60+
color: $primary-fg-color;
5561
}
5662

5763
input[type=text].error, input[type=password].error {
58-
border: 1px solid red;
64+
border: 1px solid $warning-color;
5965
}
6066

6167
input[type=text]:focus, textarea:focus {
62-
border: 1px solid #76CFA6;
68+
border: 1px solid $accent-color;
6369
outline: none;
6470
box-shadow: none;
6571
}
@@ -77,10 +83,7 @@ textarea {
7783
/* applied to side-panels and messagepanel when in RoomSettings */
7884
.mx_fadable {
7985
opacity: 1;
80-
-webkit-transition: opacity 0.2s ease-in-out;
81-
-moz-transition: opacity 0.2s ease-in-out;
82-
-ms-transition: opacity 0.2s ease-in-out;
83-
-o-transition: opacity 0.2s ease-in-out;
86+
transition: opacity 0.2s ease-in-out;
8487
}
8588

8689
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
@@ -122,14 +125,8 @@ textarea {
122125
width: 100%;
123126
height: 100%;
124127

125-
display: -webkit-box;
126-
display: -moz-box;
127-
display: -ms-flexbox;
128-
display: -webkit-flex;
129128
display: flex;
130-
-webkit-align-items: center;
131129
align-items: center;
132-
-webkit-justify-content: center;
133130
justify-content: center;
134131
}
135132

@@ -148,8 +145,8 @@ textarea {
148145
}
149146

150147
.mx_Dialog {
151-
background-color: #fff;
152-
color: #747474;
148+
background-color: $primary-bg-color;
149+
color: $light-fg-color;
153150
z-index: 4010;
154151
font-weight: 300;
155152
font-size: 15px;
@@ -168,13 +165,13 @@ textarea {
168165
left: 0;
169166
width: 100%;
170167
height: 100%;
171-
background-color: #e9e9e9;
168+
background-color: $dialog-background-bg-color;
172169
opacity: 0.8;
173170
}
174171

175172
.mx_Dialog_lightbox .mx_Dialog_background {
176173
opacity: 0.85;
177-
background-color: #000;
174+
background-color: $lightbox-background-bg-color;
178175
}
179176

180177
.mx_Dialog_lightbox .mx_Dialog {
@@ -190,7 +187,7 @@ textarea {
190187
.mx_Dialog_content {
191188
margin: 24px 58px 68px 0;
192189
font-size: 14px;
193-
color: #4a4a4a;
190+
color: $primary-fg-color;
194191
word-wrap: break-word;
195192
}
196193

@@ -202,7 +199,7 @@ textarea {
202199
border: 0px;
203200
height: 36px;
204201
border-radius: 40px;
205-
border: solid 1px #76cfa6;
202+
border: solid 1px $accent-color;
206203
font-weight: 600;
207204
font-size: 14px;
208205
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -212,26 +209,26 @@ textarea {
212209
padding-right: 1.5em;
213210
outline: none;
214211
cursor: pointer;
215-
color: #76cfa6;
216-
background-color: #fff;
212+
color: $accent-color;
213+
background-color: $primary-bg-color;
217214

218215
/* align images in buttons (eg spinners) */
219216
vertical-align: middle;
220217
}
221218

222219
.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
223-
color: #fff;
224-
background-color: #76cfa6;
220+
color: $accent-fg-color;
221+
background-color: $accent-color;
225222
}
226223

227224
.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
228-
background-color: #ff0064;
229-
border: solid 1px #ff0064;
225+
background-color: $warning-color;
226+
border: solid 1px $warning-color;
230227
}
231228

232229
.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
233-
background-color: #777777;
234-
border: solid 1px #777777;
230+
background-color: $light-fg-color;
231+
border: solid 1px $light-fg-color;
235232
opacity: 0.7;
236233
}
237234

@@ -241,11 +238,11 @@ textarea {
241238
font-weight: bold;
242239
font-size: 22px;
243240
line-height: 1.4;
244-
color: #454545;
241+
color: $primary-fg-color;
245242
}
246243

247244
.mx_Dialog_title.danger {
248-
color: #ff0064;
245+
color: $warning-color;
249246
}
250247

251248
.mx_TextInputDialog_label {
@@ -256,10 +253,10 @@ textarea {
256253
.mx_TextInputDialog_input {
257254
font-size: 15px;
258255
border-radius: 3px;
259-
border: 1px solid #f0f0f0;
256+
border: 1px solid $input-border-color;
260257
padding: 9px;
261-
color: #454545;
262-
background-color: #fff;
258+
color: $primary-fg-color;
259+
background-color: $primary-bg-color;
263260
}
264261

265262
.mx_emojione {
@@ -268,19 +265,19 @@ textarea {
268265
}
269266

270267
::-moz-selection {
271-
background-color: #76CFA6;
272-
color: white;
268+
background-color: $accent-color;
269+
color: $selection-fg-color;
273270
}
274271

275272
::selection {
276-
background-color: #76CFA6;
277-
color: white;
273+
background-color: $accent-color;
274+
color: $selection-fg-color;
278275
}
279276

280277
/** green button with rounded corners */
281278
.mx_textButton {
282-
color: #fff;
283-
background-color: #76cfa6;
279+
color: $accent-fg-color;
280+
background-color: $accent-color;
284281
border-radius: 17px;
285282
text-align: center;
286283
padding-left: 1em;

‎src/skins/vector/css/_components.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// autogenerated by rethemendex.sh
2+
@import "./_common.scss";
3+
@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
4+
@import "./matrix-react-sdk/structures/_CreateRoom.scss";
5+
@import "./matrix-react-sdk/structures/_FilePanel.scss";
6+
@import "./matrix-react-sdk/structures/_MatrixChat.scss";
7+
@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
8+
@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
9+
@import "./matrix-react-sdk/structures/_RoomView.scss";
10+
@import "./matrix-react-sdk/structures/_SearchBox.scss";
11+
@import "./matrix-react-sdk/structures/_UploadBar.scss";
12+
@import "./matrix-react-sdk/structures/_UserSettings.scss";
13+
@import "./matrix-react-sdk/structures/login/_Login.scss";
14+
@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
15+
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
16+
@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
17+
@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
18+
@import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
19+
@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
20+
@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
21+
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
22+
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
23+
@import "./matrix-react-sdk/views/elements/_RichText.scss";
24+
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
25+
@import "./matrix-react-sdk/views/messages/_MImageBody.scss";
26+
@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
27+
@import "./matrix-react-sdk/views/messages/_MTextBody.scss";
28+
@import "./matrix-react-sdk/views/messages/_TextualEvent.scss";
29+
@import "./matrix-react-sdk/views/messages/_UnknownBody.scss";
30+
@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss";
31+
@import "./matrix-react-sdk/views/rooms/_EntityTile.scss";
32+
@import "./matrix-react-sdk/views/rooms/_EventTile.scss";
33+
@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss";
34+
@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss";
35+
@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
36+
@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
37+
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
38+
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
39+
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
40+
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
41+
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
42+
@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
43+
@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
44+
@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
45+
@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
46+
@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
47+
@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
48+
@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
49+
@import "./matrix-react-sdk/views/voip/_CallView.scss";
50+
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
51+
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
52+
@import "./themes/_base.scss";
53+
@import "./vector-web/_fonts.scss";
54+
@import "./vector-web/structures/_CompatibilityPage.scss";
55+
@import "./vector-web/structures/_LeftPanel.scss";
56+
@import "./vector-web/structures/_RightPanel.scss";
57+
@import "./vector-web/structures/_RoomDirectory.scss";
58+
@import "./vector-web/structures/_RoomSubList.scss";
59+
@import "./vector-web/structures/_ViewSource.scss";
60+
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
61+
@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
62+
@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
63+
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
64+
@import "./vector-web/views/directory/_NetworkDropdown.scss";
65+
@import "./vector-web/views/elements/_ImageView.scss";
66+
@import "./vector-web/views/elements/_Spinner.scss";
67+
@import "./vector-web/views/globals/_GuestWarningBar.scss";
68+
@import "./vector-web/views/globals/_MatrixToolbar.scss";
69+
@import "./vector-web/views/messages/_MessageTimestamp.scss";
70+
@import "./vector-web/views/messages/_SenderProfile.scss";
71+
@import "./vector-web/views/rooms/_RoomDropTarget.scss";
72+
@import "./vector-web/views/rooms/_RoomTooltip.scss";
73+
@import "./vector-web/views/rooms/_SearchBar.scss";
74+
@import "./vector-web/views/settings/_Notifications.scss";

src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css renamed to src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ limitations under the License.
3030
}
3131

3232
.mx_ContextualMenu {
33-
border: solid 1px rgba(187, 187, 187, 0.5);
33+
border: solid 1px $menu-border-color;
3434
border-radius: 4px;
35-
background-color: #f6f6f6;
36-
color: #4a4a4a;
35+
background-color: $menu-bg-color;
36+
color: $primary-fg-color;
3737
position: absolute;
3838
padding: 6px;
3939
font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
5151
width: 0;
5252
height: 0;
5353
border-top: 8px solid transparent;
54-
border-left: 8px solid rgba(187, 187, 187, 0.5);
54+
border-left: 8px solid $menu-border-color;
5555
border-bottom: 8px solid transparent;
5656
}
5757

@@ -60,7 +60,7 @@ limitations under the License.
6060
width: 0;
6161
height: 0;
6262
border-top: 7px solid transparent;
63-
border-left: 7px solid #f6f6f6;
63+
border-left: 7px solid $menu-bg-color;
6464
border-bottom: 7px solid transparent;
6565
position:absolute;
6666
top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
7878
width: 0;
7979
height: 0;
8080
border-top: 8px solid transparent;
81-
border-right: 8px solid rgba(187, 187, 187, 0.5);
81+
border-right: 8px solid $menu-border-color;
8282
border-bottom: 8px solid transparent;
8383
}
8484

@@ -87,7 +87,7 @@ limitations under the License.
8787
width: 0;
8888
height: 0;
8989
border-top: 7px solid transparent;
90-
border-right: 7px solid #f6f6f6;
90+
border-right: 7px solid $menu-bg-color;
9191
border-bottom: 7px solid transparent;
9292
position:absolute;
9393
top: -7px;

0 commit comments

Comments
 (0)