@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/styles/components/_tag.scss

@@ -9,7 +9,8 @@
 // Tag Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-tag
+.sk-tag,
+sk-tag
 {
     //------------------------------------------------------------------------------------------------------------------
     // Size System Tokens
@@ -188,7 +189,8 @@
 // Base Tag Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-tag
+.sk-tag,
+sk-tag
 {
     // Base styles
     // position: relative anchors the cut-border fallback's ::before (Safari, Firefox — no corner-shape).
@@ -230,158 +232,6 @@
         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
     //------------------------------------------------------------------------------------------------------------------
@@ -425,3 +275,243 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+@each $kind in $kinds
+{
+    @include kind-variant('tag', $kind)
+    {
+        --sk-tag-color-base: var(--sk-#{ $kind }-base);
+        --sk-tag-fg: var(--sk-#{ $kind }-text);
+        --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);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Size Variants
+//----------------------------------------------------------------------------------------------------------------------
+
+@include size-variant('tag', 'xs')
+{
+    --sk-tag-cut-size: calc(var(--sk-tag-height-base) * 0.667 / var(--sk-tag-radius-factor));
+
+    height: calc(var(--sk-tag-height-base) * 0.667);
+    padding-left: calc(var(--sk-tag-padding-base) * 0.75);
+    padding-right: calc(var(--sk-tag-padding-base) * 0.75);
+    font-size: calc(var(--sk-tag-font-size-base) * 0.833);
+
+    @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)
+    );
+}
+
+@include size-variant('tag', '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)
+    );
+}
+
+@include size-variant('tag', '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)
+    );
+}
+
+@include size-variant('tag', '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)
+    );
+}
+
+@include size-variant('tag', '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 Variants (solid / outline / subtle / ghost)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include variant-variant('tag', 'solid')
+{
+    // Variant token anchor — ensures the top-level selector pair is emitted.
+    --sk-tag-variant: solid;
+
+    @each $kind in $kinds
+    {
+        @include tag-solid-kind($kind);
+    }
+}
+
+@include variant-variant('tag', 'outline')
+{
+    // Variant token anchor — ensures the top-level selector pair is emitted.
+    --sk-tag-variant: 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%);
+    }
+}
+
+@include variant-variant('tag', 'subtle')
+{
+    // Variant token anchor — ensures the top-level selector pair is emitted.
+    --sk-tag-variant: 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%);
+    }
+}
+
+@include variant-variant('tag', 'ghost')
+{
+    // Variant token anchor — ensures the top-level selector pair is emitted.
+    --sk-tag-variant: 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%);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Boolean Modifiers
+//----------------------------------------------------------------------------------------------------------------------
+
+@include bool-modifier('tag', 'removable')
+{
+    padding-right: calc(var(--sk-tag-padding-base) * 0.5);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+$_tag-kind-not: '';
+@each $kind in $kinds
+{
+    $_tag-kind-not: $_tag-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-tag:where(#{ $_tag-kind-not })
+{
+    --sk-tag-color-base: var(--sk-neutral-base);
+    --sk-tag-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-tag-border-color: var(--sk-tag-border-base);
+    background-color: var(--sk-tag-bg);
+    color: var(--sk-tag-fg);
+}
+
+// Default size: md
+@include defaults-when-absent('tag', 'sk-size-')
+{
+    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));
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+@include defaults-when-no-attr('tag', 'kind')
+{
+    --sk-tag-color-base: var(--sk-neutral-base);
+    --sk-tag-fg: var(--sk-neutral-text);
+    --sk-kind-color: var(--sk-neutral-base);
+    --sk-tag-border-color: var(--sk-tag-border-base);
+    background-color: var(--sk-tag-bg);
+    color: var(--sk-tag-fg);
+}
+
+// Default size: md
+@include defaults-when-no-attr('tag', 'size')
+{
+    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));
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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

@@ -1,4 +1,5 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // TagsInput Component Styles
@@ -17,23 +18,33 @@
     display: inline-flex;
     width: 100%;
 
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        --sk-tags-input-cut: 0.5rem;
+    }
+
     // Size variants
