From 8bd4be7afcd31a0240df10cc2ae415cb3c9c7402 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olle=20T=C3=B6rnstr=C3=B6m?= Date: Tue, 9 Jul 2024 23:23:06 +0200 Subject: [PATCH] Add custom theme colors --- ui-frontend/src/style.css | 76 +------------------------------ ui-frontend/src/vars.css | 75 ++++++++++++++++++++++++++++++ xdocs/.vitepress/theme/custom.css | 7 +++ xdocs/.vitepress/theme/index.js | 5 ++ xdocs/index.md | 7 ++- 5 files changed, 94 insertions(+), 76 deletions(-) create mode 100644 ui-frontend/src/vars.css create mode 100644 xdocs/.vitepress/theme/custom.css create mode 100644 xdocs/.vitepress/theme/index.js diff --git a/ui-frontend/src/style.css b/ui-frontend/src/style.css index 2a62b51..d943a9b 100644 --- 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 new file mode 100644 index 0000000..678f504 --- /dev/null +++ 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 new file mode 100644 index 0000000..1b8e53a --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/xdocs/.vitepress/theme/index.js b/xdocs/.vitepress/theme/index.js new file mode 100644 index 0000000..f0ac6e5 --- /dev/null +++ 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 index 99881af..dbb23b2 100644 --- a/xdocs/index.md +++ b/xdocs/index.md @@ -33,6 +33,10 @@ features: details: Be better prepared for system evolution. --- + + ## 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_ +