Merge pull request #380 from omnivore-app/fix/rm-radix-colors

Remove radix colors

packages/web/components/tokens/stitches.config.ts

@@ -1,14 +1,5 @@
 import type * as Stitches from '@stitches/react'
 import { createStitches, createTheme } from '@stitches/react'
-import {
-  gray,
-  grayDark,
-  blackA,
-  yellow,
-  yellowDark,
-  orange,
-  orangeDark,
-} from '@radix-ui/colors'
 
 export enum ThemeId {
   Lighter = 'White',
@@ -116,10 +107,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       zIndices: {},
       transitions: {},
       colors: {
-        // Radix Color Scales
-        ...yellow, // Brand
-        ...orange, //Accent
-
         // Grayscale
         grayBase: '#F8F8F8',
         grayBg: '#FFFFFF',
@@ -128,15 +115,13 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
 
-        grayBgSubtle: gray.gray2,
-        grayBgHover: gray.gray4,
-        grayLine: gray.gray6,
-        grayBorderHover: gray.gray8,
-        graySolidHover: gray.gray10,
-        grayText: gray.gray11,
+        grayBgSubtle: 'hsl(0 0% 97.3%)',
+        grayBgHover: 'hsl(0 0% 93.0%)',
+        grayLine: 'hsl(0 0% 88.7%)',
+        grayBorderHover: 'hsl(0 0% 78.0%)',
+        grayText: 'hsl(0 0% 43.5%)',
 
         // Semantic Colors
-        overlay: blackA.blackA9,
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
         highlight: '#FFD234',
         highlightText: '#3D3D3D',
@@ -177,9 +162,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
 const darkThemeSpec = {
   colors: {
-    ...yellowDark, // Brand
-    ...orangeDark, //Accent
-
     // Grayscale (top ones have been updated from new designs)
     grayBase: '#252525',
     grayBg: '#3B3938',
@@ -188,15 +170,13 @@ const darkThemeSpec = {
     grayBorder: 'rgba(255, 255, 255, 0.06)',
     graySolid: '#9C9B9A',
 
-    grayBgSubtle: grayDark.gray2,
-    grayBgHover: grayDark.gray4,
-    grayLine: grayDark.gray6,
-    grayBorderHover: grayDark.gray8,
-    graySolidHover: grayDark.gray10,
-    grayText: grayDark.gray11,
+    grayBgSubtle: 'hsl(0 0% 9.8%)',
+    grayBgHover: 'hsl(0 0% 13.8%)',
+    grayLine: 'hsl(0 0% 19.9%)',
+    grayBorderHover: 'hsl(0 0% 31.2%)',
+    grayText: 'hsl(0 0% 62.8%)',
 
     // Semantic Colors
-    overlay: blackA.blackA9,
     highlightBackground: '#867740',
     highlight: '#FFD234',
     highlightText: 'white',

packages/web/package.json

@@ -16,7 +16,6 @@
     "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib"
   },
   "dependencies": {
-    "@radix-ui/colors": "^0.1.7",
     "@radix-ui/react-avatar": "^0.1.1",
     "@radix-ui/react-dialog": "^0.1.1",
     "@radix-ui/react-dropdown-menu": "^0.1.1",

yarn.lock

@@ -4099,11 +4099,6 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
-"@radix-ui/colors@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-0.1.7.tgz#055cdf104f92ae58a7d6a7f1c7327c635b90747f"
-  integrity sha512-E6+ZPQ+FFn1/NZ4c/KRvZTu9KjC/MXrbJNETYs1HKe96gyxQivPu65FkhOsRnPigvJ0YJ9ZxYGxayqDNmaC1cQ==
-
 "@radix-ui/popper@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
@@ -13548,7 +13543,7 @@ lambdafs@^2.0.3:
   resolved "https://registry.yarnpkg.com/lambdafs/-/lambdafs-2.1.1.tgz#4bf8d3037b6c61bbb4a22ab05c73ee47964c25ed"
   integrity sha512-x5k8JcoJWkWLvCVBzrl4pzvkEHSgSBqFjg3Dpsc4AcTMq7oUMym4cL/gRTZ6VM4mUMY+M0dIbQ+V1c1tsqqanQ==
   dependencies:
-    tar-fs "*"
+    tar-fs "^2.1.1"
 
 language-subtag-registry@~0.3.2:
   version "0.3.21"