atlantafx/styles/src/nord-dark.scss
2023-02-08 19:17:03 +04:00

183 lines
5.2 KiB
SCSS
Executable File

// SPDX-License-Identifier: MIT
@use "sass:color";
@use "settings/utils" as utils;
// 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 (
$dark: #232730,
$light: #fdfdfe,
$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: #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: #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: #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: #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;
@forward "settings/color-vars" with (
$fg-default: scale.$base-0,
$fg-muted: scale.$base-5,
$fg-subtle: scale.$base-6,
$fg-onEmphasis: scale.$light,
$canvas-default: scale.$base-9,
$canvas-overlay: scale.$base-9,
$canvas-inset: scale.$dark,
$canvas-subtle: scale.$base-8,
$border-default: utils.flattenColor(scale.$base-9, color.change(scale.$base-6, $alpha: 0.65)),
$border-muted: scale.$base-7,
$border-subtle: scale.$base-8,
$shadow-default: scale.$dark,
$neutral-emphasisPlus: scale.$base-6,
$neutral-emphasis: scale.$base-7,
$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: 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: 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: 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: 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 (
$darkMode: true,
$border-radius: 1,
$opacity-disabled: 0.55,
$popup-radius: 0
);
@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/pagination" as pagination-* with (
$button-radius: 1
);
@forward "components/slider" as slider-* with (
$thumb-size: (
"small-h": 8px, "medium-h": 10px, "large-h": 14px,
"small-w": 4px, "medium-w": 4px, "large-w": 4px
),
$track-size: ("small": 2px, "medium": 4px, "large": 12px),
$thumb-radius: 1,
$track-radius: 1
);
@forward "components/toolbar" as toolbar-* with (
$color-bg-selected: -color-base-7
);
@forward "components/toggle-switch" as toggle-switch-* with (
$thumb-radius: 1,
$thumb-area-radius: 1,
$thumb-padding: 0.8em,
$thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
$thumb-border-width: 3px
);
@use "components";