From cafb1ae8f170eb0964239124d24ebcbb9d48627e Mon Sep 17 00:00:00 2001 From: Cats Juice Date: Tue, 27 May 2025 11:44:45 +0800 Subject: [PATCH] feat(theme): update v2 theme variables(2025-5-27 11:44) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 2025-5-27 11:44 ### New - `adjustmentHandle/border` - light: `#ffffff` - dark: `#ffffff` - `block/code/lineNum` - light: `#b3b3b3` - dark: `#7a7a7a` - `block/comment/hanelActive` - light: `#1e96eb05` - dark: `#ffffff0d` - `block/comment/highlightActive` - light: `#1e96eb4d` - dark: `#1e96eb4d` - `block/comment/highlightDefault` - light: `#1e96eb14` - dark: `#1e96eb14` - `block/comment/highlightUnderline` - light: `#1e96ebb2` - dark: `#1e96ebb2` - `layer/background/edgelessGrid` - light: `#e6e6e6` - dark: `#565656` - `loading/imageLoadingBackground` - light: `#92929238` - dark: `#92929238` - `loading/imageLoadingLayer` - light: `#ffffff8f` - dark: `#ffffff8f` ### Removed None ### Updated - `adjustmentHandle/background` - light: `#00000038` → `#00000085` - dark: `#ffffff8f` → `#00000085` - `loading/backgroundLayer` - light: `#9292921a` → `#92929238` - dark: `#929292e5` → `#929292f2` - `loading/background` - dark: `#ffffff21` → `#ffffff2b` --- packages/theme/src/v2/CHANGELOG.md | 48 ++++- packages/theme/src/v2/source/variables.json | 202 +++++++++++++++----- packages/theme/src/v2/variables.ts | 58 +++++- 3 files changed, 250 insertions(+), 58 deletions(-) diff --git a/packages/theme/src/v2/CHANGELOG.md b/packages/theme/src/v2/CHANGELOG.md index 4e0e9b9..cf25b0e 100644 --- a/packages/theme/src/v2/CHANGELOG.md +++ b/packages/theme/src/v2/CHANGELOG.md @@ -1306,4 +1306,50 @@ None - `layer/background/codeBlock` - light: `#f9f9f9` → `#f5f5f5` - `edgeless/note/white` - - dark: `#000000` → `#252525` \ No newline at end of file + - dark: `#000000` → `#252525` + +# 2025-5-27 11:44 +### New + +- `adjustmentHandle/border` + - light: `#ffffff` + - dark: `#ffffff` +- `block/code/lineNum` + - light: `#b3b3b3` + - dark: `#7a7a7a` +- `block/comment/hanelActive` + - light: `#1e96eb05` + - dark: `#ffffff0d` +- `block/comment/highlightActive` + - light: `#1e96eb4d` + - dark: `#1e96eb4d` +- `block/comment/highlightDefault` + - light: `#1e96eb14` + - dark: `#1e96eb14` +- `block/comment/highlightUnderline` + - light: `#1e96ebb2` + - dark: `#1e96ebb2` +- `layer/background/edgelessGrid` + - light: `#e6e6e6` + - dark: `#565656` +- `loading/imageLoadingBackground` + - light: `#92929238` + - dark: `#92929238` +- `loading/imageLoadingLayer` + - light: `#ffffff8f` + - dark: `#ffffff8f` + +### Removed + +None + +### Updated + +- `adjustmentHandle/background` + - light: `#00000038` → `#00000085` + - dark: `#ffffff8f` → `#00000085` +- `loading/backgroundLayer` + - light: `#9292921a` → `#92929238` + - dark: `#929292e5` → `#929292f2` +- `loading/background` + - dark: `#ffffff21` → `#ffffff2b` \ 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 8a02f43..16635e5 100644 --- a/packages/theme/src/v2/source/variables.json +++ b/packages/theme/src/v2/source/variables.json @@ -46,9 +46,15 @@ }, { "name": "AdjustmentHandle/background", - "value": "#00000038", - "var": "Transparent/black/400 (22%)", - "rootAlias": "Transparent/black/400 (22%)" + "value": "#00000085", + "var": "Transparent/black/500 (52%)", + "rootAlias": "Transparent/black/500 (52%)" + }, + { + "name": "AdjustmentHandle/border", + "value": "#ffffff", + "var": "Base/White", + "rootAlias": "Base/White" }, { "name": "Backlinks/blockBackgroundColor", @@ -194,6 +200,36 @@ "var": "Yellow/500", "rootAlias": "Yellow/500" }, + { + "name": "Block/code/lineNum", + "value": "#b3b3b3", + "var": "Grey/400", + "rootAlias": "Grey/400" + }, + { + "name": "Block/comment/hanelActive", + "value": "#1e96eb05", + "var": "Transparent/AFFiNE Blue/20 (2%)", + "rootAlias": "Transparent/AFFiNE Blue/20 (2%)" + }, + { + "name": "Block/comment/highlightActive", + "value": "#1e96eb4d", + "var": "Transparent/AFFiNE Blue/300 (30%)", + "rootAlias": "Transparent/AFFiNE Blue/300 (30%)" + }, + { + "name": "Block/comment/highlightDefault", + "value": "#1e96eb14", + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" + }, + { + "name": "Block/comment/highlightUnderline", + "value": "#1e96ebb2", + "var": "Transparent/AFFiNE Blue/700 (70%)", + "rootAlias": "Transparent/AFFiNE Blue/700 (70%)" + }, { "name": "Block/divider/divider", "value": "#92929238", @@ -263,8 +299,8 @@ { "name": "Button/actionActive", "value": "#1e96eb14", - "var": "Transparent/AFFiNE Blue/800 (8%)", - "rootAlias": "Transparent/AFFiNE Blue/800 (8%)" + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" }, { "name": "Button/badgesColor", @@ -341,8 +377,8 @@ { "name": "Button/templateLabelBackground", "value": "#1e96eb0a", - "var": "Transparent/AFFiNE Blue/400 (4%)", - "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + "var": "Transparent/AFFiNE Blue/40 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/40 (4%)" }, { "name": "Button/grabber/Select", @@ -635,8 +671,8 @@ { "name": "Database/focusBackground", "value": "#1e96eb0a", - "var": "Transparent/AFFiNE Blue/400 (4%)", - "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + "var": "Transparent/AFFiNE Blue/40 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/40 (4%)" }, { "name": "Database/textSecondary", @@ -1097,8 +1133,8 @@ { "name": "Edgeless/selection/selectionMarqueeBackground", "value": "#1e96eb14", - "var": "Transparent/AFFiNE Blue/800 (8%)", - "rootAlias": "Transparent/AFFiNE Blue/800 (8%)" + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" }, { "name": "Edgeless/selection/selectionMarqueeBorder", @@ -1646,6 +1682,12 @@ "var": "Grey/50", "rootAlias": "Grey/50" }, + { + "name": "Layer/background/edgelessGrid", + "value": "#e6e6e6", + "var": "Grey/200", + "rootAlias": "Grey/200" + }, { "name": "Layer/background/error", "value": "#fff1f1", @@ -1762,9 +1804,9 @@ }, { "name": "Loading/backgroundLayer", - "value": "#9292921a", - "var": "Transparent/grey/200 (10%)", - "rootAlias": "Transparent/grey/200 (10%)" + "value": "#92929238", + "var": "Transparent/grey/400 (22%)", + "rootAlias": "Transparent/grey/400 (22%)" }, { "name": "Loading/foreground", @@ -1772,6 +1814,18 @@ "var": "AFFiNE/600", "rootAlias": "AFFiNE/600" }, + { + "name": "Loading/imageLoadingBackground", + "value": "#92929238", + "var": "Transparent/grey/400 (22%)", + "rootAlias": "Transparent/grey/400 (22%)" + }, + { + "name": "Loading/imageLoadingLayer", + "value": "#ffffff8f", + "var": "Transparent/white/500 (56%)", + "rootAlias": "Transparent/white/500 (56%)" + }, { "name": "Others/warnLabel/black", "value": "#000000", @@ -2242,15 +2296,15 @@ }, { "name": "Shadow/NoteShadow/stickerShadow/1-color", - "value": "#00000029", - "var": "Others/Shadow/16(black)", - "rootAlias": "Others/Shadow/16(black)" + "value": "#0000001a", + "var": "Others/Shadow/10(black)", + "rootAlias": "Others/Shadow/10(black)" }, { "name": "Shadow/NoteShadow/stickerShadow/2-color", - "value": "#0000000d", - "var": "Others/Shadow/5(black)", - "rootAlias": "Others/Shadow/5(black)" + "value": "#00000014", + "var": "Others/Shadow/8(black)", + "rootAlias": "Others/Shadow/8(black)" }, { "name": "Shadow/activeShadow/Color", @@ -2453,8 +2507,8 @@ { "name": "Table/focusBackground", "value": "#1e96eb0a", - "var": "Transparent/AFFiNE Blue/400 (4%)", - "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + "var": "Transparent/AFFiNE Blue/40 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/40 (4%)" }, { "name": "Table/focusBorder", @@ -3029,32 +3083,32 @@ "rootAlias": "" }, { - "name": "Shadow/NoteShadow/stickerShadow/1-x", - "value": "NaNrem", + "name": "Shadow/NoteShadow/stickerShadow/1-blur", + "value": "Infinityrem", "var": "", "rootAlias": "" }, { - "name": "Shadow/NoteShadow/stickerShadow/2-spread", - "value": "-Infinityrem", + "name": "Shadow/NoteShadow/stickerShadow/1-x", + "value": "NaNrem", "var": "", "rootAlias": "" }, { - "name": "Shadow/NoteShadow/stickerShadow/1-blur", + "name": "Shadow/NoteShadow/stickerShadow/1-y", "value": "Infinityrem", "var": "", "rootAlias": "" }, { - "name": "Shadow/NoteShadow/stickerShadow/1-y", + "name": "Shadow/NoteShadow/stickerShadow/2-blur", "value": "Infinityrem", "var": "", "rootAlias": "" }, { - "name": "Shadow/NoteShadow/stickerShadow/2-blur", - "value": "Infinityrem", + "name": "Shadow/NoteShadow/stickerShadow/2-spread", + "value": "NaNrem", "var": "", "rootAlias": "" }, @@ -3231,9 +3285,15 @@ }, { "name": "AdjustmentHandle/background", - "value": "#ffffff8f", - "var": "Transparent/white/500 (56%)", - "rootAlias": "Transparent/white/500 (56%)" + "value": "#00000085", + "var": "Transparent/black/500 (52%)", + "rootAlias": "Transparent/black/500 (52%)" + }, + { + "name": "AdjustmentHandle/border", + "value": "#ffffff", + "var": "Base/White", + "rootAlias": "Base/White" }, { "name": "Backlinks/blockBackgroundColor", @@ -3379,6 +3439,36 @@ "var": "Yellow/700", "rootAlias": "Yellow/700" }, + { + "name": "Block/code/lineNum", + "value": "#7a7a7a", + "var": "Grey/600", + "rootAlias": "Grey/600" + }, + { + "name": "Block/comment/hanelActive", + "value": "#ffffff0d", + "var": "Transparent/white/50 (5%)", + "rootAlias": "Transparent/white/50 (5%)" + }, + { + "name": "Block/comment/highlightActive", + "value": "#1e96eb4d", + "var": "Transparent/AFFiNE Blue/300 (30%)", + "rootAlias": "Transparent/AFFiNE Blue/300 (30%)" + }, + { + "name": "Block/comment/highlightDefault", + "value": "#1e96eb14", + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" + }, + { + "name": "Block/comment/highlightUnderline", + "value": "#1e96ebb2", + "var": "Transparent/AFFiNE Blue/700 (70%)", + "rootAlias": "Transparent/AFFiNE Blue/700 (70%)" + }, { "name": "Block/divider/divider", "value": "#9292922b", @@ -3526,8 +3616,8 @@ { "name": "Button/templateLabelBackground", "value": "#1e96eb14", - "var": "Transparent/AFFiNE Blue/800 (8%)", - "rootAlias": "Transparent/AFFiNE Blue/800 (8%)" + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" }, { "name": "Button/grabber/Select", @@ -3820,8 +3910,8 @@ { "name": "Database/focusBackground", "value": "#1e96eb0a", - "var": "Transparent/AFFiNE Blue/400 (4%)", - "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + "var": "Transparent/AFFiNE Blue/40 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/40 (4%)" }, { "name": "Database/textSecondary", @@ -4282,8 +4372,8 @@ { "name": "Edgeless/selection/selectionMarqueeBackground", "value": "#1e96eb14", - "var": "Transparent/AFFiNE Blue/800 (8%)", - "rootAlias": "Transparent/AFFiNE Blue/800 (8%)" + "var": "Transparent/AFFiNE Blue/80 (8%)", + "rootAlias": "Transparent/AFFiNE Blue/80 (8%)" }, { "name": "Edgeless/selection/selectionMarqueeBorder", @@ -4831,6 +4921,12 @@ "var": "Grey/900", "rootAlias": "Grey/900" }, + { + "name": "Layer/background/edgelessGrid", + "value": "#565656", + "var": "Grey/700", + "rootAlias": "Grey/700" + }, { "name": "Layer/background/error", "value": "#460606", @@ -4941,15 +5037,15 @@ }, { "name": "Loading/background", - "value": "#ffffff21", - "var": "Transparent/white/200 (13%)", - "rootAlias": "Transparent/white/200 (13%)" + "value": "#ffffff2b", + "var": "Transparent/white/300 (17%)", + "rootAlias": "Transparent/white/300 (17%)" }, { "name": "Loading/backgroundLayer", - "value": "#929292e5", - "var": "Transparent/grey/900 (90%)", - "rootAlias": "Transparent/grey/900 (90%)" + "value": "#929292f2", + "var": "Transparent/grey/950 (95%)", + "rootAlias": "Transparent/grey/950 (95%)" }, { "name": "Loading/foreground", @@ -4957,6 +5053,18 @@ "var": "AFFiNE/700", "rootAlias": "AFFiNE/700" }, + { + "name": "Loading/imageLoadingBackground", + "value": "#92929238", + "var": "Transparent/grey/400 (22%)", + "rootAlias": "Transparent/grey/400 (22%)" + }, + { + "name": "Loading/imageLoadingLayer", + "value": "#ffffff8f", + "var": "Transparent/white/500 (56%)", + "rootAlias": "Transparent/white/500 (56%)" + }, { "name": "Others/warnLabel/black", "value": "#000000", @@ -5638,8 +5746,8 @@ { "name": "Table/focusBackground", "value": "#1e96eb0a", - "var": "Transparent/AFFiNE Blue/400 (4%)", - "rootAlias": "Transparent/AFFiNE Blue/400 (4%)" + "var": "Transparent/AFFiNE Blue/40 (4%)", + "rootAlias": "Transparent/AFFiNE Blue/40 (4%)" }, { "name": "Table/focusBorder", diff --git a/packages/theme/src/v2/variables.ts b/packages/theme/src/v2/variables.ts index b220675..29e7c69 100644 --- a/packages/theme/src/v2/variables.ts +++ b/packages/theme/src/v2/variables.ts @@ -9,7 +9,8 @@ export const lightThemeV2 = { 'aI/thinkingOutputBackground': '#f9f9f9', 'aI/thinkingOutputText': '#000000a6', 'aI/userTextBackground': '#f3f3f3', - 'adjustmentHandle/background': '#00000038', + 'adjustmentHandle/background': '#00000085', + 'adjustmentHandle/border': '#ffffff', 'backlinks/blockBackgroundColor': '#9292920d', 'backlinks/blockBorder': '#9292921a', 'backlinks/blockHover': '#0000000d', @@ -34,6 +35,11 @@ export const lightThemeV2 = { 'block/callout/icon/red': '#c83030', 'block/callout/icon/teal': '#448e86', 'block/callout/icon/yellow': '#fde047', + 'block/code/lineNum': '#b3b3b3', + 'block/comment/hanelActive': '#1e96eb05', + 'block/comment/highlightActive': '#1e96eb4d', + 'block/comment/highlightDefault': '#1e96eb14', + 'block/comment/highlightUnderline': '#1e96ebb2', 'block/divider/divider': '#92929238', 'block/footnote/numberBg': '#e6e6e6', 'block/footnote/numberBgHover': '#1e96eb', @@ -276,6 +282,7 @@ export const lightThemeV2 = { 'layer/insideBorder/splitviewActived': '#0000002b', 'layer/insideBorder/whiteBorder': '#ffffff8f', 'layer/background/codeBlock': '#f5f5f5', + 'layer/background/edgelessGrid': '#e6e6e6', 'layer/background/error': '#fff1f1', 'layer/background/hoverOverlay': '#0000000d', 'layer/background/linkedDocOnEdgeless': '#ffffff', @@ -295,8 +302,10 @@ export const lightThemeV2 = { 'layer/background/mobile/secondary': '#ffffff', 'layer/background/mobile/tertiary': '#e6e6e6', 'loading/background': '#0000001a', - 'loading/backgroundLayer': '#9292921a', + 'loading/backgroundLayer': '#92929238', 'loading/foreground': '#1e96eb', + 'loading/imageLoadingBackground': '#92929238', + 'loading/imageLoadingLayer': '#ffffff8f', 'others/warnLabel/black': '#000000', 'others/warnLabel/yellow': '#facc15', 'pagelist/hoverBorder': '#e6e6e6', @@ -435,7 +444,8 @@ export const darkThemeV2 = { 'aI/thinkingOutputBackground': '#000000', 'aI/thinkingOutputText': '#ffffff8f', 'aI/userTextBackground': '#252525', - 'adjustmentHandle/background': '#ffffff8f', + 'adjustmentHandle/background': '#00000085', + 'adjustmentHandle/border': '#ffffff', 'backlinks/blockBackgroundColor': '#9292921a', 'backlinks/blockBorder': '#9292922b', 'backlinks/blockHover': '#9292922b', @@ -460,6 +470,11 @@ export const darkThemeV2 = { 'block/callout/icon/red': '#c83030', 'block/callout/icon/teal': '#5cc7ba', 'block/callout/icon/yellow': '#e0aa00', + 'block/code/lineNum': '#7a7a7a', + 'block/comment/hanelActive': '#ffffff0d', + 'block/comment/highlightActive': '#1e96eb4d', + 'block/comment/highlightDefault': '#1e96eb14', + 'block/comment/highlightUnderline': '#1e96ebb2', 'block/divider/divider': '#9292922b', 'block/footnote/numberBg': '#565656', 'block/footnote/numberBgHover': '#1e96eb', @@ -702,6 +717,7 @@ export const darkThemeV2 = { 'layer/insideBorder/splitviewActived': '#ffffffab', 'layer/insideBorder/whiteBorder': '#ffffff0d', 'layer/background/codeBlock': '#252525', + 'layer/background/edgelessGrid': '#565656', 'layer/background/error': '#460606', 'layer/background/hoverOverlay': '#ffffff17', 'layer/background/linkedDocOnEdgeless': '#252525', @@ -720,9 +736,11 @@ export const darkThemeV2 = { 'layer/background/mobile/primary': '#000000', 'layer/background/mobile/secondary': '#252525', 'layer/background/mobile/tertiary': '#414141', - 'loading/background': '#ffffff21', - 'loading/backgroundLayer': '#929292e5', + 'loading/background': '#ffffff2b', + 'loading/backgroundLayer': '#929292f2', 'loading/foreground': '#0077cb', + 'loading/imageLoadingBackground': '#92929238', + 'loading/imageLoadingLayer': '#ffffff8f', 'others/warnLabel/black': '#000000', 'others/warnLabel/yellow': '#facc15', 'pagelist/hoverBorder': '#7a7a7a', @@ -863,7 +881,7 @@ export const nestedLightTheme = { thinkingOutputText: '#000000a6', userTextBackground: '#f3f3f3', }, - adjustmentHandle: { background: '#00000038' }, + adjustmentHandle: { background: '#00000085', border: '#ffffff' }, backlinks: { blockBackgroundColor: '#9292920d', blockBorder: '#9292921a', @@ -895,6 +913,13 @@ export const nestedLightTheme = { yellow: '#fde047', }, }, + code: { lineNum: '#b3b3b3' }, + comment: { + hanelActive: '#1e96eb05', + highlightActive: '#1e96eb4d', + highlightDefault: '#1e96eb14', + highlightUnderline: '#1e96ebb2', + }, divider: { divider: '#92929238' }, footnote: { numberBg: '#e6e6e6', numberBgHover: '#1e96eb' }, list: { header: '#0077cb' }, @@ -1191,6 +1216,7 @@ export const nestedLightTheme = { }, background: { codeBlock: '#f5f5f5', + edgelessGrid: '#e6e6e6', error: '#fff1f1', hoverOverlay: '#0000000d', linkedDocOnEdgeless: '#ffffff', @@ -1215,8 +1241,10 @@ export const nestedLightTheme = { }, loading: { background: '#0000001a', - backgroundLayer: '#9292921a', + backgroundLayer: '#92929238', foreground: '#1e96eb', + imageLoadingBackground: '#92929238', + imageLoadingLayer: '#ffffff8f', }, others: { warnLabel: { black: '#000000', yellow: '#facc15' } }, pagelist: { hoverBorder: '#e6e6e6' }, @@ -1379,7 +1407,7 @@ export const nestedDarkTheme = { thinkingOutputText: '#ffffff8f', userTextBackground: '#252525', }, - adjustmentHandle: { background: '#ffffff8f' }, + adjustmentHandle: { background: '#00000085', border: '#ffffff' }, backlinks: { blockBackgroundColor: '#9292921a', blockBorder: '#9292922b', @@ -1411,6 +1439,13 @@ export const nestedDarkTheme = { yellow: '#e0aa00', }, }, + code: { lineNum: '#7a7a7a' }, + comment: { + hanelActive: '#ffffff0d', + highlightActive: '#1e96eb4d', + highlightDefault: '#1e96eb14', + highlightUnderline: '#1e96ebb2', + }, divider: { divider: '#9292922b' }, footnote: { numberBg: '#565656', numberBgHover: '#1e96eb' }, list: { header: '#4ab1fa' }, @@ -1707,6 +1742,7 @@ export const nestedDarkTheme = { }, background: { codeBlock: '#252525', + edgelessGrid: '#565656', error: '#460606', hoverOverlay: '#ffffff17', linkedDocOnEdgeless: '#252525', @@ -1730,9 +1766,11 @@ export const nestedDarkTheme = { }, }, loading: { - background: '#ffffff21', - backgroundLayer: '#929292e5', + background: '#ffffff2b', + backgroundLayer: '#929292f2', foreground: '#0077cb', + imageLoadingBackground: '#92929238', + imageLoadingLayer: '#ffffff8f', }, others: { warnLabel: { black: '#000000', yellow: '#facc15' } }, pagelist: { hoverBorder: '#7a7a7a' },