@leftium/nimble.css 0.1.0

package/src/_buttons.scss

@@ -0,0 +1,123 @@
+// ==========================================================================
+// nimble.css — Buttons
+// Spec §9.2: button base, .secondary, .outline, button groups, disabled
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  // ----- Base button -----
+
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    --_btn-padding-v: 0.5em;
+    --_btn-padding-h: 1em;
+
+    padding: var(--_btn-padding-v) var(--_btn-padding-h);
+    background-color: var(#{$prefix}primary);
+    color: var(#{$prefix}primary-contrast);
+    border: 1px solid var(#{$prefix}primary);
+    border-radius: var(#{$prefix}radius);
+    font: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    margin: 0 0.25em 0.25em 0;
+    transition: background-color 0.2s, border-color 0.2s;
+  }
+
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):hover {
+    background-color: var(#{$prefix}primary-hover);
+    border-color: var(#{$prefix}primary-hover);
+  }
+
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):focus-visible {
+    box-shadow: 0 0 0 2px var(#{$prefix}primary-focus);
+    outline: none;
+  }
+
+  // ----- Disabled -----
+
+  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // ----- Button groups -----
+  // Note: children use [role="group"] without :where() so they beat
+  // the zero-specificity form input rules for border-radius.
+
+  :where([role="group"]) {
+    display: inline-flex;
+  }
+
+  [role="group"] > * {
+    border-radius: 0;
+    margin: 0;
+  }
+
+  [role="group"] > * + * {
+    box-shadow: -1px 0 0 rgb(255 255 255 / 0.3);
+  }
+
+  [role="group"] > :first-child {
+    border-start-start-radius: var(#{$prefix}radius);
+    border-end-start-radius: var(#{$prefix}radius);
+  }
+
+  [role="group"] > :last-child {
+    border-start-end-radius: var(#{$prefix}radius);
+    border-end-end-radius: var(#{$prefix}radius);
+  }
+
+  // ----- Search groups (pill shape) -----
+
+  [role="search"] [role="group"] > :first-child {
+    border-start-start-radius: 5rem;
+    border-end-start-radius: 5rem;
+    padding-inline-start: 1.25em;
+  }
+
+  [role="search"] [role="group"] > :last-child {
+    border-start-end-radius: 5rem;
+    border-end-end-radius: 5rem;
+    padding-inline-end: 1.25em;
+  }
+
+}
+
+// ----- Variants (utility classes) -----
+
+@layer nimble.utilities {
+
+  .secondary {
+    background-color: var(#{$prefix}secondary);
+    border-color: var(#{$prefix}secondary);
+    color: var(#{$prefix}secondary-contrast);
+  }
+
+  .secondary:hover {
+    background-color: var(#{$prefix}secondary-hover);
+    border-color: var(#{$prefix}secondary-hover);
+  }
+
+  .secondary:focus-visible {
+    box-shadow: 0 0 0 2px var(#{$prefix}secondary-focus);
+  }
+
+  .outline {
+    background-color: transparent;
+    color: var(#{$prefix}primary);
+  }
+
+  .outline:hover {
+    background-color: var(#{$prefix}primary-focus);
+    color: var(#{$prefix}primary-hover);
+    border-color: var(#{$prefix}primary-hover);
+  }
+
+}

package/src/_code.scss

@@ -0,0 +1,37 @@
+// ==========================================================================
+// nimble.css — Code
+// Spec §9.5: pre, code, kbd, samp
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  :where(code, kbd, samp) {
+    font-family: var(#{$prefix}font-mono);
+    font-size: 0.875em;
+    background-color: var(#{$prefix}surface-2);
+    border-radius: var(#{$prefix}radius);
+    padding: 0.15em 0.35em;
+  }
+
+  :where(pre) {
+    background-color: var(#{$prefix}surface-2);
+    border-radius: var(#{$prefix}radius);
+    padding: var(#{$prefix}spacing);
+    overflow-x: auto;
+  }
+
+  // Reset nested code inside pre
+  :where(pre code) {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  :where(kbd) {
+    border: 1px solid var(#{$prefix}border);
+    border-bottom-width: 2px;
+  }
+
+}

package/src/_colors.scss

@@ -0,0 +1,124 @@
+// ==========================================================================
+// nimble.css — Color System
+// oklch surfaces + primary/secondary/feedback via light-dark()
+// All public properties use $prefix; internals use --_
+//
+// Note: oklch() values are emitted as raw CSS strings to prevent Sass from
+// interpreting them as Sass color functions. We use unquote() wrappers.
+// ==========================================================================
+
+@use 'sass:math';
+@use 'sass:string';
+@use 'config' as *;
+
+// Helper: build an oklch() string that Sass passes through as-is
+@function _oklch($l, $c, $h, $alpha: null) {
+  @if $alpha {
+    @return string.unquote('oklch(#{$l} #{$c} #{$h} / #{$alpha})');
+  }
+  @return string.unquote('oklch(#{$l} #{$c} #{$h})');
+}
+
+// Helper: build a light-dark() string
+@function _light-dark($light, $dark) {
+  @return string.unquote('light-dark(#{$light}, #{$dark})');
+}
+
+@layer nimble.base {
+
+  :root {
+    color-scheme: light dark;
+
+    // ----- Surfaces -----
+    // Surface 1: page background (base lightness)
+    #{$prefix}surface-1: #{_light-dark(
+      _oklch($surface-light-base, $surface-chroma, $surface-hue),
+      _oklch($surface-dark-base, $surface-chroma + $surface-dark-chroma-boost, $surface-hue + $surface-dark-hue-shift)
+    )};
+
+    // Surface 2-4: generated from offsets
+    @each $level, $offset in $surface-offsets {
+      #{$prefix}surface-#{$level}: #{_light-dark(
+        _oklch($surface-light-base - $offset, $surface-chroma, $surface-hue),
+        _oklch($surface-dark-base + $offset, $surface-chroma + $surface-dark-chroma-boost, $surface-hue + $surface-dark-hue-shift)
+      )};
+    }
+
+    // ----- Text -----
+    #{$prefix}text-1: #{_light-dark(
+      _oklch(0.280, 0.005, $surface-hue),
+      _oklch(0.860, 0.005, $surface-hue)
+    )};
+    #{$prefix}text-2: #{_light-dark(
+      _oklch(0.580, 0.005, $surface-hue),
+      _oklch(0.650, 0.005, $surface-hue)
+    )};
+
+    // ----- Border -----
+    #{$prefix}border: #{_light-dark(
+      _oklch(0.830, 0.005, $surface-hue),
+      _oklch(0.280, 0.005, $surface-hue + $surface-dark-hue-shift)
+    )};
+
+    // ----- Primary (main accent) -----
+    #{$prefix}primary: #{_light-dark(
+      _oklch($primary-lightness, $primary-chroma, $primary-hue),
+      _oklch($primary-lightness + 0.1, $primary-chroma, $primary-hue)
+    )};
+    #{$prefix}primary-hover: #{_light-dark(
+      _oklch($primary-lightness - 0.1, $primary-chroma, $primary-hue),
+      _oklch($primary-lightness + 0.2, $primary-chroma, $primary-hue)
+    )};
+    #{$prefix}primary-focus: #{_oklch($primary-lightness, $primary-chroma, $primary-hue, 0.4)};
+    #{$prefix}primary-contrast: #{_light-dark(
+      '#fff',
+      _oklch(0.15, 0.005, $surface-hue)
+    )};
+
+    // ----- Secondary (neutral accent) -----
+    #{$prefix}secondary: #{_light-dark(
+      _oklch($secondary-lightness, $secondary-chroma, $secondary-hue),
+      _oklch($secondary-lightness + 0.15, $secondary-chroma, $secondary-hue)
+    )};
+    #{$prefix}secondary-hover: #{_light-dark(
+      _oklch($secondary-lightness - 0.1, $secondary-chroma, $secondary-hue),
+      _oklch($secondary-lightness + 0.25, $secondary-chroma, $secondary-hue)
+    )};
+    #{$prefix}secondary-focus: #{_oklch($secondary-lightness, $secondary-chroma, $secondary-hue, 0.3)};
+    #{$prefix}secondary-contrast: #{_light-dark(
+      '#fff',
+      _oklch(0.15, 0.005, $surface-hue)
+    )};
+
+    // ----- Feedback -----
+    #{$prefix}valid: #{_light-dark(
+      _oklch(0.52, 0.17, 145),
+      _oklch(0.65, 0.2, 145)
+    )};
+    #{$prefix}invalid: #{_light-dark(
+      _oklch(0.55, 0.22, 25),
+      _oklch(0.65, 0.22, 25)
+    )};
+
+    // ----- Typography -----
+    #{$prefix}font-sans: #{$font-sans};
+    #{$prefix}font-mono: #{$font-mono};
+
+    // ----- Spacing & Layout -----
+    #{$prefix}spacing: #{$spacing};
+    #{$prefix}radius: #{$radius};
+    #{$prefix}content-width: #{$content-width};
+  }
+
+  // ----- Manual theme override -----
+  // Setting color-scheme forces light-dark() to resolve to the chosen mode
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+}

