@bravura/ui 4.0.0 → 5.0.0

package/theme/_ui-theme.scss

@@ -1,112 +1,112 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use './scrollbar.scss' as scrollbar;
-@use './bui-card' as card;
-
-$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',
-	'divider': 'divider',
-	'base': 'base',
-	'inactive': 'inactive'
-);
-
-$mat-background-extract: (
-	'card': 'card',
-	'background': 'body'
-);
-
-@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 {
-		border-color: currentColor !important;
-		transition: $border-color-transition;
-	}
-
-	$color-config: mat.get-color-config($theme);
-	@if $color-config != null {
-		@include card.bui-card($color-config);
-		@each $p in (primary, accent, warn) {
-			$primary-palette: map.get($color-config, $p);
-			$c: mat.get-color-from-palette($primary-palette, text);
-			@include apply-color($p, $c, $border-color-transition);
-		}
-
-		$fg-original: map.get($color-config, 'foreground');
-		$fg: map.merge(
-			$fg-original,
-			(
-				inactive: rgba(map.get($fg-original, base), 0.06)
-			)
-		);
-
-		@each $key, $name in $mat-foreground-extract {
-			$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};
-			}
-
-			@each $key, $name in $mat-foreground-extract {
-				$c: map.get($fg, $key);
-				--bui-color-#{$name}: #{$c};
-			}
-
-			@each $key, $name in $mat-background-extract {
-				$bg: map.get($color-config, 'background');
-				$c: map.get($bg, $key);
-				--bui-bg-#{$name}: #{$c};
-			}
-
-			@if map.get($color-config, 'is-dark') == false {
-				--bui-color-success: #519602;
-				--bui-color-info: #0dcaf0;
-				--bui-color-warning: #ffc107;
-				--bui-color-error: #dc3545;
-			}
-		}
-
-		$card-bg: map.get(map.get($color-config, 'background'), 'card');
-		.iti__country-list {
-			background-color: $card-bg;
-		}
-	}
-}
-
-@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
-	@include apply-colors($theme, $border-color-transition);
-	@include scrollbar.bui-scrollbar;
-
-	.mat-icon {
-		&.fas,
-		&.far,
-		&.fab,
-		&.fa {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 20px;
-		}
-	}
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './scrollbar.scss' as scrollbar;
+@use './bui-card' as card;
+
+$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',
+	'divider': 'divider',
+	'base': 'base',
+	'inactive': 'inactive'
+);
+
+$mat-background-extract: (
+	'card': 'card',
+	'background': 'body'
+);
+
+@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 {
+		border-color: currentColor !important;
+		transition: $border-color-transition;
+	}
+
+	$color-config: mat.m2-get-color-config($theme);
+	@if $color-config != null {
+		@include card.bui-card($color-config);
+		@each $p in (primary, accent, warn) {
+			$primary-palette: map.get($color-config, $p);
+			$c: mat.m2-get-color-from-palette($primary-palette, text);
+			@include apply-color($p, $c, $border-color-transition);
+		}
+
+		$fg-original: map.get($color-config, 'foreground');
+		$fg: map.merge(
+			$fg-original,
+			(
+				inactive: rgba(map.get($fg-original, base), 0.06)
+			)
+		);
+
+		@each $key, $name in $mat-foreground-extract {
+			$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.m2-get-color-from-palette($primary-palette, text);
+				--bui-color-#{$p}: #{$c};
+			}
+
+			@each $key, $name in $mat-foreground-extract {
+				$c: map.get($fg, $key);
+				--bui-color-#{$name}: #{$c};
+			}
+
+			@each $key, $name in $mat-background-extract {
+				$bg: map.get($color-config, 'background');
+				$c: map.get($bg, $key);
+				--bui-bg-#{$name}: #{$c};
+			}
+
+			@if map.get($color-config, 'is-dark') == false {
+				--bui-color-success: #519602;
+				--bui-color-info: #0dcaf0;
+				--bui-color-warning: #ffc107;
+				--bui-color-error: #dc3545;
+			}
+		}
+
+		$card-bg: map.get(map.get($color-config, 'background'), 'card');
+		.iti__country-list {
+			background-color: $card-bg;
+		}
+	}
+}
+
+@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
+	@include apply-colors($theme, $border-color-transition);
+	@include scrollbar.bui-scrollbar;
+
+	.mat-icon {
+		&.fas,
+		&.far,
+		&.fab,
+		&.fa {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 20px;
+		}
+	}
+}