feat(theme): update v2 theme variables(2025-1-16 17:33) (#151)

toeverything · Jan 16, 2025 · 1ea34a0 · 1ea34a0
1 parent e1cf562
commit 1ea34a0
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 1 deletion.
diff --git a/packages/theme/src/v2/CHANGELOG.md b/packages/theme/src/v2/CHANGELOG.md
@@ -882,4 +882,34 @@ None
 - `layer/insideBorder/border`
   - 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` → <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="#414141" /></svg> `#414141`
 - `table/indicator/border`
-  - 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` → <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="#414141" /></svg> `#414141`
+  - 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` → <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="#414141" /></svg> `#414141`
+
+# 2025-1-16 17:33
+### New
+
+- `selfhost/button/sidebarButton/bg/hover`
+  - 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="#0000000d" /></svg> `#0000000d`
+  - 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="#ffffff" /></svg> `#ffffff`
+- `selfhost/button/sidebarButton/bg/select`
+  - 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="#ffffff" /></svg> `#ffffff`
+- `selfhost/icon/primary`
+  - 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="#ffffff" /></svg> `#ffffff`
+- `selfhost/icon/secondary`
+  - 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="#ffffff" /></svg> `#ffffff`
+- `table/indicator/pointerActive`
+  - 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="#ffffff" /></svg> `#ffffff`
+- `table/indicator/pointerDefault`
+  - 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="#b3b3b3" /></svg> `#b3b3b3`
+  - 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="#cdcdcd" /></svg> `#cdcdcd`
+
+### Removed
+
+None
+
+### Updated
+
+None
diff --git a/packages/theme/src/v2/source/variables.json b/packages/theme/src/v2/source/variables.json
@@ -1466,6 +1466,30 @@
             "var": "Base/White",
             "rootAlias": "Base/White"
           },
+          {
+            "name": "Selfhost/button/sidebarButton/bg/hover",
+            "value": "#0000000d",
+            "var": "Transparent/black/50 (5%)",
+            "rootAlias": "Transparent/black/50 (5%)"
+          },
+          {
+            "name": "Selfhost/button/sidebarButton/bg/select",
+            "value": "#141414",
+            "var": "Grey/950",
+            "rootAlias": "Grey/950"
+          },
+          {
+            "name": "Selfhost/icon/primary",
+            "value": "#141414",
+            "var": "Grey/950",
+            "rootAlias": "Grey/950"
+          },
+          {
+            "name": "Selfhost/icon/secondary",
+            "value": "#7a7a7a",
+            "var": "Grey/600",
+            "rootAlias": "Grey/600"
+          },
           {
             "name": "Shadow/EdgelessToolbar/Note/shadow-1-color",
             "value": "#ffffff2e",
@@ -1958,6 +1982,18 @@
             "var": "Layer/background/hoverOverlay",
             "rootAlias": "Transparent/black/50 (5%)"
           },
+          {
+            "name": "Table/indicator/pointerActive",
+            "value": "#ffffff",
+            "var": "Base/White",
+            "rootAlias": "Base/White"
+          },
+          {
+            "name": "Table/indicator/pointerDefault",
+            "value": "#b3b3b3",
+            "var": "Icon/secondary",
+            "rootAlias": "Grey/400"
+          },
           {
             "name": "Text/disable",
             "value": "#7a7a7a",
@@ -3949,6 +3985,30 @@
             "var": "Transparent/white/100 (9%)",
             "rootAlias": "Transparent/white/100 (9%)"
           },
+          {
+            "name": "Selfhost/button/sidebarButton/bg/hover",
+            "value": "#ffffff",
+            "var": "",
+            "rootAlias": ""
+          },
+          {
+            "name": "Selfhost/button/sidebarButton/bg/select",
+            "value": "#ffffff",
+            "var": "",
+            "rootAlias": ""
+          },
+          {
+            "name": "Selfhost/icon/primary",
+            "value": "#ffffff",
+            "var": "",
+            "rootAlias": ""
+          },
+          {
+            "name": "Selfhost/icon/secondary",
+            "value": "#ffffff",
+            "var": "",
+            "rootAlias": ""
+          },
           {
             "name": "Shadow/EdgelessToolbar/Note/shadow-1-color",
             "value": "#ffffff14",
@@ -4441,6 +4501,18 @@
             "var": "Layer/background/hoverOverlay",
             "rootAlias": "Transparent/white/100 (9%)"
           },
