feat(theme): update v2 theme variables(2024-8-27 17:48)

\# 2024-8-27 17:48 \### New - `chatBlock/chatBlockBg` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#ffffff" /></svg> `#ffffff` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#252525" /></svg> `#252525` - `chatBlock/chatBlockBoder` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6` - `chatBlock/chatBlockIcon` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#7a7a7a" /></svg> `#7a7a7a` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#b3b3b3" /></svg> `#b3b3b3` - `chatBlock/chatBlockText` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#141414" /></svg> `#141414` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#141414" /></svg> `#141414` - `edgeless/selection/selectionMarqueeBackground` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb14" /></svg> `#1e96eb14` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb14" /></svg> `#1e96eb14` - `edgeless/selection/selectionMarqueeBorder` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb" /></svg> `#1e96eb` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb" /></svg> `#1e96eb` - `skeleton/skeleton` - light: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6` - dark: <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#252525" /></svg> `#252525` \### Removed None \### Updated None
toeverything · Aug 27, 2024 · 873a290 · 873a290
1 parent 92fe40f
commit 873a290
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 4 deletions.
diff --git a/packages/theme/src/v2/CHANGELOG.md b/packages/theme/src/v2/CHANGELOG.md
@@ -0,0 +1,33 @@
+
+
+# 2024-8-27 17:48
+### New
+
+- `chatBlock/chatBlockBg`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#ffffff" /></svg> `#ffffff`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#252525" /></svg> `#252525`
+- `chatBlock/chatBlockBoder`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6`
+- `chatBlock/chatBlockIcon`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#7a7a7a" /></svg> `#7a7a7a`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#b3b3b3" /></svg> `#b3b3b3`
+- `chatBlock/chatBlockText`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#141414" /></svg> `#141414`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#141414" /></svg> `#141414`
+- `edgeless/selection/selectionMarqueeBackground`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb14" /></svg> `#1e96eb14`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb14" /></svg> `#1e96eb14`
+- `edgeless/selection/selectionMarqueeBorder`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb" /></svg> `#1e96eb`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#1e96eb" /></svg> `#1e96eb`
+- `skeleton/skeleton`
+  - light:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#e6e6e6" /></svg> `#e6e6e6`
+  - dark:  <svg width="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect stroke="rgba(0,0,0,0.1)" width="20" height="20" rx="4" fill="#252525" /></svg> `#252525`
+
+### Removed
+
+None
+
+### Updated
+None
diff --git a/packages/theme/src/v2/source/variables.json b/packages/theme/src/v2/source/variables.json
@@ -260,6 +260,30 @@
             "var": "Transparent/black/300 (17%)",
             "rootAlias": "Transparent/black/300 (17%)"
           },
