Update colors

microsoft · Oct 14, 2024 · a56309f · a56309f
1 parent f0dde11
commit a56309f
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 54 deletions.
diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
@@ -18,8 +18,10 @@ $badge-border-radius: $border-radius-rounded !default;
 	align-items: center;
 	justify-content: center;
 	padding: $badge-padding-block $badge-padding-inline;
-	border: $badge-border-width solid $border-white-high-contrast;
+	border: $badge-border-width solid $colorNeutralStroke2;
 	border-radius: $badge-border-radius;
+	background-color: $colorNeutralBackground4;
+	color: $colorNeutralForeground3;
 	font-size: $badge-font-size;
 	font-weight: $badge-font-weight;
 	line-height: $line-height-normal;
@@ -32,15 +34,15 @@ $badge-border-radius: $border-radius-rounded !default;
 		$dark: nth($color-set, $color-index-dark);
 		$background: nth($color-set, $color-index-background);
 
-		@if $name == 'secondary' {
-			border-color: $dark;
-			background-color: $background;
-			color: $dark;
-		} @else {
-			&.badge-#{$name} {
+		&.badge-#{$name} {
+			@if $name == 'info' or $name == 'secondary' or $name == 'tertiary' or $name == 'warning' {
 				border-color: $dark;
 				background-color: $background;
 				color: $dark;
+			} @else {
+				border-color: $base;
+				background-color: $background;
+				color: $base;
 			}
 		}
 	}
