@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/base/_typography.scss

@@ -0,0 +1,178 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Typography Styles - Base styles for headings, paragraphs, and text elements
+//----------------------------------------------------------------------------------------------------------------------
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+{
+    margin-top: 0;
+    margin-bottom: 0.25em;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+h1
+{
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+h2
+{
+    font-size: 1.75rem;
+}
+
+h3
+{
+    font-size: 1.5rem;
+}
+
+h4
+{
+    font-size: 1.25rem;
+}
+
+h5
+{
+    font-size: 1.125rem;
+}
+
+h6
+{
+    font-size: 1rem;
+}
+
+// Paragraphs
+p
+{
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.5;
+}
+
+// Text emphasis
+strong,
+b
+{
+    font-weight: 600;
+}
+
+em,
+i
+{
+    font-style: italic;
+}
+
+// Code
+code,
+kbd,
+samp,
+pre
+{
+    font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", "Courier New", monospace;
+    font-size: 0.875em;
+}
+
+code
+{
+    padding: 0.125em 0.25em;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25em;
+}
+
+pre
+{
+    margin-top: 0;
+    margin-bottom: 1em;
+    padding: 1em;
+    overflow-x: auto;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25em;
+    line-height: 1.5;
+
+    code
+    {
+        padding: 0;
+        background: none;
+        border-radius: 0;
+    }
+}
+
+// Blockquotes
+blockquote
+{
+    margin: 1em 0;
+    padding-left: 1em;
+    border-left: 4px solid currentColor;
+    font-style: italic;
+    opacity: 0.8;
+}
+
+// Links
+a
+{
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+
+    &:hover
+    {
+        text-decoration-thickness: 2px;
+    }
+}
+
+// Lists
+ul,
+ol
+{
+    margin-top: 0;
+    margin-bottom: 1em;
+    padding-left: 2em;
+    line-height: 1.6;
+}
+
+ul
+{
+    list-style-type: square;
+
+    li::marker
+    {
+        color: var(--sk-primary-base);
+    }
+}
+
+li
+{
+    margin-bottom: 0.25em;
+}
+
+// Horizontal rules
+hr
+{
+    margin: 2em 0;
+    border: none;
+    border-top: 1px solid currentColor;
+    opacity: 0.2;
+}
+
+// Small text
+small
+{
+    font-size: 0.875em;
+}
+
+// Mark/highlight
+mark
+{
+    padding: 0.125em 0.25em;
+    background: rgba(255, 255, 0, 0.3);
+    border-radius: 0.125em;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_accordion.scss

@@ -0,0 +1,250 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion
+{
+    // Color tokens (can be overridden by custom colors via component)
+    --sk-accordion-color-base: var(--sk-neutral-base);
+    --sk-accordion-fg: var(--sk-neutral-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-xs);
+    width: 100%;
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-accordion-color-base: var(--sk-neutral-base);
+        --sk-accordion-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-accordion-color-base: var(--sk-primary-base);
+        --sk-accordion-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-accordion-color-base: var(--sk-accent-base);
+        --sk-accordion-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-accordion-color-base: var(--sk-info-base);
+        --sk-accordion-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-accordion-color-base: var(--sk-success-base);
+        --sk-accordion-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-accordion-color-base: var(--sk-warning-base);
+        --sk-accordion-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-accordion-color-base: var(--sk-danger-base);
+        --sk-accordion-fg: var(--sk-danger-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Item
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion-item
+{
+    // Background color - use lighter mix to make custom colors more visible
+    --sk-accordion-bg: color-mix(
+        in oklch,
+        var(--sk-accordion-color-base),
+        transparent 85%
+    );
+
+    overflow: hidden;
+    width: 100%;
+
+    @include cut-border(
+        $cut: 0.625rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-accordion-color-base),
+        $corners: (top-left)
+    );
+
+    background: var(--sk-accordion-bg);
+    color: var(--sk-accordion-fg);
+
+    // Transitions
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Header
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion-header
+{
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Trigger
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion-trigger
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--sk-space-md) var(--sk-space-lg);
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: left;
+    background: transparent;
+    border: none;
+    color: var(--sk-accordion-fg);
+    outline: none;
+    user-select: none;
+
+    // Transitions
+    transition-property: background, color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Hover state
+    &:hover:not(:disabled)
+    {
+        background: color-mix(
+            in oklch,
+            var(--sk-accordion-color-base),
+            transparent 75%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Active state
+    &:active:not(:disabled)
+    {
+        background: color-mix(
+            in oklch,
+            var(--sk-accordion-color-base),
+            transparent 65%
+        );
+    }
+
+    // Focus state
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-accordion-color-base);
+        outline-offset: 2px;
+    }
+
+    // Disabled state
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Chevron
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion-chevron
+{
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    margin-left: var(--sk-space-md);
+    transition: transform var(--sk-transition-duration-normal) ease;
+
+    &.sk-open
+    {
+        transform: rotate(180deg);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Content
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-accordion-content
+{
+    overflow: hidden;
+    width: 100%;
+
+    // Slide down animation using RekaUI's CSS variable
+    &[data-state='open']
+    {
+        animation: sk-accordion-expand var(--sk-transition-duration-normal) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-accordion-collapse var(--sk-transition-duration-normal) ease-in;
+    }
+}
+
+.sk-accordion-content-inner
+{
+    padding: var(--sk-space-md) var(--sk-space-lg);
+    padding-top: 0;
+    width: 100%;
+    color: color-mix(in oklch, var(--sk-accordion-fg), black 15%);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Animations
+//----------------------------------------------------------------------------------------------------------------------
+
+@keyframes sk-accordion-expand
+{
+    from
+    {
+        height: 0;
+        opacity: 0;
+    }
+
+    to
+    {
+        height: var(--reka-accordion-content-height);
+        opacity: 1;
+    }
+}
+
+@keyframes sk-accordion-collapse
+{
+    from
+    {
+        height: var(--reka-accordion-content-height);
+        opacity: 1;
+    }
+
+    to
+    {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_alert.scss

@@ -0,0 +1,239 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Alert Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Alert Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-alert
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Internal padding for alert content
+    --sk-alert-padding: 0.75rem;
+
+    /// Gap between icon and content
+    --sk-alert-gap: 0.75rem;
+
+    /// Icon size
+    --sk-alert-icon-size: 1.25rem;
+
+    /// Cut size for beveled corner
+    --sk-alert-cut-size: 0.75rem;
+
+    /// Corner decoration offset
+    --sk-alert-decoration-offset: 0.375rem;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Glow Effect Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Glow effect blur radius
+    --sk-alert-glow-size: 12px;
+
+    /// Glow effect opacity
+    --sk-alert-glow-opacity: 0.3;
+
+    /// Subtle background opacity (for non-prominent alerts)
+    --sk-alert-subtle-opacity: var(--sk-opacity-subtle);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width (references global foundation token)
+    --sk-alert-border-width: var(--sk-border-width-thin);
+
+    /// Dynamic border color (set by kinds)
+    --sk-alert-border-color: currentColor;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Generic Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+    // Reuses the same color system as panels for consistency
+    // Each kind overrides these base tokens
+
+    /// Base color - the bright semantic color used for borders and accents
+    --sk-alert-color-base: var(--sk-info-base);
+
+    /// Foreground/text color
+    --sk-alert-fg: var(--sk-alert-color-base);
+
+    /// Background color - darkened version of base color (for solid backgrounds)
+    --sk-alert-bg-solid: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-alert-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Background color - subtle version for non-prominent alerts (same as subtle buttons)
+    --sk-alert-bg: oklch(from var(--sk-alert-bg-solid) l c h / var(--sk-alert-subtle-opacity));
+
+    /// Border color - uses the bright base color
+    --sk-alert-border-base: var(--sk-alert-color-base);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Effect Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Inner glow effect - creates ambient lighting inside the alert
+    /// Uses relative color syntax to derive glow from base color with controlled opacity
+    --sk-alert-glow: inset 0 0 var(--sk-alert-glow-size)
+        oklch(from var(--sk-alert-color-base) l c h / var(--sk-alert-glow-opacity));
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin alert-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        // Override base color tokens for this kind
+        --sk-alert-color-base: var(--sk-#{ $kind }-base);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-alert-border-color: var(--sk-alert-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-alert-bg);
+        color: var(--sk-alert-fg);
+        border-color: var(--sk-alert-border-color);
+
+        // Prominent variants get the dark foreground color
+        &.sk-prominent
+        {
+            --sk-alert-fg: var(--sk-#{ $kind }-text);
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Alert Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-alert
+{
+    // Base structure
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sk-alert-gap);
+    padding: var(--sk-alert-padding);
+
+    // Typography
+    font-family: var(--sk-font-family-base);
+    line-height: 1.5;
+    font-size: 0.875rem;
+
+    // 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-alert-color-base));
+    }
+
+    // Apply cut-border mixin for beveled corners (all four corners)
+    @include cut-border(
+        $cut: var(--sk-alert-cut-size),
+        $border-width: var(--sk-alert-border-width),
+        $border-color: var(--sk-alert-border-color),
+        $corners: (top-left, top-right, bottom-left, bottom-right)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Corner decoration line
+    //------------------------------------------------------------------------------------------------------------------
+
+    &::after
+    {
+        content: '';
+        position: absolute;
+        width: var(--sk-alert-cut-size);
+        height: 2px;
+        background: var(--sk-alert-border-base);
+        border-radius: 1px;
+        right: var(--sk-alert-decoration-offset);
+        top: calc(var(--sk-alert-cut-size) / 2 + var(--sk-alert-decoration-offset) - 1px);
+        transform: rotate(45deg);
+        transform-origin: center;
+        pointer-events: none;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Icon container
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-alert-icon
+    {
+        flex-shrink: 0;
+        width: var(--sk-alert-icon-size);
+        height: var(--sk-alert-icon-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg
+        {
+            width: 100%;
+            height: 100%;
+            stroke: currentColor;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Content container
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-alert-content
+    {
+        flex: 1;
+        min-width: 0; // Allow content to shrink
+
+        // Remove bottom margin from last child
+        > *:last-child
+        {
+            margin-bottom: 0;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Prominent variant
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-prominent
+    {
+        --sk-alert-padding: 1rem;
+        --sk-alert-icon-size: 1.5rem;
+        --sk-alert-cut-size: 1rem;
+
+        // Use solid background for prominent alerts
+        --sk-alert-bg: var(--sk-alert-bg-solid);
+
+        font-size: 1rem;
+        border-width: calc(var(--sk-alert-border-width) * 2);
+
+        // Apply inner glow
+        box-shadow: var(--sk-alert-glow);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include alert-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------