@esportsplus/ui 0.5.4 → 0.5.5

package/src/lib/scss/position.scss

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

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,22 +1,22 @@
-@function box-shadow($alpha) {
-    $base: hsl(214 80% 27% / 4%);
-    $shade: hsl(from $base calc(h + 8) 25 calc(l - 5));
-
-    @return 0 0 0 1px $base,
-        0 1px 1px -0.5px $shade,
-        0 3px 3px -1.5px $shade,
-        0 6px 6px -3px $shade,
-        0 12px 12px -6px $base,
-        0 24px 24px -12px $base;
-}
-
-
-$box-shadow: (
-    300: box-shadow(2),
-    400: box-shadow(4),
-    500: box-shadow(6),
-
-    glow: #{0px 0px 128px 32px var(--box-shadow-color, #fff),
-        0px 0px 32px 8px var(--box-shadow-color, #fff),
-        0px 0px 8px 0px var(--box-shadow-color, #fff)}
+@function box-shadow($alpha) {
+    $base: hsl(214 80% 27% / 4%);
+    $shade: hsl(from $base calc(h + 8) 25 calc(l - 5));
+
+    @return 0 0 0 1px $base,
+        0 1px 1px -0.5px $shade,
+        0 3px 3px -1.5px $shade,
+        0 6px 6px -3px $shade,
+        0 12px 12px -6px $base,
+        0 24px 24px -12px $base;
+}
+
+
+$box-shadow: (
+    300: box-shadow(2),
+    400: box-shadow(4),
+    500: box-shadow(6),
+
+    glow: #{0px 0px 128px 32px var(--box-shadow-color, #fff),
+        0px 0px 32px 8px var(--box-shadow-color, #fff),
+        0px 0px 8px 0px var(--box-shadow-color, #fff)}
 );

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,16 +1,16 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
-$font-size: (
-    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
-    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
-    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
-    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
-    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
-
-    // Primarily Used For Headers h1 - h4
-    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
-    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
-    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
-    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
-);
-
-
+// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
+$font-size: (
+    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
+    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
+    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
+    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
+    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
+
+    // Primarily Used For Headers h1 - h4
+    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
+    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
+    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
+    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
+);
+
+

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
+);

package/src/tokens/scss/spacer.scss

@@ -1,8 +1,8 @@
-@use '../../lib';
-@use 'size';
-
-$spacer: (
-    300: lib.map-get(size.$size, 900) * 1,
-    400: lib.map-get(size.$size, 900) * 2,
-    500: lib.map-get(size.$size, 900) * 3
-);
+@use '../../lib';
+@use 'size';
+
+$spacer: (
+    300: lib.map-get(size.$size, 900) * 1,
+    400: lib.map-get(size.$size, 900) * 2,
+    500: lib.map-get(size.$size, 900) * 3
+);