test all colors in one place

inkhey · Jul 9, 2021 · f541342 · f541342
1 parent 269dede
commit f541342
Show file tree

Hide file tree

Showing 32 changed files with 294 additions and 237 deletions.
diff --git a/styles/devices/TV.scss b/styles/devices/TV.scss
@@ -1,17 +1,17 @@
 .basicModal__button:focus {
-	background: #2293ec;
-	color: #ffffff;
+	background: color(c);
+	color: color(a);
 	cursor: pointer;
 	outline-style: none;
 }
 
 .basicModal__button#basicModal__action:focus {
-	color: #ffffff;
+	color: color(a);
 }
 
 .content .photo:focus {
 	outline-style: solid;
-	outline-color: #ffffff;
+	outline-color: color(a);
 	outline-width: 10px;
 }
 
@@ -21,21 +21,21 @@
 
 .header .button:focus {
 	outline-width: 0;
-	background-color: #ffffff;
+	background-color: color(a);
 }
 
 .header__title:focus {
 	outline-width: 0;
-	background-color: #ffffff;
-	color: #000000;
+	background-color: color(a);
+	color: color(b);
 }
 
 .header .button:focus .iconic {
-	fill: #000000;
+	fill: color(b);
 }
 
 #imageview {
-	background-color: #000000;
+	background-color: color(b);
 }
 #imageview #image,
 #imageview #livephoto {

diff --git a/styles/frame/frame.scss b/styles/frame/frame.scss
@@ -1,7 +1,7 @@
 body {
 	padding: 0;
 	margin: 0;
-	background-color: #000000;
+	background-color: color(b);
 	opacity: 0;
 	transition: opacity 1s ease-in-out;
 
@@ -48,7 +48,7 @@ body {
 		height: 100%;
 		width: 100%;
 		object-fit: contain;
-		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
+		filter: drop-shadow(0px 0px 1px color(e)) drop-shadow(0px 0px 10px color(e));
 		display: none;
 	}
 }
diff --git a/styles/landing/_intro.scss b/styles/landing/_intro.scss
@@ -5,20 +5,20 @@
 	bottom: 0;
 	right: 0;
 	z-index: 1000;
-	background: #000000;
+	background: color(b);
 
 	h1 {
 		text-align: center;
 		font-size: 1.5em;
-		color: #ffffff;
+		color: color(a);
 		text-transform: uppercase;
 		font-weight: 200;
 	}
 
 	h2 {
 		text-align: center;
 		font-size: 1em;
-		color: #ececec;
+		color: color(d);
 		text-transform: uppercase;
 		font-weight: 200;
 	}

diff --git a/styles/landing/_logo.scss b/styles/landing/_logo.scss
@@ -11,7 +11,7 @@
 	padding: 15px;
 
 	h1 {
-		color: #ffffff;
+		color: color(a);
 		font-size: 1em;
 		text-transform: uppercase;
 		font-weight: 700;

diff --git a/styles/landing/_menu.scss b/styles/landing/_menu.scss
@@ -11,7 +11,7 @@
 	a {
 		display: block;
 		font-size: 0.8em;
-		color: #ffffff;
+		color: color(a);
 		text-transform: uppercase;
 		font-weight: 400;
 		transition: all 0.3s;
@@ -21,7 +21,7 @@
 	}
 
 	.current-menu-item a {
-		color: #b5b5b5 !important;
+		color: color(f) !important;
 	}
 }
 
@@ -36,6 +36,6 @@
 // restrict hover features to devices that support it
 @media (hover: hover) {
 	#menu a:hover {
-		color: #b5b5b5 !important;
+		color: color(f) !important;
 	}
 }
diff --git a/styles/landing/landing.scss b/styles/landing/landing.scss
@@ -12,7 +12,7 @@
 html,
 body {
 	font-family: "Roboto", sans-serif;
-	background: #000000;
+	background: color(b);
 	overflow: hidden;
 }
 
@@ -36,9 +36,9 @@ a {
 
 #footer {
 	position: absolute;
-	background: #000000;
+	background: color(b);
 
 	p.home_copyright {
-		color: #ffffff;
+		color: color(a);
 	}
 }
