@esportsplus/ui 0.1.8 → 0.2.2

package/src/lib/scss/list.scss

@@ -1,76 +1,76 @@
-@use 'sass:list';
-@use 'sass:string';
-
-@forward 'sass:list';
-
-@function contains($needles, $haystack) {
-    $haystack: to-list($haystack);
-    $needles: to-list($needles);
-
-    @each $needle in $needles {
-        @if list.index($haystack, $needle) {
-            @return true;
-        }
-    }
-
-    @return false;
-}
-
-@function implode($glue, $list) {
-    $list: unique($list);
-    $output: null;
-
-    @if type-of($list) != list {
-        @error "#{$list} Is Not A Valid List";
-    }
-
-    @for $i from 1 through list.length($list) {
-        $m: nth($list, $i);
-
-        // If $k Is A List Flatten By Running Through Function Again
-        @if type-of($m) == list {
-            $output: string.unquote("#{$output}#{$glue}#{implode($glue, $m)}");
-        }
-        // Piece Together String
-        @else {
-            $output: string.unquote("#{$output}#{$glue}#{$m}");
-        }
-    }
-
-    @if $output != null {
-        $output: string.slice($output, string.length($glue) + 1, -1);
-    }
-
-    @return $output;
-}
-
-@function to-list($input) {
-    $output: $input;
-
-    @if type-of($input) != list {
-        $output: ($input,);
-    }
-
-    @return $output;
-}
-
-@function unique($list, $recursive: false) {
-    $result: ();
-
-    @if type-of($list) != list {
-        @error "#{$list} Is Not A Valid List";
-    }
-
-    @each $item in $list {
-        @if not list.index($result, $item) and $item != '' {
-            @if list.length($item) > 1 and $recursive {
-                $result: list.append($result, unique($item, $recursive));
-            }
-            @else {
-                $result: list.append($result, $item);
-            }
-        }
-    }
-
-    @return $result;
-}
+@use 'sass:list';
+@use 'sass:string';
+
+@forward 'sass:list';
+
+@function contains($needles, $haystack) {
+    $haystack: to-list($haystack);
+    $needles: to-list($needles);
+
+    @each $needle in $needles {
+        @if list.index($haystack, $needle) {
+            @return true;
+        }
+    }
+
+    @return false;
+}
+
+@function implode($glue, $list) {
+    $list: unique($list);
+    $output: null;
+
+    @if type-of($list) != list {
+        @error "#{$list} Is Not A Valid List";
+    }
+
+    @for $i from 1 through list.length($list) {
+        $m: nth($list, $i);
+
+        // If $k Is A List Flatten By Running Through Function Again
+        @if type-of($m) == list {
+            $output: string.unquote("#{$output}#{$glue}#{implode($glue, $m)}");
+        }
+        // Piece Together String
+        @else {
+            $output: string.unquote("#{$output}#{$glue}#{$m}");
+        }
+    }
+
+    @if $output != null {
+        $output: string.slice($output, string.length($glue) + 1, -1);
+    }
+
+    @return $output;
+}
+
+@function to-list($input) {
+    $output: $input;
+
+    @if type-of($input) != list {
+        $output: ($input,);
+    }
+
+    @return $output;
+}
+
+@function unique($list, $recursive: false) {
+    $result: ();
+
+    @if type-of($list) != list {
+        @error "#{$list} Is Not A Valid List";
+    }
+
+    @each $item in $list {
+        @if not list.index($result, $item) and $item != '' {
+            @if list.length($item) > 1 and $recursive {
+                $result: list.append($result, unique($item, $recursive));
+            }
+            @else {
+                $result: list.append($result, $item);
+            }
+        }
+    }
+
+    @return $result;
+}

package/src/lib/scss/map.scss

@@ -1 +1 @@
-@forward 'sass:map';
+@forward 'sass:map';

package/src/lib/scss/position.scss

