kemet-ui 2.0.0 → 2.0.2

package/dist/styles/shared/_helpers.scss

@@ -0,0 +1,458 @@
+@use 'sass:math';
+@use 'config' as *;
+@use '../components/config' as *;
+
+@function getListFirst($list) {
+  @return nth($list, 1);
+}
+
+@function getListLast($list) {
+  $max: length($list);
+  @return nth($list, $max);
+}
+
+
+@mixin makeBreakpoints() {
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      @if $flexiplier != 'fives' {
+        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:25"] {
+          flex: 0 0 25%;
+          max-width: 25%;
+        }
+      }
+
+      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:33"] {
+        flex: 0 0 33.33%;
+        max-width: 33.33%;
+      }
+
+      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:66"] {
+        flex: 0 0 66.66%;
+        max-width: 66.66%;
+      }
+
+      @if $flexiplier != 'fives' {
+        [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:75"] {
+          flex: 0 0 75%;
+          max-width: 75%;
+        }
+      }
+
+      [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:content"] {
+        flex: 0 0 auto;
+      }
+
+      @if $flexiplier == 'fives' {
+        @for $i from 1 through 20 {
+          $size: $i*5;
+          $percent: $size + '%';
+
+          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
+            flex: 0 0 unquote($percent);
+            max-width: unquote($percent);
+          }
+        }
+      }
+
+      @if $flexiplier == 'tens' {
+        @for $i from 1 through 10 {
+          $size: $i*10;
+          $percent: $size + '%';
+
+          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
+            flex: 0 0 unquote($percent);
+            max-width: unquote($percent);
+          }
+        }
+      }
+
+      @if $flexiplier == 'twenties' {
+        @for $i from 1 through 5 {
+          $size: $i*20;
+          $percent: $size + '%';
+
+          [kemet-layout] [kemet-breakpoint*="#{$breakpoint}:#{$size}"] {
+            flex: 0 0 unquote($percent);
+            max-width: unquote($percent);
+          }
+        }
+      }
+    } // media query
+  }
+}
+
+@mixin makeGutters() {
+  [kemet-gutters] {
+    margin-right: -(map-get($gutters, default));
+  }
+
+  [kemet-layout='flexlist'][kemet-gutters] {
+    gap: map-get($gutters, default);
+  }
+
+  [kemet-gutters] > * {
+    padding-right: map-get($gutters, default);
+  }
+
+  [kemet-layout='flexgrid'][kemet-gutters] > * {
+    margin-bottom: map-get($gutters, default);
+  }
+
+  [kemet-layout='flexcolumn'][kemet-gutters] > :not(:first-child) {
+    margin-top: map-get($gutters, default);
+  }
+
+  @media only screen and (max-width: $stackpoint) {
+    [kemet-layout='flexrow'][kemet-gutters][autostack] > * {
+      margin-bottom: map-get($gutters, default);
+    }
+  }
+
+  @if $makeresponsivegutters {
+    @each $breakpoint, $pixel in $breakpoints {
+      @media screen and (min-width: #{$pixel}) {
+        @each $attsvalue, $value in $gutters {
+          $gutterselector: '[kemet-gutters*="#{$breakpoint}:#{$attsvalue}"]';
+          // @debug $gutterselector;
+
+          #{$gutterselector} {
+            margin-right: -($value);
+          }
+
+          [kemet-layout="flexlist"]#{$gutterselector} {
+            gap: $value;
+          }
+
+          #{$gutterselector} > * {
+            padding-right: $value;
+          }
+
+          [kemet-layout="flexgrid"]#{$gutterselector} > * {
+            margin-bottom: $value;
+          }
+
+          [kemet-layout="flexcolumn"]#{$gutterselector} > :not(:first-child) {
+            margin-top: $value;
+          }
+
+          @media only screen and (max-width: $stackpoint) {
+            [kemet-layout="flexrow"]#{$gutterselector}[autostack] > * {
+              margin-bottom: $value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin makeTypeSizers() {
+  @each $key, $value in $typesizers {
+    [kemet-type-size*="#{$key}"] {
+      font-size: $value;
+      margin: 0;
+    }
+  }
+
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      @each $key, $value in $typesizers {
+        [kemet-type-size*="#{$breakpoint}:#{$key}"] {
+          font-size: $value;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+@mixin makeOrder() {
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      [kemet-order*="#{$breakpoint}:none"] {
+        order: 0;
+      }
+
+      @for $i from 1 through $order {
+        [kemet-order*="#{$breakpoint}:minus-#{$i}"] {
+          order: -#{$i};
+        }
+      }
+
+      @for $i from 1 through $order {
+        [kemet-order*="#{$breakpoint}:plus-#{$i}"] {
+          order: #{$i};
+        }
+      }
+    }
+  }
+}
+
+@mixin makeVisibility() {
+  @each $breakpoint, $range in $breakranges {
+    $min: getListFirst($range);
+    $max: getListLast($range);
+
+    @media screen and (min-width: $min) {
+      [kemet-show="#{$breakpoint}:up"] {
+        display: inherit !important;
+      }
+
+      table[kemet-show="#{$breakpoint}:up"] {
+        display: table !important;
+      }
+
+      [kemet-hide="#{$breakpoint}:up"] {
+        display: none !important;
+      }
+    }
+
+    @media screen and (max-width: $max) {
+      [kemet-show="#{$breakpoint}:down"] {
+        display: inherit !important;
+      }
+
+      table[kemet-show="#{$breakpoint}:down"] {
+        display: table !important;
+      }
+
+      [kemet-hide="#{$breakpoint}:down"] {
+        display: none !important;
+      }
+    }
+
+    @media screen and (min-width: $min) and (max-width: $max) {
+      [kemet-show="#{$breakpoint}"] {
+        display: inherit !important;
+      }
+
+      table[kemet-show="#{$breakpoint}"] {
+        display: table !important;
+      }
+
+      [kemet-hide="#{$breakpoint}"] {
+        display: none !important;
+      }
+    }
+  } // @each
+}
+
+@mixin makeFlexgridBasis() {
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      @for $i from 1 through $flexgridcolumns {
+        $base: math.div(100, $i);
+
+        [kemet-basis*="#{$breakpoint}:#{$i}-columns"] > * {
+          flex: 0 0 unquote($base+'%');
+          max-width: unquote($base+'%');
+        }
+      }
+    } // media query
+  }
+}
+
+@mixin makeSpacers() {
+  $sides: 'top', 'right', 'bottom', 'left';
+
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      @each $spacer, $value in $spacers {
+        [kemet-margin*="#{$breakpoint}:#{$spacer}"] {
+          margin: $value;
+        }
+
+        [kemet-padding*="#{$breakpoint}:#{$spacer}"] {
+          padding: $value;
+        }
+
+        @each $side in $sides {
+          [kemet-margin-#{$side}*="#{$breakpoint}:#{$spacer}"] {
+            margin-#{$side}: $value;
+          }
+
+          [kemet-padding-#{$side}*="#{$breakpoint}:#{$spacer}"] {
+            padding-#{$side}: $value;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin makeTypeAlign {
+  [kemet-type-align='left'] {
+    text-align: left;
+  }
+
+  [kemet-type-align='right'] {
+    text-align: right;
+  }
+
+  [kemet-type-align='center'] {
+    text-align: center;
+  }
+
+  @each $breakpoint, $pixel in $breakpoints {
+    @media screen and (min-width: #{$pixel}) {
+      [kemet-type-align*='#{$breakpoint}:left'] {
+        text-align: left;
+      }
+
+      [kemet-type-align*='#{$breakpoint}:right'] {
+        text-align: right;
+      }
+
+      [kemet-type-align*='#{$breakpoint}:center'] {
+        text-align: center;
+      }
+    }
+  }
+}
+
+@mixin makeColors {
+  @each $color, $value in $colors {
+    $name: '' + $color;
+
+    [kemet-color="#{$name}"] {
+      color: var(--kemet-color-#{'' + $color});
+    }
+
+    [kemet-background-color="#{$name}"] {
+      background-color: var(--kemet-color-#{'' + $color});
+    }
+  }
+
+  [kemet-color='auto'] {
+    color: var(--kemet-color-foreground);
+  }
+
+  [kemet-background-color='auto'] {
+    background-color: var(--kemet-color-background);
+  }
+}
+
+@mixin makeElevation {
+  @each $layer, $value in $elevation {
+    [kemet-elevation="#{$layer}"] {
+      box-shadow: var(--kemet-elevation-#{'' + $layer});
+    }
+  }
+}
+
+@mixin makeElevationDark {
+  @each $layer, $value in $elevation {
+    --kemet-elevation-#{"" + $layer}: none;
+  }
+}
+
+@mixin makeBorders {
+  $sides: 'top', 'right', 'bottom', 'left';
+  $styles: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
+
+  @each $color, $value in $colors {
+    $name: '' + $color;
+
+    [kemet-border*="#{$name}"] {
+      border-color: $value;
+    }
+  }
+
+  [kemet-border*='auto'] {
+    border-color: var(--kemet-color-background);
+  }
+
+  @each $width, $value in $borderwidths {
+    [kemet-border*="all-#{$width}"] {
+      border-width: $value;
+    }
+  }
+
+  @each $width, $value in $borderwidths {
+    [kemet-border*="horizontal-#{$width}"] {
+      border-top-width: $value;
+      border-bottom-width: $value;
+    }
+  }
+
+  @each $width, $value in $borderwidths {
+    [kemet-border*="vertical-#{$width}"] {
+      border-left-width: $value;
+      border-right-width: $value;
+    }
+  }
+
+  @each $width, $value in $borderwidths {
+    @each $side in $sides {
+      [kemet-border*="#{$side}-#{$width}"] {
+        border-#{$side}-width: $value;
+      }
+    }
+  }
+
+  @each $style in $styles {
+    [kemet-border*="all"][kemet-border*="#{$style}"] {
+      border-style: $style;
+    }
+
+    [kemet-border*="horizontal"][kemet-border*="#{$style}"] {
+      border-style: none;
+      border-top-style: $style;
+      border-bottom-style: $style;
+    }
+
+    [kemet-border*="vertical"][kemet-border*="#{$style}"] {
+      border-style: none;
+      border-left-style: $style;
+      border-right-style: $style;
+    }
+
+    @each $side in $sides {
+      [kemet-border*="#{$side}"][kemet-border*="#{$style}"] {
+        border-style: none;
+        border-#{$side}-style: $style;
+      }
+    }
+  }
+}
+
+@mixin makeBorderRadiuses {
+  @each $size, $value in $borderradiuses {
+    [kemet-border-radius="#{$size}"] {
+      border-radius: $value;
+    }
+  }
+}
+
+@mixin makeRoot {
+  :root {
+    // handle colors
+    @each $color, $value in $colors {
+      --kemet-color-#{"" + $color}: #{$value};
+    }
+
+    --kemet-color-white-to-black: var(--kemet-color-white);
+    --kemet-color-white-to-primary: var(--kemet-color-white);
+    --kemet-color-gray1-to-transparent: var(--kemet-color-gray1);
+    --kemet-color-primary-to-transparent: var(--kemet-color-primary);
+
+    // handle border radiuses
+    @each $size, $value in $borderradiuses {
+      --kemet-border-radius-#{"" + $size}: #{$value};
+    }
+
+    // handle elevation
+    @each $layer, $value in $elevation {
+      --kemet-elevation-#{"" + $layer}: #{$value};
+    }
+
+    // handle spacers
+    @each $size, $value in $spacers {
+      --kemet-spacer-#{"" + $size}: #{$value};
+    }
+
+    // component specific
+    --kemet-upload-margin: 1rem;
+  }
+}