From 1b5e088d7490647c560b0fd508406af37fd46e64 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sat, 5 Mar 2022 09:08:53 +0100
Subject: [PATCH] chore(front/global css): remove old scss files and add new
 and updated _vars.scss

---
 assets/sass/_vars.scss     |  33 --
 assets/sass/app.scss       |  18 -
 assets/sass/layout.scss    | 977 -------------------------------------
 src/assets/scss/_vars.scss | 117 +++++
 4 files changed, 117 insertions(+), 1028 deletions(-)
 delete mode 100644 assets/sass/_vars.scss
 delete mode 100644 assets/sass/app.scss
 delete mode 100644 assets/sass/layout.scss
 create mode 100644 src/assets/scss/_vars.scss

diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
deleted file mode 100644
index 19e7e2f..0000000
--- a/assets/sass/_vars.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$primary: darken(#242b33, 2%);
-$primaryForeground: #f0f0f0;
-$secondary: lighten(#842cff, 10%);
-$secondaryForeground: $primaryForeground;
-
-$backgroundColor: darken($primary, 4%);
-$defaultTextColor: #ffffff;
-
-$headerBackground: transparent;
-$headerContainer: true;
-$footerBackground: transparent;
-$panelBackground: darken($backgroundColor, 3.2%);
-$inputBackground: darken($panelBackground, 4%);
-
-$info: #4499ff;
-$infoText: darken($info, 42%);
-$infoColor: desaturate($infoText, 50%);
-
-$success: #55ff55;
-$successText: darken($success, 45%);
-$successColor: desaturate($successText, 50%);
-
-$warning: #ffcc00;
-$warningText: darken($warning, 30%);
-$warningColor: desaturate($warningText, 50%);
-
-$error: #ff0000;
-$errorText: darken($error, 30%);
-$errorColor: desaturate($errorText, 50%);
-
-// Responsivity
-$mobileThreshold: 850px;
-$desktopThreshold: 940px;
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
deleted file mode 100644
index 2721699..0000000
--- a/assets/sass/app.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import "layout";
-@import "fm";
-
-.file-upload-table {
-	@media (max-width: 550px) {
-		> thead > tr > th:nth-child(3),
-		> tbody > tr > td:nth-child(3) {
-			display: none;
-		}
-	}
-
-	@media (max-width: 785px) {
-		> thead > tr > th:nth-child(4),
-		> tbody > tr > td:nth-child(4) {
-			display: none;
-		}
-	}
-}
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
deleted file mode 100644
index e489bdf..0000000
--- a/assets/sass/layout.scss
+++ /dev/null
@@ -1,977 +0,0 @@
-@import "vars";
-@import 'fonts';
-@import "responsivity_tools";
-
-* {
-	box-sizing: border-box;
-}
-
-html, body {
-	height: 100%;
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-
-	margin: 0;
-	font-family: "Nunito Sans", sans-serif;
-	font-size: 16px;
-
-	color: $defaultTextColor;
-	background-color: $backgroundColor;
-}
-
-@mixin tip {
-	position: relative;
-
-	.tip {
-		visibility: hidden;
-		position: absolute;
-		z-index: 10000;
-		pointer-events: none;
-		display: block;
-		width: max-content;
-		height: 30px;
-		padding: 4px 8px;
-		line-height: 22px;
-		top: calc(100% + 8px);
-		left: 50%;
-		transform: translateX(-50%);
-
-		text-align: center;
-		font-size: 18px;
-		color: $defaultTextColor;
-		opacity: 0;
-		transition: opacity ease-out 100ms, visibility step-end 150ms;
-		transition-delay: 0ms;
-		background-color: #000;
-		border-radius: 5px;
-
-		text-transform: initial;
-		font-weight: initial;
-
-		&.top {
-			top: auto;
-			bottom: calc(100% + 8px);
-		}
-	}
-
-	&:hover, &:active {
-		.tip {
-			visibility: visible;
-			opacity: 1;
-			transition: opacity ease-out 100ms;
-			transition-delay: 150ms;
-		}
-	}
-}
-
-body > header {
-	z-index: 50;
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: space-between;
-	align-items: center;
-
-	$headerHeight: 64px;
-	height: $headerHeight;
-	line-height: $headerHeight;
-
-	background: $headerBackground;
-
-	@if $headerContainer {
-		@include container;
-	}
-
-	@media (max-width: $mobileThreshold) {
-		padding: 0;
-	}
-
-	.logo {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-
-		padding: 0 16px 0 8px;
-		font-size: 24px;
-		color: $defaultTextColor;
-
-		&:hover {
-			color: lighten($defaultTextColor, 10%);
-		}
-
-		img {
-			width: initial;
-			height: calc(#{$headerHeight} - 16px);
-			margin-right: 8px;
-			flex-shrink: 0;
-		}
-	}
-
-	nav {
-		> ul {
-			position: fixed;
-			z-index: -1;
-			top: 0;
-			left: 0;
-			height: 100%;
-			transform: translateX(-100%);
-			transition: transform ease-out 150ms;
-
-			display: flex;
-			flex-direction: column;
-			margin: 0;
-			padding: $headerHeight 8px 8px;
-
-			font-size: 20px;
-
-			background: $panelBackground;
-
-			li {
-				position: relative;
-				list-style: none;
-				margin-top: 8px;
-
-				a, button {
-					position: relative;
-					margin: 0;
-
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					height: auto;
-					padding: 8px;
-
-					border-radius: 3px;
-
-					&:hover, &:active {
-						&:not(button) {
-							background-color: rgba(255, 255, 255, 0.07);
-						}
-					}
-
-					.feather {
-						--icon-size: 16px;
-					}
-
-					.tip {
-						position: static;
-						visibility: visible;
-						opacity: 1;
-						display: block;
-						height: auto;
-						margin-left: 8px;
-						padding: 0 0 0 4px;
-						transform: none;
-
-						font-size: 16px;
-						line-height: 16px;
-
-						color: inherit;
-						text-transform: uppercase;
-						font-weight: inherit;
-						background: transparent;
-					}
-
-					&:hover {
-						.tip {
-							visibility: visible;
-							opacity: 1;
-							transition: opacity ease-out 100ms;
-							transition-delay: 150ms;
-						}
-					}
-				}
-
-				button {
-					margin: 0;
-					height: 32px;
-
-					.feather {
-						margin-right: 0;
-					}
-				}
-
-				form {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					padding: 0;
-				}
-
-				&.auth-user {
-					img {
-						width: 48px;
-						height: 48px;
-						border-radius: 3px;
-						margin-right: 8px;
-					}
-				}
-
-				.dropdown {
-					position: initial;
-					display: block;
-					padding-left: 0;
-				}
-			}
-
-			> li:not(:first-child) {
-				border-top: 1px solid transparentize($defaultTextColor, 0.8);
-				padding-top: 8px;
-			}
-
-			&.open {
-				transform: translateX(0%);
-				box-shadow: 0 0 5px darken($panelBackground, 20%);
-			}
-		}
-
-		#menu-button {
-			position: fixed;
-			top: 0;
-			left: 0;
-			display: block;
-			margin: 0;
-			padding: 0 16px;
-			line-height: $headerHeight;
-
-			cursor: pointer;
-			background: transparent;
-			border-radius: 0;
-
-			.feather {
-				--icon-size: 28px;
-				margin: 0 8px;
-			}
-		}
-
-		hr {
-			border: 0;
-			border-bottom: 1px solid $defaultTextColor;
-			opacity: 0.2;
-		}
-	}
-
-	@media (min-width: $mobileThreshold) {
-		flex-direction: row;
-
-		nav {
-			#menu-button {
-				display: none;
-			}
-
-			ul {
-				position: static;
-				flex-direction: row;
-				transform: none;
-				padding: 0;
-				background: transparent;
-
-				li {
-					margin-top: 0;
-					margin-left: 8px;
-
-					&:last-child {
-						a, button, .button {
-							.tip {
-								left: unset;
-								right: 4px;
-								transform: none;
-							}
-						}
-					}
-
-					.dropdown {
-						position: absolute;
-						z-index: -1;
-						top: 100%;
-						right: 0;
-						display: none;
-						padding: 8px;
-
-						white-space: nowrap;
-						background: $panelBackground;
-						border-radius: 0 0 3px 3px;
-
-						box-shadow: 0 2px 2px transparentize(darken($panelBackground, 20%), 0.75);
-						border-top: 4px solid lighten($panelBackground, 5%);
-
-						li {
-							margin-left: 0;
-
-							&:not(:first-child) {
-								margin-top: 8px;
-							}
-						}
-					}
-
-					&:hover .dropdown {
-						display: block;
-					}
-				}
-
-				> li:not(:first-child) {
-					border-top: 0;
-					padding-top: 0;
-				}
-			}
-		}
-	}
-}
-
-body > footer {
-	padding: 8px;
-	margin-top: 8px;
-	text-align: center;
-	background-color: $footerBackground;
-}
-
-main {
-	flex: 1;
-	padding: 8px 0;
-
-	button, .button {
-		@include tip;
-	}
-}
-
-h1 {
-	text-align: center;
-	font-size: 32px;
-
-	& + p {
-		text-align: center;
-		font-size: 20px;
-	}
-}
-
-h1, h2 {
-	font-weight: 100;
-}
-
-h3, h4 {
-	font-weight: 300;
-}
-
-section > h2, .panel > h2 {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	position: relative;
-	text-align: center;
-	margin-top: 4px;
-
-	font-size: 24px;
-	line-height: 1;
-
-	.feather {
-		margin: 0 16px 0 0;
-		opacity: 0.1;
-	}
-
-	&::after {
-		content: "";
-		flex: 1;
-		margin: 0 16px;
-		height: 0;
-		border-bottom: 1px solid $defaultTextColor;
-		opacity: 0.1;
-	}
-}
-
-section > hr, .panel > hr {
-	border: 0;
-	border-bottom: 1px solid $defaultTextColor;
-	opacity: 0.2;
-
-	margin: 8px 32px;
-}
-
-a {
-	color: $secondary;
-	text-decoration: none;
-
-	&:hover {
-		color: lighten($secondary, 30%);
-	}
-
-	.feather.feather-external-link {
-		--icon-size: 16px;
-		margin-left: 4px;
-		margin-top: -3px;
-	}
-}
-
-form {
-	padding: 8px 16px;
-	text-align: center;
-
-	.form-field:not(.hidden) {
-		display: flex;
-		flex-direction: column;
-		margin: 16px auto;
-
-		.control {
-			position: relative;
-			background: $inputBackground;
-			border-radius: 5px;
-		}
-
-		.feather.icon {
-			position: absolute;
-			top: 50%;
-			right: 8px;
-			transform: translateY(-50%);
-			z-index: 0;
-
-			--icon-size: 24px;
-			opacity: 0.75;
-		}
-
-		label {
-			position: absolute;
-			left: 8px;
-			top: 20px;
-			user-select: none;
-			font-size: 16px;
-			opacity: 0.75;
-
-			transition-property: top, font-size;
-			transition-duration: 150ms;
-			transition-timing-function: ease-out;
-
-			cursor: text;
-		}
-
-		[disabled] {
-			opacity: 0.5;
-
-			& ~ label {
-				opacity: 0.5;
-				cursor: default;
-			}
-		}
-
-		input, select, textarea, .input-group {
-			z-index: 1;
-			border: 0;
-			color: $defaultTextColor;
-			background: transparent;
-			font-size: 16px;
-
-			&:focus, &:not([value=""]), &[type="file"] {
-				~ label {
-					top: 8px;
-					font-size: 14px;
-				}
-			}
-		}
-
-		input, select, textarea, .form-display {
-			display: block;
-			padding: 32px 8px 8px 8px;
-			width: 100%;
-			height: 60px;
-		}
-
-		select {
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			appearance: none;
-
-			&::-ms-expand {
-				display: none;
-			}
-
-			& + .feather {
-				position: absolute;
-				pointer-events: none;
-				right: 8px;
-				top: 30px;
-
-				transition: transform 150ms ease-out;
-			}
-
-			// Temporary
-			&:focus + .feather {
-				transform: rotateX(180deg);
-			}
-		}
-
-		textarea {
-			resize: vertical;
-			min-height: 100px;
-			font-family: inherit;
-		}
-
-		input[type=color] {
-			height: calc(32px + 8px + 32px);
-		}
-
-		&.inline {
-			display: flex;
-			flex-direction: row;
-
-			.control {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				flex-grow: 1;
-
-				input[type=checkbox] {
-					width: min-content;
-					height: min-content;
-					margin: 8px;
-					text-align: left;
-
-					& ~ label {
-						position: static;
-						flex-grow: 1;
-						display: inline;
-						padding: 8px;
-
-						font-size: 16px;
-						text-align: left;
-					}
-				}
-			}
-		}
-
-		.input-group {
-			display: flex;
-			flex-grow: 1;
-			flex-direction: row;
-
-			div {
-				position: relative;
-				flex: 1;
-
-				input {
-					width: 100%;
-					border: 0;
-					background: transparent;
-				}
-			}
-		}
-	}
-
-	.inline-fields {
-		display: flex;
-		flex-direction: row;
-		align-items: start;
-		margin: 16px auto;
-
-		.form-field {
-			flex: 1;
-			margin: 0;
-		}
-
-		> :not(.form-field) {
-			padding: 32px 8px 8px 8px;
-		}
-
-		+ {
-			.error, .hint {
-				margin-top: -16px;
-				margin-bottom: 16px;
-			}
-		}
-	}
-
-	.form-field, .inline-fields + {
-		.error, .hint {
-			padding: 2px;
-			text-align: left;
-			font-size: 14px;
-
-			.feather {
-				--icon-size: 14px;
-			}
-		}
-
-		.error {
-			color: $error;
-		}
-	}
-}
-
-button, .button {
-	display: inline-flex;
-	margin: 8px;
-	padding: 12px 16px;
-	border: 0;
-	border-radius: 5px;
-	cursor: pointer;
-
-	text-transform: uppercase;
-	font-size: 16px;
-	font-weight: bolder;
-
-	line-height: 16px;
-
-	.feather {
-		--icon-size: 16px;
-		margin-right: 8px;
-	}
-
-	.feather.last {
-		margin-right: 0;
-		margin-left: 8px;
-	}
-
-	&, &.primary {
-		color: $primaryForeground;
-		background-color: darken($secondary, 10%);
-
-		&:hover {
-			background-color: $secondary;
-		}
-	}
-
-	&.info {
-		background-color: $infoColor;
-	}
-
-	&.success {
-		background-color: $successColor;
-	}
-
-	&.warning {
-		background-color: $warningColor;
-
-		&:hover {
-			background-color: lighten($warningColor, 10%);
-		}
-	}
-
-	&.error, &.danger {
-		background-color: $errorColor;
-
-		&:hover {
-			background-color: lighten($errorColor, 10%);
-		}
-	}
-
-	&.transparent {
-		background-color: transparent;
-	}
-
-	&:hover {
-		color: $primaryForeground;
-	}
-}
-
-
-// ---
-// --- Tables
-// ---
-td.actions {
-	> * {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-
-		form {
-			padding: 0;
-			display: inline;
-		}
-
-		button, .button {
-			margin: 0;
-			padding: 8px;
-
-			.feather {
-				margin-right: 0;
-			}
-		}
-
-		> *:not(:first-child) {
-			margin-left: 8px;
-		}
-	}
-}
-
-.data-table {
-	width: 100%;
-	text-align: left;
-	border-collapse: collapse;
-
-	th, td {
-		padding: 8px;
-	}
-
-	th {
-		border-bottom: 1px solid #39434a;
-		white-space: nowrap;
-	}
-
-	tr:nth-child(even) {
-		background-color: rgba(255, 255, 255, 0.03);
-	}
-
-	tr:hover {
-		background-color: rgba(255, 255, 255, 0.09);
-	}
-
-	thead tr:hover {
-		background-color: transparent;
-	}
-
-	th.shrink-col {
-		width: 0;
-	}
-}
-
-
-// ---
-// --- Breadcrumb widget
-// ---
-.breadcrumb {
-	list-style: none;
-	display: flex;
-	flex-direction: row;
-	margin: 0;
-	padding: 8px;
-
-	> *:not(:first-child)::before {
-		content: '›';
-		padding: 0 8px;
-	}
-}
-
-
-// ---
-// --- Layout helpers
-// ---
-.center {
-	text-align: center;
-}
-
-.panel {
-	position: relative;
-	margin: 16px 0 48px;
-	padding: 8px;
-	background-color: $panelBackground;
-	border-radius: 5px;
-
-	p {
-		margin: 16px 8px;
-	}
-
-	> .feather:first-child {
-		position: absolute;
-		--icon-size: 24px;
-		opacity: 0.1;
-		top: 8px;
-		left: 8px;
-	}
-}
-
-.sub-panel {
-	margin: 32px 0;
-	padding: 1px 16px;
-	border: 2px solid lighten($panelBackground, 4%);
-	border-radius: 5px;
-
-	form > & {
-		margin: 32px -18px;
-	}
-}
-
-
-// ---
-// --- Feather
-// ---
-.feather {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-
-	flex-shrink: 0;
-	width: var(--icon-size);
-	height: var(--icon-size);
-
-	--icon-size: 16px;
-	font-size: var(--icon-size);
-	stroke: currentColor;
-	stroke-width: 2;
-	stroke-linecap: square;
-	stroke-linejoin: miter;
-	fill: none;
-	vertical-align: middle;
-
-	h1 > &, h2 > &, h3 > & {
-		--icon-size: 24px;
-	}
-}
-
-// ---
-// --- Helper classes
-// ---
-.message {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	padding: 8px 16px;
-
-	border-radius: 5px;
-
-	.feather {
-		--icon-size: 24px;
-		margin-right: 8px;
-	}
-
-	&:not(&-discreet) {
-		background-color: rgba(255, 255, 255, 0.33);
-
-		&[data-type=info], &[data-type=question] {
-			background-color: $infoColor;
-		}
-
-		&[data-type=success] {
-			background-color: $successColor;
-		}
-
-		&[data-type=warning] {
-			background-color: $warningColor;
-		}
-
-		&[data-type=error] {
-			background-color: $errorColor;
-		}
-	}
-
-	&-discreet {
-		color: mix($panelBackground, #fff, 35%);
-
-		.feather {
-			--icon-size: 20px;
-		}
-	}
-}
-
-.messages .message:not(:last-child) {
-	margin-bottom: 8px;
-}
-
-.container > .messages:first-child {
-	margin-top: 16px;
-}
-
-.copyable-text {
-	display: flex;
-	flex-direction: row;
-	margin: 8px;
-
-	background-color: darken($backgroundColor, 2%);
-	border-radius: 5px;
-	overflow: hidden;
-
-	.title {
-		padding: 8px;
-	}
-
-	.content {
-		width: 0;
-		flex-grow: 1;
-		overflow: hidden;
-		white-space: nowrap;
-		padding: 8px;
-	}
-
-	.copy-button {
-		margin: 0;
-		padding: 0;
-		border-radius: 0;
-
-		.feather {
-			--icon-size: 20px;
-			margin: 8px;
-		}
-	}
-}
-
-.hidden {
-	display: none;
-}
-
-.progress-bar {
-	position: relative;
-	display: block;
-	margin: 8px;
-	padding: 4px;
-	background: #fff1;
-	border-radius: 5px;
-	overflow: hidden;
-	text-align: center;
-
-	.content {
-		position: relative;
-	}
-
-	&::before {
-		content: "";
-		display: block;
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: var(--progress);
-		height: 100%;
-		transition: width ease-out 150ms;
-
-		background: $secondary;
-	}
-}
-
-.table-col-grow {
-	width: 100%;
-}
-
-.table-col-grow-cell {
-	> * {
-		display: flex;
-		flex-direction: row;
-
-		> * {
-			width: 0;
-			flex-grow: 1;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		* {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-.pagination {
-	ul {
-		display: flex;
-		flex-direction: row;
-		list-style: none;
-		padding: 8px;
-
-		justify-content: center;
-
-		li {
-			a, &.active, &.ellipsis {
-				display: block;
-				min-width: 40px;
-				height: 40px;
-				padding: 4px;
-
-				line-height: 32px;
-				text-align:center;
-
-				&:hover:not(.active):not(.ellipsis) {
-					background-color: #fff5;
-				}
-			}
-		}
-	}
-}
diff --git a/src/assets/scss/_vars.scss b/src/assets/scss/_vars.scss
new file mode 100644
index 0000000..0e9546f
--- /dev/null
+++ b/src/assets/scss/_vars.scss
@@ -0,0 +1,117 @@
+//
+// --- 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;
+