Refactor sass color module

Automattic · Oct 31, 2024 · da59ea7 · da59ea7
1 parent 41ee5ad
commit da59ea7
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 49 deletions.
diff --git a/assets/admin/students/student-modal/student-modal.scss b/assets/admin/students/student-modal/student-modal.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import '../../../shared/styles/wp-colors';
 
 .sensei-student-modal {
@@ -57,8 +58,8 @@
 			box-shadow: inset 0 0 0 1px $alert-red;
 
 			&:hover:not(:disabled) {
-				color: adjust-color($alert-red, $lightness: -20%);
-				box-shadow: inset 0 0 0 1px adjust-color($alert-red, $lightness: -20%);
+				color: color.adjust($alert-red, $lightness: -20%);
+				box-shadow: inset 0 0 0 1px color.adjust($alert-red, $lightness: -20%);
 			}
 
 			&:focus:not(:disabled) {

diff --git a/assets/css/course-editor.scss b/assets/css/course-editor.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import '~@wordpress/base-styles/breakpoints';
 
 $primary: #6FCFB2;
@@ -66,14 +67,14 @@ $secondary: #0693e3;
 
 				&:hover,
 				&:active {
-					background-color: adjust-color($primary, $lightness: 5%);
-					border-color: adjust-color($primary, $lightness: 5%);
+					background-color: color.adjust($primary, $lightness: 5%);
+					border-color: color.adjust($primary, $lightness: 5%);
 					text-decoration: none;
 				}
 
 				&:focus {
-					background-color: adjust-color($primary, $lightness: -5%);
-					border-color: adjust-color($primary, $lightness: -5%);
+					background-color: color.adjust($primary, $lightness: -5%);
+					border-color: color.adjust($primary, $lightness: -5%);
 					box-shadow: 0 0 0 1px #fff, 0 0 0 3px $primary;
 				}
 

diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss
@@ -11,7 +11,7 @@ $tablet-breakpoint: 768px;
 /**
  * Functions
  */
-
+@use "sass:color";
 
 /**
  * Mixins
@@ -101,7 +101,7 @@ a.sensei-certificate-link {
 
 	.course-author,
 	.sensei-course-meta {
-		color: adjust-color($color_body, $lightness: 20%);
+		color: color.adjust($color_body, $lightness: 20%);
 		font-size: .9em;
 
 		a {
@@ -150,7 +150,7 @@ a.sensei-certificate-link {
 			p.lesson-meta {
 				font-style: italic;
 				font-size: .9em;
-				color: adjust-color($color_body, $lightness: 20%);
+				color: color.adjust($color_body, $lightness: 20%);
 
 				a {
 					color: #555;
@@ -228,7 +228,7 @@ a.sensei-certificate-link {
 		@include border_radius(5px);
 		color: #fff;
 		font-weight: bold;
-		background: adjust-color($bg_dark, $lightness: -5%);
+		background: color.adjust($bg_dark, $lightness: -5%);
 		display: inline-block;
 
 		&:before {
@@ -274,7 +274,7 @@ a.sensei-certificate-link {
 	margin: 2em 0;
 	padding: 0.5em 1em;
 	font-style: italic;
-	color: adjust-color($color_body, $lightness: 20%);
+	color: color.adjust($color_body, $lightness: 20%);
 	clear: both;
 
 	&:before {
@@ -286,7 +286,7 @@ a.sensei-certificate-link {
 .lesson-tags {
 	margin: 2em 0;
 	font-style: italic;
-	color: adjust-color($color_body, $lightness: 20%);
+	color: color.adjust($color_body, $lightness: 20%);
 	font-size: .9em;
 }
 
@@ -932,7 +932,7 @@ section.entry span.course-lesson-progress {
 	font-size: 16px;
 	position: relative;
 	margin: 20px 0; /* Just for demo spacing */
-	background: adjust-color($bg_light, $lightness: -5%);
+	background: color.adjust($bg_light, $lightness: -5%);
 	-moz-border-radius: 25px;
 	-webkit-border-radius: 25px;
 	border-radius: 25px;
@@ -1014,10 +1014,10 @@ section.entry span.course-lesson-progress {
 			}
 
 			a {
-				color: adjust-color($error, $lightness: -10%);
+				color: color.adjust($error, $lightness: -10%);
 
 				&:hover {
-					color: adjust-color($error, $lightness: -15%);
+					color: color.adjust($error, $lightness: -15%);
 				}
 			}
 		}
@@ -1031,10 +1031,10 @@ section.entry span.course-lesson-progress {
 			}
 
 			a {
-				color: adjust-color($success, $lightness: -10%);
+				color: color.adjust($success, $lightness: -10%);
 
 				&:hover {
-					color: adjust-color($success, $lightness: -15%);
+					color: color.adjust($success, $lightness: -15%);
 				}
 			}
 		}
