@esportsplus/ui 0.8.3 → 0.9.0

package/src/components/typewriter/scss/index.scss

@@ -1,15 +1,15 @@
-.typewriter {
-    &::after {
-        animation: blink 0.64s infinite;
-        content: '|';
-
-        @keyframes blink {
-            0%, 100% {
-                opacity: 1;
-            }
-            50% {
-                opacity: 0;
-            }
-        }
-    }
+.typewriter {
+    &::after {
+        animation: blink 0.64s infinite;
+        content: '|';
+
+        @keyframes blink {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0;
+            }
+        }
+    }
 }

package/src/css-utilities/[margin,padding]/scss/index.scss

@@ -1,41 +1,43 @@
-@each $property in margin padding {
-    .--#{$property} {
-        &,
-        &-horizontal {
-            #{$property}-left: var(--#{$property}-horizontal);
-            #{$property}-right: var(--#{$property}-horizontal);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-left: calc(var(--padding-horizontal) - var(--border-width));
-                    padding-right: calc(var(--padding-horizontal) - var(--border-width));
-                }
-            }
-        }
-
-        &,
-        &-vertical {
-            #{$property}-bottom: var(--#{$property}-vertical);
-            #{$property}-top: var(--#{$property}-vertical);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-bottom: calc(var(--padding-vertical) - var(--border-width));
-                    padding-top: calc(var(--padding-vertical) - var(--border-width));
-                }
-            }
-        }
-
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-vertical);
-            }
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-horizontal);
-            }
-        }
-    }
-}
+@use './variables';
+
+@each $property in margin padding {
+    .--#{$property} {
+        &,
+        &-horizontal {
+            #{$property}-left: var(--#{$property}-horizontal);
+            #{$property}-right: var(--#{$property}-horizontal);
+
+            @if ($property == padding) {
+                &.--border {
+                    padding-left: calc(var(--padding-horizontal) - var(--border-width));
+                    padding-right: calc(var(--padding-horizontal) - var(--border-width));
+                }
+            }
+        }
+
+        &,
+        &-vertical {
+            #{$property}-bottom: var(--#{$property}-vertical);
+            #{$property}-top: var(--#{$property}-vertical);
+
+            @if ($property == padding) {
+                &.--border {
+                    padding-bottom: calc(var(--padding-vertical) - var(--border-width));
+                    padding-top: calc(var(--padding-vertical) - var(--border-width));
+                }
+            }
+        }
+
+        @each $direction in 'bottom' 'top' {
+            &-#{$direction} {
+                #{$property}-#{$direction}: var(--#{$property}-vertical);
+            }
+        }
+
+        @each $direction in 'left' 'right' {
+            &-#{$direction} {
+                #{$property}-#{$direction}: var(--#{$property}-horizontal);
+            }
+        }
+    }
+}

package/src/css-utilities/[margin,padding]/scss/variables.scss

@@ -1,54 +1,54 @@
-@use '/lib';
-@use '/tokens';
-
-@each $property in margin padding {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                @each $key in lib.map-keys(tokens.$border-width) {
-                    &-border-width {
-                        --#{$property}-#{$direction}: var(--border-width-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--border-width-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$spacer) {
-                    &-spacer {
-                        --#{$property}-#{$direction}: var(--spacer-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--spacer-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$size) {
-                    &-#{$key} {
-                        --#{$property}-#{$direction}: var(--size-#{$key});
-                    }
-                }
-
-                &-inherit {
-                    --#{$property}-#{$direction}: inherit;
-                }
-            }
-        }
-    }
-}
-
-@each $property in margin {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                &-auto {
-                    --#{$property}-#{$direction}: auto;
-                }
-            }
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+@each $property in margin padding {
+    .--#{$property} {
+        @each $direction in 'horizontal' 'vertical' {
+            &,
+            &-#{$direction} {
+                @each $key in lib.map-keys(tokens.$border-width) {
+                    &-border-width {
+                        --#{$property}-#{$direction}: var(--border-width-400);
+
+                        &-#{$key} {
+                            --#{$property}-#{$direction}: var(--border-width-#{$key});
+                        }
+                    }
+                }
+
+                @each $key in lib.map-keys(tokens.$spacer) {
+                    &-spacer {
+                        --#{$property}-#{$direction}: var(--spacer-400);
+
+                        &-#{$key} {
+                            --#{$property}-#{$direction}: var(--spacer-#{$key});
+                        }
+                    }
+                }
+
+                @each $key in lib.map-keys(tokens.$size) {
+                    &-#{$key} {
+                        --#{$property}-#{$direction}: var(--size-#{$key});
+                    }
+                }
+
+                &-inherit {
+                    --#{$property}-#{$direction}: inherit;
+                }
+            }
+        }
+    }
+}
+
+@each $property in margin {
+    .--#{$property} {
+        @each $direction in 'horizontal' 'vertical' {
+            &,
+            &-#{$direction} {
+                &-auto {
+                    --#{$property}-#{$direction}: auto;
+                }
+            }
+        }
+    }
+}

