@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/styles/components/_select.scss

@@ -1,4 +1,5 @@
 @use '../mixins/cut-border' as *;
+@use '../mixins/dual-selector' as *;
 @use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -11,6 +12,12 @@
     --sk-select-color-base: var(--sk-neutral-base);
     --sk-select-fg: var(--sk-neutral-text);
 
+    // Per-corner cut sizes (toggled on by .sk-cut-* / corners=)
+    --sk-select-cut-tl: 0px;
+    --sk-select-cut-tr: 0px;
+    --sk-select-cut-br: 0px;
+    --sk-select-cut-bl: 0px;
+
     position: relative;
     display: inline-flex;
     width: 100%;
@@ -18,32 +25,32 @@
     // Default: md when no sk-size-* class is present (zero-specificity, explicit class wins)
     &:where(:not([class*="sk-size-"]))
     {
-        --sk-select-cut: 0.5rem;
+        --sk-select-cut: 0.625rem;
     }
 
     // Size variants
     &.sk-sm,
     &.sk-size-sm
     {
-        --sk-select-cut: 0.4rem;
+        --sk-select-cut: 0.5rem;
     }
 
     &.sk-md,
     &.sk-size-md
     {
-        --sk-select-cut: 0.5rem;
+        --sk-select-cut: 0.625rem;
     }
 
     &.sk-lg,
     &.sk-size-lg
     {
-        --sk-select-cut: 0.6rem;
+        --sk-select-cut: 0.75rem;
     }
 
     &.sk-xl,
     &.sk-size-xl
     {
-        --sk-select-cut: 0.7rem;
+        --sk-select-cut: 0.875rem;
     }
 
     // Kind variants
@@ -154,11 +161,13 @@
     font-size: inherit;
     text-align: left;
 
