tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flatten Nord theme colors

Browse Source
This commit is contained in:
mkpaz 2022-10-06 13:52:42 +04:00
parent 8af9bdfc7f
commit 0b1bdf0bb2
5 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java
View File

@ -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'." "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); var content = new VBox(BLOCK_VGAP, editor, new TextFlow(description), fixToggle);
content.setAlignment(Pos.CENTER); content.setAlignment(Pos.CENTER);

6
sampler/src/main/java/atlantafx/sampler/page/showcase/widget/Stepper.java
View File

@ -55,10 +55,16 @@ public class Stepper extends HBox {
-fx-fill: -color-stepper-fg; -fx-fill: -color-stepper-fg;
-fx-icon-color: -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 { .stepper > .item:selected > .graphic {
-color-stepper-bg: -color-bg-default; -color-stepper-bg: -color-bg-default;
-color-stepper-fg: -color-accent-fg; -color-stepper-fg: -color-accent-fg;
-color-stepper-border: -color-accent-emphasis; -color-stepper-border: -color-accent-emphasis;
-fx-border-width: 2;
} }
.stepper > .item:completed { .stepper > .item:completed {
-color-stepper-bg: -color-accent-emphasis; -color-stepper-bg: -color-accent-emphasis;

21
styles/src/nord-dark.scss
View File

@ -1,6 +1,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@use "sass:color"; @use "sass:color";
@use "settings/utils" as utils;
// Nord color palette // Nord color palette
$nord0: #2E3440; // hsl(220, 16.4, 21.6) $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-emphasisPlus: scale.$base-6,
$neutral-emphasis: scale.$base-7, $neutral-emphasis: scale.$base-7,
$neutral-muted: color.change(scale.$base-7, $alpha: 0.4), $neutral-muted: utils.flattenColor(scale.$base-9, color.change(scale.$base-7, $alpha: 0.4)),
$neutral-subtle: color.change(scale.$base-7, $alpha: 0.2), $neutral-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$base-7, $alpha: 0.2)),
$accent-fg: scale.$accent-2, $accent-fg: scale.$accent-2,
$accent-emphasis: scale.$accent-5, $accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$accent-4, $alpha: 0.4), $accent-muted: utils.flattenColor(scale.$base-9, color.change(scale.$accent-4, $alpha: 0.4)),
$accent-subtle: color.change(scale.$accent-4, $alpha: 0.1), $accent-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$accent-4, $alpha: 0.1)),
$success-fg: scale.$success-2, $success-fg: scale.$success-2,
$success-emphasis: scale.$success-5, $success-emphasis: scale.$success-5,
$success-muted: color.change(scale.$success-4, $alpha: 0.4), $success-muted: utils.flattenColor(scale.$base-9, color.change(scale.$success-4, $alpha: 0.4)),
$success-subtle: color.change(scale.$success-4, $alpha: 0.1), $success-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$success-4, $alpha: 0.1)),
$warning-fg: scale.$warning-2, $warning-fg: scale.$warning-2,
$warning-emphasis: scale.$warning-5, $warning-emphasis: scale.$warning-5,
$warning-muted: color.change(scale.$warning-4, $alpha: 0.4), $warning-muted: utils.flattenColor(scale.$base-9, color.change(scale.$warning-4, $alpha: 0.4)),
$warning-subtle: color.change(scale.$warning-4, $alpha: 0.1), $warning-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$warning-4, $alpha: 0.1)),
$danger-fg: scale.$danger-2, $danger-fg: scale.$danger-2,
$danger-emphasis: scale.$danger-4, $danger-emphasis: scale.$danger-4,
$danger-muted: color.change(scale.$danger-4, $alpha: 0.4), $danger-muted: utils.flattenColor(scale.$base-9, color.change(scale.$danger-4, $alpha: 0.4)),
$danger-subtle: color.change(scale.$danger-4, $alpha: 0.1) $danger-subtle: utils.flattenColor(scale.$base-9, color.change(scale.$danger-4, $alpha: 0.1))
); );
@forward "settings/config" with ( @forward "settings/config" with (

21
styles/src/nord-light.scss
View File

@ -1,6 +1,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@use "sass:color"; @use "sass:color";
@use "settings/utils" as utils;
// Note that only dark theme is officially supported: // Note that only dark theme is officially supported:
// https://github.com/arcticicestudio/nord/issues/46 // 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-emphasisPlus: scale.$base-8,
$neutral-emphasis: scale.$base-7, $neutral-emphasis: scale.$base-7,
$neutral-muted: color.change(scale.$base-5, $alpha: 0.4), $neutral-muted: utils.flattenColor(scale.$light, color.change(scale.$base-5, $alpha: 0.4)),
$neutral-subtle: color.change(scale.$base-5, $alpha: 0.1), $neutral-subtle: utils.flattenColor(scale.$light, color.change(scale.$base-5, $alpha: 0.1)),
$accent-fg: scale.$accent-6, $accent-fg: scale.$accent-6,
$accent-emphasis: scale.$accent-7, $accent-emphasis: scale.$accent-7,
$accent-muted: color.change(scale.$accent-4, $alpha: 0.4), $accent-muted: utils.flattenColor(scale.$light, color.change(scale.$accent-4, $alpha: 0.4)),
$accent-subtle: color.change(scale.$accent-4, $alpha: 0.1), $accent-subtle: utils.flattenColor(scale.$light, color.change(scale.$accent-4, $alpha: 0.1)),
$success-fg: scale.$success-7, $success-fg: scale.$success-7,
$success-emphasis: scale.$success-6, $success-emphasis: scale.$success-6,
$success-muted: color.change(scale.$success-4, $alpha: 0.4), $success-muted: utils.flattenColor(scale.$light, color.change(scale.$success-4, $alpha: 0.4)),
$success-subtle: color.change(scale.$success-4, $alpha: 0.1), $success-subtle: utils.flattenColor(scale.$light, color.change(scale.$success-4, $alpha: 0.1)),
$warning-fg: scale.$warning-7, $warning-fg: scale.$warning-7,
$warning-emphasis: scale.$warning-6, $warning-emphasis: scale.$warning-6,
$warning-muted: color.change(scale.$warning-4, $alpha: 0.4), $warning-muted: utils.flattenColor(scale.$light, color.change(scale.$warning-4, $alpha: 0.4)),
$warning-subtle: color.change(scale.$warning-4, $alpha: 0.1), $warning-subtle: utils.flattenColor(scale.$light, color.change(scale.$warning-4, $alpha: 0.1)),
$danger-fg: scale.$danger-6, $danger-fg: scale.$danger-6,
$danger-emphasis: scale.$danger-5, $danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$danger-4, $alpha: 0.4), $danger-muted: utils.flattenColor(scale.$light, color.change(scale.$danger-4, $alpha: 0.4)),
$danger-subtle: color.change(scale.$danger-4, $alpha: 0.15) $danger-subtle: utils.flattenColor(scale.$light, color.change(scale.$danger-4, $alpha: 0.15))
); );
@forward "settings/config" with ( @forward "settings/config" with (

14
styles/src/settings/_utils.scss
View File

@ -1,6 +1,7 @@
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@use "sass:math"; @use "sass:math";
@use "sass:color";
// Darkens or lightens specified color depending on the color scheme. // Darkens or lightens specified color depending on the color scheme.
// Avoid using this function, stick to color scale tints and shades instead. // Avoid using this function, stick to color scale tints and shades instead.
@ -39,3 +40,16 @@
@return math.div($pixels, $font-size) * 1em; @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);
}