@daffodil/design 0.81.1 → 0.83.0

package/button/src/button/button-base.scss

@@ -1,8 +1,19 @@
 @use '../../../scss/interactions';
 @use '../../../scss/typography' as t;
 
+@mixin daff-button-elevated {
+	&.elevated { /* stylelint-disable-line selector-class-pattern */
+		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+
+		&:hover { /* stylelint-disable-line selector-class-pattern */
+			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
+		}
+	}
+}
+
 @mixin daff-button-base {
 	@include interactions.clickable();
+	@include t.text-truncate();
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -26,7 +37,9 @@
 	}
 
 	.daff-button__loading {
-		max-width: 1.5rem;
+		> * {
+			width: 100%;
+		}
 	}
 
 	.daff-button__content {
@@ -35,32 +48,36 @@
 }
 
 @mixin daff-button-background($border-radius) {
-	&::after {
-		content: '';
-		border-radius: $border-radius;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-		transition: opacity 300ms;
-	}
-
-	&:hover,
-	&:active {
+	&:not(&[disabled], &.disabled) {
 		&::after {
-			opacity: 1;
+			content: '';
+			border-radius: $border-radius;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+		}
+
+		&:hover,
+		&:active {
+			&::after {
+				opacity: 1;
+			}
 		}
 	}
 }
 
 @mixin daff-button-sizes {
-	min-width: 96px;
-
 	&.daff-sm {
 		font-size: t.$small-font-size;
 		line-height: 2rem;
 		height: 2rem;
 		padding: 0 1rem;
+
+		.daff-button__loading {
+			width: 1rem;
+		}
 	}
 
 	&.daff-md {
@@ -68,6 +85,10 @@
 		line-height: 3rem;
 		height: 3rem;
 		padding: 0 1.5rem;
+
+		.daff-button__loading {
+			width: 1.5rem;
+		}
 	}
 
 	&.daff-lg {
@@ -75,5 +96,9 @@
 		line-height: 3.5rem;
 		height: 3.5rem;
 		padding: 0 1.5rem;
+
+		.daff-button__loading {
+			width: 2rem;
+		}
 	}
 }

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

@@ -2,22 +2,16 @@
 @use '../../../../scss/theming';
 @use '../../../../scss/core';
 
-@mixin daff-flat-button-theme-variant($base-color, $active-color) {
+@mixin daff-flat-button-theme-variant($base-color) {
 	color: $base-color;
 
 	&::after {
-		background-color: $base-color;
-	}
-
-	&:hover {
-		color: theming.daff-text-contrast($base-color);
+		background-color: rgba($base-color, 0.1);
 	}
 
 	&:active {
-		color: theming.daff-text-contrast($active-color);
-
 		&::after {
-			background-color: $active-color;
+			background-color: rgba($base-color, 0.15);
 		}
 	}
 }
@@ -35,108 +29,173 @@
 	$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');
 
 	.daff-flat-button {
-		color: currentColor;
+		@include theming.light($type) {
+			@include daff-flat-button-theme-variant(
+				$base-contrast,
+			);
 
-		&::after {
-			background-color: theming.daff-illuminate($base, $neutral, 2);
-		}
+			&.daff-primary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($primary),
+				);
+			}
 
-		&:active {
-			&::after {
-				background-color: theming.daff-illuminate($base, $neutral, 3);
+			&.daff-secondary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($secondary),
+				);
 			}
-		}
 
-		&:hover,
-		&:active {
-			color: theming.daff-text-contrast(
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
+			&.daff-tertiary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($tertiary)
+				);
+			}
 
-		&.daff-primary {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70)
-			);
-		}
+			&.daff-black {
+				@include daff-flat-button-theme-variant(
+					$black,
+				);
+			}
 
-		&.daff-secondary {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70)
-			);
-		}
+			&.daff-white {
+				@include daff-flat-button-theme-variant(
+					$white,
+				);
+			}
 
