Refactor/theme gray scale

apps/docs/src/components/playground/code-theme.ts

@@ -1,4 +1,5 @@
 import { PrismTheme } from 'prism-react-renderer';
+import { green } from '@nextui-org/react';
 
 const makeCodeTheme = (): PrismTheme => ({
   plain: {
@@ -12,16 +13,21 @@ const makeCodeTheme = (): PrismTheme => ({
   },
   styles: [
     {
-      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
-        color: 'var(--nextui-colors-codeComment)',
-        opacity: 0.5
+        color: 'var(--nextui-colors-codeComment)'
       }
     },
     {
-      types: ['punctuation', 'symbol', 'text'],
+      types: ['symbol', 'text'],
       style: {
-        color: '#fff'
+        color: 'var(--nextui-colors-white)'
+      }
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: green.green200
       }
     },
     {
@@ -57,7 +63,7 @@ const makeCodeTheme = (): PrismTheme => ({
     {
       types: ['attr-name'],
       style: {
-        color: 'var(--nextui-colors-yellow500)'
+        color: 'var(--nextui-colors-yellow600)'
       }
     },
     {

apps/docs/src/components/playground/editor.tsx

@@ -77,7 +77,7 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
                   fill={
                     !isDark
                       ? theme?.colors?.accents2?.value
-                      : theme?.colors?.accents6?.value
+                      : theme?.colors?.accents8?.value
                   }
                 />
               </span>
@@ -144,6 +144,7 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
         }
         .title {
           font-weight: 600;
+          color: ${theme?.colors?.white?.value};
         }
         details {
           transition: all 0.2s ease;

apps/docs/src/components/sidebar/post.tsx

@@ -48,7 +48,7 @@ const Post: React.FC<React.PropsWithChildren<PostProps>> = ({
   const linkColor = useMemo(() => {
     if (route.selected) return theme?.colors?.text?.value;
     if (route.comingSoon) return theme?.colors?.accents5?.value;
-    return theme?.colors?.accents7?.value;
+    return theme?.colors?.accents8?.value;
   }, [isDark, route.selected]);
 
   return (

apps/docs/src/theme/shared.ts

@@ -15,7 +15,7 @@ export const lightTheme = createTheme({
       menuBackground: 'rgba(255, 255, 255, 0.5)',
       headerIconColor: '$accents4',
       codeBackground: '#363449',
-      codeComment: '$accents6',
+      codeComment: '$accents7',
       codeCopyIconColor: '$accents2',
       cardBackground: '$white',
       codeHighlight: 'hsl(243, 16%, 30%)',
@@ -37,7 +37,7 @@ export const darkTheme = createTheme({
       headerBackground: 'rgba(0,0,0,0.5)',
       headerIconColor: '$accents8',
       codeBackground: '#111111',
-      codeComment: '$accents8',
+      codeComment: '$accents6',
       codeCopyIconColor: '$accents7',
       codeHighlight: 'hsl(0, 0%, 15%)',
       cardBackground: '$accents0',

packages/react/src/theme/colors/gray.ts

@@ -1,25 +1,25 @@
 export const gray = {
-  gray50: '#F5F5F5',
-  gray100: '#EDEDED',
-  gray200: '#EBEBEB',
-  gray300: '#E0E0E0',
-  gray400: '#D4D4D4',
-  gray500: '#C2C2C2',
-  gray600: '#A3A3A3',
-  gray700: '#808080',
-  gray800: '#666666',
-  gray900: '#111111'
+  gray50: '#F1F3F5',
+  gray100: '#ECEEF0',
+  gray200: '#E6E8EB',
+  gray300: '#DFE3E6',
+  gray400: '#D7DBDF',
+  gray500: '#C1C8CD',
+  gray600: '#889096',
+  gray700: '#7E868C',
+  gray800: '#687076',
+  gray900: '#11181C'
 };
 
 export const grayDark = {
-  gray50: '#161616',
-  gray100: '#262626',
-  gray200: '#333333',
-  gray300: '#4D4D4D',
-  gray400: '#666666',
-  gray500: '#808080',
-  gray600: '#A3A3A3',
-  gray700: '#C9C9C9',
-  gray800: '#E8E8E8',
-  gray900: '#F5F5F5'
+  gray50: '#16181A',
+  gray100: '#26292B',
+  gray200: '#2B2F31',
+  gray300: '#313538',
+  gray400: '#3A3F42',
+  gray500: '#4C5155',
+  gray600: '#697177',
+  gray700: '#787F85',
+  gray800: '#9BA1A6',
+  gray900: '#ECEDEE'
 };