@clayui/css 3.163.0 → 3.165.0

package/src/scss/atlas-custom-properties/variables/_cards.scss

@@ -1,26 +1,26 @@
 $card-bg: var(--card-bg, $white) !default;
-$card-border-color: var(
-	--card-border-color,
-	unquote('hsl(from #{$black} h s l / 0.125)')
-) !default;
+$card-border-color: var(--card-border-color, $secondary-l2) !default;
+$card-border-radius: var(--card-border-radius, $border-radius-xl) !default;
 $card-border-style: var(--card-border-style, solid) !default;
-$card-border-width: var(--card-border-width, 0px) !default;
-
-$card-border-radius: var(--card-border-radius, $border-radius) !default;
-$card-inner-border-radius: calc(
-	#{$card-border-radius} - #{$card-border-width}
-) !default;
-
-$card-box-shadow: var(
-	--card-box-shadow,
-	0 1px 3px -1px rgba(0, 0, 0, 0.6)
-) !default;
+$card-border-width: var(--card-border-width, 1px) !default;
+$card-box-shadow: var(--card-box-shadow, none) !default;
 $card-color: var(--card-color, inherit) !default;
 $card-height: null !default;
 $card-margin-bottom: var(--card-margin-bottom, 24px) !default;
-
 $card-spacer-x: var(--card-spacer-x, 20px) !default;
 $card-spacer-y: var(--card-spacer-y, 12px) !default;
+$card-transition:
+	$component-transition,
+	transform 0.15s ease-in-out !default;
+
+$card-hover-box-shadow: var(
+	--card-hover-box-shadow,
+	0 0.25rem 0.75rem -0.25rem unquote('hsl(from #{$black} h s l / 0.25)')
+) !default;
+
+$card-inner-border-radius: calc(
+	#{$card-border-radius} - #{$card-border-width}
+) !default;
 
 $card-cap-bg: unquote('hsl(from #{$black} h s l / 0.03)') !default;
 $card-cap-color: null !default;
@@ -186,12 +186,15 @@ $card: map-deep-merge(
 		border-radius: clay-enable-rounded($card-border-radius),
 		border-style: $card-border-style,
 		border-width: $card-border-width,
-		box-shadow: clay-enable-shadows($card-box-shadow),
 		display: block,
 		height: $card-height,
 		margin-bottom: $card-margin-bottom,
 		min-width: 0,
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $card-border-width,
 		position: relative,
+		transition: $card-transition,
 		word-wrap: break-word,
 
 		aspect-ratio: (
@@ -216,6 +219,10 @@ $card: map-deep-merge(
 			margin-left: 0,
 			margin-right: 0,
 		),
+
+		hover: (
+			box-shadow: clay-enable-shadows($card-hover-box-shadow),
+		),
 	),
 	$card
 );
@@ -399,14 +406,9 @@ $checkbox-right-card-padding: var(
 
 $checkbox-position: var(--checkbox-position, 16px) !default;
 
-$form-check-card-checked-box-shadow: var(
-	--form-check-card-checked-box-shadow,
-	0 0 0 2px unquote('hsl(from #{$component-active-bg} h s calc(l + 22.94))')
-) !default;
-
 // .form-check-card
 
-$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+$form-check-card-checked-box-shadow: c-unset !default;
 
 $form-check-card: () !default;
 $form-check-card: map-deep-merge(
@@ -417,19 +419,32 @@ $form-check-card: map-deep-merge(
 
 		hover: (
 			card: (
-				box-shadow: $form-check-card-checked-box-shadow,
+				border-color: $primary-l1,
+				outline-color: $primary-l1,
 			),
 		),
 
 		active: (
 			card: (
-				box-shadow: $form-check-card-checked-box-shadow,
+				border-color: $primary,
+				outline-color: $primary,
 			),
 		),
 
 		checked: (
 			card: (
-				box-shadow: $form-check-card-checked-box-shadow,
+				border-color: $primary,
+				outline-color: $primary,
+			),
+		),
+
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $card-border-color,
+				outline-color: transparent,
 			),
 		),
 
@@ -471,12 +486,6 @@ $form-check-card: map-deep-merge(
 
 			custom-control-input: (
 				z-index: 2,
-
-				checked: (
-					card: (
-						box-shadow: $form-check-card-checked-box-shadow,
-					),
-				),
 			),
 		),
 	),
