@adnap/krysalicss 0.0.1 → 0.1.0

package/src/element/select/_variables.scss

@@ -1,11 +1,11 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/select.mdx
+
 $selector: "select" !default;
 
 $padding-y: variables.$size-extra-small !default;
 $padding-x: variables.$size-small !default;
-// Right padding leaves room for the custom caret SVG so long option text
-// doesn't overlap the chevron. Skipped for `[multiple]` (no caret).
 $padding-x-with-caret: 2rem !default;
 
 $border-radius: variables.$global-border-radius !default;
@@ -18,9 +18,5 @@ $focus-outline-offset: variables.$global-focus-outline-offset !default;
 $disabled-opacity: variables.$global-disabled-opacity !default;
 $border-mix: variables.$global-border-mix !default;
 
-// Inline SVG chevron baked as a data URL so the framework stays asset-free.
-// `currentColor` would be ideal but `background-image` URLs can't reference
-// `currentColor`; the muted neutral reads acceptably in both themes against
-// the input bg. Consumers wanting a theme-reactive caret can override.
 $caret-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none"><path d="M1 1.5l5 5 5-5" stroke="%23888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
   !default;

package/src/element/spinner/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "plugin";

package/src/element/spinner/_plugin.scss

@@ -0,0 +1,78 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/spinner.mdx
+
+@if variables.$feature-element-spinner {
+  #{$selector} {
+    @include variables.textColor(
+      spinner-fg,
+      list.nth($default-combination, 2),
+    );
+    display: inline-block;
+    vertical-align: -0.125em;
+    width: $size;
+    height: $size;
+    border: $border-width solid
+      color-mix(in srgb, currentColor #{$track-mix}, transparent);
+    border-block-start-color: currentColor;
+    border-radius: 50%;
+    animation: kc-spinner-rotate $duration linear infinite;
+
+    &#{$small-selector} {
+      width: $small-size;
+      height: $small-size;
+    }
+
+    &#{$large-selector} {
+      width: $large-size;
+      height: $large-size;
+    }
+
+    &#{$grow-selector} {
+      background-color: currentColor;
+      border: 0;
+      animation: kc-spinner-grow $grow-duration linear infinite;
+    }
+
+    @include variables.combinations using ($label, $tuple) {
+      @include variables.textColor(#{$label}-bg, list.nth($tuple, 1));
+    }
+  }
+
+  @keyframes kc-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes kc-spinner-grow {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #{$selector} {
+      animation-duration: $reduced-motion-duration;
+
+      &#{$grow-selector} {
+        animation: none;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    #{$selector} {
+      border-color: CanvasText;
+      border-block-start-color: Highlight;
+    }
+  }
+}

package/src/element/spinner/_variables.scss

@@ -0,0 +1,22 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/element/spinner.mdx
+
+$selector: ".spinner" !default;
+$grow-selector: "#{variables.$selector-prefix-is}grow" !default;
+$small-selector: "#{variables.$selector-prefix-is}small" !default;
+$large-selector: "#{variables.$selector-prefix-is}large" !default;
+
+$size: 1.5rem !default;
+$small-size: 1rem !default;
+$large-size: 2.5rem !default;
+$border-width: 0.25em !default;
+
+$duration: 0.75s !default;
+$grow-duration: 1s !default;
+
+$track-mix: 25% !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+$reduced-motion-duration: 2s !default;

package/src/element/switch/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/switch.mdx
 
 @if variables.$feature-element-switch {
   #{$selector} {
@@ -27,10 +29,9 @@
       background-color $transition-duration ease,
       border-color $transition-duration ease;
 
-    // Thumb is a centered pseudo-element. Anchored at inline-start; toggled by a
-    // translation along the inline axis. `translateX` is physical: RTL flips the
-    // sign via the `:dir(rtl)` companion below so the thumb travels toward the
-    // visual end-edge in both directions.
+    // `translateX` is physical: RTL flips the sign via the `:dir(rtl)`
+    // companion below so the thumb travels toward the visual end-edge in
+    // both directions.
     &::before {
       content: "";
       position: absolute;
@@ -79,11 +80,6 @@
       }
     }
 
