@daffodil/design 0.83.0 → 0.85.0

package/quantity-field/README.md

@@ -0,0 +1,63 @@
+# Quantity Field
+Quantity field is a form control element that switches between a native select and input element.
+
+## Overview
+Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.
+
+<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use form field in a standalone component, import `DaffQuantityFieldComponent` directly into your custom component:
+
+```ts
+import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffQuantityFieldComponent,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use form field in a module, import `DaffQuantityFieldModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { DaffQuantityFieldModule } from '@daffodil/design/quantity-field';
+import { CustomComponent } from './custom.component';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffQuantityFieldModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Range Limits
+The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more information.
+
+## Disabled quantity field
+<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>
+
+## Custom Select Max Value (15)
+The maximum value at which the field will switch to using an input is configurable.
+<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>
+
+## Custom Range Limits (5 - 50)
+Custom range limits is the absolute minimum and maximum values can be specified.
+<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>

package/quantity-field/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/quantity-field/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffQuantityFieldModule } from './quantity-field.module';
+export { DaffQuantityFieldComponent } from './quantity-field.component';

package/{atoms/form/quantity-field → quantity-field}/quantity-field.component.d.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { DaffFormFieldControl } from '@daffodil/design';
 import { DaffQuantityInputComponent } from './quantity-input/quantity-input.component';
 import { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';
-import { DaffFormFieldControl } from '../form-field/form-field-control';
 import * as i0 from "@angular/core";
-export declare class DaffQuantityFieldComponent implements ControlValueAccessor, DaffFormFieldControl {
+export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number> {
     ngControl: NgControl;
     private cd;
     input: DaffQuantityInputComponent;
@@ -38,7 +38,7 @@ export declare class DaffQuantityFieldComponent implements ControlValueAccessor,
      * Returns the lesser of max and selectMax.
      */
     get _maxFloor(): number;
-    get controlType(): "native-select" | "native-input";
+    get controlType(): "native-input" | "native-select";
     get showInputField(): boolean;
     get showSelectField(): boolean;
     constructor(ngControl: NgControl, cd: ChangeDetectorRef);
@@ -49,6 +49,7 @@ export declare class DaffQuantityFieldComponent implements ControlValueAccessor,
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     focus(): void;
+    get value(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./quantity-field.component";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
+export declare class DaffQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffQuantityFieldModule, never, [typeof i1.CommonModule, typeof i2.DaffQuantityFieldComponent], [typeof i2.DaffQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffQuantityFieldModule>;
+}

package/{atoms/form/quantity-field → quantity-field}/quantity-input/quantity-input.component.d.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl, NgControl } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { DaffInputComponent } from '../../input/public_api';
+import { DaffInputComponent } from '@daffodil/design/input';
 import * as i0 from "@angular/core";
 export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     ngControl: NgControl;
@@ -30,6 +30,9 @@ export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     set value(value: any);
     get disabled(): boolean;
     constructor(ngControl: NgControl, changeDetectorRef: ChangeDetectorRef);
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     ngOnDestroy(): void;
     focus(): void;
@@ -42,5 +45,5 @@ export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     onValueChange(e: any): void;
     private setInputDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, true, never>;
 }

package/{atoms/form/quantity-field → quantity-field}/quantity-select/quantity-select.component.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { DaffNativeSelectComponent } from '../../native-select/public_api';
+import { DaffNativeSelectComponent } from '@daffodil/design';
 import * as i0 from "@angular/core";
 /**
  * Create an array of numbers from min to max, not including max.
@@ -47,5 +47,5 @@ export declare class DaffQuantitySelectComponent {
      */
     get valueArray(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantitySelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, true, never>;
 }

package/scss/state/skeleton/_mixins.scss

@@ -1,22 +1,22 @@
-@use '../../core';
-@use '../../theming';
+@use '../../theming' as *;
 
 @mixin daff-skeleton-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base: core.daff-map-get($theme, 'core', 'base');
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-skeleton {
-		&::before,
-		::before {
-			background: theming.daff-illuminate($base, $neutral, 2);
+		@include light($mode) {
+			&::before,
+			::before {
+				background: daff-color($neutral, 20);
+			}
 		}
 
-		@keyframes loading {
-			from {
-				opacity: 0.5;
-			}
-			to {
-				opacity: 1;
+		@include dark($mode) {
+			&::before,
+			::before {
+				background: daff-color($neutral, 90);
 			}
 		}
 	}
@@ -39,4 +39,13 @@
 		top: 0;
 		left: 0;
 	}
+
+	@keyframes loading {
+		from {
+			opacity: 0.5;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 }

package/scss/theme.scss

@@ -27,8 +27,8 @@
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
+@use '../src/atoms/form/hint/hint-theme' as hint;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
-@use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
@@ -86,7 +86,7 @@
 
 	@include form-field.daff-form-field-theme($theme);
 	@include error-message.daff-error-message-theme($theme);
-	@include input.daff-input-theme($theme);
+	@include hint.daff-hint-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
 
 	@include hero.daff-hero-theme($theme);

package/scss/theming/_configure-theme.scss

@@ -4,7 +4,7 @@
 @use 'get-color';
 
 $daff-light-theme: (
-	'type': 'light',
+	'mode': 'light',
 	'font-color': get-color.daff-color(palette.$daff-neutral, 110),
 	'base': get-color.daff-color(palette.$daff-neutral, 0),
 	'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
@@ -14,7 +14,7 @@ $daff-light-theme: (
 );
 
 $daff-dark-theme: (
-	'type': 'dark',
+	'mode': 'dark',
 	'font-color': get-color.daff-color(palette.$daff-neutral, 0),
 	'base': get-color.daff-color(palette.$daff-neutral, 100),
 	'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),
@@ -23,7 +23,7 @@ $daff-dark-theme: (
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
 );
 
-$supported-theme-types: (
+$supported-theme-modes: (
 	'light': $daff-light-theme,
 	'dark': $daff-dark-theme
 );
@@ -36,31 +36,31 @@ $supported-theme-types: (
 // that can be overriden by using the `daff-configure-theme-status` function.
 //
 // @usage
-// ```
+// ```scss
 // $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 // $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
 // $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
 //
-// $theme: daff-configure-theme($primary, $secondary, $tertiary)
+// $theme: daff-configure-theme($primary, $secondary, $tertiary, 'light');
 // ```
 @function daff-configure-theme(
 	$primary,
 	$secondary,
 	$tertiary,
-	$type: 'light'
+	$mode: 'light'
 ) {
 	$info: null;
 	$warn: null;
 	$critical: null;
 	$success: null;
 
-	@if($type == 'dark') {
+	@if($mode == 'dark') {
 		$info: configure-palette.daff-configure-palette(palette.$daff-neutral, 50);
 		$warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 50);
 		$critical: configure-palette.daff-configure-palette(palette.$daff-red, 50);
 		$success: configure-palette.daff-configure-palette(palette.$daff-green, 50);
 	}
-	@if($type == 'light') {
+	@if($mode == 'light') {
 		$info: configure-palette.daff-configure-palette(palette.$daff-neutral, 60);
 		$warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 60);
 		$critical: configure-palette.daff-configure-palette(palette.$daff-red, 60);
@@ -75,7 +75,7 @@ $supported-theme-types: (
 		'warn':  $warn,
 		'critical': $critical,
 		'success': $success,
-		'core': daff-build-theme-core($type)
+		'core': daff-build-theme-core($mode)
 	);
 }
 
@@ -111,18 +111,18 @@ $supported-theme-types: (
 //
 // @docs
 //
-// Create a core theme given a theme type
-// $type | ThemeType : "light" | "dark"
+// Retrieves the core theme given a theme mode
+// $mode: "light" | "dark"
 //
 // ```
 // @usage
 // daff-build-theme-core("light")
 // ```
-@function daff-build-theme-core($type: 'light') {
-	$error-msg: 'is not a valid theme type - valid types:';
-	@if (not map.has-key($supported-theme-types, $type)) {
-		@error '`#{$type}` `#{$error-msg}` `#{map-keys($supported-theme-types)}`';
+@function daff-build-theme-core($mode: 'light') {
+	$error-msg: 'is not a valid theme mode - valid modes:';
+	@if (not map.has-key($supported-theme-modes, $mode)) {
+		@error '`#{$mode}` `#{$error-msg}` `#{map-keys($supported-theme-modes)}`';
 	}
 
-	@return map.get($supported-theme-types, $type);
+	@return map.get($supported-theme-modes, $mode);
 }

package/scss/theming/_get-base-color.scss

@@ -0,0 +1,19 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves a base color from Daffodil's theme configurations.
+// $color must be one of these values: `white`, `black`, `base`, and `base-contrast`.
+// ```scss
+// $base: daff-get-base-color($theme, base);
+// ```
+@function daff-get-base-color($theme, $color) {
+	@if (
+		$color != 'white' and
+		$color != 'black' and
+		$color != base and
+		$color != base-contrast
+	) {
+		@error '' + $color + ' is not supported as part of Daffodil`s core colors.';
+	}
+
+	@return map-get.daff-map-get($theme, 'core', $color);
+}

package/scss/theming/_get-palette.scss

@@ -0,0 +1,27 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves a specific color palette from Daffodil's theme configurations.
+// $palette must be one of these values:
+// `primary`, `secondary`, `tertiary`, `informational`, `warn`, `critical`, `success`, and `neutral`.
+//
+// ```scss
+// $primary: daff-get-palette($theme, primary);
+// ```
+@function daff-get-palette($theme, $palette) {
+	@if (
+		$palette != primary and
+		$palette != secondary and
+		$palette != tertiary and
+		$palette != informational and
+		$palette != warn and
+		$palette != critical and
+		$palette != success and
+		$palette != neutral
+	) {
+		@error '' + $palette + ' is not a supported palette in Daffodil`s theme configurations.';
+	}
+	@if ($palette == 'neutral') {
+		@return map-get.daff-map-get($theme, 'core', $palette);
+	}
+	@return map-get.daff-map-get($theme, $palette);
+}

package/scss/theming/_get-theme-mode.scss

@@ -0,0 +1,9 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves the mode from Daffodil's theme configurations.
+// ```scss
+// $mode: daff-get-theme-mode($theme);
+// ```
+@function daff-get-theme-mode($theme) {
+	@return map-get.daff-map-get($theme, 'core', 'mode');
+}

package/scss/theming/_index.scss

@@ -6,3 +6,6 @@
 @forward 'configure-theme';
 @forward 'light-dark';
 @forward 'daff-theme';
+@forward 'get-palette';
+@forward 'get-base-color';
+@forward 'get-theme-mode';

package/scss/theming/_light-dark.scss

@@ -5,9 +5,9 @@
 // ```scss
 // @use 'theme' as daff-theme;
 //
-// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+// $mode: daff-theme.daff-get-theme-mode($theme);
 //
-// @include daff-theme.light($type) {
+// @include daff-theme.light($mode) {
 //   color: blue;
 //
 //   .class {
@@ -28,9 +28,9 @@
 // ```scss
 // @use 'theme' as daff-theme;
 //
-// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+// $mode: daff-theme.daff-get-theme-mode($theme);
 //
-// @include daff-theme.dark($type) {
+// @include daff-theme.dark($mode) {
 //   color: blue;
 //
 //   .class {

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/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,7 +1,9 @@
-@use '../../../../scss/theming';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-error-message-theme($theme) {
+	$critical: daff-get-palette($theme, critical);
+
 	.daff-error-message {
-		color: theming.daff-color(theming.$daff-red, 60);
+		color: daff-color($critical);
 	}
 }

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

@@ -1,37 +1,60 @@
-@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);
-	$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');
+	$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;
-			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
-			color: theming.daff-illuminate($base-contrast, $neutral, 4);
+		@include light($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral);
+				color: daff-color($neutral);
+			}
+		}
 
-			&:focus {
-				border: 1px solid $base-contrast;
+		@include dark($mode) {
+			.daff-form-field__control {
+				border: 1px solid daff-color($neutral, 40);
+				color: daff-color($neutral, 40);
+			}
+		}
+
+		&.daff-focused {
+			.daff-form-field__control {
+				border: 1px solid daff-color($primary);
+			}
+			.daff-form-label {
+				color: daff-color($primary);
 			}
+		}
 
-			&.daff-error {
-				border: 1px solid theming.daff-color(theming.$daff-red, 60);
+		&.daff-error {
+			.daff-form-field__control {
+				border: 1px solid daff-color($critical);
+			}
 
-				&:focus {
-					border: 1px solid theming.daff-color(theming.$daff-red, 60);
-				}
+			.daff-form-label {
+				color: daff-color($critical);
 			}
+		}
+
+		&.daff-valid {
+			color: $base-contrast;
+		}
+
+		&__control {
+			background: $base;
 
-			&.daff-valid {
-				> * {
-					color: $base-contrast;
-				}
+			input,
+			textarea,
+			select {
+				color: $base-contrast;
 			}
 		}
 	}

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

@@ -0,0 +1,22 @@
+@use '../../../../scss/theming' as *;
+
+// stylelint-disable selector-class-pattern
+@mixin daff-hint-theme($theme) {
+	$neutral: daff-get-palette($theme, neutral);
+	$success: daff-get-palette($theme, success);
+	$mode: daff-get-theme-mode($theme);
+
+	.daff-hint {
+		@include light($mode) {
+			color: daff-color($neutral, 80);
+		}
+
+		@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 {