feat(style): update bg color system

globalbrain · Nov 1, 2023 · 2fd3256 · 2fd3256
1 parent dd89f13
commit 2fd3256
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 12 deletions.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -214,6 +214,6 @@ Override following styles to customize the component.
   /* Colors of tooltip. */
   --tooltip-border-color: var(--c-divider-2);
   --tooltip-text-color: var(--c-text-1);
-  --tooltip-bg-color: var(--c-bg-soft);
+  --tooltip-bg-color: var(--c-bg-elv-4);
 }
 ```
diff --git a/lib/components/SCardHeader.vue b/lib/components/SCardHeader.vue
@@ -10,6 +10,6 @@
   align-items: center;
   border-radius: 5px 5px 0 0;
   height: 48px;
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 }
 </style>
diff --git a/lib/components/SSheet.vue b/lib/components/SSheet.vue
@@ -45,7 +45,7 @@ defineEmits<{
     box-shadow: var(--shadow-depth-5);
 
     .dark & {
-      background-color: var(--c-bg-soft);
+      background-color: var(--c-bg-elv-4);
     }
   }
 }

diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue
@@ -126,7 +126,7 @@ const computedCell = computed<TableCell | undefined>(() =>
 
 <style scoped lang="postcss">
 .STableCell {
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
   transition: background-color 0.1s;
   overflow: hidden;
 

diff --git a/lib/components/STableColumn.vue b/lib/components/STableColumn.vue
@@ -148,7 +148,7 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.has-header {
     border-top: 1px solid var(--c-divider-2);

diff --git a/lib/components/STableHeader.vue b/lib/components/STableHeader.vue
@@ -60,7 +60,7 @@ const resetAction = computed(() => {
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.borderless {
     border-radius: 0;

diff --git a/lib/styles/variables.css b/lib/styles/variables.css
@@ -103,7 +103,7 @@
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f9f9f9;
   --c-bg-elv-3: #ffffff;
-  --c-bg-soft: #f9f9f9;
+  --c-bg-elv-4: #fafafa;
 
   --c-bg-mute-1: #ebebef;
   --c-bg-mute-2: #e4e4e9;
@@ -245,7 +245,7 @@
   --c-bg-elv-up: var(--c-black-elv-up);
   --c-bg-elv-down: var(--c-black-elv-down);
   --c-bg: var(--c-black);
-  --c-bg-soft: var(--c-black-soft);
+  --c-bg-soft: #232429;
   --c-bg-mute: var(--c-black-mute);
   --c-bg-lift-1: #222226;
   --c-bg-lift-2: #2c2c2e;
@@ -267,9 +267,9 @@
   --c-soft: #222226;
 
   --c-bg-elv-1: #000000;
-  --c-bg-elv-2: #171717;
-  --c-bg-elv-3: #1c1c1e;
-  --c-bg-soft: #222226;
+  --c-bg-elv-2: #151517;
+  --c-bg-elv-3: #1b1b1f;
+  --c-bg-elv-4: #232429;
 
   --c-bg-mute-1: #2e3035;
   --c-bg-mute-2: #35373c;
@@ -796,7 +796,7 @@
   --tooltip-max-width: 288px;
   --tooltip-border-color: var(--c-divider-2);
   --tooltip-text-color: var(--c-text-1);
-  --tooltip-bg-color: var(--c-bg-soft);
+  --tooltip-bg-color: var(--c-bg-elv-4);
 }
 
 /**