design-system/colours.scss
// 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;
}