-    // Forced-colors: the color-mix track and border collapse to nearly-
-    // invisible system colours. Force solid ButtonFace track + CanvasText
-    // border for the off state; checked state maps to Highlight surface.
-    // Thumb position alone already conveys state, but we keep the colour
-    // cue in case a renderer flattens the position offset.
     @media (forced-colors: active) {
       background-color: ButtonFace;
       border-color: CanvasText;

package/src/element/switch/_variables.scss

@@ -1,11 +1,9 @@
 @use "../../variables";
 
-// Visually a toggle, semantically still a checkbox: opt-in via `.switch` so
-// authors keep using `<input type="checkbox">` plus assistive-tech behaviour.
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/switch.mdx
+
 $selector: 'input[type="checkbox"].switch' !default;
 
-// Pill dimensions. Width is 2x height by convention so the thumb has a full
-// diameter of travel.
 $height: 1.25rem !default;
 $width: 2.25rem !default;
 $thumb-inset: 2px !default;
@@ -17,12 +15,6 @@ $focus-outline-offset: variables.$global-focus-outline-offset !default;
 
 $disabled-opacity: variables.$global-disabled-opacity !default;
 $border-mix: variables.$global-border-mix !default;
-// Track-off tint. 50 % is the smallest single value where the track itself
-// reads as a real surface against the page bg in both themes (3.04:1 default,
-// 4.53:1 dark) AND the thumb-on-track contrast clears 3:1 (4.85:1 default,
-// 3.32:1 dark). The earlier 18 % was effectively invisible against either bg.
-// At 50 % the off-state still reads distinctly off: it is darker than a
-// disabled (60 % opacity) thumb, not a half-on intermediate.
 $track-mix: 50% !default;
 
 $transition-duration: variables.$global-transition-duration !default;

package/src/element/text-input/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/text-input.mdx
 
 @if variables.$feature-element-text-input {
   #{$selector} {

package/src/element/text-input/_variables.scss

@@ -1,10 +1,10 @@
 @use "../../variables";
 
-// Covers every text-flavoured native input. Listed individually rather than via
-// `input:not([type])` because the latter also matches non-text types (number is
-// a text-like control, but checkbox/radio/etc. need different rules and are
-// handled by their own plugins). Order is alphabetical for deterministic
-// selector list output.
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/text-input.mdx
+
+// Listed individually rather than via `input:not([type])` because the latter
+// also matches non-text types handled by their own plugins. Order is
+// alphabetical for deterministic selector list output.
 $selector: 'input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"]'
   !default;
 

package/src/element/textarea/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/textarea.mdx
 
 @if variables.$feature-element-textarea {
   #{$selector} {

package/src/element/textarea/_variables.scss

@@ -1,5 +1,7 @@
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/element/forms/textarea.mdx
+
 $selector: "textarea" !default;
 
 $padding-y: variables.$size-extra-small !default;
@@ -17,6 +19,4 @@ $border-mix: variables.$global-border-mix !default;
 
 $min-height: 4rem !default;
 
-// Vertical-only resize is the safer default: horizontal resize on a fluid
-// container can break responsive layouts. Consumers can override to `both`.
 $resize: vertical !default;

package/src/helper/_border.scss

@@ -0,0 +1,43 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/border.mdx
+
+$selector-prefix: variables.$selector-prefix-is !default;
+
+$border-radius-token: "border-radius" !default;
+$pill-radius: 999px !default;
+
+@if variables.$feature-helper-border {
+  #{$selector-prefix}rounded {
+    border-radius: var(
+      --kc-#{$border-radius-token},
+      #{variables.$global-border-radius}
+    ) !important;
+  }
+
+  #{$selector-prefix}radiusless {
+    border-radius: 0 !important;
+  }
+
+  #{$selector-prefix}circle {
+    border-radius: 50% !important;
+  }
+
+  #{$selector-prefix}pill {
+    border-radius: $pill-radius !important;
+  }
+
+  // 50 % currentColor mix matches `$border-mix` in form controls.
+  #{$selector-prefix}bordered {
+    border: 1px solid color-mix(in srgb, currentColor 50%, transparent)
+      !important;
+  }
+
+  #{$selector-prefix}borderless {
+    border: 0 !important;
+  }
+
+  #{$selector-prefix}shadowless {
+    box-shadow: none !important;
+  }
+}

package/src/helper/_color.scss

@@ -0,0 +1,29 @@
+@use "sass:list";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/color.mdx
+
+$selector-prefix-text: "#{variables.$selector-prefix-has}text-" !default;
+$selector-prefix-background: "#{variables.$selector-prefix-has}background-"
+  !default;
+$inverted-selector: "#{variables.$selector-prefix-is}inverted" !default;
+
+@if variables.$feature-helper-color {
+  @each $label, $tuple in variables.$color-combinations {
+    #{$selector-prefix-text}#{$label} {
+      @include variables.textColor("#{$label}-fg", list.nth($tuple, 2));
+
+      &#{$inverted-selector} {
+        @include variables.textColor("#{$label}-bg", list.nth($tuple, 1));
+      }
+    }
+
+    #{$selector-prefix-background}#{$label} {
+      @include variables.backgroundColor("#{$label}-bg", list.nth($tuple, 1));
+
+      &#{$inverted-selector} {
+        @include variables.backgroundColor("#{$label}-fg", list.nth($tuple, 2));
+      }
+    }
+  }
+}

package/src/helper/{_controls.scss → _controls-internal.scss}

@@ -80,3 +80,24 @@
     );
   }
 }
