@simple-reporting/base 0.0.1

package/scss/spacer/mixins.scss

@@ -0,0 +1,236 @@
+@use 'sass:map';
+@use 'variables';
+@use 'functions';
+@use '../grid';
+@use '../system';
+
+@mixin margin($spacer) {
+  margin: functions.get($spacer);
+}
+
+@mixin margin-block($spacer) {
+  margin-block: functions.get($spacer);
+}
+
+@mixin margin-inline($spacer) {
+  margin-inline: functions.get($spacer);
+}
+
+@mixin margin-top($spacer) {
+  margin-block-start: functions.get($spacer);
+}
+
+@mixin margin-right($spacer) {
+  margin-inline-end: functions.get($spacer);
+}
+
+@mixin margin-bottom($spacer) {
+  margin-block-end: functions.get($spacer);
+}
+
+@mixin margin-left($spacer) {
+  margin-inline-start: functions.get($spacer);
+}
+
+@mixin padding($spacer) {
+  padding: functions.get($spacer);
+}
+
+@mixin padding-block($spacer) {
+  padding-block: functions.get($spacer);
+}
+
+@mixin padding-inline($spacer) {
+  padding-inline: functions.get($spacer);
+}
+
+@mixin padding-top($spacer) {
+  padding-block-start: functions.get($spacer);
+}
+
+@mixin padding-right($spacer) {
+  padding-inline-end: functions.get($spacer);
+}
+
+@mixin padding-bottom($spacer) {
+  padding-block-end: functions.get($spacer);
+}
+
+@mixin padding-left($spacer) {
+  padding-inline-start: functions.get($spacer);
+}
+
+@mixin gap($spacer) {
+  gap: functions.get($spacer);
+}
+
+@mixin row-gap($spacer) {
+  row-gap: functions.get($spacer);
+}
+
+@mixin column-gap($spacer) {
+  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, print) {
+    @include system.add-root-style(
+      $varName,
+      system.size-unit(map.get($spacerValue, size), in),
+      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($spacerValue, size), in),
+          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 {
+      .#{variables.$class-prefix}ma-none {
+        margin: 0;
+      }
+      .#{variables.$class-prefix}my-none {
+        margin-block: 0;
+      }
+      .#{variables.$class-prefix}mx-none {
+        margin-inline: 0;
+      }
+      .#{variables.$class-prefix}mt-none {
+        margin-block-start: 0;
+      }
+      .#{variables.$class-prefix}mr-none {
+        margin-inline-end: 0;
+      }
+      .#{variables.$class-prefix}mb-none {
+        margin-block-end: 0;
+      }
+      .#{variables.$class-prefix}ml-none {
+        margin-inline-start: 0;
+      }
+      .#{variables.$class-prefix}ma-#{'' + $spacer} {
+        @include margin($spacer);
+      }
+      .#{variables.$class-prefix}my-#{'' + $spacer} {
+        @include margin-block($spacer);
+      }
+      .#{variables.$class-prefix}mx-#{'' + $spacer} {
+        @include margin-inline($spacer);
+      }
+      .#{variables.$class-prefix}mt-#{'' + $spacer} {
+        @include margin-top($spacer);
+      }
+      .#{variables.$class-prefix}mr-#{'' + $spacer} {
+        @include margin-right($spacer);
+      }
+      .#{variables.$class-prefix}mb-#{'' + $spacer} {
+        @include margin-bottom($spacer);
+      }
+      .#{variables.$class-prefix}ml-#{'' + $spacer} {
+        @include margin-left($spacer);
+      }
+
+      .#{variables.$class-prefix}pa-none {
+        padding: 0;
+      }
+      .#{variables.$class-prefix}py-none {
+        padding-block: 0;
+      }
+      .#{variables.$class-prefix}px-none {
+        padding-inline: 0;
+      }
+      .#{variables.$class-prefix}pt-none {
+        padding-block-start: 0;
+      }
+      .#{variables.$class-prefix}pr-none {
+        padding-inline-end: 0;
+      }
+      .#{variables.$class-prefix}pb-none {
+        padding-block-end: 0;
+      }
+      .#{variables.$class-prefix}pl-none {
+        padding-inline-start: 0;
+      }
+      .#{variables.$class-prefix}pa-#{'' + $spacer} {
+        @include padding($spacer);
+      }
+      .#{variables.$class-prefix}py-#{'' + $spacer} {
+        @include padding-block($spacer);
+      }
+      .#{variables.$class-prefix}px-#{'' + $spacer} {
+        @include padding-inline($spacer);
+      }
+      .#{variables.$class-prefix}pt-#{'' + $spacer} {
+        @include padding-top($spacer);
+      }
+      .#{variables.$class-prefix}pr-#{'' + $spacer} {
+        @include padding-right($spacer);
+      }
+      .#{variables.$class-prefix}pb-#{'' + $spacer} {
+        @include padding-bottom($spacer);
+      }
+      .#{variables.$class-prefix}pl-#{'' + $spacer} {
+        @include padding-left($spacer);
+      }
+
+      .#{variables.$class-prefix}gap-none {
+        gap: 0;
+      }
+      .#{variables.$class-prefix}gap-#{'' + $spacer} {
+        @include gap($spacer);
+      }
+      .#{variables.$class-prefix}row-gap-none {
+        row-gap: 0;
+      }
+      .#{variables.$class-prefix}row-gap-#{'' + $spacer} {
+        @include row-gap($spacer);
+      }
+      .#{variables.$class-prefix}column-gap-none {
+        column-gap: 0;
+      }
+      .#{variables.$class-prefix}column-gap-#{'' + $spacer} {
+        @include column-gap($spacer);
+      }
+    }
+  }
+}

