Flatten Nord theme colors
This commit is contained in:
mkpaz
parent
8af9bdfc7f
commit
0b1bdf0bb2
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user