@@ -1,77 +1,77 @@
-@use 'list';
-
-@mixin position($position, $value: null) {
-    position: $position;
-
-    @if list.contains($value, center vertical) {
-        bottom: 50%;
-    }
-    @if list.contains($value, center horizontal) {
-        right: 50%;
-    }
-
-
-    @if $value == center {
-        transform: translate(50%, 50%);
-    }
-    @else if $value == horizontal {
-        transform: translateX(50%);
-    }
-    @else if $value == vertical {
-        transform: translateY(50%);
-    }
-
-
-    @if $value == full {
-        $value: 0 0 0 0;
-    }
-    @else if $value == top {
-        $value: 0 0 null 0;
-    }
-    @else if $value == right {
-        $value: 0 0 0 null;
-    }
-    @else if $value == bottom {
-        $value: null 0 0 0;
-    }
-    @else if $value == left {
-        $value: 0 null 0 0;
-    }
-
-
-    @if $value and type-of($value) == list {
-        $length: list.length($value);
-
-        @if $length > 0 {
-            $v: nth($value, 1);
-
-            @if $v != null {
-                top: $v;
-            }
-        }
-
-        @if $length > 1 {
-            $v: nth($value, 2);
-
-            @if $v != null {
-                right: $v;
-            }
-        }
-
-        @if $length > 2 {
-            $v: nth($value, 3);
-
-            @if $v != null {
-                bottom: $v;
-            }
-        }
-
-        @if $length > 3 {
-            $v: nth($value, 4);
-
-            @if $v != null {
-                left: $v;
-            }
-        }
-    }
-}
+@use 'list';
+
+@mixin position($position, $value: null) {
+    position: $position;
+
+    @if list.contains($value, center vertical) {
+        bottom: 50%;
+    }
+    @if list.contains($value, center horizontal) {
+        right: 50%;
+    }
+
+
+    @if $value == center {
+        transform: translate(50%, 50%);
+    }
+    @else if $value == horizontal {
+        transform: translateX(50%);
+    }
+    @else if $value == vertical {
+        transform: translateY(50%);
+    }
+
+
+    @if $value == full {
+        $value: 0 0 0 0;
+    }
+    @else if $value == top {
+        $value: 0 0 null 0;
+    }
+    @else if $value == right {
+        $value: 0 0 0 null;
+    }
+    @else if $value == bottom {
+        $value: null 0 0 0;
+    }
+    @else if $value == left {
+        $value: 0 null 0 0;
+    }
+
+
+    @if $value and type-of($value) == list {
+        $length: list.length($value);
+
+        @if $length > 0 {
+            $v: nth($value, 1);
+
+            @if $v != null {
+                top: $v;
+            }
+        }
+
+        @if $length > 1 {
+            $v: nth($value, 2);
+
+            @if $v != null {
+                right: $v;
+            }
+        }
+
+        @if $length > 2 {
+            $v: nth($value, 3);
+
+            @if $v != null {
+                bottom: $v;
+            }
+        }
+
+        @if $length > 3 {
+            $v: nth($value, 4);
+
+            @if $v != null {
+                left: $v;
+            }
+        }
+    }
+}

package/src/lib/scss/string.scss

@@ -1,33 +1,33 @@
-@use 'list';
-@use 'sass:string';
-
-@forward 'sass:string';
-
-@function contains($needles, $haystack) {
-    $haystack: string.quote($haystack);
-    $needles: list.to-list($needles);
-
-    @each $needle in $needles {
-        $needle: string.quote($needle);
-
-        @if string.index($haystack, $needle) != null {
-            @return true;
-        }
-    }
-
-    @return false;
-}
-
-@function replace($find, $replace, $haystack) {
-    @if type-of($haystack) != string {
-        @error "#{$haystack} Is Not A Valid String";
-    }
-
-    $index: string.index($haystack, string.quote($find));
-
-    @if $index {
-        $haystack: string.slice($haystack, 1, $index - 1) + $replace + replace($find, $replace, string.slice($haystack, $index + string.length($find)));
-    }
-
-    @return $haystack;
-}
+@use 'list';
+@use 'sass:string';
+
+@forward 'sass:string';
+
+@function contains($needles, $haystack) {
+    $haystack: string.quote($haystack);
+    $needles: list.to-list($needles);
+
+    @each $needle in $needles {
+        $needle: string.quote($needle);
+
+        @if string.index($haystack, $needle) != null {
+            @return true;
+        }
+    }
+
+    @return false;
+}
+
+@function replace($find, $replace, $haystack) {
+    @if type-of($haystack) != string {
+        @error "#{$haystack} Is Not A Valid String";
+    }
+
+    $index: string.index($haystack, string.quote($find));
+
+    @if $index {
+        $haystack: string.slice($haystack, 1, $index - 1) + $replace + replace($find, $replace, string.slice($haystack, $index + string.length($find)));
+    }
+
+    @return $haystack;
+}