-    &.sk-sm
+    &.sk-sm,
+    &.sk-size-sm
     {
         --sk-tags-input-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         --sk-tags-input-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         --sk-tags-input-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         --sk-tags-input-cut: 0.7rem;
     }
@@ -188,20 +199,23 @@
     }
 
     // Size variants
-    .sk-tags-input.sk-sm &
+    .sk-tags-input.sk-sm &,
+    .sk-tags-input.sk-size-sm &
     {
         min-height: 2rem;
         padding: calc(var(--sk-space-xs) / 2);
         gap: calc(var(--sk-space-xs) / 2);
     }
 
-    .sk-tags-input.sk-lg &
+    .sk-tags-input.sk-lg &,
+    .sk-tags-input.sk-size-lg &
     {
         min-height: 3rem;
         padding: var(--sk-space-sm);
     }
 
-    .sk-tags-input.sk-xl &
+    .sk-tags-input.sk-xl &,
+    .sk-tags-input.sk-size-xl &
     {
         min-height: 3.5rem;
         padding: var(--sk-space-sm);
@@ -246,22 +260,26 @@
     padding: 0;
 
     // Size variants
-    .sk-tags-input.sk-sm &
+    .sk-tags-input.sk-sm &,
+    .sk-tags-input.sk-size-sm &
     {
         font-size: 0.875rem;
     }
 
-    .sk-tags-input.sk-md &
+    .sk-tags-input.sk-md &,
+    .sk-tags-input.sk-size-md &
     {
         font-size: 1rem;
     }
 
-    .sk-tags-input.sk-lg &
+    .sk-tags-input.sk-lg &,
+    .sk-tags-input.sk-size-lg &
     {
         font-size: 1.125rem;
     }
 
-    .sk-tags-input.sk-xl &
+    .sk-tags-input.sk-xl &,
+    .sk-tags-input.sk-size-xl &
     {
         font-size: 1.25rem;
     }
@@ -278,3 +296,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_tags-input-kind-not: '';
+@each $kind in $kinds
+{
+    $_tags-input-kind-not: $_tags-input-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-tags-input:where(#{ $_tags-input-kind-not })
+{
+    --sk-tags-input-color-base: var(--sk-neutral-base);
+    --sk-tags-input-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_textarea.scss

@@ -1,4 +1,5 @@
-@use '@/styles/mixins/cut-border' as *;
+@use '../mixins/cut-border' as *;
+@use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Textarea Component Styles
@@ -39,7 +40,18 @@
     transition-duration: var(--sk-transition-duration-base);
 
     // Size variants
-    &.sk-sm
+
+    // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
+    &:where(:not([class*="sk-size-"]))
+    {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        --sk-textarea-cut: 0.5rem;
+    }
+
+    &.sk-sm,
+    &.sk-size-sm
     {
         padding: 0.75rem 1rem;
         font-size: 0.875rem;
@@ -47,7 +59,8 @@
         --sk-textarea-cut: 0.4rem;
     }
 
-    &.sk-md
+    &.sk-md,
+    &.sk-size-md
     {
         padding: 0.75rem 1rem;
         font-size: 1rem;
@@ -55,7 +68,8 @@
         --sk-textarea-cut: 0.5rem;
     }
 
-    &.sk-lg
+    &.sk-lg,
+    &.sk-size-lg
     {
         padding: 0.75rem 1rem;
         font-size: 1.125rem;
@@ -63,7 +77,8 @@
         --sk-textarea-cut: 0.6rem;
     }
 
-    &.sk-xl
+    &.sk-xl,
+    &.sk-size-xl
     {
         padding: 0.75rem 1rem;
         font-size: 1.25rem;
@@ -207,3 +222,19 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// Defaults-when-absent: kind — neutral when no explicit kind class is present.
+//----------------------------------------------------------------------------------------------------------------------
+
+$_textarea-kind-not: '';
+@each $kind in $kinds
+{
+    $_textarea-kind-not: $_textarea-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-textarea:where(#{ $_textarea-kind-not })
+{
+    --sk-textarea-color-base: var(--sk-neutral-base);
+    --sk-textarea-fg: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------