@daffodil/design 0.81.1 → 0.82.0

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

@@ -23,67 +23,135 @@
 	$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-underline-button {
-		@include daff-underline-button-theme-variant(
-			theming.daff-illuminate($base, $neutral, 7)
-		);
-
-		&.daff-primary {
+		@include theming.light($type) {
 			@include daff-underline-button-theme-variant(
-				theming.daff-color($primary)
+				theming.daff-color($neutral, 70)
 			);
-		}
 
-		&.daff-secondary {
-			@include daff-underline-button-theme-variant(
-				theming.daff-color($secondary)
-			);
-		}
+			&.daff-primary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($primary)
+				);
+			}
 
-		&.daff-tertiary {
-			@include daff-underline-button-theme-variant(
-				theming.daff-color($tertiary)
-			);
-		}
+			&.daff-secondary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($secondary)
+				);
+			}
 
-		&.daff-black {
-			@include daff-underline-button-theme-variant($black);
-		}
+			&.daff-tertiary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($tertiary)
+				);
+			}
 
-		&.daff-white {
-			@include daff-underline-button-theme-variant($white);
-		}
+			&.daff-black {
+				@include daff-underline-button-theme-variant($black);
+			}
 
-		&.daff-theme {
-			@include daff-underline-button-theme-variant($base);
-		}
+			&.daff-white {
+				@include daff-underline-button-theme-variant($white);
+			}
 
-		&.daff-theme-contrast {
-			@include daff-underline-button-theme-variant($base-contrast);
-		}
+			&.daff-theme {
+				@include daff-underline-button-theme-variant($base);
+			}
 
-		&[disabled],
-		&.disabled {
-			@include daff-underline-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 4)
-			);
-		}
+			&.daff-theme-contrast {
+				@include daff-underline-button-theme-variant($base-contrast);
+			}
 
-		&.daff-warn {
-			@include daff-underline-button-theme-variant(theming.daff-color($warn));
-		}
+			&[disabled],
+			&.disabled {
+				@include daff-underline-button-theme-variant(
+					theming.daff-illuminate($base, $neutral, 4)
+				);
+			}
 
-		&.daff-critical {
-			@include daff-underline-button-theme-variant(
-				theming.daff-color($critical)
-			);
+			&.daff-warn {
+				@include daff-underline-button-theme-variant(theming.daff-color($warn));
+			}
+
+			&.daff-critical {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($critical)
+				);
+			}
+
+			&.daff-success {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($success)
+				);
+			}
 		}
 
-		&.daff-success {
+		@include theming.dark($type) {
 			@include daff-underline-button-theme-variant(
-				theming.daff-color($success)
+				theming.daff-color($neutral, 40)
 			);
+
+			&.daff-primary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($primary, 40)
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($secondary, 40)
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($tertiary, 40)
+				);
+			}
+
+			&.daff-black {
+				@include daff-underline-button-theme-variant($black);
+			}
+
+			&.daff-white {
+				@include daff-underline-button-theme-variant($white);
+			}
+
+			&.daff-theme {
+				@include daff-underline-button-theme-variant($base);
+			}
+
+			&.daff-theme-contrast {
+				@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)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($critical, 40)
+				);
+			}
+
+			&.daff-success {
+				@include daff-underline-button-theme-variant(
+					theming.daff-color($success, 40)
+				);
+			}
 		}
 	}
 }

package/callout/README.md

@@ -7,13 +7,14 @@ Callouts can be used multiple times on a page. It's a flexible and extensible co
 ## Usage
 
 ### Within a standalone component
-To use callout in a standalone component, import it directly into your custom component:
+To use callout in a standalone component, import `DAFF_CALLOUT_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_CALLOUT_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use callout in a module, import `DaffCalloutModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffCalloutModule } from '@daffodil/design/callout';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/callout/callout.d.ts

