@clayui/css 3.44.2 → 3.47.0

package/src/scss/components/_type.scss

@@ -12,65 +12,51 @@ h6,
 .h4,
 .h5,
 .h6 {
-	color: $headings-color;
-	font-family: $headings-font-family;
-	font-weight: $headings-font-weight;
-	line-height: $headings-line-height;
-	margin-bottom: $headings-margin-bottom;
+	@include clay-css($headings);
+
+	@include clay-generate-media-breakpoints($headings);
 }
 
 h1,
 .h1 {
-	font-size: $h1-font-size;
+	@include clay-css($h1);
 
-	@include clay-scale-component {
-		font-size: $h1-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h1);
 }
 
 h2,
 .h2 {
-	font-size: $h2-font-size;
+	@include clay-css($h2);
 
-	@include clay-scale-component {
-		font-size: $h2-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h2);
 }
 
 h3,
 .h3 {
-	font-size: $h3-font-size;
+	@include clay-css($h3);
 
-	@include clay-scale-component {
-		font-size: $h3-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h3);
 }
 
 h4,
 .h4 {
-	font-size: $h4-font-size;
+	@include clay-css($h4);
 
-	@include clay-scale-component {
-		font-size: $h4-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h4);
 }
 
 h5,
 .h5 {
-	font-size: $h5-font-size;
+	@include clay-css($h5);
 
-	@include clay-scale-component {
-		font-size: $h5-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h5);
 }
 
 h6,
 .h6 {
-	font-size: $h6-font-size;
+	@include clay-css($h6);
 
-	@include clay-scale-component {
-		font-size: $h6-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h6);
 }
 
 .lead {
@@ -81,27 +67,27 @@ h6,
 // Type display classes
 
 .display-1 {
-	font-size: $display1-size;
-	font-weight: $display1-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-1);
+
+	@include clay-generate-media-breakpoints($display-1);
 }
 
 .display-2 {
-	font-size: $display2-size;
-	font-weight: $display2-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-2);
+
+	@include clay-generate-media-breakpoints($display-2);
 }
 
 .display-3 {
-	font-size: $display3-size;
-	font-weight: $display3-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-3);
+
+	@include clay-generate-media-breakpoints($display-3);
 }
 
 .display-4 {
-	font-size: $display4-size;
-	font-weight: $display4-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-4);
+
+	@include clay-generate-media-breakpoints($display-4);
 }
 
 // Horizontal rules

package/src/scss/components/_utilities-functional-important.scss

@@ -619,12 +619,6 @@
 	}
 }
 
