@clayui/css 3.50.0 → 3.53.0

package/src/images/icons/nodes.svg

@@ -0,0 +1,9 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline" d="M387.9,365.3l-31.2-31.2c36-44,36.9-104.5,3.9-151.7l32.9-32.9C422.9,172.6,512,159.8,512,79.7c0-106.5-160-106.1-160,0c0,18.5,6.5,35.3,17.1,48.9l-30.3,30.3c-50.5-40.4-112.3-41.8-160.9-3.9l-31.2-31.2C155.1,111.2,160,96,160,79.7c0-103-160-108.3-160,0c0,62.9,71.7,102.4,124.1,66.8l31.2,31.2c-28.3,30.3-45.4,108.9,3.9,161.1l-30.3,30.3C80,329.3,0,359.8,0,432c0,106.6,160,106.6,160,0c0-14.1-3.9-27.1-10.3-38.5l32.9-32.9c43.9,31.8,106.6,31.8,151.5-3.9l31.2,31.2c-8.4,12.7-13.3,27.8-13.3,44.1c0,103.3,160,109.5,160,0C512,360.2,430.3,332.2,387.9,365.3z M448,79.7c0,20.4-32,21.4-32,0C416,58.6,448,58.8,448,79.7z M64,79.7c0-21.9,32-21.1,32,0C96,100.2,64,100.7,64,79.7z M64,432c0-20.7,32-21.7,32,0C96,452.9,64,452.7,64,432z M192,255.9c0-84.5,128-85,128,0C320,339.9,192,341.4,192,255.9z M416.2,433c0-23.1,31.8-20.8,31.8-0.9C448,453,416.2,451.8,416.2,433z"/>
+</svg>

package/src/images/icons/opacity.svg

@@ -0,0 +1,16 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path class="lexicon-icon-outline lx-opacity-square-1" d="M0 256h128v128H0z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-2" d="M128 128h128v128H128z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-3" d="M0 64C0 28.654 28.654 0 64 0h64v128H0V64Z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-4" d="M128 384h128v128H128z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-5" d="M256 0h128v128H256z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-6" d="M256 256h128v128H256z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-7" d="M384 384h128v64c0 35.346-28.654 64-64 64h-64V384Z"/>
+  <path class="lexicon-icon-outline lx-opacity-square-8" d="M384 128h128v128H384z"/>
+</svg>

package/src/images/icons/order-form-cog.svg

@@ -0,0 +1,9 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline" d="M352,64H64v384h144c41.3,0,41.3,64,0,64H64c-35.3,0-64-28.7-64-64V64C0,28.7,28.7,0,64,0h288c35.3,0,64,28.7,64,64v128c0,41.3-64,41.3-64,0V64z M288,128H128c-41.3,0-41.3,64,0,64h160C329.2,192,329.2,128,288,128z M128,224c-41.3,0-41.3,64,0,64h96c41.3,0,41.3-64,0-64H128z M160,320h-32c-41.3,0-41.3,64,0,64h32C201.3,384,201.3,320,160,320z M481.4,396.4c1.1-7.7-0.3-19.6-1-25c1.9-1.3,40.8-16.5,29.2-36.8l-17.8-31.5c-11.3-20.2-44.1,3.7-46.1,4.6c-6.4-5.2-17.1-10.9-24.9-14c-0.3-2,1-37.7-19.2-37.7h-35c-21.2,0-18.9,35.3-19.1,37.3c-9.2,3.8-18.4,9.5-25.1,14.5c-1.8-0.9-33.3-24.2-44.2-7.5l-19.9,30.5c-11.6,18.8,26.7,38.9,28.6,40.4c-0.8,5.8-1.5,17.6-0.3,25.4c-1.9,1.3-39.2,18.1-28.4,37.3l19.4,32.2c12,19.7,42.9-5.2,44.7-6.1c6.6,5.1,17.2,11.6,25.1,14.6c0.2,2-1.6,37.2,18.7,37.2l36,0.1c20.6,0,18.4-35.6,18.6-37.5c9.3-3.7,18.6-8.7,25.2-13.9c2.1,0.9,36.6,23.1,47.3,4l16.8-30C520.8,416.9,483.3,397.8,481.4,396.4z M384.1,427.6c-51.8,0-55.2-80,0-80C438.4,347.7,435.9,427.6,384.1,427.6z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/order-form-pencil.svg

