@daffodil/design 0.42.3 → 0.43.1

package/src/atoms/progress-indicator/progress-indicator-theme.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../../../scss/core';
+@use '../../../scss/theming';
+
+@mixin daff-progress-indicator-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');
+
+	.daff-progress-indicator {
+		$root: &;
+		background: rgba($base-contrast, 0.1);
+
+		&.daff-primary {
+			#{$root}__fill {
+				background: theming.daff-color($primary);
+			}
+		}
+
+		&.daff-secondary {
+			#{$root}__fill {
+				background: theming.daff-color($secondary);
+			}
+		}
+
+		&.daff-tertiary {
+			#{$root}__fill {
+				background: theming.daff-color($tertiary);
+			}
+		}
+
+		&.daff-theme {
+			#{$root}__fill {
+				background: $base;
+			}
+		}
+
+		&.daff-theme-contrast {
+			#{$root}__fill {
+				background: $base-contrast;
+			}
+		}
+
+		&.daff-black {
+			#{$root}__fill {
+				background: $black;
+			}
+		}
+
+		&.daff-white {
+			#{$root}__fill {
+				background: $white;
+			}
+		}
+	}
+}

package/src/molecules/accordion/accordion-item/accordion-item-theme.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-accordion-item-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-accordion-item {
+		border-bottom: 1px solid theming.daff-illuminate($base, $gray, 2);
+	}
+}

package/src/molecules/article/article/_stops-article-cascade.scss

@@ -0,0 +1,7 @@
+@mixin stopsArticleCascade($selector...) {
+	#{$selector} {
+		&:not(.daff-ae *, .daff-ae) {
+			@content;
+		}
+	}
+}

package/src/molecules/article/article/article-theme.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use 'stops-article-cascade' as *;
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-article-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');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	$text-color: theming.daff-illuminate($base-contrast, $gray, 2);
+	$table-border-color: theming.daff-illuminate($base, $gray, 2);
+
+	.daff-article {
+		&__meta {
+			color: theming.daff-illuminate($base-contrast, $gray, 3);
+		}
+
+		@include stopsArticleCascade(a) {
+			color: theming.daff-color($primary);
+		}
+
+		@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+			color: $text-color;
+		}
+
+		@include stopsArticleCascade(p) {
+			color: $text-color;
+		}
+
+		pre {
+			background: rgba(theming.daff-illuminate($base, $gray, 2), 0.3);
+			border: 1px solid rgba(theming.daff-illuminate($base, $gray, 2), 0.6);
+			color: $base-contrast;
+
+			code {
+				background: none;
+				border: none;
+			}
+		}
+
+		code {
+			background: rgba(theming.daff-illuminate($base, $gray, 2), 0.5);
+			color: $base-contrast;
+		}
+
+		hr {
+			background: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		blockquote {
+			background: rgba(theming.daff-color($primary), 0.1);
+			border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
+			color: $base-contrast;
+
+			code {
+				background: rgba(theming.daff-color($primary), 0.15);
+				color: $base-contrast;
+			}
+		}
+
+		table {
+			th {
+				background: theming.daff-illuminate($base, $gray, 1);
+				border: 1px solid $table-border-color;
+			}
+
+			td {
+				border: 1px solid $table-border-color;
+			}
+		}
+	}
+}

package/src/molecules/callout/callout-theme.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../../../scss/core';
+@use '../../../scss/theming';
+
+@mixin daff-callout-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-callout-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$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');
+
+	.daff-callout {
+		@include daff-callout-theme-variant(
+			theming.daff-illuminate($base, $gray, 1)
+		);
+
+		&.daff-primary {
+			@include daff-callout-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-callout-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-callout-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-callout-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-callout-theme-variant($base-contrast);
+		}
+
+		&.daff-black {
+			@include daff-callout-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-callout-theme-variant($white);
+		}
+	}
+}

package/src/molecules/card/card/card-theme-variants/basic-card.scss

@@ -0,0 +1,6 @@
+@use '../../../../../scss/theming';
+
+@mixin daff-basic-card-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}

