@daffodil/design 0.39.8 → 0.39.12

package/daff-theme.scss

@@ -178,31 +178,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -247,8 +247,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -260,14 +260,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -1215,31 +1215,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -1284,8 +1284,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -1297,14 +1297,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -1850,31 +1850,31 @@ $error: #dd0000;
 // 50 apart passes AA level for any size text (except for 10/60)
 
 $daff-blue: (
-	10: #f1f3fc,
-	20: #e4e7fa,
-	30: #bec7f7,
-	40: #95a6f7,
-	50: #6e89fa,
+	10: #ebf1ff,
+	20: #c4d8ff,
+	30: #9dbeff,
+	40: #79a7ff,
+	50: #548fff,
 	60: #1f66ff,
-	70: #174fc9,
-	80: #183b93,
-	90: #132a68,
-	100: #0d1b45
+	70: #093cf3,
+	80: #001bcb,
+	90: #00098a,
+	100: #000033
 );
 
 $daff-primary: $daff-blue;
 
 $daff-purple: (
-	10: #f3f2fc,
-	20: #e7e6fa,
-	30: #c7c4f7,
-	40: #a7a1f7,
-	50: #8e84fa,
+	10: #ebebff,
+	20: #d4d3ff,
+	30: #b7b4ff,
+	40: #a19bff,
+	50: #8b82ff,
 	60: #6a57ff,
-	70: #4d2df3,
-	80: #391dbe,
-	90: #281885,
-	100: #191057
+	70: #5631f3,
+	80: #3c13bd,
+	90: #2c068a,
+	100: #110033
 );
 
 $daff-accent: $daff-purple;
