@simple-reporting/base 1.0.23 → 1.0.24

package/scss/grid/root.scss

@@ -0,0 +1,80 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+
+@each $breakpoint, $min-width in variables.$breakpoints {
+  $size-unit: false;
+  @if $breakpoint == print {
+    $size-unit: in;
+  }
+
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}breakpoint-#{$breakpoint},
+                  system.size-unit($min-width, $size-unit)
+  );
+
+  $container: map.get(variables.$containers, $breakpoint);
+
+  $container-max-width: map.get($container, max-width);
+  @if not $container-max-width {
+    $container-max-width: unset;
+  }
+
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}container-max-width,
+                  system.size-unit($container-max-width, $size-unit),
+                  $breakpoint
+  );
+
+  $container-padding: map.get($container, padding);
+  @if not $container-padding {
+    $container-padding: unset;
+  }
+
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}container-padding,
+                  system.size-unit($container-padding, $size-unit),
+                  $breakpoint
+  );
+
+  $gutter: map.get(variables.$gutter, $breakpoint);
+  @if not $gutter {
+    $gutter: (
+            columns: 1,
+    );
+  }
+
+  $columns: map.get(variables.$columns, $breakpoint);
+
+  $gap: map.get($gutter, gap);
+  $row-gap: unset;
+  $column-gap: unset;
+  @if $gap {
+    $row-gap: $gap;
+    $column-gap: $gap;
+  } @else {
+    @if map.has-key($gutter, row-gap) {
+      $row-gap: map.get($gutter, row-gap);
+    }
+    @if map.has-key($gutter, column-gap) {
+      $column-gap: map.get($gutter, column-gap);
+    }
+  }
+
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}gutter-columns,
+                  $columns,
+                  $breakpoint
+  );
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}gutter-row-gap,
+                  system.size-unit($row-gap, $size-unit),
+                  $breakpoint
+  );
+
+  @include system.add-root-style(
+                  #{variables.$variable-prefix}gutter-column-gap,
+                  system.size-unit($column-gap, $size-unit),
+                  $breakpoint
+  );
+}

package/scss/helpers/root.scss

@@ -0,0 +1,4 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+

package/scss/init-root.scss

@@ -0,0 +1,12 @@
+@use "./colors/root" as *;
+@use "./fonts/root" as *;
+@use "./grid/root" as *;
+@use "./helpers/root" as *;
+@use "./meta/root" as *;
+@use "./spacer/root" as *;
+@use "./typography/root" as *;
+@use "./system";
+
+@each $key, $value in system.$root-styles {
+  @include system.add-root-style($key, $value);
+}

package/scss/meta/root.scss

@@ -0,0 +1,4 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+

package/scss/spacer/functions.scss

@@ -1,9 +1,10 @@
 @use 'variables';
 @use 'sass:map';
