From a06372cfaadbe9653321a37d619a0f7c11732404 Mon Sep 17 00:00:00 2001 From: Cats Juice Date: Thu, 26 Dec 2024 16:48:32 +0800 Subject: [PATCH] feat(theme): update v2 theme variables(2024-12-26 16:48) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 2024-12-26 16:48 ### New - `backlinks/blockBackgroundColor` - light: `#9292920d` - dark: `#9292921a` - `backlinks/blockBorder` - light: `#9292921a` - dark: `#9292922b` - `backlinks/blockHover` - light: `#0000000d` - dark: `#9292922b` - `button/buttonOverHover` - light: `#ffffff` - dark: `#414141` - `edgelessToolbar/media/background` - light: `#f4f9ff` - dark: `#333333` - `edgelessToolbar/media/vector` - light: `#3883ff` - dark: `#3883ff` - `icon/fileIconBorder` - light: `#cdcdcd` - dark: `#565656` - `icon/fileIconColors/blue` - light: `#0077cb` - dark: `#0077cb` - `icon/fileIconColors/green` - light: `#1d9c07` - dark: `#1d9c07` - `icon/fileIconColors/grey` - light: `#1e1b4b` - dark: `#312e81` - `icon/fileIconColors/magenta` - light: `#e660a4` - dark: `#e660a4` - `icon/fileIconColors/purple` - light: `#6e52df` - dark: `#6e52df` - `icon/fileIconColors/red` - light: `#ed3f3f` - dark: `#ed3f3f` - `icon/fileIconColors/yellow` - light: `#facc15` - dark: `#facc15` - `segment/background` - light: `#0000000d` - dark: `#ffffff0d` - `segment/button` - light: `#ffffff` - dark: `#ffffff17` - `slashMenu/background` - light: `#ffffff` - dark: `#252525` - `tOC/background` - light: `#ffffff` - dark: `#252525` - `table/border` - light: `#0000001a` - dark: `#ffffff21` - `table/focusBackground` - light: `#1e96eb0a` - dark: `#1e96eb0a` - `table/focusBorder` - light: `#1e96eb` - dark: `#1e96eb` - `table/textSecondary` - light: `#00000085` - dark: `#ffffff8f` - `table/headerBackground/blue` - light: `#f0f9ff` - dark: `#004b7b` - `table/headerBackground/default` - light: `#ffffff` - dark: `#252525` - `table/headerBackground/green` - light: `#efffec` - dark: `#10340a` - `table/headerBackground/grey` - light: `#f5f5f5` - dark: `#565656` - `table/headerBackground/headerColor` - light: `#f3f3f3` - dark: `#252525` - `table/headerBackground/orange` - light: `#fff7ee` - dark: `#843b06` - `table/headerBackground/purple` - light: `#f7f5ff` - dark: `#25136d` - `table/headerBackground/red` - light: `#fff4f5` - dark: `#460606` - `table/headerBackground/teal` - light: `#eefffd` - dark: `#0e4841` - `table/headerBackground/yellow` - light: `#fffded` - dark: `#704200` - `table/indicator/activated` - light: `#1e96eb` - dark: `#1e96eb` - `table/indicator/border` - light: `#e6e6e6` - dark: `#252525` - `table/indicator/drag` - light: `#0000002b` - dark: `#ffffff21` - `table/indicator/hover` - light: `#0000000d` - dark: `#ffffff17` - `workspacePicker/background` - light: `#ffffff` - dark: `#252525` - `workspacePicker/border` - light: `#e6e6e6` - dark: `#414141` ### Removed - `button/buttonoOverHover` - light: ~~`#ffffff`~~ - dark: ~~`#414141`~~ ### Updated - `button/innerBlackBorder` - light: `#00000012` → `#0000001a` - dark: `#ffffff17` → `#ffffff0d` - `input/border/default` - light: `#e6e6e6` → `#0000001a` - dark: `#e6e6e6` → `#ffffff0d` - `input/border/error` - light: `#f45353` → `#ed3f3f` - `button/iconButtonSolid` - dark: `#252525` → `#ffffff17` - `button/secondary` - dark: `#000000` → `#ffffff17` - `centerPeek/icon` - dark: `#b3b3b3` → `#cdcdcd` - `chatBlock/chatBlockBoder` - dark: `#e6e6e6` → `#252525` - `chatBlock/chatBlockIcon` - dark: `#b3b3b3` → `#cdcdcd` - `chatBlock/chatBlockText` - dark: `#141414` → `#e6e6e6` - `input/background` - dark: `#ffffff` → `#ffffff17` - `layer/insideBorder/border` - dark: `#414141` → `#252525` - `text/placeholder` - dark: `#565656` → `#7a7a7a` - `toast/iconState/error` - dark: `#ed3f3f` → `#c83030` - `toast/iconState/success` - dark: `#44b931` → `#1d9c07` --- packages/theme/src/v2/CHANGELOG.md | 159 ++++- packages/theme/src/v2/source/variables.json | 610 +++++++++++++++++--- packages/theme/src/v2/variables.ts | 244 ++++++-- 3 files changed, 889 insertions(+), 124 deletions(-) diff --git a/packages/theme/src/v2/CHANGELOG.md b/packages/theme/src/v2/CHANGELOG.md index 4a3967b..0cab63f 100644 --- a/packages/theme/src/v2/CHANGELOG.md +++ b/packages/theme/src/v2/CHANGELOG.md @@ -667,4 +667,161 @@ None ### Updated -None \ No newline at end of file +None + +# 2024-12-26 16:48 +### New + +- `backlinks/blockBackgroundColor` + - light: `#9292920d` + - dark: `#9292921a` +- `backlinks/blockBorder` + - light: `#9292921a` + - dark: `#9292922b` +- `backlinks/blockHover` + - light: `#0000000d` + - dark: `#9292922b` +- `button/buttonOverHover` + - light: `#ffffff` + - dark: `#414141` +- `edgelessToolbar/media/background` + - light: `#f4f9ff` + - dark: `#333333` +- `edgelessToolbar/media/vector` + - light: `#3883ff` + - dark: `#3883ff` +- `icon/fileIconBorder` + - light: `#cdcdcd` + - dark: `#565656` +- `icon/fileIconColors/blue` + - light: `#0077cb` + - dark: `#0077cb` +- `icon/fileIconColors/green` + - light: `#1d9c07` + - dark: `#1d9c07` +- `icon/fileIconColors/grey` + - light: `#1e1b4b` + - dark: `#312e81` +- `icon/fileIconColors/magenta` + - light: `#e660a4` + - dark: `#e660a4` +- `icon/fileIconColors/purple` + - light: `#6e52df` + - dark: `#6e52df` +- `icon/fileIconColors/red` + - light: `#ed3f3f` + - dark: `#ed3f3f` +- `icon/fileIconColors/yellow` + - light: `#facc15` + - dark: `#facc15` +- `segment/background` + - light: `#0000000d` + - dark: `#ffffff0d` +- `segment/button` + - light: `#ffffff` + - dark: `#ffffff17` +- `slashMenu/background` + - light: `#ffffff` + - dark: `#252525` +- `tOC/background` + - light: `#ffffff` + - dark: `#252525` +- `table/border` + - light: `#0000001a` + - dark: `#ffffff21` +- `table/focusBackground` + - light: `#1e96eb0a` + - dark: `#1e96eb0a` +- `table/focusBorder` + - light: `#1e96eb` + - dark: `#1e96eb` +- `table/textSecondary` + - light: `#00000085` + - dark: `#ffffff8f` +- `table/headerBackground/blue` + - light: `#f0f9ff` + - dark: `#004b7b` +- `table/headerBackground/default` + - light: `#ffffff` + - dark: `#252525` +- `table/headerBackground/green` + - light: `#efffec` + - dark: `#10340a` +- `table/headerBackground/grey` + - light: `#f5f5f5` + - dark: `#565656` +- `table/headerBackground/headerColor` + - light: `#f3f3f3` + - dark: `#252525` +- `table/headerBackground/orange` + - light: `#fff7ee` + - dark: `#843b06` +- `table/headerBackground/purple` + - light: `#f7f5ff` + - dark: `#25136d` +- `table/headerBackground/red` + - light: `#fff4f5` + - dark: `#460606` +- `table/headerBackground/teal` + - light: `#eefffd` + - dark: `#0e4841` +- `table/headerBackground/yellow` + - light: `#fffded` + - dark: `#704200` +- `table/indicator/activated` + - light: `#1e96eb` + - dark: `#1e96eb` +- `table/indicator/border` + - light: `#e6e6e6` + - dark: `#252525` +- `table/indicator/drag` + - light: `#0000002b` + - dark: `#ffffff21` +- `table/indicator/hover` + - light: `#0000000d` + - dark: `#ffffff17` +- `workspacePicker/background` + - light: `#ffffff` + - dark: `#252525` +- `workspacePicker/border` + - light: `#e6e6e6` + - dark: `#414141` + +### Removed + +- `button/buttonoOverHover` + - light: ~~`#ffffff`~~ + - dark: ~~`#414141`~~ + +### Updated + +- `button/innerBlackBorder` + - light: `#00000012` → `#0000001a` + - dark: `#ffffff17` → `#ffffff0d` +- `input/border/default` + - light: `#e6e6e6` → `#0000001a` + - dark: `#e6e6e6` → `#ffffff0d` +- `input/border/error` + - light: `#f45353` → `#ed3f3f` +- `button/iconButtonSolid` + - dark: `#252525` → `#ffffff17` +- `button/secondary` + - dark: `#000000` → `#ffffff17` +- `centerPeek/icon` + - dark: `#b3b3b3` → `#cdcdcd` +- `chatBlock/chatBlockBoder` + - dark: `#e6e6e6` → `#252525` +- `chatBlock/chatBlockIcon` + - dark: `#b3b3b3` → `#cdcdcd` +- `chatBlock/chatBlockText` + - dark: `#141414` → `#e6e6e6` +- `input/background` + - dark: `#ffffff` → `#ffffff17` +- `layer/insideBorder/border` + - dark: `#414141` → `#252525` +- `text/placeholder` + - dark: `#565656` → `#7a7a7a` +- `toast/iconState/error` + - dark: `#ed3f3f` → `#c83030` +- `toast/iconState/success` + - dark: `#44b931` → `#1d9c07` \ No newline at end of file diff --git a/packages/theme/src/v2/source/variables.json b/packages/theme/src/v2/source/variables.json index f1bc129..91bd08e 100644 --- a/packages/theme/src/v2/source/variables.json +++ b/packages/theme/src/v2/source/variables.json @@ -8,6 +8,24 @@ "id": "285:0" }, "color": [ + { + "name": "Backlinks/blockBackgroundColor", + "value": "#9292920d", + "var": "Transparent/grey/50 (5%)", + "rootAlias": "Transparent/grey/50 (5%)" + }, + { + "name": "Backlinks/blockBorder", + "value": "#9292921a", + "var": "Transparent/grey/200 (10%)", + "rootAlias": "Transparent/grey/200 (10%)" + }, + { + "name": "Backlinks/blockHover", + "value": "#0000000d", + "var": "Transparent/black/50 (5%)", + "rootAlias": "Transparent/black/50 (5%)" + }, { "name": "Badge/Believer", "value": "#002742", @@ -158,12 +176,6 @@ "var": "Grey/200", "rootAlias": "Grey/200" }, - { - "name": "Button/InnerBlackBorder", - "value": "#00000012", - "var": "Transparent/black/100 (7%)", - "rootAlias": "Transparent/black/100 (7%)" - }, { "name": "Button/badgesColor", "value": "#ed3f3f", @@ -171,7 +183,7 @@ "rootAlias": "Red/600" }, { - "name": "Button/buttonoOverHover", + "name": "Button/buttonOverHover", "value": "#ffffff", "var": "Base/White", "rootAlias": "Base/White" @@ -206,6 +218,12 @@ "var": "Base/White", "rootAlias": "Base/White" }, + { + "name": "Button/innerBlackBorder", + "value": "#0000001a", + "var": "Transparent/black/200 (10%)", + "rootAlias": "Transparent/black/200 (10%)" + }, { "name": "Button/primary", "value": "#1e96eb", @@ -1088,6 +1106,18 @@ "var": "Transparent/white/700 (72%)", "rootAlias": "Transparent/white/700 (72%)" }, + { + "name": "EdgelessToolbar/media/background", + "value": "#f4f9ff", + "var": "Others/Illustration/mediaBackground", + "rootAlias": "Others/Illustration/mediaBackground" + }, + { + "name": "EdgelessToolbar/media/vector", + "value": "#3883ff", + "var": "Others/Illustration/mediaShape", + "rootAlias": "Others/Illustration/mediaShape" + }, { "name": "Icon/activated", "value": "#1e96eb", @@ -1100,6 +1130,12 @@ "var": "Grey/400", "rootAlias": "Grey/400" }, + { + "name": "Icon/fileIconBorder", + "value": "#cdcdcd", + "var": "Grey/300", + "rootAlias": "Grey/300" + }, { "name": "Icon/primary", "value": "#7a7a7a", @@ -1119,28 +1155,52 @@ "rootAlias": "Grey/300" }, { - "name": "Input/Background", - "value": "#ffffff", - "var": "Layer/background/primary", - "rootAlias": "Base/White" + "name": "Icon/fileIconColors/blue", + "value": "#0077cb", + "var": "AFFiNE/700", + "rootAlias": "AFFiNE/700" }, { - "name": "Input/Border/active", - "value": "#1e96eb", - "var": "Layer/InsideBorder/primaryBorder", - "rootAlias": "AFFiNE/600" + "name": "Icon/fileIconColors/green", + "value": "#1d9c07", + "var": "Green/800", + "rootAlias": "Green/800" }, { - "name": "Input/Border/default", - "value": "#e6e6e6", - "var": "Layer/InsideBorder/border", - "rootAlias": "Grey/200" + "name": "Icon/fileIconColors/grey", + "value": "#1e1b4b", + "var": "Indigo/950", + "rootAlias": "Indigo/950" }, { - "name": "Input/Border/error", - "value": "#f45353", - "var": "Red/500", - "rootAlias": "Red/500" + "name": "Icon/fileIconColors/magenta", + "value": "#e660a4", + "var": "Magenta/600", + "rootAlias": "Magenta/600" + }, + { + "name": "Icon/fileIconColors/purple", + "value": "#6e52df", + "var": "Purple/600", + "rootAlias": "Purple/600" + }, + { + "name": "Icon/fileIconColors/red", + "value": "#ed3f3f", + "var": "Red/600", + "rootAlias": "Red/600" + }, + { + "name": "Icon/fileIconColors/yellow", + "value": "#facc15", + "var": "Yellow/600", + "rootAlias": "Yellow/600" + }, + { + "name": "Input/Background", + "value": "#ffffff", + "var": "Base/White", + "rootAlias": "Base/White" }, { "name": "Input/ScrollBar/Handle", @@ -1148,6 +1208,24 @@ "var": "Transparent/black/200 (10%)", "rootAlias": "Transparent/black/200 (10%)" }, + { + "name": "Input/border/active", + "value": "#1e96eb", + "var": "AFFiNE/600", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Input/border/default", + "value": "#0000001a", + "var": "Transparent/black/200 (10%)", + "rootAlias": "Transparent/black/200 (10%)" + }, + { + "name": "Input/border/error", + "value": "#ed3f3f", + "var": "Red/600", + "rootAlias": "Red/600" + }, { "name": "Layer/black", "value": "#000000", @@ -1358,6 +1436,18 @@ "var": "Grey/600", "rootAlias": "Grey/600" }, + { + "name": "Segment/background", + "value": "#0000000d", + "var": "Transparent/black/50 (5%)", + "rootAlias": "Transparent/black/50 (5%)" + }, + { + "name": "Segment/button", + "value": "#ffffff", + "var": "Base/White", + "rootAlias": "Base/White" + }, { "name": "Shadow/EdgelessToolbar/Note/shadow-1-color", "value": "#ffffff2e", @@ -1610,6 +1700,12 @@ "var": "Grey/200", "rootAlias": "Grey/200" }, + { + "name": "SlashMenu/background", + "value": "#ffffff", + "var": "Layer/background/primary", + "rootAlias": "Base/White" + }, { "name": "Status/error", "value": "#ed3f3f", @@ -1670,6 +1766,12 @@ "var": "Grey/100", "rootAlias": "Grey/100" }, + { + "name": "TOC/background", + "value": "#ffffff", + "var": "Layer/background/primary", + "rootAlias": "Base/White" + }, { "name": "Tab/divider/divider", "value": "#00000012", @@ -1736,6 +1838,114 @@ "var": "Grey/100", "rootAlias": "Grey/100" }, + { + "name": "Table/border", + "value": "#0000001a", + "var": "Transparent/black/200 (10%)", + "rootAlias": "Transparent/black/200 (10%)" + }, + { + "name": "Table/focusBackground", + "value": "#1e96eb0a", + "var": "Transparent/AFFiNE Blue/400 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + }, + { + "name": "Table/focusBorder", + "value": "#1e96eb", + "var": "AFFiNE/600", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Table/textSecondary", + "value": "#00000085", + "var": "Transparent/black/500 (52%)", + "rootAlias": "Transparent/black/500 (52%)" + }, + { + "name": "Table/headerBackground/blue", + "value": "#f0f9ff", + "var": "Blue/25", + "rootAlias": "Blue/25" + }, + { + "name": "Table/headerBackground/default", + "value": "#ffffff", + "var": "Layer/background/primary", + "rootAlias": "Base/White" + }, + { + "name": "Table/headerBackground/green", + "value": "#efffec", + "var": "Green/25", + "rootAlias": "Green/25" + }, + { + "name": "Table/headerBackground/grey", + "value": "#f5f5f5", + "var": "Grey/50", + "rootAlias": "Grey/50" + }, + { + "name": "Table/headerBackground/headerColor", + "value": "#f3f3f3", + "var": "Grey/100", + "rootAlias": "Grey/100" + }, + { + "name": "Table/headerBackground/orange", + "value": "#fff7ee", + "var": "Orange/25", + "rootAlias": "Orange/25" + }, + { + "name": "Table/headerBackground/purple", + "value": "#f7f5ff", + "var": "Purple/25", + "rootAlias": "Purple/25" + }, + { + "name": "Table/headerBackground/red", + "value": "#fff4f5", + "var": "Red/25", + "rootAlias": "Red/25" + }, + { + "name": "Table/headerBackground/teal", + "value": "#eefffd", + "var": "Teal/25", + "rootAlias": "Teal/25" + }, + { + "name": "Table/headerBackground/yellow", + "value": "#fffded", + "var": "Yellow/25", + "rootAlias": "Yellow/25" + }, + { + "name": "Table/indicator/activated", + "value": "#1e96eb", + "var": "Button/primary", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Table/indicator/border", + "value": "#e6e6e6", + "var": "Layer/InsideBorder/border", + "rootAlias": "Grey/200" + }, + { + "name": "Table/indicator/drag", + "value": "#0000002b", + "var": "Transparent/black/300 (17%)", + "rootAlias": "Transparent/black/300 (17%)" + }, + { + "name": "Table/indicator/hover", + "value": "#0000000d", + "var": "Layer/background/hoverOverlay", + "rootAlias": "Transparent/black/50 (5%)" + }, { "name": "Text/disable", "value": "#7a7a7a", @@ -1993,6 +2203,18 @@ "value": "#ffffff2b", "var": "Transparent/white/300 (17%)", "rootAlias": "Transparent/white/300 (17%)" + }, + { + "name": "WorkspacePicker/background", + "value": "#ffffff", + "var": "Layer/background/primary", + "rootAlias": "Base/White" + }, + { + "name": "WorkspacePicker/border", + "value": "#e6e6e6", + "var": "Grey/200", + "rootAlias": "Grey/200" } ], "number": [ @@ -2251,6 +2473,24 @@ "id": "296:0" }, "color": [ + { + "name": "Backlinks/blockBackgroundColor", + "value": "#9292921a", + "var": "Transparent/grey/200 (10%)", + "rootAlias": "Transparent/grey/200 (10%)" + }, + { + "name": "Backlinks/blockBorder", + "value": "#9292922b", + "var": "Transparent/grey/300 (17%)", + "rootAlias": "Transparent/grey/300 (17%)" + }, + { + "name": "Backlinks/blockHover", + "value": "#9292922b", + "var": "Transparent/grey/300 (17%)", + "rootAlias": "Transparent/grey/300 (17%)" + }, { "name": "Badge/Believer", "value": "#002742", @@ -2401,12 +2641,6 @@ "var": "Grey/800", "rootAlias": "Grey/800" }, - { - "name": "Button/InnerBlackBorder", - "value": "#ffffff17", - "var": "Transparent/white/100 (9%)", - "rootAlias": "Transparent/white/100 (9%)" - }, { "name": "Button/badgesColor", "value": "#c83030", @@ -2414,7 +2648,7 @@ "rootAlias": "Red/700" }, { - "name": "Button/buttonoOverHover", + "name": "Button/buttonOverHover", "value": "#414141", "var": "Grey/800", "rootAlias": "Grey/800" @@ -2445,9 +2679,15 @@ }, { "name": "Button/iconButtonSolid", - "value": "#252525", - "var": "Grey/900", - "rootAlias": "Grey/900" + "value": "#ffffff17", + "var": "Transparent/white/100 (9%)", + "rootAlias": "Transparent/white/100 (9%)" + }, + { + "name": "Button/innerBlackBorder", + "value": "#ffffff0d", + "var": "Transparent/white/50 (5%)", + "rootAlias": "Transparent/white/50 (5%)" }, { "name": "Button/primary", @@ -2463,9 +2703,9 @@ }, { "name": "Button/secondary", - "value": "#000000", - "var": "Base/Black", - "rootAlias": "Base/Black" + "value": "#ffffff17", + "var": "Transparent/white/100 (9%)", + "rootAlias": "Transparent/white/100 (9%)" }, { "name": "Button/success", @@ -2517,9 +2757,9 @@ }, { "name": "CenterPeek/icon", - "value": "#b3b3b3", + "value": "#cdcdcd", "var": "Icon/secondary", - "rootAlias": "Grey/400" + "rootAlias": "Grey/300" }, { "name": "CenterPeek/overlay", @@ -2535,21 +2775,21 @@ }, { "name": "ChatBlock/chatBlockBoder", - "value": "#e6e6e6", + "value": "#252525", "var": "Layer/InsideBorder/border", - "rootAlias": "Grey/200" + "rootAlias": "Grey/900" }, { "name": "ChatBlock/chatBlockIcon", - "value": "#b3b3b3", + "value": "#cdcdcd", "var": "Icon/secondary", - "rootAlias": "Grey/400" + "rootAlias": "Grey/300" }, { "name": "ChatBlock/chatBlockText", - "value": "#141414", + "value": "#e6e6e6", "var": "Text/primary", - "rootAlias": "Grey/950" + "rootAlias": "Grey/200" }, { "name": "Chip/Label/blue", @@ -3331,6 +3571,18 @@ "var": "Transparent/white/400 (23%)", "rootAlias": "Transparent/white/400 (23%)" }, + { + "name": "EdgelessToolbar/media/background", + "value": "#333333", + "var": "Others/Illustration/mediaBackgroundDark", + "rootAlias": "Others/Illustration/mediaBackgroundDark" + }, + { + "name": "EdgelessToolbar/media/vector", + "value": "#3883ff", + "var": "Others/Illustration/mediaShape", + "rootAlias": "Others/Illustration/mediaShape" + }, { "name": "Icon/activated", "value": "#1e96eb", @@ -3343,6 +3595,12 @@ "var": "Grey/800", "rootAlias": "Grey/800" }, + { + "name": "Icon/fileIconBorder", + "value": "#565656", + "var": "Grey/700", + "rootAlias": "Grey/700" + }, { "name": "Icon/primary", "value": "#f3f3f3", @@ -3362,35 +3620,77 @@ "rootAlias": "Grey/700" }, { - "name": "Input/Background", - "value": "#ffffff", - "var": "Layer/background/primary", - "rootAlias": "Base/White" + "name": "Icon/fileIconColors/blue", + "value": "#0077cb", + "var": "AFFiNE/700", + "rootAlias": "AFFiNE/700" }, { - "name": "Input/Border/active", - "value": "#1e96eb", - "var": "Layer/InsideBorder/primaryBorder", - "rootAlias": "AFFiNE/600" + "name": "Icon/fileIconColors/green", + "value": "#1d9c07", + "var": "Green/800", + "rootAlias": "Green/800" }, { - "name": "Input/Border/default", - "value": "#e6e6e6", - "var": "Layer/InsideBorder/border", - "rootAlias": "Grey/200" + "name": "Icon/fileIconColors/grey", + "value": "#312e81", + "var": "Indigo/900", + "rootAlias": "Indigo/900" + }, + { + "name": "Icon/fileIconColors/magenta", + "value": "#e660a4", + "var": "Magenta/600", + "rootAlias": "Magenta/600" + }, + { + "name": "Icon/fileIconColors/purple", + "value": "#6e52df", + "var": "Purple/600", + "rootAlias": "Purple/600" }, { - "name": "Input/Border/error", + "name": "Icon/fileIconColors/red", "value": "#ed3f3f", "var": "Red/600", "rootAlias": "Red/600" }, + { + "name": "Icon/fileIconColors/yellow", + "value": "#facc15", + "var": "Yellow/600", + "rootAlias": "Yellow/600" + }, + { + "name": "Input/Background", + "value": "#ffffff17", + "var": "Transparent/white/100 (9%)", + "rootAlias": "Transparent/white/100 (9%)" + }, { "name": "Input/ScrollBar/Handle", "value": "#ffffff2b", "var": "Transparent/white/300 (17%)", "rootAlias": "Transparent/white/300 (17%)" }, + { + "name": "Input/border/active", + "value": "#1e96eb", + "var": "AFFiNE/600", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Input/border/default", + "value": "#ffffff0d", + "var": "Transparent/white/50 (5%)", + "rootAlias": "Transparent/white/50 (5%)" + }, + { + "name": "Input/border/error", + "value": "#ed3f3f", + "var": "Red/600", + "rootAlias": "Red/600" + }, { "name": "Layer/black", "value": "#ffffff", @@ -3423,9 +3723,9 @@ }, { "name": "Layer/InsideBorder/border", - "value": "#414141", - "var": "Grey/800", - "rootAlias": "Grey/800" + "value": "#252525", + "var": "Grey/900", + "rootAlias": "Grey/900" }, { "name": "Layer/InsideBorder/primaryBorder", @@ -3601,6 +3901,18 @@ "var": "Grey/400", "rootAlias": "Grey/400" }, + { + "name": "Segment/background", + "value": "#ffffff0d", + "var": "Transparent/white/50 (5%)", + "rootAlias": "Transparent/white/50 (5%)" + }, + { + "name": "Segment/button", + "value": "#ffffff17", + "var": "Transparent/white/100 (9%)", + "rootAlias": "Transparent/white/100 (9%)" + }, { "name": "Shadow/EdgelessToolbar/Note/shadow-1-color", "value": "#ffffff14", @@ -3693,21 +4005,21 @@ }, { "name": "Shadow/Mobile/splashScreen/blockColor", - "value": "#f3f3f3", + "value": "#565656", "var": "Layer/background/tertiary", - "rootAlias": "Grey/100" + "rootAlias": "Grey/700" }, { "name": "Shadow/Mobile/splashScreen/border", - "value": "#0000001a", + "value": "#ffffff21", "var": "Database/border", - "rootAlias": "Transparent/black/200 (10%)" + "rootAlias": "Transparent/white/200 (13%)" }, { "name": "Shadow/Mobile/splashScreen/gradientFadeIn", - "value": "#ffffff", + "value": "#141414", "var": "Layer/background/primary", - "rootAlias": "Base/White" + "rootAlias": "Grey/950" }, { "name": "Shadow/Mobile/splashScreen/gradientFadeOut", @@ -3717,9 +4029,9 @@ }, { "name": "Shadow/Mobile/splashScreen/penColor", - "value": "#f3f3f3", + "value": "#565656", "var": "Layer/background/tertiary", - "rootAlias": "Grey/100" + "rootAlias": "Grey/700" }, { "name": "Shadow/Mobile/splashScreen/skeltonColor", @@ -3729,21 +4041,21 @@ }, { "name": "Shadow/Mobile/splashScreen/solidBackground", - "value": "#ffffff", + "value": "#141414", "var": "Layer/background/primary", - "rootAlias": "Base/White" + "rootAlias": "Grey/950" }, { "name": "Shadow/Mobile/splashScreen/solidBackground-2", - "value": "#f5f5f5", + "value": "#252525", "var": "Layer/background/secondary", - "rootAlias": "Grey/50" + "rootAlias": "Grey/900" }, { "name": "Shadow/Mobile/splashScreen/transparentText", - "value": "#929292", + "value": "#7a7a7a", "var": "Text/tertiary", - "rootAlias": "Grey/500" + "rootAlias": "Grey/600" }, { "name": "Shadow/Mobile/splashScreen/transparentText-2", @@ -3831,9 +4143,9 @@ }, { "name": "Shadow/popUpShadow/1-color", - "value": "#e6e6e6", + "value": "#252525", "var": "Layer/InsideBorder/border", - "rootAlias": "Grey/200" + "rootAlias": "Grey/900" }, { "name": "Shadow/popUpShadow/2-color", @@ -3853,6 +4165,12 @@ "var": "Grey/900", "rootAlias": "Grey/900" }, + { + "name": "SlashMenu/background", + "value": "#252525", + "var": "Layer/background/secondary", + "rootAlias": "Grey/900" + }, { "name": "Status/error", "value": "#c83030", @@ -3913,6 +4231,12 @@ "var": "Grey/900", "rootAlias": "Grey/900" }, + { + "name": "TOC/background", + "value": "#252525", + "var": "Layer/background/secondary", + "rootAlias": "Grey/900" + }, { "name": "Tab/divider/divider", "value": "#ffffff21", @@ -3979,6 +4303,114 @@ "var": "Grey/900", "rootAlias": "Grey/900" }, + { + "name": "Table/border", + "value": "#ffffff21", + "var": "Transparent/white/200 (13%)", + "rootAlias": "Transparent/white/200 (13%)" + }, + { + "name": "Table/focusBackground", + "value": "#1e96eb0a", + "var": "Transparent/AFFiNE Blue/400 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + }, + { + "name": "Table/focusBorder", + "value": "#1e96eb", + "var": "AFFiNE/600", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Table/textSecondary", + "value": "#ffffff8f", + "var": "Transparent/white/500 (56%)", + "rootAlias": "Transparent/white/500 (56%)" + }, + { + "name": "Table/headerBackground/blue", + "value": "#004b7b", + "var": "Blue/950", + "rootAlias": "Blue/950" + }, + { + "name": "Table/headerBackground/default", + "value": "#252525", + "var": "Layer/background/secondary", + "rootAlias": "Grey/900" + }, + { + "name": "Table/headerBackground/green", + "value": "#10340a", + "var": "Green/950", + "rootAlias": "Green/950" + }, + { + "name": "Table/headerBackground/grey", + "value": "#565656", + "var": "Grey/700", + "rootAlias": "Grey/700" + }, + { + "name": "Table/headerBackground/headerColor", + "value": "#252525", + "var": "Grey/900", + "rootAlias": "Grey/900" + }, + { + "name": "Table/headerBackground/orange", + "value": "#843b06", + "var": "Orange/950", + "rootAlias": "Orange/950" + }, + { + "name": "Table/headerBackground/purple", + "value": "#25136d", + "var": "Purple/950", + "rootAlias": "Purple/950" + }, + { + "name": "Table/headerBackground/red", + "value": "#460606", + "var": "Red/950", + "rootAlias": "Red/950" + }, + { + "name": "Table/headerBackground/teal", + "value": "#0e4841", + "var": "Teal/950", + "rootAlias": "Teal/950" + }, + { + "name": "Table/headerBackground/yellow", + "value": "#704200", + "var": "Yellow/900", + "rootAlias": "Yellow/900" + }, + { + "name": "Table/indicator/activated", + "value": "#1e96eb", + "var": "Button/primary", + "rootAlias": "AFFiNE/600" + }, + { + "name": "Table/indicator/border", + "value": "#252525", + "var": "Layer/InsideBorder/border", + "rootAlias": "Grey/900" + }, + { + "name": "Table/indicator/drag", + "value": "#ffffff21", + "var": "Transparent/white/200 (13%)", + "rootAlias": "Transparent/white/200 (13%)" + }, + { + "name": "Table/indicator/hover", + "value": "#ffffff17", + "var": "Layer/background/hoverOverlay", + "rootAlias": "Transparent/white/100 (9%)" + }, { "name": "Text/disable", "value": "#565656", @@ -4005,9 +4437,9 @@ }, { "name": "Text/placeholder", - "value": "#565656", - "var": "Grey/700", - "rootAlias": "Grey/700" + "value": "#7a7a7a", + "var": "Grey/600", + "rootAlias": "Grey/600" }, { "name": "Text/primary", @@ -4161,9 +4593,9 @@ }, { "name": "Toast/iconState/error", - "value": "#ed3f3f", + "value": "#c83030", "var": "Status/error", - "rootAlias": "Red/600" + "rootAlias": "Red/700" }, { "name": "Toast/iconState/regular", @@ -4173,9 +4605,9 @@ }, { "name": "Toast/iconState/success", - "value": "#44b931", + "value": "#1d9c07", "var": "Status/success", - "rootAlias": "Green/500" + "rootAlias": "Green/800" }, { "name": "Toast/overlay/secondary", @@ -4236,6 +4668,18 @@ "value": "#ffffff2b", "var": "Transparent/white/300 (17%)", "rootAlias": "Transparent/white/300 (17%)" + }, + { + "name": "WorkspacePicker/background", + "value": "#252525", + "var": "Layer/background/secondary", + "rootAlias": "Grey/900" + }, + { + "name": "WorkspacePicker/border", + "value": "#414141", + "var": "Grey/800", + "rootAlias": "Grey/800" } ], "number": [ diff --git a/packages/theme/src/v2/variables.ts b/packages/theme/src/v2/variables.ts index 52c6e2f..1daf303 100644 --- a/packages/theme/src/v2/variables.ts +++ b/packages/theme/src/v2/variables.ts @@ -3,6 +3,9 @@ // ⚠️ Do not modify this file directly! export const lightThemeV2 = { + 'backlinks/blockBackgroundColor': '#9292920d', + 'backlinks/blockBorder': '#9292921a', + 'backlinks/blockHover': '#0000000d', 'badge/believer': '#002742', 'badge/free': '#29a3fa', 'badge/pro': '#29a3fa', @@ -28,14 +31,14 @@ export const lightThemeV2 = { 'block/notSupportedBlock/background': '#ffffff', 'block/notSupportedBlock/inlineBg/default': '#f3f3f3', 'block/notSupportedBlock/inlineBg/hover': '#e6e6e6', - 'button/innerBlackBorder': '#00000012', 'button/badgesColor': '#ed3f3f', - 'button/buttonoOverHover': '#ffffff', + 'button/buttonOverHover': '#ffffff', 'button/checkBox': '#1e96eb', 'button/disable': '#b3b3b3', 'button/emptyIconBackground': '#0000000d', 'button/error': '#ed3f3f', 'button/iconButtonSolid': '#ffffff', + 'button/innerBlackBorder': '#0000001a', 'button/primary': '#1e96eb', 'button/pureWhiteText': '#ffffff', 'button/secondary': '#ffffff', @@ -183,16 +186,26 @@ export const lightThemeV2 = { 'edgelessToolbar/penEraser/eraserBorder2': '#e3e2e4', 'edgelessToolbar/penEraser/eraserFill': '#f1f1f1', 'edgelessToolbar/penEraser/eraserHighlight': '#ffffffb8', + 'edgelessToolbar/media/background': '#f4f9ff', + 'edgelessToolbar/media/vector': '#3883ff', 'icon/activated': '#1e96eb', 'icon/disable': '#b3b3b3', + 'icon/fileIconBorder': '#cdcdcd', 'icon/primary': '#7a7a7a', 'icon/secondary': '#b3b3b3', 'icon/tertiary': '#cdcdcd', + 'icon/fileIconColors/blue': '#0077cb', + 'icon/fileIconColors/green': '#1d9c07', + 'icon/fileIconColors/grey': '#1e1b4b', + 'icon/fileIconColors/magenta': '#e660a4', + 'icon/fileIconColors/purple': '#6e52df', + 'icon/fileIconColors/red': '#ed3f3f', + 'icon/fileIconColors/yellow': '#facc15', 'input/background': '#ffffff', - 'input/border/active': '#1e96eb', - 'input/border/default': '#e6e6e6', - 'input/border/error': '#f45353', 'input/scrollBar/handle': '#0000001a', + 'input/border/active': '#1e96eb', + 'input/border/default': '#0000001a', + 'input/border/error': '#ed3f3f', 'layer/black': '#000000', 'layer/pureBlack': '#000000', 'layer/pureWhite': '#ffffff', @@ -228,7 +241,10 @@ export const lightThemeV2 = { 'radio/disable': '#cdcdcd', 'radio/active/chekced': '#1e96eb', 'radio/active/default': '#7a7a7a', + 'segment/background': '#0000000d', + 'segment/button': '#ffffff', 'skeleton/skeleton': '#e6e6e6', + 'slashMenu/background': '#ffffff', 'status/error': '#ed3f3f', 'status/success': '#44b931', 'switch/buttonBackground/active': '#ffffff', @@ -239,6 +255,7 @@ export const lightThemeV2 = { 'switch/iconColor/active': '#565656', 'switch/iconColor/default': '#929292', 'switch/switchBackground/background': '#f3f3f3', + 'tOC/background': '#ffffff', 'tab/divider/divider': '#00000012', 'tab/divider/indicator': '#1e96eb', 'tab/fontColor/active': '#141414', @@ -250,6 +267,24 @@ export const lightThemeV2 = { 'tab/tabBackground/active': '#ffffff', 'tab/tabBackground/default': '#f3f3f3', 'tab/tabBackground/hover': '#f3f3f3', + 'table/border': '#0000001a', + 'table/focusBackground': '#1e96eb0a', + 'table/focusBorder': '#1e96eb', + 'table/textSecondary': '#00000085', + 'table/headerBackground/blue': '#f0f9ff', + 'table/headerBackground/default': '#ffffff', + 'table/headerBackground/green': '#efffec', + 'table/headerBackground/grey': '#f5f5f5', + 'table/headerBackground/headerColor': '#f3f3f3', + 'table/headerBackground/orange': '#fff7ee', + 'table/headerBackground/purple': '#f7f5ff', + 'table/headerBackground/red': '#fff4f5', + 'table/headerBackground/teal': '#eefffd', + 'table/headerBackground/yellow': '#fffded', + 'table/indicator/activated': '#1e96eb', + 'table/indicator/border': '#e6e6e6', + 'table/indicator/drag': '#0000002b', + 'table/indicator/hover': '#0000000d', 'text/disable': '#7a7a7a', 'text/emphasis': '#1e96eb', 'text/link': '#035f9f', @@ -293,8 +328,13 @@ export const lightThemeV2 = { 'tooltips/background': '#000000', 'tooltips/foreground': '#ffffff', 'tooltips/secondaryBackground': '#ffffff2b', + 'workspacePicker/background': '#ffffff', + 'workspacePicker/border': '#e6e6e6', }; export const darkThemeV2 = { + 'backlinks/blockBackgroundColor': '#9292921a', + 'backlinks/blockBorder': '#9292922b', + 'backlinks/blockHover': '#9292922b', 'badge/believer': '#002742', 'badge/free': '#29a3fa', 'badge/pro': '#29a3fa', @@ -320,17 +360,17 @@ export const darkThemeV2 = { 'block/notSupportedBlock/background': '#000000', 'block/notSupportedBlock/inlineBg/default': '#252525', 'block/notSupportedBlock/inlineBg/hover': '#414141', - 'button/innerBlackBorder': '#ffffff17', 'button/badgesColor': '#c83030', - 'button/buttonoOverHover': '#414141', + 'button/buttonOverHover': '#414141', 'button/checkBox': '#1e96eb', 'button/disable': '#7a7a7a', 'button/emptyIconBackground': '#ffffff0d', 'button/error': '#c83030', - 'button/iconButtonSolid': '#252525', + 'button/iconButtonSolid': '#ffffff17', + 'button/innerBlackBorder': '#ffffff0d', 'button/primary': '#1e96eb', 'button/pureWhiteText': '#ffffff', - 'button/secondary': '#000000', + 'button/secondary': '#ffffff17', 'button/success': '#1d9c07', 'button/grabber/select': '#ffffff21', 'button/grabber/default': '#ffffff17', @@ -339,12 +379,12 @@ export const darkThemeV2 = { 'button/sidebarButton/background': '#ffffff08', 'button/siderbarPrimary/background': '#0000002b', 'centerPeek/background': '#000000', - 'centerPeek/icon': '#b3b3b3', + 'centerPeek/icon': '#cdcdcd', 'centerPeek/overlay': '#00000085', 'chatBlock/chatBlockBg': '#252525', - 'chatBlock/chatBlockBoder': '#e6e6e6', - 'chatBlock/chatBlockIcon': '#b3b3b3', - 'chatBlock/chatBlockText': '#141414', + 'chatBlock/chatBlockBoder': '#252525', + 'chatBlock/chatBlockIcon': '#cdcdcd', + 'chatBlock/chatBlockText': '#e6e6e6', 'chip/label/blue': '#004b7b', 'chip/label/green': '#225c18', 'chip/label/grey': '#414141', @@ -475,22 +515,32 @@ export const darkThemeV2 = { 'edgelessToolbar/penEraser/eraserBorder2': '#9b9b9b', 'edgelessToolbar/penEraser/eraserFill': '#c1c1c1', 'edgelessToolbar/penEraser/eraserHighlight': '#ffffff3b', + 'edgelessToolbar/media/background': '#333333', + 'edgelessToolbar/media/vector': '#3883ff', 'icon/activated': '#1e96eb', 'icon/disable': '#414141', + 'icon/fileIconBorder': '#565656', 'icon/primary': '#f3f3f3', 'icon/secondary': '#cdcdcd', 'icon/tertiary': '#565656', - 'input/background': '#ffffff', + 'icon/fileIconColors/blue': '#0077cb', + 'icon/fileIconColors/green': '#1d9c07', + 'icon/fileIconColors/grey': '#312e81', + 'icon/fileIconColors/magenta': '#e660a4', + 'icon/fileIconColors/purple': '#6e52df', + 'icon/fileIconColors/red': '#ed3f3f', + 'icon/fileIconColors/yellow': '#facc15', + 'input/background': '#ffffff17', + 'input/scrollBar/handle': '#ffffff2b', 'input/border/active': '#1e96eb', - 'input/border/default': '#e6e6e6', + 'input/border/default': '#ffffff0d', 'input/border/error': '#ed3f3f', - 'input/scrollBar/handle': '#ffffff2b', 'layer/black': '#ffffff', 'layer/pureBlack': '#000000', 'layer/pureWhite': '#ffffff', 'layer/white': '#000000', 'layer/insideBorder/blackBorder': '#ffffff0d', - 'layer/insideBorder/border': '#414141', + 'layer/insideBorder/border': '#252525', 'layer/insideBorder/primaryBorder': '#1e96eb', 'layer/insideBorder/whiteBorder': '#ffffff0d', 'layer/background/codeBlock': '#252525', @@ -520,7 +570,10 @@ export const darkThemeV2 = { 'radio/disable': '#7a7a7a', 'radio/active/chekced': '#1e96eb', 'radio/active/default': '#b3b3b3', + 'segment/background': '#ffffff0d', + 'segment/button': '#ffffff17', 'skeleton/skeleton': '#252525', + 'slashMenu/background': '#252525', 'status/error': '#c83030', 'status/success': '#1d9c07', 'switch/buttonBackground/active': '#414141', @@ -531,6 +584,7 @@ export const darkThemeV2 = { 'switch/iconColor/active': '#cdcdcd', 'switch/iconColor/default': '#7a7a7a', 'switch/switchBackground/background': '#252525', + 'tOC/background': '#252525', 'tab/divider/divider': '#ffffff21', 'tab/divider/indicator': '#1e96eb', 'tab/fontColor/active': '#e6e6e6', @@ -542,11 +596,29 @@ export const darkThemeV2 = { 'tab/tabBackground/active': '#414141', 'tab/tabBackground/default': '#252525', 'tab/tabBackground/hover': '#252525', + 'table/border': '#ffffff21', + 'table/focusBackground': '#1e96eb0a', + 'table/focusBorder': '#1e96eb', + 'table/textSecondary': '#ffffff8f', + 'table/headerBackground/blue': '#004b7b', + 'table/headerBackground/default': '#252525', + 'table/headerBackground/green': '#10340a', + 'table/headerBackground/grey': '#565656', + 'table/headerBackground/headerColor': '#252525', + 'table/headerBackground/orange': '#843b06', + 'table/headerBackground/purple': '#25136d', + 'table/headerBackground/red': '#460606', + 'table/headerBackground/teal': '#0e4841', + 'table/headerBackground/yellow': '#704200', + 'table/indicator/activated': '#1e96eb', + 'table/indicator/border': '#252525', + 'table/indicator/drag': '#ffffff21', + 'table/indicator/hover': '#ffffff17', 'text/disable': '#565656', 'text/emphasis': '#29a3fa', 'text/link': '#7ac8ff', 'text/listDotAndNumber': '#4ab1fa', - 'text/placeholder': '#565656', + 'text/placeholder': '#7a7a7a', 'text/primary': '#e6e6e6', 'text/pureWhite': '#ffffff', 'text/secondary': '#929292', @@ -572,9 +644,9 @@ export const darkThemeV2 = { 'text/highlight/fg/yellow': '#facc15', 'toast/cardLayer/second': '#252525', 'toast/cardLayer/third': '#252525', - 'toast/iconState/error': '#ed3f3f', + 'toast/iconState/error': '#c83030', 'toast/iconState/regular': '#035f9f', - 'toast/iconState/success': '#44b931', + 'toast/iconState/success': '#1d9c07', 'toast/overlay/secondary': '#0000000d', 'toast/overlay/tertiary': '#00000008', 'toggle/background': '#0077cb', @@ -585,8 +657,15 @@ export const darkThemeV2 = { 'tooltips/background': '#414141', 'tooltips/foreground': '#ffffff', 'tooltips/secondaryBackground': '#ffffff2b', + 'workspacePicker/background': '#252525', + 'workspacePicker/border': '#414141', }; export const nestedLightTheme = { + backlinks: { + blockBackgroundColor: '#9292920d', + blockBorder: '#9292921a', + blockHover: '#0000000d', + }, badge: { believer: '#002742', free: '#29a3fa', pro: '#29a3fa' }, block: { callout: { @@ -620,14 +699,14 @@ export const nestedLightTheme = { }, }, button: { - innerBlackBorder: '#00000012', badgesColor: '#ed3f3f', - buttonoOverHover: '#ffffff', + buttonOverHover: '#ffffff', checkBox: '#1e96eb', disable: '#b3b3b3', emptyIconBackground: '#0000000d', error: '#ed3f3f', iconButtonSolid: '#ffffff', + innerBlackBorder: '#0000001a', primary: '#1e96eb', pureWhiteText: '#ffffff', secondary: '#ffffff', @@ -693,7 +772,7 @@ export const nestedLightTheme = { white: '#ffffff', yellow: '#fffbd5', }, - border: { active: '#1e96eb', default: '#0000002b', locked: '#00000085' }, + border: { active: '#1e96eb', default: '#0000002b' }, fontColor: { font: '#000000f2' }, }, group: { @@ -719,6 +798,7 @@ export const nestedLightTheme = { white: '#ffffff', yellow: '#facc15', }, + lock: { locked: '#92929285' }, mindMap: { line: '#000000' }, note: { black: '#b3b3b3', @@ -794,7 +874,7 @@ export const nestedLightTheme = { linearEnd: '#0000001f', linearStart: '#ffffff1f', }, - 'pen&eraser': { + penEraser: { background: '#f1f1f1', 'bodyShadow-1': '#00000033', 'bodyShadow-2': '#0000001a', @@ -808,18 +888,29 @@ export const nestedLightTheme = { eraserFill: '#f1f1f1', eraserHighlight: '#ffffffb8', }, + media: { background: '#f4f9ff', vector: '#3883ff' }, }, icon: { activated: '#1e96eb', disable: '#b3b3b3', + fileIconBorder: '#cdcdcd', primary: '#7a7a7a', secondary: '#b3b3b3', tertiary: '#cdcdcd', + fileIconColors: { + blue: '#0077cb', + green: '#1d9c07', + grey: '#1e1b4b', + magenta: '#e660a4', + purple: '#6e52df', + red: '#ed3f3f', + yellow: '#facc15', + }, }, input: { background: '#ffffff', - border: { active: '#1e96eb', default: '#e6e6e6', error: '#f45353' }, scrollBar: { handle: '#0000001a' }, + border: { active: '#1e96eb', default: '#0000001a', error: '#ed3f3f' }, }, layer: { black: '#000000', @@ -865,7 +956,9 @@ export const nestedLightTheme = { disable: '#cdcdcd', active: { chekced: '#1e96eb', default: '#7a7a7a' }, }, + segment: { background: '#0000000d', button: '#ffffff' }, skeleton: { skeleton: '#e6e6e6' }, + slashMenu: { background: '#ffffff' }, status: { error: '#ed3f3f', success: '#44b931' }, switch: { buttonBackground: { active: '#ffffff', hover: '#0000000d' }, @@ -877,12 +970,37 @@ export const nestedLightTheme = { iconColor: { active: '#565656', default: '#929292' }, switchBackground: { background: '#f3f3f3' }, }, + tOC: { background: '#ffffff' }, tab: { divider: { divider: '#00000012', indicator: '#1e96eb' }, fontColor: { active: '#141414', default: '#b3b3b3', hover: '#141414' }, iconColor: { active: '#565656', default: '#b3b3b3', hover: '#565656' }, tabBackground: { active: '#ffffff', default: '#f3f3f3', hover: '#f3f3f3' }, }, + table: { + border: '#0000001a', + focusBackground: '#1e96eb0a', + focusBorder: '#1e96eb', + textSecondary: '#00000085', + headerBackground: { + blue: '#f0f9ff', + default: '#ffffff', + green: '#efffec', + grey: '#f5f5f5', + headerColor: '#f3f3f3', + orange: '#fff7ee', + purple: '#f7f5ff', + red: '#fff4f5', + teal: '#eefffd', + yellow: '#fffded', + }, + indicator: { + activated: '#1e96eb', + border: '#e6e6e6', + drag: '#0000002b', + hover: '#0000000d', + }, + }, text: { disable: '#7a7a7a', emphasis: '#1e96eb', @@ -936,8 +1054,14 @@ export const nestedLightTheme = { foreground: '#ffffff', secondaryBackground: '#ffffff2b', }, + workspacePicker: { background: '#ffffff', border: '#e6e6e6' }, } as const; export const nestedDarkTheme = { + backlinks: { + blockBackgroundColor: '#9292921a', + blockBorder: '#9292922b', + blockHover: '#9292922b', + }, badge: { believer: '#002742', free: '#29a3fa', pro: '#29a3fa' }, block: { callout: { @@ -971,29 +1095,29 @@ export const nestedDarkTheme = { }, }, button: { - innerBlackBorder: '#ffffff17', badgesColor: '#c83030', - buttonoOverHover: '#414141', + buttonOverHover: '#414141', checkBox: '#1e96eb', disable: '#7a7a7a', emptyIconBackground: '#ffffff0d', error: '#c83030', - iconButtonSolid: '#252525', + iconButtonSolid: '#ffffff17', + innerBlackBorder: '#ffffff0d', primary: '#1e96eb', pureWhiteText: '#ffffff', - secondary: '#000000', + secondary: '#ffffff17', success: '#1d9c07', grabber: { select: '#ffffff21', default: '#ffffff17' }, mobile: { aIActionBackground: '#252525', deletedAction: '#c83030' }, sidebarButton: { background: '#ffffff08' }, siderbarPrimary: { background: '#0000002b' }, }, - centerPeek: { background: '#000000', icon: '#b3b3b3', overlay: '#00000085' }, + centerPeek: { background: '#000000', icon: '#cdcdcd', overlay: '#00000085' }, chatBlock: { chatBlockBg: '#252525', - chatBlockBoder: '#e6e6e6', - chatBlockIcon: '#b3b3b3', - chatBlockText: '#141414', + chatBlockBoder: '#252525', + chatBlockIcon: '#cdcdcd', + chatBlockText: '#e6e6e6', }, chip: { label: { @@ -1044,7 +1168,7 @@ export const nestedDarkTheme = { white: '#ffffff', yellow: '#fffbd5', }, - border: { active: '#1e96eb', default: '#ffffff2b', locked: '#ffffff8f' }, + border: { active: '#1e96eb', default: '#ffffff2b' }, fontColor: { font: '#000000f2' }, }, group: { @@ -1070,6 +1194,7 @@ export const nestedDarkTheme = { white: '#ffffff', yellow: '#facc15', }, + lock: { locked: '#92929285' }, mindMap: { line: '#ffffff' }, note: { black: '#252525', @@ -1145,7 +1270,7 @@ export const nestedDarkTheme = { linearEnd: '#00000000', linearStart: '#00000000', }, - 'pen&eraser': { + penEraser: { background: '#c1c1c1', 'bodyShadow-1': '#00000099', 'bodyShadow-2': '#00000066', @@ -1159,18 +1284,29 @@ export const nestedDarkTheme = { eraserFill: '#c1c1c1', eraserHighlight: '#ffffff3b', }, + media: { background: '#333333', vector: '#3883ff' }, }, icon: { activated: '#1e96eb', disable: '#414141', + fileIconBorder: '#565656', primary: '#f3f3f3', secondary: '#cdcdcd', tertiary: '#565656', + fileIconColors: { + blue: '#0077cb', + green: '#1d9c07', + grey: '#312e81', + magenta: '#e660a4', + purple: '#6e52df', + red: '#ed3f3f', + yellow: '#facc15', + }, }, input: { - background: '#ffffff', - border: { active: '#1e96eb', default: '#e6e6e6', error: '#ed3f3f' }, + background: '#ffffff17', scrollBar: { handle: '#ffffff2b' }, + border: { active: '#1e96eb', default: '#ffffff0d', error: '#ed3f3f' }, }, layer: { black: '#ffffff', @@ -1179,7 +1315,7 @@ export const nestedDarkTheme = { white: '#000000', insideBorder: { blackBorder: '#ffffff0d', - border: '#414141', + border: '#252525', primaryBorder: '#1e96eb', whiteBorder: '#ffffff0d', }, @@ -1216,7 +1352,9 @@ export const nestedDarkTheme = { disable: '#7a7a7a', active: { chekced: '#1e96eb', default: '#b3b3b3' }, }, + segment: { background: '#ffffff0d', button: '#ffffff17' }, skeleton: { skeleton: '#252525' }, + slashMenu: { background: '#252525' }, status: { error: '#c83030', success: '#1d9c07' }, switch: { buttonBackground: { active: '#414141', hover: '#ffffff0d' }, @@ -1228,18 +1366,43 @@ export const nestedDarkTheme = { iconColor: { active: '#cdcdcd', default: '#7a7a7a' }, switchBackground: { background: '#252525' }, }, + tOC: { background: '#252525' }, tab: { divider: { divider: '#ffffff21', indicator: '#1e96eb' }, fontColor: { active: '#e6e6e6', default: '#565656', hover: '#e6e6e6' }, iconColor: { active: '#cdcdcd', default: '#7a7a7a', hover: '#cdcdcd' }, tabBackground: { active: '#414141', default: '#252525', hover: '#252525' }, }, + table: { + border: '#ffffff21', + focusBackground: '#1e96eb0a', + focusBorder: '#1e96eb', + textSecondary: '#ffffff8f', + headerBackground: { + blue: '#004b7b', + default: '#252525', + green: '#10340a', + grey: '#565656', + headerColor: '#252525', + orange: '#843b06', + purple: '#25136d', + red: '#460606', + teal: '#0e4841', + yellow: '#704200', + }, + indicator: { + activated: '#1e96eb', + border: '#252525', + drag: '#ffffff21', + hover: '#ffffff17', + }, + }, text: { disable: '#565656', emphasis: '#29a3fa', link: '#7ac8ff', listDotAndNumber: '#4ab1fa', - placeholder: '#565656', + placeholder: '#7a7a7a', primary: '#e6e6e6', pureWhite: '#ffffff', secondary: '#929292', @@ -1272,7 +1435,7 @@ export const nestedDarkTheme = { }, toast: { cardLayer: { second: '#252525', third: '#252525' }, - iconState: { error: '#ed3f3f', regular: '#035f9f', success: '#44b931' }, + iconState: { error: '#c83030', regular: '#035f9f', success: '#1d9c07' }, overlay: { secondary: '#0000000d', tertiary: '#00000008' }, }, toggle: { @@ -1287,4 +1450,5 @@ export const nestedDarkTheme = { foreground: '#ffffff', secondaryBackground: '#ffffff2b', }, + workspacePicker: { background: '#252525', border: '#414141' }, } as const;