-		&.daff-tertiary {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70)
-			);
-		}
+			&.daff-theme {
+				@include daff-flat-button-theme-variant(
+					$base,
+				);
+			}
 
-		&.daff-black {
-			@include daff-flat-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 100)
-			);
-		}
+			&.daff-theme-contrast {
+				@include daff-flat-button-theme-variant(
+					$base-contrast,
+				);
+			}
 
-		&.daff-white {
-			@include daff-flat-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20)
-			);
-		}
+			&[disabled],
+			&.disabled {
+				color: theming.daff-color($neutral, 50);
 
-		&.daff-theme {
-			@include daff-flat-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 2)
-			);
+				&::after {
+					background: transparent;
+				}
+
+				&:hover,
+				&:focus,
+				&:active {
+					&::after {
+						background: transparent;
+					}
+				}
+			}
+
+			&.daff-warn {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($warn)
+				);
+			}
+
+			&.daff-critical {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($critical)
+				);
+			}
+
+			&.daff-success {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($success)
+				);
+			}
 		}
 
-		&.daff-theme-contrast {
+		@include theming.dark($type) {
 			@include daff-flat-button-theme-variant(
 				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 2)
 			);
-		}
 
-		&[disabled],
-		&.disabled {
-			color: theming.daff-illuminate($base, $neutral, 5);
+			&.daff-primary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($primary, 40),
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($secondary, 40),
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($tertiary, 40)
+				);
+			}
+
+			&.daff-black {
+				@include daff-flat-button-theme-variant(
+					$black,
+				);
+			}
+
+			&.daff-white {
+				@include daff-flat-button-theme-variant(
+					$white,
+				);
+			}
+
+			&.daff-theme {
+				@include daff-flat-button-theme-variant(
+					$base,
+				);
+			}
+
+			&.daff-theme-contrast {
+				@include daff-flat-button-theme-variant(
+					$base-contrast,
+				);
+			}
+
+			&[disabled],
+			&.disabled {
+				color: theming.daff-color($neutral, 50);
 
-			&:hover,
-			&:focus,
-			&:active {
 				&::after {
 					background: transparent;
 				}
+
+				&:hover,
+				&:focus,
+				&:active {
+					&::after {
+						background: transparent;
+					}
+				}
 			}
-		}
 
-		&.daff-warn {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($warn),
-				theming.daff-color($warn, 70)
-			);
-		}
+			&.daff-warn {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($warn, 40)
+				);
+			}
 
-		&.daff-critical {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($critical),
-				theming.daff-color($critical, 70)
-			);
-		}
+			&.daff-critical {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($critical, 40)
+				);
+			}
 
-		&.daff-success {
-			@include daff-flat-button-theme-variant(
-				theming.daff-color($success),
-				theming.daff-color($success, 70)
-			);
+			&.daff-success {
+				@include daff-flat-button-theme-variant(
+					theming.daff-color($success, 40)
+				);
+			}
 		}
 	}
 }

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

@@ -36,105 +36,209 @@
 	$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');
 
 	.daff-icon-button {
-		@include daff-icon-button-theme-variant(
-			theming.daff-illuminate($base, $neutral, 5),
-			theming.daff-illuminate($base, $neutral, 6),
-			theming.daff-illuminate($base, $neutral, 7)
-		);
-
-		&.daff-primary {
+		@include theming.light($type) {
 			@include daff-icon-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70),
-				theming.daff-color($primary, 80)
+				theming.daff-color($neutral, 50),
+				theming.daff-color($neutral, 60),
+				theming.daff-color($neutral, 70)
 			);
-		}
 
-		&.daff-secondary {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70),
-				theming.daff-color($secondary, 80)
-			);
-		}
+			&.daff-primary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 70),
+					theming.daff-color($primary, 80)
+				);
+			}
 
