@clayui/css 3.163.0 → 3.164.0

package/src/scss/cadmin/variables/_menubar.scss

@@ -9,11 +9,10 @@ $cadmin-menubar-primary: map-deep-merge(
 			border-radius: 0px,
 			color: $cadmin-gray-900,
 			line-height: 24px,
-			transition: #{color 0.15s ease-in-out,
-			background-color 0.15s ease-in-out,
-			border-color 0.15s ease-in-out,
-			box-shadow 0.15s ease-in-out},
-
+			transition:
+				unquote(
+					'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
+				),
 			before: (
 				bottom: 0px,
 				content: '',
@@ -220,11 +219,10 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			letter-spacing: 0.32px,
 			line-height: 24px,
 			margin-bottom: 4px,
-			transition: #{color 0.15s ease-in-out,
-			background-color 0.15s ease-in-out,
-			border-color 0.15s ease-in-out,
-			box-shadow 0.15s ease-in-out},
-
+			transition:
+				unquote(
+					'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
+				),
 			before: (
 				border-radius: $cadmin-border-radius 0px 0px
 					$cadmin-border-radius,
@@ -237,7 +235,8 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			),
 
 			hover: (
-				background-color: rgba($cadmin-gray-900, 0.04),
+				background-color:
+					unquote('hsl(from #{$cadmin-gray-900} h s l / 0.04)'),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 				letter-spacing: 0px,
@@ -268,7 +267,8 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			),
 
 			active-class: (
-				background-color: rgba($cadmin-primary, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 				letter-spacing: 0px,
@@ -282,7 +282,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
-				color: rgba($cadmin-black, 0.3),
+				color: unquote('hsl(from #{$cadmin-black} h s l / 0.3)'),
 				font-weight: $cadmin-font-weight-normal,
 				letter-spacing: 0.32px,
 
@@ -325,7 +325,10 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 					),
 
 					hover: (
-						background-color: rgba($cadmin-gray-900, 0.04),
+						background-color:
+							unquote(
+								'hsl(from #{$cadmin-gray-900} h s l / 0.04)'
+							),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 					),
@@ -339,7 +342,8 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 					),
 
 					active-class: (
-						background-color: rgba($cadmin-primary, 0.06),
+						background-color:
+							unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
@@ -362,7 +366,11 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 					border-color: $cadmin-gray-300,
 					border-radius: clay-enable-rounded($cadmin-border-radius),
 					box-shadow:
-						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
+						clay-enable-shadows(
+							unquote(
+								'0 1px 5px -1px hsl(from #{$cadmin-black} h s l / 0.3)'
+							)
+						),
 				),
 
 				menubar-toggler: (
@@ -523,11 +531,10 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			color: $cadmin-gray-600,
 			letter-spacing: 0.32px,
 			margin-bottom: 4px,
-			transition: #{color 0.15s ease-in-out,
-			background-color 0.15s ease-in-out,
-			border-color 0.15s ease-in-out,
-			box-shadow 0.15s ease-in-out},
-
+			transition:
+				unquote(
+					'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
+				),
 			before: (
 				border-radius: $cadmin-border-radius 0px 0px
 					$cadmin-border-radius,
@@ -540,7 +547,8 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			),
 
 			hover: (
-				background-color: rgba($cadmin-gray-900, 0.04),
+				background-color:
+					unquote('hsl(from #{$cadmin-gray-900} h s l / 0.04)'),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 				letter-spacing: 0px,
@@ -569,7 +577,8 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			),
 
 			active-class: (
-				background-color: rgba($cadmin-primary, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 				letter-spacing: 0px,
@@ -583,7 +592,7 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
-				color: rgba($cadmin-black, 0.3),
+				color: unquote('hsl(from #{$cadmin-black} h s l / 0.3)'),
 				font-weight: $cadmin-font-weight-normal,
 				letter-spacing: 0.32px,
 
@@ -626,7 +635,10 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 					),
 
 					hover: (
-						background-color: rgba($cadmin-gray-900, 0.04),
+						background-color:
+							unquote(
+								'hsl(from #{$cadmin-gray-900} h s l / 0.04)'
+							),
 						box-shadow: none,
 					),
 
@@ -638,7 +650,8 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 					),
 
 					active-class: (
-						background-color: rgba($cadmin-primary, 0.06),
+						background-color:
+							unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 						box-shadow: none,
 						color: $cadmin-gray-900,
 						font-weight: $cadmin-font-weight-semi-bold,
@@ -661,7 +674,11 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 					border-color: $cadmin-gray-300,
 					border-radius: clay-enable-rounded($cadmin-border-radius),
 					box-shadow:
-						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
+						clay-enable-shadows(
+							unquote(
+								'0 1px 5px -1px hsl(from #{$cadmin-black} h s l / 0.3)'
+							)
+						),
 				),
 
 				menubar-toggler: (

package/src/scss/cadmin/variables/_modals.scss

@@ -1,5 +1,7 @@
-$cadmin-modal-backdrop-bg: $cadmin-gray-800 !default;
-$cadmin-modal-backdrop-opacity: 0.8 !default;
+$cadmin-modal-backdrop-bg: var(
+	--cadmin-modal-backdrop-background-color
+) !default;
+$cadmin-modal-backdrop-opacity: var(--cadmin-modal-backdrop-opacity) !default;
 
 $cadmin-modal-backdrop: () !default;
 $cadmin-modal-backdrop: map-deep-merge(
@@ -45,9 +47,13 @@ $cadmin-modal-content-inner-border-radius: calc(
 	#{$cadmin-modal-content-border-radius} - #{$cadmin-modal-content-border-width}
 ) !default;
 
-$cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
+$cadmin-modal-content-box-shadow-xs: unquote(
+	'0 0 3px 1px hsl(from #{$cadmin-black} h s l / 0.2)'
+) !default;
 
-$cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;
+$cadmin-modal-content-box-shadow-sm-up: unquote(
+	'0 8px 16px hsl(from #{$cadmin-black} h s l / 0.5)'
+) !default;
 
 $cadmin-modal-content: () !default;
 $cadmin-modal-content: map-deep-merge(

package/src/scss/cadmin/variables/_multi-step-nav.scss

@@ -124,7 +124,7 @@ $cadmin-multi-step-item-error: map-deep-merge(
 	(
 		multi-step-icon: (
 			background-color: $cadmin-danger,
-			background-image: clay-icon(times, $cadmin-white),
+			background-image: var(--cadmin-multi-step-item-error-icon, #fff),
 			color: $cadmin-white,
 			text-indent: -100px,
 
@@ -145,18 +145,18 @@ $cadmin-multi-step-item-error: map-deep-merge(
 $cadmin-multi-step-icon-complete-color: $cadmin-white !default;
 
 $cadmin-multi-step-icon-complete-bg: $cadmin-gray-600 !default;
-$cadmin-multi-step-icon-complete-bg-image: clay-icon(
-	check,
-	$cadmin-multi-step-icon-complete-color
+$cadmin-multi-step-icon-complete-bg-image: var(
+	--cadmin-multi-step-icon-complete-icon,
+	clay-icon(check, #fff)
 ) !default;
 $cadmin-multi-step-icon-complete-bg-position: center !default;
 $cadmin-multi-step-icon-complete-bg-size: $cadmin-multi-step-icon-font-size !default;
 
 $cadmin-multi-step-divider-complete-bg: $cadmin-multi-step-icon-complete-bg !default;
 
-$cadmin-multi-step-dropdown-indicator-complete-icon: clay-icon(
-	check,
-	$cadmin-dropdown-link-active-color
+$cadmin-multi-step-dropdown-indicator-complete-icon: var(
+	--cadmin-multi-step-dropdown-indicator-complete-icon,
+	clay-icon(check, #272833)
 ) !default;
 $cadmin-multi-step-dropdown-indicator-complete-width: 14px !default;
 

package/src/scss/cadmin/variables/_navbar.scss

@@ -56,9 +56,8 @@ $cadmin-navbar-toggler-padding-y: 4px !default;
 
 // Navbar Underline
 
-$cadmin-navbar-underline-active-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	22.94
+$cadmin-navbar-underline-active-bg: unquote(
+	'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
 ) !default;
 
 $cadmin-navbar-underline: () !default;
@@ -125,7 +124,9 @@ $cadmin-navbar-dark-brand-color: $cadmin-navbar-dark-active-color !default;
 
 $cadmin-navbar-dark-brand-hover-color: $cadmin-navbar-dark-active-color !default;
 
-$cadmin-navbar-dark-toggler-border-color: rgba($cadmin-white, 0.1) !default;
+$cadmin-navbar-dark-toggler-border-color: unquote(
+	'hsl(from #{$cadmin-white} h s l / 0.1)'
+) !default;
 $cadmin-navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$cadmin-navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 
 // Navbar Light
@@ -142,5 +143,7 @@ $cadmin-navbar-light-brand-color: $cadmin-navbar-light-active-color !default;
 
 $cadmin-navbar-light-brand-hover-color: $cadmin-navbar-light-active-color !default;
 
-$cadmin-navbar-light-toggler-border-color: rgba($cadmin-black, 0.1) !default;
+$cadmin-navbar-light-toggler-border-color: unquote(
+	'hsl(from #{$cadmin-black} h s l / 0.1)'
+) !default;
 $cadmin-navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$cadmin-navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -417,9 +417,9 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 		),
 
 		navbar-brand: (
-			color: rgba(255, 255, 255, 0.9),
+			color: unquote('hsl(from #{$cadmin-white} h s l / 0.9)'),
 			hover: (
-				color: rgba(255, 255, 255, 0.9),
+				color: unquote('hsl(from #{$cadmin-white} h s l / 0.9)'),
 			),
 		),
 

package/src/scss/cadmin/variables/_pagination.scss

@@ -7,14 +7,18 @@ $cadmin-pagination-line-height: 1 !default;
 $cadmin-pagination-padding-x: 10px !default; // 10px
 $cadmin-pagination-padding-y: 0px !default;
 
-$cadmin-pagination-hover-bg: rgba($cadmin-gray-900, 0.04) !default;
+$cadmin-pagination-hover-bg: unquote(
+	'hsl(from #{$cadmin-gray-900} h s l / 0.04)'
+) !default;
 $cadmin-pagination-hover-border-color: transparent !default;
 $cadmin-pagination-hover-color: $cadmin-gray-900 !default;
 
 $cadmin-pagination-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
 $cadmin-pagination-focus-outline: 0 !default;
 
-$cadmin-pagination-active-bg: rgba($cadmin-primary, 0.06) !default;
+$cadmin-pagination-active-bg: unquote(
+	'hsl(from #{$cadmin-primary} h s l / 0.06)'
+) !default;
 $cadmin-pagination-active-border-color: transparent !default;
 $cadmin-pagination-active-color: $cadmin-gray-900 !default;
 

package/src/scss/cadmin/variables/_popovers.scss

@@ -7,7 +7,9 @@ $cadmin-popover-inner-border-radius: calc(
 	#{$cadmin-popover-border-radius} - #{$cadmin-popover-border-width}
 ) !default;
 
-$cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
+$cadmin-popover-box-shadow: unquote(
+	'0 1px 15px -2px hsl(from #{$cadmin-black} h s l / 0.2)'
+) !default;
 $cadmin-popover-font-size: $cadmin-font-size-sm !default;
 $cadmin-popover-max-width: 232px !default; // 232px
 
@@ -135,7 +137,7 @@ $cadmin-popover-header: map-deep-merge(
 		color: $cadmin-popover-header-color,
 		background-color: $cadmin-popover-header-bg,
 		border-bottom: $cadmin-popover-border-width solid
-			clay-darken($cadmin-popover-header-bg, 5%),
+			unquote('hsl(from #{$cadmin-popover-header-bg} h s calc(l - 5))'),
 		border-color: $cadmin-popover-header-border-color,
 		border-top-left-radius:
 			clay-enable-rounded($cadmin-popover-offset-border-width),

package/src/scss/cadmin/variables/_range.scss

@@ -63,7 +63,8 @@ $cadmin-clay-range-input: map-deep-merge(
 			background-color: $cadmin-white,
 			border-radius: 100px,
 			border-width: 0px,
-			box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
+			box-shadow:
+				unquote('0 1px 5px -1px hsl(from #{$cadmin-black} h s l / 0.3)'),
 			height: 24px,
 			width: 24px,
 		),

package/src/scss/cadmin/variables/_resizer.scss

@@ -22,13 +22,24 @@ $cadmin-c-horizontal-resizer: map-merge(
 
 		hover: (
 			before: (
-				background-color: $cadmin-primary-l0,
+				background-color: $cadmin-primary,
+			),
+		),
+
+		active: (
+			before: (
+				background-color: $cadmin-primary-d2,
 			),
 		),
 
 		focus: (
+			box-shadow: $cadmin-component-focus-inset-box-shadow,
+			outline: 0,
+
 			before: (
-				background-color: $cadmin-primary-l0,
+				background-color: $cadmin-primary,
+				bottom: 0.25rem,
+				top: 0.25rem,
 			),
 		),
 	),

package/src/scss/cadmin/variables/_sidebar.scss

@@ -91,17 +91,20 @@ $cadmin-sidebar: map-deep-merge(
 			color: $cadmin-secondary,
 
 			hover: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color:
+					unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				color: $cadmin-gray-900,
 			),
 
 			focus: (
-				background-color: rgba($cadmin-gray-900, 0.03),
+				background-color:
+					unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				color: $cadmin-gray-900,
 			),
 
 			active: (
-				background-color: rgba($cadmin-gray-900, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 				color: $cadmin-gray-900,
 			),
 
@@ -268,7 +271,8 @@ $cadmin-sidebar-light: map-deep-merge(
 		background-color: $cadmin-white,
 		border-color: $cadmin-gray-300,
 		border-left-width: 0px,
-		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
+		box-shadow:
+			unquote('-4px 0 8px -4px hsl(from #{$cadmin-black} h s l / 0.1)'),
 		color: $cadmin-gray-900,
 
 		sidebar-header: (
@@ -282,7 +286,8 @@ $cadmin-sidebar-light: map-deep-merge(
 		),
 
 		sidenav-start: (
-			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
+			box-shadow:
+				unquote('4px 0 8px -4px hsl(from #{$cadmin-black} h s l / 0.1)'),
 		),
 
 		sidebar-dt: (
@@ -396,7 +401,10 @@ $cadmin-sidebar-c-slideout-start: () !default;
 $cadmin-sidebar-c-slideout-start: map-deep-merge(
 	(
 		'.sidebar-light': (
-			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+			box-shadow:
+				unquote(
+					'0.25rem 0 0.5rem -0.25rem hsl(from #{$cadmin-black} h s l / 0.1)'
+				),
 		),
 	),
 	$cadmin-sidebar-c-slideout-start

package/src/scss/cadmin/variables/_stickers.scss

@@ -340,7 +340,7 @@ $cadmin-sticker-danger: map-deep-merge(
 
 // .sticker-light
 
-$cadmin-sticker-light-bg: color-yiq($cadmin-white) !default;
+$cadmin-sticker-light-bg: $cadmin-gray-900 !default;
 $cadmin-sticker-light-border-color: null !default;
 $cadmin-sticker-light-color: $cadmin-light !default;
 

package/src/scss/cadmin/variables/_tables.scss

@@ -26,16 +26,13 @@ $cadmin-table-responsive-margin-bottom: 24px !default;
 // Table
 
 $cadmin-table-bg: $cadmin-white !default;
-$cadmin-table-border-color: $cadmin-gray-300 !default;
+$cadmin-table-border-color: $cadmin-gray-400 !default;
 $cadmin-table-border-width: $cadmin-border-width !default;
 $cadmin-table-color: $cadmin-body-color !default;
 $cadmin-table-font-size: 14px !default;
 $cadmin-table-margin-bottom: 0px !default;
 
-$cadmin-table-hover-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
-) !default;
+$cadmin-table-hover-bg: $cadmin-primary-l3 !default;
 $cadmin-table-hover-color: $cadmin-table-color !default;
 
 $cadmin-table-active-bg: $cadmin-table-hover-bg !default;
@@ -247,20 +244,20 @@ $cadmin-table-action-link: map-deep-merge(
 		width: 32px,
 
 		hover: (
-			background-color: rgba(0, 0, 0, 0.02),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.02)'),
 			color: $cadmin-gray-900,
 			text-decoration: none,
 		),
 
 		focus: (
-			background-color: rgba(0, 0, 0, 0.02),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.02)'),
 			color: $cadmin-gray-900,
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
 
 		active: (
-			background-color: rgba(0, 0, 0, 0.04),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.04)'),
 		),
 
 		lexicon-icon: (
@@ -633,16 +630,19 @@ $cadmin-c-table-nested-rows: map-deep-merge(
 // Table Dark Variant
 
 $cadmin-table-dark-bg: $cadmin-gray-800 !default;
-$cadmin-table-dark-border-color: clay-lighten(
-	$cadmin-table-dark-bg,
-	7.5%
+$cadmin-table-dark-border-color: unquote(
+	'hsl(from #{$cadmin-table-dark-bg} h s l / 0.075)'
 ) !default;
 $cadmin-table-dark-color: $cadmin-white !default;
 
-$cadmin-table-dark-hover-bg: rgba($cadmin-white, 0.075) !default;
+$cadmin-table-dark-hover-bg: unquote(
+	'hsl(from #{$cadmin-white} h s l / 0.075)'
+) !default;
 $cadmin-table-dark-hover-color: $cadmin-table-dark-color !default;
 
-$cadmin-table-dark-accent-bg: rgba($cadmin-white, 0.05) !default;
+$cadmin-table-dark-accent-bg: unquote(
+	'hsl(from #{$cadmin-white} h s l / 0.05)'
+) !default;
 
 // .table-head-bordered
 
@@ -691,7 +691,7 @@ $cadmin-table-border-level: -6 !default;
 // Table List
 
 $cadmin-table-list-bg: $cadmin-white !default;
-$cadmin-table-list-border-color: $cadmin-gray-300 !default;
+$cadmin-table-list-border-color: $cadmin-gray-400 !default;
 $cadmin-table-list-border-x-width: 1px !default;
 $cadmin-table-list-border-y-width: 1px !default;
 
@@ -882,20 +882,20 @@ $cadmin-table-list-action-link: map-deep-merge(
 		width: 32px,
 
 		hover: (
-			background-color: rgba(0, 0, 0, 0.02),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.02)'),
 			color: $cadmin-gray-900,
 			text-decoration: none,
 		),
 
 		focus: (
-			background-color: rgba(0, 0, 0, 0.02),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.02)'),
 			box-shadow: $cadmin-component-focus-box-shadow,
 			color: $cadmin-gray-900,
 			outline: 0,
 		),
 
 		active: (
-			background-color: rgba(0, 0, 0, 0.04),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.04)'),
 		),
 
 		lexicon-icon: (
@@ -1145,7 +1145,10 @@ $cadmin-table-drag: map-deep-merge(
 
 		c-droppable-before: (
 			background-image:
-				linear-gradient($cadmin-orange 50%, rgba(255, 255, 255, 0) 0%),
+				linear-gradient(
+					$cadmin-orange 50%,
+					unquote('hsl(from #{$cadmin-white} h s l / 0)') 0%
+				),
 			background-position: right,
 			background-repeat: repeat-y,
 			background-size: 5px 6px,
@@ -1174,7 +1177,7 @@ $cadmin-table-dragging: map-merge(
 $cadmin-table-clone: () !default;
 $cadmin-table-clone: map-deep-merge(
 	(
-		background-color: rgba($cadmin-primary-l3, 0.9),
+		background-color: unquote('hsl(from #{$cadmin-primary-l3} h s l / 0.9)'),
 		cursor: move,
 		position: absolute,
 		top: 0px,

package/src/scss/cadmin/variables/_tbar.scss

@@ -159,8 +159,10 @@ $cadmin-tbar-light: () !default;
 $cadmin-tbar-light: map-deep-merge(
 	(
 		background-color: $cadmin-white,
-		box-shadow: inset 1px 0 0 0 $cadmin-gray-200#{','} inset -1px 0 0 0
-			$cadmin-gray-200,
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 #{$cadmin-gray-200}, inset -1px 0 0 0 #{$cadmin-gray-200}'
+			),
 		color: $cadmin-secondary,
 
 		tbar-divider-before: (
@@ -201,19 +203,23 @@ $cadmin-tbar-dark-d1: () !default;
 $cadmin-tbar-dark-d1: map-deep-merge(
 	(
 		background-color: $cadmin-dark-d1,
-		box-shadow: inset 1px 0 0 0 rgba($cadmin-white, 0.06) #{','} inset -1px
-			0 0 0 rgba($cadmin-white, 0.06),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06)'
+			),
 		color: $cadmin-gray-500,
 
 		tbar-divider-before: (
 			before: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
 		),
 
 		tbar-divider-after: (
 			after: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
 		),
 
@@ -231,7 +237,8 @@ $cadmin-tbar-dark-d1: map-deep-merge(
 			),
 
 			active: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
 			),
 
@@ -256,20 +263,24 @@ $cadmin-tbar-dark-l2: () !default;
 $cadmin-tbar-dark-l2: map-deep-merge(
 	(
 		background-color: $cadmin-dark-l2,
-		box-shadow: inset 1px 0 0 0 rgba($cadmin-white, 0.06) #{','} inset -1px
-			0 0 0 rgba($cadmin-white, 0.06),
-		border-color: rgba($cadmin-white, 0.06),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06)'
+			),
+		border-color: unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 		color: $cadmin-gray-500,
 
 		tbar-divider-before: (
 			before: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
 		),
 
 		tbar-divider-after: (
 			after: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
 		),
 
@@ -287,7 +298,8 @@ $cadmin-tbar-dark-l2: map-deep-merge(
 			),
 
 			active: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
 			),
 		),
@@ -525,7 +537,9 @@ $cadmin-subnav-tbar-primary-disabled: map-deep-merge(
 		background-color:
 			setter(
 				map-get($cadmin-subnav-tbar-primary-disabled, bg-color),
-				clay-lighten(clay-desaturate($cadmin-primary, 27.03), 37.06)
+				unquote(
+					'hsl(from #{$cadmin-primary} h calc(s - 27.03%) calc(l + 37.06%))'
+				)
 			),
 		color: #8e94aa,
 

package/src/scss/cadmin/variables/_tooltip.scss

@@ -1,6 +1,8 @@
 $cadmin-tooltip-bg: $cadmin-dark-d2 !default;
 $cadmin-tooltip-border-radius: $cadmin-border-radius !default;
-$cadmin-tooltip-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.4) !default;
+$cadmin-tooltip-box-shadow: unquote(
+	'0 1px 4px 0px hsl(from #{$cadmin-black} h s l / 0.4)'
+) !default;
 $cadmin-tooltip-color: $cadmin-white !default;
 $cadmin-tooltip-font-size: 14px !default; // 14px
 $cadmin-tooltip-margin: 0px !default;

package/src/scss/cadmin/variables/_treeview.scss

@@ -279,7 +279,7 @@ $cadmin-treeview-light: map-deep-merge(
 
 			disabled: (
 				background-color: transparent,
-				color: rgba($cadmin-gray-600, 0.5),
+				color: unquote('hsl(from #{$cadmin-gray-600} h s l / 0.5)'),
 			),
 
 			show: (
@@ -339,7 +339,7 @@ $cadmin-treeview-dark: map-deep-merge(
 
 			disabled: (
 				background-color: transparent,
-				color: rgba($cadmin-secondary-l1, 0.5),
+				color: unquote('hsl(from #{$cadmin-secondary-l1} h s l / 0.5)'),
 			),
 
 			show: (