@daffodil/design 0.42.3 → 0.43.1

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

@@ -0,0 +1,570 @@
+@use 'sass:map';
+@use '../../../scss/theming';
+@use '../../../scss/core';
+@use './button-theme-variants/button';
+@use './button-theme-variants/icon';
+@use './button-theme-variants/raised';
+@use './button-theme-variants/stroked';
+@use './button-theme-variants/underline';
+@use './button-theme-variants/focus';
+
+@mixin daff-button-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-button {
+		@include button.daff-button-theme-variant(
+			theming.daff-illuminate($base, $gray, 2),
+			theming.daff-illuminate($base, $gray, 3),
+			theming.daff-illuminate($base, $gray, 4)
+		);
+
+		&.daff-primary {
+			@include button.daff-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.daff-color($primary, 80)
+			);
+		}
+
+		&.daff-secondary {
+			@include button.daff-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70),
+				theming.daff-color($secondary, 80)
+			);
+		}
+
+		&.daff-tertiary {
+			@include button.daff-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70),
+				theming.daff-color($tertiary, 80)
+			);
+		}
+
+		&.daff-black {
+			@include button.daff-button-theme-variant(
+				$black,
+				theming.daff-color($gray, 100),
+				theming.daff-color($gray, 90)
+			);
+		}
+
+		&.daff-white {
+			@include button.daff-button-theme-variant(
+				$white,
+				theming.daff-color($gray, 20),
+				theming.daff-color($gray, 30)
+			);
+		}
+
+		&.daff-theme {
+			@include button.daff-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $gray, 2),
+				theming.daff-illuminate($base, $gray, 3)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include button.daff-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $gray, 2),
+				theming.daff-illuminate($base-contrast, $gray, 3)
+			);
+		}
+
+		&[disabled] {
+			@include button.daff-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-illuminate($base, $gray, 3)
+			);
+			color: theming.daff-illuminate($base, $gray, 5);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $gray, 5);
+			}
+		}
+
+		&.daff-warn {
+			@include button.daff-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 70),
+				theming.daff-color(theming.$daff-bronze, 80)
+			);
+		}
+
+		&.daff-success {
+			@include button.daff-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 70),
+				theming.daff-color(theming.$daff-green, 80)
+			);
+		}
+
+		&.daff-danger {
+			@include button.daff-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 70),
+				theming.daff-color(theming.$daff-red, 80)
+			);
+		}
+	}
+
+	.daff-raised-button {
+		@include raised.daff-raised-button-theme-variant(
+			theming.daff-illuminate($base, $gray, 2),
+			theming.daff-illuminate($base, $gray, 3),
+			theming.daff-color($gray)
+		);
+
+		&.daff-primary {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70),
+				theming.daff-color($secondary)
+			);
+		}
+		
+		&.daff-tertiary {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70),
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-black {
+			@include raised.daff-raised-button-theme-variant(
+				$black,
+				theming.daff-color($gray, 100),
+				theming.daff-color($gray)
+			);
+		}
+
+		&.daff-white {
+			@include raised.daff-raised-button-theme-variant(
+				$white,
+				theming.daff-color($gray, 10),
+				theming.daff-color($gray)
+			);
+		}
+
+		&.daff-theme {
+			@include raised.daff-raised-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $gray, 1),
+				$base
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include raised.daff-raised-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $gray, 1),
+				$base-contrast
+			);
+		}
+
+		&[disabled] {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-illuminate($base, $gray, 6)
+			);
+			color: theming.daff-illuminate($base, $gray, 5);
+
+			&:hover {
+				box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
+				color: theming.daff-illuminate($base, $gray, 5);
+			}
+		}
+
+		&.daff-warn {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 70),
+				theming.daff-color(theming.$daff-bronze, 60)
+			);
+		}
+
+		&.daff-danger {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 70),
+				theming.daff-color(theming.$daff-red, 60)
+			);
+		}
+
+		&.daff-success {
+			@include raised.daff-raised-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 70),
+				theming.daff-color(theming.$daff-green, 60)
+			);
+		}
+	}
+
+	.daff-icon-button {
+		@include icon.daff-icon-button-theme-variant(
+			theming.daff-illuminate($base, $gray, 5),
+			theming.daff-illuminate($base, $gray, 6),
+			theming.daff-illuminate($base, $gray, 7)
+		);
+
+		&.daff-primary {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.daff-color($primary, 80)
+			);
+		}
+
+		&.daff-secondary {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70),
+				theming.daff-color($secondary, 80)
+			);
+		}
+
+		&.daff-tertiary {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70),
+				theming.daff-color($tertiary, 80)
+			);
+		}
+
+		&.daff-black {
+			@include icon.daff-icon-button-theme-variant(
+				$black,
+				theming.daff-color($gray, 100),
+				theming.daff-color($gray, 80)
+			);
+		}
+
+		&.daff-white {
+			@include icon.daff-icon-button-theme-variant(
+				$white,
+				theming.daff-color($gray, 20),
+				theming.daff-color($gray, 30)
+			);
+		}
+
+		&.daff-theme {
+			@include icon.daff-icon-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $gray, 1),
+				theming.daff-illuminate($base, $gray, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include icon.daff-icon-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $gray, 1),
+				theming.daff-illuminate($base-contrast, $gray, 2)
+			);
+		}
+z
+		&[disabled] {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 4),
+				theming.daff-illuminate($base, $gray, 4),
+				theming.daff-illuminate($base, $gray, 4)
+			);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $gray, 4);
+			}
+		}
+
+		&.daff-warn {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 70),
+				theming.daff-color(theming.$daff-bronze, 80)
+			);
+		}
+
+		&.daff-danger {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 70),
+				theming.daff-color(theming.$daff-red, 80)
+			);
+		}
+
+		&.daff-success {
+			@include icon.daff-icon-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 70),
+				theming.daff-color(theming.$daff-green, 80)
+			);
+		}
+	}
+
+	.daff-stroked-button {
+		background-color: transparent;
+		border: 1px solid theming.daff-illuminate($base, $gray, 5);
+		color: theming.daff-text-contrast($base);
+
+		&:hover,
+		&:focus {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+			border: 1px solid theming.daff-illuminate($base, $gray, 2);
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $gray, 2)
+			);
+		}
+
+		&:active {
+			background-color: theming.daff-illuminate($base, $gray, 3);
+			border: 1px solid theming.daff-illuminate($base, $gray, 3);
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $gray, 3)
+			);
+		}
+
+		&.daff-primary {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70)
+			);
+		}
+
+		&.daff-secondary {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70)
+			);
+		}
+
+		&.daff-tertiary {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70)
+			);
+		}
+
+		&.daff-black {
+			@include stroked.daff-stroked-button-theme-variant(
+				$black,
+				$black,
+				theming.daff-color($gray, 100)
+			);
+		}
+
+		&.daff-white {
+			@include stroked.daff-stroked-button-theme-variant(
+				$white,
+				$white,
+				theming.daff-color($gray, 20)
+			);
+		}
+
+		&.daff-theme {
+			@include stroked.daff-stroked-button-theme-variant(
+				$base,
+				$base,
+				theming.daff-illuminate($base, $gray, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include stroked.daff-stroked-button-theme-variant(
+				$base-contrast,
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $gray, 2)
+			);
+		}
+
+		&[disabled] {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-illuminate($base, $gray, 5),
+				transparent
+			);
+
+			&:hover {
+				background-color: transparent;
+				color: theming.daff-illuminate($base, $gray, 5);
+			}
+		}
+
+		&.daff-warn {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 70)
+			);
+		}
+
+		&.daff-danger {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 70)
+			);
+		}
+
+		&.daff-success {
+			@include stroked.daff-stroked-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 70)
+			);
+		}
+	}
+
+	.daff-underline-button {
+		@include underline.daff-underline-button-theme-variant(
+			theming.daff-illuminate($base, $gray, 7)
+		);
+
+		&.daff-primary {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-black {
+			@include underline.daff-underline-button-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include underline.daff-underline-button-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include underline.daff-underline-button-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include underline.daff-underline-button-theme-variant($base-contrast);
+		}
+
+		&[disabled] {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 4)
+			);
+		}
+
+		&.daff-warn {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60)
+			);
+		}
+
+		&.daff-danger {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60)
+			);
+		}
+
+		&.daff-success {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60)
+			);
+		}
+	}
+
+	.daff-button,
+	.daff-stroked-button,
+	.daff-underline-button,
+	.daff-icon-button {
+		@include focus.daff-button-focus-theme-variant(
+			theming.daff-color($gray)
+		);
+
+		&.daff-primary {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-black {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($gray)
+			);
+		}
+
+		&.daff-white {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($gray)
+			);
+		}
+
+		&.daff-theme {
+			@include focus.daff-button-focus-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color($gray)
+			);
+		}
+
+		&.daff-warn {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60)
+			);
+		}
+
+		&.daff-danger {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color(theming.$daff-red, 60)
+			);
+		}
+
+		&.daff-success {
+			@include focus.daff-button-focus-theme-variant(
+				theming.daff-color(theming.$daff-green, 60)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,7 @@
+@use '../../../../scss/theming';
+
+@mixin daff-error-message-theme($theme) {
+	.daff-error-message {
+		color: theming.daff-color(theming.$daff-red, 60);
+	}
+}

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

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../../../../scss/core';
+@use '../../../../../scss/theming';
+
+@mixin daff-form-field-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-form-field {
+		&__control {
+			background: $base;
+			border: 1px solid theming.daff-illuminate($base, $gray, 3);
+			color: theming.daff-illuminate($base-contrast, $gray, 4);
+
+			&:focus {
+				border: 1px solid $base-contrast;
+			}
+
+			&.daff-error {
+				border: 1px solid theming.daff-color(theming.$daff-red, 60);
+
+				&:focus {
+					border: 1px solid theming.daff-color(theming.$daff-red, 60);
+				}
+			}
+
+			&.daff-valid {
+				> * {
+					color: $base-contrast;
+				}
+			}
+		}
+	}
+}

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

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

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

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../../../../scss/core';
+@use '../../../../../scss/theming';
+
+@mixin daff-select-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	.daff-native-select {
+		color: theming.daff-illuminate($base-contrast, $gray, 4);
+
+		// removes dotted border on in FF
+		&:-moz-focusring {
+			color: transparent;
+			text-shadow: 0 0 0 $black;
+		}
+	}
+}

package/src/atoms/loading-icon/loading-icon-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '../../../scss/core';
+@use '../../../scss/theming';
+
+@mixin daff-loading-icon-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	.daff-loading-icon {
+		&.daff-primary {
+			circle {
+				stroke: theming.daff-color($primary);
+			}
+		}
+
+		&.daff-secondary {
+			circle {
+				stroke: theming.daff-color($secondary);
+			}
+		}
+
+		&.daff-tertiary {
+			circle {
+				stroke: theming.daff-color($tertiary);
+			}
+		}
+
+		&.daff-theme {
+			circle {
+				stroke: $base;
+			}
+		}
+
+		&.daff-theme-contrast {
+			circle {
+				stroke: $base-contrast;
+			}
+		}
+
+		&.daff-black {
+			circle {
+				stroke: $black;
+			}
+		}
+
+		&.daff-white {
+			circle {
+				stroke: $white;
+			}
+		}
+	}
+}