@adnap/krysalicss 0.0.1 → 0.1.0

package/src/helper/_shadow.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/shadow.mdx
+
+$selector-prefix: "#{variables.$selector-prefix-has}shadow" !default;
+
+$shadows: (
+  none: none,
+  sm: 0 1px 2px rgb(0 0 0 / 0.08),
+  base: 0 4px 12px rgb(0 0 0 / 0.12),
+  lg: 0 12px 32px rgb(0 0 0 / 0.18),
+) !default;
+
+@if variables.$feature-helper-shadow {
+  #{$selector-prefix}-none {
+    box-shadow: map.get($shadows, none) !important;
+  }
+
+  #{$selector-prefix}-sm {
+    box-shadow: map.get($shadows, sm) !important;
+  }
+
+  #{$selector-prefix} {
+    box-shadow: map.get($shadows, base) !important;
+  }
+
+  #{$selector-prefix}-lg {
+    box-shadow: map.get($shadows, lg) !important;
+  }
+}

package/src/helper/_sizing.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/sizing.mdx
+
+$selector-prefix: variables.$selector-prefix-is !default;
+
+// Per-utility prefix knobs. Selectors come from variables so consumers can
+// rescope without forking the helper. Defaults mirror Bootstrap parity.
+$selector-prefix-w: ".w-" !default;
+$selector-prefix-h: ".h-" !default;
+$selector-prefix-mw: ".mw-" !default;
+$selector-prefix-mh: ".mh-" !default;
+$selector-prefix-vw: ".vw-" !default;
+$selector-prefix-vh: ".vh-" !default;
+$selector-prefix-min-vw: ".min-vw-" !default;
+$selector-prefix-min-vh: ".min-vh-" !default;
+
+$widths: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%,
+  auto: auto,
+) !default;
+
+$heights: $widths !default;
+
+@if variables.$feature-helper-sizing {
+  @each $key, $value in $widths {
+    #{$selector-prefix-w}#{$key} {
+      width: $value !important;
+    }
+  }
+
+  @each $key, $value in $heights {
+    #{$selector-prefix-h}#{$key} {
+      height: $value !important;
+    }
+  }
+
+  #{$selector-prefix}fullwidth {
+    width: 100% !important;
+  }
+
+  #{$selector-prefix}fullheight {
+    height: 100% !important;
+  }
+
+  #{$selector-prefix-mw}100 {
+    max-width: 100% !important;
+  }
+
+  #{$selector-prefix-mh}100 {
+    max-height: 100% !important;
+  }
+
+  #{$selector-prefix-min-vw}100 {
+    min-width: 100vw !important;
+  }
+
+  #{$selector-prefix-min-vh}100 {
+    min-height: 100vh !important;
+  }
+}

package/src/helper/_spacing.scss

