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

Improve Nord theme

Browse Source 
- Fixed contrast issues
- Revamped color palette
- Better design without border-radius
This commit is contained in:
mkpaz 2022-09-13 21:31:33 +04:00
parent 0a88c262c4
commit 7b1003c686
4 changed files with 207 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
styles/src/components/_text-input.scss
View File

@ -13,12 +13,12 @@ $color-bg-highlight: -color-accent-subtle !default;
$color-fg-highlight: -color-fg-default !default;
$color-bg-success: -color-bg-default !default;
$color-fg-success: -color-success-emphasis !default;
$color-border-success: -color-success-fg !default;
$color-fg-success: -color-success-fg !default;
$color-border-success: -color-success-emphasis !default;
$color-bg-danger: -color-bg-default !default;
$color-fg-danger: -color-danger-emphasis !default;
$color-border-danger: -color-danger-fg !default;
$color-fg-danger: -color-danger-fg !default;
$color-border-danger: -color-danger-emphasis !default;
// not exposed as looked-up color variables
$color-fg-placeholder: -color-fg-subtle !default;

16
styles/src/components/_toggle-switch.scss
View File

@ -2,7 +2,13 @@
@use "../settings/config" as cfg;
$thumb-radius: 10em !default;
$thumb-padding: 0.85em !default;
$thumb-border-width: 2px !default;
$thumb-opacity: 0.8 !default;
$thumb-area-radius: 1em !default;
$thumb-area-padding: 0.85em 1.4em 0.85em 1.4em !default;
.toggle-switch {
-fx-thumb-move-animation-time: 200;
@ -18,18 +24,18 @@ $thumb-border-width: 2px !default;
>.thumb {
-fx-background-color:-color-border-default, -color-fg-emphasis;
-fx-background-insets: 0, $thumb-border-width;
-fx-background-radius: 10em; // make sure this remains circular
-fx-padding: 0.85em;
-fx-background-radius: $thumb-radius;
-fx-padding: $thumb-padding;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
-fx-opacity: 0.8;
-fx-opacity: $thumb-opacity;
}
>.thumb-area {
-fx-background-radius: 1em;
-fx-background-radius: $thumb-area-radius;
-fx-background-color: -color-border-default, -color-bg-subtle;
-fx-background-insets: 0, cfg.$border-width;
-fx-padding: 0.85em 1.4em 0.85em 1.4em;
-fx-padding: $thumb-area-padding;
}
&:selected {

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

@ -22,63 +22,63 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-scale" with (
$dark: #20242d, // hsl(222, 17, 15)
$light: #f4f5f8, // hsl(225, 22, 96)
$dark: #232730,
$light: #fdfdfe,
$base-0: $nord6, // hsl(218, 26.8, 92 )
$base-1: $nord5, // hsl(219, 27.9, 88 )
$base-2: $nord4, // hsl(219, 9.5, 71 )
$base-3: #949AA6, // hsl(220, 9.2, 61.6)
$base-4: #8B919E, // hsl(221, 8.9, 58.2)
$base-5: #707888, // hsl(220, 9.7, 48.6)
$base-6: $nord3, // hsl(220, 12.6, 42.2)
$base-7: $nord2, // hsl(220, 16.5, 35.7)
$base-8: $nord1, // hsl(220, 16.8, 31.6)
$base-9: $nord0, // hsl(222, 16.3, 27.6)
$base-0: $nord6,
$base-1: $nord5,
$base-2: $nord4,
$base-3: #c7ceda,
$base-4: #b7becb,
$base-5: #979fae,
$base-6: #788192,
$base-7: $nord3,
$base-8: $nord1,
$base-9: $nord0,
$accent-0: #e3eaf1, // hsl(210, 33.3, 91.8)
$accent-1: #d5e0ea, // hsl(209, 33.3, 87.6)
$accent-2: #b9cbdd, // hsl(210, 34.6, 79.6)
$accent-3: #9db6cf, // hsl(210, 34.2, 71.4)
$accent-4: $nord9, // hsl(210, 34, 63.1)
$accent-5: $nord10, // hsl(213, 32, 52.2)
$accent-6: #647d96, // hsl(210, 20, 49 )
$accent-7: #48596b, // hsl(211, 19.6, 35.1)
$accent-8: #394856, // hsl(209, 20.3, 28 )
$accent-9: #2b3640, // hsl(209, 19.6, 21 )
$accent-0: #d2dce8,
$accent-1: #bccadc,
$accent-2: #98aeca,
$accent-3: #859fc0,
$accent-4: #7190b6,
$accent-5: $nord10,
$accent-6: #537297,
$accent-7: #476283,
$accent-8: #3c536e,
$accent-9: #314359,
$success-0: #dae5d1, // hsl(93, 27.8, 85.9)
$success-1: #d1dfc6, // hsl(94, 28.1, 82.5)
$success-2: #bfd2af, // hsl(93, 28, 75.5)
$success-3: #b5cba3, // hsl(93, 27.8, 71.8)
$success-4: $nord14, // hsl(92, 27.8, 64.7)
$success-5: #93ab7e, // hsl(92, 21.1, 58.2)
$success-6: #829870, // hsl(93, 16.3, 51.8)
$success-7: #728562, // hsl(93, 15.2, 45.3)
$success-8: #525f46, // hsl(91, 15.2, 32.4)
$success-9: #31392a, // hsl(92, 15.2, 19.4)
$success-0: #d1e5e5,
$success-1: #aacfce,
$success-2: #82b8b8,
$success-3: #6fadac,
$success-4: #5ba2a1,
$success-5: #508f8e,
$success-6: #457b7a,
$success-7: #3a6867,
$success-8: #2f5454,
$success-9: #244140,
$warning-0: #f7ead1, // hsl(39, 70.4, 89.4)
$warning-1: #f5e5c5, // hsl(40, 70.6, 86.7)
$warning-2: #f1dbae, // hsl(40, 70.5, 81.4)
$warning-3: #efd5a2, // hsl(40, 70.6, 78.6)
$warning-4: $nord13, // hsl(40, 70.6, 73.3)
$warning-5: #d4b77d, // hsl(40, 50.3, 66.1)
$warning-6: #bca26f, // hsl(40, 36.5, 58.6)
$warning-7: #8d7a53, // hsl(40, 25.9, 43.9)
$warning-8: #766646, // hsl(40, 25.5, 36.9)
$warning-9: #463d2a, // hsl(41, 25, 22 )
$warning-0: #f1dcd5,
$warning-1: #e9c7bc,
$warning-2: #e1b1a2,
$warning-3: #daa08d,
$warning-4: #d5937e,
$warning-5: #bb7a65,
$warning-6: #a66c5a,
$warning-7: #925f4e,
$warning-8: #7d5143,
$warning-9: #684438,
$danger-0: #ecd0d2, // hsl(356, 42.4, 87.1)
$danger-1: #dfb0b5, // hsl(354, 42.3, 78.2)
$danger-2: #d29097, // hsl(354, 42.3, 69.4)
$danger-3: #c57179, // hsl(354, 42, 60.8)
$danger-4: $nord11, // hsl(354, 42.3, 56.5)
$danger-5: #994e55, // hsl(354, 32.5, 45.3)
$danger-6: #86444a, // hsl(355, 32.7, 39.6)
$danger-7: #733a40, // hsl(354, 32.9, 33.9)
$danger-8: #603135, // hsl(355, 32.4, 28.4)
$danger-9: #391d20 // hsl(354, 32.6, 16.9)
$danger-0: #eacacd,
$danger-1: #dfb1b5,
$danger-2: #d29097,
$danger-3: #c57179,
$danger-4: #bf616a,
$danger-5: #ac575f,
$danger-6: #994e55,
$danger-7: #86444a,
$danger-8: #733a40,
$danger-9: #603135
);
@use "settings/color-scale" as scale;
@ -86,48 +86,80 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-vars" with (
$fg-default: scale.$base-0,
$fg-muted: scale.$base-2,
$fg-subtle: scale.$base-3,
$fg-muted: scale.$base-5,
$fg-subtle: scale.$base-6,
$fg-onEmphasis: scale.$light,
$canvas-default: scale.$base-9,
$canvas-overlay: scale.$base-8,
$canvas-overlay: scale.$base-9,
$canvas-inset: scale.$dark,
$canvas-subtle: scale.$base-7,
$canvas-subtle: scale.$base-8,
$border-default: scale.$base-6,
$border-default: color.change(scale.$base-6, $alpha: 0.65),
$border-muted: scale.$base-7,
$border-subtle: scale.$base-8,
$neutral-emphasisPlus: scale.$base-6,
$neutral-emphasis: scale.$base-5,
$neutral-muted: color.change(scale.$base-4, $alpha: 0.4),
$neutral-subtle: color.change(scale.$base-4, $alpha: 0.1),
$neutral-emphasisPlus: scale.$base-7,
$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),
$accent-fg: scale.$accent-3,
$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.15),
$accent-subtle: color.change(scale.$accent-4, $alpha: 0.1),
$success-fg: scale.$success-3,
$success-fg: scale.$success-2,
$success-emphasis: scale.$success-5,
$success-muted: color.change(scale.$success-4, $alpha: 0.35),
$success-subtle: color.change(scale.$success-4, $alpha: 0.15),
$success-muted: color.change(scale.$success-4, $alpha: 0.4),
$success-subtle: color.change(scale.$success-4, $alpha: 0.1),
$warning-fg: scale.$warning-3,
$warning-fg: scale.$warning-2,
$warning-emphasis: scale.$warning-5,
$warning-muted: color.change(scale.$warning-5, $alpha: 0.35),
$warning-subtle: color.change(scale.$warning-5, $alpha: 0.15),
$warning-muted: color.change(scale.$warning-4, $alpha: 0.4),
$warning-subtle: color.change(scale.$warning-4, $alpha: 0.1),
$danger-fg: scale.$danger-3,
$danger-emphasis: scale.$danger-5,
$danger-muted: color.change(scale.$danger-4, $alpha: 0.35),
$danger-subtle: color.change(scale.$danger-4, $alpha: 0.15)
$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)
);
@forward "settings/config" with (
$darkMode: true
$darkMode: true,
$border-radius: 1,
$opacity-disabled: 0.55
);
@use "general";
@forward "components/button" as button-* with (
$color-bg-hover: -color-base-7
);
@forward "components/combo-box" as combo-box-* with (
$color-list-bg-hover: -color-base-8,
$color-list-bg-selected: -color-base-7
);
@forward "components/data" as data-* with (
$color-cell-bg-selected: -color-base-7
);
@forward "components/menu" as menu-* with (
$color-menubar-bg-hover: -color-base-7
);
@forward "components/toolbar" as toolbar-* with (
$color-bg-selected: -color-base-7
);
@forward "components/toggle-switch" as toggle-switch-* with (
$thumb-radius: 1px,
$thumb-area-radius: 1px,
$thumb-padding: 0.8em,
$thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
$thumb-border-width: 3px
);
@use "components";

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