@@ -0,0 +1,13 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-order-form-pencil-border" d="M64,64h336c0,41.3,64,41.3,64,0c0-35.3-28.7-64-64-64H64C28.7,0,0,28.7,0,64v384c0,35.3,28.7,64,64,64h192c41.3,0,41.3-64,0-64H64V64z"/>
+	<path class="lexicon-icon-outline lx-order-form-pencil-line-1" d="M160,128h144c41.3,0,41.3,64,0,64H160C118.7,192,118.7,128,160,128z"/>
+	<path class="lexicon-icon-outline lx-order-form-pencil-line-2" d="M160,224h96c41.3,0,41.3,64,0,64h-96C118.7,288,118.7,224,160,224z"/>
+	<path class="lexicon-icon-outline lx-order-form-pencil-line-3" d="M160,320c-41.3,0-41.3,64,0,64h96c41.3,0,41.3-64,0-64H160z"/>
+	<path class="lexicon-icon-outline lx-order-form-pencil-pencil" d="M339,425.5l0.1-219.1l86.4-84.1L512,208v217.6C512,540,339,541.6,339,425.5z M425.4,206.4l-28.8,28.5l0.1,117.1l57.6,0l-0.1-117.1L425.4,206.4z M454.2,416l-57.6,0C389.7,467,460.6,467.7,454.2,416z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/order-form-tag.svg

@@ -0,0 +1,9 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline" d="M352,64H64v384h160c41.3,0,41.3,64,0,64H64c-35.3,0-64-28.7-64-64V64C0,28.7,28.7,0,64,0h288c35.3,0,64,28.7,64,64v128c0,41.3-64,41.3-64,0V64z M288,128H128c-41.3,0-41.3,64,0,64h160C329.3,192,329.3,128,288,128z M128,224c-41.3,0-41.3,64,0,64h96c41.3,0,41.3-64,0-64H128z M160,320h-32c-41.3,0-41.3,64,0,64h32C201.3,384,201.3,320,160,320z M448,320v45.3l-69.5,69.5l-45.3-45.3l69.5-69.5H448z M366.9,265.4c6-6,14.1-9.4,22.6-9.4H480c17.7,0,32,14.3,32,32v90.5c0,8.5-3.4,16.6-9.4,22.6L401.1,502.6c-12.5,12.5-32.8,12.5-45.3,0l-90.5-90.5c-12.5-12.5-12.5-32.8,0-45.3L366.9,265.4z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/order-form.svg

@@ -0,0 +1,12 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-order-form-line-1" d="M176,128c-40.9,0-43.8,64,0,64h160c42.8,0,42.5-64,0-64H176z"/>
+	<path class="lexicon-icon-outline lx-order-form-line-2" d="M176,224c-40.9,0-43.8,64,0,64h160c42.8,0,42.5-64,0-64H176z"/>
+	<path class="lexicon-icon-outline lx-order-form-line-3" d="M176,320c-40.9,0-43.8,64,0,64h160c42.8,0,42.5-64,0-64H176z"/>
+	<path class="lexicon-icon-outline lx-order-form-border" d="M48,64c0-35.3,28.7-64,64-64h288c35.3,0,64,28.7,64,64v384c0,35.3-28.7,64-64,64H112c-35.3,0-64-28.7-64-64V64z M112,64h288v384H112V64z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/percentage-banner.svg

