@esportsplus/ui 0.0.1

package/components/tooltip/scss/_north.scss

@@ -0,0 +1,34 @@
+@mixin north($active) {
+    &--ne,
+    &--nw {
+        bottom: calc(100% - var(--spacer));
+        position: absolute;
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateY(calc(var(--spacer) * -2));
+        }
+    }
+
+    &--n {
+        bottom: calc(100% - var(--spacer));
+        position: absolute;
+        right: 50%;
+        transform: translateX(50%) scaleY(var(--scaleY));
+        transform-origin: center bottom;
+
+        #{$active} {
+            transform: translate(50%, calc(var(--spacer) * -2)) scale(1);
+        }
+    }
+
+    &--ne {
+        right: 0;
+        transform-origin: bottom right;
+    }
+
+    &--nw {
+        left: 0;
+        transform-origin: bottom left;
+    }
+}

package/components/tooltip/scss/_south.scss

@@ -0,0 +1,35 @@
+@mixin south($active) {
+    &--se,
+    &--sw {
+        position: absolute;
+        top: calc(100% - var(--spacer));
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateY(calc(var(--spacer) * 2));
+        }
+    }
+
+    &--s {
+        position: absolute;
+        right: 50%;
+        top: calc(100% - var(--spacer));
+        transform: translateX(50%) scaleY(var(--scaleY));
+        transform-origin: center top;
+
+        #{$active} {
+            transform: translate(50%, calc(var(--spacer) * 2)) scale(1);
+        }
+    }
+
+    &--se {
+        right: 0;
+        transform-origin: top right;
+    }
+
+    &--sw {
+        left: 0;
+        transform-origin: top left;
+    }
+
+}

package/components/tooltip/scss/_west.scss

@@ -0,0 +1,34 @@
+@mixin west($active) {
+    &--wn,
+    &--ws {
+        position: absolute;
+        right: calc(100% - var(--spacer));
+        transform: scale(var(--scale));
+
+        #{$active} {
+            transform: translateX(calc(var(--spacer) * -2));
+        }
+    }
+
+    &--w {
+        bottom: 50%;
+        position: absolute;
+        right: calc(100% - var(--spacer));
+        transform: translateY(50%) scaleX(var(--scaleX));
+        transform-origin: center right;
+
+        #{$active} {
+            transform: translate(calc(var(--spacer) * -2), 50%) scale(1);
+        }
+    }
+
+    &--wn {
+        top: 0;
+        transform-origin: top right;
+    }
+
+    &--ws {
+        bottom: 0;
+        transform-origin: bottom right;
+    }
+}

package/components/tooltip/scss/tooltip.scss

@@ -0,0 +1,107 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+@use 'center' as *;
+@use 'east' as *;
+@use 'north' as *;
+@use 'south' as *;
+@use 'west' as *;
+
+.tooltip {
+    cursor: pointer;
+    position: relative;
+    z-index: 8;
+
+    @include tokens.state(active) {
+        z-index: 9;
+
+        // Add invisible box to increase activation/hover area
+        &.tooltip--box {
+            $size: calc(100% + var(--spacer) * 2.5);
+
+            &::before {
+                @include lib.position(absolute, center);
+                content: '';
+                height: $size;
+                width: $size;
+                z-index: -1;
+            }
+        }
+
+        // Rotate arrow only if parent tooltip is active
+        :not(.tooltip) .tooltip-arrow,
+        > .tooltip-arrow {
+            transform: rotate(-90deg);
+        }
+    }
+
+
+    &-arrow {
+        margin: 0 -1px;
+        transform: rotate(90deg);
+    }
+
+
+    /**
+     *--------------------------------------------------------------------------
+     *
+     *  Tooltip Content Wrapper
+     *
+     *  Wrapper Is Used To Simplify Animation, Positioning And
+     *  Visibility Of Tooltip Content
+     *
+     *  Tooltips Are Activated By JS To Simplify CSS Selectors:
+     *  - On 'hover' By Default
+     *  - On 'click' When Using "data-trigger='toggle'"
+     *
+     */
+
+    &-content,
+    &-message {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        max-width: var(--max-width);
+        min-width: var(--min-width);
+        opacity: 0;
+        overflow: hidden;
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+        width: var(--width);
+        z-index: 9;
+
+
+        // Shared With Positioning CSS
+        $active: '#{tokens.state(active, '.tooltip')} > &, #{tokens.state(active, '.tooltip')} :not(.tooltip) > &';
+        $not-active: '#{tokens.state(inactive, '.tooltip')} > &, #{tokens.state(inactive, '.tooltip')} :not(.tooltip) > &';
+
+        #{$active} {
+            opacity: 1;
+        }
+
+        #{$not-active} {
+            &, * {
+                pointer-events: none;
+            }
+        }
+
+
+        @include center($active);
+        @include east($active);
+        @include north($active);
+        @include south($active);
+        @include west($active);
+    }
+
+    &-message {
+        background: var(--background);
+        color: var(--color);
+        cursor: auto;
+        font-size: var(--font-size);
+        font-weight: var(--font-weight);
+        line-height: normal;
+        padding: var(--padding-vertical) var(--padding-horizontal);
+        pointer-events: none;
+        white-space: nowrap;
+    }
+}

