@daffodil/design 0.83.0 → 0.85.0

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-icon-button-theme-variant(
 	$base-color: currentColor,
@@ -24,219 +22,193 @@
 }
 
 @mixin daff-icon-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-icon-button {
-		@include theming.light($type) {
+		@include light($mode) {
 			@include daff-icon-button-theme-variant(
-				theming.daff-color($neutral, 50),
-				theming.daff-color($neutral, 60),
-				theming.daff-color($neutral, 70)
+				daff-color($neutral, 50),
+				daff-color($neutral, 60),
+				daff-color($neutral, 70)
 			);
 
 			&.daff-primary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($primary),
-					theming.daff-color($primary, 70),
-					theming.daff-color($primary, 80)
+					daff-color($primary),
+					daff-color($primary, 70),
+					daff-color($primary, 80)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($secondary),
-					theming.daff-color($secondary, 70),
-					theming.daff-color($secondary, 80)
+					daff-color($secondary),
+					daff-color($secondary, 70),
+					daff-color($secondary, 80)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($tertiary),
-					theming.daff-color($tertiary, 70),
-					theming.daff-color($tertiary, 80)
+					daff-color($tertiary),
+					daff-color($tertiary, 70),
+					daff-color($tertiary, 80)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-icon-button-theme-variant(
 					$black,
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-icon-button-theme-variant(
 					$white,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme {
 				@include daff-icon-button-theme-variant(
 					$base,
-					theming.daff-color($neutral, 10),
-					theming.daff-color($neutral, 20)
+					daff-color($neutral, 10),
+					daff-color($neutral, 20)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-icon-button-theme-variant(
 					$base-contrast,
-					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 90),
+					daff-color($neutral, 80)
 				);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-icon-button-theme-variant(
-					theming.daff-color($neutral, 40),
-					theming.daff-color($neutral, 40),
-					theming.daff-color($neutral, 40)
-				);
-
-				&:hover {
-					color: theming.daff-color($neutral, 40);
-				}
-			}
-
 			&.daff-warn {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($warn),
-					theming.daff-color($warn, 70),
-					theming.daff-color($warn, 80)
+					daff-color($warn),
+					daff-color($warn, 70),
+					daff-color($warn, 80)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($critical),
-					theming.daff-color($critical, 70),
-					theming.daff-color($critical, 80)
+					daff-color($critical),
+					daff-color($critical, 70),
+					daff-color($critical, 80)
 				);
 			}
 
 			&.daff-success {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($success),
-					theming.daff-color($success, 70),
-					theming.daff-color($success, 80)
+					daff-color($success),
+					daff-color($success, 70),
+					daff-color($success, 80)
 				);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			@include daff-icon-button-theme-variant(
-				theming.daff-color($neutral, 50),
-				theming.daff-color($neutral, 40),
-				theming.daff-color($neutral, 30)
+				daff-color($neutral, 50),
+				daff-color($neutral, 40),
+				daff-color($neutral, 30)
 			);
 
 			&.daff-primary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($primary),
-					theming.daff-color($primary, 40),
-					theming.daff-color($primary, 30)
+					daff-color($primary),
+					daff-color($primary, 40),
+					daff-color($primary, 30)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($secondary),
-					theming.daff-color($secondary, 40),
-					theming.daff-color($secondary, 30)
+					daff-color($secondary),
+					daff-color($secondary, 40),
+					daff-color($secondary, 30)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($tertiary),
-					theming.daff-color($tertiary, 40),
-					theming.daff-color($tertiary, 30)
+					daff-color($tertiary),
+					daff-color($tertiary, 40),
+					daff-color($tertiary, 30)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-icon-button-theme-variant(
 					$black,
-					theming.daff-color($neutral, 100),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 100),
+					daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-icon-button-theme-variant(
 					$white,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
 			&.daff-theme {
 				@include daff-icon-button-theme-variant(
 					$base,
-					theming.daff-color($neutral, 100),
-					theming.daff-color($neutral, 80)
+					daff-color($neutral, 100),
+					daff-color($neutral, 80)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include daff-icon-button-theme-variant(
 					$base-contrast,
-					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30)
+					daff-color($neutral, 20),
+					daff-color($neutral, 30)
 				);
 			}
 
-			&[disabled],
-			&.disabled {
-				@include daff-icon-button-theme-variant(
-					theming.daff-color($neutral, 40),
-					theming.daff-color($neutral, 40),
-					theming.daff-color($neutral, 40)
-				);
-
-				&:hover {
-					color: theming.daff-color($neutral, 40);
-				}
-			}
-
 			&.daff-warn {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($warn),
-					theming.daff-color($warn, 40),
-					theming.daff-color($warn, 30)
+					daff-color($warn),
+					daff-color($warn, 40),
+					daff-color($warn, 30)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($critical),
-					theming.daff-color($critical, 40),
-					theming.daff-color($critical, 30)
+					daff-color($critical),
+					daff-color($critical, 40),
+					daff-color($critical, 30)
 				);
 			}
 
 			&.daff-success {
 				@include daff-icon-button-theme-variant(
-					theming.daff-color($success),
-					theming.daff-color($success, 40),
-					theming.daff-color($success, 30)
+					daff-color($success),
+					daff-color($success, 40),
+					daff-color($success, 30)
 				);
 			}
 		}

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

@@ -1,27 +1,25 @@
-@use 'sass:map';
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-raised-button-theme-variant($base-color) {
-	@if theming.daff-contrast-ratio(
+	@if daff-contrast-ratio(
 			$base-color,
-			theming.daff-text-contrast($base-color)
+			daff-text-contrast($base-color)
 		) < 4.5 {
 		@error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	@if theming.daff-contrast-ratio(
+	@if daff-contrast-ratio(
 			$base-color,
-			theming.daff-text-contrast($base-color)
+			daff-text-contrast($base-color)
 		) < 4.5 {
 		@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	$black: theming.daff-color(theming.$daff-neutral, 110);
+	$black: daff-color($daff-neutral, 110);
 	background-color: $base-color;
 	border: 1px solid $base-color;
 	box-shadow: 0 1px 5px -4px rgba($black, 0.5), 0 4px 8px 0 rgba($black, 0.05);
-	color: theming.daff-text-contrast($base-color);
+	color: daff-text-contrast($base-color);
 
 	&:hover {
 		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
@@ -29,41 +27,41 @@
 }
 
 @mixin daff-raised-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');
+	$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);
 
 	.daff-raised-button {
 		@include daff-raised-button-theme-variant(
-			theming.daff-illuminate($base, $neutral, 2)
+			daff-illuminate($base, $neutral, 2)
 		);
 
 		&.daff-primary {
-			@include daff-raised-button-theme-variant(theming.daff-color($primary));
+			@include daff-raised-button-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-raised-button-theme-variant(theming.daff-color($secondary));
+			@include daff-raised-button-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-raised-button-theme-variant(theming.daff-color($tertiary));
+			@include daff-raised-button-theme-variant(daff-color($tertiary));
 		}
 
-		&.daff-black {
+		&.daff-dark {
 			@include daff-raised-button-theme-variant($black);
 		}
 
-		&.daff-white {
+		&.daff-light {
 			@include daff-raised-button-theme-variant($white);
 		}
 
@@ -78,9 +76,9 @@
 		&[disabled],
 		&.disabled {
 			@include daff-raised-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 3)
+				daff-illuminate($base, $neutral, 3)
 			);
-			color: theming.daff-illuminate($base, $neutral, 5);
+			color: daff-illuminate($base, $neutral, 5);
 
 			&::after {
 				box-shadow: none;
@@ -88,15 +86,15 @@
 		}
 
 		&.daff-warn {
-			@include daff-raised-button-theme-variant(theming.daff-color($warn));
+			@include daff-raised-button-theme-variant(daff-color($warn));
 		}
 
 		&.daff-critical {
-			@include daff-raised-button-theme-variant(theming.daff-color($critical));
+			@include daff-raised-button-theme-variant(daff-color($critical));
 		}
 
 		&.daff-success {
-			@include daff-raised-button-theme-variant(theming.daff-color($success));
+			@include daff-raised-button-theme-variant(daff-color($success));
 		}
 	}
 }

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

@@ -1,6 +1,4 @@
-@use 'sass:map';
-@use '../../../../scss/theming';
-@use '../../../../scss/core';
+@use '../../../../scss/theming' as *;
 
 @mixin daff-stroked-button-theme-variant($base-color) {
 	border: 1px solid $base-color;
@@ -19,59 +17,59 @@
 }
 
 @mixin daff-stroked-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-stroked-button {
 		background: transparent;
-		border: 1px solid theming.daff-color($neutral, 50);
+		border: 1px solid daff-color($neutral, 50);
 		color: currentColor;
 
 		&::after {
-			background: rgba(theming.daff-color($neutral, 50), 0.1);
+			background: rgba(daff-color($neutral, 50), 0.1);
 		}
 
 		&:active {
 			&::after {
-				background: rgba(theming.daff-color($neutral, 50), 0.2);
+				background: rgba(daff-color($neutral, 50), 0.2);
 			}
 		}
 
-		@include theming.light($type) {
+		@include light($mode) {
 			&.daff-primary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($primary)
+					daff-color($primary)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($secondary)
+					daff-color($secondary)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($tertiary)
+					daff-color($tertiary)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-stroked-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-stroked-button-theme-variant($white);
 			}
 
@@ -83,63 +81,47 @@
 				@include daff-stroked-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				background-color: transparent;
-				border-color: theming.daff-color($neutral, 30);
-				color: theming.daff-color($neutral, 50);
-
-				&:hover {
-					color: theming.daff-color($neutral, 50);
-
-					&::after {
-						background-color: transparent;
-						opacity: 0;
-					}
-				}
-			}
-
 			&.daff-warn {
-				@include daff-stroked-button-theme-variant(theming.daff-color($warn));
+				@include daff-stroked-button-theme-variant(daff-color($warn));
 			}
 
 			&.daff-critical {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($critical)
+					daff-color($critical)
 				);
 			}
 
 			&.daff-success {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($success)
+					daff-color($success)
 				);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			&.daff-primary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($primary, 40)
+					daff-color($primary, 40)
 				);
 			}
 
 			&.daff-secondary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($secondary, 40)
+					daff-color($secondary, 40)
 				);
 			}
 
 			&.daff-tertiary {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($tertiary, 40)
+					daff-color($tertiary, 40)
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-stroked-button-theme-variant($black);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-stroked-button-theme-variant($white);
 			}
 
@@ -151,37 +133,21 @@
 				@include daff-stroked-button-theme-variant($base-contrast);
 			}
 
-			&[disabled],
-			&.disabled {
-				background-color: transparent;
-				border-color: theming.daff-color($neutral, 70);
-				color: theming.daff-color($neutral);
-
-				&:hover {
-					color: theming.daff-color($neutral);
-
-					&::after {
-						background-color: transparent;
-						opacity: 0;
-					}
-				}
-			}
-
 			&.daff-warn {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($warn, 40)
+					daff-color($warn, 40)
 				);
 			}
 
 			&.daff-critical {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($critical, 40)
+					daff-color($critical, 40)
 				);
 			}
 
 			&.daff-success {
 				@include daff-stroked-button-theme-variant(
-					theming.daff-color($success, 40)
+					daff-color($success, 40)
 				);
 			}
 		}