@esportsplus/ui 0.0.1

package/css-utilities/index.scss

@@ -0,0 +1,14 @@
+@use 'background/scss/variables' as background;
+@use 'border/scss/variables' as border;
+@use 'color/scss/variables' as color;
+@use 'ui/lib';
+@use 'ui/tokens';
+
+
+@mixin css-variables($colors) {
+    @include background.css-variables($colors);
+    @include border.css-variables($colors);
+    @include color.css-variables($colors);
+}
+
+@include css-variables(lib.list-join(primary secondary, lib.map-keys(tokens.$color)));

package/css-utilities/inline/scss/inline.scss

@@ -0,0 +1,7 @@
+.--inline {
+    display: inline;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+}

package/css-utilities/line-height/scss/variables.scss

@@ -0,0 +1,10 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.--line-height {
+    @each $key in lib.map-keys(tokens.$line-height) {
+        &-#{$key} {
+            --line-height: var(--line-height-#{$key});
+        }
+    }
+}

package/css-utilities/not-allowed/scss/not-allowed.scss

@@ -0,0 +1,14 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Wrapper To Keep 'not-allowed' Cursor On Disabled Elements
+ *
+ */
+
+.--not-allowed {
+    cursor: not-allowed;
+
+    * {
+        pointer-events: none;
+    }
+}

package/css-utilities/overflow/scss/overflow.scss

@@ -0,0 +1,5 @@
+.--overflow {
+    &-hidden {
+        overflow: hidden;
+    }
+}

package/css-utilities/pointer/scss/pointer.scss

@@ -0,0 +1,5 @@
+.--pointer {
+    &-none {
+        pointer-events: none;
+    }
+}

package/css-utilities/size/scss/variables.scss

@@ -0,0 +1,12 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.--size {
+    --size: var(--size-400);
+
+    @each $key in lib.map-keys(tokens.$size) {
+        &-#{$key} {
+            --size: var(--size-#{$key});
+        }
+    }
+}

package/css-utilities/slide/scss/slide.scss

