118 lines
2.9 KiB
SCSS
118 lines
2.9 KiB
SCSS
//
|
|
// --- Color palette ---
|
|
//
|
|
$onLight: #222;
|
|
$onDark: #eee;
|
|
|
|
|
|
// Primary
|
|
$primary: darken(#842cff, 17.5%);
|
|
$primaryLight: lighten($primary, 10%);
|
|
$onPrimary: $onDark;
|
|
$primaryOnBackground: $primary;
|
|
$primaryLightOnBackground: $primaryLight;
|
|
$primaryOnSurface: $primary;
|
|
$primaryLightOnSurface: $primaryLight;
|
|
|
|
$primaryDarkMode: $primary;
|
|
$primaryLightDarkMode: lighten($primaryDarkMode, 23%);
|
|
$onPrimaryDarkMode: $onDark;
|
|
$primaryOnBackgroundDarkMode: lighten($primaryDarkMode, 20%);
|
|
$primaryLightOnBackgroundDarkMode: $primaryLightDarkMode;
|
|
$primaryOnSurfaceDarkMode: lighten($primaryDarkMode, 29%);
|
|
$primaryLightOnSurfaceDarkMode: lighten($primaryOnSurfaceDarkMode, 15%);
|
|
|
|
|
|
// Secondary
|
|
$secondary: #f21170;
|
|
$onSecondary: $onLight;
|
|
$secondaryDarkMode: $secondary;
|
|
$onSecondaryDarkMode: $onSecondary;
|
|
|
|
|
|
// Background
|
|
$backgroundBase: #eee;
|
|
$background: mix($backgroundBase, $primary, 98%);
|
|
$onBackground: $onLight;
|
|
$backgroundBaseDarkMode: #222;
|
|
$backgroundDarkMode: mix($backgroundBaseDarkMode, $primaryDarkMode, 98%);
|
|
$onBackgroundDarkMode: $onDark;
|
|
|
|
|
|
// Surface
|
|
$surface: lighten($background, 6%);
|
|
$onSurface: $onLight;
|
|
$surfaceDarkMode: darken($backgroundDarkMode, 4.5%);
|
|
$onSurfaceDarkMode: $onDark;
|
|
|
|
// Subsurface
|
|
$subsurface: darken($surface, 3%);
|
|
$onSubsurface: $onLight;
|
|
$subsurfaceDarkMode: darken($surfaceDarkMode, 3%);
|
|
$onSubsurfaceDarkMode: $onDark;
|
|
|
|
|
|
// Input
|
|
$input: darken($surface, 5%);
|
|
$onInput: $onLight;
|
|
$inputDarkMode: darken($surfaceDarkMode, 5%);
|
|
$onInputDarkMode: $onDark;
|
|
|
|
|
|
//
|
|
// --- Layout ---
|
|
//
|
|
$header: $surface;
|
|
$headerDarkMode: $surfaceDarkMode;
|
|
$headerContainer: true;
|
|
$headerHeight: 72px;
|
|
$footer: transparent;
|
|
|
|
|
|
//
|
|
// --- State palette ---
|
|
//
|
|
$info: #4499ff;
|
|
$onInfo: darken($info, 50%);
|
|
$infoOnBackground: darken($info, 20%);
|
|
$infoOnSurface: darken($info, 20%);
|
|
$infoDarkMode: darken($info, 40%);
|
|
$onInfoDarkMode: lighten($info, 20%);
|
|
$infoOnBackgroundDarkMode: $info;
|
|
$infoOnSurfaceDarkMode: $info;
|
|
|
|
$success: #55ff55;
|
|
$onSuccess: darken($success, 45%);
|
|
$successOnBackground: darken($success, 45%);
|
|
$successOnSurface: darken($success, 45%);
|
|
$successDarkMode: darken($success, 45%);
|
|
$onSuccessDarkMode: lighten($success, 20%);
|
|
$successOnBackgroundDarkMode: $success;
|
|
$successOnSurfaceDarkMode: $success;
|
|
|
|
$warning: #ffcc00;
|
|
$onWarning: darken($warning, 30%);
|
|
$warningOnBackground: darken($warning, 25%);
|
|
$warningOnSurface: darken($warning, 25%);
|
|
$warningDarkMode: darken($warning, 30%);
|
|
$onWarningDarkMode: lighten($warning, 20%);
|
|
$warningOnBackgroundDarkMode: $warning;
|
|
$warningOnSurfaceDarkMode: $warning;
|
|
|
|
$error: #ff0000;
|
|
$onError: darken($error, 40%);
|
|
$errorOnBackground: darken($error, 10%);
|
|
$errorOnSurface: darken($error, 10%);
|
|
$errorDarkMode: darken($error, 30%);
|
|
$onErrorDarkMode: lighten($error, 20%);
|
|
$errorOnBackgroundDarkMode: lighten($error, 15%);
|
|
$errorOnSurfaceDarkMode: lighten($error, 3%);
|
|
|
|
|
|
//
|
|
// --- Responsivity ---
|
|
//
|
|
$mobileThreshold: 850px;
|
|
$desktopThreshold: 940px;
|
|
|