@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_switch.scss

@@ -0,0 +1,370 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-wrapper
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Track width (varies by size)
+    --sk-switch-track-width: 36px;
+
+    /// Track height (varies by size)
+    --sk-switch-track-height: 20px;
+
+    /// Thumb size (circle diameter, varies by size)
+    --sk-switch-thumb-size: 12px;
+
+    /// Gap between track edge and thumb
+    --sk-switch-gap: 2px;
+
+    /// Cut corner size factor (height / factor = cut size)
+    --sk-switch-radius-factor: 4;
+
+    /// Cut corner size for track (calculated from height)
+    --sk-switch-cut-corner: calc(var(--sk-switch-track-height) / var(--sk-switch-radius-factor));
+
+    /// Label spacing from switch
+    --sk-switch-label-gap: 0.5rem;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Transition Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Transition duration for thumb movement
+    --sk-switch-transition-duration: 150ms;
+
+    /// Transition easing (sharp digital snap)
+    --sk-switch-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // State Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Disabled opacity
+    --sk-switch-disabled-opacity: var(--sk-opacity-disabled);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Base color for the switch (set by kind)
+    --sk-switch-color-base: var(--sk-primary-base);
+
+    /// Foreground color (for contrast calculation if needed)
+    --sk-switch-fg: var(--sk-primary-text);
+
+    /// Thumb background color (matches border)
+    --sk-switch-thumb-color: color-mix(in oklch, var(--sk-switch-color-base), black 20%);
+
+    /// Thumb border color
+    --sk-switch-thumb-border-color: color-mix(in oklch, var(--sk-switch-color-base), black 20%);
+
+    /// Thumb border width
+    --sk-switch-thumb-border-width: 1px;
+
+    /// Thumb cut corner size factor (thumb size / factor = cut size)
+    --sk-switch-thumb-radius-factor: 4;
+
+    /// Thumb cut corner size (calculated from thumb size)
+    --sk-switch-thumb-cut-corner: calc(var(--sk-switch-thumb-size) / var(--sk-switch-thumb-radius-factor));
+
+    /// Track border width
+    --sk-switch-track-border-width: 1px;
+
+    /// Track border color
+    --sk-switch-track-border-color: var(--sk-switch-color-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Wrapper (contains switch + label)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-wrapper
+{
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sk-switch-label-gap);
+    cursor: pointer;
+
+    // Disable cursor when switch is disabled
+    &:has(.sk-switch:disabled)
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Track (SwitchRoot)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch
+{
+    position: relative;
+    width: var(--sk-switch-track-width);
+    height: var(--sk-switch-track-height);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+
+    // Unchecked state: darker background (matches checkbox/radio)
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-switch-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+
+    // Transitions
+    transition-property: background, border-color;
+    transition-duration: var(--sk-switch-transition-duration);
+    transition-timing-function: var(--sk-switch-transition-easing);
+
+    // Apply cut-border mixin for beveled corners with border
+    @include cut-border(
+        $cut: var(--sk-switch-cut-corner),
+        $border-width: var(--sk-switch-track-border-width),
+        $border-color: var(--sk-switch-track-border-color),
+        $corners: (top-left bottom-right)
+    );
+
+    // Checked state: brighter background (matches checkbox/radio)
+    &[data-state="checked"]
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-switch-color-base) 75%, transparent 25%),
+            #000 38%
+        );
+    }
+
+    // Hover state - brighter background (matches checkbox/radio)
+    &:hover:not([data-disabled])
+    {
+        border-color: color-mix(in oklch, var(--sk-switch-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-switch-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Disabled state
+    &[data-disabled]
+    {
+        opacity: var(--sk-switch-disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    // Focus visible styles
+    &:focus-visible
+    {
+        outline: 2px solid var(--sk-focus-ring-color);
+        outline-offset: 2px;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Thumb (moving square with cut corners)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-thumb
+{
+    display: block;
+    width: var(--sk-switch-thumb-size);
+    height: var(--sk-switch-thumb-size);
+    background-color: var(--sk-switch-thumb-color);
+    position: relative;
+
+    // Apply cut-border mixin for beveled corners with border
+    @include cut-border(
+        $cut: var(--sk-switch-thumb-cut-corner),
+        $border-width: var(--sk-switch-thumb-border-width),
+        $border-color: var(--sk-switch-thumb-border-color),
+        $corners: (top-left bottom-right)
+    );
+
+    // Position at left when unchecked
+    transform: translateX(var(--sk-switch-gap));
+
+    // Digital glow effect (off state)
+    box-shadow: 0 0 0 0 transparent;
+
+    // Crisp digital transition
+    transition: transform var(--sk-switch-transition-duration) var(--sk-switch-transition-easing),
+                border-color var(--sk-switch-transition-duration) var(--sk-switch-transition-easing),
+                background-color var(--sk-switch-transition-duration) var(--sk-switch-transition-easing),
+                box-shadow var(--sk-switch-transition-duration) var(--sk-switch-transition-easing);
+
+    // Move to right and use text color when checked (matches checkbox/radio indicators)
+    [data-state="checked"] &
+    {
+        transform: translateX(calc(var(--sk-switch-track-width) - var(--sk-switch-thumb-size) - var(--sk-switch-gap) - (var(--sk-switch-track-border-width) * 2)));
+        background-color: var(--sk-switch-fg);
+
+        // Digital glow pulse when activated
+        box-shadow: 0 0 6px 1px color-mix(in oklch, var(--sk-switch-fg), transparent 65%);
+
+        // Update border color for modern browsers
+        @supports (corner-shape: bevel)
+        {
+            border-color: var(--sk-switch-fg);
+        }
+
+        // Update ::before pseudo-element border for fallback browsers
+        @supports not (corner-shape: bevel)
+        {
+            &::before
+            {
+                background-color: var(--sk-switch-fg);
+            }
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Switch Label
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-label
+{
+    font-size: 0.875rem;
+    line-height: 1.5;
+    user-select: none;
+    cursor: pointer;
+
+    // Disabled label styling
+    .sk-switch-wrapper:has(.sk-switch:disabled) &
+    {
+        opacity: var(--sk-switch-disabled-opacity);
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Label Transition Animation
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-label-fade-enter-active,
+.sk-switch-label-fade-leave-active
+{
+    transition: opacity var(--sk-transition-fast) var(--sk-switch-transition-easing);
+}
+
+.sk-switch-label-fade-enter-from,
+.sk-switch-label-fade-leave-to
+{
+    opacity: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-wrapper
+{
+    &:has(.sk-switch.sk-xs)
+    {
+        --sk-switch-track-width: 24px;
+        --sk-switch-track-height: 14px;
+        --sk-switch-thumb-size: 8px;
+    }
+
+    &:has(.sk-switch.sk-sm)
+    {
+        --sk-switch-track-width: 28px;
+        --sk-switch-track-height: 16px;
+        --sk-switch-thumb-size: 8px;
+    }
+
+    &:has(.sk-switch.sk-md)
+    {
+        --sk-switch-track-width: 36px;
+        --sk-switch-track-height: 20px;
+        --sk-switch-thumb-size: 12px;
+    }
+
+    &:has(.sk-switch.sk-lg)
+    {
+        --sk-switch-track-width: 44px;
+        --sk-switch-track-height: 24px;
+        --sk-switch-thumb-size: 16px;
+    }
+
+    &:has(.sk-switch.sk-xl)
+    {
+        --sk-switch-track-width: 52px;
+        --sk-switch-track-height: 28px;
+        --sk-switch-thumb-size: 20px;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Color Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch
+{
+    @each $kind in $kinds
+    {
+        &.sk-#{"" + $kind}
+        {
+            --sk-switch-color-base: var(--sk-#{$kind}-base);
+            --sk-switch-fg: var(--sk-#{$kind}-text);
+
+            // Update colors based on this kind
+            --sk-switch-track-border-color: var(--sk-#{$kind}-base);
+            --sk-switch-thumb-color: color-mix(in oklch, var(--sk-#{$kind}-base), black 20%);
+            --sk-switch-thumb-border-color: color-mix(in oklch, var(--sk-#{$kind}-base), black 20%);
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Thumb-Specific Kind Color Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-switch-thumb
+{
+    @each $kind in $kinds
+    {
+        &.sk-thumb-#{"" + $kind}
+        {
+            // Override thumb colors with thumb-specific kind
+            --sk-switch-thumb-color: color-mix(in oklch, var(--sk-#{$kind}-base), black 20%);
+            --sk-switch-thumb-border-color: color-mix(in oklch, var(--sk-#{$kind}-base), black 20%);
+
+            // When checked, use text color (matches checkbox/radio indicators)
+            [data-state="checked"] &
+            {
+                background-color: var(--sk-#{$kind}-text);
+
+                // Update border color for modern browsers
+                @supports (corner-shape: bevel)
+                {
+                    border-color: var(--sk-#{$kind}-text);
+                }
+
+                // Update ::before pseudo-element border for fallback browsers
+                @supports not (corner-shape: bevel)
+                {
+                    &::before
+                    {
+                        background-color: var(--sk-#{$kind}-text);
+                    }
+                }
+            }
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------