@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_tag.scss

@@ -0,0 +1,425 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tag Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tag Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tag
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Size System Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Base tag height (md size)
+    --sk-tag-height-base: 1.5rem;
+
+    /// Base font size for tags
+    --sk-tag-font-size-base: 0.75rem;
+
+    /// Base horizontal padding
+    --sk-tag-padding-base: 0.5rem;
+
+    /// Size scale multipliers for height calculations
+    --sk-tag-scale-sm: 0.833;  // 20px height
+    --sk-tag-scale-md: 1;      // 24px height (base)
+    --sk-tag-scale-lg: 1.167;  // 28px height
+    --sk-tag-scale-xl: 1.333;  // 32px height
+
+    /// Font size scale multipliers
+    --sk-tag-font-scale-sm: 0.917;  // 11px
+    --sk-tag-font-scale-md: 1;      // 12px (matches base)
+    --sk-tag-font-scale-lg: 1.083;  // 13px
+    --sk-tag-font-scale-xl: 1.167;  // 14px
+
+    /// Border radius calculation factor (smaller cuts than buttons)
+    --sk-tag-radius-factor: 6;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Typography Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Font weight for tag text
+    --sk-tag-font-weight: 600;
+
+    /// Line height for tag text
+    --sk-tag-line-height: 1;
+
+    /// Gap between tag content and remove button
+    --sk-tag-gap: 0.25rem;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width
+    --sk-tag-border-width: var(--sk-border-width-thin);
+
+    /// Dynamic border color (set by variants/states)
+    --sk-tag-border-color: currentColor;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Transition Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Tag transition duration
+    --sk-tag-transition-duration: var(--sk-transition-normal);
+
+    /// Tag transition easing
+    --sk-tag-transition-easing: var(--sk-transition-easing);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Generic Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Base color - the bright semantic color
+    --sk-tag-color-base: var(--sk-neutral-base);
+
+    /// Foreground/text color
+    --sk-tag-fg: var(--sk-neutral-text);
+
+    /// Background color for solid tags
+    --sk-tag-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-tag-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Base border color
+    --sk-tag-border-base: var(--sk-tag-color-base);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant-Specific Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Outline variant background
+    --sk-tag-outline-bg: rgba(5, 5, 5, 0.15);
+
+    /// Subtle variant background opacity
+    --sk-tag-subtle-opacity: var(--sk-opacity-subtle);
+
+    /// Subtle variant border opacity
+    --sk-tag-subtle-border-opacity: var(--sk-opacity-subtle-border);
+
+    /// Ghost variant background opacity (between subtle and bright)
+    --sk-tag-ghost-opacity: 0.35;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Variant Mixins
+//----------------------------------------------------------------------------------------------------------------------
+
+// Mixin for solid variant
+@mixin tag-solid-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        --sk-tag-color-base: var(--sk-#{ $kind }-base);
+        --sk-tag-fg: var(--sk-#{ $kind }-text);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        --sk-tag-border-color: var(--sk-tag-border-base);
+
+        background-color: var(--sk-tag-bg);
+        color: var(--sk-tag-fg);
+    }
+}
+
+// Mixin for outline variant
+@mixin tag-outline-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        --sk-tag-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);
+
+        --sk-tag-border-color: var(--sk-tag-border-base);
+
+        background-color: var(--sk-tag-outline-bg);
+        color: var(--sk-tag-color-base);
+    }
+}
+
+// Mixin for subtle variant
+@mixin tag-subtle-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        --sk-tag-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);
+
+        --sk-tag-border-color: oklch(
+            from var(--sk-tag-border-base) l c h / var(--sk-tag-subtle-border-opacity)
+        );
+
+        background-color: oklch(from var(--sk-tag-bg) l c h / var(--sk-tag-subtle-opacity));
+        color: var(--sk-tag-color-base);
+    }
+}
+
+// Mixin for ghost variant (medium opacity background, no border)
+@mixin tag-ghost-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        --sk-tag-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);
+
+        --sk-tag-border-color: transparent;
+
+        background-color: oklch(from var(--sk-tag-bg) l c h / var(--sk-tag-ghost-opacity));
+        color: var(--sk-tag-color-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Tag Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tag
+{
+    // Base styles
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sk-tag-gap);
+    font-weight: var(--sk-tag-font-weight);
+    font-size: var(--sk-tag-font-size-base);
+    line-height: var(--sk-tag-line-height);
+    border-width: var(--sk-tag-border-width);
+    border-style: solid;
+    user-select: none;
+    flex-shrink: 0;
+    white-space: nowrap;
+
+    // Apply cut-border mixin for beveled corners (bottom-left and top-right)
+    @include cut-border(
+        $cut: calc(var(--sk-tag-height-base) / var(--sk-tag-radius-factor)),
+        $border-width: var(--sk-tag-border-width),
+        $border-color: var(--sk-tag-border-color),
+        $corners: (bottom-left top-right)
+    );
+
+    // Transitions
+    transition:
+        color var(--sk-tag-transition-duration) var(--sk-tag-transition-easing),
+        background-color var(--sk-tag-transition-duration) var(--sk-tag-transition-easing),
+        border-color var(--sk-tag-transition-duration) var(--sk-tag-transition-easing);
+
+    // Remove default styles
+    font-family: inherit;
+
+    // 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-tag-color-base));
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-sm
+    {
+        --sk-tag-cut-size: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-sm) / var(--sk-tag-radius-factor));
+
+        height: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-sm));
+        padding-left: var(--sk-tag-padding-base);
+        padding-right: var(--sk-tag-padding-base);
+        font-size: calc(var(--sk-tag-font-size-base) * var(--sk-tag-font-scale-sm));
+
+        @include cut-border(
+            $cut: var(--sk-tag-cut-size),
+            $border-width: var(--sk-tag-border-width),
+            $border-color: var(--sk-tag-border-color),
+            $corners: (bottom-left top-right)
+        );
+    }
+
+    &.sk-md
+    {
+        --sk-tag-cut-size: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-md) / var(--sk-tag-radius-factor));
+
+        height: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-md));
+        padding-left: var(--sk-tag-padding-base);
+        padding-right: var(--sk-tag-padding-base);
+        font-size: calc(var(--sk-tag-font-size-base) * var(--sk-tag-font-scale-md));
+
+        @include cut-border(
+            $cut: var(--sk-tag-cut-size),
+            $border-width: var(--sk-tag-border-width),
+            $border-color: var(--sk-tag-border-color),
+            $corners: (bottom-left top-right)
+        );
+    }
+
+    &.sk-lg
+    {
+        --sk-tag-cut-size: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-lg) / var(--sk-tag-radius-factor));
+
+        height: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-lg));
+        padding-left: var(--sk-tag-padding-base);
+        padding-right: var(--sk-tag-padding-base);
+        font-size: calc(var(--sk-tag-font-size-base) * var(--sk-tag-font-scale-lg));
+
+        @include cut-border(
+            $cut: var(--sk-tag-cut-size),
+            $border-width: var(--sk-tag-border-width),
+            $border-color: var(--sk-tag-border-color),
+            $corners: (bottom-left top-right)
+        );
+    }
+
+    &.sk-xl
+    {
+        --sk-tag-cut-size: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-xl) / var(--sk-tag-radius-factor));
+
+        height: calc(var(--sk-tag-height-base) * var(--sk-tag-scale-xl));
+        padding-left: var(--sk-tag-padding-base);
+        padding-right: var(--sk-tag-padding-base);
+        font-size: calc(var(--sk-tag-font-size-base) * var(--sk-tag-font-scale-xl));
+
+        @include cut-border(
+            $cut: var(--sk-tag-cut-size),
+            $border-width: var(--sk-tag-border-width),
+            $border-color: var(--sk-tag-border-color),
+            $corners: (bottom-left top-right)
+        );
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Solid
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-solid
+    {
+        @each $kind in $kinds
+        {
+            @include tag-solid-kind($kind);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Outline
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-outline
+    {
+        @each $kind in $kinds
+        {
+            @include tag-outline-kind($kind);
+        }
+
+        // Special case: neutral text and border are lighter for better differentiation
+        &.sk-neutral
+        {
+            --sk-tag-border-color: color-mix(in oklch, var(--sk-tag-border-base), white 25%);
+            color: color-mix(in oklch, var(--sk-tag-color-base), white 50%);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Subtle
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-subtle
+    {
+        @each $kind in $kinds
+        {
+            @include tag-subtle-kind($kind);
+        }
+
+        // Special case: neutral text and border are lighter (halfway to white) for better differentiation
+        &.sk-neutral
+        {
+            --sk-tag-border-color: oklch(
+                from color-mix(in oklch, var(--sk-tag-border-base), white 50%)
+                l c h / var(--sk-tag-subtle-border-opacity)
+            );
+            color: color-mix(in oklch, var(--sk-tag-color-base), white 50%);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Ghost
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-ghost
+    {
+        @each $kind in $kinds
+        {
+            @include tag-ghost-kind($kind);
+        }
+
+        // Special case: neutral text is lighter (halfway to white) for better differentiation
+        &.sk-neutral
+        {
+            color: color-mix(in oklch, var(--sk-tag-color-base), white 50%);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Removable tag
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-removable
+    {
+        padding-right: calc(var(--sk-tag-padding-base) * 0.5);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Tag content
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-tag-content
+    {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Remove button
+    //------------------------------------------------------------------------------------------------------------------
+
+    .sk-tag-remove
+    {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity var(--sk-tag-transition-duration) var(--sk-tag-transition-easing);
+
+        &:hover
+        {
+            opacity: 1;
+        }
+
+        svg
+        {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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

@@ -0,0 +1,279 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// TagsInput Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tags-input
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-tags-input-color-base: var(--sk-neutral-base);
+    --sk-tags-input-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-tags-input-cut: 0.5rem;
+
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    // Size variants
+    &.sk-sm
+    {
+        --sk-tags-input-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        --sk-tags-input-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-tags-input-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-tags-input-cut: 0.7rem;
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-tags-input-color-base: var(--sk-neutral-base);
+        --sk-tags-input-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-tags-input-color-base: var(--sk-primary-base);
+        --sk-tags-input-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-tags-input-color-base: var(--sk-accent-base);
+        --sk-tags-input-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-tags-input-color-base: var(--sk-info-base);
+        --sk-tags-input-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-tags-input-color-base: var(--sk-success-base);
+        --sk-tags-input-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-tags-input-color-base: var(--sk-warning-base);
+        --sk-tags-input-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-tags-input-color-base: var(--sk-danger-base);
+        --sk-tags-input-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-tags-input-color-base: var(--sk-neon-blue-base);
+        --sk-tags-input-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-tags-input-color-base: var(--sk-neon-purple-base);
+        --sk-tags-input-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-tags-input-color-base: var(--sk-neon-orange-base);
+        --sk-tags-input-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-tags-input-color-base: var(--sk-neon-green-base);
+        --sk-tags-input-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-tags-input-color-base: var(--sk-neon-mint-base);
+        --sk-tags-input-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-tags-input-color-base: var(--sk-neon-pink-base);
+        --sk-tags-input-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-tags-input-color-base: var(--sk-yellow-base);
+        --sk-tags-input-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-tags-input-color-base: var(--sk-red-base);
+        --sk-tags-input-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tags-input-container
+{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    width: 100%;
+    min-height: 2.5rem;
+    padding: var(--sk-space-xs);
+
+    @include cut-border(
+        $cut: var(--sk-tags-input-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-tags-input-color-base),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-tags-input-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+
+    // Transitions
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Focus-within state
+    &:focus-within
+    {
+        border-color: color-mix(in oklch, var(--sk-tags-input-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-tags-input-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+    }
+
+    // Hover state
+    &:hover:not(:has(input:disabled))
+    {
+        border-color: color-mix(in oklch, var(--sk-tags-input-color-base), white 20%);
+    }
+
+    // Only apply disabled styling if component is truly disabled, not just max reached
+    // (We want tags to look normal when max is reached so users can still remove them)
+    &[data-disabled="true"]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    // Size variants
+    .sk-tags-input.sk-sm &
+    {
+        min-height: 2rem;
+        padding: calc(var(--sk-space-xs) / 2);
+        gap: calc(var(--sk-space-xs) / 2);
+    }
+
+    .sk-tags-input.sk-lg &
+    {
+        min-height: 3rem;
+        padding: var(--sk-space-sm);
+    }
+
+    .sk-tags-input.sk-xl &
+    {
+        min-height: 3.5rem;
+        padding: var(--sk-space-sm);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tags-input-delete
+{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--sk-tags-input-fg);
+    cursor: pointer;
+    padding: 0;
+    opacity: 0.7;
+
+    transition-property: opacity;
+    transition-duration: var(--sk-transition-duration-base);
+
+    &:hover
+    {
+        opacity: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tags-input-field
+{
+    flex: 1;
+    min-width: 8rem;
+    background: transparent;
+    border: none;
+    color: var(--sk-tags-input-fg);
+    font-family: var(--sk-font-family-base);
+    outline: none;
+    cursor: text;
+    padding: 0;
+
+    // Size variants
+    .sk-tags-input.sk-sm &
+    {
+        font-size: 0.875rem;
+    }
+
+    .sk-tags-input.sk-md &
+    {
+        font-size: 1rem;
+    }
+
+    .sk-tags-input.sk-lg &
+    {
+        font-size: 1.125rem;
+    }
+
+    .sk-tags-input.sk-xl &
+    {
+        font-size: 1.25rem;
+    }
+
+    &::placeholder
+    {
+        color: color-mix(in oklch, var(--sk-tags-input-fg), transparent 50%);
+    }
+
+    &:disabled
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------