@adnap/krysalicss 0.0.1

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@adnap/krysalicss",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "A modern, extremely modular, multi-theme CSS framework with first-class theming via CSS custom properties.",
+  "license": "MIT",
+  "author": "adnap",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/adnap/krysalicss.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/adnap/krysalicss/-/issues"
+  },
+  "homepage": "https://krysalicss.eu",
+  "main": "dist/krysalicss.css",
+  "style": "dist/krysalicss.min.css",
+  "sass": "src/krysalicss.scss",
+  "unpkg": "dist/krysalicss.min.css",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "exports": {
+    ".": {
+      "sass": "./src/krysalicss.scss",
+      "style": "./dist/krysalicss.min.css",
+      "default": "./dist/krysalicss.css"
+    },
+    "./min": {
+      "style": "./dist/krysalicss.min.css",
+      "default": "./dist/krysalicss.min.css"
+    },
+    "./helper/*": {
+      "sass": "./src/helper/_*.scss",
+      "style": "./dist/helper/*.min.css",
+      "default": "./dist/helper/*.css"
+    },
+    "./*": {
+      "sass": "./src/*/_index.scss",
+      "style": "./dist/*.min.css",
+      "default": "./dist/*.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "css",
+    "scss",
+    "sass",
+    "css-framework",
+    "framework",
+    "modular",
+    "responsive",
+    "flexbox",
+    "themes",
+    "dark-mode",
+    "css-variables"
+  ],
+  "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^24.12.2",
+    "autoprefixer": "^10.5.0",
+    "cssnano": "^8.0.0",
+    "postcss": "^8.5.14",
+    "sass-embedded": "^1.99.0",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "pnpm build:prod && pnpm build:dev",
+    "build:prod": "tsx tools/build.ts prod",
+    "build:dev": "tsx tools/build.ts dev",
+    "watch": "tsx tools/watch.ts",
+    "test": "pnpm test:snapshots",
+    "test:snapshots": "tsx tools/test-snapshots.ts",
+    "test:visual": "pnpm --filter @adnap/krysalicss-docs build && playwright test tests/visual/",
+    "test:visual:wipe": "rm -rf tests/visual/__screenshots__",
+    "test:visual:update": "pnpm --filter @adnap/krysalicss-docs build && playwright test tests/visual/ --update-snapshots",
+    "test:visual:podman": "tsx tools/test-visual-podman.ts",
+    "test:visual:podman:update": "tsx tools/test-visual-podman.ts --update",
+    "test:a11y": "pnpm --filter @adnap/krysalicss-docs build && playwright test tests/a11y/ --project=a11y",
+    "bundle:check": "tsx tools/bundle-size.ts",
+    "lint": "deno lint",
+    "lint:flags": "tsx tools/lint-feature-flags.ts",
+    "lint:motion": "tsx tools/lint-reduced-motion.ts",
+    "smoke:imports": "tsx tools/smoke-imports.ts",
+    "tokens:build": "tsx tools/export-tokens.ts",
+    "format": "deno fmt",
+    "format:check": "deno fmt --check",
+    "typecheck": "tsc --noEmit",
+    "check": "pnpm format:check && pnpm lint && pnpm typecheck",
+    "docs:dev": "pnpm --filter @adnap/krysalicss-docs dev",
+    "docs:build": "pnpm --filter @adnap/krysalicss-docs build",
+    "docs:preview": "pnpm --filter @adnap/krysalicss-docs preview",
+    "docs:check": "pnpm --filter @adnap/krysalicss-docs check",
+    "build:vue": "pnpm --filter @adnap/krysalicss-vue build",
+    "test:vue": "pnpm --filter @adnap/krysalicss-vue test",
+    "build:react": "pnpm --filter @adnap/krysalicss-react build",
+    "test:react": "pnpm --filter @adnap/krysalicss-react test"
+  }
+}

package/src/_index.scss

@@ -0,0 +1,18 @@
+// Forwards-only entry. Use this when you want to bring your own theme:
+//   @use 'krysalicss/src/index' with ($features: (button, card));
+//   @use 'krysalicss/src/theme/dark';
+//
+// Order matters: variables → base → helper → layout → typography → module → element.
+// Themes are NOT included here: consumers pull a theme explicitly.
+//
+// Each category is forwarded with a `<category>-*` prefix so siblings that share
+// generic token names (`$selector`, `$gap`, `$border-radius`) don't collide at
+// this layer. Reach for symbols as `$layout-selector`, `$module-selector`, etc.
+@forward "variables";
+@forward "base" as base-*;
+@forward "helper" as helper-*;
+@forward "layout" as layout-*;
+@forward "typography" as typography-*;
+@forward "module" as module-*;
+@forward "element" as element-*;
+@forward "theme/create" as theme-create-*;

