@daffodil/design 0.82.0 → 0.84.0

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

@@ -35,16 +35,16 @@
 
 	.daff-stroked-button {
 		background: transparent;
-		border: 1px solid theming.daff-illuminate($base, $neutral, 5);
+		border: 1px solid theming.daff-color($neutral, 50);
 		color: currentColor;
 
 		&::after {
-			background: rgba(theming.daff-illuminate($base, $neutral, 5), 0.1);
+			background: rgba(theming.daff-color($neutral, 50), 0.1);
 		}
 
 		&:active {
 			&::after {
-				background: rgba(theming.daff-illuminate($base, $neutral, 5), 0.2);
+				background: rgba(theming.daff-color($neutral, 50), 0.2);
 			}
 		}
 
@@ -67,11 +67,11 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-stroked-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-stroked-button-theme-variant($white);
 			}
 
@@ -83,22 +83,6 @@
 				@include daff-stroked-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				background-color: transparent;
-				border-color: theming.daff-illuminate($base, $neutral, 3);
-				color: theming.daff-illuminate($base, $neutral, 5);
-
-				&:hover {
-					color: theming.daff-illuminate($base, $neutral, 5);
-
-					&::after {
-						background-color: transparent;
-						opacity: 0;
-					}
-				}
-			}
-
 			&.daff-warn {
 				@include daff-stroked-button-theme-variant(theming.daff-color($warn));
 			}
@@ -135,11 +119,11 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-stroked-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-stroked-button-theme-variant($white);
 			}
 
@@ -151,22 +135,6 @@
 				@include daff-stroked-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				background-color: transparent;
-				border-color: theming.daff-illuminate($base, $neutral, 3);
-				color: theming.daff-illuminate($base, $neutral, 5);
-
-				&:hover {
-					color: theming.daff-illuminate($base, $neutral, 5);
-
-					&::after {
-						background-color: transparent;
-						opacity: 0;
-					}
-				}
-			}
-
 			&.daff-warn {
 				@include daff-stroked-button-theme-variant(
 					theming.daff-color($warn, 40)

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

@@ -49,11 +49,11 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-underline-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-underline-button-theme-variant($white);
 			}
 
@@ -65,13 +65,6 @@
 				@include daff-underline-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-underline-button-theme-variant(
-					theming.daff-illuminate($base, $neutral, 4)
-				);
-			}
-
 			&.daff-warn {
 				@include daff-underline-button-theme-variant(theming.daff-color($warn));
 			}
@@ -112,11 +105,11 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-underline-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-underline-button-theme-variant($white);
 			}
 
