@daffodil/design 0.78.0 → 0.80.0

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

@@ -0,0 +1,79 @@
+@use '../../../scss/interactions';
+@use '../../../scss/typography' as t;
+
+@mixin daff-button-base {
+	@include interactions.clickable();
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+	appearance: none;
+	border: none;
+	border-radius: 0.25rem;
+	position: relative;
+	text-align: center;
+	text-decoration: none;
+
+	&[disabled],
+	&.disabled {
+		cursor: not-allowed;
+	}
+
+	.daff-button__content,
+	.daff-prefix,
+	.daff-suffix {
+		z-index: 2;
+	}
+
+	.daff-button__loading {
+		max-width: 1.5rem;
+	}
+
+	.daff-button__content {
+		@include t.text-truncate();
+	}
+}
+
+@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 {
+		&::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-md {
+		font-size: t.$normal-font-size;
+		line-height: 3rem;
+		height: 3rem;
+		padding: 0 1.5rem;
+	}
+
+	&.daff-lg {
+		font-size: t.$medium-font-size;
+		line-height: 3.5rem;
+		height: 3.5rem;
+		padding: 0 1.5rem;
+	}
+}

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

@@ -0,0 +1,142 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-flat-button-theme-variant($base-color, $active-color) {
+	color: $base-color;
+
+	&::after {
+		background-color: $base-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($base-color);
+	}
+
+	&:active {
+		color: theming.daff-text-contrast($active-color);
+
+		&::after {
+			background-color: $active-color;
+		}
+	}
+}
+
+@mixin daff-flat-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');
+
+	.daff-flat-button {
+		color: currentColor;
+
+		&::after {
+			background-color: theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&:active {
+			&::after {
+				background-color: theming.daff-illuminate($base, $neutral, 3);
+			}
+		}
+
+		&:hover,
+		&:active {
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&.daff-primary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70)
+			);
+		}
+
+		&.daff-black {
+			@include daff-flat-button-theme-variant(
+				$black,
+				theming.daff-color($neutral, 100)
+			);
+		}
+
+		&.daff-white {
+			@include daff-flat-button-theme-variant(
+				$white,
+				theming.daff-color($neutral, 20)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-flat-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-flat-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $neutral, 2)
+			);
+		}
+
+		&[disabled],
+		&.disabled {
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&:hover,
+			&:focus,
+			&:active {
+				&::after {
+					background: transparent;
+				}
+			}
+		}
+
+		&.daff-warn {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($warn),
+				theming.daff-color($warn, 70)
+			);
+		}
+
+		&.daff-critical {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($critical),
+				theming.daff-color($critical, 70)
+			);
+		}
+
+		&.daff-success {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($success),
+				theming.daff-color($success, 70)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-icon-button-theme-variant(
+	$base-color: currentColor,
+	$hover-color: currentColor,
+	$active-color: $hover-color
+) {
+	color: $base-color;
+
+	&:hover {
+		color: $hover-color;
+		@if $base-color == currentColor {
+			opacity: 0.8;
+		} @else {
+			opacity: 1;
+		}
+	}
+
+	&:active {
+		color: $active-color;
+	}
+}
+
+@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');
+
+	.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 daff-icon-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.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-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, 100),
+				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-illuminate($base, $neutral, 1),
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&.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)
+			);
+		}
+
+		&[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)
+			);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $neutral, 4);
+			}
+		}
+
+		&.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)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-raised-button-theme-variant($base-color) {
+	@if theming.daff-contrast-ratio(
+			$base-color,
+			theming.daff-text-contrast($base-color)
+		) < 4.5 {
+		@error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
+	}
+
+	@if theming.daff-contrast-ratio(
+			$base-color,
+			theming.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);
+	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);
+	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;
+	}
+}
+
+@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');
+
+	.daff-raised-button {
+		@include daff-raised-button-theme-variant(
+			theming.daff-illuminate($base, $neutral, 2)
+		);
+
+		&.daff-primary {
+			@include daff-raised-button-theme-variant(theming.daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include daff-raised-button-theme-variant(theming.daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-raised-button-theme-variant(theming.daff-color($tertiary));
+		}
+
+		&.daff-black {
+			@include daff-raised-button-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-raised-button-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include daff-raised-button-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-raised-button-theme-variant($base-contrast);
+		}
+
+		&[disabled],
+		&.disabled {
+			@include daff-raised-button-theme-variant(
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&::after {
+				box-shadow: none;
+			}
+		}
+
+		&.daff-warn {
+			@include daff-raised-button-theme-variant(theming.daff-color($warn));
+		}
+
+		&.daff-critical {
+			@include daff-raised-button-theme-variant(theming.daff-color($critical));
+		}
+
+		&.daff-success {
+			@include daff-raised-button-theme-variant(theming.daff-color($success));
+		}
+	}
+}

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

@@ -0,0 +1,155 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-stroked-button-theme-variant($base-color, $active-color) {
+	border: 1px solid $base-color;
+	color: $base-color;
+	background-color: transparent;
+
+	&::after {
+		background-color: $base-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($base-color);
+	}
+
+	&:active {
+		border: 1px solid $active-color;
+		color: theming.daff-text-contrast($active-color);
+
+		&::after {
+			background-color: $active-color;
+		}
+	}
+}
+
+@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');
+
+	.daff-stroked-button {
+		background: transparent;
+		border: 1px solid theming.daff-illuminate($base, $neutral, 5);
+		color: currentColor;
+
+		&::after {
+			background: theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&:hover {
+			border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&:active {
+			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+
+			&::after {
+				background: theming.daff-illuminate($base, $neutral, 3);
+			}
+		}
+
+		&.daff-primary {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70)
+			);
+		}
+
+		&.daff-black {
+			@include daff-stroked-button-theme-variant(
+				$black,
+				theming.daff-color($neutral, 100)
+			);
+		}
+
+		&.daff-white {
+			@include daff-stroked-button-theme-variant(
+				$white,
+				theming.daff-color($neutral, 20)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-stroked-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-stroked-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $neutral, 2)
+			);
+		}
+
+		&[disabled],
+		&.disabled {
+			background-color: transparent;
+			border-color: theming.daff-illuminate($base, $neutral, 3);
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $neutral, 5);
+
+				&::after {
+					background-color: transparent;
+					opacity: 0;
+				}
+			}
+		}
+
+		&.daff-warn {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($warn),
+				theming.daff-color($warn, 70)
+			);
+		}
+
+		&.daff-critical {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($critical),
+				theming.daff-color($critical, 70)
+			);
+		}
+
+		&.daff-success {
+			@include daff-stroked-button-theme-variant(
+				theming.daff-color($success),
+				theming.daff-color($success, 70)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,89 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-underline-button-theme-variant($base-color: currentColor) {
+	color: $base-color;
+
+	&::after {
+		background-color: $base-color;
+	}
+}
+
+@mixin daff-underline-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');
+
+	.daff-underline-button {
+		@include daff-underline-button-theme-variant(
+			theming.daff-illuminate($base, $neutral, 7)
+		);
+
+		&.daff-primary {
+			@include daff-underline-button-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-underline-button-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-underline-button-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-black {
+			@include daff-underline-button-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-underline-button-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include daff-underline-button-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-underline-button-theme-variant($base-contrast);
+		}
+
+		&[disabled],
+		&.disabled {
+			@include daff-underline-button-theme-variant(
+				theming.daff-illuminate($base, $neutral, 4)
+			);
+		}
+
+		&.daff-warn {
+			@include daff-underline-button-theme-variant(theming.daff-color($warn));
+		}
+
+		&.daff-critical {
+			@include daff-underline-button-theme-variant(
+				theming.daff-color($critical)
+			);
+		}
+
+		&.daff-success {
+			@include daff-underline-button-theme-variant(
+				theming.daff-color($success)
+			);
+		}
+	}
+}