First pass at consolidating colors tokens into css-vars

src/colors.tsx

@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const background = '#F6F7F9';
-export const primary = '#681DA8'; // Google Purple 900.
-// Note: This secondary is only suitable for white (or near-white) backgrounds
-// On a 0.93 background, grey100 = (245,245,245) we require 55% or above
-export const secondary = 'rgba(0, 0, 0, 0.55)';
+export const background = 'var(--background)';
+export const primary = 'var(--primary)';
+export const primaryRgb = 'var(--primary-rgb)';
+export const secondary = 'var(--secondary)';
+export const secondaryRgb = 'var(--secondary-rgb)';
+export const error = 'var(--error)';
 
-export const grey100 = '#F5F5F5';
+export const grey100 = 'var(--surface)';
 
-export const navBarPrimary = '#D7AEFB'; // Google Purple 200.
-export const navBarSurface = '#0c2d48'; // Navy 700
-export const navBarOnSurface = '#FFF';
+export const navBarPrimary = 'var(--nav-bar-primary)';
+export const navBarSurface = 'var(--nav-bar-surface)';
+export const navBarOnSurface = 'var(--nav-bar-on-surface)';

src/index.scss

@@ -50,3 +50,52 @@ code {
   font-weight: 500;
   line-height: 25px;
 }
+
+:root {
+  --background: #f6f7f9;
+  --primary: #681da8;
+  --primary-rgb: '104, 29, 168, 1';
+  --secondary: rgba(0, 0, 0, 0.55);
+  --error: #d32f2f;
+  --surface: #f5f5f5;
+
+  --nav-bar-primary: #d7aefb;
+  --nav-bar-surface: #0c2d48;
+  --nav-bar-on-surface: #fff;
+
+  --tip-background: #f3e5f5;
+  --tip-primary: var(--primary);
+  --tip-primary-rgb: '104, 29, 168';
+  --tip-text-icon-on-background: var(--primary);
+  --tip-text-primary-on-background: var(--primary);
+  --tip-text-secondary-on-background: rgba(var(--primary-rgb), 0.7);
+
+  --success-background: #e0f2f1;
+  --success-primary: #00796b;
+  --success-primary-rgb: '0, 121, 107';
+  --success-text-icon-on-background: #00796b;
+  --success-text-primary-on-background: #00695c;
+  --success-text-secondary-on-background: rgba(0, 121, 107, 0.7);
+
+  --note-background: #e5eaf0;
+  --note-primary: #476282;
+  --note-primary-rgb: '71, 98, 130';
+  --note-text-icon-on-background: #476282;
+  --note-text-primary-on-background: #1b3a57;
+  --note-text-secondary-on-background: rgba(71, 98, 130, 0.7);
+
+  --caution-background: #fff3e0;
+  --caution-primary: #ff8f00;
+  --caution-primary-rgb: '255, 143, 0';
+  --caution-on-primary: '#FFF';
+  --caution-text-icon-on-background: #ff8f00;
+  --caution-text-primary-on-background: #bf360c;
+  --caution-text-secondary-on-background: rgba(191, 54, 12, 0.7);
+
+  --error-background: #fbe9e7;
+  --error-primary: #d32f2f;
+  --error-primary-rgb: '211, 47, 47';
+  --error-text-icon-on-background: #d32f2f;
+  --error-text-primary-on-background: #c62828;
+  --error-text-secondary-on-background: rgba(198, 40, 40, 0.7);
+}

src/index.tsx

@@ -29,12 +29,11 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { initGtag } from './analytics';
-import { background, primary, secondary } from './colors';
+import { background, error, primary, primaryRgb, secondary } from './colors';
 import App from './components/App';
 import { EmulatorConfigProvider } from './components/common/EmulatorConfigProvider';
 import { FirestoreRequestsProvider } from './components/Firestore/Requests/FirestoreRequestsProvider';
 import configureStore from './configureStore';
-import { error } from './themes';
 
 const store = configureStore();
 initGtag();