+          {
+            "name": "ChatBlock/chatBlockBg",
+            "value": "#ffffff",
+            "var": "Base/White",
+            "rootAlias": "Base/White"
+          },
+          {
+            "name": "ChatBlock/chatBlockBoder",
+            "value": "#e6e6e6",
+            "var": "Layer/InsideBorder/border",
+            "rootAlias": "Grey/200"
+          },
+          {
+            "name": "ChatBlock/chatBlockIcon",
+            "value": "#7a7a7a",
+            "var": "Icon/primary",
+            "rootAlias": "Grey/600"
+          },
+          {
+            "name": "ChatBlock/chatBlockText",
+            "value": "#141414",
+            "var": "Text/primary",
+            "rootAlias": "Grey/950"
+          },
           {
             "name": "Database/border",
             "value": "#0000001a",
@@ -269,8 +293,8 @@
           {
             "name": "Database/focusBackground",
             "value": "#1e96eb0a",
-            "var": "Transparent/AFFiNE Blue/400",
-            "rootAlias": "Transparent/AFFiNE Blue/400"
+            "var": "Transparent/AFFiNE Blue/400 (4%)",
+            "rootAlias": "Transparent/AFFiNE Blue/400 (4%)"
           },
           {
             "name": "Database/textSecondary",
@@ -710,6 +734,18 @@
             "var": "Amber/300",
             "rootAlias": "Amber/300"
           },
+          {
+            "name": "Edgeless/selection/selectionMarqueeBackground",
+            "value": "#1e96eb14",
+            "var": "Transparent/AFFiNE Blue/800 (8%)",
+            "rootAlias": "Transparent/AFFiNE Blue/800 (8%)"
+          },
+          {
+            "name": "Edgeless/selection/selectionMarqueeBorder",
+            "value": "#1e96eb",
+            "var": "AFFiNE/600",
+            "rootAlias": "AFFiNE/600"
+          },
           {
             "name": "Edgeless/shape/black",
             "value": "#000000",
@@ -1052,6 +1088,12 @@
             "var": "Shadow/color/14",
             "rootAlias": "Shadow/color/14"
           },
+          {
+            "name": "Skeleton/skeleton",
+            "value": "#e6e6e6",
+            "var": "Grey/200",
+            "rootAlias": "Grey/200"
+          },
           {
             "name": "Status/error",
             "value": "#ed3f3f",
@@ -1723,6 +1765,30 @@
             "var": "Transparent/black/500 (52%)",
             "rootAlias": "Transparent/black/500 (52%)"
           },
+          {
+            "name": "ChatBlock/chatBlockBg",
+            "value": "#252525",
+            "var": "Grey/900",
+            "rootAlias": "Grey/900"
+          },
+          {
+            "name": "ChatBlock/chatBlockBoder",
+            "value": "#e6e6e6",
+            "var": "Layer/InsideBorder/border",
+            "rootAlias": "Grey/200"
+          },
+          {
+            "name": "ChatBlock/chatBlockIcon",
+            "value": "#b3b3b3",
+            "var": "Icon/secondary",
+            "rootAlias": "Grey/400"
+          },
+          {
+            "name": "ChatBlock/chatBlockText",
+            "value": "#141414",
+            "var": "Text/primary",
+            "rootAlias": "Grey/950"
+          },
           {
             "name": "Database/border",
             "value": "#ffffff21",
@@ -1732,8 +1798,8 @@
           {
             "name": "Database/focusBackground",
             "value": "#1e96eb0a",
-            "var": "Transparent/AFFiNE Blue/400",
-            "rootAlias": "Transparent/AFFiNE Blue/400"
+            "var": "Transparent/AFFiNE Blue/400 (4%)",
+            "rootAlias": "Transparent/AFFiNE Blue/400 (4%)"
           },
           {
             "name": "Database/textSecondary",
@@ -2173,6 +2239,18 @@
             "var": "Amber/300",
             "rootAlias": "Amber/300"
           },
+          {
+            "name": "Edgeless/selection/selectionMarqueeBackground",
+            "value": "#1e96eb14",
+            "var": "Transparent/AFFiNE Blue/800 (8%)",
+            "rootAlias": "Transparent/AFFiNE Blue/800 (8%)"
+          },
+          {
+            "name": "Edgeless/selection/selectionMarqueeBorder",
+            "value": "#1e96eb",
+            "var": "AFFiNE/600",
+            "rootAlias": "AFFiNE/600"
+          },
           {
             "name": "Edgeless/shape/black",
             "value": "#000000",
@@ -2515,6 +2593,12 @@
             "var": "Shadow/color/30(black)",
             "rootAlias": "Shadow/color/30(black)"
           },
+          {
+            "name": "Skeleton/skeleton",
+            "value": "#252525",
+            "var": "Grey/900",
+            "rootAlias": "Grey/900"
+          },
           {
             "name": "Status/error",
             "value": "#c83030",

diff --git a/packages/theme/src/v2/variables.ts b/packages/theme/src/v2/variables.ts
@@ -45,6 +45,10 @@ export const lightThemeV2 = {
   'centerPeek/background': '#ffffff',
   'centerPeek/icon': '#7a7a7a',
   'centerPeek/overlay': '#0000002b',
+  'chatBlock/chatBlockBg': '#ffffff',
+  'chatBlock/chatBlockBoder': '#e6e6e6',
+  'chatBlock/chatBlockIcon': '#7a7a7a',
+  'chatBlock/chatBlockText': '#141414',
   'database/border': '#0000001a',
   'database/focusBackground': '#1e96eb0a',
   'database/textSecondary': '#00000085',
@@ -120,6 +124,8 @@ export const lightThemeV2 = {
   'edgeless/palette/medium/purpleMedium': '#6e52df',
   'edgeless/palette/medium/redMedium': '#fb7081',
   'edgeless/palette/medium/yellowMedium': '#fcd34d',
+  'edgeless/selection/selectionMarqueeBackground': '#1e96eb14',
+  'edgeless/selection/selectionMarqueeBorder': '#1e96eb',
   'edgeless/shape/black': '#000000',
   'edgeless/shape/blue': '#9fd9ff',
   'edgeless/shape/green': '#9bda91',
@@ -177,6 +183,7 @@ export const lightThemeV2 = {
   'portrait/localPortraitBackground': '#0000001a',
   'shadow/mobile/menu/menuShadow-color-1': '#00000014',
   'shadow/mobile/menu/menuShadow-color-2': '#00000024',
+  'skeleton/skeleton': '#e6e6e6',
   'status/error': '#ed3f3f',
   'status/success': '#44b931',
   'switch/buttonBackground/active': '#ffffff',
@@ -285,6 +292,10 @@ export const darkThemeV2 = {
   'centerPeek/background': '#000000',
   'centerPeek/icon': '#b3b3b3',
   'centerPeek/overlay': '#00000085',
+  'chatBlock/chatBlockBg': '#252525',
+  'chatBlock/chatBlockBoder': '#e6e6e6',
+  'chatBlock/chatBlockIcon': '#b3b3b3',
+  'chatBlock/chatBlockText': '#141414',
   'database/border': '#ffffff21',
   'database/focusBackground': '#1e96eb0a',
   'database/textSecondary': '#ffffff8f',
@@ -360,6 +371,8 @@ export const darkThemeV2 = {
   'edgeless/palette/medium/purpleMedium': '#6e52df',
   'edgeless/palette/medium/redMedium': '#fb7081',
   'edgeless/palette/medium/yellowMedium': '#fcd34d',
+  'edgeless/selection/selectionMarqueeBackground': '#1e96eb14',
+  'edgeless/selection/selectionMarqueeBorder': '#1e96eb',
   'edgeless/shape/black': '#000000',
   'edgeless/shape/blue': '#9fd9ff',
   'edgeless/shape/green': '#9bda91',
@@ -417,6 +430,7 @@ export const darkThemeV2 = {
   'portrait/localPortraitBackground': '#ffffff2b',
   'shadow/mobile/menu/menuShadow-color-1': '#0000001f',
   'shadow/mobile/menu/menuShadow-color-2': '#0000004d',
+  'skeleton/skeleton': '#252525',
   'status/error': '#c83030',
   'status/success': '#1d9c07',
   'switch/buttonBackground/active': '#414141',