@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_card.scss

@@ -0,0 +1,141 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Card Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Card Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-card
+{
+    /// Padding for card sections
+    --sk-card-padding: 1rem;
+
+    /// Gap between card sections
+    --sk-card-gap: 0.5rem;
+
+    /// Header/footer reduced padding (less vertical padding)
+    --sk-card-header-padding-vertical: 0.5rem;
+    --sk-card-footer-padding-vertical: 0.5rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Card Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-panel.sk-card
+{
+    // Card uses flexbox to layout sections vertically
+    display: flex;
+    flex-direction: column;
+
+    // Remove panel's default padding since we handle it per-section
+    --sk-panel-padding: 0;
+    padding: 0;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Card Header
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-card-header
+    {
+        padding: var(--sk-card-header-padding-vertical) var(--sk-card-padding);
+        //border-bottom: var(--sk-border-width-thin) solid oklch(from currentColor l c h / 0.3);
+        background-color: oklch(from currentColor l c h / 0.2);
+        margin: 2px;
+    }
+
+    .sk-card-title
+    {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        line-height: 1.4;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Card Media
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-card-media
+    {
+        // Media has no padding - images/videos should fill width
+        padding: 0;
+        margin: 0 2px;
+        overflow: hidden;
+
+        // Handle images and videos
+        img,
+        video
+        {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Card Content
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-card-content
+    {
+        padding: var(--sk-card-padding);
+        flex: 1; // Grow to fill available space
+        min-height: 0; // Allow flex item to shrink below content size for scrolling
+
+        // Scrollable content uses .sk-panel-scroll-content class from panel
+        // which provides overflow, margin-bottom, and scrollbar styling
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Card Footer
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-card-footer
+    {
+        padding: var(--sk-card-footer-padding-vertical) var(--sk-card-padding);
+        background-color: oklch(from currentColor l c h / 0.05);
+
+        // Apply cut-border mixin for beveled corner (bottom-right only)
+        @include cut-border(
+            $cut: var(--sk-panel-cut-size),
+            $border-width: 0,
+            $border-color: tranparent,
+            $corners: (bottom-right)
+        );
+
+        border-top: var(--sk-border-width-thin) solid oklch(from currentColor l c h / 0.1);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Special cases: combine header/footer with media
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Remove bottom border from header if followed by media
+    .sk-card-header + .sk-card-media
+    {
+        margin-top: 0;
+
+        ~ .sk-card-header
+        {
+            border-bottom: none;
+        }
+    }
+
+    // Remove top border from footer if preceded by media
+    .sk-card-media + .sk-card-footer
+    {
+        margin-top: 0;
+
+        ~ .sk-card-footer
+        {
+            border-top: none;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_checkbox.scss

@@ -0,0 +1,232 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Checkbox Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-checkbox-wrapper
+{
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    cursor: pointer;
+
+    &.sk-disabled
+    {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-checkbox
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-checkbox-color-base: var(--sk-neutral-base);
+    --sk-checkbox-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-checkbox-cut: 0.25rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    @include cut-border(var(--sk-checkbox-cut), var(--sk-bevel));
+
+    // Base styling (unchecked) - darker than checked
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-checkbox-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-checkbox-fg);
+    border: var(--sk-border-width-thin) solid var(--sk-checkbox-color-base);
+
+    // Checked state - brighter background
+    &[data-state="checked"]
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-checkbox-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-checkbox-cut: 0.2rem;
+    }
+
+    &.sk-md
+    {
+        width: 1.25rem;
+        height: 1.25rem;
+        --sk-checkbox-cut: 0.25rem;
+    }
+
+    &.sk-lg
+    {
+        width: 1.5rem;
+        height: 1.5rem;
+        --sk-checkbox-cut: 0.3rem;
+    }
+
+    &.sk-xl
+    {
+        width: 1.75rem;
+        height: 1.75rem;
+        --sk-checkbox-cut: 0.35rem;
+    }
+
+    // Hover state - calculate from color-base for custom color support
+    &:hover:not(:disabled)
+    {
+        border-color: color-mix(in oklch, var(--sk-checkbox-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-checkbox-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-checkbox-color-base: var(--sk-neutral-base);
+        --sk-checkbox-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-checkbox-color-base: var(--sk-primary-base);
+        --sk-checkbox-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-checkbox-color-base: var(--sk-accent-base);
+        --sk-checkbox-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-checkbox-color-base: var(--sk-info-base);
+        --sk-checkbox-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-checkbox-color-base: var(--sk-success-base);
+        --sk-checkbox-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-checkbox-color-base: var(--sk-warning-base);
+        --sk-checkbox-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-checkbox-color-base: var(--sk-danger-base);
+        --sk-checkbox-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-checkbox-color-base: var(--sk-neon-blue-base);
+        --sk-checkbox-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-checkbox-color-base: var(--sk-neon-purple-base);
+        --sk-checkbox-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-checkbox-color-base: var(--sk-neon-orange-base);
+        --sk-checkbox-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-checkbox-color-base: var(--sk-neon-green-base);
+        --sk-checkbox-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-checkbox-color-base: var(--sk-neon-mint-base);
+        --sk-checkbox-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-checkbox-color-base: var(--sk-neon-pink-base);
+        --sk-checkbox-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-checkbox-color-base: var(--sk-yellow-base);
+        --sk-checkbox-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-checkbox-color-base: var(--sk-red-base);
+        --sk-checkbox-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-checkbox-indicator
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.sk-checkbox-icon
+{
+    width: 70%;
+    height: 70%;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-checkbox-label
+{
+    user-select: none;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_collapsible.scss

@@ -0,0 +1,158 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Collapsible Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Collapsible Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-collapsible
+{
+    // Color tokens (can be overridden by custom colors via component)
+    --sk-collapsible-color-base: var(--sk-neutral-base);
+    --sk-collapsible-fg: var(--sk-neutral-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-sm);
+    width: 100%;
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-collapsible-color-base: var(--sk-neutral-base);
+        --sk-collapsible-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-collapsible-color-base: var(--sk-primary-base);
+        --sk-collapsible-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-collapsible-color-base: var(--sk-accent-base);
+        --sk-collapsible-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-collapsible-color-base: var(--sk-info-base);
+        --sk-collapsible-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-collapsible-color-base: var(--sk-success-base);
+        --sk-collapsible-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-collapsible-color-base: var(--sk-warning-base);
+        --sk-collapsible-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-collapsible-color-base: var(--sk-danger-base);
+        --sk-collapsible-fg: var(--sk-danger-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Collapsible Chevron
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-collapsible-chevron
+{
+    transition: transform var(--sk-transition-duration-normal) ease;
+
+    &.sk-open
+    {
+        transform: rotate(180deg);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Collapsible Content
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-collapsible-content
+{
+    overflow: hidden;
+    width: 100%;
+
+    // Slide down animation using RekaUI's CSS variable
+    &[data-state='open']
+    {
+        animation: sk-collapsible-expand var(--sk-transition-duration-normal) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-collapsible-collapse var(--sk-transition-duration-normal) ease-in;
+    }
+}
+
+.sk-collapsible-content-inner
+{
+    // Background color - darkened with transparency
+    --sk-collapsible-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-collapsible-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    padding: var(--sk-space-md) var(--sk-space-lg);
+    width: 100%;
+
+    @include cut-border(
+        $cut: 0.625rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-collapsible-color-base),
+        $corners: (top-left)
+    );
+
+    background: var(--sk-collapsible-bg);
+    color: color-mix(in oklch, var(--sk-collapsible-fg), black 15%);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Animations
+//----------------------------------------------------------------------------------------------------------------------
+
+@keyframes sk-collapsible-expand
+{
+    from
+    {
+        height: 0;
+        opacity: 0;
+    }
+
+    to
+    {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+}
+
+@keyframes sk-collapsible-collapse
+{
+    from
+    {
+        height: var(--reka-collapsible-content-height);
+        opacity: 1;
+    }
+
+    to
+    {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_divider.scss

@@ -0,0 +1,121 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Divider Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Divider Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-divider
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width for the divider line (references global foundation token)
+    --sk-divider-border-width: var(--sk-border-width-thin);
+
+    /// Spacing around horizontal dividers
+    --sk-divider-spacing-vertical: var(--sk-space-md);
+
+    /// Spacing around vertical dividers
+    --sk-divider-spacing-horizontal: var(--sk-space-md);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Divider color - uses neutral by default, overridden by kinds
+    --sk-divider-color: var(--sk-neutral-base);
+
+    /// Border color - uses base semantic color (opacity controlled by CSS opacity property)
+    --sk-divider-border-color: var(--sk-divider-color);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin divider-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        --sk-divider-color: var(--sk-#{ $kind }-base);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Divider Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-divider
+{
+    // Reset default hr styles
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    // Base appearance
+    border-style: solid;
+    border-color: var(--sk-divider-border-color);
+    opacity: 0.5;
+
+    // Override list marker color to match component kind
+    // Uses generic --sk-kind-color set by kind mixins
+    ul li::marker
+    {
+        color: var(--sk-kind-color, var(--sk-divider-color));
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Orientation: Horizontal (default)
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-horizontal
+    {
+        width: 100%;
+        height: 0;
+        border-top-width: var(--sk-divider-border-width);
+        margin-top: var(--sk-divider-spacing-vertical);
+        margin-bottom: var(--sk-divider-spacing-vertical);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Orientation: Vertical
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-vertical
+    {
+        width: 0;
+        height: auto;
+        align-self: stretch;
+        border-left-width: var(--sk-divider-border-width);
+        margin-left: var(--sk-divider-spacing-horizontal);
+        margin-right: var(--sk-divider-spacing-horizontal);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Subtle
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-subtle
+    {
+        opacity: var(--sk-opacity-subtle);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include divider-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------