From 1d72ad088c43fb81f91f6d9a35ef5a1571763345 Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Tue, 7 Jul 2026 06:33:16 +0200 Subject: [PATCH] feat(ui): improve markup attention colors (#13224) ## Refactor styles of attention markdown formatting * simplify CSS * simplify generated HTML a bit * get rid of a few `!important` properties by using higher specificity selectors * bring everything to one file and out of `base.css` * apply declarative purpose-built colors introduced in forgejo/forgejo!9643 * create new colors for `violet` and `blue` * move `oklch` declarations out of themes to `base.css`, leave themes with access to all parameters * use declarative styles in all themes, not just `forgejo-dark`, remove variable fallbacks from styles * remove rule overrides from `forgejo-dark`. _it should ideally only contain variables, not rules_ What's improved: * lightness and saturation are now same for all color variants of different attention types within one theme * code is more maintainable * custom themes are easier to make, our example themes are dumping less RGB values at theme authors and allow changing some important colors just by tweaking numeric values (lightness, chroma, hue) * forgejo and gitea dark themes are now using good contrast ### Preview #### Forgejo themes |dark before|dark after|light before|light after| |-|-|-|-| |![](https://codeberg.org/attachments/b59e793e-abe7-41ef-9008-368e79325783)|![](https://codeberg.org/attachments/fe4c75bf-4a6c-4aec-9de2-5d1b0af812dd)|![](https://codeberg.org/attachments/13920738-8193-4a9d-82f7-3d93bea6573b)|![](https://codeberg.org/attachments/a4678d87-8b98-4dec-a333-727dc758faa7)| #### Gitea themes |dark before|dark after|light before|light after| |-|-|-|-| |![](https://codeberg.org/attachments/d20c34f9-90f9-46b0-8d26-fe76d832c896)|![](https://codeberg.org/attachments/88837fc6-a75c-4679-9716-760853e14755)|![](https://codeberg.org/attachments/4830fb41-f29e-46a5-afc1-8edaaa082d78)|![](https://codeberg.org/attachments/e299e186-f581-40c2-8ebf-8e73a339ac7d)| Some previously (or now) unused color variables were also removed. They have existed for years and were never applied anywhere. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13224 Reviewed-by: Gusted --- modules/markup/markdown/callout/github.go | 2 +- modules/markup/sanitizer.go | 2 +- release-notes/13224.md | 1 + tests/e2e/declare_repos_test.go | 19 +++++++ tests/e2e/e2e_test.go | 3 ++ tests/e2e/markup.test.e2e.ts | 39 +++++++++++++- web_src/css/actions.css | 16 ------ web_src/css/base.css | 60 +++++----------------- web_src/css/form.css | 2 +- web_src/css/index.css | 1 + web_src/css/markup/attention.css | 34 ++++++++++++ web_src/css/modules/button.css | 4 +- web_src/css/modules/header.css | 5 -- web_src/css/themes/theme-forgejo-dark.css | 29 +++-------- web_src/css/themes/theme-forgejo-light.css | 18 ++++--- web_src/css/themes/theme-gitea-dark.css | 18 ++++--- web_src/css/themes/theme-gitea-light.css | 18 ++++--- 17 files changed, 154 insertions(+), 117 deletions(-) create mode 100644 release-notes/13224.md create mode 100644 web_src/css/markup/attention.css diff --git a/modules/markup/markdown/callout/github.go b/modules/markup/markdown/callout/github.go index 49ad249696..f0206f4783 100644 --- a/modules/markup/markdown/callout/github.go +++ b/modules/markup/markdown/callout/github.go @@ -125,7 +125,7 @@ func (r *GitHubCalloutHTMLRenderer) renderAttention(w util.BufWriter, source []b default: octiconName = "info" } - _, _ = w.WriteString(string(svg.RenderHTML("octicon-"+octiconName, 16, "attention-icon attention-"+n.AttentionType))) + _, _ = w.WriteString(string(svg.RenderHTML("octicon-"+octiconName, 16))) } return ast.WalkContinue, nil } diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go index 9f2b92f3cb..30d023b2d1 100644 --- a/modules/markup/sanitizer.go +++ b/modules/markup/sanitizer.go @@ -68,7 +68,7 @@ func createDefaultPolicy() *bluemonday.Policy { policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-title$`)).OnElements("p") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong") - policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg") + policy.AllowAttrs("class").Matching(regexp.MustCompile(`^svg octicon-[\w-]+$`)).OnElements("svg") policy.AllowAttrs("viewBox", "width", "height", "aria-hidden").OnElements("svg") policy.AllowAttrs("fill-rule", "d").OnElements("path") diff --git a/release-notes/13224.md b/release-notes/13224.md new file mode 100644 index 0000000000..0c0ed91ff2 --- /dev/null +++ b/release-notes/13224.md @@ -0,0 +1 @@ +feat(ui): improve markup attention colors. Note: CSS variables were changed, custom themes may need to be updated accordingly diff --git a/tests/e2e/declare_repos_test.go b/tests/e2e/declare_repos_test.go index 7a49956a36..997aa68b25 100644 --- a/tests/e2e/declare_repos_test.go +++ b/tests/e2e/declare_repos_test.go @@ -106,6 +106,25 @@ body: id: textarea-two attributes: label: two +`}, + }}, nil) + newRepo(t, 2, "markup-attention", nil, []FileChanges{{ + Filename: "github-modern.md", + Versions: []string{` +> [!note] +> This text is a note + +> [!tip] +> This text is a tip + +> [!important] +> This text is important + +> [!warning] +> This text is a warning + +> [!caution] +> This text is to make someone cautious `}, }}, nil) newRepo(t, 11, "dependency-test", map[unit_model.Type]convert.Conversion{ diff --git a/tests/e2e/e2e_test.go b/tests/e2e/e2e_test.go index af225f16ec..559fc3d6b9 100644 --- a/tests/e2e/e2e_test.go +++ b/tests/e2e/e2e_test.go @@ -105,6 +105,9 @@ func TestE2e(t *testing.T) { } t.Run(testname, func(t *testing.T) { + // Add test-specific fixures or config options. + // Note: this breaks test execution through Playwright Extension for VSCode + // Note: these tests only work properly via `make test-e2e-sqlite#filename` if testname == "buttons.test.e2e" || testname == "dropdown.test.e2e" || testname == "modal.test.e2e" { defer test.MockVariableValue(&setting.IsProd, false)() defer test.MockVariableValue(&testE2eWebRoutes, routers.NormalRoutes())() diff --git a/tests/e2e/markup.test.e2e.ts b/tests/e2e/markup.test.e2e.ts index 7e6bdf8651..1c3f2cb5be 100644 --- a/tests/e2e/markup.test.e2e.ts +++ b/tests/e2e/markup.test.e2e.ts @@ -1,3 +1,6 @@ +// Copyright 2024 The Forgejo Authors. All rights reserved. +// SPDX-License-Identifier: GPL-3.0-or-later + // @watch start // web_src/css/markup/** // @watch end @@ -6,7 +9,7 @@ import {expect} from '@playwright/test'; import {test} from './utils_e2e.ts'; import {screenshot} from './shared/screenshots.ts'; -test('markup with #xyz-mode-only', async ({page}) => { +test('Markup with #xyz-mode-only', async ({page}) => { const response = await page.goto('/user2/repo1/issues/1'); expect(response?.status()).toBe(200); @@ -16,3 +19,37 @@ test('markup with #xyz-mode-only', async ({page}) => { await expect(comment.locator('[src$="#gh-dark-mode-only"]')).toBeHidden(); await screenshot(page); }); + +test('Attention formatting', async ({page}) => { + const response = await page.goto('/user2/markup-attention/src/branch/main/github-modern.md'); + expect(response?.status()).toBe(200); + + const attentionTypes = [ + 'note', + 'tip', + 'important', + 'warning', + 'caution', + ]; + + await expect(async () => { + await Promise.all(attentionTypes.map(async (attentionType) => { + const selector = `.markup blockquote.attention-header.attention-${attentionType}`; + expect(await page.locator(selector).evaluate((el) => getComputedStyle(el).borderInlineStartWidth)).toBe('4px'); + + // Get all interesting colors + const borderColor = await page.locator(selector).evaluate((el) => getComputedStyle(el).borderInlineStartColor); + const titleColor = await page.locator(`${selector} > p.attention-title > strong`).evaluate((el) => getComputedStyle(el).color); + const iconColor = await page.locator(`${selector} > p.attention-title > svg`).evaluate((el) => getComputedStyle(el).color); + const ugcColor = await page.locator(`${selector} > p:not(.attention-title)`).evaluate((el) => getComputedStyle(el).color); + + // It's difficult to reliably evaluate the actual colors, but checking that the + // colors are same for border/title/icon, and UGC is different is good enough + expect(borderColor).toBe(titleColor); + expect(titleColor).toBe(iconColor); + expect(ugcColor).not.toBe(titleColor); + })); + }).toPass({timeout: 3000}); + + await screenshot(page); +}); diff --git a/web_src/css/actions.css b/web_src/css/actions.css index e61fac84b7..b8402f87b2 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -6,22 +6,6 @@ overflow-inline: auto; } -.runner-container .runner-ops > a { - margin-inline-start: 0.5em; -} - -.runner-container .runner-ops-delete { - color: var(--color-red-light); -} - -.runner-container .runner-new-text { - color: var(--color-white); -} - -.runner-container #runner-new:hover .runner-new-text { - color: var(--color-white) !important; -} - .runner-container .task-status-success { background-color: var(--color-green); color: var(--color-white); diff --git a/web_src/css/base.css b/web_src/css/base.css index c7b5fe9f44..6ea57a312c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -29,6 +29,14 @@ --page-spacing: 16px; /* space between page elements */ --page-margin-x: 32px; /* minimum space on left and right side of page */ --button-spacing: 0.33rem; + + /* Colors for thin elements: octicons, text, borders */ + --color-thin-green: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-green)); + --color-thin-red: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-red)); + --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-purple)); + --color-thin-violet: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-violet)); + --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-orange)); + --color-thin-blue: oklch(var(--thin-lightness) var(--regular-chroma) var(--hue-blue)); } @media (min-width: 768px) and (max-width: 1200px) { @@ -665,11 +673,11 @@ img.ui.avatar, } .text.red { - color: var(--color-thin-red, var(--color-red)) !important; + color: var(--color-thin-red) !important; } .text.orange { - color: var(--color-thin-orange, var(--color-orange)) !important; + color: var(--color-thin-orange) !important; } .text.yellow { @@ -677,7 +685,7 @@ img.ui.avatar, } .text.green { - color: var(--color-thin-green, var(--color-green)) !important; + color: var(--color-thin-green) !important; } .text.teal { @@ -689,7 +697,7 @@ img.ui.avatar, } .text.purple { - color: var(--color-thin-purple, var(--color-purple)) !important; + color: var(--color-thin-purple) !important; } .text.brown { @@ -935,50 +943,6 @@ img.ui.avatar, border-radius: var(--border-radius); } -.attention-icon { - margin: auto 0.5em auto 0; -} - -.attention-title { - align-items: center; - display: flex; -} - -blockquote.attention-note { - border-inline-start-color: var(--color-blue-dark-1); -} -strong.attention-note, svg.attention-note { - color: var(--color-blue-dark-1); -} - -blockquote.attention-tip { - border-inline-start-color: var(--color-success-text); -} -strong.attention-tip, svg.attention-tip { - color: var(--color-success-text); -} - -blockquote.attention-important { - border-inline-start-color: var(--color-violet-dark-1); -} -strong.attention-important, svg.attention-important { - color: var(--color-violet-dark-1); -} - -blockquote.attention-warning { - border-inline-start-color: var(--color-warning-text); -} -strong.attention-warning, svg.attention-warning { - color: var(--color-warning-text); -} - -blockquote.attention-caution { - border-inline-start-color: var(--color-red-dark-1); -} -strong.attention-caution, svg.attention-caution { - color: var(--color-red-dark-1); -} - .center:not(.popup) { text-align: center; } diff --git a/web_src/css/form.css b/web_src/css/form.css index bbe1bed99d..62b79536aa 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -267,7 +267,7 @@ input:-webkit-autofill:active, .ui.form .required.fields > .field > label::after, .ui.form .required.field > label::after, .ui.form label.required::after { - color: var(--color-thin-red, var(--color-red)); + color: var(--color-thin-red); } .ui.input { diff --git a/web_src/css/index.css b/web_src/css/index.css index f48620a715..08045f0c9d 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -50,6 +50,7 @@ @import "./features/tom-select.css"; @import "./features/console.css"; +@import "./markup/attention.css"; @import "./markup/content.css"; @import "./markup/codecopy.css"; @import "./markup/asciicast.css"; diff --git a/web_src/css/markup/attention.css b/web_src/css/markup/attention.css new file mode 100644 index 0000000000..ee567ec9fe --- /dev/null +++ b/web_src/css/markup/attention.css @@ -0,0 +1,34 @@ +/* Copyright 2026 The Forgejo Authors. All rights reserved. + * SPDX-License-Identifier: GPL-3.0-or-later */ + +.markup blockquote.attention-header { + padding: 0.5em 0.75em; + color: var(--color-text); + border-inline-start-color: var(--attention-color); +} + +.attention-title { + align-items: center; + display: flex; + color: var(--attention-color); + + svg { + margin: auto 0.5em auto 0; + } +} + +.attention-note { + --attention-color: var(--color-thin-blue); +} +.attention-tip { + --attention-color: var(--color-thin-green); +} +.attention-important { + --attention-color: var(--color-thin-violet); +} +.attention-warning { + --attention-color: var(--color-warning-text); +} +.attention-caution { + --attention-color: var(--color-thin-red); +} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 07152b4d99..de6c1ceb9f 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -67,8 +67,8 @@ .button.danger { /* Fallbacks are needed while -thin vars are not supplied by all themes */ background: var(--color-danger-bg, var(--color-error-bg)); - border: 1px solid var(--color-thin-red, var(--color-red)); - color: var(--color-thin-red, var(--color-red)); + border: 1px solid var(--color-thin-red); + color: var(--color-thin-red); &:hover, &:focus { diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css index 308960031b..bcbc3df38c 100644 --- a/web_src/css/modules/header.css +++ b/web_src/css/modules/header.css @@ -168,8 +168,3 @@ h4.ui.header .sub.header { color: var(--color-warning-text) !important; border-color: var(--color-warning-border) !important; } - -.attention-header { - padding: 0.5em 0.75em !important; - color: var(--color-text) !important; -} diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index 33d1674587..26b4d0e2b9 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -27,9 +27,6 @@ --color-primary-dark-2: #fdba74; --color-primary-dark-3: #fed7aa; --color-primary-dark-4: #fed7aa; - --color-primary-dark-5: #ffedd5; - --color-primary-dark-6: #ffedd5; - --color-primary-dark-7: #fff7ed; --color-primary-light-1: #f97316; --color-primary-light-2: #ea580c; --color-primary-light-3: #c2410c; @@ -107,8 +104,6 @@ --color-olive-light: #839311; --color-green-light: #16a34a; --color-teal-light: #14b8a6; - --color-blue-light: #3b82f6; - --color-violet-light: #8b5cf6; --color-purple-light: #a855f7; --color-pink-light: #ec4899; --color-brown-light: #94674a; @@ -121,7 +116,6 @@ --color-olive-dark-1: #839311; --color-green-dark-1: #137337; --color-teal-dark-1: #0c857a; - --color-blue-dark-1: #1554e0; --color-violet-dark-1: #6a1feb; --color-purple-dark-1: #8519e7; --color-pink-dark-1: #c7216b; @@ -134,7 +128,6 @@ --color-olive-dark-2: #91a313; --color-green-dark-2: #15803d; --color-teal-dark-2: #0a766d; - --color-blue-dark-2: #2563eb; --color-violet-dark-2: #5c14d8; --color-purple-dark-2: #7c3aed; --color-pink-dark-2: #b11d5f; @@ -196,13 +189,16 @@ --color-orange-badge: #ea580c; --color-orange-badge-bg: #ea580c22; --color-orange-badge-hover-bg: #ea580c44; - /* Colors for thin elements: octicons, text, borders */ + + /* A more declarative way for themes */ --thin-lightness: 0.68; --regular-chroma: 0.19; - --color-thin-green: oklch(var(--thin-lightness) var(--regular-chroma) 145deg); - --color-thin-red: oklch(var(--thin-lightness) var(--regular-chroma) 27deg); - --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 298deg); - --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 41deg); + --hue-green: 145deg; + --hue-red: 27deg; + --hue-purple: 298deg; + --hue-violet: 293deg; + --hue-orange: 41deg; + --hue-blue: 260deg; /* Ditto but when additional highlight is needed, e.g. on user interaction */ --thin-lightness-highlight: 0.75; @@ -345,15 +341,6 @@ i.grey.icon.icon.icon.icon { .ui.yellow.label.pending-label { color: var(--color-warning-text) !important; } -strong.attention-important, svg.attention-important { - color: var(--color-violet-light); -} -strong.attention-note, svg.attention-note { - color: var(--color-blue-light); -} -strong.attention-caution, svg.attention-caution { - color: var(--color-red-light); -} .ui.basic.red.button { background-color: var(--color-red); color: var(--color-white); diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index e41a7b1aca..ce71ef342a 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -44,9 +44,6 @@ --color-primary-dark-2: #9a3412; --color-primary-dark-3: #9a3412; --color-primary-dark-4: #7c2d12; - --color-primary-dark-5: #7c2d12; - --color-primary-dark-6: #7c2d12; - --color-primary-dark-7: #7c2d12; --color-primary-light-1: #ea580c; --color-primary-light-2: #f97316; --color-primary-light-3: #fb923c; @@ -124,8 +121,6 @@ --color-olive-light: #839311; --color-green-light: #16a34a; --color-teal-light: #14b8a6; - --color-blue-light: #3b82f6; - --color-violet-light: #8b5cf6; --color-purple-light: #a855f7; --color-pink-light: #ec4899; --color-brown-light: #94674a; @@ -138,7 +133,6 @@ --color-olive-dark-1: #839311; --color-green-dark-1: #137337; --color-teal-dark-1: #0c857a; - --color-blue-dark-1: #1554e0; --color-violet-dark-1: #6a1feb; --color-purple-dark-1: #8519e7; --color-pink-dark-1: #c7216b; @@ -151,7 +145,6 @@ --color-olive-dark-2: #74820f; --color-green-dark-2: #116631; --color-teal-dark-2: #0a766d; - --color-blue-dark-2: #124bc7; --color-violet-dark-2: #5c14d8; --color-purple-dark-2: #7715cf; --color-pink-dark-2: #b11d5f; @@ -212,6 +205,17 @@ --color-orange-badge: #ea580c; --color-orange-badge-bg: #ea580c22; --color-orange-badge-hover-bg: #ea580c44; + + /* A more declarative way for themes */ + --thin-lightness: 0.53; + --regular-chroma: 0.17; + --hue-green: 145deg; + --hue-red: 27deg; + --hue-purple: 298deg; + --hue-violet: 293deg; + --hue-orange: 41deg; + --hue-blue: 260deg; + /* target-based colors */ --color-body: #fff; --color-box-header: var(--zinc-100); diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 967b046899..d1040fd2f8 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -10,9 +10,6 @@ --color-primary-dark-2: #679cd0; --color-primary-dark-3: #7aa8d6; --color-primary-dark-4: #8db5dc; - --color-primary-dark-5: #b3cde7; - --color-primary-dark-6: #d9e6f3; - --color-primary-dark-7: #f4f8fb; --color-primary-light-1: #3876b3; --color-primary-light-2: #31699f; --color-primary-light-3: #2b5c8b; @@ -89,8 +86,6 @@ --color-olive-light: #abc016; --color-green-light: #93b373; --color-teal-light: #00b6ad; - --color-blue-light: #4e96cc; - --color-violet-light: #9b79e4; --color-purple-light: #ba6ad5; --color-pink-light: #d74397; --color-brown-light: #b08061; @@ -102,7 +97,6 @@ --color-olive-dark-1: #839311; --color-green-dark-1: #7a9e55; --color-teal-dark-1: #00837c; - --color-blue-dark-1: #347cb3; --color-violet-dark-1: #7b4edb; --color-purple-dark-1: #a742c9; --color-pink-dark-1: #be297d; @@ -115,7 +109,6 @@ --color-olive-dark-2: #74820f; --color-green-dark-2: #6c8c4c; --color-teal-dark-2: #00746e; - --color-blue-dark-2: #2e6e9f; --color-violet-dark-2: #6733d6; --color-purple-dark-2: #9834b9; --color-pink-dark-2: #a9246f; @@ -178,6 +171,17 @@ --color-orange-badge: #f2711c; --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; + + /* A more declarative way for themes */ + --thin-lightness: 0.68; + --regular-chroma: 0.19; + --hue-green: 142deg; + --hue-red: 25deg; + --hue-purple: 298deg; + --hue-violet: 293deg; + --hue-orange: 41deg; + --hue-blue: 245deg; + /* target-based colors */ --color-body: #1c1f25; --color-box-header: #1a1d1f; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 91b0c52703..ae8c316eda 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -10,9 +10,6 @@ --color-primary-dark-2: #31699f; --color-primary-dark-3: #2b5c8b; --color-primary-dark-4: #254f77; - --color-primary-dark-5: #193450; - --color-primary-dark-6: #0c1a28; - --color-primary-dark-7: #04080c; --color-primary-light-1: #548fca; --color-primary-light-2: #679cd0; --color-primary-light-3: #7aa8d6; @@ -89,8 +86,6 @@ --color-olive-light: #d3e942; --color-green-light: #46de6a; --color-teal-light: #08fff4; - --color-blue-light: #51a5e3; - --color-violet-light: #8b67d7; --color-purple-light: #bb64d8; --color-pink-light: #e86bb1; --color-brown-light: #c58b66; @@ -102,7 +97,6 @@ --color-olive-dark-1: #a3b816; --color-green-dark-1: #1ea73e; --color-teal-dark-1: #00a39c; - --color-blue-dark-1: #1e78bb; --color-violet-dark-1: #5a30b5; --color-purple-dark-1: #932eb4; --color-pink-dark-1: #db228a; @@ -115,7 +109,6 @@ --color-olive-dark-2: #91a313; --color-green-dark-2: #1a9537; --color-teal-dark-2: #00918a; - --color-blue-dark-2: #1a6aa6; --color-violet-dark-2: #502aa1; --color-purple-dark-2: #8229a0; --color-pink-dark-2: #c21e7b; @@ -178,6 +171,17 @@ --color-orange-badge: #f2711c; --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; + + /* A more declarative way for themes */ + --thin-lightness: 0.5555; + --regular-chroma: 0.17; + --hue-green: 142deg; + --hue-red: 27deg; + --hue-purple: 298deg; + --hue-violet: 291deg; + --hue-orange: 41deg; + --hue-blue: 247deg; + /* target-based colors */ --color-body: #ffffff; --color-box-header: #f1f3f5;