@daffodil/design 0.93.1 → 0.94.0

package/media-gallery/src/media-gallery-theme.scss

@@ -8,7 +8,7 @@
 	.daff-media-gallery {
 		$root: &;
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			.daff-thumbnail {
 				background: daff-color($neutral, 20);
 
@@ -18,7 +18,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			.daff-thumbnail {
 				background: daff-color($neutral, 70);
 

package/menu/README.md

@@ -81,6 +81,11 @@ Menus generate a unique id automatically. To set your own, add an `id` to the ac
 
 <daff-docs-example-viewer example="menu-with-id"></daff-docs-example-viewer>
 
+### Customize menu positions
+By default a menu opens below its activator, aligned to its left edge. Set `yPosition` (`below` or `above`) on the activator to control whether it drops down or rises up, and `xPosition` (`after` or `before`) to align the menu's left or right edge with the activator. The menu stays anchored to the activator and scrolls in place when its content is taller than the available space.
+
+<daff-docs-example-viewer example="menu-with-position"></daff-docs-example-viewer>
+
 ## Accessibility
 Menu follows the [Menu and Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
 

package/menu/src/menu-theme.scss

@@ -7,10 +7,10 @@
 	$base-contrast: daff-get-base-color($theme, base-contrast);
 	$mode: daff-get-theme-mode($theme);
 
-	@include light($mode) {
+	@include daff-light-mode($mode) {
 		.daff-menu {
 			background: $base;
-			box-shadow: 0 0 24px rgb($black, 0.12);
+			box-shadow: 0 0 1.5rem rgb($black, 0.12);
 		}
 
 		.daff-menu-item {
@@ -29,10 +29,10 @@
 		}
 	}
 
-	@include dark($mode) {
+	@include daff-dark-mode($mode) {
 		.daff-menu {
 			background: $base;
-			box-shadow: 0 0 24px rgb($black, 0.12);
+			box-shadow: 0 0 1.5rem rgb($black, 0.12);
 		}
 
 		.daff-menu-item {

package/notification/src/notification-theme.scss

@@ -12,7 +12,7 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-notification {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background: daff-color($neutral, 10);
 			border: 1px solid daff-color($neutral, 20);
 			color: $base-contrast;
@@ -58,7 +58,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			background: daff-color($neutral, 90);
 			border: 1px solid daff-color($neutral, 80);
 			color: $base-contrast;

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.93.1","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"An Angular component library built to support ecommerce applications with accessible UI components and theming. Part of the Daffodil ecommerce framework.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^21","@angular/common":"^21","@angular/core":"^21","@angular/forms":"^21","@angular/cdk":"^21","@daffodil/core":"0.93.1","@fortawesome/angular-fontawesome":"^4.0.0","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","modern-normalize":"^3.0.1","rxjs":"^7.0.0"},"optionalDependencies":{"@faker-js/faker":"^10.3.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./types/daffodil-design.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./types/daffodil-design-accordion.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./types/daffodil-design-article.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./beacon":{"types":"./types/daffodil-design-beacon.d.ts","default":"./fesm2022/daffodil-design-beacon.mjs"},"./breadcrumb":{"types":"./types/daffodil-design-breadcrumb.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./types/daffodil-design-button.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./types/daffodil-design-callout.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./types/daffodil-design-card.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./checkbox":{"types":"./types/daffodil-design-checkbox.d.ts","default":"./fesm2022/daffodil-design-checkbox.mjs"},"./container":{"types":"./types/daffodil-design-container.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form":{"types":"./types/daffodil-design-form.d.ts","default":"./fesm2022/daffodil-design-form.mjs"},"./form-field":{"types":"./types/daffodil-design-form-field.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./types/daffodil-design-hero.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./types/daffodil-design-image.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./types/daffodil-design-input.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./types/daffodil-design-link-set.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./types/daffodil-design-list.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./types/daffodil-design-loading-icon.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./types/daffodil-design-media-gallery.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./types/daffodil-design-menu.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./types/daffodil-design-modal.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./types/daffodil-design-native-select.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./types/daffodil-design-navbar.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./types/daffodil-design-notification.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./types/daffodil-design-paginator.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./types/daffodil-design-progress-bar.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./types/daffodil-design-quantity-field.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./radio":{"types":"./types/daffodil-design-radio.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./select":{"types":"./types/daffodil-design-select.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./types/daffodil-design-sidebar.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./spinner":{"types":"./types/daffodil-design-spinner.d.ts","default":"./fesm2022/daffodil-design-spinner.mjs"},"./switch":{"types":"./types/daffodil-design-switch.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./types/daffodil-design-tabs.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./tag":{"types":"./types/daffodil-design-tag.d.ts","default":"./fesm2022/daffodil-design-tag.mjs"},"./testing":{"types":"./types/daffodil-design-testing.d.ts","default":"./fesm2022/daffodil-design-testing.mjs"},"./text-snippet":{"types":"./types/daffodil-design-text-snippet.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./types/daffodil-design-textarea.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./types/daffodil-design-toast.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./types/daffodil-design-tree.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./types/daffodil-design-youtube-player.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"types/daffodil-design.d.ts","sideEffects":false,"type":"module","dependencies":{"tslib":"^2.6.2"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.94.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"An Angular component library built to support ecommerce applications with accessible UI components and theming. Part of the Daffodil ecommerce framework.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^21","@angular/common":"^21","@angular/core":"^21","@angular/forms":"^21","@angular/cdk":"^21","@daffodil/core":"0.94.0","@fortawesome/angular-fontawesome":"^4.0.0","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","modern-normalize":"^3.0.1","rxjs":"^7.0.0"},"optionalDependencies":{"@faker-js/faker":"^10.3.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme/default":{"sass":"./scss/theming/default/_index.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./types/daffodil-design.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./types/daffodil-design-accordion.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./types/daffodil-design-article.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./badge":{"types":"./types/daffodil-design-badge.d.ts","default":"./fesm2022/daffodil-design-badge.mjs"},"./beacon":{"types":"./types/daffodil-design-beacon.d.ts","default":"./fesm2022/daffodil-design-beacon.mjs"},"./breadcrumb":{"types":"./types/daffodil-design-breadcrumb.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./types/daffodil-design-button.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./types/daffodil-design-callout.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./types/daffodil-design-card.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./checkbox":{"types":"./types/daffodil-design-checkbox.d.ts","default":"./fesm2022/daffodil-design-checkbox.mjs"},"./container":{"types":"./types/daffodil-design-container.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form":{"types":"./types/daffodil-design-form.d.ts","default":"./fesm2022/daffodil-design-form.mjs"},"./form-field":{"types":"./types/daffodil-design-form-field.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./types/daffodil-design-hero.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./types/daffodil-design-image.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./types/daffodil-design-input.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./types/daffodil-design-link-set.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./types/daffodil-design-list.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./media-gallery":{"types":"./types/daffodil-design-media-gallery.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./types/daffodil-design-menu.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./types/daffodil-design-modal.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./types/daffodil-design-native-select.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./types/daffodil-design-navbar.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./types/daffodil-design-notification.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./types/daffodil-design-paginator.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./types/daffodil-design-progress-bar.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./types/daffodil-design-quantity-field.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./radio":{"types":"./types/daffodil-design-radio.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./select":{"types":"./types/daffodil-design-select.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./types/daffodil-design-sidebar.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./spinner":{"types":"./types/daffodil-design-spinner.d.ts","default":"./fesm2022/daffodil-design-spinner.mjs"},"./switch":{"types":"./types/daffodil-design-switch.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./types/daffodil-design-tabs.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./tag":{"types":"./types/daffodil-design-tag.d.ts","default":"./fesm2022/daffodil-design-tag.mjs"},"./testing":{"types":"./types/daffodil-design-testing.d.ts","default":"./fesm2022/daffodil-design-testing.mjs"},"./text-snippet":{"types":"./types/daffodil-design-text-snippet.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./types/daffodil-design-textarea.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./types/daffodil-design-toast.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./types/daffodil-design-tree.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./types/daffodil-design-youtube-player.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"types/daffodil-design.d.ts","sideEffects":false,"type":"module","dependencies":{"tslib":"^2.6.2"}}

package/paginator/src/paginator-theme.scss

@@ -14,7 +14,7 @@
 			color: $base-contrast;
 		}
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			&__page-link {
 				@media (hover: hover) {
 					&:hover {
@@ -32,7 +32,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			&__page-link {
 				@media (hover: hover) {
 					&:hover {

package/progress-bar/README.md

@@ -61,7 +61,7 @@ Use an indeterminate progress bar when the percentage of completion is unknown o
 ### Colors
 The default color is `primary`. Use the `color` property to change a progress bar's color.
 
-> `theme`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
+> `theme`, `light`, and `dark` should be used with caution to ensure that there is sufficient contrast.
 
 <daff-docs-example-viewer example="progress-bar-themes"></daff-docs-example-viewer>
 

package/progress-bar/src/progress-bar-theme.scss

@@ -18,13 +18,13 @@
 			color: daff-text-contrast($base);
 		}
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			#{$root}__track {
 				background: daff-color($neutral, 30);
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			#{$root}__track {
 				background: daff-color($neutral, 80);
 			}

package/scss/state/skeleton/_mixins.scss

@@ -7,14 +7,14 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-skeleton {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			&::before,
 			::before {
 				background: daff-color($neutral, 20);
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			&::before,
 			::before {
 				background: daff-color($neutral, 90);

package/scss/theme/default.scss

@@ -0,0 +1,15 @@
+// This file only exists for builds inside the Daffodil monorepo. Consumers of
+// the published package never load it.
+//
+// Externally, `@daffodil/design/scss/theme/default` resolves through the `sass`
+// condition of the `exports` map in package.json, which points straight at
+// `scss/theming/default/_index.scss`.
+//
+// Inside the monorepo there is no `node_modules/@daffodil/design`, so the
+// specifier instead resolves via the root tsconfig `paths` mapping
+// (`@daffodil/*` -> `dist/*`). That mapping bypasses `exports` entirely, leaving
+// Angular's Sass importer to fall back to joining the remaining specifier
+// segments onto the package root verbatim. `scss/theme/default` therefore has to
+// exist as a real file for the monorepo apps to resolve it.
+
+@forward '../theming/default';

package/scss/theme.scss

@@ -20,6 +20,7 @@
 @use './theming/theme-css-variables' as variables;
 @use '../beacon/src/beacon-theme' as beacon;
 @use '../breadcrumb/src/breadcrumb-theme' as breadcrumb;
+@use '../badge/src/badge-theme' as badge;
 @use '../button/src/button/basic/button-theme' as button;
 @use '../button/src/button/flat/flat-theme' as flat-button;
 @use '../button/src/button/icon/icon-theme' as icon-button;
@@ -32,7 +33,6 @@
 @use '../form/src/hint/hint-theme' as hint;
 @use '../form-field/src/form-field-theme' as form-field;
 @use '../native-select/src/native-select-theme' as native-select;
-@use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
 @use '../card/src/card-base-theme' as card-base;
@@ -74,6 +74,7 @@
 
 	@include accordion.daff-accordion-theme($theme);
 	@include article.daff-article-theme($theme);
+	@include badge.daff-badge-theme($theme);
 	@include tag.daff-tag-theme($theme);
 	@include breadcrumb.daff-breadcrumb-theme($theme);
 
@@ -84,7 +85,6 @@
 	@include stroked-button.daff-stroked-button-theme($theme);
 	@include underline-button.daff-underline-button-theme($theme);
 
-	@include callout.daff-callout-theme($theme);
 	@include card-base.daff-card-base-theme($theme);
 	@include stroked-card.daff-stroked-card-theme($theme);
 
@@ -98,22 +98,16 @@
 	@include spinner.daff-spinner-theme($theme);
 	@include progress-bar.daff-progress-bar-theme($theme);
 
-	@include accordion.daff-accordion-theme($theme);
-	@include article.daff-article-theme($theme);
 	@include callout.daff-callout-theme($theme);
 	@include hero.daff-hero-theme($theme);
 	@include list.daff-list-theme($theme);
 
-	// deprecated
-	@include loading-icon.daff-loading-icon-theme($theme);
-
 	@include media-gallery.daff-media-gallery-theme($theme);
 	@include menu.daff-menu-theme($theme);
 	@include modal.daff-modal-theme($theme);
 	@include navbar.daff-navbar-theme($theme);
 	@include notification.daff-notification-theme($theme);
 	@include paginator.daff-paginator-theme($theme);
-	@include progress-bar.daff-progress-bar-theme($theme);
 	@include sidebar.daff-sidebar-theme($theme);
 	@include switch.daff-switch-theme($theme);
 	@include tabs.daff-tabs-theme($theme);

package/scss/theming/_configure-palette.scss

@@ -7,6 +7,9 @@
 /// as the palette’s default color. The palette can then be used
 /// to configure themes by setting them as primary, secondary, or tertiary colors.
 ///
+/// The hue is recorded alongside the color as `default-hue`, so that colors can
+/// be selected relative to the default with `daff-color-shift`.
+///
 /// @group Theming
 ///
 /// @param {Map} $color-palette — A color palette map (e.g., `$daff-blue`, `$daff-purple`).
@@ -21,7 +24,8 @@
 	@return map.merge(
 		$color-palette,
 		(
-			'default': get-color.daff-color($color-palette, $hue)
+			'default': get-color.daff-color($color-palette, $hue),
+			'default-hue': $hue
 		)
 	);
 }

package/scss/theming/_get-theme-mode.scss

@@ -17,7 +17,7 @@
 /// 	@use '@daffodil/design/scss/theme' as daff-theme;
 ///
 /// 	@mixin custom-content-theme($theme) {
-/// 		$mode: daff-get-theme-mode($theme);
+/// 		$mode: daff-theme.daff-get-theme-mode($theme);
 /// 	}
 ///
 

package/scss/theming/_index.scss

@@ -1,11 +1,10 @@
 @forward 'color-palettes';
 @forward 'get-color';
+@forward 'color-shift';
 @forward 'contrast';
-@forward 'illuminate/illuminate';
 @forward 'configure-palette';
-@forward 'create-theme/create-theme';
+@forward 'create-theme';
 @forward 'light-dark';
-@forward 'daff-theme';
 @forward 'get-palette';
 @forward 'get-base-color';
 @forward 'get-theme-mode';

package/scss/theming/_light-dark.scss

@@ -11,16 +11,16 @@
 /// 	@mixin custom-content-theme($theme) {
 /// 		$mode: daff-theme.daff-get-theme-mode($theme);
 ///
-/// 		@include daff-theme.light($mode) {
+/// 		@include daff-theme.daff-light-mode($mode) {
 /// 			color: blue;
 ///
-///   		.class {
-///   			background: white;
-///				}
-///	 		}
+/// 			.class {
+/// 				background: white;
+/// 			}
+/// 		}
 /// 	}
 ///
-@mixin light($mode) {
+@mixin daff-light-mode($mode) {
 	@if $mode == 'light' {
 		@content;
 	}
@@ -39,16 +39,41 @@
 /// 	@mixin custom-content-theme($theme) {
 /// 		$mode: daff-theme.daff-get-theme-mode($theme);
 ///
-/// 		@include daff-theme.dark($mode) {
+/// 		@include daff-theme.daff-dark-mode($mode) {
 /// 			color: white;
 ///
-///   		.class {
-///   			background: blue;
-///				}
-///	 		}
+/// 			.class {
+/// 				background: blue;
+/// 			}
+/// 		}
 /// 	}
-@mixin dark($mode) {
+///
+@mixin daff-dark-mode($mode) {
 	@if $mode == 'dark' {
 		@content;
 	}
 }
+
+/// @deprecated Use `daff-light-mode` instead.
+///
+/// @group Theming
+///
+/// @alias daff-light-mode
+///
+@mixin light($mode) {
+	@include daff-light-mode($mode) {
+		@content;
+	}
+}
+
+/// @deprecated Use `daff-dark-mode` instead.
+///
+/// @group Theming
+///
+/// @alias daff-dark-mode
+///
+@mixin dark($mode) {
+	@include daff-dark-mode($mode) {
+		@content;
+	}
+}

package/scss/theming/color-shift/_color-shift.scss

@@ -0,0 +1,56 @@
+// stylelint-disable @stylistic/max-line-length
+@use 'sass:map';
+@use '../get-color';
+@use '../../core/error/error-to-string';
+
+/// @access private
+/// The distance between two adjacent hues in a color palette.
+$hue-step: 10;
+
+/// Retrieves a color relative to a palette's default hue.
+///
+/// Positive steps move toward the darker end of the palette, negative steps
+/// toward the lighter end. Use this instead of a hardcoded hue when a color is
+/// meant to sit a fixed distance from a palette's default, such as the hover
+/// and active states of a component.
+///
+/// The palette must be configured with `daff-configure-palette`, which records
+/// the hue that the default was set from.
+///
+/// @group Theming
+///
+/// @param {Map} $palette — The palette to retrieve a color from.
+/// @param {Number} $steps [0] — How many hue steps to shift from the default.
+///
+/// @return {Color} The color `$steps` away from the palette's default hue.
+///
+/// @throws Will throw an error if `$palette` was not configured with
+/// `daff-configure-palette`, or if the shifted hue does not exist in `$palette`.
+///
+/// @example scss
+/// 	// $primary configured at hue 60
+/// 	.custom-content {
+/// 		background-color: daff-color($primary); // hue 60
+/// 		border-color: daff-color-shift($primary, 1); // hue 70
+/// 		color: daff-color-shift($primary, -1); // hue 50
+/// 	}
+///
+@function daff-color-shift($palette, $steps: 0) {
+	$default-hue: map.get($palette, 'default-hue');
+
+	@if ($default-hue == null) {
+		@return error-to-string.error-to-string(
+			'Palette has no `default-hue`. Configure it with `daff-configure-palette`.'
+		);
+	}
+
+	$hue: $default-hue + ($steps * $hue-step);
+
+	@if (not map.has-key($palette, $hue)) {
+		@return error-to-string.error-to-string(
+			'Cannot shift `#{$steps}` step(s) from hue `#{$default-hue}`. `#{$hue}` does not exist in palette.'
+		);
+	}
+
+	@return get-color.daff-color($palette, $hue);
+}

package/scss/theming/color-shift/_color-shift.spec.scss

@@ -0,0 +1,107 @@
+@use 'true' as *;
+@use 'sass:map';
+@use '../color-shift' as *;
+@use '../color-palettes' as palette;
+@use '../configure-palette' as *;
+@use '../get-color' as *;
+@use '../../core/error/error-to-string';
+
+@include describe('daff-color-shift') {
+	$default: daff-configure-palette(palette.$daff-blue);
+	$light: daff-configure-palette(palette.$daff-blue, 30);
+	$dark: daff-configure-palette(palette.$daff-blue, 50);
+	$lightest: daff-configure-palette(palette.$daff-blue, 10);
+	$darkest: daff-configure-palette(palette.$daff-blue, 100);
+
+	@include it('returns the default color when there is no shift') {
+		@include assert-equal(daff-color-shift($default), daff-color($default));
+		@include assert-equal(daff-color-shift($default, 0), daff-color($default, 60));
+	}
+
+	@include it('returns a darker color for positive steps') {
+		@include assert-equal(daff-color-shift($default, 1), daff-color($default, 70));
+		@include assert-equal(daff-color-shift($default, 2), daff-color($default, 80));
+	}
+
+	@include it('returns a lighter color for negative steps') {
+		@include assert-equal(daff-color-shift($dark, -1), daff-color($dark, 40));
+		@include assert-equal(daff-color-shift($dark, -2), daff-color($dark, 30));
+	}
+
+	@include it('shifts relative to the hue the palette was configured with') {
+		@include assert-equal(daff-color-shift($light, 1), daff-color($light, 40));
+		@include assert-equal(daff-color-shift($light, 2), daff-color($light, 50));
+	}
+
+	@include it('shifts across the whole palette') {
+		@include assert-equal(daff-color-shift($lightest, 9), daff-color($lightest, 100));
+		@include assert-equal(daff-color-shift($darkest, -9), daff-color($darkest, 10));
+	}
+
+	@include it('shifts relative to the configured hue, not a duplicate color earlier in the palette') {
+		$duplicate: daff-configure-palette((10: #ffffff, 20: #cccccc, 30: #cccccc, 40: #999999), 30);
+
+		@include assert-equal(daff-color-shift($duplicate, 1), #999999);
+	}
+
+	@include error-to-string.set-use-string(true);
+
+	@include it('errors when the shift falls past the dark end of the palette') {
+		@include assert-equal(
+			daff-color-shift($darkest, 1),
+			'Cannot shift `1` step(s) from hue `100`. `110` does not exist in palette.'
+		);
+	}
+
+	@include it('errors when the shift falls past the light end of the palette') {
+		@include assert-equal(
+			daff-color-shift($lightest, -1),
+			'Cannot shift `-1` step(s) from hue `10`. `0` does not exist in palette.'
+		);
+	}
+
+	@include it('errors when the shift lands between hues') {
+		@include assert-equal(
+			daff-color-shift($default, 0.5),
+			'Cannot shift `0.5` step(s) from hue `60`. `65` does not exist in palette.'
+		);
+	}
+
+	@include it('errors when the palette was not configured with daff-configure-palette') {
+		@include assert-equal(
+			daff-color-shift(palette.$daff-blue, 1),
+			'Palette has no `default-hue`. Configure it with `daff-configure-palette`.'
+		);
+	}
+
+	@include it('errors when the palette has a default color but no default hue') {
+		$manual: map.merge(palette.$daff-blue, ('default': daff-color(palette.$daff-blue, 60)));
+
+		@include assert-equal(
+			daff-color-shift($manual, 1),
+			'Palette has no `default-hue`. Configure it with `daff-configure-palette`.'
+		);
+	}
+
+	@include error-to-string.set-use-string(false);
+}
+
+@include describe('daff-configure-palette') {
+	@include it('records the hue the default was configured from') {
+		@include assert-equal(
+			map.get(daff-configure-palette(palette.$daff-blue), 'default-hue'),
+			60
+		);
+		@include assert-equal(
+			map.get(daff-configure-palette(palette.$daff-blue, 30), 'default-hue'),
+			30
+		);
+	}
+
+	@include it('replaces the recorded hue when a palette is reconfigured') {
+		$reconfigured: daff-configure-palette(daff-configure-palette(palette.$daff-blue, 30), 80);
+
+		@include assert-equal(map.get($reconfigured, 'default-hue'), 80);
+		@include assert-equal(map.get($reconfigured, 'default'), daff-color(palette.$daff-blue, 80));
+	}
+}

package/scss/theming/color-shift/_index.scss

@@ -0,0 +1 @@
+@forward 'color-shift';

package/scss/theming/{_daff-theme.scss → default/_daff-theme.scss}

@@ -1,7 +1,7 @@
-@use 'configure-palette';
-@use './create-theme/create-theme';
-@use 'color-palettes' as palette;
-@use '../core';
+@use '../configure-palette';
+@use '../create-theme/create-theme';
+@use '../color-palettes' as palette;
+@use '../../core';
 
 $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);

package/scss/theming/default/_index.scss

@@ -0,0 +1 @@
+@forward 'daff-theme';

package/select/src/select-theme.scss

@@ -14,7 +14,7 @@
 	.daff-select {
 		$root: '.daff-select';
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			&.disabled {
 				#{$root}__field {
 					color: daff-color($neutral, 50);
@@ -44,7 +44,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			&.disabled {
 				#{$root}__field {
 					color: daff-color($neutral, 70);
@@ -63,7 +63,9 @@
 				}
 
 				@media (hover: hover) {
-					background-color: daff-color($neutral, 90);
+					&:hover {
+						background-color: daff-color($neutral, 90);
+					}
 				}
 
 				&.highlighted {

package/switch/src/switch-theme.scss

@@ -21,7 +21,7 @@
 			}
 		}
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			&__toggle {
 				background-color: daff-color($neutral, 30);
 
@@ -37,7 +37,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			&__toggle {
 				background-color: daff-color($neutral, 70);
 

package/tabs/src/tabs-theme.scss

@@ -6,7 +6,7 @@
 	$base-contrast: daff-get-base-color($theme, base-contrast);
 	$mode: daff-get-theme-mode($theme);
 
-	@include light($mode) {
+	@include daff-light-mode($mode) {
 		.daff-tabs {
 			&__tab-list {
 				&::after {
@@ -25,7 +25,7 @@
 		}
 	}
 
-	@include dark($mode) {
+	@include daff-dark-mode($mode) {
 		.daff-tabs {
 			&__tab-list {
 				&::after {

package/tag/src/tag-theme.scss

@@ -15,7 +15,7 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-tag {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background: daff-color($neutral, 20);
 			color: $black;
 
@@ -123,7 +123,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			background: daff-color($neutral, 80);
 			color: daff-color($neutral, 20);
 

package/toast/src/toast-theme.scss

@@ -12,7 +12,7 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-toast {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background: daff-color($neutral, 10);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);
@@ -62,7 +62,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			background: daff-color($neutral, 90);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);