@@ -0,0 +1,95 @@
+@use "sass:list";
+@use "sass:map";
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/spacing.mdx
+
+// Per-utility prefix knobs. Selectors come from variables so consumers can
+// rescope to `.is-m-`, `[data-m-]`, or any other shape without forking the
+// helper. Defaults mirror Bootstrap conventions for migration parity.
+$selector-prefix-m: ".m-" !default;
+$selector-prefix-p: ".p-" !default;
+$selector-prefix-mt: ".mt-" !default;
+$selector-prefix-mb: ".mb-" !default;
+$selector-prefix-ms: ".ms-" !default;
+$selector-prefix-me: ".me-" !default;
+$selector-prefix-mx: ".mx-" !default;
+$selector-prefix-my: ".my-" !default;
+$selector-prefix-pt: ".pt-" !default;
+$selector-prefix-pb: ".pb-" !default;
+$selector-prefix-ps: ".ps-" !default;
+$selector-prefix-pe: ".pe-" !default;
+$selector-prefix-px: ".px-" !default;
+$selector-prefix-py: ".py-" !default;
+
+$scale: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 3rem,
+  auto: auto,
+) !default;
+
+$properties: (
+  m: margin,
+  p: padding,
+) !default;
+
+$sides: (
+  t: (block-start),
+  b: (block-end),
+  s: (inline-start),
+  e: (inline-end),
+  x: (inline-start, inline-end),
+  y: (block-start, block-end),
+) !default;
+
+$auto-allowed: (m) !default;
+
+// Lookup map (property-letter + side-letter → prefix variable). Side
+// letter `_` keys the no-side shorthand. Keys are quoted strings so the
+// interpolated `#{$prop}#{$side}` lookup matches.
+$_prefixes: (
+  "m_": $selector-prefix-m,
+  "p_": $selector-prefix-p,
+  "mt": $selector-prefix-mt,
+  "mb": $selector-prefix-mb,
+  "ms": $selector-prefix-ms,
+  "me": $selector-prefix-me,
+  "mx": $selector-prefix-mx,
+  "my": $selector-prefix-my,
+  "pt": $selector-prefix-pt,
+  "pb": $selector-prefix-pb,
+  "ps": $selector-prefix-ps,
+  "pe": $selector-prefix-pe,
+  "px": $selector-prefix-px,
+  "py": $selector-prefix-py,
+) !default;
+
+@if variables.$feature-helper-spacing {
+  @each $prop-letter, $prop-name in $properties {
+    @each $size-key, $size-value in $scale {
+      $is-auto: $size-key == auto;
+      $auto-ok: list.index($auto-allowed, $prop-letter) != null;
+
+      @if not $is-auto or $auto-ok {
+        $shorthand-prefix: map.get($_prefixes, "#{$prop-letter}_");
+        #{$shorthand-prefix}#{$size-key} {
+          #{$prop-name}: $size-value !important;
+        }
+
+        @each $side-letter, $side-props in $sides {
+          $sided-prefix: map.get($_prefixes, "#{$prop-letter}#{$side-letter}");
+          #{$sided-prefix}#{$size-key} {
+            @each $side-prop in $side-props {
+              #{$prop-name}-#{$side-prop}: $size-value !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/helper/_stack.scss

@@ -0,0 +1,24 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/stack.mdx
+
+$hstack-selector: ".hstack" !default;
+$vstack-selector: ".vstack" !default;
+
+$gap-token: "stack-gap" !default;
+
+@if variables.$feature-helper-stack {
+  #{$hstack-selector} {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--kc-#{$gap-token}, 0);
+  }
+
+  #{$vstack-selector} {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: var(--kc-#{$gap-token}, 0);
+  }
+}

package/src/helper/_state.scss

@@ -1,25 +1,10 @@
 @use "sass:map";
 @use "../variables";
 
-// `[data-state]` icon hook. Pairs with the `.is-<label>` colour combinations
-// to satisfy WCAG 1.4.1 (Use of Colour): a non-colour cue precedes the label
-// so colour-blind users, monochrome displays, and forced-colours mode all
-// read the state. Consumers opt their markup in:
-//
-//   <span data-state="success">Saved</span>
-//
-// Defaults are baked in as the `var()` fallback per label; consumers who set
-// `--kc-state-icon-<label>` at any scope override the glyph (or `''` to drop
-// it).
-//
-// Only labels with a non-empty glyph emit a rule: the `default`, `light`,
-// and `primary` combinations have no inherent state semantic, so emitting an
-// empty `::before` for them is pure dead weight. Consumers who want to opt
-// those in can add `$icons` keys via `@use 'helper/state' with (...)`.
+// Documentation: ../../docs/src/pages/reference/components/helper/state.mdx
+
 $selector-attr: "data-state" !default;
 
-// Trailing space is U+0020 so the icon visually separates from the label
-// without an extra wrapping element.
 $icons: (
   success: "✓ ",
   warning: "⚠ ",

package/src/helper/_text.scss

@@ -0,0 +1,92 @@
+@use "sass:map";
+@use "../variables";
+@use "breakpoints";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/text.mdx
+
+$selector-prefix-has: "#{variables.$selector-prefix-has}text-" !default;
+$selector-prefix-is: variables.$selector-prefix-is !default;
+
+$weights: (
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+) !default;
+
+$alignments: (left, center, right, justify) !default;
+
+$breakpoints: (tablet, desktop, widescreen, fullhd) !default;
+
+$alignments-responsive: (left, center, right) !default;
+
+@mixin _alignments($suffix: "") {
+  @each $alignment in $alignments-responsive {
+    #{$selector-prefix-has}#{$alignment}#{$suffix} {
+      text-align: #{$alignment} !important;
+    }
+  }
+}
+
+@if variables.$feature-helper-text {
+  @each $alignment in $alignments {
+    #{$selector-prefix-has}#{$alignment} {
+      text-align: #{$alignment} !important;
+    }
+  }
+
+  @each $breakpoint in $breakpoints {
+    @include breakpoints.from($breakpoint) {
+      @include _alignments("-#{$breakpoint}");
+    }
+  }
+
+  #{$selector-prefix-is}uppercase {
+    text-transform: uppercase !important;
+  }
+  #{$selector-prefix-is}lowercase {
+    text-transform: lowercase !important;
+  }
+  #{$selector-prefix-is}capitalized {
+    text-transform: capitalize !important;
+  }
+  #{$selector-prefix-is}italic {
+    font-style: italic !important;
+  }
+
+  @each $name, $value in $weights {
+    #{$selector-prefix-has}weight-#{$name} {
+      font-weight: $value !important;
+    }
+  }
+
+  #{$selector-prefix-is}underlined {
+    text-decoration: underline !important;
+  }
+  #{$selector-prefix-is}line-through {
+    text-decoration: line-through !important;
+  }
+  #{$selector-prefix-is}no-decoration {
+    text-decoration: none !important;
+  }
+
+  #{$selector-prefix-is}truncated {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+  #{$selector-prefix-is}nowrap {
+    white-space: nowrap !important;
+  }
+  #{$selector-prefix-is}text-break {
+    overflow-wrap: break-word !important;
+  }
+
+  #{$selector-prefix-is}family-sans-serif {
+    font-family: sans-serif !important;
+  }
+  #{$selector-prefix-is}family-monospace {
+    font-family: monospace !important;
+  }
+}

