feat: modify workspace modal style & add workspace setting entry to worksapce card (#1498)

packages/component/src/index.ts

@@ -45,8 +45,6 @@ declare module '@mui/material/styles' {
       linkVisitedColor: string;
       iconColor: string;
       handleColor: string;
-      popoverColor: string;
-      inputColor: string;
       tooltipColor: string;
       codeColor: string;
       quoteColor: string;
@@ -120,8 +118,6 @@ declare module '@mui/material/styles' {
       linkVisitedColor: string;
       iconColor: string;
       handleColor: string;
-      popoverColor: string;
-      inputColor: string;
       tooltipColor: string;
       codeColor: string;
       quoteColor: string;

packages/component/src/styles/theme.ts

@@ -37,14 +37,12 @@ export const getLightTheme = (
       linkColor: '#5438FF',
       linkColor2: '#5438FF',
       linkVisitedColor: '#5438FF',
-      popoverColor: '#4C6275',
-      inputColor: '#4C6275',
       tooltipColor: '#fff',
       codeColor: '#77757D',
       quoteColor: '#645F82',
       placeHolderColor: '#C0BFC1',
       selectedColor: 'rgba(84, 56, 255, 0.04)',
-      borderColor: '#9787FF',
+      borderColor: '#E3E2E4',
       disableColor: '#A9A9AD',
       warningColor: '#906616',
       errorColor: '#EB4335',
@@ -121,8 +119,6 @@ export const getDarkTheme = (
       linkColor: '#7D91FF',
       linkColor2: '#0C0A15',
       linkVisitedColor: '#505FAB',
-      popoverColor: '#C6CBD9',
-      inputColor: '#C6CBD9',
       tooltipColor: '#fff',
       codeColor:
         editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
@@ -172,8 +168,6 @@ export const globalThemeVariables: (
     '--affine-link-visited-color': theme.colors.linkVisitedColor,
     '--affine-icon-color': theme.colors.iconColor,
     '--affine-block-handle-color': theme.colors.handleColor,
-    '--affine-popover-color': theme.colors.popoverColor,
-    '--affine-input-color': theme.colors.inputColor,
     '--affine-code-color': theme.colors.codeColor,
     '--affine-code-block-background': theme.colors.codeBlockBackground,
     '--affine-quote-color': theme.colors.quoteColor,

packages/component/src/styles/types.ts

@@ -45,8 +45,6 @@ export interface AffineTheme {
     linkVisitedColor: string;
     iconColor: string;
     handleColor: string;
-    popoverColor: string;
-    inputColor: string;
     tooltipColor: string;
     codeColor: string;
     quoteColor: string;
@@ -116,7 +114,6 @@ export interface AffineThemeCSSVariables {
   '--affine-link-color2': AffineTheme['colors']['linkColor2'];
   '--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
   '--affine-icon-color': AffineTheme['colors']['iconColor'];
-  '--affine-popover-color': AffineTheme['colors']['popoverColor'];
   '--affine-code-color': AffineTheme['colors']['codeColor'];
   '--affine-quote-color': AffineTheme['colors']['quoteColor'];
   '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];

packages/component/src/ui/breadcrumbs/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
   return {
-    color: theme.colors.popoverColor,
+    color: theme.colors.textColor,
   };
 });

packages/component/src/ui/button/styles.ts

@@ -68,9 +68,10 @@ export const StyledIconButton = styled('button', {
         color: hoverColor ?? theme.colors.primaryColor,
         '::after': {
           background:
-            hoverBackground ?? darker
+            hoverBackground ||
+            (darker
               ? theme.colors.innerHoverBackground
-              : theme.colors.hoverBackground,
+              : theme.colors.hoverBackground),
         },
         ...(hoverStyle ?? {}),
       },
@@ -116,7 +117,7 @@ export const StyledTextButton = styled('button', {
     shape = 'default',
     // TODO: Implement type
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    type = 'default',
+    // type = 'default',
   }) => {
     const { fontSize, borderRadius, padding, height } = getSize(size);
     console.log('size', size, height);

packages/component/src/ui/button/utils.ts

@@ -104,7 +104,7 @@ export const getButtonColors = (
       };
     default:
       return {
-        color: theme.colors.popoverColor,
+        color: theme.colors.textColor,
         borderColor: theme.colors.borderColor,
         ':hover': {
           borderColor: theme.colors.primaryColor,

packages/component/src/ui/confirm/styles.ts

@@ -15,7 +15,6 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
     fontSize: theme.font.h6,
     fontWeight: 600,
     textAlign: 'center',
-    color: theme.colors.popoverColor,
     lineHeight: '28px',
   };
 });

packages/component/src/ui/input/style.ts

@@ -15,7 +15,7 @@ export const StyledInput = styled('input')<{
     fontWeight,
     fontSize,
     height: height ? `${height}px` : 'auto',
-    color: disabled ? theme.colors.disableColor : theme.colors.inputColor,
+    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
     border: `1px solid`,
     borderColor: theme.colors.borderColor, // TODO: check out disableColor,
     backgroundColor: theme.colors.popoverBackground,

packages/component/src/ui/menu/styles.ts

@@ -14,7 +14,6 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
     fontSize: '14px',
     backgroundColor: theme.colors.popoverBackground,
     boxShadow: theme.shadow.popover,
-    color: theme.colors.popoverColor,
   };
 });
 
@@ -39,7 +38,6 @@ export const StyledMenuItem = styled('button')<{
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
-    color: theme.colors.popoverColor,
     backgroundColor: 'transparent',
 
     ':hover': {