@@ -69,8 +68,9 @@ root.render(
       options={{
         background,
         primary,
-        primaryRgb: '104, 29, 168',
+        primaryRgb,
         secondary,
+        'text-primary-on-background': secondary,
         'text-secondary-on-background': secondary,
         error,
       }}

src/themes.tsx

@@ -17,68 +17,50 @@
 import { ThemeProvider } from '@rmwc/theme';
 import React from 'react';
 
-import { primary } from './colors';
-
-/** Error color used in global theme */
-export const error = '#d32f2f'; // Red 700
-
-const purple50 = '#f3e5f5';
 export const tipTheme = {
-  background: purple50,
-  primary,
-  primaryRgb: '104, 29, 168',
-  textIconOnBackground: primary,
-  textPrimaryOnBackground: primary,
-  textSecondaryOnBackground: `rgba(${primary}, 0.7)`,
+  background: 'var(--tip-background)',
+  primary: 'var(--tip-primary)',
+  primaryRgb: 'var(--tip-primary-rgb)',
+  textIconOnBackground: 'var(--tip-text-icon-on-background)',
+  textPrimaryOnBackground: 'var(--tip-text-primary-on-background)',
+  textSecondaryOnBackground: 'var(--tip-text-secondary-on-background)',
 };
 
-const teal50 = '#e0f2f1';
-const teal700 = '#00796b';
-const teal800 = '#00695c';
 export const successTheme = {
-  background: teal50,
-  primary: teal700,
-  primaryRgb: '0, 121, 107',
-  textIconOnBackground: teal700,
-  textPrimaryOnBackground: teal800,
-  textSecondaryOnBackground: `rgba(${teal800}, 0.7)`,
+  background: 'var(--success-background)',
+  primary: 'var(--success-primary)',
+  primaryRgb: 'var(--success-primary-rgb)',
+  textIconOnBackground: 'var(--success-text-icon-on-background)',
+  textPrimaryOnBackground: 'var(--success-text-primary-on-background)',
+  textSecondaryOnBackground: 'var(--success-text-secondary-on-background)',
 };
 
-const navy20 = '#e5eaf0';
-const navy300 = '#476282';
-const navy600 = '#1b3a57';
 export const noteTheme = {
-  background: navy20,
-  primary: navy300,
-  primaryRgb: '71, 98, 130',
-  textIconOnBackground: navy300,
-  textPrimaryOnBackground: navy600,
-  textSecondaryOnBackground: `rgba(${navy600}, 0.7)`,
+  background: 'var(--note-background)',
+  primary: 'var(--note-primary)',
+  primaryRgb: 'var(--note-primary-rgb)',
+  textIconOnBackground: 'var(--note-text-icon-on-background)',
+  textPrimaryOnBackground: 'var(--note-text-primary-on-background)',
+  textSecondaryOnBackground: 'var(--note-text-secondary-on-background)',
 };
 
-const orange50 = '#fff3e0';
-const amber800 = '#ff8f00';
-const deepOrange900 = '#bf360c';
 export const cautionTheme = {
-  background: orange50,
-  primary: amber800,
-  primaryRgb: '255, 143, 0',
-  onPrimary: 'white',
-  textIconOnBackground: amber800,
-  textPrimaryOnBackground: deepOrange900,
-  textSecondaryOnBackground: `rgba(${deepOrange900}, 0.7)`,
+  background: 'var(--caution-background)',
+  primary: 'var(--caution-primary)',
+  primaryRgb: 'var(--caution-primary-rgb)',
+  onPrimary: 'var(--caution-on-primary)',
+  textIconOnBackground: 'var(--caution-text-icon-on-background)',
+  textPrimaryOnBackground: 'var(--caution-text-primary-on-background)',
+  textSecondaryOnBackground: 'var(--caution-text-secondary-on-background)',
 };
 
-const deepOrange50 = '#fbe9e7';
-const red700 = '#d32f2f';
-const red800 = '#c62828';
 export const errorTheme = {
-  background: deepOrange50,
-  primary: red700,
-  primaryRgb: '211, 47, 47',
-  textIconOnBackground: red700,
-  textPrimaryOnBackground: red800,
-  textSecondaryOnBackground: `rgba(${red800}, 0.7)`,
+  background: 'var(--error-background)',
+  primary: 'var(--error-primary)',
+  primaryRgb: 'var(--error-primary-rgb)',
+  textIconOnBackground: 'var(--error-text-icon-on-background)',
+  textPrimaryOnBackground: 'var(--error-text-primary-on-background)',
+  textSecondaryOnBackground: 'var(--error-text-secondary-on-background)',
 };
 
 /** Possible theme types */