@clayui/css - npm Package Compare versions

Comparing version 3.163.0 to 3.164.0

lib/images/icons/arrows-all.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 46 34" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-right" d="M32.083 28A2.083 2.083 0 0 1 30 25.917v-5.834c0-1.15.933-2.083 2.083-2.083h5.834c1.15 0 2.083.933 2.083 2.083v5.834c0 1.15-.933 2.083-2.083 2.083h-5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m34.685 20.72 2.388 2.052a.317.317 0 0 1 0 .493l-2.388 2.051c-.256.22-.694.063-.694-.246v-4.102c.003-.31.438-.466.694-.247Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-left" d="M13.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083H8.083C6.933 18 6 18.933 6 20.083v5.834C6 27.067 6.933 28 8.083 28h5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m11.422 25.298-2.388-2.051a.317.317 0 0 1 0-.494l2.388-2.05c.255-.22.694-.064.694.246v4.102c-.003.31-.439.466-.694.247Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-down" d="M25.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083h-5.834c-1.15 0-2.083.933-2.083 2.083v5.834c0 1.15.933 2.083 2.083 2.083h5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m25.298 22.494-2.051 2.388a.317.317 0 0 1-.494 0l-2.05-2.388c-.22-.256-.064-.694.246-.694h4.102c.31.003.466.438.247.694Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-up" d="M18 13.917c0 1.15.933 2.083 2.083 2.083h5.834c1.15 0 2.083-.933 2.083-2.083V8.083C28 6.933 27.067 6 25.917 6h-5.834C18.933 6 18 6.933 18 8.083v5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m20.702 11.485 2.051-2.388a.317.317 0 0 1 .494 0l2.05 2.388c.22.256.064.694-.246.694H20.95c-.31-.003-.466-.438-.247-.694Z" />
+</svg>

lib/images/icons/box-squared.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M14 0a2 2 0 0 1 2 2v4a1 1 0 1 1-2 0V2H2v12h4a1 1 0 1 1 0 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12Z" />
+	<path class="lexicon-icon-outline" d="M14 9a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" />
+</svg>

lib/images/icons/chart-area.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M6.559 2.313a.971.971 0 0 1 1.428 0l2.558 2.723 2.096-1.784a.968.968 0 0 1 1.264 0l1.727 1.47c.233.199.368.496.368.81v5.423c0 .577-.448 1.045-1 1.045H5c-.552 0-1-.468-1-1.045V5.463c0-.274.103-.537.286-.733L6.56 2.312Z" />
+</svg>

lib/images/icons/chart-bar-stacked.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M3 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2ZM3 6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" />
+</svg>

lib/images/icons/chart-bar-x-axis.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M15 14a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2h14ZM3 6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Zm6 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Z" />
+</svg>

lib/images/icons/chart-bar-y-axis.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Zm11 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h7Zm3-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10ZM9 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h4Z" />
+</svg>

lib/images/icons/chart-bar.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M3 6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" />
+</svg>

lib/images/icons/chart-donut.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M7.25 4.07A4.001 4.001 0 0 0 8 12a3.98 3.98 0 0 0 2.247-.692l2.854 2.853A8 8 0 1 1 7.25.035V4.07Z" />
+	<path class="lexicon-icon-outline" d="M15.964 8.75a7.96 7.96 0 0 1-1.803 4.35l-2.853-2.853c.302-.443.517-.95.62-1.497h4.036ZM8.75.035a8 8 0 0 1 7.214 7.215h-4.035A4.003 4.003 0 0 0 8.75 4.07V.035Z" />
+</svg>

lib/images/icons/chart-line-down.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M10.483 4a.94.94 0 0 1 .68.31l2.99 3.355v-.488c0-.487.414-.883.923-.883.51 0 .924.396.924.883v2.94c0 .457-.364.834-.83.88a1.43 1.43 0 0 1-.094.003h-2.768c-.51 0-.924-.396-.924-.883V10c0-.487.414-.882.924-.882h.717l-2.597-2.912L8.366 8.31a.945.945 0 0 1-.674.278.95.95 0 0 1-.605-.215L7.02 8.31 4.25 5.486a.855.855 0 0 1 .043-1.247.953.953 0 0 1 1.304.04l2.096 2.138 2.096-2.139A.945.945 0 0 1 10.483 4Z" />
+</svg>

lib/images/icons/chart-line-up.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M15.096 3.001a.931.931 0 0 1 .153.016l.022.004a.925.925 0 0 1 .143.043l.034.014a.918.918 0 0 1 .133.074l.016.011a.9.9 0 0 1 .06.045l.013.01.029.024.021.023.018.017a.925.925 0 0 1 .119.153l.021.037a1.06 1.06 0 0 1 .063.135l.01.028.017.055.007.034a.91.91 0 0 1 .017.09c.002.016.002.033.003.05a.455.455 0 0 1 .004.053l.001.017v2.8a.928.928 0 0 1-.922.932.928.928 0 0 1-.923-.933v-.385l-3.01 3.346a.921.921 0 0 1-.661.306.92.92 0 0 1-.675-.273L7.693 7.586l-2.117 2.14a.916.916 0 0 1-1.305 0 .941.941 0 0 1 0-1.32l2.77-2.8.07-.063a.915.915 0 0 1 1.234.063l2.084 2.108 2.56-2.848h-.681a.928.928 0 0 1-.923-.932c0-.516.413-.934.923-.934h2.77l.018.001Z" />
+</svg>

lib/images/icons/chart-line.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M14.241 4.35a.999.999 0 1 1 1.518 1.3l-4.285 5a1.001 1.001 0 0 1-1.519 0L7.856 8.202 5.76 10.65a.999.999 0 1 1-1.518-1.3l2.857-3.334a1 1 0 0 1 1.518 0l2.098 2.447L14.24 4.35Z" />
+</svg>

lib/images/icons/chart-pie-fill.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M7.25 8c0 .199.08.39.22.53l5.63 5.631A8 8 0 1 1 7.25.035V8Z" />
+	<path class="lexicon-icon-outline" d="M15.271 4.667A7.966 7.966 0 0 1 16 8a7.965 7.965 0 0 1-1.839 5.1l-4.94-4.94 6.05-3.493ZM8.75.035a7.99 7.99 0 0 1 5.77 3.333L8.75 6.7V.035Z" />
+</svg>

lib/images/icons/chart-pie.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM7 2.084A6 6 0 0 0 8 14a5.97 5.97 0 0 0 3.475-1.111L7.293 8.707A1 1 0 0 1 7 8V2.084Zm2.628 6.13 3.26 3.26A5.97 5.97 0 0 0 14 8a5.98 5.98 0 0 0-.376-2.093L9.628 8.214ZM9 6.268l3.623-2.092A5.993 5.993 0 0 0 9 2.084v4.184Z" fill-rule="evenodd" />
+</svg>

lib/images/icons/plant.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1.5.05c.04-.006 3.243-.448 5.02 1.43 1.186 1.252 1.438 3.223 1.473 4.408.004.037.007.074.007.112v3.517c.364-1.059 1.031-2.38 2.213-3.079 2.173-1.285 5.259.019 5.259.019-.004.031-.448 3.393-2.611 4.672-1.7 1.005-3.958.423-4.86.124V15a1 1 0 0 1-2 0V6.864c-1.005-.136-2.191-.5-3.047-1.403C1.176 3.58 1.497.086 1.5.05Z" />
+</svg>

lib/images/icons/user-cog.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M6.858 7.797V16C3.429 16 0 15.01 0 13.028c0-3.505 3.43-5.24 6.858-5.23ZM6.857 0c1.893 0 3.428 1.522 3.428 3.399S8.75 6.797 6.857 6.797c-1.894 0-3.429-1.522-3.429-3.398C3.428 1.522 4.963 0 6.857 0Zm8.189 12.386c.036-.242-.008-.614-.03-.783l.758-.502a.499.499 0 0 0 .155-.647l-.558-.984a.5.5 0 0 0-.64-.222l-.8.367a3.375 3.375 0 0 0-.78-.437l-.104-.749A.502.502 0 0 0 12.55 8h-1.094a.502.502 0 0 0-.497.432l-.101.733c-.29.12-.577.298-.786.454l-.781-.378c-.23-.09-.475-.07-.6.144l-.622.953a.5.5 0 0 0 .11.634l.785.628a3.36 3.36 0 0 0-.009.795l-.74.509a.501.501 0 0 0-.149.656l.608 1.008a.505.505 0 0 0 .642.209l.756-.402c.206.16.539.363.784.458l.09.722a.5.5 0 0 0 .496.442l1.126.003a.5.5 0 0 0 .499-.44l.083-.733a3.33 3.33 0 0 0 .787-.434l.823.338c.24.113.528.02.655-.213l.525-.94a.497.497 0 0 0-.146-.64l-.748-.551Zm-3.041.976c-1.62 0-1.725-2.499 0-2.499 1.698 0 1.62 2.5 0 2.5Z" />
+</svg>

src/images/icons/arrows-all.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 46 34" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-right" d="M32.083 28A2.083 2.083 0 0 1 30 25.917v-5.834c0-1.15.933-2.083 2.083-2.083h5.834c1.15 0 2.083.933 2.083 2.083v5.834c0 1.15-.933 2.083-2.083 2.083h-5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m34.685 20.72 2.388 2.052a.317.317 0 0 1 0 .493l-2.388 2.051c-.256.22-.694.063-.694-.246v-4.102c.003-.31.438-.466.694-.247Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-left" d="M13.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083H8.083C6.933 18 6 18.933 6 20.083v5.834C6 27.067 6.933 28 8.083 28h5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m11.422 25.298-2.388-2.051a.317.317 0 0 1 0-.494l2.388-2.05c.255-.22.694-.064.694.246v4.102c-.003.31-.439.466-.694.247Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-down" d="M25.917 28c1.15 0 2.083-.933 2.083-2.083v-5.834c0-1.15-.933-2.083-2.083-2.083h-5.834c-1.15 0-2.083.933-2.083 2.083v5.834c0 1.15.933 2.083 2.083 2.083h5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m25.298 22.494-2.051 2.388a.317.317 0 0 1-.494 0l-2.05-2.388c-.22-.256-.064-.694.246-.694h4.102c.31.003.466.438.247.694Z" />
+	<path class="lexicon-icon-outline lx-arrows-all-keycap lx-arrows-all-keycap-up" d="M18 13.917c0 1.15.933 2.083 2.083 2.083h5.834c1.15 0 2.083-.933 2.083-2.083V8.083C28 6.933 27.067 6 25.917 6h-5.834C18.933 6 18 6.933 18 8.083v5.834Z" />
+	<path class="lx-arrows-all-chevron" d="m20.702 11.485 2.051-2.388a.317.317 0 0 1 .494 0l2.05 2.388c.22.256.064.694-.246.694H20.95c-.31-.003-.466-.438-.247-.694Z" />
+</svg>

src/images/icons/box-squared.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M14 0a2 2 0 0 1 2 2v4a1 1 0 1 1-2 0V2H2v12h4a1 1 0 1 1 0 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12Z" />
+	<path class="lexicon-icon-outline" d="M14 9a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" />
+</svg>

src/images/icons/chart-area.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M6.559 2.313a.971.971 0 0 1 1.428 0l2.558 2.723 2.096-1.784a.968.968 0 0 1 1.264 0l1.727 1.47c.233.199.368.496.368.81v5.423c0 .577-.448 1.045-1 1.045H5c-.552 0-1-.468-1-1.045V5.463c0-.274.103-.537.286-.733L6.56 2.312Z" />
+</svg>

src/images/icons/chart-bar-stacked.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M3 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2ZM3 6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" />
+</svg>

src/images/icons/chart-bar-x-axis.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M15 14a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2h14ZM3 6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Zm6 3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Z" />
+</svg>

src/images/icons/chart-bar-y-axis.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Zm11 12a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h7Zm3-6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10ZM9 0a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h4Z" />
+</svg>

src/images/icons/chart-bar.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M3 6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2Zm6-3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2Z" />
+</svg>

src/images/icons/chart-donut.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M7.25 4.07A4.001 4.001 0 0 0 8 12a3.98 3.98 0 0 0 2.247-.692l2.854 2.853A8 8 0 1 1 7.25.035V4.07Z" />
+	<path class="lexicon-icon-outline" d="M15.964 8.75a7.96 7.96 0 0 1-1.803 4.35l-2.853-2.853c.302-.443.517-.95.62-1.497h4.036ZM8.75.035a8 8 0 0 1 7.214 7.215h-4.035A4.003 4.003 0 0 0 8.75 4.07V.035Z" />
+</svg>

src/images/icons/chart-line-down.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M10.483 4a.94.94 0 0 1 .68.31l2.99 3.355v-.488c0-.487.414-.883.923-.883.51 0 .924.396.924.883v2.94c0 .457-.364.834-.83.88a1.43 1.43 0 0 1-.094.003h-2.768c-.51 0-.924-.396-.924-.883V10c0-.487.414-.882.924-.882h.717l-2.597-2.912L8.366 8.31a.945.945 0 0 1-.674.278.95.95 0 0 1-.605-.215L7.02 8.31 4.25 5.486a.855.855 0 0 1 .043-1.247.953.953 0 0 1 1.304.04l2.096 2.138 2.096-2.139A.945.945 0 0 1 10.483 4Z" />
+</svg>

src/images/icons/chart-line-up.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M15.096 3.001a.931.931 0 0 1 .153.016l.022.004a.925.925 0 0 1 .143.043l.034.014a.918.918 0 0 1 .133.074l.016.011a.9.9 0 0 1 .06.045l.013.01.029.024.021.023.018.017a.925.925 0 0 1 .119.153l.021.037a1.06 1.06 0 0 1 .063.135l.01.028.017.055.007.034a.91.91 0 0 1 .017.09c.002.016.002.033.003.05a.455.455 0 0 1 .004.053l.001.017v2.8a.928.928 0 0 1-.922.932.928.928 0 0 1-.923-.933v-.385l-3.01 3.346a.921.921 0 0 1-.661.306.92.92 0 0 1-.675-.273L7.693 7.586l-2.117 2.14a.916.916 0 0 1-1.305 0 .941.941 0 0 1 0-1.32l2.77-2.8.07-.063a.915.915 0 0 1 1.234.063l2.084 2.108 2.56-2.848h-.681a.928.928 0 0 1-.923-.932c0-.516.413-.934.923-.934h2.77l.018.001Z" />
+</svg>

src/images/icons/chart-line.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1 0a1 1 0 0 1 1 1v13h13a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Z" />
+	<path class="lexicon-icon-outline" d="M14.241 4.35a.999.999 0 1 1 1.518 1.3l-4.285 5a1.001 1.001 0 0 1-1.519 0L7.856 8.202 5.76 10.65a.999.999 0 1 1-1.518-1.3l2.857-3.334a1 1 0 0 1 1.518 0l2.098 2.447L14.24 4.35Z" />
+</svg>

src/images/icons/chart-pie-fill.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M7.25 8c0 .199.08.39.22.53l5.63 5.631A8 8 0 1 1 7.25.035V8Z" />
+	<path class="lexicon-icon-outline" d="M15.271 4.667A7.966 7.966 0 0 1 16 8a7.965 7.965 0 0 1-1.839 5.1l-4.94-4.94 6.05-3.493ZM8.75.035a7.99 7.99 0 0 1 5.77 3.333L8.75 6.7V.035Z" />
+</svg>

src/images/icons/chart-pie.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM7 2.084A6 6 0 0 0 8 14a5.97 5.97 0 0 0 3.475-1.111L7.293 8.707A1 1 0 0 1 7 8V2.084Zm2.628 6.13 3.26 3.26A5.97 5.97 0 0 0 14 8a5.98 5.98 0 0 0-.376-2.093L9.628 8.214ZM9 6.268l3.623-2.092A5.993 5.993 0 0 0 9 2.084v4.184Z" fill-rule="evenodd" />
+</svg>

src/images/icons/plant.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M1.5.05c.04-.006 3.243-.448 5.02 1.43 1.186 1.252 1.438 3.223 1.473 4.408.004.037.007.074.007.112v3.517c.364-1.059 1.031-2.38 2.213-3.079 2.173-1.285 5.259.019 5.259.019-.004.031-.448 3.393-2.611 4.672-1.7 1.005-3.958.423-4.86.124V15a1 1 0 0 1-2 0V6.864c-1.005-.136-2.191-.5-3.047-1.403C1.176 3.58 1.497.086 1.5.05Z" />
+</svg>

src/images/icons/user-cog.svg

+<!--
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" d="M6.858 7.797V16C3.429 16 0 15.01 0 13.028c0-3.505 3.43-5.24 6.858-5.23ZM6.857 0c1.893 0 3.428 1.522 3.428 3.399S8.75 6.797 6.857 6.797c-1.894 0-3.429-1.522-3.429-3.398C3.428 1.522 4.963 0 6.857 0Zm8.189 12.386c.036-.242-.008-.614-.03-.783l.758-.502a.499.499 0 0 0 .155-.647l-.558-.984a.5.5 0 0 0-.64-.222l-.8.367a3.375 3.375 0 0 0-.78-.437l-.104-.749A.502.502 0 0 0 12.55 8h-1.094a.502.502 0 0 0-.497.432l-.101.733c-.29.12-.577.298-.786.454l-.781-.378c-.23-.09-.475-.07-.6.144l-.622.953a.5.5 0 0 0 .11.634l.785.628a3.36 3.36 0 0 0-.009.795l-.74.509a.501.501 0 0 0-.149.656l.608 1.008a.505.505 0 0 0 .642.209l.756-.402c.206.16.539.363.784.458l.09.722a.5.5 0 0 0 .496.442l1.126.003a.5.5 0 0 0 .499-.44l.083-.733a3.33 3.33 0 0 0 .787-.434l.823.338c.24.113.528.02.655-.213l.525-.94a.497.497 0 0 0-.146-.64l-.748-.551Zm-3.041.976c-1.62 0-1.725-2.499 0-2.499 1.698 0 1.62 2.5 0 2.5Z" />
+</svg>

src/scss/cadmin/components/_root.scss

+@if (variable-exists(cadmin-c-root)) {
+	html#{$cadmin-selector} {
+		&:root .cadmin {
+			@include clay-css($cadmin-c-root);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='light']:root .cadmin {
+			color-scheme: light;
+		}
+	}
+}
+
+@if (variable-exists(cadmin-c-dark)) {
+	@media (prefers-color-scheme: dark) {
+		html#{$cadmin-selector}:root .cadmin {
+			@include clay-css($cadmin-c-dark);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='dark']:root .cadmin {
+			@include clay-css($cadmin-c-dark);
+		}
+	}
+}
+
+@if (variable-exists(cadmin-c-dark-high-contrast)) {
+	@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+		html#{$cadmin-selector}:root .cadmin {
+			@include clay-css($cadmin-c-dark-high-contrast);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='dark-high-contrast']:root .cadmin {
+			@include clay-css($cadmin-c-dark-high-contrast);
+		}
+	}
+}

src/scss/cadmin/variables/_c-root.scss

