@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/styles/components/_input-group.scss

@@ -0,0 +1,292 @@
+@use '../mixins/cut-border' as *;
+@use '../mixins/dual-selector' as *;
+@use '../theme/variables' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroup Component Styles
+//
+// Wraps form components into a unified flex row with:
+// - Border collapsing between adjacent children
+// - Suppression of all interior corner cuts
+// - Application of the group's `corners` prop to whichever child holds that corner of the group
+// - Addon styling that matches surrounding form components
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-input-group,
+sk-input-group
+{
+    // Color tokens (can be overridden by useCustomColors)
+    --sk-input-group-color-base: var(--sk-neutral-base);
+    --sk-input-group-fg: var(--sk-neutral-text);
+
+    // Addon-specific cut size (mirrors --sk-input-cut)
+    --sk-input-group-addon-cut: 0.625rem;
+
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Child layout — form fields fill remaining space; buttons / addons stay at content size
+    //------------------------------------------------------------------------------------------------------------------
+
+    > .sk-input,
+    > .sk-select,
+    > .sk-number-input-wrapper
+    {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    > .sk-button,
+    > .sk-input-group-addon
+    {
+        flex: 0 0 auto;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Zero out every child's native default corner cuts. The group's corner-application mixins
+    // (below) re-enable only the corners that map to the group's outer edges. Without this reset,
+    // a child's own defaults (e.g. SkInput's default top-right cut) would stack with the cuts the
+    // group applies, producing extra cut corners.
+    //------------------------------------------------------------------------------------------------------------------
+
+    > .sk-input,
+    > .sk-button,
+    > .sk-select,
+    > .sk-number-input-wrapper,
+    > .sk-input-group-addon
+    {
+        --sk-input-cut-tl: 0px;
+        --sk-input-cut-tr: 0px;
+        --sk-input-cut-br: 0px;
+        --sk-input-cut-bl: 0px;
+        --sk-button-cut-tl: 0px;
+        --sk-button-cut-tr: 0px;
+        --sk-button-cut-br: 0px;
+        --sk-button-cut-bl: 0px;
+        --sk-select-cut-tl: 0px;
+        --sk-select-cut-tr: 0px;
+        --sk-select-cut-br: 0px;
+        --sk-select-cut-bl: 0px;
+        --sk-number-input-cut-tl: 0px;
+        --sk-number-input-cut-tr: 0px;
+        --sk-number-input-cut-br: 0px;
+        --sk-number-input-cut-bl: 0px;
+        --sk-input-group-addon-cut-tl: 0px;
+        --sk-input-group-addon-cut-tr: 0px;
+        --sk-input-group-addon-cut-br: 0px;
+        --sk-input-group-addon-cut-bl: 0px;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Collapse the seam between adjacent children — pull the next sibling 1px left so its left
+    // border overlaps the previous sibling's right border into a single 1px line. Both siblings
+    // keep their full border boxes so the overlap stays opaque (matches in colour); removing one
+    // side would let the later sibling's dark background cover the surviving border, dimming the
+    // seam.
+    //------------------------------------------------------------------------------------------------------------------
+
+    > .sk-input:not(:first-child),
+    > .sk-button:not(:first-child),
+    > .sk-select:not(:first-child),
+    > .sk-number-input-wrapper:not(:first-child),
+    > .sk-input-group-addon:not(:first-child)
+    {
+        margin-left: -1px;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Group corner application
+//
+// The group's sk-cut-* classes (or corners=… attribute) drive the corresponding corner on the
+// child that holds that corner of the group:
+//   top-left, bottom-left  → :first-child
+//   top-right, bottom-right → :last-child
+//
+// Each rule sets all five form-component variables for that corner; only the variable matching
+// the actual child type is consumed.
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin _ig-tl-on-first
+{
+    > :first-child
+    {
+        --sk-input-cut-tl: var(--sk-input-cut);
+        --sk-button-cut-tl: var(--sk-button-current-cut-size);
+        --sk-select-cut-tl: var(--sk-select-cut);
+        --sk-number-input-cut-tl: var(--sk-number-input-cut);
+        --sk-input-group-addon-cut-tl: var(--sk-input-group-addon-cut);
+    }
+}
+
+@mixin _ig-bl-on-first
+{
+    > :first-child
+    {
+        --sk-input-cut-bl: var(--sk-input-cut);
+        --sk-button-cut-bl: var(--sk-button-current-cut-size);
+        --sk-select-cut-bl: var(--sk-select-cut);
+        --sk-number-input-cut-bl: var(--sk-number-input-cut);
+        --sk-input-group-addon-cut-bl: var(--sk-input-group-addon-cut);
+    }
+}
+
+@mixin _ig-tr-on-last
+{
+    > :last-child
+    {
+        --sk-input-cut-tr: var(--sk-input-cut);
+        --sk-button-cut-tr: var(--sk-button-current-cut-size);
+        --sk-select-cut-tr: var(--sk-select-cut);
+        --sk-number-input-cut-tr: var(--sk-number-input-cut);
+        --sk-input-group-addon-cut-tr: var(--sk-input-group-addon-cut);
+    }
+}
+
+@mixin _ig-br-on-last
+{
+    > :last-child
+    {
+        --sk-input-cut-br: var(--sk-input-cut);
+        --sk-button-cut-br: var(--sk-button-current-cut-size);
+        --sk-select-cut-br: var(--sk-select-cut);
+        --sk-number-input-cut-br: var(--sk-number-input-cut);
+        --sk-input-group-addon-cut-br: var(--sk-input-group-addon-cut);
+    }
+}
+
+@include list-modifier('input-group', 'cut', 'top-left', 'corners')    { @include _ig-tl-on-first; }
+@include list-modifier('input-group', 'cut', 'bottom-left', 'corners') { @include _ig-bl-on-first; }
+@include list-modifier('input-group', 'cut', 'top-right', 'corners')   { @include _ig-tr-on-last; }
+@include list-modifier('input-group', 'cut', 'bottom-right', 'corners'){ @include _ig-br-on-last; }
+
+@include defaults-when-absent('input-group', 'sk-cut-')
+{
+    @include _ig-tl-on-first;
+    @include _ig-br-on-last;
+}
+
+@include defaults-when-no-attr('input-group', 'corners')
+{
+    @include _ig-tl-on-first;
+    @include _ig-br-on-last;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Addon base styles
+//
+// Mirrors the surrounding form components: dark background derived from kind base, neon-base
+// border, font sizing matching the size variant.
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-input-group-addon,
+sk-input-group-addon
+{
+    --sk-input-group-addon-color-base: var(--sk-neutral-base);
+    --sk-input-group-addon-fg: var(--sk-neutral-text);
+    --sk-input-group-addon-cut: 0.625rem;
+
+    --sk-input-group-addon-cut-tl: 0px;
+    --sk-input-group-addon-cut-tr: 0px;
+    --sk-input-group-addon-cut-br: 0px;
+    --sk-input-group-addon-cut-bl: 0px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+    flex-shrink: 0;
+    font-family: var(--sk-font-family-base);
+    color: var(--sk-input-group-addon-fg);
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-input-group-addon-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    user-select: none;
+
+    @include cut-border-vars(
+        $tl: var(--sk-input-group-addon-cut-tl),
+        $tr: var(--sk-input-group-addon-cut-tr),
+        $br: var(--sk-input-group-addon-cut-br),
+        $bl: var(--sk-input-group-addon-cut-bl),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-input-group-addon-color-base)
+    );
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Addon size variants — height / padding / font / cut
+//----------------------------------------------------------------------------------------------------------------------
+
+@include size-variant('input-group-addon', 'sm')
+{
+    height: 2rem;
+    padding: 0 var(--sk-space-sm);
+    font-size: 0.875rem;
+    --sk-input-group-addon-cut: 0.5rem;
+}
+
+@include size-variant('input-group-addon', 'md')
+{
+    height: 2.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1rem;
+    --sk-input-group-addon-cut: 0.625rem;
+}
+
+@include size-variant('input-group-addon', 'lg')
+{
+    height: 3rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1.125rem;
+    --sk-input-group-addon-cut: 0.75rem;
+}
+
+@include size-variant('input-group-addon', 'xl')
+{
+    height: 3.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1.25rem;
+    --sk-input-group-addon-cut: 0.875rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Addon kind variants — drive the addon's base color tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+@each $kind in (neutral, primary, accent, info, success, warning, danger)
+{
+    @include kind-variant('input-group-addon', $kind)
+    {
+        --sk-input-group-addon-color-base: var(--sk-#{ $kind }-base);
+        --sk-input-group-addon-fg: var(--sk-#{ $kind }-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Addon defaults-when-absent — standalone default size/kind
+//----------------------------------------------------------------------------------------------------------------------
+
+@include defaults-when-absent('input-group-addon', 'sk-size-')
+{
+    height: 2.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1rem;
+    --sk-input-group-addon-cut: 0.625rem;
+}
+
+@include defaults-when-no-attr('input-group-addon', 'size')
+{
+    height: 2.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1rem;
+    --sk-input-group-addon-cut: 0.625rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_input.scss

@@ -1,4 +1,5 @@
 @use '../mixins/cut-border' as *;
+@use '../mixins/dual-selector' as *;
 @use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -14,15 +15,25 @@
     // Corner cut size (scales with size variant)
     --sk-input-cut: 0.5rem;
 
+    // Per-corner cut sizes (toggled on by .sk-cut-* classes / corners= attribute)
+    --sk-input-cut-tl: 0px;
+    --sk-input-cut-tr: 0px;
+    --sk-input-cut-br: 0px;
+    --sk-input-cut-bl: 0px;
+
     position: relative;
     display: block;
     width: 100%;
     font-family: var(--sk-font-family-base);
     cursor: text;
 
-    @include cut-border(
-        $cut: var(--sk-input-cut),
-        $corners: (top-right)
+    @include cut-border-vars(
+        $tl: var(--sk-input-cut-tl),
+        $tr: var(--sk-input-cut-tr),
+        $br: var(--sk-input-cut-br),
+        $bl: var(--sk-input-cut-bl),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-input-color-base)
     );
 
     // Base styling
@@ -32,7 +43,6 @@
         #000 65%
     );
     color: var(--sk-input-fg);
-    border: var(--sk-border-width-thin) solid var(--sk-input-color-base);
 
     // Transitions
     transition-property: background, color, border-color, box-shadow;
@@ -46,7 +56,7 @@
         height: 2.5rem;
         padding: 0 var(--sk-space-md);
         font-size: 1rem;
-        --sk-input-cut: 0.5rem;
+        --sk-input-cut: 0.625rem;
     }
 
     &.sk-sm,
@@ -55,7 +65,7 @@
         height: 2rem;
         padding: 0 var(--sk-space-sm);
         font-size: 0.875rem;
-        --sk-input-cut: 0.4rem;
+        --sk-input-cut: 0.5rem;
     }
 
     &.sk-md,
@@ -64,7 +74,7 @@
         height: 2.5rem;
         padding: 0 var(--sk-space-md);
         font-size: 1rem;
-        --sk-input-cut: 0.5rem;
+        --sk-input-cut: 0.625rem;
     }
 
     &.sk-lg,
@@ -73,7 +83,7 @@
         height: 3rem;
         padding: 0 var(--sk-space-md);
         font-size: 1.125rem;
-        --sk-input-cut: 0.6rem;
+        --sk-input-cut: 0.75rem;
     }
 
     &.sk-xl,
@@ -82,7 +92,7 @@
         height: 3.5rem;
         padding: 0 var(--sk-space-md);
         font-size: 1.25rem;
-        --sk-input-cut: 0.7rem;
+        --sk-input-cut: 0.875rem;
     }
 
     // Focus state (brighter background)
@@ -263,6 +273,44 @@
     }
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Default cut: top-right — fires when no sk-cut-* class is present and no corners attribute set.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include defaults-when-absent('input', 'sk-cut-')
+{
+    --sk-input-cut-tr: var(--sk-input-cut);
+}
+
+@include defaults-when-no-attr('input', 'corners')
+{
+    --sk-input-cut-tr: var(--sk-input-cut);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Per-corner classes (sk-cut-top-left etc.) and corners="..." attribute values.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include list-modifier('input', 'cut', 'top-left', 'corners')
+{
+    --sk-input-cut-tl: var(--sk-input-cut);
+}
+
+@include list-modifier('input', 'cut', 'top-right', 'corners')
+{
+    --sk-input-cut-tr: var(--sk-input-cut);
+}
+
+@include list-modifier('input', 'cut', 'bottom-right', 'corners')
+{
+    --sk-input-cut-br: var(--sk-input-cut);
+}
+
+@include list-modifier('input', 'cut', 'bottom-left', 'corners')
+{
+    --sk-input-cut-bl: var(--sk-input-cut);
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Defaults-when-absent: kind — neutral when no explicit kind class is present.
 //----------------------------------------------------------------------------------------------------------------------

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

@@ -1,4 +1,5 @@
 @use '../mixins/cut-border' as *;
+@use '../mixins/dual-selector' as *;
 @use '../theme/variables' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -23,7 +24,13 @@
     --sk-number-input-font-size: 1rem;
     --sk-number-input-stepper-width: 2rem;
     --sk-number-input-stepper-icon: 1rem;
-    --sk-number-input-cut: 0.5rem;
+    --sk-number-input-cut: 0.625rem;
+
+    // Per-corner cut sizes (toggled on by .sk-cut-* / corners= attribute)
+    --sk-number-input-cut-tl: 0px;
+    --sk-number-input-cut-tr: 0px;
+    --sk-number-input-cut-br: 0px;
+    --sk-number-input-cut-bl: 0px;
 
     position: relative;
     display: flex;
@@ -135,7 +142,7 @@
         --sk-number-input-font-size: 1rem;
         --sk-number-input-stepper-width: 2rem;
         --sk-number-input-stepper-icon: 1rem;
-        --sk-number-input-cut: 0.5rem;
+        --sk-number-input-cut: 0.625rem;
     }
 
     &.sk-sm,
@@ -146,7 +153,7 @@
         --sk-number-input-font-size: 0.875rem;
         --sk-number-input-stepper-width: 1.5rem;
         --sk-number-input-stepper-icon: 0.75rem;
-        --sk-number-input-cut: 0.4rem;
+        --sk-number-input-cut: 0.5rem;
     }
 
     &.sk-md,
@@ -157,7 +164,7 @@
         --sk-number-input-font-size: 1rem;
         --sk-number-input-stepper-width: 2rem;
         --sk-number-input-stepper-icon: 1rem;
-        --sk-number-input-cut: 0.5rem;
+        --sk-number-input-cut: 0.625rem;
     }
 
     &.sk-lg,
@@ -168,7 +175,7 @@
         --sk-number-input-font-size: 1.125rem;
         --sk-number-input-stepper-width: 2.25rem;
         --sk-number-input-stepper-icon: 1.125rem;
-        --sk-number-input-cut: 0.6rem;
+        --sk-number-input-cut: 0.75rem;
     }
 
     &.sk-xl,
@@ -179,7 +186,7 @@
         --sk-number-input-font-size: 1.25rem;
         --sk-number-input-stepper-width: 2.5rem;
         --sk-number-input-stepper-icon: 1.25rem;
-        --sk-number-input-cut: 0.7rem;
+        --sk-number-input-cut: 0.875rem;
     }
 }
 
@@ -193,9 +200,13 @@
     height: 100%;
     position: relative;
 
-    @include cut-border(
-        $cut: var(--sk-number-input-cut),
-        $corners: (top-right)
+    @include cut-border-vars(
+        $tl: var(--sk-number-input-cut-tl),
+        $tr: var(--sk-number-input-cut-tr),
+        $br: var(--sk-number-input-cut-br),
+        $bl: var(--sk-number-input-cut-bl),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-number-input-color-base)
     );
 
     // Base styling
@@ -204,7 +215,6 @@
         color-mix(in oklch, var(--sk-number-input-color-base) 75%, transparent 25%),
         #000 65%
     );
