feat: modify theme colors (#1421)

apps/web/src/components/blocksuite/block-suite-editor/index.tsx

@@ -1,5 +1,3 @@
-import '@blocksuite/editor/themes/affine.css';
-
 import { config } from '@affine/env';
 import { BlockHub } from '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -8,7 +8,7 @@ export const StyledSliderBar = styled('div')<{ show: boolean }>(
       height: '100vh',
       minHeight: '450px',
       background: theme.colors.hubBackground,
-      boxShadow: theme.shadow.modal,
+      boxShadow: theme.shadow.popover,
       transition: 'width .15s, padding .15s',
       position: 'relative',
       zIndex: theme.zIndex.modal,

apps/web/src/providers/ThemeProvider.tsx

@@ -20,7 +20,10 @@ const ThemeInjector = React.memo<{
   return (
     <GlobalStyles
       styles={{
-        '#__next': {
+        // '#__next': {
+        //   ...globalThemeVariables(themeStyle),
+        // },
+        ':root': {
           ...globalThemeVariables(themeStyle),
         },
         html: {

packages/component/src/styles/theme.ts

@@ -16,12 +16,12 @@ export const getLightTheme = (
     },
     editorMode,
     colors: {
-      primaryColor: '#6880FF',
+      primaryColor: '#5438FF',
       pageBackground: '#fff',
-      hoverBackground: '#F1F3FF',
+      hoverBackground: '#F1F1F4',
-      innerHoverBackground: '#E0E6FF',
+      innerHoverBackground: '#E9E9EC',
       popoverBackground: '#fff',
-      tooltipBackground: '#6880FF',
+      tooltipBackground: '#261499',
       codeBackground: '#f2f5f9',
       codeBlockBackground: '#F9F9FB',
       hubBackground: '#fbfbfc',
@@ -34,17 +34,17 @@ export const getLightTheme = (
       edgelessTextColor: '#3A4C5C',
       iconColor: '#77757D',
       handleColor: '#c7c3d9',
-      linkColor: '#6880FF',
+      linkColor: '#5438FF',
-      linkColor2: '#6880FF',
+      linkColor2: '#5438FF',
       linkVisitedColor: '#ABB8FE',
       popoverColor: '#4C6275',
       inputColor: '#4C6275',
       tooltipColor: '#fff',
-      codeColor: '#517ea6',
+      codeColor: '#77757D',
       quoteColor: '#645F82',
       placeHolderColor: '#C0BFC1',
-      selectedColor: 'rgba(104, 128, 255, 0.1)',
+      selectedColor: '#F3F0FF',
-      borderColor: '#E3E2E4',
+      borderColor: '#9787FF',
       disableColor: '#A9A9AD',
       warningColor: '#906616',
       errorColor: '#EB4335',
@@ -72,11 +72,10 @@ export const getLightTheme = (
       popover: 100,
     },
     shadow: {
-      popover:
+      popover: '0px 0px 12px rgba(66, 65, 73, 0.14)',
-        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
       modal:
-        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
+        '0px 0px 20px 4px rgba(65, 64, 72, 0.24), 0px 0px 12px rgba(66, 65, 73, 0.14)',
-      tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
+      tooltip: '0px 0px 4px rgba(0, 0, 0, 0.14)',
     },
     space: {
       paragraph: '8px',
@@ -98,7 +97,7 @@ export const getDarkTheme = (
       mode: 'dark',
     },
     colors: {
-      primaryColor: '#6880FF',
+      primaryColor: '#5438FF',
       pageBackground: '#2c2c2c',
       hoverBackground: '#3C3C42',
       innerHoverBackground: '#5A5A5A',
@@ -187,7 +186,6 @@ export const globalThemeVariables: (
 
     '--affine-modal-shadow': theme.shadow.modal,
     '--affine-popover-shadow': theme.shadow.popover,
-    '--affine-tooltip-shadow': theme.shadow.tooltip,
 
     '--affine-font-h1': theme.font.h1,
     '--affine-font-h2': theme.font.h2,

packages/component/src/styles/types.ts

@@ -127,7 +127,6 @@ export interface AffineThemeCSSVariables {
 
   '--affine-modal-shadow': AffineTheme['shadow']['modal'];
   '--affine-popover-shadow': AffineTheme['shadow']['popover'];
-  '--affine-tooltip-shadow': AffineTheme['shadow']['tooltip'];
   '--affine-font-h1': AffineTheme['font']['h1'];
   '--affine-font-h2': AffineTheme['font']['h2'];
   '--affine-font-h3': AffineTheme['font']['h3'];

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -6,7 +6,7 @@ import StyledPopperContainer from '../shared/Container';
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',
-    boxShadow: theme.shadow.tooltip,
+    boxShadow: theme.shadow.popover,
     padding: '4px 12px',
     backgroundColor: theme.colors.tooltipBackground,
     color: '#fff',