-// Text
-
-.text-monospace {
-	font-family: $font-family-monospace !important;
-}
-
 // Text Alignment
 
 .text-justify {
@@ -681,34 +675,60 @@
 
 // Font Weight and Italics
 
-.font-weight-light {
-	font-weight: $font-weight-light !important;
+.font-weight-lighter,
+.text-weight-lighter {
+	font-weight: $font-weight-lighter !important;
 }
 
-.font-weight-lighter {
-	font-weight: $font-weight-lighter !important;
+.font-weight-light,
+.text-weight-light {
+	font-weight: $font-weight-light !important;
 }
 
-.font-weight-normal {
+.font-weight-normal,
+.text-weight-normal {
 	font-weight: $font-weight-normal !important;
 }
 
-.font-weight-semi-bold {
+.font-weight-semi-bold,
+.text-weight-semi-bold {
 	font-weight: $font-weight-semi-bold !important;
 }
 
-.font-weight-bold {
+.font-weight-bold,
+.text-weight-bold {
 	font-weight: $font-weight-bold !important;
 }
 
-.font-weight-bolder {
+.font-weight-bolder,
+.text-weight-bolder {
 	font-weight: $font-weight-bolder !important;
 }
 
-.font-italic {
+.font-italic,
+.text-italic {
 	font-style: italic !important;
 }
 
+.font-monospace,
+.text-monospace {
+	font-family: $font-family-monospace !important;
+}
+
+// Font Sizes
+
+@each $selector, $value in $font-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
+	}
+}
+
 // Contextual Colors
 
 .text-white {

package/src/scss/functions/_lx-icons-generated.scss

@@ -194,6 +194,8 @@
 
 	'copy': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68z" fill="none"/><path class="lexicon-icon-outline" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68zm-252 68v124H96V64h192v64h-60c-37.4 0-68 30.6-68 68zm256 252H224V192h192v256z" fill="#{$color}"/></svg>',
 
+	'corner-radius': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline corner-radius-bottom-right" d="M448 384c0 35.3-28.7 64-64 64h-64v64h64c70.7 0 128-57.3 128-128v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-right" d="M384 0h-64v64h64c35.3 0 64 28.7 64 64v64h64v-64C512 57.3 454.7 0 384 0z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-left" d="M64 128c0-35.3 28.7-64 64-64h64V0h-64C57.3 0 0 57.3 0 128v64h64v-64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-bottom-left" d="M64 384v-64H0v64c0 70.7 57.3 128 128 128h64v-64h-64c-35.3 0-64-28.7-64-64z" fill="#{$color}"/></svg>',
+
 	'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-credit-card-border" d="M448 32.1 64 32C32 32 0 64.1 0 96v320.1c0 32 32 64 64 64h384c32 0 64-32 64-64V96c0-31.9-32-63.9-64-63.9zm0 384H64v-224h384v224zm0-288H64V96h384v32.1z" fill="#{$color}"/><path class="lexicon-icon-outline lx-credit-card-text" d="M304 288.1h64c62.7 0 63.3 96 0 96h-64c-63.3 0-64.3-96 0-96z" fill="#{$color}"/></svg>',
 
 	'cursor': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M468.3 273.8 110.6 5.9c-20.2-15.1-48.7.8-46.5 25.9l40.4 453.6c2.4 27 37.2 36.4 52.8 14.2l106.5-151c5.1-7.2 13.2-11.8 22-12.3l166.7-10c27.2-1.7 37.5-36.2 15.8-52.5z" fill="#{$color}"/></svg>',
@@ -294,6 +296,8 @@
 
 	'expand': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 128v-25.4l88 88c25.5 25.5 64.5-12.8 38.6-38.6l-88-88H128c42.6 0 42.6-64 0-64H32C16.4 0 0 14.4 0 32v96c0 42.7 64 42.6 64 0zm384 0v-25.4l-88 88c-25.5 25.5-64.5-12.8-38.6-38.6l88-88H384c-42.6 0-42.6-64 0-64h96c15.6 0 32 14.4 32 32v96c0 42.7-64 42.6-64 0zM64 384v25.4l88-88c25.5-25.5 64.5 12.8 38.6 38.6l-88 88H128c42.6 0 42.6 64 0 64H32c-15.6 0-32-14.4-32-32v-96c0-42.7 64-42.6 64 0zm384 0v25.4l-88-88c-25.5-25.5-64.5 12.8-38.6 38.6l88 88H384c-42.6 0-42.6 64 0 64h96c15.6 0 32-14.4 32-32v-96c0-42.7-64-42.6-64 0z" fill="#{$color}"/></svg>',
 
+	'export': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline export-base" d="M448 256.3v191.8H64V256.3c0-41.6-64-41.6-64 0v191.8C0 483.2 28.8 512 64 512h384c35.2 0 64-28.8 64-63.9V256.3c0-44.8-64-41.6-64 0z" fill="#{$color}"/><path class="lexicon-icon-outline export-dash" d="M320 384.1H192c-41.6 0-41.6-63.9 0-63.9h128c41.6 0 44.8 63.9 0 63.9z" fill="#{$color}"/><path class="lexicon-icon-outline export-arrow-up" d="m233.6 10.1-64 63.9c-28.8 28.8 12.8 67.1 38.4 44.8l16-16v121.5c0 41.6 64 41.6 64 0V102.8l16 16c28.8 22.4 64-19.2 38.4-44.8l-64-63.9c-6.4-6.4-25.6-19.1-44.8 0z" fill="#{$color}"/></svg>',
+
 	'fieldset': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-fieldset-bracket-start" d="M128 64c0-17.7-14.3-32-32-32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V96h32c17.7 0 32-14.3 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-bracket-end" d="M512 416c0 35.3-28.7 64-64 64h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32V96h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c35.3 0 64 28.7 64 64v320z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-dot" d="M128 224c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-line" d="M224 160h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-dot" d="M384 288H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-line" d="M128 352c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/></svg>',
 
 	'file-script': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline file-script-border" d="M320 64v64c0 17.7 14.3 32 32 32h64v288H96V64h224zm5.5-64H96C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V154.5c0-33.5-18-44.5-63.5-90S360 0 325.5 0z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-forward-slash" d="m212.2 409.2 69.1-187.5c7.7-20.7 37.7-7.7 30.1 10.9l-69.1 187.5C234 440 205 428 212.2 409.2z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-open" d="m160 320 35.9-35.9-22.6-22.6-35.9 35.9c-12.5 12.5-12.5 32.8 0 45.3l35.9 35.9 22.6-22.6-35.9-36z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-close" d="M355.9 320 320 284.1l22.6-22.6 35.9 35.9c12.5 12.5 12.5 32.8 0 45.3l-35.9 35.9-22.6-22.7 35.9-35.9z" fill="#{$color}"/></svg>',
@@ -412,6 +416,10 @@
 
 	'folder': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 128h-96L241.1 44.8C230 36.5 216.5 32 202.7 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
+	'font-family': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-family-capital-a" d="M264.4 375.1 175.6 126c-15.3-40.4-69.5-39.4-84.8 0l-89 249.2c-11.7 34.4 38.6 53.1 52.1 17.8l20.5-62.7h117.4l20.5 62.6c14.1 36.5 63.6 15.4 52.1-17.8zM88.6 286.7l43.9-134.4h1.1l43.9 134.4H88.6z" fill="#{$color}"/><path class="lexicon-icon-outline font-family-lowercase-a" d="M316.1 229.9c-8.5 34.1 46.5 36.9 49.9 12.4 5.8-37.3 100.5-52.5 90.3 25.1C176.5 251 345 517.6 456.4 374c-6.9 47.6 55.6 44.7 55.6 11.2V247c.1-96.9-170.5-108.8-195.9-17.1zm43.5 110.7c.8-33.3 32-39.8 96.9-36.1 5.5 88-96.9 82.2-96.9 36.1z" fill="#{$color}"/></svg>',
+
+	'font-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-size-ns-resize" d="M455.4 348.5 441 362.9V151l14.4 13.6c33.9 29.2 75.9-17.1 46.9-46.2l-62.9-61.1c-12.9-12.5-33.7-12.5-46.6 0L330 118.5c-29.9 31.6 13.6 73.9 46.9 45l14.4-14.4V361l-14.4-13.6c-30.7-27.9-77.4 12.7-46.9 46.2l62.9 61.1c12.9 12.5 33.7 12.5 46.6 0l62.9-61.1c29.3-30.6-14.8-75.2-47-45.1z" fill="#{$color}"/><path class="lexicon-icon-outline font-size-lowercase-a" d="M14.8 183.6C4.9 223.4 69 226.7 73 198.1c6.8-43.5 117.2-61.3 105.4 29.3-326.5-19.2-129.9 291.8 0 124.3-8 55.5 64.9 52.2 64.9 13.1V203.6c.1-113.1-198.9-127-228.5-20zm50.7 129.1c.9-38.9 37.3-46.4 113-42.1 6.5 102.7-113 95.9-113 42.1z" fill="#{$color}"/></svg>',
+
 	'form-extensions': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-form-extensions-border-1" fill="#{$color}" d="M256 0h64v64h-64z"/><circle class="lexicon-icon-outline lx-form-extensions-circle-1" transform="rotate(-11.976 127.97 159.967)" cx="128" cy="160" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-1" d="M224 192h160c17.7 0 32-14.3 32-32s-14.3-32-32-32H224c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-2" d="M384 224H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-2" transform="rotate(-61.894 128.006 255.995)" cx="128" cy="256" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-3" d="M416 354c0-17.7-14.3-32-32-32H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32z" fill="#{$color}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-3" cx="128" cy="354" r="32" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-2" fill="#{$color}" d="M448 192h64v128h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-3" fill="#{$color}" d="M256 448h64v64h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-4" d="M64 64h128V0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h128v-64H64V64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-5" d="M448 448h-64v64h64c35.3 0 64-28.7 64-64v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-6" d="M448 0h-64v64h64v64h64V64c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
 	'format': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="format-roller lexicon-icon-outline" d="M416 192H192c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64z" fill="#{$color}"/><path class="format-handle lexicon-icon-outline" d="M320 320v-64c0-17.7-14.3-32-32-32H96V96c0-43-64-43-64 0v160c0 17.7 14.3 32 32 32h192v32c-17.7 0-32 14.3-32 32v160h128V352c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
@@ -668,6 +676,8 @@
 
 	'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
 
+	'shadow': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M453.4 51.3C361.2-33.7 187.7-18 136.6 136 14.2 172.8-55.8 335.2 56.4 455.4c126.2 118 290.4 32 319.5-79.9 150.5-52.9 175.9-229 77.5-324.2zM192.3 191.6c0-168.8 256-168.3 256 0 0 170.7-256 168.5-256 0z" fill="#{$color}"/></svg>',
+
 	'share-alt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M397.255 402.745a63.725 63.725 0 0 0-20.334-13.702C369.01 385.697 360.625 384 352 384s-17.01 1.697-24.921 5.043a64.4 64.4 0 0 0-7.587 3.822L215.135 288.508a64.019 64.019 0 0 0 3.822-7.587c3.346-7.911 5.042-16.296 5.042-24.922s-1.696-17.011-5.042-24.922a64.17 64.17 0 0 0-3.822-7.587l104.357-104.357a64.094 64.094 0 0 0 7.587 3.822c7.911 3.346 16.296 5.043 24.921 5.043s17.01-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.703s10.478-12.709 13.702-20.334C414.303 81.007 416 72.622 416 63.996s-1.697-17.011-5.043-24.922c-3.225-7.625-7.835-14.466-13.702-20.334S384.546 8.263 376.921 5.037C369.01 1.691 360.625-.006 352-.006s-17.01 1.696-24.921 5.043c-7.625 3.225-14.466 7.835-20.334 13.703s-10.478 12.709-13.702 20.334C289.697 46.985 288 55.37 288 63.996s1.697 17.011 5.043 24.922a64.324 64.324 0 0 0 3.822 7.587L192.508 200.862a63.943 63.943 0 0 0-7.587-3.822c-7.911-3.346-16.296-5.042-24.922-5.042s-17.011 1.696-24.922 5.042c-7.625 3.225-14.466 7.835-20.334 13.702s-10.478 12.709-13.703 20.334c-3.346 7.911-5.043 16.296-5.043 24.922s1.697 17.011 5.043 24.922c3.225 7.625 7.835 14.466 13.703 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.043 24.922 5.043s17.011-1.697 24.922-5.043a64.324 64.324 0 0 0 7.587-3.822l104.357 104.357a64.094 64.094 0 0 0-3.822 7.587c-3.346 7.911-5.043 16.296-5.043 24.921s1.697 17.01 5.043 24.921c3.225 7.625 7.835 14.466 13.702 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.042 24.921 5.042s17.01-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.702s10.478-12.709 13.702-20.334c3.346-7.911 5.043-16.296 5.043-24.921s-1.697-17.01-5.043-24.921a63.743 63.743 0 0 0-13.702-20.333zM352 32c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM160 288c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32zm192 192c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32z" fill="#{$color}"/></svg>',
 
 	'share': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m326.2 323.3-107.6-53.8c2.7-5.9 2.4-19.9 0-27.1l107.6-53.8c77.2 69.3 185.8 13 185.8-78.9C512 49.2 462.8 0 402.3 0S287 51.3 293.4 123.3l-107.6 53.8C113.3 108 0 161.7 0 256c0 100.3 118.3 143.7 185.8 78.9l107.6 53.8C285 460.7 341.8 512 402.3 512S512 462.8 512 402.3c0-88-105.7-150.3-185.8-79zm112.7-213.6c0 49-73.1 47.6-73.1 0-.1-49.4 73.1-47.7 73.1 0zM73.1 256c0-49 73.1-49 73.1 0 .1 47.3-73.1 49-73.1 0zm292.6 146.3c0-48.6 73.1-49 73.1 0 .1 48.7-73.1 47.4-73.1 0z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_buttons.scss

@@ -844,6 +844,10 @@
 
 			.inline-item {
 				@include clay-css($inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($inline-item, lexicon-icon));
+				}
 			}
 
 			.inline-item-before {

package/src/scss/mixins/_cards.scss

@@ -5,33 +5,30 @@
 /// A mixin that styles a Card Section (e.g., `.card-header`, `.card-body`, `.card-footer` or `.card-row`). This mixin is used by `clay-card-variant`.
 /// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
 /// @example
-/// enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
-/// bg: {Color | String | Null},
-/// border-color: {Color | String | List | Null},
-/// border-radius: {Number | String | List | Null},
-/// border-style: {String | List | Null},
-/// border-width: {Number | String | List | Null},
-/// display: {String | Null},
-/// flex-basis: {Number | String | Null},
-/// flex-direction: {String | Null},
-/// flex-grow: {Number | String | Null},
-/// flex-shrink: {Number | String | Null},
-/// flex-wrap: {String | Null},
-/// margin-bottom: {Number | String | Null},
-/// margin-left: {Number | String | Null},
-/// margin-right: {Number | String | Null},
-/// margin-top: {Number | String | Null},
-/// padding-bottom: {Number | String | Null},
-/// padding-left: {Number | String | Null},
-/// padding-right: {Number | String | Null},
-/// padding-top: {Number | String | Null},
-/// text-align: {String | Null},
-/// width: {Number | String | Null},
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .card-section
+/// 	before: (
+/// 		// .card-section::before
+/// 	),
+/// 	after: (
+/// 		// .card-section::after
+/// 	),
+/// 	first-child: (
+/// 		// .card-section:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .card-section:last-child
+/// 	),
+/// 	autofit-col: (
+/// 		// .card-section .autofit-col
+/// 	),
+///
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
+/// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// autofit-col-padding-left: {Number | String | Null},
 /// autofit-col-padding-right: {Number | String | Null},
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-card-section-variant($map) {
 	@if (type-of($map) == 'map') {
@@ -65,6 +62,22 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
 			.autofit-col {
 				@include clay-css($autofit-col);
 			}
@@ -187,6 +200,15 @@
 /// 	aspect-ratio-item-bottom-left: (
 /// 		// .card .aspect-ratio-item-bottom-left
 /// 	),
+/// 	hr: (
+/// 		// .card > hr
+/// 		before: (
+/// 			// .card > hr::before
+/// 		),
+/// 		after: (
+/// 			// .card > hr::after
+/// 		),
+/// 	),
 /// 	sticker: (
 /// 		// .card .sticker
 /// 	),
@@ -844,6 +866,18 @@
 				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
 			}
 
+			> hr {
+				@include clay-css(map-get($map, hr));
+
+				&::before {
+					@include clay-css(map-deep-get($map, hr, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, hr, after));
+				}
+			}
+
 			.sticker {
 				@include clay-sticker-variant(
 					setter(map-get($map, sticker), ())

package/src/scss/mixins/_grid.scss

@@ -176,6 +176,35 @@
 	}
 }
 
+/// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
+/// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
+
+@mixin clay-generate-media-breakpoints($map) {
+	@if (map-get($map, media-breakpoint-up)) {
+		$media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+		@each $breakpoint in map-keys($media-breakpoint-up) {
+			$breakpoint-up: map-get($map, $breakpoint);
+
+			@include media-breakpoint-up($breakpoint) {
+				@include clay-css($breakpoint-up);
+			}
+		}
+	}
+
+	@if (map-get($map, media-breakpoint-down)) {
+		$media-breakpoint-down: map-get($map, media-breakpoint-down);
+
+		@each $breakpoint in map-keys($map) {
+			$breakpoint-down: map-get($map, $breakpoint);
+
+			@include media-breakpoint-down($breakpoint) {
+				@include clay-css($breakpoint-down);
+			}
+		}
+	}
+}
+
 /// A Bootstrap 4 mixin that generates the correct number of grid classes given any value of `$grid-columns`. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
 /// @deprecated
 /// @param {Number} $columns[$grid-columns]

package/src/scss/mixins/_links.scss

@@ -870,10 +870,30 @@
 			$link: setter(map-get($map, link), ());
 			$link: map-merge($link, $clay-link);
 
+			$href: setter(map-get($map, href), ());
+			$href: map-deep-merge($href, $link);
+
 			@include clay-css($map);
 
-			a {
-				@include clay-link($link);
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
+			&[href],
+			[href] {
+				@include clay-link($href);
 			}
 		}
 	}

package/src/scss/variables/_aspect-ratio.scss

@@ -0,0 +1,26 @@
+$aspect-ratio-sizes: () !default;
+$aspect-ratio-sizes: map-deep-merge(
+	(
+		aspect-ratio-3-to-2: (
+			height: 2,
+			width: 3,
+		),
+		aspect-ratio-4-to-3: (
+			height: 3,
+			width: 4,
+		),
+		aspect-ratio-8-to-3: (
+			height: 3,
+			width: 8,
+		),
+		aspect-ratio-8-to-5: (
+			height: 5,
+			width: 8,
+		),
+		aspect-ratio-16-to-9: (
+			height: 9,
+			width: 16,
+		),
+	),
+	$aspect-ratio-sizes
+);

package/src/scss/variables/_buttons.scss

@@ -92,6 +92,9 @@ $btn: map-deep-merge(
 		),
 		inline-item: (
 			font-size: $btn-inline-item-font-size,
+			lexicon-icon: (
+				margin-top: 0,
+			),
 		),
 		btn-section: (
 			display: block,
@@ -226,6 +229,9 @@ $btn-monospaced: map-deep-merge(
 			height: $btn-monospaced-size-mobile,
 			width: $btn-monospaced-size-mobile,
 		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
 		c-inner: (
 			align-items: center,
 			display: flex,