@@ -0,0 +1,20 @@
+.--slide {
+    &-in {
+        animation-duration: var(--transition-duration);
+        animation-name: --slide-in;
+        animation-timing-function: ease-in-out;
+        transform-origin: top center;
+
+        @keyframes --slide-in {
+            from {
+                opacity: 0;
+                transform: translateY(var(--translateY));
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+}

package/css-utilities/slide/scss/variables.scss

@@ -0,0 +1,6 @@
+.--slide {
+    &-in {
+        --transition-duration: var(--transition-duration-400);
+        --translateY: var(--size-400);
+    }
+}

package/css-utilities/text/scss/text.scss

@@ -0,0 +1,93 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.--text {
+    &-bold {
+        font-weight: var(--font-weight-500);
+
+        @each $key in lib.map-keys(tokens.$font-weight) {
+            @if $key > 500 {
+                &-#{$key} {
+                    font-weight: var(--font-weight-#{$key});
+                }
+            }
+        }
+    }
+
+    &-center {
+        text-align: center;
+    }
+
+    &-crop {
+        &::after,
+        &::before,
+        &-bottom::after,
+        &-top::before {
+            content: '';
+            display: block;
+            height: 0;
+            width: 100%;
+        }
+
+        &::after,
+        &-bottom::after {
+            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
+        }
+
+        &::before,
+        &-top::before {
+            margin-top: calc((1 - var(--line-height)) * 0.618em);
+        }
+    }
+
+    &-italic {
+        font-style: italic;
+    }
+
+    &-linethrough {
+        text-decoration: line-through;
+    }
+
+    &-multiplier {
+        font-size: calc(var(--font-size) * var(--text-multiplier));
+    }
+
+    &-outline {
+        color: var(--color);
+        word-break: break-word;
+        word-wrap: break-word;
+
+        @supports (-webkit-text-stroke-width: 1px) {
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke-color: var(--color);
+            -webkit-text-stroke-width: var(--stroke-width);
+        }
+    }
+
+    &-strike-through {
+        text-decoration: line-through;
+        text-decoration-thickness: var(--line-width);
+    }
+
+    &-truncate {
+        line-height: var(--size);
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-underline {
+        text-decoration: underline;
+
+        &-dotted {
+            text-decoration: underline;
+            text-decoration-style: dotted;
+        }
+    }
+
+    &-uppercase {
+        text-transform: uppercase;
+    }
+}

package/css-utilities/text/scss/variables.scss

@@ -0,0 +1,31 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.--text {
+    @each $key in lib.map-keys(tokens.$font-size) {
+        &-#{$key} {
+            --font-size: var(--font-size-#{$key});
+        }
+    }
+
+    &-outline {
+        --color: inherit;
+        --stroke-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --stroke-width: var(--border-width-#{$key});
+            }
+        }
+    }
+
+    &-strike-through {
+        --line-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --line-width: var(--border-width-#{$key});
+            }
+        }
+    }
+}

package/css-utilities/width/scss/variables.scss

@@ -0,0 +1,12 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.--width {
+    &-full {
+        --width: 100%;
+    }
+    
+    &-half {
+        --width: 50%;
+    }
+}

package/css-utilities/width/scss/width.scss

@@ -0,0 +1,3 @@
+.--width {
+    width: var(--width);
+}

package/index.scss

@@ -0,0 +1 @@
+@forward 'lib';

package/lib/index.scss

@@ -0,0 +1,7 @@
+@forward 'scss/breakpoint';
+@forward 'scss/color' as color-*;
+@forward 'scss/css-variables';
+@forward 'scss/list' as list-*;
+@forward 'scss/map' as map-*;
+@forward 'scss/position';
+@forward 'scss/string' as string-*;

package/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/lib/scss/color.scss

@@ -0,0 +1,8 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Wrap Native FN
+ *
+ */
+
+@forward 'sass:color';

package/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/lib/scss/list.scss

@@ -0,0 +1,112 @@
+@use 'sass:list';
+@use 'sass:string';
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Wrap Native FN
+ *
+ */
+
+@forward 'sass:list';
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Simplify Searching For Value(s) Within 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;
+}
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Join List Elements With A String
+ *
+ */
+
+@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;
+}
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Convert Input To List
+ *
+ */
+
+@function to-list($input) {
+    $output: $input;
+
+    @if type-of($input) != list {
+        $output: ($input,);
+    }
+
+    @return $output;
+}
+
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Remove Duplicate Values From List
+ *
+ */
+
+@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/lib/scss/map.scss

@@ -0,0 +1,8 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Wrap Native FN
+ *
+ */
+
+@forward 'sass:map';

package/lib/scss/position.scss

@@ -0,0 +1,84 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Simplify Positioning Elements
+ *
+ */
+
+@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/lib/scss/string.scss

@@ -0,0 +1,54 @@
+@use 'list';
+@use 'sass:string';
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Wrap Native FN
+ *
+ */
+
+@forward 'sass:string';
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Simplify Searching For Value(s) Within 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;
+}
+
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Find And Replace A Value In String
+ *
+ */
+
+@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/package.json

@@ -0,0 +1,22 @@
+{
+    "author": "ICJR",
+    "devDependencies": {
+        "autoprefixer": "^10.4.8",
+        "css-loader": "^6.7.1",
+        "cssnano": "^5.1.13",
+        "glob": "^8.0.3",
+        "modern-normalize": "^1.1.0",
+        "path-browserify": "^1.0.1",
+        "postcss-loader": "^7.0.1",
+        "run-for-every-file": "^1.1.0",
+        "sass": "^1.54.9",
+        "sass-loader": "^13.0.2",
+        "style-loader": "^3.3.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0"
+    },
+    "description": "UI",
+    "name": "@esportsplus/ui",
+    "private": false,
+    "version": "0.0.1"
+}