@clayui/css 3.124.0 → 3.127.0

package/src/scss/variables/_globals.scss

@@ -24,6 +24,12 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: if(
+	$enable-focus-visible,
+	'.c-prefers-focus &:focus',
+	null
+);
+
 $enable-lexicon-flat-colors: false !default;
 $enable-scaling-components: false !default;
 $scaling-breakpoint-down: sm !default;
@@ -87,6 +93,7 @@ $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
+$blue-l5: #e5f1ff !default;
 
 $indigo-d4: #0017e5 !default;
 $indigo-d3: #001aff !default;
@@ -97,6 +104,7 @@ $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
+$indigo-l5: #e5e8ff !default;
 
 $purple-d4: #7700cc !default;
 $purple-d3: #8600e6 !default;
@@ -107,6 +115,7 @@ $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
+$purple-l5: #f2e5ff !default;
 
 $pink-d4: #800048 !default;
 $pink-d3: #990057 !default;
@@ -117,6 +126,7 @@ $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
+$pink-l5: #ffe5f4 !default;
 
 $red-d4: #800000 !default;
 $red-d3: #990000 !default;
@@ -127,6 +137,7 @@ $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
+$red-l5: #ffe5e5 !default;
 
 $orange-d4: #662700 !default;
 $orange-d3: #803100 !default;
@@ -137,6 +148,7 @@ $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
+$orange-l5: #fff0e5 !default;
 
 $yellow-d4: #997000 !default;
 $yellow-d3: #b38900 !default;
@@ -147,6 +159,7 @@ $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
+$yellow-l5: #fff8e5 !default;
 
 $green-d4: #162d06 !default;
 $green-d3: #22430a !default;
@@ -157,6 +170,7 @@ $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
+$green-l5: #f1fce9 !default;
 
 $teal-d4: #092a25 !default;
 $teal-d3: #0d3f37 !default;
@@ -167,6 +181,7 @@ $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
+$teal-l5: #eafbf8 !default;
 
 $cyan-d4: #00334d !default;
 $cyan-d3: #004466 !default;
@@ -177,6 +192,7 @@ $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
 $cyan-l4: #99ddff !default;
+$cyan-l5: #e5f6ff !default;
 
 $colors: () !default;
 $colors: map-merge(

package/src/scss/variables/_menubar.scss

@@ -65,7 +65,6 @@ $menubar-primary: map-deep-merge(
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $font-weight-normal,
-				letter-spacing: 0.016rem,
 				before: (
 					content: none,
 				),

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

@@ -22,9 +22,9 @@ $multi-step-icon-hover-bg: $multi-step-icon-bg !default;
 $multi-step-icon-hover-color: rgba($black, 0.7) !default;
 $multi-step-icon-hover-text-decoration: none !default;
 
-$multi-step-icon-focus-bg: $multi-step-icon-hover-bg !default;
+$multi-step-icon-focus-bg: null !default;
 $multi-step-icon-focus-box-shadow: $component-focus-box-shadow !default;
-$multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
+$multi-step-icon-focus-color: null !default;
 $multi-step-icon-focus-outline: 0 !default;
 $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;
 
@@ -96,6 +96,32 @@ $multi-step-item-margin-bottom: 10px !default;
 $multi-step-item-width: 75px !default;
 $multi-step-item-fixed-width: 150px !default;
 
+$multi-step-nav-center: () !default;
+$multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+		multi-step-item: (
+			flex-grow: 1,
+			width: $multi-step-item-width,
+		),
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$multi-step-icon-size}),
+		),
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$multi-step-nav-center
+);
+
 $multi-step-title-center: () !default;
 $multi-step-title-center: map-deep-merge(
 	(

package/src/scss/variables/_stickers.scss

@@ -402,6 +402,106 @@ $sticker-dark: map-deep-merge(
 	$sticker-dark
 );
 
+$sticker-outline-0: () !default;
+$sticker-outline-0: map-deep-merge(
+	(
+		background-color: $light,
+		border: 1px solid $dark,
+		color: $dark,
+	),
+	$sticker-outline-0
+);
+
+$sticker-outline-1: () !default;
+$sticker-outline-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border: 1px solid $purple,
+		color: $purple,
+	),
+	$sticker-outline-1
+);
+
+$sticker-outline-2: () !default;
+$sticker-outline-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border: 1px solid $yellow-d3,
+		color: $yellow-d3,
+	),
+	$sticker-outline-2
+);
+
+$sticker-outline-3: () !default;
+$sticker-outline-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border: 1px solid $green,
+		color: $green,
+	),
+	$sticker-outline-3
+);
+
+$sticker-outline-4: () !default;
+$sticker-outline-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border: 1px solid $red,
+		color: $red,
+	),
+	$sticker-outline-4
+);
+
+$sticker-outline-5: () !default;
+$sticker-outline-5: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border: 1px solid $orange,
+		color: $orange,
+	),
+	$sticker-outline-5
+);
+
+$sticker-outline-6: () !default;
+$sticker-outline-6: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border: 1px solid $teal,
+		color: $teal,
+	),
+	$sticker-outline-6
+);
+
+$sticker-outline-7: () !default;
+$sticker-outline-7: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border: 1px solid $cyan,
+		color: $cyan,
+	),
+	$sticker-outline-7
+);
+
+$sticker-outline-8: () !default;
+$sticker-outline-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border: 1px solid $pink,
+		color: $pink-d4,
+	),
+	$sticker-outline-8
+);
+
+$sticker-outline-9: () !default;
+$sticker-outline-9: map-deep-merge(
+	(
+		background-color: $white,
+		border: 1px solid $dark-l2,
+		color: $dark-l2,
+	),
+	$sticker-outline-9
+);
+
 $sticker-palette: () !default;
 $sticker-palette: map-deep-merge(
 	(
@@ -413,6 +513,16 @@ $sticker-palette: map-deep-merge(
 		danger: $sticker-danger,
 		light: $sticker-light,
 		dark: $sticker-dark,
+		'.sticker-outline-0': $sticker-outline-0,
+		'.sticker-outline-1': $sticker-outline-1,
+		'.sticker-outline-2': $sticker-outline-2,
+		'.sticker-outline-3': $sticker-outline-3,
+		'.sticker-outline-4': $sticker-outline-4,
+		'.sticker-outline-5': $sticker-outline-5,
+		'.sticker-outline-6': $sticker-outline-6,
+		'.sticker-outline-7': $sticker-outline-7,
+		'.sticker-outline-8': $sticker-outline-8,
+		'.sticker-outline-9': $sticker-outline-9,
 	),
 	$sticker-palette
 );

package/src/scss/variables/_toggle-switch.scss

@@ -497,7 +497,7 @@ $toggle-switch-sizes: map-deep-merge(
 		toggle-switch-sm: (
 			simple-toggle-switch: (
 				toggle-switch-label: (
-					max-width: calc(100% - 38px),
+					max-width: calc(100% - 34px),
 				),
 			),
 			toggle-switch-check: (
@@ -515,9 +515,8 @@ $toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
-						max-width: 30px,
 						after: (
-							margin-left: 38px,
+							margin-left: 34px,
 						),
 					),
 					toggle-switch-icon: (