@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_modal.scss

@@ -0,0 +1,329 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-content
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Internal padding for modal sections
+    --sk-modal-padding: 1rem;
+
+    /// Header/footer reduced padding (less vertical padding, matches card)
+    --sk-modal-header-padding-vertical: 0.5rem;
+    --sk-modal-footer-padding-vertical: 0.5rem;
+
+    /// Gap between header elements
+    --sk-modal-header-gap: 0.75rem;
+
+    /// Gap between footer buttons
+    --sk-modal-footer-gap: 0.5rem;
+
+    /// Cut size for beveled corner
+    --sk-modal-cut-size: 1rem;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Glow Effect Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Glow effect blur radius
+    --sk-modal-glow-size: 12px;
+
+    /// Glow effect opacity
+    --sk-modal-glow-opacity: 0.3;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width
+    --sk-modal-border-width: var(--sk-border-width-thin);
+
+    /// Dynamic border color (set by kinds)
+    --sk-modal-border-color: currentColor;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Generic Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+    // Uses the same color system as panels for consistency
+
+    /// Base color - the bright semantic color used for borders and accents
+    --sk-modal-color-base: var(--sk-neutral-base);
+
+    /// Foreground/text color
+    --sk-modal-fg: var(--sk-neutral-text);
+
+    /// Background color - darkened version of base color (same formula as panels)
+    --sk-modal-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-modal-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Base border color - uses the bright base color directly
+    --sk-modal-border-base: var(--sk-modal-color-base);
+
+    /// Inner glow effect
+    --sk-modal-glow: inset 0 0 var(--sk-modal-glow-size)
+        oklch(from var(--sk-modal-color-base) l c h / var(--sk-modal-glow-opacity));
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin modal-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        // Override base color tokens for this kind
+        --sk-modal-color-base: var(--sk-#{ $kind }-base);
+        --sk-modal-fg: var(--sk-#{ $kind }-text);
+
+        // Set dynamic border color
+        --sk-modal-border-color: var(--sk-modal-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-modal-bg);
+        color: var(--sk-modal-fg);
+
+        // Apply inner glow
+        box-shadow: var(--sk-modal-glow), var(--sk-shadow-2xl);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Overlay Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-overlay
+{
+    position: fixed;
+    inset: 0;
+    background: oklch(0 0 0 / 0.75);
+    z-index: 50;
+    backdrop-filter: blur(2px);
+
+    // Overlay animation
+    &[data-state='open']
+    {
+        animation: sk-modal-overlay-show var(--sk-transition-duration-base) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-modal-overlay-hide var(--sk-transition-duration-base) ease-in;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Content (main container)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-content
+{
+    // Apply cut-border mixin for beveled corner
+    @include cut-border(
+        $cut: var(--sk-modal-cut-size),
+        $border-width: var(--sk-modal-border-width),
+        $border-color: var(--sk-modal-border-color),
+        $corners: (bottom-right)
+    );
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 51;
+
+    display: flex;
+    flex-direction: column;
+    max-height: 85vh;
+    max-width: 90vw;
+
+    // Default background/color (will be overridden by kinds)
+    background-color: var(--sk-modal-bg);
+    color: var(--sk-modal-fg);
+    box-shadow: var(--sk-modal-glow), var(--sk-shadow-2xl);
+
+    // Content animation
+    &[data-state='open']
+    {
+        animation: sk-modal-content-show var(--sk-transition-duration-base) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-modal-content-hide var(--sk-transition-duration-base) ease-in;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-sm
+    {
+        width: 24rem;
+        --sk-modal-cut-size: 0.75rem;
+    }
+
+    &.sk-md
+    {
+        width: 32rem;
+        --sk-modal-cut-size: 1rem;
+    }
+
+    &.sk-lg
+    {
+        width: 48rem;
+        --sk-modal-cut-size: 1.25rem;
+    }
+
+    &.sk-xl
+    {
+        width: 64rem;
+        --sk-modal-cut-size: 1.5rem;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include modal-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Header (matches card header styling)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-header
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sk-modal-header-gap);
+    padding: var(--sk-modal-header-padding-vertical) var(--sk-modal-padding);
+    margin: 2px;
+    background-color: oklch(from currentColor l c h / 0.2);
+}
+
+.sk-modal-title
+{
+    flex: 1;
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.sk-modal-close
+{
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Body
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-body
+{
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--sk-modal-padding);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Modal Footer
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-modal-footer
+{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sk-modal-footer-gap);
+    padding: var(--sk-modal-footer-padding-vertical) var(--sk-modal-padding);
+    border-top: var(--sk-modal-border-width) solid oklch(from currentColor l c h / 0.2);
+    background-color: oklch(from currentColor l c h / 0.05);
+
+    // Apply cut-border to match the modal's corner
+    @include cut-border(
+        $cut: var(--sk-modal-cut-size),
+        $border-width: 0,
+        $border-color: transparent,
+        $corners: (bottom-right)
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Animations
+//----------------------------------------------------------------------------------------------------------------------
+
+@keyframes sk-modal-overlay-show
+{
+    from
+    {
+        opacity: 0;
+    }
+
+    to
+    {
+        opacity: 1;
+    }
+}
+
+@keyframes sk-modal-overlay-hide
+{
+    from
+    {
+        opacity: 1;
+    }
+
+    to
+    {
+        opacity: 0;
+    }
+}
+
+@keyframes sk-modal-content-show
+{
+    from
+    {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+
+    to
+    {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+@keyframes sk-modal-content-hide
+{
+    from
+    {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    to
+    {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_navbar.scss

@@ -0,0 +1,258 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NavBar Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// NavBar Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-navbar
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Internal padding for navbar content
+    --sk-navbar-padding-y: 0.75rem;
+    --sk-navbar-padding-x: 1rem;
+
+    /// Navbar height
+    --sk-navbar-height: 4rem;
+
+    /// Border radius calculation factor (references global token for consistency)
+    --sk-navbar-radius-factor: var(--sk-border-radius-factor);
+
+    /// Cut size for beveled corners (height / factor)
+    --sk-navbar-cut-size: calc(var(--sk-navbar-height) / var(--sk-navbar-radius-factor));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width (references global foundation token)
+    --sk-navbar-border-width: var(--sk-border-width-thin);
+
+    /// Dynamic border color (set by kinds, uses currentColor as fallback)
+    --sk-navbar-border-color: currentColor;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Glow Effect Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Glow effect blur radius
+    --sk-navbar-glow-size: 12px;
+
+    /// Glow effect opacity
+    --sk-navbar-glow-opacity: 0.3;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Generic Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Base color - the bright semantic color used for borders and as source for backgrounds
+    --sk-navbar-color-base: var(--sk-neutral-base);
+
+    /// Foreground/text color - calculated for optimal contrast against darkened backgrounds
+    --sk-navbar-fg: var(--sk-neutral-text);
+
+    /// Background color - darkened version of base color
+    --sk-navbar-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-navbar-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Backdrop filter for navbar - applies a blur effect to content behind the navbar
+    --sk-navbar-backdrop-filter: blur(7px);
+
+    /// Base border color - uses the bright base color directly for vibrant edges
+    --sk-navbar-border-base: var(--sk-navbar-color-base);
+
+    /// Inner glow effect - creates ambient lighting inside the navbar
+    --sk-navbar-glow: inset 0 0 var(--sk-navbar-glow-size)
+        oklch(from var(--sk-navbar-color-base) l c h / var(--sk-navbar-glow-opacity));
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin navbar-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        // Override base color tokens for this kind
+        --sk-navbar-color-base: var(--sk-#{ $kind }-base);
+        --sk-navbar-fg: var(--sk-#{ $kind }-text);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-navbar-border-color: var(--sk-navbar-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-navbar-bg);
+        color: var(--sk-navbar-fg);
+
+        // Apply inner glow
+        box-shadow: var(--sk-navbar-glow);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base NavBar Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-navbar
+{
+    // Base structure
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+
+    backdrop-filter: var(--sk-navbar-backdrop-filter);
+
+    // Typography
+    font-family: var(--sk-font-family-base);
+    line-height: 1.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-navbar-color-base));
+    }
+
+    // Apply bottom border with cut corners
+    @include cut-border(
+        $cut: var(--sk-navbar-cut-size),
+        $border-width: var(--sk-navbar-border-width),
+        $border-color: var(--sk-navbar-border-color),
+        $corners: (bottom-left bottom-right)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Sticky positioning
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-sticky
+    {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Content container
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-navbar-content
+    {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 2rem;
+        padding: var(--sk-navbar-padding-y) var(--sk-navbar-padding-x);
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Brand section
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-navbar-brand
+    {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+
+        // Brand link styling
+        a
+        {
+            text-decoration: none;
+            color: inherit;
+
+            &:hover h1
+            {
+                color: var(--sk-primary-base);
+            }
+        }
+
+        h1
+        {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--sk-primary-base);
+            transition: color var(--sk-transition-fast);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Nav section (center content)
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-navbar-nav
+    {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+        gap: 2rem;
+
+        // Nav link styling
+        a
+        {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: color-mix(in oklch, var(--sk-navbar-fg), white 60%);
+            text-decoration: none;
+            font-weight: 500;
+            padding: 0.5rem;
+            border-bottom: 2px solid transparent;
+            transition: all var(--sk-transition-fast);
+
+            &:hover
+            {
+                color: color-mix(in oklch, var(--sk-navbar-color-base), white 20%);
+                border-bottom-color: color-mix(in oklch, var(--sk-navbar-color-base), white 20%);
+            }
+
+            &.router-link-active
+            {
+                border-bottom-color: var(--sk-navbar-color-base);
+            }
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Actions section (right side)
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-navbar-actions
+    {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1rem;
+        flex-shrink: 0;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include navbar-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------