package/scss/spacer/variables.scss

@@ -0,0 +1,6 @@
+@use '../system';
+
+$class-prefix: system.$class-prefix !default;
+$variable-prefix: system.$variable-prefix !default;
+
+$spacer: () !default;

package/scss/system/functions.scss

@@ -0,0 +1,77 @@
+@use 'variables';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+
+@function map-get-next($map, $key, $fallback: false, $return: value) {
+  // Check if map is valid
+  @if meta.type-of($map) == map {
+    // Check if key exists in map
+    @if map.has-key($map, $key) {
+      // Init index counter variable
+      $i: 0;
+      // Init key index
+      $key-index: false;
+      // Traverse map for key
+      @each $map-key, $map-value in $map {
+        // Update index
+        $i: $i + 1;
+        // If map key found, set key index
+        @if $map-key == $key {
+          $key-index: $i;
+        }
+        // If next index return next value or key based on $return
+        @if $i == $key-index + 1 {
+          @if $return == key {
+            @return $map-key;
+          } @else {
+            @return $map-value;
+          }
+        }
+        // If last entry return false
+        @if $i == list.length($map) {
+          @return $fallback;
+        }
+      }
+      @warn 'No next map item for key #{$key}';
+      @return $fallback;
+    }
+    @warn 'No valid key #{$key} in map';
+    @return $fallback;
+  }
+  @warn 'No valid map';
+  @return $fallback;
+}
+
+@function size-unit($size, $size-unit: false) {
+  @if not $size-unit {
+    $size-unit: variables.$size-unit;
+  }
+  @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;
+    } @else if $size-unit == 'in' {
+      @return math.div($size, variables.$dpi) + in;
+    } @else if $size-unit == 'pt' {
+      @return ($size * variables.$point) + pt;
+    } @else {
+      @return $size + $size-unit;
+    }
+  } @else if $size == false {
+    @return unset;
+  } @else if $size == null {
+    @return unset;
+  } @else {
+    @return #{$size};
+  }
+}
+
+@function strip-unit($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+
+  @return $number;
+}

package/scss/system/index.scss

@@ -0,0 +1,3 @@
+@forward 'variables';
+@forward 'functions';
+@forward 'mixins';

package/scss/system/mixins.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'variables';
+
+$styles: ();
+$stylesUp: ();
+$stylesDown: ();
+$stylesOnly: ();
+
+@mixin add-root-style($key, $value, $breakpoint: false, $mediaBehavior: false) {
+  @if $breakpoint {
+    @if $mediaBehavior {
+      @if $mediaBehavior == up {
+        $stylesUp: map.set($stylesUp, $breakpoint, $key, $value) !global;
+      }
+      @if $mediaBehavior == down {
+        $stylesDown: map.set($stylesDown, $breakpoint, $key, $value) !global;
+      }
+    } @else {
+      $stylesOnly: map.set($stylesOnly, $breakpoint, $key, $value) !global;
+    }
+  } @else {
+    $styles: map.set($styles, $key, $value) !global;
+  }
+}
+
+@mixin core-styles {
+}

package/scss/system/root.scss

@@ -0,0 +1,39 @@
+@use 'variables';
+@use 'mixins';
+@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 {
+        --#{$key}: #{$value};
+      }
+      @each $breakpoint, $breakpointValue in mixins.$stylesUp {
+        @include grid.media-up($breakpoint) {
+          @each $key, $value in $breakpointValue {
+            --#{$key}: #{$value};
+          }
+        }
+      }
+
+      @each $breakpoint, $breakpointValue in mixins.$stylesDown {
+        @include grid.media-down($breakpoint) {
+          @each $key, $value in $breakpointValue {
+            --#{$key}: #{$value};
+          }
+        }
+      }
+
+      @each $breakpoint, $breakpointValue in mixins.$stylesOnly {
+        @include grid.media($breakpoint) {
+          @each $key, $value in $breakpointValue {
+            --#{$key}: #{$value};
+          }
+        }
+      }
+    }
+  }
+}

package/scss/system/variables.scss

@@ -0,0 +1,13 @@
+$environment: development !default;
+
+$variable-prefix: 'srl-' !default;
+$class-prefix: 'srl-' !default;
+
+$dpi: 96 !default;
+$point: 0.75 !default;
+$root-size: 16 !default;
+$size-unit: 'rem' !default;
+
+$meta: () !default;
+
+$root-styles: () !default;

package/scss/typography/functions.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use 'variables';
+@use '../system';
+
+@function get-font-family($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-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);
+}
+
+@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);
+}
+
+@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);
+}
+
+@function get-font-weight($typo) {
+  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
+}
+
+@function get-letter-spacing($typo) {
+  @return var(
+    --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
+    unset
+  );
+}
+
+@function get-text-transform($typo) {
+  @return var(
+    --#{variables.$variable-prefix}typo-#{$typo}-text-transform,
+    unset
+  );
+}
+
+@function get-margin-top($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-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);
+}

package/scss/typography/index.scss

@@ -0,0 +1,3 @@
+@forward 'variables';
+@forward 'functions';
+@forward 'mixins';