Fix for darken/lighten vars and new global colours vars to unify design

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

8 files changed, 116 insertions, 93 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index c1fdeb1fbb1..a125331091e 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -250,7 +250,7 @@ kbd {
 				box-sizing: border-box;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				color: var(--color-main-text);
+				color: var(--color-error);
 				opacity: .57;
 				flex: 1 1 0px;
 				z-index: 100; /* above the bullet to allow click*/
@@ -553,9 +553,6 @@ kbd {
 	.error {
 		color: var(--color-error);
 	}
-	.app-navigation-separator {
-		border-bottom: 1px solid nc-lighten($color-main-text, 86%);
-	}
 
 	.app-navigation-entry-utils ul,
 	.app-navigation-entry-menu ul {
@@ -704,7 +701,7 @@ kbd {
 .section {
 	display: block;
 	padding: 30px;
-	color: nc-lighten($color-main-text, 33%);
+	color: var(--color-text-lighter);
 	margin-bottom: 24px;
 	&.hidden {
 		display: none !important;
@@ -745,18 +742,18 @@ kbd {
 		float: left;
 		padding: 5px;
 		cursor: pointer;
-		color: nc-lighten($color-main-text, 33%);
+		color: var(--color-text-lighter);
 		margin-bottom: 1px;
 		a {
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 			margin-bottom: 1px;
 		}
 		&.selected {
 			font-weight: 600;
-			border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+			border-bottom: 1px solid var(--color-border);
 		}
 		&:hover {
-			border-bottom: 1px solid nc-lighten($color-main-text, 20%);
+			border-bottom: 1px solid var(--color-border);
 		}
 		&.selected, &:hover {
 			margin-bottom: 0px;
@@ -1013,7 +1010,7 @@ $popovericon-size: 16px;
 /* CONTENT LIST ------------------------------------------------------------- */
 .app-content-list {
 	width: 300px;
-	border-right: 1px solid nc-darken($color-main-background, 8%);
+	border-right: 1px solid var(--color-border);
 	display: flex;
 	flex-direction: column;
 	transition: transform 250ms ease-in-out;
@@ -1022,7 +1019,7 @@ $popovericon-size: 16px;
 	.app-content-list-item {
 		position: relative;
 		height: 68px;
-		border-top: 1px solid nc-darken($color-main-background, 8%);
+		border-top: 1px solid var(--color-border);
 		cursor: pointer;
 		padding: 10px 7px;
 		display: flex;
@@ -1061,7 +1058,7 @@ $popovericon-size: 16px;
 
 		&:hover, &:focus,
 		&.active {
-			background-color: nc-darken($color-main-background, 6%);
+			background-color: var(--color-background-dark);
 		}
 
 		.app-content-list-item-checkbox.checkbox + label,
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index f6f2c4d1c44..00725f94e1e 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -5,13 +5,21 @@
 :root {
 	--color-main-text: $color-main-text;
 	--color-main-background: $color-main-background;
+
+	--color-background-dark: $color-background-dark;
+	--color-background-darker: $color-background-darker;
+
 	--color-primary: $color-primary;
 	--color-primary-text: $color-primary-text;
+	--color-primary-text-dark: $color-primary-text-dark;
+	--color-primary-element: $color-primary-element;
+
 	--color-error: $color-error;
 	--color-warning: $color-warning;
 	--color-success: $color-success;
-	--color-primary-element: $color-primary-element;
 
+	--color-text-maxcontrast: $color-text-maxcontrast;
+	--color-text-lighter: $color-text-lighter;
 	--color-text-details: $color-text-details;
 
 	--image-logo: $image-logo;
@@ -19,8 +27,11 @@
 
 	--color-loading: $color-loading;
 	--color-loading-dark: $color-loading-dark;
+
 	--color-box-shadow: $color-box-shadow;
+
 	--color-border: $color-border;
+	--color-border-dark: $color-border-dark;
 	--border-radius: $border-radius;
 }
 
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index c32094c68bb..887b32298c6 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -43,8 +43,8 @@ div[contenteditable=true],
 	padding: 7px 6px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
-	color: nc-lighten($color-main-text, 33%);
-	border: 1px solid nc-darken($color-main-background, 14%);
+	color: var(--color-text-lighter);
+	border: 1px solid var(--color-border-dark);
 	outline: none;
 	border-radius: var(--border-radius);
 	cursor: text;
@@ -62,7 +62,7 @@ div[contenteditable=true],
 		}
 	}
 	&:disabled {
-		background-color: nc-darken($color-main-background, 8%);
+		background-color: var(--color-background-dark);
 		color: rgba(var(--color-main-text), 0.4);
 		cursor: default;
 		opacity: 0.5;
@@ -91,7 +91,7 @@ div[contenteditable=true],
 		}
 		&:disabled {
 			background-color: rgba(var(--color-primary-element), .7);
-			color: nc-lighten($color-main-text, 73%);
+			color: var(--color-primary-text-dark);
 		}
 	}
 }
@@ -101,13 +101,13 @@ div[contenteditable=false] {
 	padding: 7px 6px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
-	color: nc-lighten($color-main-text, 33%);
-	border: 1px solid nc-darken($color-main-background, 14%);
+	color: var(--color-text-lighter);
+	border: 1px solid var(--color-background-darker);
 	outline: none;
 	border-radius: var(--border-radius);
 	cursor: text;
 
-	background-color: nc-darken($color-main-background, 8%);
+	background-color: var(--color-background-dark);
 	color: rgba(var(--color-main-text), 0.4);
 	cursor: default;
 	opacity: 0.5;
@@ -155,7 +155,7 @@ input[type='reset'] {
 	min-height: 34px;
 	cursor: pointer;
 	box-sizing: border-box;
-	background-color: nc-darken($color-main-background, 3%);
+	background-color: var(--color-background-dark);
 }
 
 /* Buttons */
@@ -182,7 +182,7 @@ button, .button {
 }
 
 textarea, div[contenteditable=true] {
-	color: nc-lighten($color-main-text, 33%);
+	color: var(--color-text-lighter);
 	cursor: text;
 	font-family: inherit;
 	height: auto;
@@ -190,14 +190,14 @@ textarea, div[contenteditable=true] {
 		&:active,
 		&:hover,
 		&:focus {
-			border-color: nc-darken($color-main-background, 14%) !important;
+			border-color: var(--color-background-darker) !important;
 			background-color: var(--color-main-background) !important;
 		}
 	}
 }
 
 div[contenteditable=false] {
-	color: nc-lighten($color-main-text, 33%);
+	color: var(--color-text-lighter);
 	cursor: text;
 	font-family: inherit;
 	height: auto;
@@ -245,7 +245,7 @@ input {
 					border-color: var(--color-primary-element) !important;
 					border-radius: var(--border-radius) !important;
 					&:disabled {
-						border-color: nc-darken($color-main-background, 14%) !important;
+						border-color: var(--color-background-darker) !important;
 					}
 				}
 			}
@@ -347,8 +347,9 @@ input {
 			}
 		}
 
-		/* We do not use the nc-darken function as this si not supposed to be changed */
-		--color-checkbox-radio-white: #fff;
+		/* We do not use the nc-darken function as this is not supposed to be changed */
+		$color-checkbox-radio-white: #fff;
+		--color-checkbox-radio-white: $color-checkbox-radio-white;
 		&.radio--white,
 		&.checkbox--white {
 			+ label:before,
@@ -395,7 +396,7 @@ input {
 	margin-top: -2px;
 	background-color: var(--color-main-background);
 	&.select2-drop-active {
-		border-color: nc-darken($color-main-background, 14%);
+		border-color: var(--color-border-dark);
 	}
 	.avatar {
 		display: inline-block;
@@ -430,15 +431,15 @@ input {
 			padding: 12px;
 			background-color: transparent;
 			cursor: pointer;
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 		}
 		.select2-result {
 			&.select2-selected {
-				background-color: nc-darken($color-main-background, 3%);
+				background-color: var(--color-background-dark);
 			}
 		}
 		.select2-highlighted {
-				background-color: nc-darken($color-main-background, 3%);
+				background-color: var(--color-background-dark);
 				color: var(--color-main-text);
 		}
 	}
@@ -457,10 +458,10 @@ input {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: var(--color-main-background);
-		color: nc-lighten($color-main-text, 33%);
+		color: var(--color-text-lighter);
 		box-sizing: content-box;
 		border-radius: var(--border-radius);
-		border: 1px solid nc-darken($color-main-background, 14%);
+		border: 1px solid var(--color-border-dark);
 		margin: 0;
 		padding: 2px 0;
 		min-height: auto;
@@ -473,8 +474,8 @@ input {
 			& {
 				background-image: none;
 				background-color: var(--color-main-background);
-				color: nc-lighten($color-main-text, 33%);
-				border: 1px solid nc-darken($color-main-background, 14%);
+				color: var(--color-text-lighter);
+				border: 1px solid var(--color-border-dark);
 			}
 			.select2-search-choice-close {
 				display: none;
@@ -502,10 +503,10 @@ input {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background: var(--color-main-background);
-		color: nc-lighten($color-main-text, 33%);
+		color: var(--color-text-lighter);
 		box-sizing: content-box;
 		border-radius: var(--border-radius);
-		border: 1px solid nc-darken($color-main-background, 14%);
+		border: 1px solid var(--color-border-dark);
 		margin: 0;
 		padding: 2px 0;
 		padding-left: 6px;
@@ -514,8 +515,8 @@ input {
 			line-height: 20px;
 			padding-left: 5px;
 			background-image: none;
-			background-color: nc-darken($color-main-background, 3%);
-			border-color: nc-darken($color-main-background, 3%);
+			background-color: var(--color-background-dark);
+			border-color: var(--color-background-dark);
 			.select2-search-choice-close {
 				display: none;
 			}
@@ -557,8 +558,8 @@ input {
 			padding-left: 5px;
 			background-image: none;
 			background-color: var(--color-main-background);
-			color: nc-lighten($color-main-text, 33%);
-			border: 1px solid nc-darken($color-main-background, 14%);
+			color: var(--color-text-lighter);
+			border: 1px solid var(--color-border-dark);
 			display: inline-flex;
 			align-items: center;
 			.close {
@@ -574,7 +575,7 @@ input {
 			display: list-item;
 			background-color: transparent;
 			cursor: pointer;
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 			a {
 				white-space: nowrap;
 				overflow: hidden;
@@ -610,7 +611,7 @@ input {
 				color: var(--color-main-text);
 			}
 			&.active > a {
-				background-color: nc-darken($color-main-background, 3%);
+				background-color: var(--color-background-dark);
 				color: var(--color-main-text);
 				&::before {
 					visibility: visible;
@@ -638,7 +639,7 @@ input {
     }
     &.multiselect--disabled,
     &.multiselect--disabled .multiselect__single {
-        background-color: nc-darken($color-main-background, 8%) !important;
+        background-color: var(--color-background-dark) !important;
     }
     .multiselect__tags {
 		/* space between tags and limit tag */
@@ -647,7 +648,7 @@ input {
         display: flex;
         flex-wrap: nowrap;
         overflow: hidden;
-        border: 1px solid nc-darken($color-main-background, 14%);
+        border: 1px solid var(--color-border-dark);
         cursor: pointer;
         position: relative;
         border-radius: 3px;
@@ -676,8 +677,8 @@ input {
                 line-height: 20px;
                 padding: 1px 5px;
                 background-image: none;
-                color: nc-lighten($color-main-text, 33%);
-                border: 1px solid nc-darken($color-main-background, 14%);
+                color: var(--color-text-lighter);
+                border: 1px solid var(--color-border-dark);
                 display: inline-flex;
                 align-items: center;
 				border-radius: 3px;
@@ -717,7 +718,7 @@ input {
 		.multiselect__limit {
             flex: 0 0 auto;
             line-height: 20px;
-            color: nc-lighten($color-main-text, 33%);
+            color: var(--color-text-lighter);
             display: inline-flex;
             align-items: center;
 			opacity: .7;
@@ -745,7 +746,7 @@ input {
         position: absolute;
         width: 100%;
         margin-top: -1px;
-        border: 1px solid nc-darken($color-main-background, 14%);
+        border: 1px solid var(--color-border-dark);
         background: var(--color-main-background);
         z-index: 50;
         max-height: 250px;
@@ -779,7 +780,7 @@ input {
                 display: inline-flex;
                 align-items: center;
                 background-color: transparent !important;
-                color: nc-lighten($color-main-text, 33%);
+                color: var(--color-text-lighter);
                 width: 100%;
                 /* selected checkmark icon */
                 &::before {
@@ -795,7 +796,7 @@ input {
                     visibility: hidden;
                 }
                 &.multiselect__option--disabled {
-					background-color: nc-darken($color-main-background, 8%);
+					background-color: var(--color-background-dark);
 					opacity: .5;
                 }
                 /* add the prop tag-placeholder="create" to add the +
@@ -830,7 +831,7 @@ progress {
 	width: 100%;
 	padding: 0;
 	border: 0 none;
-	background-color: nc-darken($color-main-background, 10%);
+	background-color: var(--color-background-dark);
 	border-radius: var(--border-radius);
 	flex-basis: 100%;
 	height: 5px;
diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.scss
index 52b22f86f62..8ee7412af3c 100644
--- a/core/css/jquery-ui-fixes.scss
+++ b/core/css/jquery-ui-fixes.scss
@@ -1,7 +1,7 @@
 /* Component containers
 ----------------------------------*/
 .ui-widget-content {
-	border: 1px solid nc-darken($color-main-background, 20%);
+	border: 1px solid var(--color-border);
 	background: var(--color-main-background) none;
 	color: var(--color-main-text);
 }
@@ -22,7 +22,7 @@
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-	border: 1px solid nc-darken($color-main-background, 20%);
+	border: 1px solid var(--color-border);
 	background: var(--color-main-background) none;
 	font-weight: bold;
 	color: #555;
@@ -70,12 +70,12 @@
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid var(--color-main-background);
 	background: var(--color-main-background) none;
-	color: nc-lighten($color-main-text, 30%);
+	color: var(--color-text-lighter);
 }
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
-	color: nc-lighten($color-main-text, 30%);
+	color: var(--color-text-lighter);
 }
 .ui-state-error,
 .ui-widget-content .ui-state-error,
diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss
index df47b6c0cb9..991ef8495ea 100644
--- a/core/css/jquery.ocdialog.scss
+++ b/core/css/jquery.ocdialog.scss
@@ -1,6 +1,6 @@
 .oc-dialog {
 	background: var(--color-main-background);
-	color: nc-darken($color-main-text, 20%);
+	color: var(--color-text-light);
 	border-radius: var(--border-radius);
 	box-shadow: 0 0 7px var(--color-box-shadow);
 	padding: 15px;
diff --git a/core/css/share.scss b/core/css/share.scss
index f2c77ea2d8e..97025676d10 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -131,7 +131,7 @@
 }
 
 #link {
-	border-top: 1px solid nc-darken($color-main-background, 14%);
+	border-top: 1px solid var(--color-border);
 	padding-top: 8px;
 	#showPassword img {
 		padding-left: 5px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 40418a9e4cc..05725a967d4 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -153,7 +153,7 @@ body {
 		color: var(--color-primary-text);
 		border-bottom: 2px dotted var(--color-main-background);
 		&:hover, &:focus {
-			color: nc-lighten($color-main-text, 86%);
+			color: var(--color-primary-text-dark);
 		}
 	}
 }
@@ -170,7 +170,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-	background: nc-darken($color-main-background, 14%);
+	background: var(--color-background-darker);
 	border-radius: var(--border-radius);
 }
 
@@ -303,7 +303,7 @@ body {
 
 #emptycontent,
 .emptycontent {
-	color: nc-lighten($color-main-text, 53%);
+	color: var(--color-text-maxcontrast);
 	text-align: center;
 	margin-top: 30vh;
 	width: 100%;
@@ -363,7 +363,7 @@ body {
 		}
 		a {
 			color: var(--color-primary-text);
-			border-bottom: 1px solid nc-darken($color-main-background, 27%);
+			border-bottom: 1px solid var(--color-background-darker);
 		}
 	}
 	.infogroup {
@@ -616,7 +616,6 @@ label.infield {
 }
 
 /* Database selector */
-
 #body-login {
 	form #selectDbType {
 		text-align: center;
@@ -629,17 +628,17 @@ label.infield {
 			position: static;
 			margin: 0 -3px 5px;
 			font-size: 12px;
-			background: nc-darken($color-main-background, 3%);
-			color: nc-lighten($color-main-text, 53%);
+			background: var(--color-background-dark);
+			color: var(--color-text-lighter);
 			cursor: pointer;
-			border: 1px solid nc-darken($color-main-background, 14%);
+			border: 1px solid var(--color-border-dark);
 			span {
 				cursor: pointer;
 				padding: 10px 20px;
 			}
 			&.ui-state-hover, &.ui-state-active {
 				color: var(--color-main-text);
-				background-color: nc-darken($color-main-background, 8%);
+				background-color: var(--color-border);
 			}
 		}
 	}
@@ -691,7 +690,7 @@ label.infield {
 		color: var(--color-primary-text) !important;
 		font-weight: 600 !important;
 		&.button {
-			color: nc-lighten($color-main-text, 33%) !important;
+			color: var(--color-text-lighter) !important;
 			display: inline-block;
 			text-align: center;
 		}
@@ -922,7 +921,7 @@ tr {
 
 tbody tr {
 	&:hover, &:focus, &:active {
-		background-color: nc-darken($color-main-background, 3%);
+		background-color: var(--color-background-dark);
 	}
 }
 
@@ -995,7 +994,7 @@ code {
 	.ui-datepicker-calendar {
 		th {
 			font-weight: normal;
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 			opacity: .8;
 			width: 26px;
 			padding: 2px;
@@ -1005,7 +1004,7 @@ code {
 		}
 		td {
 			&.ui-datepicker-today a:not(.ui-state-hover) {
-				background-color: nc-lighten($color-main-text, 86%);
+				background-color: var(--color-background-darker);
 			}
 
 			&.ui-datepicker-current-day a.ui-state-active,
@@ -1018,7 +1017,7 @@ code {
 
 			&.ui-datepicker-week-end:not(.ui-state-disabled) :not(.ui-state-hover),
 			.ui-priority-secondary:not(.ui-state-hover) {
-				color: nc-lighten($color-main-text, 33%);
+				color: var(--color-text-lighter);
 				opacity: .8;
 			}
 		}
@@ -1026,7 +1025,7 @@ code {
 }
 
 .ui-datepicker-prev, .ui-datepicker-next {
-	border: nc-darken($color-main-background, 14%);
+	border: var(--color-border-dark);
 	background: var(--color-main-background);
 }
 
@@ -1066,7 +1065,7 @@ code {
 	.ui-timepicker-table {
 		th {
 			font-weight: normal;
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 			opacity: .8;
 			&.periods {
 				padding: 0;
@@ -1088,7 +1087,7 @@ code {
 			}
 
 			&.ui-timepicker-minutes:not(.ui-state-hover) {
-				color: nc-lighten($color-main-text, 33%);
+				color: var(--color-text-lighter);
 			}
 
 			&.ui-timepicker-hours {
@@ -1163,7 +1162,7 @@ code {
 		width: 100%;
 	}
 	.emptycontent {
-		color: nc-lighten($color-main-text, 53%);
+		color: var(--color-text-details);
 		text-align: center;
 		margin-top: 80px;
 		width: 100%;
@@ -1348,7 +1347,7 @@ span.ui-icon {
 	}
 	.scrollarea {
 		overflow: auto;
-		border: 1px solid nc-darken($color-main-background, 14%);
+		border: 1px solid var(--color-background-darker);
 		width: 100%;
 		height: 240px;
 	}
@@ -1360,7 +1359,7 @@ span.ui-icon {
 		}
 	}
 	.taglist li {
-		background: nc-darken($color-main-background, 3%);
+		background: var(--color-background-dark);
 		padding: .3em .8em;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1368,7 +1367,7 @@ span.ui-icon {
 		-webkit-transition: background-color 500ms;
 		transition: background-color 500ms;
 		&:hover, &:active {
-			background: nc-darken($color-main-background, 8%);
+			background: var(--color-background-darker);
 		}
 	}
 	.addinput {
@@ -1483,12 +1482,12 @@ div.crumb {
 	position: relative;
 	text-align: center;
 	.info {
-		color: nc-lighten($color-main-text, 33%);
+		color: var(--color-text-lighter);
 		text-align: center;
 		margin: 0 auto;
 		padding: 20px 0;
 		a {
-			color: nc-lighten($color-main-text, 33%);
+			color: var(--color-text-lighter);
 			font-weight: 600;
 			padding: 13px;
 			margin: -13px;
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 5d6c616e065..d66faeca0d8 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,31 +1,46 @@
+// SCSS darken/lighten function override 
+@function nc-darken($color, $value) {
+	@return darken($color, $value);
+}
+
+@function nc-lighten($color, $value) {
+	@return lighten($color, $value);
+}
+
+// SCSS variables
 $color-main-text: #000000;
 $color-main-background: #ffffff;
+
+// used for different active/disabled states
+$color-background-dark: nc-darken($color-main-background, 7%);
+$color-background-darker: nc-darken($color-main-background, 14%);
+
 $color-primary: #0082c9;
 $color-primary-text: #ffffff;
+$color-primary-text-dark: nc-darken($color-primary-text, 7%);
+$color-primary-element: $color-primary;
+
 $color-error: #e9322d;
 $color-warning: #eca700;
 $color-success: #46ba61;
-$color-primary-element: $color-primary;
 
 // rgb(118, 118, 118) / #767676
 // min. color contrast for normal text on white background according to WCAG AA
 // (Works as well: color: #000; opacity: 0.57;)
-$color-text-details: #767676;
+$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%);
+$color-text-light: nc-lighten($color-main-text, 15%);
+$color-text-lighter: nc-lighten($color-main-text, 30%);
 
 $image-logo: url('../img/logo.svg?v=1');
 $image-login-background: url('../img/background.png?v=2');
 
 $color-loading: #969696;
 $color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
-$color-border: nc-darken($color-main-background, 8%);
-$border-radius: 3px;
 
-// SCSS darken/lighten function override 
-@function nc-darken($color, $value) {
-	@return darken($color, $value);
-}
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
 
-@function nc-lighten($color, $value) {
-	@return lighten($color, $value);
-}
\ No newline at end of file
+// light border like file table or app-content list
+$color-border: nc-darken($color-main-background, 7%);
+// darker border like inputs or very visible elements
+$color-border-dark: nc-darken($color-main-background, 14%);
+$border-radius: 3px;