package/src/tokens/index.scss

@@ -1,11 +1,11 @@
-@forward 'scss/border-radius';
-@forward 'scss/border-width';
-@forward 'scss/box-shadow';
-@forward 'scss/color';
-@forward 'scss/font-size';
-@forward 'scss/font-weight';
-@forward 'scss/line-height';
-@forward 'scss/size';
-@forward 'scss/spacer';
-@forward 'scss/state';
-@forward 'scss/transition-duration';
+@forward 'scss/border-radius';
+@forward 'scss/border-width';
+@forward 'scss/box-shadow';
+@forward 'scss/color';
+@forward 'scss/font-size';
+@forward 'scss/font-weight';
+@forward 'scss/line-height';
+@forward 'scss/size';
+@forward 'scss/spacer';
+@forward 'scss/state';
+@forward 'scss/transition-duration';

package/src/tokens/scss/border-radius.scss

@@ -1,12 +1,12 @@
-$border-radius: (
-    0px: 0px,
-    circle: 100%,
-    curved: 240px,
-
-    100: 2px,
-    200: 4px,
-    300: 6px,
-    400: 8px,
-    500: 12px,
-    600: 16px
-);
+$border-radius: (
+    0px: 0px,
+    circle: 100%,
+    curved: 240px,
+
+    100: 2px,
+    200: 4px,
+    300: 6px,
+    400: 8px,
+    500: 12px,
+    600: 16px
+);

package/src/tokens/scss/border-width.scss

@@ -1,6 +1,6 @@
-$border-width: (
-    400: 1px,
-    500: 2px,
-    600: 3px,
-    700: 4px
-);
+$border-width: (
+    400: 1px,
+    500: 2px,
+    600: 3px,
+    700: 4px
+);

package/src/tokens/scss/box-shadow.scss

@@ -1,13 +1,13 @@
-$box-shadow: (
-    300: #{
-        0px 8px 16px -4px rgba(0, 3, 19, 0.016),
-        0px 4px 8px  -2px rgba(0, 3, 19, 0.008)
-    },
-    400: #{
-        0px 16px 24px -4px rgba(0, 3, 19, 0.048),
-        0px 8px 8px -4px rgba(0, 3, 19, 0.024)
-    },
-    500: #{
-        0px 16px 32px -8px rgba(0, 3, 19, 0.16)
-    }
-);
+$box-shadow: (
+    300: #{
+        0px 8px 16px -4px rgba(0, 3, 19, 0.016),
+        0px 4px 8px  -2px rgba(0, 3, 19, 0.008)
+    },
+    400: #{
+        0px 16px 24px -4px rgba(0, 3, 19, 0.048),
+        0px 8px 8px -4px rgba(0, 3, 19, 0.024)
+    },
+    500: #{
+        0px 16px 32px -8px rgba(0, 3, 19, 0.16)
+    }
+);

package/src/tokens/scss/color.scss

