@clayui/css 3.55.0 → 3.56.0

package/src/scss/components/_breadcrumbs.scss

@@ -1,81 +1,30 @@
 .breadcrumb {
-	background-color: $breadcrumb-bg;
-
-	@include border-radius($breadcrumb-border-radius);
-
-	display: flex;
-	flex-wrap: wrap;
-	font-size: $breadcrumb-font-size;
-	list-style: none;
-	margin-bottom: $breadcrumb-margin-bottom;
-	padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+	@include clay-css($breadcrumb);
 }
 
 .breadcrumb-link {
 	@include clay-link($breadcrumb-link);
-
-	> .breadcrumb-text-truncate {
-		text-decoration: $breadcrumb-link-text-decoration;
-
-		&:hover,
-		&:focus {
-			text-decoration: $breadcrumb-link-hover-text-decoration;
-		}
-	}
 }
 
 .breadcrumb-item {
-	font-size: $breadcrumb-font-size;
-	font-weight: $breadcrumb-font-weight;
-
-	@if ($breadcrumb-divider-svg-icon) {
-		margin-right: 0.5em;
-		position: relative;
-	}
+	@include clay-css($breadcrumb-item);
 
 	&.active,
 	.active {
-		color: $breadcrumb-active-color;
-		font-weight: $breadcrumb-active-font-weight;
+		@include clay-css(map-get($breadcrumb-item, active));
 	}
 
 	> span {
-		text-transform: $breadcrumb-text-transform;
+		text-transform: inherit;
 	}
 
 	+ .breadcrumb-item {
-		padding-left: if(
-			$breadcrumb-divider-svg-icon,
-			1em,
-			$breadcrumb-item-padding
-		);
+		@include clay-css(map-get($breadcrumb-item, breadcrumb-item));
 
 		&::before {
-			color: $breadcrumb-divider-color;
-			display: block;
-			float: left;
-
-			@if ($breadcrumb-divider-svg-icon) {
-				background-image: $breadcrumb-divider-svg-icon;
-				background-repeat: no-repeat;
-				background-size: 100%;
-				content: '';
-				height: $breadcrumb-divider-svg-icon-height;
-				left: 0;
-				margin-top: calc(
-					#{math-sign($breadcrumb-divider-svg-icon-height)} / 2
-				);
-				padding: 0;
-				position: absolute;
-				top: 50%;
-				width: $breadcrumb-divider-svg-icon-width;
-			} @else {
-				content: escape-svg($breadcrumb-divider);
-				font-family: $breadcrumb-divider-font-family;
-				font-weight: $breadcrumb-divider-font-weight;
-				padding-left: 0.4em;
-				padding-right: 0.4em;
-			}
+			@include clay-css(
+				map-deep-get($breadcrumb-item, breadcrumb-item, before)
+			);
 		}
 	}
 
@@ -95,22 +44,14 @@
 	}
 
 	.dropdown-toggle {
-		text-decoration: none;
-
-		&:hover,
-		&:focus {
-			text-decoration: none;
-		}
+		@include clay-button-variant(
+			map-get($breadcrumb-item, dropdown-toggle)
+		);
 	}
 }
 
 .breadcrumb-text-truncate {
-	display: inline-block;
-	max-width: $breadcrumb-text-truncate-max-width;
-
-	@include text-truncate;
-
-	vertical-align: bottom;
+	@include clay-css($breadcrumb-text-truncate);
 
 	@include clay-scale-component {
 		max-width: $breadcrumb-text-truncate-max-width-mobile;

package/src/scss/functions/_color-functions.scss

@@ -34,9 +34,14 @@
 /// An alias for the Sass `darken` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to darken
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-darken($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-darken(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -49,9 +54,14 @@
 /// An alias for the Sass `lighten` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to lighten
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-lighten($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-lighten(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -64,9 +74,14 @@
 /// An alias for the Sass `adjust-hue` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to adjust
 /// @param {Number} $degrees - A number between -360deg and 360deg
-
-@function clay-adjust-hue($color, $degrees) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-adjust-hue(
+	$color,
+	$degrees,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -79,9 +94,14 @@
 /// An alias for the Sass `desaturate` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to desaturate
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-desaturate($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-desaturate(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -94,9 +114,14 @@
 /// An alias for the Sass `saturate` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to saturate
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-saturate($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-saturate(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -110,17 +135,23 @@
 /// @param {Color} $color1 - The first color to mix
 /// @param {Color} $color2 - The second color to mix
 /// @param {Number} $weight - A number between 0% and 100%
-
-@function clay-mix($color1, $color2, $weight: 50%) {
-	@if (is-css-var($color1) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-mix(
+	$color1,
+	$color2,
+	$weight: 50%,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color1) and not $fallback) {
 		@return $color1;
 	}
 
-	@if (is-css-var($color2) and not clay-color-functions-process-fallback()) {
+	@if (is-css-var($color2) and not $fallback) {
 		@return $color2;
 	}
 
-	@if (is-css-var($weight) and not clay-color-functions-process-fallback()) {
+	@if (is-css-var($weight) and not $fallback) {
 		@return $weight;
 	}
 
@@ -133,9 +164,13 @@
 
 /// An alias for the Sass `blue` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the blue channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-blue($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-blue(
+	$color,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -146,9 +181,13 @@
 
 /// An alias for the Sass `green` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the green channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-green($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-green(
+	$color,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -159,9 +198,10 @@
 
 /// An alias for the Sass `red` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the red channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-red($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-red($color, $fallback: clay-color-functions-process-fallback()) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 

package/src/scss/functions/_global-functions.scss

@@ -477,9 +477,16 @@
 /// @param {Color} $color - The color to convert
 /// @param {Color} $dark[$yiq-text-dark] - The color to return if `$color` >= `$yiq-contrasted-threshold`
 /// @param {Color} $light[$yiq-text-light] - The color to return if `$color` < `$yiq-contrasted-threshold`
-
-@function color-yiq($color, $dark: null, $light: null, $threshold: null) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function color-yiq(
+	$color,
+	$dark: null,
+	$light: null,
+	$threshold: null,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}