@esportsplus/ui 0.0.1

package/storage/fonts/Montserrat/montserrat.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('fonts/Montserrat-Regular.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-Italic.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-Medium.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-MediumItalic.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-SemiBold.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-Bold.woff2') format('woff2'),
+         url('fonts/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('fonts/Montserrat-BoldItalic.woff2') format('woff2'),
+         url('fonts/Montserrat-BoldItalic.woff') format('woff');
+}

package/tokens/index.scss

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

package/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/tokens/scss/border-width.scss

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

package/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/tokens/scss/breakpoints.scss

@@ -0,0 +1,13 @@
+@use 'ui/lib';
+
+$breakpoints: 1400px 1000px 600px;
+
+// @mixin breakpoints() {
+//     @each $breakpoint in $breakpoints {
+//         @include lib.breakpoint(max-width, $breakpoint) {
+//             &\:#{$breakpoint} {
+//                 @content;
+//             }
+//         }
+//     }
+// }

package/tokens/scss/color.scss

@@ -0,0 +1,71 @@
+@use 'ui/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
+    )
+);
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Retrieve Color as RGBA Value
+ *
+ */
+
+@function color($keys, $opacity) {
+    $c: $color;
+
+    @each $key in $keys {
+        $c: lib.map-get($c, $key);
+    }
+
+    @return lib.color-change($c, $alpha: $opacity);
+}

package/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/tokens/scss/font-weight.scss

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

package/tokens/scss/line-height.scss

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

package/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/tokens/scss/state.scss

@@ -0,0 +1,93 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  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 'ui/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;
+    }
+}
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Generate State Based CSS Utility For List Of Colors
+ *
+ */
+
+@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/tokens/scss/transition-duration.scss

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

package/webpack.sass.config.js

@@ -0,0 +1,59 @@
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const glob = require('glob');
+const path = require('path');
+
+
+function scss(bundle, paths, scss = {}) {
+    return [
+        scss.prepend || [],
+        glob.sync(`{${paths.current}/components,${paths.input}/components,${paths.input}/pages,${paths.current}/css-utilities}/**/${bundle}`, { nosort: true }),
+        scss.append  || []
+    ].flat();
+}
+
+
+module.exports = ({ filename, input, output, production, theme }) => {
+    let paths = {
+            current: path.resolve(process.cwd()).replace('\\', '/') + `/node_modules/@esportsplus/ui`,
+            input: path.resolve(process.cwd()).replace('\\', '/') + `/${input || ''}`,
+            output: path.resolve(process.cwd()).replace('\\', '/') + `/${output || ''}`
+        };
+
+    return {
+        entry: {
+            [filename || 'app']: scss('!(variables).scss', paths, { prepend: ['modern-normalize/modern-normalize.css'] }),
+            [`themes/${theme || 'default'}`]: scss('variables.scss', paths, { append: [`${paths.current}/storage/fonts/Montserrat/montserrat.css`] })
+        },
+        mode: (production == false ? 'development' : 'production'),
+        module: {
+            rules: [
+                {
+                    test: /\.(c|sc|sa)ss$/,
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                // Prevents Following Urls To Fonts/Images
+                                url: false,
+                                importLoaders: 1
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [autoprefixer(), cssnano()]
+                                }
+                            }
+                        },
+                        { loader: 'sass-loader' },
+                    ],
+                },
+            ],
+        },
+        output: {
+            path: paths.output
+        }
+    };
+};