@daffodil/design 0.39.5 → 0.39.9

package/daff-theme.scss

@@ -2991,12 +2991,27 @@ $supported-theme-types: (
 	$black: daff-map-deep-get($theme, 'core.black');
 	$gray: daff-configure-palette($daff-gray, 60);
 
-	$text-color: daff-illuminate($base-contrast, $daff-gray, 2);
-	$table-border-color: daff-illuminate($base, $daff-gray, 2);
+	$text-color: daff-illuminate($base-contrast, $gray, 2);
+	$table-border-color: daff-illuminate($base, $gray, 2);
 
 	.daff-article {
 		&__meta {
-			color: daff-illuminate($base-contrast, $daff-gray, 3);
+			color: daff-illuminate($base-contrast, $gray, 3);
+		}
+
+		a {
+			color: daff-color($primary);
+		}
+
+		> {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: $text-color;
+			}
 		}
 
 		> p {
@@ -3004,32 +3019,33 @@ $supported-theme-types: (
 		}
 
 		pre {
-			background: daff-illuminate($base, $daff-gray, 1);
+			background: daff-illuminate($base, $gray, 1);
 			color: $text-color;
 
 			code {
-				background: daff-illuminate($base, $daff-gray, 1);
+				background: daff-illuminate($base, $gray, 1);
 				color: $text-color;
 			}
 		}
 
 		code {
-			background: daff-illuminate($base, $daff-gray, 1);
+			background: daff-illuminate($base, $gray, 1);
 			color: $text-color;
 		}
 
 		hr {
-			background: daff-illuminate($base, $daff-gray, 2);
+			background: daff-illuminate($base, $gray, 2);
 		}
 
 		blockquote {
-			border-left: 4px solid $base-contrast;
+			background: daff-illuminate($base, $primary, 1);
+			border-left: 4px solid daff-illuminate($base, $primary, 5);
 			color: $text-color;
 		}
 
 		table {
 			th {
-				background: daff-illuminate($base, $daff-gray, 1);
+				background: daff-illuminate($base, $gray, 1);
 				border: 1px solid $table-border-color;
 			}
 
@@ -3087,6 +3103,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);
@@ -3095,49 +3143,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);
+			}
 		}
 	}
 }

package/daff-typography.scss

@@ -168,21 +168,22 @@ $small-font-size: 0.875rem;
 
 @mixin body-xs() {
 	font-size: 0.875rem;
+	font-weight: 400;
 	line-height: 1.25rem;
 }
 
 @mixin subheading() {
-	@include embolden();
 	@include uppercase();
-	font-size: 0.75rem;
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.03125rem;
 	line-height: 1rem;
-	letter-spacing: 1px;
 }
 
 @mixin caption() {
 	font-size: 0.75rem;
 	line-height: 1rem;
-	font-weight: normal;
+	font-weight: 400;
 }
 
 

package/daff-util.scss

@@ -341,21 +341,22 @@ $breakpoints: (
 
 @mixin body-xs() {
 	font-size: 0.875rem;
+	font-weight: 400;
 	line-height: 1.25rem;
 }
 
 @mixin subheading() {
-	@include embolden();
 	@include uppercase();
-	font-size: 0.75rem;
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.03125rem;
 	line-height: 1rem;
-	letter-spacing: 1px;
 }
 
 @mixin caption() {
 	font-size: 0.75rem;
 	line-height: 1rem;
-	font-weight: normal;
+	font-weight: 400;
 }