Skip to content

Commit bae685f

Browse files
jamaljsrjamaljsr
committed
feat: move colors and fonts into a theme
1 parent b64cbef commit bae685f

File tree

9 files changed

+82
-54
lines changed

9 files changed

+82
-54
lines changed

‎app/.storybook/preview.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import { addDecorator } from '@storybook/react';
3+
import { ThemeProvider } from 'components/theme';
4+
5+
addDecorator(storyFn => <ThemeProvider>{storyFn()}</ThemeProvider>);

‎app/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@emotion/styled": "10.0.27",
2323
"@improbable-eng/grpc-web": "0.12.0",
2424
"debug": "4.1.1",
25+
"emotion-theming": "10.0.27",
2526
"i18next": "19.4.1",
2627
"i18next-browser-languagedetector": "4.0.2",
2728
"mobx": "5.15.4",

‎app/public/index.html

+1-28
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,12 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
128
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
179
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
10+
<title>Lightning Dashboard</title>
2811
</head>
2912
<body>
3013
<noscript>You need to enable JavaScript to run this app.</noscript>
3114
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4215
</body>
4316
</html>

‎app/src/App.scss

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
@charset "utf-8";
22

3-
// @import '../node_modules/bootstrap/scss/bootstrap';
4-
3+
// required bootstrap styles
54
@import '../node_modules/bootstrap/scss/functions';
65
@import '../node_modules/bootstrap/scss/variables';
76
@import '../node_modules/bootstrap/scss/mixins';
87
@import '../node_modules/bootstrap/scss/utilities';
8+
9+
// optional bootstrap styles
910
@import '../node_modules/bootstrap/scss/reboot';
1011
@import '../node_modules/bootstrap/scss/buttons';
1112
@import '../node_modules/bootstrap/scss/tables';
1213
@import '../node_modules/bootstrap/scss/nav';
1314

14-
/* Open Sans */
15-
1615
@font-face {
1716
font-family: 'OpenSans Light';
1817
src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype');
@@ -45,13 +44,8 @@
4544
}
4645

4746
html,
48-
body {
49-
min-height: 100vh;
50-
}
51-
47+
body,
5248
#root {
5349
min-height: 100vh;
5450
width: 100%;
55-
color: #ffffff;
56-
font-family: 'OpenSans Regular';
5751
}

‎app/src/App.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import React from 'react';
22
import './App.scss';
33
import { Layout } from 'components/layout';
44
import SamplePage from 'components/pages/SamplePage';
5+
import { ThemeProvider } from 'components/theme';
56

67
const App = () => {
78
return (
8-
<Layout>
9-
<SamplePage />
10-
</Layout>
9+
<ThemeProvider>
10+
<Layout>
11+
<SamplePage />
12+
</Layout>
13+
</ThemeProvider>
1114
);
1215
};
1316

‎app/src/components/layout/Layout.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from 'react';
2-
import styled from '@emotion/styled/macro';
2+
import { styled } from 'components/theme';
33
import Sidebar from './Sidebar';
44

55
const Styled = {
66
Background: styled.div`
77
min-height: 100vh;
8-
background-color: #252f4a;
8+
color: ${({ theme }) => theme.colors.white};
9+
background-color: ${({ theme }) => theme.colors.blue};
10+
font-family: ${({ theme }) => theme.fonts.regular};
11+
font-size: 18px;
912
`,
1013
Container: styled.div`
1114
min-height: 100vh;
@@ -16,7 +19,7 @@ const Styled = {
1619
position: fixed;
1720
top: 0;
1821
height: 100vh;
19-
background-color: #212133;
22+
background-color: ${({ theme }) => theme.colors.darkBlue};
2023
width: 285px;
2124
padding: 17px;
2225
`,

‎app/src/components/layout/Sidebar.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import styled from '@emotion/styled/macro';
2+
import { styled } from 'components/theme';
33

44
const Title = styled.div`
55
font-size: 14px;
6-
font-family: 'OpenSans SemiBold';
6+
font-family: ${({ theme }) => theme.fonts.semiBold};
77
letter-spacing: 0;
88
line-height: 19px;
99
padding: 8px 14px;
10-
color: #848a99; // gray
10+
color: ${({ theme }) => theme.colors.gray};
1111
`;
1212

1313
const Nav = styled.ul`
@@ -18,25 +18,29 @@ const Nav = styled.ul`
1818

1919
const NavItem = styled.li`
2020
font-size: 14px;
21-
border-left: 3px solid transparent;
2221
2322
a {
2423
display: block;
2524
height: 50px;
2625
line-height: 50px;
2726
padding: 0 12px;
28-
color: #f5f5f5; // white
27+
border-left: 3px solid transparent;
28+
color: ${({ theme }) => theme.colors.whitish};
2929
30-
&:active,
3130
&:hover {
3231
text-decoration: none;
32+
border-left: 3px solid ${({ theme }) => theme.colors.pink};
3333
}
3434
}
3535
36-
&.active {
37-
border-left: 3px solid #f5f5f5; // white
38-
background-color: #252f4a; // dark blue
36+
&.active a {
37+
border-left: 3px solid ${({ theme }) => theme.colors.whitish};
38+
background-color: ${({ theme }) => theme.colors.blue};
3939
margin-right: -17px;
40+
41+
&:hover {
42+
border-left: 3px solid ${({ theme }) => theme.colors.pink};
43+
}
4044
}
4145
`;
4246

‎app/src/components/theme.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import emotionStyled, { CreateStyled } from '@emotion/styled/macro';
3+
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
4+
5+
interface Theme {
6+
fonts: {
7+
light: string;
8+
regular: string;
9+
semiBold: string;
10+
bold: string;
11+
extraBold: string;
12+
};
13+
colors: {
14+
blue: string;
15+
darkBlue: string;
16+
gray: string;
17+
white: string;
18+
whitish: string;
19+
pink: string;
20+
};
21+
}
22+
23+
const theme: Theme = {
24+
fonts: {
25+
light: "'OpenSans Light'",
26+
regular: "'OpenSans Regular'",
27+
semiBold: "'OpenSans SemiBold'",
28+
bold: "'OpenSans Bold'",
29+
extraBold: "'OpenSans ExtraBold'",
30+
},
31+
colors: {
32+
blue: '#252f4a',
33+
darkBlue: '#212133',
34+
gray: '#848a99',
35+
white: '#ffffff',
36+
whitish: '#f5f5f5',
37+
pink: '#f5406e',
38+
},
39+
};
40+
41+
export const styled = emotionStyled as CreateStyled<typeof theme>;
42+
43+
export const ThemeProvider: React.FC = ({ children }) => {
44+
return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
45+
};

‎app/yarn.lock

+1-1
Original file line numberDiff line numberDiff line change
@@ -5669,7 +5669,7 @@ emojis-list@^3.0.0:
56695669
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
56705670
integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
56715671

5672-
emotion-theming@^10.0.19:
5672+
emotion-theming@10.0.27, emotion-theming@^10.0.19:
56735673
version "10.0.27"
56745674
resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
56755675
integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==

0 commit comments

Comments
 (0)