@breadstone/mosaik-themes 0.0.30 → 0.0.32

package/Themes/fluent.scss

@@ -1,7 +1,6 @@
 @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' {
@@ -15,7 +14,6 @@
         }
     }
 }
-
 @mixin _generate-elevation-composite($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -31,7 +29,6 @@
         }
     }
 }
-
 @mixin _remap-elevation-vars($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -46,24 +43,18 @@
         }
     }
 }
-
 @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' {
@@ -72,15 +63,12 @@
                 $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;
@@ -98,9 +86,6 @@ $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),
@@ -269,7 +254,6 @@ $_light-colors-map: (
     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),
@@ -438,14 +422,12 @@ $_dark-colors-map: (
     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};
@@ -453,7 +435,6 @@ $_dark-colors-map: (
         // }
     }
 }
-
 $_border-radius: (
     borderRadiusNone: '0',
     borderRadiusSmall: '2px',
@@ -462,7 +443,6 @@ $_border-radius: (
     borderRadiusXLarge: '8px',
     borderRadiusCircular: '10000px'
 );
-
 @mixin border-radius-style($prefix) {
     :root,
     :host {
@@ -471,7 +451,6 @@ $_border-radius: (
         }
     }
 }
-
 $_colors-map: (
     primary: (
         10: #061724,
@@ -531,7 +510,6 @@ $_colors-map: (
         primary: #e06a3f
     )
 );
-
 @mixin brand-color-style($prefix) {
     :root,
     :host {
@@ -542,9 +520,6 @@ $_colors-map: (
         }
     }
 }
-
-
-
 $_colors: (
     grey: (
         2: #050505,
@@ -1354,7 +1329,6 @@ $_colors: (
         tint60: #f7f7f7
     )
 );
-
 @mixin color-style($prefix) {
     :root,
     :host {
@@ -1369,7 +1343,6 @@ $_colors: (
         }
     }
 }
-
 $_curves: (
     curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',
     curveAccelerateMid: 'cubic-bezier(1,0,1,1)',
@@ -1381,7 +1354,6 @@ $_curves: (
     curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',
     curveLinear: 'cubic-bezier(0,0,1,1)'
 );
-
 @mixin curve-style($prefix) {
     :root,
     :host {
@@ -1390,7 +1362,6 @@ $_curves: (
         }
     }
 }
-
 $_durations: (
     durationUltraFast: '50ms',
     durationFaster: '100ms',
@@ -1401,7 +1372,6 @@ $_durations: (
     durationSlower: '400ms',
     durationUltraSlow: '500ms'
 );
-
 @mixin duration-style($prefix) {
     :root,
     :host {
@@ -1410,17 +1380,10 @@ $_durations: (
         }
     }
 }
-
-
-
-
-
-
 $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(
@@ -1455,16 +1418,13 @@ $transition: $duration-duration-normal;
             '#{$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 {
@@ -1474,16 +1434,12 @@ $transition: $duration-duration-normal;
         }
     }
 }
-
 /// @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',
@@ -1497,7 +1453,6 @@ $_spacings-map: (
     xxl: '24px',
     xxxl: '32px'
 );
-
 $_horizontal-spacings: (
     spacingHorizontalNone: map.get($_spacings-map, none),
     spacingHorizontalXXS: map.get($_spacings-map, xxs),
@@ -1511,7 +1466,6 @@ $_horizontal-spacings: (
     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),
@@ -1525,10 +1479,8 @@ $_vertical-spacings: (
     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 {
@@ -1536,14 +1488,12 @@ $_vertical-spacings: (
         }
     }
 }
-
 $_stroke-widths: (
     strokeWidthThin: '1px',
     strokeWidthThick: '2px',
     strokeWidthThicker: '3px',
     strokeWidthThickest: '4px'
 );
-
 @mixin stroke-width-style($prefix) {
     :root,
     :host {
@@ -1552,21 +1502,8 @@ $_stroke-widths: (
         }
     }
 }
-
-
-
-
-
-
-
-
-
-
-
-
 @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);
@@ -1576,14 +1513,11 @@ $_stroke-widths: (
     @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),
@@ -1610,8 +1544,7 @@ $button-props: (
   'width': var(--unknown),
   'height': var(--unknown),
   'progress-thickness': var(--unknown)
-);
-
+);
 $text-box-props: (
   'font-family': var(--theme-typography),
   'font-size': 16px,