package/src/base/_index.scss

@@ -0,0 +1,2 @@
+@forward "reset";
+@forward "global";

package/src/base/global/_index.scss

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

package/src/base/global/_plugin.scss

@@ -0,0 +1,34 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-base-global {
+  html {
+    @include variables.backgroundColor(bg, $background-fallback);
+    @include variables.textColor(fg, $foreground-fallback);
+  }
+
+  // Forced-colors (Windows High Contrast). Authoring tokens remap to OS
+  // system colour keywords so user agent contrast wins over brand palette.
+  @if $forced-colors-fallback {
+    @media (forced-colors: active) {
+      :root {
+        --kc-bg: Canvas;
+        --kc-fg: CanvasText;
+        --kc-link: LinkText;
+        --kc-link-hover: LinkText;
+        --kc-card-bg: Canvas;
+        --kc-card-fg: CanvasText;
+        --kc-default-bg: Canvas;
+        --kc-default-fg: CanvasText;
+        --kc-primary-bg: Highlight;
+        --kc-primary-fg: HighlightText;
+        --kc-warning-bg: Canvas;
+        --kc-warning-fg: CanvasText;
+        --kc-danger-bg: Canvas;
+        --kc-danger-fg: CanvasText;
+        --kc-success-bg: Canvas;
+        --kc-success-fg: CanvasText;
+      }
+    }
+  }
+}

package/src/base/global/_variables.scss

@@ -0,0 +1,11 @@
+// Fallback values used when the corresponding theme custom property is unset.
+// Match the `white` / `black` palette entries so consumers re-tinting the
+// palette still get coherent fallbacks.
+$background-fallback: #ffffff !default;
+$foreground-fallback: #27282b !default;
+
+// Windows High Contrast Mode: opt-in by default. When active, the
+// emitted block remaps theme tokens to `Canvas` / `CanvasText` /
+// `LinkText` / `Highlight` so the OS palette wins. Set to `false` if
+// the consumer would rather author their own forced-colors handling.
+$forced-colors-fallback: true !default;

package/src/base/reset/_index.scss

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

package/src/base/reset/_plugin.scss

@@ -0,0 +1,70 @@
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-base-reset {
+  /*! krysalicss-reset
+  derived from minireset.css v0.0.6
+  MIT
+  github.com/jgthms/minireset.css)
+  */
+
+  #{$selector-list} {
+    margin: 0;
+    padding: 0;
+  }
+
+  #{$heading-selector} {
+    font-size: 100%;
+    font-weight: normal;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  #{$form-selector} {
+    margin: 0;
+    // UA stylesheets apply `font: -webkit-small-control` (or similar) to
+    // form controls, which renders ~13px instead of inheriting the page
+    // font. Inherit explicitly so `<button class="button">` matches
+    // `<a class="button">` and form fields match surrounding prose.
+    font-family: inherit;
+    font-size: 1em;
+    line-height: inherit;
+  }
+
+  html {
+    box-sizing: border-box;
+  }
+
+  * {
+    &,
+    &::before,
+    &::after {
+      box-sizing: inherit;
+    }
+  }
+
+  #{$media-selector} {
+    height: auto;
+    max-width: 100%;
+  }
+
+  iframe {
+    border: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+
+    &:not([align]) {
+      text-align: start;
+    }
+  }
+}

package/src/base/reset/_variables.scss

@@ -0,0 +1,5 @@
+$selector-list: "html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6"
+  !default;
+$heading-selector: "h1, h2, h3, h4, h5, h6" !default;
+$form-selector: "button, input, select, textarea" !default;
+$media-selector: "img, video" !default;

package/src/element/_index.scss

@@ -0,0 +1,11 @@
+@forward "button" as button-*;
+@forward "badge" as badge-*;
+@forward "progress" as progress-*;
+@forward "text-input" as text-input-*;
+@forward "textarea" as textarea-*;
+@forward "select" as select-*;
+@forward "checkbox" as checkbox-*;
+@forward "radio" as radio-*;
+@forward "switch" as switch-*;
+@forward "file" as file-*;
+@forward "range" as range-*;