package/src/molecules/card/card/card-theme-variants/linkable-card.scss

@@ -0,0 +1,23 @@
+@use '../../../../../scss/theming';
+
+@mixin daff-linkable-card-theme-variant(
+	$hover-color,
+	$active-color,
+	$shadow-color
+) {
+	&:hover,
+	&:focus {
+		background: $hover-color;
+		color: theming.daff-text-contrast($hover-color);
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
+	}
+
+	&:active {
+		background: $active-color;
+		color: theming.daff-text-contrast($active-color);
+	}
+}

package/src/molecules/card/card/card-theme-variants/stroked-card.scss

@@ -0,0 +1,3 @@
+@mixin daff-stroked-card-theme-variant($color) {
+	border: 1px solid $color;
+}

package/src/molecules/card/card/card-theme.scss

@@ -0,0 +1,186 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+@use './card-theme-variants/basic-card' as basic;
+@use './card-theme-variants/stroked-card' as stroked;
+@use './card-theme-variants//linkable-card' as linkable;
+
+@mixin daff-card-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');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-card {
+		$root: &;
+		@include basic.daff-basic-card-theme-variant(
+			theming.daff-illuminate($base, $gray, 1)
+		);
+
+		&.daff-primary {
+			@include basic.daff-basic-card-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include basic.daff-basic-card-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include basic.daff-basic-card-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-theme {
+			@include basic.daff-basic-card-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include basic.daff-basic-card-theme-variant($base-contrast);
+		}
+
+		&.daff-black {
+			@include basic.daff-basic-card-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include basic.daff-basic-card-theme-variant($white);
+		}
+	}
+
+	.daff-raised-card {
+		box-shadow: 0 6px 12px -4px rgba($black, 0.12),
+			0 4px 8px -2px rgba($black, 0.06);
+	}
+
+	.daff-stroked-card {
+		@include stroked.daff-stroked-card-theme-variant(
+			theming.daff-illuminate($base, $gray, 2)
+		);
+
+		&.daff-primary {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-illuminate($base-contrast, $primary, 3)
+			);
+		}
+
+		&.daff-secondary {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-illuminate($base-contrast, $secondary, 3)
+			);
+		}
+
+		&.daff-tertiary {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-illuminate($base-contrast, $tertiary, 3)
+			);
+		}
+
+		&.daff-theme {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-illuminate($base, $gray, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-illuminate($base-contrast, $gray, 2)
+			);
+		}
+
+		&.daff-black {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-color($gray, 90)
+			);
+		}
+
+		&.daff-white {
+			@include stroked.daff-stroked-card-theme-variant(
+				theming.daff-color($gray, 20)
+			);
+		}
+	}
+
+	a {
+		&.daff-card {
+			@include linkable.daff-linkable-card-theme-variant(
+				theming.daff-illuminate($base, $gray, 2),
+				theming.daff-illuminate($base, $gray, 3),
+				theming.daff-color($gray)
+			);
+
+			&.daff-primary {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-color($primary, 70),
+					theming.daff-color($primary, 80),
+					theming.daff-color($primary)
+				);
+			}
+
+			&.daff-secondary {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-color($secondary, 70),
+					theming.daff-color($secondary, 80),
+					theming.daff-color($secondary)
+				);
+			}
+
+			&.daff-tertiary {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-color($tertiary, 70),
+					theming.daff-color($tertiary, 80),
+					theming.daff-color($tertiary)
+				);
+			}
+
+			&.daff-theme {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-illuminate($base, $gray, 1),
+					theming.daff-illuminate($base, $gray, 2),
+					theming.daff-color($gray)
+				);
+			}
+
+			&.daff-theme-contrast {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-illuminate($base-contrast, $gray, 1),
+					theming.daff-illuminate($base-contrast, $gray, 2),
+					theming.daff-color($gray)
+				);
+			}
+
+			&.daff-black {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-color($gray, 100),
+					theming.daff-color($gray, 90),
+					theming.daff-color($gray)
+				);
+			}
+
+			&.daff-white {
+				@include linkable.daff-linkable-card-theme-variant(
+					theming.daff-color($gray, 10),
+					theming.daff-color($gray, 20),
+					theming.daff-color($gray)
+				);
+			}
+		}
+
+		&.daff-raised-card {
+			&:hover,
+			&:focus,
+			&:active {
+				box-shadow: 0 16px 32px -4px rgba($black, 0.12),
+					0 8px 12px -2px rgba($black, 0.06);
+			}
+		}
+	}
+}

