@daffodil/design 0.83.0 → 0.85.0

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-underline-button-theme-variant($base-color: currentColor) {
 	color: $base-color;
@@ -11,49 +9,49 @@
 }
 
 @mixin daff-underline-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);
+	$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-underline-button {
-		@include theming.light($type) {
+		@include light($mode) {
 			@include daff-underline-button-theme-variant(
-				theming.daff-color($neutral, 70)
+				daff-color($neutral, 70)
 			);
 
 			&.daff-primary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($primary)
+					daff-color($primary)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($secondary)
+					daff-color($secondary)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($tertiary)
+					daff-color($tertiary)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-underline-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-underline-button-theme-variant($white);
 			}
 
@@ -65,58 +63,51 @@
 				@include daff-underline-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-underline-button-theme-variant(
-					theming.daff-color($neutral, 40)
-				);
-			}
-
 			&.daff-warn {
-				@include daff-underline-button-theme-variant(theming.daff-color($warn));
+				@include daff-underline-button-theme-variant(daff-color($warn));
 			}
 
 			&.daff-critical {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($critical)
+					daff-color($critical)
 				);
 			}
 
 			&.daff-success {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($success)
+					daff-color($success)
 				);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			@include daff-underline-button-theme-variant(
-				theming.daff-color($neutral, 40)
+				daff-color($neutral, 40)
 			);
 
 			&.daff-primary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($primary, 40)
+					daff-color($primary, 40)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($secondary, 40)
+					daff-color($secondary, 40)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($tertiary, 40)
+					daff-color($tertiary, 40)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-underline-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-underline-button-theme-variant($white);
 			}
 
@@ -128,28 +119,21 @@
 				@include daff-underline-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-underline-button-theme-variant(
-					theming.daff-color($neutral, 60)
-				);
-			}
-
 			&.daff-warn {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($warn, 40)
+					daff-color($warn, 40)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($critical, 40)
+					daff-color($critical, 40)
 				);
 			}
 
 			&.daff-success {
 				@include daff-underline-button-theme-variant(
-					theming.daff-color($success, 40)
+					daff-color($success, 40)
 				);
 			}
 		}

package/callout/src/callout-theme.scss

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