@breadstone/mosaik-themes 0.0.206 → 0.0.210

package/themes/fluent.scss

@@ -1,1591 +0,0 @@
-@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;
-$size-tiny: 2px;
-$size-small: 4px;
-$size-medium: 8px;
-$size-large: 16px;
-$size-giant: 32px;
-$size-key-tiny: "tiny";
-$size-key-small: "small";
-$size-key-medium: "medium";
-$size-key-large: "large";
-$size-key-giant: "giant";
-$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;
-$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
-$_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: (
-  'background-color': var(--unknown),
-  'border-color': var(--unknown),
-  'border-radius': var(--unknown),
-  'border-style': var(--unknown),
-  'border-width': var(--unknown),
-  'font-family': var(--unknown),
-  'font-letter-spacing': var(--unknown),
-  'font-line-height': var(--unknown),
-  'font-size': var(--unknown),
-  'font-text-decoration': var(--unknown),
-  'font-text-transform': var(--unknown),
-  'font-weight': var(--unknown),
-  'foreground-color': var(--unknown),
-  'gap': var(--unknown),
-  'height': var(--unknown),
-  'icon-min-width': 36px,
-  'icon-min-height': 36px,
-  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
-  'min-width': 64px,
-  'padding-bottom': var(--unknown),
-  'padding-left': var(--unknown),
-  'padding-right': var(--unknown),
-  'padding-top': var(--unknown),
-  'progress-thickness': var(--unknown),
-  'transition-duration': var(--unknown),
-  'transition-mode': var(--unknown),
-  'transition-property': unknown,
-  'translate': var(--unknown),
-  'width': var(--unknown)
-);
-$text-box-props: (
-  'background-color': var(--theme-background-color),
-  'border-color': var(--theme-highlight-color),
-  'border-radius': var(--theme-radius-factor),
-  'border-style': solid,
-  'border-width': var(--theme-thickness-factor),
-  'focus-ring-width': 0px,
-  'font-family': var(--theme-typography),
-  'font-letter-spacing': unset,
-  'font-line-height': unset,
-  'font-size': 16px,
-  'font-text-decoration': unset,
-  'font-text-transform': unset,
-  'font-weight': normal,
-  'foreground-color': var(--theme-foreground-color),
-  'gap': 8px,
-  'height': 56px,
-  'padding-bottom': 8px,
-  'padding-left': 12px,
-  'padding-right': 12px,
-  'padding-top': 8px,
-  'prefix-icon-size': 20px,
-  'shadow': var(--theme-elevation-none),
-  'suffix-icon-size': 20px,
-  'transition-duration': .2s,
-  'transition-mode': ease,
-  'transition-property': (background-color, color, border-color, opacity, box-shadow),
-  'translate': unset
-);