@vixcom/ui 1.0.0

package/styles/sizes.scss

@@ -0,0 +1,191 @@
+/**
+*  Author Vixson
+*  Description Layout sizing and breakpoints
+*  Created On October 27th, 2020 4:22pm
+*/
+$grid-breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+);
+$quarter-sizes: (0, 25, 50, 75, 100);
+$number-sizes: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
+$decimal-number-sizes: (
+  d25: 0.25,
+  d5: 0.5,
+  d75: 0.75,
+);
+$non-sizes: (unset, auto);
+$directions: (
+  t: 'top',
+  r: 'right',
+  b: 'bottom',
+  l: 'left',
+);
+
+/**
+* BoxSizing - Height & Width of a layout
+* @dimensionType -  This is the unit of dimension used, Its either the default dimensions (em, rem, px, %) or Viewpoints
+*/
+
+@mixin layoutLooper(
+  $size,
+  $dimension: '',
+  $useDimension: false,
+  $breakPointKey: '',
+  $sizeKey: $size
+) {
+  $useDimension: $size !=0 and $useDimension;
+  $_dimension: if($useDimension, $dimension, '');
+  $_value: if(useDimension, #{$size}#{$_dimension}, $size);
+
+  @each $limit in ('', 'min-', 'max-') {
+    @each $dimensionType in ('', 'v') {
+      #{'.'}#{$limit}#{$dimensionType}#{'h-'}#{$breakPointKey}#{$sizeKey} {
+        $_boxDimension: if(
+          $dimensionType== 'v' and $useDimension,
+          'vh',
+          $_dimension
+        );
+        #{$limit}height: #{$size}#{$_boxDimension} !important;
+      }
+
+      #{'.'}#{$limit}#{$dimensionType}#{'w-'}#{$breakPointKey}#{$sizeKey} {
+        $_boxDimension: if(
+          $dimensionType== 'v' and $useDimension,
+          'vw',
+          $_dimension
+        );
+        #{$limit}width: #{$size}#{$_boxDimension} !important;
+      }
+    }
+  }
+
+  @each $direction-key,
+    $direction
+      in (
+        t: (
+          key: 'Y',
+          negation: '-',
+        ),
+        l: (
+          key: 'X',
+          negation: '-',
+        ),
+        b: (
+          key: 'Y',
+          negation: '',
+        ),
+        r: (
+          key: 'X',
+          negation: '',
+        )
+      )
+  {
+    .float-#{$direction-key}-#{$breakPointKey}#{$sizeKey} {
+      $_floatDimension: if($useDimension, '%', '');
+      $_floatValue: if(
+        $useDimension,
+        #{'translate'}#{map-get($direction, 'key')
+          }(#{map-get($direction, 'negation')}#{$size}#{$_floatDimension}),
+        $size
+      );
+      transform: $_floatValue;
+    }
+  }
+
+  .sq-#{$breakPointKey}#{$sizeKey} {
+    height: $_value;
+    width: $_value;
+    min-height: $_value;
+    min-width: $_value;
+  }
+
+  .gap-#{$breakPointKey}#{$sizeKey} {
+    gap: $_value;
+  }
+}
+
+@each $size in $number-sizes {
+  @include layoutLooper($size, 'rem', true);
+
+  .rounded-#{$size} {
+    border-radius: $size * 0.2rem !important;
+  }
+}
+
+@each $size in $quarter-sizes {
+  @include layoutLooper($size, '%', true);
+
+  @each $direction-key, $direction in $directions {
+    $_value: if($size==0, $size, #{$size}#{'%'});
+
+    .p#{$direction-key}-#{$size} {
+      padding-#{$direction}: #{$_value};
+    }
+  }
+}
+
+@each $size in $non-sizes {
+  @include layoutLooper($size);
+}
+
+@each $breakpoint-key, $breakpoint in $grid-breakpoints {
+  @media (min-width: $breakpoint) {
+    @each $size-key, $size in $decimal-number-sizes {
+      @include layoutLooper(
+        $size,
+        'rem',
+        true,
+        #{$breakpoint-key}#{'-'},
+        $size-key
+      );
+    }
+
+    @each $size in $number-sizes {
+      @include layoutLooper($size, 'rem', true, #{$breakpoint-key}#{'-'});
+    }
+
+    @each $size in $quarter-sizes {
+      @include layoutLooper($size, '%', true, #{$breakpoint-key}#{'-'});
+    }
+
+    @each $size in $non-sizes {
+      @include layoutLooper($size, '', false, #{$breakpoint-key}#{'-'});
+    }
+  }
+}
+
+$heading-start: (
+  k: 1,
+  v: 200,
+);
+$heading-end: (
+  k: 6,
+  v: 100,
+);
+$heading-difference: (map-get($heading-start, 'v') - map-get($heading-end, 'v')) /
+  (map-get($heading-end, 'k') - map-get($heading-start, 'k'));
+
+@for $n from map-get($heading-start, 'k') through map-get($heading-end, 'k') {
+  $_value: map-get($heading-start, 'v') - (($n - 1) * $heading-difference);
+
+  h#{$n},
+  .h#{$n},
+  .font-#{(map-get($heading-end, 'k') - ($n+1))} {
+    font-size: #{$_value}#{'%'};
+  }
+}
+
+.font-sm {
+  font-size: 75%;
+}
+
+.font-md {
+  font-size: 90%;
+}
+
+.font-lg {
+  font-size: 250%;
+}

package/styles/variables.scss

@@ -0,0 +1,30 @@
+@import 'mixins';
+
+:root {
+  --font-size: var(--o-font-size, #{$font-size});
+  --card-shadow: #{$card-shadow};
+  --background-color: #{$background-color};
+  --heading-start: 200%;
+  --heading-end: 100%;
+
+  /* Color Variables */
+  @each $k, $v in $app-colors-mapped {
+    /* ---COLOR-#{$k}-START--- */
+    --#{$k}: #{map-get($v, 'bg')};
+    /* ---HSL-#{$k}--- */
+    --#{$k}-hs: #{hue(map-get($v, 'bg')), saturation(map-get($v, 'bg'))};
+    --#{$k}-l: #{lightness(map-get($v, 'bg'))};
+    --#{$k}-a: #{alpha(map-get($v, 'bg'))};
+    --#{$k}-c: #{map-get($v, 'c')};
+    --#{$k}-c-hs: #{hue(map-get($v, 'c')), saturation(map-get($v, 'c'))};
+    --#{$k}-c-l: #{lightness(map-get($v, 'c'))};
+    --#{$k}-c-a: #{alpha(map-get($v, 'c'))};
+    /* ---COLOR-#{$k}-END--- */
+  }
+}
+
+@media (max-width: 575.98px) {
+  :root {
+    --font-size: calc(var(--o-font-size) / 1.15);
+  }
+}