@daffodil/design 0.84.0 → 0.85.0

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,59 @@
-@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 light($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral);
+				color: daff-color($neutral);
+			}
+		}
 
-			@include theming.light($type) {
-				border: 1px solid theming.daff-color($neutral);
-				color: theming.daff-color($neutral);
+		@include dark($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral, 40);
+				color: daff-color($neutral, 40);
 			}
+		}
 
-			@include theming.dark($type) {
-				border: 1px solid theming.daff-color($neutral, 40);
-				color: theming.daff-color($neutral, 40);
+		&.daff-focused {
+			.daff-form-field__control {
+				border: 1px solid daff-color($primary);
+			}
+			.daff-form-label {
+				color: daff-color($primary);
 			}
+		}
 
-			&.daff-focused {
-				border: 1px solid theming.daff-color($primary);
+		&.daff-error {
+			.daff-form-field__control {
+				border: 1px solid daff-color($critical);
+			}
 
-				.daff-form-label {
-					color: theming.daff-color($primary);
-				}
+			.daff-form-label {
+				color: daff-color($critical);
 			}
+		}
 
-			&.daff-error {
-				border: 1px solid theming.daff-color($critical);
+		&.daff-valid {
+			color: $base-contrast;
+		}
 
-				.daff-form-label {
-					color: theming.daff-color($critical);
-				}
-			}
+		&__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/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);
 				}
 			}
 		}

package/tree/src/tree-theme.scss

@@ -1,28 +1,26 @@
-@use 'sass:map';
-@use '../../scss/theming';
-@use '../../scss/core';
+@use '../../scss/theming' as *;
 
 @mixin daff-tree-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);
 
 	// stylelint-disable selector-class-pattern
 	.daff-tree-item {
 		$root: &;
 
-		@include theming.light($type) {
+		@include light($mode) {
 			background-color: $base;
-			color: theming.daff-color($neutral, 90);
+			color: daff-color($neutral, 90);
 
 			&:hover {
-				background-color: theming.daff-color($neutral, 20);
+				background-color: daff-color($neutral, 20);
 			}
 
 			&::after {
@@ -30,21 +28,21 @@
 			}
 
 			&.selected {
-				background-color: theming.daff-color($neutral, 20);
+				background-color: daff-color($neutral, 20);
 				color: $base-contrast;
 
 				&::before {
-					background-color: theming.daff-color($primary);
+					background-color: daff-color($primary);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			background-color: $base;
-			color: theming.daff-color($neutral, 20);
+			color: daff-color($neutral, 20);
 
 			&:hover {
-				background-color: theming.daff-color($neutral, 90);
+				background-color: daff-color($neutral, 90);
 			}
 
 			&::after {
@@ -52,11 +50,11 @@
 			}
 
 			&.selected {
-				background-color: theming.daff-color($neutral, 90);
+				background-color: daff-color($neutral, 90);
 				color: $base-contrast;
 
 				&::before {
-					background-color: theming.daff-color($primary);
+					background-color: daff-color($primary);
 				}
 			}
 		}

package/atoms/form/quantity-field/public_api.d.ts

@@ -1,4 +0,0 @@
-export { DaffQuantityFieldModule } from './quantity-field.module';
-export { DaffQuantityFieldComponent } from './quantity-field.component';
-export { DaffQuantityInputComponent } from './quantity-input/quantity-input.component';
-export { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';

package/atoms/form/quantity-field/quantity-field.module.d.ts

@@ -1,13 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./quantity-field.component";
-import * as i2 from "./quantity-input/quantity-input.component";
-import * as i3 from "./quantity-select/quantity-select.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../native-select/native-select.module";
-import * as i6 from "@angular/forms";
-import * as i7 from "../input/input.module";
-export declare class DaffQuantityFieldModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffQuantityFieldModule, [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent], [typeof i4.CommonModule, typeof i5.DaffNativeSelectModule, typeof i6.ReactiveFormsModule, typeof i7.DaffInputModule], [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffQuantityFieldModule>;
-}

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

@@ -1,12 +0,0 @@
-@use '../../../../scss/core';
-@use '../../../../scss/theming';
-
-@mixin daff-input-theme($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-
-	.daff-input {
-		background: $base;
-		color: $base-contrast;
-	}
-}