@@ -1919,8 +1919,8 @@ $daff-red: (
 );
 
 $daff-bronze: (
-	10: #fbf2ec,
-	20: #f7e1d3,
+	10: #fcf2eb,
+	20: #f7dac6,
 	30: #f2c093,
 	40: #e49d40,
 	50: #d2801a,
@@ -1932,14 +1932,14 @@ $daff-bronze: (
 );
 
 $daff-green: (
-	10: #dafcde,
-	20: #a9fbb5,
-	30: #4ee56e,
-	40: #35c457,
-	50: #1da943,
+	10: #c4ffcc,
+	20: #6aff86,
+	30: #00db57,
+	40: #13c049,
+	50: #00aa3c,
 	60: #00852e,
-	70: #0e6726,
-	80: #0f4c1e,
+	70: #006b23,
+	80: #004b17,
 	90: #0c3515,
 	100: #07230d,
 );
@@ -2537,7 +2537,7 @@ $supported-theme-types: (
 		&.daff-theme-contrast {
 			@include daff-icon-button-theme-variant(
 				$base-contrast,
-				daff-illuminate($base-contrast, $daff-gray, 1)
+				daff-illuminate($base-contrast, $daff-gray, 1),
 				daff-illuminate($base-contrast, $daff-gray, 2)
 			);
 		}
@@ -2981,6 +2981,15 @@ $supported-theme-types: (
 	}
 }
 
+@mixin stopsArticleCascade($selector...) {
+	#{$selector} {
+		&:not(.daff-ae *, .daff-ae) {
+			@content;
+		}
+	}
+}
+
+
 @mixin daff-article-theme($theme) {
 	$primary: map-get($theme, primary);
 	$secondary: map-get($theme, secondary);
@@ -2999,22 +3008,15 @@ $supported-theme-types: (
 			color: daff-illuminate($base-contrast, $gray, 3);
 		}
 
-		a {
+		@include stopsArticleCascade(a) {
 			color: daff-color($primary);
 		}
 
-		> {
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: $text-color;
-			}
+		@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+			color: $text-color;
 		}
 
-		> p {
+		@include stopsArticleCascade(p) {
 			color: $text-color;
 		}
 
@@ -3103,6 +3105,38 @@ $supported-theme-types: (
 	}
 }
 
+@mixin daff-basic-card-theme-variant($color) {
+	background: $color;
+	color: daff-text-contrast($color);
+}
+
+@mixin daff-linkable-basic-card-theme-variant(
+	$hover-color,
+	$active-color,
+	$shadow-color
+) {
+	&:hover,
+	&:focus {
+		background: $hover-color;
+		color: daff-text-contrast($hover-color);
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
+	}
+
+	&:active {
+		background: $active-color;
+		color: daff-text-contrast($active-color);
+	}
+}
+
+@mixin daff-stroked-card-theme-variant($color) {
+	border: 1px solid $color;
+}
+
+
 @mixin daff-card-theme($theme) {
 	$primary: map-get($theme, primary);
 	$secondary: map-get($theme, secondary);
@@ -3111,49 +3145,164 @@ $supported-theme-types: (
 	$base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
 	$white: daff-map-deep-get($theme, 'core.white');
 	$black: daff-map-deep-get($theme, 'core.black');
+	$gray: daff-configure-palette($daff-gray, 60);
 
 	.daff-card {
 		$root: &;
-		background: daff-illuminate($base, $daff-gray, 1);
-		color: daff-text-contrast(daff-illuminate($base, $daff-gray, 1));
+		@include daff-basic-card-theme-variant(
+			daff-illuminate($base, $daff-gray, 1)
+		);
 
-		&--raised {
-			box-shadow: 0 14px 28px 0 rgba($black, 0.12), 0 4px 12px rgba($black, 0.06);
+		&.daff-primary {
+			@include daff-basic-card-theme-variant(daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include daff-basic-card-theme-variant(daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-basic-card-theme-variant(daff-color($tertiary));
+		}
+
+		&.daff-theme {
+			@include daff-basic-card-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-basic-card-theme-variant($base-contrast);
+		}
+
+		&.daff-black {
+			@include daff-basic-card-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include 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 daff-stroked-card-theme-variant(
+			daff-illuminate($base, $daff-gray, 2)
+		);
 
 		&.daff-primary {
-			background: daff-color($primary);
-			color: daff-text-contrast(daff-color($primary));
+			@include daff-stroked-card-theme-variant(
+				daff-illuminate($base-contrast, $primary, 3)
+			);
 		}
 
 		&.daff-secondary {
-			background: daff-color($secondary);
-			color: daff-text-contrast(daff-color($secondary));
+			@include daff-stroked-card-theme-variant(
+				daff-illuminate($base-contrast, $secondary, 3)
+			);
 		}
 
 		&.daff-tertiary {
-			background: daff-color($tertiary);
-			color: daff-text-contrast(daff-color($tertiary));
+			@include daff-stroked-card-theme-variant(
+				daff-illuminate($base-contrast, $tertiary, 3)
+			);
 		}
 
 		&.daff-theme {
-			background: $base;
-			color: daff-text-contrast($base);
+			@include daff-stroked-card-theme-variant(
+				daff-illuminate($base, $daff-gray, 2)
+			);
 		}
 
 		&.daff-theme-contrast {
-			background: $base-contrast;
-			color: daff-text-contrast($base-contrast);
+			@include daff-stroked-card-theme-variant(
+				daff-illuminate($base-contrast, $daff-gray, 2)
+			);
 		}
 
 		&.daff-black {
-			background: $black;
-			color: daff-text-contrast($black);
+			@include daff-stroked-card-theme-variant(daff-color($gray, 90));
 		}
 
 		&.daff-white {
-			background: $white;
-			color: daff-text-contrast($white);
+			@include daff-stroked-card-theme-variant(daff-color($gray, 20));
+		}
+	}
+
+	a {
+		&.daff-card {
+			@include daff-linkable-basic-card-theme-variant(
+				daff-illuminate($base, $daff-gray, 2),
+				daff-illuminate($base, $daff-gray, 3),
+				daff-color($gray)
+			);
+
+			&.daff-primary {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-color($primary, 70),
+					daff-color($primary, 80),
+					daff-color($primary)
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-color($secondary, 70),
+					daff-color($secondary, 80),
+					daff-color($secondary)
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-color($tertiary, 70),
+					daff-color($tertiary, 80),
+					daff-color($tertiary)
+				);
+			}
+
+			&.daff-theme {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-illuminate($base, $daff-gray, 1),
+					daff-illuminate($base, $daff-gray, 2),
+					daff-color($gray)
+				);
+			}
+
+			&.daff-theme-contrast {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-illuminate($base-contrast, $daff-gray, 1),
+					daff-illuminate($base-contrast, $daff-gray, 2),
+					daff-color($gray)
+				);
+			}
+
+			&.daff-black {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-color($gray, 100),
+					daff-color($gray, 90),
+					daff-color($gray)
+				);
+			}
+
+			&.daff-white {
+				@include daff-linkable-basic-card-theme-variant(
+					daff-color($gray, 10),
+					daff-color($gray, 20),
+					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);
+			}
 		}
 	}
 }
@@ -3301,44 +3450,44 @@ $supported-theme-types: (
 	$secondary: map-get($theme, secondary);
 	$tertiary: map-get($theme, tertiary);
 	$base: daff-map-deep-get($theme, 'core.base');
+	$base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
 	$white: daff-map-deep-get($theme, 'core.white');
 	$black: daff-map-deep-get($theme, 'core.black');
+	$gray: daff-configure-palette($daff-gray, 60);
 
 	.daff-navbar {
-		@include daff-navbar-theme-variant($base);
+		@include daff-navbar-theme-variant(daff-illuminate($base, $daff-gray, 1));
 
-		&--shadowed {
-			box-shadow: 0 3px 10px rgba($black, 0.08);
+		&--raised {
+			box-shadow: 0 4px 10px rgba($black, 0.08);
 		}
 
 		&.daff-primary {
-			@include daff-navbar-theme-variant(
-				daff-color($primary)
-			);
+			@include daff-navbar-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-navbar-theme-variant(
-				daff-color($secondary)
-			);
+			@include daff-navbar-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-navbar-theme-variant(
-				daff-color($tertiary)
-			);
+			@include daff-navbar-theme-variant(daff-color($tertiary));
 		}
 
 		&.daff-black {
-			@include daff-navbar-theme-variant(
-				$black
-			);
+			@include daff-navbar-theme-variant($black);
 		}
 
 		&.daff-white {
-			@include daff-navbar-theme-variant(
-				$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);
 		}
 	}
 }