fix: theme color (#2124)

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -191,7 +191,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
         {isOwner ? (
           <>
             <Button
-              type="danger"
+              type="warning"
               shape="circle"
               style={{ borderRadius: '40px' }}
               data-testid="delete-workspace-button"
@@ -213,7 +213,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
         ) : (
           <>
             <Button
-              type="danger"
+              type="warning"
               shape="circle"
               onClick={() => {
                 setShowLeave(true);

apps/web/src/components/pure/help-island/style.ts

@@ -12,7 +12,9 @@ export const StyledIsland = styled('div')<{
       : 'unset',
     padding: '0 4px 44px',
     borderRadius: '10px',
-    backgroundColor: 'var(--affine-background-primary-color)',
+    background: spread
+      ? 'var(--affine-background-overlay-panel-color)'
+      : 'transparent',
     ':hover': {
       boxShadow:
         '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)',
@@ -38,7 +40,6 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
     ...displayFlex('center', 'center'),
     cursor: 'pointer',
     fontSize: '24px',
-    backgroundColor: 'var(--affine-background-primary-color)',
     borderRadius: '5px',
     width: '36px',
     height: '36px',
@@ -62,7 +63,6 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
     width: '36px',
     height: '36px',
     cursor: 'pointer',
-    backgroundColor: 'var(--affine-background-primary-color)',
     color: 'var(--affine-icon-color)',
     borderRadius: '5px',
     fontSize: '24px',

packages/component/src/components/changeLog/index.css.ts

@@ -91,7 +91,7 @@ export const changeLogSlideOutStyle = style({
 export const linkStyle = style({
   flexGrow: 1,
   textAlign: 'left',
-  color: 'inherit',
+  color: 'var(--affine-text-emphasis-color)',
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'flex-start',

packages/component/src/styles/theme.ts

@@ -63,10 +63,10 @@ export const lightTheme = {
   tertiaryColor: 'rgb(243, 240, 255)',
   primaryColor: 'rgb(84, 56, 255)',
   secondaryColor: 'rgb(125, 145, 255)',
-  backgroundSuccessColor: 'rgb(255, 255, 255)',
+  backgroundSuccessColor: 'rgba(231, 250, 243, 1)',
-  backgroundErrorColor: 'rgba(255, 255, 255, 0.2)',
+  backgroundErrorColor: 'rgba(253, 236, 235, 1)',
-  backgroundProcessingColor: 'rgb(255, 255, 255)',
+  backgroundProcessingColor: 'rgba(233, 241, 255, 1)',
-  backgroundWarningColor: 'rgb(255, 255, 255)',
+  backgroundWarningColor: 'rgba(255, 239, 233, 1)',
   backgroundPrimaryColor: 'rgb(255, 255, 255)',
   backgroundOverlayPanelColor: 'rgb(251, 251, 252)',
   backgroundSecondaryColor: 'rgb(251, 250, 252)',
@@ -104,16 +104,16 @@ export const lightTheme = {
   white80: 'rgba(255, 255, 255, 0.8)',
   white90: 'rgba(255, 255, 255, 0.9)',
   white: 'rgb(255, 255, 255)',
-  tagWhite: 'rgb(245, 245, 245)',
+  tagWhite: 'rgba(245, 245, 245, 1)',
-  tagGray: 'rgb(227, 226, 224)',
+  tagGray: 'rgba(227, 226, 224, 1)',
-  tagRed: 'rgb(255, 225, 225)',
+  tagRed: 'rgba(255, 225, 225, 1)',
-  tagOrange: 'rgb(255, 234, 202)',
+  tagOrange: 'rgba(255, 233, 201, 1)',
-  tagYellow: 'rgb(255, 244, 216)',
+  tagYellow: 'rgba(255, 243, 215, 1)',
-  tagGreen: 'rgb(223, 244, 232)',
+  tagGreen: 'rgba(222, 244, 231, 1)',
-  tagTeal: 'rgb(223, 244, 243)',
+  tagTeal: 'rgba(222, 244, 243, 1)',
-  tagBlue: 'rgb(225, 239, 255)',
+  tagBlue: 'rgba(225, 238, 255, 1)',
-  tagPurple: 'rgb(243, 240, 255)',
+  tagPurple: 'rgba(243, 240, 255, 1)',
-  tagPink: 'rgb(252, 232, 255)',
+  tagPink: 'rgba(251, 231, 255, 1)',
   paletteLineYellow: 'rgb(255, 232, 56)',
   paletteLineOrange: 'rgb(255, 175, 56)',
   paletteLineTangerine: 'rgb(255, 99, 31)',
@@ -147,7 +147,7 @@ export const darkTheme = {
   themeMode: 'dark',
 
   brandColor: 'rgb(84, 56, 255)',
-  primaryColor: 'rgb(118, 95, 254)',
+  primaryColor: 'rgba(106, 86, 229, 1)',
   secondaryColor: 'rgb(144, 150, 245)',
   tertiaryColor: 'rgb(30, 30, 30)',
   hoverColor: 'rgba(255, 255, 255, 0.1)',
@@ -183,24 +183,24 @@ export const darkTheme = {
   white: 'rgb(0, 0, 0)',
   backgroundCodeBlock: 'rgb(41, 44, 51)',
   backgroundTertiaryColor: 'rgb(30, 30, 30)',
-  backgroundProcessingColor: 'rgb(255, 255, 255)',
+  backgroundProcessingColor: 'rgba(20, 22, 26, 1)',
-  backgroundErrorColor: 'rgb(255, 255, 255)',
+  backgroundErrorColor: 'rgba(21, 14, 13, 1)',
-  backgroundWarningColor: 'rgb(255, 255, 255)',
+  backgroundWarningColor: 'rgba(26, 10, 3, 1))',
-  backgroundSuccessColor: 'rgb(255, 255, 255)',
+  backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
   backgroundPrimaryColor: 'rgb(20, 20, 20)',
   backgroundSecondaryColor: 'rgb(32, 32, 32)',
   backgroundModalColor: 'rgba(0, 0, 0, 0.8)',
   backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
-  tagBlue: 'rgb(10, 84, 170)',
+  tagBlue: 'rgba(8, 67, 136, 1)',
-  tagGreen: 'rgb(55, 135, 79)',
+  tagGreen: 'rgba(44, 108, 63, 1)',
-  tagTeal: 'rgb(33, 145, 138)',
+  tagTeal: 'rgba(26, 115, 110, 1)',
-  tagWhite: 'rgb(84, 84, 84)',
+  tagWhite: 'rgba(67, 67, 67, 1)',
-  tagPurple: 'rgb(59, 38, 141)',
+  tagPurple: 'rgba(47, 30, 113, 1)',
-  tagRed: 'rgb(139, 63, 63)',
+  tagRed: 'rgba(111, 50, 50, 1)',
-  tagPink: 'rgb(194, 132, 132)',
+  tagPink: 'rgba(155, 106, 106, 1)',
-  tagYellow: 'rgb(187, 165, 61)',
+  tagYellow: 'rgba(150, 132, 49, 1)',
-  tagOrange: 'rgb(231, 161, 58)',
+  tagOrange: 'rgba(185, 129, 46, 1)',
-  tagGray: 'rgb(41, 41, 41)',
+  tagGray: 'rgba(41, 41, 41, 1)',
   paletteLineYellow: 'rgb(255, 232, 56)',
   paletteLineOrange: 'rgb(255, 175, 56)',
   paletteLineTangerine: 'rgb(255, 99, 31)',

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

@@ -73,13 +73,13 @@ export const getButtonColors = (
     case 'warning':
       return {
         background: 'var(--affine-background-warning-color)',
-        color: 'var(--affine-background-warning-color)',
+        color: 'var(--affine-warning-color)',
         borderColor: 'var(--affine-background-warning-color)',
         '.affine-button-icon': {
-          color: 'var(--affine-background-warning-color)',
+          color: 'var(--affine-warning-color)',
         },
         ':hover': {
-          borderColor: 'var(--affine-background-warning-color)',
+          borderColor: 'var(--affine-warning-color)',
           color: extend?.hoverColor,
           background: extend?.hoverBackground,
           ...extend?.hoverStyle,