@daffodil/design 0.84.0 → 0.86.0

package/scss/theming/_theme-css-variables.scss

@@ -1,40 +1,40 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '../core';
-@use '../theming';
+@use '../theming' as *;
 
 // @docs
 //
 // Global theme tokens
 @mixin daff-root-theme-tokens($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$warn: core.daff-map-get($theme, warn);
-	$success: core.daff-map-get($theme, success);
-	$critical: core.daff-map-get($theme, critical);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$warn: daff-get-palette($theme, warn);
+	$success: daff-get-palette($theme, success);
+	$critical: daff-get-palette($theme, critical);
+	$neutral: daff-get-palette($theme, neutral);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
 
 	--daff-theme-rgb: #{color.red($base), color.green($base), color.blue($base)};
 	--daff-theme-contrast-rgb: #{color.red($base-contrast), color.green($base-contrast),
 		color.blue($base-contrast)};
 	--daff-theme: #{$base};
 	--daff-theme-contrast: #{$base-contrast};
-	--daff-theme-primary: #{theming.daff-color($primary)};
-	--daff-theme-secondary: #{theming.daff-color($secondary)};
-	--daff-theme-tertiary: #{theming.daff-color($tertiary)};
-	--daff-theme-warn: #{theming.daff-color($warn)};
-	--daff-theme-success: #{theming.daff-color($success)};
-	--daff-theme-critical: #{theming.daff-color($critical)};
+	--daff-theme-primary: #{daff-color($primary)};
+	--daff-theme-secondary: #{daff-color($secondary)};
+	--daff-theme-tertiary: #{daff-color($tertiary)};
+	--daff-theme-warn: #{daff-color($warn)};
+	--daff-theme-success: #{daff-color($success)};
+	--daff-theme-critical: #{daff-color($critical)};
 	--daff-theme-white: #{$white};
 	--daff-theme-black: #{$black};
-	--daff-theme-gray: #{theming.daff-color($neutral)};
+	--daff-theme-gray: #{daff-color($neutral)};
 	--daff-base-bg: #{$base};