@@ -1113,8 +1113,8 @@ section.entry span.course-lesson-progress {
 			text-transform: uppercase;
 			float: right;
 			background: none;
-			color: adjust-color($success, $lightness: -10%);
-			border: 2px solid adjust-color($success, $lightness: -10%);
+			color: color.adjust($success, $lightness: -10%);
+			border: 2px solid color.adjust($success, $lightness: -10%);
 
 			&:hover {
 				background: $success;
@@ -1154,7 +1154,7 @@ section.entry span.course-lesson-progress {
 		}
 
 		&:hover {
-			background: adjust-color($bg_light, $lightness: -3%);
+			background: color.adjust($bg_light, $lightness: -3%);
 		}
 	}
 }

diff --git a/assets/css/notices.scss b/assets/css/notices.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "mixins";
 
 .sensei-lms-notice {
@@ -51,10 +52,10 @@
 		}
 
 		a {
-			color: adjust-color($color_body, $lightness: -10%);
+			color: color.adjust($color_body, $lightness: -10%);
 
 			&:hover {
-				color: adjust-color($color_body, $lightness: -15%);
+				color: color.adjust($color_body, $lightness: -15%);
 			}
 		}
 	}
@@ -68,27 +69,27 @@
 		}
 
 		a {
-			color: adjust-color($error, $lightness: -10%);
+			color: color.adjust($error, $lightness: -10%);
 
 			&:hover {
-				color: adjust-color($error, $lightness: -15%);
+				color: color.adjust($error, $lightness: -15%);
 			}
 		}
 	}
 
 	&.success {
-		background: adjust-color( $success, $lightness: 35% );
+		background: color.adjust( $success, $lightness: 35% );
 
 		&:before {
 			color: $success;
 			content: '\f058';
 		}
 
 		a {
-			color: adjust-color($success, $lightness: -10%);
+			color: color.adjust($success, $lightness: -10%);
 
 			&:hover {
-				color: adjust-color($success, $lightness: -15%);
+				color: color.adjust($success, $lightness: -15%);
 			}
 		}
 	}

diff --git a/assets/css/settings.scss b/assets/css/settings.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "mixins";
 
 /*-----------------------------------------------------------------------------------*/
