anephenix/ui

View on GitHub
design-system/colours.scss

Summary

Maintainability
Test Coverage
// Colours used in the Design Language

@use "sass:map";

// Main colour palette;
$primary-colour: #fd5548;
$secondary-colour: #fd9448;
$tertiary-colour: #ffc61a;

// Green colour palette
$green-one-colour: #69b65c;
$green-two-colour: #95e388;
$green-three-colour: #c5fdbb;

// Blue colour palette
$blue-one-colour: #279ae1;
$blue-two-colour: #7bccff;
$blue-three-colour: #c8eaff;

$light: #fff;
$dark: #111;
$form-field-border-colour: #cfcfcf;
$form-field-colour: #414141;
$form-field-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);

$foreground: $dark;
$background: $light;

@media screen and (prefers-color-scheme: dark) {
    $foreground: $light;
    $background: $dark;
}

$theme-colours: (
    'primary': $primary-colour,
    'secondary': $secondary-colour,
    'tertiary': $tertiary-colour,
    'green-one': $green-one-colour,
    'green-two': $green-two-colour,
    'green-three': $green-three-colour,
    'blue-one': $blue-one-colour,
    'blue-two': $blue-two-colour,
    'blue-three': $blue-three-colour,
);

// Code / Terminal title bar colours
$window-title-bar-close: rgb(255, 95, 87);
$window-title-bar-minimize: rgb(254, 188, 47);
$window-title-bar-maximize: rgb(40, 200, 64);

:export {
    primaryColour: $primary-colour;
    secondaryColour: $secondary-colour;
    tertiaryColour: $tertiary-colour;

    // Green colour palette
    greenOneColour: $green-one-colour;
    greenTwoColour: $green-two-colour;
    greenThreeColour: $green-three-colour;

    // Blue colour palette
    blueOneColour: $blue-one-colour;
    blueTwoColour: $blue-two-colour;
    blueThreeColour: $blue-three-colour;
}