@@ -128,13 +121,6 @@
 				@include daff-underline-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-underline-button-theme-variant(
-					theming.daff-illuminate($base, $neutral, 4)
-				);
-			}
-
 			&.daff-warn {
 				@include daff-underline-button-theme-variant(
 					theming.daff-color($warn, 40)

package/callout/src/callout-theme.scss

@@ -16,22 +16,39 @@
 	$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');
 
 	.daff-callout {
-		@include daff-callout-theme-variant(
-			theming.daff-illuminate($base, $neutral, 1)
-		);
+		@include theming.light($type) {
+			@include daff-callout-theme-variant(theming.daff-color($neutral, 10));
 
-		&.daff-primary {
-			@include daff-callout-theme-variant(theming.daff-color($primary));
-		}
+			&.daff-primary {
+				@include daff-callout-theme-variant(theming.daff-color($primary));
+			}
+
+			&.daff-secondary {
+				@include daff-callout-theme-variant(theming.daff-color($secondary));
+			}
 
-		&.daff-secondary {
-			@include daff-callout-theme-variant(theming.daff-color($secondary));
+			&.daff-tertiary {
+				@include daff-callout-theme-variant(theming.daff-color($tertiary));
+			}
 		}
 
-		&.daff-tertiary {
-			@include daff-callout-theme-variant(theming.daff-color($tertiary));
+		@include theming.dark($type) {
+			@include daff-callout-theme-variant(theming.daff-color($neutral, 90));
+
+			&.daff-primary {
+				@include daff-callout-theme-variant(theming.daff-color($primary, 60));
+			}
+
+			&.daff-secondary {
+				@include daff-callout-theme-variant(theming.daff-color($secondary, 60));
+			}
+
+			&.daff-tertiary {
+				@include daff-callout-theme-variant(theming.daff-color($tertiary, 60));
+			}
 		}
 
 		&.daff-theme {

package/card/card/basic/basic.component.d.ts

@@ -1,6 +1,9 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
 export declare class DaffCardComponent extends DaffCardBaseDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,a[daff-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;

package/card/card/raised/raised.component.d.ts

@@ -1,6 +1,9 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
 export declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedCardComponent, "daff-raised-card,a[daff-raised-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;

package/card/card/stroked/stroked.component.d.ts

@@ -1,6 +1,9 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
 export declare class DaffStrokedCardComponent extends DaffCardBaseDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedCardComponent, "daff-stroked-card,a[daff-stroked-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;

package/card/examples/card-theming/card-theming.component.d.ts

@@ -1,7 +1,8 @@
 import { UntypedFormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class CardThemingComponent {
-    colorControl: UntypedFormControl;
+    cardControl: UntypedFormControl;
+    strokedCardControl: UntypedFormControl;
     options: {
         value: string;
         label: string;

package/card/examples/public_api.d.ts

@@ -4,5 +4,5 @@ import { CardThemingComponent } from './card-theming/card-theming.component';
 import { LinkableCardComponent } from './linkable-card/linkable-card.component';
 import { RaisedCardComponent } from './raised-card/raised-card.component';
 import { StrokedCardComponent } from './stroked-card/stroked-card.component';
-export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent)[];
+export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent | typeof RaisedCardComponent)[];
 export { BasicCardComponent, CardThemingComponent, LinkableCardComponent, RaisedCardComponent, StrokedCardComponent, CardOrientationComponent, };

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

@@ -2,6 +2,28 @@
 @use '../../../../scss/core';
 @use '../../../../scss/theming';
 
+@mixin stroked-card-theme-variant($color) {
+	border: 1px solid $color;
+	color: $color;
+}
+
+@mixin linkable-stroked-card-theme-variant($hover-color, $opacity: 0.08) {
+	.daff-card__wrapper {
+		&::after {
+			background: rgba($hover-color, $opacity);
+		}
+	}
+
+	&:hover,
+	&:focus {
+		.daff-card__wrapper {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
 @mixin daff-stroked-card-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
 	$secondary: core.daff-map-get($theme, secondary);
@@ -11,36 +33,103 @@
 	$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-stroked-card {
-		border: 1px solid theming.daff-illuminate($base, $neutral, 2);
-
 		&.daff-primary {
-			border: 1px solid theming.daff-illuminate($base-contrast, $primary, 3);
+			@include stroked-card-theme-variant(theming.daff-color($primary));
 		}
 
 		&.daff-secondary {
-			border: 1px solid theming.daff-illuminate($base-contrast, $secondary, 3);
+			@include stroked-card-theme-variant(theming.daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			border: 1px solid theming.daff-illuminate($base-contrast, $tertiary, 3);
+			@include stroked-card-theme-variant(theming.daff-color($tertiary));
 		}
 
-		&.daff-theme {
-			border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		&.daff-dark {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
 		}
 
-		&.daff-theme-contrast {
-			border: 1px solid theming.daff-illuminate($base-contrast, $neutral, 2);
+		&.daff-light {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
 		}
 
-		&.daff-black {
-			border: 1px solid theming.daff-color($neutral, 90);
+		@include theming.light($type) {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+			color: $base-contrast;
+
+			&.daff-theme {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+				color: $base-contrast;
+			}
+
+			&.daff-theme-contrast {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+			}
 		}
 
-		&.daff-white {
-			border: 1px solid theming.daff-color($neutral, 20);
+		@include theming.dark($type) {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+			color: $base-contrast;
+
+			&.daff-theme {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+				color: $base-contrast;
+			}
+
+			&.daff-theme-contrast {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+			}
+		}
+	}
+
+	a {
+		&.daff-stroked-card {
+			@include theming.light($type) {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 20),
+					0.2
+				);
+			}
+
+			@include theming.dark($type) {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 90),
+					0.2
+				);
+			}
+
+			&.daff-primary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($primary)
+				);
+			}
+
+			&.daff-secondary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($secondary)
+				);
+			}
+
+			&.daff-tertiary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($tertiary)
+				);
+			}
+
+			&.daff-dark {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 90)
+				);
+			}
+
+			&.daff-light {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 20)
+				);
+			}
 		}
 	}
 }

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

@@ -35,24 +35,46 @@
 	$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-card,
-	.daff-raised-card,
-	.daff-stroked-card {
-		@include daff-basic-card-theme-variant(
-			theming.daff-illuminate($base, $neutral, 1)
-		);
-
-		&.daff-primary {
-			@include daff-basic-card-theme-variant(theming.daff-color($primary));
-		}
+	.daff-raised-card {
+		@include theming.light($type) {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
+
+			&.daff-primary {
+				@include daff-basic-card-theme-variant(theming.daff-color($primary));
+			}
 
-		&.daff-secondary {
-			@include daff-basic-card-theme-variant(theming.daff-color($secondary));
+			&.daff-secondary {
+				@include daff-basic-card-theme-variant(theming.daff-color($secondary));
+			}
+
+			&.daff-tertiary {
+				@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
+			}
 		}
 
-		&.daff-tertiary {
-			@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
+		@include theming.dark($type) {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
+
+			&.daff-primary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($primary, 60)
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($secondary, 60)
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($tertiary, 60)
+				);
+			}
 		}
 
 		&.daff-theme {
@@ -63,63 +85,112 @@
 			@include daff-basic-card-theme-variant($base-contrast);
 		}
 
-		&.daff-black {
-			@include daff-basic-card-theme-variant($black);
+		&.daff-dark {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
 		}
 
-		&.daff-white {
-			@include daff-basic-card-theme-variant($white);
+		&.daff-light {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
 		}
 	}
 
 	a {
 		&.daff-card,
-		&.daff-raised-card,
-		&.daff-stroked-card {
-			@include daff-linkable-card-theme-variant(
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-
-			&.daff-primary {
+		&.daff-raised-card {
+			@include theming.light($type) {
 				@include daff-linkable-card-theme-variant(
-					theming.daff-color($primary, 70)
+					theming.daff-color($neutral, 20)
 				);
-			}
 
-			&.daff-secondary {
-				@include daff-linkable-card-theme-variant(
-					theming.daff-color($secondary, 70)
-				);
+				&.daff-primary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($primary, 70)
+					);
+				}
+
+				&.daff-secondary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($secondary, 70)
+					);
+				}
+
+				&.daff-tertiary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($tertiary, 70)
+					);
+				}
+
+				&.daff-theme {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+
+				&.daff-theme-contrast {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 100)
+					);
+				}
+
+				&.daff-dark {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 90)
+					);
+				}
+
+				&.daff-light {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
 			}
 
-			&.daff-tertiary {
+			@include theming.dark($type) {
 				@include daff-linkable-card-theme-variant(
-					theming.daff-color($tertiary, 70)
+					theming.daff-color($neutral, 80)
 				);
-			}
-
-			&.daff-theme {
-				@include daff-linkable-card-theme-variant(
-					theming.daff-illuminate($base, $neutral, 1)
-				);
-			}
 
-			&.daff-theme-contrast {
-				@include daff-linkable-card-theme-variant(
-					theming.daff-illuminate($base-contrast, $neutral, 1)
-				);
-			}
-
-			&.daff-black {
-				@include daff-linkable-card-theme-variant(
-					theming.daff-color($neutral, 100)
-				);
-			}
-
-			&.daff-white {
-				@include daff-linkable-card-theme-variant(
-					theming.daff-color($neutral, 10)
-				);
+				&.daff-primary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($primary, 70)
+					);
+				}
+
+				&.daff-secondary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($secondary, 70)
+					);
+				}
+
+				&.daff-tertiary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($tertiary, 70)
+					);
+				}
+
+				&.daff-theme {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 90)
+					);
+				}
+
+				&.daff-theme-contrast {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+
+				&.daff-dark {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 100)
+					);
+				}
+
+				&.daff-light {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
 			}
 		}
 	}