package/components/tooltip/scss/variables.scss

@@ -0,0 +1,25 @@
+.tooltip {
+    &-content,
+    &-message {
+        --background: var(--background-default);
+        --background-default: transparent;
+        --border-radius: var(--border-radius-300);
+        --box-shadow: var(--box-shadow-400);
+        --max-width: calc(90vw - (var(--size-700) * 2));
+        --min-width: auto;
+        --scaleX: 0.64;
+        --scaleY: 0.64;
+        --spacer: var(--size-300);
+        --transition-duration: var(--transition-duration-300);
+        --width: auto;
+    }
+
+    &-message {
+        --background-default: var(--color-black-400);
+        --color: var(--color-white-400);
+        --font-size: var(--font-size-300);
+        --font-weight: var(--font-weight-400);
+        --padding-horizontal: var(--size-300);
+        --padding-vertical: var(--size-300);
+    }
+}

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

@@ -0,0 +1,41 @@
+@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/css-utilities/[margin,padding]/scss/variables.scss

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

package/css-utilities/[max,min]/scss/styles.scss

@@ -0,0 +1,11 @@
+@each $prefix in max min {
+    .--#{$prefix} {
+        &-height {
+            #{$prefix}-height: var(--#{$prefix}-height);
+        }
+
+        &-width {
+            #{$prefix}-width: var(--#{$prefix}-width);
+        }
+    }
+}

package/css-utilities/[max,min]/scss/variables.scss

@@ -0,0 +1,23 @@
+@each $prefix in max min {
+    .--#{$prefix} {
+        &-height {
+            &-full {
+                --#{$prefix}-height: 100%;
+            }
+
+            &-viewport {
+                --#{$prefix}-height: 100vh;
+            }
+        }
+
+        &-width {
+            &-full {
+                --#{$prefix}-width: 100%;
+            }
+
+            &-viewport {
+                --#{$prefix}-width: 100vw;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+@use 'ui/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/css-utilities/background/scss/variables.scss

@@ -0,0 +1,28 @@
+@use 'ui/lib';
+@use 'ui/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/css-utilities/border/scss/border.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/css-utilities/border/scss/variables.scss

@@ -0,0 +1,66 @@
+@use 'ui/lib';
+@use 'ui/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/css-utilities/color/scss/variables.scss

@@ -0,0 +1,32 @@
+@use 'ui/lib';
+@use 'ui/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/css-utilities/disabled/scss/disabled.scss

@@ -0,0 +1,17 @@
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Disabled State
+ *
+ *  When Using The '.disabled' Class
+ *  - Form Elements Have The 'disabled' Attribute Added
+ *  - Links Have The 'href' Attribute Removed
+ *
+ *  ^ Reasons For Using A Single Class Vs '--disabled' Modifier On Each Module.
+ *
+ */
+
+.--disabled {
+    opacity: var(--opacity);
+    pointer-events: none;
+}

package/css-utilities/disabled/scss/variables.scss

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

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

@@ -0,0 +1,67 @@
+@use 'ui/tokens';
+
+.--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/css-utilities/hidden/scss/hidden.scss

@@ -0,0 +1,28 @@
+@use 'ui/lib';
+@use 'ui/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;
+    }
+}