-    border: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
 
     // Transitions
     transition-property: background, color, border-color, box-shadow;
@@ -330,15 +340,79 @@
 .sk-number-input-increment
 {
     position: relative;
+
+    // Shape-only: mirror the wrapper's top-right bevel so the hover fill doesn't square off the
+    // cut corner. Driven by the wrapper's per-corner variable so when the wrapper's top-right is
+    // suppressed (e.g. interior child of SkInputGroup) the increment stays square too.
+    @include cut-border-vars(
+        $tl: 0px,
+        $tr: var(--sk-number-input-cut-tr),
+        $br: 0px,
+        $bl: 0px,
+        $border-width: 0,
+        $border-color: transparent
+    );
+
+    // Divider between increment and decrement. Must come after the mixin so the `border:`
+    // shorthand inside doesn't clobber it.
     border-bottom: var(--sk-border-width-thin) solid var(--sk-number-input-color-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
 
-    // Match the parent's top-right corner cut
-    @include cut-border(
-        $cut: var(--sk-number-input-cut),
-        $corners: (top-right)
+.sk-number-input-decrement
+{
+    position: relative;
+
+    // Mirror the wrapper's bottom-right bevel for the same reason as the increment above.
+    @include cut-border-vars(
+        $tl: 0px,
+        $tr: 0px,
+        $br: var(--sk-number-input-cut-br),
+        $bl: 0px,
+        $border-width: 0,
+        $border-color: transparent
     );
 }
 
+//----------------------------------------------------------------------------------------------------------------------
+// Default cut: top-right — fires when no sk-cut-* class is present and no corners attribute set.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include defaults-when-absent('number-input-wrapper', 'sk-cut-')
+{
+    --sk-number-input-cut-tr: var(--sk-number-input-cut);
+}
+
+@include defaults-when-no-attr('number-input-wrapper', 'corners')
+{
+    --sk-number-input-cut-tr: var(--sk-number-input-cut);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Per-corner classes / corners="..." values.
+//----------------------------------------------------------------------------------------------------------------------
+
+@include list-modifier('number-input-wrapper', 'cut', 'top-left', 'corners')
+{
+    --sk-number-input-cut-tl: var(--sk-number-input-cut);
+}
+
+@include list-modifier('number-input-wrapper', 'cut', 'top-right', 'corners')
+{
+    --sk-number-input-cut-tr: var(--sk-number-input-cut);
+}
+
+@include list-modifier('number-input-wrapper', 'cut', 'bottom-right', 'corners')
+{
+    --sk-number-input-cut-br: var(--sk-number-input-cut);
+}
+
+@include list-modifier('number-input-wrapper', 'cut', 'bottom-left', 'corners')
+{
+    --sk-number-input-cut-bl: var(--sk-number-input-cut);
+}
+
 //----------------------------------------------------------------------------------------------------------------------
 // Defaults-when-absent: kind — neutral when no explicit kind class is present on the wrapper.
 //----------------------------------------------------------------------------------------------------------------------