@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_slider.scss

@@ -0,0 +1,262 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin slider-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-slider-color-base: var(--sk-#{ $kind }-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-slider
+{
+    // CSS Variables
+    --sk-slider-color-base: var(--sk-primary-base);
+    --sk-slider-thumb-color: var(--sk-slider-color-base);
+    --sk-slider-track-bg: oklch(from var(--sk-neutral-base) l c h / 0.15);
+    --sk-slider-track-size: 0.75rem;
+    --sk-slider-thumb-size: 1.25rem;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    touch-action: none;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Orientation
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-horizontal
+    {
+        width: 100%;
+        min-width: 8rem;
+        height: var(--sk-slider-thumb-size);
+    }
+
+    &.sk-vertical
+    {
+        width: var(--sk-slider-thumb-size);
+        height: 12rem;
+        flex-direction: column;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-xs
+    {
+        --sk-slider-track-size: 0.375rem;
+        --sk-slider-thumb-size: 0.75rem;
+    }
+
+    &.sk-sm
+    {
+        --sk-slider-track-size: 0.5rem;
+        --sk-slider-thumb-size: 1rem;
+    }
+
+    &.sk-md
+    {
+        --sk-slider-track-size: 0.75rem;
+        --sk-slider-thumb-size: 1.25rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-slider-track-size: 1rem;
+        --sk-slider-thumb-size: 1.5rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-slider-track-size: 1.25rem;
+        --sk-slider-thumb-size: 1.75rem;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include slider-kind($kind);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Disabled State
+    //------------------------------------------------------------------------------------------------------------------
+
+    &[data-disabled]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+
+        .sk-slider-thumb
+        {
+            cursor: not-allowed;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Track
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-slider-track
+{
+    position: relative;
+    flex-grow: 1;
+    background: var(--sk-slider-track-bg);
+
+    .sk-horizontal &
+    {
+        height: var(--sk-slider-track-size);
+        width: 100%;
+
+        // Beveled corners for horizontal
+        @include cut-border(
+            calc(var(--sk-slider-track-size) * 0.6),
+            var(--sk-border-width-thin),
+            oklch(from var(--sk-slider-color-base) l c h / 0.3),
+            (top-left bottom-right)
+        );
+    }
+
+    .sk-vertical &
+    {
+        width: var(--sk-slider-track-size);
+        height: 100%;
+
+        // Beveled corners for vertical
+        @include cut-border(
+            calc(var(--sk-slider-track-size) * 0.6),
+            var(--sk-border-width-thin),
+            oklch(from var(--sk-slider-color-base) l c h / 0.3),
+            (top-left bottom-right)
+        );
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Range (filled portion)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-slider-range
+{
+    position: absolute;
+    background: var(--sk-slider-color-base);
+
+    // Subtle gradient for depth
+    background-image: linear-gradient(
+        to bottom,
+        oklch(from var(--sk-slider-color-base) calc(l * 1.15) c h / 0.3),
+        transparent 40%,
+        oklch(from var(--sk-slider-color-base) calc(l * 0.85) c h / 0.2)
+    );
+
+    .sk-horizontal &
+    {
+        height: 100%;
+
+        // Match track's corner pattern (top-left and bottom-right)
+        @include cut-border(
+            calc(var(--sk-slider-track-size) * 0.6),
+            0,
+            transparent,
+            (top-left bottom-right)
+        );
+    }
+
+    .sk-vertical &
+    {
+        width: 100%;
+
+        // Match track's corner pattern (top-left and bottom-right)
+        @include cut-border(
+            calc(var(--sk-slider-track-size) * 0.6),
+            0,
+            transparent,
+            (top-left bottom-right)
+        );
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Thumb
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-slider-thumb
+{
+    display: block;
+    width: var(--sk-slider-thumb-size);
+    height: var(--sk-slider-thumb-size);
+    background: var(--sk-slider-thumb-color);
+    cursor: grab;
+
+    // Beveled corners matching avatar style with darker background and visible border
+    background: oklch(from var(--sk-slider-thumb-color) calc(l * 0.3) c h);
+
+    @include cut-border(
+        calc(var(--sk-slider-thumb-size) * 0.25),
+        var(--sk-border-width-normal),
+        var(--sk-slider-thumb-color),
+        (top-left bottom-right)
+    );
+
+    // Subtle inner shadow for depth
+    box-shadow:
+        inset 0 1px 2px oklch(0 0 0 / 0.1),
+        0 2px 4px oklch(0 0 0 / 0.2);
+
+    transition:
+        box-shadow var(--sk-transition-duration-fast) var(--sk-transition-timing-default),
+        transform var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-slider-thumb-color) calc(l * 0.5) c h);
+
+        box-shadow:
+            inset 0 1px 2px oklch(0 0 0 / 0.1),
+            0 2px 8px oklch(from var(--sk-slider-color-base) l c h / 0.4),
+            0 0 0 3px oklch(from var(--sk-slider-color-base) l c h / 0.15);
+    }
+
+    &:active:not([data-disabled])
+    {
+        background: oklch(from var(--sk-slider-thumb-color) calc(l * 0.7) c h);
+        cursor: grabbing;
+        transform: scale(0.95);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-slider-color-base);
+        outline-offset: 2px;
+    }
+
+    &[data-disabled]
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_spinner.scss

@@ -0,0 +1,331 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Spinner Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin spinner-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-spinner-color: var(--sk-#{ $kind }-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Spinner Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-spinner
+{
+    // CSS Variables
+    --sk-spinner-color: var(--sk-primary-base);
+    --sk-spinner-size: 2rem;
+    --sk-spinner-border-width: var(--sk-border-width-normal);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--sk-spinner-size);
+    height: var(--sk-spinner-size);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-xs
+    {
+        --sk-spinner-size: 1rem;
+        --sk-spinner-border-width: var(--sk-border-width-thin);
+    }
+
+    &.sk-sm
+    {
+        --sk-spinner-size: 1.5rem;
+        --sk-spinner-border-width: var(--sk-border-width-thin);
+    }
+
+    &.sk-md
+    {
+        --sk-spinner-size: 2rem;
+        --sk-spinner-border-width: var(--sk-border-width-normal);
+    }
+
+    &.sk-lg
+    {
+        --sk-spinner-size: 2.5rem;
+        --sk-spinner-border-width: var(--sk-border-width-normal);
+    }
+
+    &.sk-xl
+    {
+        --sk-spinner-size: 3rem;
+        --sk-spinner-border-width: var(--sk-border-width-thick);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include spinner-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Circular Variant - Dual Arc Spinner
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-spinner-circular
+{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    // Pulsing center point
+    &::before
+    {
+        content: '';
+        position: absolute;
+        width: 12%;
+        height: 12%;
+        background: var(--sk-spinner-color);
+        border-radius: 50%;
+        box-shadow: 0 0 12px oklch(from var(--sk-spinner-color) l c h / 0.8);
+        animation: sk-spinner-pulse-center 2s ease-in-out infinite;
+    }
+}
+
+.sk-arc
+{
+    position: absolute;
+    border-radius: 50%;
+    border: var(--sk-spinner-border-width) solid;
+    box-shadow: 0 0 8px oklch(from var(--sk-spinner-color) l c h / 0.5);
+
+    // Translucent full circle track
+    &::before
+    {
+        content: '';
+        position: absolute;
+        inset: calc(var(--sk-spinner-border-width) * -1);
+        border-radius: 50%;
+        border: var(--sk-spinner-border-width) solid oklch(from var(--sk-spinner-color) l c h / 0.15);
+    }
+}
+
+.sk-arc-large
+{
+    width: 85%;
+    height: 85%;
+    border-color: transparent;
+    border-top-color: var(--sk-spinner-color);
+    border-right-color: var(--sk-spinner-color);
+    animation: sk-spinner-arc-large 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.sk-arc-small
+{
+    width: 50%;
+    height: 50%;
+    border-color: transparent;
+    border-top-color: var(--sk-spinner-color);
+    animation: sk-spinner-arc-small 2.4s linear infinite;
+}
+
+@keyframes sk-spinner-arc-large
+{
+    0%
+    {
+        transform: rotate(0deg);
+    }
+
+    40%
+    {
+        transform: rotate(180deg);
+    }
+
+    50%,
+    60%
+    {
+        transform: rotate(180deg);
+    }
+
+    100%
+    {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes sk-spinner-arc-small
+{
+    0%
+    {
+        transform: rotate(0deg);
+    }
+
+    100%
+    {
+        transform: rotate(-360deg);
+    }
+}
+
+@keyframes sk-spinner-pulse-center
+{
+    0%,
+    30%,
+    100%
+    {
+        transform: scale(0.8);
+        opacity: 0.05;
+    }
+
+    // First flash
+    5%
+    {
+        transform: scale(1.4);
+        opacity: 1;
+    }
+
+    10%
+    {
+        transform: scale(1);
+        opacity: 0.2;
+    }
+
+    // Second flash
+    15%
+    {
+        transform: scale(1.4);
+        opacity: 1;
+    }
+
+    20%
+    {
+        transform: scale(1);
+        opacity: 0.2;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Dots Variant - Beveled Square Dots
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-spinner-dots
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--sk-spinner-size) * 0.15);
+    width: 100%;
+    height: 100%;
+}
+
+.sk-dot
+{
+    width: calc(var(--sk-spinner-size) * 0.33);
+    height: calc(var(--sk-spinner-size) * 0.33);
+    background: var(--sk-spinner-color);
+
+    // Beveled corners (top-left and bottom-right)
+    clip-path: polygon(
+        30% 0,
+        100% 0,
+        100% 70%,
+        70% 100%,
+        0 100%,
+        0 30%
+    );
+
+    animation: sk-spinner-dots 1.4s ease-in-out infinite;
+    filter: drop-shadow(0 0 4px oklch(from var(--sk-spinner-color) l c h / 0.5));
+
+    &:nth-child(1)
+    {
+        animation-delay: -0.32s;
+    }
+
+    &:nth-child(2)
+    {
+        animation-delay: -0.16s;
+    }
+
+    &:nth-child(3)
+    {
+        animation-delay: 0s;
+    }
+}
+
+@keyframes sk-spinner-dots
+{
+    0%,
+    80%,
+    100%
+    {
+        transform: scale(0.8);
+        opacity: 0.6;
+    }
+
+    40%
+    {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Folding Variant - Expanding Orbit
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-crosshair-loader {
+    width: var(--sk-spinner-size);
+    aspect-ratio: 1;
+    color: var(--sk-spinner-color);
+    position: relative;
+    background: radial-gradient(calc(var(--sk-spinner-size) * 0.25), currentColor 94%, #0000);
+}
+
+.sk-crosshair-loader:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: radial-gradient(calc(var(--sk-spinner-size) * 0.325) at bottom right, #0000 97%, currentColor) top left,
+    radial-gradient(calc(var(--sk-spinner-size) * 0.325) at bottom left, #0000 97%, currentColor) top right,
+    radial-gradient(calc(var(--sk-spinner-size) * 0.325) at top right, #0000 97%, currentColor) bottom left,
+    radial-gradient(calc(var(--sk-spinner-size) * 0.325) at top left, #0000 97%, currentColor) bottom right;
+    background-size: calc(var(--sk-spinner-size) * 0.5) calc(var(--sk-spinner-size) * 0.5);
+    background-repeat: no-repeat;
+    animation: l18 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
+}
+
+@keyframes l18 {
+    0% {
+        opacity: 0.3;
+    }
+    33% {
+        inset: calc(var(--sk-spinner-size) * -0.25);
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    66% {
+        inset: calc(var(--sk-spinner-size) * -0.25);
+        transform: rotate(90deg);
+        opacity: 1;
+    }
+    100% {
+        inset: 0;
+        transform: rotate(90deg);
+        opacity: 0.3;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------