package/src/_config.scss

@@ -0,0 +1,53 @@
+// ==========================================================================
+// nimble.css — Configuration
+// All values use !default so they can be overridden via @use ... with (...)
+// ==========================================================================
+
+// --- Prefix ---
+// Must include leading `--` and trailing `-` (e.g., '--nc-', '--my-')
+$prefix: '--nc-' !default;
+
+// --- Feature flags ---
+$enable-utilities: true !default;
+$enable-dialog: true !default;
+$enable-switch: true !default;
+$enable-details: true !default;
+
+// --- Colors (oklch parameters) ---
+
+// Primary (main accent: links, primary buttons, focus rings, checkboxes)
+$primary-hue: 250 !default;
+$primary-chroma: 0.2 !default;
+$primary-lightness: 0.50 !default;
+
+// Secondary (neutral accent: secondary buttons, reset buttons)
+$secondary-hue: 250 !default;
+$secondary-chroma: 0.05 !default;
+$secondary-lightness: 0.45 !default;
+
+// Surface (background hierarchy)
+$surface-hue: 250 !default;
+$surface-chroma: 0.002 !default;
+$surface-light-base: 0.985 !default;
+$surface-dark-base: 0.170 !default;
+
+// Lightness offsets for each surface level (relative to base)
+$surface-offsets: (2: 0.03, 3: 0.06, 4: 0.10) !default;
+
+// Dark mode chroma/hue adjustments for surfaces
+$surface-dark-chroma-boost: 0.003 !default;
+$surface-dark-hue-shift: 10 !default;
+
+// --- Typography ---
+$font-sans: system-ui, sans-serif !default;
+$font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',
+            Menlo, Consolas, 'DejaVu Sans Mono', monospace !default;
+
+// --- Spacing & Layout ---
+$spacing: 1rem !default;
+$radius: 0.25rem !default;
+$content-width: 720px !default;
+$wide-width: 1200px !default;
+
+// --- Breakpoints ---
+$breakpoint-phone: 720px !default;