@@ -51,24 +53,34 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	&.badge-filled {
+		background-color: $colorNeutralBackground5;
+
 		@each $name, $color-set in $colors {
 			$base: nth($color-set, $color-index-base);
 			$invert: nth($color-set, $color-index-invert);
 			$dark: nth($color-set, $color-index-dark);
 			$background: nth($color-set, $color-index-background);
 
-			@if $name == 'secondary' {
-				border-color: $base;
-				background-color: $base;
-				color: $invert;
-			} @else {
-				&.badge-#{$name} {
+			&.badge-#{$name} {
+				/* stylelint-disable-next-line max-nesting-depth */
+				@if $name == 'secondary' {
+					border-color: $base;
+					background-color: $base;
+					color: $invert;
+
+					/* stylelint-disable-next-line max-nesting-depth */
+				} @else {
 					border-color: $base;
 					background-color: $base;
 					color: $invert;
 				}
 			}
 		}
+
+		.theme-high-contrast & {
+			background-color: $alternate-background;
+			color: $text-invert;
+		}
 	}
 
 	.icon {

diff --git a/css/src/components/button.scss b/css/src/components/button.scss
@@ -2,6 +2,9 @@
 
 $button-color: $text !default;
 $button-background-color: $body-background !default;
+$button-color-fluent: $text-fluent !default;
+$button-color-subtle-fluent: $colorNeutralForeground2 !default;
+$button-background-color-fluent: $body-background-fluent !default;
 
 $button-lg-font-size: $font-size-6 !default;
 $button-sm-font-size: $font-size-8 !default;
@@ -12,12 +15,18 @@ $button-border-color: $text-subtle !default;
 $button-border-width: $control-border-width !default;
 $button-border-radius: $control-radius !default;
 
+$button-border-color-fluent: $colorNeutralStroke1 !default;
+
 $button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
 $button-padding-horizontal: 0.75em !default;
 
 $button-hover-color: $text !default;
 $button-hover-border-color: $default-hover !default;
-$button-hover-background-color: $default-hover-invert !default;
+$button-hover-background-color: $default-hover !default;
+
+$button-hover-color-fluent: $default-hover-fluent !default;
+$button-hover-border-color-fluent: $default-hover-border-fluent !default;
+$button-hover-background-color-fluent: $default-hover-background-fluent !default;
 
 $button-disabled-background-color: $body-background-medium !default;
 $button-disabled-shadow: none !default;
@@ -35,8 +44,8 @@ $button-font-weight: $weight-semibold !default;
 	padding-block-end: $button-padding-vertical;
 	border-width: $button-border-width;
 	border-radius: $button-border-radius;
-	border-color: $button-border-color;
-	background-color: $button-background-color;
+	border-color: $button-border-color-fluent;
+	background-color: $button-background-color-fluent;
 	color: $button-color;
 	font-weight: $button-font-weight;
 	text-align: center;
@@ -67,9 +76,9 @@ $button-font-weight: $weight-semibold !default;
 
 	&:hover,
 	&.is-hovered {
-		border-color: $button-hover-border-color;
-		background-color: $button-hover-background-color;
-		color: $button-hover-color;
+		border-color: $button-hover-border-color-fluent;
+		background-color: $button-hover-background-color-fluent;
+		color: $button-hover-color-fluent;
 	}
 
 	&:visited {
@@ -143,10 +152,13 @@ $button-font-weight: $weight-semibold !default;
 }
 
 $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
+$button-clear-hover-background-color-fluent: $button-hover-background-color-fluent;
+$button-clear-hover-color-fluent: $colorNeutralForeground2Hover;
 
 .button.button-clear {
 	border-color: transparent;
 	background-color: transparent;
+	color: $button-color-subtle-fluent;
 
 	&.border {
 		// an allowed hack to make for flexible outlined buttons
@@ -162,7 +174,8 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
 	&.is-hovered,
 	&:hover,
 	&:active {
-		background-color: $button-clear-hover-background-color;
+		background-color: $button-clear-hover-background-color-fluent;
+		color: $button-clear-hover-color-fluent;
 	}
 
 	@each $name, $color-set in $colors {

diff --git a/css/src/components/form/form.scss b/css/src/components/form/form.scss
@@ -1,7 +1,7 @@
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
 $field-line-height: 1.5 !default;
-$field-error-color: $danger !default;
+$field-error-color: $colorPaletteRedForeground1 !default;
 
 .field {
 	&:not(:last-child) {

diff --git a/css/src/components/notification.scss b/css/src/components/notification.scss
@@ -1,8 +1,8 @@
-$notification-background: $secondary-background !default;
+$notification-background: $secondary-background-fluent !default;
 $notification-padding: $spacer-5 !default;
 
 $notification-font-size: $font-size-7 !default;
-$notification-color: $text !default;
+$notification-color: $text-fluent !default;
 
 $notification-border-color: $control-border !default;
 $notification-border-width: $border-width !default;
@@ -33,11 +33,26 @@ $notification-dismiss-margin: $spacer-2 !default;
 		$base: nth($color-set, $color-index-base);
 		$dark: nth($color-set, $color-index-dark);
 		$background: nth($color-set, $color-index-background);
+		$border: nth($color-set, $color-index-border);
 
 		&.notification-#{$name} {
-			border-color: $dark;
-			background-color: $background;
-			color: $dark;
+			@if $name == 'tertiary' {
+				border-color: $border;
+				background-color: $background;
+				color: $dark;
+			} @else if $name == 'secondary' {
+				border-color: $border;
+				background-color: $background;
+				color: $dark;
+			} @else if $name == 'info' {
+				border-color: $border;
+				background-color: $background;
+				color: $dark;
+			} @else {
+				border-color: $border;
+				background-color: $background;
+				color: $text-fluent;
+			}
 
 			&.is-loading::before {
 				border-color: transparent transparent $dark $dark;

diff --git a/css/src/components/progress-bar.scss b/css/src/components/progress-bar.scss
@@ -1,6 +1,6 @@
 $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
 $progress-bar-value-background-color: $primary !default;
-$progress-bar-value-background-color-warning: $warning !default;
+$progress-bar-value-background-color-warning: $colorPaletteDarkOrangeBackground3 !default;
 $progress-bar-value-background-color-danger: $danger !default;
 $progress-bar-value-background-color-success: $success !default;
 $progress-bar-height: $spacer-2 !default;
@@ -70,6 +70,16 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 		}
 	}
 
+	.theme-dark &.progress-bar-warning {
+		&::-webkit-progress-value {
+			background-color: $progress-bar-value-background-color-warning;
+		}
+
+		&::-moz-progress-bar {
+			background-color: $progress-bar-value-background-color-warning;
+		}
+	}
+
 	&:indeterminate {
 		animation-name: slide-background;
 		animation-timing-function: linear;