@leftium/nimble.css 0.1.0

package/src/_reset.scss

@@ -0,0 +1,183 @@
+// ==========================================================================
+// nimble.css — Reset
+// Trimmed sanitize.css (v13.0.0) wrapped in @layer nimble.reset
+// All selectors use :where() for zero specificity (spec §3.2)
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.reset {
+
+  // --- Document ---
+
+  :where(*),
+  :where(*::before),
+  :where(*::after) {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+
+  :where(html) {
+    // Correct the line height in all browsers
+    line-height: 1.5;
+    // Prevent adjustments of font size after orientation changes in iOS
+    -webkit-text-size-adjust: 100%;
+    // Use a better default tab size
+    tab-size: 4;
+  }
+
+  :where(body) {
+    margin: 0;
+  }
+
+  // --- Sections ---
+
+  :where(h1) {
+    font-size: 2em;
+    margin-block: 0.67em;
+  }
+
+  // --- Grouping content ---
+
+  :where(hr) {
+    height: 0;
+    color: inherit; // Correct hr color in Firefox
+  }
+
+  :where(nav) :where(ol, ul) {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  :where(pre) {
+    font-family: monospace, monospace; // Correct font sizing
+    font-size: 1em;
+  }
+
+  // --- Text-level semantics ---
+
+  :where(abbr[title]) {
+    text-decoration: underline dotted;
+  }
+
+  :where(b, strong) {
+    font-weight: bolder;
+  }
+
+  :where(code, kbd, samp) {
+    font-family: monospace, monospace; // Correct font sizing
+    font-size: 1em;
+  }
+
+  :where(small) {
+    font-size: 80%;
+  }
+
+  :where(sub, sup) {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  :where(sub) {
+    bottom: -0.25em;
+  }
+
+  :where(sup) {
+    top: -0.5em;
+  }
+
+  // --- Embedded content ---
+
+  :where(iframe) {
+    border-style: none;
+  }
+
+  // --- Tabular data ---
+
+  :where(table) {
+    border-collapse: collapse;
+    border-color: currentColor; // Correct border-color in Chrome/Edge/Safari
+    text-indent: 0;             // Remove text indentation in Chrome/Edge/Safari
+  }
+
+  // --- Forms ---
+
+  :where(button, input, select, textarea) {
+    font: inherit; // Use the same font as the document
+    letter-spacing: inherit;
+  }
+
+  :where(button, [type="button"], [type="reset"], [type="submit"]) {
+    -webkit-appearance: button; // Correct clickable type in iOS/Safari
+  }
+
+  :where(fieldset) {
+    border: 1px solid #a0a0a0;
+  }
+
+  :where(progress) {
+    vertical-align: baseline;
+  }
+
+  :where(textarea) {
+    resize: vertical; // Only vertical resize by default
+    overflow: auto;   // Remove default scrollbar in IE
+  }
+
+  :where([type="search"]) {
+    -webkit-appearance: textfield;  // Correct appearance in Chrome/Safari
+    outline-offset: -2px;
+  }
+
+  :where(::-webkit-search-decoration) {
+    -webkit-appearance: none; // Remove inner padding in Chrome/Safari on macOS
+  }
+
+  :where(::-webkit-inner-spin-button),
+  :where(::-webkit-outer-spin-button) {
+    height: auto; // Correct height in Chrome
+  }
+
+  :where(::-webkit-file-upload-button) {
+    -webkit-appearance: button; // Correct clickable type in iOS/Safari
+    font: inherit;
+  }
+
+  // --- Interactive ---
+
+  :where(summary) {
+    display: list-item; // Correct display in Chrome
+  }
+
+  // --- Accessibility ---
+
+  // Remove delay from tapping on clickable elements
+  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
+    touch-action: manipulation;
+  }
+
+  // Change the cursor for busy elements
+  :where([aria-busy="true"]) {
+    cursor: progress;
+  }
+
+  // Change the cursor for disabled/not-editable elements
+  :where([aria-disabled="true"], [disabled]) {
+    cursor: not-allowed;
+  }
+
+  // Remove animations/transitions for users who prefer reduced motion
+  @media (prefers-reduced-motion: reduce) {
+    :where(*),
+    :where(*::before),
+    :where(*::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+}

package/src/_tables.scss

@@ -0,0 +1,34 @@
+// ==========================================================================
+// nimble.css — Tables
+// Spec §9.4
+// ==========================================================================
+
+@use 'sass:string';
+@use 'config' as *;
+
+@layer nimble.base {
+
+  :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  :where(th, td) {
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid #{string.unquote('color-mix(in oklch, var(#{$prefix}border), transparent 40%)')};
+    text-align: start;
+  }
+
+  :where(thead th, thead td) {
+    font-weight: 600;
+    border-bottom-width: 2px;
+    background-color: var(#{$prefix}surface-2);
+    text-wrap: balance;
+  }
+
+  // Responsive tables: horizontal scroll when inside figure
+  :where(figure:has(table)) {
+    overflow-x: auto;
+  }
+
+}

package/src/_typography.scss

@@ -0,0 +1,135 @@
+// ==========================================================================
+// nimble.css — Typography
+// Headings, vertical rhythm, blockquote, hr, mark, lists
+// ==========================================================================
+
+@use 'sass:map';
+@use 'sass:string';
+@use 'config' as *;
+
+// Heading scale: size and line-height
+// Spec §8.3
+$_heading-scale: (
+  h1: (size: 2rem,     lh: 1.1),
+  h2: (size: 1.75rem,  lh: 1.15),
+  h3: (size: 1.5rem,   lh: 1.2),
+  h4: (size: 1.25rem,  lh: 1.3),
+  h5: (size: 1.125rem, lh: 1.4),
+  h6: (size: 1rem,     lh: 1.5),
+);
+
+// Phone breakpoint heading overrides
+// Spec §8.3
+$_heading-phone: (
+  h1: 1.75rem,
+  h2: 1.5rem,
+  h3: 1.3rem,
+);
+
+@layer nimble.base {
+
+  // ----- Headings -----
+
+  @each $tag, $vals in $_heading-scale {
+    #{$tag} {
+      font-size: map.get($vals, size);
+      line-height: map.get($vals, lh);
+      margin-top: 0;
+      margin-bottom: var(#{$prefix}spacing);
+      font-weight: 700;
+      text-wrap: balance;
+    }
+  }
+
+  // Phone breakpoint: scale down h1-h3
+  @media (max-width: #{$breakpoint-phone}) {
+    @each $tag, $size in $_heading-phone {
+      #{$tag} {
+        font-size: #{$size};
+      }
+    }
+  }
+
+  // ----- Vertical rhythm -----
+  // Block elements: no top margin, consistent bottom margin
+  // Spec §8.4
+
+  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
+    margin-top: 0;
+    margin-bottom: var(#{$prefix}spacing);
+  }
+
+  // Extra top margin on headings that follow block content
+  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: calc(var(#{$prefix}spacing) * 2);
+  }
+
+  // ----- Lists -----
+
+  ul, ol {
+    padding-inline-start: 1.5em;
+  }
+
+  li {
+    margin-bottom: 0.25em;
+  }
+
+  // Remove bottom margin on nested lists
+  :where(li) > :where(ul, ol) {
+    margin-bottom: 0;
+  }
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd {
+    margin-inline-start: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  // ----- Blockquote -----
+  // Spec §9.6
+
+  blockquote {
+    margin-block: var(#{$prefix}spacing);
+    margin-inline: 0;
+    padding: 0.25em var(#{$prefix}spacing);
+    border-inline-start: 0.25rem solid var(#{$prefix}border);
+    font-style: italic;
+  }
+
+  :where(blockquote) footer,
+  :where(blockquote) cite {
+    font-style: normal;
+    font-size: 0.9em;
+    color: var(#{$prefix}text-2);
+  }
+
+  // ----- Horizontal Rule -----
+  // Spec §9.9
+
+  hr {
+    border: none;
+    height: 1px;
+    background-color: color-mix(in oklch, var(#{$prefix}border), transparent 40%);
+    margin: calc(var(#{$prefix}spacing) * 2) 0;
+  }
+
+  // ----- Mark -----
+  // Spec §9.10
+
+  mark {
+    padding: 0.1em 0.25em;
+    background-color: #{string.unquote('light-dark(#fde68a, oklch(0.55 0.12 85))')};
+    color: #{string.unquote('light-dark(inherit, oklch(0.95 0.01 85))')};
+    border-radius: 2px;
+  }
+
+  // ----- Address -----
+
+  address {
+    font-style: normal;
+  }
+
+}

package/src/_utilities.scss

@@ -0,0 +1,73 @@
+// ==========================================================================
+// nimble.css — Utilities
+// Spec §10: .container, .fluid, .full-bleed, .wide, .striped,
+//           .visually-hidden, .overflow-auto
+// ==========================================================================
+
+@use 'sass:string';
+@use 'config' as *;
+
+@if $enable-utilities {
+
+  @layer nimble.utilities {
+
+    // ----- Layout -----
+
+    // Centered content container (useful inside fluid layout)
+    .container {
+      max-width: var(#{$prefix}content-width);
+      margin-inline: auto;
+      padding-inline: var(#{$prefix}spacing);
+    }
+
+    // Full viewport width with padding (opt-in on body or wrapper)
+    .fluid {
+      display: block;
+      max-width: none;
+      padding-inline: var(#{$prefix}spacing);
+    }
+
+    // Break out of centered container to full width
+    .full-bleed {
+      grid-column: 1 / -1;
+    }
+
+    // Break out to wide max-width
+    .wide {
+      grid-column: 1 / -1;
+      width: 100%;
+      max-width: #{$wide-width};
+      margin-inline: auto;
+      padding-inline: var(#{$prefix}spacing);
+    }
+
+    // ----- Tables -----
+
+    // Striped table rows
+    .striped :where(tbody tr:nth-child(even)) {
+      background-color: var(#{$prefix}surface-2);
+    }
+
+    // ----- Visibility -----
+
+    // Accessible hidden (screen readers only)
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    // Scrollable container
+    .overflow-auto {
+      overflow: auto;
+    }
+
+  }
+
+}

package/src/nimble-base.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// nimble.css — Base Sub-bundle
+// Reset + colors + document + typography — the classless core
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'reset';
+@use 'colors';
+@use 'document';
+@use 'typography';

package/src/nimble-reset.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Reset Sub-bundle
+// Standalone modern CSS reset
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-reset';
+@use 'reset';

package/src/nimble-utilities.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Utilities Sub-bundle
+// Standalone utility classes (requires colors to be loaded separately)
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-utilities';
+@use 'utilities';

package/src/nimble.scss

@@ -0,0 +1,30 @@
+// ==========================================================================
+// nimble.css — Entry Point
+// A minimal class/classless CSS library
+// ==========================================================================
+
+@use 'config' as *;
+
+// Layer order declaration — emitted first in CSS output.
+// Lower layers lose to higher layers in cascade.
+@use 'layers';
+
+// Phase 2: Core
+@use 'reset';
+@use 'colors';
+@use 'document';
+@use 'typography';
+
+// Phase 3: Elements
+@use 'links';
+@use 'buttons';
+@use 'forms';
+@use 'tables';
+@use 'code';
+@use 'media';
+@use 'details';
+@use 'dialog';
+@use 'print';
+
+// Phase 4: Utilities
+@use 'utilities';