style(Colors): Updated colors

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); }

workspaces/package/src/Code/CodeWindow.tsx

@@ -13,16 +13,13 @@ export const CodeWindow = forwardRef<any, CodeWindowProps>((props, ref) => {
   return (
     <Text
       {...rest}
-      borderColor="text-shade-1"
+      backgroundColor="background-shade-3"
+      borderColor="background-shade-4"
       borderSize="x1"
       borderRadius={borderRadius}
       margin="x8"
       ref={ref}
       overflow="auto"
-      style={{
-        background:
-          'linear-gradient(rgb(42, 33, 57) 75%, rgb(52, 41, 79)) transparent',
-      }}
       theme="night"
     >
       <Text flex="vertical" gap="x6" padding={padding} width="max-content">

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); }

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); }

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);
 }

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'

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);

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',

workspaces/site/src/components/Color/Color.tsx

@@ -22,7 +22,7 @@ const Color = ({
       <Box
         alignChildren="middle"
         borderRadius="x2"
-        borderColor="text-shade-1"
+        borderColor="background-shade-4"
         borderSize="x1"
         flex="horizontal"
         width="4rem"

workspaces/site/src/components/Menu/MenuItem.tsx

@@ -15,7 +15,7 @@ export const MenuItem = ({ children, nested, to, ...props }: MenuItemProps) => {
     <Box paddingLeft={nested ? 'x3' : 'x0'}>
       <Box
         {...props}
-        borderColor="text-shade-1"
+        borderColor="background-shade-4"
         borderSize={nested ? 'x1' : 'x0'}
         borderLeft={nested}
       >

workspaces/site/src/components/Showcase/Showcase.tsx

@@ -11,6 +11,7 @@ const Showcase = ({ basis, children, file }: Props) => {
   return (
     <Box
       backgroundColor="background-shade-3"
+      borderColor="background-shade-4"
       borderRadius="x3"
       borderSize="x2"
       flex="vertical"
@@ -23,33 +24,34 @@ const Showcase = ({ basis, children, file }: Props) => {
         <Box flex="horizontal" gap="x1" grow>
           <Box
             backgroundColor="negative-shade-3"
+            borderColor="background-shade-4"
             borderRadius="full"
-            borderSize="x2"
-            height="0.75rem"
-            width="0.75rem"
+            height="0.5rem"
+            width="0.5rem"
           />
 
           <Box
             backgroundColor="highlight"
+            borderColor="background-shade-4"
             borderRadius="full"
-            borderSize="x2"
-            height="0.75rem"
-            width="0.75rem"
+            height="0.5rem"
+            width="0.5rem"
           />
 
           <Box
             backgroundColor="positive-shade-3"
+            borderColor="background-shade-4"
             borderRadius="full"
-            borderSize="x2"
-            height="0.75rem"
-            width="0.75rem"
+            height="0.5rem"
+            width="0.5rem"
           />
         </Box>
       </Box>
 
       <Box
         backgroundColor="background-shade-1"
         basis={basis}
+        borderColor="background-shade-4"
         borderRadius="x2"
         borderSize="x2"
         container

workspaces/site/src/pages/Themes.tsx

@@ -37,6 +37,14 @@ const paletteTheme = (theme: TypeTheme): ColorProps[] => [
     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',