Framework v1.3.9: default Charcoal neutral and Ubuntu font

README.md

@@ -21,7 +21,8 @@ Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS,
 - Pure CSS/JS with no runtime dependencies
 - Modular architecture with optional per-component imports
 - 47+ components, including Expanding Cards and animated Timeline controls in v1.3.8
-- Niche canvas hex-grid support is distributed as `@vanduo-oss/hex-grid`
+- Current Theme Customizer defaults in this worktree are `charcoal` for neutral color and `ubuntu` for font family
+- Niche canvas hex-grid support is distributed as [`@vanduo-oss/hex-grid`](https://www.npmjs.com/package/@vanduo-oss/hex-grid)
 - Built-in dark/light/system theme switching
 - Runtime Theme Customizer for color, font, and radius tokens
 - Accessibility-focused components and utilities

css/components/collapsible.css

@@ -75,6 +75,8 @@
   user-select: none;
   transition: var(--transition-bg);
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
   text-align: left;
   font-family: var(--font-family-sans);
@@ -88,7 +90,9 @@
   background-color: var(--collapsible-header-bg-hover);
 }
 
+.vd-collapsible-header:focus,
 .vd-collapsible-header:focus-visible,
+.accordion-header:focus,
 .accordion-header:focus-visible {
   outline: none;
 }
@@ -122,11 +126,15 @@
   text-decoration: none;
   background: none;
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   padding: 0;
   cursor: pointer;
 }
 
+.vd-collapsible-trigger:focus,
 .vd-collapsible-trigger:focus-visible,
+.accordion-trigger:focus,
 .accordion-trigger:focus-visible {
   outline: none;
 }

css/core/colors.css

@@ -312,6 +312,18 @@
   --slate-8: #1e293b;
   --slate-9: #0f172a;
 
+  /* --- Charcoal Scale (Deep cool charcoal) --- */
+  --charcoal-0: #f6f8fa;
+  --charcoal-1: #eaeef2;
+  --charcoal-2: #d0d7de;
+  --charcoal-3: #afb8c1;
+  --charcoal-4: #8c959f;
+  --charcoal-5: #6e7781;
+  --charcoal-6: #57606a;
+  --charcoal-7: #424a53;
+  --charcoal-8: #2d333b;
+  --charcoal-9: #24292f;
+
   /* --- Zinc Scale (Slightly warm gray) --- */
   --zinc-0: #fafafa;
   --zinc-1: #f4f4f5;
@@ -946,7 +958,21 @@
  * These rules remap --gray-* variables based on [data-neutral] attribute
  * ═════════════════════════════════════════════════════════════════════════ */
 
-/* Gray Neutral (default - no override needed) */
+/* Charcoal Neutral (default) */
+[data-neutral="charcoal"] {
+  --gray-0: var(--charcoal-0);
+  --gray-1: var(--charcoal-1);
+  --gray-2: var(--charcoal-2);
+  --gray-3: var(--charcoal-3);
+  --gray-4: var(--charcoal-4);
+  --gray-5: var(--charcoal-5);
+  --gray-6: var(--charcoal-6);
+  --gray-7: var(--charcoal-7);
+  --gray-8: var(--charcoal-8);
+  --gray-9: var(--charcoal-9);
+}
+
+/* Gray Neutral */
 [data-neutral="gray"] {
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;

css/core/tokens.css

@@ -84,7 +84,7 @@
   /* ============================================
    * TYPOGRAPHY TOKENS
    * ============================================ */
-  --vd-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vd-font-family-base: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --vd-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
   /* Font Sizes (Fibonacci scale) */

css/core/typography.css

@@ -5,7 +5,7 @@
 
 :root {
   /* Font Families */
-  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-family-serif: Georgia, "Times New Roman", Times, serif;
   --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 }

dist/build-info.json

@@ -1,6 +1,6 @@
 {
   "version": "1.3.8",
-  "builtAt": "2026-05-06T18:32:43.703Z",
-  "commit": "6042eac",
+  "builtAt": "2026-05-10T18:43:09.818Z",
+  "commit": "fd58e56",
   "mode": "development+production"
 }

dist/vanduo.css

@@ -1,4 +1,4 @@
-/*! Vanduo v1.3.8 | Built: 2026-05-06T18:32:43.703Z | git:6042eac | development */
+/*! Vanduo v1.3.8 | Built: 2026-05-10T18:43:09.818Z | git:fd58e56 | development */
 *, :before, :after {
   box-sizing: border-box;
 }
@@ -293,6 +293,16 @@ table {
   --slate-7: #334155;
   --slate-8: #1e293b;
   --slate-9: #0f172a;
+  --charcoal-0: #f6f8fa;
+  --charcoal-1: #eaeef2;
+  --charcoal-2: #d0d7de;
+  --charcoal-3: #afb8c1;
+  --charcoal-4: #8c959f;
+  --charcoal-5: #6e7781;
+  --charcoal-6: #57606a;
+  --charcoal-7: #424a53;
+  --charcoal-8: #2d333b;
+  --charcoal-9: #24292f;
   --zinc-0: #fafafa;
   --zinc-1: #f4f4f5;
   --zinc-2: #e4e4e7;
@@ -801,6 +811,19 @@ table {
   --primary-9: #0a0a0a;
 }
 
+[data-neutral="charcoal"] {
+  --gray-0: var(--charcoal-0);
+  --gray-1: var(--charcoal-1);
+  --gray-2: var(--charcoal-2);
+  --gray-3: var(--charcoal-3);
+  --gray-4: var(--charcoal-4);
+  --gray-5: var(--charcoal-5);
+  --gray-6: var(--charcoal-6);
+  --gray-7: var(--charcoal-7);
+  --gray-8: var(--charcoal-8);
+  --gray-9: var(--charcoal-9);
+}
+
 [data-neutral="gray"] {
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;
@@ -1107,7 +1130,7 @@ table {
 }
 
 :root {
-  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-family-serif: Georgia, "Times New Roman", Times, serif;
   --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 }
@@ -1513,7 +1536,7 @@ pre code {
   --vd-border-radius-md: .5rem;
   --vd-border-radius-lg: .75rem;
   --vd-border-radius-xl: 1rem;
-  --vd-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --vd-font-family-base: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --vd-font-family-mono: "JetBrains Mono", "Fira Code", monospace;
   --vd-font-size-xs: .75rem;
   --vd-font-size-sm: .8125rem;
@@ -54914,6 +54937,8 @@ a.vd-card:active {
   cursor: pointer;
   user-select: none;
   transition: var(--transition-bg);
+  -webkit-appearance: none;
+  appearance: none;
   text-align: left;
   width: 100%;
   font-family: var(--font-family-sans);
@@ -54930,7 +54955,7 @@ a.vd-card:active {
   background-color: var(--collapsible-header-bg-hover);
 }
 
-.vd-collapsible-header:focus-visible, .accordion-header:focus-visible {
+.vd-collapsible-header:focus, .vd-collapsible-header:focus-visible, .accordion-header:focus, .accordion-header:focus-visible {
   outline: none;
 }
 
@@ -54950,6 +54975,8 @@ a.vd-card:active {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--text-primary);
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: none;
   border: none;
@@ -54960,7 +54987,7 @@ a.vd-card:active {
   display: flex;
 }
 
-.vd-collapsible-trigger:focus-visible, .accordion-trigger:focus-visible {
+.vd-collapsible-trigger:focus, .vd-collapsible-trigger:focus-visible, .accordion-trigger:focus, .accordion-trigger:focus-visible {
   outline: none;
 }