package/src/helper/_tooltip.scss

@@ -0,0 +1,100 @@
+@use "../variables";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/tooltip.mdx
+
+$selector: "[data-tooltip]" !default;
+
+// Position attribute selectors. Class hooks (`.tooltip-bottom` etc.) were
+// removed in favour of the data-driven API — the helper is attribute-keyed
+// from the trigger anyway (`content: attr(data-tooltip)`), so keeping
+// position on the same axis is the simpler, more consistent shape.
+$position-bottom-selector: '[data-tooltip-position="bottom"]' !default;
+$position-left-selector: '[data-tooltip-position="left"]' !default;
+$position-right-selector: '[data-tooltip-position="right"]' !default;
+
+// Theme-baked fallbacks for `--kc-tooltip-bg` and `--kc-tooltip-fg`. The
+// `defaultProperty` mixin emits the fallback + `var()` pair atomically so
+// theme tokens flow without bypassing the contract.
+$bg: rgba(0, 0, 0, 0.85) !default;
+$fg: #fff !default;
+
+$padding: 0.4em 0.8em !default;
+$border-radius: 4px !default;
+$font-size: 0.8em !default;
+$offset: 0.5rem !default;
+$z-index: 1080 !default;
+$transition-duration: 120ms !default;
+
+@if variables.$feature-helper-tooltip {
+  #{$selector} {
+    position: relative;
+  }
+
+  #{$selector}:not([data-tooltip=""]) {
+    &::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      z-index: $z-index;
+      padding: $padding;
+      border-radius: $border-radius;
+      @include variables.backgroundColor(tooltip-bg, $bg);
+      @include variables.textColor(tooltip-fg, $fg);
+      font-size: $font-size;
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity $transition-duration ease-in-out;
+
+      bottom: 100%;
+      left: 50%;
+      transform: translate(-50%, -#{$offset});
+    }
+
+    &:hover::after,
+    &:focus-within::after {
+      opacity: 1;
+    }
+
+    &#{$position-bottom-selector}::after {
+      top: 100%;
+      bottom: auto;
+      left: 50%;
+      right: auto;
+      transform: translate(-50%, #{$offset});
+    }
+
+    &#{$position-left-selector}::after {
+      top: 50%;
+      bottom: auto;
+      right: 100%;
+      left: auto;
+      transform: translate(-#{$offset}, -50%);
+    }
+
+    &#{$position-right-selector}::after {
+      top: 50%;
+      bottom: auto;
+      left: 100%;
+      right: auto;
+      transform: translate(#{$offset}, -50%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #{$selector}:not([data-tooltip=""])::after {
+      transition: none;
+    }
+  }
+
+  // Forced-colors / Windows high-contrast fallback. The rgba bubble bg
+  // resolves to a system surface colour and the foreground / border to
+  // system canvas-text so the tooltip remains legible against any
+  // user-imposed palette.
+  @media (forced-colors: active) {
+    #{$selector}:not([data-tooltip=""])::after {
+      background-color: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/helper/_visibility.scss

@@ -0,0 +1,80 @@
+@use "sass:list";
+@use "../variables";
+@use "breakpoints";
+
+// Documentation: ../../docs/src/pages/reference/components/helper/visibility.mdx
+
+$selector-prefix: variables.$selector-prefix-is !default;
+
+$displays: (block, flex, inline, inline-block, inline-flex) !default;
+
+// `fullhd-only` is omitted on purpose — fullhd is the last band, so the
+// "only" variant would be identical to `-fullhd`.
+$scopes: (
+  mobile: (null, tablet),
+  tablet-only: (tablet, desktop),
+  desktop-only: (desktop, widescreen),
+  widescreen-only: (widescreen, fullhd),
+  touch: (null, desktop),
+  tablet: (tablet, null),
+  desktop: (desktop, null),
+  widescreen: (widescreen, null),
+  fullhd: (fullhd, null),
+) !default;
+
+@mixin _displays($suffix: "") {
+  @each $display in $displays {
+    #{$selector-prefix}#{$display}#{$suffix} {
+      display: #{$display} !important;
+    }
+  }
+  #{$selector-prefix}hidden#{$suffix} {
+    display: none !important;
+  }
+}
+
+@mixin _within($from, $until) {
+  @if $from != null and $until != null {
+    @include breakpoints.from($from) {
+      @include breakpoints.until($until) {
+        @content;
+      }
+    }
+  } @else if $from != null {
+    @include breakpoints.from($from) {
+      @content;
+    }
+  } @else if $until != null {
+    @include breakpoints.until($until) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@if variables.$feature-helper-visibility {
+  @include _displays();
+
+  #{$selector-prefix}invisible {
+    visibility: hidden !important;
+  }
+
+  #{$selector-prefix}sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  @each $name, $bounds in $scopes {
+    @include _within(list.nth($bounds, 1), list.nth($bounds, 2)) {
+      @include _displays("-#{$name}");
+    }
+  }
+}