package/src/element/badge/_index.scss

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

package/src/element/badge/_plugin.scss

@@ -0,0 +1,44 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+
+@if variables.$feature-element-badge {
+  #{$selector} {
+    @include variables.backgroundColor(
+      default-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(default-fg, list.nth($default-combination, 2));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $padding-x;
+    line-height: $line-height;
+    font-size: $font-size;
+    border-radius: $border-radius;
+    // Subtle outline disambiguates pill shape from page bg when the variant
+    // bg ≈ page bg (e.g. .is-default on white, .is-light on dark). Matches
+    // the page-foreground axis at low alpha so it reads regardless of
+    // variant colour. WCAG 1.4.11 graphical-object contrast.
+    outline: 1px solid
+      color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
+    outline-offset: -1px;
+
+    &#{$square-selector} {
+      border-radius: $square-border-radius;
+    }
+
+    @include variables.combinations using ($label, $tuple) {
+      @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+      @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+    }
+
+    // Forced-colors: the 35%-mixed outline collapses to a near-transparent
+    // system colour and the pill shape disappears against Canvas. Force a
+    // solid CanvasText outline so the boundary stays visible; the variant
+    // distinction flattens
+    @media (forced-colors: active) {
+      outline-color: CanvasText;
+    }
+  }
+}

package/src/element/badge/_variables.scss

@@ -0,0 +1,19 @@
+@use "../../variables";
+
+$selector: ".badge" !default;
+$square-selector: "#{variables.$selector-prefix-is}square" !default;
+
+// Inline indicator sizing. Fixed line-height keeps the pill height
+// independent of the surrounding text's line-height (which would otherwise
+// stretch a numeric badge inside prose). All three derive from the size
+// scale so the badge sits in the framework's dimensional rhythm.
+$padding-x: variables.$size-extra-small !default;
+$line-height: variables.$size-medium !default;
+$font-size: variables.$size-small !default;
+
+// Pill default. The `.is-square` modifier overrides this with the global
+// border radius so badges can match the corner radius of adjacent buttons.
+$border-radius: variables.$global-max-border-radius !default;
+$square-border-radius: variables.$global-border-radius !default;
+
+$default-combination: variables.$color-combination-default !default;

package/src/element/button/_index.scss

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

package/src/element/button/_plugin.scss

