@daffodil/design 0.84.0 → 0.86.0

package/callout/src/callout-theme.scss

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

package/card/src/card/raised/raised-theme.scss

@@ -1,16 +1,14 @@
-@use 'sass:map';
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-raised-card-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');
+	$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);
 
 	.daff-raised-card {
 		box-shadow: 0 6px 12px -4px rgba($black, 0.12),

package/card/src/card/stroked/stroked-theme.scss

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use '../../../../scss/theming' as *;
 
 @mixin stroked-card-theme-variant($color) {
 	border: 1px solid $color;
@@ -25,109 +23,109 @@
 }
 
 @mixin daff-stroked-card-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-stroked-card {
 		&.daff-primary {
-			@include stroked-card-theme-variant(theming.daff-color($primary));
+			@include stroked-card-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include stroked-card-theme-variant(theming.daff-color($secondary));
+			@include stroked-card-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include stroked-card-theme-variant(theming.daff-color($tertiary));
+			@include stroked-card-theme-variant(daff-color($tertiary));
 		}
 
 		&.daff-dark {
-			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+			@include stroked-card-theme-variant(daff-color($neutral, 90));
 		}
 
 		&.daff-light {
-			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+			@include stroked-card-theme-variant(daff-color($neutral, 20));
 		}
 
-		@include theming.light($type) {
-			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+		@include light($mode) {
+			@include stroked-card-theme-variant(daff-color($neutral, 20));
 			color: $base-contrast;
 
 			&.daff-theme {
-				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+				@include stroked-card-theme-variant(daff-color($neutral, 20));
 				color: $base-contrast;
 			}
 
 			&.daff-theme-contrast {
-				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+				@include stroked-card-theme-variant(daff-color($neutral, 90));
 			}
 		}
 
-		@include theming.dark($type) {
-			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+		@include dark($mode) {
+			@include stroked-card-theme-variant(daff-color($neutral, 90));
 			color: $base-contrast;
 
 			&.daff-theme {
-				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+				@include stroked-card-theme-variant(daff-color($neutral, 90));
 				color: $base-contrast;
 			}
 
 			&.daff-theme-contrast {
-				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+				@include stroked-card-theme-variant(daff-color($neutral, 20));
 			}
 		}
 	}
 
 	a {
 		&.daff-stroked-card {
-			@include theming.light($type) {
+			@include light($mode) {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($neutral, 20),
+					daff-color($neutral, 20),
 					0.2
 				);
 			}
 
-			@include theming.dark($type) {
+			@include dark($mode) {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($neutral, 90),
+					daff-color($neutral, 90),
 					0.2
 				);
 			}
 
 			&.daff-primary {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($primary)
+					daff-color($primary)
 				);
 			}
 
 			&.daff-secondary {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($secondary)
+					daff-color($secondary)
 				);
 			}
 
 			&.daff-tertiary {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($tertiary)
+					daff-color($tertiary)
 				);
 			}
 
 			&.daff-dark {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($neutral, 90)
+					daff-color($neutral, 90)
 				);
 			}
 
 			&.daff-light {
 				@include linkable-stroked-card-theme-variant(
-					theming.daff-color($neutral, 20)
+					daff-color($neutral, 20)
 				);
 			}
 		}

package/card/src/card-base-theme.scss

@@ -1,10 +1,8 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-basic-card-theme-variant($color) {
 	background: $color;
-	color: theming.daff-text-contrast($color);
+	color: daff-text-contrast($color);
 }
 
 @mixin daff-linkable-card-theme-variant($hover-color) {
@@ -16,7 +14,7 @@
 
 	&:hover,
 	&:focus {
-		color: theming.daff-text-contrast($hover-color);
+		color: daff-text-contrast($hover-color);
 
 		.daff-card__wrapper {
 			&::after {
@@ -27,52 +25,52 @@
 }
 
 @mixin daff-card-base-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-card,
 	.daff-raised-card {
-		@include theming.light($type) {
-			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
+		@include light($mode) {
+			@include daff-basic-card-theme-variant(daff-color($neutral, 10));
 
 			&.daff-primary {
-				@include daff-basic-card-theme-variant(theming.daff-color($primary));
+				@include daff-basic-card-theme-variant(daff-color($primary));
 			}
 
 			&.daff-secondary {
-				@include daff-basic-card-theme-variant(theming.daff-color($secondary));
+				@include daff-basic-card-theme-variant(daff-color($secondary));
 			}
 
 			&.daff-tertiary {
-				@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
+				@include daff-basic-card-theme-variant(daff-color($tertiary));
 			}
 		}
 
-		@include theming.dark($type) {
-			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
+		@include dark($mode) {
+			@include daff-basic-card-theme-variant(daff-color($neutral, 90));
 
 			&.daff-primary {
 				@include daff-basic-card-theme-variant(
-					theming.daff-color($primary, 60)
+					daff-color($primary, 60)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-basic-card-theme-variant(
-					theming.daff-color($secondary, 60)
+					daff-color($secondary, 60)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-basic-card-theme-variant(
-					theming.daff-color($tertiary, 60)
+					daff-color($tertiary, 60)
 				);
 			}
 		}
@@ -86,109 +84,109 @@
 		}
 
 		&.daff-dark {
-			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
+			@include daff-basic-card-theme-variant(daff-color($neutral, 90));
 		}
 
 		&.daff-light {
-			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
+			@include daff-basic-card-theme-variant(daff-color($neutral, 10));
 		}
 	}
 
 	a {
 		&.daff-card,
 		&.daff-raised-card {
-			@include theming.light($type) {
+			@include light($mode) {
 				@include daff-linkable-card-theme-variant(
-					theming.daff-color($neutral, 20)
+					daff-color($neutral, 20)
 				);
 
 				&.daff-primary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($primary, 70)
+						daff-color($primary, 70)
 					);
 				}
 
 				&.daff-secondary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($secondary, 70)
+						daff-color($secondary, 70)
 					);
 				}
 
 				&.daff-tertiary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($tertiary, 70)
+						daff-color($tertiary, 70)
 					);
 				}
 
 				&.daff-theme {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 10)
+						daff-color($neutral, 10)
 					);
 				}
 
 				&.daff-theme-contrast {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 100)
+						daff-color($neutral, 100)
 					);
 				}
 
 				&.daff-dark {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 90)
