@esportsplus/ui 0.8.4 → 0.9.0

package/src/components/button/scss/index.scss

@@ -1,114 +1,115 @@
-@use '/lib';
-@use '/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);
-    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: ButtonProcessing var(--animation-duration) infinite linear;
-            border: var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);
-            border-left-color: var(--border-color);
-            border-radius: 100%;
-            border-right-color: transparent;
-            border-top-color: transparent;
-            content: '';
-            height: var(--size);
-            width: var(--size);
-        }
-
-        * {
-            opacity: 0;
-        }
-
-        @keyframes ButtonProcessing {
-            0% {
-                transform: translate(50%, 50%) rotate(0deg);
-            }
-            100% {
-                transform: translate(50%, 50%) rotate(359deg);
-            }
-        }
-    }
-
-    &--skeleton {
-        animation: var(--animation-duration) ease-in-out infinite ButtonSkeleton;
-        background-image: linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));
-        background-size: 400% 100%;
-        color: transparent;
-        pointer-events: none;
-
-        * {
-            opacity: 0;
-        }
-
-        @keyframes ButtonSkeleton {
-            0% {
-                background-position: 200% 0;
-            }
-            100% {
-                background-position: -200% 0;
-            }
-        }
-    }
-
-    &--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;
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+@use './variables.scss';
+
+.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);
+    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: buttonProcessing var(--animation-duration) infinite linear;
+            border: var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);
+            border-left-color: var(--processing-color);
+            border-radius: 100%;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            content: '';
+            height: var(--size);
+            width: var(--size);
+        }
+
+        * {
+            opacity: 0;
+        }
+
+        @keyframes buttonProcessing {
+            0% {
+                transform: translate(50%, 50%) rotate(0deg);
+            }
+            100% {
+                transform: translate(50%, 50%) rotate(359deg);
+            }
+        }
+    }
+
+    &--skeleton {
+        animation: var(--animation-duration) ease-in-out infinite buttonSkeleton;
+        background-image: linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));
+        background-size: 400% 100%;
+        color: transparent;
+        pointer-events: none;
+
+        * {
+            opacity: 0;
+        }
+
+        @keyframes buttonSkeleton {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+    }
+
+    &--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/src/components/button/scss/variables.scss

@@ -1,66 +1,66 @@
-@use '/lib';
-@use '/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);
-    --padding-horizontal: var(--size-400);
-    --padding-vertical: var(--size-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);
-    }
-
-    &--skeleton {
-        --animation-duration: 6.4s;
-    }
-}
+@use '/lib';
+@use '/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);
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-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-width: var(--border-width-400);
+        --processing-color: var(--color);
+        --size: var(--size-400);
+    }
+
+    &--skeleton {
+        --animation-duration: 6.4s;
+    }
+}

package/src/components/card/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/card/scss/index.scss

@@ -1,35 +1,36 @@
-@use '/lib';
-
-.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;
-        }
-    }
-}
+@use '/lib';
+@use './variables.scss';
+
+.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/src/components/card/scss/variables.scss

@@ -1,41 +1,41 @@
-@use '/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;
-    --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);
-    }
-}
+@use '/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;
+    --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/src/components/clipboard/index.ts

@@ -1,5 +1,4 @@
-import write from './write';
-import './scss/index.scss';
-
-
+import write from './write';
+
+
 export default { write };

package/src/components/clipboard/write.ts

@@ -1,9 +1,9 @@
-export default async (value: string) => {
-    try {
-        await navigator.clipboard.writeText(value);
-        return true;
-    }
-    catch {
-        return false;
-    }
+export default async (value: string) => {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
 };

package/src/components/container/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/components/container/scss/index.scss

@@ -1,8 +1,10 @@
-.container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: var(--margin-vertical) auto;
-    position: relative;
-    width: min(var(--max-width), calc(100% - var(--margin-horizontal) * 2));
-}
+@use './variables.scss';
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: var(--margin-vertical) auto;
+    position: relative;
+    width: min(var(--max-width), calc(100% - var(--margin-horizontal) * 2));
+}

package/src/components/container/scss/variables.scss

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