package/src/css-utilities/absolute/scss/index.scss

@@ -1,36 +1,36 @@
-@use '/lib';
-
-.--absolute {
-    &-horizontal,
-    &-vertical {
-        &-bottom {
-            bottom: 0;
-        }
-
-        &-top {
-            top: 0;
-        }
-    }
-
-    &-horizontal {
-        &,
-        &-bottom,
-        &-top {
-            @include lib.position(absolute, horizontal);
-        }
-    }
-
-    &-vertical {
-        &,
-        &-left,
-        &-right {
-            @include lib.position(absolute, vertical);
-        }
-    }
-
-    @each $direction in 'bottom' 'center' 'full' 'left' 'right' 'top' {
-        &-#{$direction} {
-            @include lib.position(absolute, $direction);
-        }
-    }
-}
+@use '/lib';
+
+.--absolute {
+    &-horizontal,
+    &-vertical {
+        &-bottom {
+            bottom: 0;
+        }
+
+        &-top {
+            top: 0;
+        }
+    }
+
+    &-horizontal {
+        &,
+        &-bottom,
+        &-top {
+            @include lib.position(absolute, horizontal);
+        }
+    }
+
+    &-vertical {
+        &,
+        &-left,
+        &-right {
+            @include lib.position(absolute, vertical);
+        }
+    }
+
+    @each $direction in 'bottom' 'center' 'full' 'left' 'right' 'top' {
+        &-#{$direction} {
+            @include lib.position(absolute, $direction);
+        }
+    }
+}

package/src/css-utilities/background/scss/index.scss

@@ -0,0 +1 @@
+@use './variables';

package/src/css-utilities/background/scss/variables.scss

@@ -1,27 +1,26 @@
-@use '/tokens';
-
-.--background {
-    &-state {
-        --background: var(--background-default);
-        --background-active: var(--background-default);
-        --background-default: transparent;
-        --background-hover: var(--background-default);
-        --background-pressed: var(--background-default);
-
-        @include tokens.state(active) {
-            --background: var(--background-active);
-        }
-
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--background', 'background', $colors);
-}
+@use '/tokens';
+
+.--background {
+    @include tokens.state-utility('background', tokens.$colors);
+
+    &-state {
+        --background: var(--background-default);
+        --background-active: var(--background-default);
+        --background-default: transparent;
+        --background-hover: var(--background-default);
+        --background-pressed: var(--background-default);
+
+        @include tokens.state(active) {
+            --background: var(--background-active);
+        }
+
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+        }
+    }
+}
+

package/src/css-utilities/border/scss/index.scss

@@ -1,21 +1,23 @@
-.--border {
-    border: var(--border-width) var(--border-style) var(--border-color);
-
-    @each $key in 'bottom' 'left' 'right' 'top' {
-        &-#{$key} {
-            border-#{$key}: var(--border-width) var(--border-style) var(--border-color);
-        }
-    }
-
-    &-offset {
-        @each $key in 'bottom' 'left' 'right' 'top' {
-            &-#{$key} {
-                margin-#{$key}: calc(var(--border-width) * -1);
-            }
-        }
-    }
-
-    &-radius {
-        border-radius: var(--border-radius);
-    }
-}
+@use './variables';
+
+.--border {
+    border: var(--border-width) var(--border-style) var(--border-color);
+
+    @each $key in 'bottom' 'left' 'right' 'top' {
+        &-#{$key} {
+            border-#{$key}: var(--border-width) var(--border-style) var(--border-color);
+        }
+    }
+
+    &-offset {
+        @each $key in 'bottom' 'left' 'right' 'top' {
+            &-#{$key} {
+                margin-#{$key}: calc(var(--border-width) * -1);
+            }
+        }
+    }
+
+    &-radius {
+        border-radius: var(--border-radius);
+    }
+}