@ -25,63 +25,63 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-scale" with (
$dark: #20242d, // hsl(222, 17, 15)
$light: #f4f5f8, // hsl(225, 22, 96)
$dark: #232730,
$light: #fafafc,
$base-0: $nord6, // hsl(218, 26.8, 92 )
$base-1: $nord5, // hsl(219, 27.9, 88 )
$base-2: $nord4, // hsl(219, 9.5, 71 )
$base-3: #c2c8d2, // hsl(217, 15.1, 79.2)
$base-4: #8B919E, // hsl(221, 8.9, 58.2)
$base-5: #707888, // hsl(220, 9.7, 48.6)
$base-6: $nord3, // hsl(220, 12.6, 42.2)
$base-7: $nord2, // hsl(220, 16.5, 35.7)
$base-8: $nord1, // hsl(220, 16.8, 31.6)
$base-9: $nord0, // hsl(222, 16.3, 27.6)
$base-0: #eef1f5,
$base-1: $nord5,
$base-2: $nord4,
$base-3: #c7ceda,
$base-4: #b7becb,
$base-5: #979fae,
$base-6: #788192,
$base-7: $nord3,
$base-8: $nord1,
$base-9: $nord0,
$accent-0: #e3eaf1, // hsl(210, 33.3, 91.8)
$accent-1: #d5e0ea, // hsl(209, 33.3, 87.6)
$accent-2: #b9cbdd, // hsl(210, 34.6, 79.6)
$accent-3: #9db6cf, // hsl(210, 34.2, 71.4)
$accent-4: $nord9, // hsl(210, 34, 63.1)
$accent-5: $nord10, // hsl(213, 32, 52.2)
$accent-6: #647d96, // hsl(210, 20, 49 )
$accent-7: #48596b, // hsl(211, 19.6, 35.1)
$accent-8: #394856, // hsl(209, 20.3, 28 )
$accent-9: #2b3640, // hsl(209, 19.6, 21 )
$accent-0: #d2dce8,
$accent-1: #bccadc,
$accent-2: #98aeca,
$accent-3: #859fc0,
$accent-4: #7190b6,
$accent-5: $nord10,
$accent-6: #537297,
$accent-7: #476283,
$accent-8: #3c536e,
$accent-9: #314359,
$success-0: #dae5d1, // hsl(93, 27.8, 85.9)
$success-1: #d1dfc6, // hsl(94, 28.1, 82.5)
$success-2: #bfd2af, // hsl(93, 28, 75.5)
$success-3: #b5cba3, // hsl(93, 27.8, 71.8)
$success-4: $nord14, // hsl(92, 27.8, 64.7)
$success-5: #93ab7e, // hsl(92, 21.1, 58.2)
$success-6: #829870, // hsl(93, 16.3, 51.8)
$success-7: #728562, // hsl(93, 15.2, 45.3)
$success-8: #525f46, // hsl(91, 15.2, 32.4)
$success-9: #31392a, // hsl(92, 15.2, 19.4)
$success-0: #d1e5e5,
$success-1: #aacfce,
$success-2: #82b8b8,
$success-3: #6fadac,
$success-4: #5ba2a1,
$success-5: #508f8e,
$success-6: #457b7a,
$success-7: #3a6867,
$success-8: #2f5454,
$success-9: #244140,
$warning-0: #f7ead1, // hsl(39, 70.4, 89.4)
$warning-1: #f5e5c5, // hsl(40, 70.6, 86.7)
$warning-2: #f1dbae, // hsl(40, 70.5, 81.4)
$warning-3: #efd5a2, // hsl(40, 70.6, 78.6)
$warning-4: $nord13, // hsl(40, 70.6, 73.3)
$warning-5: #d4b77d, // hsl(40, 50.3, 66.1)
$warning-6: #bca26f, // hsl(40, 36.5, 58.6)
$warning-7: #8d7a53, // hsl(40, 25.9, 43.9)
$warning-8: #766646, // hsl(40, 25.5, 36.9)
$warning-9: #463d2a, // hsl(41, 25, 22 )
$warning-0: #f1dcd5,
$warning-1: #e9c7bc,
$warning-2: #e1b1a2,
$warning-3: #daa08d,
$warning-4: #d5937e,
$warning-5: #bb7a65,
$warning-6: #a66c5a,
$warning-7: #925f4e,
$warning-8: #7d5143,
$warning-9: #684438,
$danger-0: #ecd0d2, // hsl(356, 42.4, 87.1)
$danger-1: #dfb0b5, // hsl(354, 42.3, 78.2)
$danger-2: #d29097, // hsl(354, 42.3, 69.4)
$danger-3: #c57179, // hsl(354, 42, 60.8)
$danger-4: $nord11, // hsl(354, 42.3, 56.5)
$danger-5: #994e55, // hsl(354, 32.5, 45.3)
$danger-6: #86444a, // hsl(355, 32.7, 39.6)
$danger-7: #733a40, // hsl(354, 32.9, 33.9)
$danger-8: #603135, // hsl(355, 32.4, 28.4)
$danger-9: #391d20 // hsl(354, 32.6, 16.9)
$danger-0: #eacacd,
$danger-1: #dfb1b5,
$danger-2: #d29097,
$danger-3: #c57179,
$danger-4: #bf616a,
$danger-5: #ac575f,
$danger-6: #994e55,
$danger-7: #86444a,
$danger-8: #733a40,
$danger-9: #603135
);
@use "settings/color-scale" as scale;
@ -89,45 +89,60 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-vars" with (
$fg-default: scale.$base-9,
$fg-muted: scale.$base-6,
$fg-subtle: scale.$base-5,
$fg-muted: color.change(scale.$base-7, $alpha: 0.88),
$fg-subtle: scale.$base-6,
$fg-onEmphasis: scale.$light,
$canvas-default: scale.$light,
$canvas-overlay: scale.$light,
$canvas-inset: scale.$base-0,
$canvas-inset: scale.$base-1,
$canvas-subtle: scale.$base-0,
$border-default: scale.$base-3,
$border-muted: lighten(scale.$base-2, 0.03),
$border-muted: lighten(scale.$base-3, 0.1),
$border-subtle: color.change(scale.$dark, $alpha: 0.15),
$neutral-emphasisPlus: scale.$base-8,
$neutral-emphasis: scale.$base-5,
$neutral-muted: color.change(scale.$base-3, $alpha: 0.2),
$neutral-subtle: color.change(scale.$base-1, $alpha: 0.5),
$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),
$accent-fg: scale.$accent-5,
$accent-emphasis: scale.$accent-5,
$accent-muted: color.change(scale.$accent-3, $alpha: 0.4),
$accent-subtle: color.change(scale.$accent-3, $alpha: 0.15),
$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),
$success-fg: scale.$success-6,
$success-emphasis: scale.$success-4,
$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.15),
$success-subtle: color.change(scale.$success-4, $alpha: 0.1),
$warning-fg: scale.$warning-7,
$warning-emphasis: scale.$warning-4,
$warning-emphasis: scale.$warning-6,
$warning-muted: color.change(scale.$warning-4, $alpha: 0.4),
$warning-subtle: color.change(scale.$warning-4, $alpha: 0.15),
$warning-subtle: color.change(scale.$warning-4, $alpha: 0.1),
$danger-fg: scale.$danger-5,
$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-subtle: color.change(scale.$danger-4, $alpha: 0.15)
);
@forward "settings/config" with (
$darkMode: false,
$border-radius: 1,
$opacity-disabled: 0.6
);
@use "general";
@forward "components/toggle-switch" as toggle-switch-* with (
$thumb-radius: 1px,
$thumb-area-radius: 1px,
$thumb-padding: 0.8em,
$thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
$thumb-border-width: 3px,
$thumb-opacity: 0.6
);
@use "components";