@unabridged/midwest 0.23.3 → 0.23.4

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

@@ -1,9 +1,26 @@
+/* Master cascade order. Declared BEFORE any @import so the plain layers that
+   `@plugin "@tailwindcss/forms"` / `@tailwindcss/typography` emit into
+   (theme/base/components/utilities) are slotted deliberately rather than
+   appended at the end of the stylesheet (where, being first-seen last, they
+   would win the whole cascade).
+
+   The `base` layer holds Tailwind preflight (imported into it, see
+   midwest/tailwind.css) followed by the plugins' addBase (forms/typography
+   input & checkbox resets) — canonical v4 order within the layer. `base` is
+   placed BEFORE every `midwest.*` layer so component CSS (rounded inputs, etc.)
+   overrides the forms reset, while checkbox/radio :checked fills still resolve
+   from the forms base (the text-input base rule excludes those controls, so
+   nothing in midwest re-overrides their background). Plugin `utilities` stays
+   last so generated utilities still beat components. */
+@layer properties, theme, base, components, utilities, midwest.tailwindcss, midwest.vendor, midwest.color-system, midwest.tokens, midwest.responsive, midwest.dark-mode, midwest.typography, midwest.scrollbars, midwest.components, midwest.utilities;
+
 @import './midwest/tailwind.css';
 
 @layer
-  midwest.color-system, midwest.responsive, midwest.dark-mode, midwest.typography, midwest.form-group, midwest.scrollbars, midwest.badge, midwest.card, midwest.input, midwest.file-input, midwest.label, midwest.checkbox, midwest.radio, midwest.select, midwest.switch, midwest.field-group, midwest.grid, midwest.icon, midwest.loading-icon, midwest.button, midwest.button-group, midwest.layout, midwest.prose, midwest.banner, midwest.callout, midwest.dropdown, midwest.avatar, midwest.avatar-group, midwest.dialog, midwest.video, midwest.tabs, midwest.tab, midwest.dropdown-item, midwest.tooltip, midwest.popover, midwest.step, midwest.steps, midwest.carousel, midwest.slide, midwest.form-live-summary, midwest.card-option, midwest.mobile-nav, midwest.countdown-timer, midwest.breadcrumb, midwest.breadcrumbs, midwest.pagination, midwest.empty-state, midwest.progress-bar, midwest.accordion, midwest.chart, midwest.range, midwest.repeatable, midwest.skeleton, midwest.rating, midwest.image, midwest.stat, midwest.color-picker, midwest.notification, midwest.horizontal-scroll, midwest.split-button, midwest.table, midwest.show-if, midwest.tree-view, midwest.command-palette, midwest.kbd, midwest.calendar-date, midwest.password-requirements, midwest.group, midwest.vendor.rouge, midwest.code-block, midwest.date-picker, midwest.time-picker, midwest.markdown, midwest.social-preview, midwest.social-preview-facebook, midwest.social-preview-instagram, midwest.social-preview-linkedin, midwest.social-preview-twitter, midwest.intersection-observer, midwest.skip-link, midwest.focus-trap, midwest.onboarding, midwest.onboarding-step, midwest.live-region;
+  midwest.components.form-group, midwest.components.badge, midwest.components.card, midwest.components.input, midwest.components.file-input, midwest.components.label, midwest.components.checkbox, midwest.components.radio, midwest.components.select, midwest.components.switch, midwest.components.field-group, midwest.components.grid, midwest.components.icon, midwest.components.loading-icon, midwest.components.button, midwest.components.button-group, midwest.components.layout, midwest.components.prose, midwest.components.banner, midwest.components.callout, midwest.components.dropdown, midwest.components.avatar, midwest.components.avatar-group, midwest.components.dialog, midwest.components.video, midwest.components.tabs, midwest.components.tab, midwest.components.dropdown-item, midwest.components.tooltip, midwest.components.popover, midwest.components.step, midwest.components.steps, midwest.components.carousel, midwest.components.slide, midwest.components.form-live-summary, midwest.components.card-option, midwest.components.mobile-nav, midwest.components.countdown-timer, midwest.components.breadcrumb, midwest.components.breadcrumbs, midwest.components.pagination, midwest.components.empty-state, midwest.components.progress-bar, midwest.components.accordion, midwest.components.chart, midwest.components.range, midwest.components.repeatable, midwest.components.skeleton, midwest.components.rating, midwest.components.image, midwest.components.stat, midwest.components.color-picker, midwest.components.notification, midwest.components.horizontal-scroll, midwest.components.split-button, midwest.components.table, midwest.components.show-if, midwest.components.tree-view, midwest.components.command-palette, midwest.components.kbd, midwest.components.calendar-date, midwest.components.password-requirements, midwest.components.group, midwest.vendor.rouge, midwest.components.code-block, midwest.components.date-picker, midwest.components.time-picker, midwest.components.markdown, midwest.components.social-preview, midwest.components.social-preview-facebook, midwest.components.social-preview-instagram, midwest.components.social-preview-linkedin, midwest.components.social-preview-twitter, midwest.components.intersection-observer, midwest.components.skip-link, midwest.components.focus-trap, midwest.components.onboarding, midwest.components.onboarding-step, midwest.components.live-region;
 
 @import './midwest/color-system.css';
+@import './midwest/tokens.css';
 @import './midwest/responsive-system.css';
 @import './midwest/dark-mode.css';
 @import './midwest/typography.css';

package/config/tailwind.theme.css

@@ -0,0 +1,59 @@
+/*
+ * Midwest colour scales for Tailwind CSS v4 consumers.
+ *
+ * Import this into your app's Tailwind entry to expose Midwest's theme /
+ * complement / gray scales as first-class utilities in YOUR OWN markup:
+ *
+ *   @import "tailwindcss";
+ *   @import "@unabridged/midwest/config/tailwind.theme.css";
+ *
+ * The colour VALUES come from the `--*-channels` custom properties in Midwest's
+ * compiled stylesheet, so keep linking it (e.g. `stylesheet_link_tag "midwest"`)
+ * — this file only maps those channels into Tailwind's theme. `inline` keeps
+ * element/section-scoped theming (`.theme-teal`, `bg-theme-6/50`) working. It
+ * intentionally does NOT reset `--color-*`, so it augments your palette rather
+ * than replacing it.
+ *
+ * Tailwind v3 apps: use the legacy `tailwind.theme.js` instead.
+ */
+@theme inline {
+  --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/config/tailwind.theme.js

@@ -1,7 +1,11 @@
 // Midwest design system — Tailwind theme only (no plugins).
-// Safe to require from any project without midwest's own node_modules present.
 //
-// Usage:
+// LEGACY (Tailwind v3): Midwest itself now builds on Tailwind v4. v4 consumers
+// should import the CSS-first partial instead — see tailwind.theme.css:
+//   @import "@unabridged/midwest/config/tailwind.theme.css";
+// This file remains for apps still on Tailwind v3.
+//
+// Usage (Tailwind v3 only):
 //   const { midwestTheme } = require('@unabridged/midwest/config/tailwind.theme')
 //   module.exports = { theme: { ...midwestTheme, extend: { ...midwestTheme.extend } } }