@adnap/krysalicss 0.0.1 → 0.1.0

package/src/module/section/_plugin.scss

@@ -0,0 +1,47 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/section.mdx
+
+@if variables.$feature-module-section {
+  // Density tokens emitted here (not in `theme/_create.scss`) because
+  // density is orthogonal to theme and `.section` is the only consumer.
+  // Default tokens land on `:root`; overrides are scoped to any
+  // `[data-density]` carrier so consumers can switch density at three
+  // granularities — page (`:root[data-density]`), page-region
+  // (`<main data-density>`), or per-section (`<section class="section"
+  // data-density>`). Variables cascade so the nearest carrier wins.
+  //
+  // `--kc-section-*` namespacing: gutter and max-width are plugin-private
+  // so they don't pollute the global token namespace. `.container` is the
+  // only other reader and is shipped alongside.
+  :root {
+    --kc-section-py: #{$padding-y};
+    --kc-section-gutter-x: #{$gutter-x};
+    --kc-section-max-w: #{$max-width};
+  }
+
+  [data-density="compact"] {
+    --kc-section-py: #{$padding-y-compact};
+    --kc-section-gutter-x: #{$gutter-x-compact};
+  }
+
+  [data-density="aere"] {
+    --kc-section-py: #{$padding-y-aere};
+    --kc-section-gutter-x: #{$gutter-x-aere};
+  }
+
+  #{$selector} {
+    position: relative;
+    padding: var(--kc-section-py, #{$padding-y})
+      var(--kc-section-gutter-x, #{$gutter-x});
+    border-bottom: 1px solid var(--kc-border-1, #{$border-fallback});
+
+    // `:last-of-type` rather than `:last-child` so adjacent non-`.section`
+    // siblings (e.g. footer) don't re-enable the border on the preceding
+    // section.
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+}

package/src/module/section/_variables.scss

@@ -0,0 +1,24 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/section.mdx
+
+$selector: ".section" !default;
+
+// Page-level vertical rhythm. Derived from `$global-gap` so a consumer
+// retuning the framework's spacing scale at the root carries through to
+// section padding. Defaults: 7rem / 3rem (was 112px / 48px), 5rem / 2rem
+// (compact, was 80px / 32px), 9rem / 4rem (aere, was 144px / 64px).
+$padding-y: 7 * variables.$global-gap !default;
+$gutter-x: 3 * variables.$global-gap !default;
+
+// Inner content-width cap. 80rem = 1280px at the 16px root. Matches the
+// `widescreen` breakpoint in `variables/_responsive.scss:$breakpoints`.
+$max-width: 80rem !default;
+
+$padding-y-compact: 5 * variables.$global-gap !default;
+$gutter-x-compact: 2 * variables.$global-gap !default;
+
+$padding-y-aere: 9 * variables.$global-gap !default;
+$gutter-x-aere: 4 * variables.$global-gap !default;
+
+$border-fallback: currentColor !default;

package/src/module/tabs/_plugin.scss

@@ -1,7 +1,9 @@
 @use "sass:list";
 @use "variables" as *;
 @use "../../variables";
-@use "../../helper/controls" as controls;
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/tabs.mdx
 
 // JS-free pattern. Markup contract: each tab is a flat sequence of
 // input → label → panel siblings inside `.tabs`. The visible panel is

package/src/module/toast/_index.scss

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

package/src/module/toast/_plugin.scss

@@ -0,0 +1,184 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls-internal" as controls;
+
+// Documentation: ../../../docs/src/pages/reference/components/module/toast.mdx
+
+@if variables.$feature-module-toast {
+  #{$container-selector} {
+    position: fixed;
+    z-index: $z-index;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+    max-width: $max-width;
+    padding: $padding-x;
+    pointer-events: none;
+
+    &#{$top-start-modifier} {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      align-items: flex-start;
+    }
+
+    &#{$top-center-modifier} {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+      transform: translateX(-50%);
+      align-items: center;
+    }
+
+    &#{$top-end-modifier} {
+      inset-block-start: 0;
+      inset-block-end: auto;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+      align-items: flex-end;
+    }
+
+    &#{$bottom-start-modifier} {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      align-items: flex-start;
+    }
+
+    &#{$bottom-center-modifier} {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 50%;
+      inset-inline-end: auto;
+      transform: translateX(-50%);
+      align-items: center;
+    }
+
+    &#{$bottom-end-modifier} {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+      align-items: flex-end;
+    }
+  }
+
+  #{$selector} {
+    @include variables.backgroundColor(
+      toast-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(toast-fg, list.nth($default-combination, 2));
+    width: 100%;
+    max-width: $max-width;
+    border-radius: $border-radius;
+    box-shadow: $shadow;
+    pointer-events: auto;
+    opacity: 0;
+    transition: opacity $transition-duration ease;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    // Hooks for both reveal mechanisms. The JS path adds `.is-show` to
+    // fade the toast in, then sets `[hidden]` (or removes the class) to
+    // dismiss. The CSS path renders the toast with `.is-show` already
+    // on the markup and dismisses via a hidden `<input type="checkbox">`
+    // sibling toggled by a `<label class="toast__dismiss">`. The
+    // `.is-show` surface is shared between both branches so it lives
+    // outside the `@if` to avoid emitting the same rule twice when
+    // `$controls` includes both 'css' and 'js'.
+    @if variables.has-controls("css", $controls)
+      or variables.has-controls("js", $controls) {
+      &#{$show-modifier} {
+        opacity: 1;
+      }
+    }
+
+    @if variables.has-controls("js", $controls) {
+      &[hidden] {
+        display: none;
+      }
+    }
+
+    @if variables.has-controls("css", $controls) {
+      &:has(#{$toggle-selector}:checked) {
+        display: none;
+      }
+
+      // Focus from the hidden checkbox lights up the paired dismiss
+      // label so keyboard users still see a focus ring on the visible
+      // close glyph.
+      &:has(#{$toggle-selector}:focus-visible) #{$dismiss-selector} {
+        @include controls.focus-ring();
+      }
+    }
+
+    #{$header-selector} {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: $gap;
+      padding: $padding-y $padding-x;
+    }
+
+    #{$title-selector} {
+      font-weight: 600;
+    }
+
+    #{$dismiss-selector} {
+      // Reset UA chrome so a `<button>` renders as a bare glyph slot.
+      appearance: none;
+      background: none;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      // 60% opacity is the smallest value that keeps the glyph legible
+      // against the toast surface while still reading as a secondary
+      // affordance next to the title. Hover/focus restore full opacity.
+      opacity: 0.6;
+      transition: opacity $transition-duration ease;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      &:hover,
+      &:focus-visible {
+        opacity: 1;
+      }
+
+      &:focus-visible {
+        @include controls.focus-ring();
+      }
+    }
+
+    #{$body-selector} {
+      padding: $padding-y $padding-x;
+    }
+
+    // Nested links inherit the surface fg and carry an underline. Same
+    // rationale as alert/card: the page-level `--kc-link` is calibrated
+    // against the page bg, not the toast surface bg, so pairing with
+    // currentColor avoids contrast failures on themed `.is-*` variants.
+    @include controls.nestedLinks;
+
+    @include controls.combinations-apply();
+    @if $enable-light {
+      @include controls.combinations-apply-light();
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/module/toast/_variables.scss

@@ -0,0 +1,56 @@
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/module/toast.mdx
+
+$selector: ".toast" !default;
+$container-selector: ".toast-container" !default;
+$header-selector: ".toast__header" !default;
+$title-selector: ".toast__title" !default;
+$body-selector: ".toast__body" !default;
+$dismiss-selector: ".toast__dismiss" !default;
+
+// Hidden checkbox sibling that drives CSS-only dismissal. Paired with a
+// `<label for=…>` that re-uses `$dismiss-selector` so the same chrome
+// styles both the `<button>` (JS path) and the `<label>` (CSS path).
+$toggle-selector: ".toast__toggle" !default;
+
+// State modifiers. `$show-modifier` is the canonical "shown" hook for
+// JS-driven reveals; the toast renders invisible at rest so consumer JS
+// can fade it in by adding the class.
+$show-modifier: "#{variables.$selector-prefix-is}show" !default;
+
+// Anchor-position modifiers on the container.
+$top-start-modifier: "#{variables.$selector-prefix-is}top-start" !default;
+$top-center-modifier: "#{variables.$selector-prefix-is}top-center" !default;
+$top-end-modifier: "#{variables.$selector-prefix-is}top-end" !default;
+$bottom-start-modifier: "#{variables.$selector-prefix-is}bottom-start" !default;
+$bottom-center-modifier: "#{variables.$selector-prefix-is}bottom-center"
+  !default;
+$bottom-end-modifier: "#{variables.$selector-prefix-is}bottom-end" !default;
+
+// Reveal mechanism(s). `'css'` emits the `<input type="checkbox">` +
+// `<label>` dismiss branch (`:has(toggle:checked) { display: none }`).
+// `'js'` emits the `.is-show` reveal + `[hidden]` dismiss hooks for
+// consumer JS to drive. Both ship by default (matches the framework
+// `$global-controls` contract).
+$controls: variables.$global-controls !default;
+
+// Local toggle for `.is-<combo>.is-light` emission. Derived from the
+// framework-wide `$feature-light-variants` flag — see
+// `variables/_feature.scss` for the cross-component rationale.
+$enable-light: variables.$feature-light-variants !default;
+
+$max-width: 420px !default;
+$gap: variables.$size-extra-small !default;
+$padding-y: variables.$size-small !default;
+$padding-x: variables.$size-normal !default;
+
+$border-radius: variables.$global-border-radius !default;
+
+$z-index: 1090 !default;
+
+$shadow: 0 6px 20px rgb(0 0 0 / 0.15) !default;
+
+$transition-duration: variables.$global-transition-duration !default;
+
+$default-combination: variables.$color-combination-default !default;

package/src/typography/_index.scss

@@ -3,3 +3,7 @@
 @forward "link" as link-*;
 @forward "content" as content-*;
 @forward "table" as table-*;
+@forward "lead" as lead-*;
+@forward "blockquote" as blockquote-*;
+@forward "list" as list-*;
+@forward "figure" as figure-*;

package/src/typography/base/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 @if variables.$feature-typography-base {
   html {
     -moz-osx-font-smoothing: grayscale;

package/src/typography/base/_variables.scss

@@ -1,11 +1,12 @@
 @use "sass:map";
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 $default-color: map.get(variables.$color-palette, black) !default;
 
-// Typography fundamentals derive from `$global-*` so consumers can configure
-// once at the top level. Per-component override still works: the local
-// `!default` accepts an explicit `@use 'typography/base' with (...)`.
+// Fundamentals derive from `$global-*` so consumers configure once at the
+// top level; per-component override still works via the local `!default`.
 $family-sans-serif: variables.$global-family-sans-serif !default;
 $family-monospace: variables.$global-family-monospace !default;
 $base-size: variables.$global-base-size !default;

package/src/typography/blockquote/_index.scss

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

package/src/typography/blockquote/_plugin.scss

@@ -0,0 +1,22 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/typography/blockquote.mdx
+
+@if variables.$feature-typography-blockquote {
+  #{$selector} {
+    padding-inline-start: $padding-inline-start;
+    border-inline-start: $border-inline-start;
+    font-size: $font-size;
+
+    #{$footer-selector} {
+      display: block;
+      font-size: $footer-font-size;
+      color: color-mix(in srgb, currentColor $footer-color-mix, transparent);
+
+      &::before {
+        content: "— ";
+      }
+    }
+  }
+}

package/src/typography/blockquote/_variables.scss

@@ -0,0 +1,13 @@
+// Reference: ../../../docs/src/pages/reference/components/typography/blockquote.mdx
+
+$selector: "blockquote, .blockquote" !default;
+$footer-selector: ".blockquote-footer" !default;
+$padding-inline-start: 1rem !default;
+
+$border-inline-start: 4px
+  solid
+  color-mix(in srgb, currentColor 30%, transparent) !default;
+
+$font-size: 1.125rem !default;
+$footer-font-size: 0.875rem !default;
+$footer-color-mix: 70% !default;

package/src/typography/content/_plugin.scss

@@ -2,6 +2,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 @function _repeat($string, $times) {
   $content: $string;
   @for $_ from 1 to $times {

package/src/typography/content/_variables.scss

@@ -1 +1,3 @@
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 $ul-styles: (disc, circle, square) !default;

package/src/typography/figure/_index.scss

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

package/src/typography/figure/_plugin.scss

@@ -0,0 +1,29 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/typography/figure.mdx
+
+@if variables.$feature-typography-figure {
+  #{$selector} {
+    display: $display;
+    margin-block-end: $margin-block-end;
+
+    > img,
+    > picture > img,
+    > #{$img-selector} {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin-block-end: $img-margin-block-end;
+    }
+
+    #{$caption-selector} {
+      font-size: $caption-font-size;
+      color: color-mix(
+        in srgb,
+        currentColor #{$caption-color-mix},
+        transparent
+      );
+    }
+  }
+}