@@ -0,0 +1,12 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-percentage-banner-line" d="M164.7,292.7c-14.6,14.6,8,37.2,22.6,22.6l160-160c14.6-14.6-8-37.2-22.6-22.6L164.7,292.7z"/>
+	<path class="lexicon-icon-outline lx-percentage-banner-border" d="M0,64c0,0,0,221.6,0,372.5c0,28.3,34.7,42.8,59,28.5c96.4-56.9,119.5,47,197,47c76,0,106.1-102.2,194.4-51.5c25.1,14.4,61.6,0.1,61.6-28.9V64c0-35.3-28.7-64-64-64H64C28.7,0,0,28.7,0,64z M256,448c-64,0-69.1-83.3-192-62.5V64h384v321.5C326.8,367.1,324.7,448,256,448z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<circle class="lexicon-icon-outline lx-percentage-banner-dot-1" cx="192" cy="160" r="32"/>
+	<circle class="lexicon-icon-outline lx-percentage-banner-dot-2" cx="320" cy="288" r="32"/>
+</svg>

package/src/images/icons/percentage-symbol.svg

@@ -0,0 +1,11 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-percentage-symbol-dot-1" d="M64.1,144c0,103.1,160,103.1,160,0C224,40.9,64.1,40.9,64.1,144z M112,144c0,41.3,64,41.3,64,0C176,102.8,112,102.8,112,144z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-percentage-symbol-line" d="M73.4,393.4l320-320c29.2-29.2,74.4,16.1,45.2,45.2l-320,320C89.5,467.7,44.3,422.5,73.4,393.4z"/>
+	<path class="lexicon-icon-outline lx-percentage-symbol-dot-2" d="M288,368c0-103.1,160-103.1,160,0C447.9,471.1,288,471.1,288,368z M336,368c0-41.3,64-41.3,64,0C400,409.2,336,409.2,336,368z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/price-tag.svg

@@ -0,0 +1,10 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-price-tag-border" d="M272.7,423.7c-12.7,12.7-33.4,12.7-46.1,0L88.3,285.4c-12.7-12.7-12.7-33.4,0-46.1L245.7,81.9c5.8-5.8,13.6-9.2,21.8-9.5l144.1-5.8c19-0.8,34.6,14.9,33.9,33.9l-5.8,144.1c-0.3,8.2-3.7,16-9.5,21.8L272.7,423.7z M208.6,26.8c11.6-11.6,27.1-18.4,43.5-19l192.1-7.7c38-1.5,69.3,29.7,67.8,67.8l-7.7,192.1c-0.7,16.4-7.5,31.9-19,43.5L295.8,492.9c-25.5,25.5-66.8,25.5-92.2,0L19.1,308.5c-25.5-25.5-25.5-66.8,0-92.2L208.6,26.8z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-price-tag-dollar" d="M341.8,146.4c14.9-14.9,37.9,8,22.9,22.9L352,182.2c7.5,11.9,11.3,25.5,10.6,38.9c-1.2,20-33.6,19.5-32.5-1.6c-7.5-58.1-84.5-48.5-45.5,7.6l0.1,0.1c46.6,53.1,4.5,130.8-70,92.2L203,331.1c-15.4,15.4-38.3-7.6-22.9-22.9l11.6-11.6c-7.6-11.9-16.8-33.4-16-46.9c1.2-19.6,33.8-19.2,32.5,1.8c5,61,102.2,67.1,45.3-13.6c-44.8-65.1,31-109.8,75.5-78.6L341.8,146.4z"/>
+</svg>

package/src/images/icons/ruler.svg

@@ -0,0 +1,9 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline" d="M279.2,21.2c23.1-23.3,61.2-33.9,97.6,2.8l107.3,108c42.2,42.4,32,60.6-1.3,94.1L227.5,483.6c-33.4,33.6-49.7,42.1-91.9-0.3l-107.3-108c-36.4-36.7-37.5-63.3-4.4-96.6L279.2,21.2z M326.7,64.5l113.1,113.9l-29.3,29.9l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2l-22.6,22.8l-54.6-55c-14.6-14.7-37.2,8.1-22.6,22.8l54.6,55L320,299.4l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2L274.7,345l-54.6-55c-14.6-14.7-37.2,8.1-22.6,22.8l54.6,55l-22.6,22.8l-32-32.2c-14.6-14.7-37.2,8.1-22.6,22.8l32,32.2l-25.1,25.3L68.6,324.7L326.7,64.5z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/images/icons/shopping-cart.svg

