@simple-reporting/base 0.1.111 → 1.0.0

package/{scss → srl/scss}/typography/mixins.scss

@@ -1,262 +1,302 @@
-@use 'variables';
-@use 'functions';
-@use '../system';
-@use '../grid';
-@use 'sass:map';
-@use 'sass:string';
-
-@mixin get($typo, $margins: false) {
-  @if not map.has-key(variables.$typography, $typo) {
-    @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
-  }
-  @include _build-typo($typo, map.get(variables.$typography, $typo), $margins);
-}
-
-@mixin _build-typo($typo, $map, $margins: false) {
-  @if map.has-key($map, font-family) {
-    font-family: functions.get-font-family($typo);
-  }
-
-  font-size: functions.get-font-size($typo);
-  line-height: functions.get-line-height($typo);
-
-  @if map.has-key($map, font-style) {
-    font-style: functions.get-font-style($typo);
-  }
-  font-weight: functions.get-font-weight($typo);
-
-  @if map.has-key($map, letter-spacing) {
-    letter-spacing: functions.get-letter-spacing($typo);
-  }
-
-  @if map.has-key($map, text-transform) {
-    text-transform: functions.get-text-transform($typo);
-  }
-
-  @if $margins {
-    margin-top: functions.get-margin-top($typo);
-    margin-bottom: functions.get-margin-bottom($typo);
-  }
-}
-
-@mixin _register-typo-variables($typo, $map, $media: 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, 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) {
-        @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-      );
-    }
-
-    @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
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-top,
-          system.size-unit(map.get($map, margin-top)),
-          $media
-        );
-      }
-    }
-
-    @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
-        );
-      } @else {
-        @include system.add-root-style(
-          #{variables.$variable-prefix}typo-#{$typo}-margin-bottom,
-          system.size-unit(map.get($map, margin-bottom)),
-          $media
-        );
-      }
-    }
-  }
-}
-
-@mixin set-font-family($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-font-family: #{string.unquote(
-      $value
-    )};
-}
-
-@mixin set-font-size($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-font-size: #{system.size-unit(
-      $value
-    )};
-}
-
-@mixin set-line-height($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-line-height: #{system.size-unit(
-      $value,
-      em
-    )};
-}
-
-@mixin set-font-style($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-font-style: #{$value};
-}
-
-@mixin set-font-weight($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-font-weight: #{$value};
-}
-
-@mixin set-letter-spacing($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing: #{$value};
-}
-
-@mixin set-text-transform($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-text-transform: #{$value};
-}
-
-@mixin set-margin-top($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-margin-top: #{system.size-unit(
-      $value
-    )};
-}
-
-@mixin set-margin-bottom($typo, $value) {
-  --#{variables.$variable-prefix}typo-#{$typo}-margin-bottom: #{system.size-unit(
-      $value
-    )};
-}
-
-@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} {
-      @include get($typo);
-    }
-  }
-}
+@use 'variables';
+@use 'functions';
+@use '../system';
+@use '../grid';
+@use 'sass:map';
+@use 'sass:string';
+
+@mixin get($typo, $margins: false) {
+  @if not map.has-key(variables.$typography, $typo) {
+    @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
+  }
+  @include _build-typo($typo, map.get(variables.$typography, $typo), $margins);
+}
+
+@mixin _build-typo($typo, $map, $margins: false) {
+  @if map.has-key($map, font-family) {
+    font-family: functions.get-font-family($typo);
+  }
+
+  font-size: functions.get-font-size($typo);
+  line-height: functions.get-line-height($typo);
+
+  @if map.has-key($map, font-style) {
+    font-style: functions.get-font-style($typo);
+  }
+  font-weight: functions.get-font-weight($typo);
+
+  @if map.has-key($map, letter-spacing) {
+    letter-spacing: functions.get-letter-spacing($typo);
+  }
+
+  @if map.has-key($map, text-transform) {
+    text-transform: functions.get-text-transform($typo);
+  }
+
+  @if $margins {
+    margin-top: functions.get-margin-top($typo);
+    margin-bottom: functions.get-margin-bottom($typo);
+  }
+}
+
+@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, 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, 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
+    )};
+}
+
+@mixin set-font-size($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-font-size: #{system.size-unit(
+      $value
+    )};
+}
+
+@mixin set-line-height($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-line-height: #{system.size-unit(
+      $value,
+      em
+    )};
+}
+
+@mixin set-font-style($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-font-style: #{$value};
+}
+
+@mixin set-font-weight($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-font-weight: #{$value};
+}
+
+@mixin set-letter-spacing($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing: #{$value};
+}
+
+@mixin set-text-transform($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-text-transform: #{$value};
+}
+
+@mixin set-margin-top($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-margin-top: #{system.size-unit(
+      $value
+    )};
+}
+
+@mixin set-margin-bottom($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-margin-bottom: #{system.size-unit(
+      $value
+    )};
+}
+
+@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} {
+      @include get($typo);
+    }
+  }
+}

package/{scss → srl/scss}/typography/variables.scss

@@ -1,11 +1,11 @@
-@use '../system';
-@use 'sass:map';
-
-$class-prefix: system.$class-prefix !default;
-$variable-prefix: system.$variable-prefix !default;
-
-$typography: () !default;
-
-@mixin add-typography($typo, $map) {
-  $typography: map.set($typography, $typo, $map) !global;
-}
+@use '../system';
+@use 'sass:map';
+
+$class-prefix: system.$class-prefix !default;
+$variable-prefix: system.$variable-prefix !default;
+
+$typography: () !default;
+
+@mixin add-typography($typo, $map) {
+  $typography: map.set($typography, $typo, $map) !global;
+}

package/srl/scss/xbrl-core-styles.scss

@@ -0,0 +1,47 @@
+@use 'srl';
+@use 'index';
+@use 'system/mixins';
+@use 'grid/variables';
+@use 'sass:map';
+@use 'sass:list';
+
+$breakpointsList: map.keys(variables.$breakpoints);
+$breakpointsListLength: list.length($breakpointsList);
+
+@at-root {
+  :root {
+    @each $key, $value in mixins.$styles {
+      $currentValue: $value;
+      $currentBreakpoint: 'print';
+      @each $breakpoint, $breakpointValue in variables.$breakpoints {
+        @if map.has-key(mixins.$stylesUp, $breakpoint, $key) {
+          $currentValue: map.get(mixins.$stylesUp, $breakpoint, $key);
+          $currentBreakpoint: $breakpoint;
+        }
+
+        @if map.has-key(mixins.$stylesOnly, $breakpoint, $key) {
+          $indexCurrent: list.index($breakpointsList, $currentBreakpoint);
+          $indexBreakpoint: list.index($breakpointsList, $breakpoint);
+          @if $indexBreakpoint >
+            $indexCurrent or
+            $indexBreakpoint ==
+            $breakpointsListLength
+          {
+            $currentValue: map.get(mixins.$stylesOnly, $breakpoint, $key);
+            $currentBreakpoint: $breakpoint;
+          }
+        }
+      }
+      --#{$key}: #{$currentValue};
+    }
+  }
+}
+
+@include index.core-styles;
+@include index.system-core-styles;
+@include index.fonts-core-styles;
+@include index.grid-core-styles;
+@include index.colors-core-styles;
+@include index.typography-core-styles;
+@include index.spacer-core-styles;
+@include index.helpers-core-styles;