Add custom theme colors

olle · Jul 9, 2024 · 8bd4be7 · 8bd4be7
1 parent 4d7b2ee
commit 8bd4be7
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 76 deletions.
diff --git a/ui-frontend/src/style.css b/ui-frontend/src/style.css
@@ -12,81 +12,7 @@ html {
 
 /* THEME -------------------------------------------------------------------- */
 
-:root {
-  --color-black: rgba(44, 62, 80, 0.9);
-
-  --color-fuchsia-100: hsl(344, 97%, 95%);
-  --color-fuchsia-200: hsl(344, 97%, 90%);
-  --color-fuchsia-300: hsl(344, 97%, 85%);
-  --color-fuchsia-400: hsl(344, 97%, 75%);
-  --color-fuchsia-500: hsl(344, 97%, 64%);
-  --color-fuchsia-600: hsl(344, 97%, 54%);
-  --color-fuchsia-700: hsl(344, 97%, 44%);
-  --color-fuchsia-800: hsl(344, 97%, 34%);
-  --color-fuchsia-900: hsl(344, 97%, 20%);
-
-  --color-petrol-100: hsl(157, 30%, 95%);
-  --color-petrol-200: hsl(157, 30%, 90%);
-  --color-petrol-300: hsl(157, 30%, 80%);
-  --color-petrol-400: hsl(157, 30%, 70%);
-  --color-petrol-500: hsl(157, 30%, 63%);
-  --color-petrol-600: hsl(157, 30%, 53%);
-  --color-petrol-700: hsl(157, 30%, 40%);
-  --color-petrol-800: hsl(157, 30%, 30%);
-  --color-petrol-900: hsl(157, 30%, 20%);
-
-  --color-blue-100: hsla(209, 58%, 95%);
-  --color-blue-200: hsla(209, 58%, 80%);
-  --color-blue-300: hsla(209, 58%, 70%);
-  --color-blue-400: hsla(209, 58%, 60%);
-  --color-blue-500: hsla(209, 58%, 50%);
-  --color-blue-600: hsla(209, 58%, 46%);
-  --color-blue-700: hsla(209, 58%, 36%);
-  --color-blue-800: hsla(209, 58%, 30%);
-  --color-blue-900: hsl(209, 59%, 20%);
-
-  --color-amber: hsl(37, 100%, 55%);
-
-  --bg: #f3f2eb;
-  --bg-hover: rgba(123, 154, 255, 0.07);
-  --bg-even: hsla(226, 10%, 50%, 0.07);
-  --fg: #111;
-  --fg-light: rgba(0, 0, 0, 0.4);
-  --link: rgba(50, 121, 187, 0.925);
-  --link-high-contrast: rgba(50, 121, 187, 1);
-  --panel: #fff;
-  --border: 1px solid rgba(182, 182, 182, 0.424);
-  --border-radius: 5px;
-  --action: var(--link-high-contrast);
-  --success: var(--color-petrol-600);
-  --warning: hsl(37, 100%, 55%);
-  --error: var(--color-fuchsia-500);
-  --bold: 600;
-  --thin: 400;
-  --bold-letter-spacing: 0.1rem;
-}
-
-[data-theme="dark"] {
-  --bg: hsl(330, 10%, 23%);
-  --bg-hover: rgba(212, 222, 255, 0.07);
-  --bg-even: hsla(225, 10%, 62%, 0.164);
-  --fg: #fff;
-  --fg-light: rgba(255, 255, 250, 0.5);
-  --link: rgba(50, 121, 187, 0.925);
-  --link-high-contrast: rgb(104, 176, 243);
-  --panel: hsl(30, 1%, 38%);
-  --border: 1px solid rgba(0, 0, 0, 0.3);
-  --success: var(--color-petrol-400);
-  --warning: #ffba4c;
-  --error: var(--color-fuchsia-400);
-  --bold: 500;
-  --thin: 300;
-  --bold-letter-spacing: 0.127rem;
-}
-
-[data-theme="dark"] .icon-tabler {
-  stroke-width: 1.6;
-}
+@import url("vars.css");
 
 /* Main style --------------------------------------------------------------- */
 

diff --git a/ui-frontend/src/vars.css b/ui-frontend/src/vars.css
@@ -0,0 +1,75 @@
+:root {
+  --color-black: rgba(44, 62, 80, 0.9);
+
+  --color-fuchsia-100: hsl(344, 97%, 95%);
+  --color-fuchsia-200: hsl(344, 97%, 90%);
+  --color-fuchsia-300: hsl(344, 97%, 85%);
+  --color-fuchsia-400: hsl(344, 97%, 75%);
+  --color-fuchsia-500: hsl(344, 97%, 64%);
+  --color-fuchsia-600: hsl(344, 97%, 54%);
+  --color-fuchsia-700: hsl(344, 97%, 44%);
+  --color-fuchsia-800: hsl(344, 97%, 34%);
+  --color-fuchsia-900: hsl(344, 97%, 20%);
+
+  --color-petrol-100: hsl(157, 30%, 95%);
+  --color-petrol-200: hsl(157, 30%, 90%);
+  --color-petrol-300: hsl(157, 30%, 80%);
+  --color-petrol-400: hsl(157, 30%, 70%);
+  --color-petrol-500: hsl(157, 30%, 63%);
+  --color-petrol-600: hsl(157, 30%, 53%);
+  --color-petrol-700: hsl(157, 30%, 40%);
+  --color-petrol-800: hsl(157, 30%, 30%);
+  --color-petrol-900: hsl(157, 30%, 20%);
+
+  --color-blue-100: hsla(209, 58%, 95%);
+  --color-blue-200: hsla(209, 58%, 80%);
+  --color-blue-300: hsla(209, 58%, 70%);
+  --color-blue-400: hsla(209, 58%, 60%);
+  --color-blue-500: hsla(209, 58%, 50%);
+  --color-blue-600: hsla(209, 58%, 46%);
+  --color-blue-700: hsla(209, 58%, 36%);
+  --color-blue-800: hsla(209, 58%, 30%);
+  --color-blue-900: hsl(209, 59%, 20%);
+
+  --color-amber: hsl(37, 100%, 55%);
+
+  --bg: #f3f2eb;
+  --bg-hover: rgba(123, 154, 255, 0.07);
+  --bg-even: hsla(226, 10%, 50%, 0.07);
+  --fg: #111;
+  --fg-light: rgba(0, 0, 0, 0.4);
+  --link: rgba(50, 121, 187, 0.925);
+  --link-high-contrast: rgba(50, 121, 187, 1);
+  --panel: #fff;
+  --border: 1px solid rgba(182, 182, 182, 0.424);
+  --border-radius: 5px;
+  --action: var(--link-high-contrast);
+  --success: var(--color-petrol-600);
+  --warning: hsl(37, 100%, 55%);
+  --error: var(--color-fuchsia-500);
+  --bold: 600;
+  --thin: 400;
+  --bold-letter-spacing: 0.1rem;
+}
+
+[data-theme="dark"] {
+  --bg: hsl(330, 10%, 23%);
+  --bg-hover: rgba(212, 222, 255, 0.07);
+  --bg-even: hsla(225, 10%, 62%, 0.164);
+  --fg: #fff;
+  --fg-light: rgba(255, 255, 250, 0.5);
+  --link: rgba(50, 121, 187, 0.925);
+  --link-high-contrast: rgb(104, 176, 243);
+  --panel: hsl(30, 1%, 38%);
+  --border: 1px solid rgba(0, 0, 0, 0.3);
+  --success: var(--color-petrol-400);
+  --warning: #ffba4c;
+  --error: var(--color-fuchsia-400);
+  --bold: 500;
+  --thin: 300;
+  --bold-letter-spacing: 0.127rem;
+}
+
+[data-theme="dark"] .icon-tabler {
+  stroke-width: 1.6;
+}
diff --git a/xdocs/.vitepress/theme/custom.css b/xdocs/.vitepress/theme/custom.css
@@ -0,0 +1,7 @@
+:root {
+  font-size: 130%;
+
+  --vp-c-brand-1: var(--color-petrol-800);
+  --vp-c-brand-2: var(--color-petrol-700);
+  --vp-c-brand-3: var(--color-petrol-600);
+}
diff --git a/xdocs/.vitepress/theme/index.js b/xdocs/.vitepress/theme/index.js
@@ -0,0 +1,5 @@
+import DefaultTheme from "vitepress/theme";
+import "../../../ui-frontend/src/vars.css";
+import "./custom.css";
+
+export default DefaultTheme;
diff --git a/xdocs/index.md b/xdocs/index.md
@@ -33,6 +33,10 @@ features:
     details: Be better prepared for system evolution.
 ---
 
+<script setup>
+import "../ui-frontend/src/vars.css";
+</script>
+
 ## Change the way you think and design, by using Query/Response for Spring AMQP.
 
 _Sometime around 2015 I came across a presentation with [Fred George](https://twitter.com/fgeorge52),
@@ -60,9 +64,10 @@ It literally turns things around - an inversion of responsibility - which I
 truly believe we can benefit from._
 
 _Olle Törnström, 2019_
+
 <style>
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #13a8a6 30%, #4161ff);
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--color-blue-400) 30%, var(--color-fuchsia-500));
 }
 </style>