@simple-reporting/base 1.0.22 → 1.0.24

package/scss/colors/mixins.scss

@@ -4,24 +4,6 @@
 @use 'functions';
 @use '../system';
 
-@mixin set($colorName, $value, $media: false) {
-  @if not map.has-key(variables.$colors, $colorName) {
-    @error "Invalid color \"#{$colorName}\" specified! Choose one of #{map.keys(variables.$colors)}";
-  }
-  @if $media {
-    --#{variables.$variable-prefix}color-#{"" + $colorName}-#{$media}: #{$value};
-  } @else {
-    --#{variables.$variable-prefix}color-#{"" + $colorName}: #{$value};
-  }
-}
-
-@each $colorName, $colors in variables.$colors {
-  @include system.add-root-style(
-    #{variables.$variable-prefix}color-#{'' + $colorName},
-    map.get($colors, color)
-  );
-}
-
 @mixin core-styles {
   @at-root {
     @each $colorName, $colors in variables.$colors {

package/scss/colors/root.scss

@@ -0,0 +1,10 @@
+@use "variables";
+@use "../system";
+@use "sass:map";
+
+@each $colorName, $colors in variables.$colors {
+  @include system.add-root-style(
+    #{variables.$variable-prefix}color-#{'' + $colorName},
+    map.get($colors, color)
+  );
+}

package/scss/core-styles.scss

@@ -1,6 +1,7 @@
 @use 'config';
 @use 'index';
 @use 'system/root';
+@use "system/variables";
 
 @use 'modern-css-reset';
 
@@ -12,7 +13,9 @@ li {
   margin: 0;
 }
 
-@include root.core-styles;
+@if variables.$build != word {
+  @include root.core-styles;
+}
 @include index.core-styles;
 @include index.system-core-styles;
 @include index.fonts-core-styles;

package/scss/fonts/root.scss

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

package/scss/grid/functions.scss

@@ -1,31 +1,33 @@
 @use 'sass:map';
 @use 'variables';
+@use '../system';
+
 
 @function get-container-max-width() {
-  @return var(--#{variables.$variable-prefix}container-max-width, 0);
+  @return system.root-style(#{variables.$variable-prefix}container-max-width, 0);
 }
 
 @function get-container-padding() {
-  @return var(--#{variables.$variable-prefix}container-padding, 0);
+  @return system.root-style(#{variables.$variable-prefix}container-padding, 0);
 }
 
 @function get-breakpoint($breakpoint) {
   @if not map.has-key(variables.$breakpoints, $breakpoint) {
     @error "Invalid breakpoint for container specified! Choose one of #{map.keys(variables.$breakpoints)}";
   }
-  @return var(--#{variables.$variable-prefix}-breakpoint-#{$breakpoint});
+  @return system.root-style(#{variables.$variable-prefix}-breakpoint-#{$breakpoint});
 }
 
 @function get-gutter-columns() {
-  @return var(--#{variables.$variable-prefix}gutter-columns);
+  @return system.root-style(#{variables.$variable-prefix}gutter-columns);
 }
 
 @function get-gutter-row-gap() {
-  @return var(--#{variables.$variable-prefix}gutter-row-gap);
+  @return system.root-style(#{variables.$variable-prefix}gutter-row-gap);
 }
 
 @function get-gutter-column-gap() {
-  @return var(--#{variables.$variable-prefix}gutter-column-gap);
+  @return system.root-style(#{variables.$variable-prefix}gutter-column-gap);
 }
 
 @function calculate-pdf-col-span-minus-one-gutter($span) {

package/scss/grid/mixins.scss

@@ -160,83 +160,6 @@
   }
 }
 
-@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
-  );
-}
-
 @mixin pdf-flex-col($span) {
   width: functions.calculate-pdf-col-span-minus-one-gutter($span);
 }

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);
 }