material-sass 0.0.4 → 1.0.0

data/app/assets/stylesheets/material/{_utilities-responsive.scss → utilities/_utilities-responsive.scss}

@@ -94,4 +94,4 @@
 		.visible-lg-inline-block {
 			display: inline-block !important;
 		}
-	}
+	}

data/app/assets/stylesheets/material/{_utilities.scss → utilities/_utilities.scss}

@@ -1,17 +1,3 @@
-.a {
-	background-color: transparent;
-	border: 0;
-	display: inline;
-	color: $link-color;
-	-webkit-appearance: none;
-	&:focus,
-	&:hover {
-		color: $link-color-hover;
-		outline: 0;
-		text-decoration: underline;
-	}
-}
-
 .access-hide {
 	border: 0;
 	clip: rect(0, 0, 0, 0);
@@ -34,60 +20,6 @@
 	}
 }
 
-.avoid-fout,
-.el-loading {
-	position: relative;
-}
-
-body.avoid-fout,
-body.el-loading {
-	position: static;
-}
-
-.avoid-fout-indicator,
-.el-loading-indicator {
-	font-family: sans-serif !important;
-	height: 0;
-	min-height: ($base / 2);
-	overflow: hidden;
-	position: absolute;
-		top: 0;
-		left: 0;
-	text-align: center;
-	width: 0;
-	z-index: 2;
-}
-
-.avoid-fout > .avoid-fout-indicator,
-.el-loading > .el-loading-indicator {
-	background-color: $white;
-	box-shadow: 0 -1px 0 $black-bg, 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
-	height: 100%;
-	opacity: 1;
-	padding: $line-height $grid-gutter;
-	width: 100%;
-}
-
-.avoid-fout-done > .avoid-fout-indicator,
-.el-loading-done > .el-loading-indicator {
-	height: 0;
-	opacity: 0;
-	padding: 0;
-	width: 0;
-	transition: height 0s 0.3s, opacity 0.3s $timing, padding 0s 0.3s, width 0s 0.3s;
-}
-
-.avoid-fout-indicator-fixed,
-.el-loading-indicator-fixed {
-	position: fixed;
-	z-index: ($top-base + 1);
-}
-
-.avoid-fout-indicator-linear,
-.el-loading-indicator-linear {
-	padding: 0 !important;
-}
-
 .clearfix {
 	@include clearfix();
 }
@@ -124,6 +56,43 @@ body.el-loading {
 	transition: height 0.3s $timing;
 }
 