@@ -0,0 +1,173 @@
+@use "sass:list";
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+@use "../../typography/link/mixins" as link;
+
+@if variables.$feature-element-button {
+  #{$selector} {
+    @include variables.backgroundColor(
+      default-bg,
+      list.nth($default-combination, 1),
+    );
+    @include variables.textColor(default-fg, list.nth($default-combination, 2));
+    // Transparent border by default so the box stays the same size in
+    // every modifier; `.is-outlined` (and its per-combination override
+    // below) reach back in and set a visible `border-color`. Without
+    // this, toggling outlined would shift the layout by 2px.
+    border: 1px solid transparent;
+    padding: $padding-y $padding-x;
+    min-width: $min-width;
+    border-radius: $border-radius;
+    cursor: pointer;
+    // `<a class="button">` would otherwise inherit the bare-link underline.
+    // `.is-link` re-asserts underline via `linkSurface` below.
+    text-decoration: none;
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+    }
+
+    // `filter: brightness()` is preferred over swapping `(bg, fg)` on hover:
+    // brightness scales every channel uniformly so the rest-state contrast
+    // ratio is preserved, which means every shipped combination AND any
+    // consumer-supplied palette stay WCAG AA at hover. A bg/fg swap, by
+    // contrast, lands at whatever ratio the inverted pair happens to have.
+    // Mid-luminance combinations like `.is-primary` and `.is-success` would
+    // drop below 4.5:1.
+    &:hover {
+      filter: brightness($hover-brightness);
+    }
+
+    // Matches the framework convention used by every other interactive
+    // element (text-input, select, switch, …): faded glyph + `cursor:
+    // not-allowed`, and the brightness hover is unset so the button
+    // doesn't visually react under a disabled-pointer.
+    &:disabled {
+      cursor: not-allowed;
+      opacity: $disabled-opacity;
+
+      &:hover {
+        filter: none;
+      }
+    }
+
+    @include variables.combinations using ($label, $tuple) {
+      @include variables.backgroundColor(#{$label}-bg, list.nth($tuple, 1));
+      @include variables.textColor(#{$label}-fg, list.nth($tuple, 2));
+
+      // `.is-inverted` flips the combination onto the page surface:
+      // page bg as the fill, the combination's bg (its "main" colour)
+      // as text. Theme-aware via `--kc-bg` / `--kc-<label>-bg` so light
+      // theme shows e.g. white-bg + green-text on `is-primary`, dark
+      // theme shows dark-bg + themed-green-text. Skipped for `default`
+      // because its bg matches the page bg (the result would be
+      // invisible); the modifier-less branch below handles that case
+      // with a true `(bg, fg)` swap. Border stays at the base rule's
+      // transparent placeholder so the surface is borderless.
+      @if $label != default {
+        &#{$inverted-selector} {
+          @include variables.backgroundColor(
+            bg,
+            list.nth($default-combination, 1),
+          );
+          @include variables.textColor(#{$label}-bg, list.nth($tuple, 1));
+        }
+      }
+
+      // `.is-outlined` keeps the combination's bg as the visible
+      // signature: transparent fill, bg-as-text, bg-as-border. Raw
+      // literals (not the var-aware mixin) match `.is-inverted`'s
+      // legacy-palette stance so contrast stays predictable across
+      // consumer-supplied themes. Skipped for `default` because its bg
+      // is the page bg in light theme — `.button.is-default.is-outlined`
+      // falls through to the modifier-less `&#{$outlined-selector}`
+      // rule below + `.button.is-default`'s themed fg.
+      @if $label != default {
+        &#{$outlined-selector} {
+          background: transparent;
+          color: list.nth($tuple, 1);
+          border: 1px solid list.nth($tuple, 1);
+        }
+      }
+    }
+
+    // Modifier-less inverted/outlined rules sit AFTER the combinations
+    // loop so they out-cascade the `.is-default` combination at equal
+    // specificity (both are two-class selectors). Higher-specificity
+    // `.is-<combo>.is-<modifier>` rules in the loop above still win for
+    // explicit combinations.
+    //
+    // `.button.is-inverted` (and `.is-default.is-inverted`) is a true
+    // `(bg, fg)` swap of the default combination's theme tokens —
+    // `--kc-default-fg` becomes the fill, `--kc-default-bg` becomes
+    // the text. The non-default combinations follow a different rule
+    // (page-bg fill + combo's bg as text); default needs the explicit
+    // swap because its bg matches the page bg, so a page-bg-fill
+    // inversion would render invisible. Border stays transparent
+    // (inherited from the base rule).
+    &#{$inverted-selector} {
+      @include variables.backgroundColor(
+        default-fg,
+        list.nth($default-combination, 2),
+      );
+      @include variables.textColor(
+        default-bg,
+        list.nth($default-combination, 1),
+      );
+    }
+
+    // `.button.is-outlined` strips the fill and re-asserts a visible
+    // themed border. The default button's visible signature is its
+    // themed fg, so the border tracks `--kc-default-fg` here; using
+    // `--kc-default-bg` for the outline would render invisible against
+    // the page in light theme. Per-combination outlined rules above
+    // override `border-color` with the combo's bg.
+    &#{$outlined-selector} {
+      background: transparent;
+      @include variables.defaultProperty(
+        border-color,
+        default-fg,
+        list.nth($default-combination, 2),
+      );
+    }
+
+    // `.button.is-link` styles the button as a link: no fill, no
+    // visible border (kept transparent so layout is preserved when
+    // toggling), themed `--kc-link` text, and `--kc-link-hover` on
+    // hover. The brightness filter is unset so hover transitions
+    // through the link-hover token rather than darkening the
+    // surrounding chrome. Sits after the combinations loop so it
+    // wins over the combination's bg/fg/border at equal specificity
+    // when authors compose `.is-<combo>.is-link` (the link surface
+    // takes priority — combinations have no link-styled variant).
+    &#{$link-selector} {
+      background: transparent;
+      border: 1px solid transparent;
+      @include link.linkSurface(
+        $fallback: list.nth($default-combination, 2),
+        $hover-fallback: list.nth($default-combination, 2),
+      );
+
+      &:hover {
+        filter: none;
+      }
+    }
+
+    // Forced-colors (Windows High Contrast). The `filter: brightness()` hover
+    // is a no-op once colours are system-forced, so press feedback would
+    // disappear. Replace with an explicit Highlight outline on hover; the
+    // focus-visible ring already handles keyboard focus via system colours
+    // (UA forces outline-color to CanvasText). WCAG 1.4.11 / 2.4.7.
+    @media (forced-colors: active) {
+      &:hover {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+      }
+    }
+  }
+}

