⚡v.1.4.0 yeeeee

Fixes #94 Fixes #66 Added multicolor highlight
primary-theme · Mar 22, 2022 · 5c71d5c · 5c71d5c
1 parent 9c05fe3
commit 5c71d5c
Show file tree

Hide file tree

Showing 18 changed files with 1,068 additions and 142 deletions.
diff --git a/obsidian.css b/obsidian.css
diff --git a/obsidian.css.map b/obsidian.css.map
diff --git a/scss/10_base/_var__dark-mode.scss b/scss/10_base/_var__dark-mode.scss
@@ -83,43 +83,53 @@
     --color-d-yellow-500: hsl(50, 100%, 46%);
     --color-d-yellow-700: hsl(43, 100%, 42%);
     --color-d-yellow-900: hsl(39, 92%, 33%);
+    --color-d-yellow-a: hsl(43, 75%, 52%);
 
     --color-d-red: var(--color-d-red-500);
     --color-d-red-300: hsl(4, 100%, 68%);
     --color-d-red-500: hsl(4, 65%, 60%);
     --color-d-red-700: hsl(4, 90%, 61%);
     --color-d-red-900: hsl(4, 77%, 38%);
+    --color-d-red-a: hsl(4, 61%, 53%);
 
     --color-d-blue: var(--color-d-blue-500);
     --color-d-blue-300: hsl(198, 39%, 56%);
     --color-d-blue-500: hsl(198, 62%, 57%);
     --color-d-blue-700: hsl(198, 57%, 55%);
     --color-d-blue-900: hsl(198, 75%, 35%);
+    --color-d-blue-a: hsl(197, 58%, 48%);
 
     --color-d-orange: var(--color-d-orange-500);
     --color-d-orange-300: hsl(22, 92%, 64%);
     --color-d-orange-500: hsl(22, 92%, 57%);
     --color-d-orange-700: hsl(21, 88%, 51%);
     --color-d-orange-900: hsl(20, 80%, 41%);
+    --color-d-orange-a: hsl(27, 77%, 51%);
 
     --color-d-green: var(--color-d-green-500);
     --color-d-green-300: hsl(150, 66%, 53%);
     --color-d-green-500: hsl(154, 52%, 46%);
     --color-d-green-700: hsl(154, 61%, 39%);
     --color-d-green-900: hsl(155, 81%, 24%);
+    --color-d-green-a: hsl(96, 50%, 49%);
 
     --color-d-violet: var(--color-d-violet-500);
-    --color-d-violet-300: hsl(256, 71%, 73%);
+    --color-d-violet-300: hsl(256, 63%, 74%);
     --color-d-violet-500: hsl(263, 60%, 67%);
     --color-d-violet-700: hsl(256, 52%, 57%);
     --color-d-violet-900: hsl(256, 44%, 50%);
+    --color-d-violet-a: hsl(246, 53%, 67%);
 
-    --color-d-highlight-yellow: hsla(43, 61%, 56%, 1);
-    --color-d-highlight-red:    hsla(4, 65%, 27%, 1);
-    --color-d-highlight-blue:   hsla(201, 79%, 23%, 1);
-    --color-d-highlight-orange:  hsla(27, 94%, 25%, 1);
-    --color-d-highlight-green:  hsla(115, 61%, 15%, 1);
-    --color-d-highlight-violet:  hsla(281, 39%, 24%, 1);
+    /*~ Highlights */
+    --ui-color-highlight-text: var(--color-d-black);
+    --ui-color-highlight-bg: hsl(43, 61%, 56%);
+
+    --color-highlight-yellow: rgba(255, 187, 0, 0.2);
+    --color-highlight-red:    rgba(240, 79, 106, 0.2);
+    --color-highlight-blue:   rgba(40, 178, 194, 0.2);
+    --color-highlight-orange:  rgba(255, 115, 0, 0.2);
+    --color-highlight-green:  rgba(153, 189, 36, 0.2);
+    --color-highlight-violet:  rgba(113, 122, 255, 0.2);
 
     /*~ Graph View */
     --graph-color-node-resolved: var(--color-d-blue-900);

