@daffodil/design 0.82.0 → 0.84.0

package/notification/notification.d.ts

@@ -1,4 +1,4 @@
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffPrefixDirective } from '@daffodil/design';
 import { DaffNotificationComponent } from './notification/notification.component';
 import { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';
 import { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';
@@ -7,4 +7,4 @@ import { DaffNotificationTitleDirective } from './notification-title/notificatio
 /**
  * @docs-private
  */
-export declare const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof DaffPrefixSuffixModule];
+export declare const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof DaffPrefixDirective];

package/notification/src/notification-theme.scss

@@ -13,41 +13,80 @@
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-notification {
-		background: theming.daff-illuminate($base, $neutral, 1);
-		border: 1px solid theming.daff-illuminate($base, $neutral, 2);
-		color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 1));
+		@include theming.light($type) {
+			background: theming.daff-color($neutral, 10);
+			border: 1px solid theming.daff-color($neutral, 20);
+			color: $black;
 
-		&.daff-success {
-			background: theming.daff-color($success, 10);
-			border: 1px solid theming.daff-color($success, 20);
-			color: theming.daff-text-contrast(theming.daff-color($success, 10));
+			&.daff-success {
+				background: theming.daff-color($success, 10);
+				border: 1px solid theming.daff-color($success, 20);
+				color: theming.daff-text-contrast(theming.daff-color($success, 10));
 
-			.daff-prefix {
-				color: theming.daff-color($success);
+				.daff-prefix {
+					color: theming.daff-color($success, 80);
+				}
 			}
-		}
 
-		&.daff-warn {
-			background: theming.daff-color($warn, 10);
-			border: 1px solid theming.daff-color($warn, 20);
-			color: theming.daff-text-contrast(theming.daff-color($warn, 10));
+			&.daff-warn {
+				background: theming.daff-color($warn, 10);
+				border: 1px solid theming.daff-color($warn, 20);
+				color: theming.daff-text-contrast(theming.daff-color($warn, 10));
 
-			.daff-prefix {
-				color: theming.daff-color($warn);
+				.daff-prefix {
+					color: theming.daff-color($warn, 80);
+				}
+			}
+
+			&.daff-critical {
+				background: theming.daff-color($critical, 10);
+				border: 1px solid theming.daff-color($critical, 20);
+				color: theming.daff-text-contrast(theming.daff-color($critical, 10));
+
+				.daff-prefix {
+					color: theming.daff-color($critical, 80);
+				}
 			}
 		}
 
-		&.daff-critical {
-			background: theming.daff-color($critical, 10);
-			border: 1px solid theming.daff-color($critical, 20);
-			color: theming.daff-text-contrast(theming.daff-color($critical, 10));
+		@include theming.dark($type) {
+			background: theming.daff-color($neutral, 90);
+			border: 1px solid theming.daff-color($neutral, 80);
+			color: $white;
+
+			&.daff-success {
+				background: theming.daff-color($success, 90);
+				border: 1px solid theming.daff-color($success, 80);
+				color: theming.daff-text-contrast(theming.daff-color($success, 90));
+
+				.daff-prefix {
+					color: theming.daff-color($success, 30);
+				}
+			}
+
+			&.daff-warn {
+				background: theming.daff-color($warn, 90);
+				border: 1px solid theming.daff-color($warn, 80);
+				color: theming.daff-text-contrast(theming.daff-color($warn, 90));
+
+				.daff-prefix {
+					color: theming.daff-color($warn, 30);
+				}
+			}
+
+			&.daff-critical {
+				background: theming.daff-color($critical, 90);
+				border: 1px solid theming.daff-color($critical, 80);
+				color: theming.daff-text-contrast(theming.daff-color($critical, 90));
 
-			.daff-prefix {
-				color: theming.daff-color($critical);
+				.daff-prefix {
+					color: theming.daff-color($critical, 30);
+				}
 			}
 		}
 	}

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.82.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^19.0.0","@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/cdk":"^19.0.0","@daffodil/core":"0.82.0","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.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":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.84.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^19.0.0","@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/cdk":"^19.0.0","@daffodil/core":"0.84.0","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.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":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}

package/paginator/src/paginator-theme.scss

@@ -2,33 +2,38 @@
 @use '../../scss/core';
 @use '../../scss/theming';
 
+// stylelint-disable selector-class-pattern
 @mixin daff-paginator-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$font-color: core.daff-map-get($theme, 'core', 'font-color');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-paginator {
 		&__previous,
-		&__next {
-			color: $font-color;
-		}
-
+		&__next,
 		&__page-link {
-			color: $font-color;
+			color: $base-contrast;
+		}
 
-			// stylelint-disable selector-class-pattern
-			&:hover,
-			&.selected {
-				color: daff-text-contrast(theming.daff-illuminate($base, $neutral, 2));
+		@include theming.light($type) {
+			&__page-link {
+				&:hover,
+				&.selected {
+					&::after {
+						background: theming.daff-color($neutral, 20);
+					}
+				}
+			}
+		}
 
-				&::after {
-					background: theming.daff-illuminate($base, $neutral, 2);
+		@include theming.dark($type) {
+			&__page-link {
+				&:hover,
+				&.selected {
+					&::after {
+						background: theming.daff-color($neutral, 90);
+					}
 				}
 			}
 		}

package/progress-bar/README.md

@@ -57,11 +57,9 @@ Indeterminate progress bars should be used when the loading percentage of a task
 <design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
 
 ## Theming
-The progress bar color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
+Use the `color` property to change the color of a progress bar. The default color is primary.
 
-Supported colors: `primary | secondary | tertiary | theme | theme-contrast | white | black`
-
-> `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
+> `theme`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
 
 <design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
 

package/progress-bar/progress-bar-label/progress-bar-label.directive.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffProgressBarLabelDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarLabelDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffProgressBarLabelDirective, "[daffProgressBarLabel]", never, {}, {}, never, never, true, never>;

package/progress-bar/progress-bar.component.d.ts

@@ -4,9 +4,6 @@ import { DaffColorableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 export declare const clamp: (number: number, min: number, max: number) => number;
-/**
- * @inheritdoc
- */
 export declare class DaffProgressBarComponent {
     private _changeDetectorRef;
     private colorable;
@@ -18,10 +15,25 @@ export declare class DaffProgressBarComponent {
      * @docs-private
      */
     get indeterminateClass(): boolean;
+    /**
+     * @docs-private
+     */
     get role(): string;
+    /**
+     * @docs-private
+     */
     get ariaLabel(): string;
+    /**
+     * @docs-private
+     */
     ariaValueMin: string;
+    /**
+     * @docs-private
+     */
     ariaValueMax: string;
+    /**
+     * @docs-private
+     */
     get ariaValueNow(): number;
     constructor(_changeDetectorRef: ChangeDetectorRef, colorable: DaffColorableDirective);
     private _percentage;

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

@@ -11,33 +11,42 @@
 	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-progress-bar {
 		$root: '.daff-progress-bar';
 
 		#{$root}__label {
-			color: theming.daff-illuminate($base-contrast, $neutral, 2);
+			color: theming.daff-text-contrast($base);
 		}
 
-		#{$root}__track {
-			background: theming.daff-illuminate($base, $neutral, 2);
+		@include theming.light($type) {
+			#{$root}__track {
+				background: theming.daff-color($neutral, 30);
+			}
+		}
+
+		@include theming.dark($type) {
+			#{$root}__track {
+				background: theming.daff-color($neutral, 80);
+			}
 		}
 
 		&.daff-primary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $primary, 6);
+				background: theming.daff-color($primary);
 			}
 		}
 
 		&.daff-secondary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $secondary, 6);
+				background: theming.daff-color($secondary);
 			}
 		}
 
 		&.daff-tertiary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $tertiary, 6);
+				background: theming.daff-color($tertiary);
 			}
 		}
 
@@ -53,13 +62,13 @@
 			}
 		}
 
-		&.daff-white {
+		&.daff-light {
 			#{$root}__fill {
 				background: $white;
 			}
 		}
 
-		&.daff-black {
+		&.daff-dark {
 			#{$root}__fill {
 				background: $black;
 			}

package/public_api.d.ts

@@ -1,6 +1,7 @@
 export * from './atoms/form/core/public_api';
 export * from './atoms/form/form-field/public_api';
 export * from './atoms/form/error-message/public_api';
+export * from './atoms/form/hint/public_api';
 export * from './atoms/form/input/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';

package/scss/state/skeleton/_mixins.scss

@@ -4,19 +4,20 @@
 @mixin daff-skeleton-theme($theme) {
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 	$base: core.daff-map-get($theme, 'core', 'base');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-skeleton {
-		&::before,
-		::before {
-			background: theming.daff-illuminate($base, $neutral, 2);
+		@include theming.light($type) {
+			&::before,
+			::before {
+				background: theming.daff-color($neutral, 20);
+			}
 		}
 
-		@keyframes loading {
-			from {
-				opacity: 0.5;
-			}
-			to {
-				opacity: 1;
+		@include theming.dark($type) {
+			&::before,
+			::before {
+				background: theming.daff-color($neutral, 90);
 			}
 		}
 	}
@@ -39,4 +40,13 @@
 		top: 0;
 		left: 0;
 	}
+
+	@keyframes loading {
+		from {
+			opacity: 0.5;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 }

package/scss/theme.scss

@@ -27,6 +27,7 @@
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
+@use '../src/atoms/form/hint/hint-theme' as hint;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
 @use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
@@ -86,6 +87,7 @@
 
 	@include form-field.daff-form-field-theme($theme);
 	@include error-message.daff-error-message-theme($theme);
+	@include hint.daff-hint-theme($theme);
 	@include input.daff-input-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
 

package/sidebar/public_api.d.ts

@@ -1,15 +1,14 @@
 export { DaffSidebarModule } from './sidebar.module';
-export * from './service/registration.type';
-export * from './service/sidebar.service';
-export * from './sidebar-viewport/sidebar-viewport.component';
-export * from './sidebar/sidebar.component';
-export * from './sidebar-header/sidebar-header.component';
-export * from './sidebar-footer/sidebar-footer.component';
-export * from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
-export * from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
-export * from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
+export { DaffSidebarRegistration } from './service/registration.type';
+export { DaffSidebarService } from './service/sidebar.service';
+export { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
+export { DaffSidebarComponent } from './sidebar/sidebar.component';
+export { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
+export { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
+export { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
+export { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
 export { DaffSidebarMode, DaffSidebarModeEnum, } from './helper/sidebar-mode';
 export { DaffSidebarSide, DaffSidebarSideEnum, } from './helper/sidebar-side';
-export * from './helper/is-docked-mode';
-export * from './helper/is-floating-mode';
+export { daffSidebarIsDockedMode } from './helper/is-docked-mode';
+export { daffSidebarIsFloatingMode } from './helper/is-floating-mode';
 export { DAFF_SIDEBAR_COMPONENTS } from './sidebar';

package/sidebar/sidebar.d.ts

@@ -4,8 +4,7 @@ import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-heade
 import { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
 import { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
-import { DaffSidebarViewportBackdropComponent } from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
 /**
  * @docs-private
  */
-export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective, typeof DaffSidebarViewportBackdropComponent];
+export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective];

package/sidebar/sidebar.module.d.ts

@@ -7,12 +7,11 @@ import * as i5 from "./sidebar-header/sidebar-header.component";
 import * as i6 from "./sidebar-footer/sidebar-footer.component";
 import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.directive";
 import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
-import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
 /**
  * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffSidebarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffSidebarModule>;
 }

package/src/atoms/form/error-message/error-message-theme.scss

@@ -1,7 +1,10 @@
 @use '../../../../scss/theming';
+@use '../../../../scss/core';
 
 @mixin daff-error-message-theme($theme) {
+	$critical: core.daff-map-get($theme, critical);
+
 	.daff-error-message {
-		color: theming.daff-color(theming.$daff-red, 60);
+		color: theming.daff-color($critical);
 	}
 }

package/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -6,32 +6,44 @@
 	$primary: core.daff-map-get($theme, primary);
 	$secondary: core.daff-map-get($theme, secondary);
 	$tertiary: core.daff-map-get($theme, tertiary);
+	$critical: core.daff-map-get($theme, critical);
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-form-field {
 		&__control {
 			background: $base;
-			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
-			color: theming.daff-illuminate($base-contrast, $neutral, 4);
 
-			&:focus {
-				border: 1px solid $base-contrast;
+			@include theming.light($type) {
+				border: 1px solid theming.daff-color($neutral);
+				color: theming.daff-color($neutral);
+			}
+
+			@include theming.dark($type) {
+				border: 1px solid theming.daff-color($neutral, 40);
+				color: theming.daff-color($neutral, 40);
+			}
+
+			&.daff-focused {
+				border: 1px solid theming.daff-color($primary);
+
+				.daff-form-label {
+					color: theming.daff-color($primary);
+				}
 			}
 
 			&.daff-error {
-				border: 1px solid theming.daff-color(theming.$daff-red, 60);
+				border: 1px solid theming.daff-color($critical);
 
-				&:focus {
-					border: 1px solid theming.daff-color(theming.$daff-red, 60);
+				.daff-form-label {
+					color: theming.daff-color($critical);
 				}
 			}
 
 			&.daff-valid {
-				> * {
-					color: $base-contrast;
-				}
+				color: $base-contrast;
 			}
 		}
 	}

package/src/atoms/form/hint/hint-theme.scss

@@ -0,0 +1,17 @@
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-hint-theme($theme) {
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
+
+	.daff-hint {
+		@include theming.light($type) {
+			color: theming.daff-color($neutral, 80);
+		}
+
+		@include theming.dark($type) {
+			color: theming.daff-color($neutral, 30);
+		}
+	}
+}

package/src/atoms/form/input/input-theme.scss

@@ -5,12 +5,8 @@
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 
-	:host {
+	.daff-input {
 		background: $base;
 		color: $base-contrast;
-
-		&::placeholder {
-			color: transparent;
-		}
 	}
 }

package/switch/src/switch-theme.scss

@@ -4,27 +4,46 @@
 
 @mixin daff-switch-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-switch {
 		&__toggle {
-			background-color: theming.daff-illuminate($base, $neutral, 3);
 			border: 2px solid transparent;
 
-			&:focus-within {
-				border: 2px solid theming.daff-illuminate($base, $neutral, 2);
-			}
-
 			&.daff-checked {
 				background-color: theming.daff-color($primary);
 			}
 
-			&::before {
-				background-color: $base;
+			@include theming.light($type) {
+				background-color: theming.daff-color($neutral, 30);
+
+				&:focus-within {
+					border: 2px solid theming.daff-color($neutral, 20);
+				}
+
+				&::before {
+					background-color: $white;
+				}
+			}
+
+			@include theming.dark($type) {
+				background-color: theming.daff-color($neutral, 80);
+
+				&:focus-within {
+					border: 2px solid theming.daff-color($neutral, 90);
+				}
+
+				&::before {
+					background-color: theming.daff-color($neutral, 40);
+				}
+
+				&.daff-checked {
+					&::before {
+						background-color: $white;
+					}
+				}
 			}
 		}
 	}