+// This map outputs custom properties in the `:root` selector (consumed by cadmin-scoped components): use the Sass `map-merge` function to add additional custom properties.
+
+$cadmin-c-root: () !default;
+$cadmin-c-root: map-merge(
+	(
+		color-scheme: light dark,
+
+		--cadmin-black: light-dark(#000, #fff),
+		--cadmin-white: light-dark(#fff, #111116),
+		--cadmin-gray-100: light-dark(#f7f8f9, #272833),
+		--cadmin-gray-200: light-dark(#f1f2f5, #393a4a),
+		--cadmin-gray-300: light-dark(#e7e7ed, #495057),
+		--cadmin-gray-400: light-dark(#cdced9, #6b6c7e),
+		--cadmin-gray-500: light-dark(#a7a9bc, #a7a9bc),
+		--cadmin-gray-600: light-dark(#6b6c7e, #cdced9),
+		--cadmin-gray-700: light-dark(#495057, #e7e7ed),
+		--cadmin-gray-800: light-dark(#393a4a, #f1f2f5),
+		--cadmin-gray-900: light-dark(#272833, #f7f8f9),
+		--cadmin-blue-d1: light-dark(#006be6, #70b1ff),
+		--cadmin-blue-d2: light-dark(#005fcc, #94c4ff),
+		--cadmin-blue-d3: light-dark(#0053b3, #b8d8ff),
+		--cadmin-blue-d4: light-dark(#004799, #e5f1ff),
+		--cadmin-blue-l1: light-dark(#338fff, #2487ff),
+		--cadmin-blue-l2: light-dark(#66abff, #006be6),
+		--cadmin-blue-l3: light-dark(#97c5ff, #0056b8),
+		--cadmin-blue-l4: light-dark(#cce3ff, #004799),
+		--cadmin-blue-l5: light-dark(#e5f1ff, #002147),
+		--cadmin-blue: light-dark(#006eff, #429aff),
+		--cadmin-cyan-d1: light-dark(#069, #38bdff),
+		--cadmin-cyan-d2: light-dark(#005580, #70cfff),
+		--cadmin-cyan-d3: light-dark(#046, #99ddff),
+		--cadmin-cyan-d4: light-dark(#00334d, #d1efff),
+		--cadmin-cyan-l1: light-dark(#0099e6, #0095e0),
+		--cadmin-cyan-l2: light-dark(#3bf, #007ebd),
+		--cadmin-cyan-l3: light-dark(#6cf, #006699),
+		--cadmin-cyan-l4: light-dark(#9df, #004e75),
+		--cadmin-cyan-l5: light-dark(#e5f6ff, #00334d),
+		--cadmin-cyan: light-dark(#0077b3, #05acff),
+		--cadmin-green-d1: light-dark(#397010, #79e029),
+		--cadmin-green-d2: light-dark(#2e590d, #9ae85f),
+		--cadmin-green-d3: light-dark(#22430a, #bcf094),
+		--cadmin-green-d4: light-dark(#162d06, #ddf8c9),
+		--cadmin-green-l1: light-dark(#53a117, #4a8f14),
+		--cadmin-green-l2: light-dark(#67c91d, #397010),
+		--cadmin-green-l3: light-dark(#81e236, #2c550c),
+		--cadmin-green-l4: light-dark(#9de963, #22430a),
+		--cadmin-green-l5: light-dark(#f1fce9, #162d06),
+		--cadmin-green: light-dark(#458613, #5cb21a),
+		--cadmin-indigo-d1: light-dark(#3347ff, #a8b1ff),
+		--cadmin-indigo-d2: light-dark(#1a30ff, #bdc3ff),
+		--cadmin-indigo-d3: light-dark(#001aff, #d1d6ff),
+		--cadmin-indigo-d4: light-dark(#0017e5, #f0f1ff),
+		--cadmin-indigo-l1: light-dark(#808cff, #5c6dff),
+		--cadmin-indigo-l2: light-dark(#99a3ff, #384cff),
+		--cadmin-indigo-l3: light-dark(#b2baff, #0019fa),
+		--cadmin-indigo-l4: light-dark(#ccd1ff, #0013c2),
+		--cadmin-indigo-l5: light-dark(#e5e8ff, #000a66),
+		--cadmin-indigo: light-dark(#4d5fff, #8a95ff),
+		--cadmin-orange-d1: light-dark(#b34400, #ff8a42),
+		--cadmin-orange-d2: light-dark(#993b00, #ffa770),
+		--cadmin-orange-d3: light-dark(#803100, #ffc099),
+		--cadmin-orange-d4: light-dark(#662700, #ffe7d6),
+		--cadmin-orange-l1: light-dark(#ff6200, #e55800),
+		--cadmin-orange-l2: light-dark(#ff8133, #b84600),
+		--cadmin-orange-l3: light-dark(#ffa166, #8f3700),
+		--cadmin-orange-l4: light-dark(#ffc099, #6b2900),
+		--cadmin-orange-l5: light-dark(#fff0e5, #3d1700),
+		--cadmin-orange: light-dark(#cc4e00, #ff6e14),
+		--cadmin-pink-d1: light-dark(#cc0074, #ff8acc),
+		--cadmin-pink-d2: light-dark(#b30065, #ffb2de),
+		--cadmin-pink-d3: light-dark(#990057, #ffd6ed),
+		--cadmin-pink-d4: light-dark(#800048, #fff0f9),
+		--cadmin-pink-l1: light-dark(#ff4db2, #ff33a7),
+		--cadmin-pink-l2: light-dark(#ff80c8, #fa008e),
+		--cadmin-pink-l3: light-dark(#ff99d3, #c2006d),
+		--cadmin-pink-l4: light-dark(#ffb3de, #85004b),
+		--cadmin-pink-l5: light-dark(#ffe5f4, #570031),
+		--cadmin-pink: light-dark(#e50082, #ff5cb8),
+		--cadmin-purple-d1: light-dark(#9f1aff, #d499ff),
+		--cadmin-purple-d2: light-dark(#9500ff, #e1b8ff),
+		--cadmin-purple-d3: light-dark(#8600e6, #ecd1ff),
+		--cadmin-purple-d4: light-dark(#70c, #f5ebff),
+		--cadmin-purple-l1: light-dark(#bf66ff, #b54dff),
+		--cadmin-purple-l2: light-dark(#ca80ff, #9f1aff),
+		--cadmin-purple-l3: light-dark(#d499ff, #8c00f0),
+		--cadmin-purple-l4: light-dark(#dfb3ff, #6800b2),
+		--cadmin-purple-l5: light-dark(#f2e5ff, #47007a),
+		--cadmin-purple: light-dark(#a3f, #c87aff),
+		--cadmin-red-d1: light-dark(#c00, #ff8f8f),
+		--cadmin-red-d2: light-dark(#b30000, #ffb2b2),
+		--cadmin-red-d3: light-dark(#900, #ffcccc),
+		--cadmin-red-d4: light-dark(#800000, #ffe5e5),
+		--cadmin-red-l1: light-dark(#ff4d4d, #ff2e2e),
+		--cadmin-red-l2: light-dark(#f66, #f50000),
+		--cadmin-red-l3: light-dark(#ff8080, #c70000),
+		--cadmin-red-l4: light-dark(#f99, #8f0000),
+		--cadmin-red-l5: light-dark(#ffe5e5, #420000),
+		--cadmin-red: light-dark(#e60000, #ff6666),
+		--cadmin-teal-d1: light-dark(#16695b, #4ad9c0),
+		--cadmin-teal-d2: light-dark(#125449, #7ce4d2),
+		--cadmin-teal-d3: light-dark(#0d3f37, #abede2),
+		--cadmin-teal-d4: light-dark(#092a25, #ddf8f4),
+		--cadmin-teal-l1: light-dark(#24a892, #22a08b),
+		--cadmin-teal-l2: light-dark(#42d7be, #1b7e6e),
+		--cadmin-teal-l3: light-dark(#6ce0cc, #156154),
+		--cadmin-teal-l4: light-dark(#96e9db, #0e443b),
+		--cadmin-teal-l5: light-dark(#eafbf8, #0a2e29),
+		--cadmin-teal: light-dark(#1b7e6e, #28bda4),
+		--cadmin-yellow-d1: light-dark(#e6a800, #ffcc42),
+		--cadmin-yellow-d2: light-dark(#cc9600, #ffdc7a),
+		--cadmin-yellow-d3: light-dark(#b38900, #ffeab2),
+		--cadmin-yellow-d4: light-dark(#997000, #fff8e5),
+		--cadmin-yellow-l1: light-dark(#ffc933, #d69c00),
+		--cadmin-yellow-l2: light-dark(#ffd666, #b88600),
+		--cadmin-yellow-l3: light-dark(#ffe499, #8a6500),
+		--cadmin-yellow-l4: light-dark(#fff1cc, #664e00),
+		--cadmin-yellow-l5: light-dark(#fff8e5, #473400),
+		--cadmin-yellow: light-dark(#fb0, #ffc524),
+		--cadmin-danger-d1: light-dark(#c31212, #f69d9d),
+		--cadmin-danger-d2: light-dark(#ab1010, #fde2e2),
+		--cadmin-danger-d3: light-dark(#ab1010, #fef1f1),
+		--cadmin-danger-l1: light-dark(#f48989, #ec2d2d),
+		--cadmin-danger-l2: light-dark(#feefef, #470606),
+		--cadmin-danger-l3: light-dark(#feefef, #420606),
+		--cadmin-danger: light-dark(#da1414, #f67474),
+		--cadmin-dark-d1: light-dark(#1c1c24, #f7f8f9),
+		--cadmin-dark-d2: light-dark(#111116, #ffffff),
+		--cadmin-dark-l1: light-dark(#30313f, #e2e4ea),
+		--cadmin-dark-l2: light-dark(#393a4a, #e2e4ea),
+		--cadmin-dark: light-dark(#272833, #f1f2f5),
+		--cadmin-info-d1: light-dark(#294f98, #9eb7e6),
+		--cadmin-info-d2: light-dark(#234584, #dce4f5),
+		--cadmin-info-d3: light-dark(#234584, #f3f6fc),
+		--cadmin-info-l1: light-dark(#89a7e0, #4e7bd0),
+		--cadmin-info-l2: light-dark(#eef2fa, #142648),
+		--cadmin-info-l3: light-dark(#eef2fa, #0c172c),
+		--cadmin-info: light-dark(#2e5aac, #7e9fdd),
+		--cadmin-light-d1: light-dark(#e2e4ea, #30313f),
+		--cadmin-light-d2: light-dark(#d3d6e0, #30313f),
+		--cadmin-light-l1: light-dark(#f7f8f9, #1c1c24),
+		--cadmin-light-l2: light-dark(#fff, #111116),
+		--cadmin-light: light-dark(#f1f2f5, #272833),
+		--cadmin-primary-d1: light-dark(#0053f0, #7aa8ff),
+		--cadmin-primary-d2: light-dark(#004ad7, #d6e4ff),
+		--cadmin-primary-d3: light-dark(#004ad7, #f0f5ff),
+		--cadmin-primary-l0: light-dark(#5791ff, #0f62ff),
+		--cadmin-primary-l1: light-dark(#80acff, #004cdb),
+		--cadmin-primary-l2: light-dark(#b3cdff, #003aa8),
+		--cadmin-primary-l3: light-dark(#f0f5ff, #001a4d),
+		--cadmin-primary: light-dark(#0b5fff, #6198ff),
+		--cadmin-secondary-d1: light-dark(#393a4a, #a5a7bb),
+		--cadmin-secondary-d2: light-dark(#30313f, #8b8da7),
+		--cadmin-secondary-l0: light-dark(#9b92a5, #7d7f9c),
+		--cadmin-secondary-l1: light-dark(#a7a9bc, #636682),
+		--cadmin-secondary-l2: light-dark(#cdced9, #525361),
+		--cadmin-secondary-l3: light-dark(#e7e7ed, #34343d),
+		--cadmin-secondary: light-dark(#6b6c7e, #a2a2b9),
+		--cadmin-success-d1: light-dark(#226a33, #59c974),
+		--cadmin-success-d2: light-dark(#1c5629, #bae8c6),
+		--cadmin-success-d3: light-dark(#1c5629, #d9f2df),
+		--cadmin-success-l1: light-dark(#5aca75, #2a8340),
+		--cadmin-success-l2: light-dark(#edf9f0, #13391b),
+		--cadmin-success-l3: light-dark(#edf9f0, #102e16),
+		--cadmin-success: light-dark(#287d3c, #3bb959),
+		--cadmin-warning-d1: light-dark(#9f4500, #ff9a4d),
+		--cadmin-warning-d2: light-dark(#863a00, #ffdfc7),
+		--cadmin-warning-d3: light-dark(#863a00, #fff4ec),
+		--cadmin-warning-l1: light-dark(#ff8f39, #d15b00),
+		--cadmin-warning-l2: light-dark(#fff4ec, #4d2100),
+		--cadmin-warning-l3: light-dark(#fff4ec, #331600),
+		--cadmin-warning: light-dark(#b95000, #ff7a14),
+		--cadmin-border-color: var(--cadmin-gray-200),
+		--cadmin-box-shadow-lg:
+			unquote('0 1rem 3rem hsl(from var(--cadmin-black) h s l / 0.175)'),
+		--cadmin-box-shadow-sm:
+			unquote(
+				'0 0.125rem 0.25rem hsl(from var(--cadmin-black) h s l / 0.075)'
+			),
+		--cadmin-box-shadow:
+			unquote('0 0.5rem 1rem hsl(from var(--cadmin-black) h s l / 0.15)'),
+		--cadmin-component-active-background-color: var(--cadmin-primary),
+		--cadmin-component-active-bg:
+			var(--cadmin-component-active-background-color),
+		--cadmin-component-active-color: var(--cadmin-white),
+		--cadmin-component-focus-box-shadow:
+			unquote(
+				'0 0 0 0.125rem var(--cadmin-white), 0 0 0 0.25rem var(--cadmin-primary-l1)'
+			),
+		--cadmin-component-focus-inset-box-shadow:
+			unquote(
+				'inset 0 0 0 0.125rem var(--cadmin-primary-l1), inset 0 0 0 0.25rem var(--cadmin-white)'
+			),
+		--cadmin-body-background-color: var(--cadmin-white),
+		--cadmin-body-bg: var(--cadmin-body-background-color),
+		--cadmin-body-color: var(--cadmin-dark-d1),
+		--cadmin-link-color: var(--cadmin-primary),
+		--cadmin-link-hover-color: var(--cadmin-primary-d2),
+		--cadmin-text-muted: var(--cadmin-gray-500),
+		--cadmin-blockquote-small-color: var(--cadmin-gray-600),
+		--cadmin-hr-border-color:
+			unquote('hsl(from var(--cadmin-black) h s l / 0.1)'),
+		--cadmin-code-color: var(--cadmin-pink),
+		--cadmin-focus-ring-animation-from-box-shadow:
+			unquote(
+				'0 0 0 0.25rem var(--cadmin-white), 0 0 0 0.75rem var(--cadmin-primary-l2)'
+			),
+		--cadmin-focus-ring-animation-to-box-shadow:
+			unquote(
+				'0 0 0 0.125rem var(--cadmin-white), 0 0 0 0.25rem var(--cadmin-primary-l0)'
+			),
+		--cadmin-btn-outline-secondary-border-color:
+			light-dark(var(--cadmin-secondary-l2), var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-hover-border-color:
+			light-dark(transparent, var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-hover-color:
+			light-dark(var(--cadmin-gray-900), var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-active-border-color:
+			light-dark(var(--cadmin-secondary-l2), var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-active-color:
+			light-dark(var(--cadmin-gray-900), var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-disabled-border-color:
+			light-dark(var(--cadmin-secondary-l2), var(--cadmin-secondary)),
+		--cadmin-btn-outline-secondary-disabled-color:
+			light-dark(var(--cadmin-secondary), var(--cadmin-secondary)),
+		--cadmin-modal-backdrop-background-color:
+			light-dark(var(--cadmin-gray-800), var(--cadmin-gray-200)),
+		--cadmin-modal-backdrop-opacity: 0.8,
+	),
+	$cadmin-c-root
+);
+
+$cadmin-c-dark: () !default;
+$cadmin-c-dark: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--cadmin-breadcrumb-divider-svg-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M375.2 239.2 173.3 37c-23.6-23-59.9 11.9-36 35.1l183 183.9-182.9 183.8c-24 23.5 12.5 58.2 36.1 35.2l201.7-202.1c10.2-10.1 9.3-24.4 0-33.7z" fill="%23cdced9"/></svg>'),
+		--cadmin-custom-checkbox-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23111116"/></svg>'),
+		--cadmin-custom-checkbox-indicator-icon-checked-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23525361"/></svg>'),
+		--cadmin-custom-checkbox-indicator-icon-indeterminate:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%23111116"/></svg>'),
+		--cadmin-custom-checkbox-indicator-icon-indeterminate-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%236b6c7e"/></svg>'),
+		--cadmin-custom-radio-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><circle class="lexicon-icon-outline" cx="256" cy="256" r="256" fill="%23111116"/></svg>'),
+		--cadmin-input-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--cadmin-input-select-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--cadmin-input-select-icon-disabled:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23a7a9bc"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23a7a9bc"></path></svg>'),
+		--cadmin-input-danger-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23ec2d2d"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23ec2d2d"></path></svg>'),
+		--cadmin-input-success-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%232a8340"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%232a8340"></path></svg>'),
+		--cadmin-input-warning-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23d15b00"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23d15b00"></path></svg>'),
+		--cadmin-form-control-select-secondary-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--cadmin-form-control-select-secondary-icon-show:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--cadmin-multi-step-item-error-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M300.4 256 467 89.4c29.6-29.6-14.8-74.1-44.4-44.4L256 211.6 89.4 45C59.8 15.3 15.3 59.8 45 89.4L211.6 256 45 422.6c-29.7 29.7 14.7 74.1 44.4 44.4L256 300.4 422.6 467c29.7 29.7 74.1-14.7 44.4-44.4L300.4 256z" fill="%23111116"/></svg>'),
+		--cadmin-multi-step-icon-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23111116"/></svg>'),
+		--cadmin-multi-step-dropdown-indicator-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23f7f8f9"/></svg>'),
+	),
+	$cadmin-c-dark
+);
+
+$cadmin-c-dark-high-contrast: () !default;
+$cadmin-c-dark-high-contrast: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--cadmin-white: #111116,
+
+		--cadmin-blue-d1: #a8cfff,
+		--cadmin-blue-d2: #c2ddff,
+		--cadmin-blue-d3: #d6e9ff,
+		--cadmin-blue-d4: #f0f7ff,
+		--cadmin-blue-l1: #006cf0,
+		--cadmin-blue-l2: #005dc7,
+		--cadmin-blue-l3: #004594,
+		--cadmin-blue-l4: #002f66,
+		--cadmin-blue-l5: #002147,
+		--cadmin-blue: #94c4ff,
+		--cadmin-cyan-d1: #94dbff,
+		--cadmin-cyan-d2: #ade4ff,
+		--cadmin-cyan-d3: #c7ecff,
+		--cadmin-cyan-d4: #e5f6ff,
+		--cadmin-cyan-l1: #0095e0,
+		--cadmin-cyan-l2: #0073ad,
+		--cadmin-cyan-l3: #005f8f,
+		--cadmin-cyan-l4: #00476b,
+		--cadmin-cyan-l5: #00334d,
+		--cadmin-cyan: #75d1ff,
+		--cadmin-green-d1: #92e651,
+		--cadmin-green-d2: #a6ea70,
+		--cadmin-green-d3: #cff4b3,
+		--cadmin-green-d4: #f1fce9,
+		--cadmin-green-l1: #57aa18,
+		--cadmin-green-l2: #498f14,
+		--cadmin-green-l3: #3a6f10,
+		--cadmin-green-l4: #29500c,
+		--cadmin-green-l5: #162d06,
+		--cadmin-green: #79e029,
+		--cadmin-indigo-d1: #d6daff,
+		--cadmin-indigo-d2: #d6daff,
+		--cadmin-indigo-d3: #d6daff,
+		--cadmin-indigo-d4: #f0f1ff,
+		--cadmin-indigo-l1: #051fff,
+		--cadmin-indigo-l2: #0015d1,
+		--cadmin-indigo-l3: #0012b2,
+		--cadmin-indigo-l4: #000d85,
+		--cadmin-indigo-l5: #000a66,
+		--cadmin-indigo: #bdc3ff,
+		--cadmin-orange-d1: #ffc39e,
+		--cadmin-orange-d2: #ffd6bd,
+		--cadmin-orange-d3: #ffe6d6,
+		--cadmin-orange-d4: #fff6f0,
+		--cadmin-orange-l1: #eb5a00,
+		--cadmin-orange-l2: #c24a00,
+		--cadmin-orange-l3: #a33f00,
+		--cadmin-orange-l4: #803100,
+		--cadmin-orange-l5: #3d1700,
+		--cadmin-orange: #ffb385,
+		--cadmin-pink-d1: #ffc7e7,
+		--cadmin-pink-d2: #ffd6ed,
+		--cadmin-pink-d3: #ffe5f4,
+		--cadmin-pink-d4: #fff5fb,
+		--cadmin-pink-l1: #f5008b,
+		--cadmin-pink-l2: #c2006e,
+		--cadmin-pink-l3: #940053,
+		--cadmin-pink-l4: #610037,
+		--cadmin-pink-l5: #3d0022,
+		--cadmin-pink: #ffaddc,
+		--cadmin-purple-d1: #ecd1ff,
+		--cadmin-purple-d2: #ecd1ff,
+		--cadmin-purple-d3: #ecd1ff,
+		--cadmin-purple-d4: #f5ebff,
+		--cadmin-purple-l1: #9b0fff,
+		--cadmin-purple-l2: #7f00db,
+		--cadmin-purple-l3: #6e00bd,
+		--cadmin-purple-l4: #590099,
+		--cadmin-purple-l5: #3c0066,
+		--cadmin-purple: #e1b8ff,
+		--cadmin-red-d1: #ffc7c7,
+		--cadmin-red-d2: #ffd6d6,
+		--cadmin-red-d3: #ffe0e0,
+		--cadmin-red-d4: #fff5f5,
+		--cadmin-red-l1: #f50000,
+		--cadmin-red-l2: #c20000,
+		--cadmin-red-l3: #990000,
+		--cadmin-red-l4: #700000,
+		--cadmin-red-l5: #420000,
+		--cadmin-red: #ffadad,
+		--cadmin-teal-d1: #96e9db,
+		--cadmin-teal-d2: #b3efe5,
+		--cadmin-teal-d3: #ccf4ed,
+		--cadmin-teal-d4: #eafbf8,
+		--cadmin-teal-l1: #28bea4,
+		--cadmin-teal-l2: #1f9380,
+		--cadmin-teal-l3: #197667,
+		--cadmin-teal-l4: #12594e,
+		--cadmin-teal-l5: #0d3b34,
+		--cadmin-teal: #67dfca,
+		--cadmin-yellow-d1: #ffcc42,
+		--cadmin-yellow-d2: #ffdc7a,
+		--cadmin-yellow-d3: #ffeab2,
+		--cadmin-yellow-d4: #fff8e5,
+		--cadmin-yellow-l1: #d69c00,
+		--cadmin-yellow-l2: #b88600,
+		--cadmin-yellow-l3: #8a6500,
+		--cadmin-yellow-l4: #664e00,
+		--cadmin-yellow-l5: #473400,
+		--cadmin-yellow: #ffc524,
+
+		--cadmin-danger-d1: #fac7c7,
+		--cadmin-danger-d2: #fef1f1,
+		--cadmin-danger-l1: #b61111,
+		--cadmin-danger-l2: #420606,
+		--cadmin-danger: #f8b0b0,
+		--cadmin-dark-d1: #f7f8f9,
+		--cadmin-dark-d2: #ffffff,
+		--cadmin-dark-l1: #e2e4ea,
+		--cadmin-dark-l2: #e2e4ea,
+		--cadmin-dark: #f1f2f5,
+		--cadmin-info-d1: #cad8f1,
+		--cadmin-info-d2: #f3f6fc,
+		--cadmin-info-l1: #254a8d,
+		--cadmin-info-l2: #0c172c,
+		--cadmin-info: #b6c9ec,
+		--cadmin-light-d1: #30313f,
+		--cadmin-light-d2: #30313f,
+		--cadmin-light-l1: #111116,
+		--cadmin-light: #272833,
+		--cadmin-primary-d1: #c7daff,
+		--cadmin-primary-d2: #f0f5ff,
+		--cadmin-primary-l0: #003eb2,
+		--cadmin-primary-l1: #00318f,
+		--cadmin-primary-l2: #002366,
+		--cadmin-primary-l3: #001a4d,
+		--cadmin-primary: #b3cdff,
+		--cadmin-secondary-l0: #d9d9e3,
+		--cadmin-secondary-l1: #bcbdcc,
+		--cadmin-secondary-l2: #a5a7bb,
+		--cadmin-secondary-l3: #8b8da7,
+		--cadmin-secondary: #f6f6f8,
+		--cadmin-success-d1: #a2e1b2,
+		--cadmin-success-d2: #d9f2df,
+		--cadmin-success-l1: #26783a,
+		--cadmin-success-l2: #102e16,
+		--cadmin-success: #8cd99e,
+		--cadmin-warning-d1: #ffcba3,
+		--cadmin-warning-d2: #fff4ec,
+		--cadmin-warning-l1: #b24d00,
+		--cadmin-warning-l2: #331600,
+		--cadmin-warning: #ffb780,
+	),
+	$cadmin-c-dark-high-contrast
+);

lib/images/icons/anonymize.svg

 <!--
-* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
-<!-- anonymize is deprecated as of v3.136.0 with no replacement -->
-
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" d="M480,220.3l-64-32L363.1,56.1c-6.3-15.6-23.6-23.8-39.6-18.6l-70.2,22.8l-64.5-22.1c-16.1-5.5-33.8,2.6-40.1,18.4L96,188.3l-64,32h64v86.3c0,6.9,2.1,13.1,5,18.8c52.4,200.3,256.4,202.3,310,0c2.9-5.7,5-11.9,5-18.8v-86.3H480z M141.8,348.3c84.9,0,94.2-64,114.2-64s27.3,64,114.2,64C316,476.3,196.7,476.9,141.8,348.3z M384,252.3H128v-32h256V252.3z"></path>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M12.5 9a3.5 3.5 0 1 1-3.435 4.176 1.396 1.396 0 0 0-2.131 0 3.5 3.5 0 1 1-.134-1.843 2.997 2.997 0 0 1 2.4 0A3.502 3.502 0 0 1 12.5 9Zm-9 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" fill-rule="evenodd" />
+	<path class="lexicon-icon-outline" d="M11 0a2 2 0 0 1 2 2v4h2a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2h2V2a2 2 0 0 1 2-2c.255 0 .49.127.683.295C6.233.775 7.065 1 8 1c.935 0 1.768-.226 2.317-.705C10.51.127 10.745 0 11 0Z" />
 </svg>

package.json

@@ -59,3 +59,3 @@ {
 	},
-	"version": "3.163.0"
+	"version": "3.164.0"
 }

src/images/icons/anonymize.svg

 <!--
-* SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 -->
-<!-- anonymize is deprecated as of v3.136.0 with no replacement -->
-
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" d="M480,220.3l-64-32L363.1,56.1c-6.3-15.6-23.6-23.8-39.6-18.6l-70.2,22.8l-64.5-22.1c-16.1-5.5-33.8,2.6-40.1,18.4L96,188.3l-64,32h64v86.3c0,6.9,2.1,13.1,5,18.8c52.4,200.3,256.4,202.3,310,0c2.9-5.7,5-11.9,5-18.8v-86.3H480z M141.8,348.3c84.9,0,94.2-64,114.2-64s27.3,64,114.2,64C316,476.3,196.7,476.9,141.8,348.3z M384,252.3H128v-32h256V252.3z"></path>
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M12.5 9a3.5 3.5 0 1 1-3.435 4.176 1.396 1.396 0 0 0-2.131 0 3.5 3.5 0 1 1-.134-1.843 2.997 2.997 0 0 1 2.4 0A3.502 3.502 0 0 1 12.5 9Zm-9 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" fill-rule="evenodd" />
+	<path class="lexicon-icon-outline" d="M11 0a2 2 0 0 1 2 2v4h2a1 1 0 1 1 0 2H1a1 1 0 0 1 0-2h2V2a2 2 0 0 1 2-2c.255 0 .49.127.683.295C6.233.775 7.065 1 8 1c.935 0 1.768-.226 2.317-.705C10.51.127 10.745 0 11 0Z" />
 </svg>

src/scss/_components.scss

@@ -54,3 +54,2 @@ @if ($font-import-url) {
 @import 'components/_input-groups';
-@import 'components/_keyboard-arrows-indicator';
 @import 'components/_list-group';
@@ -57,0 +56,0 @@ @import 'components/_modals';

src/scss/_license-text.scss

 /**
- * Clay 3.163.0
+ * Clay 3.164.0
  *
@@ -4,0 +4,0 @@ * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>

src/scss/atlas-custom-properties/_variables.scss

@@ -0,1 +1,3 @@
+@import '../functions/_global-functions';
+
 @import 'variables/_globals';
@@ -2,0 +4,0 @@ @import 'variables/_globals-z-index';

src/scss/atlas-custom-properties/variables/_alerts.scss

@@ -409,3 +409,5 @@ $alert-border-radius: var(--alert-border-radius, $border-radius) !default;
 
-$alert-notifications-box-shadow: null !default;
+$alert-notifications-box-shadow: unquote(
+	'0 0.5rem 2rem -0.25rem hsl(from #{$black} h s l / 0.3)'
+) !default;
 $alert-notifications-max-width: 22.5rem !default;
@@ -412,0 +414,0 @@

src/scss/atlas-cus...perties/variables/_application-bar.scss

@@ -41,11 +41,14 @@ $application-bar-size: () !default;
 				hover: (
-					background-color: rgba(255, 255, 255, 0.03),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.03)'),
 				),
 
 				focus: (
-					background-color: rgba(255, 255, 255, 0.03),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba(255, 255, 255, 0.06),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.06)'),
 				),
@@ -52,0 +55,0 @@

src/scss/atlas-custom-properties/variables/_badges.scss

@@ -316,27 +316,4 @@ // .badge
 		danger: $badge-danger,
-
-		light: (),
-		dark: (),
-		'.badge-translucent.badge-primary': (),
-		'.badge-translucent.badge-info, .badge-beta': (),
-		'.badge-translucent.badge-success': (),
-		'.badge-translucent.badge-warning': (),
-		'.badge-translucent.badge-danger': (),
-		'%clay-dark-badge-translucent-primary': (),
-		'.clay-dark .badge-translucent.badge-primary': (),
-		'.clay-dark.badge-translucent.badge-primary': (),
-		'%clay-dark-badge-translucent-info': (),
-		'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (),
-		'.clay-dark.badge-translucent.badge-info': (),
-		'%clay-dark-badge-translucent-success': (),
-		'.clay-dark .badge-translucent.badge-success': (),
-		'.clay-dark.badge-translucent.badge-success': (),
-		'%clay-dark-badge-translucent-warning': (),
-		'.clay-dark .badge-translucent.badge-warning': (),
-		'.clay-dark.badge-translucent.badge-warning': (),
-		'%clay-dark-badge-translucent-danger': (),
-		'.clay-dark .badge-translucent.badge-danger': (),
-		'.clay-dark.badge-translucent.badge-danger': (),
 	),
 	$badge-palette
 );

src/scss/atlas-custom-properties/variables/_breadcrumbs.scss

@@ -45,3 +45,6 @@ // .breadcrumb
 
-$breadcrumb-divider-svg-icon: clay-icon(angle-right, #6b6c7e) !default;
+$breadcrumb-divider-svg-icon: var(
+	--breadcrumb-divider-svg-icon,
+	clay-icon(angle-right, #6b6c7e)
+) !default;
 $breadcrumb-divider-svg-icon-height: 0.6em !default;
@@ -48,0 +51,0 @@ $breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;

src/scss/atlas-custom-properties/variables/_buttons.scss

@@ -1188,2 +1188,3 @@ $btn-border-radius: var(--btn-border-radius, $border-radius) !default;
 			box-shadow: map-deep-get($btn-success, active, box-shadow),
+			color: map-deep-get($btn-success, active, color),
 		),
@@ -1190,0 +1191,0 @@

src/scss/atlas-custom-properties/variables/_c-root.scss

@@ -6,194 +6,168 @@ // This map outputs custom properties in the `:root` selector: use the Sass `map-merge` function to add additional custom properties to `:root`.
 	(
-		--black: #000,
-		--white: #fff,
+		color-scheme: light dark,
 
-		--gray-100: #f7f8f9,
-		--gray-200: #f1f2f5,
-		--gray-300: #e7e7ed,
-		--gray-400: #cdced9,
-		--gray-500: #a7a9bc,
-		--gray-600: #6b6c7e,
-		--gray-700: #495057,
-		--gray-800: #393a4a,
-		--gray-900: #272833,
-
-		--blue: #006eff,
-
-		--blue-d1: #006be6,
-		--blue-d2: #005fcc,
-		--blue-d3: #0053b3,
-		--blue-d4: #004799,
-		--blue-l1: #338fff,
-		--blue-l2: #66abff,
-		--blue-l3: #97c5ff,
-		--blue-l4: #cce3ff,
-		--blue-l5: #e5f1ff,
-
-		--indigo: #4d5fff,
-
-		--indigo-d1: #3347ff,
-		--indigo-d2: #1a30ff,
-		--indigo-d3: #001aff,
-		--indigo-d4: #0017e5,
-		--indigo-l1: #808cff,
-		--indigo-l2: #99a3ff,
-		--indigo-l3: #b2baff,
-		--indigo-l4: #ccd1ff,
-		--indigo-l5: #e5e8ff,
-
-		--purple: #a3f,
-
-		--purple-d1: #9f1aff,
-		--purple-d2: #9500ff,
-		--purple-d3: #8600e6,
-		--purple-d4: #70c,
-		--purple-l1: #bf66ff,
-		--purple-l2: #ca80ff,
-		--purple-l3: #d499ff,
-		--purple-l4: #dfb3ff,
-		--purple-l5: #f2e5ff,
-
-		--pink: #e50082,
-
-		--pink-d1: #cc0074,
-		--pink-d2: #b30065,
-		--pink-d3: #990057,
-		--pink-d4: #800048,
-		--pink-l1: #ff4db2,
-		--pink-l2: #ff80c8,
-		--pink-l3: #ff99d3,
-		--pink-l4: #ffb3de,
-		--pink-l5: #ffe5f4,
-
-		--red: #e60000,
-
-		--red-d1: #c00,
-		--red-d2: #b30000,
-		--red-d3: #900,
-		--red-d4: #800000,
-		--red-l1: #ff4d4d,
-		--red-l2: #f66,
-		--red-l3: #ff8080,
-		--red-l4: #f99,
-		--red-l5: #ffe5e5,
-
-		--orange: #cc4e00,
-
-		--orange-d1: #b34400,
-		--orange-d2: #993b00,
-		--orange-d3: #803100,
-		--orange-d4: #662700,
-		--orange-l1: #ff6200,
-		--orange-l2: #ff8133,
-		--orange-l3: #ffa166,
-		--orange-l4: #ffc099,
-		--orange-l5: #fff0e5,
-
-		--yellow: #fb0,
-
-		--yellow-d1: #e6a800,
-		--yellow-d2: #cc9600,
-		--yellow-d3: #b38900,
-		--yellow-d4: #997000,
-		--yellow-l1: #ffc933,
-		--yellow-l2: #ffd666,
-		--yellow-l3: #ffe499,
-		--yellow-l4: #fff1cc,
-		--yellow-l5: #fff8e5,
-
-		--green: #458613,
-
-		--green-d1: #397010,
-		--green-d2: #2e590d,
-		--green-d3: #22430a,
-		--green-d4: #162d06,
-		--green-l1: #53a117,
-		--green-l2: #67c91d,
-		--green-l3: #81e236,
-		--green-l4: #9de963,
-		--green-l5: #f1fce9,
-
-		--teal: #1b7e6e,
-
-		--teal-d1: #16695b,
-		--teal-d2: #125449,
-		--teal-d3: #0d3f37,
-		--teal-d4: #092a25,
-		--teal-l1: #24a892,
-		--teal-l2: #42d7be,
-		--teal-l3: #6ce0cc,
-		--teal-l4: #96e9db,
-		--teal-l5: #eafbf8,
-
-		--cyan: #0077b3,
-
-		--cyan-d1: #069,
-		--cyan-d2: #005580,
-		--cyan-d3: #046,
-		--cyan-d4: #00334d,
-		--cyan-l1: #0099e6,
-		--cyan-l2: #3bf,
-		--cyan-l3: #6cf,
-		--cyan-l4: #9df,
-		--cyan-l5: #e5f6ff,
-
-		--primary: #0b5fff,
-
-		--primary-d1: #0053f0,
-		--primary-d2: #004ad7,
-		--primary-l0: #5791ff,
-		--primary-l1: #80acff,
-		--primary-l2: #b3cdff,
-		--primary-l3: #f0f5ff,
-
-		--secondary: #6b6c7e,
-
-		--secondary-d1: #393a4a,
-		--secondary-d2: #30313f,
-		--secondary-l0: #9b92a5,
-		--secondary-l1: #a7a9bc,
-		--secondary-l2: #cdced9,
-		--secondary-l3: #e7e7ed,
-
-		--info: #2e5aac,
-
-		--info-d1: #294f98,
-		--info-d2: #234584,
-		--info-l1: #89a7e0,
-		--info-l2: #eef2fa,
-
-		--success: #287d3c,
-
-		--success-d1: #226a33,
-		--success-d2: #1c5629,
-		--success-l1: #5aca75,
-		--success-l2: #edf9f0,
-
-		--warning: #b95000,
-
-		--warning-d1: #9f4500,
-		--warning-d2: #863a00,
-		--warning-l1: #ff8f39,
-		--warning-l2: #fff4ec,
-
-		--danger: #da1414,
-
-		--danger-d1: #c31212,
-		--danger-d2: #ab1010,
-		--danger-l1: #f48989,
-		--danger-l2: #feefef,
-
-		--light: #f1f2f5,
-
-		--light-d1: #e2e4ea,
-		--light-d2: #d3d6e0,
-		--light-l1: #f7f8f9,
-		--light-l2: #fff,
-
-		--dark: #272833,
-		--dark-d1: #1c1c24,
-		--dark-d2: #111116,
-		--dark-l1: #30313f,
-		--dark-l2: #393a4a,
-
+		--black: light-dark(#000, #fff),
+		--white: light-dark(#fff, #111116),
+		--gray-100: light-dark(#f7f8f9, #272833),
+		--gray-200: light-dark(#f1f2f5, #393a4a),
+		--gray-300: light-dark(#e7e7ed, #495057),
+		--gray-400: light-dark(#cdced9, #6b6c7e),
+		--gray-500: light-dark(#a7a9bc, #a7a9bc),
+		--gray-600: light-dark(#6b6c7e, #cdced9),
+		--gray-700: light-dark(#495057, #e7e7ed),
+		--gray-800: light-dark(#393a4a, #f1f2f5),
+		--gray-900: light-dark(#272833, #f7f8f9),
+		--blue: light-dark(#006eff, #429aff),
+		--blue-d1: light-dark(#006be6, #70b1ff),
+		--blue-d2: light-dark(#005fcc, #94c4ff),
+		--blue-d3: light-dark(#0053b3, #b8d8ff),
+		--blue-d4: light-dark(#004799, #e5f1ff),
+		--blue-l1: light-dark(#338fff, #2487ff),
+		--blue-l2: light-dark(#66abff, #006be6),
+		--blue-l3: light-dark(#97c5ff, #0056b8),
+		--blue-l4: light-dark(#cce3ff, #004799),
+		--blue-l5: light-dark(#e5f1ff, #002147),
+		--indigo: light-dark(#4d5fff, #8a95ff),
+		--indigo-d1: light-dark(#3347ff, #a8b1ff),
+		--indigo-d2: light-dark(#1a30ff, #bdc3ff),
+		--indigo-d3: light-dark(#001aff, #d1d6ff),
+		--indigo-d4: light-dark(#0017e5, #f0f1ff),
+		--indigo-l1: light-dark(#808cff, #5c6dff),
+		--indigo-l2: light-dark(#99a3ff, #384cff),
+		--indigo-l3: light-dark(#b2baff, #0019fa),
+		--indigo-l4: light-dark(#ccd1ff, #0013c2),
+		--indigo-l5: light-dark(#e5e8ff, #000a66),
+		--purple: light-dark(#a3f, #c87aff),
+		--purple-d1: light-dark(#9f1aff, #d499ff),
+		--purple-d2: light-dark(#9500ff, #e1b8ff),
+		--purple-d3: light-dark(#8600e6, #ecd1ff),
+		--purple-d4: light-dark(#70c, #f5ebff),
+		--purple-l1: light-dark(#bf66ff, #b54dff),
+		--purple-l2: light-dark(#ca80ff, #9f1aff),
+		--purple-l3: light-dark(#d499ff, #8c00f0),
+		--purple-l4: light-dark(#dfb3ff, #6800b2),
+		--purple-l5: light-dark(#f2e5ff, #47007a),
+		--pink: light-dark(#e50082, #ff5cb8),
+		--pink-d1: light-dark(#cc0074, #ff8acc),
+		--pink-d2: light-dark(#b30065, #ffb2de),
+		--pink-d3: light-dark(#990057, #ffd6ed),
+		--pink-d4: light-dark(#800048, #fff0f9),
+		--pink-l1: light-dark(#ff4db2, #ff33a7),
+		--pink-l2: light-dark(#ff80c8, #fa008e),
+		--pink-l3: light-dark(#ff99d3, #c2006d),
+		--pink-l4: light-dark(#ffb3de, #85004b),
+		--pink-l5: light-dark(#ffe5f4, #570031),
+		--red: light-dark(#e60000, #ff6666),
+		--red-d1: light-dark(#c00, #ff8f8f),
+		--red-d2: light-dark(#b30000, #ffb2b2),
+		--red-d3: light-dark(#900, #ffcccc),
+		--red-d4: light-dark(#800000, #ffe5e5),
+		--red-l1: light-dark(#ff4d4d, #ff2e2e),
+		--red-l2: light-dark(#f66, #f50000),
+		--red-l3: light-dark(#ff8080, #c70000),
+		--red-l4: light-dark(#f99, #8f0000),
+		--red-l5: light-dark(#ffe5e5, #420000),
+		--orange: light-dark(#cc4e00, #ff6e14),
+		--orange-d1: light-dark(#b34400, #ff8a42),
+		--orange-d2: light-dark(#993b00, #ffa770),
+		--orange-d3: light-dark(#803100, #ffc099),
+		--orange-d4: light-dark(#662700, #ffe7d6),
+		--orange-l1: light-dark(#ff6200, #e55800),
+		--orange-l2: light-dark(#ff8133, #b84600),
+		--orange-l3: light-dark(#ffa166, #8f3700),
+		--orange-l4: light-dark(#ffc099, #6b2900),
+		--orange-l5: light-dark(#fff0e5, #3d1700),
+		--yellow: light-dark(#fb0, #ffc524),
+		--yellow-d1: light-dark(#e6a800, #ffcc42),
+		--yellow-d2: light-dark(#cc9600, #ffdc7a),
+		--yellow-d3: light-dark(#b38900, #ffeab2),
+		--yellow-d4: light-dark(#997000, #fff8e5),
+		--yellow-l1: light-dark(#ffc933, #d69c00),
+		--yellow-l2: light-dark(#ffd666, #b88600),
+		--yellow-l3: light-dark(#ffe499, #8a6500),
+		--yellow-l4: light-dark(#fff1cc, #664e00),
+		--yellow-l5: light-dark(#fff8e5, #473400),
+		--green: light-dark(#458613, #5cb21a),
+		--green-d1: light-dark(#397010, #79e029),
+		--green-d2: light-dark(#2e590d, #9ae85f),
+		--green-d3: light-dark(#22430a, #bcf094),
+		--green-d4: light-dark(#162d06, #ddf8c9),
+		--green-l1: light-dark(#53a117, #4a8f14),
+		--green-l2: light-dark(#67c91d, #397010),
+		--green-l3: light-dark(#81e236, #2c550c),
+		--green-l4: light-dark(#9de963, #22430a),
+		--green-l5: light-dark(#f1fce9, #162d06),
+		--teal: light-dark(#1b7e6e, #28bda4),
+		--teal-d1: light-dark(#16695b, #4ad9c0),
+		--teal-d2: light-dark(#125449, #7ce4d2),
+		--teal-d3: light-dark(#0d3f37, #abede2),
+		--teal-d4: light-dark(#092a25, #ddf8f4),
+		--teal-l1: light-dark(#24a892, #22a08b),
+		--teal-l2: light-dark(#42d7be, #1b7e6e),
+		--teal-l3: light-dark(#6ce0cc, #156154),
+		--teal-l4: light-dark(#96e9db, #0e443b),
+		--teal-l5: light-dark(#eafbf8, #0a2e29),
+		--cyan: light-dark(#0077b3, #05acff),
+		--cyan-d1: light-dark(#069, #38bdff),
+		--cyan-d2: light-dark(#005580, #70cfff),
+		--cyan-d3: light-dark(#046, #99ddff),
+		--cyan-d4: light-dark(#00334d, #d1efff),
+		--cyan-l1: light-dark(#0099e6, #0095e0),
+		--cyan-l2: light-dark(#3bf, #007ebd),
+		--cyan-l3: light-dark(#6cf, #006699),
+		--cyan-l4: light-dark(#9df, #004e75),
+		--cyan-l5: light-dark(#e5f6ff, #00334d),
+		--primary: light-dark(#0b5fff, #6198ff),
+		--primary-d1: light-dark(#0053f0, #7aa8ff),
+		--primary-d2: light-dark(#004ad7, #d6e4ff),
+		--primary-d3: light-dark(#004ad7, #f0f5ff),
+		--primary-l0: light-dark(#5791ff, #0f62ff),
+		--primary-l1: light-dark(#80acff, #004cdb),
+		--primary-l2: light-dark(#b3cdff, #003aa8),
+		--primary-l3: light-dark(#f0f5ff, #001a4d),
+		--secondary: light-dark(#6b6c7e, #a2a2b9),
+		--secondary-d1: light-dark(#393a4a, #a5a7bb),
+		--secondary-d2: light-dark(#30313f, #8b8da7),
+		--secondary-l0: light-dark(#9b92a5, #7d7f9c),
+		--secondary-l1: light-dark(#a7a9bc, #636682),
+		--secondary-l2: light-dark(#cdced9, #525361),
+		--secondary-l3: light-dark(#e7e7ed, #34343d),
+		--info: light-dark(#2e5aac, #7e9fdd),
+		--info-d1: light-dark(#294f98, #9eb7e6),
+		--info-d2: light-dark(#234584, #dce4f5),
+		--info-d3: light-dark(#234584, #f3f6fc),
+		--info-l1: light-dark(#89a7e0, #4e7bd0),
+		--info-l2: light-dark(#eef2fa, #142648),
+		--info-l3: light-dark(#eef2fa, #0c172c),
+		--success: light-dark(#287d3c, #3bb959),
+		--success-d1: light-dark(#226a33, #59c974),
+		--success-d2: light-dark(#1c5629, #bae8c6),
+		--success-d3: light-dark(#1c5629, #d9f2df),
+		--success-l1: light-dark(#5aca75, #2a8340),
+		--success-l2: light-dark(#edf9f0, #13391b),
+		--success-l3: light-dark(#edf9f0, #102e16),
+		--warning: light-dark(#b95000, #ff7a14),
+		--warning-d1: light-dark(#9f4500, #ff9a4d),
+		--warning-d2: light-dark(#863a00, #ffdfc7),
+		--warning-d3: light-dark(#863a00, #fff4ec),
+		--warning-l1: light-dark(#ff8f39, #d15b00),
+		--warning-l2: light-dark(#fff4ec, #4d2100),
+		--warning-l3: light-dark(#fff4ec, #331600),
+		--danger: light-dark(#da1414, #f67474),
+		--danger-d1: light-dark(#c31212, #f69d9d),
+		--danger-d2: light-dark(#ab1010, #fde2e2),
+		--danger-d3: light-dark(#ab1010, #fef1f1),
+		--danger-l1: light-dark(#f48989, #ec2d2d),
+		--danger-l2: light-dark(#feefef, #470606),
+		--danger-l3: light-dark(#feefef, #420606),
+		--light: light-dark(#f1f2f5, #272833),
+		--light-d1: light-dark(#e2e4ea, #30313f),
+		--light-d2: light-dark(#d3d6e0, #30313f),
+		--light-l1: light-dark(#f7f8f9, #1c1c24),
+		--light-l2: light-dark(#fff, #111116),
+		--dark: light-dark(#272833, #f1f2f5),
+		--dark-d1: light-dark(#1c1c24, #f7f8f9),
+		--dark-d2: light-dark(#111116, #ffffff),
+		--dark-l1: light-dark(#30313f, #e2e4ea),
+		--dark-l2: light-dark(#393a4a, #e2e4ea),
 		--spacer: 1rem,
@@ -217,3 +191,3 @@
 
-		--border-color: $gray-200,
+		--border-color: var(--gray-200),
 		--border-width: 0.0625rem,
@@ -225,2 +199,3 @@
 		--border-radius-sm: 0.1875rem,
+		--border-radius-xl: 1rem,
 
@@ -232,7 +207,8 @@ --rounded-0-border-radius: 0,
 
-		--box-shadow: 0 0.5rem 1rem unquote('hsl(from #{$black} h s l / 0.15)'),
-		--box-shadow-lg: 0 1rem 3rem
-			unquote('hsl(from #{$black} h s l / 0.175)'),
-		--box-shadow-sm: 0 0.125rem 0.25rem
-			unquote('hsl(from #{$black} h s l / 0.075)'),
+		--box-shadow:
+			unquote('0 0.5rem 1rem hsl(from var(--black) h s l / 0.15)'),
+		--box-shadow-lg:
+			unquote('0 1rem 3rem hsl(from var(--black) h s l / 0.175)'),
+		--box-shadow-sm:
+			unquote('0 0.125rem 0.25rem hsl(from var(--black) h s l / 0.075)'),
 		--transition-base: all 0.2s ease-in-out,
@@ -246,10 +222,12 @@ --transition-collapse: height 0.35s ease,
 			),
-		--component-active-background-color: $primary,
-		--component-active-color: $white,
-
+		--component-active-background-color: var(--primary),
+		--component-active-bg: var(--component-active-background-color),
+		--component-active-color: var(--white),
 		--component-focus-box-shadow:
-			unquote('0 0 0 0.125rem #{$white}, 0 0 0 0.25rem #{$primary-l1}'),
+			unquote(
+				'0 0 0 0.125rem var(--white), 0 0 0 0.25rem var(--primary-l1)'
+			),
 		--component-focus-inset-box-shadow:
 			unquote(
-				'inset 0 0 0 0.125rem #{$primary-l1}, inset 0 0 0 0.25rem #{$white}'
+				'inset 0 0 0 0.125rem var(--primary-l1), inset 0 0 0 0.25rem var(--white)'
 			),
@@ -271,4 +249,3 @@ --component-disabled-opacity: 0.4,
 		--font-family-serif: unquote("georgia, 'Times New Roman', times, serif"),
-		--font-family-base: $font-family-sans-serif,
-
+		--font-family-base: var(--font-family-sans-serif),
 		--font-size-base: 1rem,
@@ -295,10 +272,11 @@
 		--headings-font-family: inherit,
-		--headings-font-weight: $font-weight-bold,
+		--headings-font-weight: var(--font-weight-bold),
 		--headings-line-height: 1.2,
 		--headings-margin-bottom: 0.5rem,
 
-		--body-background-color: $white,
-		--body-color: $dark-d1,
-		--body-font-family: $font-family-base,
-		--body-font-size: $font-size-base,
+		--body-background-color: var(--white),
+		--body-bg: var(--body-background-color),
+		--body-color: var(--dark-d1),
+		--body-font-family: var(--font-family-base),
+		--body-font-size: var(--font-size-base),
 		--body-font-weight: $font-weight-base,
@@ -308,5 +286,5 @@ --body-line-height: $line-height-base,
 
-		--link-color: $primary,
+		--link-color: var(--primary),
 		--link-decoration: none,
-		--link-hover-color: $primary-d2,
+		--link-hover-color: var(--primary-d2),
 		--link-hover-decoration: underline,
@@ -331,22 +309,238 @@
 
-		--text-muted: $gray-500,
-
+		--text-muted: var(--gray-500),
 		--blockquote-font-size: 1.25rem,
 
-		--blockquote-small-color: $gray-600,
+		--blockquote-small-color: var(--gray-600),
 		--blockquote-small-font-size: $small-font-size,
 
-		--hr-border-color: unquote('hsl(from #{$black} h s l / 0.1)'),
+		--hr-border-color: unquote('hsl(from var(--black) h s l / 0.1)'),
 		--hr-border-width: $border-width,
 		--hr-margin-y: $spacer,
 
-		--code-color: $pink,
+		--code-color: var(--pink),
 		--code-font-size: 87.5%,
 
 		--focus-ring-animation-from-box-shadow:
-			unquote('0 0 0 0.25rem #{$white}, 0 0 0 0.75rem #{$primary-l2}'),
+			unquote(
+				'0 0 0 0.25rem var(--white), 0 0 0 0.75rem var(--primary-l2)'
+			),
 		--focus-ring-animation-to-box-shadow:
-			unquote('0 0 0 0.125rem #{$white}, 0 0 0 0.25rem #{$primary-l0}'),
+			unquote(
+				'0 0 0 0.125rem var(--white), 0 0 0 0.25rem var(--primary-l0)'
+			),
+		--btn-outline-secondary-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-hover-border-color:
+			light-dark(transparent, var(--secondary)),
+		--btn-outline-secondary-hover-color:
+			light-dark(var(--gray-900), var(--secondary)),
+		--btn-outline-secondary-active-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-active-color:
+			light-dark(var(--gray-900), var(--secondary)),
+		--btn-outline-secondary-disabled-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-disabled-color:
+			light-dark(var(--secondary), var(--secondary)),
+		--modal-backdrop-background-color:
+			light-dark(var(--gray-800), var(--gray-200)),
+		--modal-backdrop-opacity: 0.8,
 	),
 	$c-root
 );
+
+$c-dark: () !default;
+$c-dark: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--breadcrumb-divider-svg-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M375.2 239.2 173.3 37c-23.6-23-59.9 11.9-36 35.1l183 183.9-182.9 183.8c-24 23.5 12.5 58.2 36.1 35.2l201.7-202.1c10.2-10.1 9.3-24.4 0-33.7z" fill="%23cdced9"/></svg>'),
+		--custom-checkbox-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23111116"/></svg>'),
+		--custom-checkbox-indicator-icon-checked-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23525361"/></svg>'),
+		--custom-checkbox-indicator-icon-indeterminate:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%23111116"/></svg>'),
+		--custom-checkbox-indicator-icon-indeterminate-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%236b6c7e"/></svg>'),
+		--custom-radio-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><circle class="lexicon-icon-outline" cx="256" cy="256" r="256" fill="%23111116"/></svg>'),
+		--input-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--input-select-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--input-select-icon-disabled:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23a7a9bc"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23a7a9bc"></path></svg>'),
+		--input-danger-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23ec2d2d"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23ec2d2d"></path></svg>'),
+		--input-success-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%232a8340"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%232a8340"></path></svg>'),
+		--input-warning-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23d15b00"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23d15b00"></path></svg>'),
+		--form-control-select-secondary-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--form-control-select-secondary-icon-show:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--multi-step-item-error-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M300.4 256 467 89.4c29.6-29.6-14.8-74.1-44.4-44.4L256 211.6 89.4 45C59.8 15.3 15.3 59.8 45 89.4L211.6 256 45 422.6c-29.7 29.7 14.7 74.1 44.4 44.4L256 300.4 422.6 467c29.7 29.7 74.1-14.7 44.4-44.4L300.4 256z" fill="%23111116"/></svg>'),
+		--multi-step-icon-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23111116"/></svg>'),
+		--multi-step-dropdown-indicator-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23f7f8f9"/></svg>'),
+	),
+	$c-dark
+);
+
+$c-dark-high-contrast: () !default;
+$c-dark-high-contrast: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--white: #111116,
+
+		--blue-d1: #a8cfff,
+		--blue-d2: #c2ddff,
+		--blue-d3: #d6e9ff,
+		--blue-d4: #f0f7ff,
+		--blue-l1: #006cf0,
+		--blue-l2: #005dc7,
+		--blue-l3: #004594,
+		--blue-l4: #002f66,
+		--blue-l5: #002147,
+		--blue: #94c4ff,
+		--cyan-d1: #94dbff,
+		--cyan-d2: #ade4ff,
+		--cyan-d3: #c7ecff,
+		--cyan-d4: #e5f6ff,
+		--cyan-l1: #0095e0,
+		--cyan-l2: #0073ad,
+		--cyan-l3: #005f8f,
+		--cyan-l4: #00476b,
+		--cyan-l5: #00334d,
+		--cyan: #75d1ff,
+		--green-d1: #92e651,
+		--green-d2: #a6ea70,
+		--green-d3: #cff4b3,
+		--green-d4: #f1fce9,
+		--green-l1: #57aa18,
+		--green-l2: #498f14,
+		--green-l3: #3a6f10,
+		--green-l4: #29500c,
+		--green-l5: #162d06,
+		--green: #79e029,
+		--indigo-d1: #d6daff,
+		--indigo-d2: #d6daff,
+		--indigo-d3: #d6daff,
+		--indigo-d4: #f0f1ff,
+		--indigo-l1: #051fff,
+		--indigo-l2: #0015d1,
+		--indigo-l3: #0012b2,
+		--indigo-l4: #000d85,
+		--indigo-l5: #000a66,
+		--indigo: #bdc3ff,
+		--orange-d1: #ffc39e,
+		--orange-d2: #ffd6bd,
+		--orange-d3: #ffe6d6,
+		--orange-d4: #fff6f0,
+		--orange-l1: #eb5a00,
+		--orange-l2: #c24a00,
+		--orange-l3: #a33f00,
+		--orange-l4: #803100,
+		--orange-l5: #3d1700,
+		--orange: #ffb385,
+		--pink-d1: #ffc7e7,
+		--pink-d2: #ffd6ed,
+		--pink-d3: #ffe5f4,
+		--pink-d4: #fff5fb,
+		--pink-l1: #f5008b,
+		--pink-l2: #c2006e,
+		--pink-l3: #940053,
+		--pink-l4: #610037,
+		--pink-l5: #3d0022,
+		--pink: #ffaddc,
+		--purple-d1: #ecd1ff,
+		--purple-d2: #ecd1ff,
+		--purple-d3: #ecd1ff,
+		--purple-d4: #f5ebff,
+		--purple-l1: #9b0fff,
+		--purple-l2: #7f00db,
+		--purple-l3: #6e00bd,
+		--purple-l4: #590099,
+		--purple-l5: #3c0066,
+		--purple: #e1b8ff,
+		--red-d1: #ffc7c7,
+		--red-d2: #ffd6d6,
+		--red-d3: #ffe0e0,
+		--red-d4: #fff5f5,
+		--red-l1: #f50000,
+		--red-l2: #c20000,
+		--red-l3: #990000,
+		--red-l4: #700000,
+		--red-l5: #420000,
+		--red: #ffadad,
+		--teal-d1: #96e9db,
+		--teal-d2: #b3efe5,
+		--teal-d3: #ccf4ed,
+		--teal-d4: #eafbf8,
+		--teal-l1: #28bea4,
+		--teal-l2: #1f9380,
+		--teal-l3: #197667,
+		--teal-l4: #12594e,
+		--teal-l5: #0d3b34,
+		--teal: #67dfca,
+		--yellow-d1: #ffcc42,
+		--yellow-d2: #ffdc7a,
+		--yellow-d3: #ffeab2,
+		--yellow-d4: #fff8e5,
+		--yellow-l1: #d69c00,
+		--yellow-l2: #b88600,
+		--yellow-l3: #8a6500,
+		--yellow-l4: #664e00,
+		--yellow-l5: #473400,
+		--yellow: #ffc524,
+
+		--danger-d1: #fac7c7,
+		--danger-d2: #fef1f1,
+		--danger-l1: #b61111,
+		--danger-l2: #420606,
+		--danger: #f8b0b0,
+		--dark-d1: #f7f8f9,
+		--dark-d2: #ffffff,
+		--dark-l1: #e2e4ea,
+		--dark-l2: #e2e4ea,
+		--dark: #f1f2f5,
+		--info-d1: #cad8f1,
+		--info-d2: #f3f6fc,
+		--info-l1: #254a8d,
+		--info-l2: #0c172c,
+		--info: #b6c9ec,
+		--light-d1: #30313f,
+		--light-d2: #30313f,
+		--light-l1: #111116,
+		--light: #272833,
+		--primary-d1: #c7daff,
+		--primary-d2: #f0f5ff,
+		--primary-l0: #003eb2,
+		--primary-l1: #00318f,
+		--primary-l2: #002366,
+		--primary-l3: #001a4d,
+		--primary: #b3cdff,
+		--secondary-l0: #d9d9e3,
+		--secondary-l1: #bcbdcc,
+		--secondary-l2: #a5a7bb,
+		--secondary-l3: #8b8da7,
+		--secondary: #f6f6f8,
+		--success-d1: #a2e1b2,
+		--success-d2: #d9f2df,
+		--success-l1: #26783a,
+		--success-l2: #102e16,
+		--success: #8cd99e,
+		--warning-d1: #ffcba3,
+		--warning-d2: #fff4ec,
+		--warning-l1: #b24d00,
+		--warning-l2: #331600,
+		--warning: #ffb780,
+	),
+	$c-dark-high-contrast
+);

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

 $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;
@@ -189,3 +189,2 @@ $card-cap-color: null !default;
 		border-width: $card-border-width,
-		box-shadow: clay-enable-shadows($card-box-shadow),
 		display: block,
@@ -195,3 +194,7 @@ height: $card-height,
 		min-width: 0,
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $card-border-width,
 		position: relative,
+		transition: $card-transition,
 		word-wrap: break-word,
@@ -221,2 +224,6 @@
 		),
+
+		hover: (
+			box-shadow: clay-enable-shadows($card-hover-box-shadow),
+		),
 	),
@@ -405,10 +412,5 @@ $card
 
-$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;
 
@@ -424,3 +426,4 @@ $form-check-card: () !default;
 			card: (
-				box-shadow: $form-check-card-checked-box-shadow,
+				border-color: $primary-l1,
+				outline-color: $primary-l1,
 			),
@@ -431,3 +434,4 @@ ),
 			card: (
-				box-shadow: $form-check-card-checked-box-shadow,
+				border-color: $primary,
+				outline-color: $primary,
 			),
@@ -438,6 +442,17 @@ ),
 			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,
+			),
+		),
+
 		card: (
@@ -481,8 +496,2 @@ margin-bottom: 0rem,
 				z-index: 2,
-
-				checked: (
-					card: (
-						box-shadow: $form-check-card-checked-box-shadow,
-					),
-				),
 			),
@@ -771,7 +780,7 @@ ),
 		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,
@@ -781,11 +790,15 @@ ),
 		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,
 
@@ -799,2 +812,6 @@ card-body: $card-interactive-card-body,
 
+$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;
@@ -821,11 +838,14 @@ $card-interactive-primary-after-highlight: 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,
 	),
@@ -844,12 +864,8 @@ $card-interactive-primary
 			background-color: $white,
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
+			border-color: c-unset,
+			box-shadow: c-unset,
 			color: $gray-900,
+			transform: translateY(-0.25rem),
 		),
 
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
-		),
-
 		active: (
@@ -867,2 +883,8 @@ background-color: $white,
 	(
+		transition: $card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
@@ -920,2 +942,6 @@ border-color: $gray-300,
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
@@ -960,3 +986,3 @@ margin-right: -8px,
 			background-color: $white,
-			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
+			background-image: linear-gradient(0deg, $gray-300, $gray-300),
 		),
@@ -1174,2 +1200,6 @@
 		card-body: $template-card-body,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
 	),
@@ -1176,0 +1206,0 @@ $template-card

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

@@ -511,4 +511,4 @@ // Clay Color Input Group Text (.clay-color > .input-group-item > .input-group-text)
 				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}'),
 				),
@@ -515,0 +515,0 @@ ),

src/scss/atlas-cus...properties/variables/_custom-forms.scss

@@ -35,3 +35,3 @@ $custom-forms-transition:
 $custom-control-indicator-box-shadow: none !default;
-$custom-control-indicator-position-top: 0px !default;
+$custom-control-indicator-position-top: 0rem !default;
 
@@ -87,2 +87,9 @@ $custom-control-indicator-focus-border-color: $custom-control-indicator-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
@@ -151,2 +158,3 @@
 		cursor: $custom-control-description-cursor,
+		display: inline-block,
 		font-size: $custom-control-description-font-size,
@@ -156,4 +164,4 @@ font-weight: $custom-control-description-font-weight,
 		margin-bottom: 0rem,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
@@ -174,3 +182,3 @@ before: (
 			position: relative,
-			top: 0.25rem,
+			top: $custom-control-indicator-position-top,
 			transition: clay-enable-transitions($custom-forms-transition),
@@ -185,7 +193,7 @@ width: $custom-control-indicator-size,
 			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,
 		),
@@ -233,2 +241,4 @@ ),
 		padding-left: $custom-control-description-padding-left,
+		position: relative,
+		top: -0.25rem,
 	),
@@ -280,8 +290,8 @@ $custom-control-label-text
 		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,
@@ -395,3 +405,6 @@
 
-$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;
@@ -407,3 +420,6 @@
 
-$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;
@@ -454,3 +470,7 @@
 						after: (
-							background-image: clay-icon(check-small, #6b6c7e),
+							background-image:
+								var(
+									--custom-checkbox-indicator-icon-checked-readonly,
+									clay-icon(check-small, #cdced9)
+								),
 						),
@@ -511,3 +531,7 @@ ),
 						after: (
-							background-image: clay-icon(hr, #6b6c7e),
+							background-image:
+								var(
+									--custom-checkbox-indicator-icon-indeterminate-readonly,
+									clay-icon(hr, #cdced9)
+								),
 						),
@@ -538,3 +562,6 @@ ),
 
-$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;
@@ -671,4 +698,5 @@
 
-$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;
 
@@ -889,4 +917,5 @@ // @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;
 
@@ -919,4 +948,5 @@ // @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;
 
@@ -994,3 +1024,3 @@ // @deprecated as of v3.x with no replacement
 	$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;
@@ -997,0 +1027,0 @@

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

@@ -42,3 +42,3 @@ // .dropdown-toggle
 	--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;
@@ -617,3 +617,4 @@
 	(
-		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,
@@ -1182,9 +1183,6 @@ position: relative,
 			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,
@@ -1194,9 +1192,6 @@ ),
 			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,
@@ -1203,0 +1198,0 @@ ),

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

@@ -958,3 +958,6 @@ $input-bg: var(--input-background-color, $gray-200) !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;
 
@@ -1147,3 +1150,6 @@ $input-danger-select: () !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;
 
@@ -1336,3 +1342,6 @@ $input-warning-select: () !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;
 
@@ -1467,11 +1476,20 @@ $input-success-select: () !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;
 
@@ -1568,3 +1586,7 @@ $input-select: () !default;
 			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,
@@ -1581,3 +1603,7 @@ ),
 				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,
@@ -1584,0 +1610,0 @@ ),

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

@@ -322,2 +322,3 @@ // Global Variables
 $border-radius-sm: var(--border-radius-sm) !default;
+$border-radius-xl: var(--border-radius-xl) !default;
 
@@ -724,3 +725,3 @@ $rounded-0-border-radius: var(--rounded-0-border-radius) !default;
 
-$mark-bg: #fcf8e3 !default;
+$mark-bg: $yellow-l3 !default;
 $mark-color: null !default;
@@ -758,3 +759,5 @@ $mark-padding: 0.2em !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;
@@ -761,0 +764,0 @@ $kbd-font-size: $code-font-size !default;

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

@@ -5,3 +5,5 @@ $thumbnail-bg: $body-bg !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;
@@ -8,0 +10,0 @@

src/scss/atlas-custom-properties/variables/_labels.scss

@@ -16,3 +16,3 @@ // .label
 $label-spacer-y: var(--label-spacer-y, 0.125rem) !default;
-$label-text-transform: var(--label-text-transform, uppercase) !default;
+$label-text-transform: var(--label-text-transform, none) !default;
 
@@ -259,3 +259,3 @@ // .label .sticker
 		border-radius: var(--label-lg-border-radius, $border-radius-lg),
-		font-size: var(--label-lg-font-size, 0.75rem),
+		font-size: var(--label-lg-font-size, 0.875rem),
 		height: var(--label-lg-height, auto),
@@ -398,3 +398,3 @@ min-height: var(--label-lg-min-height, 1.5rem),
 
-$label-secondary-color: $secondary !default;
+$label-secondary-color: $dark-l2 !default;
 
@@ -504,3 +504,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-secondary` instead
 
-$label-success-color: $success !default;
+$label-success-color: $success-d1 !default;
 
@@ -604,3 +604,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-success` instead
 
-$label-info-color: $info !default;
+$label-info-color: $info-d1 !default;
 
@@ -700,3 +700,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-info` instead
 
-$label-warning-color: $warning !default;
+$label-warning-color: $warning-d1 !default;
 
@@ -800,3 +800,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-warning` instead
 
-$label-danger-color: $danger !default;
+$label-danger-color: $danger-d1 !default;
 
@@ -1127,5 +1127,5 @@ // @deprecated as of v2.4.1 use the Sass map `$label-danger` instead
 		background-color:
-			var(--label-inverse-secondary-background-color, $secondary),
+			var(--label-inverse-secondary-background-color, $secondary-l3),
 		border-color: var(--label-inverse-secondary-border-color, transparent),
-		color: var(--label-inverse-secondary-color, $white),
+		color: var(--label-inverse-secondary-color, $dark-d2),
 		href: (
@@ -1136,3 +1136,3 @@ hover: (
 						--label-inverse-secondary-hover-background-color,
-						$secondary-d1
+						$secondary-l3
 					),
@@ -1144,3 +1144,3 @@ border-color:
 					),
-				color: var(--label-inverse-secondary-hover-color, $white),
+				color: var(--label-inverse-secondary-hover-color, $dark-d2),
 			),
@@ -1152,3 +1152,3 @@
 						--label-inverse-secondary-focus-background-color,
-						$secondary-d1
+						$secondary-l3
 					),
@@ -1160,3 +1160,3 @@ border-color:
 					),
-				color: var(--label-inverse-secondary-focus-color, $white),
+				color: var(--label-inverse-secondary-focus-color, $dark-d2),
 			),
@@ -1172,5 +1172,5 @@ ),
 		background-color:
-			var(--label-inverse-success-background-color, $success),
+			var(--label-inverse-success-background-color, $success-l2),
 		border-color: var(--label-inverse-success-border-color, transparent),
-		color: var(--label-inverse-success-color, $white),
+		color: var(--label-inverse-success-color, $success-d2),
 		href: (
@@ -1181,7 +1181,7 @@ hover: (
 						--label-inverse-success-hover-background-color,
-						$success-d2
+						$success-l2
 					),
 				border-color:
 					var(--label-inverse-success-hover-border-color, transparent),
-				color: var(--label-inverse-success-hover-color, $white),
+				color: var(--label-inverse-success-hover-color, $success-d2),
 			),
@@ -1193,7 +1193,7 @@
 						--label-inverse-success-focus-background-color,
-						$success
+						$success-l2
 					),
 				border-color:
 					var(--label-inverse-success-focus-border-color, transparent),
-				color: var(--label-inverse-success-focus-color, $white),
+				color: var(--label-inverse-success-focus-color, $success-d2),
 			),
@@ -1208,12 +1208,12 @@ ),
 	(
-		background-color: var(--label-inverse-info-background-color, $info),
+		background-color: var(--label-inverse-info-background-color, $info-l2),
 		border-color: var(--label-inverse-info-border-color, transparent),
-		color: var(--label-inverse-info-color, $white),
+		color: var(--label-inverse-info-color, $info-d2),
 		href: (
 			hover: (
 				background-color:
-					var(--label-inverse-info-hover-background-color, $info-d2),
+					var(--label-inverse-info-hover-background-color, $info-l2),
 				border-color:
 					var(--label-inverse-info-hover-border-color, transparent),
-				color: var(--label-inverse-info-hover-color, $white),
+				color: var(--label-inverse-info-hover-color, $info-d2),
 			),
@@ -1223,6 +1223,6 @@
 				background-color:
-					var(--label-inverse-info-focus-background-color, $info-d2),
+					var(--label-inverse-info-focus-background-color, $info-l2),
 				border-color:
 					var(--label-inverse-info-focus-border-color, transparent),
-				color: var(--label-inverse-info-focus-color, $white),
+				color: var(--label-inverse-info-focus-color, $info-d2),
 			),
@@ -1238,5 +1238,5 @@ ),
 		background-color:
-			var(--label-inverse-warning-background-color, $warning),
+			var(--label-inverse-warning-background-color, $warning-l2),
 		border-color: var(--label-inverse-warning-border-color, transparent),
-		color: var(--label-inverse-warning-color, $white),
+		color: var(--label-inverse-warning-color, $warning-d2),
 		href: (
@@ -1247,7 +1247,7 @@ hover: (
 						--label-inverse-warning-hover-background-color,
-						$warning-d2
+						$warning-l2
 					),
 				border-color:
 					var(--label-inverse-warning-hover-border-color, transparent),
-				color: var(--label-inverse-warning-hover-color, $white),
+				color: var(--label-inverse-warning-hover-color, $warning-d2),
 			),
@@ -1259,7 +1259,7 @@
 						--label-inverse-warning-focus-background-color,
-						$warning-d2
+						$warning-l2
 					),
 				border-color:
 					var(--label-inverse-warning-focus-border-color, transparent),
-				color: var(--label-inverse-warning-focus-color, $white),
+				color: var(--label-inverse-warning-focus-color, $warning-d2),
 			),
@@ -1274,5 +1274,6 @@ ),
 	(
-		background-color: var(--label-inverse-danger-background-color, $danger),
+		background-color:
+			var(--label-inverse-danger-background-color, $danger-l2),
 		border-color: var(--label-inverse-danger-border-color, transparent),
-		color: var(--label-inverse-danger-color, $white),
+		color: var(--label-inverse-danger-color, $danger-d2),
 		href: (
@@ -1283,7 +1284,7 @@ hover: (
 						--label-inverse-danger-hover-background-color,
-						$danger-d2
+						$danger-l2
 					),
 				border-color:
 					var(--label-inverse-danger-hover-border-color, transparent),
-				color: var(--label-inverse-danger-hover-color, $white),
+				color: var(--label-inverse-danger-hover-color, $danger-d2),
 			),
@@ -1295,7 +1296,7 @@
 						--label-inverse-danger-focus-background-color,
-						$danger-d2
+						$danger-l2
 					),
 				border-color:
 					var(--label-inverse-danger-focus-border-color, transparent),
-				color: var(--label-inverse-danger-focus-color, $white),
+				color: var(--label-inverse-danger-focus-color, $danger-d2),
 			),
@@ -1361,2 +1362,362 @@ ),
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-0-background-color, $secondary-l3),
+		border-color: var(--label-inverse-content-0-border-color, transparent),
+		color: var(--label-inverse-content-0-color, $dark-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-0-hover-background-color,
+						$secondary-l3
+					),
+				border-color:
+					var(
+						--label-inverse-content-0-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-0-hover-color, $dark-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-0-focus-background-color,
+						$secondary-l3
+					),
+				border-color:
+					var(
+						--label-inverse-content-0-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-0-focus-color, $dark-d2),
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-1-background-color, $purple-l5),
+		border-color: var(--label-inverse-content-1-border-color, transparent),
+		color: var(--label-inverse-content-1-color, $purple-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-1-hover-background-color,
+						$purple-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-1-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-1-hover-color, $purple-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-1-focus-background-color,
+						$purple-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-1-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-1-focus-color, $purple-d2),
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-2-background-color, $yellow-l5),
+		border-color: var(--label-inverse-content-2-border-color, transparent),
+		color: var(--label-inverse-content-2-color, $yellow-d4),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-2-hover-background-color,
+						$yellow-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-2-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-2-hover-color, $yellow-d4),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-2-focus-background-color,
+						$yellow-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-2-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-2-focus-color, $yellow-d4),
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-3-background-color, $green-l5),
+		border-color: var(--label-inverse-content-3-border-color, transparent),
+		color: var(--label-inverse-content-3-color, $green-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-3-hover-background-color,
+						$green-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-3-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-3-hover-color, $green-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-3-focus-background-color,
+						$green-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-3-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-3-focus-color, $green-d2),
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-4-background-color, $red-l5),
+		border-color: var(--label-inverse-content-4-border-color, transparent),
+		color: var(--label-inverse-content-4-color, $red-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-4-hover-background-color,
+						$red-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-4-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-4-hover-color, $red-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-4-focus-background-color,
+						$red-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-4-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-4-focus-color, $red-d2),
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-5-background-color, $teal-l5),
+		border-color: var(--label-inverse-content-5-border-color, transparent),
+		color: var(--label-inverse-content-5-color, $teal-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-5-hover-background-color,
+						$teal-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-5-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-5-hover-color, $teal-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-5-focus-background-color,
+						$teal-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-5-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-5-focus-color, $teal-d2),
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-6-background-color, $cyan-l5),
+		border-color: var(--label-inverse-content-6-border-color, transparent),
+		color: var(--label-inverse-content-6-color, $cyan-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-6-hover-background-color,
+						$cyan-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-6-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-6-hover-color, $cyan-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-6-focus-background-color,
+						$cyan-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-6-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-6-focus-color, $cyan-d2),
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-7-background-color, $orange-l5),
+		border-color: var(--label-inverse-content-7-border-color, transparent),
+		color: var(--label-inverse-content-7-color, $orange-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-7-hover-background-color,
+						$orange-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-7-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-7-hover-color, $orange-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-7-focus-background-color,
+						$orange-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-7-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-7-focus-color, $orange-d2),
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-8-background-color, $pink-l5),
+		border-color: var(--label-inverse-content-8-border-color, transparent),
+		color: var(--label-inverse-content-8-color, $pink-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-8-hover-background-color,
+						$pink-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-8-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-8-hover-color, $pink-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-8-focus-background-color,
+						$pink-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-8-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-8-focus-color, $pink-d2),
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
@@ -1396,4 +1757,22 @@ $label-palette: map-deep-merge(
 		inverse-dark: $label-inverse-dark,
+
+		inverse-content-0: $label-inverse-content-0,
+
+		inverse-content-1: $label-inverse-content-1,
+
+		inverse-content-2: $label-inverse-content-2,
+
+		inverse-content-3: $label-inverse-content-3,
+
+		inverse-content-4: $label-inverse-content-4,
+
+		inverse-content-5: $label-inverse-content-5,
+
+		inverse-content-6: $label-inverse-content-6,
+
+		inverse-content-7: $label-inverse-content-7,
+
+		inverse-content-8: $label-inverse-content-8,
 	),
 	$label-palette
 );

src/scss/atlas-custom-properties/variables/_modals.scss

@@ -1,3 +0,3 @@
-$modal-backdrop-bg: var(--modal-backdrop-bg, $gray-800) !default;
-$modal-backdrop-opacity: var(--modal-backdrop-opacity, 0.8) !default;
+$modal-backdrop-bg: var(--modal-backdrop-background-color) !default;
+$modal-backdrop-opacity: var(--modal-backdrop-opacity) !default;
 
@@ -57,3 +57,4 @@ $modal-backdrop: () !default;
 
-$modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
+$modal-content-box-shadow-xs: 0 0 3px 1px
+	unquote('hsl(from #{$black} h s l / 0.3)') !default;
 
@@ -60,0 +61,0 @@ $modal-content-box-shadow-sm-up: var(

src/scss/atlas-cus...operties/variables/_multi-step-nav.scss

@@ -233,6 +233,3 @@ $multi-step-nav-margin-bottom: var(
 			background-image:
-				var(
-					--multi-step-item-error-multi-step-icon-background-image,
-					clay-icon(times, #fff)
-				),
+				var(--multi-step-item-error-icon, clay-icon(times, #fff)),
 			color: var(--multi-step-item-error-multi-step-icon-color, $white),
@@ -265,3 +262,3 @@ text-indent: -100px,
 $multi-step-icon-complete-bg-image: var(
-	--multi-step-icon-complete-bg-image,
+	--multi-step-icon-complete-icon,
 	clay-icon(check, #fff)
@@ -268,0 +265,0 @@ ) !default;

src/scss/atlas-cus...operties/variables/_navigation-bar.scss

@@ -408,5 +408,5 @@ $navigation-bar-size: () !default;
 		navbar-brand: (
-			color: rgba(255, 255, 255, 0.9),
+			color: unquote('hsl(from #{$white} h s l / 0.9)'),
 			hover: (
-				color: rgba(255, 255, 255, 0.9),
+				color: unquote('hsl(from #{$white} h s l / 0.9)'),
 			),
@@ -413,0 +413,0 @@ ),

src/scss/atlas-custom-properties/variables/_panels.scss

@@ -351,4 +351,4 @@ $panel-bg: var(--panel-background-color, $white) !default;
 		focus: (
-			box-shadow: #{0 0 0 4px $body-bg,
-			0 0 0 6px $primary-l0},
+			box-shadow:
+				unquote('0 0 0 4px #{$body-bg}, 0 0 0 6px #{$primary-l0}'),
 		),
@@ -355,0 +355,0 @@ ),

src/scss/atlas-custom-properties/variables/_popovers.scss

@@ -13,3 +13,3 @@ $popover-bg: var(--popover-background-color, $white) !default;
 	--popover-box-shadow,
-	0 1px 15px -2px rgba(0, 0, 0, 0.2)
+	unquote('0 1px 15px -2px hsl(from #{$black} h s l / 0.2)')
 ) !default;
@@ -16,0 +16,0 @@ $popover-font-size: var(--popover-font-size, $font-size-sm) !default;

src/scss/atlas-custom-properties/variables/_range.scss

@@ -79,3 +79,3 @@ $clay-range-disabled-color: var(
 					--clay-range-thumb-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)')
 				),
@@ -82,0 +82,0 @@ height: var(--clay-range-thumb-height, 24px),

src/scss/atlas-custom-properties/variables/_resizer.scss

@@ -26,9 +26,20 @@ $c-horizontal-resizer: () !default;
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
 			),
 		),
 
+		active: (
+			before: (
+				background-color: $primary-d2,
+			),
+		),
+
 		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+			outline: 0,
+
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+				bottom: 0.25rem,
+				top: 0.25rem,
 			),
@@ -35,0 +46,0 @@ ),

src/scss/atlas-custom-properties/variables/_sheets.scss

@@ -182,4 +182,3 @@ $sheet-bg: var(--sheet-background-color, $white) !default;
 		focus: (
-			box-shadow: #{0 0 0 4px $white,
-			0 0 0 6px $primary-l0},
+			box-shadow: unquote('0 0 0 4px #{$white}, 0 0 0 6px #{$primary-l0}'),
 			outline: 0,
@@ -186,0 +185,0 @@ ),

src/scss/atlas-custom-properties/variables/_sidebar.scss

@@ -334,3 +334,6 @@ $sidebar-padding-bottom: var(--sidebar-padding-bottom, 16px) !default;
 		box-shadow:
-			var(--sidebar-light-box-shadow, -4px 0 8px -4px rgba(0, 0, 0, 0.1)),
+			var(
+				--sidebar-light-box-shadow,
+				unquote('-4px 0 8px -4px hsl(from #{$black} h s l / 0.1)')
+			),
 		color: var(--sidebar-light-color, $gray-900),
@@ -353,3 +356,3 @@ sidebar-header: (
 					--sidebar-light-sidenav-start-box-shadow,
-					4px 0 8px -4px rgba(0, 0, 0, 0.1)
+					unquote('4px 0 8px -4px hsl(from #{$black} h s l / 0.1)')
 				),
@@ -377,4 +380,6 @@ ),
 					focus: (
-						box-shadow: #{0 0 0 4px $white,
-						0 0 0 6px $primary-l0},
+						box-shadow:
+							unquote(
+								'0 0 0 4px #{$white},0 0 0 6px #{$primary-l0}'
+							),
 					),
@@ -471,3 +476,6 @@ ),
 		'.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 #{$black} h s l / 0.1)'
+				),
 		),
@@ -474,0 +482,0 @@ ),

src/scss/atlas-custom-properties/variables/_stickers.scss

@@ -252,3 +252,3 @@ // .sticker
 
-$sticker-outside-offset: calc(#{$sticker-size} * 0.5) !default;
+$sticker-outside-offset: calc(#{$sticker-size} * -0.5) !default;
 
@@ -297,3 +297,3 @@ $sticker-outside: () !default;
 		border-radius: $rounded-circle-border-radius,
-		box-shadow: 0 0 0 1px unquote('rgb(from #{$black} r g b / 0.125)'),
+		box-shadow: unquote('0 0 0 1px hsl(from #{$black} h s l / 0.125)'),
 	),
@@ -300,0 +300,0 @@ $sticker-user-icon

src/scss/atlas-custom-properties/variables/_tables.scss

@@ -32,3 +32,3 @@ // <table> element
 $table-bg: var(--table-background-color, $white) !default;
-$table-border-color: var(--table-border-color, $gray-300) !default;
+$table-border-color: var(--table-border-color, $gray-400) !default;
 $table-border-width: var(--table-border-width, $border-width) !default;
@@ -542,8 +542,6 @@ $table-color: var(--table-color, $body-color) !default;
 			before: (
-				box-shadow: (
-					inset 0 2px 0 0 $primary-l0,
-					inset 0 4px 0 0 $white,
-					inset 0 -2px 0 0 $primary-l0,
-					inset 0 -4px 0 0 $white,
-				),
+				box-shadow:
+					unquote(
+						'inset 0 2px 0 0 #{$primary-l0},inset 0 4px 0 0 #{$white},inset 0 -2px 0 0 #{$primary-l0},inset 0 -4px 0 0 #{$white}'
+					),
 				content: '',
@@ -562,6 +560,6 @@ display: block,
 				after: (
-					box-shadow: (
-						inset 2px 0 0 0 $primary-l0,
-						inset 4px 0 0 0 $white,
-					),
+					box-shadow:
+						unquote(
+							'inset 2px 0 0 0 #{$primary-l0},inset 4px 0 0 0 #{$white}'
+						),
 					content: '',
@@ -581,6 +579,6 @@ display: block,
 				after: (
-					box-shadow: (
-						inset -2px 0 0 0 $primary-l0,
-						inset -4px 0 0 0 $white,
-					),
+					box-shadow:
+						unquote(
+							'inset -2px 0 0 0 #{$primary-l0},inset -4px 0 0 0 #{$white}'
+						),
 					content: '',
@@ -780,3 +778,3 @@ display: block,
 $table-list-bg: var(--table-list-background-color, $white) !default;
-$table-list-border-color: var(--table-list-border-color, $gray-300) !default;
+$table-list-border-color: var(--table-list-border-color, $gray-400) !default;
 $table-list-border-radius: var(
@@ -1037,3 +1035,3 @@ --table-list-border-radius,
 					--table-list-action-link-background-color,
-					rgba(0, 0, 0, 0.02)
+					unquote('hsl(from #{$black} h s l / 0.02)')
 				),
@@ -1048,3 +1046,3 @@ color: var(--table-list-action-link-hover-color, $gray-900),
 					--table-list-action-link-focus-background-color,
-					rgba(0, 0, 0, 0.02)
+					unquote('hsl(from #{$black} h s l / 0.02)')
 				),
@@ -1060,3 +1058,3 @@ box-shadow: $component-focus-box-shadow,
 					--table-list-action-link-active-background-color,
-					rgba(0, 0, 0, 0.04)
+					unquote('hsl(from #{$black} h s l / 0.04)')
 				),
@@ -1063,0 +1061,0 @@ ),

src/scss/atlas-custom-properties/variables/_tbar.scss

@@ -170,3 +170,6 @@ $tbar-item-padding-x: var(--tbar-item-padding-x, 8px) !default;
 		background-color: $white,
-		box-shadow: inset 1px 0 0 0 $gray-200#{','} inset -1px 0 0 0 $gray-200,
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 #{$gray-200}, inset -1px 0 0 0 #{$gray-200}'
+			),
 		color: $secondary,
@@ -212,4 +215,6 @@
 		background-color: $dark-d1,
-		box-shadow: inset 1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)')
-			#{','} inset -1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)'),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$white} h s l / 0.06)'
+			),
 		color: $gray-500,
@@ -268,4 +273,6 @@
 		background-color: $dark-l2,
-		box-shadow: inset 1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)')
-			#{','} inset -1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)'),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$white} h s l / 0.06)'
+			),
 		border-color: unquote('hsl(from #{$white} h s l / 0.06)'),
@@ -272,0 +279,0 @@ color: $gray-500,

src/scss/atlas-custom-properties/variables/_tooltip.scss

@@ -5,3 +5,3 @@ $tooltip-bg: var(--tooltip-background-color, $dark-d2) !default;
 	--tooltip-box-shadow,
-	0 1px 4px 0px rgba(0, 0, 0, 0.4)
+	unquote('0 1px 4px 0px hsl(from #{$black} h s l / 0.4)')
 ) !default;
@@ -8,0 +8,0 @@ $tooltip-color: var(--tooltip-color, $white) !default;

src/scss/atlas/variables/_cards.scss

@@ -1,5 +0,11 @@
-$card-border-radius: $border-radius !default;
-$card-border-width: 0px !default;
-$card-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !default;
+$card-border-color: $secondary-l2 !default;
+$card-border-radius: $border-radius-xl !default;
+$card-border-width: $border-width !default;
+$card-box-shadow: c-unset !default;
+$card-transition:
+	$component-transition,
+	transform 0.15s ease-in-out !default;
 
+$card-hover-box-shadow: 0 0.25rem 0.75rem -0.25rem unquote('rgb(from #{$black} r g b / 0.25)') !default;
+
 $card-body-padding-bottom: 1rem !default;
@@ -21,3 +27,10 @@ $card-body-padding-left: 1rem !default;
 		border-width: $card-border-width,
-		box-shadow: clay-enable-shadows($card-box-shadow),
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $card-border-width,
+		transition: $card-transition,
+
+		hover: (
+			box-shadow: clay-enable-shadows($card-hover-box-shadow),
+		),
 	),
@@ -86,5 +99,45 @@ $card
 
-$form-check-card-checked-box-shadow: 0 0 0 2px
-	clay-lighten($component-active-bg, 22.94) !default;
+// .form-check-card
 
+$form-check-card-checked-box-shadow: c-unset !default;
+
+$form-check-card: () !default;
+$form-check-card: map-deep-merge(
+	(
+		transition: $card-transition,
+
+		hover: (
+			card: (
+				border-color: $primary-l1,
+				outline-color: $primary-l1,
+			),
+		),
+
+		active: (
+			card: (
+				border-color: $primary,
+				outline-color: $primary,
+			),
+		),
+
+		checked: (
+			card: (
+				border-color: $primary,
+				outline-color: $primary,
+			),
+		),
+
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $card-border-color,
+				outline-color: transparent,
+			),
+		),
+	),
+	$form-check-card
+);
+
 // Card Interactive
@@ -95,13 +148,20 @@
 	(
+		outline: c-unset,
+		transition: c-unset,
+
 		hover: (
-			background-color: #f7f8f9,
+			background-color: $gray-100,
 		),
 
 		focus: (
-			border-color: null,
-			box-shadow: $component-focus-box-shadow,
+			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,
 		),
@@ -112,2 +172,26 @@ ),
 
+$card-interactive-primary-hover-box-shadow: unquote(
+	'#{$card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$primary} inset'
+) !default;
+
+$card-interactive-primary: () !default;
+$card-interactive-primary: map-deep-merge(
+	(
+		hover: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		focus: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		active: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		after-highlight: c-unset,
+	),
+	$card-interactive-primary
+);
+
 // Card Interactive Secondary
@@ -119,9 +203,11 @@
 		hover: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px $primary-l0,
+			background-color: $white,
+			border-color: c-unset,
+			box-shadow: c-unset,
+			color: $gray-900,
+			transform: translateY(-0.25rem),
 		),
 
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px $primary-l0,
+		active: (
+			background-color: $white,
 		),
@@ -137,2 +223,8 @@ ),
 	(
+		transition: $card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
@@ -145,2 +237,6 @@ border-color: $gray-300,
 		),
+
+		disabled: (
+			transform: none,
+		),
 	),
@@ -150,2 +246,14 @@ $card-type-asset
 
+// Template Card
+
+$template-card: () !default;
+$template-card: map-deep-merge(
+	(
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+	),
+	$template-card
+);
+
 $image-card: () !default;
@@ -198,10 +306,1 @@ $image-card: map-deep-merge(
 );
-
-$card-type-template: () !default;
-$card-type-template: map-deep-merge(
-	(
-		border-width: 1px,
-		box-shadow: none,
-	),
-	$card-type-template
-);

src/scss/atlas/variables/_custom-forms.scss

@@ -104,8 +104,3 @@ $custom-control-indicator-bg: $white !default;
 				clay-enable-shadows($custom-control-indicator-box-shadow),
-			top: 0.25rem,
 		),
-
-		after: (
-			top: $custom-control-indicator-position-top,
-		),
 	),
@@ -112,0 +107,0 @@ $custom-control-label

src/scss/atlas/variables/_globals.scss

@@ -389,2 +389,3 @@ // The keyword `clay-unset` allows unsetting a css value so it doesn't get output in the final css file.
 $border-radius-sm: 0.1875rem !default; // 3px
+$border-radius-xl: 1rem !default; // 16px
 
@@ -710,3 +711,3 @@ $rounded-0-border-radius: 0px !default;
 
-$mark-bg: #ffe399 !default;
+$mark-bg: $yellow-l3 !default;
 
@@ -713,0 +714,0 @@ $dt-font-weight: $font-weight-bold !default;

src/scss/atlas/variables/_labels.scss

 // .label
 
-$label-border-radius: 0.125rem !default; // 2px
-$label-font-size: 0.625rem !default; // 10px
+$label-border-radius: $border-radius !default; // 4px
+$label-font-size: 0.75rem !default; // 12px
 $label-font-weight: $font-weight-semi-bold !default;
 $label-padding-x: 0.25rem !default; // 4px
 $label-padding-y: 0.125rem !default; // 2px
-$label-text-transform: uppercase !default;
+$label-text-transform: none !default;
 
@@ -89,3 +89,3 @@ // .label[href], .label[type], .label[tabindex='0']
 	(
-		font-size: 0.75rem,
+		font-size: 0.875rem,
 		min-height: 1.5rem,
@@ -162,3 +162,3 @@ padding-bottom: 0.3125rem,
 
-$label-secondary-color: $secondary !default;
+$label-secondary-color: $dark-l2 !default;
 
@@ -195,3 +195,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-secondary` instead
 
-$label-success-color: $success !default;
+$label-success-color: $success-d1 !default;
 
@@ -228,3 +228,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-success` instead
 
-$label-info-color: $info !default;
+$label-info-color: $info-d1 !default;
 
@@ -261,3 +261,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-info` instead
 
-$label-warning-color: $warning !default;
+$label-warning-color: $warning-d1 !default;
 
@@ -294,3 +294,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-warning` instead
 
-$label-danger-color: $danger !default;
+$label-danger-color: $danger-d1 !default;
 
@@ -404,3 +404,3 @@ // @deprecated as of v2.4.1 use the Sass map `$label-danger` instead
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $white,
@@ -428,9 +428,11 @@ ),
 	(
-		color: $white,
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
 			),
@@ -441,3 +443,3 @@ ),
 			hover: (
-				color: null,
+				color: $dark-d2,
 			),
@@ -448,3 +450,3 @@ ),
 			hover: (
-				color: null,
+				color: $dark-d2,
 			),
@@ -459,8 +461,11 @@ ),
 	(
-		color: $white,
+		background-color: $success-l2,
+		border-color: transparent,
+		color: $success-d2,
+
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $success-l2,
+				border-color: transparent,
+				color: $success-d2,
 			),
@@ -471,3 +476,3 @@ ),
 			hover: (
-				color: null,
+				color: $success-d2,
 			),
@@ -478,3 +483,3 @@ ),
 			hover: (
-				color: null,
+				color: $success-d2,
 			),
@@ -489,9 +494,11 @@ ),
 	(
-		color: $white,
+		background-color: $info-l2,
+		border-color: transparent,
+		color: $info-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $info-l2,
+				border-color: transparent,
+				color: $info-d2,
 			),
@@ -502,3 +509,3 @@ ),
 			hover: (
-				color: null,
+				color: $info-d2,
 			),
@@ -509,3 +516,3 @@ ),
 			hover: (
-				color: null,
+				color: $info-d2,
 			),
@@ -520,9 +527,11 @@ ),
 	(
-		color: $white,
+		background-color: $warning-l2,
+		border-color: transparent,
+		color: $warning-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $warning-l2,
+				border-color: transparent,
+				color: $warning-d2,
 			),
@@ -533,3 +542,3 @@ ),
 			hover: (
-				color: null,
+				color: $warning-d2,
 			),
@@ -540,3 +549,3 @@ ),
 			hover: (
-				color: null,
+				color: $warning-d2,
 			),
@@ -551,9 +560,11 @@ ),
 	(
-		color: $white,
+		background-color: $danger-l2,
+		border-color: transparent,
+		color: $danger-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $danger-l2,
+				border-color: transparent,
+				color: $danger-d2,
 			),
@@ -564,3 +575,3 @@ ),
 			hover: (
-				color: null,
+				color: $danger-d2,
 			),
@@ -571,3 +582,3 @@ ),
 			hover: (
-				color: null,
+				color: $danger-d2,
 			),
@@ -587,3 +598,3 @@ ),
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $dark,
@@ -616,3 +627,3 @@ ),
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $white,
@@ -637,2 +648,272 @@ ),
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
+
+		href: (
+			hover: (
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border-color: transparent,
+		color: $purple-d2,
+
+		href: (
+			hover: (
+				background-color: $purple-l5,
+				border-color: transparent,
+				color: $purple-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border-color: transparent,
+		color: $yellow-d4,
+
+		href: (
+			hover: (
+				background-color: $yellow-l5,
+				border-color: transparent,
+				color: $yellow-d4,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border-color: transparent,
+		color: $green-d2,
+
+		href: (
+			hover: (
+				background-color: $green-l5,
+				border-color: transparent,
+				color: $green-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border-color: transparent,
+		color: $red-d2,
+
+		href: (
+			hover: (
+				background-color: $red-l5,
+				border-color: transparent,
+				color: $red-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border-color: transparent,
+		color: $teal-d2,
+
+		href: (
+			hover: (
+				background-color: $teal-l5,
+				border-color: transparent,
+				color: $teal-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border-color: transparent,
+		color: $cyan-d2,
+
+		href: (
+			hover: (
+				background-color: $cyan-l5,
+				border-color: transparent,
+				color: $cyan-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border-color: transparent,
+		color: $orange-d2,
+
+		href: (
+			hover: (
+				background-color: $orange-l5,
+				border-color: transparent,
+				color: $orange-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border-color: transparent,
+		color: $pink-d2,
+
+		href: (
+			hover: (
+				background-color: $pink-l5,
+				border-color: transparent,
+				color: $pink-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
@@ -672,4 +953,22 @@ $label-palette: map-deep-merge(
 		inverse-dark: $label-inverse-dark,
+
+		inverse-content-0: $label-inverse-content-0,
+
+		inverse-content-1: $label-inverse-content-1,
+
+		inverse-content-2: $label-inverse-content-2,
+
+		inverse-content-3: $label-inverse-content-3,
+
+		inverse-content-4: $label-inverse-content-4,
+
+		inverse-content-5: $label-inverse-content-5,
+
+		inverse-content-6: $label-inverse-content-6,
+
+		inverse-content-7: $label-inverse-content-7,
+
+		inverse-content-8: $label-inverse-content-8,
 	),
 	$label-palette
 );

src/scss/atlas/variables/_tables.scss

 $table-bg: $white !default;
-$table-border-color: $gray-300 !default;
+$table-border-color: $gray-400 !default;
 $table-font-size: 0.875rem !default;
@@ -176,3 +176,3 @@
 
-$table-list-border-color: $gray-300 !default;
+$table-list-border-color: $gray-400 !default;
 $table-list-color: $body-color !default;
@@ -179,0 +179,0 @@

src/scss/cadmin.scss

@@ -13,2 +13,4 @@ // INSERT @use rules
 
+@import 'cadmin/components/_root';
+
 @import 'cadmin/components/_base';
@@ -15,0 +17,0 @@ @import 'cadmin/components/_reboot';

src/scss/cadmin/_variables.scss

@@ -63,1 +63,3 @@ @import 'variables/_globals';
 @import 'variables/_utilities';
+
+@import 'variables/_c-root';

src/scss/cadmin/components/_cards.scss

@@ -311,69 +311,17 @@ .card,
 .form-check-card {
-	margin-bottom: $cadmin-card-margin-bottom;
-	margin-top: 0;
-	padding-left: 0;
+	@include clay-form-check-card-variant($cadmin-form-check-card);
 
-	.card {
-		margin-bottom: 0;
-	}
-
-	.custom-control {
-		display: inline;
-		margin-right: 0;
-		position: static;
-
-		> label {
-			font-weight: $cadmin-font-weight-normal;
-			padding-left: 0;
-		}
-	}
-
-	.custom-control-input {
-		z-index: 2;
-	}
-
-	.custom-control-label {
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-input {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-label {
-		color: $cadmin-body-color;
-		display: inline;
-		font-weight: $cadmin-font-weight-normal;
-		padding-left: 0;
-		position: static;
-	}
-
-	&.active .card,
-	.custom-control-input:checked ~ .card,
 	.form-check-input:checked ~ .card {
-		box-shadow: $cadmin-form-check-card-checked-box-shadow;
+		@include clay-card-variant(
+			map-deep-get(
+				$cadmin-form-check-card,
+				custom-control,
+				custom-control-input,
+				checked,
+				card
+			)
+		);
 	}
 }
 
-.form-check-card {
-	&:hover {
-		.card {
-			box-shadow: $cadmin-form-check-card-checked-box-shadow;
-		}
-	}
-}
-
-.custom-control-input,
-.form-check-input {
-	&:hover {
-		~ .card {
-			box-shadow: $cadmin-form-check-card-checked-box-shadow;
-		}
-	}
-}
-
 .form-check-bottom-left,
@@ -380,0 +328,0 @@ .form-check-middle-left,

src/scss/cadmin/components/_focus-ring.scss

@@ -56,3 +56,5 @@ $cadmin-focus-ring-animation-name: clay-cadmin-focus-ring !default;
 
-		:focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+		:focus-visible:not(.c-horizontal-resizer):not(.toggle-switch-check):not(
+				.custom-control-input
+			),
 		.focus {
@@ -59,0 +61,0 @@ position: relative;

src/scss/cadmin/components/_icons.scss

@@ -5,2 +5,99 @@ .lexicon-icon {
 
+.lexicon-icon-arrows-all {
+	background-color: unquote('hsl(from #{$cadmin-white} h s l / 0.6)');
+	border: 1px solid $cadmin-border-color;
+	border-radius: 0.1413em; // 6.5/46
+	height: 0.73913em; // 34/46 aspect ratio
+	margin-top: 0;
+	width: 1em;
+
+	.lx-arrows-all-chevron {
+		fill: $cadmin-white;
+	}
+}
+
+.clay-keyboard-arrows-horizontal {
+	.lx-arrows-all-keycap-down,
+	.lx-arrows-all-keycap-up {
+		fill: $cadmin-gray-300;
+	}
+}
+
+.clay-keyboard-arrows-vertical {
+	.lx-arrows-all-keycap-left,
+	.lx-arrows-all-keycap-right {
+		fill: $cadmin-gray-300;
+	}
+}
+
+.clay-keyboard-arrows-indicator {
+	display: inline-flex;
+	font-size: 2.875rem; // 46px — natural design size
+
+	.lexicon-icon {
+		margin-top: 0;
+	}
+}
+
+.clay-keyboard-arrows-indicator-floating {
+	background-color: $cadmin-white;
+	border-radius: 0.1413em;
+	position: absolute;
+	transition:
+		bottom 0.3s ease-in-out,
+		left 0.3s ease-in-out,
+		right 0.3s ease-in-out,
+		top 0.3s ease-in-out;
+	z-index: $cadmin-zindex-tooltip;
+
+	&.clay-keyboard-arrows-indicator-floating-hidden {
+		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
+	}
+
+	&.clay-keyboard-arrows-indicator-floating-tooltip {
+		&::before,
+		&::after {
+			border-style: solid;
+			content: '';
+			height: 0;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 0;
+		}
+
+		&::before {
+			border-color: transparent $cadmin-border-color transparent
+				transparent;
+			border-width: 7px 7px 7px 0;
+			left: -7px;
+		}
+
+		&::after {
+			border-color: transparent $cadmin-white transparent transparent;
+			border-width: 6px 6px 6px 0;
+			left: -6px;
+		}
+
+		&.clay-keyboard-arrows-indicator-floating-flipped {
+			&::before {
+				border-color: transparent transparent transparent
+					$cadmin-border-color;
+				border-width: 7px 0 7px 7px;
+				left: auto;
+				right: -7px;
+			}
+
+			&::after {
+				border-color: transparent transparent transparent $cadmin-white;
+				border-width: 6px 0 6px 6px;
+				left: auto;
+				right: -6px;
+			}
+		}
+	}
+}
+
 .order-arrow-down-active {
@@ -7,0 +104,0 @@ .order-arrow-arrow-down {

src/scss/cadmin/components/_reboot.scss

@@ -80,3 +80,5 @@ /* SPDX-SnippetBegin
 		var {
-			@extend %cadmin-reset !optional;
+			&:where(:not(.ck, .ck *)) {
+				@extend %cadmin-reset !optional;
+			}
 		}
@@ -243,3 +245,5 @@
 
-			margin: 0;
+			@supports (-webkit-hyphens: none) {
+				margin: 0;
+			}
 		}
@@ -246,0 +250,0 @@

src/scss/cadmin/components/_resizer.scss

@@ -14,2 +14,12 @@ .c-horizontal-resizer {
 
+	&:active::before {
+		@include clay-css(
+			map-deep-get($cadmin-c-horizontal-resizer, active, before)
+		);
+	}
+
+	&:focus-visible {
+		@include clay-css(map-get($cadmin-c-horizontal-resizer, focus));
+	}
+
 	&:focus-visible::before {
@@ -16,0 +26,0 @@ @include clay-css(

src/scss/cadmin/variables/_alerts.scss

@@ -412,3 +412,5 @@ $cadmin-alert-border-radius: $cadmin-border-radius !default;
 
-$cadmin-alert-notifications-box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.3) !default;
+$cadmin-alert-notifications-box-shadow: unquote(
+	'0 8px 32px -4px hsl(from #{$cadmin-black} h s l / 0.3)'
+) !default;
 $cadmin-alert-notifications-max-width: 360px !default;
@@ -663,8 +665,8 @@
 			border-color: $cadmin-primary,
-			color: color-yiq($cadmin-primary),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-primary, 5%),
-			border-color: clay-darken($cadmin-primary, 5%),
+			background-color: $cadmin-primary-d1,
+			border-color: $cadmin-primary-d1,
 		),
@@ -733,8 +735,8 @@ ),
 			border-color: $cadmin-secondary,
-			color: color-yiq($cadmin-secondary),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-secondary, 5%),
-			border-color: clay-darken($cadmin-secondary, 5%),
+			background-color: $cadmin-secondary-d1,
+			border-color: $cadmin-secondary-d1,
 		),
@@ -803,8 +805,8 @@ ),
 			border-color: $cadmin-success,
-			color: color-yiq($cadmin-success),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-success, 5%),
-			border-color: clay-darken($cadmin-success, 5%),
+			background-color: $cadmin-success-d1,
+			border-color: $cadmin-success-d1,
 		),
@@ -873,8 +875,8 @@ ),
 			border-color: $cadmin-info,
-			color: color-yiq($cadmin-info),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-info, 5%),
-			border-color: clay-darken($cadmin-info, 5%),
+			background-color: $cadmin-info-d1,
+			border-color: $cadmin-info-d1,
 		),
@@ -943,8 +945,8 @@ ),
 			border-color: $cadmin-warning,
-			color: color-yiq($cadmin-warning),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-warning, 5%),
-			border-color: clay-darken($cadmin-warning, 5%),
+			background-color: $cadmin-warning-d1,
+			border-color: $cadmin-warning-d1,
 		),
@@ -1013,8 +1015,8 @@ ),
 			border-color: $cadmin-danger,
-			color: color-yiq($cadmin-danger),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-danger, 5%),
-			border-color: clay-darken($cadmin-danger, 5%),
+			background-color: $cadmin-danger-d1,
+			border-color: $cadmin-danger-d1,
 		),
@@ -1087,4 +1089,4 @@ ),
 		active: (
-			background-color: clay-darken($cadmin-dark, 5%),
-			border-color: clay-darken($cadmin-dark, 5%),
+			background-color: $cadmin-dark-d1,
+			border-color: $cadmin-dark-d1,
 		),
@@ -1153,8 +1155,8 @@ ),
 			border-color: $cadmin-dark,
-			color: color-yiq($cadmin-dark),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-dark, 5%),
-			border-color: clay-darken($cadmin-dark, 5%),
+			background-color: $cadmin-dark-d1,
+			border-color: $cadmin-dark-d1,
 		),
@@ -1161,0 +1163,0 @@ ),

src/scss/cadmin/variables/_badges.scss

@@ -551,3 +551,4 @@ // .badge
 		'.badge-translucent.badge-primary': (
-			background-color: rgba($cadmin-primary-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -558,3 +559,4 @@ color: $cadmin-primary-d1,
 		'.badge-translucent.badge-info, .badge-beta': (
-			background-color: rgba($cadmin-info-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-info-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -565,3 +567,4 @@ color: $cadmin-info-d1,
 		'.badge-translucent.badge-success': (
-			background-color: rgba($cadmin-success-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-success-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -572,3 +575,4 @@ color: $cadmin-success-d1,
 		'.badge-translucent.badge-warning': (
-			background-color: rgba($cadmin-warning-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-warning-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -579,3 +583,4 @@ color: $cadmin-warning-d1,
 		'.badge-translucent.badge-danger': (
-			background-color: rgba($cadmin-danger-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-danger-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -586,3 +591,4 @@ color: $cadmin-danger-d1,
 		'%clay-dark-badge-translucent-primary': (
-			background-color: rgba($cadmin-primary-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -601,3 +607,4 @@ color: $cadmin-primary-l1,
 		'%clay-dark-badge-translucent-info': (
-			background-color: rgba($cadmin-info-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-info-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -616,3 +623,4 @@ color: $cadmin-info-l1,
 		'%clay-dark-badge-translucent-success': (
-			background-color: rgba($cadmin-success-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-success-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -631,3 +639,4 @@ color: $cadmin-success-l1,
 		'%clay-dark-badge-translucent-warning': (
-			background-color: rgba($cadmin-warning-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-warning-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -646,3 +655,4 @@ color: $cadmin-warning-l1,
 		'%clay-dark-badge-translucent-danger': (
-			background-color: rgba($cadmin-danger-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-danger-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -649,0 +659,0 @@ color: $cadmin-danger-l1,

src/scss/cadmin/variables/_breadcrumbs.scss

@@ -35,5 +35,5 @@ // .breadcrumb
 
-$cadmin-breadcrumb-divider-svg-icon: clay-icon(
-	angle-right,
-	$cadmin-breadcrumb-divider-color
+$cadmin-breadcrumb-divider-svg-icon: var(
+	--cadmin-breadcrumb-divider-svg-icon,
+	clay-icon(angle-right, #6b6c7e)
 ) !default;
@@ -40,0 +40,0 @@ $cadmin-breadcrumb-divider-svg-icon-height: 0.6em !default;

src/scss/cadmin/variables/_buttons.scss

@@ -42,3 +42,3 @@ $cadmin-btn-border-radius: $cadmin-border-radius !default;
 		border-radius: clay-enable-rounded($cadmin-btn-border-radius),
-		box-shadow: clay-enable-shadows([$cadmin-btn-box-shadow]),
+		box-shadow: clay-enable-shadows($cadmin-btn-box-shadow),
 		color: $cadmin-body-color,
@@ -82,3 +82,3 @@ cursor: $cadmin-btn-cursor,
 		active: (
-			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($cadmin-btn-active-box-shadow),
 			focus: (
@@ -90,3 +90,3 @@ box-shadow: c-unset,
 		active-class: (
-			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($cadmin-btn-active-box-shadow),
 		),
@@ -405,3 +405,3 @@
 	(
-		background-color: rgba(0, 0, 0, 0.001),
+		background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.001)'),
 		border-width: 0px,
@@ -499,3 +499,3 @@ cursor: $cadmin-btn-cursor,
 		border-color: transparent,
-		color: color-yiq($cadmin-primary),
+		color: $cadmin-white,
 		hover: (
@@ -505,3 +505,3 @@ background-color: $cadmin-primary-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-primary, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -513,3 +513,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-primary, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -521,3 +521,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-primary, 10%)),
+			color: $cadmin-white,
 		),
@@ -529,3 +529,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-primary),
+			color: $cadmin-white,
 		),
@@ -541,3 +541,3 @@ ),
 		background-image: clay-enable-gradients($cadmin-white),
-		border-color: $cadmin-secondary-l2,
+		border-color: $cadmin-secondary-l0,
 		color: $cadmin-secondary,
@@ -548,3 +548,3 @@
 			background-image: clay-enable-gradients($cadmin-gray-100),
-			border-color: $cadmin-secondary-l2,
+			border-color: $cadmin-secondary-l0,
 			color: $cadmin-gray-900,
@@ -556,3 +556,3 @@ ),
 			background-image: clay-enable-gradients($cadmin-gray-100),
-			border-color: $cadmin-secondary-l2,
+			border-color: $cadmin-secondary-l0,
 			color: $cadmin-gray-900,
@@ -564,3 +564,3 @@ ),
 			background-image: clay-enable-gradients(none),
-			border-color: $cadmin-secondary-l2,
+			border-color: $cadmin-secondary-l0,
 			color: $cadmin-gray-900,
@@ -572,3 +572,3 @@ ),
 			background-image: clay-enable-gradients($cadmin-white),
-			border-color: $cadmin-secondary-l2,
+			border-color: $cadmin-secondary-l0,
 			color: $cadmin-secondary,
@@ -586,3 +586,3 @@ ),
 		border-color: transparent,
-		color: color-yiq($cadmin-success),
+		color: $cadmin-white,
 		hover: (
@@ -592,3 +592,3 @@ background-color: $cadmin-success-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-success, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -600,3 +600,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-success, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -608,3 +608,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-success, 10%)),
+			color: $cadmin-white,
 		),
@@ -616,3 +616,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-success),
+			color: $cadmin-white,
 		),
@@ -629,3 +629,3 @@ ),
 		border-color: transparent,
-		color: color-yiq($cadmin-info),
+		color: $cadmin-white,
 		hover: (
@@ -635,3 +635,3 @@ background-color: $cadmin-info-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-info, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -643,3 +643,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-info, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -651,3 +651,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-info, 10%)),
+			color: $cadmin-white,
 		),
@@ -659,3 +659,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-info),
+			color: $cadmin-white,
 		),
@@ -672,3 +672,3 @@ ),
 		border-color: transparent,
-		color: color-yiq($cadmin-warning),
+		color: $cadmin-white,
 		hover: (
@@ -678,3 +678,3 @@ background-color: $cadmin-warning-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-warning, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -686,3 +686,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-warning, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -692,6 +692,5 @@
 			background-color: $cadmin-warning-d2,
-			background-image:
-				clay-enable-gradients(clay-darken($cadmin-warning, 10%)),
+			background-image: clay-enable-gradients($cadmin-warning-d2),
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-warning, 10%)),
+			color: $cadmin-white,
 		),
@@ -703,3 +702,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-warning),
+			color: $cadmin-white,
 		),
@@ -716,3 +715,3 @@ ),
 		border-color: transparent,
-		color: color-yiq($cadmin-danger),
+		color: $cadmin-white,
 		hover: (
@@ -722,3 +721,3 @@ background-color: $cadmin-danger-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-danger, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -730,3 +729,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-danger, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -738,3 +737,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-danger, 10%)),
+			color: $cadmin-white,
 		),
@@ -746,3 +745,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-danger),
+			color: $cadmin-white,
 		),
@@ -765,3 +764,3 @@ ),
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-light, 7.5%)),
+			color: $cadmin-gray-900,
 		),
@@ -773,3 +772,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-light, 7.5%)),
+			color: $cadmin-gray-900,
 		),
@@ -781,3 +780,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-light, 10%)),
+			color: $cadmin-gray-900,
 		),
@@ -789,3 +788,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-light),
+			color: $cadmin-gray-900,
 		),
@@ -802,3 +801,3 @@ ),
 		border-color: transparent,
-		color: color-yiq($cadmin-dark),
+		color: $cadmin-white,
 		hover: (
@@ -808,3 +807,3 @@ background-color: $cadmin-dark-d1,
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-dark, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -816,3 +815,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-dark, 7.5%)),
+			color: $cadmin-white,
 		),
@@ -824,3 +823,3 @@
 			border-color: transparent,
-			color: color-yiq(clay-darken($cadmin-dark, 10%)),
+			color: $cadmin-white,
 		),
@@ -832,3 +831,3 @@
 			border-color: transparent,
-			color: color-yiq($cadmin-dark),
+			color: $cadmin-white,
 		),
@@ -845,3 +844,3 @@ ),
 		border-radius: 1px,
-		box-shadow: clay-enable-shadows([none]),
+		box-shadow: clay-enable-shadows(none),
 		color: $cadmin-link-color,
@@ -862,3 +861,3 @@ font-weight: $cadmin-font-weight-normal,
 		active: (
-			box-shadow: clay-enable-shadows([none]),
+			box-shadow: clay-enable-shadows(none),
 		),
@@ -918,3 +917,4 @@
 		'.btn-translucent.btn-primary': (
-			background-color: rgba($cadmin-primary-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -924,3 +924,4 @@ color: $cadmin-primary-d1,
 			hover: (
-				background-color: rgba($cadmin-primary-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-d1} h s l / 0.06)'),
 				color: $cadmin-primary-d1,
@@ -930,3 +931,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-primary-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-d1} h s l / 0.06)'),
 				color: $cadmin-primary-d1,
@@ -936,3 +938,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-primary-d1, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-d1} h s l / 0.08)'),
 				color: $cadmin-primary-d1,
@@ -943,3 +946,4 @@ ),
 		'.btn-translucent.btn-info, .btn-beta': (
-			background-color: rgba($cadmin-info-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-info-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -949,3 +953,4 @@ color: $cadmin-info-d1,
 			hover: (
-				background-color: rgba($cadmin-info-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-d1} h s l / 0.06)'),
 				color: $cadmin-info-d1,
@@ -955,3 +960,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-info-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-d1} h s l / 0.06)'),
 				color: $cadmin-info-d1,
@@ -961,3 +967,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-info-d1, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-d1} h s l / 0.08)'),
 				color: $cadmin-info-d1,
@@ -968,3 +975,4 @@ ),
 		'.btn-translucent.btn-success': (
-			background-color: rgba($cadmin-success-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-success-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -974,3 +982,4 @@ color: $cadmin-success-d1,
 			hover: (
-				background-color: rgba($cadmin-success-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-d1} h s l / 0.06)'),
 				color: $cadmin-success-d1,
@@ -980,3 +989,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-success-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-d1} h s l / 0.06)'),
 				color: $cadmin-success-d1,
@@ -986,3 +996,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-success-d1, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-d1} h s l / 0.08)'),
 				color: $cadmin-success-d1,
@@ -993,3 +1004,4 @@ ),
 		'.btn-translucent.btn-warning': (
-			background-color: rgba($cadmin-warning-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-warning-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -999,3 +1011,4 @@ color: $cadmin-warning-d1,
 			hover: (
-				background-color: rgba($cadmin-warning-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-d1} h s l / 0.06)'),
 				color: $cadmin-warning-d1,
@@ -1005,3 +1018,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-warning-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-d1} h s l / 0.06)'),
 				color: $cadmin-warning-d1,
@@ -1011,3 +1025,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-warning-d1, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-d1} h s l / 0.08)'),
 				color: $cadmin-warning-d1,
@@ -1018,3 +1033,4 @@ ),
 		'.btn-translucent.btn-danger': (
-			background-color: rgba($cadmin-danger-d1, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-danger-d1} h s l / 0.04)'),
 			border-color: transparent,
@@ -1024,3 +1040,4 @@ color: $cadmin-danger-d1,
 			hover: (
-				background-color: rgba($cadmin-danger-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-d1} h s l / 0.06)'),
 				color: $cadmin-danger-d1,
@@ -1030,3 +1047,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-danger-d1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-d1} h s l / 0.06)'),
 				color: $cadmin-danger-d1,
@@ -1036,3 +1054,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-danger-d1, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-d1} h s l / 0.08)'),
 				color: $cadmin-danger-d1,
@@ -1043,3 +1062,4 @@ ),
 		'%clay-dark-btn-translucent-primary': (
-			background-color: rgba($cadmin-primary-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -1049,3 +1069,4 @@ color: $cadmin-primary-l1,
 			hover: (
-				background-color: rgba($cadmin-primary-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l2} h s l / 0.06)'),
 				color: $cadmin-primary-l1,
@@ -1055,3 +1076,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-primary-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l2} h s l / 0.06)'),
 				color: $cadmin-primary-l1,
@@ -1061,3 +1083,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-primary-l2, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l2} h s l / 0.08)'),
 				color: $cadmin-primary-l1,
@@ -1076,3 +1099,4 @@ ),
 		'%clay-dark-btn-translucent-info': (
-			background-color: rgba($cadmin-info-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-info-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -1082,3 +1106,4 @@ color: $cadmin-info-l1,
 			hover: (
-				background-color: rgba($cadmin-info-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-l2} h s l / 0.06)'),
 				color: $cadmin-info-l1,
@@ -1088,3 +1113,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-info-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-l2} h s l / 0.06)'),
 				color: $cadmin-info-l1,
@@ -1094,3 +1120,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-info-l2, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-info-l2} h s l / 0.08)'),
 				color: $cadmin-info-l1,
@@ -1109,3 +1136,4 @@ ),
 		'%clay-dark-btn-translucent-success': (
-			background-color: rgba($cadmin-success-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-success-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -1115,3 +1143,4 @@ color: $cadmin-success-l1,
 			hover: (
-				background-color: rgba($cadmin-success-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-l2} h s l / 0.06)'),
 				color: $cadmin-success-l1,
@@ -1121,3 +1150,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-success-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-l2} h s l / 0.06)'),
 				color: $cadmin-success-l1,
@@ -1127,3 +1157,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-success-l2, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-success-l2} h s l / 0.08)'),
 				color: $cadmin-success-l1,
@@ -1142,3 +1173,4 @@ ),
 		'%clay-dark-btn-translucent-warning': (
-			background-color: rgba($cadmin-warning-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-warning-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -1148,3 +1180,4 @@ color: $cadmin-warning-l1,
 			hover: (
-				background-color: rgba($cadmin-warning-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-l2} h s l / 0.06)'),
 				color: $cadmin-warning-l1,
@@ -1154,3 +1187,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-warning-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-l2} h s l / 0.06)'),
 				color: $cadmin-warning-l1,
@@ -1160,3 +1194,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-warning-l2, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-warning-l2} h s l / 0.08)'),
 				color: $cadmin-warning-l1,
@@ -1175,3 +1210,4 @@ ),
 		'%clay-dark-btn-translucent-danger': (
-			background-color: rgba($cadmin-danger-l2, 0.04),
+			background-color:
+				unquote('hsl(from #{$cadmin-danger-l2} h s l / 0.04)'),
 			border-color: transparent,
@@ -1181,3 +1217,4 @@ color: $cadmin-danger-l1,
 			hover: (
-				background-color: rgba($cadmin-danger-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-l2} h s l / 0.06)'),
 				color: $cadmin-danger-l1,
@@ -1187,3 +1224,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-danger-l2, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-l2} h s l / 0.06)'),
 				color: $cadmin-danger-l1,
@@ -1193,3 +1231,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-danger-l2, 0.08),
+				background-color:
+					unquote('hsl(from #{$cadmin-danger-l2} h s l / 0.08)'),
 				color: $cadmin-danger-l1,
@@ -1219,3 +1258,4 @@ ),
 		hover: (
-			background-color: rgba($cadmin-primary, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 			border-color: $cadmin-primary,
@@ -1226,3 +1266,4 @@ color: $cadmin-primary-d1,
 		focus: (
-			background-color: rgba($cadmin-primary, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 			box-shadow: map-get($cadmin-btn-primary, focus-box-shadow),
@@ -1233,3 +1274,4 @@ color: $cadmin-primary-d1,
 		active: (
-			background-color: rgba($cadmin-primary, 0.12),
+			background-color:
+				unquote('hsl(from #{$cadmin-primary} h s l / 0.12)'),
 			border-color: $cadmin-primary,
@@ -1255,3 +1297,4 @@ color: $cadmin-primary-d1,
 		hover: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 			border-color: transparent,
@@ -1262,3 +1305,4 @@ color: map-get(map-get($cadmin-btn-secondary, hover), color),
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 			border-color: transparent,
@@ -1271,3 +1315,4 @@ box-shadow:
 		active: (
-			background-color: rgba($cadmin-gray-900, 0.12),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.12)'),
 			border-color: transparent,
@@ -1296,3 +1341,3 @@ color: map-get(map-get($cadmin-btn-secondary, active), color),
 			border-color: $cadmin-success,
-			color: color-yiq($cadmin-success),
+			color: $cadmin-white,
 		),
@@ -1310,3 +1355,3 @@
 			border-color: $cadmin-success,
-			color: color-yiq($cadmin-success),
+			color: $cadmin-white,
 		),
@@ -1333,3 +1378,3 @@
 			border-color: $cadmin-info,
-			color: color-yiq($cadmin-info),
+			color: $cadmin-white,
 		),
@@ -1349,3 +1394,3 @@
 			box-shadow: map-get(map-get($cadmin-btn-info, active), box-shadow),
-			color: color-yiq($cadmin-info),
+			color: $cadmin-white,
 		),
@@ -1372,3 +1417,3 @@
 			border-color: $cadmin-warning,
-			color: color-yiq($cadmin-warning),
+			color: $cadmin-white,
 		),
@@ -1389,3 +1434,3 @@
 				map-get(map-get($cadmin-btn-warning, active), box-shadow),
-			color: color-yiq($cadmin-warning),
+			color: $cadmin-white,
 		),
@@ -1412,3 +1457,3 @@
 			border-color: $cadmin-danger,
-			color: color-yiq($cadmin-danger),
+			color: $cadmin-white,
 		),
@@ -1427,3 +1472,3 @@
 			border-color: $cadmin-danger,
-			color: color-yiq($cadmin-danger),
+			color: $cadmin-white,
 		),
@@ -1450,3 +1495,3 @@
 			border-color: $cadmin-light,
-			color: color-yiq($cadmin-light),
+			color: $cadmin-gray-900,
 		),
@@ -1466,11 +1511,3 @@
 			box-shadow: map-get(map-get($cadmin-btn-light, active), box-shadow),
-			color: color-yiq($cadmin-light),
-			focus: (
-				box-shadow:
-					clay-enable-shadows(
-						[ $cadmin-btn-active-box-shadow#{','} 0 0 0 $cadmin-btn-focus-width
-							rgba($cadmin-light, 0.5),
-						0 0 0 $cadmin-btn-focus-width rgba($cadmin-light, 0.5)]
-					),
-			),
+			color: $cadmin-gray-900,
 		),
@@ -1497,3 +1534,3 @@
 			border-color: $cadmin-dark,
-			color: color-yiq($cadmin-dark),
+			color: $cadmin-white,
 		),
@@ -1513,13 +1550,3 @@
 			box-shadow: map-get(map-get($cadmin-btn-dark, active), box-shadow),
-			color: color-yiq($cadmin-dark),
-			focus: (
-				box-shadow:
-					if(
-						$cadmin-enable-shadows and $cadmin-btn-active-box-shadow
-							!= none,
-						$cadmin-btn-active-box-shadow#{','} 0 0 0 $cadmin-btn-focus-width
-							rgba($cadmin-dark, 0.5),
-						0 0 0 $cadmin-btn-focus-width rgba($cadmin-dark, 0.5)
-					),
-			),
+			color: $cadmin-white,
 		),
@@ -1580,3 +1607,4 @@
 			hover: (
-				background-color: rgba($cadmin-primary-l1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l1} h s l / 0.06)'),
 				color: $cadmin-primary-l2,
@@ -1586,3 +1614,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-primary-l1, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l1} h s l / 0.06)'),
 				color: $cadmin-primary-l2,
@@ -1592,3 +1621,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-primary-l1, 0.12),
+				background-color:
+					unquote('hsl(from #{$cadmin-primary-l1} h s l / 0.12)'),
 				color: $cadmin-primary-l2,
@@ -1612,3 +1642,4 @@ ),
 			hover: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
@@ -1618,3 +1649,4 @@ ),
 			focus: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
@@ -1624,3 +1656,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-white, 0.12),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.12)'),
 				color: $cadmin-white,
@@ -1627,0 +1660,0 @@ ),

src/scss/cadmin/variables/_cards.scss

 $cadmin-card-bg: $cadmin-white !default;
-$cadmin-card-border-color: rgba($cadmin-black, 0.125) !default;
+$cadmin-card-border-color: $cadmin-secondary-l2 !default;
+$cadmin-card-border-radius: $cadmin-border-radius-xl !default;
 $cadmin-card-border-style: solid !default;
-$cadmin-card-border-width: 0px !default;
-
-$cadmin-card-border-radius: $cadmin-border-radius !default;
-$cadmin-card-inner-border-radius: calc(
-	#{$cadmin-card-border-radius} - #{$cadmin-card-border-width}
-) !default;
-
-$cadmin-card-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !default;
+$cadmin-card-border-width: $cadmin-border-width !default;
+$cadmin-card-box-shadow: null !default;
 $cadmin-card-color: null !default;
 $cadmin-card-height: null !default;
 $cadmin-card-margin-bottom: 24px !default;
-
 $cadmin-card-spacer-x: 20px !default;
 $cadmin-card-spacer-y: 12px !default;
+$cadmin-card-transition:
+	$cadmin-component-transition,
+	transform 0.15s ease-in-out !default;
 
-$cadmin-card-cap-bg: rgba($cadmin-black, 0.03) !default;
+$cadmin-card-hover-box-shadow: unquote(
+	'0 0.25rem 0.75rem -0.25rem rgb(from #{$cadmin-black} r g b / 0.25)'
+) !default;
+
+$cadmin-card-inner-border-radius: calc(
+	#{$cadmin-card-border-radius} - #{$cadmin-card-border-width}
+) !default;
+
+$cadmin-card-cap-bg: unquote(
+	'hsl(from #{$cadmin-black} h s l / 0.03)'
+) !default;
 $cadmin-card-cap-color: null !default;
@@ -163,3 +170,2 @@
 		border-width: $cadmin-card-border-width,
-		box-shadow: clay-enable-shadows($cadmin-card-box-shadow),
 		display: block,
@@ -169,3 +175,7 @@ height: $cadmin-card-height,
 		min-width: 0px,
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $cadmin-card-border-width,
 		position: relative,
+		transition: $cadmin-card-transition,
 		word-wrap: break-word,
@@ -199,2 +209,6 @@
 		),
+
+		hover: (
+			box-shadow: clay-enable-shadows($cadmin-card-hover-box-shadow),
+		),
 	),
@@ -377,5 +391,95 @@ $card
 
-$cadmin-form-check-card-checked-box-shadow: 0 0 0 2px
-	clay-lighten($cadmin-component-active-bg, 22.94) !default;
+$cadmin-form-check-card-checked-box-shadow: null !default;
 
+$cadmin-form-check-card: () !default;
+$cadmin-form-check-card: map-deep-merge(
+	(
+		margin-bottom: $cadmin-card-margin-bottom,
+		margin-top: 0px,
+		padding-left: 0px,
+		transition: $cadmin-card-transition,
+
+		hover: (
+			card: (
+				border-color: $cadmin-primary-l1,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary-l1,
+			),
+		),
+
+		active: (
+			card: (
+				border-color: $cadmin-primary,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary,
+			),
+		),
+
+		checked: (
+			card: (
+				border-color: $cadmin-primary,
+				box-shadow: $cadmin-form-check-card-checked-box-shadow,
+				outline-color: $cadmin-primary,
+			),
+		),
+
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $cadmin-card-border-color,
+				outline-color: transparent,
+			),
+		),
+
+		card: (
+			margin-bottom: 0px,
+		),
+
+		form-check-input: (
+			margin-left: 0px,
+			margin-top: 0px,
+			opacity: 0,
+			position: absolute,
+			z-index: 1,
+		),
+
+		form-check-label: (
+			color: $cadmin-body-color,
+			display: inline,
+			font-weight: $cadmin-font-weight-normal,
+			padding-left: 0px,
+			position: static,
+		),
+
+		custom-control: (
+			display: inline,
+			margin-right: 0px,
+			position: static,
+
+			label: (
+				font-weight: $cadmin-font-weight-normal,
+				padding-left: 0px,
+			),
+
+			custom-control-label: (
+				position: absolute,
+				z-index: 1,
+			),
+
+			custom-control-input: (
+				z-index: 2,
+
+				checked: (
+					card: (
+						box-shadow: $cadmin-form-check-card-checked-box-shadow,
+					),
+				),
+			),
+		),
+	),
+	$cadmin-form-check-card
+);
+
 // Card Interactive
@@ -423,7 +527,6 @@
 		cursor: $cadmin-link-cursor,
-		outline: 0,
-		transition: $cadmin-component-transition,
+		transition: $cadmin-card-transition,
 
 		hover: (
-			background-color: #f7f8f9,
+			background-color: $cadmin-gray-100,
 			text-decoration: none,
@@ -433,8 +536,12 @@ ),
 		focus: (
-			box-shadow: #{0 0 0 2px #fff,
-			0 0 0 4px #719aff},
+			border-color: $cadmin-primary-l1,
+			box-shadow: none,
+			outline-color: $cadmin-primary-l1,
+			outline-offset: 0,
+			outline-style: solid,
+			outline-width: $cadmin-card-border-width,
 		),
 
 		active: (
-			background-color: #f1f2f5,
+			background-color: $cadmin-gray-200,
 		),
@@ -451,2 +558,6 @@
 
+$cadmin-card-interactive-primary-hover-box-shadow: unquote(
+	'#{$cadmin-card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$cadmin-primary} inset'
+) !default;
+
 $cadmin-card-interactive-primary-after-highlight: () !default;
@@ -473,11 +584,15 @@ $cadmin-card-interactive-primary-after-highlight: map-deep-merge(
 	(
+		hover: (
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
+		),
+
 		focus: (
-			background-color: $cadmin-gray-100,
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
 		),
 
 		active: (
-			background-color: $cadmin-gray-200,
+			box-shadow: $cadmin-card-interactive-primary-hover-box-shadow,
 		),
 
-		after-highlight: $cadmin-card-interactive-primary-after-highlight,
+		after-highlight: null,
 	),
@@ -496,12 +611,6 @@ $cadmin-card-interactive-primary
 			background-color: $cadmin-white,
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
 			color: $cadmin-gray-900,
+			transform: translateY(-0.25rem),
 		),
 
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px #719aff,
-		),
-
 		active: (
@@ -519,2 +628,8 @@ background-color: $cadmin-white,
 	(
+		transition: $cadmin-card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
@@ -572,2 +687,6 @@ border-color: $cadmin-gray-300,
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
@@ -825,2 +944,6 @@ margin-right: -8px,
 		card-body: $cadmin-template-card-body,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
 	),
@@ -827,0 +950,0 @@ $cadmin-template-card

src/scss/cadmin/variables/_clay-color.scss

@@ -99,11 +99,14 @@ // Clay Color Input Group Text (.clay-color > .input-group-item > .input-group-text)
 		hover: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 		),
 
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 		),
 
 		active: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 		),
@@ -269,4 +272,6 @@
 	(
-		background-image: #{linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-		linear-gradient(to right, #fff, rgba(255, 255, 255, 0))},
+		background-image:
+			unquote(
+				'linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0))'
+			),
 	),
@@ -439,4 +444,6 @@ $cadmin-clay-color-map-hsb
 				clay-range-thumb: (
-					box-shadow: #{0 0 0 2px $cadmin-white,
-					0 0 0 4px $cadmin-primary-l1},
+					box-shadow:
+						unquote(
+							'0 0 0 2px #{$cadmin-white}, 0 0 0 4px #{$cadmin-primary-l1}'
+						),
 				),
@@ -481,22 +488,7 @@ ),
 				background-color: $cadmin-white,
-				background-image: #{linear-gradient(
-						45deg,
-						#e7e7ed 25%,
-						transparent 25%
+				background-image:
+					unquote(
+						'linear-gradient(45deg, #e7e7ed 25%, transparent 25%), linear-gradient(-45deg, #e7e7ed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7ed 75%), linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)'
 					),
-				linear-gradient(
-					-45deg,
-					#e7e7ed 25%,
-					transparent 25%,
-				),
-				linear-gradient(
-					45deg,
-					transparent 75%,
-					#e7e7ed 75%,
-				),
-				linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)},
-				background-position: #{0 0,
-				0 4px,
-				4px -4px,
-				-4px 0px},
+				background-position: unquote('0 0, 0 4px, 4px -4px, -4px 0px'),
 				background-size: 8px 8px,
@@ -503,0 +495,0 @@ ),

src/scss/cadmin/variables/_custom-forms.scss

@@ -70,5 +70,4 @@ $cadmin-custom-forms-transition:
 
-$cadmin-custom-control-indicator-disabled-checked-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	32.94
+$cadmin-custom-control-indicator-disabled-checked-bg: unquote(
+	'hsl(from #{$cadmin-component-active-bg} h s calc(l + 32.94))'
 ) !default;
@@ -84,2 +83,11 @@
 
+// .custom-control-input
+
+$cadmin-custom-control-input-size: 24px !default;
+$cadmin-custom-control-input-offset: calc(
+	(
+			#{$cadmin-custom-control-input-size} - #{$cadmin-custom-control-indicator-size}
+		) / -2
+) !default;
+
 // Custom Control
@@ -140,2 +148,3 @@
 		cursor: $cadmin-custom-control-description-cursor,
+		display: inline-block,
 		font-size: $cadmin-custom-control-description-font-size,
@@ -145,4 +154,4 @@ font-weight: $cadmin-custom-control-description-font-weight,
 		margin-bottom: 0px,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
@@ -163,3 +172,3 @@ before: (
 			position: relative,
-			top: 4px,
+			top: $cadmin-custom-control-indicator-position-top,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
@@ -171,11 +180,14 @@ width: $cadmin-custom-control-indicator-size,
 		after: (
-			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
+			background:
+				unquote(
+					'no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size}'
+				),
 			border-radius: $cadmin-rounded-circle-border-radius,
 			content: '',
 			display: block,
-			height: 24px,
-			left: -4px,
+			height: $cadmin-custom-control-input-size,
+			left: $cadmin-custom-control-input-offset,
 			position: absolute,
-			top: $cadmin-custom-control-indicator-position-top,
-			width: 24px,
+			top: $cadmin-custom-control-input-offset,
+			width: $cadmin-custom-control-input-size,
 			z-index: 0,
@@ -220,2 +232,4 @@ ),
 		padding-left: $cadmin-custom-control-description-padding-left,
+		position: relative,
+		top: -4px,
 	),
@@ -268,8 +282,8 @@ $cadmin-custom-control-label-text
 		cursor: $cadmin-form-check-input-cursor,
-		height: 24px,
-		left: -4px,
+		height: $cadmin-custom-control-input-size,
+		left: $cadmin-custom-control-input-offset,
 		opacity: 0,
 		position: absolute,
-		top: $cadmin-custom-control-indicator-position-top,
-		width: 24px,
+		top: $cadmin-custom-control-input-offset,
+		width: $cadmin-custom-control-input-size,
 		z-index: 1,
@@ -380,5 +394,5 @@
 
-$cadmin-custom-checkbox-indicator-icon-checked: clay-icon(
-	check-small,
-	$cadmin-custom-control-indicator-checked-color
+$cadmin-custom-checkbox-indicator-icon-checked: var(
+	--cadmin-custom-checkbox-indicator-icon-checked,
+	clay-icon(check-small, #fff)
 ) !default;
@@ -395,5 +409,5 @@ $cadmin-custom-checkbox-indicator-icon-checked-bg-size: 16px !default;
 
-$cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
-	hr,
-	$cadmin-custom-checkbox-indicator-indeterminate-color
+$cadmin-custom-checkbox-indicator-icon-indeterminate: var(
+	--cadmin-custom-checkbox-indicator-icon-indeterminate,
+	clay-icon(hr, #fff)
 ) !default;
@@ -444,3 +458,6 @@ $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size: 16px !default;
 							background-image:
-								clay-icon(check-small, $cadmin-secondary),
+								var(
+									--cadmin-custom-checkbox-indicator-icon-checked-readonly,
+									clay-icon(check-small, #6b6c7e),
+								),
 						),
@@ -504,3 +521,7 @@ ),
 						after: (
-							background-image: clay-icon(hr, $cadmin-secondary),
+							background-image:
+								var(
+									--cadmin-custom-checkbox-indicator-icon-indeterminate-readonly,
+									clay-icon(hr, #6b6c7e),
+								),
 						),
@@ -531,5 +552,5 @@ ),
 
-$cadmin-custom-radio-indicator-icon-checked: clay-icon(
-	circle,
-	$cadmin-white
+$cadmin-custom-radio-indicator-icon-checked: var(
+	--cadmin-custom-radio-indicator-icon-checked,
+	clay-icon(circle, #fff)
 ) !default;
@@ -536,0 +557,0 @@ $cadmin-custom-radio-indicator-icon-checked-bg-size: 8px !default;

src/scss/cadmin/variables/_dropdowns.scss

@@ -22,3 +22,5 @@ // .dropdown-toggle
 
-$cadmin-dropdown-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3) !default;
+$cadmin-dropdown-box-shadow: unquote(
+	'0 1px 5px -1px hsl(from #{$cadmin-black} h s l / 0.3)'
+) !default;
 $cadmin-dropdown-color: $cadmin-body-color !default;
@@ -89,6 +91,3 @@ $cadmin-dropdown-font-size: 14px !default; // 14px
 
-$cadmin-dropdown-link-hover-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
-) !default;
+$cadmin-dropdown-link-hover-bg: $cadmin-primary-l3 !default;
 $cadmin-dropdown-link-hover-color: $cadmin-gray-900 !default;
@@ -290,3 +289,5 @@
 	(
+		align-items: center,
 		color: $cadmin-dropdown-subheader-color,
+		display: flex,
 		font-size: $cadmin-dropdown-subheader-font-size,
@@ -417,3 +418,4 @@ font-weight: $cadmin-dropdown-subheader-font-weight,
 	(
-		box-shadow: -1px -2px 3px -3px rgba(0, 0, 0, 0.5),
+		box-shadow:
+			unquote('-1px -2px 3px -3px hsl(from #{$cadmin-black} h s l / 0.5)'),
 		padding: 8px $cadmin-dropdown-item-padding-x 0px,
@@ -915,9 +917,6 @@ position: relative,
 			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 #{$cadmin-white} h s l / 1) 84%, hsl(from #{$cadmin-white} h s l / 0) 100%)'
 					),
-				),
 				top: $cadmin-dropdown-padding-y,
@@ -927,9 +926,6 @@ ),
 			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 #{$cadmin-white} h s l / 1) 84%, hsl(from #{$cadmin-white} h s l / 0) 100%)'
 					),
-				),
 				bottom: $cadmin-dropdown-padding-y,
@@ -936,0 +932,0 @@ ),

src/scss/cadmin/variables/_forms.scss

@@ -31,10 +31,6 @@ $cadmin-input-bg: $cadmin-gray-200 !default;
 
-$cadmin-input-focus-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
+$cadmin-input-focus-bg: $cadmin-primary-l3 !default;
+$cadmin-input-focus-border-color: unquote(
+	'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
 ) !default;
-$cadmin-input-focus-border-color: clay-lighten(
-	$cadmin-component-active-bg,
-	22.94
-) !default;
 $cadmin-input-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
@@ -816,5 +812,5 @@ $cadmin-input-focus-color: $cadmin-input-color !default;
 
-$cadmin-input-danger-select-icon: clay-icon(
-	caret-double-l,
-	$cadmin-input-danger-select-icon-color
+$cadmin-input-danger-select-icon: var(
+	--cadmin-input-danger-select-icon,
+	clay-icon(caret-double-l, #f48989)
 ) !default;
@@ -1004,5 +1000,5 @@
 
-$cadmin-input-warning-select-icon: clay-icon(
-	caret-double-l,
-	$cadmin-input-warning-select-icon-color
+$cadmin-input-warning-select-icon: var(
+	--cadmin-input-warning-select-icon,
+	clay-icon(caret-double-l, #ff8f39)
 ) !default;
@@ -1192,5 +1188,5 @@
 
-$cadmin-input-success-select-icon: clay-icon(
-	caret-double-l,
-	$cadmin-input-success-select-icon-color
+$cadmin-input-success-select-icon: var(
+	--cadmin-input-success-select-icon,
+	clay-icon(caret-double-l, #5aca75)
 ) !default;
@@ -1335,5 +1331,5 @@
 
-$cadmin-input-select-icon: clay-icon(
-	caret-double-l,
-	$cadmin-input-select-icon-color
+$cadmin-input-select-icon: var(
+	--cadmin-input-select-icon,
+	clay-icon(caret-double-l, #6b6c7e)
 ) !default;
@@ -1343,5 +1339,5 @@
 
-$cadmin-input-select-icon-focus: clay-icon(
-	caret-double-l,
-	$cadmin-input-select-icon-focus-color
+$cadmin-input-select-icon-focus: var(
+	--cadmin-input-select-icon-focus,
+	clay-icon(caret-double-l, #6b6c7e)
 ) !default;
@@ -1351,5 +1347,5 @@
 
-$cadmin-input-select-icon-disabled: clay-icon(
-	caret-double-l,
-	$cadmin-input-select-icon-disabled-color
+$cadmin-input-select-icon-disabled: var(
+	--cadmin-input-select-icon-disabled,
+	clay-icon(caret-double-l, #a7a9bc)
 ) !default;
@@ -1431,3 +1427,7 @@
 			focus: (
-				background-image: clay-icon(caret-double-l, $cadmin-gray-900),
+				background-image:
+					var(
+						--cadmin-form-control-select-secondary-icon-focus,
+						clay-icon(caret-double-l, #272833)
+					),
 				color: $cadmin-gray-900,
@@ -1444,3 +1444,7 @@ ),
 				background-color: $cadmin-gray-200,
-				background-image: clay-icon(caret-double-l, $cadmin-gray-900),
+				background-image:
+					var(
+						--cadmin-form-control-select-secondary-icon-show,
+						clay-icon(caret-double-l, #272833)
+					),
 				color: $cadmin-gray-900,
@@ -1447,0 +1451,0 @@ ),

src/scss/cadmin/variables/_globals.scss

@@ -53,15 +53,15 @@ // The keyword `clay-unset` allows unsetting a Sass variable value so it doesn't get output in the final CSS file.
 
-$cadmin-white: #fff !default;
+$cadmin-white: var(--cadmin-white) !default;
 
-$cadmin-gray-100: #f7f8f9 !default;
-$cadmin-gray-200: #f1f2f5 !default;
-$cadmin-gray-300: #e7e7ed !default;
-$cadmin-gray-400: #cdced9 !default;
-$cadmin-gray-500: #a7a9bc !default;
-$cadmin-gray-600: #6b6c7e !default;
-$cadmin-gray-700: #495057 !default;
-$cadmin-gray-800: #393a4a !default;
-$cadmin-gray-900: #272833 !default;
+$cadmin-gray-100: var(--cadmin-gray-100) !default;
+$cadmin-gray-200: var(--cadmin-gray-200) !default;
+$cadmin-gray-300: var(--cadmin-gray-300) !default;
+$cadmin-gray-400: var(--cadmin-gray-400) !default;
+$cadmin-gray-500: var(--cadmin-gray-500) !default;
+$cadmin-gray-600: var(--cadmin-gray-600) !default;
+$cadmin-gray-700: var(--cadmin-gray-700) !default;
+$cadmin-gray-800: var(--cadmin-gray-800) !default;
+$cadmin-gray-900: var(--cadmin-gray-900) !default;
 
-$cadmin-black: #000 !default;
+$cadmin-black: var(--cadmin-black) !default;
 
@@ -84,141 +84,121 @@ $cadmin-grays: () !default;
 
-$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #006eff, #0b5fff) !default;
+$cadmin-blue: var(--cadmin-blue) !default;
 
-$cadmin-blue-d1: #006be6 !default;
-$cadmin-blue-d2: #005fcc !default;
-$cadmin-blue-d3: #0053b3 !default;
-$cadmin-blue-d4: #004799 !default;
-$cadmin-blue-l1: #338fff !default;
-$cadmin-blue-l2: #66abff !default;
-$cadmin-blue-l3: #97c5ff !default;
-$cadmin-blue-l4: #cce3ff !default;
-$cadmin-blue-l5: #e5f1ff !default;
+$cadmin-blue-d1: var(--cadmin-blue-d1) !default;
+$cadmin-blue-d2: var(--cadmin-blue-d2) !default;
+$cadmin-blue-d3: var(--cadmin-blue-d3) !default;
+$cadmin-blue-d4: var(--cadmin-blue-d4) !default;
+$cadmin-blue-l1: var(--cadmin-blue-l1) !default;
+$cadmin-blue-l2: var(--cadmin-blue-l2) !default;
+$cadmin-blue-l3: var(--cadmin-blue-l3) !default;
+$cadmin-blue-l4: var(--cadmin-blue-l4) !default;
+$cadmin-blue-l5: var(--cadmin-blue-l5) !default;
 
-$cadmin-indigo: if(
-	$cadmin-enable-lexicon-flat-colors,
-	#4d5fff,
-	#6610f2
-) !default;
+$cadmin-indigo: var(--cadmin-indigo) !default;
 
-$cadmin-indigo-d1: #3347ff !default;
-$cadmin-indigo-d2: #1a30ff !default;
-$cadmin-indigo-d3: #001aff !default;
-$cadmin-indigo-d4: #0017e5 !default;
-$cadmin-indigo-l1: #808cff !default;
-$cadmin-indigo-l2: #99a3ff !default;
-$cadmin-indigo-l3: #b2baff !default;
-$cadmin-indigo-l4: #ccd1ff !default;
-$cadmin-indigo-l5: #e5e8ff !default;
+$cadmin-indigo-d1: var(--cadmin-indigo-d1) !default;
+$cadmin-indigo-d2: var(--cadmin-indigo-d2) !default;
+$cadmin-indigo-d3: var(--cadmin-indigo-d3) !default;
+$cadmin-indigo-d4: var(--cadmin-indigo-d4) !default;
+$cadmin-indigo-l1: var(--cadmin-indigo-l1) !default;
+$cadmin-indigo-l2: var(--cadmin-indigo-l2) !default;
+$cadmin-indigo-l3: var(--cadmin-indigo-l3) !default;
+$cadmin-indigo-l4: var(--cadmin-indigo-l4) !default;
+$cadmin-indigo-l5: var(--cadmin-indigo-l5) !default;
 
-$cadmin-purple: if(
-	$cadmin-enable-lexicon-flat-colors,
-	#aa33ff,
-	#6f42c1
-) !default;
+$cadmin-purple: var(--cadmin-purple) !default;
 
-$cadmin-purple-d1: #9f1aff !default;
-$cadmin-purple-d2: #9500ff !default;
-$cadmin-purple-d3: #8600e6 !default;
-$cadmin-purple-d4: #7700cc !default;
-$cadmin-purple-l1: #bf66ff !default;
-$cadmin-purple-l2: #ca80ff !default;
-$cadmin-purple-l3: #d499ff !default;
-$cadmin-purple-l4: #dfb3ff !default;
-$cadmin-purple-l5: #f2e5ff !default;
+$cadmin-purple-d1: var(--cadmin-purple-d1) !default;
+$cadmin-purple-d2: var(--cadmin-purple-d2) !default;
+$cadmin-purple-d3: var(--cadmin-purple-d3) !default;
+$cadmin-purple-d4: var(--cadmin-purple-d4) !default;
+$cadmin-purple-l1: var(--cadmin-purple-l1) !default;
+$cadmin-purple-l2: var(--cadmin-purple-l2) !default;
+$cadmin-purple-l3: var(--cadmin-purple-l3) !default;
+$cadmin-purple-l4: var(--cadmin-purple-l4) !default;
+$cadmin-purple-l5: var(--cadmin-purple-l5) !default;
 
-$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #e50082, #e83e8c) !default;
+$cadmin-pink: var(--cadmin-pink) !default;
 
-$cadmin-pink-d1: #cc0074 !default;
-$cadmin-pink-d2: #b30065 !default;
-$cadmin-pink-d3: #990057 !default;
-$cadmin-pink-d4: #800048 !default;
-$cadmin-pink-l1: #ff4db2 !default;
-$cadmin-pink-l2: #ff80c8 !default;
-$cadmin-pink-l3: #ff99d3 !default;
-$cadmin-pink-l4: #ffb3de !default;
-$cadmin-pink-l5: #ffe5f4 !default;
+$cadmin-pink-d1: var(--cadmin-pink-d1) !default;
+$cadmin-pink-d2: var(--cadmin-pink-d2) !default;
+$cadmin-pink-d3: var(--cadmin-pink-d3) !default;
+$cadmin-pink-d4: var(--cadmin-pink-d4) !default;
+$cadmin-pink-l1: var(--cadmin-pink-l1) !default;
+$cadmin-pink-l2: var(--cadmin-pink-l2) !default;
+$cadmin-pink-l3: var(--cadmin-pink-l3) !default;
+$cadmin-pink-l4: var(--cadmin-pink-l4) !default;
+$cadmin-pink-l5: var(--cadmin-pink-l5) !default;
 
-$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #e60000, #da1414) !default;
+$cadmin-red: var(--cadmin-red) !default;
 
-$cadmin-red-d1: #cc0000 !default;
-$cadmin-red-d2: #b30000 !default;
-$cadmin-red-d3: #990000 !default;
-$cadmin-red-d4: #800000 !default;
-$cadmin-red-l1: #ff4d4d !default;
-$cadmin-red-l2: #ff6666 !default;
-$cadmin-red-l3: #ff8080 !default;
-$cadmin-red-l4: #ff9999 !default;
-$cadmin-red-l5: #ffe5e5 !default;
+$cadmin-red-d1: var(--cadmin-red-d1) !default;
+$cadmin-red-d2: var(--cadmin-red-d2) !default;
+$cadmin-red-d3: var(--cadmin-red-d3) !default;
+$cadmin-red-d4: var(--cadmin-red-d4) !default;
+$cadmin-red-l1: var(--cadmin-red-l1) !default;
+$cadmin-red-l2: var(--cadmin-red-l2) !default;
+$cadmin-red-l3: var(--cadmin-red-l3) !default;
+$cadmin-red-l4: var(--cadmin-red-l4) !default;
+$cadmin-red-l5: var(--cadmin-red-l5) !default;
 
-$cadmin-orange: if(
-	$cadmin-enable-lexicon-flat-colors,
-	#cc4e00,
-	#b95000
-) !default;
+$cadmin-orange: var(--cadmin-orange) !default;
 
-$cadmin-orange-d1: #b34400 !default;
-$cadmin-orange-d2: #993b00 !default;
-$cadmin-orange-d3: #803100 !default;
-$cadmin-orange-d4: #662700 !default;
-$cadmin-orange-l1: #ff6200 !default;
-$cadmin-orange-l2: #ff8133 !default;
-$cadmin-orange-l3: #ffa166 !default;
-$cadmin-orange-l4: #ffc099 !default;
-$cadmin-orange-l5: #fff0e5 !default;
+$cadmin-orange-d1: var(--cadmin-orange-d1) !default;
+$cadmin-orange-d2: var(--cadmin-orange-d2) !default;
+$cadmin-orange-d3: var(--cadmin-orange-d3) !default;
+$cadmin-orange-d4: var(--cadmin-orange-d4) !default;
+$cadmin-orange-l1: var(--cadmin-orange-l1) !default;
+$cadmin-orange-l2: var(--cadmin-orange-l2) !default;
+$cadmin-orange-l3: var(--cadmin-orange-l3) !default;
+$cadmin-orange-l4: var(--cadmin-orange-l4) !default;
+$cadmin-orange-l5: var(--cadmin-orange-l5) !default;
 
-$cadmin-yellow: if(
-	$cadmin-enable-lexicon-flat-colors,
-	#ffbb00,
-	#ffc107
-) !default;
+$cadmin-yellow: var(--cadmin-yellow) !default;
 
-$cadmin-yellow-d1: #e6a800 !default;
-$cadmin-yellow-d2: #cc9600 !default;
-$cadmin-yellow-d3: #b38900 !default;
-$cadmin-yellow-d4: #997000 !default;
-$cadmin-yellow-l1: #ffc933 !default;
-$cadmin-yellow-l2: #ffd666 !default;
-$cadmin-yellow-l3: #ffe499 !default;
-$cadmin-yellow-l4: #fff1cc !default;
-$cadmin-yellow-l5: #fff8e5 !default;
+$cadmin-yellow-d1: var(--cadmin-yellow-d1) !default;
+$cadmin-yellow-d2: var(--cadmin-yellow-d2) !default;
+$cadmin-yellow-d3: var(--cadmin-yellow-d3) !default;
+$cadmin-yellow-d4: var(--cadmin-yellow-d4) !default;
+$cadmin-yellow-l1: var(--cadmin-yellow-l1) !default;
+$cadmin-yellow-l2: var(--cadmin-yellow-l2) !default;
+$cadmin-yellow-l3: var(--cadmin-yellow-l3) !default;
+$cadmin-yellow-l4: var(--cadmin-yellow-l4) !default;
+$cadmin-yellow-l5: var(--cadmin-yellow-l5) !default;
 
-$cadmin-green: if(
-	$cadmin-enable-lexicon-flat-colors,
-	#458613,
-	#287d3d
-) !default;
+$cadmin-green: var(--cadmin-green) !default;
 
-$cadmin-green-d1: #397010 !default;
-$cadmin-green-d2: #2e590d !default;
-$cadmin-green-d3: #22430a !default;
-$cadmin-green-d4: #162d06 !default;
-$cadmin-green-l1: #53a117 !default;
-$cadmin-green-l2: #67c91d !default;
-$cadmin-green-l3: #81e236 !default;
-$cadmin-green-l4: #9de963 !default;
-$cadmin-green-l5: #f1fce9 !default;
+$cadmin-green-d1: var(--cadmin-green-d1) !default;
+$cadmin-green-d2: var(--cadmin-green-d2) !default;
+$cadmin-green-d3: var(--cadmin-green-d3) !default;
+$cadmin-green-d4: var(--cadmin-green-d4) !default;
+$cadmin-green-l1: var(--cadmin-green-l1) !default;
+$cadmin-green-l2: var(--cadmin-green-l2) !default;
+$cadmin-green-l3: var(--cadmin-green-l3) !default;
+$cadmin-green-l4: var(--cadmin-green-l4) !default;
+$cadmin-green-l5: var(--cadmin-green-l5) !default;
 
-$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #1b7e6e, #20c997) !default;
+$cadmin-teal: var(--cadmin-teal) !default;
 
-$cadmin-teal-d1: #16695b !default;
-$cadmin-teal-d2: #125449 !default;
-$cadmin-teal-d3: #0d3f37 !default;
-$cadmin-teal-d4: #092a25 !default;
-$cadmin-teal-l1: #24a892 !default;
-$cadmin-teal-l2: #42d7be !default;
-$cadmin-teal-l3: #6ce0cc !default;
-$cadmin-teal-l4: #96e9db !default;
-$cadmin-teal-l5: #eafbf8 !default;
+$cadmin-teal-d1: var(--cadmin-teal-d1) !default;
+$cadmin-teal-d2: var(--cadmin-teal-d2) !default;
+$cadmin-teal-d3: var(--cadmin-teal-d3) !default;
+$cadmin-teal-d4: var(--cadmin-teal-d4) !default;
+$cadmin-teal-l1: var(--cadmin-teal-l1) !default;
+$cadmin-teal-l2: var(--cadmin-teal-l2) !default;
+$cadmin-teal-l3: var(--cadmin-teal-l3) !default;
+$cadmin-teal-l4: var(--cadmin-teal-l4) !default;
+$cadmin-teal-l5: var(--cadmin-teal-l5) !default;
 
-$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #0077b3, #17a2b8) !default;
+$cadmin-cyan: var(--cadmin-cyan) !default;
 
-$cadmin-cyan-d1: #006699 !default;
-$cadmin-cyan-d2: #005580 !default;
-$cadmin-cyan-d3: #004466 !default;
-$cadmin-cyan-d4: #00334d !default;
-$cadmin-cyan-l1: #0099e6 !default;
-$cadmin-cyan-l2: #33bbff !default;
-$cadmin-cyan-l3: #66ccff !default;
-$cadmin-cyan-l4: #99ddff !default;
-$cadmin-cyan-l5: #e5f6ff !default;
+$cadmin-cyan-d1: var(--cadmin-cyan-d1) !default;
+$cadmin-cyan-d2: var(--cadmin-cyan-d2) !default;
+$cadmin-cyan-d3: var(--cadmin-cyan-d3) !default;
+$cadmin-cyan-d4: var(--cadmin-cyan-d4) !default;
+$cadmin-cyan-l1: var(--cadmin-cyan-l1) !default;
+$cadmin-cyan-l2: var(--cadmin-cyan-l2) !default;
+$cadmin-cyan-l3: var(--cadmin-cyan-l3) !default;
+$cadmin-cyan-l4: var(--cadmin-cyan-l4) !default;
+$cadmin-cyan-l5: var(--cadmin-cyan-l5) !default;
 
@@ -257,106 +237,61 @@ $cadmin-colors: () !default;
 
-$cadmin-primary: #0b5fff !default;
+$cadmin-primary: var(--cadmin-primary) !default;
 
-$cadmin-primary-d1: clay-darken($cadmin-primary, 5.1) !default;
-$cadmin-primary-d2: clay-darken($cadmin-primary, 10) !default;
-$cadmin-primary-l0: clay-lighten($cadmin-primary, 14.9) !default;
-$cadmin-primary-l1: clay-lighten($cadmin-primary, 22.94) !default;
-$cadmin-primary-l2: clay-lighten($cadmin-primary, 32.94) !default;
-$cadmin-primary-l3: clay-lighten($cadmin-primary, 44.9) !default;
+$cadmin-primary-d1: var(--cadmin-primary-d1) !default;
+$cadmin-primary-d2: var(--cadmin-primary-d2) !default;
+$cadmin-primary-l0: var(--cadmin-primary-l0) !default;
+$cadmin-primary-l1: var(--cadmin-primary-l1) !default;
+$cadmin-primary-l2: var(--cadmin-primary-l2) !default;
+$cadmin-primary-l3: var(--cadmin-primary-l3) !default;
 
-$cadmin-secondary: #6b6c7e !default;
+$cadmin-secondary: var(--cadmin-secondary) !default;
 
-$cadmin-secondary-d1: clay-darken(
-	clay-saturate($cadmin-secondary, 4.82),
-	20
-) !default;
-$cadmin-secondary-d2: clay-darken(
-	clay-saturate($cadmin-secondary, 5.36),
-	23.92
-) !default;
-$cadmin-secondary-l0: clay-lighten(
-	clay-saturate(clay-adjust-hue($cadmin-secondary, 32), 1.25),
-	15.29
-);
-$cadmin-secondary-l1: clay-lighten(
-	clay-saturate(clay-adjust-hue($cadmin-secondary, -3), 5.39),
-	23.92
-) !default;
-$cadmin-secondary-l2: clay-lighten(
-	clay-saturate(clay-adjust-hue($cadmin-secondary, -2), 5.48),
-	37.06
-) !default;
-$cadmin-secondary-l3: clay-lighten(
-	clay-saturate(clay-adjust-hue($cadmin-secondary, 3), 6.13),
-	46.08
-) !default;
+$cadmin-secondary-d1: var(--cadmin-secondary-d1) !default;
+$cadmin-secondary-d2: var(--cadmin-secondary-d2) !default;
+$cadmin-secondary-l0: var(--cadmin-secondary-l0) !default;
+$cadmin-secondary-l1: var(--cadmin-secondary-l1) !default;
+$cadmin-secondary-l2: var(--cadmin-secondary-l2) !default;
+$cadmin-secondary-l3: var(--cadmin-secondary-l3) !default;
 
-$cadmin-info: #2e5aac !default;
+$cadmin-info: var(--cadmin-info) !default;
 
-$cadmin-info-d1: clay-darken($cadmin-info, 5) !default;
-$cadmin-info-d2: clay-darken($cadmin-info, 10) !default;
-$cadmin-info-l1: clay-lighten(
-	clay-saturate($cadmin-info, 0.59),
-	28.04
-) !default;
-$cadmin-info-l2: clay-lighten(
-	clay-desaturate($cadmin-info, 3.25),
-	52.94
-) !default;
+$cadmin-info-d1: var(--cadmin-info-d1) !default;
+$cadmin-info-d2: var(--cadmin-info-d2) !default;
+$cadmin-info-l1: var(--cadmin-info-l1) !default;
+$cadmin-info-l2: var(--cadmin-info-l2) !default;
 
-$cadmin-success: #287d3c !default;
+$cadmin-success: var(--cadmin-success) !default;
 
-$cadmin-success-d1: clay-darken($cadmin-success, 5) !default;
-$cadmin-success-d2: clay-darken($cadmin-success, 10) !default;
-$cadmin-success-l1: clay-lighten(
-	clay-desaturate($cadmin-success, 0.14),
-	24.95
-) !default;
-$cadmin-success-l2: clay-lighten(
-	clay-desaturate($cadmin-success, 1.52),
-	62.94
-) !default;
+$cadmin-success-d1: var(--cadmin-success-d1) !default;
+$cadmin-success-d2: var(--cadmin-success-d2) !default;
+$cadmin-success-l1: var(--cadmin-success-l1) !default;
+$cadmin-success-l2: var(--cadmin-success-l2) !default;
 
-$cadmin-warning: #b95000 !default;
+$cadmin-warning: var(--cadmin-warning) !default;
 
-$cadmin-warning-d1: clay-darken($cadmin-warning, 5.1) !default;
-$cadmin-warning-d2: clay-darken($cadmin-warning, 10) !default;
-$cadmin-warning-l1: clay-lighten($cadmin-warning, 24.9) !default;
-$cadmin-warning-l2: clay-lighten($cadmin-warning, 60) !default;
+$cadmin-warning-d1: var(--cadmin-warning-d1) !default;
+$cadmin-warning-d2: var(--cadmin-warning-d2) !default;
+$cadmin-warning-l1: var(--cadmin-warning-l1) !default;
+$cadmin-warning-l2: var(--cadmin-warning-l2) !default;
 
-$cadmin-danger: #da1414 !default;
+$cadmin-danger: var(--cadmin-danger) !default;
 
-$cadmin-danger-d1: clay-darken($cadmin-danger, 5) !default;
-$cadmin-danger-d2: clay-darken($cadmin-danger, 10) !default;
-$cadmin-danger-l1: clay-lighten(
-	clay-desaturate($cadmin-danger, 0.25),
-	28.04
-) !default;
-$cadmin-danger-l2: clay-lighten(
-	clay-saturate($cadmin-danger, 5.04),
-	50
-) !default;
+$cadmin-danger-d1: var(--cadmin-danger-d1) !default;
+$cadmin-danger-d2: var(--cadmin-danger-d2) !default;
+$cadmin-danger-l1: var(--cadmin-danger-l1) !default;
+$cadmin-danger-l2: var(--cadmin-danger-l2) !default;
 
-$cadmin-light: #f1f2f5 !default;
+$cadmin-light: var(--cadmin-light) !default;
 
-$cadmin-light-d1: clay-darken($cadmin-light, 5.1) !default;
-$cadmin-light-d2: clay-darken($cadmin-light, 10) !default;
-$cadmin-light-l1: clay-lighten(
-	clay-desaturate(clay-adjust-hue($cadmin-light, -15), 2.38),
-	1.96
-) !default;
-$cadmin-light-l2: clay-lighten(
-	clay-desaturate(clay-adjust-hue($cadmin-light, -225), 16.67),
-	4.71
-) !default;
+$cadmin-light-d1: var(--cadmin-light-d1) !default;
+$cadmin-light-d2: var(--cadmin-light-d2) !default;
+$cadmin-light-l1: var(--cadmin-light-l1) !default;
+$cadmin-light-l2: var(--cadmin-light-l2) !default;
 
-$cadmin-dark: #272833 !default;
+$cadmin-dark: var(--cadmin-dark) !default;
 
-$cadmin-dark-d1: clay-darken($cadmin-dark, 5.1) !default;
-$cadmin-dark-d2: clay-darken($cadmin-dark, 10) !default;
-$cadmin-dark-l1: clay-lighten(clay-saturate($cadmin-dark, 0.18), 4.12) !default;
-$cadmin-dark-l2: clay-lighten(
-	clay-desaturate($cadmin-dark, 0.36),
-	8.04
-) !default;
+$cadmin-dark-d1: var(--cadmin-dark-d1) !default;
+$cadmin-dark-d2: var(--cadmin-dark-d2) !default;
+$cadmin-dark-l1: var(--cadmin-dark-l1) !default;
+$cadmin-dark-l2: var(--cadmin-dark-l2) !default;
 
@@ -446,2 +381,3 @@ $cadmin-theme-colors: () !default;
 $cadmin-border-radius-sm: 3px !default; // 3px
+$cadmin-border-radius-xl: 16px !default; // 16px
 
@@ -453,5 +389,11 @@ $cadmin-rounded-0-border-radius: 0px !default;
 
-$cadmin-box-shadow: 0 8px 16px rgba($cadmin-black, 0.15) !default;
-$cadmin-box-shadow-sm: 0 2px 4px rgba($cadmin-black, 0.075) !default;
-$cadmin-box-shadow-lg: 0 16px 48px rgba($cadmin-black, 0.175) !default;
+$cadmin-box-shadow: unquote(
+	'0 8px 16px hsl(from #{$cadmin-black} h s l / 0.15)'
+) !default;
+$cadmin-box-shadow-sm: unquote(
+	'0 2px 4px hsl(from #{$cadmin-black} h s l / 0.075)'
+) !default;
+$cadmin-box-shadow-lg: unquote(
+	'0 16px 48px hsl(from #{$cadmin-black} h s l / 0.175)'
+) !default;
 
@@ -479,8 +421,8 @@ $cadmin-caret-width: 0.3em !default;
 
-$cadmin-component-focus-box-shadow:
-	#{0 0 0 2px $cadmin-white,
-	0 0 0 4px $cadmin-primary-l0} !default;
-$cadmin-component-focus-inset-box-shadow:
-	#{inset 0 0 0 2px $cadmin-primary-l0,
-	inset 0 0 0 4px $cadmin-white} !default;
+$cadmin-component-focus-box-shadow: unquote(
+	'0 0 0 2px #{$cadmin-white}, 0 0 0 4px #{$cadmin-primary-l0}'
+) !default;
+$cadmin-component-focus-inset-box-shadow: unquote(
+	'inset 0 0 0 2px #{$cadmin-primary-l0}, inset 0 0 0 4px #{$cadmin-white}'
+) !default;
 
@@ -1003,7 +945,9 @@ $cadmin-component-active-bg: $cadmin-primary !default;
 
-$cadmin-hr-border-color: rgba($cadmin-black, 0.1) !default;
+$cadmin-hr-border-color: unquote(
+	'hsl(from #{$cadmin-black} h s l / 0.1)'
+) !default;
 $cadmin-hr-border-width: $cadmin-border-width !default;
 $cadmin-hr-margin-y: $cadmin-spacer !default;
 
-$cadmin-mark-bg: #ffe399 !default;
+$cadmin-mark-bg: var(--cadmin-yellow-l3) !default;
 $cadmin-mark-color: null !default;
@@ -1041,3 +985,5 @@ $cadmin-mark-padding: null !default;
 $cadmin-kbd-bg: $cadmin-gray-900 !default;
-$cadmin-kbd-box-shadow: inset 0 -1.6px 0 rgba($cadmin-black, 0.25) !default;
+$cadmin-kbd-box-shadow: unquote(
+	'inset 0 -1.6px 0 hsl(from #{$cadmin-black} h s l / 0.25)'
+) !default;
 $cadmin-kbd-color: $cadmin-white !default;
@@ -1067,3 +1013,5 @@ $cadmin-kbd-font-size: $cadmin-code-font-size !default;
 
-$cadmin-input-btn-focus-color: rgba($cadmin-component-active-bg, 0.25) !default;
+$cadmin-input-btn-focus-color: unquote(
+	'hsl(from #{$cadmin-component-active-bg} h s l / 0.25)'
+) !default;
 
@@ -1070,0 +1018,0 @@ $cadmin-input-btn-focus-box-shadow: 0 0 0 $cadmin-input-btn-focus-width

src/scss/cadmin/variables/_images.scss

@@ -5,3 +5,5 @@ $cadmin-thumbnail-bg: $cadmin-body-bg !default;
 $cadmin-thumbnail-border-width: $cadmin-border-width !default;
-$cadmin-thumbnail-box-shadow: 0 1px 2px rgba($cadmin-black, 0.075) !default;
+$cadmin-thumbnail-box-shadow: unquote(
+	'0 1px 2px hsl(from #{$cadmin-black} h s l / 0.075)'
+) !default;
 $cadmin-thumbnail-padding: 4px !default;
@@ -8,0 +10,0 @@

src/scss/cadmin/variables/_labels.scss

 // .label
 
 $cadmin-label-border-color: $cadmin-gray-900 !default;
-$cadmin-label-border-radius: 2px !default; // 2px
+$cadmin-label-border-radius: $cadmin-border-radius !default; // 4px
 $cadmin-label-border-style: solid !default;
 $cadmin-label-border-width: 1px !default;
 $cadmin-label-color: null !default;
-$cadmin-label-font-size: 10px !default; // 10px
+$cadmin-label-font-size: 12px !default; // 12px
 $cadmin-label-font-weight: $cadmin-font-weight-semi-bold !default;
@@ -16,3 +16,3 @@ $cadmin-label-height: null !default;
 $cadmin-label-spacer-y: 2px !default; // 2px
-$cadmin-label-text-transform: uppercase !default;
+$cadmin-label-text-transform: none !default;
 
@@ -254,3 +254,3 @@ // .label .sticker
 	(
-		font-size: 12px,
+		font-size: 14px,
 		height: auto,
@@ -373,3 +373,3 @@ min-height: 24px,
 
-$cadmin-label-secondary-color: $cadmin-secondary !default;
+$cadmin-label-secondary-color: $cadmin-dark-l2 !default;
 
@@ -452,3 +452,3 @@ // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead
 
-$cadmin-label-success-color: $cadmin-success !default;
+$cadmin-label-success-color: $cadmin-success-d1 !default;
 
@@ -531,3 +531,3 @@ // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead
 
-$cadmin-label-info-color: $cadmin-info !default;
+$cadmin-label-info-color: $cadmin-info-d1 !default;
 
@@ -610,3 +610,3 @@ // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead
 
-$cadmin-label-warning-color: $cadmin-warning !default;
+$cadmin-label-warning-color: $cadmin-warning-d1 !default;
 
@@ -689,3 +689,3 @@ // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead
 
-$cadmin-label-danger-color: $cadmin-danger !default;
+$cadmin-label-danger-color: $cadmin-danger-d1 !default;
 
@@ -928,3 +928,3 @@ // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead
 		background-color: $cadmin-primary,
-		border-color: $cadmin-primary,
+		border-color: transparent,
 		color: $cadmin-white,
@@ -944,9 +944,9 @@
 	(
-		background-color: $cadmin-secondary,
-		border-color: $cadmin-secondary,
-		color: $cadmin-white,
+		background-color: $cadmin-secondary-l3,
+		border-color: transparent,
+		color: $cadmin-dark-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-dark-d2,
 			),
@@ -961,9 +961,9 @@ ),
 	(
-		background-color: $cadmin-success,
-		border-color: $cadmin-success,
-		color: $cadmin-white,
+		background-color: $cadmin-success-l2,
+		border-color: transparent,
+		color: $cadmin-success-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-success-d2,
 			),
@@ -978,9 +978,9 @@ ),
 	(
-		background-color: $cadmin-info,
-		border-color: $cadmin-info,
-		color: $cadmin-white,
+		background-color: $cadmin-info-l2,
+		border-color: transparent,
+		color: $cadmin-info-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-info-d2,
 			),
@@ -995,9 +995,9 @@ ),
 	(
-		background-color: $cadmin-warning,
-		border-color: $cadmin-warning,
-		color: $cadmin-white,
+		background-color: $cadmin-warning-l2,
+		border-color: transparent,
+		color: $cadmin-warning-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-warning-d2,
 			),
@@ -1012,9 +1012,9 @@ ),
 	(
-		background-color: $cadmin-danger,
-		border-color: $cadmin-danger,
-		color: $cadmin-white,
+		background-color: $cadmin-danger-l2,
+		border-color: transparent,
+		color: $cadmin-danger-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-danger-d2,
 			),
@@ -1030,3 +1030,3 @@ ),
 		background-color: $cadmin-light,
-		border-color: $cadmin-light,
+		border-color: transparent,
 		color: $cadmin-dark,
@@ -1047,3 +1047,3 @@
 		background-color: $cadmin-dark,
-		border-color: $cadmin-dark,
+		border-color: transparent,
 		color: $cadmin-white,
@@ -1060,2 +1060,146 @@
 
+$cadmin-label-inverse-content-0: () !default;
+$cadmin-label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $cadmin-secondary-l3,
+		border-color: transparent,
+		color: $cadmin-dark-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-dark-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-0
+);
+
+$cadmin-label-inverse-content-1: () !default;
+$cadmin-label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $cadmin-purple-l5,
+		border-color: transparent,
+		color: $cadmin-purple-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-purple-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-1
+);
+
+$cadmin-label-inverse-content-2: () !default;
+$cadmin-label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $cadmin-yellow-l5,
+		border-color: transparent,
+		color: $cadmin-yellow-d4,
+
+		href: (
+			hover: (
+				color: $cadmin-yellow-d4,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-2
+);
+
+$cadmin-label-inverse-content-3: () !default;
+$cadmin-label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $cadmin-green-l5,
+		border-color: transparent,
+		color: $cadmin-green-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-green-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-3
+);
+
+$cadmin-label-inverse-content-4: () !default;
+$cadmin-label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $cadmin-red-l5,
+		border-color: transparent,
+		color: $cadmin-red-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-red-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-4
+);
+
+$cadmin-label-inverse-content-5: () !default;
+$cadmin-label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $cadmin-teal-l5,
+		border-color: transparent,
+		color: $cadmin-teal-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-teal-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-5
+);
+
+$cadmin-label-inverse-content-6: () !default;
+$cadmin-label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cadmin-cyan-l5,
+		border-color: transparent,
+		color: $cadmin-cyan-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-cyan-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-6
+);
+
+$cadmin-label-inverse-content-7: () !default;
+$cadmin-label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $cadmin-orange-l5,
+		border-color: transparent,
+		color: $cadmin-orange-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-orange-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-7
+);
+
+$cadmin-label-inverse-content-8: () !default;
+$cadmin-label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $cadmin-pink-l5,
+		border-color: transparent,
+		color: $cadmin-pink-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-pink-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-8
+);
+
 $cadmin-label-palette: () !default;
@@ -1095,4 +1239,22 @@ $cadmin-label-palette: map-deep-merge(
 		inverse-dark: $cadmin-label-inverse-dark,
+
+		inverse-content-0: $cadmin-label-inverse-content-0,
+
+		inverse-content-1: $cadmin-label-inverse-content-1,
+
+		inverse-content-2: $cadmin-label-inverse-content-2,
+
+		inverse-content-3: $cadmin-label-inverse-content-3,
+
+		inverse-content-4: $cadmin-label-inverse-content-4,
+
+		inverse-content-5: $cadmin-label-inverse-content-5,
+
+		inverse-content-6: $cadmin-label-inverse-content-6,
+
+		inverse-content-7: $cadmin-label-inverse-content-7,
+
+		inverse-content-8: $cadmin-label-inverse-content-8,
 	),
 	$cadmin-label-palette
 );

src/scss/cadmin/variables/_links.scss

@@ -49,7 +49,7 @@ $cadmin-c-link: () !default;
 		hover: (
-			color: clay-darken($cadmin-gray-600, 15%),
+			color: $cadmin-gray-900,
 		),
 
 		focus: (
-			color: clay-darken($cadmin-gray-600, 15%),
+			color: $cadmin-gray-900,
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -70,7 +70,7 @@ outline: 0,
 		hover: (
-			color: clay-darken($cadmin-primary, 15%),
+			color: $cadmin-primary-d1,
 		),
 
 		focus: (
-			color: clay-darken($cadmin-primary, 15%),
+			color: $cadmin-primary-d1,
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -202,3 +202,5 @@ outline: 0,
 			background-color:
-				clay-lighten(clay-desaturate($cadmin-primary, 42.05), 41.76),
+				unquote(
+					'hsl(from #{$cadmin-primary} h calc(s - 42.05%) calc(l + 41.76%))'
+				),
 			color: $cadmin-primary,
@@ -224,3 +226,4 @@ ),
 		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,
@@ -230,3 +233,4 @@ ),
 		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,
@@ -236,3 +240,4 @@ ),
 		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,
@@ -304,7 +309,7 @@ ),
 		hover: (
-			color: clay-darken($cadmin-gray-900, 15%),
+			color: unquote('hsl(from #{$cadmin-gray-900} h s calc(l - 15))'),
 		),
 
 		focus: (
-			color: clay-darken($cadmin-gray-900, 15%),
+			color: unquote('hsl(from #{$cadmin-gray-900} h s calc(l - 15))'),
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -385,3 +390,4 @@ outline: 0,
 		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,
@@ -391,3 +397,4 @@ ),
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -399,3 +406,4 @@ 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,
@@ -402,0 +410,0 @@ ),

src/scss/cadmin/variables/_list-group.scss

@@ -17,6 +17,3 @@ $cadmin-list-group-bg: $cadmin-white !default;
 
-$cadmin-list-group-hover-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
-) !default;
+$cadmin-list-group-hover-bg: $cadmin-primary-l3 !default;
 
@@ -284,3 +281,6 @@ $cadmin-list-group-action-hover-color: $cadmin-list-group-action-color !default;
 	(
-		border-left-color: clay-lighten($cadmin-component-active-bg, 22.94),
+		border-left-color:
+			unquote(
+				'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
+			),
 		border-left-width: 8px,
@@ -291,3 +291,5 @@ border-bottom-left-radius: 0px,
 		active-border-left-color:
-			clay-lighten($cadmin-component-active-bg, 22.94),
+			unquote(
+				'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
+			),
 	),
@@ -294,0 +296,0 @@ $cadmin-list-group-notification-item-primary

src/scss/cadmin/variables/_loaders.scss

@@ -48,4 +48,3 @@ // Loading Animation
 
-			-webkit-mask: #{conic-gradient(transparent 10%, #000),
-			linear-gradient(#000 0 0) content-box},
+			-webkit-mask: unquote('conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box'),
 			-webkit-mask-composite: source-out,
@@ -149,4 +148,3 @@
 
-				-webkit-mask: #{conic-gradient(transparent 10%, #000),
-				linear-gradient(#000 0 0) content-box},
+				-webkit-mask: unquote('conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box'),
 				-webkit-mask-composite: source-out,
@@ -153,0 +151,0 @@

src/scss/cadmin/variables/_management-bar.scss

@@ -620,3 +620,4 @@ $cadmin-management-bar-base: () !default;
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
@@ -626,7 +627,9 @@
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba($cadmin-gray-900, 0.06),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 					color: $cadmin-navbar-light-active-color,
@@ -664,3 +667,4 @@ ),
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
@@ -670,7 +674,9 @@
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba($cadmin-gray-900, 0.06),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 					color: $cadmin-navbar-light-active-color,
@@ -677,0 +683,0 @@ ),

src/scss/cadmin/variables/_menubar.scss

@@ -12,7 +12,6 @@ $cadmin-menubar-primary: () !default;
 			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: (
@@ -224,7 +223,6 @@ bottom: 0px,
 			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: (
@@ -242,3 +240,4 @@ border-radius: $cadmin-border-radius 0px 0px
 			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,
@@ -274,3 +273,4 @@ font-weight: $cadmin-font-weight-semi-bold,
 			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,
@@ -289,3 +289,3 @@ font-weight: $cadmin-font-weight-semi-bold,
 				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,
@@ -333,3 +333,6 @@ letter-spacing: 0.32px,
 					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,
@@ -348,3 +351,4 @@ color: $cadmin-gray-900,
 					active-class: (
-						background-color: rgba($cadmin-primary, 0.06),
+						background-color:
+							unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 						box-shadow: none,
@@ -372,3 +376,7 @@ color: $cadmin-gray-900,
 					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)'
+							)
+						),
 				),
@@ -534,7 +542,6 @@
 			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: (
@@ -552,3 +559,4 @@ border-radius: $cadmin-border-radius 0px 0px
 			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,
@@ -582,3 +590,4 @@ font-weight: $cadmin-font-weight-semi-bold,
 			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,
@@ -597,3 +606,3 @@ font-weight: $cadmin-font-weight-semi-bold,
 				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,
@@ -641,3 +650,6 @@ letter-spacing: 0.32px,
 					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,
@@ -654,3 +666,4 @@ ),
 					active-class: (
-						background-color: rgba($cadmin-primary, 0.06),
+						background-color:
+							unquote('hsl(from #{$cadmin-primary} h s l / 0.06)'),
 						box-shadow: none,
@@ -678,3 +691,7 @@ color: $cadmin-gray-900,
 					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)'
+							)
+						),
 				),
@@ -681,0 +698,0 @@

src/scss/cadmin/variables/_modals.scss

@@ -1,3 +0,5 @@
-$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;
 
@@ -48,5 +50,9 @@ $cadmin-modal-backdrop: () !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;
 
@@ -53,0 +59,0 @@ $cadmin-modal-content: () !default;

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

@@ -127,3 +127,3 @@ $cadmin-multi-step-nav-margin-bottom: 15px !default;
 			background-color: $cadmin-danger,
-			background-image: clay-icon(times, $cadmin-white),
+			background-image: var(--cadmin-multi-step-item-error-icon, #fff),
 			color: $cadmin-white,
@@ -149,5 +149,5 @@ text-indent: -100px,
 $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;
@@ -159,5 +159,5 @@ $cadmin-multi-step-icon-complete-bg-position: center !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;
@@ -164,0 +164,0 @@ $cadmin-multi-step-dropdown-indicator-complete-width: 14px !default;

src/scss/cadmin/variables/_navbar.scss

@@ -59,5 +59,4 @@ $cadmin-enable-scaling-navbar: $cadmin-enable-scaling-components !default;
 
-$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;
@@ -129,3 +128,5 @@
 
-$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;
@@ -147,3 +148,5 @@
 
-$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;

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

@@ -420,5 +420,5 @@ $cadmin-navigation-bar-size: () !default;
 		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)'),
 			),
@@ -425,0 +425,0 @@ ),

src/scss/cadmin/variables/_pagination.scss

@@ -10,3 +10,5 @@ $cadmin-pagination-bg: transparent !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;
@@ -18,3 +20,5 @@ $cadmin-pagination-hover-color: $cadmin-gray-900 !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;
@@ -21,0 +25,0 @@ $cadmin-pagination-active-color: $cadmin-gray-900 !default;

src/scss/cadmin/variables/_popovers.scss

@@ -10,3 +10,5 @@ $cadmin-popover-bg: $cadmin-white !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;
@@ -139,3 +141,3 @@ $cadmin-popover-max-width: 232px !default; // 232px
 		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,
@@ -142,0 +144,0 @@ border-top-left-radius:

src/scss/cadmin/variables/_range.scss

@@ -66,3 +66,4 @@ $cadmin-clay-range-disabled-color: $cadmin-gray-500 !default;
 			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,
@@ -69,0 +70,0 @@ width: 24px,

src/scss/cadmin/variables/_resizer.scss

@@ -25,9 +25,20 @@ $cadmin-c-horizontal-resizer: () !default;
 			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,
 			),
@@ -34,0 +45,0 @@ ),

src/scss/cadmin/variables/_sidebar.scss

@@ -94,3 +94,4 @@ $cadmin-sidebar-padding-bottom: 16px !default;
 			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,
@@ -100,3 +101,4 @@ ),
 			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,
@@ -106,3 +108,4 @@ ),
 			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,
@@ -274,3 +277,4 @@ ),
 		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,
@@ -289,3 +293,4 @@
 		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)'),
 		),
@@ -404,3 +409,6 @@
 		'.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)'
+				),
 		),
@@ -407,0 +415,0 @@ ),

src/scss/cadmin/variables/_stickers.scss

@@ -343,3 +343,3 @@ // .sticker
 
-$cadmin-sticker-light-bg: color-yiq($cadmin-white) !default;
+$cadmin-sticker-light-bg: $cadmin-gray-900 !default;
 $cadmin-sticker-light-border-color: null !default;
@@ -346,0 +346,0 @@ $cadmin-sticker-light-color: $cadmin-light !default;

src/scss/cadmin/variables/_tables.scss

@@ -29,3 +29,3 @@ // <table> element
 $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;
@@ -36,6 +36,3 @@ $cadmin-table-color: $cadmin-body-color !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;
@@ -252,3 +249,3 @@
 		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,
@@ -259,3 +256,3 @@ 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,
@@ -267,3 +264,3 @@ box-shadow: $cadmin-component-focus-box-shadow,
 		active: (
-			background-color: rgba(0, 0, 0, 0.04),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.04)'),
 		),
@@ -641,12 +638,15 @@
 $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;
 
@@ -700,3 +700,3 @@ // .table-head-bordered
 $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;
@@ -892,3 +892,3 @@ $cadmin-table-list-border-y-width: 1px !default;
 		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,
@@ -899,3 +899,3 @@ 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,
@@ -907,3 +907,3 @@ color: $cadmin-gray-900,
 		active: (
-			background-color: rgba(0, 0, 0, 0.04),
+			background-color: unquote('hsl(from #{$cadmin-black} h s l / 0.04)'),
 		),
@@ -1158,3 +1158,6 @@
 			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,
@@ -1188,3 +1191,3 @@ background-repeat: repeat-y,
 	(
-		background-color: rgba($cadmin-primary-l3, 0.9),
+		background-color: unquote('hsl(from #{$cadmin-primary-l3} h s l / 0.9)'),
 		cursor: move,
@@ -1191,0 +1194,0 @@ position: absolute,

src/scss/cadmin/variables/_tbar.scss

@@ -162,4 +162,6 @@ $cadmin-tbar-item-padding-x: 8px !default;
 		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,
@@ -205,4 +207,6 @@
 		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,
@@ -212,3 +216,4 @@
 			before: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
@@ -219,3 +224,4 @@ ),
 			after: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
@@ -238,3 +244,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
@@ -264,5 +271,7 @@ ),
 		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,
@@ -272,3 +281,4 @@
 			before: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
@@ -279,3 +289,4 @@ ),
 			after: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 			),
@@ -298,3 +309,4 @@ ),
 			active: (
-				background-color: rgba($cadmin-white, 0.06),
+				background-color:
+					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
 				color: $cadmin-white,
@@ -537,3 +549,5 @@ ),
 				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%))'
+				)
 			),
@@ -540,0 +554,0 @@ color: #8e94aa,

src/scss/cadmin/variables/_tooltip.scss

 $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;
@@ -5,0 +7,0 @@ $cadmin-tooltip-font-size: 14px !default; // 14px

src/scss/cadmin/variables/_treeview.scss

@@ -282,3 +282,3 @@ $cadmin-treeview: () !default;
 				background-color: transparent,
-				color: rgba($cadmin-gray-600, 0.5),
+				color: unquote('hsl(from #{$cadmin-gray-600} h s l / 0.5)'),
 			),
@@ -343,3 +343,3 @@
 				background-color: transparent,
-				color: rgba($cadmin-secondary-l1, 0.5),
+				color: unquote('hsl(from #{$cadmin-secondary-l1} h s l / 0.5)'),
 			),
@@ -346,0 +346,0 @@

src/scss/cadmin/variables/_utilities.scss

@@ -220,3 +220,6 @@ $cadmin-bg-checkered-fg: $cadmin-gray-300 !default;
 			hover: (
-				background-color: clay-darken($cadmin-blue, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-blue} h s calc(l - 10)) !important'
+					),
 			),
@@ -229,3 +232,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-indigo, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-indigo} h s calc(l - 10)) !important'
+					),
 			),
@@ -238,3 +244,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-purple, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-purple} h s calc(l - 10)) !important'
+					),
 			),
@@ -247,3 +256,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-pink, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-pink} h s calc(l - 10)) !important'
+					),
 			),
@@ -256,3 +268,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-red, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-red} h s calc(l - 10)) !important'
+					),
 			),
@@ -265,3 +280,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-orange, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-orange} h s calc(l - 10)) !important'
+					),
 			),
@@ -274,3 +292,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-yellow, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-yellow} h s calc(l - 10)) !important'
+					),
 			),
@@ -283,3 +304,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-green, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-green} h s calc(l - 10)) !important'
+					),
 			),
@@ -292,3 +316,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-teal, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-teal} h s calc(l - 10)) !important'
+					),
 			),
@@ -301,3 +328,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-cyan, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-cyan} h s calc(l - 10)) !important'
+					),
 			),
@@ -310,3 +340,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-primary, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-primary} h s calc(l - 10)) !important'
+					),
 			),
@@ -319,4 +352,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-primary-l3, 10%)
-					!important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-primary-l3} h s calc(l - 10)) !important'
+					),
 			),
@@ -329,3 +364,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-secondary, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-secondary} h s calc(l - 10)) !important'
+					),
 			),
@@ -338,3 +376,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-success, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-success} h s calc(l - 10)) !important'
+					),
 			),
@@ -347,3 +388,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-info, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-info} h s calc(l - 10)) !important'
+					),
 			),
@@ -356,3 +400,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-warning, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-warning} h s calc(l - 10)) !important'
+					),
 			),
@@ -365,3 +412,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-danger, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-danger} h s calc(l - 10)) !important'
+					),
 			),
@@ -374,3 +424,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-light, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-light} h s calc(l - 10)) !important'
+					),
 			),
@@ -383,3 +436,6 @@ ),
 			hover: (
-				background-color: clay-darken($cadmin-dark, 10%) !important,
+				background-color:
+					unquote(
+						'hsl(from #{$cadmin-dark} h s calc(l - 10)) !important'
+					),
 			),
@@ -400,87 +456,3 @@ ),
 $cadmin-bg-gradient-theme-colors: () !default;
-$cadmin-bg-gradient-theme-colors: map-deep-merge(
-	(
-		'primary': (
-			background: $cadmin-primary
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-primary, 15%),
-					$cadmin-primary
-				)
-				repeat-x !important,
-		),
 
-		'secondary': (
-			background: $cadmin-secondary
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-secondary, 15%),
-					$cadmin-secondary
-				)
-				repeat-x !important,
-		),
-
-		'success': (
-			background: $cadmin-success
-				linear-gradient(
-					180deg,
-					clay-clay-mix($cadmin-body-bg, $cadmin-success, 15%),
-					$cadmin-success
-				)
-				repeat-x !important,
-		),
-
-		'info': (
-			background: $cadmin-info
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-info, 15%),
-					$cadmin-info
-				)
-				repeat-x !important,
-		),
-
-		'warning': (
-			background: $cadmin-warning
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-warning, 15%),
-					$cadmin-warning
-				)
-				repeat-x !important,
-		),
-
-		'danger': (
-			background: $cadmin-danger
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-danger, 15%),
-					$cadmin-danger
-				)
-				repeat-x !important,
-		),
-
-		'light': (
-			background: $cadmin-light
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-light, 15%),
-					$cadmin-light
-				)
-				repeat-x !important,
-		),
-
-		'dark': (
-			background: $cadmin-dark
-				linear-gradient(
-					180deg,
-					clay-mix($cadmin-body-bg, $cadmin-dark, 15%),
-					$cadmin-dark
-				)
-				repeat-x !important,
-		),
-	),
-	$cadmin-bg-gradient-theme-colors
-);
-
 // Border
@@ -595,7 +567,5 @@
 				color:
-					clay-darken(
-						$cadmin-blue,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-blue} h s calc(l - 10)) !important'
+					),
 			),
@@ -609,7 +579,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-indigo,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-indigo} h s calc(l - 10)) !important'
+					),
 			),
@@ -623,7 +591,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-purple,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-purple} h s calc(l - 10)) !important'
+					),
 			),
@@ -637,7 +603,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-pink,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-pink} h s calc(l - 10)) !important'
+					),
 			),
@@ -651,7 +615,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-red,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-red} h s calc(l - 10)) !important'
+					),
 			),
@@ -665,7 +627,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-orange,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-orange} h s calc(l - 10)) !important'
+					),
 			),
@@ -679,7 +639,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-yellow,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-yellow} h s calc(l - 10)) !important'
+					),
 			),
@@ -693,7 +651,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-green,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-green} h s calc(l - 10)) !important'
+					),
 			),
@@ -707,7 +663,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-teal,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-teal} h s calc(l - 10)) !important'
+					),
 			),
@@ -721,7 +675,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-cyan,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-cyan} h s calc(l - 10)) !important'
+					),
 			),
@@ -735,7 +687,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-primary,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-primary} h s calc(l - 10)) !important'
+					),
 			),
@@ -749,7 +699,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-secondary,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-secondary} h s calc(l - 10)) !important'
+					),
 			),
@@ -763,7 +711,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-success,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-success} h s calc(l - 10)) !important'
+					),
 			),
@@ -777,7 +723,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-info,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-info} h s calc(l - 10)) !important'
+					),
 			),
@@ -791,7 +735,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-warning,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-warning} h s calc(l - 10)) !important'
+					),
 			),
@@ -805,7 +747,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-danger,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-danger} h s calc(l - 10)) !important'
+					),
 			),
@@ -819,7 +759,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-light,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-light} h s calc(l - 10)) !important'
+					),
 			),
@@ -833,7 +771,5 @@ ),
 				color:
-					clay-darken(
-						$cadmin-dark,
-						$cadmin-emphasized-link-hover-darken-percentage
-					)
-					!important,
+					unquote(
+						'hsl(from #{$cadmin-dark} h s calc(l - 10)) !important'
+					),
 			),
@@ -851,7 +787,7 @@ ),
 		'black-50': (
-			color: rgba($cadmin-black, 0.5) !important,
+			color: unquote('hsl(from #{$cadmin-black} h s l / 0.5) !important'),
 		),
 
 		'white-50': (
-			color: rgba($cadmin-white, 0.5) !important,
+			color: unquote('hsl(from #{$cadmin-white} h s l / 0.5) !important'),
 		),
@@ -858,0 +794,0 @@ ),

src/scss/components/_focus-ring.scss

@@ -49,3 +49,5 @@ $focus-ring-animation-name: clay-focus-ring !default;
 
-	:focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+	:focus-visible:not(.c-horizontal-resizer):not(.toggle-switch-check):not(
+			.custom-control-input
+		),
 	.focus {
@@ -52,0 +54,0 @@ position: relative;

src/scss/components/_icons.scss

@@ -5,14 +5,113 @@ .lexicon-icon {
 
-.lexicon-icon-sm {
-	@include clay-css($lexicon-icon-sm);
+.lexicon-icon-arrows-all {
+	background-color: unquote('hsl(from #{$white} h s l / 0.6)');
+	border: 1px solid $border-color;
+	border-radius: 0.1413em; // 6.5/46
+	height: 0.73913em; // 34/46 aspect ratio
+	margin-top: 0;
+	width: 1em;
+
+	.lx-arrows-all-chevron {
+		fill: $white;
+	}
 }
 
-.lexicon-icon-lg {
-	@include clay-css($lexicon-icon-lg);
+.clay-keyboard-arrows-horizontal {
+	.lx-arrows-all-keycap-down,
+	.lx-arrows-all-keycap-up {
+		fill: $gray-300;
+	}
 }
 
-.lexicon-icon-xl {
-	@include clay-css($lexicon-icon-xl);
+.clay-keyboard-arrows-vertical {
+	.lx-arrows-all-keycap-left,
+	.lx-arrows-all-keycap-right {
+		fill: $gray-300;
+	}
 }
 
+.clay-keyboard-arrows-indicator {
+	display: inline-flex;
+	font-size: 2.875rem; // 46px — natural design size
+
+	.lexicon-icon {
+		margin-top: 0;
+	}
+}
+
+.clay-keyboard-arrows-indicator-floating {
+	background-color: $white;
+	border-radius: 0.1413em; // matches `.lexicon-icon-arrows-all`
+	position: absolute;
+
+	// Position timing matches `$c-slideout-transition-in` so the
+	// indicator slides in lockstep with a `VerticalBar` panel opening
+	// rather than vanishing and reappearing at the new position. The
+	// focus-within toggle stays instantaneous.
+	transition:
+		bottom 0.3s ease-in-out,
+		left 0.3s ease-in-out,
+		right 0.3s ease-in-out,
+		top 0.3s ease-in-out;
+	z-index: $zindex-tooltip;
+
+	&.clay-keyboard-arrows-indicator-floating-hidden {
+		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
+	}
+
+	// `tooltip` placement (default): the indicator sits next to the
+	// anchor with a directional CSS-triangle arrow. The arrow's fill
+	// matches the icon's semi-transparent white surface, with the icon's
+	// border color outlining it.
+
+	&.clay-keyboard-arrows-indicator-floating-tooltip {
+		&::before,
+		&::after {
+			border-style: solid;
+			content: '';
+			height: 0;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 0;
+		}
+
+		// Default: indicator sits to the right of the anchor, so the arrow
+		// points left (toward the anchor).
+
+		&::before {
+			border-color: transparent $border-color transparent transparent;
+			border-width: 7px 7px 7px 0;
+			left: -7px;
+		}
+
+		&::after {
+			border-color: transparent $white transparent transparent;
+			border-width: 6px 6px 6px 0;
+			left: -6px;
+		}
+
+		&.clay-keyboard-arrows-indicator-floating-flipped {
+			// Flipped: indicator sits to the left of the anchor, so the
+			// arrow points right (toward the anchor).
+
+			&::before {
+				border-color: transparent transparent transparent $border-color;
+				border-width: 7px 0 7px 7px;
+				left: auto;
+				right: -7px;
+			}
+
+			&::after {
+				border-color: transparent transparent transparent $white;
+				border-width: 6px 0 6px 6px;
+				left: auto;
+				right: -6px;
+			}
+		}
+	}
+}
+
 .order-arrow-down-active {
@@ -106,1 +205,13 @@ .order-arrow-arrow-down {
 }
+
+.lexicon-icon-sm {
+	@include clay-css($lexicon-icon-sm);
+}
+
+.lexicon-icon-lg {
+	@include clay-css($lexicon-icon-lg);
+}
+
+.lexicon-icon-xl {
+	@include clay-css($lexicon-icon-xl);
+}

src/scss/components/_resizer.scss

@@ -12,2 +12,10 @@ .c-horizontal-resizer {
 
+	&:active::before {
+		@include clay-css(map-deep-get($c-horizontal-resizer, active, before));
+	}
+
+	&:focus-visible {
+		@include clay-css(map-get($c-horizontal-resizer, focus));
+	}
+
 	&:focus-visible::before {
@@ -14,0 +22,0 @@ @include clay-css(map-deep-get($c-horizontal-resizer, focus, before));

src/scss/components/_root.scss

@@ -1,5 +0,12 @@
-:root {
-	@if (variable-exists(c-root)) {
+@if (variable-exists(c-root)) {
+	:root {
 		@include clay-css($c-root);
-	} @else {
+	}
+
+	[data-color-scheme='light']:root,
+	:root [data-color-scheme='light'] {
+		color-scheme: light;
+	}
+} @else {
+	:root {
 		// Custom variable values only support SassScript inside `#{}`
@@ -25,1 +32,27 @@
 }
+
+@if (variable-exists(c-dark)) {
+	@media (prefers-color-scheme: dark) {
+		:root {
+			@include clay-css($c-dark);
+		}
+	}
+
+	[data-color-scheme='dark']:root,
+	:root [data-color-scheme='dark'] {
+		@include clay-css($c-dark);
+	}
+}
+
+@if (variable-exists(c-dark-high-contrast)) {
+	@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+		:root {
+			@include clay-css($c-dark-high-contrast);
+		}
+	}
+
+	[data-color-scheme='dark-high-contrast']:root,
+	:root [data-color-scheme='dark-high-contrast'] {
+		@include clay-css($c-dark-high-contrast);
+	}
+}

src/scss/mixins/_cards.scss

@@ -2005,3 +2005,4 @@ ////
 			@if ($_checked) {
-				&.checked {
+				&.checked,
+				&:has(.custom-control-input:checked) {
 					$_card: map-get($_checked, card);
@@ -2031,2 +2032,19 @@
 
+			$_disabled: map-get($map, disabled);
+
+			@if ($_disabled) {
+				&.disabled,
+				&:has(.custom-control-input:disabled) {
+					@include clay-css($_disabled);
+
+					$_card: map-get($_disabled, card);
+
+					@if ($_card) {
+						.card {
+							@include clay-card-variant($_card);
+						}
+					}
+				}
+			}
+
 			$_card: map-get($map, card);
@@ -2033,0 +2051,0 @@

src/scss/mixins/_labels.scss

@@ -761,6 +761,13 @@ ////
 			@if (length($href) != 0) {
-				&[href],
+				&[href] {
+					@include clay-link($href);
+				}
+			}
+
+			$_tabindex: map-get($map, tabindex);
+
+			@if (length($_tabindex) != 0) {
 				&[type],
 				&[tabindex] {
-					@include clay-link($href);
+					@include clay-link($_tabindex);
 				}
@@ -767,0 +774,0 @@ }

src/scss/variables/_cards.scss

@@ -12,2 +12,3 @@ $card-bg: $white !default;
 $card-spacer-y: 0.75rem !default;
+$card-transition: null !default;
 
@@ -186,2 +187,3 @@ $card-inner-border-radius: calc(
 		position: relative,
+		transition: $card-transition,
 		word-wrap: break-word,
@@ -409,2 +411,12 @@
 
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $card-border-color,
+				outline-color: transparent,
+			),
+		),
+
 		card: (
@@ -744,2 +756,4 @@ margin-bottom: 0rem,
 
+$card-interactive-primary-hover-box-shadow: null !default;
+
 $card-interactive-primary-after-highlight: () !default;
@@ -766,2 +780,5 @@ $card-interactive-primary-after-highlight: map-deep-merge(
 	(
+		hover: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
 		focus: (
@@ -854,2 +871,6 @@ background-color: $gray-100,
 
+		disabled: (
+			transform: none,
+		),
+
 		dropdown-action: (
@@ -886,3 +907,3 @@ margin-right: -0.5rem,
 			background-color: $white,
-			background-image: linear-gradient(0deg, #ebebeb, #ebebeb),
+			background-image: linear-gradient(0deg, $gray-200, $gray-200),
 		),
@@ -889,0 +910,0 @@

src/scss/variables/_custom-forms.scss

@@ -47,3 +47,3 @@ ////
 ) !default;
-$custom-control-indicator-position-top: 0px !default;
+$custom-control-indicator-position-top: 0rem !default;
 
@@ -108,2 +108,9 @@ $custom-control-indicator-focus-border-color: if(
 
+// .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
@@ -168,2 +175,3 @@
 		cursor: $custom-control-description-cursor,
+		display: inline-block,
 		font-size: $custom-control-description-font-size,
@@ -173,4 +181,4 @@ font-weight: $custom-control-description-font-weight,
 		margin-bottom: 0rem,
+		max-width: 100%,
 		position: static,
-		vertical-align: top,
 
@@ -191,3 +199,3 @@ before: (
 			position: relative,
-			top: 0.25rem,
+			top: $custom-control-indicator-position-top,
 			transition: clay-enable-transitions($custom-forms-transition),
@@ -202,7 +210,7 @@ width: $custom-control-indicator-size,
 			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,
 		),
@@ -246,2 +254,4 @@ ),
 		padding-left: $custom-control-description-padding-left,
+		position: relative,
+		top: -0.25rem,
 	),
@@ -266,2 +276,3 @@ $custom-control-label-text
 		display: block,
+		line-height: 1,
 		margin-bottom: $custom-control-margin-bottom,
@@ -298,8 +309,8 @@ margin-top: $custom-control-margin-top,
 			),
-		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,
@@ -306,0 +317,0 @@

src/scss/variables/_dropdowns.scss

@@ -387,3 +387,5 @@ // .dropdown-toggle
 	(
+		align-items: center,
 		color: $dropdown-subheader-color,
+		display: flex,
 		font-size: $dropdown-subheader-font-size,
@@ -390,0 +392,0 @@ font-weight: $dropdown-subheader-font-weight,

src/scss/variables/_globals.scss

@@ -385,2 +385,3 @@ ////
 $border-radius-sm: 0.2rem !default;
+$border-radius-xl: 1rem !default;
 $border-radius: 0.25rem !default;
@@ -387,0 +388,0 @@

src/scss/variables/_labels.scss

@@ -907,3 +907,3 @@ ////
 				background-color: clay-darken($primary, 10%),
-				border-color: clay-darken($primary, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($primary, 10%)),
@@ -937,3 +937,3 @@ ),
 				background-color: clay-darken($secondary, 10%),
-				border-color: clay-darken($secondary, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($secondary, 10%)),
@@ -967,3 +967,3 @@ ),
 				background-color: clay-darken($success, 10%),
-				border-color: clay-darken($success, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($success, 10%)),
@@ -997,3 +997,3 @@ ),
 				background-color: clay-darken($info, 10%),
-				border-color: clay-darken($info, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($info, 10%)),
@@ -1027,3 +1027,3 @@ ),
 				background-color: clay-darken($warning, 10%),
-				border-color: clay-darken($warning, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($warning, 10%)),
@@ -1057,3 +1057,3 @@ ),
 				background-color: clay-darken($danger, 10%),
-				border-color: clay-darken($danger, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($danger, 10%)),
@@ -1087,3 +1087,3 @@ ),
 				background-color: clay-darken($light, 10%),
-				border-color: clay-darken($light, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($light, 10%)),
@@ -1117,3 +1117,3 @@ ),
 				background-color: clay-darken($dark, 10%),
-				border-color: clay-darken($dark, 10%),
+				border-color: transparent,
 				color: color-yiq(clay-darken($dark, 10%)),
@@ -1138,2 +1138,272 @@ ),
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
+
+		href: (
+			hover: (
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border-color: transparent,
+		color: $purple-d2,
+
+		href: (
+			hover: (
+				background-color: $purple-l5,
+				border-color: transparent,
+				color: $purple-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border-color: transparent,
+		color: $yellow-d4,
+
+		href: (
+			hover: (
+				background-color: $yellow-l5,
+				border-color: transparent,
+				color: $yellow-d4,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border-color: transparent,
+		color: $green-d2,
+
+		href: (
+			hover: (
+				background-color: $green-l5,
+				border-color: transparent,
+				color: $green-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border-color: transparent,
+		color: $red-d2,
+
+		href: (
+			hover: (
+				background-color: $red-l5,
+				border-color: transparent,
+				color: $red-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border-color: transparent,
+		color: $teal-d2,
+
+		href: (
+			hover: (
+				background-color: $teal-l5,
+				border-color: transparent,
+				color: $teal-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border-color: transparent,
+		color: $cyan-d2,
+
+		href: (
+			hover: (
+				background-color: $cyan-l5,
+				border-color: transparent,
+				color: $cyan-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border-color: transparent,
+		color: $orange-d2,
+
+		href: (
+			hover: (
+				background-color: $orange-l5,
+				border-color: transparent,
+				color: $orange-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border-color: transparent,
+		color: $pink-d2,
+
+		href: (
+			hover: (
+				background-color: $pink-l5,
+				border-color: transparent,
+				color: $pink-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
@@ -1173,4 +1443,22 @@ $label-palette: map-deep-merge(
 		inverse-dark: $label-inverse-dark,
+
+		inverse-content-0: $label-inverse-content-0,
+
+		inverse-content-1: $label-inverse-content-1,
+
+		inverse-content-2: $label-inverse-content-2,
+
+		inverse-content-3: $label-inverse-content-3,
+
+		inverse-content-4: $label-inverse-content-4,
+
+		inverse-content-5: $label-inverse-content-5,
+
+		inverse-content-6: $label-inverse-content-6,
+
+		inverse-content-7: $label-inverse-content-7,
+
+		inverse-content-8: $label-inverse-content-8,
 	),
 	$label-palette
 );

src/scss/variables/_resizer.scss

@@ -26,9 +26,20 @@ $c-horizontal-resizer: () !default;
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
 			),
 		),
 
+		active: (
+			before: (
+				background-color: $primary-d2,
+			),
+		),
+
 		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+			outline: 0,
+
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+				bottom: 0.25rem,
+				top: 0.25rem,
 			),
@@ -35,0 +46,0 @@ ),

lib/images/icons/arrow-key-down.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM11.83 6.49 8.41 10.47C8.18 10.73 7.82 10.73 7.59 10.47L4.17 6.49C3.81 6.06 4.07 5.33 4.58 5.33H11.42C11.93 5.34 12.19 6.06 11.83 6.49Z" fill-rule="evenodd" />
-</svg>

lib/images/icons/arrow-key-left.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM9.51 11.83 5.53 8.41C5.27 8.18 5.27 7.82 5.53 7.59L9.51 4.17C9.94 3.81 10.67 4.07 10.67 4.58V11.42C10.66 11.93 9.94 12.19 9.51 11.83Z" fill-rule="evenodd" />
-</svg>

lib/images/icons/arrow-key-right.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM6.49 4.17 10.47 7.59C10.73 7.82 10.73 8.18 10.47 8.41L6.49 11.83C6.06 12.19 5.33 11.93 5.33 11.42V4.58C5.34 4.07 6.06 3.81 6.49 4.17Z" fill-rule="evenodd" />
-</svg>

lib/images/icons/arrow-key-up.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM11.83 9.51 8.41 5.53C8.18 5.27 7.82 5.27 7.59 5.53L4.17 9.51C3.81 9.94 4.07 10.67 4.58 10.67H11.42C11.93 10.66 12.19 9.94 11.83 9.51Z" fill-rule="evenodd" />
-</svg>

src/images/icons/arrow-key-down.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM11.83 6.49 8.41 10.47C8.18 10.73 7.82 10.73 7.59 10.47L4.17 6.49C3.81 6.06 4.07 5.33 4.58 5.33H11.42C11.93 5.34 12.19 6.06 11.83 6.49Z" fill-rule="evenodd" />
-</svg>

src/images/icons/arrow-key-left.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM9.51 11.83 5.53 8.41C5.27 8.18 5.27 7.82 5.53 7.59L9.51 4.17C9.94 3.81 10.67 4.07 10.67 4.58V11.42C10.66 11.93 9.94 12.19 9.51 11.83Z" fill-rule="evenodd" />
-</svg>

src/images/icons/arrow-key-right.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM6.49 4.17 10.47 7.59C10.73 7.82 10.73 8.18 10.47 8.41L6.49 11.83C6.06 12.19 5.33 11.93 5.33 11.42V4.58C5.34 4.07 6.06 3.81 6.49 4.17Z" fill-rule="evenodd" />
-</svg>

src/images/icons/arrow-key-up.svg

-<!--
-* SPDX-FileCopyrightText: © 2026 Liferay, Inc. <https://liferay.com>
-* SPDX-FileCopyrightText: © 2026 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
-*
-* SPDX-License-Identifier: BSD-3-Clause
--->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-	<path class="lexicon-icon-outline" clip-rule="evenodd" d="M3.33 0h9.34A3.33 3.33 0 0 1 16 3.33v9.34A3.33 3.33 0 0 1 12.67 16H3.33A3.33 3.33 0 0 1 0 12.67V3.33A3.33 3.33 0 0 1 3.33 0ZM11.83 9.51 8.41 5.53C8.18 5.27 7.82 5.27 7.59 5.53L4.17 9.51C3.81 9.94 4.07 10.67 4.58 10.67H11.42C11.93 10.66 12.19 9.94 11.83 9.51Z" fill-rule="evenodd" />
-</svg>

src/scss/components/_keyboard-arrows-indicator.scss

-// Keyboard arrows indicator
-//
-// A visual hint showing which arrow keys move focus inside a component. The
-// four directional keys are laid out in the inverted-T arrangement found on
-// physical keyboards. Keys not part of the active direction are rendered
-// muted so the layout stays recognizable.
-
-.clay-keyboard-arrows-indicator {
-	column-gap: 0.15em;
-	display: inline-grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
-	row-gap: 0.15em;
-}
-
-.clay-keyboard-arrows-indicator-md {
-	font-size: 1rem; // 16px keycaps
-}
-
-.clay-keyboard-arrows-indicator-sm {
-	font-size: 0.75rem; // 12px keycaps
-}
-
-.clay-keyboard-arrows-indicator-key {
-	display: inline-flex;
-
-	.lexicon-icon {
-		height: 1em;
-		margin-top: 0;
-		width: 1em;
-	}
-}
-
-.clay-keyboard-arrows-indicator-key-up {
-	grid-column: 2;
-	grid-row: 1;
-}
-
-.clay-keyboard-arrows-indicator-key-left {
-	grid-column: 1;
-	grid-row: 2;
-}
-
-.clay-keyboard-arrows-indicator-key-down {
-	grid-column: 2;
-	grid-row: 2;
-}
-
-.clay-keyboard-arrows-indicator-key-right {
-	grid-column: 3;
-	grid-row: 2;
-}
-
-.clay-keyboard-arrows-indicator-key-inactive {
-	opacity: 0.25;
-}
-
-// Modifier for popup-style consumers (DropDown, Picker, Autocomplete, etc.)
-// that want the indicator pinned to the bottom-right of the popup chrome.
-// Visibility is implicit: the popup itself is conditionally rendered only
-// while open, so the indicator follows.
-
-.clay-keyboard-arrows-indicator-floating {
-	bottom: 0.25rem;
-	pointer-events: none;
-	position: absolute;
-	right: 0.5rem;
-}
-
-// Modifier for inline consumers (Table, MultiSelect, VerticalNav,
-// VerticalBar, DatePicker calendar). The indicator is hidden by default
-// and revealed only when its direct parent has `:focus-within` (i.e. the
-// consumer's focusable scope contains the focused element). Consumers
-// place the indicator as a direct child of the focusable container.
-
-.clay-keyboard-arrows-indicator-on-focus {
-	visibility: hidden;
-}
-
-:focus-within > .clay-keyboard-arrows-indicator-on-focus {
-	visibility: visible;
-}

No alert changes

Improved metrics

Total package byte prevSize

13160173

1.69%

Number of package files

1474

1.59%

Lines of code

89659

1.39%

No dependency changes