@esportsplus/ui 0.51.7 → 0.53.0

package/src/components/toast/scss/index.scss

@@ -0,0 +1,276 @@
+@use '/lib';
+@use '/tokens';
+@use 'variables';
+
+.toaster {
+    bottom: auto;
+    left: auto;
+    position: fixed;
+    right: auto;
+    top: auto;
+    width: min(360px, calc(100% - (var(--toast-inset) * 2)));
+    z-index: 9999;
+
+    &[data-position^='top'] {
+        top: var(--toast-inset);
+    }
+
+    &[data-position^='bottom'] {
+        bottom: var(--toast-inset);
+    }
+
+    &[data-position$='left'] {
+        left: var(--toast-inset);
+    }
+
+    &[data-position$='right'] {
+        right: var(--toast-inset);
+    }
+
+    &[data-position$='center'] {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+
+.toast {
+    background: var(--background);
+    border: 1px solid var(--color-border-400);
+    border-radius: var(--border-radius-500);
+    box-shadow: var(--box-shadow-300);
+    color: var(--color-text-400);
+    left: 0;
+    overflow: visible;
+    position: absolute;
+    right: 0;
+    transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+    transition:
+        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.3s,
+        height 0.2s;
+    user-select: none;
+    width: 100%;
+    z-index: calc(9999 - var(--toast-index, 0));
+
+
+    [data-position*='top'] & {
+        bottom: auto;
+        top: 0;
+        transform-origin: top;
+    }
+
+    [data-position*='bottom'] & {
+        --toast-calc-offset-y: calc((var(--toast-offset-y, 0px) * -1) + (var(--toast-index, 0) * var(--toast-gap) * -1) + var(--toast-swipe-y, 0px));
+        bottom: 0;
+        top: auto;
+        transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+        transform-origin: bottom;
+    }
+
+
+    // Invisible hit-area bridging the gap between stacked toasts while collapsed.
+    &::after {
+        content: '';
+        height: calc(var(--toast-gap) + 1px);
+        left: 0;
+        position: absolute;
+        width: 100%;
+    }
+
+    [data-position*='top'] &::after {
+        top: 100%;
+    }
+
+    [data-position*='bottom'] &::after {
+        bottom: 100%;
+    }
+
+
+    &-action {
+        flex-shrink: 0;
+    }
+
+    &-close {
+        align-items: center;
+        background: var(--background);
+        border: 1px solid var(--color-border-400);
+        border-radius: var(--border-radius-circle);
+        color: var(--color-text-500);
+        display: flex;
+        height: var(--size-500);
+        justify-content: center;
+        position: absolute;
+        right: calc(var(--size-200) * -1);
+        top: calc(var(--size-200) * -1);
+        width: var(--size-500);
+        z-index: 1;
+    }
+
+    &-content {
+        align-items: center;
+        display: flex;
+        gap: var(--size-300);
+        justify-content: space-between;
+        min-height: 0;
+        opacity: max(0, 1 - var(--toast-index, 0));
+        overflow-x: clip;
+        overflow-y: visible;
+        padding: var(--size-400);
+        transition: opacity 0.3s;
+    }
+
+    &-copy {
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+    }
+
+    &-description {
+        color: var(--color-text-300);
+        overflow-wrap: anywhere;
+
+        &--clamp {
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 4;
+            display: -webkit-box;
+            line-clamp: 4;
+            overflow: hidden;
+        }
+    }
+
+    &-details {
+        margin-top: var(--size-200);
+        max-height: 160px;
+        overflow-y: auto;
+    }
+
+    &-details-toggle {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-200);
+    }
+
+    &-icon {
+        color: var(--toast-color);
+        flex-shrink: 0;
+        height: 18px;
+        width: 18px;
+    }
+
+    &-title {
+        font-weight: var(--font-weight-400);
+        overflow-wrap: anywhere;
+    }
+
+
+    &--error {
+        --toast-color: var(--color-red-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--warning {
+        --toast-color: var(--color-yellow-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--success {
+        --toast-color: var(--color-green-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--info {
+        --toast-color: var(--color-blue-400);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+
+    &--loading {
+        --toast-color: var(--color-grey-500);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+
+        .toast-icon {
+            animation: toast-spin 1s linear infinite;
+        }
+    }
+
+    &--message {
+        --toast-color: var(--color-text-300);
+
+        border-color: color-mix(in oklab, var(--toast-color) 30%, var(--color-border-400));
+    }
+}
+
+
+// active (viewport hovered): everything fans out to its own measured offset.
+.toaster.--active .toast {
+    height: auto;
+    transform: translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster.--active .toast-content {
+    opacity: 1;
+}
+
+
+// Entering: start off-screen (faded) and let the base transform animate in.
+.toaster .toast.toast--starting {
+    opacity: 0;
+}
+
+.toaster[data-position*='top'] .toast.toast--starting {
+    transform: translateY(-120%);
+}
+
+.toaster[data-position*='bottom'] .toast.toast--starting {
+    transform: translateY(120%);
+}
+
+
+// Leaving: fade, then slide toward the matching viewport edge (or the swipe
+// direction the gesture reported).
+.toaster .toast.toast--ending {
+    opacity: 0;
+}
+
+.toaster[data-position*='top'] .toast.toast--ending {
+    transform: translateY(calc(-100% - var(--toast-inset)));
+}
+
+.toaster[data-position*='bottom'] .toast.toast--ending {
+    transform: translateY(calc(100% + var(--toast-inset)));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='left'] {
+    transform: translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='right'] {
+    transform: translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='up'] {
+    transform: translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)));
+}
+
+.toaster .toast.toast--ending[data-swipe-direction='down'] {
+    transform: translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)));
+}
+
+
+// Following the finger: never ease the transform during a swipe.
+.toast--swiping {
+    transition: none;
+}
+
+
+@keyframes toast-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/components/toast/scss/variables.scss

@@ -0,0 +1,19 @@
+.toaster {
+    --toast-gap: var(--size-300);
+    --toast-inset: var(--size-500);
+    --toast-peek: var(--size-300);
+}
+
+
+.toast {
+    --toast-calc-height: max(var(--toast-frontmost-height, var(--toast-height, 0px)), var(--toast-height, 0px));
+    --toast-calc-offset-y: calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--toast-gap)) + var(--toast-swipe-y, 0px));
+    --toast-color: var(--color-text-300);
+    --toast-height: 0px;
+    --toast-index: 0;
+    --toast-offset-y: 0px;
+    --toast-scale: max(0, 1 - (var(--toast-index, 0) * 0.06));
+    --toast-shrink: calc(1 - var(--toast-scale));
+    --toast-swipe-x: 0px;
+    --toast-swipe-y: 0px;
+}