+@use "../system";
 
 @function get($spacer) {
   @if not map.has-key(variables.$spacer, $spacer) {
     @error "Invalid column-gap "#{$spacer}" specified! Choose one of #{map.keys(variables.$spacer)}";
   }
-  @return var(--#{variables.$variable-prefix}spacer-#{$spacer});
+  @return system.root-style(#{variables.$variable-prefix}spacer-#{$spacer});
 }

package/scss/spacer/mixins.scss

@@ -72,58 +72,6 @@
   column-gap: functions.get($spacer);
 }
 
-@each $spacer, $spacerValue in variables.$spacer {
-  $varName: #{variables.$variable-prefix}spacer-#{$spacer};
-  @include system.add-root-style(
-    $varName,
-    system.size-unit(map.get($spacerValue, size))
-  );
-
-  @if not (map.has-key($spacerValue, media) and map.has-key(map.get($spacerValue, media), print)) {
-    @include system.add-root-style(
-      $varName,
-      system.size-unit(map.get($spacerValue, size)),
-      print
-    );
-  }
-
-  @if map.has-key($spacerValue, media) {
-    @each $breakpoint, $breakpointValue in map.get($spacerValue, media) {
-      @if $breakpoint == print {
-        @include system.add-root-style(
-          $varName,
-          system.size-unit(map.get($breakpointValue, size)),
-          print
-        );
-      } @else if $breakpoint == up {
-        @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
-          @include system.add-root-style(
-            $varName,
-            system.size-unit($upBreakpointValue),
-            $upBreakpoint,
-            up
-          );
-        }
-      } @else if $breakpoint == down {
-        @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
-          @include system.add-root-style(
-            $varName,
-            system.size-unit($downBreakpointValue),
-            $downBreakpoint,
-            down
-          );
-        }
-      } @else {
-        @include system.add-root-style(
-          $varName,
-          system.size-unit($breakpointValue),
-          $breakpoint
-        );
-      }
-    }
-  }
-}
-
 @mixin core-styles {
   @at-root {
     @each $spacer, $spacerValue in variables.$spacer {

package/scss/spacer/root.scss

@@ -0,0 +1,55 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+
+@each $spacer, $spacerValue in variables.$spacer {
+  $varName: #{variables.$variable-prefix}spacer-#{$spacer};
+  @include system.add-root-style(
+                  $varName,
+                  system.size-unit(map.get($spacerValue, size))
+  );
+
+  @if not (map.has-key($spacerValue, media) and map.has-key(map.get($spacerValue, media), print)) {
+    @include system.add-root-style(
+                    $varName,
+                    system.size-unit(map.get($spacerValue, size)),
+                    print
+    );
+  }
+
+  @if map.has-key($spacerValue, media) {
+    @each $breakpoint, $breakpointValue in map.get($spacerValue, media) {
+      @if $breakpoint == print {
+        @include system.add-root-style(
+                        $varName,
+                        system.size-unit(map.get($breakpointValue, size)),
+                        print
+        );
+      } @else if $breakpoint == up {
+        @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
+          @include system.add-root-style(
+                          $varName,
+                          system.size-unit($upBreakpointValue),
+                          $upBreakpoint,
+                          up
+          );
+        }
+      } @else if $breakpoint == down {
+        @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
+          @include system.add-root-style(
+                          $varName,
+                          system.size-unit($downBreakpointValue),
+                          $downBreakpoint,
+                          down
+          );
+        }
+      } @else {
+        @include system.add-root-style(
+                        $varName,
+                        system.size-unit($breakpointValue),
+                        $breakpoint
+        );
+      }
+    }
+  }
+}

package/scss/system/functions.scss

@@ -1,4 +1,5 @@
 @use 'variables';
+@use "mixins";
 @use 'sass:map';
 @use 'sass:list';
 @use 'sass:math';
@@ -44,6 +45,11 @@
   @return $fallback;
 }
 
+@function unit-to-number($unit) {
+  // $unit z.B. "em" oder "pt"
+  @return 1#{$unit}; // ergibt 1em / 1pt als Number mit Einheit
+}
+
 @function size-unit($size, $size-unit: false) {
   @if not $size-unit {
     $size-unit: variables.$size-unit;
@@ -51,11 +57,21 @@
   @if meta.type-of($size) == 'number' and math.is-unitless($size) and $size != 0
   {
     @if $size-unit == 'rem' {
-      @return math.div($size, variables.$root-size) + rem;
+      @return math.div($size, variables.$root-size) * 1rem;
     } @else if $size-unit == 'in' {
-      @return math.div($size, variables.$dpi) + in;
+      @return math.div($size, variables.$dpi) * 1in;
     } @else if $size-unit == 'pt' {
-      @return ($size * variables.$point) + pt;
+      @return ($size * variables.$point) * 1pt;
+    } @else if $size-unit == 'px' {
+      @return $size * 1px;
+    } @else if $size-unit == 'cm' {
+      @return math.div($size, variables.$dpi) * 2.54cm;
+    } @else if $size-unit == 'mm' {
+      @return math.div($size, variables.$dpi) * 25.4mm;
+    } @else if $size-unit == 'pc' {
+      @return math.div($size, variables.$dpi) * 6pc;
+    } @else if $size-unit == 'Q' {
+      @return math.div($size, variables.$dpi) * 101.6Q;
     } @else {
       @return $size + $size-unit;
     }
@@ -64,7 +80,7 @@
   } @else if $size == null {
     @return unset;
   } @else {
-    @return #{$size};
+    @return $size;
   }
 }
 
@@ -72,6 +88,55 @@
   @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
     @return math.div($number, ($number * 0 + 1));
   }