package/src/element/button/_variables.scss

@@ -0,0 +1,36 @@
+@use "sass:math";
+@use "../../variables";
+
+$selector: "button, .button" !default;
+$inverted-selector: "#{variables.$selector-prefix-is}inverted" !default;
+$outlined-selector: "#{variables.$selector-prefix-is}outlined" !default;
+$link-selector: "#{variables.$selector-prefix-is}link" !default;
+
+@function _touch-target-padding($target, $line-height-rem) {
+  @return math.max(0rem, math.div($target - $line-height-rem, 2));
+}
+
+// Vertical padding is derived so the AAA touch-target invariant is enforced
+// in code, not just a comment. The button has no explicit `font-size`, so it
+// inherits the body size (`1rem` once `$global-base-size` is applied at the
+// root). Effective height = padding-y × 2 + line-height × font-size; setting
+// padding-y to half the slack between the touch-target floor and the
+// rendered line height gives exactly the AAA minimum at default settings:
+// (2.75rem − 1rem × 1.5) / 2 = 0.625rem. Override `$global-min-touch-target`
+// or `$global-body-line-height` and the padding follows.
+$padding-y: _touch-target-padding(
+  variables.$global-min-touch-target,
+  1rem * variables.$global-body-line-height
+) !default;
+$padding-x: variables.$size-normal !default;
+
+$min-width: variables.$global-min-touch-target !default;
+$border-radius: variables.$global-border-radius !default;
+$default-combination: variables.$color-combination-default !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;
+
+$hover-brightness: variables.$global-hover-brightness !default;
+$disabled-opacity: variables.$global-disabled-opacity !default;

package/src/element/checkbox/_index.scss

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

package/src/element/checkbox/_plugin.scss

@@ -0,0 +1,48 @@
+@use "variables" as *;
+@use "../../variables";
+@use "../../helper/controls" as controls;
+
+@if variables.$feature-element-checkbox {
+  #{$selector} {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: inline-block;
+    width: $size;
+    height: $size;
+    margin: 0;
+    padding: 0;
+    @include controls.borderWithMix($border-width, $border-mix);
+    border-radius: $border-radius;
+    background-color: transparent;
+    vertical-align: middle;
+    flex-shrink: 0;
+
+    &:checked {
+      background-color: var(--kc-primary-bg, currentColor);
+      border-color: var(--kc-primary-bg, currentColor);
+      // The SVG strokes with `currentColor`; pinning `color` to the
+      // primary foreground token guarantees the tick contrasts the fill
+      // whatever the theme's primary palette is.
+      color: var(--kc-primary-fg, currentColor);
+      background-image: $check-image;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 80% auto;
+    }
+
+    &:focus-visible {
+      @include controls.focus-ring(
+        $focus-outline-width,
+        $focus-outline-style,
+        $focus-outline-offset,
+      );
+    }
+
+    @include controls.invalidControl();
+
+    &:disabled {
+      @include controls.disabledControl($disabled-opacity);
+    }
+  }
+}

package/src/element/checkbox/_variables.scss

@@ -0,0 +1,24 @@
+@use "../../variables";
+
+// Excludes `.switch`-classed inputs so the switch plugin can fully restyle
+// them. Keep this exclusion in sync if you add another checkbox variant.
+$selector: 'input[type="checkbox"]:not(.switch)' !default;
+
+$size: 1rem !default;
+$border-radius: 3px !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;
+
+// Inline tick mark using `stroke="currentColor"`: the SVG inherits the
+// element's `color`, which the plugin pins to `--kc-primary-fg` on
+// `:checked`. That keeps the tick AAA-readable against any primary-bg
+// the theme picks (deep sage, mid-tone teal, a high-contrast cyan):
+// the fg token is always the contrast pair of the bg token.
+$check-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5l2.5 2.5 4.5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+  !default;

package/src/element/file/_index.scss

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