-		&.daff-tertiary {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70),
-				theming.daff-color($tertiary, 80)
-			);
-		}
+			&.daff-secondary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 70),
+					theming.daff-color($secondary, 80)
+				);
+			}
 
-		&.daff-black {
-			@include daff-icon-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 100),
-				theming.daff-color($neutral, 80)
-			);
+			&.daff-tertiary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 70),
+					theming.daff-color($tertiary, 80)
+				);
+			}
+
+			&.daff-black {
+				@include daff-icon-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 90),
+					theming.daff-color($neutral, 80)
+				);
+			}
+
+			&.daff-white {
+				@include daff-icon-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
+
+			&.daff-theme {
+				@include daff-icon-button-theme-variant(
+					$base,
+					theming.daff-color($neutral, 10),
+					theming.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)
+				);
+			}
+
+			&[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-critical {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 70),
+					theming.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-white {
+		@include theming.dark($type) {
 			@include daff-icon-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20),
+				theming.daff-color($neutral, 50),
+				theming.daff-color($neutral, 40),
 				theming.daff-color($neutral, 30)
 			);
-		}
 
-		&.daff-theme {
-			@include daff-icon-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 1),
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
+			&.daff-primary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($primary),
+					theming.daff-color($primary, 40),
+					theming.daff-color($primary, 30)
+				);
+			}
 
-		&.daff-theme-contrast {
-			@include daff-icon-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 1),
-				theming.daff-illuminate($base-contrast, $neutral, 2)
-			);
-		}
+			&.daff-secondary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($secondary),
+					theming.daff-color($secondary, 40),
+					theming.daff-color($secondary, 30)
+				);
+			}
 
-		&[disabled],
-		&.disabled {
-			@include daff-icon-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 4),
-				theming.daff-illuminate($base, $neutral, 4),
-				theming.daff-illuminate($base, $neutral, 4)
-			);
+			&.daff-tertiary {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($tertiary),
+					theming.daff-color($tertiary, 40),
+					theming.daff-color($tertiary, 30)
+				);
+			}
 
-			&:hover {
-				color: theming.daff-illuminate($base, $neutral, 4);
+			&.daff-black {
+				@include daff-icon-button-theme-variant(
+					$black,
+					theming.daff-color($neutral, 100),
+					theming.daff-color($neutral, 80)
+				);
 			}
-		}
 
-		&.daff-warn {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($warn),
-				theming.daff-color($warn, 70),
-				theming.daff-color($warn, 80)
-			);
-		}
+			&.daff-white {
+				@include daff-icon-button-theme-variant(
+					$white,
+					theming.daff-color($neutral, 20),
+					theming.daff-color($neutral, 30)
+				);
+			}
 
-		&.daff-critical {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($critical),
-				theming.daff-color($critical, 70),
-				theming.daff-color($critical, 80)
-			);
-		}
+			&.daff-theme {
+				@include daff-icon-button-theme-variant(
+					$base,
+					theming.daff-color($neutral, 100),
+					theming.daff-color($neutral, 80)
+				);
+			}
 
-		&.daff-success {
-			@include daff-icon-button-theme-variant(
-				theming.daff-color($success),
-				theming.daff-color($success, 70),
-				theming.daff-color($success, 80)
-			);
+			&.daff-theme-contrast {
+				@include daff-icon-button-theme-variant(
+					$base-contrast,
+					theming.daff-color($neutral, 20),
+					theming.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-critical {
+				@include daff-icon-button-theme-variant(
+					theming.daff-color($critical),
+					theming.daff-color($critical, 40),
+					theming.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)
+				);
+			}
 		}
 	}
 }

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

@@ -20,16 +20,11 @@
 	$black: theming.daff-color(theming.$daff-neutral, 110);
 	background-color: $base-color;
 	border: 1px solid $base-color;
-	box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
+	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);
 
-	&::after {
-		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
-	}
-
 	&:hover {
-		background-color: $base-color;
-		border: 1px solid $base-color;
+		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
 	}
 }