@daffodil/design 0.84.0 → 0.85.0

package/accordion/src/accordion-theme.scss

@@ -1,19 +1,17 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-accordion-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-accordion-item {
-		@include theming.light($type) {
-			border-top: 1px solid theming.daff-color($neutral, 20);
+		@include light($mode) {
+			border-top: 1px solid daff-color($neutral, 20);
 
 			&:last-child {
-				border-bottom: 1px solid theming.daff-color($neutral, 20);
+				border-bottom: 1px solid daff-color($neutral, 20);
 			}
 
 			.daff-accordion-item__header {
@@ -25,11 +23,11 @@
 			}
 		}
 
-		@include theming.dark($type) {
-			border-top: 1px solid theming.daff-color($neutral, 80);
+		@include dark($mode) {
+			border-top: 1px solid daff-color($neutral, 80);
 
 			&:last-child {
-				border-bottom: 1px solid theming.daff-color($neutral, 80);
+				border-bottom: 1px solid daff-color($neutral, 80);
 			}
 
 			.daff-accordion-item__header {

package/article/src/article-theme.scss

@@ -1,22 +1,20 @@
-@use 'sass:map';
 @use './article/stops-article-cascade' as *;
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-article-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
-	$link-color-light: theming.daff-color($primary);
-	$link-color-dark: theming.daff-color($primary, 40);
-	$text-color-light: theming.daff-color($neutral, 90);
-	$text-color-dark: theming.daff-color($neutral, 10);
-	$table-border-light: theming.daff-color($neutral, 20);
-	$table-border-dark: theming.daff-color($neutral, 80);
+	$link-color-light: daff-color($primary);
+	$link-color-dark: daff-color($primary, 40);
+	$text-color-light: daff-color($neutral, 90);
+	$text-color-dark: daff-color($neutral, 10);
+	$table-border-light: daff-color($neutral, 20);
+	$table-border-dark: daff-color($neutral, 80);
 
 	.daff-article {
-		@include theming.light($type) {
+		@include light($mode) {
 			color: $text-color-light;
 
 			@include stopsArticleCascade(a) {
@@ -25,12 +23,12 @@
 			}
 
 			code {
-				background: rgba(theming.daff-color($neutral, 20), 0.5);
+				background: rgba(daff-color($neutral, 20), 0.5);
 			}
 
 			pre {
-				background: rgba(theming.daff-color($neutral, 20), 0.3);
-				border: 1px solid theming.daff-color($neutral, 20);
+				background: rgba(daff-color($neutral, 20), 0.3);
+				border: 1px solid daff-color($neutral, 20);
 
 				code {
 					background: none;
@@ -39,21 +37,21 @@
 			}
 
 			hr {
-				background: theming.daff-color($neutral, 20);
+				background: daff-color($neutral, 20);
 			}
 
 			blockquote {
-				background: rgba(theming.daff-color($primary), 0.1);
-				border-left: 4px solid theming.daff-color($primary, 50);
-				color: theming.daff-color($primary, 100);
+				background: rgba(daff-color($primary), 0.1);
+				border-left: 4px solid daff-color($primary, 50);
+				color: daff-color($primary, 100);
 
 				code {
-					background: rgba(theming.daff-color($primary), 0.12);
-					color: theming.daff-color($primary, 100);
+					background: rgba(daff-color($primary), 0.12);
+					color: daff-color($primary, 100);
 
 					@include stopsArticleCascade(a) {
-						color: theming.daff-color($primary, 70);
-						text-decoration-color: theming.daff-color($primary, 70);
+						color: daff-color($primary, 70);
+						text-decoration-color: daff-color($primary, 70);
 					}
 				}
 			}
@@ -62,7 +60,7 @@
 				border: 1px solid $table-border-light;
 
 				th {
-					background: theming.daff-color($neutral, 10);
+					background: daff-color($neutral, 10);
 				}
 
 				th,
@@ -89,7 +87,7 @@
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			color: $text-color-dark;
 
 			@include stopsArticleCascade(a) {
@@ -98,12 +96,12 @@
 			}
 
 			code {
-				background: rgba(theming.daff-color($neutral, 20), 0.15);
+				background: rgba(daff-color($neutral, 20), 0.15);
 			}
 
 			pre {
-				background: rgba(theming.daff-color($neutral, 20), 0.15);
-				border: 1px solid rgba(theming.daff-color($neutral, 20), 0.15);
+				background: rgba(daff-color($neutral, 20), 0.15);
+				border: 1px solid rgba(daff-color($neutral, 20), 0.15);
 
 				code {
 					background: none;
@@ -112,21 +110,21 @@
 			}
 
 			hr {
-				background: theming.daff-color($neutral, 80);
+				background: daff-color($neutral, 80);
 			}
 
 			blockquote {
-				background: rgba(theming.daff-color($primary), 0.12);
-				border-left: 4px solid theming.daff-color($primary, 40);
-				color: theming.daff-color($primary, 10);
+				background: rgba(daff-color($primary), 0.12);
+				border-left: 4px solid daff-color($primary, 40);
+				color: daff-color($primary, 10);
 
 				code {
-					background: rgba(theming.daff-color($primary), 0.18);
-					color: theming.daff-color($primary, 10);
+					background: rgba(daff-color($primary), 0.18);
+					color: daff-color($primary, 10);
 
 					@include stopsArticleCascade(a) {
-						color: theming.daff-color($primary, 40);
-						text-decoration-color: theming.daff-color($primary, 40);
+						color: daff-color($primary, 40);
+						text-decoration-color: daff-color($primary, 40);
 					}
 				}
 			}
@@ -135,7 +133,7 @@
 				border: 1px solid $table-border-dark;
 
 				th {
-					background: theming.daff-color($neutral, 90);
+					background: daff-color($neutral, 90);
 				}
 
 				th,

package/atoms/form/form-field/form-field/form-field.component.d.ts

@@ -3,6 +3,7 @@ import { DaffPrefixDirective } from '../../../../core/prefix-suffix/prefix.direc
 import { DaffSuffixDirective } from '../../../../core/prefix-suffix/suffix.directive';
 import { DaffFormFieldControl } from '../form-field-control';
 import * as i0 from "@angular/core";
+import * as i1 from "../../../../core/skeletonable/skeletonable.directive";
 export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked {
     private cd;
     /** @docs-private */
@@ -24,22 +25,42 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      * form field should be marked as error.
      */
     isError: boolean;
+    /**
+     * @docs-private
+     */
+    get errorClass(): boolean;
     /**
      * Tracking property to keep a record of whether or not the
      * form field contains any user input.
      */
     isFilled: boolean;
     isDisabled: boolean;
+    /**
+     * @docs-private
+     */
+    get disabledClass(): boolean;
     /**
      * Tracking property to keep a record of whether or not the
      * form field should be marked as valid.
      */
     isValid: boolean;
+    /**
+     * @docs-private
+     */
+    get validClass(): boolean;
     constructor(cd: ChangeDetectorRef);
     /**
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused(): boolean;
+    /**
+     * @docs-private
+     */
+    get focusedClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get raisedClass(): boolean;
     /**
      * Validate whether or not the FormField is in a "usable" state.
      */
@@ -61,5 +82,5 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      */
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, {}, {}, ["_prefix", "_suffix", "_control"], ["[daffPrefix]", "label[daffFormLabel]", "*", "[daffSuffix]", "daff-error-message", "daff-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, {}, {}, ["_prefix", "_suffix", "_control"], ["[daffPrefix]", "label[daffFormLabel]", "*", "[daffSuffix]", "daff-hint", "daff-error-message"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/atoms/form/form-field/form-field-control.d.ts

@@ -16,6 +16,7 @@ export declare abstract class DaffFormFieldControl<T> {
     ngControl: NgControl | null;
     abstract readonly controlType?: any;
     abstract readonly focused: boolean;
+    get raised(): boolean;
     abstract focus(event?: Event): void;
     abstract readonly value: T;
     constructor(ngControl: NgControl | null);

package/atoms/form/hint/hint.component.d.ts

@@ -4,6 +4,10 @@ export declare class DaffHintComponent {
      * @docs-private
      */
     class: boolean;
+    /**
+     * Whether or not the hint has been validated
+     * */
+    validated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, { "validated": { "alias": "validated"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/breadcrumb/src/breadcrumb-theme.scss

@@ -1,21 +1,19 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-breadcrumb-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-breadcrumb__item {
 		a {
-			@include theming.light($type) {
-				color: theming.daff-color($neutral, 80);
-				text-decoration-color: theming.daff-color($neutral, 80);
+			@include light($mode) {
+				color: daff-color($neutral, 80);
+				text-decoration-color: daff-color($neutral, 80);
 			}
 
-			@include theming.dark($type) {
-				color: theming.daff-color($neutral, 30);
-				text-decoration-color: theming.daff-color($neutral, 30);
+			@include dark($mode) {
+				color: daff-color($neutral, 30);
+				text-decoration-color: daff-color($neutral, 30);
 			}
 		}
 	}

package/button/button/raised/raised.component.d.ts

@@ -1,7 +1,7 @@
 import { DaffButtonBaseDirective } from '../button-base.directive';
 import * as i0 from "@angular/core";
 /**
- * @deprecated in favor of the `elevated` property. Deprecated in 0.82.0. Will be removed in version 1.0.0. Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+ * @deprecated in favor of the `elevated` property. Deprecated in version 0.82.0. Will be removed in version 1.0.0.
  *
  * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
  *

package/button/src/button/basic/button-theme.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-button-theme-variant(
 	$base-color,
@@ -8,18 +6,18 @@
 	$active-color: $hover-color
 ) {
 	background-color: $base-color;
-	color: theming.daff-text-contrast($base-color);
+	color: daff-text-contrast($base-color);
 
 	&::after {
 		background: $hover-color;
 	}
 
 	&:hover {
-		color: theming.daff-text-contrast($hover-color);
+		color: daff-text-contrast($hover-color);
 	}
 
 	&:active {
-		color: theming.daff-text-contrast($active-color);
+		color: daff-text-contrast($active-color);
 
 		&::after {
 			background: $active-color;
@@ -28,193 +26,193 @@
 }
 
 @mixin daff-button-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);
-	$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);
+	$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);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-button {
-		@include theming.light($type) {
+		@include light($mode) {
 			@include daff-button-theme-variant(
-				theming.daff-color($neutral, 10),
-				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30)
+				daff-color($neutral, 10),
+				daff-color($neutral, 20),
+				daff-color($neutral, 30)
 			);
 
 			&.daff-primary {
 				@include daff-button-theme-variant(
-					theming.daff-color($primary),
-					theming.daff-color($primary, 70),
-					theming.daff-color($primary, 80)
+					daff-color($primary),
+					daff-color($primary, 70),
+					daff-color($primary, 80)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-button-theme-variant(
-					theming.daff-color($secondary),
-					theming.daff-color($secondary, 70),
-					theming.daff-color($secondary, 80)
+					daff-color($secondary),
+					daff-color($secondary, 70),
+					daff-color($secondary, 80)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-button-theme-variant(
-					theming.daff-color($tertiary),
-					theming.daff-color($tertiary, 70),
-					theming.daff-color($tertiary, 80)
+					daff-color($tertiary),
+					daff-color($tertiary, 70),
+					daff-color($tertiary, 80)
 				);
 			}
 
 			&.daff-dark {
 				@include daff-button-theme-variant(
-					theming.daff-color($neutral, 100),
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 100),
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-light {
 				@include daff-button-theme-variant(
-					theming.daff-color($neutral, 10),
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 10),
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme {
 				@include daff-button-theme-variant(
 					$base,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-button-theme-variant(
 					$base-contrast,
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-warn {
 				@include daff-button-theme-variant(
-					theming.daff-color($warn),
-					theming.daff-color($warn, 70),
-					theming.daff-color($warn, 80)
+					daff-color($warn),
+					daff-color($warn, 70),
+					daff-color($warn, 80)
 				);
 			}
 
 			&.daff-success {
 				@include daff-button-theme-variant(
-					theming.daff-color($success),
-					theming.daff-color($success, 70),
-					theming.daff-color($success, 80)
+					daff-color($success),
+					daff-color($success, 70),
+					daff-color($success, 80)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-button-theme-variant(
-					theming.daff-color($critical),
-					theming.daff-color($critical, 70),
-					theming.daff-color($critical, 80)
+					daff-color($critical),
+					daff-color($critical, 70),
+					daff-color($critical, 80)
 				);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			@include daff-button-theme-variant(
-				theming.daff-color($neutral, 90),
-				theming.daff-color($neutral, 80),
-				theming.daff-color($neutral, 70)
+				daff-color($neutral, 90),
+				daff-color($neutral, 80),
+				daff-color($neutral, 70)
 			);
 
 			&.daff-primary {
 				@include daff-button-theme-variant(
-					theming.daff-color($primary),
-					theming.daff-color($primary, 40),
-					theming.daff-color($primary, 30)
+					daff-color($primary),
+					daff-color($primary, 40),
+					daff-color($primary, 30)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-button-theme-variant(
-					theming.daff-color($secondary),
-					theming.daff-color($secondary, 40),
-					theming.daff-color($secondary, 30)
+					daff-color($secondary),
+					daff-color($secondary, 40),
+					daff-color($secondary, 30)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-button-theme-variant(
-					theming.daff-color($tertiary),
-					theming.daff-color($tertiary, 40),
-					theming.daff-color($tertiary, 30)
+					daff-color($tertiary),
+					daff-color($tertiary, 40),
+					daff-color($tertiary, 30)
 				);
 			}
 
 			&.daff-dark {
 				@include daff-button-theme-variant(
-					theming.daff-color($neutral, 100),
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 100),
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-light {
 				@include daff-button-theme-variant(
 					$white,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme {
 				@include daff-button-theme-variant(
 					$base,
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-button-theme-variant(
 					$base-contrast,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-warn {
 				@include daff-button-theme-variant(
-					theming.daff-color($warn),
-					theming.daff-color($warn, 40),
-					theming.daff-color($warn, 30)
+					daff-color($warn),
+					daff-color($warn, 40),
+					daff-color($warn, 30)
 				);
 			}
 
 			&.daff-success {
 				@include daff-button-theme-variant(
-					theming.daff-color($success),
-					theming.daff-color($success, 40),
-					theming.daff-color($success, 30)
+					daff-color($success),
+					daff-color($success, 40),
+					daff-color($success, 30)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-button-theme-variant(
-					theming.daff-color($critical),
-					theming.daff-color($critical, 40),
-					theming.daff-color($critical, 30)
+					daff-color($critical),
+					daff-color($critical, 40),
+					daff-color($critical, 30)
 				);
 			}
 		}