@daffodil/design 0.78.0 → 0.80.0

package/hero/hero.module.d.ts

@@ -7,7 +7,7 @@ import * as i5 from "./hero-title/hero-title.directive";
 import * as i6 from "./hero-subtitle/hero-subtitle.directive";
 import * as i7 from "./hero-body/hero-body.directive";
 /**
- * @deprecated in favor of {@link DAFF_HERO_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_HERO_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  * */
 export declare class DaffHeroModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroModule, never>;

package/hero/src/hero-theme.scss

@@ -8,14 +8,14 @@
 }
 
 @mixin daff-hero-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$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');
 
 	.daff-hero {
 		@include daff-hero-theme-variant(
@@ -23,21 +23,15 @@
 		);
 
 		&.daff-primary {
-			@include daff-hero-theme-variant(
-				theming.daff-color($primary)
-			);
+			@include daff-hero-theme-variant(theming.daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-hero-theme-variant(
-				theming.daff-color($secondary)
-			);
+			@include daff-hero-theme-variant(theming.daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-hero-theme-variant(
-				theming.daff-color($tertiary)
-			);
+			@include daff-hero-theme-variant(theming.daff-color($tertiary));
 		}
 
 		&.daff-theme {

package/image/README.md

@@ -1,5 +1,8 @@
 # Image
-Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. `<daff-image>` is an opinionated version that encourages friendly end-user usage.
+Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. 
+
+## Overview
+`<daff-image>` is an opinionated version that encourages friendly end-user usage.
 
 <design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
 

package/image/image.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./image/image.component";
 /**
- * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  * */
 export declare class DaffImageModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffImageModule, never>;

package/link-set/README.md

@@ -1,5 +1,5 @@
 # Link Set
-`<daff-link-set>` is a component for displaying two or more `[daff-link-set-item]`s. `<daff-link-set>`s can be nested.
+Link set is a component for displaying two or more link set items.
 
 ## Usage
 

package/link-set/link-set.module.d.ts

@@ -5,7 +5,7 @@ import * as i3 from "./link-set-heading/link-set-heading.directive";
 import * as i4 from "./link-set-subheading/link-set-subheading.directive";
 import * as i5 from "./link-set-item/link-set-item.component";
 /**
- * @deprecated in favor of {@link DAFF_LINK_SET_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_LINK_SET_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffLinkSetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetModule, never>;

package/list/list-item/list-item.component.d.ts

@@ -7,6 +7,8 @@ export declare class DaffListItemComponent {
      * @docs-private
      */
     class: boolean;
+    /** Whether or not the header item is active */
+    active: boolean;
     /**
      * @docs-private
      */
@@ -26,5 +28,5 @@ export declare class DaffListItemComponent {
     /** Gets whether a list item has one of the given attributes. */
     private _isAnchor;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, { "active": { "alias": "active"; "required": false; }; }, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/list/list.module.d.ts

@@ -4,7 +4,7 @@ import * as i2 from "./list/list.component";
 import * as i3 from "./list-item/list-item.component";
 import * as i4 from "@daffodil/design";
 /**
- * @deprecated in favor of {@link DAFF_LIST_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_LIST_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListModule, never>;

package/list/src/list-theme.scss

@@ -2,19 +2,22 @@
 @use '../../scss/core';
 @use '../../scss/theming';
 
+// styleline-disable selector-class-pattern
 @mixin daff-list-theme($theme) {
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$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');
 
 	.daff-list {
 		.daff-list-item {
 			&__content {
-				*:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
+				// stylelint-disable-next-line scss/selector-nest-combinators
+				*:nth-child(1) {
 					color: $base-contrast;
 				}
 
-				*:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
+				// stylelint-disable-next-line scss/selector-nest-combinators
+				*:nth-child(n + 2) {
 					color: theming.daff-illuminate($base-contrast, $neutral, 3);
 				}
 			}
@@ -23,13 +26,14 @@
 
 	.daff-nav-list {
 		.daff-list-item {
-			&:after {
+			&::after {
 				background-color: $base;
 			}
 
-			&:hover {
-				&:after {
-					background-color: theming.daff-illuminate($base, $neutral, 1);
+			&:hover,
+			&.active {
+				&::after {
+					background-color: theming.daff-illuminate($base, $neutral, 2);
 				}
 			}
 		}

package/loading-icon/README.md

@@ -45,11 +45,6 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Diameter
-The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
-
-<design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
-
 ## Theming
 The loading icon 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.
 

package/loading-icon/examples/examples.d.ts

@@ -1,2 +1,2 @@
-import { LoadingIconDiameterComponent } from './loading-icon-diameter/loading-icon-diameter.component';
-export declare const LOADING_ICON_EXAMPLES: (typeof LoadingIconDiameterComponent)[];
+import { LoadingIconColorComponent } from './loading-icon-color/loading-icon-color.component';
+export declare const LOADING_ICON_EXAMPLES: (typeof LoadingIconColorComponent)[];

package/loading-icon/loading-icon/loading-icon.component.d.ts

@@ -4,18 +4,10 @@ import * as i1 from "@daffodil/design";
  * @inheritdoc
  */
 export declare class DaffLoadingIconComponent {
-    /**
-     * The (pixel) diameter of the animation
-     */
-    diameter: number;
     /**
      * @docs-private
      */
     class: boolean;
-    /**
-     * @docs-private
-     */
-    get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, {}, {}, never, never, true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/loading-icon/loading-icon.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./loading-icon/loading-icon.component";
 /**
- * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffLoadingIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconModule, never>;

package/loading-icon/src/loading-icon-theme.scss

@@ -3,13 +3,13 @@
 @use '../../scss/theming';
 
 @mixin daff-loading-icon-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$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');
 
 	.daff-loading-icon {
 		&__loader {

package/media-gallery/README.md

@@ -1,5 +1,8 @@
 # Media Gallery
-`<daff-media-gallery>` is used to display a group of `[daffThumbnail]`s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
+Media gallery is used to display a group of thumbnails in a gallery format.
+
+## Overview
+Media galleries are useful to showcase multiple images related to a single product or topic.
 
 ## Usage
 

package/media-gallery/helpers/media-gallery-token.d.ts

@@ -1,3 +1,2 @@
-import { InjectionToken } from '@angular/core';
 import { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';
-export declare const DAFF_MEDIA_GALLERY_TOKEN: InjectionToken<DaffMediaGalleryRegistration>;
+export declare const DAFF_MEDIA_GALLERY_TOKEN: import("@angular/core").InjectionToken<DaffMediaGalleryRegistration>, provideDaffMediaGalleryToken: <R extends DaffMediaGalleryRegistration = DaffMediaGalleryRegistration>(value: R) => import("@angular/core").ValueProvider;

package/media-gallery/media-gallery.module.d.ts

@@ -4,7 +4,7 @@ import * as i2 from "./media-gallery/media-gallery.component";
 import * as i3 from "./thumbnail/thumbnail.directive";
 import * as i4 from "./media-renderer/media-renderer.component";
 /**
- * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_MEDIA_GALLERY_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffMediaGalleryModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryModule, never>;

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

@@ -3,7 +3,7 @@
 @use '../../scss/core';
 
 @mixin daff-media-gallery-theme($theme) {
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 
 	.daff-media-gallery {
 		$root: &;
@@ -11,14 +11,14 @@
 		.daff-thumbnail {
 			border: 1px solid transparent;
 
-			&--selected {
+			&.daff-selected {
 				border: 1px solid theming.daff-color($neutral);
 			}
 		}
 
 		&.daff-skeleton {
 			.daff-thumbnail {
-				&--selected {
+				&.daff-selected {
 					border: none;
 				}
 			}

package/media-gallery/thumbnail/thumbnail-compat.token.d.ts

@@ -1,5 +1 @@
-import { InjectionToken } from '@angular/core';
-/**
- * A multi provider injection token that marks a component as renderable for the `DaffMediaRendererComponent`.
- */
-export declare const daffThumbnailCompatToken: InjectionToken<unknown>;
+export declare const daffThumbnailCompatToken: import("@angular/core").InjectionToken<unknown>, provideDaffThumbnailCompatToken: <R extends unknown = unknown>(value: R) => import("@angular/core").ValueProvider;

package/media-gallery/thumbnail/thumbnail.directive.d.ts

@@ -1,34 +1,27 @@
-import { Type, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { Type, OnInit, OnDestroy } from '@angular/core';
+import { DaffSelectableDirective } from '@daffodil/design';
 import { DaffThumbnailRegistration } from './thumbnail-registration.interface';
 import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
 /**
  * A directive marking thumbnails for the `DaffMediaRendererComponent`. Needs to be wrapped in a `daff-media-gallery` component
  * and needs to be placed on a component that is provided as a `daffThumbnailCompatToken`.
  */
 export declare class DaffThumbnailDirective implements OnInit, OnDestroy, DaffThumbnailRegistration {
     component: Type<unknown>;
-    private cd;
     private registry;
     gallery: DaffMediaGalleryRegistration;
-    /**
-     * Adds a class for styling a selected thumbnail
-     */
-    get selectedClass(): boolean;
-    constructor(component: Type<unknown>, cd: ChangeDetectorRef, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration);
+    private selectedDirective;
+    constructor(component: Type<unknown>, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration, selectedDirective: DaffSelectableDirective);
+    get selected(): boolean;
+    select(): this;
+    deselect(): this;
     /**
      * Adds a class for styling a thumbnail
      */
     class: boolean;
-    /**
-     * A prop for determining whether or not the media element is selected.
-     */
-    selected: boolean;
-    /**
-     * An event that fires after the media element becomes selected.
-     */
-    becameSelected: EventEmitter<void>;
     /**
      * Adds a click event to trigger selection of the media element.
      *
@@ -37,8 +30,6 @@ export declare class DaffThumbnailDirective implements OnInit, OnDestroy, DaffTh
     onClick($event: MouseEvent): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    select(): this;
-    deselect(): this;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffThumbnailDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffThumbnailDirective, "[daffThumbnail]", never, {}, { "becameSelected": "becameSelected"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffThumbnailDirective, "[daffThumbnail]", never, {}, {}, never, never, true, [{ directive: typeof i1.DaffSelectableDirective; inputs: { "selected": "selected"; }; outputs: { "becameSelected": "becameSelected"; }; }]>;
 }

package/menu/src/menu-theme.scss

@@ -2,11 +2,11 @@
 @use '../../scss/theming';
 
 @mixin daff-menu-theme($theme) {
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-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');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 
 	.daff-menu {
 		background: $base;

package/modal/modal.module.d.ts

@@ -11,7 +11,7 @@ import * as i9 from "./modal-content/modal-content.component";
 import * as i10 from "./modal-actions/modal-actions.component";
 import * as i11 from "./modal-close/modal-close.directive";
 /**
- * @deprecated in favor of {@link DAFF_MODAL_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_MODAL_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalModule, never>;

package/modal/src/modal-theme.scss

@@ -1,7 +1,7 @@
 @use '../../scss/core';
 
 @mixin daff-modal-theme($theme) {
-	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base: core.daff-map-get($theme, 'core', 'base');
 
 	.daff-modal {
 		background: $base;

package/navbar/navbar.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./navbar/navbar.component";
 /**
- * @deprecated in favor of {@link DAFF_NAVBAR_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_NAVBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNavbarModule, never>;

package/navbar/src/navbar-theme.scss

@@ -8,14 +8,14 @@
 }
 
 @mixin daff-navbar-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$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');
 
 	.daff-navbar {
 		@include daff-navbar-theme-variant(

package/notification/README.md

@@ -69,7 +69,7 @@ Buttons can be included in notifications to resolve the notification or navigate
 ### Statuses
 The status color of a notification can be updated by using the `status` property.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 #### Notification with statuses
 <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
@@ -87,4 +87,4 @@ The close button is hidden by default but can be visible by setting the `dismiss
 <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
 
 ## Accessibility
-Notifications with a `danger` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.
+Notifications with a `critical` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.

package/notification/notification/notification.component.d.ts

@@ -16,7 +16,7 @@ export declare class DaffNotificationComponent implements DaffPrefixable {
     class: boolean;
     tabindex: string;
     /**
-     * Sets role to alert when `status="warn"` or `status="danger"`.
+     * Sets role to alert when `status="warn"` or `status="critical"`.
      * Sets role to status on all other instances.
      */
     get role(): "status" | "alert";

package/notification/notification.module.d.ts

@@ -8,7 +8,7 @@ import * as i6 from "./notification-message/notification-message.directive";
 import * as i7 from "./notification-title/notification-title.directive";
 import * as i8 from "./notification-subtitle/notification-subtitle.directive";
 /**
- * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}
+ * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffNotificationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationModule, never>;

package/notification/src/notification-theme.scss

@@ -3,14 +3,18 @@
 @use '../../scss/theming';
 
 @mixin daff-notification-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$info: core.daff-map-get($theme, informational);
+	$warn: core.daff-map-get($theme, warn);
+	$critical: core.daff-map-get($theme, critical);
+	$success: core.daff-map-get($theme, success);
+	$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');
 
 	.daff-notification {
 		background: theming.daff-illuminate($base, $neutral, 1);
@@ -18,32 +22,32 @@
 		color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 1));
 
 		&.daff-success {
-			background: theming.daff-color(theming.$daff-green, 10);
-			border: 1px solid theming.daff-color(theming.$daff-green, 20);
-			color: theming.daff-text-contrast(theming.daff-color(theming.$daff-green, 10));
+			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(theming.$daff-green, 60);
+				color: theming.daff-color($success);
 			}
 		}
 
 		&.daff-warn {
-			background: theming.daff-color(theming.$daff-bronze, 10);
-			border: 1px solid theming.daff-color(theming.$daff-bronze, 20);
-			color: theming.daff-text-contrast(theming.daff-color(theming.$daff-bronze, 10));
+			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(theming.$daff-bronze, 60);
+				color: theming.daff-color($warn);
 			}
 		}
 
-		&.daff-danger {
-			background: theming.daff-color(theming.$daff-red, 10);
-			border: 1px solid theming.daff-color(theming.$daff-red, 20);
-			color: theming.daff-text-contrast(theming.daff-color(theming.$daff-red, 10));
+		&.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(theming.$daff-red, 60);
+				color: theming.daff-color($critical);
 			}
 		}
 	}