@@ -760,24 +769,28 @@ $card-interactive: () !default;
 $card-interactive: map-deep-merge(
 	(
 		cursor: $link-cursor,
-		outline: 0,
-		transition: $component-transition,
+		outline: c-unset,
+		transition: c-unset,
 
 		hover: (
-			background-color: #f7f8f9,
+			background-color: $gray-100,
 			text-decoration: none,
 		),
 
 		focus: (
-			box-shadow: #{0 0 0 2px #fff,
-			0 0 0 4px #719aff},
+			border-color: $primary-l1,
+			box-shadow: none,
+			outline-color: $primary-l1,
+			outline-offset: 0,
+			outline-style: solid,
+			outline-width: $card-border-width,
 		),
 
 		active: (
-			background-color: #f1f2f5,
+			background-color: $gray-200,
 		),
 
-		after-highlight: $card-interactive-after-highlight,
+		after-highlight: c-unset,
 
 		card-body: $card-interactive-card-body,
 	),
@@ -786,6 +799,10 @@ $card-interactive: map-deep-merge(
 
 // Card Interactive Primary
 
+$card-interactive-primary-hover-box-shadow: unquote(
+	'#{$card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$primary} inset'
+) !default;
+
 $card-interactive-primary-after-highlight: () !default;
 $card-interactive-primary-after-highlight: map-deep-merge(
 	(
@@ -807,15 +824,18 @@ $card-interactive-primary-after-highlight: map-deep-merge(
 $card-interactive-primary: () !default;
 $card-interactive-primary: map-deep-merge(
 	(
+		hover: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
 		focus: (
-			background-color: $gray-100,
+			box-shadow: $card-interactive-primary-hover-box-shadow,
 		),
 
 		active: (
-			background-color: $gray-200,
+			box-shadow: $card-interactive-primary-hover-box-shadow,
 		),
-
-		after-highlight: $card-interactive-primary-after-highlight,
+		after-highlight: c-unset,
 	),
 	$card-interactive-primary
 );
@@ -829,14 +849,10 @@ $card-interactive-secondary: map-deep-merge(
 
 		hover: (
 			background-color: $white,
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
+			border-color: c-unset,
+			box-shadow: c-unset,
 			color: $gray-900,
-		),
-
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
+			transform: translateY(-0.25rem),
 		),
 
 		active: (
@@ -851,6 +867,12 @@ $card-interactive-secondary: map-deep-merge(
 $card-type-asset: () !default;
 $card-type-asset: map-deep-merge(
 	(
+		transition: $card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
 			border-color: $gray-300,
 			border-style: solid,
@@ -903,6 +925,10 @@ $card-type-asset: map-deep-merge(
 			align-items: flex-start,
 		),
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
 			margin-right: -8px,
 			margin-top: -3px,
@@ -942,7 +968,7 @@ $product-card: map-deep-merge(
 	(
 		aspect-ratio: (
 			background-color: $white,
-			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
+			background-image: linear-gradient(0deg, $gray-300, $gray-300),
 		),
 
 		card-body: (
@@ -1155,6 +1181,10 @@ $template-card: () !default;
 $template-card: map-deep-merge(
 	(
 		card-body: $template-card-body,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
 	),
 	$template-card
 );

package/src/scss/atlas-custom-properties/variables/_clay-color.scss

@@ -508,8 +508,8 @@ $clay-color-slider: map-deep-merge(
 
 			focus: (
 				clay-range-thumb: (
-					box-shadow: #{0 0 0 2px $white,
-					0 0 0 4px $primary-l1},
+					box-shadow:
+						unquote('0 0 0 2px #{$white},0 0 0 4px #{$primary-l1}'),
 				),
 			),
 		),

package/src/scss/atlas-custom-properties/variables/_custom-forms.scss

@@ -32,7 +32,7 @@ $custom-control-indicator-border-color: $gray-600 !default;
 $custom-control-indicator-border-style: solid !default;
 $custom-control-indicator-border-width: $border-width !default;
 $custom-control-indicator-box-shadow: none !default;
-$custom-control-indicator-position-top: 0px !default;
+$custom-control-indicator-position-top: 0rem !default;
 
 $custom-control-indicator-focus-border-color: $custom-control-indicator-border-color !default;
 $custom-control-indicator-focus-box-shadow: $component-focus-box-shadow !default;
@@ -83,6 +83,13 @@ $custom-control-indicator-disabled-checked-border-color: $custom-control-indicat
 
 $custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;
 
+// .custom-control-input
+
+$custom-control-input-size: 1.5rem !default;
+$custom-control-input-offset: calc(
+	(#{$custom-control-input-size} - #{$custom-control-indicator-size}) / -2
+) !default;
+
 // .custom-control
 
 $custom-control-cursor: null !default;
@@ -146,12 +153,13 @@ $custom-control-label: map-deep-merge(
 	(
 		color: $custom-control-label-color,
 		cursor: $custom-control-description-cursor,
+		display: inline-block,
 		font-size: $custom-control-description-font-size,
 		font-weight: $custom-control-description-font-weight,
 		line-height: $custom-control-description-line-height,
 		margin-bottom: 0rem,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
 		before: (
 			background-color: $custom-control-indicator-bg,
@@ -167,7 +175,7 @@ $custom-control-label: map-deep-merge(
 			height: $custom-control-indicator-size,
 			left: 0rem,
 			position: relative,
-			top: 0.25rem,
+			top: $custom-control-indicator-position-top,
 			transition: clay-enable-transitions($custom-forms-transition),
 			width: $custom-control-indicator-size,
 		),
@@ -177,11 +185,11 @@ $custom-control-label: map-deep-merge(
 			border-radius: $rounded-circle-border-radius,
 			content: '',
 			display: block,
-			height: 1.5rem,
-			left: -0.25rem,
+			height: $custom-control-input-size,
+			left: $custom-control-input-offset,
 			position: absolute,
-			top: $custom-control-indicator-position-top,
-			width: 1.5rem,
+			top: $custom-control-input-offset,
+			width: $custom-control-input-size,
 		),
 	),
 	$custom-control-label
@@ -224,6 +232,8 @@ $custom-control-label-text: () !default;
 $custom-control-label-text: map-deep-merge(
 	(
 		padding-left: $custom-control-description-padding-left,
+		position: relative,
+		top: -0.25rem,
 	),
 	$custom-control-label-text
 );
@@ -270,12 +280,12 @@ $custom-control-input: () !default;
 $custom-control-input: map-deep-merge(
 	(
 		cursor: $link-cursor,
-		height: 1.5rem,
-		left: -0.25rem,
+		height: $custom-control-input-size,
+		left: $custom-control-input-offset,
 		opacity: 0,
 		position: absolute,
-		top: $custom-control-indicator-position-top,
-		width: 1.5rem,
+		top: $custom-control-input-offset,
+		width: $custom-control-input-size,
 		z-index: 1,
 
 		focus: (
@@ -384,7 +394,10 @@ $custom-control-primary-label-text: map-deep-merge(
 
 $custom-checkbox-indicator-border-radius: 0.125rem !default;
 
-$custom-checkbox-indicator-icon-checked: clay-icon(check-small, #fff) !default;
+$custom-checkbox-indicator-icon-checked: var(
+	--custom-checkbox-indicator-icon-checked,
+	clay-icon(check-small, #fff)
+) !default;
 $custom-checkbox-indicator-icon-checked-bg-size: 1rem !default;
 
 $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
@@ -395,7 +408,10 @@ $custom-control-indicator-indeterminate-border-color: $custom-control-indicator-
 $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
 $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
 
-$custom-checkbox-indicator-icon-indeterminate: clay-icon(hr, #fff) !default;
+$custom-checkbox-indicator-icon-indeterminate: var(
+	--custom-checkbox-indicator-icon-indeterminate,
+	clay-icon(hr, #fff)
+) !default;
 $custom-checkbox-indicator-icon-indeterminate-bg-size: 1rem !default;
 
 $custom-checkbox: () !default;
@@ -441,7 +457,11 @@ $custom-checkbox: map-deep-merge(
 						),
 
 						after: (
-							background-image: clay-icon(check-small, #6b6c7e),
+							background-image:
+								var(
+									--custom-checkbox-indicator-icon-checked-readonly,
+									clay-icon(check-small, #cdced9)
+								),
 						),
 					),
 
@@ -497,7 +517,11 @@ $custom-checkbox: map-deep-merge(
 						),
 
 						after: (
-							background-image: clay-icon(hr, #6b6c7e),
+							background-image:
+								var(
+									--custom-checkbox-indicator-icon-indeterminate-readonly,
+									clay-icon(hr, #cdced9)
+								),
 						),
 					),
 
@@ -523,7 +547,10 @@ $custom-checkbox: map-deep-merge(
 
 $custom-radio-indicator-border-radius: 50% !default;
 
-$custom-radio-indicator-icon-checked: clay-icon(circle, #fff) !default;
+$custom-radio-indicator-icon-checked: var(
+	--custom-radio-indicator-icon-checked,
+	clay-icon(circle, #fff)
+) !default;
 $custom-radio-indicator-icon-checked-bg-size: 0.5rem !default;
 
 $custom-radio-indicator-disabled-border-color: $custom-control-indicator-disabled-bg !default;
@@ -655,8 +682,9 @@ $custom-select-border-width: if(
 
 // @deprecated as of v3.x with no replacement
 
-$custom-select-box-shadow: inset 0 1px 2px
-	unquote('hsl(from #{$black} h s l / 0.075)') !default;
+$custom-select-box-shadow: unquote(
+	'inset 0 1px 2px hsl(from #{$black} h s l / 0.075)'
+) !default;
 
 // @deprecated as of v3.x with no replacement
 
@@ -872,8 +900,9 @@ $custom-range-track-border-radius: 1rem !default;
 
 // @deprecated as of v3.x with no replacement
 
-$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem
-	unquote('hsl(from #{$black} h s l / 0.1)') !default;
+$custom-range-track-box-shadow: unquote(
+	'inset 0 0.25rem 0.25rem hsl(from #{$black} h s l / 0.1)'
+) !default;
 
 // @deprecated as of v3.x with no replacement
 
@@ -901,8 +930,9 @@ $custom-range-thumb-border-radius: 1rem !default;
 
 // @deprecated as of v3.x with no replacement
 
-$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem
-	unquote('hsl(from #{$black} h s l / 0.1)') !default;
+$custom-range-thumb-box-shadow: unquote(
+	'0 0.1rem 0.25rem hsl(from #{$black} h s l / 0.1)'
+) !default;
 
 // @deprecated as of v3.x with no replacement
 
@@ -975,7 +1005,7 @@ $custom-file-border-radius: if(
 $custom-file-box-shadow: if(
 	variable-exists(input-box-shadow),
 	$input-box-shadow,
-	inset 0 1px 1px unquote('hsl(from #{$black} h s l / 0.075)')
+	unquote('inset 0 1px 1px hsl(from #{$black} h s l / 0.075)')
 ) !default;
 
 // @deprecated as of v3.x with no replacement

package/src/scss/atlas-custom-properties/variables/_dropdowns.scss

@@ -39,7 +39,7 @@ $dropdown-inner-border-radius: $dropdown-border-radius
 
 $dropdown-box-shadow: var(
 	--dropdown-box-shadow,
-	0 1px 5px -1px rgba(0, 0, 0, 0.3)
+	unquote('0 1px 5px -1px hsl(from #{$black} h s l / 0.3)')
 ) !default;
 
 // @deprecated as of v3.x use map $dropdown-menu instead
@@ -613,7 +613,8 @@ $dropdown-section: map-deep-merge(
 $dropdown-footer: () !default;
 $dropdown-footer: map-merge(
 	(
-		box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5),
+		box-shadow:
+			unquote('-1px -2px 3px -3px hsl(from #{$black} h s l / 0.5)'),
 		padding: 0.5rem $dropdown-item-padding-x 0rem,
 		position: relative,
 	),
@@ -1177,24 +1178,18 @@ $dropdown-menu-palette: map-deep-merge(
 			),
 
 			dropdown-item-scroll-up: (
-				background-image: (
-					linear-gradient(
-						to bottom,
-						rgba(255, 255, 255, 1) 84%,
-						rgba(255, 255, 255, 0) 100%
+				background-image:
+					unquote(
+						'linear-gradient(to bottom, hsl(from #{$white} h s l / 1) 84%, hsl(from #{$white} h s l / 0) 100%)'
 					),
-				),
 				top: $dropdown-padding-y,
 			),
 
 			dropdown-item-scroll-down: (
-				background-image: (
-					linear-gradient(
-						to top,
-						rgba(255, 255, 255, 1) 84%,
-						rgba(255, 255, 255, 0) 100%
+				background-image:
+					unquote(
+						'linear-gradient(to top, hsl(from #{$white} h s l / 1) 84%, hsl(from #{$white} h s l / 0) 100%)'
 					),
-				),
 				bottom: $dropdown-padding-y,
 			),
 

package/src/scss/atlas-custom-properties/variables/_forms.scss

@@ -955,7 +955,10 @@ $input-danger-label-color: null !default;
 
 $input-danger-select-icon-color: $input-danger-border-color !default;
 
-$input-danger-select-icon: clay-icon(caret-double-l, #f48989) !default;
+$input-danger-select-icon: var(
+	--input-danger-select-icon,
+	clay-icon(caret-double-l, #f48989)
+) !default;
 
 $input-danger-select: () !default;
 $input-danger-select: map-deep-merge(
@@ -1143,7 +1146,10 @@ $input-warning-label-color: null !default;
 
 $input-warning-select-icon-color: $input-warning-border-color !default;
 
-$input-warning-select-icon: clay-icon(caret-double-l, #ff8f39) !default;
+$input-warning-select-icon: var(
+	--input-warning-select-icon,
+	clay-icon(caret-double-l, #ff8f39)
+) !default;
 
 $input-warning-select: () !default;
 $input-warning-select: map-deep-merge(
@@ -1331,7 +1337,10 @@ $input-success-label-color: null !default;
 
 $input-success-select-icon-color: $input-success-border-color !default;
 
-$input-success-select-icon: clay-icon(caret-double-l, #5aca75) !default;
+$input-success-select-icon: var(
+	--input-success-select-icon,
+	clay-icon(caret-double-l, #5aca75)
+) !default;
 
 $input-success-select: () !default;
 $input-success-select: map-deep-merge(
@@ -1461,15 +1470,24 @@ $input-select-focus-bg: $input-focus-bg !default;
 
 $input-select-icon-color: $gray-600 !default;
 
-$input-select-icon: clay-icon(caret-double-l, #6b6c7e) !default;
+$input-select-icon: var(
+	--input-select-icon,
+	clay-icon(caret-double-l, #6b6c7e)
+) !default;
 
 $input-select-icon-focus-color: $input-select-icon-color !default;
 
-$input-select-icon-focus: clay-icon(caret-double-l, #6b6c7e) !default;
+$input-select-icon-focus: var(
+	--input-select-icon-focus,
+	clay-icon(caret-double-l, #6b6c7e)
+) !default;
 
 $input-select-icon-disabled-color: $gray-500 !default;
 
-$input-select-icon-disabled: clay-icon(caret-double-l, #a7a9bc) !default;
+$input-select-icon-disabled: var(
+	--input-select-icon-disabled,
+	clay-icon(caret-double-l, #a7a9bc)
+) !default;
 
 $input-select: () !default;
 $input-select: map-deep-merge(
@@ -1561,7 +1579,11 @@ $form-control-select-palette: map-deep-merge(
 			),
 
 			focus: (
-				background-image: clay-icon(caret-double-l, #272833),
+				background-image:
+					var(
+						--form-control-select-secondary-icon-focus,
+						clay-icon(caret-double-l, #272833)
+					),
 				color: $gray-900,
 			),
 
@@ -1573,7 +1595,11 @@ $form-control-select-palette: map-deep-merge(
 
 			show: (
 				background-color: $gray-200,
-				background-image: clay-icon(caret-double-l, #272833),
+				background-image:
+					var(
+						--form-control-select-secondary-icon-show,
+						clay-icon(caret-double-l, #272833)
+					),
 				color: $gray-900,
 			),
 		),

package/src/scss/atlas-custom-properties/variables/_globals.scss

@@ -319,6 +319,7 @@ $border-radius: var(--border-radius) !default;
 
 $border-radius-lg: var(--border-radius-lg) !default;
 $border-radius-sm: var(--border-radius-sm) !default;
+$border-radius-xl: var(--border-radius-xl) !default;
 
 $rounded-0-border-radius: var(--rounded-0-border-radius) !default;
 $rounded-border-radius: var(--rounded-border-radius) !default;
@@ -720,7 +721,7 @@ $hr-border-color: var(--hr-border-color) !default;
 $hr-border-width: var(--hr-border-width) !default;
 $hr-margin-y: var(--hr-margin-y) !default;
 
-$mark-bg: #fcf8e3 !default;
+$mark-bg: $yellow-l3 !default;
 $mark-color: null !default;
 $mark-padding: 0.2em !default;
 
@@ -753,7 +754,9 @@ $code-color: var(--code-color) !default;
 $code-font-size: var(--code-font-size) !default;
 
 $kbd-bg: $gray-900 !default;
-$kbd-box-shadow: inset 0 -0.1rem 0 unquote('rgb(from #{$black} r g b / 0.25)') !default;
+$kbd-box-shadow: unquote(
+	'inset 0 -0.1rem 0 hsl(from #{$black} h s l / 0.25)'
+) !default;
 $kbd-color: $white !default;
 $kbd-font-size: $code-font-size !default;
 $kbd-padding-x: 0.4rem !default;

package/src/scss/atlas-custom-properties/variables/_images.scss

@@ -2,7 +2,9 @@ $thumbnail-bg: $body-bg !default;
 $thumbnail-border-color: $gray-300 !default;
 $thumbnail-border-radius: $border-radius !default;
 $thumbnail-border-width: $border-width !default;
-$thumbnail-box-shadow: 0 1px 2px unquote('hsl(from #{$black} h s l / 0.075)') !default;
+$thumbnail-box-shadow: unquote(
+	'0 1px 2px hsl(from #{$black} h s l / 0.075)'
+) !default;
 $thumbnail-padding: 0.25rem !default;
 
 $figure-caption-color: $gray-600 !default;