package/src/_details.scss

@@ -0,0 +1,29 @@
+// ==========================================================================
+// nimble.css — Details / Summary
+// Spec §9.7 — behind $enable-details flag
+// ==========================================================================
+
+@use 'config' as *;
+
+@if $enable-details {
+
+  @layer nimble.base {
+
+    :where(details) {
+      border: 1px solid var(#{$prefix}border);
+      border-radius: var(#{$prefix}radius);
+      padding: 0.75em 1em;
+    }
+
+    :where(summary) {
+      cursor: pointer;
+      font-weight: 600;
+    }
+
+    :where(details[open] > summary) {
+      margin-bottom: 0.5em;
+    }
+
+  }
+
+}

package/src/_dialog.scss

@@ -0,0 +1,26 @@
+// ==========================================================================
+// nimble.css — Dialog
+// Spec §9.11 — behind $enable-dialog flag
+// ==========================================================================
+
+@use 'config' as *;
+
+@if $enable-dialog {
+
+  @layer nimble.base {
+
+    :where(dialog) {
+      background-color: var(#{$prefix}surface-4);
+      border: 1px solid var(#{$prefix}border);
+      border-radius: var(#{$prefix}radius);
+      max-width: min(90vw, 40rem);
+      padding: var(#{$prefix}spacing);
+    }
+
+    :where(dialog::backdrop) {
+      background: rgb(0 0 0 / 0.5);
+    }
+
+  }
+
+}

package/src/_document.scss

@@ -0,0 +1,41 @@
+// ==========================================================================
+// nimble.css — Document
+// html, body (grid centering), ::selection
+// ==========================================================================
+
+@use 'sass:string';
+@use 'config' as *;
+
+@layer nimble.base {
+
+  html {
+    font-family: var(#{$prefix}font-sans);
+    font-size: 100%;    // = 16px in most browsers
+    line-height: 1.5;
+    color: var(#{$prefix}text-1);
+    background-color: var(#{$prefix}surface-1);
+  }
+
+  // Grid centering: content sits in the middle column,
+  // full-bleed elements can span 1 / -1.
+  // See spec §7.1
+  body {
+    display: grid;
+    grid-template-columns:
+      1fr
+      min(var(#{$prefix}content-width), #{string.unquote('calc(100% - 2 * var(#{$prefix}spacing))')})
+      1fr;
+    min-height: 100dvh;
+  }
+
+  body > * {
+    grid-column: 2;
+  }
+
+  // Selection styling using primary accent
+  ::selection {
+    background-color: var(#{$prefix}primary-focus);
+    color: var(#{$prefix}text-1);
+  }
+
+}

package/src/_forms.scss

@@ -0,0 +1,130 @@
+// ==========================================================================
+// nimble.css — Forms
+// Spec §9.3: inputs, select, textarea, labels, fieldset, validation, switch
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  // ----- Text inputs, select, textarea -----
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
+         select, textarea) {
+    --_input-bg: color-mix(in oklch, var(#{$prefix}surface-1), var(#{$prefix}surface-2) 20%);
+
+    padding: 0.5em 0.75em;
+    background-color: var(--_input-bg);
+    border: 1px solid var(#{$prefix}border);
+    border-radius: var(#{$prefix}radius);
+    color: var(#{$prefix}text-1);
+    font: inherit;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  // Make text inputs and select full-width by default (PicoCSS pattern)
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]),
+         select, textarea) {
+    width: 100%;
+  }
+
+  // ----- Focus -----
+
+  :where(input, select, textarea):focus-visible {
+    border-color: var(#{$prefix}primary);
+    box-shadow: 0 0 0 2px var(#{$prefix}primary-focus);
+    outline: none;
+  }
+
+  // ----- Validation states (aria-invalid) -----
+
+  :where(input, select, textarea)[aria-invalid="false"] {
+    border-color: var(#{$prefix}valid);
+  }
+
+  :where(input, select, textarea)[aria-invalid="true"] {
+    border-color: var(#{$prefix}invalid);
+  }
+
+  // ----- Labels -----
+
+  :where(label) {
+    display: block;
+    margin-bottom: 0.25em;
+  }
+
+  :where(label:has(+ input, + select, + textarea)) {
+    font-weight: 600;
+  }
+
+  // ----- Fieldset -----
+
+  :where(fieldset) {
+    border: 1px solid var(#{$prefix}border);
+    border-radius: var(#{$prefix}radius);
+    padding: var(#{$prefix}spacing);
+  }
+
+  :where(legend) {
+    font-weight: 600;
+    padding-inline: 0.25em;
+  }
+
+  // ----- Checkbox & Radio -----
+  // Use accent-color to tint native controls to match the primary color
+
+  :where([type="checkbox"], [type="radio"]) {
+    accent-color: var(#{$prefix}primary);
+  }
+
+  // ----- Range -----
+
+  :where([type="range"]) {
+    accent-color: var(#{$prefix}primary);
+    width: 100%;
+  }
+
+  // ----- Color -----
+
+  :where([type="color"]) {
+    cursor: pointer;
+  }
+
+  // ----- Switch (checkbox with role="switch") -----
+
+  @if $enable-switch {
+    // Minimal switch styling — relies on native checkbox with role="switch"
+    // Browsers with :has() support get enhanced label alignment
+    :where([type="checkbox"][role="switch"]) {
+      appearance: none;
+      width: 2.5em;
+      height: 1.25em;
+      border-radius: 1em;
+      background-color: var(#{$prefix}border);
+      position: relative;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    :where([type="checkbox"][role="switch"])::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(1.25em - 4px);
+      height: calc(1.25em - 4px);
+      border-radius: 50%;
+      background-color: #fff;
+      transition: transform 0.2s;
+    }
+
+    :where([type="checkbox"][role="switch"]):checked {
+      background-color: var(#{$prefix}primary);
+    }
+
+    :where([type="checkbox"][role="switch"]):checked::before {
+      transform: translateX(1.25em);
+    }
+  }
+
+}

package/src/_layers-base.scss

@@ -0,0 +1 @@
+@layer nimble.reset, nimble.base;

package/src/_layers-reset.scss

@@ -0,0 +1 @@
+@layer nimble.reset;

package/src/_layers-utilities.scss

@@ -0,0 +1 @@
+@layer nimble.utilities;

package/src/_layers.scss

@@ -0,0 +1,6 @@
+// ==========================================================================
+// nimble.css — Layer Order Declaration
+// Must be the first CSS output to establish cascade priority
+// ==========================================================================
+
+@layer nimble.reset, nimble.base, nimble.utilities;

package/src/_links.scss

@@ -0,0 +1,29 @@
+// ==========================================================================
+// nimble.css — Links
+// Spec §9.1
+// ==========================================================================
+
+@use 'sass:string';
+@use 'config' as *;
+
+@layer nimble.base {
+
+  :where(a:not([role="button"])) {
+    color: var(#{$prefix}primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary), transparent 50%)')};
+    transition: color 0.2s, text-decoration-color 0.2s;
+  }
+
+  :where(a:not([role="button"])):visited {
+    color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.5 0.2 310))')};
+    text-decoration-color: #{string.unquote('color-mix(in oklch, var(#{$prefix}primary) 40%, oklch(0.5 0.2 310) 30%)')};
+  }
+
+  :where(a:not([role="button"])):hover {
+    color: var(#{$prefix}primary-hover);
+    text-decoration-color: var(#{$prefix}primary-hover);
+  }
+
+}

package/src/_media.scss

@@ -0,0 +1,26 @@
+// ==========================================================================
+// nimble.css — Media
+// Spec §9.8: img, video, canvas, svg, figure, figcaption
+// Note: No dark-mode opacity reduction (ruins images)
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  :where(img, video, canvas, svg) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :where(figure) {
+    margin: 0;
+  }
+
+  :where(figcaption) {
+    font-size: 0.9em;
+    color: var(#{$prefix}text-2);
+    margin-top: 0.5em;
+  }
+
+}

package/src/_print.scss

@@ -0,0 +1,41 @@
+// ==========================================================================
+// nimble.css — Print Styles
+// Spec §9.12
+// Not inside any layer — print overrides everything
+// ==========================================================================
+
+@media print {
+
+  body {
+    background: #fff;
+    color: #000;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    color: #555;
+  }
+
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: none;
+  }
+
+  pre, blockquote {
+    page-break-inside: avoid;
+  }
+
+  h2, h3, h4 {
+    page-break-after: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 2cm;
+  }
+
+}