package/checkbox/examples/basic-checkbox/basic-checkbox.component.d.ts

@@ -3,6 +3,9 @@ import { UntypedFormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class BasicCheckboxComponent implements OnInit {
     checkboxExample: UntypedFormControl;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     setFalse(): void;
     setTrue(): void;

package/checkbox/examples/checkbox-set/checkbox-set.component.d.ts

@@ -5,6 +5,9 @@ export declare class CheckboxSetComponent implements OnInit {
     private checkboxSet;
     checkboxArray: UntypedFormArray;
     selectedValues: any[];
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     displayList(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxSetComponent, never>;

package/core/article-encapsulated/article-encapsulated.directive.d.ts

@@ -24,6 +24,9 @@ import * as i0 from "@angular/core";
  * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
  */
 export declare class DaffArticleEncapsulatedDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;

package/core/colorable/colorable.directive.d.ts

@@ -82,13 +82,21 @@ export declare class DaffColorableDirective implements DaffColorable, OnChanges,
     };
     /**
      * Sets the color on a component.
+     *
+     * Default options are: `primary`, `secondary`, `tertiary`, `light`, `dark`, `theme`, and `theme-contrast`.
      */
     color: DaffPalette;
     /**
      * Sets a default color.
      */
     defaultColor: DaffPalette;
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffColorableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffColorableDirective, "[daffColorable]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;

package/core/manage-container-layout/manage-container-layout.directive.d.ts

@@ -58,6 +58,9 @@ import * as i0 from "@angular/core";
  * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
  */
 export declare class DaffManageContainerLayoutDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffManageContainerLayoutDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffManageContainerLayoutDirective, "[daffManageContainerLayout]", never, {}, {}, never, never, true, never>;