@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_number-input.scss

@@ -0,0 +1,352 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// NumberInput Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input-wrapper
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-number-input-color-base: var(--sk-neutral-base);
+    --sk-number-input-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-number-input-cut: 0.5rem;
+
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-number-input-color-base: var(--sk-neutral-base);
+        --sk-number-input-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-number-input-color-base: var(--sk-primary-base);
+        --sk-number-input-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-number-input-color-base: var(--sk-accent-base);
+        --sk-number-input-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-number-input-color-base: var(--sk-info-base);
+        --sk-number-input-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-number-input-color-base: var(--sk-success-base);
+        --sk-number-input-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-number-input-color-base: var(--sk-warning-base);
+        --sk-number-input-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-number-input-color-base: var(--sk-danger-base);
+        --sk-number-input-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-number-input-color-base: var(--sk-neon-blue-base);
+        --sk-number-input-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-number-input-color-base: var(--sk-neon-purple-base);
+        --sk-number-input-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-number-input-color-base: var(--sk-neon-orange-base);
+        --sk-number-input-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-number-input-color-base: var(--sk-neon-green-base);
+        --sk-number-input-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-number-input-color-base: var(--sk-neon-mint-base);
+        --sk-number-input-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-number-input-color-base: var(--sk-neon-pink-base);
+        --sk-number-input-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-number-input-color-base: var(--sk-yellow-base);
+        --sk-number-input-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-number-input-color-base: var(--sk-red-base);
+        --sk-number-input-fg: var(--sk-red-text);
+    }
+
+    // Size variants
+    &.sk-sm
+    {
+        --sk-number-input-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        --sk-number-input-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-number-input-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-number-input-cut: 0.7rem;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input
+{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    position: relative;
+
+    @include cut-border(
+        $cut: var(--sk-number-input-cut),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-number-input-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    border: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
+
+    // Transitions
+    transition-property: background, color, border-color, box-shadow;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Focus-within state (brighter background when input focused)
+    &:focus-within
+    {
+        border-color: color-mix(in oklch, var(--sk-number-input-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-number-input-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Hover state
+    &:hover:not(:has(input:disabled))
+    {
+        border-color: color-mix(in oklch, var(--sk-number-input-color-base), white 20%);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Disabled state
+    &:has(input:disabled)
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input-field
+{
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--sk-number-input-fg);
+    font-family: var(--sk-font-family-base);
+    outline: none;
+    cursor: text;
+
+    // Size variants (match input heights)
+    .sk-number-input-wrapper.sk-sm &
+    {
+        height: 2rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 0.875rem;
+    }
+
+    .sk-number-input-wrapper.sk-md &
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1rem;
+    }
+
+    .sk-number-input-wrapper.sk-lg &
+    {
+        height: 3rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.125rem;
+    }
+
+    .sk-number-input-wrapper.sk-xl &
+    {
+        height: 3.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.25rem;
+    }
+
+    &::placeholder
+    {
+        color: color-mix(in oklch, var(--sk-number-input-fg), transparent 50%);
+    }
+
+    &:disabled
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input-steppers
+{
+    display: flex;
+    flex-direction: column;
+    border-left: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input-increment,
+.sk-number-input-decrement
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--sk-number-input-fg);
+    cursor: pointer;
+    transition-property: background, color;
+    transition-duration: var(--sk-transition-duration-base);
+    padding: 0 var(--sk-space-xs);
+
+    // Size variants
+    .sk-number-input-wrapper.sk-sm &
+    {
+        width: 1.5rem;
+        height: 1rem;
+
+        svg
+        {
+            width: 0.75rem;
+            height: 0.75rem;
+        }
+    }
+
+    .sk-number-input-wrapper.sk-md &
+    {
+        width: 2rem;
+        height: 1.25rem;
+
+        svg
+        {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    .sk-number-input-wrapper.sk-lg &
+    {
+        width: 2.25rem;
+        height: 1.5rem;
+
+        svg
+        {
+            width: 1.125rem;
+            height: 1.125rem;
+        }
+    }
+
+    .sk-number-input-wrapper.sk-xl &
+    {
+        width: 2.5rem;
+        height: 1.75rem;
+
+        svg
+        {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+
+    &:hover:not(:disabled)
+    {
+        background: color-mix(
+            in oklch,
+            var(--sk-number-input-color-base),
+            transparent 85%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    &:active:not(:disabled)
+    {
+        background: color-mix(
+            in oklch,
+            var(--sk-number-input-color-base),
+            transparent 70%
+        );
+    }
+
+    &:disabled
+    {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-number-input-increment
+{
+    border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
+
+    // Match the parent's top-right corner cut
+    @include cut-border(
+        $cut: var(--sk-number-input-cut),
+        $corners: (top-right)
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_page.scss

@@ -0,0 +1,98 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Page Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-page
+{
+    // CSS Variables
+    --sk-page-header-height: auto;
+    --sk-page-footer-height: auto;
+    --sk-page-sidebar-width: 16rem;
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--sk-background);
+    color: var(--sk-foreground);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Header
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-header
+    {
+        flex-shrink: 0;
+        z-index: 10;
+    }
+
+    &.sk-fixed-header
+    {
+        .sk-page-header
+        {
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Main (Sidebar + Content)
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-main
+    {
+        display: flex;
+        flex: 1;
+        min-height: 0; // Allow flex item to shrink below content size
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Sidebar
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-sidebar
+    {
+        flex-shrink: 0;
+        width: var(--sk-page-sidebar-width);
+        overflow-y: auto;
+    }
+
+    &.sk-sidebar-right
+    {
+        .sk-page-main
+        {
+            flex-direction: row-reverse;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Content
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-content
+    {
+        flex: 1;
+        min-width: 0; // Prevent content from overflowing
+        overflow-y: auto;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Footer
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-page-footer
+    {
+        flex-shrink: 0;
+        z-index: 10;
+    }
+
+    &.sk-fixed-footer
+    {
+        .sk-page-footer
+        {
+            position: sticky;
+            bottom: 0;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------