+.el-loading {
+	position: relative;
+}
+
+body.el-loading {
+	position: static;
+}
+
+.el-loading-indicator {
+	background-color: $white;
+	font-family: sans-serif !important;
+	height: 100%;
+	min-height: ($base / 2);
+	overflow: hidden;
+	padding: $margin-md $grid-gutter;
+	position: absolute;
+		top: 0;
+		left: 0;
+	text-align: center;
+	width: 100%;
+	z-index: 2;
+	.el-loading-done > & {
+		opacity: 0;
+		transform: scale(0, 0);
+		transition: opacity 0.3s $timing, transform 0s 0.3s;
+	}
+}
+
+.el-loading-indicator-fixed {
+	position: fixed;
+	z-index: ($top-base + 1);
+}
+
+.el-loading-indicator-linear {
+	padding: 0 !important;
+}
+
 .fade {
 	opacity: 0;
 	transition: opacity 0.3s $timing;
@@ -161,55 +130,87 @@ body.el-loading {
 }
 
 .margin-bottom {
-	margin-bottom: $line-height !important;
+	margin-bottom: $margin-md !important;
+}
+
+.margin-bottom-lg {
+	margin-bottom: $margin-lg !important;
 }
 
-.margin-bottom-half {
-	margin-bottom: ($line-height / 2) !important;
+.margin-bottom-no {
+	margin-bottom: 0 !important;
+}
+
+.margin-bottom-sm {
+	margin-bottom: $margin-sm !important;
+}
+
+.margin-bottom-xs {
+	margin-bottom: $margin-base !important;
 }
 
 .margin-left {
 	margin-left: $grid-gutter !important;
 }
 
-.margin-left-half {
+.margin-left-lg {
+	margin-left: ($grid-gutter * 2) !important;
+}
+
+.margin-left-no {
+	margin-left: 0 !important;
+}
+
+.margin-left-sm {
 	margin-left: ($grid-gutter / 2) !important;
 }
 
+.margin-left-xs {
+	margin-left: ($grid-gutter / 4) !important;
+}
+
 .margin-no {
 	margin: 0 !important;
 }
 
-.margin-no-bottom {
-	margin-bottom: 0 !important;
+.margin-right {
+	margin-right: $grid-gutter !important;
 }
 
-.margin-no-left {
-	margin-left: 0  !important;
+.margin-right-lg {
+	margin-right: ($grid-gutter * 2) !important;
 }
 
-.margin-no-right {
+.margin-right-no {
 	margin-right: 0 !important;
 }
 
-.margin-no-top {
-	margin-top: 0 !important;
+.margin-right-sm {
+	margin-right: ($grid-gutter / 2) !important;
 }
 
-.margin-right {
-	margin-right: $grid-gutter !important;
+.margin-right-xs {
+	margin-right: ($grid-gutter / 4) !important;
 }
 
-.margin-right-half {
-	margin-right: ($grid-gutter / 2) !important;
+.margin-top {
+	margin-top: $margin-md !important;
 }
 
-.margin-top {
-	margin-top: $line-height !important;
+.margin-top-lg {
+	margin-top: $margin-lg !important;
 }
 
-.margin-top-half {
-	margin-top: ($line-height / 2) !important;
+.margin-top-no {
+	margin-top: 0 !important;
+}
+
+.margin-top-sm {
+	margin-top: $margin-sm !important;
+}
+
+.margin-top-xs {
+	margin-top: $margin-base !important;
 }
 
 .media,
@@ -240,8 +241,92 @@ body.el-loading {
 
 .p {
 	display: block;
-	margin-top: $line-height;
-	margin-bottom: $line-height;
+	margin-top: $margin-base;
+	margin-bottom: $margin-base;
+}
+
+.padding-bottom {
+	padding-bottom: $margin-md !important;
+}
+
+.padding-bottom-lg {
+	padding-bottom: $margin-lg !important;
+}
+
+.padding-bottom-no {
+	padding-bottom: 0 !important;
+}
+
+.padding-bottom-sm {
+	padding-bottom: $margin-sm !important;
+}
+
+.padding-bottom-xs {
+	padding-bottom: $margin-base !important;
+}
+
+.padding-left {
+	padding-left: $grid-gutter !important;
+}
+
+.padding-left-lg {
+	padding-left: ($grid-gutter * 2) !important;
+}
+
+.padding-left-no {
+	padding-left: 0 !important;
+}
+
+.padding-left-sm {
+	padding-left: ($grid-gutter / 2) !important;
+}
+
+.padding-left-xs {
+	padding-left: ($grid-gutter / 4) !important;
+}
+
+.padding-no {
+	padding: 0 !important;
+}
+
+.padding-right {
+	padding-right: $grid-gutter !important;
+}
+
+.padding-right-lg {
+	padding-right: ($grid-gutter * 2) !important;
+}
+
+.padding-right-no {
+	padding-right: 0 !important;
+}
+
+.padding-right-sm {
+	padding-right: ($grid-gutter / 2) !important;
+}
+
+.padding-right-xs {
+	padding-right: ($grid-gutter / 4) !important;
+}
+
+.padding-top {
+	padding-top: $margin-md !important;
+}
+
+.padding-top-lg {
+	padding-top: $margin-lg !important;
+}
+
+.padding-top-no {
+	padding-top: 0 !important;
+}
+
+.padding-top-sm {
+	padding-top: $margin-sm !important;
+}
+
+.padding-top-xs {
+	padding-top: $margin-base !important;
 }
 
 .pull-left {
@@ -261,12 +346,6 @@ body.el-loading {
 	word-break: break-all;
 }
 
-.text-lead {
-	font-size: $font-size-h4;
-	font-weight: $font-weight-light;
-	line-height: $line-height-h4;
-}
-
 .text-overflow {
 	@include text-overflow();
 }
@@ -289,34 +368,42 @@ body.el-loading {
 	}
 
 // colour
-	.text-bg {
-		color: $black-bg;
-	}
-
 	.text-black {
-		color: $black;
+		color: $black-text-solid;
 	}
 
-	.text-default {
-		color: $black-text;
+	.text-black-divider {
+		color: $black-divider-solid;
 	}
 
-	.text-hint {
-		color: $black-hint;
+	.text-black-hint {
+		color: $black-hint-solid;
 	}
 
-	.text-sec {
-		color: $black-sec;
+	.text-black-sec {
+		color: $black-sec-solid;
 	}
 
 	.text-white {
-		color: $white;
+		color: $white-text-solid;
+	}
+
+	.text-white-divider {
+		color: $white-divider-solid;
+	}
+
+	.text-white-hint {
+		color: $white-hint-solid;
+	}
+
+	.text-white-sec {
+		color: $white-sec-solid;
 	}
 
-	@each $color in $palette-list {
-		$i: index($palette-list, $color);
+	@each $color in $palette-list-class {
+		$i: index($palette-list-class, $color);
 
 		.text-#{$color} {
-			color: nth($palette-color, $i);
+			color: nth($palette-list-color, $i);
 		}
 	}

data/app/assets/stylesheets/material/var/_colours.scss

@@ -0,0 +1,336 @@
+// basic colours
+	$palette-amber-050:            #fff8e1;
+	$palette-amber-100:            #ffecb3;
+	$palette-amber-200:            #ffe082;
+	$palette-amber-300:            #ffd54f;
+	$palette-amber-400:            #ffca28;
+	$palette-amber-500:            #ffc107;
+	$palette-amber-600:            #ffb300;
+	$palette-amber-700:            #ffa000;
+	$palette-amber-800:            #ff8f00;
+	$palette-amber-900:            #ff6f00;
+	$palette-amber-a100:           #ffe57f;
+	$palette-amber-a200:           #ffd740;
+	$palette-amber-a400:           #ffc400;
+	$palette-amber-a700:           #ffab00;
+
+	$palette-blue-050:             #e3f2fd;
+	$palette-blue-100:             #bbdefb;
+	$palette-blue-200:             #90caf9;
+	$palette-blue-300:             #64b5f6;
+	$palette-blue-400:             #42a5f5;
+	$palette-blue-500:             #2196f3;
+	$palette-blue-600:             #1e88e5;
+	$palette-blue-700:             #1976d2;
+	$palette-blue-800:             #1565c0;
+	$palette-blue-900:             #0d47a1;
+	$palette-blue-a100:            #82b1ff;
+	$palette-blue-a200:            #448aff;
+	$palette-blue-a400:            #2979ff;
+	$palette-blue-a700:            #2962ff;
+
+	$palette-blue-grey-050:        #eceff1;
+	$palette-blue-grey-100:        #cfd8dc;
+	$palette-blue-grey-200:        #b0bec5;
+	$palette-blue-grey-300:        #90a4ae;
+	$palette-blue-grey-400:        #78909c;
+	$palette-blue-grey-500:        #607d8b;
+	$palette-blue-grey-600:        #546e7a;
+	$palette-blue-grey-700:        #455a64;
+	$palette-blue-grey-800:        #37474f;
+	$palette-blue-grey-900:        #263238;
+
+	$palette-brown-050:            #efebe9;
+	$palette-brown-100:            #d7ccc8;
+	$palette-brown-200:            #bcaaa4;
+	$palette-brown-300:            #a1887f;
+	$palette-brown-400:            #8d6e63;
+	$palette-brown-500:            #795548;
+	$palette-brown-600:            #6d4c41;
+	$palette-brown-700:            #5d4037;
+	$palette-brown-800:            #4e342e;
+	$palette-brown-900:            #3e2723;
+
+	$palette-cyan-050:             #e0f7fa;
+	$palette-cyan-100:             #b2ebf2;
+	$palette-cyan-200:             #80deea;
+	$palette-cyan-300:             #4dd0e1;
+	$palette-cyan-400:             #26c6da;
+	$palette-cyan-500:             #00bcd4;
+	$palette-cyan-600:             #00acc1;
+	$palette-cyan-700:             #0097a7;
+	$palette-cyan-800:             #00838f;
+	$palette-cyan-900:             #006064;
+	$palette-cyan-a100:            #84ffff;
+	$palette-cyan-a200:            #18ffff;
+	$palette-cyan-a400:            #00e5ff;
+	$palette-cyan-a700:            #00b8d4;
+
+	$palette-deep-orange-050:      #fbe9e7;
+	$palette-deep-orange-100:      #ffccbc;
+	$palette-deep-orange-200:      #ffab91;
+	$palette-deep-orange-300:      #ff8a65;
+	$palette-deep-orange-400:      #ff7043;
+	$palette-deep-orange-500:      #ff5722;
+	$palette-deep-orange-600:      #f4511e;
+	$palette-deep-orange-700:      #e64a19;
+	$palette-deep-orange-800:      #d84315;
+	$palette-deep-orange-900:      #bf360c;
+	$palette-deep-orange-a100:     #ff9e80;
+	$palette-deep-orange-a200:     #ff6e40;
+	$palette-deep-orange-a400:     #ff3d00;
+	$palette-deep-orange-a700:     #ee2c00;
+
+	$palette-deep-purple-050:      #ede7f6;
+	$palette-deep-purple-100:      #d1c4e9;
+	$palette-deep-purple-200:      #b39ddb;
+	$palette-deep-purple-300:      #9575cd;
+	$palette-deep-purple-400:      #7e57c2;
+	$palette-deep-purple-500:      #673ab7;
+	$palette-deep-purple-600:      #5e35b1;
+	$palette-deep-purple-700:      #512da8;
+	$palette-deep-purple-800:      #4527a0;
+	$palette-deep-purple-900:      #311b92;
+	$palette-deep-purple-a100:     #b388ff;
+	$palette-deep-purple-a200:     #7c4dff;
+	$palette-deep-purple-a400:     #651fff;
+	$palette-deep-purple-a700:     #6200ea;
+
+	$palette-green-050:            #e8f5e9;
+	$palette-green-100:            #c8e6c9;
+	$palette-green-200:            #a5d6a7;
+	$palette-green-300:            #81c784;
+	$palette-green-400:            #66bb6a;
+	$palette-green-500:            #4caf50;
+	$palette-green-600:            #43a047;
+	$palette-green-700:            #388e3c;
+	$palette-green-800:            #2e7d32;
+	$palette-green-900:            #1b5e20;
+	$palette-green-a100:           #b9f6ca;
+	$palette-green-a200:           #69f0ae;
+	$palette-green-a400:           #00e676;
+	$palette-green-a700:           #00c853;
+
+	$palette-grey-050:             #fafafa;
+	$palette-grey-100:             #f5f5f5;
+	$palette-grey-200:             #eeeeee;
+	$palette-grey-300:             #e0e0e0;
+	$palette-grey-400:             #bdbdbd;
+	$palette-grey-500:             #9e9e9e;
+	$palette-grey-600:             #757575;
+	$palette-grey-700:             #616161;
+	$palette-grey-800:             #424242;
+	$palette-grey-900:             #212121;
+
+	$palette-indigo-050:           #e8eaf6;
+	$palette-indigo-100:           #c5cae9;
+	$palette-indigo-200:           #9fa8da;
+	$palette-indigo-300:           #7986cb;
+	$palette-indigo-400:           #5c6bc0;
+	$palette-indigo-500:           #3f51b5;
+	$palette-indigo-600:           #3949ab;
+	$palette-indigo-700:           #303f9f;
+	$palette-indigo-800:           #283593;
+	$palette-indigo-900:           #1a237e;
+	$palette-indigo-a100:          #8c9eff;
+	$palette-indigo-a200:          #536dfe;
+	$palette-indigo-a400:          #3d5afe;
+	$palette-indigo-a700:          #304ffe;
+
+	$palette-light-blue-050:       #e1f5fe;
+	$palette-light-blue-100:       #b3e5fc;
+	$palette-light-blue-200:       #81d4fa;
+	$palette-light-blue-300:       #4fc3f7;
+	$palette-light-blue-400:       #29b6f6;
+	$palette-light-blue-500:       #03a9f4;
+	$palette-light-blue-600:       #039be5;
+	$palette-light-blue-700:       #0288d1;
+	$palette-light-blue-800:       #0277bd;
+	$palette-light-blue-900:       #01579b;
+	$palette-light-blue-a100:      #80d8ff;
+	$palette-light-blue-a200:      #40c4ff;
+	$palette-light-blue-a400:      #00b0ff;
+	$palette-light-blue-a700:      #0091ea;
+
+	$palette-light-green-050:      #f1f8e9;
+	$palette-light-green-100:      #dcedc8;
+	$palette-light-green-200:      #c5e1a5;
+	$palette-light-green-300:      #aed581;
+	$palette-light-green-400:      #9ccc65;
+	$palette-light-green-500:      #8bc34a;
+	$palette-light-green-600:      #7cb342;
+	$palette-light-green-700:      #689f38;
+	$palette-light-green-800:      #558b2f;
+	$palette-light-green-900:      #33691e;
+	$palette-light-green-a100:     #ccff90;
+	$palette-light-green-a200:     #b2ff59;
+	$palette-light-green-a400:     #76ff03;
+	$palette-light-green-a700:     #64dd17;
+
+	$palette-lime-050:             #f9fbe7;
+	$palette-lime-100:             #f0f4c3;
+	$palette-lime-200:             #e6ee9c;
+	$palette-lime-300:             #dce775;
+	$palette-lime-400:             #d4e157;
+	$palette-lime-500:             #cddc39;
+	$palette-lime-600:             #c0ca33;
+	$palette-lime-700:             #afb42b;
+	$palette-lime-800:             #9e9d24;
+	$palette-lime-900:             #827717;
+	$palette-lime-a100:            #f4ff81;
+	$palette-lime-a200:            #eeff41;
+	$palette-lime-a400:            #c6ff00;
+	$palette-lime-a700:            #aeea00;
+
+	$palette-orange-050:           #fff3e0;
+	$palette-orange-100:           #ffe0b2;
+	$palette-orange-200:           #ffcc80;
+	$palette-orange-300:           #ffb74d;
+	$palette-orange-400:           #ffa726;
+	$palette-orange-500:           #ff9800;
+	$palette-orange-600:           #fb8c00;
+	$palette-orange-700:           #f57c00;
+	$palette-orange-800:           #ef6c00;
+	$palette-orange-900:           #e65100;
+	$palette-orange-a100:          #ffd180;
+	$palette-orange-a200:          #ffab40;
+	$palette-orange-a400:          #ff9100;
+	$palette-orange-a700:          #ff6d00;
+
+	$palette-pink-050:             #fce4ec;
+	$palette-pink-100:             #f8bbd0;
+	$palette-pink-200:             #f48fb1;
+	$palette-pink-300:             #f06292;
+	$palette-pink-400:             #ec407a;
+	$palette-pink-500:             #e91e63;
+	$palette-pink-600:             #d81b60;
+	$palette-pink-700:             #c2185b;
+	$palette-pink-800:             #ad1457;
+	$palette-pink-900:             #880e4f;
+	$palette-pink-a100:            #ff80ab;
+	$palette-pink-a200:            #ff4081;
+	$palette-pink-a400:            #f50057;
+	$palette-pink-a700:            #c51162;
+
+	$palette-purple-050:           #f3e5f5;
+	$palette-purple-100:           #e1bee7;
+	$palette-purple-200:           #ce93d8;
+	$palette-purple-300:           #ba68c8;
+	$palette-purple-400:           #ab47bc;
+	$palette-purple-500:           #9c27b0;
+	$palette-purple-600:           #8e24aa;
+	$palette-purple-700:           #7b1fa2;
+	$palette-purple-800:           #6a1b9a;
+	$palette-purple-900:           #4a148c;
+	$palette-purple-a100:          #ea80fc;
+	$palette-purple-a200:          #e040fb;
+	$palette-purple-a400:          #d500f9;
+	$palette-purple-a700:          #aa00ff;
+
+	$palette-red-050:              #ffebee;
+	$palette-red-100:              #ffcdd2;
+	$palette-red-200:              #ef9a9a;
+	$palette-red-300:              #e57373;
+	$palette-red-400:              #ef5350;
+	$palette-red-500:              #f44336;
+	$palette-red-600:              #e53935;
+	$palette-red-700:              #d32f2f;
+	$palette-red-800:              #c62828;
+	$palette-red-900:              #b71c1c;
+	$palette-red-a100:             #ff8a80;
+	$palette-red-a200:             #ff5252;
+	$palette-red-a400:             #ff1744;
+	$palette-red-a700:             #d50000;
+
+	$palette-teal-050:             #e0f2f1;
+	$palette-teal-100:             #b2dfdb;
+	$palette-teal-200:             #80cbc4;
+	$palette-teal-300:             #4db6ac;
+	$palette-teal-400:             #26a69a;
+	$palette-teal-500:             #009688;
+	$palette-teal-600:             #00897b;
+	$palette-teal-700:             #00796b;
+	$palette-teal-800:             #00695c;
+	$palette-teal-900:             #004d40;
+	$palette-teal-a100:            #a7ffeb;
+	$palette-teal-a200:            #64ffda;
+	$palette-teal-a400:            #1de9b6;
+	$palette-teal-a700:            #00bfa5;
+
+	$palette-yellow-050:           #fffde7;
+	$palette-yellow-100:           #fff9c4;
+	$palette-yellow-200:           #fff59d;
+	$palette-yellow-300:           #fff176;
+	$palette-yellow-400:           #ffee58;
+	$palette-yellow-500:           #ffeb3b;
+	$palette-yellow-600:           #fdd835;
+	$palette-yellow-700:           #fbc02d;
+	$palette-yellow-800:           #f9a825;
+	$palette-yellow-900:           #f57f17;
+	$palette-yellow-a100:          #ffff8d;
+	$palette-yellow-a200:          #ffff00;
+	$palette-yellow-a400:          #ffea00;
+	$palette-yellow-a700:          #ffd600;
+
+// black and white
+	$black:                        #000000;
+
+	$black-divider:                rgba(0, 0, 0, 0.12);
+	$black-hint:                   rgba(0, 0, 0, 0.38);
+	$black-sec:                    rgba(0, 0, 0, 0.54);
+	$black-text:                   rgba(0, 0, 0, 0.87);
+
+	$black-divider-solid:          #dadada;
+	$black-hint-solid:             #9a9a9a;
+	$black-sec-solid:              #727272;
+	$black-text-solid:             #212121;
+
+	$white:                        #ffffff;
+
+	$white-divider:                rgba(255, 255, 255, 0.12);
+	$white-hint:                   rgba(255, 255, 255, 0.30);
+	$white-sec:                    rgba(255, 255, 255, 0.70);
+	$white-text:                   rgba(255, 255, 255, 1.00);
+
+	$white-divider-solid:          #3c3c3c;
+	$white-hint-solid:             #646464;
+	$white-sec-solid:              #bcbcbc;
+	$white-text-solid:             #ffffff;
+
+// offwhite
+	$offwhite:                     rgba(red($black-hint-solid), green($black-hint-solid), blue($black-hint-solid), 0.18);
+	$offwhite-dark:                rgba(red($black-hint-solid), green($black-hint-solid), blue($black-hint-solid), 0.36);
+	$offwhite-light:               rgba(red($black-hint-solid), green($black-hint-solid), blue($black-hint-solid), 0.09);
+
+	$offwhite-solid:               $palette-grey-100;
+	$offwhite-solid-dark:          $palette-grey-200;
+	$offwhite-solid-light:         $palette-grey-050;
+
+// palettes
+	$brand-color:                  $palette-indigo-500;
+	$brand-color-dark:             $palette-indigo-700;
+	$brand-color-light:            $palette-indigo-300;
+
+	$brand-color-accent:           $palette-pink-a200;
+	$brand-color-accent-dark:      $palette-pink-a400;
+	$brand-color-accent-light:     $palette-pink-a100;
+
+	$brand-text:                   $white-text;
+	$brand-text-dark:              $white-text;
+	$brand-text-light:             $black-text;
+
+	$brand-text-accent:            $white-text;
+	$brand-text-accent-dark:       $white-text;
+	$brand-text-accent-light:      $black-text;
+
+	$palette-list-class:           "brand",            "brand-accent",            "green",            "orange",            "red";
+	$palette-list-color:           $brand-color,       $brand-color-accent,       $palette-green-500, $palette-orange-500, $palette-red-500;
+	$palette-list-dark:            $brand-color-dark,  $brand-color-accent-dark,  $palette-green-700, $palette-orange-700, $palette-red-700;
+	$palette-list-light:           $brand-color-light, $brand-color-accent-light, $palette-green-300, $palette-orange-300, $palette-red-300;
+	$palette-list-text:            $brand-text,        $brand-text-accent,        $black-text,        $black-text,         $white-text;
+	$palette-list-text-dark:       $brand-text-dark,   $brand-text-accent-dark,   $white-text,        $black-text,         $white-text;
+	$palette-list-text-light:      $brand-text-light,  $brand-text-accent-light,  $black-text,        $black-text,         $black-text;
+
+// utilities
+	$link-color:                   $brand-color-accent;
+	$link-color-hover:             $brand-color-accent-dark;