@breadstone/mosaik-themes 0.0.12-beta.0

package/Themes/fluent.scss

@@ -0,0 +1,1641 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+@mixin _generate-elevation-vars($map, $prefix, $mode) {
+    @each $key, $value in $map {
+        @if meta.type-of($value) == 'map' {
+            @each $level-key, $level-value in $value {
+                @each $part, $val in $level-value {
+                    #{'--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key}'}: #{$val};
+                }
+            }
+        } @else {
+            #{'--#{$prefix}-elevation-#{$mode}-#{$key}'}: #{$value};
+        }
+    }
+}
+
+@mixin _generate-elevation-composite($map, $prefix, $mode) {
+    @each $key, $value in $map {
+        @if meta.type-of($value) == 'map' {
+            $layers: ();
+            @each $layer-idx, $layer-token in $value {
+                $shadow: ();
+                @each $part in (offset-x, offset-y, blur, spread, color) {
+                    $shadow: list.append($shadow, var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$layer-idx}), $separator: space);
+                }
+                $layers: list.append($layers, list.join($shadow, (), $separator: space), $separator: comma);
+            }
+            #{'--#{$prefix}-elevation-#{$mode}-#{$key}'}: #{$layers};
+        }
+    }
+}
+
+@mixin _remap-elevation-vars($map, $prefix, $mode) {
+    @each $key, $value in $map {
+        @if meta.type-of($value) == 'map' {
+            @each $level-key, $level-value in $value {
+                @each $part, $val in $level-value {
+                    #{'--#{$prefix}-elevation-#{$key}-#{$part}-#{$level-key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key});
+                }
+            }
+            #{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
+        } @else {
+            #{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
+        }
+    }
+}
+
+@function box-shadow($x: 0px, $y: 0px, $blur: 0px, $spread: 0px, $color: rgba(0, 0, 0, 0.5), $inset: false) {
+    $shadow: #{$x} #{$y} #{$blur} #{$spread} #{$color};
+
+    @if $inset {
+        $shadow: inset $shadow;
+    }
+
+    @return $shadow;
+}
+
+@function box-shadow-with-color($shadows, $new-color) {
+    $output: ();
+
+    @each $shadow in $shadows {
+        $parts: ();
+        $color: null;
+
+        // break apart the shadow into components
+        @each $part in $shadow {
+            @if type-of($part) == 'color' {
+                $color: $part;
+            } @else {
+                $parts: append($parts, $part);
+            }
+        }
+
+        // append the new color in place of the original
+        $parts: append($parts, $new-color);
+        $output: append($output, $parts, comma);
+    }
+
+    @return $output;
+}
+
+$name: "fluent";
+$font-family: 'Inter', Roboto, Helvetica, sans-serif;
+$layout-radius: 12px;
+$layout-space: 8px;
+$layout-thickness: 2px;
+$color-light-primary: #0078D4;
+$color-light-secondary: #005A9E;
+$color-light-tertiary: #003E6B;
+$elevation-none: none;
+$duration-duration-ultra-fast: 50ms;
+$duration-duration-faster: 100ms;
+$duration-duration-fast: 150ms;
+$duration-duration-normal: 200ms;
+$duration-duration-gentle: 250ms;
+$duration-duration-slow: 300ms;
+$duration-duration-slower: 400ms;
+$duration-duration-ultra-slow: 500ms;
+
+
+
+$_light-colors-map: (
+    colorNeutralForeground1: var(--fluent-grey-14-color),
+    colorNeutralForeground1Hover: var(--fluent-grey-14-color),
+    colorNeutralForeground1Pressed: var(--fluent-grey-14-color),
+    colorNeutralForeground1Selected: var(--fluent-grey-14-color),
+    colorNeutralForeground2: var(--fluent-grey-26-color),
+    colorNeutralForeground2Hover: var(--fluent-grey-14-color),
+    colorNeutralForeground2Pressed: var(--fluent-grey-14-color),
+    colorNeutralForeground2Selected: var(--fluent-grey-14-color),
+    colorNeutralForeground2BrandHover: var(--fluent-primary-80-color),
+    colorNeutralForeground2BrandPressed: var(--fluent-primary-70-color),
+    colorNeutralForeground2BrandSelected: var(--fluent-primary-80-color),
+    colorNeutralForeground3: var(--fluent-grey-38-color),
+    colorNeutralForeground3Hover: var(--fluent-grey-26-color),
+    colorNeutralForeground3Pressed: var(--fluent-grey-26-color),
+    colorNeutralForeground3Selected: var(--fluent-grey-26-color),
+    colorNeutralForeground3BrandHover: var(--fluent-primary-80-color),
+    colorNeutralForeground3BrandPressed: var(--fluent-primary-70-color),
+    colorNeutralForeground3BrandSelected: var(--fluent-primary-80-color),
+    colorNeutralForeground4: var(--fluent-grey-44-color),
+    colorNeutralForegroundDisabled: var(--fluent-grey-74-color),
+    colorNeutralForegroundInvertedDisabled: var(--fluent-Alpha40-color),
+    colorBrandForegroundLink: var(--fluent-primary-70-color),
+    colorBrandForegroundLinkHover: var(--fluent-primary-60-color),
+    colorBrandForegroundLinkPressed: var(--fluent-primary-40-color),
+    colorBrandForegroundLinkSelected: var(--fluent-primary-70-color),
+    colorNeutralForeground2Link: var(--fluent-grey-26-color),
+    colorNeutralForeground2LinkHover: var(--fluent-grey-14-color),
+    colorNeutralForeground2LinkPressed: var(--fluent-grey-14-color),
+    colorNeutralForeground2LinkSelected: var(--fluent-grey-14-color),
+    colorCompoundBrandForeground1: var(--fluent-primary-80-color),
+    colorCompoundBrandForeground1Hover: var(--fluent-primary-70-color),
+    colorCompoundBrandForeground1Pressed: var(--fluent-primary-60-color),
+    colorBrandForeground1: var(--fluent-primary-80-color),
+    colorBrandForeground2: var(--fluent-primary-70-color),
+    colorBrandForeground2Hover: var(--fluent-primary-60-color),
+    colorBrandForeground2Pressed: var(--fluent-primary-30-color),
+    colorNeutralForeground1Static: var(--fluent-grey-14-color),
+    colorNeutralForegroundStaticInverted: var(--fluent-white-color),
+    colorNeutralForegroundInverted: var(--fluent-white-color),
+    colorNeutralForegroundInvertedHover: var(--fluent-white-color),
+    colorNeutralForegroundInvertedPressed: var(--fluent-white-color),
+    colorNeutralForegroundInvertedSelected: var(--fluent-white-color),
+    colorNeutralForegroundInverted2: var(--fluent-white-color),
+    colorNeutralForegroundOnBrand: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLink: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkHover: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkPressed: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkSelected: var(--fluent-white-color),
+    colorBrandForegroundInverted: var(--fluent-primary-100-color),
+    colorBrandForegroundInvertedHover: var(--fluent-primary-110-color),
+    colorBrandForegroundInvertedPressed: var(--fluent-primary-100-color),
+    colorBrandForegroundOnLight: var(--fluent-primary-80-color),
+    colorBrandForegroundOnLightHover: var(--fluent-primary-70-color),
+    colorBrandForegroundOnLightPressed: var(--fluent-primary-50-color),
+    colorBrandForegroundOnLightSelected: var(--fluent-primary-60-color),
+    colorNeutralBackground1: var(--fluent-white-color),
+    colorNeutralBackground1Hover: var(--fluent-grey-96-color),
+    colorNeutralBackground1Pressed: var(--fluent-grey-88-color),
+    colorNeutralBackground1Selected: var(--fluent-grey-92-color),
+    colorNeutralBackground2: var(--fluent-grey-98-color),
+    colorNeutralBackground2Hover: var(--fluent-grey-94-color),
+    colorNeutralBackground2Pressed: var(--fluent-grey-86-color),
+    colorNeutralBackground2Selected: var(--fluent-grey-90-color),
+    colorNeutralBackground3: var(--fluent-grey-96-color),
+    colorNeutralBackground3Hover: var(--fluent-grey-92-color),
+    colorNeutralBackground3Pressed: var(--fluent-grey-84-color),
+    colorNeutralBackground3Selected: var(--fluent-grey-88-color),
+    colorNeutralBackground4: var(--fluent-grey-94-color),
+    colorNeutralBackground4Hover: var(--fluent-grey-98-color),
+    colorNeutralBackground4Pressed: var(--fluent-grey-96-color),
+    colorNeutralBackground4Selected: var(--fluent-white-color),
+    colorNeutralBackground5: var(--fluent-grey-92-color),
+    colorNeutralBackground5Hover: var(--fluent-grey-96-color),
+    colorNeutralBackground5Pressed: var(--fluent-grey-94-color),
+    colorNeutralBackground5Selected: var(--fluent-grey-98-color),
+    colorNeutralBackground6: var(--fluent-grey-90-color),
+    colorNeutralBackgroundInverted: var(--fluent-grey-16-color),
+    colorNeutralBackgroundStatic: var(--fluent-grey-20-color),
+    colorNeutralBackgroundAlpha: var(--fluent-Alpha50-color),
+    colorNeutralBackgroundAlpha2: var(--fluent-Alpha80-color),
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: var(--fluent-grey-96-color),
+    colorSubtleBackgroundPressed: var(--fluent-grey-88-color),
+    colorSubtleBackgroundSelected: var(--fluent-grey-92-color),
+    colorSubtleBackgroundLightAlphaHover: var(--fluent-Alpha70-color),
+    colorSubtleBackgroundLightAlphaPressed: var(--fluent-Alpha50-color),
+    colorSubtleBackgroundLightAlphaSelected: 'transparent',
+    colorSubtleBackgroundInverted: 'transparent',
+    colorSubtleBackgroundInvertedHover: var(--fluent-blackAlpha10-color),
+    colorSubtleBackgroundInvertedPressed: var(--fluent-blackAlpha30-color),
+    colorSubtleBackgroundInvertedSelected: var(--fluent-blackAlpha20-color),
+    colorTransparentBackground: 'transparent',
+    colorTransparentBackgroundHover: 'transparent',
+    colorTransparentBackgroundPressed: 'transparent',
+    colorTransparentBackgroundSelected: 'transparent',
+    colorNeutralBackgroundDisabled: var(--fluent-grey-94-color),
+    colorNeutralBackgroundInvertedDisabled: var(--fluent-Alpha10-color),
+    colorNeutralStencil1: var(--fluent-grey-90-color),
+    colorNeutralStencil2: var(--fluent-grey-98-color),
+    colorNeutralStencil1Alpha: var(--fluent-blackAlpha10-color),
+    colorNeutralStencil2Alpha: var(--fluent-blackAlpha5-color),
+    colorBackgroundOverlay: var(--fluent-blackAlpha40-color),
+    colorScrollbarOverlay: var(--fluent-blackAlpha50-color),
+    colorBrandBackground: var(--fluent-primary-80-color),
+    colorBrandBackgroundHover: var(--fluent-primary-70-color),
+    colorBrandBackgroundPressed: var(--fluent-primary-40-color),
+    colorBrandBackgroundSelected: var(--fluent-primary-60-color),
+    colorCompoundBrandBackground: var(--fluent-primary-80-color),
+    colorCompoundBrandBackgroundHover: var(--fluent-primary-70-color),
+    colorCompoundBrandBackgroundPressed: var(--fluent-primary-60-color),
+    colorBrandBackgroundStatic: var(--fluent-primary-80-color),
+    colorBrandBackground2: var(--fluent-primary-160-color),
+    colorBrandBackground2Hover: var(--fluent-primary-150-color),
+    colorBrandBackground2Pressed: var(--fluent-primary-130-color),
+    colorBrandBackground3Static: var(--fluent-primary-60-color),
+    colorBrandBackground4Static: var(--fluent-primary-40-color),
+    colorBrandBackgroundInverted: var(--fluent-white-color),
+    colorBrandBackgroundInvertedHover: var(--fluent-primary-160-color),
+    colorBrandBackgroundInvertedPressed: var(--fluent-primary-140-color),
+    colorBrandBackgroundInvertedSelected: var(--fluent-primary-150-color),
+    colorNeutralCardBackground: var(--fluent-grey-98-color),
+    colorNeutralCardBackgroundHover: var(--fluent-white-color),
+    colorNeutralCardBackgroundPressed: var(--fluent-grey-96-color),
+    colorNeutralCardBackgroundSelected: var(--fluent-grey-92-color),
+    colorNeutralCardBackgroundDisabled: var(--fluent-grey-94-color),
+    colorNeutralStrokeAccessible: var(--fluent-grey-38-color),
+    colorNeutralStrokeAccessibleHover: var(--fluent-grey-34-color),
+    colorNeutralStrokeAccessiblePressed: var(--fluent-grey-30-color),
+    colorNeutralStrokeAccessibleSelected: var(--fluent-primary-80-color),
+    colorNeutralStroke1: var(--fluent-grey-82-color),
+    colorNeutralStroke1Hover: var(--fluent-grey-78-color),
+    colorNeutralStroke1Pressed: var(--fluent-grey-70-color),
+    colorNeutralStroke1Selected: var(--fluent-grey-74-color),
+    colorNeutralStroke2: var(--fluent-grey-88-color),
+    colorNeutralStroke3: var(--fluent-grey-94-color),
+    colorNeutralStrokeSubtle: var(--fluent-grey-88-color),
+    colorNeutralStrokeOnBrand: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Hover: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Pressed: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Selected: var(--fluent-white-color),
+    colorBrandStroke1: var(--fluent-primary-80-color),
+    colorBrandStroke2: var(--fluent-primary-140-color),
+    colorBrandStroke2Hover: var(--fluent-primary-120-color),
+    colorBrandStroke2Pressed: var(--fluent-primary-80-color),
+    colorBrandStroke2Contrast: var(--fluent-primary-140-color),
+    colorCompoundBrandStroke: var(--fluent-primary-80-color),
+    colorCompoundBrandStrokeHover: var(--fluent-primary-70-color),
+    colorCompoundBrandStrokePressed: var(--fluent-primary-60-color),
+    colorNeutralStrokeDisabled: var(--fluent-grey-88-color),
+    colorNeutralStrokeInvertedDisabled: var(--fluent-Alpha40-color),
+    colorTransparentStroke: 'transparent',
+    colorTransparentStrokeInteractive: 'transparent',
+    colorTransparentStrokeDisabled: 'transparent',
+    colorNeutralStrokeAlpha: var(--fluent-blackAlpha5-color),
+    colorNeutralStrokeAlpha2: var(--fluent-Alpha20-color),
+    colorStrokeFocus1: var(--fluent-white-color),
+    colorStrokeFocus2: var(--fluent-black-color),
+    colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
+    colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
+    colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+    colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+    colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+    colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+    colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+    colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+);
+
+$_dark-colors-map: (
+    colorNeutralForeground1: var(--fluent-white-color),
+    colorNeutralForeground1Hover: var(--fluent-white-color),
+    colorNeutralForeground1Pressed: var(--fluent-white-color),
+    colorNeutralForeground1Selected: var(--fluent-white-color),
+    colorNeutralForeground2: var(--fluent-grey-84-color),
+    colorNeutralForeground2Hover: var(--fluent-white-color),
+    colorNeutralForeground2Pressed: var(--fluent-white-color),
+    colorNeutralForeground2Selected: var(--fluent-white-color),
+    colorNeutralForeground2BrandHover: var(--fluent-primary-100-color),
+    colorNeutralForeground2BrandPressed: var(--fluent-primary-90-color),
+    colorNeutralForeground2BrandSelected: var(--fluent-primary-100-color),
+    colorNeutralForeground3: var(--fluent-grey-68-color),
+    colorNeutralForeground3Hover: var(--fluent-grey-84-color),
+    colorNeutralForeground3Pressed: var(--fluent-grey-84-color),
+    colorNeutralForeground3Selected: var(--fluent-grey-84-color),
+    colorNeutralForeground3BrandHover: var(--fluent-primary-100-color),
+    colorNeutralForeground3BrandPressed: var(--fluent-primary-90-color),
+    colorNeutralForeground3BrandSelected: var(--fluent-primary-100-color),
+    colorNeutralForeground4: var(--fluent-grey-60-color),
+    colorNeutralForegroundDisabled: var(--fluent-grey-36-color),
+    colorNeutralForegroundInvertedDisabled: var(--fluent-whiteAlpha-40-color),
+    colorBrandForegroundLink: var(--fluent-primary-100-color),
+    colorBrandForegroundLinkHover: var(--fluent-primary-110-color),
+    colorBrandForegroundLinkPressed: var(--fluent-primary-90-color),
+    colorBrandForegroundLinkSelected: var(--fluent-primary-100-color),
+    colorNeutralForeground2Link: var(--fluent-grey-84-color),
+    colorNeutralForeground2LinkHover: var(--fluent-white-color),
+    colorNeutralForeground2LinkPressed: var(--fluent-white-color),
+    colorNeutralForeground2LinkSelected: var(--fluent-white-color),
+    colorCompoundBrandForeground1: var(--fluent-primary-100-color),
+    colorCompoundBrandForeground1Hover: var(--fluent-primary-110-color),
+    colorCompoundBrandForeground1Pressed: var(--fluent-primary-90-color),
+    colorBrandForeground1: var(--fluent-primary-100-color),
+    colorBrandForeground2: var(--fluent-primary-110-color),
+    colorBrandForeground2Hover: var(--fluent-primary-130-color),
+    colorBrandForeground2Pressed: var(--fluent-primary-160-color),
+    colorNeutralForeground1Static: var(--fluent-grey-14-color),
+    colorNeutralForegroundStaticInverted: var(--fluent-white-color),
+    colorNeutralForegroundInverted: var(--fluent-grey-14-color),
+    colorNeutralForegroundInvertedHover: var(--fluent-grey-14-color),
+    colorNeutralForegroundInvertedPressed: var(--fluent-grey-14-color),
+    colorNeutralForegroundInvertedSelected: var(--fluent-grey-14-color),
+    colorNeutralForegroundInverted2: var(--fluent-grey-14-color),
+    colorNeutralForegroundOnBrand: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLink: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkHover: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkPressed: var(--fluent-white-color),
+    colorNeutralForegroundInvertedLinkSelected: var(--fluent-white-color),
+    colorBrandForegroundInverted: var(--fluent-primary-80-color),
+    colorBrandForegroundInvertedHover: var(--fluent-primary-70-color),
+    colorBrandForegroundInvertedPressed: var(--fluent-primary-60-color),
+    colorBrandForegroundOnLight: var(--fluent-primary-80-color),
+    colorBrandForegroundOnLightHover: var(--fluent-primary-70-color),
+    colorBrandForegroundOnLightPressed: var(--fluent-primary-50-color),
+    colorBrandForegroundOnLightSelected: var(--fluent-primary-60-color),
+    colorNeutralBackground1: var(--fluent-grey-16-color),
+    colorNeutralBackground1Hover: var(--fluent-grey-24-color),
+    colorNeutralBackground1Pressed: var(--fluent-grey-12-color),
+    colorNeutralBackground1Selected: var(--fluent-grey-22-color),
+    colorNeutralBackground2: var(--fluent-grey-12-color),
+    colorNeutralBackground2Hover: var(--fluent-grey-20-color),
+    colorNeutralBackground2Pressed: var(--fluent-grey-8-color),
+    colorNeutralBackground2Selected: var(--fluent-grey-18-color),
+    colorNeutralBackground3: var(--fluent-grey-8-color),
+    colorNeutralBackground3Hover: var(--fluent-grey-16-color),
+    colorNeutralBackground3Pressed: var(--fluent-grey-4-color),
+    colorNeutralBackground3Selected: var(--fluent-grey-14-color),
+    colorNeutralBackground4: var(--fluent-grey-4-color),
+    colorNeutralBackground4Hover: var(--fluent-grey-12-color),
+    colorNeutralBackground4Pressed: var(--fluent-black-color),
+    colorNeutralBackground4Selected: var(--fluent-grey-10-color),
+    colorNeutralBackground5: var(--fluent-black-color),
+    colorNeutralBackground5Hover: var(--fluent-grey-8-color),
+    colorNeutralBackground5Pressed: var(--fluent-grey-2-color),
+    colorNeutralBackground5Selected: var(--fluent-grey-6-color),
+    colorNeutralBackground6: var(--fluent-grey-20-color),
+    colorNeutralBackgroundInverted: var(--fluent-white-color),
+    colorNeutralBackgroundStatic: var(--fluent-grey-24-color),
+    colorNeutralBackgroundAlpha: var(--fluent-grey10Alpha-50-color),
+    colorNeutralBackgroundAlpha2: var(--fluent-grey12Alpha-70-color),
+    colorSubtleBackground: 'transparent',
+    colorSubtleBackgroundHover: var(--fluent-grey-22-color),
+    colorSubtleBackgroundPressed: var(--fluent-grey-18-color),
+    colorSubtleBackgroundSelected: var(--fluent-grey-20-color),
+    colorSubtleBackgroundLightAlphaHover: var(--fluent-grey14Alpha-80-color),
+    colorSubtleBackgroundLightAlphaPressed: var(--fluent-grey14Alpha-50-color),
+    colorSubtleBackgroundLightAlphaSelected: 'transparent',
+    colorSubtleBackgroundInverted: 'transparent',
+    colorSubtleBackgroundInvertedHover: var(--fluent-blackAlpha-10-color),
+    colorSubtleBackgroundInvertedPressed: var(--fluent-blackAlpha-30-color),
+    colorSubtleBackgroundInvertedSelected: var(--fluent-blackAlpha-20-color),
+    colorTransparentBackground: 'transparent',
+    colorTransparentBackgroundHover: 'transparent',
+    colorTransparentBackgroundPressed: 'transparent',
+    colorTransparentBackgroundSelected: 'transparent',
+    colorNeutralBackgroundDisabled: var(--fluent-grey-8-color),
+    colorNeutralBackgroundInvertedDisabled: var(--fluent-whiteAlpha-10-color),
+    colorNeutralStencil1: var(--fluent-grey-34-color),
+    colorNeutralStencil2: var(--fluent-grey-20-color),
+    colorNeutralStencil1Alpha: var(--fluent-whiteAlpha-10-color),
+    colorNeutralStencil2Alpha: var(--fluent-whiteAlpha-5-color),
+    colorBackgroundOverlay: var(--fluent-blackAlpha-50-color),
+    colorScrollbarOverlay: var(--fluent-whiteAlpha-60-color),
+    colorBrandBackground: var(--fluent-primary-70-color),
+    colorBrandBackgroundHover: var(--fluent-primary-80-color),
+    colorBrandBackgroundPressed: var(--fluent-primary-40-color),
+    colorBrandBackgroundSelected: var(--fluent-primary-60-color),
+    colorCompoundBrandBackground: var(--fluent-primary-100-color),
+    colorCompoundBrandBackgroundHover: var(--fluent-primary-110-color),
+    colorCompoundBrandBackgroundPressed: var(--fluent-primary-90-color),
+    colorBrandBackgroundStatic: var(--fluent-primary-80-color),
+    colorBrandBackground2: var(--fluent-primary-20-color),
+    colorBrandBackground2Hover: var(--fluent-primary-40-color),
+    colorBrandBackground2Pressed: var(--fluent-primary-10-color),
+    colorBrandBackground3Static: var(--fluent-primary-60-color),
+    colorBrandBackground4Static: var(--fluent-primary-40-color),
+    colorBrandBackgroundInverted: var(--fluent-white-color),
+    colorBrandBackgroundInvertedHover: var(--fluent-primary-160-color),
+    colorBrandBackgroundInvertedPressed: var(--fluent-primary-140-color),
+    colorBrandBackgroundInvertedSelected: var(--fluent-primary-150-color),
+    colorNeutralCardBackground: var(--fluent-grey-20-color),
+    colorNeutralCardBackgroundHover: var(--fluent-grey-24-color),
+    colorNeutralCardBackgroundPressed: var(--fluent-grey-18-color),
+    colorNeutralCardBackgroundSelected: var(--fluent-grey-22-color),
+    colorNeutralCardBackgroundDisabled: var(--fluent-grey-8-color),
+    colorNeutralStrokeAccessible: var(--fluent-grey-68-color),
+    colorNeutralStrokeAccessibleHover: var(--fluent-grey-74-color),
+    colorNeutralStrokeAccessiblePressed: var(--fluent-grey-70-color),
+    colorNeutralStrokeAccessibleSelected: var(--fluent-primary-100-color),
+    colorNeutralStroke1: var(--fluent-grey-40-color),
+    colorNeutralStroke1Hover: var(--fluent-grey-46-color),
+    colorNeutralStroke1Pressed: var(--fluent-grey-42-color),
+    colorNeutralStroke1Selected: var(--fluent-grey-44-color),
+    colorNeutralStroke2: var(--fluent-grey-32-color),
+    colorNeutralStroke3: var(--fluent-grey-24-color),
+    colorNeutralStrokeSubtle: var(--fluent-grey-4-color),
+    colorNeutralStrokeOnBrand: var(--fluent-grey-16-color),
+    colorNeutralStrokeOnBrand2: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Hover: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Pressed: var(--fluent-white-color),
+    colorNeutralStrokeOnBrand2Selected: var(--fluent-white-color),
+    colorBrandStroke1: var(--fluent-primary-100-color),
+    colorBrandStroke2: var(--fluent-primary-50-color),
+    colorBrandStroke2Hover: var(--fluent-primary-50-color),
+    colorBrandStroke2Pressed: var(--fluent-primary-30-color),
+    colorBrandStroke2Contrast: var(--fluent-primary-50-color),
+    colorCompoundBrandStroke: var(--fluent-primary-100-color),
+    colorCompoundBrandStrokeHover: var(--fluent-primary-110-color),
+    colorCompoundBrandStrokePressed: var(--fluent-primary-90-color),
+    colorNeutralStrokeDisabled: var(--fluent-grey-26-color),
+    colorNeutralStrokeInvertedDisabled: var(--fluent-whiteAlpha-40-color),
+    colorTransparentStroke: 'transparent',
+    colorTransparentStrokeInteractive: 'transparent',
+    colorTransparentStrokeDisabled: 'transparent',
+    colorNeutralStrokeAlpha: var(--fluent-whiteAlpha-10-color),
+    colorNeutralStrokeAlpha2: var(--fluent-whiteAlpha-20-color),
+    colorStrokeFocus1: var(--fluent-black-color),
+    colorStrokeFocus2: var(--fluent-white-color),
+    colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)',
+    colorNeutralShadowKey: 'rgba(0,0,0,0.28)',
+    colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)',
+    colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)',
+    colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)',
+    colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)',
+    colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+    colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+);
+
+@mixin alias-style($prefix) {
+    :root,
+    :host {
+        @each $alias, $value in $_light-colors-map {
+            #{'--#{$prefix}-#{$alias}'}: #{$value};
+        }
+
+        // @media (prefers-color-scheme: dark) {
+        //     @each $alias, $value in $_dark-colors-map {
+        //         #{'--#{$prefix}-#{$alias}'}: #{$value};
+        //     }
+        // }
+    }
+}
+
+$_border-radius: (
+    borderRadiusNone: '0',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '4px',
+    borderRadiusLarge: '6px',
+    borderRadiusXLarge: '8px',
+    borderRadiusCircular: '10000px'
+);
+
+@mixin border-radius-style($prefix) {
+    :root,
+    :host {
+        @each $radius, $value in $_border-radius {
+            --#{$prefix}-#{$radius}: #{$value};
+        }
+    }
+}
+
+$_colors-map: (
+    primary: (
+        10: #061724,
+        20: #082338,
+        30: #0a2e4a,
+        40: #0c3b5e,
+        50: #0e4775,
+        60: #0f548c,
+        70: #115ea3,
+        80: #0f6cbd,
+        90: #2886de,
+        100: #479ef5,
+        110: #62abf5,
+        120: #77b7f7,
+        130: #96c6fa,
+        140: #b4d6fa,
+        150: #cfe4fa,
+        160: #ebf3fc,
+        primary: #115ea3
+    ),
+    secondary: (
+        10: #2b2b40,
+        20: #2f2f4a,
+        30: #333357,
+        40: #383966,
+        50: #3d3e78,
+        60: #444791,
+        70: #4f52b2,
+        80: #5b5fc7,
+        90: #7579eb,
+        100: #7f85f5,
+        110: #9299f7,
+        120: #aab1fa,
+        130: #b6bcfa,
+        140: #c5cbfa,
+        150: #dce0fa,
+        160: #e8ebfa,
+        primary: #4f52b2
+    ),
+    tertiary: (
+        10: #29130b,
+        20: #4d2415,
+        30: #792000,
+        40: #99482b,
+        50: #a52c00,
+        60: #c33400,
+        70: #e06a3f,
+        80: #d83b01,
+        90: #dd4f1b,
+        100: #fe7948,
+        110: #ff865a,
+        120: #ff9973,
+        130: #e8825d,
+        140: #ffb498,
+        150: #f4beaa,
+        160: #f9dcd1,
+        primary: #e06a3f
+    )
+);
+
+@mixin brand-color-style($prefix) {
+    :root,
+    :host {
+        @each $name, $tones in $_colors-map {
+            @each $key, $value in $tones {
+                #{'--#{$prefix}-#{$name}-#{$key}-color'}: #{$value};
+            }
+        }
+    }
+}
+
+
+
+$_colors: (
+    grey: (
+        2: #050505,
+        4: #0a0a0a,
+        6: #0f0f0f,
+        8: #141414,
+        10: #1a1a1a,
+        12: #1f1f1f,
+        14: #242424,
+        16: #292929,
+        18: #2e2e2e,
+        20: #333333,
+        22: #383838,
+        24: #3d3d3d,
+        26: #424242,
+        28: #474747,
+        30: #4d4d4d,
+        32: #525252,
+        34: #575757,
+        36: #5c5c5c,
+        38: #616161,
+        40: #666666,
+        42: #6b6b6b,
+        44: #707070,
+        46: #757575,
+        48: #7a7a7a,
+        50: #808080,
+        52: #858585,
+        54: #8a8a8a,
+        56: #8f8f8f,
+        58: #949494,
+        60: #999999,
+        62: #9e9e9e,
+        64: #a3a3a3,
+        66: #a8a8a8,
+        68: #adadad,
+        70: #b3b3b3,
+        72: #b8b8b8,
+        74: #bdbdbd,
+        76: #c2c2c2,
+        78: #c7c7c7,
+        80: #cccccc,
+        82: #d1d1d1,
+        84: #d6d6d6,
+        86: #dbdbdb,
+        88: #e0e0e0,
+        90: #e6e6e6,
+        92: #ebebeb,
+        94: #f0f0f0,
+        96: #f5f5f5,
+        98: #fafafa
+    ),
+    whiteAlpha: (
+        5: rgba(255, 255, 255, 0.05),
+        10: rgba(255, 255, 255, 0.1),
+        20: rgba(255, 255, 255, 0.2),
+        30: rgba(255, 255, 255, 0.3),
+        40: rgba(255, 255, 255, 0.4),
+        50: rgba(255, 255, 255, 0.5),
+        60: rgba(255, 255, 255, 0.6),
+        70: rgba(255, 255, 255, 0.7),
+        80: rgba(255, 255, 255, 0.8),
+        90: rgba(255, 255, 255, 0.9)
+    ),
+    blackAlpha: (
+        5: rgba(0, 0, 0, 0.05),
+        10: rgba(0, 0, 0, 0.1),
+        20: rgba(0, 0, 0, 0.2),
+        30: rgba(0, 0, 0, 0.3),
+        40: rgba(0, 0, 0, 0.4),
+        50: rgba(0, 0, 0, 0.5),
+        60: rgba(0, 0, 0, 0.6),
+        70: rgba(0, 0, 0, 0.7),
+        80: rgba(0, 0, 0, 0.8),
+        90: rgba(0, 0, 0, 0.9)
+    ),
+    grey10Alpha: (
+        5: rgba(26, 26, 26, 0.05),
+        10: rgba(26, 26, 26, 0.1),
+        20: rgba(26, 26, 26, 0.2),
+        30: rgba(26, 26, 26, 0.3),
+        40: rgba(26, 26, 26, 0.4),
+        50: rgba(26, 26, 26, 0.5),
+        60: rgba(26, 26, 26, 0.6),
+        70: rgba(26, 26, 26, 0.7),
+        80: rgba(26, 26, 26, 0.8),
+        90: rgba(26, 26, 26, 0.9)
+    ),
+    grey12Alpha: (
+        5: rgba(31, 31, 31, 0.05),
+        10: rgba(31, 31, 31, 0.1),
+        20: rgba(31, 31, 31, 0.2),
+        30: rgba(31, 31, 31, 0.3),
+        40: rgba(31, 31, 31, 0.4),
+        50: rgba(31, 31, 31, 0.5),
+        60: rgba(31, 31, 31, 0.6),
+        70: rgba(31, 31, 31, 0.7),
+        80: rgba(31, 31, 31, 0.8),
+        90: rgba(31, 31, 31, 0.9)
+    ),
+    grey14Alpha: (
+        5: rgba(36, 36, 36, 0.05),
+        10: rgba(36, 36, 36, 0.1),
+        20: rgba(36, 36, 36, 0.2),
+        30: rgba(36, 36, 36, 0.3),
+        40: rgba(36, 36, 36, 0.4),
+        50: rgba(36, 36, 36, 0.5),
+        60: rgba(36, 36, 36, 0.6),
+        70: rgba(36, 36, 36, 0.7),
+        80: rgba(36, 36, 36, 0.8),
+        90: rgba(36, 36, 36, 0.9)
+    ),
+    white: #ffffff,
+    black: #000000,
+    hcHyperlink: #ffff00,
+    hcHighlight: #1aebff,
+    hcDisabled: #3ff23f,
+    hcCanvas: #000000,
+    hcCanvasText: #ffffff,
+    hcHighlightText: #000000,
+    hcButtonText: #000000,
+    hcButtonFace: #ffffff,
+    darkRed: (
+        shade50: #130204,
+        shade40: #230308,
+        shade30: #420610,
+        shade20: #590815,
+        shade10: #690a19,
+        primary: #750b1c,
+        tint10: #861b2c,
+        tint20: #962f3f,
+        tint30: #ac4f5e,
+        tint40: #d69ca5,
+        tint50: #e9c7cd,
+        tint60: #f9f0f2
+    ),
+    burgundy: (
+        shade50: #1a0607,
+        shade40: #310b0d,
+        shade30: #5c1519,
+        shade20: #7d1d21,
+        shade10: #942228,
+        primary: #a4262c,
+        tint10: #af393e,
+        tint20: #ba4d52,
+        tint30: #c86c70,
+        tint40: #e4afb2,
+        tint50: #f0d3d4,
+        tint60: #fbf4f4
+    ),
+    cranberry: (
+        shade50: #200205,
+        shade40: #3b0509,
+        shade30: #6e0811,
+        shade20: #960b18,
+        shade10: #b10e1c,
+        primary: #c50f1f,
+        tint10: #cc2635,
+        tint20: #d33f4c,
+        tint30: #dc626d,
+        tint40: #eeacb2,
+        tint50: #f6d1d5,
+        tint60: #fdf3f4
+    ),
+    red: (
+        shade50: #210809,
+        shade40: #3f1011,
+        shade30: #751d1f,
+        shade20: #9f282b,
+        shade10: #bc2f32,
+        primary: #d13438,
+        tint10: #d7494c,
+        tint20: #dc5e62,
+        tint30: #e37d80,
+        tint40: #f1bbbc,
+        tint50: #f8dadb,
+        tint60: #fdf6f6
+    ),
+    darkOrange: (
+        shade50: #230900,
+        shade40: #411200,
+        shade30: #7a2101,
+        shade20: #a62d01,
+        shade10: #c43501,
+        primary: #da3b01,
+        tint10: #de501c,
+        tint20: #e36537,
+        tint30: #e9835e,
+        tint40: #f4bfab,
+        tint50: #f9dcd1,
+        tint60: #fdf6f3
+    ),
+    bronze: (
+        shade50: #1b0a01,
+        shade40: #321303,
+        shade30: #5e2405,
+        shade20: #7f3107,
+        shade10: #963a08,
+        primary: #a74109,
+        tint10: #b2521e,
+        tint20: #bc6535,
+        tint30: #ca8057,
+        tint40: #e5bba4,
+        tint50: #f1d9cc,
+        tint60: #fbf5f2
+    ),
+    pumpkin: (
+        shade50: #200d03,
+        shade40: #3d1805,
+        shade30: #712d09,
+        shade20: #9a3d0c,
+        shade10: #b6480e,
+        primary: #ca5010,
+        tint10: #d06228,
+        tint20: #d77440,
+        tint30: #df8e64,
+        tint40: #efc4ad,
+        tint50: #f7dfd2,
+        tint60: #fdf7f4
+    ),
+    orange: (
+        shade50: #271002,
+        shade40: #4a1e04,
+        shade30: #8a3707,
+        shade20: #bc4b09,
+        shade10: #de590b,
+        primary: #f7630c,
+        tint10: #f87528,
+        tint20: #f98845,
+        tint30: #faa06b,
+        tint40: #fdcfb4,
+        tint50: #fee5d7,
+        tint60: #fff9f5
+    ),
+    peach: (
+        shade50: #291600,
+        shade40: #4d2a00,
+        shade30: #8f4e00,
+        shade20: #c26a00,
+        shade10: #e67e00,
+        primary: #ff8c00,
+        tint10: #ff9a1f,
+        tint20: #ffa83d,
+        tint30: #ffba66,
+        tint40: #ffddb3,
+        tint50: #ffedd6,
+        tint60: #fffaf5
+    ),
+    marigold: (
+        shade50: #251a00,
+        shade40: #463100,
+        shade30: #835b00,
+        shade20: #b27c00,
+        shade10: #d39300,
+        primary: #eaa300,
+        tint10: #edad1c,
+        tint20: #efb839,
+        tint30: #f2c661,
+        tint40: #f9e2ae,
+        tint50: #fcefd3,
+        tint60: #fefbf4
+    ),
+    yellow: (
+        shade50: #282400,
+        shade40: #4c4400,
+        shade30: #817400,
+        shade20: #c0ad00,
+        shade10: #e4cc00,
+        primary: #fde300,
+        tint10: #fde61e,
+        tint20: #fdea3d,
+        tint30: #feee66,
+        tint40: #fef7b2,
+        tint50: #fffad6,
+        tint60: #fffef5
+    ),
+    gold: (
+        shade50: #1f1900,
+        shade40: #3a2f00,
+        shade30: #6c5700,
+        shade20: #937700,
+        shade10: #ae8c00,
+        primary: #c19c00,
+        tint10: #c8a718,
+        tint20: #d0b232,
+        tint30: #dac157,
+        tint40: #ecdfa5,
+        tint50: #f5eece,
+        tint60: #fdfbf2
+    ),
+    brass: (
+        shade50: #181202,
+        shade40: #2e2103,
+        shade30: #553e06,
+        shade20: #745408,
+        shade10: #89640a,
+        primary: #986f0b,
+        tint10: #a47d1e,
+        tint20: #b18c34,
+        tint30: #c1a256,
+        tint40: #e0cea2,
+        tint50: #efe4cb,
+        tint60: #fbf8f2
+    ),
+    brown: (
+        shade50: #170e07,
+        shade40: #2b1a0e,
+        shade30: #50301a,
+        shade20: #6c4123,
+        shade10: #804d29,
+        primary: #8e562e,
+        tint10: #9c663f,
+        tint20: #a97652,
+        tint30: #bb8f6f,
+        tint40: #ddc3b0,
+        tint50: #edded3,
+        tint60: #faf7f4
+    ),
+    darkBrown: (
+        shade50: #0c0704,
+        shade40: #170c08,
+        shade30: #2b1710,
+        shade20: #3a1f15,
+        shade10: #452519,
+        primary: #4d291c,
+        tint10: #623a2b,
+        tint20: #784d3e,
+        tint30: #946b5c,
+        tint40: #caada3,
+        tint50: #e3d2cb,
+        tint60: #f8f3f2
+    ),
+    lime: (
+        shade50: #121b06,
+        shade40: #23330b,
+        shade30: #405f14,
+        shade20: #57811b,
+        shade10: #689920,
+        primary: #73aa24,
+        tint10: #81b437,
+        tint20: #90be4c,
+        tint30: #a4cc6c,
+        tint40: #cfe5af,
+        tint50: #e5f1d3,
+        tint60: #f8fcf4
+    ),
+    forest: (
+        shade50: #0c1501,
+        shade40: #162702,
+        shade30: #294903,
+        shade20: #376304,
+        shade10: #427505,
+        primary: #498205,
+        tint10: #599116,
+        tint20: #6ba02b,
+        tint30: #85b44c,
+        tint40: #bdd99b,
+        tint50: #dbebc7,
+        tint60: #f6faf0
+    ),
+    seafoam: (
+        shade50: #002111,
+        shade40: #003d20,
+        shade30: #00723b,
+        shade20: #009b51,
+        shade10: #00b85f,
+        primary: #00cc6a,
+        tint10: #19d279,
+        tint20: #34d889,
+        tint30: #5ae0a0,
+        tint40: #a8f0cd,
+        tint50: #cff7e4,
+        tint60: #f3fdf8
+    ),
+    lightGreen: (
+        shade50: #031a02,
+        shade40: #063004,
+        shade30: #0b5a08,
+        shade20: #0e7a0b,
+        shade10: #11910d,
+        primary: #13a10e,
+        tint10: #27ac22,
+        tint20: #3db838,
+        tint30: #5ec75a,
+        tint40: #a7e3a5,
+        tint50: #cef0cd,
+        tint60: #f2fbf2
+    ),
+    green: (
+        shade50: #031403,
+        shade40: #052505,
+        shade30: #094509,
+        shade20: #0c5e0c,
+        shade10: #0e700e,
+        primary: #107c10,
+        tint10: #218c21,
+        tint20: #359b35,
+        tint30: #54b054,
+        tint40: #9fd89f,
+        tint50: #c9eac9,
+        tint60: #f1faf1
+    ),
+    darkGreen: (
+        shade50: #021102,
+        shade40: #032003,
+        shade30: #063b06,
+        shade20: #085108,
+        shade10: #0a5f0a,
+        primary: #0b6a0b,
+        tint10: #1a7c1a,
+        tint20: #2d8e2d,
+        tint30: #4da64d,
+        tint40: #9ad29a,
+        tint50: #c6e7c6,
+        tint60: #f0f9f0
+    ),
+    lightTeal: (
+        shade50: #001d1f,
+        shade40: #00373a,
+        shade30: #00666d,
+        shade20: #008b94,
+        shade10: #00a5af,
+        primary: #00b7c3,
+        tint10: #18bfca,
+        tint20: #32c8d1,
+        tint30: #58d3db,
+        tint40: #a6e9ed,
+        tint50: #cef3f5,
+        tint60: #f2fcfd
+    ),
+    teal: (
+        shade50: #001516,
+        shade40: #012728,
+        shade30: #02494c,
+        shade20: #026467,
+        shade10: #037679,
+        primary: #038387,
+        tint10: #159195,
+        tint20: #2aa0a4,
+        tint30: #4cb4b7,
+        tint40: #9bd9db,
+        tint50: #c7ebec,
+        tint60: #f0fafa
+    ),
+    darkTeal: (
+        shade50: #001010,
+        shade40: #001f1f,
+        shade30: #003939,
+        shade20: #004e4e,
+        shade10: #005c5c,
+        primary: #006666,
+        tint10: #0e7878,
+        tint20: #218b8b,
+        tint30: #41a3a3,
+        tint40: #92d1d1,
+        tint50: #c2e7e7,
+        tint60: #eff9f9
+    ),
+    cyan: (
+        shade50: #00181e,
+        shade40: #002e38,
+        shade30: #005669,
+        shade20: #00748f,
+        shade10: #008aa9,
+        primary: #0099bc,
+        tint10: #18a4c4,
+        tint20: #31afcc,
+        tint30: #56bfd7,
+        tint40: #a4deeb,
+        tint50: #cdedf4,
+        tint60: #f2fafc
+    ),
+    steel: (
+        shade50: #000f12,
+        shade40: #001b22,
+        shade30: #00333f,
+        shade20: #004555,
+        shade10: #005265,
+        primary: #005b70,
+        tint10: #0f6c81,
+        tint20: #237d92,
+        tint30: #4496a9,
+        tint40: #94c8d4,
+        tint50: #c3e1e8,
+        tint60: #eff7f9
+    ),
+    lightBlue: (
+        shade50: #091823,
+        shade40: #112d42,
+        shade30: #20547c,
+        shade20: #2c72a8,
+        shade10: #3487c7,
+        primary: #3a96dd,
+        tint10: #4fa1e1,
+        tint20: #65ade5,
+        tint30: #83bdeb,
+        tint40: #bfddf5,
+        tint50: #dcedfa,
+        tint60: #f6fafe
+    ),
+    blue: (
+        shade50: #001322,
+        shade40: #002440,
+        shade30: #004377,
+        shade20: #005ba1,
+        shade10: #006cbf,
+        primary: #0078d4,
+        tint10: #1a86d9,
+        tint20: #3595de,
+        tint30: #5caae5,
+        tint40: #a9d3f2,
+        tint50: #d0e7f8,
+        tint60: #f3f9fd
+    ),
+    royalBlue: (
+        shade50: #000c16,
+        shade40: #00172a,
+        shade30: #002c4e,
+        shade20: #003b6a,
+        shade10: #00467e,
+        primary: #004e8c,
+        tint10: #125e9a,
+        tint20: #286fa8,
+        tint30: #4a89ba,
+        tint40: #9abfdc,
+        tint50: #c7dced,
+        tint60: #f0f6fa
+    ),
+    darkBlue: (
+        shade50: #000910,
+        shade40: #00111f,
+        shade30: #002039,
+        shade20: #002b4e,
+        shade10: #00335c,
+        primary: #003966,
+        tint10: #0e4a78,
+        tint20: #215c8b,
+        tint30: #4178a3,
+        tint40: #92b5d1,
+        tint50: #c2d6e7,
+        tint60: #eff4f9
+    ),
+    cornflower: (
+        shade50: #0d1126,
+        shade40: #182047,
+        shade30: #2c3c85,
+        shade20: #3c51b4,
+        shade10: #4760d5,
+        primary: #4f6bed,
+        tint10: #637cef,
+        tint20: #778df1,
+        tint30: #93a4f4,
+        tint40: #c8d1fa,
+        tint50: #e1e6fc,
+        tint60: #f7f9fe
+    ),
+    navy: (
+        shade50: #00061d,
+        shade40: #000c36,
+        shade30: #001665,
+        shade20: #001e89,
+        shade10: #0023a2,
+        primary: #0027b4,
+        tint10: #173bbd,
+        tint20: #3050c6,
+        tint30: #546fd2,
+        tint40: #a3b2e8,
+        tint50: #ccd5f3,
+        tint60: #f2f4fc
+    ),
+    lavender: (
+        shade50: #120f25,
+        shade40: #221d46,
+        shade30: #3f3682,
+        shade20: #5649b0,
+        shade10: #6656d1,
+        primary: #7160e8,
+        tint10: #8172eb,
+        tint20: #9184ee,
+        tint30: #a79cf1,
+        tint40: #d2ccf8,
+        tint50: #e7e4fb,
+        tint60: #f9f8fe
+    ),
+    purple: (
+        shade50: #0f0717,
+        shade40: #1c0e2b,
+        shade30: #341a51,
+        shade20: #46236e,
+        shade10: #532982,
+        primary: #5c2e91,
+        tint10: #6b3f9e,
+        tint20: #7c52ab,
+        tint30: #9470bd,
+        tint40: #c6b1de,
+        tint50: #e0d3ed,
+        tint60: #f7f4fb
+    ),
+    darkPurple: (
+        shade50: #0a0411,
+        shade40: #130820,
+        shade30: #240f3c,
+        shade20: #311552,
+        shade10: #3a1861,
+        primary: #401b6c,
+        tint10: #512b7e,
+        tint20: #633e8f,
+        tint30: #7e5ca7,
+        tint40: #b9a3d3,
+        tint50: #d8cce7,
+        tint60: #f5f2f9
+    ),
+    orchid: (
+        shade50: #16101d,
+        shade40: #281e37,
+        shade30: #4c3867,
+        shade20: #674c8c,
+        shade10: #795aa6,
+        primary: #8764b8,
+        tint10: #9373c0,
+        tint20: #a083c9,
+        tint30: #b29ad4,
+        tint40: #d7caea,
+        tint50: #e9e2f4,
+        tint60: #f9f8fc
+    ),
+    grape: (
+        shade50: #160418,
+        shade40: #29072e,
+        shade30: #4c0d55,
+        shade20: #671174,
+        shade10: #7a1589,
+        primary: #881798,
+        tint10: #952aa4,
+        tint20: #a33fb1,
+        tint30: #b55fc1,
+        tint40: #d9a7e0,
+        tint50: #eaceef,
+        tint60: #faf2fb
+    ),
+    berry: (
+        shade50: #1f091d,
+        shade40: #3a1136,
+        shade30: #6d2064,
+        shade20: #932b88,
+        shade10: #af33a1,
+        primary: #c239b3,
+        tint10: #c94cbc,
+        tint20: #d161c4,
+        tint30: #da7ed0,
+        tint40: #edbbe7,
+        tint50: #f5daf2,
+        tint60: #fdf5fc
+    ),
+    lilac: (
+        shade50: #1c0b1f,
+        shade40: #35153a,
+        shade30: #63276d,
+        shade20: #863593,
+        shade10: #9f3faf,
+        primary: #b146c2,
+        tint10: #ba58c9,
+        tint20: #c36bd1,
+        tint30: #cf87da,
+        tint40: #e6bfed,
+        tint50: #f2dcf5,
+        tint60: #fcf6fd
+    ),
+    pink: (
+        shade50: #24091b,
+        shade40: #441232,
+        shade30: #80215d,
+        shade20: #ad2d7e,
+        shade10: #cd3595,
+        primary: #e43ba6,
+        tint10: #e750b0,
+        tint20: #ea66ba,
+        tint30: #ef85c8,
+        tint40: #f7c0e3,
+        tint50: #fbddf0,
+        tint60: #fef6fb
+    ),
+    hotPink: (
+        shade50: #240016,
+        shade40: #44002a,
+        shade30: #7f004e,
+        shade20: #ad006a,
+        shade10: #cc007e,
+        primary: #e3008c,
+        tint10: #e61c99,
+        tint20: #ea38a6,
+        tint30: #ee5fb7,
+        tint40: #f7adda,
+        tint50: #fbd2eb,
+        tint60: #fef4fa
+    ),
+    magenta: (
+        shade50: #1f0013,
+        shade40: #390024,
+        shade30: #6b0043,
+        shade20: #91005a,
+        shade10: #ac006b,
+        primary: #bf0077,
+        tint10: #c71885,
+        tint20: #ce3293,
+        tint30: #d957a8,
+        tint40: #eca5d1,
+        tint50: #f5cee6,
+        tint60: #fcf2f9
+    ),
+    plum: (
+        shade50: #13000c,
+        shade40: #240017,
+        shade30: #43002b,
+        shade20: #5a003b,
+        shade10: #6b0045,
+        primary: #77004d,
+        tint10: #87105d,
+        tint20: #98246f,
+        tint30: #ad4589,
+        tint40: #d696c0,
+        tint50: #e9c4dc,
+        tint60: #faf0f6
+    ),
+    beige: (
+        shade50: #141313,
+        shade40: #252323,
+        shade30: #444241,
+        shade20: #5d5958,
+        shade10: #6e6968,
+        primary: #7a7574,
+        tint10: #8a8584,
+        tint20: #9a9594,
+        tint30: #afabaa,
+        tint40: #d7d4d4,
+        tint50: #eae8e8,
+        tint60: #faf9f9
+    ),
+    mink: (
+        shade50: #0f0e0e,
+        shade40: #1c1b1a,
+        shade30: #343231,
+        shade20: #474443,
+        shade10: #54514f,
+        primary: #5d5a58,
+        tint10: #706d6b,
+        tint20: #84817e,
+        tint30: #9e9b99,
+        tint40: #cecccb,
+        tint50: #e5e4e3,
+        tint60: #f8f8f8
+    ),
+    silver: (
+        shade50: #151818,
+        shade40: #282d2e,
+        shade30: #4a5356,
+        shade20: #657174,
+        shade10: #78868a,
+        primary: #859599,
+        tint10: #92a1a5,
+        tint20: #a0aeb1,
+        tint30: #b3bfc2,
+        tint40: #d8dfe0,
+        tint50: #eaeeef,
+        tint60: #fafbfb
+    ),
+    platinum: (
+        shade50: #111314,
+        shade40: #1f2426,
+        shade30: #3b4447,
+        shade20: #505c60,
+        shade10: #5f6d71,
+        primary: #69797e,
+        tint10: #79898d,
+        tint20: #89989d,
+        tint30: #a0adb2,
+        tint40: #cdd6d8,
+        tint50: #e4e9ea,
+        tint60: #f8f9fa
+    ),
+    anchor: (
+        shade50: #090a0b,
+        shade40: #111315,
+        shade30: #202427,
+        shade20: #2b3135,
+        shade10: #333a3f,
+        primary: #394146,
+        tint10: #4d565c,
+        tint20: #626c72,
+        tint30: #808a90,
+        tint40: #bcc3c7,
+        tint50: #dbdfe1,
+        tint60: #f6f7f8
+    ),
+    charcoal: (
+        shade50: #090909,
+        shade40: #111111,
+        shade30: #202020,
+        shade20: #2b2b2b,
+        shade10: #333333,
+        primary: #393939,
+        tint10: #515151,
+        tint20: #686868,
+        tint30: #888888,
+        tint40: #c4c4c4,
+        tint50: #dfdfdf,
+        tint60: #f7f7f7
+    )
+);
+
+@mixin color-style($prefix) {
+    :root,
+    :host {
+        @each $name, $tones in $_colors {
+            @if (meta.type-of($tones) == map) {
+                @each $key, $value in $tones {
+                    #{'--#{$prefix}-#{$name}-#{$key}-color'}: #{$value};
+                }
+            } @else {
+                #{'--#{$prefix}-#{$name}-color'}: #{$tones};
+            }
+        }
+    }
+}
+
+$_curves: (
+    curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',
+    curveAccelerateMid: 'cubic-bezier(1,0,1,1)',
+    curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',
+    curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',
+    curveDecelerateMid: 'cubic-bezier(0,0,0,1)',
+    curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',
+    curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',
+    curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',
+    curveLinear: 'cubic-bezier(0,0,1,1)'
+);
+
+@mixin curve-style($prefix) {
+    :root,
+    :host {
+        @each $curve, $value in $_curves {
+            --#{$prefix}-#{$curve}: #{$value};
+        }
+    }
+}
+
+$_durations: (
+    durationUltraFast: '50ms',
+    durationFaster: '100ms',
+    durationFast: '150ms',
+    durationNormal: '200ms',
+    durationGentle: '250ms',
+    durationSlow: '300ms',
+    durationSlower: '400ms',
+    durationUltraSlow: '500ms'
+);
+
+@mixin duration-style($prefix) {
+    :root,
+    :host {
+        @each $duration, $value in $_durations {
+            --#{$prefix}-#{$duration}: #{$value};
+        }
+    }
+}
+
+
+
+
+
+
+$thickness-factor: $layout-thickness;
+$radius-factor: $layout-radius;
+$space-factor: $layout-space;
+$transition: $duration-duration-normal;
+
+@function _layout-palette($prefix, $radius, $thickness, $space, $transition: $transition) {
+    $layouts: ();
+    $layouts: map.merge(
+        $layouts,
+        (
+            // legacy
+            '#{$prefix}-radius-factor': #{px-to-rem($radius)},
+            '#{$prefix}-layout-thickness': #{px-to-rem($radius)}
+        )
+    );
+    $layouts: map.merge(
+        $layouts,
+        (
+            // legacy
+            '#{$prefix}-thickness-factor': #{px-to-rem($thickness)},
+            '#{$prefix}-layout-radius': #{px-to-rem($thickness)}
+        )
+    );
+    $layouts: map.merge(
+        $layouts,
+        (
+            // legacy
+            '#{$prefix}-space-factor': #{px-to-rem($space)},
+            '#{$prefix}-layout-space': #{px-to-rem($space)}
+        )
+    );
+    $layouts: map.merge(
+        $layouts,
+        (
+            // legacy
+            '#{$prefix}-transition-duration': $transition,
+            '#{$prefix}-layout-transition': $transition
+        )
+    );
+
+    @return $layouts;
+}
+
+/// @access private
+/// @group Layout
+/// @requires {function} empty
+@mixin _layout-style($prefix, $radius, $thickness, $space) {
+    $palette: _layout-palette($prefix, $radius, $thickness, $space);
+
+    @if list.length($palette) {
+        :root,
+        :host {
+            @each $key, $value in $palette {
+                #{'--#{$key}'}: #{$value};
+            }
+        }
+    }
+}
+
+/// @access public
+/// @group Layout
+/// @requires {mixin} _layout-style
+@mixin layout-style($prefix, $radius: $radius-factor, $thickness: $thickness-factor, $space: $space-factor) {
+    @include _layout-style($prefix, $radius, $thickness, $space);
+}
+
+
+
+$_spacings-map: (
+    none: '0',
+    xxs: '2px',
+    xs: '4px',
+    sNudge: '6px',
+    s: '8px',
+    mNudge: '10px',
+    m: '12px',
+    l: '16px',
+    xl: '20px',
+    xxl: '24px',
+    xxxl: '32px'
+);
+
+$_horizontal-spacings: (
+    spacingHorizontalNone: map.get($_spacings-map, none),
+    spacingHorizontalXXS: map.get($_spacings-map, xxs),
+    spacingHorizontalXS: map.get($_spacings-map, xs),
+    spacingHorizontalSNudge: map.get($_spacings-map, sNudge),
+    spacingHorizontalS: map.get($_spacings-map, s),
+    spacingHorizontalMNudge: map.get($_spacings-map, mNudge),
+    spacingHorizontalM: map.get($_spacings-map, m),
+    spacingHorizontalL: map.get($_spacings-map, l),
+    spacingHorizontalXL: map.get($_spacings-map, xl),
+    spacingHorizontalXXL: map.get($_spacings-map, xxl),
+    spacingHorizontalXXXL: map.get($_spacings-map, xxxl)
+);
+
+$_vertical-spacings: (
+    spacingVerticalNone: map.get($_spacings-map, none),
+    spacingVerticalXXS: map.get($_spacings-map, xxs),
+    spacingVerticalXS: map.get($_spacings-map, xs),
+    spacingVerticalSNudge: map.get($_spacings-map, sNudge),
+    spacingVerticalS: map.get($_spacings-map, s),
+    spacingVerticalMNudge: map.get($_spacings-map, mNudge),
+    spacingVerticalM: map.get($_spacings-map, m),
+    spacingVerticalL: map.get($_spacings-map, l),
+    spacingVerticalXL: map.get($_spacings-map, xl),
+    spacingVerticalXXL: map.get($_spacings-map, xxl),
+    spacingVerticalXXXL: map.get($_spacings-map, xxxl)
+);
+
+@mixin spacing-style($prefix) {
+    $spacings: map.merge($_horizontal-spacings, $_vertical-spacings);
+
+    :root,
+    :host {
+        @each $spacing, $value in $spacings {
+            --#{$prefix}-#{$spacing}: #{$value};
+        }
+    }
+}
+
+$_stroke-widths: (
+    strokeWidthThin: '1px',
+    strokeWidthThick: '2px',
+    strokeWidthThicker: '3px',
+    strokeWidthThickest: '4px'
+);
+
+@mixin stroke-width-style($prefix) {
+    :root,
+    :host {
+        @each $stroke, $value in $_stroke-widths {
+            --#{$prefix}-#{$stroke}: #{$value};
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+@mixin fluent-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
+    $theme: 'fluent';
+
+    // @include layout-style($radius, $thickness, $space);
+    @include color-style($theme);
+    @include spacing-style($theme);
+    @include stroke-width-style($theme);
+    @include border-radius-style($theme);
+    @include alias-style($theme);
+    @include brand-color-style($theme);
+    @include duration-style($theme);
+    @include curve-style($theme);
+
+    :root,
+    :host {
+        @content;
+    }
+}
+
+
+$button-props: (
+  'font-family': var(--unknown),
+  'font-size': var(--unknown),
+  'font-line-height': var(--unknown),
+  'font-weight': var(--unknown),
+  'font-letter-spacing': var(--unknown),
+  'font-text-decoration': var(--unknown),
+  'font-text-transform': var(--unknown),
+  'padding-top': var(--unknown),
+  'padding-right': var(--unknown),
+  'padding-bottom': var(--unknown),
+  'padding-left': var(--unknown),
+  'gap': var(--unknown),
+  'transition-duration': var(--unknown),
+  'transition-mode': var(--unknown),
+  'transition-property': unknown,
+  'translate': var(--unknown),
+  'background-color': var(--unknown),
+  'foreground-color': var(--unknown),
+  'border-color': var(--unknown),
+  'border-width': var(--unknown),
+  'border-radius': var(--unknown),
+  'border-style': var(--unknown),
+  'width': var(--unknown),
+  'height': var(--unknown),
+  'progress-thickness': var(--unknown)
+);
+
+$text-box-props: (
+  'font-family': var(--theme-typography),
+  'font-size': 16px,
+  'font-line-height': "unset",
+  'font-weight': normal,
+  'font-letter-spacing': "unset",
+  'font-text-decoration': "unset",
+  'font-text-transform': "unset",
+  'padding-top': 8px,
+  'padding-right': 12px,
+  'padding-bottom': 8px,
+  'padding-left': 12px,
+  'gap': 8px,
+  'transition-duration': .2s,
+  'transition-mode': ease,
+  'transition-property': (background-color, color, border-color, opacity, box-shadow),
+  'translate': "unset",
+  'background-color': var(--theme-background-color),
+  'foreground-color': var(--theme-foreground-color),
+  'border-color': var(--theme-highlight-color),
+  'border-width': var(--theme-thickness-factor),
+  'border-radius': var(--theme-radius-factor),
+  'border-style': solid,
+  'shadow': var(--theme-elevation-none),
+  'height': 56px,
+  'focus-ring-width': 0px
+);