@adnap/krysalicss 0.0.1

package/src/theme/dark.scss

@@ -0,0 +1,51 @@
+@use "../variables";
+@use "create";
+
+$name: "dark" !default;
+
+// Surface family: cool blue-grey at very low lightness keeps the page bg and
+// card bg distinguishable without colour shifts. Foreground is a near-white
+// on the same hue family for AAA contrast.
+$_surface-bg: #121417;
+$_surface-card: #1b1e22;
+$_surface-fg: #e6e8eb;
+// Brand mint #6bd1a7 — the dark-mode counterpart to default's brand green,
+// lightened so it still reads against the near-black bg.
+$_brand-mint: #6bd1a7;
+
+$variables: (
+  bg: $_surface-bg,
+  fg: $_surface-fg,
+  link: $_brand-mint,
+  link-hover: #9ce3c2,
+  // Desaturated lavender keeps visited distinguishable from the mint
+  // brand link while staying readable on the near-black surface
+  // (~7.6:1 vs `$_surface-bg`). WCAG 2.4.8.
+  link-visited: #c8a8e0,
+  border-radius: variables.$global-border-radius,
+  card-bg: $_surface-card,
+  card-fg: $_surface-fg,
+  focus-ring: $_brand-mint,
+  // Light wash so the dark modal surface stands out against the dimmed page;
+  // pairs with the modal's `backdrop-filter: blur(...)`.
+  modal-backdrop: color-mix(in srgb, $_surface-fg 22%, transparent),
+) !default;
+
+$combinations: (
+  default: ($_surface-card, $_surface-fg),
+  primary: (#1f6e51, #f4f7fb),
+  warning: (#b8991e, #1b1b13),
+  danger: (#a2481a, #fff6f0),
+  success: (#5c6529, #f3f6e5),
+) !default;
+
+// Both `prefers-color-scheme: dark` (auto-switching) AND `.theme-dark`
+// (explicit user override) are wired so consumers get either behaviour.
+@include create.theme(
+  $name: $name,
+  $variables: $variables,
+  $combinations: $combinations,
+  $is-default: false,
+  $root-when: "prefers-color-scheme: dark",
+  $modifier-class: ".theme-dark",
+);

package/src/theme/default.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "../variables";
+@use "create";
+
+$name: "default" !default;
+
+$_palette: variables.$color-palette;
+
+// `sage` and `moss` from the palette are already AAA-tuned as surfaces
+// against white (7.19:1 and 7.38:1 respectively), so they double as the
+// brand text colours: link reaches for `sage` (the primary brand colour),
+// hover shifts to `moss` (the success / olive accent) to match the
+// existing brand-green / brand-olive split without needing separate
+// brand-* tokens.
+$variables: (
+  bg: map.get($_palette, white),
+  fg: map.get($_palette, black),
+  link: map.get($_palette, sage),
+  link-hover: map.get($_palette, moss),
+  link-visited: map.get($_palette, coral),
+  border-radius: variables.$global-border-radius,
+  card-bg: map.get($_palette, white),
+  card-fg: map.get($_palette, black),
+  focus-ring: map.get($_palette, sage),
+) !default;
+
+$combinations: variables.$color-combinations !default;
+
+// `$modifier-class: ':root.theme-light'` lets an explicit "Light" choice
+// override the dark theme's `prefers-color-scheme: dark` media query.
+// IMPORTANT: the `:root` prefix is required, not decorative. `:root` and
+// `.theme-light` are both single-selector specificity (0,1,0), which means
+// a bare `.theme-light` ties with the dark theme's `@media :root` rule and
+// loses by source order (default.scss is emitted before dark.scss). The
+// `:root.theme-light` compound selector raises specificity to (0,2,0) and
+// wins regardless of source order. Mirror this pattern when authoring any
+// new theme that needs to override another theme's media-query block.
+@include create.theme(
+  $name: $name,
+  $variables: $variables,
+  $combinations: $combinations,
+  $is-default: true,
+  $root-when: "prefers-color-scheme: light",
+  $modifier-class: ":root.theme-light",
+);

package/src/theme/high-contrast.scss

@@ -0,0 +1,53 @@
+@use "create";
+
+$name: "high-contrast" !default;
+
+// Opt-in only: high-contrast is a deliberate user choice (assistive
+// preference, low-vision setup, very bright ambient lighting). It is NOT
+// auto-switched via a media query: `prefers-contrast: more` would coerce
+// users with system-level high-contrast preferences into this aggressive
+// palette without any way to undo from the page, and most consumers want
+// the default theme to remain in charge unless explicitly opted-in.
+//
+// Every (bg, fg) pair clears WCAG 2.2 AAA (7:1). Border radius is zeroed:
+// hard edges disambiguate component boundaries at low vision better than
+// rounded corners blending into the surrounding flat colour.
+// #ffd500 — max-contrast yellow, ~19.6:1 against pure black bg. Reused for
+// link / focus-ring / warning-bg as the canonical "active state" colour
+// in this theme.
+$_hc-yellow: #ffd500;
+$_hc-black: #000000;
+$_hc-white: #ffffff;
+
+$variables: (
+  bg: $_hc-black,
+  fg: $_hc-white,
+  link: $_hc-yellow,
+  link-hover: $_hc-white,
+  link-visited: #d590ff,
+  border-radius: 0,
+  card-bg: $_hc-black,
+  card-fg: $_hc-white,
+  focus-ring: $_hc-yellow,
+) !default;
+
+$combinations: (
+  default: ($_hc-white, $_hc-black),
+  primary: (#00d0ff, $_hc-black),
+  warning: ($_hc-yellow, $_hc-black),
+  danger: (#ff8585, $_hc-black),
+  success: (#00ff84, $_hc-black),
+) !default;
+
+// `:root.theme-high-contrast`: the `:root` prefix raises specificity to
+// (0,2,0) so this theme wins over `dark.scss`'s `@media :root` block
+// regardless of source order. Same reasoning as `theme/default.scss`;
+// see its comment for the full rationale.
+@include create.theme(
+  $name: $name,
+  $variables: $variables,
+  $combinations: $combinations,
+  $is-default: false,
+  $root-when: null,
+  $modifier-class: ":root.theme-high-contrast",
+);

package/src/typography/_index.scss

@@ -0,0 +1,5 @@
+@forward "base" as base-*;
+@forward "title" as title-*;
+@forward "link" as link-*;
+@forward "content" as content-*;
+@forward "table" as table-*;

package/src/typography/base/_index.scss

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

package/src/typography/base/_plugin.scss

@@ -0,0 +1,21 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-typography-base {
+  html {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-size: $body-size;
+    line-height: $body-line-height;
+    text-rendering: $render-mode;
+    @include variables.textColor(fg, $default-color);
+  }
+
+  body,
+  button,
+  input,
+  select,
+  textarea {
+    font-family: $family-sans-serif;
+  }
+}

package/src/typography/base/_variables.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "../../variables";
+
+$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 (...)`.
+$family-sans-serif: variables.$global-family-sans-serif !default;
+$family-monospace: variables.$global-family-monospace !default;
+$base-size: variables.$global-base-size !default;
+$body-line-height: variables.$global-body-line-height !default;
+
+$body-size: $base-size !default;
+$render-mode: optimizeLegibility !default;

package/src/typography/content/_index.scss

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

package/src/typography/content/_plugin.scss

@@ -0,0 +1,39 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+
+@function _repeat($string, $times) {
+  $content: $string;
+  @for $_ from 1 to $times {
+    $content: $content + $string;
+  }
+  @return $content;
+}
+
+@if variables.$feature-typography-content {
+  .content {
+    p,
+    dl,
+    ol,
+    ul,
+    blockquote,
+    pre,
+    table {
+      &:not(:last-child) {
+        margin-block-end: 1em;
+      }
+    }
+
+    ol,
+    ul {
+      list-style-position: outside;
+      margin-inline-start: variables.$global-gap * 2;
+    }
+
+    @for $i from 0 to list.length($ul-styles) {
+      #{_repeat("ul ", $i + 1)} {
+        list-style-type: list.nth($ul-styles, $i + 1);
+      }
+    }
+  }
+}

package/src/typography/content/_variables.scss

@@ -0,0 +1 @@
+$ul-styles: (disc, circle, square) !default;

package/src/typography/link/_index.scss

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

package/src/typography/link/_mixins.scss

@@ -0,0 +1,29 @@
+@use "variables" as *;
+@use "../../variables";
+
+// 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
+// fill / border, hover `filter: none`) stay in their plugins. Fallbacks are
+// parameterised so the button can pass its own combination fallback without
+// depending on link's variable defaults.
+@mixin linkSurface(
+  $fallback: $color,
+  $hover-fallback: $hover-color,
+  $visited-fallback: $visited-color,
+) {
+  cursor: pointer;
+  text-decoration: underline;
+  @include variables.textColor(link, $fallback);
+
+  &:hover {
+    @include variables.textColor(link-hover, $hover-fallback);
+  }
+
+  // `:visited` keeps the underline + cursor affordance from the base
+  // selector and only swaps the colour token (UA restricts what
+  // `:visited` may change for privacy). WCAG 2.4.8.
+  &:visited {
+    @include variables.textColor(link-visited, $visited-fallback);
+  }
+}

package/src/typography/link/_plugin.scss

@@ -0,0 +1,15 @@
+@use "variables" as *;
+@use "../../variables";
+@use "mixins" as *;
+
+@if variables.$feature-typography-link {
+  a {
+    @include linkSurface;
+
+    &:focus-visible {
+      outline: $focus-outline-width $focus-outline-style
+        var(--kc-focus-ring, var(--kc-fg, currentColor));
+      outline-offset: $focus-outline-offset;
+    }
+  }
+}

package/src/typography/link/_variables.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "../../variables";
+
+$default-color: map.get(variables.$color-palette, black) !default;
+$color: $default-color !default;
+$hover-color: $color !default;
+// `:visited` defaults to the same colour as the base link so that themes
+// which haven't opted in still render visited links visibly; consumers and
+// themes override `--kc-link-visited` to ship a distinct visited swatch
+// (WCAG 2.4.8).
+$visited-color: $color !default;
+
+$focus-outline-width: variables.$global-focus-outline-width !default;
+$focus-outline-style: variables.$global-focus-outline-style !default;
+$focus-outline-offset: variables.$global-focus-outline-offset !default;

package/src/typography/table/_index.scss

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

package/src/typography/table/_plugin.scss

@@ -0,0 +1,13 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-typography-table {
+  #{$selector} {
+    vertical-align: top;
+
+    td,
+    th {
+      padding: $gutter;
+    }
+  }
+}

package/src/typography/table/_variables.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "../../variables";
+
+$selector: ".table" !default;
+$gap: variables.$global-gap !default;
+$gutter: math.div($gap, 2) !default;

package/src/typography/title/_index.scss

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

package/src/typography/title/_plugin.scss

@@ -0,0 +1,36 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-typography-title {
+  @each $label, $args in $levels {
+    #{$label} {
+      @if meta.type-of($args) == "list" {
+        $length: list.length($args);
+        @if $length >= 1 {
+          font-size: list.nth($args, 1);
+        }
+        @if $length >= 2 {
+          font-weight: list.nth($args, 2);
+        }
+        @if $length >= 3 {
+          color: list.nth($args, 3);
+        }
+      } @else if meta.type-of($args) == "map" {
+        @if map.has-key($args, size) {
+          font-size: map.get($args, size);
+        }
+        @if map.has-key($args, weight) {
+          font-weight: map.get($args, weight);
+        }
+        @if map.has-key($args, color) {
+          color: map.get($args, color);
+        }
+      } @else {
+        font-size: $args;
+      }
+    }
+  }
+}

package/src/typography/title/_variables.scss

@@ -0,0 +1,7 @@
+@use "sass:list";
+
+$sizes: (2.5rem, 1.75rem, 1.25rem, 1rem, 0.75rem, 0.5rem) !default;
+$levels: (
+  ".title": (list.nth($sizes, 1), 800),
+  ".subtitle": list.nth($sizes, 2),
+) !default;

package/src/variables/_color.scss

@@ -0,0 +1,66 @@
+@use "sass:color";
+@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.
+$palette: (
+  sage: #1a6347,
+  moss: #525a22,
+  emerald: #247d59,
+  amber: #7a4f10,
+  coral: #8c351a,
+  white: #ffffff,
+  black: #27282b,
+) !default;
+
+// Per-palette-name complement overrides. By default `complement($name)`
+// returns `color.complement(map.get($palette, $name))` (a 180° hue rotation).
+// Override individual entries here to pin a hand-picked accent — useful when
+// the mathematical opposite lands on an unflattering hue or fails contrast.
+//
+// Consumer override (one or many keys, partial maps welcome):
+//   @use 'krysalicss/variables/color' with (
+//     $complement-overrides: (sage: #9d566c),
+//   );
+$complement-overrides: () !default;
+
+@function complement($name) {
+  @if not map.has-key($palette, $name) {
+    @error 'complement(): "#{$name}" is not in $palette. Available: #{map.keys(
+      $palette
+    )}.';
+  }
+  @if map.has-key($complement-overrides, $name) {
+    @return map.get($complement-overrides, $name);
+  }
+  @return color.complement(map.get($palette, $name));
+}
+
+// (background, foreground) tuples per named combination.
+// 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.
+$combinations: (
+  default: (map.get($palette, white), map.get($palette, black)),
+  primary: (map.get($palette, emerald), map.get($palette, white)),
+  warning: (map.get($palette, amber), map.get($palette, white)),
+  danger: (map.get($palette, coral), map.get($palette, white)),
+  success: (map.get($palette, moss), map.get($palette, white)),
+) !default;
+
+$combinations-list: map.keys($combinations);
+// Alias kept for clarity: themes / validators read the canonical key
+// roster as `$combinations-keys`; identical to `$combinations-list`.
+$combinations-keys: $combinations-list;
+$combination-default: map.get($combinations, list.nth($combinations-list, 1));

package/src/variables/_default.scss

@@ -0,0 +1,52 @@
+@use "sass:list";
+@use "sass:meta";
+@use "color";
+@use "global";
+@use "selector";
+
+// Theme custom-property prefix: every token emitted as --kc-<name>.
+// Component plugins call these mixins with the bare token short-name and the
+// prefix is added here, so component code never embeds the literal '--kc-'.
+$prefix: "--kc-" !default;
+
+@mixin defaultProperty($property, $token, $fallback) {
+  #{$property}: $fallback;
+  #{$property}: var(#{$prefix}#{$token}, #{$fallback});
+}
+
+@mixin textColor($token, $fallback) {
+  @include defaultProperty("color", $token, $fallback);
+}
+
+@mixin backgroundColor($token, $fallback) {
+  @include defaultProperty("background-color", $token, $fallback);
+}
+
+// Iterate over color combinations and emit a child selector per combination.
+// Caller provides the per-combination body via `@content using ($label, $tuple)`,
+// where $tuple is the (background, foreground) pair from `$color-combinations`.
+//
+// Usage:
+//   @include variables.combinations using ($label, $tuple) {
+//     @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+//     @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+//   }
+@mixin combinations($selector-prefix: selector.$prefix-is) {
+  @each $label, $tuple in color.$combinations {
+    &#{$selector-prefix}#{$label} {
+      @content ($label, $tuple);
+    }
+  }
+}
+
+// Per-component plugins shadow `$global-controls` with a local `$controls`
+// (`$controls: variables.$global-controls !default;` in their `_variables.scss`)
+// so consumers can re-tune one component's reveal mode in isolation. The
+// `$list` arg lets the plugin pass its own resolved value; the default keeps
+// any direct call working against the global.
+@function has-controls($mode, $list: global.$controls) {
+  @if meta.type-of($list) == "list" {
+    @return list.index($list, $mode) != null;
+  }
+  @return $list == $mode;
+}

package/src/variables/_feature.scss

@@ -0,0 +1,39 @@
+@use "sass:list";
+
+// Root feature list. `true` means "all features on" (default); a list of
+// `<category>-<name>` tokens means "only emit these".
+$list: true !default;
+
+@function _defaultValue($name) {
+  @return $list == true or list.index($list, $name) != null;
+}
+
+$base-reset: _defaultValue(base-reset) !default;
+$base-global: _defaultValue(base-global) !default;
+$layout-container: _defaultValue(layout-container) !default;
+$layout-flex: _defaultValue(layout-flex) !default;
+$layout-grid: _defaultValue(layout-grid) !default;
+$typography-base: _defaultValue(typography-base) !default;
+$typography-title: _defaultValue(typography-title) !default;
+$typography-link: _defaultValue(typography-link) !default;
+$typography-content: _defaultValue(typography-content) !default;
+$typography-table: _defaultValue(typography-table) !default;
+$module-card: _defaultValue(module-card) !default;
+$module-alert: _defaultValue(module-alert) !default;
+$module-field: _defaultValue(module-field) !default;
+$module-navbar: _defaultValue(module-navbar) !default;
+$module-modal: _defaultValue(module-modal) !default;
+$module-tabs: _defaultValue(module-tabs) !default;
+$element-button: _defaultValue(element-button) !default;
+$element-badge: _defaultValue(element-badge) !default;
+$element-progress: _defaultValue(element-progress) !default;
+$element-text-input: _defaultValue(element-text-input) !default;
+$element-textarea: _defaultValue(element-textarea) !default;
+$element-select: _defaultValue(element-select) !default;
+$element-checkbox: _defaultValue(element-checkbox) !default;
+$element-radio: _defaultValue(element-radio) !default;
+$element-switch: _defaultValue(element-switch) !default;
+$element-file: _defaultValue(element-file) !default;
+$element-range: _defaultValue(element-range) !default;
+$helper-breakpoints: _defaultValue(helper-breakpoints) !default;
+$helper-state: _defaultValue(helper-state) !default;

package/src/variables/_global.scss

@@ -0,0 +1,93 @@
+// Cross-cutting tokens shared by every interactive component. Per-component
+// `_variables.scss` files derive from these via `!default`, so a consumer
+// can either retune the whole framework here (e.g. fatten every focus ring
+// in one place) or override per-component.
+
+$gap: 1rem !default;
+$border-radius: 5px !default;
+
+// Pill / fully-rounded radius. 999px is enough to clip any rendered surface
+// up to ~2000px tall into a stadium / circle shape. Exposed as a token so
+// pill-shaped components (badge today, optionally button/card via consumer
+// override) reference one source of truth instead of repeating the literal.
+$max-border-radius: 999px !default;
+
+// Default border width for form controls (text-input, select, checkbox, …).
+// 1 px clears WCAG 1.4.11 (3:1 non-text contrast) when the colour is mixed
+// at `$border-mix` against the page foreground.
+$border-width: 1px !default;
+
+// Focus indicator: width / offset / style. Width meets WCAG 2.4.11 (≥ 2 px),
+// offset keeps the ring outside the border so it sits in the gap against the
+// page bg. Colour resolves at runtime to `var(--kc-focus-ring)` so themes
+// can ship a token explicitly tuned for AAA visibility (high-contrast yellow
+// etc.); falls back to `--kc-fg` and finally `currentColor`. The ring needs
+// to contrast with `--kc-bg`, NOT the per-combination button surface: the
+// chain therefore roots at theme-level tokens, not currentColor.
+$focus-outline-width: 2px !default;
+$focus-outline-style: solid !default;
+$focus-outline-offset: 2px !default;
+
+// Disabled-state opacity. 0.6 keeps glyphs legible (~3:1 against the input
+// bg) while clearly signalling non-interactivity. Pairs with `cursor:
+// not-allowed`.
+$disabled-opacity: 0.6 !default;
+
+// Border tint for form controls relative to the page foreground. 50 % is the
+// smallest single value that clears WCAG 1.4.11 (3:1 non-text contrast)
+// against the page bg in both default and dark themes (~3.04:1 default,
+// ~4.83:1 dark). Earlier 24 % missed by ~half: borders read as decoration
+// only, not as a control boundary.
+$border-mix: 50% !default;
+
+// AAA touch-target minimum (WCAG 2.5.5): interactive controls must be
+// ≥ 44 × 44 CSS pixels. Padding alone provides the height; this token
+// enforces the floor for short labels (icon-only buttons, "OK", "No").
+// Override to 0 for inline dense toolbars accepting the AA 24 × 24 floor.
+$min-touch-target: 2.75rem !default;
+
+// `filter: brightness()` factor for :hover states. Below 1 = darken. Note
+// that brightness scales every channel uniformly, so it does NOT exactly
+// preserve a contrast ratio: it tends to compress mid-luminance pairs.
+// 0.95 is the largest hover-darken that keeps every shipped combination
+// ≥ 4.5:1 (AA) at rest and ≥ 3:1 (AA-large; WCAG 2.4.11 non-text contrast)
+// on hover. Consumers shipping their own combinations should re-verify.
+$hover-brightness: 0.95 !default;
+
+// Default duration for state-change transitions (switch toggle, focus
+// fade-in, modal entrance). Short enough to feel responsive, long enough
+// to read as motion. Consumers can override per-component or zero out
+// here to honour `prefers-reduced-motion` globally.
+$transition-duration: 120ms !default;
+
+// Typography fundamentals. Live here (not just in `typography/base`) so
+// any component can reach for the same baseline values: and so consumers
+// configuring the framework see the typography knobs alongside the rest.
+// `typography/base` derives from these.
+$base-size: 16px !default;
+$body-line-height: 1.5 !default;
+$family-sans-serif:
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  Helvetica,
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol", !default;
+$family-monospace: monospace !default;
+
+// Emit `:dir(rtl)` overrides for properties that don't have a logical-axis
+// equivalent (background-position, transform). Set to `false` for an LTR-only
+// build that strips the rtl rules at compile time.
+$rtl: true !default;
+
+// Reveal mechanism(s) for stateful framework components (navbar dropdown,
+// future tabs/modal). 'css' = native pseudo-classes / :has() / <details> /
+// <input:checked>. 'js' = attribute selectors ([aria-expanded='true'],
+// [data-open]) for consumer JS to drive. Both in the list = both branches
+// emitted; single value strips the other. The framework still ships zero JS;
+// 'js' only emits the CSS hooks consumer JS sets.
+$controls: ("css", "js") !default;

package/src/variables/_index.scss

@@ -0,0 +1,7 @@
+@forward "feature" as feature-*;
+@forward "global" as global-*;
+@forward "color" as color-*;
+@forward "responsive" as responsive-*;
+@forward "size" as size-*;
+@forward "selector" as selector-*;
+@forward "default";

package/src/variables/_responsive.scss

@@ -0,0 +1,10 @@
+// Device-oriented min-width breakpoints. `mobile` is `null` (no media
+// query) so it matches every viewport — keep it as the first entry; the
+// flex grid uses it as the default-display breakpoint.
+$breakpoints: (
+  mobile: null,
+  tablet: 768px,
+  desktop: 1024px,
+  widescreen: 1280px,
+  fullhd: 1536px,
+) !default;

package/src/variables/_selector.scss

@@ -0,0 +1 @@
+$prefix-is: ".is-" !default;