@adnap/krysalicss 0.0.1

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

@@ -0,0 +1,22 @@
+@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.
+$selector: 'input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"]'
+  !default;
+
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-small !default;
+
+$border-radius: variables.$global-border-radius !default;
+$border-width: variables.$global-border-width !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$border-mix: variables.$global-border-mix !default;

package/src/element/textarea/_index.scss

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

package/src/element/textarea/_plugin.scss

@@ -0,0 +1,39 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-textarea {
+  #{$selector} {
+    @include variables.backgroundColor(input-bg, transparent);
+    @include variables.textColor(input-fg, currentColor);
+    display: block;
+    width: 100%;
+    min-height: $min-height;
+    padding: $padding-y $padding-x;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: $border-radius;
+    font: inherit;
+    line-height: 1.4;
+    resize: $resize;
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+      border-color: var(--kc-fg, currentColor);
+    }
+
+    @include controls.invalidControl();
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+
+    &::placeholder {
+      color: color-mix(in srgb, currentColor 65%, transparent);
+      opacity: 1;
+    }
+  }
+}

package/src/element/textarea/_variables.scss

@@ -0,0 +1,22 @@
+@use "../../variables";
+
+$selector: "textarea" !default;
+
+$padding-y: variables.$size-extra-small !default;
+$padding-x: variables.$size-small !default;
+
+$border-radius: variables.$global-border-radius !default;
+$border-width: variables.$global-border-width !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;
+
+$disabled-opacity: variables.$global-disabled-opacity !default;
+$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/_breakpoints.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "../variables";
+
+// Viewport-query mixins. `$device` is a key from `$responsive-breakpoints`
+// (`tablet`, `desktop`, `widescreen`, `fullhd`); `mobile` is `null` and
+// not valid here.
+@mixin from($device) {
+  @media screen and (min-width: map.get(
+        variables.$responsive-breakpoints,
+        $device
+      )) {
+    @content;
+  }
+}
+
+@mixin until($device) {
+  @media screen and (max-width: map.get(
+        variables.$responsive-breakpoints,
+        $device
+      )
+        - 1px) {
+    @content;
+  }
+}
+
+// Container-query counterparts. Same `$responsive-breakpoints` keyspace;
+// resolves against the nearest containment context rather than the
+// viewport. Caller is responsible for declaring `container-type` (and
+// optionally `container-name`) on the host element. Most module
+// variables expose a `$container-name` opt-in for that.
+@mixin containerFrom($device) {
+  @container (min-width: #{map.get(
+    variables.$responsive-breakpoints,
+    $device
+  )}) {
+    @content;
+  }
+}
+
+@mixin containerUntil($device) {
+  @container (max-width: #{map.get(variables.$responsive-breakpoints, $device)
+    - 1px}) {
+    @content;
+  }
+}

package/src/helper/_controls.scss