package/src/layout/_index.scss

@@ -1,3 +1,5 @@
 @forward "container" as container-*;
 @forward "flex" as flex-*;
 @forward "grid" as grid-*;
+@forward "hero" as hero-*;
+@forward "footer" as footer-*;

package/src/layout/container/_plugin.scss

@@ -2,6 +2,8 @@
 @use "../../variables";
 @use "../../helper/breakpoints" as breakpoints;
 
+// Documentation: ../../../docs/src/pages/reference/components/layout/container.mdx
+
 @if variables.$feature-layout-container {
   #{$selector} {
     flex-grow: 1;

package/src/layout/container/_variables.scss

@@ -1,5 +1,7 @@
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/layout/container.mdx
+
 $gutter: variables.$global-gap !default;
 $selector: ".container" !default;
 $fluid-modifier: "fluid" !default;

package/src/layout/flex/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/layout/flex.mdx
+
 @if variables.$feature-layout-flex {
   #{$flex-selector} {
     display: flex;
@@ -23,7 +25,6 @@
       flex: 1 1 0;
       min-width: 0;
 
-      // Sizes to its content instead of growing to share row width.
       &#{$narrow-selector} {
         flex: none;
       }

package/src/layout/flex/_variables.scss

@@ -1,9 +1,9 @@
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/layout/flex.mdx
+
 $flex-selector: ".flex" !default;
 $column-selector: ".col" !default;
 $narrow-selector: "#{variables.$selector-prefix-is}narrow" !default;
 
-// Inter-item gap, applied via native CSS `gap` (Baseline since 2021).
-// Defaults to the global token so flex and grid share spacing rhythm.
 $gap: variables.$global-gap !default;

package/src/layout/footer/_index.scss

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

package/src/layout/footer/_plugin.scss

@@ -0,0 +1,24 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/layout/footer.mdx
+
+@if variables.$feature-layout-footer {
+  #{$selector} {
+    @include variables.backgroundColor(
+      footer-bg,
+      var(--kc-bg, #{list.nth($default-combination, 1)}),
+    );
+    @include variables.textColor(
+      footer-fg,
+      var(--kc-fg, #{list.nth($default-combination, 2)}),
+    );
+    padding: $padding-block-start $padding-inline $padding-block-end;
+
+    @include controls.nestedLinks;
+
+    @include controls.combinations-apply();
+  }
+}

package/src/layout/footer/_variables.scss

@@ -0,0 +1,11 @@
+@use "../../variables";
+
+// Reference: ../../../docs/src/pages/reference/components/layout/footer.mdx
+
+$selector: ".footer" !default;
+
+$padding-block-start: 3rem !default;
+$padding-block-end: 6rem !default;
+$padding-inline: variables.$global-gap !default;
+
+$default-combination: variables.$color-combination-default !default;

package/src/layout/grid/_plugin.scss

@@ -2,6 +2,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/layout/grid.mdx
+
 @if variables.$feature-layout-grid {
   #{$selector} {
     display: grid;

package/src/layout/grid/_variables.scss

@@ -1,32 +1,18 @@
 @use "../../variables";
 
-// Container + cell selectors. Both configurable so consumers can rescope to a
-// class prefix or web-component shadow root without forking the source.
+// Reference: ../../../docs/src/pages/reference/components/layout/grid.mdx
+
 $selector: ".grid" !default;
 $cell-selector: ".cell" !default;
 
-// `gap` between rows + columns. Uses CSS `gap` natively (unlike flex which
-// pads columns then negative-margins the row), so no half-step math needed.
 $gap: variables.$global-gap !default;
 
-// Auto-fit min cell width. The default `.grid` container is responsive:
-// `repeat(auto-fit, minmax($auto-min, 1fr))`. Cells flow into as many columns
-// as fit at the current viewport width. Override via:
-//   @use '@adnap/krysalicss' with ($layout-grid-auto-min: 14rem);
 $auto-min: 16rem !default;
 
-// Total columns for the explicit-grid variant (`.grid.is-cols-N` and
-// `.cell.is-span-N`). 12 mirrors the flex grid's division count so consumers
-// can reuse the same mental model.
 $columns: 12 !default;
 
-// Explicit column-count modifiers emitted as `.grid.is-cols-<N>`. Listed
-// values get `repeat(<N>, minmax(0, 1fr))`. Trim the list to ship a smaller
-// CSS surface; the default covers the common-case grid widths.
 $column-modifiers: (2, 3, 4, 6, 12) !default;
 
-// Named cell spans: match the flex grid's `.col.is-half`, `.is-one-third`,
-// etc. naming so the API feels consistent across both layouts.
 $named-spans: (
   full: 12,
   half: 6,
@@ -35,3 +21,21 @@ $named-spans: (
   one-quarter: 3,
   three-quarters: 9,
 ) !default;
+
+$named-offsets: (
+  half: 6,
+  one-third: 4,
+  two-thirds: 8,
+  one-quarter: 3,
+  three-quarters: 9,
+) !default;
+
+$gap-scale: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 3rem,
+) !default;

package/src/layout/hero/_index.scss

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