From fbb88f781f4b615791737c66bb0d90bb8a3633f6 Mon Sep 17 00:00:00 2001 From: Harry Hogg Date: Mon, 30 Oct 2023 13:55:43 +0000 Subject: [PATCH] style(Colors): Updated colors --- workspaces/package/src/Box/Box.css | 3 + workspaces/package/src/Code/CodeWindow.tsx | 7 +- workspaces/package/src/Input/Input.css | 3 + workspaces/package/src/Link/Link.css | 4 + workspaces/package/src/Table/Table.css | 4 +- workspaces/package/src/types.ts | 1 + workspaces/package/src/variables.css | 94 ++++++++++--------- workspaces/package/src/variables.ts | 20 ++-- .../site/src/components/Color/Color.tsx | 2 +- .../site/src/components/Menu/MenuItem.tsx | 2 +- .../site/src/components/Showcase/Showcase.tsx | 20 ++-- workspaces/site/src/pages/Themes.tsx | 8 ++ 12 files changed, 97 insertions(+), 71 deletions(-) diff --git a/workspaces/package/src/Box/Box.css b/workspaces/package/src/Box/Box.css index a5d42a5b..b4e51533 100644 --- a/workspaces/package/src/Box/Box.css +++ b/workspaces/package/src/Box/Box.css @@ -315,6 +315,7 @@ .Box--background-color-background-shade-1 { background-color: var(--color-background-shade-1); } .Box--background-color-background-shade-2 { background-color: var(--color-background-shade-2); } .Box--background-color-background-shade-3 { background-color: var(--color-background-shade-3); } +.Box--background-color-background-shade-4 { background-color: var(--color-background-shade-4); } .Box--background-color-dark-shade-1 { background-color: var(--color-dark-shade-1); } .Box--background-color-dark-shade-2 { background-color: var(--color-dark-shade-2); } .Box--background-color-dark-shade-3 { background-color: var(--color-dark-shade-3); } @@ -348,6 +349,7 @@ .Box--border-color-background-shade-1 { border-color: var(--color-background-shade-1); } .Box--border-color-background-shade-2 { border-color: var(--color-background-shade-2); } .Box--border-color-background-shade-3 { border-color: var(--color-background-shade-3); } +.Box--border-color-background-shade-4 { border-color: var(--color-background-shade-4); } .Box--border-color-dark-shade-1 { border-color: var(--color-dark-shade-1); } .Box--border-color-dark-shade-2 { border-color: var(--color-dark-shade-2); } .Box--border-color-dark-shade-3 { border-color: var(--color-dark-shade-3); } @@ -381,6 +383,7 @@ .Box--text-color-background-shade-1 { color: var(--color-background-shade-1); } .Box--text-color-background-shade-2 { color: var(--color-background-shade-2); } .Box--text-color-background-shade-3 { color: var(--color-background-shade-3); } +.Box--text-color-background-shade-4 { color: var(--color-background-shade-4); } .Box--text-color-dark-shade-1 { color: var(--color-dark-shade-1); } .Box--text-color-dark-shade-2 { color: var(--color-dark-shade-2); } .Box--text-color-dark-shade-3 { color: var(--color-dark-shade-3); } diff --git a/workspaces/package/src/Code/CodeWindow.tsx b/workspaces/package/src/Code/CodeWindow.tsx index 55049225..07698b27 100644 --- a/workspaces/package/src/Code/CodeWindow.tsx +++ b/workspaces/package/src/Code/CodeWindow.tsx @@ -13,16 +13,13 @@ export const CodeWindow = forwardRef((props, ref) => { return ( diff --git a/workspaces/package/src/Input/Input.css b/workspaces/package/src/Input/Input.css index 7f991351..a5edac88 100644 --- a/workspaces/package/src/Input/Input.css +++ b/workspaces/package/src/Input/Input.css @@ -58,6 +58,7 @@ .Input--text-color-active-background-shade-1:focus-within { color: var(--color-background-shade-1); } .Input--text-color-active-background-shade-2:focus-within { color: var(--color-background-shade-2); } .Input--text-color-active-background-shade-3:focus-within { color: var(--color-background-shade-3); } +.Input--text-color-active-background-shade-4:focus-within { color: var(--color-background-shade-4); } .Input--text-color-active-dark-shade-1:focus-within { color: var(--color-dark-shade-1); } .Input--text-color-active-dark-shade-2:focus-within { color: var(--color-dark-shade-2); } .Input--text-color-active-dark-shade-3:focus-within { color: var(--color-dark-shade-3); } @@ -92,6 +93,7 @@ .Input--text-color-hover-background-shade-1:hover:not([disabled]) { color: var(--color-background-shade-1); } .Input--text-color-hover-background-shade-2:hover:not([disabled]) { color: var(--color-background-shade-2); } .Input--text-color-hover-background-shade-3:hover:not([disabled]) { color: var(--color-background-shade-3); } +.Input--text-color-hover-background-shade-4:hover:not([disabled]) { color: var(--color-background-shade-4); } .Input--text-color-hover-dark-shade-1:hover:not([disabled]) { color: var(--color-dark-shade-1); } .Input--text-color-hover-dark-shade-2:hover:not([disabled]) { color: var(--color-dark-shade-2); } .Input--text-color-hover-dark-shade-3:hover:not([disabled]) { color: var(--color-dark-shade-3); } @@ -126,6 +128,7 @@ .Input__element--text-color-placeholder-background-shade-1::placeholder { color: var(--color-background-shade-1); } .Input__element--text-color-placeholder-background-shade-2::placeholder { color: var(--color-background-shade-2); } .Input__element--text-color-placeholder-background-shade-3::placeholder { color: var(--color-background-shade-3); } +.Input__element--text-color-placeholder-background-shade-4::placeholder { color: var(--color-background-shade-4); } .Input__element--text-color-placeholder-dark-shade-1::placeholder { color: var(--color-dark-shade-1); } .Input__element--text-color-placeholder-dark-shade-2::placeholder { color: var(--color-dark-shade-2); } .Input__element--text-color-placeholder-dark-shade-3::placeholder { color: var(--color-dark-shade-3); } diff --git a/workspaces/package/src/Link/Link.css b/workspaces/package/src/Link/Link.css index 38489e54..20559731 100644 --- a/workspaces/package/src/Link/Link.css +++ b/workspaces/package/src/Link/Link.css @@ -35,6 +35,7 @@ .Link--underline-color-background-shade-1 { text-decoration-color: var(--color-background-shade-1); } .Link--underline-color-background-shade-2 { text-decoration-color: var(--color-background-shade-2); } .Link--underline-color-background-shade-3 { text-decoration-color: var(--color-background-shade-3); } +.Link--underline-color-background-shade-4 { text-decoration-color: var(--color-background-shade-4); } .Link--underline-color-dark-shade-1 { text-decoration-color: var(--color-dark-shade-1); } .Link--underline-color-dark-shade-2 { text-decoration-color: var(--color-dark-shade-2); } .Link--underline-color-dark-shade-3 { text-decoration-color: var(--color-dark-shade-3); } @@ -69,6 +70,7 @@ .Link--active.Link--text-color-active-background-shade-1 { color: var(--color-background-shade-1); } .Link--active.Link--text-color-active-background-shade-2 { color: var(--color-background-shade-2); } .Link--active.Link--text-color-active-background-shade-3 { color: var(--color-background-shade-3); } +.Link--active.Link--text-color-active-background-shade-4 { color: var(--color-background-shade-4); } .Link--active.Link--text-color-active-dark-shade-1 { color: var(--color-dark-shade-1); } .Link--active.Link--text-color-active-dark-shade-2 { color: var(--color-dark-shade-2); } .Link--active.Link--text-color-active-dark-shade-3 { color: var(--color-dark-shade-3); } @@ -103,6 +105,7 @@ .Link--text-color-hover-background-shade-1:hover { color: var(--color-background-shade-1); } .Link--text-color-hover-background-shade-2:hover { color: var(--color-background-shade-2); } .Link--text-color-hover-background-shade-3:hover { color: var(--color-background-shade-3); } +.Link--text-color-hover-background-shade-4:hover { color: var(--color-background-shade-4); } .Link--text-color-hover-dark-shade-1:hover { color: var(--color-dark-shade-1); } .Link--text-color-hover-dark-shade-2:hover { color: var(--color-dark-shade-2); } .Link--text-color-hover-dark-shade-3:hover { color: var(--color-dark-shade-3); } @@ -137,6 +140,7 @@ .Link--text-color-active-background-shade-1:active { color: var(--color-background-shade-1); } .Link--text-color-active-background-shade-2:active { color: var(--color-background-shade-2); } .Link--text-color-active-background-shade-3:active { color: var(--color-background-shade-3); } +.Link--text-color-active-background-shade-4:active { color: var(--color-background-shade-4); } .Link--text-color-active-dark-shade-1:active { color: var(--color-dark-shade-1); } .Link--text-color-active-dark-shade-2:active { color: var(--color-dark-shade-2); } .Link--text-color-active-dark-shade-3:active { color: var(--color-dark-shade-3); } diff --git a/workspaces/package/src/Table/Table.css b/workspaces/package/src/Table/Table.css index 3b4fb5ca..cb3b88e2 100644 --- a/workspaces/package/src/Table/Table.css +++ b/workspaces/package/src/Table/Table.css @@ -22,9 +22,9 @@ } .Table__header-cell { - border-bottom: var(--border-size--x2) solid var(--color-text-shade-1); + border-bottom: var(--border-size--x2) solid var(--color-background-shade-4); } .Table__cell { - border-bottom: var(--border-size--x1) solid var(--color-text-shade-1); + border-bottom: var(--border-size--x1) solid var(--color-background-shade-4); } diff --git a/workspaces/package/src/types.ts b/workspaces/package/src/types.ts index bf85ce65..629165c6 100644 --- a/workspaces/package/src/types.ts +++ b/workspaces/package/src/types.ts @@ -29,6 +29,7 @@ export type TypeColor = | 'background-shade-1' | 'background-shade-2' | 'background-shade-3' + | 'background-shade-4' | 'dark-shade-1' | 'dark-shade-2' | 'dark-shade-3' diff --git a/workspaces/package/src/variables.css b/workspaces/package/src/variables.css index f2468a08..653cfc5d 100644 --- a/workspaces/package/src/variables.css +++ b/workspaces/package/src/variables.css @@ -23,53 +23,16 @@ --border-radius-size--x2: var(--size--x2); --border-radius-size--x3: var(--size--x3); - --color-white: #fffefc; - --color-black: #1e1b18; + --rgb-white: 245, 250, 255; + --rgb-black: 15, 20, 25; - --color-dark-shade-1: var(--oc-gray-9); - --color-dark-shade-2: var(--oc-gray-8); - --color-dark-shade-3: var(--oc-gray-7); + --rgb-dark-shade-1: 20, 25, 30; + --rgb-dark-shade-2: 25, 30, 40; + --rgb-dark-shade-3: 30, 35, 50; - --color-light-shade-1: var(--oc-gray-0); - --color-light-shade-2: var(--oc-gray-1); - --color-light-shade-3: var(--oc-gray-2); - - --color-accent-1-shade-1: rgba(var(--oc-indigo-7-rgb), 10%); - --color-accent-1-shade-2: rgba(var(--oc-indigo-7-rgb), 20%); - --color-accent-1-shade-3: var(--oc-indigo-5); - --color-accent-1-shade-4: var(--oc-indigo-6); - --color-accent-1-shade-5: var(--oc-indigo-7); - - --color-accent-2-shade-1: rgba(var(--oc-violet-7-rgb), 10%); - --color-accent-2-shade-2: rgba(var(--oc-violet-7-rgb), 20%); - --color-accent-2-shade-3: var(--oc-violet-5); - --color-accent-2-shade-4: var(--oc-violet-6); - --color-accent-2-shade-5: var(--oc-violet-7); - - --color-positive-shade-1: rgba(var(--oc-teal-7-rgb), 10%); - --color-positive-shade-2: rgba(var(--oc-teal-7-rgb), 20%); - --color-positive-shade-3: var(--oc-teal-5); - --color-positive-shade-4: var(--oc-teal-6); - --color-positive-shade-5: var(--oc-teal-7); - - --color-negative-shade-1: rgba(var(--oc-pink-7-rgb), 10%); - --color-negative-shade-2: rgba(var(--oc-pink-7-rgb), 20%); - --color-negative-shade-3: var(--oc-pink-5); - --color-negative-shade-4: var(--oc-pink-6); - --color-negative-shade-5: var(--oc-pink-7); - - --color-highlight: var(--oc-yellow-3); - - --rgb-white: 255, 255, 255; - --rgb-black: 30, 27, 24; - - --rgb-dark-shade-1: var(--oc-gray-9-rgb); - --rgb-dark-shade-2: var(--oc-gray-8-rgb); - --rgb-dark-shade-3: var(--oc-gray-7-rgb); - - --rgb-light-shade-1: var(--oc-gray-0-rgb); - --rgb-light-shade-2: var(--oc-gray-1-rgb); - --rgb-light-shade-3: var(--oc-gray-2-rgb); + --rgb-light-shade-1: 240, 245, 250; + --rgb-light-shade-2: 235, 240, 245; + --rgb-light-shade-3: 230, 235, 235; --rgb-accent-1-shade-1: var(--oc-indigo-7-rgb); --rgb-accent-1-shade-2: var(--oc-indigo-7-rgb); @@ -97,6 +60,43 @@ --rgb-highlight: var(--oc-yellow-3-rgb); + --color-white: rgb(var(--rgb-white)); + --color-black: rgb(var(--rgb-black)); + + --color-dark-shade-1: rgb(var(--rgb-dark-shade-1)); + --color-dark-shade-2: rgb(var(--rgb-dark-shade-2)); + --color-dark-shade-3: rgb(var(--rgb-dark-shade-3)); + + --color-light-shade-1: rgb(var(--rgb-light-shade-1)); + --color-light-shade-2: rgb(var(--rgb-light-shade-2)); + --color-light-shade-3: rgb(var(--rgb-light-shade-3)); + + --color-accent-1-shade-1: rgba(var(--oc-indigo-7-rgb), 10%); + --color-accent-1-shade-2: rgba(var(--oc-indigo-7-rgb), 20%); + --color-accent-1-shade-3: var(--oc-indigo-5); + --color-accent-1-shade-4: var(--oc-indigo-6); + --color-accent-1-shade-5: var(--oc-indigo-7); + + --color-accent-2-shade-1: rgba(var(--oc-violet-7-rgb), 10%); + --color-accent-2-shade-2: rgba(var(--oc-violet-7-rgb), 20%); + --color-accent-2-shade-3: var(--oc-violet-5); + --color-accent-2-shade-4: var(--oc-violet-6); + --color-accent-2-shade-5: var(--oc-violet-7); + + --color-positive-shade-1: rgba(var(--oc-teal-7-rgb), 10%); + --color-positive-shade-2: rgba(var(--oc-teal-7-rgb), 20%); + --color-positive-shade-3: var(--oc-teal-5); + --color-positive-shade-4: var(--oc-teal-6); + --color-positive-shade-5: var(--oc-teal-7); + + --color-negative-shade-1: rgba(var(--oc-pink-7-rgb), 10%); + --color-negative-shade-2: rgba(var(--oc-pink-7-rgb), 20%); + --color-negative-shade-3: var(--oc-pink-5); + --color-negative-shade-4: var(--oc-pink-6); + --color-negative-shade-5: var(--oc-pink-7); + + --color-highlight: var(--oc-yellow-3); + --color-overlay: rgba(var(--rgb-black), 70%); --transition-duration--fast: 200ms; @@ -170,6 +170,7 @@ --color-background-shade-1: var(--color-white); --color-background-shade-2: var(--color-light-shade-1); --color-background-shade-3: var(--color-light-shade-2); + --color-background-shade-4: var(--color-light-shade-3); --color-text-shade-1: var(--color-dark-shade-1); --color-text-shade-2: var(--color-dark-shade-2); @@ -179,6 +180,7 @@ --rgb-background-shade-1: var(--rgb-white); --rgb-background-shade-2: var(--rgb-light-shade-1); --rgb-background-shade-3: var(--rgb-light-shade-2); + --rgb-background-shade-4: var(--rgb-light-shade-3); --rgb-text-shade-1: var(--rgb-dark-shade-1); --rgb-text-shade-2: var(--rgb-dark-shade-2); @@ -191,6 +193,7 @@ --color-background-shade-1: var(--color-black); --color-background-shade-2: var(--color-dark-shade-1); --color-background-shade-3: var(--color-dark-shade-2); + --color-background-shade-4: var(--color-dark-shade-3); --color-text-shade-1: var(--color-light-shade-1); --color-text-shade-2: var(--color-light-shade-2); @@ -200,6 +203,7 @@ --rgb-background-shade-1: var(--rgb-black); --rgb-background-shade-2: var(--rgb-dark-shade-1); --rgb-background-shade-3: var(--rgb-dark-shade-2); + --rgb-background-shade-4: var(--rgb-dark-shade-3); --rgb-text-shade-1: var(--rgb-light-shade-1); --rgb-text-shade-2: var(--rgb-light-shade-2); diff --git a/workspaces/package/src/variables.ts b/workspaces/package/src/variables.ts index 29cbe147..51e41f0c 100644 --- a/workspaces/package/src/variables.ts +++ b/workspaces/package/src/variables.ts @@ -50,16 +50,16 @@ export const borderRadiusSizeX1Rem = sizeX1Rem; export const borderRadiusSizeX2Rem = sizeX2Rem; export const borderRadiusSizeX3Rem = sizeX3Rem; -export const colorWhite = '#FFFEFC'; -export const colorBlack = '#1E1B18'; +export const colorWhite = 'rgb(250, 250, 255)'; +export const colorBlack = 'rgb(20, 20, 25)'; -export const colorDarkShade1 = color.gray[9]; -export const colorDarkShade2 = color.gray[8]; -export const colorDarkShade3 = color.gray[7]; +export const colorDarkShade1 = 'rgb(25, 25, 30)'; +export const colorDarkShade2 = 'rgb(30, 30, 35)'; +export const colorDarkShade3 = 'rgb(35, 35, 40)'; -export const colorLightShade1 = color.gray[0]; -export const colorLightShade2 = color.gray[1]; -export const colorLightShade3 = color.gray[2]; +export const colorLightShade1 = 'rgb(245, 245, 250)'; +export const colorLightShade2 = 'rgb(240, 240, 245)'; +export const colorLightShade3 = 'rgb(235, 235, 240)'; export const colorAccent1Shade1 = hexToRGBA(color.indigo[7], 0.1); export const colorAccent1Shade2 = hexToRGBA(color.indigo[7], 0.2); @@ -91,6 +91,7 @@ export type ThemeColorMapKey = | 'colorBackgroundShade1' | 'colorBackgroundShade2' | 'colorBackgroundShade3' + | 'colorBackgroundShade4' | 'colorTextShade1' | 'colorTextShade2' | 'colorTextShade3' @@ -107,6 +108,7 @@ export const themeDay: ThemeColorMap = { colorBackgroundShade1: colorWhite, colorBackgroundShade2: colorLightShade1, colorBackgroundShade3: colorLightShade2, + colorBackgroundShade4: colorLightShade3, colorTextShade1: colorDarkShade1, colorTextShade2: colorDarkShade2, colorTextShade3: colorDarkShade3, @@ -122,6 +124,7 @@ export const themeNight: ThemeColorMap = { colorBackgroundShade1: colorBlack, colorBackgroundShade2: colorDarkShade1, colorBackgroundShade3: colorDarkShade2, + colorBackgroundShade4: colorDarkShade3, colorTextShade1: colorLightShade1, colorTextShade2: colorLightShade2, colorTextShade3: colorLightShade3, @@ -147,6 +150,7 @@ export const themePropNameCSSMap: ThemeColorMap = { colorBackgroundShade1: 'color-background-shade-1', colorBackgroundShade2: 'color-background-shade-2', colorBackgroundShade3: 'color-background-shade-3', + colorBackgroundShade4: 'color-background-shade-4', colorTextShade1: 'color-text-shade-1', colorTextShade2: 'color-text-shade-2', colorTextShade3: 'color-text-shade-3', diff --git a/workspaces/site/src/components/Color/Color.tsx b/workspaces/site/src/components/Color/Color.tsx index 668e4c5d..ad5ed6b2 100644 --- a/workspaces/site/src/components/Color/Color.tsx +++ b/workspaces/site/src/components/Color/Color.tsx @@ -22,7 +22,7 @@ const Color = ({ { diff --git a/workspaces/site/src/components/Showcase/Showcase.tsx b/workspaces/site/src/components/Showcase/Showcase.tsx index d141456a..54650553 100644 --- a/workspaces/site/src/components/Showcase/Showcase.tsx +++ b/workspaces/site/src/components/Showcase/Showcase.tsx @@ -11,6 +11,7 @@ const Showcase = ({ basis, children, file }: Props) => { return ( { @@ -50,6 +51,7 @@ const Showcase = ({ basis, children, file }: Props) => { [ value: themes[theme].colorBackgroundShade3, textColor: 'text-shade-1', }, + { + name: 'Background Shade 4', + css: '--color-background--shade-4', + js: 'colorBackgroundShade4', + prop: 'background-shade-4', + value: themes[theme].colorBackgroundShade4, + textColor: 'text-shade-1', + }, { name: 'Text Shade 1', css: '--color-text--shade-1',