@@ -0,0 +1,82 @@
+@use "sass:list";
+@use "../variables";
+
+// Shared affordances for interactive controls (form inputs, buttons, tabs,
+// links, navbar items). Each form-control plugin used to inline these four
+// blocks verbatim; centralising them here keeps the focus / disabled /
+// invalid / border-mix contracts in one place and lets the framework
+// version focus behaviour globally (fall-back chains, double rings, etc.)
+// without touching every component.
+
+// `$token` defaults to the global `focus-ring` token; the fallback chain
+// keeps the outline visible in themes that haven't shipped a focus-ring
+// override (falls through to `--kc-fg` and then `currentColor`). Plugins
+// that want a different focus token (rare) pass `$token: <name>`.
+@mixin focus-ring(
+  $width: variables.$global-focus-outline-width,
+  $style: variables.$global-focus-outline-style,
+  $offset: variables.$global-focus-outline-offset,
+  $token: focus-ring,
+) {
+  outline: $width $style var(--kc-#{$token}, var(--kc-fg, currentColor));
+  outline-offset: $offset;
+}
+
+@mixin disabledControl($opacity: variables.$global-disabled-opacity) {
+  cursor: not-allowed;
+  opacity: $opacity;
+}
+
+// Form-control border tint. The control inherits `color` from the surface
+// so mixing `currentColor` with transparent keeps the border tuned against
+// the foreground regardless of theme. WCAG 1.4.11 (3:1 non-text contrast)
+// is held by `$global-border-mix` (50%).
+@mixin borderWithMix(
+  $width: variables.$global-border-width,
+  $mix: variables.$global-border-mix,
+  $color: currentColor,
+) {
+  border: $width solid color-mix(in srgb, $color #{$mix}, transparent);
+}
+
+// `:user-invalid` (not `:invalid`): only flags after interaction or submit
+// attempt, avoiding the false-positive red ring on untouched `required`
+// fields. `[aria-invalid="true"]` remains the manual hook for JS-validated
+// forms. `$color-token` lets a caller redirect the cue (rare).
+@mixin invalidControl($color-token: danger-bg) {
+  &:user-invalid,
+  &[aria-invalid="true"] {
+    border-color: var(--kc-#{$color-token}, currentColor);
+  }
+}
+
+// Nested-link affordance for surface modules (alert, card). The page-level
+// `--kc-link` is calibrated against the page bg, not the module surface bg;
+// pinning links to `currentColor` keeps them paired with the surface fg
+// (contrast-safe by construction on themed `.is-*` variants). Underline
+// preserves the link cue now that colour alone can't (WCAG 1.4.1).
+@mixin nestedLinks {
+  a {
+    color: currentColor;
+    text-decoration: underline;
+  }
+}
+
+// Iterate over the framework's colour combinations and emit a per-label
+// child selector that assigns `--kc-<prefix><label>-bg` / `-fg` tokens.
+// Components whose `using ($label, $tuple)` body is JUST these two calls
+// (alert, card) replace the inline block with a single
+// `@include controls.combinations-apply()`. Components with additional
+// per-combination rules (button) keep the inline block.
+@mixin combinations-apply($bg-token-prefix: "", $fg-token-prefix: "") {
+  @include variables.combinations using ($label, $tuple) {
+    @include variables.backgroundColor(
+      "#{$bg-token-prefix}#{$label}-bg",
+      list.nth($tuple, 1),
+    );
+    @include variables.textColor(
+      "#{$fg-token-prefix}#{$label}-fg",
+      list.nth($tuple, 2),
+    );
+  }
+}

package/src/helper/_index.scss

@@ -0,0 +1,3 @@
+@forward "breakpoints";
+@forward "controls";
+@forward "state" as state-*;

package/src/helper/_state.scss

@@ -0,0 +1,35 @@
+@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 (...)`.
+$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: "⚠ ",
+  danger: "✕ ",
+) !default;
+
+@if variables.$feature-helper-state {
+  @each $label, $glyph in $icons {
+    [#{$selector-attr}="#{$label}"]::before {
+      content: var(--kc-state-icon-#{$label}, "#{$glyph}");
+    }
+  }
+}

package/src/krysalicss.scss

@@ -0,0 +1,17 @@
+// Batteries-included entry. Pulls every category, the default
+// light theme, and the dark theme (auto-switching via prefers-color-scheme +
+// opt-in `.theme-dark` override). Consumers wanting only one theme should
+// use `_index.scss` and import their chosen theme(s) themselves.
+//
+// Re-export the feature-flag list under `$feature-list` so consumers can
+// tree-shake from the root entry:
+//   @use '@adnap/krysalicss' with ($feature-list: ('base-reset', 'element-button'));
+// `_feature.scss` already declares `$list: true !default;`, so a bare
+// @forward keeps the variable configurable downstream without locking the
+// value via a redundant `with` clause (which would error if the module had
+// been loaded transitively first via a per-component `_variables.scss`).
+@forward "variables/feature" as feature-*;
+
+@use "theme/default";
+@use "theme/dark";
+@use "index";

package/src/layout/_index.scss

@@ -0,0 +1,3 @@
+@forward "container" as container-*;
+@forward "flex" as flex-*;
+@forward "grid" as grid-*;

package/src/layout/container/_index.scss

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

package/src/layout/container/_plugin.scss

@@ -0,0 +1,26 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/breakpoints" as breakpoints;
+
+@if variables.$feature-layout-container {
+  #{$selector} {
+    flex-grow: 1;
+    margin: 0 auto;
+    position: relative;
+    width: auto;
+    padding-inline-start: $gutter;
+    padding-inline-end: $gutter;
+
+    @if $fluid-modifier {
+      @each $device, $size in variables.$responsive-breakpoints {
+        @include breakpoints.from($device) {
+          max-width: $size;
+        }
+      }
+
+      &#{variables.$selector-prefix-is}#{$fluid-modifier} {
+        max-width: none;
+      }
+    }
+  }
+}

package/src/layout/container/_variables.scss

@@ -0,0 +1,5 @@
+@use "../../variables";
+
+$gutter: variables.$global-gap !default;
+$selector: ".container" !default;
+$fluid-modifier: "fluid" !default;

package/src/layout/flex/_index.scss

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

package/src/layout/flex/_plugin.scss

@@ -0,0 +1,32 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-layout-flex {
+  #{$flex-selector} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $gap;
+
+    &.no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &#{variables.$selector-prefix-is}centered {
+      justify-content: center;
+    }
+
+    &#{variables.$selector-prefix-is}vertical {
+      flex-direction: column;
+    }
+
+    > #{$column-selector} {
+      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

@@ -0,0 +1,9 @@
+@use "../../variables";
+
+$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/grid/_index.scss

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

package/src/layout/grid/_plugin.scss

@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-layout-grid {
+  #{$selector} {
+    display: grid;
+    gap: $gap;
+    // Default behaviour: responsive auto-fit. Cells stretch to fill the row
+    // and reflow into more / fewer columns as the viewport changes. No media
+    // queries required: the CSS Grid algorithm handles it.
+    grid-template-columns: repeat(auto-fit, minmax($auto-min, 1fr));
+
+    // Explicit column-count variants: `.grid.is-cols-3` etc.
+    @each $n in $column-modifiers {
+      &#{variables.$selector-prefix-is}cols-#{$n} {
+        grid-template-columns: repeat($n, minmax(0, 1fr));
+      }
+    }
+
+    // Cell spans. Apply to direct children with `.cell.is-span-N` or
+    // `.cell.is-half` etc. Cells with no span class fill one column.
+    > #{$cell-selector} {
+      @for $i from 1 through $columns {
+        &#{variables.$selector-prefix-is}span-#{$i} {
+          grid-column: span $i;
+        }
+      }
+
+      @each $label, $span in $named-spans {
+        &#{variables.$selector-prefix-is}#{$label} {
+          grid-column: span $span;
+        }
+      }
+    }
+  }
+}

package/src/layout/grid/_variables.scss

@@ -0,0 +1,37 @@
+@use "../../variables";
+
+// Container + cell selectors. Both configurable so consumers can rescope to a
+// class prefix or web-component shadow root without forking the source.
+$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,
+  one-third: 4,
+  two-thirds: 8,
+  one-quarter: 3,
+  three-quarters: 9,
+) !default;

package/src/module/_index.scss

@@ -0,0 +1,6 @@
+@forward "card" as card-*;
+@forward "alert" as alert-*;
+@forward "field" as field-*;
+@forward "navbar" as navbar-*;
+@forward "modal" as modal-*;
+@forward "tabs" as tabs-*;

package/src/module/alert/_index.scss

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

package/src/module/alert/_plugin.scss

@@ -0,0 +1,51 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-module-alert {
+  #{$selector} {
+    @include variables.backgroundColor(
+      alert-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(alert-fg, list.nth($default-combination, 2));
+    display: flex;
+    align-items: flex-start;
+    gap: $icon-gap;
+    padding: $padding-y $padding-x;
+    border-radius: $border-radius;
+    border-inline-start-width: $accent-width;
+    border-inline-start-style: solid;
+    border-inline-start-color: var(
+      --kc-fg,
+      #{list.nth($default-combination, 2)}
+    );
+
+    @if $container-name {
+      container-type: inline-size;
+      container-name: #{$container-name};
+    }
+
+    > #{$icon-selector} {
+      flex: 0 0 auto;
+      // Inherit the body line-height so the icon's first-line box matches
+      // the prose first-line box height. With `align-items: flex-start`
+      // above this means the glyph centres line up with the first line of
+      // text instead of floating above it. Pre-fix the icon used
+      // `line-height: 1` (~1em box) against ~1.5em text boxes, so the
+      // glyph rendered visibly higher than the text baseline.
+      line-height: inherit;
+    }
+
+    // Nested links inherit the surface fg + carry an underline. The
+    // page-level --kc-link is calibrated against page bg, not against
+    // alert surface bg; pairing the link with the alert's own fg colour
+    // is contrast-safe by construction (it's the same colour that the
+    // body text reads at). The underline preserves the link affordance
+    // now that colour alone can't (WCAG 1.4.1).
+    @include controls.nestedLinks;
+
+    @include controls.combinations-apply();
+  }
+}

package/src/module/alert/_variables.scss

@@ -0,0 +1,24 @@
+@use "../../variables";
+
+$selector: ".alert" !default;
+$icon-selector: ".alert__icon" !default;
+
+$padding-y: variables.$size-small !default;
+$padding-x: variables.$size-normal !default;
+
+$border-radius: variables.$global-border-radius !default;
+
+// Left-edge accent: 3px solid stripe in the page foreground (`--kc-fg`).
+// Stays constant across combinations — only the background changes per
+// combination, so the stripe reads as a fixed identity marker.
+// Width chosen to read as a stripe rather than a border at default sizes.
+$accent-width: 3px !default;
+
+// Gap between an optional `.alert__icon` slot and the prose body. Consumers
+// supply their own icon glyph; the framework only standardises spacing.
+$icon-gap: variables.$size-extra-small !default;
+
+$default-combination: variables.$color-combination-default !default;
+
+// Opt-in container-query host. See `module/card/_variables.scss` for rationale.
+$container-name: null !default;

package/src/module/card/_index.scss

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

package/src/module/card/_plugin.scss

@@ -0,0 +1,31 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-module-card {
+  #{$selector} {
+    @include variables.backgroundColor(
+      card-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(card-fg, list.nth($default-combination, 2));
+    padding: $gap;
+    border-radius: $border-radius;
+    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+
+    @if $container-name {
+      container-type: inline-size;
+      container-name: #{$container-name};
+    }
+
+    // Nested links inherit the surface fg + carry an underline. Same
+    // rationale as alert: page-level --kc-link is calibrated against page
+    // bg, not card surface bg; pairing with the card's own fg avoids
+    // contrast failures on themed `.is-*` variants and on default cards
+    // in dark themes. Underline preserves the link cue (WCAG 1.4.1).
+    @include controls.nestedLinks;
+
+    @include controls.combinations-apply();
+  }
+}

package/src/module/card/_variables.scss

@@ -0,0 +1,13 @@
+@use "../../variables";
+
+$selector: ".card" !default;
+$gap: variables.$global-gap !default;
+$border-radius: variables.$global-border-radius !default;
+$default-combination: variables.$color-combination-default !default;
+
+// Opt-in container-query host. When non-null, the plugin emits
+// `container-type: inline-size; container-name: <value>;` on the card so
+// consumers can scope their own `containerFrom(...)` rules to card width
+// instead of the viewport. The framework itself emits no container-query
+// rules for card today; this is a hook for downstream code.
+$container-name: null !default;

package/src/module/field/_index.scss

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

package/src/module/field/_plugin.scss

@@ -0,0 +1,49 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-module-field {
+  #{$selector} {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+    margin-block-end: $margin-bottom;
+
+    > #{$label-selector} {
+      font-weight: 600;
+    }
+
+    > #{$help-selector} {
+      font-size: $help-font-size;
+      color: color-mix(in srgb, currentColor #{$help-mix}, transparent);
+    }
+
+    // `.field.is-invalid` lets consumers flag the whole field (label + help
+    // tinted danger) without reaching into individual control selectors.
+    // Uses `:where()`-style scoping via direct child to keep specificity low
+    // and avoid leaking into nested fields.
+    &#{$invalid-selector} > #{$help-selector} {
+      color: var(--kc-danger-bg, currentColor);
+    }
+
+    // Non-colour cue for invalid state. Triggered by the explicit
+    // `.is-invalid` modifier OR `:has(:user-invalid, [aria-invalid="true"])`.
+    // `:user-invalid` (not `:invalid`) avoids painting the glyph on every
+    // untouched `required` control: the user must have interacted (or
+    // attempted submit) before the danger cue fires. `:has()` and
+    // `:user-invalid` are both in our evergreen baseline. WCAG 1.4.1 + 1.4.11.
+    &#{$invalid-selector} > #{$label-selector}::before,
+    &:has(:user-invalid) > #{$label-selector}::before,
+    &:has([aria-invalid="true"]) > #{$label-selector}::before {
+      content: var(--kc-state-icon-danger, "#{$invalid-icon}");
+      color: var(--kc-danger-bg, currentColor);
+    }
+
+    // Disabled-field hint dims the label + help so the visual state matches
+    // the underlying control. The control itself dims via its own `:disabled`
+    // rule; this just keeps surrounding text in sync.
+    &#{$disabled-selector} > #{$label-selector},
+    &#{$disabled-selector} > #{$help-selector} {
+      opacity: 0.6;
+    }
+  }
+}