fix(core): adapt new database chip color scheme (#8697)

fix AF-1609

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx

@@ -2,7 +2,11 @@
 
 import { PropertyValue } from '@affine/component';
 import { type TagLike, TagsInlineEditor } from '@affine/component/ui/tags';
-import { paletteLineToTag, TagService } from '@affine/core/modules/tag';
+import { TagService } from '@affine/core/modules/tag';
+import {
+  affineLabelToDatabaseTagColor,
+  databaseTagColorToV2,
+} from '@affine/core/modules/tag/entities/utils';
 import type { DatabaseBlockDataSource } from '@blocksuite/affine/blocks';
 import type { SelectTag } from '@blocksuite/data-view';
 import { LiveData, useLiveData, useService } from '@toeverything/infra';
@@ -147,7 +151,15 @@ const BlocksuiteDatabaseSelector = ({
   const tagService = useService(TagService);
   const selectCell = cell as any as SingleSelectCell | MultiSelectCell;
   const selectedIds = useLiveData(adapter.getSelectedIds$(selectCell));
-  const tagOptions = useLiveData(adapter.getTagOptions$(selectCell));
+  let tagOptions = useLiveData(adapter.getTagOptions$(selectCell));
+
+  // adapt bs database old tag color to new tag color
+  tagOptions = useMemo(() => {
+    return tagOptions.map(tag => ({
+      ...tag,
+      color: databaseTagColorToV2(tag.color),
+    }));
+  }, [tagOptions]);
 
   const onCreateTag = useCallback(
     (name: string, color: string) => {
@@ -185,7 +197,7 @@ const BlocksuiteDatabaseSelector = ({
   const tagColors = useMemo(() => {
     return tagService.tagColors.map(([name, color]) => ({
       id: name,
-      value: paletteLineToTag(color), // map from palette line to tag color
+      value: affineLabelToDatabaseTagColor(color),
       name,
     }));
   }, [tagService.tagColors]);
@@ -193,6 +205,9 @@ const BlocksuiteDatabaseSelector = ({
   const onTagChange = useCallback(
     (tagId: string, property: string, value: string) => {
       adapter.updateTag(selectCell, dataSource, tagId, old => {
+        if (property === 'color') {
+          value = affineLabelToDatabaseTagColor(value);
+        }
         return {
           ...old,
           [property]: value,

packages/frontend/core/src/modules/tag/entities/tag.ts

@@ -2,7 +2,7 @@ import type { DocsService } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
 
 import type { TagStore } from '../stores/tag';
-import { tagToPaletteLine } from './utils';
+import { databaseTagColorToAffineLabel } from './utils';
 
 export class Tag extends Entity<{ id: string }> {
   id = this.props.id;
@@ -20,7 +20,9 @@ export class Tag extends Entity<{ id: string }> {
 
   value$ = this.tagOption$.map(tag => tag?.value || '');
 
-  color$ = this.tagOption$.map(tag => tagToPaletteLine(tag?.color ?? '') || '');
+  color$ = this.tagOption$.map(
+    tag => databaseTagColorToAffineLabel(tag?.color ?? '') || ''
+  );
 
   createDate$ = this.tagOption$.map(tag => tag?.createDate || Date.now());
 

packages/frontend/core/src/modules/tag/entities/utils.ts

@@ -1,25 +1,60 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+
 const tagToPaletteLineMap: Record<string, string> = {
-  'var(--affine-tag-red)': 'var(--affine-palette-line-red)',
-  'var(--affine-tag-teal)': 'var(--affine-palette-line-green)',
-  'var(--affine-tag-blue)': 'var(--affine-palette-line-blue)',
-  'var(--affine-tag-yellow)': 'var(--affine-palette-line-yellow)',
-  'var(--affine-tag-pink)': 'var(--affine-palette-line-magenta)',
-  'var(--affine-tag-white)': 'var(--affine-palette-line-grey)',
-  'var(--affine-tag-gray)': 'var(--affine-palette-line-grey)',
-  'var(--affine-tag-orange)': 'var(--affine-palette-line-orange)',
-  'var(--affine-tag-purple)': 'var(--affine-palette-line-purple)',
-  'var(--affine-tag-green)': 'var(--affine-palette-line-green)',
+  [cssVar('tagRed')]: cssVar('paletteLineRed'),
+  [cssVar('tagTeal')]: cssVar('paletteLineTeal'),
+  [cssVar('tagBlue')]: cssVar('paletteLineBlue'),
+  [cssVar('tagYellow')]: cssVar('paletteLineYellow'),
+  [cssVar('tagPink')]: cssVar('paletteLineMagenta'),
+  [cssVar('tagWhite')]: cssVar('paletteLineWhite'),
+  [cssVar('tagGray')]: cssVar('paletteLineGrey'),
+  [cssVar('tagOrange')]: cssVar('paletteLineOrange'),
+  [cssVar('tagPurple')]: cssVar('paletteLinePurple'),
+  [cssVar('tagGreen')]: cssVar('paletteLineGreen'),
 };
 
-const paletteLineToTagMap: Record<string, string> = Object.fromEntries(
-  Object.entries(tagToPaletteLineMap).map(([key, value]) => [value, key])
+// map var(--affine-tag-xxx) colors to var(--affine-chip-label-xxx)
+const tagToChipColorMap: Record<string, string> = {
+  [cssVar('tagRed')]: cssVarV2('chip/label/red'),
+  [cssVar('tagTeal')]: cssVarV2('chip/label/teal'),
+  [cssVar('tagBlue')]: cssVarV2('chip/label/blue'),
+  [cssVar('tagYellow')]: cssVarV2('chip/label/yellow'),
+  [cssVar('tagPink')]: cssVarV2('chip/label/magenta'),
+  [cssVar('tagWhite')]: cssVarV2('chip/label/white'),
+  [cssVar('tagGray')]: cssVarV2('chip/label/grey'),
+  [cssVar('tagOrange')]: cssVarV2('chip/label/orange'),
+  [cssVar('tagPurple')]: cssVarV2('chip/label/purple'),
+  [cssVar('tagGreen')]: cssVarV2('chip/label/green'),
+};
+
+const chipToTagColorMap: Record<string, string> = Object.fromEntries(
+  Object.entries(tagToChipColorMap).map(([key, value]) => [value, key])
 );
 
-// hack: map var(--affine-tag-xxx) colors to var(--affine-palette-line-xxx)
-export const tagToPaletteLine = (color: string) => {
-  return tagToPaletteLineMap[color] || color;
+const chipToPaletteLineMap: Record<string, string> = Object.fromEntries(
+  Object.entries(chipToTagColorMap).map(([chip, tag]) => [
+    chip,
+    tagToPaletteLineMap[tag],
+  ])
+);
+
+const paletteLineToChipMap: Record<string, string> = Object.fromEntries(
+  Object.entries(chipToPaletteLineMap).map(([chip, paletteLine]) => [
+    paletteLine,
+    chip,
+  ])
+);
+
+// hack: map var(--affine-tag-xxx)/var(--affine-chip-label-xxx) colors to var(--affine-palette-line-xxx)
+export const databaseTagColorToAffineLabel = (color: string) => {
+  return chipToPaletteLineMap[color] || tagToPaletteLineMap[color] || color;
 };
 
-export const paletteLineToTag = (color: string) => {
-  return paletteLineToTagMap[color] || color;
+export const databaseTagColorToV2 = (color: string) => {
+  return tagToChipColorMap[color] || color;
+};
+
+export const affineLabelToDatabaseTagColor = (color: string) => {
+  return paletteLineToChipMap[color] || color;
 };

packages/frontend/core/src/modules/tag/index.ts

@@ -1,5 +1,8 @@
 export { Tag } from './entities/tag';
-export { paletteLineToTag, tagToPaletteLine } from './entities/utils';
+export {
+  affineLabelToDatabaseTagColor,
+  databaseTagColorToAffineLabel,
+} from './entities/utils';
 export { TagService } from './service/tag';
 export { useDeleteTagConfirmModal } from './view/delete-tag-modal';