@@ -5,7 +5,7 @@
 * SPDX-License-Identifier: BSD-3-Clause
 -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-	<circle class="lexicon-icon-outline shopping-cart-wheel1" cx="144" cy="464" r="48"></circle>
-	<circle class="lexicon-icon-outline shopping-cart-wheel2" cx="432" cy="464" r="48"></circle>
-	<path class="lexicon-icon-outline shopping-cart-basket" d="M495.9,352.1H192.5c-17.7,0-32.4-14.2-32.4-31.8s14.9-31.9,32.6-31.9c2.5,0,305-34.8,305-34.8c8.1-0.9,14.2-7.7,14.2-15.9V80.1c0-8.8-7.1-15.9-15.9-15.9H129.2l-20.8-53.9C106,4.1,100.1,0,93.5,0H16C-5.5,0.7-5.1,31.7,16.1,32h66.5l88.2,228.5c-24.4,9-42.6,32.2-42.6,59.7c0,35.3,29.2,63.8,64.5,63.8H496C517.9,382.5,516.6,353,495.9,352.1z M288.1,160.1v-64h94.5L384,160L288.1,160.1z M480.1,160H416l0.1-64h64V160z M256,96.1l0.1,63.9h-89.9l-24.7-63.9H256z"></path>
+	<path class="lexicon-icon-outline lx-shopping-cart-basket" d="M93.2,51.2L181,255.9h212.1l24.7-124.2c10.5-43.1,72.1-28.5,60.8,20.2l-31.8,145.3c-4,13.1-16.2,22.7-30.6,22.7H159.9c-13.4,0-24.9-8.2-29.7-19.9L34.3,76.5C20.3,39.8,73.2,11.6,93.2,51.2z"/>
+	<ellipse class="lexicon-icon-outline lx-shopping-cart-wheel-1" cx="143.9" cy="432" rx="48.1" ry="48"/>
+	<ellipse class="lexicon-icon-outline lx-shopping-cart-wheel-2" cx="400.2" cy="432" rx="48.1" ry="48"/>
 </svg>

package/src/images/icons/squares-clock.svg

@@ -0,0 +1,13 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-squares-clock-square-2" d="M153.1,512H70.9C40.6,512,16,487.4,16,457.1v-82.3c0-30.3,24.6-54.9,54.9-54.9h82.3c30.3,0,54.9,24.6,54.9,54.9v82.3C208,487.4,183.4,512,153.1,512z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-square-3" d="M409.1,512h-82.3c-30.3,0-54.9-24.6-54.9-54.9v-82.3c0-30.3,24.6-54.9,54.9-54.9h82.3c30.3,0,54.9,24.6,54.9,54.9v82.3C464,487.4,439.4,512,409.1,512z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-hands" d="M368,121.8h38.4c25.1,0,24.1,32,0,32H336V89.4c0-21.8,32-23.2,32,0V121.8z"/>
+	<path class="lexicon-icon-outline lx-squares-clock-border" d="M496,128c0-172.6-256-168.8-256,0C240,297.5,496,299.9,496,128z M291.2,128c0-103,153.6-103.1,153.6,0C444.8,231.1,291.2,231.1,291.2,128z" clip-rule="evenodd" fill-rule="evenodd"/>
+	<path class="lexicon-icon-outline lx-squares-clock-square-1" d="M187.2,64h-52.3C104.6,64,80,88.6,80,118.8v82.3c0,30.3,24.6,54.9,54.9,54.9h89.6C224.5,256,146.6,175.1,187.2,64z"/>
+</svg>

package/src/images/icons/squares.svg