package/src/typography/figure/_variables.scss

@@ -0,0 +1,13 @@
+// Reference: ../../../docs/src/pages/reference/components/typography/figure.mdx
+
+$selector: "figure, .figure" !default;
+$img-selector: ".figure-img" !default;
+$caption-selector: "figcaption, .figure-caption" !default;
+
+$display: inline-block !default;
+$margin-block-end: 1rem !default;
+
+$img-margin-block-end: 0.5rem !default;
+
+$caption-font-size: 0.875rem !default;
+$caption-color-mix: 70% !default;

package/src/typography/lead/_index.scss

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

package/src/typography/lead/_plugin.scss

@@ -0,0 +1,12 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/typography/lead.mdx
+
+@if variables.$feature-typography-lead {
+  #{$selector} {
+    font-size: $font-size;
+    font-weight: $font-weight;
+    line-height: $line-height;
+  }
+}

package/src/typography/lead/_variables.scss

@@ -0,0 +1,6 @@
+// Reference: ../../../docs/src/pages/reference/components/typography/lead.mdx
+
+$selector: ".lead" !default;
+$font-size: 1.25rem !default;
+$font-weight: 300 !default;
+$line-height: 1.5 !default;

package/src/typography/link/_mixins.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 // Visual contract shared between bare `<a>` and `.button.is-link`. Both
 // surfaces emit the same underline + pointer affordance + `--kc-link` /
 // `--kc-link-hover` token wiring; per-surface concerns (button's transparent

