fix(@clayui/css): Mixins use Clay Color Functions instead of Sass col…

…or functions
liferay · Oct 1, 2021 · baaddfc · baaddfc
1 parent e7b1abf
commit baaddfc
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 29 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_alerts.scss b/packages/clay-css/src/scss/mixins/_alerts.scss
@@ -11,11 +11,11 @@
 	color: $color;
 
 	hr {
-		border-top-color: darken($border, 5%);
+		border-top-color: clay-darken($border, 5%);
 	}
 
 	.alert-link {
-		color: darken($color, 10%);
+		color: clay-darken($color, 10%);
 	}
 }
 

diff --git a/packages/clay-css/src/scss/mixins/_background.scss b/packages/clay-css/src/scss/mixins/_background.scss
@@ -11,7 +11,7 @@
 	button#{$parent} {
 		&:hover,
 		&:focus {
-			background-color: darken($color, 10%) !important;
+			background-color: clay-darken($color, 10%) !important;
 		}
 	}
 
@@ -26,11 +26,7 @@
 @mixin bg-gradient-variant($parent, $color) {
 	#{$parent} {
 		background: $color
-			linear-gradient(
-				180deg,
-				mix(clay-get-fallback($body-bg), $color, 15%),
-				$color
-			)
+			linear-gradient(180deg, clay-mix($body-bg, $color, 15%), $color)
 			repeat-x !important;
 	}
 }

diff --git a/packages/clay-css/src/scss/mixins/_badges.scss b/packages/clay-css/src/scss/mixins/_badges.scss
@@ -69,13 +69,13 @@
 
 	@at-root a#{&} {
 		&:hover {
-			background-color: darken($bg, 10%);
+			background-color: clay-darken($bg, 10%);
 			color: color-yiq($bg);
 		}
 
 		&:focus,
 		&.focus {
-			background-color: darken($bg, 10%);
+			background-color: clay-darken($bg, 10%);
 			box-shadow: 0 0 0 $badge-focus-width rgba($bg, 0.5);
 			color: color-yiq($bg);
 			outline: 0;

diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss
@@ -485,10 +485,10 @@
 @mixin button-variant(
 	$background,
 	$border,
-	$hover-background: darken($background, 7.5%),
-	$hover-border: darken($border, 10%),
-	$active-background: darken($background, 10%),
-	$active-border: darken($border, 12.5%)
+	$hover-background: clay-darken($background, 7.5%),
+	$hover-border: clay-darken($border, 10%),
+	$active-background: clay-darken($background, 10%),
+	$active-border: clay-darken($border, 12.5%)
 ) {
 	@include gradient-bg($background);
 
@@ -517,13 +517,13 @@
 					0
 					0
 					$btn-focus-width
-					rgba(mix(color-yiq($background), $border, 15%), 0.5);
+					rgba(clay-mix(color-yiq($background), $border, 15%), 0.5);
 		} @else {
 			box-shadow: 0
 				0
 				0
 				$btn-focus-width
-				rgba(mix(color-yiq($background), $border, 15%), 0.5);
+				rgba(clay-mix(color-yiq($background), $border, 15%), 0.5);
 		}
 	}
 
@@ -556,13 +556,16 @@
 						0
 						0
 						$btn-focus-width
-						rgba(mix(color-yiq($background), $border, 15%), 0.5);
+						rgba(
+							clay-mix(color-yiq($background), $border, 15%),
+							0.5
+						);
 			} @else {
 				box-shadow: 0
 					0
 					0
 					$btn-focus-width
-					rgba(mix(color-yiq($background), $border, 15%), 0.5);
+					rgba(clay-mix(color-yiq($background), $border, 15%), 0.5);
 			}
 		}
 	}

diff --git a/packages/clay-css/src/scss/mixins/_forms.scss b/packages/clay-css/src/scss/mixins/_forms.scss
@@ -160,9 +160,9 @@
 
 			&:checked {
 				~ .custom-control-label::before {
-					@include gradient-bg(lighten($color, 10%));
+					@include gradient-bg(clay-lighten($color, 10%));
 
-					border-color: lighten($color, 10%);
+					border-color: clay-lighten($color, 10%);
 				}
 			}
 

diff --git a/packages/clay-css/src/scss/mixins/_gradients.scss b/packages/clay-css/src/scss/mixins/_gradients.scss
@@ -20,13 +20,9 @@
 		background: $color
 			linear-gradient(
 				180deg,
-				mix(
+				clay-mix(
 					setter(
-						if(
-							variable-exists(body-bg),
-							clay-get-fallback($body-bg),
-							$cadmin-body-bg
-						),
+						if(variable-exists(body-bg), $body-bg, $cadmin-body-bg),
 						#fff
 					),
 					$color,

diff --git a/packages/clay-css/src/scss/mixins/_list-group.scss b/packages/clay-css/src/scss/mixins/_list-group.scss
@@ -23,7 +23,7 @@
 		&.list-group-item-action {
 			&:hover,
 			&:focus {
-				background-color: darken($background, 5%);
+				background-color: clay-darken($background, 5%);
 				color: $color;
 			}
 

diff --git a/packages/clay-css/src/scss/mixins/_tables.scss b/packages/clay-css/src/scss/mixins/_tables.scss
@@ -32,7 +32,7 @@
 	// Note: this is not available for cells or rows within `thead` or `tfoot`.
 
 	.table-hover {
-		$hover-background: darken($background, 5%);
+		$hover-background: clay-darken($background, 5%);
 
 		.table-#{$state} {
 			@include hover() {

diff --git a/packages/clay-css/src/scss/mixins/_type.scss b/packages/clay-css/src/scss/mixins/_type.scss
@@ -17,7 +17,7 @@
 		a#{$parent} {
 			&:hover,
 			&:focus {
-				color: darken(
+				color: clay-darken(
 					$color,
 					$emphasized-link-hover-darken-percentage
 				) !important;