@@ -0,0 +1,11 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-squares-1" d="M256,224h-96c-35.3,0-64-28.7-64-64V64c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C320,195.3,291.3,224,256,224z"/>
+	<path class="lexicon-icon-outline lx-squares-2" d="M160,512H64c-35.3,0-64-28.7-64-64v-96c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C224,483.3,195.3,512,160,512z"/>
+	<path class="lexicon-icon-outline lx-squares-3" d="M448,512h-96c-35.3,0-64-28.7-64-64v-96c0-35.3,28.7-64,64-64h96c35.3,0,64,28.7,64,64v96C512,483.3,483.3,512,448,512z"/>
+</svg>

package/src/images/icons/warehouse.svg

@@ -0,0 +1,12 @@
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path class="lexicon-icon-outline lx-warehouse-square-1" d="M176,215c0-18.2,14.3-33,32-33h32c17.7,0,32,14.8,32,33v33c0,18.2-14.3,33-32,33h-32c-17.7,0-32-14.8-32-33V215z"/>
+	<path class="lexicon-icon-outline lx-warehouse-square-2" d="M240,347.1c0-18.2-14.3-33-32-33h-32c-17.7,0-32,14.8-32,33v33c0,18.2,14.3,33,32,33h32c17.7,0,32-14.8,32-33V347.1z"/>
+	<path class="lexicon-icon-outline lx-warehouse-square-3" d="M336,314.1c17.7,0,32,14.8,32,33v33c0,18.2-14.3,33-32,33h-32c-17.7,0-32-14.8-32-33v-33c0-18.2,14.3-33,32-33H336z"/>
+	<path class="lexicon-icon-outline lx-warehouse-border" d="M217.6,13.5c22.8-17.6,54-17.6,76.8,0l192,148.6c16.1,12.5,25.6,32.1,25.6,52.9v297.3H0V215c0-20.8,9.5-40.4,25.6-52.9L217.6,13.5z M448,215L256,66.3L64,215v231.2h384V215z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

package/src/scss/atlas/variables/_globals.scss

@@ -358,9 +358,27 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-base: 1rem !default; // 16px
-$font-size-lg: 1.125rem !default; // 18px
-$font-size-sm: 0.875rem !default; // 14px
+$font-scale: () !default;
+$font-scale: map-merge(
+	(
+		1: 0.625rem,
+		2: 0.75rem,
+		3: 0.875rem,
+		4: 1rem,
+		5: 1.125rem,
+		6: 1.25rem,
+		7: 1.5rem,
+		8: 1.75rem,
+		9: 2rem,
+		10: 2.25rem,
+		11: 2.5rem,
+	),
+	$font-scale
+);
+
+$font-size-base: map-get($font-scale, 4) !default; // 16px
+$font-size-lg: map-get($font-scale, 5) !default; // 18px
+$font-size-sm: map-get($font-scale, 3) !default; // 14px
 
 $font-size-base-mobile: $font-size-base !default;
 $font-size-lg-mobile: $font-size-lg !default;
@@ -503,7 +521,7 @@ $display3-weight: 300 !default;
 $display4-size: 3.5rem !default;
 $display4-weight: 300 !default;
 
-$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -512,7 +530,7 @@ $text-muted: $gray-500 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;

package/src/scss/atlas/variables/_utilities.scss

@@ -21,14 +21,18 @@ $close: map-deep-merge(
 	(
 		color: $gray-900,
 		opacity: 1,
-		hover-color: $gray-900,
-		hover-opacity: 1,
-		focus-box-shadow: $btn-focus-box-shadow,
-		focus-opacity: 1,
-		focus-outline: 0,
-		disabled-color: $gray-600,
-		disabled-opacity: $btn-disabled-opacity,
-		btn-focus-box-shadow: $btn-focus-box-shadow,
+		hover: (
+			color: $gray-900,
+			opacity: 1,
+			outline: 0,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+		),
+		disabled: (
+			color: $gray-600,
+			opacity: 0.65,
+		),
 	),
 	$close
 );

package/src/scss/cadmin/components/_navbar.scss

@@ -65,6 +65,7 @@
 		align-items: center;
 		display: flex;
 		word-wrap: normal;
