@unabridged/midwest 0.23.3 → 0.24.0

package/app/assets/stylesheets/midwest/dark-mode.css

@@ -4,7 +4,7 @@
   }
 
   html.dark {
-    @apply bg-gray-12 text-gray-2 !important;
+    @apply bg-gray-12! text-gray-2!;
   }
 
   h1, h2, h3, h4, h5, h6, label, p {
@@ -14,4 +14,54 @@
   p {
     @apply text-gray-10 dark:text-gray-2;
   }
+
+  /*
+   * Bare-element palette — light/dark defaults for common HTML elements that
+   * no component owns. Every selector is scoped with :not([class]) so a Midwest
+   * component (which always carries a class) is never affected; this only
+   * reaches raw markup, e.g. content inside a prose region.
+   */
+
+  /* Text selection highlight */
+  ::selection {
+    @apply bg-theme-2 text-theme-12;
+  }
+
+  .dark ::selection {
+    @apply bg-theme-8 text-theme-0;
+  }
+
+  /* Horizontal rule / divider */
+  hr:not([class]) {
+    @apply border-0 border-t border-gray-2 dark:border-gray-9;
+  }
+
+  /* Bare links */
+  a:not([class]) {
+    @apply text-theme-7 dark:text-theme-4 underline underline-offset-2;
+
+    &:hover { @apply text-theme-8 dark:text-theme-3; }
+  }
+
+  /* Inline code and keyboard keys */
+  code:not([class]),
+  kbd:not([class]) {
+    @apply rounded px-1 py-0.5 text-[0.9em] bg-gray-1 text-gray-11 dark:bg-gray-10 dark:text-gray-2;
+  }
+
+  /* Blockquote */
+  blockquote:not([class]) {
+    @apply border-l-4 border-gray-2 dark:border-gray-9 pl-4 text-gray-9 dark:text-gray-3;
+  }
+
+  /* Bare tables */
+  table:not([class]) {
+    :is(th, td) {
+      @apply border-b border-gray-2 dark:border-gray-9;
+    }
+
+    thead th {
+      @apply text-gray-11 dark:text-gray-1;
+    }
+  }
 }

package/app/assets/stylesheets/midwest/form-group.css