+
+// Compound `.is-<label>.is-light` emission. Each combination keeps its hue
+// identity but swaps to the soft-tint pair (`--kc-<label>-light-bg/fg`)
+// emitted by `theme/_create.scss`. Used by box / badge / alert / card /
+// toast when the `$feature-light-variants` flag is on. Falls back to the
+// combination's base tuple if the theme doesn't ship the light tokens,
+// which renders identically to `.is-<label>` (graceful degradation).
+@mixin combinations-apply-light($bg-token-prefix: "", $fg-token-prefix: "") {
+  @include variables.combinations using ($label, $tuple) {
+    &#{variables.$selector-prefix-is}light {
+      @include variables.backgroundColor(
+        "#{$bg-token-prefix}#{$label}-light-bg",
+        list.nth($tuple, 1),
+      );
+      @include variables.textColor(
+        "#{$fg-token-prefix}#{$label}-light-fg",
+        list.nth($tuple, 2),
+      );
+    }
+  }
+}

package/src/helper/_flex.scss

@@ -0,0 +1,89 @@
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/flex.mdx
+
+$selector-prefix: variables.$selector-prefix-is !default;
+
+$gap-selector-prefix: ".gap-" !default;
+
+$directions: (row, row-reverse, column, column-reverse) !default;
+
+$justify-values: (
+  flex-start, flex-end, center, space-between, space-around, space-evenly
+) !default;
+
+$align-values: (stretch, flex-start, flex-end, center, baseline) !default;
+
+$align-self-values: (auto, flex-start, flex-end, center, baseline, stretch)
+  !default;
+
+$align-content-values: (
+  flex-start, flex-end, center, space-between, space-around, stretch
+) !default;
+
+$wrap-values: (nowrap, wrap, wrap-reverse) !default;
+
+$gap-scale: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 3rem,
+) !default;
+
+@if variables.$feature-helper-flex {
+  @each $direction in $directions {
+    #{$selector-prefix}flex-direction-#{$direction} {
+      flex-direction: $direction !important;
+    }
+  }
+
+  @each $value in $justify-values {
+    #{$selector-prefix}justify-content-#{$value} {
+      justify-content: $value !important;
+    }
+  }
+
+  @each $value in $align-values {
+    #{$selector-prefix}align-items-#{$value} {
+      align-items: $value !important;
+    }
+  }
+
+  @each $value in $align-self-values {
+    #{$selector-prefix}align-self-#{$value} {
+      align-self: $value !important;
+    }
+  }
+
+  @each $value in $align-content-values {
+    #{$selector-prefix}align-content-#{$value} {
+      align-content: $value !important;
+    }
+  }
+
+  @each $value in $wrap-values {
+    #{$selector-prefix}flex-wrap-#{$value} {
+      flex-wrap: $value !important;
+    }
+  }
+
+  @each $value in (0, 1) {
+    #{$selector-prefix}flex-grow-#{$value} {
+      flex-grow: $value !important;
+    }
+
+    #{$selector-prefix}flex-shrink-#{$value} {
+      flex-shrink: $value !important;
+    }
+  }
+
+  @each $key, $value in $gap-scale {
+    #{$gap-selector-prefix}#{$key} {
+      gap: $value !important;
+    }
+  }
+}

package/src/helper/_font-size.scss

@@ -0,0 +1,22 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/font-size.mdx
+
+$selector-prefix: "#{variables.$selector-prefix-is}size-" !default;
+
+$sizes: (
+  1: 2.5rem,
+  2: 2rem,
+  3: 1.75rem,
+  4: 1.5rem,
+  5: 1.25rem,
+  6: 1rem,
+) !default;
+
+@if variables.$feature-helper-font-size {
+  @each $key, $size in $sizes {
+    #{$selector-prefix}#{$key} {
+      font-size: $size !important;
+    }
+  }
+}

package/src/helper/_index.scss

@@ -1,3 +1,20 @@
 @forward "breakpoints";
-@forward "controls";
+@forward "controls-internal";
 @forward "state" as state-*;
+@forward "visibility" as visibility-*;
+@forward "spacing" as spacing-*;
+@forward "text" as text-*;
+@forward "color" as color-*;
+@forward "flex" as flex-*;
+@forward "sizing" as sizing-*;
+@forward "position" as position-*;
+@forward "shadow" as shadow-*;
+@forward "border" as border-*;
+@forward "interactions" as interactions-*;
+@forward "ratio" as ratio-*;
+@forward "object-fit" as object-fit-*;
+@forward "overflow" as overflow-*;
+@forward "stack" as stack-*;
+@forward "font-size" as font-size-*;
+@forward "line-height" as line-height-*;
+@forward "tooltip" as tooltip-*;

package/src/helper/_interactions.scss

