@simple-reporting/base 0.0.1

package/scss/grid/mixins.scss

@@ -0,0 +1,388 @@
+@use 'variables';
+@use 'functions';
+@use '../system';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin media($breakpoint) {
+  @if not map.has-key(variables.$breakpoints, $breakpoint) {
+    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+  }
+  @if $breakpoint == print {
+    @media print {
+      @content;
+    }
+  } @else {
+    $min: map.get(variables.$breakpoints, $breakpoint);
+    @if $min == 0 {
+      $min: false;
+    }
+    $next: system.map-get-next(variables.$breakpoints, $breakpoint);
+    $max: false;
+    @if $next {
+      $max: $next - 1;
+    }
+    @if (not $min and $max) {
+      @media screen and (max-width: #{system.size-unit($max)}) {
+        @content;
+      }
+    } @else if ($min and not $max) {
+      @media screen and (min-width: #{system.size-unit($min)}) {
+        @content;
+      }
+    } @else if ($min and $max) {
+      @media screen and (min-width: #{system.size-unit($min)}) and (max-width: #{system.size-unit($max)}) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@mixin media-up($breakpoint) {
+  @if not map.has-key(variables.$breakpoints, $breakpoint) {
+    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+  }
+  $min: map.get(variables.$breakpoints, $breakpoint);
+
+  @if $min == 0 {
+    @content;
+  } @else {
+    @media screen and (min-width: #{system.size-unit($min)}) {
+      @content;
+    }
+  }
+}
+
+@mixin media-down($breakpoint) {
+  @if not map.has-key(variables.$breakpoints, $breakpoint) {
+    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+  }
+  $next: system.map-get-next(variables.$breakpoints, $breakpoint);
+  $max: false;
+  @if $next {
+    $max: $next - 1;
+  }
+  @if $max {
+    @media screen and (max-width: #{system.size-unit($max)}) {
+      @content;
+    }
+  } @else {
+    @error "Invalid max breakpoint #{$breakpoint} specified! Choose one of #{map.keys(map-remove(variables.$breakpoints, $breakpoint))}";
+  }
+}
+
+@mixin media-between($breakpoint-min, $breakpoint-max) {
+  @if (
+    not
+      map.has-key(variables.$breakpoints, $breakpoint-min) or not
+      map.has-key(variables.$breakpoints, $breakpoint-max)
+  ) {
+    @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+  }
+  $min: map.get(variables.$breakpoints, $breakpoint-min);
+  @if $min == 0 {
+    $min: false;
+  }
+  $next: system.map-get-next(variables.$breakpoints, $breakpoint-max);
+  $max: false;
+  @if $next {
+    $max: $next - 1;
+  }
+  @if (not $min and $max) {
+    @media screen and (max-width: #{system.size-unit($max)}) {
+      @content;
+    }
+  } @else if ($min and not $max) {
+    @media screen and (min-width: #{system.size-unit($min)}) {
+      @content;
+    }
+  } @else if ($min and $max) {
+    @media screen and (min-width: #{system.size-unit($min)}) and (max-width: #{system.size-unit($max)}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin container-fluid {
+  padding-inline: var(--#{variables.$variable-prefix}container-padding, unset);
+}
+
+@mixin container {
+  max-width: var(--#{variables.$variable-prefix}container-max-width, unset);
+  padding-inline: var(--#{variables.$variable-prefix}container-padding, unset);
+}
+
+@mixin row() {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--#{variables.$variable-prefix}gutter-columns),
+    1fr
+  );
+  column-gap: var(--#{variables.$variable-prefix}gutter-column-gap);
+  row-gap: var(--#{variables.$variable-prefix}gutter-row-gap);
+}
+
+@mixin col($span: false, $breakpoint-start: false, $breakpoint-end: false) {
+  @if $breakpoint-start and $breakpoint-end and $span {
+    @include media-between($breakpoint-start, $breakpoint-end) {
+      width: auto;
+      grid-column-end: span #{$span};
+    }
+  } @else if $breakpoint-start and $span {
+    @include media($breakpoint-start) {
+      width: auto;
+      grid-column-end: span #{$span};
+    }
+  } @else if $span {
+    width: auto;
+    grid-column-end: span #{$span};
+  } @else {
+    width: auto;
+    grid-column-end: span #{variables.$column-default-span};
+  }
+}
+
+@mixin offset($offset, $breakpoint: false) {
+  @if $breakpoint {
+    @if not map.has-key(variables.$breakpoints, $breakpoint) {
+      @error "Invalid breakpoint specified! Choose one of #{map.keys(variables.$breakpoints)}";
+    }
+    @include media($breakpoint) {
+      grid-column-start: ($offset + 1);
+    }
+  } @else {
+    grid-column-start: ($offset + 1);
+  }
+}
+
+@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($gutter, columns);
+  @if not $columns {
+    $columns: 1;
+  }
+
+  $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 core-styles {
+  @at-root {
+    .#{variables.$class-prefix}container {
+      @include container;
+
+      &-fluid {
+        @include container-fluid;
+      }
+
+      .#{variables.$class-prefix}container,
+      .#{variables.$class-prefix}container-fluid {
+        max-width: unset;
+        padding-inline: unset;
+      }
+    }
+
+    .#{variables.$class-prefix}row {
+      @include row;
+      .#{variables.$class-prefix}row {
+        display: block;
+      }
+    }
+
+    $maxCol: 0;
+    @each $breakpoint, $value in variables.$gutter {
+      $curCol: map.get($value, columns);
+      @if $curCol > $maxCol {
+        $maxCol: $curCol;
+      }
+    }
+    $listBreakpoints: map.keys(variables.$breakpoints);
+    $lenght: list.length($listBreakpoints);
+
+    .#{variables.$class-prefix}col {
+      &-span {
+        @for $col from 1 to ($maxCol + 1) {
+          &-#{$col} {
+            grid-column-end: span #{$col};
+          }
+        }
+      }
+
+      &-offset {
+        @for $offset from 1 to $maxCol {
+          &-#{$offset} {
+            grid-column-start: #{$offset + 1};
+          }
+        }
+      }
+    }
+
+    @each $breakpoint in $listBreakpoints {
+      $index: list.index($listBreakpoints, $breakpoint);
+      @include media($breakpoint) {
+        .#{variables.$class-prefix}col-#{$breakpoint} {
+          &-span {
+            @for $col
+              from 1
+              to
+              map.get(map.get(variables.$gutter, $breakpoint), columns)
+            {
+              &-#{$col} {
+                grid-column-end: span #{$col};
+              }
+            }
+          }
+
+          &-offset {
+            @for $offset
+              from 1
+              to
+              (map.get(map.get(variables.$gutter, $breakpoint), columns) - 1)
+            {
+              &-#{$offset} {
+                grid-column-start: #{$offset + 1};
+              }
+            }
+          }
+        }
+      }
+
+      @if $breakpoint != print {
+        @include media-up($breakpoint) {
+          .#{variables.$class-prefix}col-up-#{$breakpoint} {
+            &-span {
+              @for $col
+                from 1
+                to
+                map.get(map.get(variables.$gutter, $breakpoint), columns)
+              {
+                &-#{$col} {
+                  grid-column-end: span #{$col};
+                }
+              }
+            }
+
+            &-offset {
+              @for $offset
+                from 1
+                to
+                (map.get(map.get(variables.$gutter, $breakpoint), columns) - 1)
+              {
+                &-#{$offset} {
+                  grid-column-start: #{$offset + 1};
+                }
+              }
+            }
+          }
+        }
+
+        @if $index != $lenght {
+          @include media-down($breakpoint) {
+            .#{variables.$class-prefix}col-down-#{$breakpoint} {
+              &-span {
+                @for $col
+                  from 1
+                  to
+                  map.get(map.get(variables.$gutter, $breakpoint), columns)
+                {
+                  &-#{$col} {
+                    grid-column-end: span #{$col};
+                  }
+                }
+              }
+
+              &-offset {
+                @for $offset
+                  from 1
+                  to
+                  (
+                    map.get(map.get(variables.$gutter, $breakpoint), columns) -
+                      1
+                  )
+                {
+                  &-#{$offset} {
+                    grid-column-start: #{$offset + 1};
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/grid/variables.scss

@@ -0,0 +1,10 @@
+@use '../system';
+
+$class-prefix: system.$class-prefix !default;
+$variable-prefix: system.$variable-prefix !default;
+
+$containers: () !default;
+$breakpoints: () !default;
+$gutter: () !default;
+
+$column-default-span: 4 !default;

package/scss/helpers/index.scss

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

package/scss/helpers/mixins.scss

@@ -0,0 +1,87 @@
+@use '../system';
+@use '../typography';
+@use 'variables';
+
+@mixin trim-margins {
+  > * {
+    &:first-child {
+      margin-block-start: 0;
+    }
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+@mixin body-text {
+  h1 {
+    @include typography.get(headline1, true);
+  }
+  h2 {
+    @include typography.get(headline2, true);
+  }
+  h3 {
+    @include typography.get(headline3, true);
+  }
+  h4 {
+    @include typography.get(headline4, true);
+  }
+  h5 {
+    @include typography.get(headline5, true);
+  }
+  h6 {
+    @include typography.get(headline6, true);
+  }
+  p,
+  ul,
+  ol,
+  li,
+  td,
+  th,
+  dd,
+  dt {
+    @include typography.get(copy, true);
+  }
+
+  @include trim-margins;
+}
+
+@mixin list-reset() {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin list-default($list-style: circle) {
+  list-style: #{$list-style};
+  margin: system.size-unit(variables.$default-list-margin);
+  padding: system.size-unit(variables.$default-list-padding);
+  li {
+    margin: system.size-unit(variables.$default-list-margin);
+    padding: system.size-unit(variables.$default-list-padding);
+  }
+}
+
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin core-styles {
+  .#{variables.$class-prefix}list-reset {
+    @include list-reset;
+  }
+  .#{variables.$class-prefix}trim-margins {
+    @include trim-margins;
+  }
+  .#{variables.$class-prefix}clearfix {
+    @include clearfix;
+  }
+}

package/scss/helpers/variables.scss

@@ -0,0 +1,7 @@
+@use '../system';
+
+$variable-prefix: system.$variable-prefix !default;
+$class-prefix: system.$class-prefix !default;
+
+$default-list-margin: 10 !default;
+$default-list-padding: 20 !default;

package/scss/index.scss

@@ -0,0 +1,8 @@
+@forward 'system' as system-*;
+@forward 'fonts' as fonts-*;
+@forward 'grid' as grid-*;
+@forward 'colors' as colors-*;
+@forward 'typography' as typography-*;
+@forward 'spacer' as spacer-*;
+@forward 'helpers' as helpers-*;
+@forward 'meta';

package/scss/meta/functions.scss

@@ -0,0 +1,64 @@
+@use 'variables';
+@use 'sass:list';
+@use 'sass:map';
+@use '../system';
+
+@function is($list, $map: variables.$meta) {
+  $current: false;
+  $next: ();
+
+  @each $key, $index in $list {
+    @if $current == false {
+      $current: $key;
+    } @else {
+      $next: list.append($next, $key);
+    }
+  }
+
+  @if $current and map.has-key($map, $current) {
+    @if list.length($next) > 0 {
+      @return is($next, map.get($map, $current));
+    } @else {
+      @return true;
+    }
+  } @else {
+    @return false;
+  }
+}
+
+@function get($list, $map: variables.$meta) {
+  $current: false;
+  $next: ();
+
+  @each $key, $index in $list {
+    @if $current == false {
+      $current: $key;
+    } @else {
+      $next: list.append($next, $key);
+    }
+  }
+
+  @if $current and map.has-key($map, $current) {
+    @if list.length($next) > 0 {
+      @return get($next, map.get($map, $current));
+    } @else {
+      @return map.get($map, $current);
+    }
+  } @else {
+    @return false;
+  }
+}
+
+@function spacer($name, $size-unit: false) {
+  @if not map.has-key(variables.$spacer, $name) {
+    @error "Invalid name for spacer specified! Choose one of #{map.keys(variables.$spacer)}";
+  }
+  @return system.size-unit(map.get(variables.$spacer, $name), $size-unit);
+}
+
+@function padding($name, $size-unit: false) {
+  @if not map.has-key(variables.$padding, $name) {
+    @error "Invalid name for padding specified! Choose one of #{map.keys(variables.$padding)}";
+  }
+  @return system.size-unit(map.get(variables.$padding, $name), $size-unit);
+}

package/scss/meta/index.scss

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

package/scss/meta/mixins.scss

@@ -0,0 +1,6 @@
+@use 'sass:map';
+@use 'variables';
+@use '../system';
+
+@mixin core-styles {
+}

package/scss/meta/variables.scss

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

package/scss/spacer/functions.scss

@@ -0,0 +1,9 @@
+@use 'variables';
+@use 'sass:map';
+
+@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});
+}

package/scss/spacer/index.scss

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