atlantafx/styles/src/nord-dark.scss

// 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";