@bravura/ui 1.7.2 → 1.10.0

package/theme/_ui-theme.scss

@@ -2,6 +2,26 @@
 @use '~@angular/material' as mat;
 
 $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
+$mat-foreground-extract: (
+	'secondary-text': 'light',
+	'hint-text': 'muted'
+);
+
+@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
+	.bui-border-#{$name} {
+		border-color: $color !important;
+		transition: $border-color-transition;
+	}
+	.bui-bg-#{$name} {
+		background-color: $color !important;
+	}
+	.bui-color-#{$name} {
+		color: $color !important;
+	}
+	.bui-outline-#{$name} {
+		outline-color: $color !important;
+	}
+}
 
 @mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
 	.bui-border-emphasis:hover {
@@ -14,18 +34,26 @@ $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55,
 		@each $p in (primary, accent, warn) {
 			$primary-palette: map.get($color-config, $p);
 			$c: mat.get-color-from-palette($primary-palette, text);
-			.bui-border-#{$p} {
-				border-color: $c !important;
-				transition: $border-color-transition;
-			}
-			.bui-bg-#{$p} {
-				background-color: $c !important;
-			}
-			.bui-color-#{$p} {
-				color: $c !important;
+			@include apply-color($p, $c, $border-color-transition);
+		}
+
+		@each $key, $name in $mat-foreground-extract {
+			$fg: map.get($color-config, 'foreground');
+			$c: map.get($fg, $key);
+			@include apply-color($name, $c, $border-color-transition);
+		}
+
+		.bui-host {
+			@each $p in (primary, accent, warn) {
+				$primary-palette: map.get($color-config, $p);
+				$c: mat.get-color-from-palette($primary-palette, text);
+				--bui-color-#{$p}: #{$c};
 			}
-			.bui-outline-#{$p} {
-				outline-color: $c !important;
+
+			@each $key, $name in $mat-foreground-extract {
+				$fg: map.get($color-config, 'foreground');
+				$c: map.get($fg, $key);
+				--bui-color-#{$name}: #{$c};
 			}
 		}
 	}