@simple-reporting/base 0.0.1

package/scss/typography/mixins.scss

@@ -0,0 +1,262 @@
+@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);
+    }
+  }
+}

package/scss/typography/variables.scss

@@ -0,0 +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;
+}

package/tags.txt

@@ -0,0 +1 @@
+Version 0 -> v0-lts