@esportsplus/ui 0.0.1 → 0.0.2

package/components/field/scss/variables.scss

@@ -1,133 +1,138 @@
-@use 'ui/tokens';
-@use 'check' as check;
-@use 'text' as text;
-
-.field {
-    --transition-duration: var(--transition-duration-400);
-    --width: 100%;
-
-
-    &--optional {
-        --max-height: 0;
-        --max-height-active: 0;
-
-        #{tokens.state(active, '.field')} & {
-            --max-height: var(--max-height-active);
-        }
-    }
-
-
-    &-description {
-        --font-size: var(--font-size-300);
-    }
-
-    &-mask {
-        --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-default: var(--background);
-        --border-radius: var(--border-radius-400);
-        --border-style: solid;
-        --border-width: 0px;
-        --box-shadow: var(--box-shadow-default);
-        --box-shadow-active: var(--box-shadow-400);
-        --box-shadow-default: var(--box-shadow-300);
-        --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);
-        --outline-opacity: var(--outline-opacity-default);
-        --outline-opacity-active: 0.32;
-        --outline-opacity-default: 0;
-        --outline-opacity-hover: 0;
-        --outline-opacity-pressed: 0;
-        --outline-spacing: 0px;
-        --outline-width: var(--outline-width-default);
-        --outline-width-active: 4px;
-        --outline-width-default: 0px;
-        --outline-width-hover: 0px;
-        --outline-width-pressed: 0px;
-        --padding-horizontal: 0px;
-        --padding-vertical: var(--size-400);
-
-
-        #{tokens.state(active, '.field')} > &,
-        #{tokens.state(active, '.field')} *:not(.field) & {
-            --background: var(--background-active);
-            --border-color: var(--border-color-active);
-            --box-shadow: var(--box-shadow-active);
-            --color: var(--color-active);
-            --outline-opacity: var(--outline-opacity-active);
-            --outline-width: var(--outline-width-active);
-        }
-
-        $inactive: tokens.state(inactive, '.field');
-
-        #{tokens.state(hover, 'label#{$inactive}')} > &,
-        #{tokens.state(hover, '#{$inactive}:not(label) &')} {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-            --outline-opacity: var(--outline-opacity-hover);
-            --outline-width: var(--outline-width-hover);
-        }
-
-        #{tokens.state(pressed, 'label#{$inactive}')} > &,
-        #{tokens.state(pressed, '#{$inactive}:not(label) &')} {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --color: var(--color-pressed);
-            --outline-opacity: var(--outline-opacity-pressed);
-            --outline-width: var(--outline-width-pressed);
-        }
-
-        &--outline {
-            @include tokens.state(pressed) {
-                --border-color: var(--border-color-default);
-
-                &::before {
-                    --outline-width: 0px;
-                }
-            }
-        }
-    }
-
-    &-required {
-        --border-radius: var(--border-radius-circle);
-        --size: 6px;
-    }
-
-    &-title {
-        --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-500);
-
-        #{tokens.state(active, '.field')} & {
-            --color: var(--color-active);
-        }
-
-        #{tokens.state(hover, '.field')} & {
-            --color: var(--color-hover);
-        }
-
-        #{tokens.state(pressed, '.field')} & {
-            --color: var(--color-pressed);
-        }
-    }
-
-
-    @include check.variables();
-    @include text.variables();
-}
+@use 'ui/tokens';
+@use 'check' as check;
+@use 'text' as text;
+
+.field {
+    --transition-duration: var(--transition-duration-400);
+    --width: 100%;
+
+
+    &--optional {
+        --max-height: 0;
+        --max-height-active: 0;
+
+        #{tokens.state(active, '.field')} & {
+            --max-height: var(--max-height-active);
+        }
+    }
+
+
+    &-description,
+    &-error {
+        --font-size: var(--font-size-300);
+    }
+
+    &-error {
+        --color: var(--color-red-400);
+    }
+
+    &-mask {
+        --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-default: var(--background);
+        --border-radius: var(--border-radius-400);
+        --border-style: solid;
+        --border-width: 0px;
+        --box-shadow: var(--box-shadow-default);
+        --box-shadow-active: var(--box-shadow-400);
+        --box-shadow-default: var(--box-shadow-300);
+        --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);
+        --outline-opacity: var(--outline-opacity-default);
+        --outline-opacity-active: 0.32;
+        --outline-opacity-default: 0;
+        --outline-opacity-hover: 0;
+        --outline-opacity-pressed: 0;
+        --outline-spacing: 0px;
+        --outline-width: var(--outline-width-default);
+        --outline-width-active: 4px;
+        --outline-width-default: 0px;
+        --outline-width-hover: 0px;
+        --outline-width-pressed: 0px;
+        --padding-horizontal: 0px;
+        --padding-vertical: var(--size-400);
+
+
+        #{tokens.state(active, '.field')} > &,
+        #{tokens.state(active, '.field')} *:not(.field) & {
+            --background: var(--background-active);
+            --border-color: var(--border-color-active);
+            --box-shadow: var(--box-shadow-active);
+            --color: var(--color-active);
+            --outline-opacity: var(--outline-opacity-active);
+            --outline-width: var(--outline-width-active);
+        }
+
+        $inactive: tokens.state(inactive, '.field');
+
+        #{tokens.state(hover, 'label#{$inactive}')} > &,
+        #{tokens.state(hover, '#{$inactive}:not(label) &')} {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-hover);
+            --outline-opacity: var(--outline-opacity-hover);
+            --outline-width: var(--outline-width-hover);
+        }
+
+        #{tokens.state(pressed, 'label#{$inactive}')} > &,
+        #{tokens.state(pressed, '#{$inactive}:not(label) &')} {
+            --background: var(--background-pressed);
+            --border-color: var(--border-color-pressed);
+            --box-shadow: var(--box-shadow-pressed);
+            --color: var(--color-pressed);
+            --outline-opacity: var(--outline-opacity-pressed);
+            --outline-width: var(--outline-width-pressed);
+        }
+
+        &--outline {
+            @include tokens.state(pressed) {
+                --border-color: var(--border-color-default);
+
+                &::before {
+                    --outline-width: 0px;
+                }
+            }
+        }
+    }
+
+    &-required {
+        --border-radius: var(--border-radius-circle);
+        --size: 6px;
+    }
+
+    &-title {
+        --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-500);
+
+        #{tokens.state(active, '.field')} & {
+            --color: var(--color-active);
+        }
+
+        #{tokens.state(hover, '.field')} & {
+            --color: var(--color-hover);
+        }
+
+        #{tokens.state(pressed, '.field')} & {
+            --color: var(--color-pressed);
+        }
+    }
+
+
+    @include check.variables();
+    @include text.variables();
+}

