@esportsplus/ui 0.53.0 → 0.55.0

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

@@ -1,43 +0,0 @@
-@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 +0,0 @@
-@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/error/scss/index.scss

@@ -1,24 +0,0 @@
-.--error {
-    animation: error var(--animation-duration) 1 linear;
-
-    @keyframes error {
-        0% {
-            transform: translate(8px);
-        }
-        20% {
-            transform: translate(-8px);
-        }
-        40% {
-            transform: translate(4px);
-        }
-        60% {
-            transform: translate(-4px);
-        }
-        80% {
-            transform: translate(2px);
-        }
-        100% {
-            transform: translate(0px);
-        }
-    }
-}

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

@@ -1,3 +0,0 @@
-.--error {
-    --animation-duration: 0.4s;
-}

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

@@ -1,15 +0,0 @@
-@use './variables';
-
-.--flicker {
-    animation: flicker var(--transition-duration) ease-in-out infinite;
-}
-
-@keyframes flicker {
-    0%,
-    100% {
-        opacity: var(--from);
-    }
-    50% {
-        opacity: var(--to);
-    }
-}

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

@@ -1,5 +0,0 @@
-.--flicker {
-    --from: 0;
-    --to: 1;
-    --transition-duration: 1s;
-}

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

@@ -1,7 +0,0 @@
-@use './variables';
-
-.--focus-active {
-    &:has(> .--active) > *:not(.--active) {
-        opacity: var(--opacity);
-    }
-}

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

@@ -1,5 +0,0 @@
-.--focus-active {
-    > * {
-        --opacity: 0.24;
-    }
-}

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

@@ -1,13 +0,0 @@
-@use 'variables';
-
-.--gap {
-    gap: var(--gap-vertical) var(--gap-horizontal);
-
-    &-horizontal {
-        gap: 0px var(--gap-horizontal);
-    }
-
-    &-vertical {
-        gap: var(--gap-vertical) 0px;
-    }
-}

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

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

package/src/css-utilities/line-height/scss/index.scss

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

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

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

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

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

package/src/css-utilities/scroll-fade/scss/index.scss

@@ -1,47 +0,0 @@
-@use 'variables';
-
-// Registered so the length custom properties can be interpolated by the
-// scroll-driven animation below.
-@property --scroll-fade-bottom {
-    inherits: false;
-    initial-value: 0px;
-    syntax: '<length>';
-}
-
-@property --scroll-fade-top {
-    inherits: false;
-    initial-value: 0px;
-    syntax: '<length>';
-}
-
-// A vertical scroll container that fades an edge only while there is content
-// past it: no top fade at the very top, no bottom fade at the very end. Driven
-// by the element's own scroll position (scroll-driven animations), so the fade
-// is direction-aware rather than a static gradient that clips the ends.
-.--scroll-fade {
-    overflow-y: auto;
-
-    @supports (animation-timeline: scroll()) {
-        animation: scroll-fade linear both;
-        animation-timeline: scroll(self);
-        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
-        mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
-    }
-}
-
-@keyframes scroll-fade {
-    0% {
-        --scroll-fade-bottom: var(--scroll-fade-size);
-        --scroll-fade-top: 0px;
-    }
-
-    5%, 95% {
-        --scroll-fade-bottom: var(--scroll-fade-size);
-        --scroll-fade-top: var(--scroll-fade-size);
-    }
-
-    100% {
-        --scroll-fade-bottom: 0px;
-        --scroll-fade-top: var(--scroll-fade-size);
-    }
-}

package/src/css-utilities/scroll-fade/scss/variables.scss

@@ -1,3 +0,0 @@
-.--scroll-fade {
-    --scroll-fade-size: 2.5rem;
-}

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

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

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

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

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

@@ -1,31 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--text {
-    @each $key in lib.map-keys(tokens.$font-size) {
-        &-#{$key} {
-            --font-size: var(--font-size-#{$key});
-        }
-    }
-
-    &-line-through {
-        --line-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --line-width: var(--border-width-#{$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});
-            }
-        }
-    }
-}

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

