@esportsplus/ui 0.0.121 → 0.0.122

package/src/lib/scss/breakpoint.scss

@@ -0,0 +1,41 @@
+@mixin breakpoint($function, $param: null) {
+    @if $function == min-width or $function == min-height {
+        @media only screen and ($function: $param + 1px) {
+            @content;
+        }
+    }
+    @else if $function == max-width or $function == max-height {
+        @media only screen and ($function: $param) {
+            @content;
+        }
+    }
+    @else if $function == between-width {
+        @media only screen and (min-width: nth($param, 1) + 1px) and (max-width: nth($param, 2)) {
+            @content;
+        }
+    }
+    @else if $function == orientation {
+        @if $param == landscape {
+            @media only screen and (min-aspect-ratio: 13/9) {
+                @content;
+            }
+        } 
+        @else if $param == portrait {
+            @media only screen and (max-aspect-ratio: 13/9) {
+                @content;
+            }
+        }
+    }
+    @else if $function == retina {
+        @media
+            only screen and (-webkit-min-device-pixel-ratio: 1.25),
+            only screen and ( min--moz-device-pixel-ratio: 1.25),
+            only screen and ( -o-min-device-pixel-ratio: 1.25/1),
+            only screen and ( min-device-pixel-ratio: 1.25),
+            only screen and ( min-resolution: 200dpi),
+            only screen and ( min-resolution: 1.25dppx)
+        {
+            @content;
+        }
+    }
+}

package/src/lib/scss/color.scss

@@ -0,0 +1 @@
+@forward 'sass:color';

package/src/lib/scss/css-variables.scss

@@ -0,0 +1,13 @@
+@mixin css-variables($prefix, $tokens) {
+    @each $key, $value in $tokens {
+        @if type-of($value) == 'map' {
+            @each $subkey, $subvalue in $value {
+                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
+            }
+        }
+        @else {
+            --#{$prefix}-#{$key}: #{$value};
+        }
+    }
+}
+ 

package/src/lib/scss/list.scss

@@ -0,0 +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;
+}

package/src/lib/scss/map.scss

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

package/src/lib/scss/position.scss

@@ -0,0 +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;
+            }
+        }
+    }
+}

package/src/lib/scss/string.scss

@@ -0,0 +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;
+}

package/src/tokens/index.scss

@@ -0,0 +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';

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

@@ -0,0 +1,12 @@
+$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

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

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

@@ -0,0 +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)
+    }
+);

package/src/tokens/scss/color.scss

@@ -0,0 +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);
+}

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

@@ -0,0 +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
+);

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

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

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

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

package/src/tokens/scss/size.scss

@@ -0,0 +1,13 @@
+$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

@@ -0,0 +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
+);

package/src/tokens/scss/state.scss

@@ -0,0 +1,86 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
+ *  'State' ( :hover, :active, etc. )
+ *
+ *  Desired Result:
+ *  - Default Colors Assigned To Element;
+ *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
+ *    The Default Color;
+ *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
+ *    Default Color;
+ *
+ *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
+ *  Button Without Dealing With Transforms To Shift Elements.
+ *
+ *  Mixin Also Handles Removing Duplicate List Keys
+ *
+ */
+
+@use '../../lib';
+
+$state: (
+    active: '&.--active',
+    inactive: '&:not(.--active)',
+
+    disabled: '&.--disabled',
+    enabled: '&:not(.--disabled)',
+
+    default: '&:not(.--active):not(:hover)',
+    hover: '&:not(.--active):hover',
+    pressed: '&:not(.--active):active'
+);
+
+
+@function state($key, $replace: null) {
+    $selector: lib.map-get($state, $key);
+
+    // To Avoid Overcomplicating The Responsibility Of This Function Limit
+    // Replace Parameter To String Values Only
+    @if $replace {
+        @if type-of($replace) != 'string' or type-of($selector) != 'string' {
+            @error "'lib.string-replace' Cannot Be Used On A List!";
+        }
+
+        $selector: lib.string-replace('&', $replace, $selector);
+    }
+
+    @return $selector;
+}
+
+
+@mixin state($states) {
+    $selector: ();
+
+    @each $s in lib.list-to-list($states) {
+        $section: state($s);
+
+        @if $section {
+            $selector: lib.list-append($selector, $section);
+        }
+    }
+
+    #{lib.list-implode(',', lib.list-unique($selector))} {
+        @content;
+    }
+}
+
+@mixin state-utility($class, $property, $values) {
+    $keys: $values;
+
+    @if type-of($keys) == 'map' {
+        $keys: lib.map-keys($keys);
+    }
+
+    #{$class} {
+        @each $key in $keys {
+            &-#{$key} {
+                --#{$property}-active: var(--color-#{$key}-300);
+                --#{$property}-default: var(--color-#{$key}-400);
+                --#{$property}-hover: var(--color-#{$key}-300);
+                --#{$property}-pressed: var(--color-#{$key}-500);
+            }
+        }
+    }
+}

package/src/tokens/scss/transition-duration.scss

@@ -0,0 +1,5 @@
+$transition-duration: (
+    300: 0.08s,
+    400: 0.16s,
+    500: 0.24s
+);

package/storage/fonts/montserrat/index.css

@@ -0,0 +1,79 @@
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'),
+         url('Montserrat-Regular.woff2') format('woff2'),
+         url('Montserrat-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Montserrat Italic'), local('Montserrat-Italic'),
+         url('Montserrat-Italic.woff2') format('woff2'),
+         url('Montserrat-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Montserrat Medium'), local('Montserrat-Medium'),
+         url('Montserrat-Medium.woff2') format('woff2'),
+         url('Montserrat-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
+         url('Montserrat-MediumItalic.woff2') format('woff2'),
+         url('Montserrat-MediumItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+         url('Montserrat-SemiBold.woff2') format('woff2'),
+         url('Montserrat-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
+         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
+         url('Montserrat-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Montserrat Bold'), local('Montserrat Bold'),
+         url('Montserrat-Bold.woff2') format('woff2'),
+         url('Montserrat-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
+         url('Montserrat-BoldItalic.woff2') format('woff2'),
+         url('Montserrat-BoldItalic.woff') format('woff');
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "declaration": true,
+        "declarationDir": "build",
+        "outDir": "build"
+    },
+    "exclude": ["node_modules"],
+    "extends": "./node_modules/@esportsplus/typescript/tsconfig.base.json",
+    "include": ["src"]
+}

package/webpack.config.ts

@@ -0,0 +1,23 @@
+import { config, entry } from '@esportsplus/webpack';
+
+
+export default ({ production }: { production?: string }) => {
+    return config.web({
+        contenthash: false,
+        entry: {
+            components: {
+                styles: entry.css('src/components/**/index.scss'),
+                variables: entry.css('src/components/**/variables.scss')
+            },
+            fonts: {
+                montserrat: entry.css('storage/fonts/montserrat/index.css')
+            },
+            normalizer: entry.css('modern-normalize/modern-normalize.css'),
+            utilities: {
+                styles: entry.css('src/css-utilities/**/index.scss'),
+                variables: entry.css('src/css-utilities/**/variables.scss')
+            }
+        },
+        mode: production !== 'false' ? 'production': 'development',
+    });
+};