@@ -1,16 +1,16 @@
-@layer midwest.form-group {
+@layer midwest.components.form-group {
   .midwest-form-group {
     @apply flex flex-col;
 
-    &__top, &__bottom {
+    .midwest-form-group__top, .midwest-form-group__bottom {
       @apply flex w-full justify-between gap-1 flex-wrap;
     }
-    
-    &__top {
+
+    .midwest-form-group__top {
       @apply mb-1;
     }
 
-    &__bottom {
+    .midwest-form-group__bottom {
       @apply mt-1;
 
       &[hidden] {

package/app/assets/stylesheets/midwest/tailwind.css

@@ -1,7 +1,102 @@
-@layer tailwindcss.base {
-  @import "tailwindcss/base";
-}
+/*
+ * Tailwind CSS v4 engine setup for Midwest.
+ *
+ * Replaces the old JS `tailwind.config.js` (v4 is CSS-first). The standalone
+ * tailwindcss-ruby binary bundles the first-party plugins, so `@plugin` needs
+ * no npm dependency. Colours are declared in `@theme` (required — v4's `@apply`
+ * is strict and errors on undeclared utilities); their values reference the
+ * `--*-channels` custom properties from color-system.css, so runtime theming
+ * (`.theme-green`, opacity modifiers) keeps working.
+ */
+
+/* Tailwind's own layers, imported granularly so the `midwest` cascade layer can
+   be slotted between `components` and `utilities` (see midwest.tailwind.css). */
+@import "tailwindcss/theme.css" layer(midwest.tailwindcss.theme);
+
+/* Preflight goes into the plain `base` layer — the SAME one the `@plugin`
+   directives (forms/typography) emit their addBase into. This keeps the
+   canonical v4 order WITHIN base (preflight first, then the plugins' resets),
+   and lets the whole `base` layer be ordered ahead of Midwest's component
+   layers in midwest.tailwind.css. If preflight lived in a `midwest.*` sublayer
+   it couldn't be interleaved between the plugins' `base` and the midwest
+   component layers (a nested layer is anchored as one block), which is what
+   broke checkbox :checked fills / input border-radius. */
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(midwest.tailwindcss.utilities);
+
+/* First-party plugins are embedded in the standalone binary — no node_modules. */
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
 
-@layer tailwindcss.components {
-  @import "tailwindcss/components";
-}
+/* Class-based dark mode (was `darkMode: "class"`), matching `.dark` on <html>. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Content sources (was the JS `content` array). Paths are relative to this file. */
+@source "../../components/**/*.{rb,erb,haml}";
+@source "../../helpers/**/*.rb";
+@source "../../views/**/*.{erb,haml}";
+@source "../../javascript/**/*.js";
+@source "../../**/*.svg";
+@source "../../../demo/app/previews/**/*.{rb,erb,haml}";
+@source "../../../demo/app/views/**/*.haml";
+
+/* Colour utilities generated in ERB loops (e.g. `13.times`) are invisible to the
+   content scanner. This replaces the JS `safelist` regex. */
+@source inline("{bg,text,border,ring,outline}-{theme,complement,gray}-{0,1,2,3,4,5,6,7,8,9,10,11,12}");
+
+/* Restrict the palette to Midwest's colours (was `theme.colors`, which replaced
+   the default palette). `--color-*: initial` clears Tailwind's defaults first.
+   `inline` is ESSENTIAL: it inlines each colour's value into the generated
+   utilities (e.g. `.bg-theme-6 { background: rgb(var(--theme-6-channels)) }`)
+   so the channel var resolves at the *consuming element*. Without it v4 would
+   resolve the channels once at :root, breaking element/section-scoped theming
+   like `<section class="theme-teal">` or a presence dot's `theme-green`. */
+@theme inline {
+  /* stylelint-disable-next-line custom-property-pattern -- v4 namespace reset */
+  --color-*: initial;
+  --font-sans: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --color-transparent: transparent;
+  --color-current: currentcolor;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-theme-0: rgb(var(--theme-0-channels));
+  --color-theme-1: rgb(var(--theme-1-channels));
+  --color-theme-2: rgb(var(--theme-2-channels));
+  --color-theme-3: rgb(var(--theme-3-channels));
+  --color-theme-4: rgb(var(--theme-4-channels));
+  --color-theme-5: rgb(var(--theme-5-channels));
+  --color-theme-6: rgb(var(--theme-6-channels));
+  --color-theme-7: rgb(var(--theme-7-channels));
+  --color-theme-8: rgb(var(--theme-8-channels));
+  --color-theme-9: rgb(var(--theme-9-channels));
+  --color-theme-10: rgb(var(--theme-10-channels));
+  --color-theme-11: rgb(var(--theme-11-channels));
+  --color-theme-12: rgb(var(--theme-12-channels));
+  --color-complement-0: rgb(var(--complement-0-channels));
+  --color-complement-1: rgb(var(--complement-1-channels));
+  --color-complement-2: rgb(var(--complement-2-channels));
+  --color-complement-3: rgb(var(--complement-3-channels));
+  --color-complement-4: rgb(var(--complement-4-channels));
+  --color-complement-5: rgb(var(--complement-5-channels));
+  --color-complement-6: rgb(var(--complement-6-channels));
+  --color-complement-7: rgb(var(--complement-7-channels));
+  --color-complement-8: rgb(var(--complement-8-channels));
+  --color-complement-9: rgb(var(--complement-9-channels));
+  --color-complement-10: rgb(var(--complement-10-channels));
+  --color-complement-11: rgb(var(--complement-11-channels));
+  --color-complement-12: rgb(var(--complement-12-channels));
+  --color-gray-0: rgb(var(--gray-0-channels));
+  --color-gray-1: rgb(var(--gray-1-channels));
+  --color-gray-2: rgb(var(--gray-2-channels));
+  --color-gray-3: rgb(var(--gray-3-channels));
+  --color-gray-4: rgb(var(--gray-4-channels));
+  --color-gray-5: rgb(var(--gray-5-channels));
+  --color-gray-6: rgb(var(--gray-6-channels));
+  --color-gray-7: rgb(var(--gray-7-channels));
+  --color-gray-8: rgb(var(--gray-8-channels));
+  --color-gray-9: rgb(var(--gray-9-channels));
+  --color-gray-10: rgb(var(--gray-10-channels));
+  --color-gray-11: rgb(var(--gray-11-channels));
+  --color-gray-12: rgb(var(--gray-12-channels));
+}

package/app/assets/stylesheets/midwest/tokens.css

@@ -0,0 +1,108 @@
+/*
+ * Midwest design tokens — the single source of truth for the system's
+ * non-colour primitives (spacing, radius, elevation, motion, typography,
+ * z-index, breakpoints).
+ *
+ * These custom properties are the canonical values. `Midwest::Tokens` parses
+ * this file at runtime, so the Ruby API, the MCP `get_design_tokens` tool, and
+ * the `tokens:export` CLI can never drift from what components actually render
+ * — the same contract `color-system.css` has with `Midwest::Theme`.
+ *
+ * Colours are intentionally NOT here: they have their own generated scales and
+ * runtime theming story in `color-system.css`. `Midwest::Tokens` folds them in
+ * by delegating to `Midwest::Theme`.
+ *
+ * Naming: `--{category}-{step}`. Steps use a t-shirt scale (xs … 3xl) so they
+ * map onto the component option vocabulary (`size:`, `padding:`) and read
+ * cleanly in a theme-builder UI. All length tokens are in `rem`, so they scale
+ * with the responsive root font-size in `responsive-system.css`.
+ */
+
+@layer midwest.tokens {
+  :root {
+    /* SPACING — 4px base at the 16px root; md (1rem) is the system default. */
+    --space-none: 0;
+    --space-3xs: 0.125rem; /* 2px */
+    --space-2xs: 0.25rem; /* 4px */
+    --space-xs: 0.5rem; /* 8px */
+    --space-sm: 0.75rem; /* 12px */
+    --space-md: 1rem; /* 16px */
+    --space-lg: 1.5rem; /* 24px */
+    --space-xl: 2rem; /* 32px */
+    --space-2xl: 3rem; /* 48px */
+    --space-3xl: 4rem; /* 64px */
+
+    /* BORDER RADIUS */
+    --radius-none: 0;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+
+    /* ELEVATION — shadow ramp. Literal black so the ramp is dark-mode neutral. */
+    --shadow-none: none;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+
+    /* MOTION — durations and easings. Values match existing component usage. */
+    --duration-fast: 150ms;
+    --duration-base: 200ms;
+    --duration-slow: 350ms;
+    --duration-slower: 500ms;
+    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+
+    /* TYPOGRAPHY — sizes mirror the Tailwind text-* ramp (rem). */
+    --font-family-sans: "Inter var", ui-sans-serif, system-ui, sans-serif;
+    --font-family-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 3.75rem;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --tracking-tight: -0.01em;
+    --tracking-normal: 0.02em;
+    --tracking-wide: 0.05em;
+    --tracking-wider: 0.1em;
+
+    /* Z-INDEX — named stacking order. `max` matches the legacy 999999 sentinel. */
+    --z-base: 0;
+    --z-raised: 10;
+    --z-dropdown: 1000;
+    --z-sticky: 1100;
+    --z-overlay: 1200;
+    --z-modal: 1300;
+    --z-popover: 1400;
+    --z-toast: 1500;
+    --z-tooltip: 1600;
+    --z-max: 999999;
+
+    /* BREAKPOINTS — mirror the responsive root font-size steps. Exposed for JS,
+     * container queries, and documentation; CSS media queries use the literals. */
+    --breakpoint-xs: 400px;
+    --breakpoint-sm: 600px;
+    --breakpoint-md: 800px;
+    --breakpoint-lg: 1000px;
+    --breakpoint-xl: 1200px;
+    --breakpoint-2xl: 1400px;
+  }
+}

package/app/assets/stylesheets/midwest/utilities.css

@@ -1,25 +1,25 @@
-@import 'tailwindcss/utilities';
+@layer midwest.utilities {
+  .layer-children {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+  }
 
-.layer-children {
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
-}
+  .layer-children > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
 
-.layer-children > * {
-  grid-column: 1;
-  grid-row: 1;
-}
+  html,
+  body {
+    height: 100%;
+  }
 
-html,
-body {
-  height: 100%;
-}
+  main {
+    height: 100%;
+  }
 
-main {
-  height: 100%;
-}
-
-[hidden] {
-  display: none !important;
+  [hidden] {
+    display: none !important;
+  }
 }