-    @include cut-border(
-        $cut: var(--sk-select-cut),
+    @include cut-border-vars(
+        $tl: var(--sk-select-cut-tl),
+        $tr: var(--sk-select-cut-tr),
+        $br: var(--sk-select-cut-br),
+        $bl: var(--sk-select-cut-bl),
         $border-width: var(--sk-border-width-thin),
-        $border-color: var(--sk-select-color-base),
-        $corners: (top-right)
+        $border-color: var(--sk-select-color-base)
     );
 
     // Base styling
@@ -453,6 +462,44 @@
     background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Default cut: top-right — fires when no sk-cut-* class is present and no corners attribute set.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include defaults-when-absent('select', 'sk-cut-')
+{
+    --sk-select-cut-tr: var(--sk-select-cut);
+}
+
+@include defaults-when-no-attr('select', 'corners')
+{
+    --sk-select-cut-tr: var(--sk-select-cut);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Per-corner classes / corners="..." values.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include list-modifier('select', 'cut', 'top-left', 'corners')
+{
+    --sk-select-cut-tl: var(--sk-select-cut);
+}
+
+@include list-modifier('select', 'cut', 'top-right', 'corners')
+{
+    --sk-select-cut-tr: var(--sk-select-cut);
+}
+
+@include list-modifier('select', 'cut', 'bottom-right', 'corners')
+{
+    --sk-select-cut-br: var(--sk-select-cut);
+}
+
+@include list-modifier('select', 'cut', 'bottom-left', 'corners')
+{
+    --sk-select-cut-bl: var(--sk-select-cut);
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Defaults-when-absent: kind — neutral when no explicit kind class is present.
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/mixins/_cut-border.scss

@@ -266,3 +266,86 @@
 }
 
 //----------------------------------------------------------------------------------------------------------------------
+// cut-border-vars
+//
+// Variant of cut-border that drives each corner from a CSS custom property reference (e.g.,
+// `var(--sk-input-cut-tl)`) instead of a fixed SASS-time corner list. Set a corner's variable
+// to 0px to render that corner square. This is what SkInputGroup uses to suppress interior
+// corners at runtime via the cascade.
+//
+// $tl, $tr, $br, $bl: CSS values that resolve to a length (typically `var(--sk-foo-cut-XX)`).
+// $border-width, $border-color: same as cut-border.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin cut-border-vars(
+    $tl,
+    $tr,
+    $br,
+    $bl,
+    $border-width: var(--sk-border-width-thin),
+    $border-color: currentColor
+)
+{
+    @supports (corner-shape: bevel)
+    {
+        border: $border-width solid $border-color;
+        border-top-left-radius: $tl;
+        border-top-right-radius: $tr;
+        border-bottom-right-radius: $br;
+        border-bottom-left-radius: $bl;
+        corner-shape: bevel;
+    }
+
+    @supports not (corner-shape: bevel)
+    {
+        border: none;
+
+        // 8-point polygon — when a corner var is 0px, its two points collapse into the corner.
+        clip-path: polygon(
+            #{ $tl } 0,
+            calc(100% - #{ $tr }) 0,
+            100% #{ $tr },
+            100% calc(100% - #{ $br }),
+            calc(100% - #{ $br }) 100%,
+            #{ $bl } 100%,
+            0 calc(100% - #{ $bl }),
+            0 #{ $tl }
+        );
+
+        &::before
+        {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $border-color;
+            z-index: -1;
+
+            // Outer polygon (clockwise) + inner polygon (counter-clockwise, inset by $border-width).
+            clip-path: polygon(
+                #{ $tl } 0,
+                calc(100% - #{ $tr }) 0,
+                100% #{ $tr },
+                100% calc(100% - #{ $br }),
+                calc(100% - #{ $br }) 100%,
+                #{ $bl } 100%,
+                0 calc(100% - #{ $bl }),
+                0 #{ $tl },
+                #{ $tl } 0,
+                calc(#{ $tl } + #{ $border-width }) #{ $border-width },
+                #{ $border-width } calc(#{ $tl } + #{ $border-width }),
+                #{ $border-width } calc(100% - #{ $bl } - #{ $border-width }),
+                calc(#{ $bl } + #{ $border-width }) calc(100% - #{ $border-width }),
+                calc(100% - #{ $br } - #{ $border-width }) calc(100% - #{ $border-width }),
+                calc(100% - #{ $border-width }) calc(100% - #{ $br } - #{ $border-width }),
+                calc(100% - #{ $border-width }) calc(#{ $tr } + #{ $border-width }),
+                calc(100% - #{ $tr } - #{ $border-width }) #{ $border-width },
+                calc(#{ $tl } + #{ $border-width }) #{ $border-width }
+            );
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/tailwind.scss

@@ -0,0 +1,262 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SleekSpace UI — Tailwind v4 Integration
+//----------------------------------------------------------------------------------------------------------------------
+// Maps SleekSpace CSS variables to Tailwind's @theme system so utilities like `bg-sk-primary`
+// resolve to SleekSpace tokens. Use ONLY when integrating with Tailwind v4 — non-Tailwind
+// consumers should import `tokens.css` instead, which contains no Tailwind-specific syntax.
+//
+// Usage with Tailwind v4:
+//
+// @import "tailwindcss";
+// @import "@skewedaspect/sleekspace-ui/tokens.css";
+// @import "@skewedaspect/sleekspace-ui/tailwind.css";
+//
+// Then use in your templates:
+//   <div class="bg-sk-primary text-sk-primary-text">SleekSpace + Tailwind!</div>
+//   <div class="bg-sk-purple-50 text-white">Neon purple</div>
+//
+// Or with arbitrary values (works without this file):
+//   <div class="bg-[var(--sk-primary-base)]">Direct CSS variable</div>
+//----------------------------------------------------------------------------------------------------------------------
+
+@theme inline {
+  /* Semantic Colors (theme-aware - change based on SkTheme) */
+  /* Each semantic color gets a full shade range using oklch lightness modifications */
+
+  /* Neutral */
+  --color-sk-neutral: var(--sk-neutral-base);
+  --color-sk-neutral-text: var(--sk-neutral-text);
+  --color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
+  --color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
+  --color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
+  --color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
+  --color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
+  --color-sk-neutral-50: var(--sk-neutral-base);
+  --color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
+  --color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
+  --color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
+  --color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
+  --color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
+
+  /* Primary */
+  --color-sk-primary: var(--sk-primary-base);
+  --color-sk-primary-text: var(--sk-primary-text);
+  --color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
+  --color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
+  --color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
+  --color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
+  --color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
+  --color-sk-primary-50: var(--sk-primary-base);
+  --color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
+  --color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
+  --color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
+  --color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
+  --color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
+
+  /* Accent */
+  --color-sk-accent: var(--sk-accent-base);
+  --color-sk-accent-text: var(--sk-accent-text);
+  --color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
+  --color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
+  --color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
+  --color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
+  --color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
+  --color-sk-accent-50: var(--sk-accent-base);
+  --color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
+  --color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
+  --color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
+  --color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
+  --color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
+
+  /* Info */
+  --color-sk-info: var(--sk-info-base);
+  --color-sk-info-text: var(--sk-info-text);
+  --color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
+  --color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
+  --color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
+  --color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
+  --color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
+  --color-sk-info-50: var(--sk-info-base);
+  --color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
+  --color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
+  --color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
+  --color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
+  --color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
+
+  /* Success */
+  --color-sk-success: var(--sk-success-base);
+  --color-sk-success-text: var(--sk-success-text);
+  --color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
+  --color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
+  --color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
+  --color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
+  --color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
+  --color-sk-success-50: var(--sk-success-base);
+  --color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
+  --color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
+  --color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
+  --color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
+  --color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
+
+  /* Warning */
+  --color-sk-warning: var(--sk-warning-base);
+  --color-sk-warning-text: var(--sk-warning-text);
+  --color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
+  --color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
+  --color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
+  --color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
+  --color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
+  --color-sk-warning-50: var(--sk-warning-base);
+  --color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
+  --color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
+  --color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
+  --color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
+  --color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
+
+  /* Danger */
+  --color-sk-danger: var(--sk-danger-base);
+  --color-sk-danger-text: var(--sk-danger-text);
+  --color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
+  --color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
+  --color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
+  --color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
+  --color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
+  --color-sk-danger-50: var(--sk-danger-base);
+  --color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
+  --color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
+  --color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
+  --color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
+  --color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
+
+  /* Color Palette - Gray */
+  --color-sk-gray-5: var(--sk-color-gray-05);
+  --color-sk-gray-10: var(--sk-color-gray-10);
+  --color-sk-gray-20: var(--sk-color-gray-20);
+  --color-sk-gray-30: var(--sk-color-gray-30);
+  --color-sk-gray-40: var(--sk-color-gray-40);
+  --color-sk-gray-50: var(--sk-color-gray-50);
+  --color-sk-gray-60: var(--sk-color-gray-60);
+  --color-sk-gray-70: var(--sk-color-gray-70);
+  --color-sk-gray-80: var(--sk-color-gray-80);
+  --color-sk-gray-90: var(--sk-color-gray-90);
+  --color-sk-gray-95: var(--sk-color-gray-95);
+
+  /* Color Palette - Blue */
+  --color-sk-blue-5: var(--sk-color-blue-05);
+  --color-sk-blue-10: var(--sk-color-blue-10);
+  --color-sk-blue-20: var(--sk-color-blue-20);
+  --color-sk-blue-30: var(--sk-color-blue-30);
+  --color-sk-blue-40: var(--sk-color-blue-40);
+  --color-sk-blue-50: var(--sk-color-blue-50);
+  --color-sk-blue-60: var(--sk-color-blue-60);
+  --color-sk-blue-70: var(--sk-color-blue-70);
+  --color-sk-blue-80: var(--sk-color-blue-80);
+  --color-sk-blue-90: var(--sk-color-blue-90);
+  --color-sk-blue-95: var(--sk-color-blue-95);
+
+  /* Color Palette - Red */
+  --color-sk-red-5: var(--sk-color-red-05);
+  --color-sk-red-10: var(--sk-color-red-10);
+  --color-sk-red-20: var(--sk-color-red-20);
+  --color-sk-red-30: var(--sk-color-red-30);
+  --color-sk-red-40: var(--sk-color-red-40);
+  --color-sk-red-50: var(--sk-color-red-50);
+  --color-sk-red-60: var(--sk-color-red-60);
+  --color-sk-red-70: var(--sk-color-red-70);
+  --color-sk-red-80: var(--sk-color-red-80);
+  --color-sk-red-90: var(--sk-color-red-90);
+  --color-sk-red-95: var(--sk-color-red-95);
+
+  /* Color Palette - Orange */
+  --color-sk-orange-5: var(--sk-color-orange-05);
+  --color-sk-orange-10: var(--sk-color-orange-10);
+  --color-sk-orange-20: var(--sk-color-orange-20);
+  --color-sk-orange-30: var(--sk-color-orange-30);
+  --color-sk-orange-40: var(--sk-color-orange-40);
+  --color-sk-orange-50: var(--sk-color-orange-50);
+  --color-sk-orange-60: var(--sk-color-orange-60);
+  --color-sk-orange-70: var(--sk-color-orange-70);
+  --color-sk-orange-80: var(--sk-color-orange-80);
+  --color-sk-orange-90: var(--sk-color-orange-90);
+  --color-sk-orange-95: var(--sk-color-orange-95);
+
+  /* Color Palette - Yellow */
+  --color-sk-yellow-5: var(--sk-color-yellow-05);
+  --color-sk-yellow-10: var(--sk-color-yellow-10);
+  --color-sk-yellow-20: var(--sk-color-yellow-20);
+  --color-sk-yellow-30: var(--sk-color-yellow-30);
+  --color-sk-yellow-40: var(--sk-color-yellow-40);
+  --color-sk-yellow-50: var(--sk-color-yellow-50);
+  --color-sk-yellow-60: var(--sk-color-yellow-60);
+  --color-sk-yellow-70: var(--sk-color-yellow-70);
+  --color-sk-yellow-80: var(--sk-color-yellow-80);
+  --color-sk-yellow-90: var(--sk-color-yellow-90);
+  --color-sk-yellow-95: var(--sk-color-yellow-95);
+
+  /* Color Palette - Green */
+  --color-sk-green-5: var(--sk-color-green-05);
+  --color-sk-green-10: var(--sk-color-green-10);
+  --color-sk-green-20: var(--sk-color-green-20);
+  --color-sk-green-30: var(--sk-color-green-30);
+  --color-sk-green-40: var(--sk-color-green-40);
+  --color-sk-green-50: var(--sk-color-green-50);
+  --color-sk-green-60: var(--sk-color-green-60);
+  --color-sk-green-70: var(--sk-color-green-70);
+  --color-sk-green-80: var(--sk-color-green-80);
+  --color-sk-green-90: var(--sk-color-green-90);
+  --color-sk-green-95: var(--sk-color-green-95);
+
+  /* Color Palette - Mint */
+  --color-sk-mint-5: var(--sk-color-mint-05);
+  --color-sk-mint-10: var(--sk-color-mint-10);
+  --color-sk-mint-20: var(--sk-color-mint-20);
+  --color-sk-mint-30: var(--sk-color-mint-30);
+  --color-sk-mint-40: var(--sk-color-mint-40);
+  --color-sk-mint-50: var(--sk-color-mint-50);
+  --color-sk-mint-60: var(--sk-color-mint-60);
+  --color-sk-mint-70: var(--sk-color-mint-70);
+  --color-sk-mint-80: var(--sk-color-mint-80);
+  --color-sk-mint-90: var(--sk-color-mint-90);
+  --color-sk-mint-95: var(--sk-color-mint-95);
+
+  /* Color Palette - Cyan */
+  --color-sk-cyan-5: var(--sk-color-cyan-05);
+  --color-sk-cyan-10: var(--sk-color-cyan-10);
+  --color-sk-cyan-20: var(--sk-color-cyan-20);
+  --color-sk-cyan-30: var(--sk-color-cyan-30);
+  --color-sk-cyan-40: var(--sk-color-cyan-40);
+  --color-sk-cyan-50: var(--sk-color-cyan-50);
+  --color-sk-cyan-60: var(--sk-color-cyan-60);
+  --color-sk-cyan-70: var(--sk-color-cyan-70);
+  --color-sk-cyan-80: var(--sk-color-cyan-80);
+  --color-sk-cyan-90: var(--sk-color-cyan-90);
+  --color-sk-cyan-95: var(--sk-color-cyan-95);
+
+  /* Color Palette - Purple */
+  --color-sk-purple-5: var(--sk-color-purple-05);
+  --color-sk-purple-10: var(--sk-color-purple-10);
+  --color-sk-purple-20: var(--sk-color-purple-20);
+  --color-sk-purple-30: var(--sk-color-purple-30);
+  --color-sk-purple-40: var(--sk-color-purple-40);
+  --color-sk-purple-50: var(--sk-color-purple-50);
+  --color-sk-purple-60: var(--sk-color-purple-60);
+  --color-sk-purple-70: var(--sk-color-purple-70);
+  --color-sk-purple-80: var(--sk-color-purple-80);
+  --color-sk-purple-90: var(--sk-color-purple-90);
+  --color-sk-purple-95: var(--sk-color-purple-95);
+
+  /* Color Palette - Pink */
+  --color-sk-pink-5: var(--sk-color-pink-05);
+  --color-sk-pink-10: var(--sk-color-pink-10);
+  --color-sk-pink-20: var(--sk-color-pink-20);
+  --color-sk-pink-30: var(--sk-color-pink-30);
+  --color-sk-pink-40: var(--sk-color-pink-40);
+  --color-sk-pink-50: var(--sk-color-pink-50);
+  --color-sk-pink-60: var(--sk-color-pink-60);
+  --color-sk-pink-70: var(--sk-color-pink-70);
+  --color-sk-pink-80: var(--sk-color-pink-80);
+  --color-sk-pink-90: var(--sk-color-pink-90);
+  --color-sk-pink-95: var(--sk-color-pink-95);
+}
+
+//----------------------------------------------------------------------------------------------------------------------