package/src/molecules/hero/hero-theme.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../../../scss/core';
+@use '../../../scss/theming';
+
+@mixin daff-hero-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-hero-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$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');
+
+	.daff-hero {
+		@include daff-hero-theme-variant(
+			theming.daff-illuminate($base, $gray, 1)
+		);
+
+		&.daff-primary {
+			@include daff-hero-theme-variant(
+				theming.daff-color($primary)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-hero-theme-variant(
+				theming.daff-color($secondary)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-hero-theme-variant(
+				theming.daff-color($tertiary)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-hero-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-hero-theme-variant($base-contrast);
+		}
+
+		&.daff-black {
+			@include daff-hero-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-hero-theme-variant($white);
+		}
+	}
+}

package/src/molecules/list/list/list-theme.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-list-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+
+	.daff-list {
+		.daff-list-item {
+			&__content {
+				*:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
+					color: $base-contrast;
+				}
+
+				*:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
+					color: theming.daff-illuminate($base-contrast, $gray, 3);
+				}
+			}
+		}
+
+		// link and navigation deprecated in v1.0.0
+		&--link,
+		&--navigation {
+			a {
+				&:hover {
+					color: theming.daff-color($gray, 80);
+				}
+			}
+		}
+
+		// deprecated in v1.0.0
+		&--navigation {
+			.daff-list-item {
+				&:hover {
+					background-color: theming.daff-illuminate($base, $gray, 1);
+				}
+			}
+		}
+
+		// deprecated in v1.0.0
+		&--multi-line {
+			.daff-list-item {
+				&__content {
+					*:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
+						color: $base-contrast;
+					}
+
+					*:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
+						color: theming.daff-illuminate($base-contrast, $gray, 3);
+					}
+				}
+			}
+		}
+	}
+
+	.daff-nav-list {
+		.daff-list-item {
+			background-color: $base;
+			transition: background-color 150ms;
+
+			&:hover {
+				background-color: theming.daff-illuminate($base, $gray, 1);
+			}
+		}
+	}
+}

package/src/molecules/media-gallery/media-gallery-theme.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../../../scss/theming';
+@use '../../../scss/core';
+
+@mixin daff-media-gallery-theme($theme) {
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-media-gallery {
+		$root: &;
+
+		.daff-thumbnail {
+			border: 1px solid transparent;
+			transition: border 150ms;
+
+			&--selected {
+				border: 1px solid theming.daff-color($gray);
+			}
+		}
+	}
+}

package/src/molecules/modal/modal-theme.scss

@@ -0,0 +1,9 @@
+@use '../../../scss/core';
+
+@mixin daff-modal-theme($theme) {
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-modal {
+		background: $base;
+	}
+}

package/src/molecules/navbar/navbar-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '../../../scss/core';
+@use '../../../scss/theming';
+
+@mixin daff-navbar-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-navbar-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$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');
+
+	.daff-navbar {
+		@include daff-navbar-theme-variant(
+			theming.daff-illuminate($base, $gray, 1)
+		);
+
+		&--raised {
+			box-shadow: 0 4px 10px rgba($black, 0.08);
+		}
+
+		&.daff-primary {
+			@include daff-navbar-theme-variant(theming.daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include daff-navbar-theme-variant(theming.daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-navbar-theme-variant(theming.daff-color($tertiary));
+		}
+
+		&.daff-black {
+			@include daff-navbar-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-navbar-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include daff-navbar-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-navbar-theme-variant($base-contrast);
+		}
+	}
+}