package/src/typography/link/_plugin.scss

@@ -2,6 +2,8 @@
 @use "../../variables";
 @use "mixins" as *;
 
+// Documentation: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 @if variables.$feature-typography-link {
   a {
     @include linkSurface;

package/src/typography/link/_variables.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 $default-color: map.get(variables.$color-palette, black) !default;
 $color: $default-color !default;
 $hover-color: $color !default;

package/src/typography/list/_index.scss

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

package/src/typography/list/_plugin.scss

@@ -0,0 +1,18 @@
+@use "variables" as *;
+@use "../../variables";
+
+// Documentation: ../../../docs/src/pages/reference/components/typography/list.mdx
+
+@if variables.$feature-typography-list {
+  #{$unstyled-selector},
+  #{$inline-selector} {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  #{$inline-selector} > li,
+  #{$inline-item-selector} {
+    display: inline-block;
+    margin-inline-end: $inline-item-gap;
+  }
+}

package/src/typography/list/_variables.scss

@@ -0,0 +1,6 @@
+// Reference: ../../../docs/src/pages/reference/components/typography/list.mdx
+
+$unstyled-selector: ".list-unstyled" !default;
+$inline-selector: ".list-inline" !default;
+$inline-item-selector: ".list-inline-item" !default;
+$inline-item-gap: 0.5rem !default;

