From 0b1bdf0bb2b40d2a84e4a06f2cdbbf708823ac42 Mon Sep 17 00:00:00 2001 From: mkpaz Date: Thu, 6 Oct 2022 13:52:42 +0400 Subject: [PATCH] Flatten Nord theme colors --- .../page/components/HTMLEditorPage.java | 2 +- .../sampler/page/showcase/widget/Stepper.java | 6 ++++++ styles/src/nord-dark.scss | 21 ++++++++++--------- styles/src/nord-light.scss | 21 ++++++++++--------- styles/src/settings/_utils.scss | 14 +++++++++++++ 5 files changed, 43 insertions(+), 21 deletions(-) diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java index 6ecc6a3..46629bf 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java @@ -51,7 +51,7 @@ public class HTMLEditorPage extends AbstractPage { "Unfortunately reusing Modena resources isn't possible, because the package isn't opened in OpenJFX 'module-info'." ); - var fixToggle = new ToggleSwitch("Apply fix"); + var fixToggle = new ToggleSwitch("Apply Fix"); var content = new VBox(BLOCK_VGAP, editor, new TextFlow(description), fixToggle); content.setAlignment(Pos.CENTER); diff --git a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Stepper.java b/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Stepper.java index 05f894c..6da7488 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Stepper.java +++ b/sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Stepper.java @@ -55,10 +55,16 @@ public class Stepper extends HBox { -fx-fill: -color-stepper-fg; -fx-icon-color: -color-stepper-fg; } + .stepper > .item:selected { + -color-stepper-bg: -color-bg-default; + -color-stepper-fg: -color-accent-fg; + -color-stepper-border: -color-accent-emphasis; + } .stepper > .item:selected > .graphic { -color-stepper-bg: -color-bg-default; -color-stepper-fg: -color-accent-fg; -color-stepper-border: -color-accent-emphasis; + -fx-border-width: 2; } .stepper > .item:completed { -color-stepper-bg: -color-accent-emphasis; diff --git a/styles/src/nord-dark.scss b/styles/src/nord-dark.scss index 6c19a5e..0a8e161 100755 --- a/styles/src/nord-dark.scss +++ b/styles/src/nord-dark.scss @@ -1,6 +1,7 @@ // SPDX-License-Identifier: MIT @use "sass:color"; +@use "settings/utils" as utils; // Nord color palette $nord0: #2E3440; // hsl(220, 16.4, 21.6) @@ -102,28 +103,28 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1) $neutral-emphasisPlus: scale.$base-6, $neutral-emphasis: scale.$base-7, - $neutral-muted: color.change(scale.$base-7, $alpha: 0.4), - $neutral-subtle: color.change(scale.$base-7, $alpha: 0.2), + $neutral-muted: utils.flattenColor(scale.$base-9, color.change(scale.$base-7, $alpha: 0.4)), + $neutral-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$base-7, $alpha: 0.2)), $accent-fg: scale.$accent-2, $accent-emphasis: scale.$accent-5, - $accent-muted: color.change(scale.$accent-4, $alpha: 0.4), - $accent-subtle: color.change(scale.$accent-4, $alpha: 0.1), + $accent-muted: utils.flattenColor(scale.$base-9, color.change(scale.$accent-4, $alpha: 0.4)), + $accent-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$accent-4, $alpha: 0.1)), $success-fg: scale.$success-2, $success-emphasis: scale.$success-5, - $success-muted: color.change(scale.$success-4, $alpha: 0.4), - $success-subtle: color.change(scale.$success-4, $alpha: 0.1), + $success-muted: utils.flattenColor(scale.$base-9, color.change(scale.$success-4, $alpha: 0.4)), + $success-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$success-4, $alpha: 0.1)), $warning-fg: scale.$warning-2, $warning-emphasis: scale.$warning-5, - $warning-muted: color.change(scale.$warning-4, $alpha: 0.4), - $warning-subtle: color.change(scale.$warning-4, $alpha: 0.1), + $warning-muted: utils.flattenColor(scale.$base-9, color.change(scale.$warning-4, $alpha: 0.4)), + $warning-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$warning-4, $alpha: 0.1)), $danger-fg: scale.$danger-2, $danger-emphasis: scale.$danger-4, - $danger-muted: color.change(scale.$danger-4, $alpha: 0.4), - $danger-subtle: color.change(scale.$danger-4, $alpha: 0.1) + $danger-muted: utils.flattenColor(scale.$base-9, color.change(scale.$danger-4, $alpha: 0.4)), + $danger-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$danger-4, $alpha: 0.1)) ); @forward "settings/config" with ( diff --git a/styles/src/nord-light.scss b/styles/src/nord-light.scss index b0dee42..5688c84 100755 --- a/styles/src/nord-light.scss +++ b/styles/src/nord-light.scss @@ -1,6 +1,7 @@ // SPDX-License-Identifier: MIT @use "sass:color"; +@use "settings/utils" as utils; // Note that only dark theme is officially supported: // https://github.com/arcticicestudio/nord/issues/46 @@ -105,28 +106,28 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1) $neutral-emphasisPlus: scale.$base-8, $neutral-emphasis: scale.$base-7, - $neutral-muted: color.change(scale.$base-5, $alpha: 0.4), - $neutral-subtle: color.change(scale.$base-5, $alpha: 0.1), + $neutral-muted: utils.flattenColor(scale.$light, color.change(scale.$base-5, $alpha: 0.4)), + $neutral-subtle: utils.flattenColor(scale.$light, color.change(scale.$base-5, $alpha: 0.1)), $accent-fg: scale.$accent-6, $accent-emphasis: scale.$accent-7, - $accent-muted: color.change(scale.$accent-4, $alpha: 0.4), - $accent-subtle: color.change(scale.$accent-4, $alpha: 0.1), + $accent-muted: utils.flattenColor(scale.$light, color.change(scale.$accent-4, $alpha: 0.4)), + $accent-subtle: utils.flattenColor(scale.$light, color.change(scale.$accent-4, $alpha: 0.1)), $success-fg: scale.$success-7, $success-emphasis: scale.$success-6, - $success-muted: color.change(scale.$success-4, $alpha: 0.4), - $success-subtle: color.change(scale.$success-4, $alpha: 0.1), + $success-muted: utils.flattenColor(scale.$light, color.change(scale.$success-4, $alpha: 0.4)), + $success-subtle: utils.flattenColor(scale.$light, color.change(scale.$success-4, $alpha: 0.1)), $warning-fg: scale.$warning-7, $warning-emphasis: scale.$warning-6, - $warning-muted: color.change(scale.$warning-4, $alpha: 0.4), - $warning-subtle: color.change(scale.$warning-4, $alpha: 0.1), + $warning-muted: utils.flattenColor(scale.$light, color.change(scale.$warning-4, $alpha: 0.4)), + $warning-subtle: utils.flattenColor(scale.$light, color.change(scale.$warning-4, $alpha: 0.1)), $danger-fg: scale.$danger-6, $danger-emphasis: scale.$danger-5, - $danger-muted: color.change(scale.$danger-4, $alpha: 0.4), - $danger-subtle: color.change(scale.$danger-4, $alpha: 0.15) + $danger-muted: utils.flattenColor(scale.$light, color.change(scale.$danger-4, $alpha: 0.4)), + $danger-subtle: utils.flattenColor(scale.$light, color.change(scale.$danger-4, $alpha: 0.15)) ); @forward "settings/config" with ( diff --git a/styles/src/settings/_utils.scss b/styles/src/settings/_utils.scss index 62a90e3..389380c 100644 --- a/styles/src/settings/_utils.scss +++ b/styles/src/settings/_utils.scss @@ -1,6 +1,7 @@ // SPDX-License-Identifier: MIT @use "sass:math"; +@use "sass:color"; // Darkens or lightens specified color depending on the color scheme. // Avoid using this function, stick to color scale tints and shades instead. @@ -39,3 +40,16 @@ @return math.div($pixels, $font-size) * 1em; } + +@function flattenColor($bg: #ffffff, $fg) { + $opacity: color.opacity($fg); + @if $opacity == 1 { @return $fg; } + + $red : $opacity * math.div(color.red($fg), 255) + (1 - $opacity) * math.div(color.red($bg ) , 255); + $green : $opacity * math.div(color.green($fg), 255) + (1 - $opacity) * math.div(color.green($bg), 255); + $blue : $opacity * math.div(color.blue($fg), 255) + (1 - $opacity) * math.div(color.blue($bg) , 255); + + //@debug rgb($red * 255, $green * 255, $blue * 255); + + @return rgb($red * 255, $green * 255, $blue * 255); +}