feat(style): add --c-bg-soft color

globalbrain · Apr 12, 2023 · 6151aa5 · 6151aa5
1 parent 115e973
commit 6151aa5
Showing 1 changed file with 52 additions and 49 deletions.
diff --git a/lib/styles/variables.css b/lib/styles/variables.css
@@ -8,20 +8,7 @@
 
 :root {
   --c-white: #ffffff;
-  --c-white-soft: #fafafa;
-  --c-white-mute: #f2f2f2;
-
-  --c-white-elv: #fafafa;
-  --c-white-elv-up: #ffffff;
-  --c-white-elv-down: #f2f2f2;
-
   --c-black: #000000;
-  --c-black-soft: #171717;
-  --c-black-mute: #1c1c1e;
-
-  --c-black-elv: #171717;
-  --c-black-elv-up: #1c1c1e;
-  --c-black-elv-down: #000000;
 
   --c-gray: #8e8e93;
 
@@ -148,36 +135,37 @@
   --c-danger-bg-lighter: var(--c-danger-lighter);
   --c-danger-bg-dark: var(--c-danger-dark);
   --c-danger-bg-darker: var(--c-danger-darker);
+
+  /**
+   * DEPRECATED: These values are no longer used. Equivalent colors are defined
+   * directly in theme-aware color definitions.
+   */
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+  --c-white-elv: #fafafa;
+  --c-white-elv-up: #ffffff;
+  --c-white-elv-down: #f2f2f2;
+  --c-black: #000000;
+  --c-black-soft: #171717;
+  --c-black-mute: #1c1c1e;
+  --c-black-elv: #171717;
+  --c-black-elv-up: #1c1c1e;
+  --c-black-elv-down: #000000;
 }
 
 /**
  * Colors Theme
  * -------------------------------------------------------------------------- */
 
 :root {
-  --c-bg: var(--c-white);
-  --c-bg-soft: var(--c-white-soft);
-  --c-bg-mute: var(--c-white-mute);
-
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f9f9f9;
   --c-bg-elv-3: #ffffff;
-
-  /* DEPRECATED: Use `--c-bg-elv-x`. */
-  --c-bg-elv: var(--c-white-elv);
-  --c-bg-elv-up: var(--c-white-elv-up);
-  --c-bg-elv-down: var(--c-white-elv-down);
-
-  --c-bg-lift-1: var(--c-white-soft);
-  --c-bg-lift-2: var(--c-white-mute);
+  --c-bg-soft: #f9f9f9;
 
   --c-divider-1: var(--c-divider-light-1);
   --c-divider-2: var(--c-divider-light-2);
 
-  /* DEPRECATED: Use `--c-divider-x`. */
-  --c-divider: var(--c-divider-light-1);
-  --c-divider-light: var(--c-divider-light-2);
-
   --c-neutral-1: var(--c-neutral-light-1);
   --c-neutral-2: var(--c-neutral-light-2);
   --c-neutral-3: var(--c-neutral-light-3);
@@ -198,41 +186,41 @@
   --c-text-inverse-2: var(--c-text-dark-2);
   --c-text-inverse-3: var(--c-text-dark-3);
 
-  --c-soft: var(--c-white-soft);
-
   --c-mute: #f1f1f1;
   --c-mute-light: #f9f9f9;
   --c-mute-lighter: #ffffff;
   --c-mute-dark: #e3e3e3;
   --c-mute-darker: #d1d1d1;
   --c-mute-dimm-1: #f1f1f1;
   --c-mute-dimm-2: #e3e3e3;
+
+  /* DEPRECATED: Use `--c-bg-elv-{number}`. */
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+  --c-bg-elv: var(--c-white-elv);
+  --c-bg-elv-up: var(--c-white-elv-up);
+  --c-bg-elv-down: var(--c-white-elv-down);
+  --c-bg-lift-1: var(--c-white-soft);
+  --c-bg-lift-2: var(--c-white-mute);
+
+  /* DEPRECATED: Use `--c-divider-x`. */
+  --c-divider: var(--c-divider-light-1);
+  --c-divider-light: var(--c-divider-light-2);
+
+  /* DEPRECATED: Use `--c-bg-soft`. */
+  --c-soft: var(--c-white-soft);
 }
 
 .dark {
-  --c-bg: var(--c-black);
-  --c-bg-soft: var(--c-black-soft);
-  --c-bg-mute: var(--c-black-mute);
-
   --c-bg-elv-1: #000000;
   --c-bg-elv-2: #171717;
   --c-bg-elv-3: #1c1c1e;
-
-  /* DEPRECATED: Use `--c-bg-elv-x`. */
-  --c-bg-elv: var(--c-black-elv);
-  --c-bg-elv-up: var(--c-black-elv-up);
-  --c-bg-elv-down: var(--c-black-elv-down);
-
-  --c-bg-lift-1: #222226;
-  --c-bg-lift-2: #2c2c2e;
+  --c-bg-soft: #222226;
 
   --c-divider-1: var(--c-divider-dark-1);
   --c-divider-2: var(--c-divider-dark-2);
 
-  /* DEPRECATED: Use `--c-divider-1` and `--c-divider-2` instead. */
-  --c-divider: var(--c-divider-dark-1);
-  --c-divider-light: var(--c-divider-dark-2);
-
   --c-neutral-1: var(--c-neutral-dark-1);
   --c-neutral-2: var(--c-neutral-dark-2);
   --c-neutral-3: var(--c-neutral-dark-3);
@@ -253,15 +241,30 @@
   --c-text-inverse-2: var(--c-text-light-2);
   --c-text-inverse-3: var(--c-text-light-3);
 
-  --c-soft: #222226;
-
   --c-mute: #2c2c2e;
   --c-mute-light: #3a3a3c;
   --c-mute-lighter: #505053;
   --c-mute-dark: #222226;
   --c-mute-darker: #1c1c1e;
   --c-mute-dimm-1: #222226;
   --c-mute-dimm-2: #2c2c2e;
+
+  /* DEPRECATED: Use `--c-bg-elv-x`. */
+  --c-bg-elv: var(--c-black-elv);
+  --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-mute: var(--c-black-mute);
+  --c-bg-lift-1: #222226;
+  --c-bg-lift-2: #2c2c2e;
+
+  /* DEPRECATED: Use `--c-divider-1` and `--c-divider-2` instead. */
+  --c-divider: var(--c-divider-dark-1);
+  --c-divider-light: var(--c-divider-dark-2);
+
+  /* DEPRECATED: Use `--c-bg-soft`. */
+  --c-soft: #222226;
 }
 
 /**