From 12a94c7cb46f0aa8f9f93c0e4bf0c28fc9e85319 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Fri, 15 Sep 2023 09:14:25 -0500 Subject: [PATCH 1/4] Add new colors and define green theme --- src/App.tsx | 10 ++++++++-- src/colors.tsx | 38 ++++++++++++++++++++++++++++++++++++++ src/index.tsx | 3 ++- src/theme.tsx | 30 ++++++++++++++++++++++++++++-- 4 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 src/colors.tsx diff --git a/src/App.tsx b/src/App.tsx index 987933d3..d1246e51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ import { prefGlobal } from "./preferences"; import { store } from "./store"; -import { theme } from "./theme"; +import { greenTheme, grayscaleTheme } from "./theme"; import "../style/index.css"; @@ -78,7 +78,13 @@ export class App< render(): React.ReactNode { return ( - + diff --git a/src/colors.tsx b/src/colors.tsx new file mode 100644 index 00000000..d0a9957f --- /dev/null +++ b/src/colors.tsx @@ -0,0 +1,38 @@ +export const green = { + 50: "#D6EEDC", + 100: "#ADDCBA", + 200: "#85CB97", + 300: "#5CB975", + 400: "#36AB55", + 500: "#298642", + 600: "#206532", + 700: "#144321", + 800: "#0A2210", + 900: "#051108" +}; + +export const gray = { + 50: "#F7F8F8", + 100: "#E1E3E4", + 200: "#C3C7CB", + 300: "#A6ACB2", + 400: "#90969C", + 500: "#5B5F63", + 600: "#44474A", + 700: "#3C3C3B", + 800: "#242628", + 900: "#1A1C1D" +}; + +export const purple = { + 50: "#E7E0F0", + 100: "#D0C0E5", + 200: "#B9A1DA", + 300: "#A78BD0", + 400: "#8966C2", + 500: "#6643A8", + 600: "#55309D", + 700: "#3B216E", + 800: "#2F1957", + 900: "#231240" +}; diff --git a/src/index.tsx b/src/index.tsx index 6d5d9c40..809391f1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ export * from "./App"; export { IPreferences } from "./preferences"; export { store } from "./store"; -export { theme, themeDecorator } from "./theme"; +export { grayscaleTheme, greenTheme, themeDecorator } from "./theme"; +export * from "./colors"; diff --git a/src/theme.tsx b/src/theme.tsx index fb2dca9b..2711e80b 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,7 +1,9 @@ import { createTheme, ThemeProvider } from "@mui/material"; import React from "react"; -export const theme = createTheme({ +import { green, purple, gray } from "./colors"; + +export const grayscaleTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' }, @@ -15,6 +17,30 @@ export const theme = createTheme({ } }); +export const greenTheme = createTheme({ + typography: { + fontFamily: '"Inter", sans-serif' + }, + palette: { + primary: { + light: green[100], + main: green[400], + dark: green[600] + }, + secondary: { + light: gray[100], + main: gray[400], + dark: gray[600] + }, + warning: { + light: purple[100], + main: purple[400], + dark: purple[600] + }, + mode: "light" + } +}); + export const themeDecorator = (func: any) => ( - {func()} + {func()} ); From 59322c696472bdf22c1eb03e63125800cdba25ab Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Tue, 19 Sep 2023 16:43:52 -0500 Subject: [PATCH 2/4] Add new colors for roles and fix the shade used previously --- src/colors.tsx | 10 ++++++++ src/theme.tsx | 65 +++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 64 insertions(+), 11 deletions(-) diff --git a/src/colors.tsx b/src/colors.tsx index d0a9957f..f6e97ea7 100644 --- a/src/colors.tsx +++ b/src/colors.tsx @@ -36,3 +36,13 @@ export const purple = { 800: "#2F1957", 900: "#231240" }; + +export const red = "#D72D47"; + +export const orange = "#F66A0A"; + +export const blue = "#276BE9"; + +export const white = "#FFFFFF"; + +export const black = "#000000"; diff --git a/src/theme.tsx b/src/theme.tsx index 2711e80b..232845ca 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,7 +1,7 @@ import { createTheme, ThemeProvider } from "@mui/material"; import React from "react"; -import { green, purple, gray } from "./colors"; +import { green, purple, gray, white, red, orange, blue, black } from "./colors"; export const grayscaleTheme = createTheme({ typography: { @@ -9,38 +9,81 @@ export const grayscaleTheme = createTheme({ }, palette: { primary: { - main: "#C4C4C4" + main: "#C4C4C4", + contrastText: white }, secondary: { - main: "#7E7E7E" + main: "#7E7E7E", + contrastText: white } } }); -export const greenTheme = createTheme({ +const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' }, palette: { primary: { - light: green[100], + light: green[300], main: green[400], - dark: green[600] + dark: green[700], + contrastText: white }, secondary: { - light: gray[100], + light: gray[300], main: gray[400], - dark: gray[600] + dark: gray[700], + contrastText: white }, warning: { - light: purple[100], - main: purple[400], - dark: purple[600] + main: orange, + contrastText: white + }, + error: { + main: red, + contrastText: white + }, + info: { + main: blue, + contrastText: white + }, + success: { + main: green[500], + contrastText: white }, mode: "light" } }); +export const greenTheme = createTheme(baseTheme, { + palette: { + accent: baseTheme.palette.augmentColor({ + color: { + light: purple[300], + main: purple[400], + dark: purple[700], + contrastText: white + }, + name: "accent" + }), + white: baseTheme.palette.augmentColor({ + color: { + main: white, + contrastText: black + }, + name: "white" + }), + black: baseTheme.palette.augmentColor({ + color: { + main: black, + contrastText: white + }, + name: "black" + }) + } +}); + export const themeDecorator = (func: any) => ( {func()} ); From 0cb733a6efb1ef7b4fbd61d3264ee211de7c12bf Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Wed, 20 Sep 2023 09:34:28 -0500 Subject: [PATCH 3/4] update main shade of color --- src/theme.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme.tsx b/src/theme.tsx index 232845ca..322c51e8 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -26,13 +26,13 @@ const baseTheme = createTheme({ palette: { primary: { light: green[300], - main: green[400], + main: green[500], dark: green[700], contrastText: white }, secondary: { light: gray[300], - main: gray[400], + main: gray[500], dark: gray[700], contrastText: white }, @@ -61,7 +61,7 @@ export const greenTheme = createTheme(baseTheme, { accent: baseTheme.palette.augmentColor({ color: { light: purple[300], - main: purple[400], + main: purple[500], dark: purple[700], contrastText: white }, From a7fe55c8010fcf207f73c2c6d7462af76fa78681 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Thu, 21 Sep 2023 12:12:26 -0500 Subject: [PATCH 4/4] Change name to condaStoreTheme, define more colors and refactor baseTheme --- src/App.tsx | 4 +-- src/index.tsx | 2 +- src/theme.tsx | 98 +++++++++++++++++++++++++++++++++------------------ 3 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d1246e51..dae49ed7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ import { prefGlobal } from "./preferences"; import { store } from "./store"; -import { greenTheme, grayscaleTheme } from "./theme"; +import { condaStoreTheme, grayscaleTheme } from "./theme"; import "../style/index.css"; @@ -82,7 +82,7 @@ export class App< theme={ this.state.pref.styleType === "grayscale" ? grayscaleTheme - : greenTheme + : condaStoreTheme } > diff --git a/src/index.tsx b/src/index.tsx index 809391f1..da383373 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ export * from "./App"; export { IPreferences } from "./preferences"; export { store } from "./store"; -export { grayscaleTheme, greenTheme, themeDecorator } from "./theme"; +export { grayscaleTheme, condaStoreTheme, themeDecorator } from "./theme"; export * from "./colors"; diff --git a/src/theme.tsx b/src/theme.tsx index 322c51e8..6b058cc8 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -3,10 +3,13 @@ import React from "react"; import { green, purple, gray, white, red, orange, blue, black } from "./colors"; -export const grayscaleTheme = createTheme({ +const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' - }, + } +}); + +export const grayscaleTheme = createTheme(baseTheme, { palette: { primary: { main: "#C4C4C4", @@ -19,23 +22,65 @@ export const grayscaleTheme = createTheme({ } }); -const baseTheme = createTheme({ - typography: { - fontFamily: '"Inter", sans-serif' - }, +export const condaStoreTheme = createTheme(baseTheme, { palette: { - primary: { - light: green[300], - main: green[500], - dark: green[700], - contrastText: white - }, - secondary: { - light: gray[300], - main: gray[500], - dark: gray[700], - contrastText: white - }, + accent: baseTheme.palette.augmentColor({ + color: { + light: purple[300], + main: purple[500], + dark: purple[700], + contrastText: white, + 50: purple[50], + 100: purple[100], + 200: purple[200], + 300: purple[300], + 400: purple[400], + 500: purple[500], + 600: purple[600], + 700: purple[700], + 800: purple[800], + 900: purple[900] + }, + name: "accent" + }), + primary: baseTheme.palette.augmentColor({ + color: { + light: green[300], + main: green[500], + dark: green[700], + contrastText: white, + 50: green[50], + 100: green[100], + 200: green[200], + 300: green[300], + 400: green[400], + 500: green[500], + 600: green[600], + 700: green[700], + 800: green[800], + 900: green[900] + }, + name: "primary" + }), + secondary: baseTheme.palette.augmentColor({ + color: { + light: gray[300], + main: gray[500], + dark: gray[700], + contrastText: white, + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900] + }, + name: "secondary" + }), warning: { main: orange, contrastText: white @@ -52,21 +97,6 @@ const baseTheme = createTheme({ main: green[500], contrastText: white }, - mode: "light" - } -}); - -export const greenTheme = createTheme(baseTheme, { - palette: { - accent: baseTheme.palette.augmentColor({ - color: { - light: purple[300], - main: purple[500], - dark: purple[700], - contrastText: white - }, - name: "accent" - }), white: baseTheme.palette.augmentColor({ color: { main: white, @@ -85,5 +115,5 @@ export const greenTheme = createTheme(baseTheme, { }); export const themeDecorator = (func: any) => ( - {func()} + {func()} );