@@ -0,0 +1,41 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/interactions.mdx
+
+$clickable-selector: "#{variables.$selector-prefix-is}clickable" !default;
+$unselectable-selector: "#{variables.$selector-prefix-is}unselectable" !default;
+$clearfix-selector: "#{variables.$selector-prefix-is}clearfix" !default;
+$pulled-left-selector: "#{variables.$selector-prefix-is}pulled-left" !default;
+$pulled-right-selector: "#{variables.$selector-prefix-is}pulled-right" !default;
+$stretched-link-selector: "#{variables.$selector-prefix-is}stretched-link"
+  !default;
+
+@if variables.$feature-helper-interactions {
+  #{$clickable-selector} {
+    cursor: pointer !important;
+  }
+
+  #{$unselectable-selector} {
+    user-select: none !important;
+  }
+
+  #{$clearfix-selector}::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  #{$pulled-left-selector} {
+    float: left !important;
+  }
+
+  #{$pulled-right-selector} {
+    float: right !important;
+  }
+
+  #{$stretched-link-selector}::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+  }
+}

package/src/helper/_line-height.scss

@@ -0,0 +1,22 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/line-height.mdx
+
+// Per-utility prefix knob. Mirrors `_flex.scss` / `_visibility.scss`
+// (selectors come from variables). Default keeps Bootstrap parity.
+$selector-prefix-lh: ".lh-" !default;
+
+$values: (
+  1: 1,
+  sm: 1.25,
+  base: 1.5,
+  lg: 2,
+) !default;
+
+@if variables.$feature-helper-line-height {
+  @each $key, $value in $values {
+    #{$selector-prefix-lh}#{$key} {
+      line-height: $value !important;
+    }
+  }
+}

package/src/helper/_object-fit.scss

@@ -0,0 +1,15 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/object-fit.mdx
+
+$selector-prefix: "#{variables.$selector-prefix-has}object-fit-" !default;
+
+$values: (contain, cover, fill, scale-down, none) !default;
+
+@if variables.$feature-helper-object-fit {
+  @each $value in $values {
+    #{$selector-prefix}#{$value} {
+      object-fit: $value !important;
+    }
+  }
+}

package/src/helper/_overflow.scss

@@ -0,0 +1,28 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/overflow.mdx
+
+$clipped-selector: "#{variables.$selector-prefix-is}clipped" !default;
+$selector-prefix: "#{variables.$selector-prefix-has}overflow-" !default;
+
+$values: (auto, hidden, visible, scroll) !default;
+
+@if variables.$feature-helper-overflow {
+  #{$clipped-selector} {
+    overflow: hidden !important;
+  }
+
+  @each $value in $values {
+    #{$selector-prefix}#{$value} {
+      overflow: $value !important;
+    }
+
+    #{$selector-prefix}x-#{$value} {
+      overflow-x: $value !important;
+    }
+
+    #{$selector-prefix}y-#{$value} {
+      overflow-y: $value !important;
+    }
+  }
+}

package/src/helper/_position.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/position.mdx
+
+$selector-prefix: variables.$selector-prefix-is !default;
+
+$positions: (static, relative, absolute, fixed, sticky) !default;
+
+$z-indices: (
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  modal: 1055,
+) !default;
+
+@if variables.$feature-helper-position {
+  @each $position in $positions {
+    #{$selector-prefix}#{$position} {
+      position: $position !important;
+    }
+  }
+
+  #{$selector-prefix}fixed-top {
+    position: fixed !important;
+    inset: 0 0 auto !important;
+    z-index: map.get($z-indices, fixed) !important;
+  }
+
+  #{$selector-prefix}fixed-bottom {
+    position: fixed !important;
+    inset: auto 0 0 !important;
+    z-index: map.get($z-indices, fixed) !important;
+  }
+
+  #{$selector-prefix}sticky-top {
+    position: sticky !important;
+    inset-block-start: 0 !important;
+    z-index: map.get($z-indices, sticky) !important;
+  }
+
+  #{$selector-prefix}sticky-bottom {
+    position: sticky !important;
+    inset-block-end: 0 !important;
+    z-index: map.get($z-indices, sticky) !important;
+  }
+}

package/src/helper/_ratio.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/ratio.mdx
+
+$selector: ".ratio" !default;
+$variant-selector-prefix: ".ratio-" !default;
+
+$ratios: (
+  1x1: "1 / 1",
+  4x3: "4 / 3",
+  16x9: "16 / 9",
+  21x9: "21 / 9",
+) !default;
+
+@if variables.$feature-helper-ratio {
+  #{$selector} {
+    position: relative;
+    width: 100%;
+    aspect-ratio: var(--kc-ratio, 1);
+  }
+
+  #{$selector} > * {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @each $name, $value in $ratios {
+    #{$variant-selector-prefix}#{$name} {
+      --kc-ratio: #{$value};
+    }
+  }
+}