-
   @return $number;
 }
+
+@function number-to-unit($number, $unit) {
+  @if $unit == 'rem' {
+    @return $number * 1rem;
+  } @else if $unit == 'in' {
+    @return $number * 1in;
+  } @else if $unit == 'pt' {
+    @return $number * 1pt;
+  } @else if $unit == 'px' {
+    @return $number * 1px;
+  } @else if $unit == 'cm' {
+    @return $number * 1cm;
+  } @else if $unit == 'mm' {
+    @return $number * 1mm;
+  } @else if $unit == 'pc' {
+    @return $number * 1pc;
+  } @else if $unit == 'Q' {
+    @return $number * 1Q;
+  } @else {
+    @return $number + $unit;
+  }
+}
+
+@function round-if-unit($value) {
+  @if meta.type-of($value) == 'number' and not math.is-unitless($value) {
+    $unit: math.unit($value);
+    @return number-to-unit(math.round(strip-unit($value)), $unit);
+  }
+  @return $value;
+}
+
+@function root-style($varname, $default: unset) {
+  @if variables.$build == 'word' {
+    $res: map.get(mixins.$stylesOnly, print, $varname);
+    @if $res == null {
+      $res: map.get(mixins.$stylesUp, print, $varname);
+    }
+    @if $res == null {
+      $res: map.get(mixins.$styles, $varname);
+    }
+    @if meta.type-of($res) == 'number' and math.unit($res) == 'pt' {
+     $res: round-if-unit($res);
+    }
+    @if $res == null {
+      $res: $default;
+    }
+    @return $res;
+  }
+  @return var(--#{$varname}, #{$default});
+}

package/scss/system/root.scss

@@ -3,9 +3,6 @@
 @use '../grid';
 
 @mixin core-styles {
-  @each $key, $value in variables.$root-styles {
-    @include add-root-style($key, $value);
-  }
   @at-root {
     :root {
       @each $key, $value in mixins.$styles {

package/scss/system/variables.scss

@@ -1,4 +1,5 @@
 $environment: development !default;
+$build: development !default;
 
 $variable-prefix: 'srl-' !default;
 $class-prefix: 'srl-' !default;

package/scss/typography/functions.scss

@@ -6,51 +6,51 @@
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-family, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-family, unset);
 }
 
 @function get-font-size($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typo specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-size, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-size, unset);
 }
 
 @function get-line-height($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-line-height, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-line-height, unset);
 }
 
 @function get-font-style($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-style, normal);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-style, normal);
 }
 
 @function get-font-weight($typo) {
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
 }
 
 @function get-font-color($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-color, unset);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-font-color, unset);
 }
 
 @function get-letter-spacing($typo) {
-  @return var(
-    --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
+  @return system.root-style(
+    #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
     unset
   );
 }
 
 @function get-text-transform($typo) {
-  @return var(
-    --#{variables.$variable-prefix}typo-#{$typo}-text-transform,
+  @return system.root-style(
+    #{variables.$variable-prefix}typo-#{$typo}-text-transform,
     unset
   );
 }
@@ -59,12 +59,12 @@
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-margin-top, 0);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-margin-top, 0);
 }
 
 @function get-margin-bottom($typo) {
   @if not map.has-key(variables.$typography, $typo) {
     @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
   }
-  @return var(--#{variables.$variable-prefix}typo-#{$typo}-margin-bottom, 0);
+  @return system.root-style(#{variables.$variable-prefix}typo-#{$typo}-margin-bottom, 0);
 }

package/scss/typography/mixins.scss

@@ -44,223 +44,6 @@
   }
 }
 