diff --git a/scss/10_base/_var__light-mode.scss b/scss/10_base/_var__light-mode.scss
@@ -91,20 +91,22 @@
     --color-l-red: var(--color-l-red-500);
     --color-l-red-300: hsl(4, 54%, 61%);
     --color-l-red-500: hsl(4, 72%, 55%);
-    --color-l-red-700: hsl(4, 62%, 46%);
+    --color-l-red-700: hsl(4, 56%, 48%);
     --color-l-red-900: hsl(4, 66%, 30%);
+
 
     --color-l-blue: var(--color-l-blue-500);
     --color-l-blue-300: hsl(198, 39%, 56%);
     --color-l-blue-500: hsl(205, 66%, 46%);
-    --color-l-blue-700: hsl(205, 79%, 36%);
+    --color-l-blue-700: hsl(205, 63%, 39%);
     --color-l-blue-900: hsl(205, 95%, 25%);
 
     --color-l-orange: var(--color-l-orange-500);
     --color-l-orange-300: hsl(26, 66%, 57%);
-    --color-l-orange-500: hsl(21, 80%, 52%);
+    --color-l-orange-500: hsl(21, 82%, 55%);
     --color-l-orange-700: hsl(18, 69%, 50%);
     --color-l-orange-900: hsl(24, 96%, 35%);
+    --color-l-orange-a: hsl(27, 81%, 46%);
 
     --color-l-green: var(--color-l-green-500);
     --color-l-green-300: hsl(154, 58%, 65%);
@@ -115,15 +117,19 @@
     --color-l-violet: var(--color-l-violet-500);
     --color-l-violet-300: hsl(270, 50%, 74%);
     --color-l-violet-500: hsl(266, 31%, 57%);
-    --color-l-violet-700: hsl(266, 37%, 44%);
+    --color-l-violet-700: hsl(267, 37%, 43%);
     --color-l-violet-900: hsl(266, 70%, 30%);
 
-    --color-l-highlight-yellow: hsla(43, 85%, 79%, 1);
-    --color-l-highlight-red:    hsla(0, 91%, 87%, 1);
-    --color-l-highlight-blue:   hsla(182, 66%, 84%, 1);
-    --color-l-highlight-orange:  hsla(19, 100%, 79%, 1);
-    --color-l-highlight-green:  hsla(124, 65%, 87%, 1);
-    --color-l-highlight-violet:  hsla(245, 65%, 87%, 1);
+    /*~ Highlights */
+    --ui-color-highlight-text: var(--color-l-black);
+    --ui-color-highlight-bg: hsl(43, 85%, 79%);
+
+    --color-highlight-yellow: rgba(255, 187, 0, 0.2);
+    --color-highlight-red:    rgba(240, 79, 106, 0.2);
+    --color-highlight-blue:   rgba(40, 178, 194, 0.2);
+    --color-highlight-orange:  rgba(255, 115, 0, 0.2);
+    --color-highlight-green:  rgba(153, 189, 36, 0.2);
+    --color-highlight-violet:  rgba(113, 122, 255, 0.2);
 
     /*~ Graph View */
     --graph-color-node-resolved: var(--color-l-blue-500);

diff --git a/scss/20_workspace/_tab-content.scss b/scss/20_workspace/_tab-content.scss
@@ -160,16 +160,11 @@
         padding-right: 1px;
         border-radius: calc(1px + var(--scale-2-1));
 
-        .theme-light & {
-            color: var(--md-color-highlight-text-yellow);
-            font-weight: var(--font-bold);
-            background: var(--md-color-highlight-bg-yellow);
-        }
-
+        .theme-light & ,
         .theme-dark & {
-            color: var(--md-color-highlight-text-yellow);
-            font-weight: var(--font-semi-bold);
-            background: var(--md-color-highlight-bg-yellow);
+            color: var(--ui-color-highlight-text);
+            font-weight: var(--font-bold);
+            background: var(--ui-color-highlight-bg);
         }
     }