+          {
+            "name": "Table/indicator/pointerActive",
+            "value": "#ffffff",
+            "var": "Base/White",
+            "rootAlias": "Base/White"
+          },
+          {
+            "name": "Table/indicator/pointerDefault",
+            "value": "#cdcdcd",
+            "var": "Icon/secondary",
+            "rootAlias": "Grey/300"
+          },
           {
             "name": "Text/disable",
             "value": "#565656",

diff --git a/packages/theme/src/v2/variables.ts b/packages/theme/src/v2/variables.ts
@@ -246,6 +246,10 @@ export const lightThemeV2 = {
   'radio/active/default': '#7a7a7a',
   'segment/background': '#0000000d',
   'segment/button': '#ffffff',
+  'selfhost/button/sidebarButton/bg/hover': '#0000000d',
+  'selfhost/button/sidebarButton/bg/select': '#141414',
+  'selfhost/icon/primary': '#141414',
+  'selfhost/icon/secondary': '#7a7a7a',
   'skeleton/skeleton': '#e6e6e6',
   'slashMenu/background': '#ffffff',
   'status/error': '#ed3f3f',
@@ -287,6 +291,8 @@ export const lightThemeV2 = {
   'table/indicator/border': '#e6e6e6',
   'table/indicator/drag': '#0000002b',
   'table/indicator/hover': '#0000000d',
+  'table/indicator/pointerActive': '#ffffff',
+  'table/indicator/pointerDefault': '#b3b3b3',
   'text/disable': '#7a7a7a',
   'text/emphasis': '#1e96eb',
   'text/link': '#035f9f',
@@ -578,6 +584,10 @@ export const darkThemeV2 = {
   'radio/active/default': '#b3b3b3',
   'segment/background': '#ffffff0d',
   'segment/button': '#ffffff17',
+  'selfhost/button/sidebarButton/bg/hover': '#ffffff',
+  'selfhost/button/sidebarButton/bg/select': '#ffffff',
+  'selfhost/icon/primary': '#ffffff',
+  'selfhost/icon/secondary': '#ffffff',
   'skeleton/skeleton': '#252525',
   'slashMenu/background': '#252525',
   'status/error': '#c83030',
@@ -619,6 +629,8 @@ export const darkThemeV2 = {
   'table/indicator/border': '#414141',
   'table/indicator/drag': '#ffffff21',
   'table/indicator/hover': '#ffffff17',
+  'table/indicator/pointerActive': '#ffffff',
+  'table/indicator/pointerDefault': '#cdcdcd',
   'text/disable': '#565656',
   'text/emphasis': '#29a3fa',
   'text/link': '#7ac8ff',
@@ -970,6 +982,12 @@ export const nestedLightTheme = {
     active: { chekced: '#1e96eb', default: '#7a7a7a' },
   },
   segment: { background: '#0000000d', button: '#ffffff' },
+  selfhost: {
+    button: {
+      sidebarButton: { bg: { hover: '#0000000d', select: '#141414' } },
+    },
+    icon: { primary: '#141414', secondary: '#7a7a7a' },
+  },
   skeleton: { skeleton: '#e6e6e6' },
   slashMenu: { background: '#ffffff' },
   status: { error: '#ed3f3f', success: '#44b931' },
@@ -1011,6 +1029,8 @@ export const nestedLightTheme = {
       border: '#e6e6e6',
       drag: '#0000002b',
       hover: '#0000000d',
+      pointerActive: '#ffffff',
+      pointerDefault: '#b3b3b3',
     },
   },
   text: {
@@ -1373,6 +1393,10 @@ export const nestedDarkTheme = {
     active: { chekced: '#1e96eb', default: '#b3b3b3' },
   },
   segment: { background: '#ffffff0d', button: '#ffffff17' },
+  selfhost: {
+    button: { sidebarButton: { bg: { hover: '#ffffff', select: '#ffffff' } } },
+    icon: { primary: '#ffffff', secondary: '#ffffff' },
+  },
   skeleton: { skeleton: '#252525' },
   slashMenu: { background: '#252525' },
   status: { error: '#c83030', success: '#1d9c07' },
@@ -1414,6 +1438,8 @@ export const nestedDarkTheme = {
       border: '#414141',
       drag: '#ffffff21',
       hover: '#ffffff17',
+      pointerActive: '#ffffff',
+      pointerDefault: '#cdcdcd',
     },
   },
   text: {