@daffodil/design 0.82.0 → 0.84.0

package/breadcrumb/breadcrumb/breadcrumb.component.d.ts

@@ -13,6 +13,9 @@ export declare class DaffBreadcrumbComponent implements AfterContentInit {
      * @docs-private
      */
     breadcrumbItems: QueryList<DaffBreadcrumbItemDirective>;
+    /**
+     * @docs-private
+     */
     ngAfterContentInit(): void;
     private updateActiveState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbComponent, never>;

package/breadcrumb/src/breadcrumb-theme.scss

@@ -3,11 +3,20 @@
 @use '../../scss/theming';
 
 @mixin daff-breadcrumb-theme($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-breadcrumb__item {
-		color: theming.daff-illuminate($base-contrast, $neutral, 4);
+		a {
+			@include theming.light($type) {
+				color: theming.daff-color($neutral, 80);
+				text-decoration-color: theming.daff-color($neutral, 80);
+			}
+
+			@include theming.dark($type) {
+				color: theming.daff-color($neutral, 30);
+				text-decoration-color: theming.daff-color($neutral, 30);
+			}
+		}
 	}
 }

package/button/button/button-base.directive.d.ts

@@ -1,29 +1,13 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
 import { DaffButtonSizableDirective } from './button-sizable.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 import * as i2 from "./button-sizable.directive";
-/**
- * An _elementRef and an instance of renderer2 are needed for the button mixins
- */
-declare class DaffButtonBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffButtonBase: (new (...args: any[]) => {
-    [x: string]: any;
-    _prefix: import("@daffodil/design").DaffPrefixDirective;
-}) & (new (...args: any[]) => {
-    [x: string]: any;
-    _suffix: import("@daffodil/design").DaffSuffixDirective;
-}) & typeof DaffButtonBase;
-export declare class DaffButtonBaseDirective extends _daffButtonBase implements DaffPrefixable, DaffSuffixable {
-    private elementRef;
-    private renderer;
+export declare class DaffButtonBaseDirective {
     private size;
-    constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
+    _prefix: DaffPrefixDirective;
+    _suffix: DaffSuffixDirective;
+    constructor(size: DaffButtonSizableDirective);
     /**
      * @docs-private
      */
@@ -54,6 +38,5 @@ export declare class DaffButtonBaseDirective extends _daffButtonBase implements
      */
     get tabIndexAttribute(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }
-export {};

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

@@ -45,9 +45,9 @@
 	.daff-button {
 		@include theming.light($type) {
 			@include daff-button-theme-variant(
+				theming.daff-color($neutral, 10),
 				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30),
-				theming.daff-color($neutral, 40)
+				theming.daff-color($neutral, 30)
 			);
 
 			&.daff-primary {
@@ -74,17 +74,17 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-button-theme-variant(
-					$black,
+					theming.daff-color($neutral, 100),
 					theming.daff-color($neutral, 90),
 					theming.daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-button-theme-variant(
-					$white,
+					theming.daff-color($neutral, 10),
 					theming.daff-color($neutral, 20),
 					theming.daff-color($neutral, 30)
 				);
@@ -93,31 +93,17 @@
 			&.daff-theme {
 				@include daff-button-theme-variant(
 					$base,
-					theming.daff-illuminate($base, $neutral, 2),
-					theming.daff-illuminate($base, $neutral, 3)
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-button-theme-variant(
 					$base-contrast,
-					theming.daff-illuminate($base-contrast, $neutral, 2),
-					theming.daff-illuminate($base-contrast, $neutral, 3)
-				);
-			}
-
-			&[disabled],
-			&.disabled {
-				@include daff-button-theme-variant(
-					theming.daff-illuminate($base, $neutral, 3),
-					theming.daff-illuminate($base, $neutral, 3),
-					theming.daff-illuminate($base, $neutral, 3),
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
 				);
-				color: theming.daff-illuminate($base, $neutral, 5);
-
-				&:hover {
-					color: theming.daff-illuminate($base, $neutral, 5);
-				}
 			}
 
 			&.daff-warn {
@@ -176,15 +162,15 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-button-theme-variant(
-					$black,
+					theming.daff-color($neutral, 100),
 					theming.daff-color($neutral, 90),
 					theming.daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-button-theme-variant(
 					$white,
 					theming.daff-color($neutral, 20),
@@ -195,25 +181,16 @@
 			&.daff-theme {
 				@include daff-button-theme-variant(
 					$base,
-					theming.daff-illuminate($base, $neutral, 2),
-					theming.daff-illuminate($base, $neutral, 3)
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-button-theme-variant(
 					$base-contrast,
-					theming.daff-illuminate($base-contrast, $neutral, 2),
-					theming.daff-illuminate($base-contrast, $neutral, 3)
-				);
-			}
-
-			&[disabled],
-			&.disabled {
-				@include daff-button-theme-variant(
-					theming.daff-illuminate($base, $neutral, 3),
-					theming.daff-illuminate($base, $neutral, 3),
-					theming.daff-illuminate($base, $neutral, 3)
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
 				);
 			}
 

package/button/src/button/button-base.scss

@@ -1,13 +1,23 @@
 @use '../../../scss/interactions';
 @use '../../../scss/typography' as t;
 
+// stylelint-disable selector-class-pattern
 @mixin daff-button-elevated {
-	&.elevated { /* stylelint-disable-line selector-class-pattern */
-		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+	&.elevated {
+		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
+			0 4px 8px 0 rgba(0, 0, 0, 0.05);
 
-		&:hover { /* stylelint-disable-line selector-class-pattern */
+		&:hover {
 			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
 		}
+
+		&[disabled],
+		&.disabled {
+			&:hover {
+				box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
+					0 4px 8px 0 rgba(0, 0, 0, 0.05);
+			}
+		}
 	}
 }
 
@@ -28,16 +38,19 @@
 	&[disabled],
 	&.disabled {
 		cursor: not-allowed;
+		opacity: 0.5;
 	}
 
 	.daff-button__content,
 	.daff-prefix,
 	.daff-suffix {
-		z-index: 2;
+		z-index: 1;
 	}
 
 	.daff-button__loading {
-		max-width: 1.5rem;
+		> * {
+			width: 100%;
+		}
 	}
 
 	.daff-button__content {
@@ -54,7 +67,9 @@
 			width: 100%;
 			height: 100%;
 			opacity: 0;
+			pointer-events: none;
 			transition: opacity 300ms;
+			z-index: 0;
 		}
 
 		&:hover,
@@ -72,6 +87,10 @@
 		line-height: 2rem;
 		height: 2rem;
 		padding: 0 1rem;
+
+		.daff-button__loading {
+			width: 1rem;
+		}
 	}
 
 	&.daff-md {
@@ -79,6 +98,10 @@
 		line-height: 3rem;
 		height: 3rem;
 		padding: 0 1.5rem;
+
+		.daff-button__loading {
+			width: 1.5rem;
+		}
 	}
 
 	&.daff-lg {
@@ -86,5 +109,9 @@
 		line-height: 3.5rem;
 		height: 3.5rem;
 		padding: 0 1.5rem;
+
+		.daff-button__loading {
+			width: 2rem;
+		}
 	}
 }

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

@@ -55,13 +55,13 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-flat-button-theme-variant(
 					$black,
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-flat-button-theme-variant(
 					$white,
 				);
@@ -79,23 +79,6 @@
 				);
 			}
 
-			&[disabled],
-			&.disabled {
-				color: theming.daff-illuminate($base, $neutral, 5);
-
-				&::after {
-					background: transparent;
-				}
-
-				&:hover,
-				&:focus,
-				&:active {
-					&::after {
-						background: transparent;
-					}
-				}
-			}
-
 			&.daff-warn {
 				@include daff-flat-button-theme-variant(
 					theming.daff-color($warn)
@@ -138,13 +121,13 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-flat-button-theme-variant(
 					$black,
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-flat-button-theme-variant(
 					$white,
 				);
@@ -162,23 +145,6 @@
 				);
 			}
 
-			&[disabled],
-			&.disabled {
-				color: theming.daff-illuminate($base, $neutral, 5);
-
-				&::after {
-					background: transparent;
-				}
-
-				&:hover,
-				&:focus,
-				&:active {
-					&::after {
-						background: transparent;
-					}
-				}
-			}
-
 			&.daff-warn {
 				@include daff-flat-button-theme-variant(
 					theming.daff-color($warn, 40)

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

@@ -36,105 +36,183 @@
 	$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-icon-button {
-		@include daff-icon-button-theme-variant(
-			theming.daff-illuminate($base, $neutral, 5),
-			theming.daff-illuminate($base, $neutral, 6),
-			theming.daff-illuminate($base, $neutral, 7)
-		);
-
-		&.daff-primary {
+		@include theming.light($type) {
 			@include daff-icon-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70),
-				theming.daff-color($primary, 80)
+				theming.daff-color($neutral, 50),
+				theming.daff-color($neutral, 60),
+				theming.daff-color($neutral, 70)
 			);
-		}
 
-		&.daff-secondary {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70),
-				theming.daff-color($secondary, 80)
-			);
-		}
+			&.daff-primary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 70),
+					theming.daff-color($primary, 80)
+				);
+			}
 
-		&.daff-tertiary {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70),
-				theming.daff-color($tertiary, 80)
-			);
-		}
+			&.daff-secondary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 70),
+					theming.daff-color($secondary, 80)
+				);
+			}
 
-		&.daff-black {
-			@include daff-icon-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 100),
-				theming.daff-color($neutral, 80)
-			);
+			&.daff-tertiary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 70),
+					theming.daff-color($tertiary, 80)
+				);
+			}
+
+			&.daff-dark {
+				@include daff-icon-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
+				);
+			}
+
+			&.daff-light {
+				@include daff-icon-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
+
+			&.daff-theme {
+				@include daff-icon-button-theme-variant(
+					$base,
+					theming.daff-color($neutral, 10),
+					theming.daff-color($neutral, 20)
+				);
+			}
+
+			&.daff-theme-contrast {
+				@include daff-icon-button-theme-variant(
+					$base-contrast,
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
+				);
+			}
+
+			&.daff-warn {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($warn),
+					theming.daff-color($warn, 70),
+					theming.daff-color($warn, 80)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 70),
+					theming.daff-color($critical, 80)
+				);
+			}
+
+			&.daff-success {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($success),
+					theming.daff-color($success, 70),
+					theming.daff-color($success, 80)
+				);
+			}
 		}
 
