@daffodil/design 0.78.0 → 0.79.0

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

@@ -1,36 +0,0 @@
-@use 'sass:map';
-@use '../../../scss/core';
-@use '../../../scss/theming';
-@use '../../../scss/accessibility' as a11y;
-
-$black: theming.daff-color(theming.$daff-neutral, 110);
-
-@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');
-	}
-
-	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;
-	}
-}

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

@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '../../../scss/theming';
-
-@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;
-		}
-	}
-}

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

@@ -1,9 +0,0 @@
-@mixin daff-underline-button-theme-variant(
-	$base-color: currentColor,
-) {
-	color: $base-color;
-
-	&::after {
-		background-color: $base-color;
-	}
-}

package/button/src/button-theme.scss

@@ -1,574 +0,0 @@
-@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/flat';
-
-@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');
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-
-	.daff-button {
-		@include button.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 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($neutral, 90),
-				theming.daff-color($neutral, 80)
-			);
-		}
-
-		&.daff-white {
-			@include button.daff-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30)
-			);
-		}
-
-		&.daff-theme {
-			@include button.daff-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 2),
-				theming.daff-illuminate($base, $neutral, 3)
-			);
-		}
-
-		&.daff-theme-contrast {
-			@include button.daff-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 2),
-				theming.daff-illuminate($base-contrast, $neutral, 3)
-			);
-		}
-
-		&[disabled],
-		&.daff-button--disabled {
-			@include button.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 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, $neutral, 2)
-		);
-
-		&.daff-primary {
-			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($primary)
-			);
-		}
-
-		&.daff-secondary {
-			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($secondary)
-			);
-		}
-
-		&.daff-tertiary {
-			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($tertiary)
-			);
-		}
-
-		&.daff-black {
-			@include raised.daff-raised-button-theme-variant($black);
-		}
-
-		&.daff-white {
-			@include raised.daff-raised-button-theme-variant($white);
-		}
-
-		&.daff-theme {
-			@include raised.daff-raised-button-theme-variant($base);
-		}
-
-		&.daff-theme-contrast {
-			@include raised.daff-raised-button-theme-variant($base-contrast);
-		}
-
-		&[disabled],
-		&.daff-button--disabled {
-			@include raised.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 raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-bronze, 60)
-			);
-		}
-
-		&.daff-danger {
-			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-red, 60)
-			);
-		}
-
-		&.daff-success {
-			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-green, 60)
-			);
-		}
-	}
-
-	.daff-icon-button {
-		@include icon.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 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($neutral, 100),
-				theming.daff-color($neutral, 80)
-			);
-		}
-
-		&.daff-white {
-			@include icon.daff-icon-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30)
-			);
-		}
-
-		&.daff-theme {
-			@include icon.daff-icon-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 1),
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
-
-		&.daff-theme-contrast {
-			@include icon.daff-icon-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 1),
-				theming.daff-illuminate($base-contrast, $neutral, 2)
-			);
-		}
-
-		&[disabled],
-		&.daff-button--disabled {
-			@include icon.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 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: 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 stroked.daff-stroked-button-theme-variant(
-				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, 70)
-			);
-		}
-
-		&.daff-tertiary {
-			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70)
-			);
-		}
-
-		&.daff-black {
-			@include stroked.daff-stroked-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 100)
-			);
-		}
-
-		&.daff-white {
-			@include stroked.daff-stroked-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20)
-			);
-		}
-
-		&.daff-theme {
-			@include stroked.daff-stroked-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
-
-		&.daff-theme-contrast {
-			@include stroked.daff-stroked-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 2)
-			);
-		}
-
-		&[disabled],
-		&.daff-button--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 stroked.daff-stroked-button-theme-variant(
-				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, 70)
-			);
-		}
-
-		&.daff-success {
-			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color(theming.$daff-green, 60),
-				theming.daff-color(theming.$daff-green, 70)
-			);
-		}
-	}
-
-	.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 flat.daff-flat-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70)
-			);
-		}
-
-		&.daff-secondary {
-			@include flat.daff-flat-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70)
-			);
-		}
-
-		&.daff-tertiary {
-			@include flat.daff-flat-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70)
-			);
-		}
-
-		&.daff-black {
-			@include flat.daff-flat-button-theme-variant(
-				$black,
-				theming.daff-color($neutral, 100)
-			);
-		}
-
-		&.daff-white {
-			@include flat.daff-flat-button-theme-variant(
-				$white,
-				theming.daff-color($neutral, 20)
-			);
-		}
-
-		&.daff-theme {
-			@include flat.daff-flat-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $neutral, 2)
-			);
-		}
-
-		&.daff-theme-contrast {
-			@include flat.daff-flat-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $neutral, 2)
-			);
-		}
-
-		&[disabled],
-		&.daff-button--disabled {
-			color: theming.daff-illuminate($base, $neutral, 5);
-
-			&:hover,
-			&:focus,
-			&:active {
-				&:after {
-					background: transparent;
-				}
-			}
-		}
-
-		&.daff-warn {
-			@include flat.daff-flat-button-theme-variant(
-				theming.daff-color(theming.$daff-bronze, 60),
-				theming.daff-color(theming.$daff-bronze, 70)
-			);
-		}
-
-		&.daff-danger {
-			@include flat.daff-flat-button-theme-variant(
-				theming.daff-color(theming.$daff-red, 60),
-				theming.daff-color(theming.$daff-red, 70)
-			);
-		}
-
-		&.daff-success {
-			@include flat.daff-flat-button-theme-variant(
-				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, $neutral, 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],
-		&.daff-button--disabled {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-illuminate($base, $neutral, 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)
-			);
-		}
-	}
-}