Skip to content

Commit 7746825

Browse files
tjlav5tjlav5
authored
First pass at consolidating colors tokens into css-vars (#1085)
* First pass at consolidating colors tokens into css-vars * One source of truth for colors * Pre-work to support theming * Fix formatter
1 parent f94cafd commit 7746825

File tree

4 files changed

+93
-61
lines changed

4 files changed

+93
-61
lines changed

‎src/colors.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
export const background = '#F6F7F9';
17-
export const primary = '#681DA8'; // Google Purple 900.
18-
// Note: This secondary is only suitable for white (or near-white) backgrounds
19-
// On a 0.93 background, grey100 = (245,245,245) we require 55% or above
20-
export const secondary = 'rgba(0, 0, 0, 0.55)';
16+
export const background = 'var(--background)';
17+
export const primary = 'var(--primary)';
18+
export const primaryRgb = 'var(--primary-rgb)';
19+
export const secondary = 'var(--secondary)';
20+
export const secondaryRgb = 'var(--secondary-rgb)';
21+
export const error = 'var(--error)';
2122

22-
export const grey100 = '#F5F5F5';
23+
export const grey100 = 'var(--surface)';
2324

24-
export const navBarPrimary = '#D7AEFB'; // Google Purple 200.
25-
export const navBarSurface = '#0c2d48'; // Navy 700
26-
export const navBarOnSurface = '#FFF';
25+
export const navBarPrimary = 'var(--nav-bar-primary)';
26+
export const navBarSurface = 'var(--nav-bar-surface)';
27+
export const navBarOnSurface = 'var(--nav-bar-on-surface)';

‎src/index.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,52 @@ code {
5050
font-weight: 500;
5151
line-height: 25px;
5252
}
53+
54+
:root {
55+
--background: #f6f7f9;
56+
--primary: #681da8;
57+
--primary-rgb: '104, 29, 168, 1';
58+
--secondary: rgba(0, 0, 0, 0.55);
59+
--error: #d32f2f;
60+
--surface: #f5f5f5;
61+
62+
--nav-bar-primary: #d7aefb;
63+
--nav-bar-surface: #0c2d48;
64+
--nav-bar-on-surface: #fff;
65+
66+
--tip-background: #f3e5f5;
67+
--tip-primary: var(--primary);
68+
--tip-primary-rgb: '104, 29, 168';
69+
--tip-text-icon-on-background: var(--primary);
70+
--tip-text-primary-on-background: var(--primary);
71+
--tip-text-secondary-on-background: rgba(var(--primary-rgb), 0.7);
72+
73+
--success-background: #e0f2f1;
74+
--success-primary: #00796b;
75+
--success-primary-rgb: '0, 121, 107';
76+
--success-text-icon-on-background: #00796b;
77+
--success-text-primary-on-background: #00695c;
78+
--success-text-secondary-on-background: rgba(0, 121, 107, 0.7);
79+
80+
--note-background: #e5eaf0;
81+
--note-primary: #476282;
82+
--note-primary-rgb: '71, 98, 130';
83+
--note-text-icon-on-background: #476282;
84+
--note-text-primary-on-background: #1b3a57;
85+
--note-text-secondary-on-background: rgba(71, 98, 130, 0.7);
86+
87+
--caution-background: #fff3e0;
88+
--caution-primary: #ff8f00;
89+
--caution-primary-rgb: '255, 143, 0';
90+
--caution-on-primary: '#FFF';
91+
--caution-text-icon-on-background: #ff8f00;
92+
--caution-text-primary-on-background: #bf360c;
93+
--caution-text-secondary-on-background: rgba(191, 54, 12, 0.7);
94+
95+
--error-background: #fbe9e7;
96+
--error-primary: #d32f2f;
97+
--error-primary-rgb: '211, 47, 47';
98+
--error-text-icon-on-background: #d32f2f;
99+
--error-text-primary-on-background: #c62828;
100+
--error-text-secondary-on-background: rgba(198, 40, 40, 0.7);
101+
}

‎src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,11 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
2929
import { CompatRouter } from 'react-router-dom-v5-compat';
3030

3131
import { initGtag } from './analytics';
32-
import { background, primary, secondary } from './colors';
32+
import { background, error, primary, primaryRgb, secondary } from './colors';
3333
import App from './components/App';
3434
import { EmulatorConfigProvider } from './components/common/EmulatorConfigProvider';
3535
import { FirestoreRequestsProvider } from './components/Firestore/Requests/FirestoreRequestsProvider';
3636
import configureStore from './configureStore';
37-
import { error } from './themes';
3837

3938
const store = configureStore();
4039
initGtag();
@@ -69,8 +68,9 @@ root.render(
6968
options={{
7069
background,
7170
primary,
72-
primaryRgb: '104, 29, 168',
71+
primaryRgb,
7372
secondary,
73+
'text-primary-on-background': secondary,
7474
'text-secondary-on-background': secondary,
7575
error,
7676
}}

‎src/themes.tsx

Lines changed: 31 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,68 +17,50 @@
1717
import { ThemeProvider } from '@rmwc/theme';
1818
import React from 'react';
1919

20-
import { primary } from './colors';
21-
22-
/** Error color used in global theme */
23-
export const error = '#d32f2f'; // Red 700
24-
25-
const purple50 = '#f3e5f5';
2620
export const tipTheme = {
27-
background: purple50,
28-
primary,
29-
primaryRgb: '104, 29, 168',
30-
textIconOnBackground: primary,
31-
textPrimaryOnBackground: primary,
32-
textSecondaryOnBackground: `rgba(${primary}, 0.7)`,
21+
background: 'var(--tip-background)',
22+
primary: 'var(--tip-primary)',
23+
primaryRgb: 'var(--tip-primary-rgb)',
24+
textIconOnBackground: 'var(--tip-text-icon-on-background)',
25+
textPrimaryOnBackground: 'var(--tip-text-primary-on-background)',
26+
textSecondaryOnBackground: 'var(--tip-text-secondary-on-background)',
3327
};
3428

35-
const teal50 = '#e0f2f1';
36-
const teal700 = '#00796b';
37-
const teal800 = '#00695c';
3829
export const successTheme = {
39-
background: teal50,
40-
primary: teal700,
41-
primaryRgb: '0, 121, 107',
42-
textIconOnBackground: teal700,
43-
textPrimaryOnBackground: teal800,
44-
textSecondaryOnBackground: `rgba(${teal800}, 0.7)`,
30+
background: 'var(--success-background)',
31+
primary: 'var(--success-primary)',
32+
primaryRgb: 'var(--success-primary-rgb)',
33+
textIconOnBackground: 'var(--success-text-icon-on-background)',
34+
textPrimaryOnBackground: 'var(--success-text-primary-on-background)',
35+
textSecondaryOnBackground: 'var(--success-text-secondary-on-background)',
4536
};
4637

47-
const navy20 = '#e5eaf0';
48-
const navy300 = '#476282';
49-
const navy600 = '#1b3a57';
5038
export const noteTheme = {
51-
background: navy20,
52-
primary: navy300,
53-
primaryRgb: '71, 98, 130',
54-
textIconOnBackground: navy300,
55-
textPrimaryOnBackground: navy600,
56-
textSecondaryOnBackground: `rgba(${navy600}, 0.7)`,
39+
background: 'var(--note-background)',
40+
primary: 'var(--note-primary)',
41+
primaryRgb: 'var(--note-primary-rgb)',
42+
textIconOnBackground: 'var(--note-text-icon-on-background)',
43+
textPrimaryOnBackground: 'var(--note-text-primary-on-background)',
44+
textSecondaryOnBackground: 'var(--note-text-secondary-on-background)',
5745
};
5846

59-
const orange50 = '#fff3e0';
60-
const amber800 = '#ff8f00';
61-
const deepOrange900 = '#bf360c';
6247
export const cautionTheme = {
63-
background: orange50,
64-
primary: amber800,
65-
primaryRgb: '255, 143, 0',
66-
onPrimary: 'white',
67-
textIconOnBackground: amber800,
68-
textPrimaryOnBackground: deepOrange900,
69-
textSecondaryOnBackground: `rgba(${deepOrange900}, 0.7)`,
48+
background: 'var(--caution-background)',
49+
primary: 'var(--caution-primary)',
50+
primaryRgb: 'var(--caution-primary-rgb)',
51+
onPrimary: 'var(--caution-on-primary)',
52+
textIconOnBackground: 'var(--caution-text-icon-on-background)',
53+
textPrimaryOnBackground: 'var(--caution-text-primary-on-background)',
54+
textSecondaryOnBackground: 'var(--caution-text-secondary-on-background)',
7055
};
7156

72-
const deepOrange50 = '#fbe9e7';
73-
const red700 = '#d32f2f';
74-
const red800 = '#c62828';
7557
export const errorTheme = {
76-
background: deepOrange50,
77-
primary: red700,
78-
primaryRgb: '211, 47, 47',
79-
textIconOnBackground: red700,
80-
textPrimaryOnBackground: red800,
81-
textSecondaryOnBackground: `rgba(${red800}, 0.7)`,
58+
background: 'var(--error-background)',
59+
primary: 'var(--error-primary)',
60+
primaryRgb: 'var(--error-primary-rgb)',
61+
textIconOnBackground: 'var(--error-text-icon-on-background)',
62+
textPrimaryOnBackground: 'var(--error-text-primary-on-background)',
63+
textSecondaryOnBackground: 'var(--error-text-secondary-on-background)',
8264
};
8365

8466
/** Possible theme types */

0 commit comments

Comments
 (0)