@leftium/nimble.css 0.1.0 → 0.2.0

package/src/_select.scss

@@ -0,0 +1,64 @@
+// ==========================================================================
+// nimble.css — Customizable Select
+// Optional: styled <select> using appearance: base-select (progressive enhancement)
+// Falls back to classic <select> in unsupported browsers
+// ==========================================================================
+
+@use 'config' as *;
+
+@layer nimble.base {
+
+  @supports (appearance: base-select) {
+    :where(select),
+    :where(select)::picker(select) {
+      appearance: base-select;
+    }
+
+    // Picker icon (chevron)
+    :where(select)::picker-icon {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");
+      transition: rotate 0.4s;
+    }
+
+    :where(select):open::picker-icon {
+      rotate: 180deg;
+    }
+
+    // Drop-down picker
+    :where(select)::picker(select) {
+      border: 1px solid var(#{$prefix}border);
+      border-radius: var(#{$prefix}radius);
+      background-color: var(#{$prefix}surface-1);
+      padding: 0.25em;
+      // Fade in/out animation
+      opacity: 0;
+      transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+    }
+
+    :where(select):open::picker(select) {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :where(select):open::picker(select) {
+        opacity: 0;
+      }
+    }
+
+    // Options inside the picker
+    :where(select) option {
+      padding: 0.5em 0.75em;
+      border-radius: var(#{$prefix}radius);
+      transition: background-color 0.15s;
+    }
+
+    :where(select) option:hover {
+      background-color: var(#{$prefix}surface-2);
+    }
+
+    :where(select) option:checked {
+      font-weight: 600;
+    }
+  }
+
+}

package/src/_typography.scss

@@ -7,15 +7,18 @@
 @use 'sass:string';
 @use 'config' as *;
 
-// Heading scale: size and line-height
+// Heading scale: size, line-height, and top margin
+// h1 has no top margin (page title / first heading).
+// h2–h6 always carry top margin so they breathe above any preceding content,
+// regardless of DOM nesting (first-child of section, etc.).
 // 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),
+  h1: (size: 2rem,     lh: 1.1,  mt: 0),
+  h2: (size: 1.75rem,  lh: 1.15, mt: 2rem),
+  h3: (size: 1.5rem,   lh: 1.2,  mt: 1.5rem),
+  h4: (size: 1.25rem,  lh: 1.3,  mt: 1.5rem),
+  h5: (size: 1.125rem, lh: 1.4,  mt: 1.5rem),
+  h6: (size: 1rem,     lh: 1.5,  mt: 1.5rem),
 );
 
 // Phone breakpoint heading overrides
@@ -34,7 +37,7 @@ $_heading-phone: (
     #{$tag} {
       font-size: map.get($vals, size);
       line-height: map.get($vals, lh);
-      margin-top: 0;
+      margin-top: map.get($vals, mt);
       margin-bottom: var(#{$prefix}spacing);
       font-weight: 700;
       text-wrap: balance;
@@ -59,10 +62,7 @@ $_heading-phone: (
     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 -----
 
@@ -103,7 +103,7 @@ $_heading-phone: (
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(#{$prefix}text-2);
+    color: color-mix(in oklch, var(#{$prefix}text), transparent 40%);
   }
 
   // ----- Horizontal Rule -----

package/src/nimble-base.scss

@@ -1,11 +1,10 @@
 // ==========================================================================
 // nimble.css — Base Sub-bundle
-// Reset + colors + document + typography — the classless core
+// Colors + document + typography (no reset — use nimble-reset for that)
 // ==========================================================================
 
 @use 'config' as *;
 @use 'layers-base';
-@use 'reset';
 @use 'colors';
 @use 'document';
 @use 'typography';

package/src/nimble-core.scss

@@ -0,0 +1,30 @@
+// ==========================================================================
+// nimble.css — Core Entry Point
+// Everything except progress, meter, and select add-ons
+// ==========================================================================
+
+@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';

package/src/nimble-meter.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Meter Sub-bundle
+// Add to nimble.css for styled <meter> elements
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'meter';

package/src/nimble-progress.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Progress Sub-bundle
+// Add to nimble.css for styled <progress> elements
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'progress';

package/src/nimble-select.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// nimble.css — Customizable Select Sub-bundle
+// Add to nimble.css for styled <select> using appearance: base-select
+// ==========================================================================
+
+@use 'config' as *;
+@use 'layers-base';
+@use 'select';

package/src/nimble.scss

@@ -1,6 +1,6 @@
 // ==========================================================================
 // nimble.css — Entry Point
-// A minimal class/classless CSS library
+// Everything: core + progress, meter, and select
 // ==========================================================================
 
 @use 'config' as *;
@@ -26,5 +26,10 @@
 @use 'dialog';
 @use 'print';
 
+// Phase 3: Optional extras
+@use 'progress';
+@use 'meter';
+@use 'select';
+
 // Phase 4: Utilities
 @use 'utilities';