-@mixin _register-typo-variables(
-  $typo,
-  $map,
-  $media: false,
-  $mediaBehavior: false
-) {
-  @if not $media {
-    $defaults: map.merge(
-      (
-        font-family: unset,
-        font-size: unset,
-        line-height: unset,
-        font-style: normal,
-        font-weight: unset,
-        letter-spacing: unset,
-        margin-top: 0,
-        margin-bottom: 0,
-      ),
-      $map
-    );
-
-    @if (map.has-key($map, font-family)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-family,
-        string.unquote(map.get($defaults, font-family))
-      );
-    }
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-size,
-      system.size-unit(map.get($defaults, font-size))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-line-height,
-      system.size-unit(map.get($defaults, line-height), em)
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-style,
-      string.unquote(map.get($defaults, font-style))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-font-weight,
-      map.get($defaults, font-weight)
-    );
-
-    @if (map.has-key($map, color)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-color,
-        colors.get(map.get($defaults, color))
-      );
-    }
-
-    @if (map.has-key($map, letter-spacing)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
-        system.size-unit(map.get($defaults, letter-spacing))
-      );
-    }
-
-    @if (map.has-key($map, text-transform)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-text-transform,
-        map.get($defaults, text-transform)
-      );
-    }
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-      system.size-unit(map.get($defaults, margin-top))
-    );
-
-    @include system.add-root-style(
-      #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-      system.size-unit(map.get($defaults, margin-bottom))
-    );
-
-    @if map.has-key($map, media) {
-      @each $breakpoint, $breakpointValue in map.get($map, media) {
-        @if $breakpoint == up {
-          @each $upBreakpoint, $upBreakpointValue in $breakpointValue {
-            @include _register-typo-variables(
-              $typo,
-              $upBreakpointValue,
-              $upBreakpoint,
-              up
-            );
-          }
-        } @else if $breakpoint == down {
-          @each $downBreakpoint, $downBreakpointValue in $breakpointValue {
-            @include _register-typo-variables(
-              $typo,
-              $downBreakpointValue,
-              $downBreakpoint,
-              down
-            );
-          }
-        } @else {
-          @include _register-typo-variables(
-            $typo,
-            $breakpointValue,
-            $breakpoint
-          );
-        }
-      }
-    }
-  } @else {
-    @if (map.has-key($map, font-family)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-family,
-        string.unquote(map.get($map, font-family)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, font-size)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-size,
-        system.size-unit(map.get($map, font-size)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, line-height) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-line-height,
-        system.size-unit(map.get($map, line-height), em),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, font-style) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-style,
-        string.unquote(map.get($map, font-style)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, font-weight) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-weight,
-        map.get($map, font-weight),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, color)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-font-color,
-        colors.get(map.get($defaults, color))
-      );
-    }
-
-    @if (map.has-key($map, letter-spacing)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
-        system.size-unit(map.get($defaults, letter-spacing)),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if (map.has-key($map, text-transform)) {
-      @include system.add-root-style(
-        #{variables.$variable-prefix}typo-#{$typo}-text-transform,
-        map.get($defaults, text-transform),
-        $media,
-        $mediaBehavior
-      );
-    }
-
-    @if map.has-key($map, margin-top) {
-      @if $media == print {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-          system.size-unit(map.get($map, margin-top), in),
-          $media,
-          $mediaBehavior
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-          system.size-unit(map.get($map, margin-top)),
-          $media,
-          $mediaBehavior
-        );
-      }
-    }
-
-    @if map.has-key($map, margin-bottom) {
-      @if $media == print {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-          system.size-unit(map.get($map, margin-bottom), in),
-          $media,
-          $mediaBehavior
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-          system.size-unit(map.get($map, margin-bottom)),
-          $media,
-          $mediaBehavior
-        );
-      }
-    }
-  }
-}
-
 @mixin set-font-family($typo, $value) {
   --#{variables.$variable-prefix}typo-#{$typo}-font-family: #{string.unquote(
       $value
@@ -312,10 +95,6 @@
     )};
 }
 
-@each $typo, $values in variables.$typography {
-  @include _register-typo-variables($typo, $values);
-}
-
 @mixin core-styles {
   @each $typo, $values in variables.$typography {
     .#{variables.$class-prefix}typo-#{'' + $typo} {