diff --git a/styles/main/_basicContext.custom.scss b/styles/main/_basicContext.custom.scss
@@ -1,7 +1,7 @@
 // Default Theme ----------------------------------------------------- //
 .basicContext {
 	padding: 5px 0 6px;
-	background: linear-gradient(to bottom, #333, #252525);
+	background: linear-gradient(to bottom, color(g), color(j));
 	box-shadow: 0 1px 4px black(0.2), inset 0 1px 0 white(0.05);
 	border-radius: 5px;
 	border: 1px solid black(0.7);
@@ -11,7 +11,7 @@
 	&__item {
 		margin-bottom: 2px;
 		font-size: 14px;
-		color: #ccc;
+		color: color(i);
 
 		&--separator {
 			margin: 4px 0;

diff --git a/styles/main/_basicContext.extended.scss b/styles/main/_basicContext.extended.scss
@@ -2,7 +2,7 @@
 .basicContext {
 	&__data .cover {
 		position: absolute;
-		background-color: #222;
+		background-color: color(k);
 		border-radius: 2px;
 		box-shadow: 0 0 0 1px black(0.5);
 	}
@@ -35,8 +35,8 @@
 		margin: -2px 0;
 		padding: 5px 7px 6px;
 		width: 100%;
-		background: #333;
-		color: #fff;
+		background: color(g);
+		color: color(a);
 		box-shadow: 0px 1px 0px white(0.05);
 		border: 1px solid black(0.4);
 		border-radius: 3px;

diff --git a/styles/main/_basicModal.custom.scss b/styles/main/_basicModal.custom.scss
@@ -1,6 +1,6 @@
 .basicModal .select select option {
-	background: #333333 !important;
-	color: #ffffff !important;
+	background: color(g)333 !important;
+	color: color(a) !important;
 }
 
 .basicModal .switch:last-child {

diff --git a/styles/main/_content.scss b/styles/main/_content.scss
@@ -52,8 +52,8 @@
 			position: absolute;
 			width: 200px;
 			height: 200px;
-			background: #222;
-			color: #222;
+			background: color(k);
+			color: color(k);
 			box-shadow: 0 2px 5px black(0.5);
 			border: 1px solid white(0.5);
 			transition: opacity 0.3s ease-out, transform 0.3s ease-out, border-color 0.3s ease-out;
@@ -162,7 +162,7 @@
 		min-height: 19px;
 		width: 180px;
 		margin: 12px 0 5px 15px;
-		color: #fff;
+		color: color(a);
 		text-shadow: 0 1px 3px black(0.4);
 		font-size: 16px;
 		font-weight: bold;
@@ -175,12 +175,12 @@
 		display: block;
 		margin: 0 0 12px 15px;
 		font-size: 11px;
-		color: #ccc;
+		color: color(i);
 		text-shadow: 0 1px 3px black(0.4);
 	}
 	.album .overlay a .iconic,
 	.photo .overlay a .iconic {
-		fill: #ccc;
+		fill: color(i);
 		margin: 0 5px 0 0;
 		width: 8px;
 		height: 8px;
@@ -211,9 +211,9 @@
 		background: $colorRed;
 		box-shadow: 0 0 2px black(0.6);
 		border-radius: 0 0 5px 5px;
-		border: 1px solid #fff;
+		border: 1px solid color(a);
 		border-top: none;
-		color: #fff;
+		color: color(a);
 		text-align: center;
 		text-shadow: 0 1px 0 black(0.4);
 		opacity: 0.9;
@@ -247,7 +247,7 @@
 			background: $colorGreen;
 		}
 		.iconic {
-			fill: #fff;
+			fill: color(a);
 			width: 16px;
 			height: 16px;
 		}

diff --git a/styles/main/_footer.scss b/styles/main/_footer.scss
@@ -2,14 +2,14 @@
 	padding: 5px 0 5px 0;
 	text-align: center;
 	position: absolute;
-	background: #1d1d1d;
+	background: color(q);
 
 	p {
 		font-size: 0.75em;
 		line-height: 26px;
 
 		a {
-			color: #ccc;
+			color: color(i);
 		}
 	}
 

diff --git a/styles/main/_header.scss b/styles/main/_header.scss
@@ -2,8 +2,8 @@
 	position: fixed;
 	height: 49px;
 	width: 100%;
-	background: linear-gradient(to bottom, #222222, #1a1a1a);
-	border-bottom: 1px solid #0f0f0f;
+	background: linear-gradient(to bottom, color(k),color(l));
+	border-bottom: 1px solid color(m);
 	z-index: 1;
 	transition: transform 0.3s ease-out;
 
@@ -24,7 +24,7 @@
 		border-bottom: none;
 
 		&.header--error {
-			background-color: rgba(10, 10, 10, 0.99);
+			background-color:color(n);
 		}
 	}
 
@@ -56,7 +56,7 @@
 	&__title {
 		width: 100%;
 		padding: 16px 0;
-		color: #fff;
+		color: color(a);
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
@@ -104,7 +104,7 @@
 		}
 
 		&--star.active .iconic {
-			fill: #f0ef77;
+			fill: color(p);
 		}
 
 		&--eye.active .iconic {
@@ -161,8 +161,8 @@
 		width: 80px;
 		margin: 0;
 		padding: 5px 12px 6px 12px;
-		background-color: #1d1d1d;
-		color: #fff;
+		background-color: color(q);
+		color: color(a);
 		border: 1px solid black(0.9);
 		box-shadow: 0 1px 0 white(0.04);
 		outline: none;
@@ -215,7 +215,7 @@
 		flex-shrink: 0;
 		padding: 5px 10px;
 		margin: 11px 0;
-		color: #888;
+		color: color(t);
 		font-size: 13px;
 		border-radius: 100px;
 		cursor: default;

diff --git a/styles/main/_imageview.scss b/styles/main/_imageview.scss
@@ -61,8 +61,8 @@
 		position: absolute;
 		bottom: 30px;
 		left: 30px;
-		color: #ffffff;
-		text-shadow: 1px 1px 2px #000000;
+		color: color(a);
+		text-shadow: 1px 1px 2px color(b);
 		z-index: 3;
 
 		h1 {
@@ -78,7 +78,7 @@
 		}
 
 		a .iconic {
-			fill: #fff;
+			fill: color(a);
 			margin: 0 5px 0 0;
 			width: 14px;
 			height: 14px;

diff --git a/styles/main/_leftMenu.scss b/styles/main/_leftMenu.scss
@@ -6,7 +6,7 @@
 	z-index: 4; /* Stay on top */
 	top: 0; /* Stay at the top */
 	left: 0;
-	background-color: #111; /* Black*/
+	background-color: color(u); /* Black*/
 	overflow-x: hidden; /* Disable horizontal scroll */
 	padding-top: 49px; /* Place content 49px from the top (same as menu bar height) */
 	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
@@ -17,7 +17,7 @@
 	padding: 8px 8px 8px 32px;
 	text-decoration: none;
 	font-size: 18px;
-	color: #818181;
+	color: color(y);
 	display: block;
 	transition: 0.3s;
 
@@ -42,7 +42,7 @@
 	font-size: 24px;
 	height: 28px;
 	padding-top: 16px;
-	color: #111;
+	color: color(u);
 	display: inline-block;
 	width: 210px;
 }
@@ -52,7 +52,7 @@
 	margin: 0 10px 0 1px;
 	width: 15px;
 	height: 14px;
-	fill: #818181;
+	fill: color(y);
 }
 
 .leftMenu .iconic.ionicons {
@@ -77,12 +77,12 @@
 @media (hover: hover) {
 	.leftMenu {
 		.closetxt:hover {
-			color: #818181;
+			color: color(y);
 		}
 
 		/* When you mouse over the navigation links, change their color */
 		a:hover {
-			color: #f1f1f1;
+			color: color(cc);
 		}
 	}
 }