package/src/components/toast/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>

package/src/components/toast/svg/chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/src/components/toast/svg/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

package/src/components/toast/svg/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/src/components/toast/svg/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>

package/src/components/toast/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/src/components/toast/svg/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/components/toast/svg/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/src/components/toast/svg/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

package/src/components/tooltip/menu.ts

@@ -1,6 +1,6 @@
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import onclick from './onclick';
 
 
@@ -20,21 +20,25 @@ const OMIT_OPTION = ['content'];
 const OMIT_TOOLTIP_CONTENT = ['direction'];
 
 
-export default template.factory<A>(
+export default component<A>(
     (attributes, content) => {
         let options = attributes.options,
             option = attributes.option,
+            state = attributes.state || reactive({ active: false }),
             tooltipContent = attributes?.['tooltip-content'],
             tooltipContentDirection = tooltipContent?.direction || 'nw';
 
         return onclick(
-            omit(attributes, OMIT),
+            { ...omit(attributes, OMIT), state },
             html`
                 ${content}
 
                 <div
                     class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
                     ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                    ${{
+                        inert: () => !state.active
+                    }}
                 >
                     ${options.map((o) => {
                         if (o.href) {

package/src/components/tooltip/onclick.ts

@@ -1,8 +1,7 @@
-import { html, type Attributes } from '@esportsplus/template';
+import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import root from '~/components/root';
-import template from '~/components/template';
 
 
 const OMIT = ['state', 'toggle'];
@@ -41,7 +40,7 @@ function frame() {
 }
 
 
-export default template.factory<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
+export default component<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
     (attributes, content) => {
         let state = attributes.state || reactive({ active: false }),
             toggle = attributes.toggle || false;

package/src/components/tooltip/onhover.ts

@@ -1,7 +1,6 @@
-import { html, Attributes } from '@esportsplus/template';
+import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 
 
 type A = Attributes & { state?: { active: boolean } };
@@ -10,7 +9,7 @@ type A = Attributes & { state?: { active: boolean } };
 const OMIT = ['state'];
 
 
-export default template.factory(
+export default component(
     (attributes: A, content) => {
         let state = attributes.state || reactive({ active: false });
 

package/src/components/typewriter/index.ts

@@ -1,6 +1,5 @@
-import { html } from '@esportsplus/template';
+import { component, html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -8,7 +7,7 @@ import './scss/index.scss';
 const EMPTY_NODE = html` `;
 
 
-export default template.factory(
+export default component(
     function(_, content: string[]) {
         let state = reactive({ text: '' });
 

package/src/css-utilities/index.scss

@@ -15,9 +15,10 @@
 @forward './line-height/scss/index.scss';
 @forward './not-allowed/scss/index.scss';
 @forward './pointer/scss/index.scss';
-@forward './scroller/scss/index.scss';
-@forward './skeleton/scss/index.scss';
+@forward './scroll-fade/scss/index.scss';
+@forward './scrollbar/scss/index.scss';
 @forward './size/scss/index.scss';
+@forward './skeleton/scss/index.scss';
 @forward './text/scss/index.scss';
 @forward './viewport/scss/index.scss';
 @forward './width/scss/index.scss';

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

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

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

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

@@ -0,0 +1,53 @@
+@use 'variables';
+
+.--scrollbar {
+    overflow: auto;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-gutter: stable;
+
+    @supports selector(::-webkit-scrollbar) {
+        scrollbar-color: auto;
+        scrollbar-width: auto;
+
+        &::-webkit-scrollbar {
+            width: var(--scrollbar-width);
+        }
+        &::-webkit-scrollbar-button {
+            display: none;
+            height: 0;
+            width: 0;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-color);
+            border-radius: var(--scrollbar-border-width);
+        }
+    }
+
+    &.--flex-column {
+        overflow-x: hidden;
+    }
+    &.--flex-row {
+        overflow-y: hidden;
+    }
+
+    &-hidden {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &-snap {
+        overflow: auto;
+        overscroll-behavior-x: contain;
+        scroll-snap-type: both mandatory;
+
+        > * {
+            scroll-snap-align: center;
+            scroll-snap-stop: normal;
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+.--scrollbar {
+    --scrollbar-border-width: 1px;
+    --scrollbar-color: var(--color-black-300);
+    --scrollbar-width: 4px;
+}

package/src/themes/dark/index.ts

@@ -1,4 +1,3 @@
-export { default as alert } from './alert';
 export { default as back } from './back';
 export { default as input } from './input';
 export { default as select } from './select';

package/src/tokens/scss/color.scss

@@ -13,9 +13,9 @@ $color: (
         500: oklch(48.45% 0.2617 266.3)
     ),
     'border': (
-        300: oklch(82.15% 0.0368 276.9),
-        400: oklch(78.98% 0.0358 276.6),
-        500: oklch(73.98% 0.0362 278.3)
+        300: oklch(0.9683 0.0069 247.9),
+        400: oklch(0.9288 0.0126 255.51),
+        500: oklch(0.869 0.0198 252.89)
     ),
     'green': (
         300: oklch(87.03% 0.2708 144.9),
@@ -23,9 +23,9 @@ $color: (
         500: oklch(78.97% 0.2560 144.0)
     ),
     'grey': (
-        300: oklch(98.01% 0.0096 252.8),
-        400: oklch(95.33% 0.0162 245.1),
-        500: oklch(89.33% 0.0157 248.0)
+        300: oklch(0.9842 0.0034 247.86),
+        400: oklch(0.9683 0.0069 247.9),
+        500: oklch(0.9288 0.0126 255.51)
     ),
     'purple': (
         300: oklch(53.29% 0.2877 292.5),
@@ -38,19 +38,19 @@ $color: (
         500: oklch(59.10% 0.2413 27.6)
     ),
     'text': (
-        300: oklch(26.89% 0.0510 273.0),
-        400: oklch(24.11% 0.0541 272.6),
-        500: oklch(21.88% 0.0516 271.8)
+        300: oklch(55.1% 0.027 264.364),
+        400: oklch(37.3% 0.034 259.733),
+        500: oklch(21% 0.034 264.665)
     ),
     'white': (
         300: oklch(100% 0 0),
-        400: oklch(100% 0 0),
-        500: oklch(100% 0 0)
+        400: oklch(99.2% 0 0),
+        500: oklch(98.5% 0 0)
     ),
     'yellow': (
-        300: oklch(96.85% 0.1779 110.7),
-        400: oklch(96.32% 0.2125 111.5),
-        500: oklch(90.35% 0.2004 112.3)
+        300: oklch(90.5% 0.182 98.1),
+        400: oklch(85.2% 0.199 91.9),
+        500: oklch(79.5% 0.184 86.0)
     )
 );
 

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

@@ -1,14 +1,15 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=200&minRatio=1.04&maxFontSize=14&maxWidth=800&maxRatio=1.28&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=font-size&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=800
+// Golden-ratio type scale: 400 = 1rem body, each key one φ half-step (×1.272).
+@use 'scale';
+
 $font-size: (
-    100: clamp(0.67rem, -0.67vi + 0.75rem, 0.42rem),
-    200: clamp(0.69rem, -0.42vi + 0.75rem, 0.53rem),
-    300: clamp(0.72rem, -0.1vi + 0.73rem, 0.68rem),
-    400: clamp(0.75rem, 0.33vi + 0.71rem, 0.88rem),
-    500: clamp(0.78rem, 0.91vi + 0.67rem, 1.12rem),
-    600: clamp(0.81rem, 1.66vi + 0.6rem, 1.43rem),
-    700: clamp(0.84rem, 2.64vi + 0.51rem, 1.84rem),
-    800: clamp(0.88rem, 3.92vi + 0.39rem, 2.35rem),
-    900: clamp(0.91rem, 5.58vi + 0.21rem, 3.01rem),
+    100: scale.rem(scale.step(-1.5)),
+    200: scale.rem(scale.step(-1)),
+    300: scale.rem(scale.step(-0.5)),
+    400: scale.rem(scale.step(0)),
+    500: scale.rem(scale.step(0.5)),
+    600: scale.rem(scale.step(1)),
+    700: scale.rem(scale.step(1.5)),
+    800: scale.rem(scale.step(2)),
+    900: scale.rem(scale.step(2.5)),
 );
 
-

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

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

package/src/tokens/scss/scale.scss

@@ -0,0 +1,22 @@
+// LiftKit golden-ratio scale engine (github.com/Chainlift/liftkit)
+// One factor drives every ratio scale: type, size, spacer, line-height.
+@use 'sass:math';
+
+$factor: 1.618;
+
+$eighth: math.pow($factor, 0.125);
+$half: math.pow($factor, 0.5);
+$quarter: math.pow($factor, 0.25);
+$whole: $factor;
+
+@function step($n) {
+    @return math.pow($factor, $n);
+}
+
+@function px($n, $base: 16) {
+    @return math.div(math.round($n * $base * 100), 100) * 1px;
+}
+
+@function rem($n) {
+    @return math.div(math.round($n * 1000), 1000) * 1rem;
+}