@esportsplus/ui 0.0.121 → 0.1.0

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

@@ -0,0 +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;
+                }
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,27 @@
+@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);
+}

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

@@ -0,0 +1,21 @@
+.--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

@@ -0,0 +1,66 @@
+@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);
+}

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

@@ -0,0 +1,31 @@
+@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);
+}

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

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

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

@@ -0,0 +1,65 @@
+.--flex {
+    &-center {
+        align-content: center;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    &-column {
+        display: flex;
+        flex-flow: column;
+    }
+
+    &-end {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+    }
+
+    &-fill {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &-fixed {
+        display: flex;
+        flex: 0 0 var(--width);
+    }
+
+    &-horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        &-space-between {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+    }
+
+    &-row {
+        display: flex;
+        flex-flow: row;
+    }
+
+    &-start {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    &-vertical {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+
+        &-space-between {
+            align-items: space-between;
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+.--glass {
+    backdrop-filter: blur(var(--blur));
+}

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

@@ -0,0 +1,3 @@
+.--glass {
+    --blur: 16px;
+}

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

@@ -0,0 +1,28 @@
+@use '/lib';
+@use '/tokens';
+
+.--hidden {
+    display: none;
+
+    &-active {
+        @include tokens.state(active) {
+            display: none;
+        }
+    }
+
+    &-inactive {
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
+
+    &-visibility {
+        @include lib.position(absolute, 0 null null 0);
+        appearance: none;
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: -1;
+    }
+}

package/src/css-utilities/index.scss

@@ -0,0 +1,14 @@
+@use '/lib';
+@use '/tokens';
+@use 'background/scss/variables' as background;
+@use 'border/scss/variables' as border;
+@use 'color/scss/variables' as color;
+
+
+@mixin css-variables($colors) {
+    @include background.css-variables($colors);
+    @include border.css-variables($colors);
+    @include color.css-variables($colors);
+}
+
+@include css-variables(lib.list-join(primary secondary, lib.map-keys(tokens.$color)));

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

@@ -0,0 +1,7 @@
+.--inline {
+    display: inline;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+}

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

@@ -0,0 +1,10 @@
+@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/not-allowed/scss/index.scss

@@ -0,0 +1,7 @@
+.--not-allowed {
+    cursor: not-allowed;
+
+    * {
+        pointer-events: none;
+    }
+}

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

@@ -0,0 +1,5 @@
+.--overflow {
+    &-hidden {
+        overflow: hidden;
+    }
+}

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

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

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

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

@@ -0,0 +1,20 @@
+.--slide {
+    &-in {
+        animation-duration: var(--transition-duration);
+        animation-name: --slide-in;
+        animation-timing-function: ease-in-out;
+        transform-origin: top center;
+
+        @keyframes --slide-in {
+            from {
+                opacity: 0;
+                transform: translateY(var(--translateY));
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+.--slide {
+    &-in {
+        --transition-duration: var(--transition-duration-400);
+        --translateY: var(--size-400);
+    }
+}

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

@@ -0,0 +1,93 @@
+@use '/lib';
+@use '/tokens';
+
+.--text {
+    &-bold {
+        font-weight: var(--font-weight-500);
+
+        @each $key in lib.map-keys(tokens.$font-weight) {
+            @if $key > 500 {
+                &-#{$key} {
+                    font-weight: var(--font-weight-#{$key});
+                }
+            }
+        }
+    }
+
+    &-center {
+        text-align: center;
+    }
+
+    &-crop {
+        &::after,
+        &::before,
+        &-bottom::after,
+        &-top::before {
+            content: '';
+            display: block;
+            height: 0;
+            width: 100%;
+        }
+
+        &::after,
+        &-bottom::after {
+            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
+        }
+
+        &::before,
+        &-top::before {
+            margin-top: calc((1 - var(--line-height)) * 0.618em);
+        }
+    }
+
+    &-italic {
+        font-style: italic;
+    }
+
+    &-linethrough {
+        text-decoration: line-through;
+    }
+
+    &-multiplier {
+        font-size: calc(var(--font-size) * var(--text-multiplier));
+    }
+
+    &-outline {
+        color: var(--color);
+        word-break: break-word;
+        word-wrap: break-word;
+
+        @supports (-webkit-text-stroke-width: 1px) {
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke-color: var(--color);
+            -webkit-text-stroke-width: var(--stroke-width);
+        }
+    }
+
+    &-strike-through {
+        text-decoration: line-through;
+        text-decoration-thickness: var(--line-width);
+    }
+
+    &-truncate {
+        line-height: var(--size);
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-underline {
+        text-decoration: underline;
+
+        &-dotted {
+            text-decoration: underline;
+            text-decoration-style: dotted;
+        }
+    }
+
+    &-uppercase {
+        text-transform: uppercase;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+.--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

@@ -0,0 +1,3 @@
+.--width {
+    width: var(--width);
+}

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

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

package/src/index.ts

@@ -0,0 +1,11 @@
+// Required for `tsc-alias` to work
+// - `package.json` exports makes this file innaccesible to avoid barrel imports
+export { default as alert }from './components/alert';
+export { default as field }from './components/field';
+export { default as form }from './components/form';
+export { default as number }from './components/number';
+export { default as page }from './components/page';
+export { default as root }from './components/root';
+export { default as scrollbar }from './components/scrollbar';
+export { default as site }from './components/site';
+export { default as tooltip }from './components/tooltip';

package/src/lib/index.scss

@@ -0,0 +1,7 @@
+@forward 'scss/breakpoint';
+@forward 'scss/color' as color-*;
+@forward 'scss/css-variables';
+@forward 'scss/list' as list-*;
+@forward 'scss/map' as map-*;
+@forward 'scss/position';
+@forward 'scss/string' as string-*;