@daffodil/design 0.77.0 → 0.79.0

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

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

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,143 @@
+@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: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$info: map.get($theme, info);
+	$warn: map.get($theme, warn);
+	$critical: map.get($theme, critical);
+	$success: map.get($theme, success);
+	$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');
+	$neutral: core.daff-map-deep-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,141 @@
+@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: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$info: map.get($theme, info);
+	$warn: map.get($theme, warn);
+	$critical: map.get($theme, critical);
+	$success: map.get($theme, success);
+	$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');
+	$neutral: core.daff-map-deep-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,120 @@
+@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: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$info: map.get($theme, info);
+	$warn: map.get($theme, warn);
+	$critical: map.get($theme, critical);
+	$success: map.get($theme, success);
+	$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');
+	$neutral: core.daff-map-deep-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)
+			);
+		}
+	}
+}