-		&.daff-white {
+		@include theming.dark($type) {
 			@include daff-icon-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20),
+				theming.daff-color($neutral, 50),
+				theming.daff-color($neutral, 40),
 				theming.daff-color($neutral, 30)
 			);
-		}
 
-		&.daff-theme {
-			@include daff-icon-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 1),
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
+			&.daff-primary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 40),
+					theming.daff-color($primary, 30)
+				);
+			}
 
-		&.daff-theme-contrast {
-			@include daff-icon-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 1),
-				theming.daff-illuminate($base-contrast, $neutral, 2)
-			);
-		}
+			&.daff-secondary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 40),
+					theming.daff-color($secondary, 30)
+				);
+			}
 
-		&[disabled],
-		&.disabled {
-			@include daff-icon-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 4),
-				theming.daff-illuminate($base, $neutral, 4),
-				theming.daff-illuminate($base, $neutral, 4)
-			);
+			&.daff-tertiary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 40),
+					theming.daff-color($tertiary, 30)
+				);
+			}
 
-			&:hover {
-				color: theming.daff-illuminate($base, $neutral, 4);
+			&.daff-dark {
+				@include daff-icon-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 100),
+					theming.daff-color($neutral, 80)
+				);
 			}
-		}
 
-		&.daff-warn {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($warn),
-				theming.daff-color($warn, 70),
-				theming.daff-color($warn, 80)
-			);
-		}
+			&.daff-light {
+				@include daff-icon-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
 
-		&.daff-critical {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($critical),
-				theming.daff-color($critical, 70),
-				theming.daff-color($critical, 80)
-			);
-		}
+			&.daff-theme {
+				@include daff-icon-button-theme-variant(
+					$base,
+					theming.daff-color($neutral, 100),
+					theming.daff-color($neutral, 80)
+				);
+			}
 
-		&.daff-success {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($success),
-				theming.daff-color($success, 70),
-				theming.daff-color($success, 80)
-			);
+			&.daff-theme-contrast {
+				@include daff-icon-button-theme-variant(
+					$base-contrast,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
+
+			&.daff-warn {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($warn),
+					theming.daff-color($warn, 40),
+					theming.daff-color($warn, 30)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 40),
+					theming.daff-color($critical, 30)
+				);
+			}
+
+			&.daff-success {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($success),
+					theming.daff-color($success, 40),
+					theming.daff-color($success, 30)
+				);
+			}
 		}
 	}
 }

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

@@ -59,11 +59,11 @@
 			@include daff-raised-button-theme-variant(theming.daff-color($tertiary));
 		}
 
-		&.daff-black {
+		&.daff-dark {
 			@include daff-raised-button-theme-variant($black);
 		}
 
-		&.daff-white {
+		&.daff-light {
 			@include daff-raised-button-theme-variant($white);
 		}