-	--daff-base-text: #{theming.daff-text-contrast($base)};
+	--daff-base-text: #{daff-text-contrast($base)};
 }
 
 @mixin daff-theme-css-variables($theme) {

package/scss/theming/contrast/luminance/luminance.scss

@@ -10,9 +10,9 @@
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 
 @function daff-luminance($color) {
-	$red-index: color.red($color) + 1;
-	$green-index: color.green($color) + 1;
-	$blue-index: color.blue($color) + 1;
+	$red-index: color.channel($color, 'red') + 1;
+	$green-index: color.channel($color, 'green') + 1;
+	$blue-index: color.channel($color, 'blue') + 1;
 
 	$red: list.nth(v.$linear-channel-values, $red-index);
 	$green: list.nth(v.$linear-channel-values, $green-index);

package/sidebar/src/sidebar-theme.scss

@@ -1,13 +1,12 @@
-@use '../../scss/core';
+@use '../../scss/theming' as *;
 
 @mixin daff-sidebar-theme($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$font-color: core.daff-map-get($theme, 'core', 'font-color');
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
 
 	.daff-sidebar {
 		background: $base;
-		color: $font-color;
+		color: $base-contrast;
 	}
 
 	.daff-sidebar-viewport {

package/src/atoms/form/error-message/error-message-theme.scss

@@ -1,10 +1,9 @@
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-error-message-theme($theme) {
-	$critical: core.daff-map-get($theme, critical);
+	$critical: daff-get-palette($theme, critical);
 
 	.daff-error-message {
-		color: theming.daff-color($critical);
+		color: daff-color($critical);
 	}
 }

package/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -1,48 +1,64 @@
-@use 'sass:map';
-@use '../../../../../scss/core';
-@use '../../../../../scss/theming';
+@use '../../../../../scss/theming' as *;
 
 @mixin daff-form-field-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$critical: core.daff-map-get($theme, critical);
-	$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');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$critical: daff-get-palette($theme, critical);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-form-field {
-		&__control {
-			background: $base;
-
-			@include theming.light($type) {
-				border: 1px solid theming.daff-color($neutral);
-				color: theming.daff-color($neutral);
+		@include light($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral);
+				color: daff-color($neutral);
 			}
+		}
 
-			@include theming.dark($type) {
-				border: 1px solid theming.daff-color($neutral, 40);
-				color: theming.daff-color($neutral, 40);
+		@include dark($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral, 40);
+				color: daff-color($neutral, 40);
 			}
+		}
 
-			&.daff-focused {
-				border: 1px solid theming.daff-color($primary);
+		&.daff-focused {
+			.daff-form-field__control {
+				border: 1px solid daff-color($primary);
+			}
 
-				.daff-form-label {
-					color: theming.daff-color($primary);
-				}
+			.daff-form-label,
+			label,
+			.daff-form-field__label {
+				color: daff-color($primary);
 			}
+		}
 
-			&.daff-error {
-				border: 1px solid theming.daff-color($critical);
+		&.daff-error {
+			.daff-form-field__control {
+				border: 1px solid daff-color($critical);
+			}
 
-				.daff-form-label {
-					color: theming.daff-color($critical);
-				}
+			.daff-form-label,
+			label,
+			.daff-form-field__label {
+				color: daff-color($critical);
 			}
+		}
+
+		&.daff-valid {
+			color: $base-contrast;
+		}
+
+		&__control {
+			background: $base;
 
-			&.daff-valid {
+			input,
+			textarea,
+			select {
 				color: $base-contrast;
 			}
 		}

package/src/atoms/form/hint/hint-theme.scss

@@ -1,17 +1,22 @@
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use '../../../../scss/theming' as *;
 
+// stylelint-disable selector-class-pattern
 @mixin daff-hint-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$success: daff-get-palette($theme, success);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-hint {
-		@include theming.light($type) {
-			color: theming.daff-color($neutral, 80);
+		@include light($mode) {
+			color: daff-color($neutral, 80);
 		}
 
-		@include theming.dark($type) {
-			color: theming.daff-color($neutral, 30);
+		@include dark($mode) {
+			color: daff-color($neutral, 30);
+		}
+
+		&.validated {
+			color: daff-color($success);
 		}
 	}
 }

package/src/atoms/form/native-select/native-select-theme.scss

@@ -1,14 +1,12 @@
-@use 'sass:map';
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-native-select-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: daff-get-palette($theme, neutral);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$black: daff-get-base-color($theme, 'black');
 
 	.daff-native-select {
-		color: theming.daff-illuminate($base-contrast, $neutral, 4);
+		color: daff-illuminate($base-contrast, $neutral, 4);
 
 		// removes dotted border on in FF
 		&:-moz-focusring {

package/switch/src/switch-theme.scss

@@ -1,26 +1,24 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-switch-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$white: daff-get-base-color($theme, 'white');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-switch {
 		&__toggle {
 			border: 2px solid transparent;
 
 			&.daff-checked {
-				background-color: theming.daff-color($primary);
+				background-color: daff-color($primary);
 			}
 
-			@include theming.light($type) {
-				background-color: theming.daff-color($neutral, 30);
+			@include light($mode) {
+				background-color: daff-color($neutral, 30);
 
 				&:focus-within {
-					border: 2px solid theming.daff-color($neutral, 20);
+					border: 2px solid daff-color($neutral, 20);
 				}
 
 				&::before {
@@ -28,15 +26,15 @@
 				}
 			}
 
-			@include theming.dark($type) {
-				background-color: theming.daff-color($neutral, 80);
+			@include dark($mode) {
+				background-color: daff-color($neutral, 80);
 
 				&:focus-within {
-					border: 2px solid theming.daff-color($neutral, 90);
+					border: 2px solid daff-color($neutral, 90);
 				}
 
 				&::before {
-					background-color: theming.daff-color($neutral, 40);
+					background-color: daff-color($neutral, 40);
 				}
 
 				&.daff-checked {

package/tabs/src/tabs-theme.scss

@@ -1,47 +1,45 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-tabs-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$neutral: daff-get-palette($theme, neutral);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
 
-	@include theming.light($type) {
+	@include light($mode) {
 		.daff-tabs {
 			&__tab-list {
 				&::after {
-					background: theming.daff-color($neutral, 20);
+					background: daff-color($neutral, 20);
 				}
 			}
 		}
 
 		.daff-tab-activator {
-			border-bottom: 2px solid theming.daff-color($neutral, 20);
+			border-bottom: 2px solid daff-color($neutral, 20);
 			color: $base-contrast;
 
 			&.daff-selected {
-				border-bottom: 2px solid theming.daff-color($primary);
+				border-bottom: 2px solid daff-color($primary);
 			}
 		}
 	}
 
-	@include theming.dark($type) {
+	@include dark($mode) {
 		.daff-tabs {
 			&__tab-list {
 				&::after {
-					background: theming.daff-color($neutral, 80);
+					background: daff-color($neutral, 80);
 				}
 			}
 		}
 
 		.daff-tab-activator {
-			border-bottom: 2px solid theming.daff-color($neutral, 80);
+			border-bottom: 2px solid daff-color($neutral, 80);
 			color: $base-contrast;
 
 			&.daff-selected {
-				border-bottom: 2px solid theming.daff-color($primary);
+				border-bottom: 2px solid daff-color($primary);
 			}
 		}
 	}

package/toast/README.md

@@ -8,7 +8,7 @@ Toasts should be used to display temporary messages about actions or events that
 <design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
 
 ## Setting up the component
-`provideDaffToast()` must be added as a provider in your application's root component for global use or in a specific feature component for the toast functionality to work properly.
+`provideDaffToast()` must be added as a provider in your application's root component for the toast to work properly.
 
 ```ts
 import { provideDaffToast } from '@daffodil/design/toast';
@@ -47,6 +47,26 @@ You can set the status of a toast when opening it with `DaffToastService`, using
 
 <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
 
+## Positions
+Toasts are displayed in the top-right corner of the screen by default on desktop devices.
+
+You can customize the position of toast notifications by configuring the `position` property in the `provideDaffToast` provider.
+
+To customize toast positions, configure the `position` property in the `provideDaffToast` provider of your root component:
+
+```ts
+providers: [
+  provideDaffToast({
+    position: {
+      vertical: 'bottom',
+      horizontal: 'right',
+    },
+  }),
+],
+```
+
+> Note: On mobile devices, toasts will always appear in the bottom-center position, regardless of configuration settings.
+
 ## Accessibility
 By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement.
 

package/toast/examples/public_api.d.ts

@@ -1,6 +1,5 @@
 import { DefaultToastComponent } from './default-toast/default-toast.component';
 import { DismissibleToastComponent } from './dismissible-toast/dismissible-toast.component';
-import { ToastPositionsComponent } from './toast-positions/toast-positions.component';
 import { ToastStatusComponent } from './toast-status/toast-status.component';
 import { ToastWithCustomDurationComponent } from './toast-with-custom-duration/toast-with-custom-duration.component';
-export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof DismissibleToastComponent | typeof ToastPositionsComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];
+export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof DismissibleToastComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];

package/toast/helpers/toast-position.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The available vertical positions for toasts.
+ */
+export type DaffToastVerticalPosition = 'top' | 'bottom';
+/**
+ * The available horizontal positions for toasts.
+ */
+export type DaffToastHorizontalPosition = 'left' | 'center' | 'right';

package/toast/interfaces/toast-options.d.ts

@@ -0,0 +1,19 @@
+import { DaffToastHorizontalPosition, DaffToastVerticalPosition } from '../helpers/toast-position';
+export interface DaffToastVerticalPositionInterface {
+    vertical: DaffToastVerticalPosition;
+}
+export interface DaffToastHorizontalPositionInterface {
+    horizontal: DaffToastHorizontalPosition;
+}
+export type DaffToastPosition = DaffToastVerticalPositionInterface & DaffToastHorizontalPositionInterface;
+export interface DaffToastOptions {
+    /**
+     * The position of all toasts.
+     */
+    position: DaffToastPosition;
+    /** @docs-private */
+    useParent?: boolean;
+}
+export declare const daffToastDefaultOptions: DaffToastOptions;
+export declare const provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | import("@angular/core").InjectionToken<Partial<R>>) => import("@angular/core").FactoryProvider;
+export declare const DAFF_TOAST_OPTIONS: import("@angular/core").InjectionToken<DaffToastOptions>;

package/toast/interfaces/toast.d.ts

@@ -22,5 +22,5 @@ export interface DaffToast extends DaffToastData {
     /**
      * The observable that emits when the toast is closed.
      */
-    dismissalStream: Observable<void | number>;
+    dismissalStream: Observable<void>;
 }

package/toast/public_api.d.ts

@@ -1,8 +1,8 @@
-export { DaffToastPositionService } from './service/position.service';
 export { DaffToastService } from './service/toast.service';
 export { DaffToastConfiguration } from './toast/toast-config';
 export { DaffToast, DaffToastData, } from './interfaces/toast';
 export { DaffToastAction } from './interfaces/toast-action';
-export { DAFF_TOAST_OPTIONS, provideDaffToastOptions, } from './options/daff-toast-options';
 export { provideDaffToast } from './toast/toast-provider';
 export { DaffToastActionButtonSize, DaffToastActionButtonType, } from './interfaces/toast-action.type';
+export { DaffToastOptions, DaffToastPosition, } from './interfaces/toast-options';
+export { DaffToastVerticalPosition, DaffToastHorizontalPosition, } from './helpers/toast-position';

package/toast/service/position-strategy.d.ts

@@ -1,3 +1,3 @@
 import { PositionStrategy } from '@angular/cdk/overlay';
-import { DaffToastPosition } from '../options/daff-toast-options';
+import { DaffToastPosition } from '../interfaces/toast-options';
 export declare const createPositionStrategy: (position: DaffToastPosition) => PositionStrategy;

package/toast/service/position.service.d.ts

@@ -1,5 +1,5 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DaffToastOptions, DaffToastPosition } from '../options/daff-toast-options';
+import { DaffToastOptions, DaffToastPosition } from '../interfaces/toast-options';
 import * as i0 from "@angular/core";
 export declare class DaffToastPositionService {
     private options;

package/toast/service/toast.service.d.ts

@@ -4,7 +4,7 @@ import { Injector, OnDestroy } from '@angular/core';
 import { DaffFocusStackService } from '@daffodil/design';
 import { DaffToastPositionService } from './position.service';
 import { DaffToast, DaffToastData } from '../interfaces/toast';
-import { DaffToastOptions } from '../options/daff-toast-options';
+import { DaffToastOptions } from '../interfaces/toast-options';
 import { DaffToastConfiguration } from '../toast/toast-config';
 import * as i0 from "@angular/core";
 /**

package/toast/src/toast-theme.scss

@@ -1,112 +1,110 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-toast-theme($theme) {
-	$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);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$black: core.daff-map-get($theme, 'core', 'black');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$info: daff-get-palette($theme, informational);
+	$warn: daff-get-palette($theme, warn);
+	$critical: daff-get-palette($theme, critical);
+	$success: daff-get-palette($theme, success);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$black: daff-get-base-color($theme, 'black');
+	$white: daff-get-base-color($theme, 'white');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-toast {
-		@include theming.light($type) {
-			background: theming.daff-color($neutral, 10);
+		@include light($mode) {
+			background: daff-color($neutral, 10);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);
-			color: theming.daff-text-contrast($base);
+			color: daff-text-contrast($base);
 
 			&::before {
-				background: theming.daff-color($neutral, 40);
+				background: daff-color($neutral, 40);
 			}
 
 			&.daff-success {
-				background: theming.daff-color($success, 10);
+				background: daff-color($success, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($success);
+					color: daff-color($success);
 				}
 
 				&::before {
-					background: theming.daff-color($success);
+					background: daff-color($success);
 				}
 			}
 
 			&.daff-warn {
-				background: theming.daff-color($warn, 10);
+				background: daff-color($warn, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($warn);
+					color: daff-color($warn);
 				}
 
 				&::before {
-					background: theming.daff-color($warn);
+					background: daff-color($warn);
 				}
 			}
 
 			&.daff-critical {
-				background: theming.daff-color($critical, 10);
+				background: daff-color($critical, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($critical);
+					color: daff-color($critical);
 				}
 
 				&::before {
-					background: theming.daff-color($critical);
+					background: daff-color($critical);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
-			background: theming.daff-color($neutral, 90);
+		@include dark($mode) {
+			background: daff-color($neutral, 90);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);
-			color: theming.daff-text-contrast($base);
+			color: daff-text-contrast($base);
 
 			&::before {
-				background: theming.daff-color($neutral, 30);
+				background: daff-color($neutral, 30);
 			}
 
 			&.daff-success {
-				background: theming.daff-color($success, 90);
+				background: daff-color($success, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($success, 30);
+					color: daff-color($success, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($success, 30);
+					background: daff-color($success, 30);
 				}
 			}
 
 			&.daff-warn {
-				background: theming.daff-color($warn, 90);
+				background: daff-color($warn, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 30);
+					color: daff-color($warn, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($warn, 30);
+					background: daff-color($warn, 30);
 				}
 			}
 
 			&.daff-critical {
-				background: theming.daff-color($critical, 90);
+				background: daff-color($critical, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 30);
+					color: daff-color($critical, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($critical, 30);
+					background: daff-color($critical, 30);
 				}
 			}
 		}