@@ -306,7 +307,7 @@ table.wp_list_table_grading_mains, {
 		}
 
 		.not-enrolled {
-			background: adjust-color($bg_light, $lightness: -5%);
+			background: color.adjust($bg_light, $lightness: -5%);
 		}
 
 		.enrolled {
@@ -325,7 +326,7 @@ table.wp_list_table_grading_mains, {
 table.wp_list_table_grading_mains {
 	.user_status {
 		.ungraded {
-			background: adjust-color($bg_light, $lightness: -5%);
+			background: color.adjust($bg_light, $lightness: -5%);
 		}
 
 		.in-progress {
@@ -452,7 +453,7 @@ table.wp_list_table_sensei_learner_admins {
 	}
 
 	.does-not-provide-enrolment {
-		color: adjust-color($bg_light, $lightness: -40%);
+		color: color.adjust($bg_light, $lightness: -40%);
 
 		&:before {
 			font-family: dashicons;
@@ -532,7 +533,7 @@ table.wp_list_table_sensei_learner_admins {
 		&.user_right {
 			.grading-mark.icon_right {
 				&:after {
-					color: adjust-color($success, $lightness: -15%) !important;
+					color: color.adjust($success, $lightness: -15%) !important;
 				}
 			}
 
@@ -546,7 +547,7 @@ table.wp_list_table_sensei_learner_admins {
 		&.user_wrong {
 			.grading-mark.icon_wrong {
 				&:after {
-					color: adjust-color($error, $lightness: -15%) !important;
+					color: color.adjust($error, $lightness: -15%) !important;
 				}
 			}
 
@@ -683,7 +684,7 @@ table.wp_list_table_sensei_learner_admins {
 
 					&:hover {
 						&:after {
-							color: adjust-color($success, $lightness: -7%);
+							color: color.adjust($success, $lightness: -7%);
 						}
 					}
 				}
@@ -696,7 +697,7 @@ table.wp_list_table_sensei_learner_admins {
 
 					&:hover {
 						&:after {
-							color: adjust-color($error, $lightness: -7%);
+							color: color.adjust($error, $lightness: -7%);
 						}
 					}
 				}

diff --git a/assets/setup-wizard/features/style.scss b/assets/setup-wizard/features/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bar-color: #217D7C;
 
 @keyframes bar-animation {
@@ -30,9 +32,9 @@ $bar-color: #217D7C;
 		background-color: $bar-color;
 		background-image: linear-gradient(
 			135deg,
-			adjust-color($bar-color, $lightness: 5%) 25%, $bar-color 25%,
-			$bar-color 50%, adjust-color($bar-color, $lightness: 5%) 50%,
-			adjust-color($bar-color, $lightness: 5%) 75%, $bar-color 75%
+			color.adjust($bar-color, $lightness: 5%) 25%, $bar-color 25%,
+			$bar-color 50%, color.adjust($bar-color, $lightness: 5%) 50%,
+			color.adjust($bar-color, $lightness: 5%) 75%, $bar-color 75%
 		);
 		background-size: 50px 50px;
 		height: 100%;

diff --git a/assets/shared/styles/wp-admin.scss b/assets/shared/styles/wp-admin.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import 'variables';
 
 .button {
@@ -9,13 +10,13 @@
 
 	&:hover,
 	&:active {
-		color: adjust-color($primary, $lightness: 5%);
-		border-color: adjust-color($primary, $lightness: 5%);
+		color: color.adjust($primary, $lightness: 5%);
+		border-color: color.adjust($primary, $lightness: 5%);
 	}
 
 	&:focus {
-		color: adjust-color($primary, $lightness: -5%);
-		border-color: adjust-color($primary, $lightness: -5%);
+		color: color.adjust($primary, $lightness: -5%);
+		border-color: color.adjust($primary, $lightness: -5%);
 	}
 }
 
@@ -26,13 +27,13 @@
 
 	&:hover,
 	&:active {
-		background-color: adjust-color($primary, $lightness: 5%);
-		border-color: adjust-color($primary, $lightness: 5%);
+		background-color: color.adjust($primary, $lightness: 5%);
+		border-color: color.adjust($primary, $lightness: 5%);
 	}
 
 	&:focus {
-		background-color: adjust-color($primary, $lightness: -5%);
-		border-color: adjust-color($primary, $lightness: -5%);
+		background-color: color.adjust($primary, $lightness: -5%);
+		border-color: color.adjust($primary, $lightness: -5%);
 		box-shadow: 0 0 0 1px $white, 0 0 0 3px $primary;
 	}
 

diff --git a/assets/shared/styles/wp-components.scss b/assets/shared/styles/wp-components.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @import 'variables';
 
 @import '~@wordpress/base-styles/colors';
@@ -40,11 +41,11 @@ body.sensei-color {
 
 			&:hover,
 			&:active {
-				color: adjust-color($link, $lightness: 20%);
+				color: color.adjust($link, $lightness: 20%);
 			}
 
 			&:not(.components-button):focus {
-				color: adjust-color($link, $lightness: -20%);
+				color: color.adjust($link, $lightness: -20%);
 				box-shadow: 0 0 0 1px $link-primary, 0 0 2px 1px rgba($link-primary, 0.8);
 			}
 		}
@@ -54,11 +55,11 @@ body.sensei-color {
 
 			&:hover,
 			&:active {
-				color: adjust-color($link-primary, $lightness: 20%);
+				color: color.adjust($link-primary, $lightness: 20%);
 			}
 
 			&:focus {
-				color: adjust-color($link-primary, $lightness: -20%);
+				color: color.adjust($link-primary, $lightness: -20%);
 			}
 		}