Update button spinner

css/src/components/button.scss

@@ -108,8 +108,17 @@ $button-font-weight: $weight-semibold !default;
 			@include center(1em);
 
 			position: absolute !important;
-			border-block-end-color: $text;
-			border-inline-start-color: $text;
+			border-block-end-color: $colorBrandStroke1;
+			border-inline-start-color: $colorBrandStroke1;
+			background-color: $colorBrandStroke2Contrast;
+			background-image: conic-gradient(currentcolor 135deg, transparent 135deg);
+			mask-image: radial-gradient(
+				closest-side,
+				transparent calc(100% - 2px),
+				white calc(100% - 3px) calc(100% - 1px),
+				transparent 100%
+			);
+			animation-timing-function: linear;
 		}
 	}
 

css/src/tokens/colors.scss

@@ -238,3 +238,8 @@ $gradients: (
 
 $gradient-color-start-index: 1;
 $gradient-color-end-index: 2;
+
+//Fluent color tokens
+
+$colorBrandStroke1: var(--theme-color-brand-stroke-1);
+$colorBrandStroke2Contrast: var(--theme-color-brand-stroke-2-contrast);

css/src/tokens/palette.scss

@@ -82,6 +82,14 @@ $palette-blue-80: #004173 !default;
 $palette-blue-90: #002b4d !default;
 $palette-blue-100: #000a13 !default;
 
+$palette-blue-10-fluent: #ebf3fc !default;
+$palette-blue-20-fluent: #b4d6fa !default;
+$palette-blue-30-fluent: #479ef5 !default;
+$palette-blue-40-fluent: #0f6cbd !default;
+$palette-blue-50-fluent: #115ea3 !default;
+$palette-blue-60-fluent: #0e4775 !default;
+$palette-blue-70-fluent: #0c3b5e !default;
+
 $palette-blue-a: #9ccbee !default;
 
 $palette-blue-opacity-30: hsl(206deg 100% 35% / 30%);

css/src/tokens/themes.scss

@@ -105,7 +105,9 @@ $themes: (
 		'gradient-text-purple': $palette-purple-b,
 		'gradient-text-blue': $palette-blue-70,
 		'gradient-vivid-start': $palette-purple-c,
-		'gradient-vivid-end': $palette-blue-50
+		'gradient-vivid-end': $palette-blue-50,
+		'color-brand-stroke-1': $palette-blue-40-fluent,
+		'color-brand-stroke-2-contrast': $palette-blue-20-fluent
 	),
 	'dark': (
 		'text': $palette-grey-30,
@@ -210,7 +212,9 @@ $themes: (
 		'gradient-text-purple': $palette-purple-a,
 		'gradient-text-blue': $palette-blue-a,
 		'gradient-vivid-start': $palette-purple-c,
-		'gradient-vivid-end': $palette-blue-30
+		'gradient-vivid-end': $palette-blue-30,
+		'color-brand-stroke-1': $palette-blue-30-fluent,
+		'color-brand-stroke-2-contrast': $palette-blue-60-fluent
 	),
 	'high-contrast': (
 		'text': $palette-white,
@@ -315,7 +319,9 @@ $themes: (
 		'gradient-text-purple': $white-static,
 		'gradient-text-blue': $white-static,
 		'gradient-vivid-start': $white-static,
-		'gradient-vivid-end': $white-static
+		'gradient-vivid-end': $white-static,
+		'color-brand-stroke-1': $white-static,
+		'color-brand-stroke-2-contrast': $palette-black
 	)
 ) !default;
 //@end-sass-export-section