feat: color improvements

packages/nextui/src/css-baseline/css-baseline.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { addColorAlpha } from '../utils/color';
-import { theme, globalCss, getCssText } from '../theme/stitches.config';
+import { globalCss, getCssText } from '../theme/stitches.config';
 
 const globalStyles = globalCss({
   '*, *:before, *:after': {
@@ -131,14 +130,14 @@ const globalStyles = globalCss({
     color: '$code',
     padding: '$1 $2',
     borderRadius: '$xs',
-    backgroundColor: addColorAlpha(theme.colors?.code?.value, 0.2),
+    bg: '$codeLight',
     fontFamily: '$mono',
     fontSize: '$xs',
     whiteSpace: 'pre-wrap',
     transition: '$default'
   },
   'code:hover': {
-    backgroundColor: addColorAlpha(theme.colors?.code?.value, 0.3)
+    opacity: 0.8
   },
   pre: {
     overflow: 'auto',

packages/nextui/src/theme/dark-theme.ts

@@ -12,7 +12,8 @@ export default {
     text: '$white',
     background: '$black',
     foreground: '$white',
-    code: '#77c8e6',
+    codeLight: '#16272e',
+    code: '#6cc0e1',
     border: '$gray500',
     selection: '#ff4ecd'
   },

packages/nextui/src/theme/light-theme.ts

@@ -9,9 +9,10 @@ export default {
     accents7: '$gray700',
     accents8: '$gray800',
     accents9: '$gray900',
-    text: '$gray500',
+    text: '$gray800',
     background: '$white',
     foreground: '$black',
+    codeLight: '$pink100',
     code: '$pink500',
     border: '$gray200',
     selection: '$blue200'