@daffodil/design 0.84.0 → 0.86.0

package/hero/src/hero-theme.scss

@@ -1,53 +1,51 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-hero-theme-variant($color) {
 	background: $color;
-	color: theming.daff-text-contrast($color);
+	color: daff-text-contrast($color);
 }
 
 @mixin daff-hero-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-hero {
-		@include theming.light($type) {
-			@include daff-hero-theme-variant(theming.daff-color($neutral, 10));
+		@include light($mode) {
+			@include daff-hero-theme-variant(daff-color($neutral, 10));
 
 			&.daff-primary {
-				@include daff-hero-theme-variant(theming.daff-color($primary));
+				@include daff-hero-theme-variant(daff-color($primary));
 			}
 
 			&.daff-secondary {
-				@include daff-hero-theme-variant(theming.daff-color($secondary));
+				@include daff-hero-theme-variant(daff-color($secondary));
 			}
 
 			&.daff-tertiary {
-				@include daff-hero-theme-variant(theming.daff-color($tertiary));
+				@include daff-hero-theme-variant(daff-color($tertiary));
 			}
 		}
 
-		@include theming.dark($type) {
-			@include daff-hero-theme-variant(theming.daff-color($neutral, 90));
+		@include dark($mode) {
+			@include daff-hero-theme-variant(daff-color($neutral, 90));
 
 			&.daff-primary {
-				@include daff-hero-theme-variant(theming.daff-color($primary, 60));
+				@include daff-hero-theme-variant(daff-color($primary, 60));
 			}
 
 			&.daff-secondary {
-				@include daff-hero-theme-variant(theming.daff-color($secondary, 60));
+				@include daff-hero-theme-variant(daff-color($secondary, 60));
 			}
 
 			&.daff-tertiary {
-				@include daff-hero-theme-variant(theming.daff-color($tertiary, 60));
+				@include daff-hero-theme-variant(daff-color($tertiary, 60));
 			}
 		}
 

package/input/README.md

@@ -0,0 +1,66 @@
+# Input
+The input component allows a native HTML input element to work with the form field component.
+
+## Overview
+The input component has the same functionality as a native HTML `<input>` element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [DaffFormFieldComponent](/libs/design/src/atoms/form/form-field/README.md).
+
+<design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use form field in a standalone component, import `DaffInputComponent` directly into your custom component:
+
+```ts
+import { DaffInputComponent } from '@daffodil/design/input';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffInputComponent,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use form field in a module, import `DaffInputModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { DaffInputModule } from '@daffodil/design/input';
+import { CustomComponent } from './custom.component';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffInputModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Examples
+
+### Disabled input
+The input in this example is disabled using the native HTML disabled attribute.
+
+<design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
+
+### Input with error messages
+The input in this example uses the `ReactiveFormsModule` to display errors.
+
+<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
+
+### Input with hint
+The input in this example has a hint.
+
+<design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>

package/input/examples/input-hint-and-error/input-hint-and-error.component.d.ts

@@ -0,0 +1,9 @@
+import { UntypedFormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class InputHintAndErrorComponent {
+    faCheck: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    control: UntypedFormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputHintAndErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputHintAndErrorComponent, "input-hint-and-error", never, {}, {}, never, never, true, never>;
+}

package/input/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/{atoms/form/input → input}/input.component.d.ts

@@ -1,31 +1,47 @@
-import { ElementRef, OnInit } from '@angular/core';
+import { ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { DaffFormFieldControl } from '../form-field/form-field-control';
+import { DaffFormFieldComponent, DaffFormFieldControl } from '@daffodil/design';
 import * as i0 from "@angular/core";
 /**
  * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
  */
-export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
+export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnChanges {
     /** @docs-private */
     ngControl: NgControl;
     private _elementRef;
+    private formField;
     /** @docs-private */
     class: boolean;
     /** @docs-private */
     controlType: string;
+    /** @docs-private */
     focused: boolean;
     /** @docs-private */
     focus(): void;
+    private _id;
+    /**
+     * @docs-private
+     */
+    get internalId(): string;
+    /**
+     * @docs-private
+     */
+    get ariaDescribedBy(): string;
     /** @docs-private */
     blur(): void;
     constructor(
     /** @docs-private */
-    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>);
+    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes: SimpleChanges): void;
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
     onFocus(): void;
+    /** @docs-private */
     get value(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, {}, {}, never, ["*"], true, never>;
 }

package/list/src/list-theme.scss

@@ -1,13 +1,11 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 // styleline-disable selector-class-pattern
 @mixin daff-list-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-nav-list {
 		.daff-list-item {
@@ -15,20 +13,20 @@
 				background-color: $base;
 			}
 
-			@include theming.light($type) {
+			@include light($mode) {
 				&:hover,
 				&.active {
 					&::after {
-						background-color: rgba(theming.daff-color($neutral, 20), 0.5);
+						background-color: rgba(daff-color($neutral, 20), 0.5);
 					}
 				}
 			}
 
-			@include theming.dark($type) {
+			@include dark($mode) {
 				&:hover,
 				&.active {
 					&::after {
-						background-color: rgba(theming.daff-color($neutral, 20), 0.08);
+						background-color: rgba(daff-color($neutral, 20), 0.08);
 					}
 				}
 			}

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-loading-icon-light-variant($loader-color) {
 	.daff-loading-icon__loader {
@@ -23,34 +21,34 @@
 }
 
 @mixin daff-loading-icon-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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-loading-icon {
-		@include theming.light($type) {
+		@include light($mode) {
 			@include daff-loading-icon-light-variant(
-				theming.daff-color($neutral, 60)
+				daff-color($neutral, 60)
 			);
 
 			&.daff-primary {
-				@include daff-loading-icon-light-variant(theming.daff-color($primary));
+				@include daff-loading-icon-light-variant(daff-color($primary));
 			}
 
 			&.daff-secondary {
 				@include daff-loading-icon-light-variant(
-					theming.daff-color($secondary)
+					daff-color($secondary)
 				);
 			}
 
 			&.daff-tertiary {
-				@include daff-loading-icon-light-variant(theming.daff-color($tertiary));
+				@include daff-loading-icon-light-variant(daff-color($tertiary));
 			}
 
 			&.daff-theme {
@@ -70,19 +68,19 @@
 			}
 		}
 
-		@include theming.dark($type) {
-			@include daff-loading-icon-dark-variant(theming.daff-color($neutral, 40));
+		@include dark($mode) {
+			@include daff-loading-icon-dark-variant(daff-color($neutral, 40));
 
 			&.daff-primary {
-				@include daff-loading-icon-dark-variant(theming.daff-color($primary));
+				@include daff-loading-icon-dark-variant(daff-color($primary));
 			}
 
 			&.daff-secondary {
-				@include daff-loading-icon-dark-variant(theming.daff-color($secondary));
+				@include daff-loading-icon-dark-variant(daff-color($secondary));
 			}
 
 			&.daff-tertiary {
-				@include daff-loading-icon-dark-variant(theming.daff-color($tertiary));
+				@include daff-loading-icon-dark-variant(daff-color($tertiary));
 			}
 
 			&.daff-theme {

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

@@ -17,10 +17,6 @@ import * as i1 from "@daffodil/design";
  */
 export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration {
     private skeletonDirective;
-    /**
-     * @docs-private
-     */
-    role: string;
     /**
      * The internal ID of the gallery.
      */

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

@@ -1,31 +1,29 @@
-@use 'sass:map';
-@use '../../scss/theming';
-@use '../../scss/core';
+@use '../../scss/theming' as *;
 
 @mixin daff-media-gallery-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$white: daff-get-base-color($theme, 'white');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-media-gallery {
 		$root: &;
 
-		@include theming.light($type) {
+		@include light($mode) {
 			.daff-thumbnail {
-				background: theming.daff-color($neutral, 20);
+				background: daff-color($neutral, 20);
 
 				&.daff-selected {
-					border: 1px solid theming.daff-color($neutral);
+					border: 1px solid daff-color($neutral);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			.daff-thumbnail {
-				background: theming.daff-color($neutral, 70);
+				background: daff-color($neutral, 70);
 
 				&.daff-selected {
-					border: 1px solid theming.daff-color($neutral, 30);
+					border: 1px solid daff-color($neutral, 30);
 				}
 			}
 		}

package/menu/helpers/create-overlay.d.ts

@@ -1,3 +1,3 @@
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ElementRef } from '@angular/core';
-export declare function daffMenuCreateOverlay(overlay: Overlay, element: ElementRef, config?: OverlayConfig): import("@angular/cdk/overlay").OverlayRef;
+export declare function daffMenuCreateOverlay(overlay: Overlay, element: ElementRef, config?: OverlayConfig): import("@angular/cdk/overlay-module.d-B3qEQtts").b;

package/menu/src/menu-theme.scss

@@ -1,14 +1,13 @@
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-menu-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$black: daff-get-base-color($theme, 'black');
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
 
-	@include theming.light($type) {
+	@include light($mode) {
 		.daff-menu {
 			background: $base;
 			box-shadow: 0 0 24px rgb($black, 0.12);
@@ -20,12 +19,12 @@
 
 			&:hover,
 			&:focus {
-				background: rgba(theming.daff-color($neutral, 20), 0.5);
+				background: rgba(daff-color($neutral, 20), 0.5);
 			}
 		}
 	}
 
-	@include theming.dark($type) {
+	@include dark($mode) {
 		.daff-menu {
 			background: $base;
 			box-shadow: 0 0 24px rgb($black, 0.12);
@@ -37,7 +36,7 @@
 
 			&:hover,
 			&:focus {
-				background: rgba(theming.daff-color($neutral, 20), 0.08);
+				background: rgba(daff-color($neutral, 20), 0.08);
 			}
 		}
 	}

package/modal/src/modal-theme.scss

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

package/navbar/src/navbar-theme.scss

@@ -1,30 +1,28 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-navbar-theme-variant($color) {
 	background: $color;
-	color: theming.daff-text-contrast($color);
+	color: daff-text-contrast($color);
 }
 
 @mixin daff-navbar-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-navbar {
-		@include theming.light($type) {
-			@include daff-navbar-theme-variant(theming.daff-color($neutral, 10));
+		@include light($mode) {
+			@include daff-navbar-theme-variant(daff-color($neutral, 10));
 		}
 
-		@include theming.dark($type) {
-			@include daff-navbar-theme-variant(theming.daff-color($neutral, 90));
+		@include dark($mode) {
+			@include daff-navbar-theme-variant(daff-color($neutral, 90));
 		}
 
 		&--raised {
@@ -32,15 +30,15 @@
 		}
 
 		&.daff-primary {
-			@include daff-navbar-theme-variant(theming.daff-color($primary));
+			@include daff-navbar-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-navbar-theme-variant(theming.daff-color($secondary));
+			@include daff-navbar-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-navbar-theme-variant(theming.daff-color($tertiary));
+			@include daff-navbar-theme-variant(daff-color($tertiary));
 		}
 
 		&.daff-black {

package/notification/src/notification-theme.scss

@@ -1,91 +1,89 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-notification-theme($theme) {
-	$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');
-	$black: core.daff-map-get($theme, 'core', 'black');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$info: daff-get-palette($theme, informational);
+	$warn: daff-get-palette($theme, warn);
+	$critical: daff-get-palette($theme, critical);
+	$success: daff-get-palette($theme, success);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$black: daff-get-base-color($theme, 'black');
+	$white: daff-get-base-color($theme, 'white');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-notification {
-		@include theming.light($type) {
-			background: theming.daff-color($neutral, 10);
-			border: 1px solid theming.daff-color($neutral, 20);
+		@include light($mode) {
+			background: daff-color($neutral, 10);
+			border: 1px solid 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));
+				background: daff-color($success, 10);
+				border: 1px solid daff-color($success, 20);
+				color: daff-text-contrast(daff-color($success, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($success, 80);
+					color: 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));
+				background: daff-color($warn, 10);
+				border: 1px solid daff-color($warn, 20);
+				color: daff-text-contrast(daff-color($warn, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 80);
+					color: 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));
+				background: daff-color($critical, 10);
+				border: 1px solid daff-color($critical, 20);
+				color: daff-text-contrast(daff-color($critical, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 80);
+					color: daff-color($critical, 80);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
-			background: theming.daff-color($neutral, 90);
-			border: 1px solid theming.daff-color($neutral, 80);
+		@include dark($mode) {
+			background: daff-color($neutral, 90);
+			border: 1px solid 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));
+				background: daff-color($success, 90);
+				border: 1px solid daff-color($success, 80);
+				color: daff-text-contrast(daff-color($success, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($success, 30);
+					color: 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));
+				background: daff-color($warn, 90);
+				border: 1px solid daff-color($warn, 80);
+				color: daff-text-contrast(daff-color($warn, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 30);
+					color: 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));
+				background: daff-color($critical, 90);
+				border: 1px solid daff-color($critical, 80);
+				color: daff-text-contrast(daff-color($critical, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 30);
+					color: daff-color($critical, 30);
 				}
 			}
 		}