@daffodil/design 0.66.1 → 0.68.0

package/button/examples/stroked-button/stroked-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./stroked-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class StrokedButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StrokedButtonModule, never>;

package/button/examples/underline-button/underline-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./underline-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class UnderlineButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UnderlineButtonModule, never>;

package/button/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/button/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffButtonComponent } from './button/button.component';
+export { DaffButtonModule } from './button.module';

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

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

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

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

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

@@ -0,0 +1,36 @@
+@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

@@ -0,0 +1,28 @@
+@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.scss

@@ -0,0 +1,574 @@
+@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)
+			);
+		}
+	}
+}