@@ -1,64 +1,64 @@
-@use '../../lib';
-
-$color: (
-    'black': (
-        300: #0f1325,
-        400: #04081a,
-        500: #000313
-    ),
-    'blue': (
-        300: #3453ff,
-        400: #2a4bff,
-        500: #2343f8
-    ),
-    'border': (
-        300: #c4c9df,
-        400: #b4b9d2,
-        500: #a5a9c3
-    ),
-    'green': (
-        300: #5fff81,
-        400: #2aff57,
-        500: #23f850
-    ),
-    'grey': (
-        300: #f2f9ff,
-        400: #e7f1fa,
-        500: #dde8f0
-    ),
-    'purple': (
-        300: #6634ff,
-        400: #5e2aff,
-        500: #5723f8
-    ),
-    'red': (
-        300: #ff3446,
-        400: #ff2a3d,
-        500: #f82336
-    ),
-    'text': (
-        300: #676c84,
-        400: #393d57,
-        500: #1f2542
-    ),
-    'white': (
-        300: #fff,
-        400: #fff,
-        500: #fff
-    ),
-    'yellow': (
-        300: #fff95f,
-        400: #fff92a,
-        500: #f8f123
-    )
-);
-
-@function color($keys, $opacity) {
-    $c: $color;
-
-    @each $key in $keys {
-        $c: lib.map-get($c, $key);
-    }
-
-    @return lib.color-change($c, $alpha: $opacity);
-}
+@use '../../lib';
+
+$color: (
+    'black': (
+        300: #0f1325,
+        400: #04081a,
+        500: #000313
+    ),
+    'blue': (
+        300: #3453ff,
+        400: #2a4bff,
+        500: #2343f8
+    ),
+    'border': (
+        300: #c4c9df,
+        400: #b4b9d2,
+        500: #a5a9c3
+    ),
+    'green': (
+        300: #5fff81,
+        400: #2aff57,
+        500: #23f850
+    ),
+    'grey': (
+        300: #f2f9ff,
+        400: #e7f1fa,
+        500: #dde8f0
+    ),
+    'purple': (
+        300: #6634ff,
+        400: #5e2aff,
+        500: #5723f8
+    ),
+    'red': (
+        300: #ff3446,
+        400: #ff2a3d,
+        500: #f82336
+    ),
+    'text': (
+        300: #676c84,
+        400: #393d57,
+        500: #1f2542
+    ),
+    'white': (
+        300: #fff,
+        400: #fff,
+        500: #fff
+    ),
+    'yellow': (
+        300: #fff95f,
+        400: #fff92a,
+        500: #f8f123
+    )
+);
+
+@function color($keys, $opacity) {
+    $c: $color;
+
+    @each $key in $keys {
+        $c: lib.map-get($c, $key);
+    }
+
+    @return lib.color-change($c, $alpha: $opacity);
+}

package/src/tokens/scss/font-size.scss

@@ -1,12 +1,12 @@
-$font-size: (
-    100: 8px,
-    200: 10px,
-    300: 12px,
-    400: 14px,
-
-    // Primarily Used For Headers h1 - h4
-    500: 16px,
-    600: 24px,
-    700: 32px,
-    800: 40px
-);
+$font-size: (
+    100: 8px,
+    200: 10px,
+    300: 12px,
+    400: 14px,
+
+    // Primarily Used For Headers h1 - h4
+    500: 16px,
+    600: 24px,
+    700: 32px,
+    800: 40px
+);

package/src/tokens/scss/font-weight.scss

@@ -1,6 +1,6 @@
-$font-weight: (
-    300: 400,
-    400: 500,
-    500: 600,
-    600: 700
-);
+$font-weight: (
+    300: 400,
+    400: 500,
+    500: 600,
+    600: 700
+);

package/src/tokens/scss/line-height.scss

@@ -1,6 +1,6 @@
-$line-height: (
-    100: 1,
-    200: 1.2,
-    300: 1.4,
-    400: 1.6
-);
+$line-height: (
+    100: 1,
+    200: 1.2,
+    300: 1.4,
+    400: 1.6
+);

package/src/tokens/scss/size.scss

@@ -1,13 +1,13 @@
-$size: (
-    0px: 0px,
-
-    100: 4px,
-    200: 8px,
-    300: 12px,
-    400: 16px,
-    500: 20px,
-    600: 24px,
-    700: 32px,
-    800: 40px,
-    900: 48px
-);
+$size: (
+    0px: 0px,
+
+    100: 4px,
+    200: 8px,
+    300: 12px,
+    400: 16px,
+    500: 20px,
+    600: 24px,
+    700: 32px,
+    800: 40px,
+    900: 48px
+);