kemet-ui 1.3.1 → 2.0.0

package/dist/styles/core/_helpers.scss

@@ -1,407 +0,0 @@
-@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: 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: $value;
-    }
-
-    [kemet-background-color="#{$name}"] {
-      background-color: $value;
-    }
-  }
-}
-
-@mixin makeElevation {
-  @each $layer, $value in $elevation {
-    [kemet-elevation="#{$layer}"] {
-      box-shadow: $value;
-    }
-  }
-}
-
-@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;
-    }
-  }
-
-  @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;
-    }
-  }
-}

package/dist/styles/core/attributes.scss

@@ -1,38 +0,0 @@
-@use 'config' as *;
-@use 'helpers' as *;
-
-@include makeBreakpoints();
-@include makeGutters();
-
-@if $makeorder {
-  @include makeOrder();
-}
-
-@if $makevisibility {
-  @include makeVisibility();
-}
-
-@if $maketext {
-  @include makeTypeSizers();
-  @include makeTypeAlign();
-}
-
-@if $makespacers {
-  @include makeSpacers();
-}
-
-@if $makecolors {
-  @include makeColors();
-}
-
-@if $makeelevation {
-  @include makeElevation();
-}
-
-@if $makeborders {
-  @include makeBorders();
-}
-
-@if $makeborderradiuses {
-  @include makeBorderRadiuses();
-}

package/dist/styles/core/base.scss

@@ -1,38 +0,0 @@
-@use './config' as *;
-
-:root {
-  --kemet-border-radius: 6px;
-
-  --kemet-color-white: #fff;
-  --kemet-color-white-rich: #{map-get($colors, 'white-rich')};
-  --kemet-color-gray1: #{map-get($colors, 'gray1')};
-  --kemet-color-gray2: #{map-get($colors, 'gray2')};
-  --kemet-color-gray3: #{map-get($colors, 'gray3')};
-  --kemet-color-gray4: #{map-get($colors, 'gray4')};
-  --kemet-color-gray5: #{map-get($colors, 'gray5')};
-  --kemet-color-gray6: #{map-get($colors, 'gray6')};
-  --kemet-color-gray7: #{map-get($colors, 'gray7')};
-  --kemet-color-gray8: #{map-get($colors, 'gray8')};
-  --kemet-color-gray9: #{map-get($colors, 'gray9')};
-  --kemet-color-gray10: #{map-get($colors, 'gray10')};
-  --kemet-color-black: #000;
-
-  --kemet-color-primary: #{map-get($colors, 'primary')};
-  --kemet-color-link: #{map-get($colors, 'link')};
-
-  --kemet-color-error: #{map-get($colors, 'error')};
-  --kemet-color-success: #{map-get($colors, 'success')};
-  --kemet-color-neutral: #{map-get($colors, 'neutral')};
-  --kemet-color-warning: #{map-get($colors, 'warning')};
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-a {
-  color: var(--kemet-color-link);
-  text-decoration: none;
-}

package/dist/styles/core/layout.scss

@@ -1,169 +0,0 @@
-@use 'config' as *;
-@use 'helpers' as *;
-
-%flexitem {
-  flex: 1;
-  display: block;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  // text-align: left;
-}
-
-// row layout
-// ----------
-
-[kemet-layout='flexrow'] {
-  display: flex;
-}
-
-[kemet-layout='flexrow'] > * {
-  @extend %flexitem;
-}
-
-// flex items (force them to stretch)
-[kemet-layout*='flex'][kemet-flex-items] > * {
-  display: flex;
-}
-
-// kemet-autostack
-[kemet-layout*='flex'][kemet-autostack] {
-  flex-direction: column;
-}
-
-[kemet-layout*='flex'][kemet-autostack][kemet-align] > * {
-  align-self: initial;
-}
-
-@media screen and (min-width: $stackpoint) {
-  [kemet-layout*='flex'][kemet-autostack] {
-    flex-direction: row;
-  }
-}
-
-// align
-[kemet-layout*='flex'][kemet-align='top'] {
-  align-items: flex-start;
-}
-
-[kemet-layout*='flex'][kemet-align='middle'] {
-  align-items: center;
-}
-
-[kemet-layout*='flex'][kemet-align='stretch'] {
-  align-items: stretch;
-}
-
-[kemet-layout*='flex'][kemet-align='bottom'] {
-  align-items: flex-end;
-}
-
-[kemet-layout*='flex'][kemet-align-cross='left'] {
-  justify-content: left;
-}
-
-[kemet-layout*='flex'][kemet-align-cross='right'] {
-  justify-content: right;
-}
-
-[kemet-layout*='flex'][kemet-align-cross='center'] {
-  justify-content: center;
-}
-
-[kemet-layout*='flex'][kemet-align-cross='between'] {
-  justify-content: space-between;
-}
-
-[kemet-layout*='flex'][kemet-align-cross='around'] {
-  justify-content: space-around;
-}
-
-[kemet-layout*='flex'] > [kemet-align='top'] {
-  align-self: flex-start;
-}
-
-[kemet-layout*='flex'] > [kemet-align='middle'] {
-  align-self: center;
-}
-
-[kemet-layout*='flex'] > [kemet-align='stretch'] {
-  align-self: stretch;
-}
-
-[kemet-layout*='flex'] > [kemet-align='bottom'] {
-  align-self: flex-end;
-}
-
-
-// flexgrid
-// --------
-
-[kemet-layout='flexgrid'] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-[kemet-layout='flexgrid'] > * {
-  @extend %flexitem;
-}
-
-@include makeFlexgridBasis();
-
-
-// flexcolumn
-// ----------
-
-[kemet-layout='flexcolumn'] {
-  display: flex;
-  flex-direction: column;
-}
-
-[kemet-layout='flexcolumn'] > * {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-[kemet-layout='flexcolumn'] > [kemet-fit-content] {
-  flex: 0 0 auto;
-}
-
-[kemet-layout='flexcolumn'][kemet-align='bottom'] {
-  justify-content: flex-end;
-}
-
-[kemet-layout='flexcolumn'][kemet-align='center'] {
-  justify-content: center;
-}
-
-[kemet-layout='flexcolumn'][kemet-align='between'] {
-  justify-content: space-between;
-}
-
-[kemet-layout='flexcolumn'][kemet-align='around'] {
-  justify-content: space-around;
-}
-
-[kemet-layout='flexcolumn'][kemet-align] > * {
-  flex: 0 0 auto;
-}
-
-
-// flexlist
-// ---------
-
-[kemet-layout='flexlist'] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  width: auto;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-[kemet-layout='flexlist'] > * {
-  flex: 0 0 auto;
-}
-
-[kemet-layout='flexlist'][kemet-gutters] > * {
-  padding: unset;
-}

package/dist/styles/kemet.components.scss

@@ -1,4 +0,0 @@
-@use 'components/accordion';
-@use 'components/drawer';
-@use 'components/modal';
-@use 'components/scrollsnap';

package/dist/styles/kemet.core.scss

@@ -1,3 +0,0 @@
-@use 'core/base';
-@use 'core/attributes';
-@use 'core/layout';