package/components/group/scss/group.scss

@@ -1,41 +1,41 @@
-.group {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: 0 calc(var(--margin-horizontal) / -2);
-    position: relative;
-    width: calc(100% + var(--margin-horizontal));
-
-
-    &--offset {
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                margin-#{$direction}: calc(var(--margin-vertical) * -1);
-            }
-        }
-    }
-
-    &--scroller {
-        .group-item {
-            &:first-child {
-                margin-left: 0;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-
-    &-item {
-        display: flex;
-        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
-        position: relative;
-        width: var(--width);
-
-        &[class*='--width'] {
-            width: calc(var(--width) - var(--margin-horizontal));
-        }
-    }
-}
+.group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 calc(var(--margin-horizontal) / -2);
+    position: relative;
+    width: calc(100% + var(--margin-horizontal));
+
+
+    &--offset {
+        @each $direction in 'bottom' 'top' {
+            &-#{$direction} {
+                margin-#{$direction}: calc(var(--margin-vertical) * -1);
+            }
+        }
+    }
+
+    &--scroller {
+        .group-item {
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+
+    &-item {
+        display: flex;
+        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        position: relative;
+        width: var(--width);
+
+        &[class*='--width'] {
+            width: calc(var(--width) - var(--margin-horizontal));
+        }
+    }
+}

package/components/group/scss/variables.scss

@@ -1,25 +1,25 @@
-@use 'ui/lib';
-@use 'ui/tokens';
-
-.group {
-    --margin-horizontal: var(--size-400);
-    --width: auto;
-
-
-    &--column {
-        --margin-horizontal: 0px;
-
-        > .group-item {
-            --margin-horizontal: 0px;
-            --width: 100%;
-        }
-    }
-
-    &--scroller {
-        --margin-horizontal: 0px;
-
-        .group-item {
-            --margin-vertical: 0px;
-        }
-    }
-}
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.group {
+    --margin-horizontal: var(--size-400);
+    --width: auto;
+
+
+    &--column {
+        --margin-horizontal: 0px;
+
+        > .group-item {
+            --margin-horizontal: 0px;
+            --width: 100%;
+        }
+    }
+
+    &--scroller {
+        --margin-horizontal: 0px;
+
+        .group-item {
+            --margin-vertical: 0px;
+        }
+    }
+}

package/components/icon/scss/icon.scss

@@ -1,18 +1,18 @@
-.icon {
-    color: var(--color);
-    display: flex;
-    flex: 0 0 var(--width);
-    height: var(--height);
-    pointer-events: none;
-    position: relative;
-    transform: rotate(var(--rotate));
-    width: var(--width);
-
-
-    svg {
-        color: currentColor;
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-    }
-}
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    transform: rotate(var(--rotate));
+    width: var(--width);
+
+
+    svg {
+        color: currentColor;
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+    }
+}

package/components/icon/scss/variables.scss

@@ -1,8 +1,8 @@
-.icon {
-    --color: inherit;
-    --height: var(--size);
-    --margin-horizontal: var(--size-300);
-    --rotate: 0deg;
-    --size: var(--size-400);
-    --width: var(--size);
-}
+.icon {
+    --color: inherit;
+    --height: var(--size);
+    --margin-horizontal: var(--size-300);
+    --rotate: 0deg;
+    --size: var(--size-400);
+    --width: var(--size);
+}

package/components/link/scss/link.scss

@@ -1,29 +1,29 @@
-@use 'ui/lib';
-@use 'ui/tokens';
-
-.link {
-    align-content: center;
-    background: var(--background);
-    color: var(--color);
-    cursor: pointer;
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--font-size);
-    justify-content: flex-start;
-    line-height: var(--line-height);
-    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
-    position: relative;
-    transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        color var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-    width: var(--width);
-
-
-    &--underline {
-        @include tokens.state(active hover) {
-            text-decoration: underline;
-        }
-    }
-}
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.link {
+    align-content: center;
+    background: var(--background);
+    color: var(--color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    justify-content: flex-start;
+    line-height: var(--line-height);
+    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

package/components/link/scss/variables.scss

@@ -1,48 +1,48 @@
-@use 'ui/lib';
-@use 'ui/tokens';
-
-.link {
-    --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;
-    --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-500);
-    --line-height: var(--line-height-400);
-    --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);
-        --color: var(--color-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-        --border-color: var(--border-color-hover);
-        --color: var(--color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-        --border-color: var(--border-color-pressed);
-        --color: var(--color-pressed);
-    }
-}
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.link {
+    --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;
+    --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-500);
+    --line-height: var(--line-height-400);
+    --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);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --color: var(--color-pressed);
+    }
+}