From 8509fcaf365ededfcf21877a4fc2b41b6da8b560 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Sat, 8 Aug 2026 14:15:28 -0400 Subject: [PATCH 1/2] refactor(mix-winds): rename mix_tailwinds to mix_winds Follows the package rename in btwld/mix. Moves the landing route to /mix-winds, renames the landing components, stylesheet, capture directory, ecosystem doc page, and site test, and repoints the mix_docs_preview dependency at mix_winds ^0.1.0-alpha.0. Adds permanent redirects from /mix-tailwinds and from the old ecosystem doc URL so already-published links keep resolving, and adds a migration callout to the ecosystem page. References to Tailwind CSS itself are unchanged, including the /examples/tailwind-plan-card route and the browser-side comparison copy. --- components/FloatingNavbar.tsx | 2 +- .../ComparisonSeam.tsx | 12 ++--- .../MixWindsLanding.tsx} | 12 ++--- .../{mix-tailwinds => mix-winds}/content.ts | 10 ++-- .../mix-winds.css} | 2 +- next.config.mjs | 4 ++ packages/mix_docs_preview/README.md | 2 +- .../{mix_tailwinds.dart => mix_winds.dart} | 2 +- .../lib/preview_registry.dart | 6 +-- packages/mix_docs_preview/pubspec.yaml | 2 +- .../capacity-map-flutter-sm.png | Bin .../capacity-map-flutter.png | Bin .../capacity-map-tailwind-sm.png | Bin .../capacity-map-tailwind.png | Bin .../incident-room-flutter-sm.png | Bin .../incident-room-flutter.png | Bin .../incident-room-tailwind-sm.png | Bin .../incident-room-tailwind.png | Bin .../launch-command-flutter-sm.png | Bin .../launch-command-flutter.png | Bin .../launch-command-tailwind-sm.png | Bin .../launch-command-tailwind.png | Bin .../release-timeline-flutter-sm.png | Bin .../release-timeline-flutter.png | Bin .../release-timeline-tailwind-sm.png | Bin .../release-timeline-tailwind.png | Bin .../signal-analytics-flutter-sm.png | Bin .../signal-analytics-flutter.png | Bin .../signal-analytics-tailwind-sm.png | Bin .../signal-analytics-tailwind.png | Bin ...est.mjs => mix-winds-integration.test.mjs} | 44 +++++++++--------- src/app/examples/tailwind-plan-card/page.tsx | 2 +- src/app/{mix-tailwinds => mix-winds}/page.tsx | 12 ++--- .../documentation/mix/ecosystem/_meta.js | 2 +- .../mix/ecosystem/mix-schema.mdx | 2 +- .../{mix-tailwinds.mdx => mix-winds.mdx} | 36 ++++++++------ .../mix/overview/getting-started.mdx | 2 +- 37 files changed, 82 insertions(+), 72 deletions(-) rename components/landing/{mix-tailwinds => mix-winds}/ComparisonSeam.tsx (86%) rename components/landing/{mix-tailwinds/MixTailwindsLanding.tsx => mix-winds/MixWindsLanding.tsx} (96%) rename components/landing/{mix-tailwinds => mix-winds}/content.ts (92%) rename components/landing/{mix-tailwinds/mix-tailwinds.css => mix-winds/mix-winds.css} (99%) rename packages/mix_docs_preview/lib/ecosystem/{mix_tailwinds.dart => mix_winds.dart} (98%) rename public/{mix-tailwinds => mix-winds}/capacity-map-flutter-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/capacity-map-flutter.png (100%) rename public/{mix-tailwinds => mix-winds}/capacity-map-tailwind-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/capacity-map-tailwind.png (100%) rename public/{mix-tailwinds => mix-winds}/incident-room-flutter-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/incident-room-flutter.png (100%) rename public/{mix-tailwinds => mix-winds}/incident-room-tailwind-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/incident-room-tailwind.png (100%) rename public/{mix-tailwinds => mix-winds}/launch-command-flutter-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/launch-command-flutter.png (100%) rename public/{mix-tailwinds => mix-winds}/launch-command-tailwind-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/launch-command-tailwind.png (100%) rename public/{mix-tailwinds => mix-winds}/release-timeline-flutter-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/release-timeline-flutter.png (100%) rename public/{mix-tailwinds => mix-winds}/release-timeline-tailwind-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/release-timeline-tailwind.png (100%) rename public/{mix-tailwinds => mix-winds}/signal-analytics-flutter-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/signal-analytics-flutter.png (100%) rename public/{mix-tailwinds => mix-winds}/signal-analytics-tailwind-sm.png (100%) rename public/{mix-tailwinds => mix-winds}/signal-analytics-tailwind.png (100%) rename site-tests/{mix-tailwinds-integration.test.mjs => mix-winds-integration.test.mjs} (73%) rename src/app/{mix-tailwinds => mix-winds}/page.tsx (55%) rename src/content/documentation/mix/ecosystem/{mix-tailwinds.mdx => mix-winds.mdx} (92%) diff --git a/components/FloatingNavbar.tsx b/components/FloatingNavbar.tsx index 89c5cdc1..baa9b8bc 100644 --- a/components/FloatingNavbar.tsx +++ b/components/FloatingNavbar.tsx @@ -226,7 +226,7 @@ const DOCS_SECTIONS: Partial> = { { label: 'Ecosystem', pages: [ - { label: 'mix_tailwinds', href: '/documentation/mix/ecosystem/mix-tailwinds' }, + { label: 'mix_winds', href: '/documentation/mix/ecosystem/mix-winds' }, { label: 'mix_schema', href: '/documentation/mix/ecosystem/mix-schema' }, { label: 'mix_lint', href: '/documentation/mix/ecosystem/mix-lint' }, { label: 'mix_generator', href: '/documentation/mix/ecosystem/mix-generator' }, diff --git a/components/landing/mix-tailwinds/ComparisonSeam.tsx b/components/landing/mix-winds/ComparisonSeam.tsx similarity index 86% rename from components/landing/mix-tailwinds/ComparisonSeam.tsx rename to components/landing/mix-winds/ComparisonSeam.tsx index 6a39e588..aeb070ba 100644 --- a/components/landing/mix-tailwinds/ComparisonSeam.tsx +++ b/components/landing/mix-winds/ComparisonSeam.tsx @@ -5,7 +5,7 @@ import type { CSSProperties } from "react"; import { NARROW_CAPTURE_QUERY, type Example } from "./content"; /* Both halves are real captures of the same class string: a browser rendering - Tailwind on the left, Flutter rendering mix_tailwinds on the right. Narrow + Tailwind on the left, Flutter rendering mix_winds on the right. Narrow screens get the phone-width capture, because the desktop one shrinks past legibility and the comparison stops meaning anything. @@ -25,11 +25,11 @@ export function ComparisonSeam({ example }: { example: Example }) { {`${example.title} @@ -38,12 +38,12 @@ export function ComparisonSeam({ example }: { example: Example }) { {`${example.title} diff --git a/components/landing/mix-tailwinds/MixTailwindsLanding.tsx b/components/landing/mix-winds/MixWindsLanding.tsx similarity index 96% rename from components/landing/mix-tailwinds/MixTailwindsLanding.tsx rename to components/landing/mix-winds/MixWindsLanding.tsx index 4958279f..550b0f3e 100644 --- a/components/landing/mix-tailwinds/MixTailwindsLanding.tsx +++ b/components/landing/mix-winds/MixWindsLanding.tsx @@ -17,11 +17,11 @@ import { INSTALL_SNIPPET, } from "./content"; import "../landing.css"; -import "./mix-tailwinds.css"; +import "./mix-winds.css"; -const PUB_DEV_URL = "https://pub.dev/packages/mix_tailwinds"; +const PUB_DEV_URL = "https://pub.dev/packages/mix_winds"; const GITHUB_URL = - "https://github.com/btwld/mix/tree/main/packages/mix_tailwinds"; + "https://github.com/btwld/mix/tree/main/packages/mix_winds"; const exampleTabId = (slug: string) => `mtw-example-tab-${slug}`; const examplePanelId = (slug: string) => `mtw-example-panel-${slug}`; @@ -48,7 +48,7 @@ function CodePane({ ); } -export function MixTailwindsLanding() { +export function MixWindsLanding() { const [activeSlug, setActiveSlug] = useState(EXAMPLES[0].slug); const tabRefs = useRef>([]); const active = EXAMPLES.find((e) => e.slug === activeSlug) ?? EXAMPLES[0]; @@ -95,7 +95,7 @@ export function MixTailwindsLanding() { variants={{ visible: { transition: { staggerChildren: 0.08 } } }} > - mix_tailwinds + mix_winds Alpha @@ -240,7 +240,7 @@ export function MixTailwindsLanding() {

Start with one class string.

- mix_tailwinds is an open-source alpha built on Mix. Add it to a + mix_winds is an open-source alpha built on Mix. Add it to a Flutter project and style your first widget the way you already think about layout.

diff --git a/components/landing/mix-tailwinds/content.ts b/components/landing/mix-winds/content.ts similarity index 92% rename from components/landing/mix-tailwinds/content.ts rename to components/landing/mix-winds/content.ts index 077880c2..faee706d 100644 --- a/components/landing/mix-tailwinds/content.ts +++ b/components/landing/mix-winds/content.ts @@ -1,9 +1,9 @@ -/* Content for the mix_tailwinds landing page. +/* Content for the mix_winds landing page. - The captures under public/mix-tailwinds/ are produced by the package's own + The captures under public/mix-winds/ are produced by the package's own comparison suite: each example is rendered once in a real browser on Tailwind 4.3.1 and once in Flutter, from the same class string. Regenerate - them with `npm run compare:advanced` in packages/mix_tailwinds/tool/ + them with `npm run compare:advanced` in packages/mix_winds/tool/ visual-comparison and copy the per-example captures across. The suite keeps a 16px diagnostic margin around every capture; the landing crops that margin at presentation time while preserving the source evidence. */ @@ -19,7 +19,7 @@ export type Example = { /* Below this the desktop capture is too small to read, so the narrow capture — the same component laid out for a phone — is served instead. Matches the CSS - breakpoint in mix-tailwinds.css. */ + breakpoint in mix-winds.css. */ export const NARROW_CAPTURE_QUERY = "(max-width: 720px)"; export const EXAMPLES: Example[] = [ @@ -82,7 +82,7 @@ export const DART_SNIPPET = `div('flex flex-col gap-4 rounded-3xl bg-slate-950 p ), ])`; -export const INSTALL_SNIPPET = `flutter pub add mix_tailwinds`; +export const INSTALL_SNIPPET = `flutter pub add mix_winds`; export const FEATURES = [ { diff --git a/components/landing/mix-tailwinds/mix-tailwinds.css b/components/landing/mix-winds/mix-winds.css similarity index 99% rename from components/landing/mix-tailwinds/mix-tailwinds.css rename to components/landing/mix-winds/mix-winds.css index 98db1802..8555b64b 100644 --- a/components/landing/mix-tailwinds/mix-tailwinds.css +++ b/components/landing/mix-winds/mix-winds.css @@ -1,4 +1,4 @@ -/* mix_tailwinds landing page. +/* mix_winds landing page. Accent: iris, not another cyan. The sibling product pages already hold the blue-to-cyan range, and this page is about translation between two systems, diff --git a/next.config.mjs b/next.config.mjs index 6f7136d1..f038a56f 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -29,6 +29,10 @@ export default withNextra({ { source: '/documentation/widgets/:path*', destination: '/documentation/mix/widgets/:path*', permanent: true }, { source: '/documentation/tutorials/:path*', destination: '/documentation/mix/tutorials/:path*', permanent: true }, { source: '/documentation/ecosystem/:path*', destination: '/documentation/mix/ecosystem/:path*', permanent: true }, + // The package was renamed from mix_tailwinds to mix_winds; keep the + // published landing and ecosystem URLs reachable. + { source: '/mix-tailwinds', destination: '/mix-winds', permanent: true }, + { source: '/documentation/mix/ecosystem/mix-tailwinds', destination: '/documentation/mix/ecosystem/mix-winds', permanent: true }, ] }, }) diff --git a/packages/mix_docs_preview/README.md b/packages/mix_docs_preview/README.md index b4d16504..2c5fb82d 100644 --- a/packages/mix_docs_preview/README.md +++ b/packages/mix_docs_preview/README.md @@ -12,7 +12,7 @@ The `lib/` layout mirrors the documentation site. When a doc section has multipl - **`lib/guides/`** – Styling, directives, design tokens, dynamic styling (variants), animations, gradients. Multi-file sections use subfolders: `animations/`, `design_token/`, `directives/`, `dynamic_styling/`, `gradients/`. - **`lib/widgets/`** – Box, text, icon, image, flexbox, stack, vbox, pressable, stylewidgets. Multi-file sections use subfolders: `box/`, `text/`, `icon/`, `image/`, `flexbox/`, `stack/`, `vbox/`. - **`lib/tutorials/`** – Creating context variants, theming, creating a widget (e.g. `creating_a_widget/design_system_button.dart`), controlling widget state. -- **`lib/ecosystem/`** – Ecosystem demos (e.g. `mix_tailwinds.dart`). +- **`lib/ecosystem/`** – Ecosystem demos (e.g. `mix_winds.dart`). - **`lib/components/`** – Shared UI (chip button, scaffold, tokens). - **`lib/preview_registry.dart`** – Single source of truth for preview IDs and metadata. - **`tool/generate_previews_manifest.dart`** – Generates `previews-manifest.json` from the registry for the website. diff --git a/packages/mix_docs_preview/lib/ecosystem/mix_tailwinds.dart b/packages/mix_docs_preview/lib/ecosystem/mix_winds.dart similarity index 98% rename from packages/mix_docs_preview/lib/ecosystem/mix_tailwinds.dart rename to packages/mix_docs_preview/lib/ecosystem/mix_winds.dart index f47e8efd..cd67e8a4 100644 --- a/packages/mix_docs_preview/lib/ecosystem/mix_tailwinds.dart +++ b/packages/mix_docs_preview/lib/ecosystem/mix_winds.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:mix_tailwinds/mix_tailwinds.dart'; +import 'package:mix_winds/mix_winds.dart'; // #docregion example class Example extends StatelessWidget { diff --git a/packages/mix_docs_preview/lib/preview_registry.dart b/packages/mix_docs_preview/lib/preview_registry.dart index 9ab470c3..e1069273 100644 --- a/packages/mix_docs_preview/lib/preview_registry.dart +++ b/packages/mix_docs_preview/lib/preview_registry.dart @@ -1,6 +1,6 @@ import 'package:flutter/widgets.dart'; -import 'ecosystem/mix_tailwinds.dart' as tw_card_alert; +import 'ecosystem/mix_winds.dart' as tw_card_alert; import 'guides/animations/implicit_curved_scale.dart' as auto_scale; import 'guides/animations/implicit_spring_translate.dart' as spring_anim; import 'guides/animations/implicit_state_counter.dart' @@ -544,8 +544,8 @@ class PreviewRegistry { ), // ecosystem PreviewEntry( - previewId: 'ecosystem/mix-tailwinds.0', - sourcePath: 'packages/mix_docs_preview/lib/ecosystem/mix_tailwinds.dart', + previewId: 'ecosystem/mix-winds.0', + sourcePath: 'packages/mix_docs_preview/lib/ecosystem/mix_winds.dart', category: _ecosystem, builder: (_) => const tw_card_alert.Example(), snippetRegion: 'example', diff --git a/packages/mix_docs_preview/pubspec.yaml b/packages/mix_docs_preview/pubspec.yaml index 71a04bfd..d3c0c104 100644 --- a/packages/mix_docs_preview/pubspec.yaml +++ b/packages/mix_docs_preview/pubspec.yaml @@ -12,7 +12,7 @@ dependencies: flutter: sdk: flutter mix: ^2.1.0 - mix_tailwinds: ^0.0.1-alpha.1 + mix_winds: ^0.1.0-alpha.0 remix: git: url: https://github.com/btwld/remix.git diff --git a/public/mix-tailwinds/capacity-map-flutter-sm.png b/public/mix-winds/capacity-map-flutter-sm.png similarity index 100% rename from public/mix-tailwinds/capacity-map-flutter-sm.png rename to public/mix-winds/capacity-map-flutter-sm.png diff --git a/public/mix-tailwinds/capacity-map-flutter.png b/public/mix-winds/capacity-map-flutter.png similarity index 100% rename from public/mix-tailwinds/capacity-map-flutter.png rename to public/mix-winds/capacity-map-flutter.png diff --git a/public/mix-tailwinds/capacity-map-tailwind-sm.png b/public/mix-winds/capacity-map-tailwind-sm.png similarity index 100% rename from public/mix-tailwinds/capacity-map-tailwind-sm.png rename to public/mix-winds/capacity-map-tailwind-sm.png diff --git a/public/mix-tailwinds/capacity-map-tailwind.png b/public/mix-winds/capacity-map-tailwind.png similarity index 100% rename from public/mix-tailwinds/capacity-map-tailwind.png rename to public/mix-winds/capacity-map-tailwind.png diff --git a/public/mix-tailwinds/incident-room-flutter-sm.png b/public/mix-winds/incident-room-flutter-sm.png similarity index 100% rename from public/mix-tailwinds/incident-room-flutter-sm.png rename to public/mix-winds/incident-room-flutter-sm.png diff --git a/public/mix-tailwinds/incident-room-flutter.png b/public/mix-winds/incident-room-flutter.png similarity index 100% rename from public/mix-tailwinds/incident-room-flutter.png rename to public/mix-winds/incident-room-flutter.png diff --git a/public/mix-tailwinds/incident-room-tailwind-sm.png b/public/mix-winds/incident-room-tailwind-sm.png similarity index 100% rename from public/mix-tailwinds/incident-room-tailwind-sm.png rename to public/mix-winds/incident-room-tailwind-sm.png diff --git a/public/mix-tailwinds/incident-room-tailwind.png b/public/mix-winds/incident-room-tailwind.png similarity index 100% rename from public/mix-tailwinds/incident-room-tailwind.png rename to public/mix-winds/incident-room-tailwind.png diff --git a/public/mix-tailwinds/launch-command-flutter-sm.png b/public/mix-winds/launch-command-flutter-sm.png similarity index 100% rename from public/mix-tailwinds/launch-command-flutter-sm.png rename to public/mix-winds/launch-command-flutter-sm.png diff --git a/public/mix-tailwinds/launch-command-flutter.png b/public/mix-winds/launch-command-flutter.png similarity index 100% rename from public/mix-tailwinds/launch-command-flutter.png rename to public/mix-winds/launch-command-flutter.png diff --git a/public/mix-tailwinds/launch-command-tailwind-sm.png b/public/mix-winds/launch-command-tailwind-sm.png similarity index 100% rename from public/mix-tailwinds/launch-command-tailwind-sm.png rename to public/mix-winds/launch-command-tailwind-sm.png diff --git a/public/mix-tailwinds/launch-command-tailwind.png b/public/mix-winds/launch-command-tailwind.png similarity index 100% rename from public/mix-tailwinds/launch-command-tailwind.png rename to public/mix-winds/launch-command-tailwind.png diff --git a/public/mix-tailwinds/release-timeline-flutter-sm.png b/public/mix-winds/release-timeline-flutter-sm.png similarity index 100% rename from public/mix-tailwinds/release-timeline-flutter-sm.png rename to public/mix-winds/release-timeline-flutter-sm.png diff --git a/public/mix-tailwinds/release-timeline-flutter.png b/public/mix-winds/release-timeline-flutter.png similarity index 100% rename from public/mix-tailwinds/release-timeline-flutter.png rename to public/mix-winds/release-timeline-flutter.png diff --git a/public/mix-tailwinds/release-timeline-tailwind-sm.png b/public/mix-winds/release-timeline-tailwind-sm.png similarity index 100% rename from public/mix-tailwinds/release-timeline-tailwind-sm.png rename to public/mix-winds/release-timeline-tailwind-sm.png diff --git a/public/mix-tailwinds/release-timeline-tailwind.png b/public/mix-winds/release-timeline-tailwind.png similarity index 100% rename from public/mix-tailwinds/release-timeline-tailwind.png rename to public/mix-winds/release-timeline-tailwind.png diff --git a/public/mix-tailwinds/signal-analytics-flutter-sm.png b/public/mix-winds/signal-analytics-flutter-sm.png similarity index 100% rename from public/mix-tailwinds/signal-analytics-flutter-sm.png rename to public/mix-winds/signal-analytics-flutter-sm.png diff --git a/public/mix-tailwinds/signal-analytics-flutter.png b/public/mix-winds/signal-analytics-flutter.png similarity index 100% rename from public/mix-tailwinds/signal-analytics-flutter.png rename to public/mix-winds/signal-analytics-flutter.png diff --git a/public/mix-tailwinds/signal-analytics-tailwind-sm.png b/public/mix-winds/signal-analytics-tailwind-sm.png similarity index 100% rename from public/mix-tailwinds/signal-analytics-tailwind-sm.png rename to public/mix-winds/signal-analytics-tailwind-sm.png diff --git a/public/mix-tailwinds/signal-analytics-tailwind.png b/public/mix-winds/signal-analytics-tailwind.png similarity index 100% rename from public/mix-tailwinds/signal-analytics-tailwind.png rename to public/mix-winds/signal-analytics-tailwind.png diff --git a/site-tests/mix-tailwinds-integration.test.mjs b/site-tests/mix-winds-integration.test.mjs similarity index 73% rename from site-tests/mix-tailwinds-integration.test.mjs rename to site-tests/mix-winds-integration.test.mjs index 80ec1dd6..350531bd 100644 --- a/site-tests/mix-tailwinds-integration.test.mjs +++ b/site-tests/mix-winds-integration.test.mjs @@ -9,12 +9,12 @@ function read(relativePath) { return fs.readFileSync(path.join(root, relativePath), 'utf8') } -test('wires the mix_tailwinds page into the landing shell', () => { - const route = read('src/app/mix-tailwinds/page.tsx') - const landing = read('components/landing/mix-tailwinds/MixTailwindsLanding.tsx') - const styles = read('components/landing/mix-tailwinds/mix-tailwinds.css') +test('wires the mix_winds page into the landing shell', () => { + const route = read('src/app/mix-winds/page.tsx') + const landing = read('components/landing/mix-winds/MixWindsLanding.tsx') + const styles = read('components/landing/mix-winds/mix-winds.css') - assert.match(route, //) + assert.match(route, //) assert.match(route, /Tailwind classes\. Native Flutter\./) assert.match(landing, /className="lp-root mtw-root"/) assert.match(landing, //) @@ -23,19 +23,19 @@ test('wires the mix_tailwinds page into the landing shell', () => { // inside the Mix site rather than a separate product in the navbar switcher. assert.match(styles, /\.mtw-root \{[^}]*--lp-accent:/s) const productStyles = read('components/landing/landing.css') - assert.doesNotMatch(productStyles, /data-product='mix-tailwinds'/) + assert.doesNotMatch(productStyles, /data-product='mix-winds'/) const layout = read('src/app/layout.jsx') - assert.doesNotMatch(layout, /mix-tailwinds/) + assert.doesNotMatch(layout, /mix-winds/) }) test('sells the package instead of reporting a pixel diff', () => { - const landing = read('components/landing/mix-tailwinds/MixTailwindsLanding.tsx') - const content = read('components/landing/mix-tailwinds/content.ts') - const seam = read('components/landing/mix-tailwinds/ComparisonSeam.tsx') + const landing = read('components/landing/mix-winds/MixWindsLanding.tsx') + const content = read('components/landing/mix-winds/content.ts') + const seam = read('components/landing/mix-winds/ComparisonSeam.tsx') assert.match(landing, /Get started/) assert.match(landing, /flutter pub add|INSTALL_SNIPPET/) - assert.match(content, /flutter pub add mix_tailwinds/) + assert.match(content, /flutter pub add mix_winds/) // No parity percentages, budgets, or pass/fail language on the page. const pageSource = [landing, content, seam].join('\n') @@ -44,9 +44,9 @@ test('sells the package instead of reporting a pixel diff', () => { }) test('makes every gallery example a clean browser-to-Flutter comparison', () => { - const landing = read('components/landing/mix-tailwinds/MixTailwindsLanding.tsx') - const content = read('components/landing/mix-tailwinds/content.ts') - const styles = read('components/landing/mix-tailwinds/mix-tailwinds.css') + const landing = read('components/landing/mix-winds/MixWindsLanding.tsx') + const content = read('components/landing/mix-winds/content.ts') + const styles = read('components/landing/mix-winds/mix-winds.css') assert.match( landing, @@ -72,7 +72,7 @@ test('makes every gallery example a clean browser-to-Flutter comparison', () => }) test('connects the example tabs to one keyboard-operable comparison panel', () => { - const landing = read('components/landing/mix-tailwinds/MixTailwindsLanding.tsx') + const landing = read('components/landing/mix-winds/MixWindsLanding.tsx') assert.match(landing, /aria-controls=\{examplePanelId\(example\.slug\)\}/) assert.match(landing, /tabIndex=\{example\.slug === activeSlug \? 0 : -1\}/) @@ -83,8 +83,8 @@ test('connects the example tabs to one keyboard-operable comparison panel', () = }) test('shows the functional API with real HTML and Dart highlighting', () => { - const content = read('components/landing/mix-tailwinds/content.ts') - const landing = read('components/landing/mix-tailwinds/MixTailwindsLanding.tsx') + const content = read('components/landing/mix-winds/content.ts') + const landing = read('components/landing/mix-winds/MixWindsLanding.tsx') const highlighter = read('components/landing/HighlightedCode.tsx') // Functional helpers, not the class-based widget constructors. @@ -102,9 +102,9 @@ test('shows the functional API with real HTML and Dart highlighting', () => { }) test('serves a legible capture on narrow screens', () => { - const content = read('components/landing/mix-tailwinds/content.ts') - const seam = read('components/landing/mix-tailwinds/ComparisonSeam.tsx') - const styles = read('components/landing/mix-tailwinds/mix-tailwinds.css') + const content = read('components/landing/mix-winds/content.ts') + const seam = read('components/landing/mix-winds/ComparisonSeam.tsx') + const styles = read('components/landing/mix-winds/mix-winds.css') assert.match(content, /NARROW_CAPTURE_QUERY = "\(max-width: 720px\)"/) assert.match(seam, / { 'flutter-sm.png', ]) { assert.equal( - fs.existsSync(path.join(root, `public/mix-tailwinds/${slug}-${suffix}`)), + fs.existsSync(path.join(root, `public/mix-winds/${slug}-${suffix}`)), true, `missing capture: ${slug}-${suffix}`, ) @@ -133,7 +133,7 @@ test('serves a legible capture on narrow screens', () => { }) test('keeps the seam operable by keyboard and screen readers', () => { - const seam = read('components/landing/mix-tailwinds/ComparisonSeam.tsx') + const seam = read('components/landing/mix-winds/ComparisonSeam.tsx') assert.match(seam, /type="range"/) assert.match(seam, /aria-labelledby=/) diff --git a/src/app/examples/tailwind-plan-card/page.tsx b/src/app/examples/tailwind-plan-card/page.tsx index 8c7b4b9c..ebafc7f6 100644 --- a/src/app/examples/tailwind-plan-card/page.tsx +++ b/src/app/examples/tailwind-plan-card/page.tsx @@ -31,7 +31,7 @@ export default function TailwindPlanCardPage() { Tailwind reference output

- Compare with the Flutter mix_tailwinds example + Compare with the Flutter mix_winds example

diff --git a/src/app/mix-tailwinds/page.tsx b/src/app/mix-winds/page.tsx similarity index 55% rename from src/app/mix-tailwinds/page.tsx rename to src/app/mix-winds/page.tsx index 0e483a73..c17c198e 100644 --- a/src/app/mix-tailwinds/page.tsx +++ b/src/app/mix-winds/page.tsx @@ -1,4 +1,4 @@ -import { MixTailwindsLanding } from "../../../components/landing/mix-tailwinds/MixTailwindsLanding"; +import { MixWindsLanding } from "../../../components/landing/mix-winds/MixWindsLanding"; const description = "Write Tailwind utility classes, render native Flutter widgets. Every example is measured against a real browser rendering the same class string, at three viewport widths."; @@ -8,21 +8,21 @@ export const viewport = { }; export const metadata = { - title: "mix_tailwinds — Tailwind classes. Native Flutter.", + title: "mix_winds — Tailwind classes. Native Flutter.", description, - applicationName: "mix_tailwinds", + applicationName: "mix_winds", openGraph: { - title: "mix_tailwinds — Tailwind classes, native Flutter widgets", + title: "mix_winds — Tailwind classes, native Flutter widgets", description, type: "website", }, twitter: { card: "summary_large_image", - title: "mix_tailwinds — Tailwind classes. Native Flutter.", + title: "mix_winds — Tailwind classes. Native Flutter.", description, }, }; export default function Page() { - return ; + return ; } diff --git a/src/content/documentation/mix/ecosystem/_meta.js b/src/content/documentation/mix/ecosystem/_meta.js index db56ad6a..adb3953a 100644 --- a/src/content/documentation/mix/ecosystem/_meta.js +++ b/src/content/documentation/mix/ecosystem/_meta.js @@ -1,5 +1,5 @@ export default { - "mix-tailwinds": "mix_tailwinds", + "mix-winds": "mix_winds", "mix-schema": "mix_schema", "mix-lint": "mix_lint", "mix-generator": "mix_generator", diff --git a/src/content/documentation/mix/ecosystem/mix-schema.mdx b/src/content/documentation/mix/ecosystem/mix-schema.mdx index 031c237b..663a267d 100644 --- a/src/content/documentation/mix/ecosystem/mix-schema.mdx +++ b/src/content/documentation/mix/ecosystem/mix-schema.mdx @@ -89,7 +89,7 @@ Risk policy example: ## Related docs -- [mix_tailwinds](/documentation/mix/ecosystem/mix-tailwinds) +- [mix_winds](/documentation/mix/ecosystem/mix-winds) - [mix_lint](/documentation/mix/ecosystem/mix-lint) - [mix_generator](/documentation/mix/ecosystem/mix-generator) - [Design Tokens](/documentation/mix/guides/design-token) diff --git a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx b/src/content/documentation/mix/ecosystem/mix-winds.mdx similarity index 92% rename from src/content/documentation/mix/ecosystem/mix-tailwinds.mdx rename to src/content/documentation/mix/ecosystem/mix-winds.mdx index 00265cce..a85c87ac 100644 --- a/src/content/documentation/mix/ecosystem/mix-tailwinds.mdx +++ b/src/content/documentation/mix/ecosystem/mix-winds.mdx @@ -1,27 +1,33 @@ --- -title: mix_tailwinds +title: mix_winds description: "Use Tailwind-like utility class syntax to style Flutter widgets with Mix." --- import { Callout } from "nextra/components"; -# mix_tailwinds +# mix_winds -`mix_tailwinds` provides a Tailwind CSS-like utility syntax for styling Flutter widgets using Mix. Write class names such as `flex`, `gap-4`, and `text-lg` instead of composing stylers manually. +`mix_winds` provides a Tailwind CSS-like utility syntax for styling Flutter widgets using Mix. Write class names such as `flex`, `gap-4`, and `text-lg` instead of composing stylers manually. Treat this package as a proof of concept. The API is unstable and will change without notice. + + This package was published as `mix_tailwinds` through `0.0.1-alpha.1` and is now `mix_winds`. + To migrate, rename the dependency and replace `package:mix_tailwinds/mix_tailwinds.dart` imports + with `package:mix_winds/mix_winds.dart`. No public API symbol changed. + + ## Interactive Preview - + The card alert above demonstrates gradients, glassmorphism, badges, hover states, and nested flex layouts — all expressed through class name strings: ```dart import 'package:flutter/material.dart'; -import 'package:mix_tailwinds/mix_tailwinds.dart'; +import 'package:mix_winds/mix_winds.dart'; class CardAlert extends StatelessWidget { const CardAlert({super.key}); @@ -110,8 +116,8 @@ class CardAlert extends StatelessWidget { The following resources point to the package registry and source code: -- [Pub package](https://pub.dev/packages/mix_tailwinds) -- [GitHub source](https://github.com/btwld/mix/tree/main/packages/mix_tailwinds) +- [Pub package](https://pub.dev/packages/mix_winds) +- [GitHub source](https://github.com/btwld/mix/tree/main/packages/mix_winds) ## Install @@ -119,17 +125,17 @@ From pub.dev: ```yaml dependencies: - mix_tailwinds: 0.0.1-alpha.1 + mix_winds: 0.1.0-alpha.0 ``` From the Git repository (latest unreleased changes): ```yaml dependencies: - mix_tailwinds: + mix_winds: git: url: https://github.com/btwld/mix.git - path: packages/mix_tailwinds + path: packages/mix_winds ``` ## Quick start @@ -138,7 +144,7 @@ Wrap your app with `TwScope`, then use `Div` and `Span` to build layouts with Ta ```dart import 'package:flutter/material.dart'; -import 'package:mix_tailwinds/mix_tailwinds.dart'; +import 'package:mix_winds/mix_winds.dart'; void main() { runApp( @@ -151,7 +157,7 @@ void main() { 'flex flex-col gap-4 p-6 bg-white rounded-xl shadow-md', children: [ Span( - text: 'Hello mix_tailwinds', + text: 'Hello mix_winds', classNames: 'text-2xl font-bold text-gray-900', ), Span( @@ -172,7 +178,7 @@ This renders a white rounded card with a title and subtitle, using only class na ## Widget API -The following table lists all widgets provided by `mix_tailwinds`: +The following table lists all widgets provided by `mix_winds`: | Widget | Purpose | |--------|---------| @@ -368,7 +374,7 @@ Div(classNames: '-mt-4 -translate-x-8') ## Defaults and typography configuration - `mix_tailwinds` applies default typography through `TwScope` using Mix's token and text scope system. + `mix_winds` applies default typography through `TwScope` using Mix's token and text scope system. Prefer this over overriding `ThemeData.textTheme` when configuring default text styles. @@ -407,6 +413,6 @@ The following features are parsed but not applied or have incomplete support: ## Related docs - [Introduction](/documentation/mix/overview/introduction) — what Mix is and why it exists -- [Styling](/documentation/mix/guides/styling) — the Styler pattern that `mix_tailwinds` builds on +- [Styling](/documentation/mix/guides/styling) — the Styler pattern that `mix_winds` builds on - [Dynamic Styling](/documentation/mix/guides/dynamic-styling) — variants (hover, dark mode) used by tailwind prefixes - [Design Tokens](/documentation/mix/guides/design-token) — token system that powers `TwScope` configuration diff --git a/src/content/documentation/mix/overview/getting-started.mdx b/src/content/documentation/mix/overview/getting-started.mdx index 2b611cb5..957d107f 100644 --- a/src/content/documentation/mix/overview/getting-started.mdx +++ b/src/content/documentation/mix/overview/getting-started.mdx @@ -97,6 +97,6 @@ final box2 = Box( - [Design Tokens and Theming](/documentation/mix/guides/design-token) — reusable tokens for colors, spacing, and radii - [Widget Reference](/documentation/mix/widgets/stylewidgets) — all available Mix widgets (Box, FlexBox, Text, Icon, and more) - [Widget Modifiers](/documentation/mix/guides/widget-modifiers) — opacity, clipping, visibility, and other widget wrappers -- [mix_tailwinds Ecosystem Package](/documentation/mix/ecosystem/mix-tailwinds) — utility-first styling inspired by Tailwind CSS +- [mix_winds Ecosystem Package](/documentation/mix/ecosystem/mix-winds) — utility-first styling inspired by Tailwind CSS From fda4594abc7e2ebeeea44e1b09012717532d43f4 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Sat, 8 Aug 2026 14:34:29 -0400 Subject: [PATCH 2/2] build(mix-winds): pin the preview build to the mix_winds rename commit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit mix_winds is not on pub.dev under its new name yet, so the preview package resolves it from btwld/mix at the rename commit. mix_winds also calls Mix APIs that only exist in the monorepo — onFocusVisible and Pressable.semanticsLabel are absent from every published mix release, including 2.2.0-beta.2 — and remix pins mix from pub.dev, so version solving cannot reconcile the two sources. A dependency_overrides entry puts the whole preview build on the same Mix commit. Both pins revert to hosted once a mix prerelease ships those APIs and mix_winds 0.1.0-alpha.0 is published. mix_docs_preview is publish_to: none, so this only affects the docs preview build. --- packages/mix_docs_preview/pubspec.lock | 24 +++++++++++++----------- packages/mix_docs_preview/pubspec.yaml | 22 +++++++++++++++++++++- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/mix_docs_preview/pubspec.lock b/packages/mix_docs_preview/pubspec.lock index 3f3e4b38..31b9fe6c 100644 --- a/packages/mix_docs_preview/pubspec.lock +++ b/packages/mix_docs_preview/pubspec.lock @@ -142,11 +142,12 @@ packages: mix: dependency: "direct main" description: - name: mix - sha256: ed8382ac70d5d85c3d0f753c9f8f68f61d74958afbd05f3e3d7144a11ab8efad - url: "https://pub.dev" - source: hosted - version: "2.1.0" + path: "packages/mix" + ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb + resolved-ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb + url: "https://github.com/btwld/mix.git" + source: git + version: "2.2.0-beta.2" mix_annotations: dependency: transitive description: @@ -155,14 +156,15 @@ packages: url: "https://pub.dev" source: hosted version: "2.2.0-beta.0" - mix_tailwinds: + mix_winds: dependency: "direct main" description: - name: mix_tailwinds - sha256: "362f00e3ebf9f960c84b790faabe83f9e9e2dafaa2c6140a24954b857f820309" - url: "https://pub.dev" - source: hosted - version: "0.0.1-alpha.1" + path: "packages/mix_winds" + ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb + resolved-ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb + url: "https://github.com/btwld/mix.git" + source: git + version: "0.1.0-alpha.0" naked_ui: dependency: transitive description: diff --git a/packages/mix_docs_preview/pubspec.yaml b/packages/mix_docs_preview/pubspec.yaml index d3c0c104..00dc1837 100644 --- a/packages/mix_docs_preview/pubspec.yaml +++ b/packages/mix_docs_preview/pubspec.yaml @@ -12,7 +12,15 @@ dependencies: flutter: sdk: flutter mix: ^2.1.0 - mix_winds: ^0.1.0-alpha.0 + # mix_winds was renamed from mix_tailwinds and is not on pub.dev under the new + # name yet, so it is pinned to the rename commit on btwld/mix main. Revert to + # a hosted `mix_winds: ^0.1.0-alpha.0` once it is published. This package is + # publish_to: none, so the git pin only affects the docs preview build. + mix_winds: + git: + url: https://github.com/btwld/mix.git + path: packages/mix_winds + ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb remix: git: url: https://github.com/btwld/remix.git @@ -25,5 +33,17 @@ dev_dependencies: dart_code_metrics_presets: ^2.24.0 flutter_lints: ^6.0.0 +# mix_winds uses Mix APIs (onFocusVisible, Pressable.semanticsLabel) that exist +# in the monorepo but not in any published mix release, and remix pins mix from +# pub.dev, so the two sources cannot be reconciled by version solving alone. +# Overriding mix onto the same commit keeps the whole preview build on one Mix. +# Remove this once a mix prerelease ships those APIs. +dependency_overrides: + mix: + git: + url: https://github.com/btwld/mix.git + path: packages/mix + ref: e3133c3565e0c788b3f05f889ed75cb83f8acecb + flutter: uses-material-design: true