@@ -4,4 +4,7 @@ import { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive'
 import { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';
 import { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';
 import { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_CALLOUT_COMPONENTS: readonly [typeof DaffCalloutComponent, typeof DaffCalloutIconDirective, typeof DaffCalloutTitleDirective, typeof DaffCalloutSubtitleDirective, typeof DaffCalloutTaglineDirective, typeof DaffCalloutBodyDirective];

package/card/README.md

@@ -12,13 +12,16 @@ The example below is a default, filled card that includes all of a card's pre-st
 ## Usage
 
 ### Within a standalone component
-To use card in a standalone component, import it directly into your custom component:
+To use card in a standalone component, import each card type directly into your custom component.
+
+The following imports are available, depending on which card you choose to use: `DAFF_CARD_COMPONENTS`, `DAFF_RAISED_CARD_COMPONENTS`, `DAFF_STROKED_CARD_COMPONENTS`. If you need to use all the card types, you can use `DAFF_ALL_CARD_COMPONENTS`.
 
 ```ts
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_CARD_COMPONENTS,
   ],
@@ -31,8 +34,8 @@ To use card in a module, import `DaffCardModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffCardModule } from '@daffodil/design/card';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

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

@@ -0,0 +1,7 @@
+import { DaffCardBaseDirective } from '../../card-base.directive';
+import * as i0 from "@angular/core";
+export declare class DaffCardComponent extends DaffCardBaseDirective {
+    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

@@ -0,0 +1,7 @@
+import { DaffCardBaseDirective } from '../../card-base.directive';
+import * as i0 from "@angular/core";
+export declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
+    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

@@ -0,0 +1,7 @@
+import { DaffCardBaseDirective } from '../../card-base.directive';
+import * as i0 from "@angular/core";
+export declare class DaffStrokedCardComponent extends DaffCardBaseDirective {
+    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/card-base.directive.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+/**
+ * This attribute determines what orientation the the card contents are stacked.
+ */
+export type DaffCardOrientation = 'vertical' | 'horizontal';
+export declare enum DaffCardOrientationEnum {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+export declare class DaffCardBaseDirective {
+    private _orientation;
+    get orientation(): DaffCardOrientation;
+    set orientation(value: DaffCardOrientation);
+    /**
+     * @docs-private
+     */
+    get verticalClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get horizontalClass(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+}

package/card/card.d.ts

@@ -1,8 +1,25 @@
-import { DaffCardComponent } from './card/card.component';
+import { DaffCardComponent } from './card/basic/basic.component';
+import { DaffRaisedCardComponent } from './card/raised/raised.component';
+import { DaffStrokedCardComponent } from './card/stroked/stroked.component';
 import { DaffCardActionsDirective } from './card-actions/card-actions.directive';
 import { DaffCardContentDirective } from './card-content/card-content.directive';
 import { DaffCardIconDirective } from './card-icon/card-icon.directive';
 import { DaffCardImageDirective } from './card-image/card-image.directive';
 import { DaffCardTaglineDirective } from './card-tagline/card-tagline.directive';
 import { DaffCardTitleDirective } from './card-title/card-title.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_STROKED_CARD_COMPONENTS: readonly [typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];

package/card/card.module.d.ts

@@ -1,17 +1,19 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "./card/card.component";
-import * as i3 from "./card-icon/card-icon.directive";
-import * as i4 from "./card-image/card-image.directive";
-import * as i5 from "./card-tagline/card-tagline.directive";
-import * as i6 from "./card-title/card-title.directive";
-import * as i7 from "./card-content/card-content.directive";
-import * as i8 from "./card-actions/card-actions.directive";
+import * as i2 from "./card/basic/basic.component";
+import * as i3 from "./card/raised/raised.component";
+import * as i4 from "./card/stroked/stroked.component";
+import * as i5 from "./card-icon/card-icon.directive";
+import * as i6 from "./card-image/card-image.directive";
+import * as i7 from "./card-tagline/card-tagline.directive";
+import * as i8 from "./card-title/card-title.directive";
+import * as i9 from "./card-content/card-content.directive";
+import * as i10 from "./card-actions/card-actions.directive";
 /**
  * @deprecated in favor of {@link DAFF_CARD_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1.CommonModule, typeof i2.DaffCardComponent, typeof i3.DaffCardIconDirective, typeof i4.DaffCardImageDirective, typeof i5.DaffCardTaglineDirective, typeof i6.DaffCardTitleDirective, typeof i7.DaffCardContentDirective, typeof i8.DaffCardActionsDirective], [typeof i2.DaffCardComponent, typeof i3.DaffCardIconDirective, typeof i4.DaffCardImageDirective, typeof i5.DaffCardTaglineDirective, typeof i6.DaffCardTitleDirective, typeof i7.DaffCardContentDirective, typeof i8.DaffCardActionsDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1.CommonModule, typeof i2.DaffCardComponent, typeof i3.DaffRaisedCardComponent, typeof i4.DaffStrokedCardComponent, typeof i5.DaffCardIconDirective, typeof i6.DaffCardImageDirective, typeof i7.DaffCardTaglineDirective, typeof i8.DaffCardTitleDirective, typeof i9.DaffCardContentDirective, typeof i10.DaffCardActionsDirective], [typeof i2.DaffCardComponent, typeof i3.DaffRaisedCardComponent, typeof i4.DaffStrokedCardComponent, typeof i5.DaffCardIconDirective, typeof i6.DaffCardImageDirective, typeof i7.DaffCardTaglineDirective, typeof i8.DaffCardTitleDirective, typeof i9.DaffCardContentDirective, typeof i10.DaffCardActionsDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffCardModule>;
 }

package/card/public_api.d.ts

@@ -1,6 +1,11 @@
 export { DaffCardModule } from './card.module';
 export { DAFF_CARD_COMPONENTS } from './card';
-export * from './card/card.component';
+export { DAFF_RAISED_CARD_COMPONENTS } from './card';
+export { DAFF_STROKED_CARD_COMPONENTS } from './card';
+export { DAFF_ALL_CARD_COMPONENTS } from './card';
+export * from './card/basic/basic.component';
+export * from './card/raised/raised.component';
+export * from './card/stroked/stroked.component';
 export * from './card-icon/card-icon.directive';
 export * from './card-image/card-image.directive';
 export * from './card-tagline/card-tagline.directive';

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

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@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');
+
+	.daff-raised-card {
+		box-shadow: 0 6px 12px -4px rgba($black, 0.12),
+			0 4px 8px -2px rgba($black, 0.06);
+	}
+
+	a {
+		&.daff-raised-card {
+			.daff-card__wrapper {
+				&::after {
+					box-shadow: 0 16px 32px -4px rgba($black, 0.12),
+						0 8px 12px -2px rgba($black, 0.06);
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@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');
+
+	.daff-stroked-card {
+		border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+
+		&.daff-primary {
+			border: 1px solid theming.daff-illuminate($base-contrast, $primary, 3);
+		}
+
+		&.daff-secondary {
+			border: 1px solid theming.daff-illuminate($base-contrast, $secondary, 3);
+		}
+
+		&.daff-tertiary {
+			border: 1px solid theming.daff-illuminate($base-contrast, $tertiary, 3);
+		}
+
+		&.daff-theme {
+			border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&.daff-theme-contrast {
+			border: 1px solid theming.daff-illuminate($base-contrast, $neutral, 2);
+		}
+
+		&.daff-black {
+			border: 1px solid theming.daff-color($neutral, 90);
+		}
+
+		&.daff-white {
+			border: 1px solid theming.daff-color($neutral, 20);
+		}
+	}
+}

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

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-basic-card-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-linkable-card-theme-variant($hover-color) {
+	.daff-card__wrapper {
+		&::after {
+			background: $hover-color;
+		}
+	}
+
+	&:hover,
+	&:focus {
+		color: theming.daff-text-contrast($hover-color);
+
+		.daff-card__wrapper {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@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');
+
+	.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-secondary {
+			@include daff-basic-card-theme-variant(theming.daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
+		}
+
+		&.daff-theme {
+			@include daff-basic-card-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-basic-card-theme-variant($base-contrast);
+		}
+
+		&.daff-black {
+			@include daff-basic-card-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-basic-card-theme-variant($white);
+		}
+	}
+
+	a {
+		&.daff-card,
+		&.daff-raised-card,
+		&.daff-stroked-card {
+			@include daff-linkable-card-theme-variant(
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+
+			&.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-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)
+				);
+			}
+		}
+	}
+}