package/src/css-utilities/border/scss/variables.scss

@@ -1,66 +1,64 @@
-@use '/lib';
-@use '/tokens';
-
-.--border {
-    &,
-    &-bottom,
-    &-left,
-    &-right,
-    &-top {
-        --border-color: var(--border-color-default);
-        --border-style: solid;
-        --border-width: var(--border-width-400);
-    }
-
-    &-dashed {
-        --border-style: dashed;
-    }
-
-    &-dotted {
-        --border-style: dotted;
-    }
-
-    &-radius {
-        --border-radius: var(--border-radius-400);
-
-        @each $key in lib.map-keys(tokens.$border-radius) {
-            &-#{$key} {
-                --border-radius: var(--border-radius-#{$key});
-            }
-        }
-    }
-
-    &-state {
-        --border-color: var(--border-color-default);
-        --border-color-active: var(--border-color-default);
-        --border-color-default: transparent;
-        --border-color-hover: var(--border-color-default);
-        --border-color-pressed: var(--border-color-default);
-
-        @include tokens.state(active) {
-            --border-color: var(--border-color-active);
-        }
-
-        @include tokens.state(hover) {
-            --border-color: var(--border-color-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --border-color: var(--border-color-pressed);
-        }
-    }
-
-    &-width {
-        --border-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--border', 'border-color', $colors);
-}
+@use '/lib';
+@use '/tokens';
+
+.--border {
+    @include tokens.state-utility('border-color', tokens.$colors);
+
+    &,
+    &-bottom,
+    &-left,
+    &-right,
+    &-top {
+        --border-color: var(--border-color-default);
+        --border-style: solid;
+        --border-width: var(--border-width-400);
+    }
+
+    &-dashed {
+        --border-style: dashed;
+    }
+
+    &-dotted {
+        --border-style: dotted;
+    }
+
+    &-radius {
+        --border-radius: var(--border-radius-400);
+
+        @each $key in lib.map-keys(tokens.$border-radius) {
+            &-#{$key} {
+                --border-radius: var(--border-radius-#{$key});
+            }
+        }
+    }
+
+    &-state {
+        --border-color: var(--border-color-default);
+        --border-color-active: var(--border-color-default);
+        --border-color-default: transparent;
+        --border-color-hover: var(--border-color-default);
+        --border-color-pressed: var(--border-color-default);
+
+        @include tokens.state(active) {
+            --border-color: var(--border-color-active);
+        }
+
+        @include tokens.state(hover) {
+            --border-color: var(--border-color-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --border-color: var(--border-color-pressed);
+        }
+    }
+
+    &-width {
+        --border-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --border-width: var(--border-width-#{$key});
+            }
+        }
+    }
+}

package/src/css-utilities/color/scss/index.scss

@@ -0,0 +1 @@
+@use './variables';

package/src/css-utilities/color/scss/variables.scss

@@ -1,31 +1,29 @@
-@use '/tokens';
-
-.--color {
-    &-inherit {
-        --color: inherit;
-    }
-
-    &-state {
-        --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);
-
-        @include tokens.state(active) {
-            --color: var(--color-active);
-        }
-
-        @include tokens.state(hover) {
-            --color: var(--color-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --color: var(--color-pressed);
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--color', 'color', $colors);
-}
+@use '/tokens';
+
+.--color {
+    @include tokens.state-utility('color', tokens.$colors);
+
+    &-inherit {
+        --color: inherit;
+    }
+
+    &-state {
+        --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);
+
+        @include tokens.state(active) {
+            --color: var(--color-active);
+        }
+
+        @include tokens.state(hover) {
+            --color: var(--color-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --color: var(--color-pressed);
+        }
+    }
+}

package/src/css-utilities/disabled/scss/index.scss

@@ -1,4 +1,4 @@
-.--disabled {
-    opacity: 0.64;
-    pointer-events: none;
-}
+.--disabled {
+    opacity: 0.64;
+    pointer-events: none;
+}