@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_radio.scss

@@ -0,0 +1,255 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Radio Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-radio-group
+{
+    display: flex;
+    gap: var(--sk-space-md);
+
+    &.sk-horizontal
+    {
+        flex-direction: row;
+    }
+
+    &.sk-vertical
+    {
+        flex-direction: column;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-radio-wrapper
+{
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    cursor: pointer;
+
+    &.sk-disabled
+    {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-radio
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-radio-color-base: var(--sk-neutral-base);
+    --sk-radio-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-radio-cut: 0.3rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    @include cut-border(
+        $cut: var(--sk-radio-cut),
+        $corners: (top-left top-right bottom-right bottom-left)
+    );
+
+    // Base styling (unchecked) - darker than checked
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-radio-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-radio-fg);
+    border: var(--sk-border-width-thin) solid var(--sk-radio-color-base);
+
+    // Checked state - brighter background
+    &[data-state="checked"]
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-radio-color-base) 75%, transparent 25%),
+            #000 38%
+        );
+    }
+
+    // Transitions
+    transition-property: background, color, border-color, box-shadow;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Size variants
+    &.sk-sm
+    {
+        width: 1rem;
+        height: 1rem;
+        --sk-radio-cut: 0.24rem;
+    }
+
+    &.sk-md
+    {
+        width: 1.25rem;
+        height: 1.25rem;
+        --sk-radio-cut: 0.3rem;
+    }
+
+    &.sk-lg
+    {
+        width: 1.5rem;
+        height: 1.5rem;
+        --sk-radio-cut: 0.36rem;
+    }
+
+    &.sk-xl
+    {
+        width: 1.75rem;
+        height: 1.75rem;
+        --sk-radio-cut: 0.42rem;
+    }
+
+    // Hover state - calculate from color-base for custom color support
+    &:hover:not(:disabled)
+    {
+        border-color: color-mix(in oklch, var(--sk-radio-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-radio-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-radio-color-base: var(--sk-neutral-base);
+        --sk-radio-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-radio-color-base: var(--sk-primary-base);
+        --sk-radio-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-radio-color-base: var(--sk-accent-base);
+        --sk-radio-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-radio-color-base: var(--sk-info-base);
+        --sk-radio-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-radio-color-base: var(--sk-success-base);
+        --sk-radio-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-radio-color-base: var(--sk-warning-base);
+        --sk-radio-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-radio-color-base: var(--sk-danger-base);
+        --sk-radio-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-radio-color-base: var(--sk-neon-blue-base);
+        --sk-radio-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-radio-color-base: var(--sk-neon-purple-base);
+        --sk-radio-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-radio-color-base: var(--sk-neon-orange-base);
+        --sk-radio-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-radio-color-base: var(--sk-neon-green-base);
+        --sk-radio-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-radio-color-base: var(--sk-neon-mint-base);
+        --sk-radio-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-radio-color-base: var(--sk-neon-pink-base);
+        --sk-radio-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-radio-color-base: var(--sk-yellow-base);
+        --sk-radio-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-radio-color-base: var(--sk-red-base);
+        --sk-radio-fg: var(--sk-red-text);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-primary-base);
+        outline-offset: 2px;
+    }
+
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-radio-indicator
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    height: 50%;
+    background: currentColor;
+
+    // Make the indicator octagonal to match the radio button
+    // Use smaller cuts relative to indicator size to maintain octagon shape
+    @include cut-border(
+        $cut: calc(var(--sk-radio-cut) * 0.4),
+        $corners: (top-left top-right bottom-right bottom-left)
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-radio-label
+{
+    user-select: none;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_sidebar.scss

@@ -0,0 +1,92 @@
+
+//----------------------------------------------------------------------------------------------------------------------
+// Sidebar Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Sidebar Container
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-sidebar
+{
+    width: var(--sk-sidebar-width, 180px);
+    flex-shrink: 0;
+
+    .sk-sidebar-nav
+    {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Sidebar Section
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-sidebar-section
+{
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .sk-sidebar-section-title
+    {
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: color-mix(in oklch, var(--sk-neutral-text), transparent 40%);
+        margin: 0.5rem 0 0.5rem 0;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Sidebar Item
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-sidebar-item
+{
+    color: var(--sk-neutral-text);
+    text-decoration: none;
+    padding: 0.5rem 0.75rem;
+    transition: all var(--sk-transition-fast);
+    font-size: 0.875rem;
+    cursor: pointer;
+    display: block;
+
+    &:hover
+    {
+        background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
+        color: var(--sk-accent-base);
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            0% 100%,
+            0% 10px
+        );
+    }
+
+    &.sk-active,
+    &.router-link-active
+    {
+        background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
+        color: var(--sk-primary-base);
+        font-weight: 600;
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            0% 100%,
+            0% 10px
+        );
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_skeleton.scss

@@ -0,0 +1,138 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Skeleton Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Skeleton
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-skeleton
+{
+    // CSS Variables
+    --sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
+    --sk-skeleton-highlight: oklch(from var(--sk-neutral-base) calc(l * 1.3) c h / 0.25);
+    --sk-skeleton-bevel: 0.35em;
+
+    position: relative;
+    display: block;
+    background: var(--sk-skeleton-base);
+    overflow: hidden;
+
+    // Default dimensions
+    min-height: 1em;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Shape Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Text variant - beveled corners (top-left and bottom-right) for text lines
+    &.sk-text
+    {
+        --sk-skeleton-bevel: 0.35em;
+        height: 1em;
+        min-width: 2em;
+        clip-path: polygon(
+            var(--sk-skeleton-bevel) 0,
+            100% 0,
+            100% calc(100% - var(--sk-skeleton-bevel)),
+            calc(100% - var(--sk-skeleton-bevel)) 100%,
+            0 100%,
+            0 var(--sk-skeleton-bevel)
+        );
+    }
+
+    // Circular variant - perfect circle (avatar, icon placeholder)
+    &.sk-circular
+    {
+        border-radius: 50%;
+        aspect-ratio: 1;
+    }
+
+    // Square variant - beveled top-left and bottom-right (avatar placeholder)
+    &.sk-square
+    {
+        --sk-skeleton-bevel: var(--sk-radius-lg);
+        aspect-ratio: 1;
+        clip-path: polygon(
+            var(--sk-skeleton-bevel) 0,
+            100% 0,
+            100% calc(100% - var(--sk-skeleton-bevel)),
+            calc(100% - var(--sk-skeleton-bevel)) 100%,
+            0 100%,
+            0 var(--sk-skeleton-bevel)
+        );
+    }
+
+    // Rectangular variant - beveled bottom-right corner only (card, image placeholder)
+    &.sk-rectangular
+    {
+        --sk-skeleton-bevel: var(--sk-radius-lg);
+        clip-path: polygon(
+            0 0,
+            100% 0,
+            100% calc(100% - var(--sk-skeleton-bevel)),
+            calc(100% - var(--sk-skeleton-bevel)) 100%,
+            0 100%
+        );
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Shimmer Animation
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-shimmer::after
+    {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+            90deg,
+            transparent 0%,
+            var(--sk-skeleton-highlight) 50%,
+            transparent 100%
+        );
+        animation: sk-skeleton-shimmer 1.5s ease-in-out infinite;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Pulse Animation
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-pulse
+    {
+        animation: sk-skeleton-pulse 1.5s ease-in-out infinite;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Animations
+//----------------------------------------------------------------------------------------------------------------------
+
+@keyframes sk-skeleton-shimmer
+{
+    0%
+    {
+        transform: translateX(-100%);
+    }
+
+    100%
+    {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes sk-skeleton-pulse
+{
+    0%,
+    100%
+    {
+        opacity: 1;
+    }
+
+    50%
+    {
+        opacity: 0.4;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------