@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_textarea.scss

@@ -0,0 +1,208 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Textarea Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-textarea
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-textarea-color-base: var(--sk-neutral-base);
+    --sk-textarea-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-textarea-cut: 0.5rem;
+
+    display: block;
+    width: 100%;
+    font-family: var(--sk-font-family-base);
+    resize: vertical;
+    cursor: text;
+
+    @include cut-border(
+        $cut: var(--sk-textarea-cut),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-textarea-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-textarea-fg);
+    border: var(--sk-border-width-thin) solid var(--sk-textarea-color-base);
+
+    // Transitions
+    transition-property: background, color, border-color, box-shadow;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Size variants
+    &.sk-sm
+    {
+        padding: 0.75rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.4;
+        --sk-textarea-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        --sk-textarea-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        padding: 0.75rem 1rem;
+        font-size: 1.125rem;
+        line-height: 1.5;
+        --sk-textarea-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        padding: 0.75rem 1rem;
+        font-size: 1.25rem;
+        line-height: 1.6;
+        --sk-textarea-cut: 0.7rem;
+    }
+
+    // Focus state (brighter background)
+    &:focus
+    {
+        outline: none;
+        border-color: color-mix(in oklch, var(--sk-textarea-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-textarea-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Hover state (slightly brighter)
+    &:hover:not(:disabled):not(:focus)
+    {
+        border-color: color-mix(in oklch, var(--sk-textarea-color-base), white 20%);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Disabled state
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+        resize: none;
+    }
+
+    // Readonly state
+    &.sk-readonly
+    {
+        cursor: default;
+        opacity: 0.75;
+        resize: none;
+    }
+
+    // Placeholder styling
+    &::placeholder
+    {
+        color: color-mix(in oklch, var(--sk-textarea-fg), transparent 50%);
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-textarea-color-base: var(--sk-neutral-base);
+        --sk-textarea-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-textarea-color-base: var(--sk-primary-base);
+        --sk-textarea-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-textarea-color-base: var(--sk-accent-base);
+        --sk-textarea-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-textarea-color-base: var(--sk-info-base);
+        --sk-textarea-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-textarea-color-base: var(--sk-success-base);
+        --sk-textarea-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-textarea-color-base: var(--sk-warning-base);
+        --sk-textarea-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-textarea-color-base: var(--sk-danger-base);
+        --sk-textarea-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-textarea-color-base: var(--sk-neon-blue-base);
+        --sk-textarea-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-textarea-color-base: var(--sk-neon-purple-base);
+        --sk-textarea-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-textarea-color-base: var(--sk-neon-orange-base);
+        --sk-textarea-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-textarea-color-base: var(--sk-neon-green-base);
+        --sk-textarea-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-textarea-color-base: var(--sk-neon-mint-base);
+        --sk-textarea-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-textarea-color-base: var(--sk-neon-pink-base);
+        --sk-textarea-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-textarea-color-base: var(--sk-yellow-base);
+        --sk-textarea-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-textarea-color-base: var(--sk-red-base);
+        --sk-textarea-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_toast.scss

@@ -0,0 +1,331 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Viewport
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toast-viewport
+{
+    // Base styles - fixed positioning for floating viewport
+    position: fixed;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-sm);
+    padding: var(--sk-space-md);
+    width: 100%;
+    max-width: 24rem;
+    max-height: 100vh;
+    overflow: hidden;
+
+    // Allow pointer events on toasts but not viewport background
+    pointer-events: none;
+
+    > *
+    {
+        pointer-events: auto;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Position variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-top-left
+    {
+        top: 0;
+        left: 0;
+    }
+
+    &.sk-top-center
+    {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    &.sk-top-right
+    {
+        top: 0;
+        right: 0;
+    }
+
+    &.sk-bottom-left
+    {
+        bottom: 0;
+        left: 0;
+        flex-direction: column-reverse;
+    }
+
+    &.sk-bottom-center
+    {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        flex-direction: column-reverse;
+    }
+
+    &.sk-bottom-right
+    {
+        bottom: 0;
+        right: 0;
+        flex-direction: column-reverse;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Item (similar to Alert)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toast
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Design Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    --sk-toast-padding: 0.75rem;
+    --sk-toast-gap: 0.75rem;
+    --sk-toast-icon-size: 1.25rem;
+    --sk-toast-cut-size: 0.75rem;
+    --sk-toast-glow-size: 16px;
+    --sk-toast-glow-opacity: 0.4;
+
+    // Color tokens
+    --sk-toast-color-base: var(--sk-info-base);
+    --sk-toast-fg: var(--sk-toast-color-base);
+    --sk-toast-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-toast-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+    --sk-toast-border-color: var(--sk-toast-color-base);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Base Styles
+    //------------------------------------------------------------------------------------------------------------------
+
+    display: flex;
+    align-items: center;
+    gap: var(--sk-toast-gap);
+    padding: var(--sk-toast-padding);
+
+    // Typography
+    font-family: var(--sk-font-family-base);
+    line-height: 1.5;
+    font-size: 0.875rem;
+
+    // Colors
+    background: oklch(from var(--sk-toast-bg) calc(l * 0.95) c h / 0.98);
+    color: var(--sk-toast-fg);
+
+    // Cut corners with border
+    @include cut-border(
+        var(--sk-toast-cut-size),
+        var(--sk-border-width-thin),
+        var(--sk-toast-border-color),
+        (top-left top-right bottom-left bottom-right)
+    );
+
+    // Inner glow + shadow
+    box-shadow:
+        var(--sk-shadow-lg),
+        inset 0 0 var(--sk-toast-glow-size) oklch(from var(--sk-toast-color-base) l c h / var(--sk-toast-glow-opacity));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Animation States
+    //------------------------------------------------------------------------------------------------------------------
+
+    &[data-state='open']
+    {
+        animation: sk-toast-show var(--sk-transition-duration-normal) ease-out;
+    }
+
+    &[data-state='closed']
+    {
+        animation: sk-toast-hide var(--sk-transition-duration-fast) ease-in;
+    }
+
+    &[data-swipe='move']
+    {
+        transform: translateX(var(--reka-toast-swipe-move-x, 0));
+    }
+
+    &[data-swipe='cancel']
+    {
+        transform: translateX(0);
+        transition: transform var(--sk-transition-duration-fast) ease-out;
+    }
+
+    &[data-swipe='end']
+    {
+        animation: sk-toast-swipe-out var(--sk-transition-duration-fast) ease-out;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-info
+    {
+        --sk-toast-color-base: var(--sk-info-base);
+        --sk-toast-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-toast-color-base: var(--sk-success-base);
+        --sk-toast-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-toast-color-base: var(--sk-warning-base);
+        --sk-toast-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-toast-color-base: var(--sk-danger-base);
+        --sk-toast-fg: var(--sk-danger-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Icon
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toast-icon
+{
+    flex-shrink: 0;
+    width: var(--sk-toast-icon-size);
+    height: var(--sk-toast-icon-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg
+    {
+        width: 100%;
+        height: 100%;
+        stroke: currentColor;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Content
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toast-content
+{
+    flex: 1;
+    min-width: 0;
+}
+
+.sk-toast-title
+{
+    margin: 0 0 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.sk-toast-description
+{
+    margin: 0;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    opacity: 0.9;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toast Close Button
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toast-close
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    margin-left: auto;
+
+    background: transparent;
+    border: none;
+    border-radius: var(--sk-radius-sm);
+    color: currentColor;
+    opacity: 0.6;
+    cursor: pointer;
+
+    transition: opacity var(--sk-transition-duration-fast) var(--sk-transition-timing-default),
+                background-color var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover
+    {
+        opacity: 1;
+        background-color: oklch(from currentColor l c h / 0.15);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-toast-color-base);
+        outline-offset: 2px;
+        opacity: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Animations
+//----------------------------------------------------------------------------------------------------------------------
+
+@keyframes sk-toast-show
+{
+    from
+    {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+
+    to
+    {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes sk-toast-hide
+{
+    from
+    {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    to
+    {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+}
+
+@keyframes sk-toast-swipe-out
+{
+    from
+    {
+        opacity: 1;
+        transform: translateX(var(--reka-toast-swipe-end-x, 0));
+    }
+
+    to
+    {
+        opacity: 0;
+        transform: translateX(calc(100% + var(--sk-space-md)));
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------