@@ -1,5 +0,0 @@
-.--viewport {
-    overflow: hidden;
-    height: calc(100svh - var(--margin-vertical, 0px) * 2);
-    width: calc(100vw - var(--margin-horizontal, 0px) * 2);
-}

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

@@ -1,5 +0,0 @@
-@use './variables';
-
-.--width {
-    width: var(--width);
-}

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

@@ -1,9 +0,0 @@
-.--width {
-    &-full {
-        --width: 100%;
-    }
-
-    &-half {
-        --width: 50%;
-    }
-}

package/src/fonts/index.ts

@@ -1 +0,0 @@
-export * as montserrat from './montserrat';

package/src/themes/dark/back.ts

@@ -1,9 +0,0 @@
-import back from '~/components/back';
-
-
-export default back.bind({
-    attributes: {
-        class: '--color-white --margin-vertical --margin-spacer-200',
-        style: '--color-default: var(--color-grey-500);'
-    }
-});

package/src/themes/dark/button/scss/index.scss

@@ -1,46 +0,0 @@
-.button {
-    &--form,
-    &--primary,
-    &--secondary,
-    &--tertiary {
-        --border-color-active: var(--color-primary-300);
-        --color-active: var(--color-white-400);
-        --color-default: var(--color-grey-500);
-        --color-hover: var(--color-white-400);
-        --color-pressed: var(--color-grey-500);
-        --font-weight: var(--font-weight-500);
-    }
-
-    &--form,
-    &--primary {
-        --background-active: var(--color-primary-300);
-        --background-default: var(--color-primary-300);
-        --background-hover: var(--color-primary-300);
-        --background-pressed: var(--color-primary-500);
-    }
-
-    &--form {
-        --padding-horizontal: var(--size-500);
-        --padding-vertical: var(--size-500);
-        --width: 100%;
-    }
-
-    &--secondary {
-        --background-active: var(--color-black-300);
-        --background-default: var(--color-black-300);
-        --background-hover: var(--color-primary-300);
-        --background-pressed: var(--color-primary-500);
-        --border-color: var(--background-color);
-    }
-
-    &--tertiary {
-        --background-active: var(--color-black-300);
-        --background-default: var(--color-black-400);
-        --background-hover: var(--color-black-300);
-        --background-pressed: var(--color-black-500);
-        --border-color-active: var(--color-primary-300);
-        --border-color-default: var(--color-black-300);
-        --border-color-hover: var(--color-black-400);
-        --border-color-pressed: var(--color-black-500);
-    }
-}

package/src/themes/dark/link/scss/index.scss

@@ -1,26 +0,0 @@
-.link {
-    &--primary,
-    &--tooltip {
-        --color-active: var(--color-white-400);
-        --color-default: var(--color-grey-500);
-        --color-hover: var(--color-white-400);
-        --color-pressed: var(--color-grey-500);
-        --font-weight: var(--font-weight-500);
-        --gap-horizontal: 0px;
-        --gap-vertical: 0px;
-        align-items: center;
-        display: flex;
-        flex-flow: row;
-        gap: var(--gap-vertical) var(--gap-horizontal);
-    }
-
-    &--tooltip {
-        --background-active: var(--color-black-300);
-        --background-default: var(--color-black-400);
-        --background-hover: var(--color-black-300);
-        --background-pressed: var(--color-black-500);
-        --padding-horizontal: var(--size-500);
-        --padding-vertical: var(--size-500);
-        white-space: nowrap;
-    }
-}

package/src/tokens/scss/font-weight.scss

@@ -1,6 +0,0 @@
-$font-weight: (
-    300: 400,
-    400: 500,
-    500: 600,
-    600: 700
-);

package/src/tokens/scss/line-height.scss

@@ -1,9 +0,0 @@
-// LiftKit line-height steps: the φ-root constants themselves (unitless).
-@use 'scale';
-
-$line-height: (
-    100: scale.$eighth,
-    200: scale.$quarter,
-    300: scale.$half,
-    400: scale.$whole
-);

package/src/tokens/scss/transition-duration.scss

@@ -1 +0,0 @@
-$transition-duration: 0.16s;