+		max-width: 100%;
 	}
 
 	.nav-item {

package/src/scss/cadmin/components/_popovers.scss

@@ -1,5 +1,15 @@
-.popover {
-	@include clay-popover-variant($cadmin-popover);
+// Popovers
+
+@each $selector, $value in $cadmin-popovers {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-popover-variant($value);
+	}
 }
 
 %bs-popover-bottom {
@@ -140,24 +150,46 @@
 	@extend %bs-popover-top !optional;
 }
 
-.popover-header {
-	@include clay-css($cadmin-popover-header);
+// Popover Headers
 
-	&::before {
-		@include clay-css(map-get($cadmin-popover-header, before));
-	}
+@each $selector, $value in $cadmin-popover-headers {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
 
-	&::after {
-		@include clay-css(map-get($cadmin-popover-header, after));
+	#{$selector} {
+		@include clay-popover-header-variant($value);
 	}
+}
 
-	&::empty {
-		@include clay-css(map-get($cadmin-popover-header, empty));
+// Popover Bodies
+
+@each $selector, $value in $cadmin-popover-bodies {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-popover-header-variant($value);
 	}
 }
 
-.popover-body {
-	@include clay-css($cadmin-popover-body);
+// Popover Widths
+
+@each $selector, $value in $cadmin-popover-widths {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-popover-variant($value);
+	}
 }
 
 // Top

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

@@ -107,6 +107,27 @@ $cadmin-popover: map-deep-merge(
 	$cadmin-popover
 );
 
+// Popovers
+
+$cadmin-popovers: () !default;
+$cadmin-popovers: map-deep-merge(
+	(
+		popover: $cadmin-popover,
+		popover-secondary: (
+			box-shadow: 0 8px 16px 0 rgba($cadmin-primary, 0.16),
+			popover-header: (
+				background-color: transparent,
+				border-color: transparent,
+				padding-bottom: 0,
+			),
+			close: (
+				color: $cadmin-gray-600,
+			),
+		),
+	),
+	$cadmin-popovers
+);
+
 // .popover-header
 
 $cadmin-popover-header: () !default;
@@ -136,6 +157,16 @@ $cadmin-popover-header: map-deep-merge(
 	$cadmin-popover-header
 );
 
+// Popover Headers
+
+$cadmin-popover-headers: () !default;
+$cadmin-popover-headers: map-deep-merge(
+	(
+		popover-header: $cadmin-popover-header,
+	),
+	$cadmin-popover-headers
+);
+
 // .popover-body
 
 $cadmin-popover-body: () !default;
@@ -151,6 +182,28 @@ $cadmin-popover-body: map-merge(
 	$cadmin-popover-body
 );
 
+// Popover Bodies
+
+$cadmin-popover-bodies: () !default;
+$cadmin-popover-bodies: map-deep-merge(
+	(
+		popover-body: $cadmin-popover-body,
+	),
+	$cadmin-popover-bodies
+);
+
+// Popover Widths
+
+$cadmin-popover-widths: () !default;
+$cadmin-popover-widths: map-deep-merge(
+	(
+		popover-width-lg: (
+			max-width: 421px,
+		),
+	),
+	$cadmin-popover-widths
+);
+
 // .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
 
 $cadmin-clay-popover-top: () !default;

package/src/scss/components/_custom-forms.scss

@@ -171,14 +171,16 @@ label.custom-control-label {
 					$custom-forms-transition
 				);
 
-				top: add(
+				top: calc(
 					(
-							$font-size-base *
-								$line-height-base -
-								$custom-control-indicator-size
-						) *
-						0.5,
-					$custom-control-indicator-border-width * 2
+							(
+									#{$font-size-base} *
+										#{$line-height-base} -
+										#{$custom-control-indicator-size}
+								) *
+								0.5
+						) +
+						(#{$custom-control-indicator-border-width} * 2)
 				);
 				width: $custom-switch-indicator-size;
 			}

package/src/scss/components/_forms.scss

@@ -305,8 +305,7 @@ select.form-control[multiple] {
 textarea.form-control,
 textarea.form-control-plaintext,
 .form-control.form-control-textarea {
-	height: $input-textarea-height;
-	resize: vertical;
+	@include clay-form-control-variant($input-textarea);
 }
 
 // File
@@ -445,24 +444,15 @@ textarea.form-control-plaintext,
 // Bootstrap 4 @extend .form-control-lg; work around
 
 %clay-form-control-lg {
-	@include border-radius($input-border-radius-lg);
-
-	font-size: $input-font-size-lg;
-	height: $input-height-lg;
-	padding-bottom: $input-padding-y-lg;
-	padding-left: $input-padding-x-lg;
-	padding-right: $input-padding-x-lg;
-	padding-top: $input-padding-y-lg;
-
-	@include clay-scale-component {
-		height: $input-height-lg-mobile;
-	}
+	@include clay-form-control-variant($input-lg);
 }
 
 .form-control-lg {
 	@extend %clay-form-control-lg;
 }
 
+// Select Lg
+
 %clay-select-form-control-lg {
 	height: $input-height-lg;
 
@@ -471,66 +461,34 @@ textarea.form-control-plaintext,
 	}
 }
 
+// Textarea Lg
+
 %clay-textarea-form-control-lg {
-	height: $input-textarea-height-lg;
+	@include clay-form-control-variant($input-textarea-lg);
 }
 
 textarea.form-control-lg,
 .form-control-lg.form-control-textarea {
-	height: $input-textarea-height-lg;
-}
-
-// Form control sizing
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-.form-control-sm {
-	@include border-radius($input-border-radius-sm);
-
-	font-size: $input-font-size-sm;
-	height: $input-height-sm;
-	line-height: $input-line-height-sm;
-	padding: $input-padding-y-sm $input-padding-x-sm;
-}
-
-.form-control-lg {
-	@include border-radius($input-border-radius-lg);
-
-	font-size: $input-font-size-lg;
-	height: $input-height-lg;
-	line-height: $input-line-height-lg;
-	padding: $input-padding-y-lg $input-padding-x-lg;
+	@extend %clay-textarea-form-control-lg !optional;
 }
 
 // Bootstrap 4 @extend .form-control-sm; work around
 
 %clay-form-control-sm {
-	@include border-radius($input-border-radius-sm);
-
-	font-size: $input-font-size-sm;
-	height: $input-height-sm;
-	padding-bottom: $input-padding-y-sm;
-	padding-left: $input-padding-x-sm;
-	padding-right: $input-padding-x-sm;
-	padding-top: $input-padding-y-sm;
-
-	@include clay-scale-component {
-		height: $input-height-sm-mobile;
-	}
+	@include clay-form-control-variant($input-sm);
 }
 
 .form-control-sm {
-	@extend %clay-form-control-sm;
+	@extend %clay-form-control-sm !optional;
 }
 
+// Select Sm
+
 %clay-select-form-control-sm {
-	@include clay-css(setter($form-control-select-sm, ()));
+	@include clay-form-control-variant($form-control-select-sm);
 
 	@include clay-scale-component {
-		$mobile: setter(map-get($form-control-select-sm, mobile));
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($form-control-select-sm, mobile));
 	}
 }
 
@@ -538,13 +496,15 @@ textarea.form-control-lg,
 	@extend %clay-select-form-control-sm !optional;
 }
 
+// Textarea Sm
+
 %clay-textarea-form-control-sm {
-	height: $input-textarea-height-sm;
+	@include clay-form-control-variant($input-textarea-sm);
 }
 
 textarea.form-control-sm,
 .form-control-sm.form-control-textarea {
-	height: $input-textarea-height-sm;
+	@extend %clay-textarea-form-control-sm !optional;
 }
 
 // Fieldset

package/src/scss/components/_navbar.scss

@@ -63,6 +63,7 @@
 		align-items: center;
 		display: flex;
 		word-wrap: normal;
+		max-width: 100%;
 	}
 
 	.nav-item {