@esportsplus/ui 0.0.1

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/components/accordion/scss/accordion.scss

@@ -0,0 +1,16 @@
+@use 'ui/tokens';
+
+.accordion {
+    max-height: var(--max-height);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        max-height var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+
+
+    @include tokens.state(active) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

package/components/accordion/scss/variables.scss

@@ -0,0 +1,4 @@
+.accordion {
+    --max-height: 0;
+    --transition-duration: var(--transition-duration-400);
+}

package/components/alert/scss/alert.scss

@@ -0,0 +1,104 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Alert Notifications
+ *
+ *  Anchors Module Provides Positioning
+ *
+ */
+
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.alert {
+    max-width: calc(100% - (var(--margin-horizontal) * 2));
+    width: var(--width);
+
+
+    &--deactivating {
+        opacity: 0;
+        transform: translateY(-50%);
+    }
+
+    &--activating {
+        @include tokens.state(inactive) {
+            transform: translateY(50%);
+        }
+    }
+
+
+    &-message,
+    &-processing {
+        opacity: 0;
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+
+        @include tokens.state(inactive) {
+            pointer-events: none;
+            position: absolute;
+            transform: translateX(calc(25% * #{var(--multiplier)}));
+            left: 0;
+            top: 0;
+        }
+
+        @include tokens.state(active) {
+            opacity: 1;
+        }
+    }
+
+    &-close {
+        @include lib.position(absolute, 0 100% 0 null);
+        animation: alert-close var(--transition-duration) ease-in-out;
+        transition: transform var(--transition-duration) ease-in-out;
+        z-index: 0;
+    }
+
+    &-message {
+        --multiplier: -1;
+    }
+
+    &-processing {
+        --multiplier: 1;
+    }
+
+    &-timer {
+        height: var(--height);
+        transition: opacity var(--transition-duration) ease-in-out;
+        width: var(--width);
+
+        &-bg,
+        &-meter {
+            fill: none;
+            stroke-width: var(--border-width);
+            stroke: var(--border-color);
+        }
+
+        &-meter {
+            stroke-linecap: round;
+            stroke-dasharray: 360;
+            stroke-dashoffset: 0;
+            animation: alert-timer var(--animation-duration) ease-in-out;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+    }
+}
+
+@keyframes alert-close {
+    from {
+        transform: translateX(150%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes alert-timer {
+    from {
+        stroke-dashoffset: 360;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}

package/components/alert/scss/variables.scss

@@ -0,0 +1,25 @@
+.alert {
+    --width: 480px;
+
+    &-close,
+    &-message,
+    &-processing {
+        --transition-duration: var(--transition-duration-400);
+    }
+
+    &-timer {
+        --animation-duration: 5s;
+        --background: var(--color-black-400);
+        --border-width: var(--border-width-700);
+        --height: var(--size-600);
+        --width: var(--size-600);
+
+        &-bg {
+            --border-color: var(--color-grey-500);
+        }
+
+        &-meter {
+            --border-color: var(--color-black-300);
+        }
+    }
+}

package/components/anchor/scss/anchor.scss

@@ -0,0 +1,41 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.anchor {
+    max-height: calc(100% - (var(--margin-vertical) * 2));
+    max-width: calc(100% - (var(--margin-horizontal) * 2));
+    pointer-events: auto;
+    position: absolute;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+
+        &, * {
+            pointer-events: none;
+        }
+    }
+
+
+    &--ne,
+    &--nw {
+        top: var(--margin-vertical);
+    }
+
+    &--se,
+    &--sw {
+        bottom: var(--margin-vertical);
+    }
+
+    &--ne,
+    &--se {
+        right: var(--margin-horizontal);
+    }
+
+    &--nw,
+    &--sw {
+        left: var(--margin-horizontal);
+    }
+}

package/components/anchor/scss/anchors.scss

@@ -0,0 +1,9 @@
+@use 'ui/lib';
+
+.anchors {
+    @include lib.position(fixed, full);
+    height: 100vh;
+    pointer-events: none;
+    width: 100vw;
+    z-index: 9;
+}

package/components/anchor/scss/variables.scss

@@ -0,0 +1,5 @@
+.anchor {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+}

package/components/banner/scss/banner.scss

@@ -0,0 +1,13 @@
+@use 'ui/lib';
+
+.banner {
+    @include lib.position(absolute, full);
+    background-position: center;
+    background-size: cover;
+    z-index: -1;
+
+
+    &--fixed {
+        position: fixed;
+    }
+}

package/components/border/scss/border.scss

@@ -0,0 +1,10 @@
+.border {
+    border-top: var(--border-width) var(--border-style) var(--border-color);
+    position: relative;
+    width: 100%;
+
+
+    & + & {
+        display: none;
+    }
+}

package/components/border/scss/variables.scss

@@ -0,0 +1,6 @@
+.border {
+    --border-color: var(--border-color-default);
+    --border-color-default: var(--color-border-400);
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+}

package/components/bubble/scss/bubble.scss

@@ -0,0 +1,30 @@
+.bubble {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: var(--height);
+    width: var(--width);
+
+
+    &--bottom,
+    &--top {
+        &-left,
+        &-right {
+            position: absolute;
+        }
+
+        @each $direction in 'left' 'right' {
+            &-#{$direction} {
+                #{$direction}: var(--position-horizontal);
+            }
+        }
+    }
+
+    @each $direction in 'bottom' 'top' {
+        &--#{$direction} {
+            &-left,
+            &-right {
+                #{$direction}: var(--position-vertical);
+            }
+        }
+    }
+}

package/components/bubble/scss/variables.scss

@@ -0,0 +1,19 @@
+.bubble {
+    --background: var(--background-default);
+    --background-default: var(--color-border-400);
+    --border-radius: var(--border-radius-circle);
+    --height: var(--size);
+    --margin-horizontal: var(--size-100);
+    --width: var(--size);
+    --size: 6px;
+
+
+    &--bottom,
+    &--top {
+        &-left,
+        &-right {
+            --position-horizontal: calc(var(--size) / -2);
+            --position-vertical: calc(var(--size) / -2);
+        }
+    }
+}

package/components/button/scss/button.scss

@@ -0,0 +1,93 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.button {
+    align-content: center;
+    align-items: center;
+    background: var(--background);
+    border-radius: var(--border-radius);
+    color: var(--color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    justify-content: center;
+    line-height: var(--line-height);
+    min-width: var(--min-width);
+    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    position: relative;
+    transition: all var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+
+    // Pseudo Element Box Shadow
+    &::after {
+        @include lib.position(absolute, full);
+        border-radius: inherit;
+        box-shadow: var(--box-shadow);
+        content: '';
+        pointer-events: none;
+        transition:
+            box-shadow var(--transition-duration) ease-in-out,
+            opacity var(--transition-duration) ease-in-out;
+        z-index: 0;
+    }
+
+
+    &--flat {
+        &::after {
+            display: none;
+        }
+    }
+
+    &--processing {
+        color: transparent;
+        pointer-events: none;
+
+        &::before {
+            @include lib.position(absolute, center);
+            animation: button--processing var(--animation-duration) infinite linear;
+            border: var(--border-width) solid var(--border-color);
+            border-radius: 100%;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            content: '';
+            height: var(--size);
+            width: var(--size);
+        }
+
+        * {
+            opacity: 0;
+        }
+
+        @keyframes button--processing {
+            0% {
+                transform: translate(50%, 50%) rotate(0deg);
+            }
+            100% {
+                transform: translate(50%, 50%) rotate(359deg);
+            }
+        }
+    }
+
+    &--top {
+        &-left,
+        &-right {
+            position: absolute;
+            top: calc((#{var(--padding-vertical)} + #{var(--line-height) / 2}) * -1);
+        }
+
+        @each $direction in 'left' 'right' {
+            &-#{$direction} {
+                #{$direction}: calc((#{var(--padding-horizontal)} + #{var(--line-height) / 2}) * -1);
+            }
+        }
+    }
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

package/components/button/scss/variables.scss

@@ -0,0 +1,70 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.button {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --border-width: 0px;
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: var(--box-shadow-300);
+    --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-400);
+    --box-shadow-pressed: none;
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-400);
+    --line-height: var(--line-height-400);
+    --min-width: auto;
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --box-shadow: var(--box-shadow-active);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --box-shadow: var(--box-shadow-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --box-shadow: var(--box-shadow-pressed);
+        --color: var(--color-pressed);
+    }
+
+
+    &--processing {
+        --animation-duration: 0.64s;
+        --border-color: var(--color);
+        --border-width: var(--border-width-400);
+        --size: var(--size-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --border-width: var(--border-width-#{$key});
+            }
+        }
+    }
+}

package/components/card/scss/card.scss

@@ -0,0 +1,36 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.card {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    padding: var(--padding-vertical) var(--padding-horizontal);
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        box-shadow var(--transition-duration) ease-in-out,
+        max-height var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+
+    // Pseudo Element Box Shadow
+    &::after {
+        @include lib.position(absolute, full);
+        border-radius: inherit;
+        box-shadow: var(--box-shadow);
+        content: '';
+        pointer-events: none;
+        transition:
+            box-shadow var(--transition-duration) ease-in-out,
+            opacity var(--transition-duration) ease-in-out;
+        z-index: 0;
+    }
+
+
+    &--flat {
+        &::after {
+            display: none;
+        }
+    }
+}

package/components/card/scss/variables.scss

@@ -0,0 +1,42 @@
+@use 'ui/tokens';
+
+.card {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: var(--box-shadow-300);
+    --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-300);
+    --box-shadow-pressed: none;
+    --padding-horizontal: 0px;
+    --padding-vertical: 0px;
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --box-shadow: var(--box-shadow-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --box-shadow: var(--box-shadow-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --box-shadow: var(--box-shadow-pressed);
+    }
+}

package/components/container/scss/container.scss

@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 auto;
+    max-width: var(--max-width);
+    padding: var(--padding-vertical) var(--padding-horizontal);
+    position: relative;
+    width: 100%;
+}

package/components/container/scss/variables.scss

@@ -0,0 +1,5 @@
+.container {
+    --max-width: 1400px;
+    --padding-horizontal: var(--size-600);
+    --padding-vertical: 0px;
+}

package/components/ellipsis/scss/ellipsis.scss

@@ -0,0 +1,72 @@
+.ellipsis {
+    &-dot {
+        &:nth-child(1) {
+            animation: ellipsis-dot-one var(--animation-duration) linear infinite;
+        }
+
+        &:nth-child(2) {
+            animation: ellipsis-dot-two var(--animation-duration) linear infinite;
+        }
+
+        &:nth-child(3) {
+            animation: ellipsis-dot-three var(--animation-duration) linear infinite;
+        }
+    }
+}
+
+@keyframes ellipsis-dot-one {
+    0% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes ellipsis-dot-two {
+    0% {
+        opacity: 0;
+    }
+    21% {
+        opacity: 0;
+    }
+    22% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes ellipsis-dot-three {
+    0% {
+        opacity: 0;
+    }
+    43% {
+        opacity: 0;
+    }
+    44% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    66% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}

package/components/ellipsis/scss/variables.scss

@@ -0,0 +1,3 @@
+.ellipsis {
+    --animation-duration: 2s;
+}