+						daff-color($neutral, 90)
 					);
 				}
 
 				&.daff-light {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 10)
+						daff-color($neutral, 10)
 					);
 				}
 			}
 
-			@include theming.dark($type) {
+			@include dark($mode) {
 				@include daff-linkable-card-theme-variant(
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 80)
 				);
 
 				&.daff-primary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($primary, 70)
+						daff-color($primary, 70)
 					);
 				}
 
 				&.daff-secondary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($secondary, 70)
+						daff-color($secondary, 70)
 					);
 				}
 
 				&.daff-tertiary {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($tertiary, 70)
+						daff-color($tertiary, 70)
 					);
 				}
 
 				&.daff-theme {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 90)
+						daff-color($neutral, 90)
 					);
 				}
 
 				&.daff-theme-contrast {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 10)
+						daff-color($neutral, 10)
 					);
 				}
 
 				&.daff-dark {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 100)
+						daff-color($neutral, 100)
 					);
 				}
 
 				&.daff-light {
 					@include daff-linkable-card-theme-variant(
-						theming.daff-color($neutral, 10)
+						daff-color($neutral, 10)
 					);
 				}
 			}

package/core/colorable/colorable.d.ts

@@ -39,12 +39,12 @@ export declare enum DaffPaletteEnum {
      */
     ThemeContrast = "theme-contrast",
     /**
-     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
      * Black. It's dark.
      */
     Black = "black",
     /**
-     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
      * White. It's bright.
      */
     White = "white"

package/core/compactable/compactable.directive.d.ts

@@ -44,6 +44,9 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffCompactableDirective {
+    /**
+     * Controls whether the component is compact.
+     */
     compact: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCompactableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCompactableDirective, "[daffCompactable]", never, { "compact": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;

package/core/openable/openable.directive.d.ts

@@ -47,7 +47,7 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
-    /** Whether or not a component implementing the directive is open */
+    /** Controls whether the component is open. */
     open: boolean;
     private _setOpen;
     /** Whether or not a component should handle state

package/core/selectable/selectable.directive.d.ts

@@ -3,7 +3,9 @@ import { DaffSelectable } from '../selectable/selectable';
 import * as i0 from "@angular/core";
 export declare class DaffSelectableDirective implements DaffSelectable {
     private cd;
-    /** Whether or not a component implementing the directive is selected */
+    /**
+     * Controls whether the component is selected.
+     */
     selected: boolean;
     /**
      * An event that fires after the media element becomes selected.

package/core/sizable/sizable.directive.d.ts

@@ -63,9 +63,9 @@ export declare class DaffSizableDirective<T extends DaffSizeAllType> implements
         'daff-xl': boolean;
     };
     /**
-     * The size of a component.
+     * The size of the component.
      *
-     * Default options are: `xs`, `sm`, `md`, `lg`, and `xl`.
+     * Options are: `xs`, `sm`, `md`, `lg`, and `xl`.
      */
     size: T;
     /**

package/core/skeletonable/public_api.d.ts

@@ -1,2 +1 @@
-export { DaffSkeletonable } from './skeletonable';
 export { DaffSkeletonableDirective } from './skeletonable.directive';

package/core/skeletonable/skeletonable.directive.d.ts

@@ -42,6 +42,9 @@ import * as i0 from "@angular/core";
  * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
  */
 export declare class DaffSkeletonableDirective {
+    /**
+     * Controls whether the component displays a skeleton loading state.
+     */
     skeleton: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSkeletonableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSkeletonableDirective, "[daffSkeletonable]", never, { "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;

package/core/text-alignable/text-alignable.directive.d.ts

@@ -1,4 +1,4 @@
-import { OnChanges, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DaffTextAlignable, DaffTextAlignment } from './text-alignable';
 import * as i0 from "@angular/core";
 /**
@@ -47,7 +47,7 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges {
+export declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {
     /**
      * @docs-private
      */
@@ -57,19 +57,23 @@ export declare class DaffTextAlignableDirective implements DaffTextAlignable, On
         'daff-right': boolean;
     };
     /**
-     * The text alignment of a component.
+     * The text alignment of the component.
      *
-     * Default options are: `left`, `center`, and `right`.
+     * Options are: `left`, `center`, and `right`.
      */
     textAlignment: DaffTextAlignment;
     /**
-     * Sets a default textAlignment.
+     * Sets a default alignment when no text alignment is provided.
      */
     defaultAlignment: DaffTextAlignment;
     /**
      * @docs-private
      */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextAlignableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTextAlignableDirective, "[daffTextAlignable]", never, { "textAlignment": { "alias": "textAlignment"; "required": false; }; }, {}, never, never, true, never>;
 }