atlantafx/styles/src/nord-dark.scss

134 lines
4.8 KiB
SCSS
Executable File

// SPDX-License-Identifier: MIT
@use "sass:color";
// Nord color palette
$nord0: #2E3440; // hsl(220, 16.4, 21.6)
$nord1: #3B4252; // hsl(222, 16.3, 27.6)
$nord2: #434C5E; // hsl(220, 16.8, 31.6)
$nord3: #4C566A; // hsl(220, 16.5, 35.7)
$nord4: #D8DEE9; // hsl(219, 27.9, 88 )
$nord5: #E5E9F0; // hsl(218, 26.8, 92 )
$nord6: #ECEFF4; // hsl(218, 26.7, 94.1)
$nord7: #8FBCBB; // hsl(179, 25.1, 64.9)
$nord8: #88C0D0; // hsl(193, 43.4, 67.5)
$nord9: #81A1C1; // hsl(210, 34, 63.1)
$nord10: #5E81AC; // hsl(213, 32, 52.2)
$nord11: #BF616A; // hsl(354, 42.3, 56.5)
$nord12: #D08770; // hsl(14, 50.5, 62.7)
$nord13: #EBCB8B; // hsl(40, 70.6, 73.3)
$nord14: #A3BE8C; // hsl(92, 27.8, 64.7)
$nord16: #B48EAD; // hsl(311, 20.2, 63.1)
@forward "settings/color-scale" with (
$black: #20242d, // hsl(222, 17, 15)
$white: #f4f5f8, // hsl(225, 22, 96)
$gray-0: $nord6, // hsl(218, 26.8, 92 )
$gray-1: $nord5, // hsl(219, 27.9, 88 )
$gray-2: $nord4, // hsl(219, 9.5, 71 )
$gray-3: #949AA6, // hsl(220, 9.2, 61.6)
$gray-4: #8B919E, // hsl(221, 8.9, 58.2)
$gray-5: #707888, // hsl(220, 9.7, 48.6)
$gray-6: $nord3, // hsl(220, 12.6, 42.2)
$gray-7: $nord2, // hsl(220, 16.5, 35.7)
$gray-8: $nord1, // hsl(220, 16.8, 31.6)
$gray-9: $nord0, // hsl(222, 16.3, 27.6)
$blue-0: #e3eaf1, // hsl(210, 33.3, 91.8)
$blue-1: #d5e0ea, // hsl(209, 33.3, 87.6)
$blue-2: #b9cbdd, // hsl(210, 34.6, 79.6)
$blue-3: #9db6cf, // hsl(210, 34.2, 71.4)
$blue-4: $nord9, // hsl(210, 34, 63.1)
$blue-5: $nord10, // hsl(213, 32, 52.2)
$blue-6: #647d96, // hsl(210, 20, 49 )
$blue-7: #48596b, // hsl(211, 19.6, 35.1)
$blue-8: #394856, // hsl(209, 20.3, 28 )
$blue-9: #2b3640, // hsl(209, 19.6, 21 )
$green-0: #dae5d1, // hsl(93, 27.8, 85.9)
$green-1: #d1dfc6, // hsl(94, 28.1, 82.5)
$green-2: #bfd2af, // hsl(93, 28, 75.5)
$green-3: #b5cba3, // hsl(93, 27.8, 71.8)
$green-4: $nord14, // hsl(92, 27.8, 64.7)
$green-5: #93ab7e, // hsl(92, 21.1, 58.2)
$green-6: #829870, // hsl(93, 16.3, 51.8)
$green-7: #728562, // hsl(93, 15.2, 45.3)
$green-8: #525f46, // hsl(91, 15.2, 32.4)
$green-9: #31392a, // hsl(92, 15.2, 19.4)
$yellow-0: #f7ead1, // hsl(39, 70.4, 89.4)
$yellow-1: #f5e5c5, // hsl(40, 70.6, 86.7)
$yellow-2: #f1dbae, // hsl(40, 70.5, 81.4)
$yellow-3: #efd5a2, // hsl(40, 70.6, 78.6)
$yellow-4: $nord13, // hsl(40, 70.6, 73.3)
$yellow-5: #d4b77d, // hsl(40, 50.3, 66.1)
$yellow-6: #bca26f, // hsl(40, 36.5, 58.6)
$yellow-7: #8d7a53, // hsl(40, 25.9, 43.9)
$yellow-8: #766646, // hsl(40, 25.5, 36.9)
$yellow-9: #463d2a, // hsl(41, 25, 22 )
$red-0: #ecd0d2, // hsl(356, 42.4, 87.1)
$red-1: #dfb0b5, // hsl(354, 42.3, 78.2)
$red-2: #d29097, // hsl(354, 42.3, 69.4)
$red-3: #c57179, // hsl(354, 42, 60.8)
$red-4: $nord11, // hsl(354, 42.3, 56.5)
$red-5: #994e55, // hsl(354, 32.5, 45.3)
$red-6: #86444a, // hsl(355, 32.7, 39.6)
$red-7: #733a40, // hsl(354, 32.9, 33.9)
$red-8: #603135, // hsl(355, 32.4, 28.4)
$red-9: #391d20 // hsl(354, 32.6, 16.9)
);
@use "settings/color-scale" as scale;
@forward "settings/color-vars" with (
$fg-default: scale.$gray-0,
$fg-muted: scale.$gray-2,
$fg-subtle: scale.$gray-3,
$fg-onEmphasis: scale.$white,
$canvas-default: scale.$gray-9,
$canvas-overlay: scale.$gray-8,
$canvas-inset: scale.$black,
$canvas-subtle: scale.$gray-7,
$border-default: scale.$gray-6,
$border-muted: scale.$gray-7,
$border-subtle: scale.$gray-8,
$neutral-emphasisPlus: scale.$gray-6,
$neutral-emphasis: scale.$gray-5,
$neutral-muted: color.change(scale.$gray-4, $alpha: 0.4),
$neutral-subtle: color.change(scale.$gray-4, $alpha: 0.1),
$accent-fg: scale.$blue-3,
$accent-emphasis: scale.$blue-5,
$accent-muted: color.change(scale.$blue-4, $alpha: 0.4),
$accent-subtle: color.change(scale.$blue-4, $alpha: 0.15),
$success-fg: scale.$green-3,
$success-emphasis: scale.$green-6,
$success-muted: color.change(scale.$green-4, $alpha: 0.35),
$success-subtle: color.change(scale.$green-4, $alpha: 0.15),
$warning-fg: scale.$yellow-3,
$warning-emphasis: scale.$yellow-6,
$warning-muted: color.change(scale.$yellow-5, $alpha: 0.35),
$warning-subtle: color.change(scale.$yellow-5, $alpha: 0.15),
$danger-fg: scale.$red-3,
$danger-emphasis: scale.$red-4,
$danger-muted: color.change(scale.$red-4, $alpha: 0.35),
$danger-subtle: color.change(scale.$red-4, $alpha: 0.15)
);
@forward "settings/config" with (
$darkMode: true
);
@use "general";
@use "components";