package/src/typography/table/_plugin.scss

@@ -1,6 +1,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 @if variables.$feature-typography-table {
   #{$selector} {
     vertical-align: top;

package/src/typography/table/_variables.scss

@@ -1,6 +1,8 @@
 @use "sass:math";
 @use "../../variables";
 
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 $selector: ".table" !default;
 $gap: variables.$global-gap !default;
 $gutter: math.div($gap, 2) !default;

package/src/typography/title/_plugin.scss

@@ -4,6 +4,8 @@
 @use "variables" as *;
 @use "../../variables";
 
+// Documentation: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 @if variables.$feature-typography-title {
   @each $label, $args in $levels {
     #{$label} {

package/src/typography/title/_variables.scss

@@ -1,5 +1,7 @@
 @use "sass:list";
 
+// Reference: ../../../docs/src/pages/reference/components/typography/typography.mdx
+
 $sizes: (2.5rem, 1.75rem, 1.25rem, 1rem, 0.75rem, 0.5rem) !default;
 $levels: (
   ".title": (list.nth($sizes, 1), 800),

package/src/variables/_color.scss

@@ -2,17 +2,23 @@
 @use "sass:list";
 @use "sass:map";
 
-// Deep-accent palette, hex-encoded. The functional accents (sage / moss /
-// amber / coral) are tuned so `colour + white text` clears WCAG 1.4.6 AAA
-// body (≥ 7:1) and the colour-vs-white page boundary clears WCAG 1.4.11
-// (≥ 3:1). `emerald` is the brand green from the Krysalicss logo, darkened
-// from its logo-literal value to clear WCAG 1.4.3 AA body (~5.06:1 vs white)
-// while staying recognisable as the brand hue. Pushing further into AAA
-// territory (≥ 7:1) would require a forest-dark green that loses the brand
-// identity, so `primary` is the one combination that trades AAA body for
-// brand fidelity. The functional accents (success / warning / danger) all
-// stay on AAA-tuned colours so the colour-as-state contract holds regardless.
-// Hex keeps swatches stable on round-trips through design tools.
+// Deep-accent palette, hex-encoded. Most functional accents (sage / moss /
+// amber) are tuned so `colour + white text` clears WCAG 1.4.6 AAA body
+// (≥ 7:1) and the colour-vs-white page boundary clears WCAG 1.4.11 (≥ 3:1).
+// Verified ratios vs white: sage ~7.19:1, moss ~7.38:1, amber ~7.16:1 (all
+// PASS AAA). `coral` (`#8c351a`) is the one functional accent that lands at
+// ~6.27:1 vs white — PASS AA body, FAIL AAA body. It carries the `danger`
+// semantic and the default-theme `link-visited` colour; darkening it
+// further to push past 7:1 would drift the hue away from a recognisable
+// orange-red into a brown-red that reads as muddy. `emerald` is the brand
+// green from the Krysalicss logo, darkened from its logo-literal value to
+// clear WCAG 1.4.3 AA body (~5.06:1 vs white) while staying recognisable
+// as the brand hue. Pushing further into AAA territory (≥ 7:1) would
+// require a forest-dark green that loses the brand identity, so `primary`
+// trades AAA body for brand fidelity. Net: `primary` (emerald) and
+// `danger` / `link-visited` (coral) clear WCAG 2.2 AA body but not AAA;
+// every other shipped (bg, fg) pair clears AAA. Hex keeps swatches stable
+// on round-trips through design tools.
 $palette: (
   sage: #1a6347,
   moss: #525a22,
@@ -50,7 +56,9 @@ $complement-overrides: () !default;
 // First entry is the default applied to components without a modifier.
 // `primary` uses `emerald` (brand green): clears AA body against white
 // (~5.06:1) but not AAA — see palette comment for the brand-fidelity
-// trade-off. `success` / `warning` / `danger` stay on AAA-tuned accents.
+// trade-off. `success` (moss ~7.38:1) and `warning` (amber ~7.16:1) clear
+// AAA on white. `danger` (coral ~6.27:1) clears AA but not AAA — same
+// hue-fidelity trade-off as `primary`, documented in the palette comment.
 $combinations: (
   default: (map.get($palette, white), map.get($palette, black)),
   primary: (map.get($palette, emerald), map.get($palette, white)),