@birdycom/omniacss-migrate 0.0.0-stage → 0.11.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Serge Cools (Birdycom)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,129 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @birdycom/omniacss-migrate
+
+Switch a **Laravel, Vue or React** project from Tailwind CSS to OmniaCSS **and keep your class names**.
+`flex items-center gap-4 p-4 md:p-8 bg-white dark:bg-gray-900 hover:bg-red-500/50 w-[37px]` keeps working: the classes are resolved on demand and emitted as CSS that only uses OmniaCSS tokens (Omnia palette in OKLCH, `rem` scales, Omnia shadows and breakpoints).
+
+Coming from **Bootstrap 3, 4 or 5**? See [From Bootstrap](#from-bootstrap).
+
+> This is the only package that names Tailwind and Bootstrap, because it is a migration tool.
+
+## Laravel in 3 steps
+
+```bash
+# 1. see what changes (dry run, nothing is written) and how much of your markup is covered
+npx @birdycom/omniacss-migrate scan .
+npx @birdycom/omniacss-migrate setup .
+
+# 2. apply the switch: removes the Tailwind packages from package.json, swaps the Vite/PostCSS plugin, carries your theme into CSS
+npx @birdycom/omniacss-migrate setup . --write
+npm uninstall tailwindcss @tailwindcss/vite @tailwindcss/postcss && npm install -D @birdycom/omniacss-migrate
+
+# 3. build as usual
+npm run dev
+```
+
+Your Blade, Vue and React files stay exactly as they are. By hand it is two edits:
+
+```js
+// vite.config.js
+import omniaMigrate from "@birdycom/omniacss-migrate/vite";   // was: import tailwindcss from "@tailwindcss/vite"
+export default defineConfig({ plugins: [laravel({ input: ["resources/css/app.css", "resources/js/app.js"] }), omniaMigrate()] });
+```
+
+```css
+/* resources/css/app.css: unchanged. Both forms are understood: */
+@import "tailwindcss";
+/* or */
+@tailwind base; @tailwind components; @tailwind utilities;
+```
+
+Not using Vite? Use the PostCSS plugin instead:
+
+```js
+// postcss.config.js
+import omniaMigrate from "@birdycom/omniacss-migrate/postcss";
+export default { plugins: [omniaMigrate({ content: ["resources/views/**/*.blade.php", "resources/js/**/*.{vue,tsx,jsx,js}"] })] };
+```
+
+## What the plugin does
+
+- Replaces `@import "tailwindcss"` / `@tailwind base|components|utilities` with Omnia core (tokens + the Omnia classes you use), a small base reset and the compat CSS for the classes it finds in your content.
+- Expands `@apply` (with variants, `!important`, and your own classes), `theme(colors.red.500)`, `--spacing(4)`, `@theme`, `@custom-variant`, `@variant`, `@source`, `@source inline("…")`; ignores `@plugin` and `@config`.
+- Reads `tailwind.config.{js,cjs,mjs}` (`darkMode`, `theme.colors`/`extend.colors`, `fontFamily`, `borderRadius`, `spacing`, `boxShadow`, `screens`, `container`, `prefix`, `important`) and your `@theme` blocks.
+- Output is wrapped in cascade layers `omnia, theme, base, components, utilities`.
+
+Class coverage: layout, flex/grid, spacing, sizing, typography, colors (text, bg, border, ring, outline, fill, stroke, divide, accent, caret, decoration, gradients `from-`/`via-`/`to-`), borders, radius, shadow, ring, opacity, filters and backdrop filters, transitions, animations, transforms, display, position, z-index, overflow, cursor, scroll snap, `tailwindcss-animate` classes, arbitrary values (`w-[37px]`, `bg-(--brand)`, `[mask-type:luminance]`), opacity modifiers (`bg-red-500/50`), negatives (`-mt-2`), `!important`, and variants `hover: focus: active: disabled: first: odd: before: after: placeholder: file: marker: selection:`, `sm: md: lg: xl: 2xl: max-md: min-[…]:`, `@md:` container queries, `dark:`, `group-*`, `peer-*`, `data-[…]:`, `aria-*:`, `has-[…]:`, `not-*`, `in-*`, `supports-[…]:`, `*:`, arbitrary variants `[&>svg]:`, `motion-safe:`, `print:`, `rtl:`.
+
+### Colors
+
+Tailwind palette names map to the **nearest Omnia palette token** (`src/data/colors.json`, generated by `scripts/build-color-map.mjs` with `nearestOmnia()`): `bg-red-500` becomes `var(--color-red-50)`. Arbitrary colors (`bg-[#0041a7]`) are mapped to the nearest token too (`arbitraryColors: "keep"` keeps the literal). Opacity modifiers use `color-mix(in oklab, <token> 50%, transparent)`.
+Colors from `tailwind.config` are mapped to Omnia tokens as well (`--keep-brand-colors` / `keepBrandColors` keeps them); values that are `var(...)`/`hsl(var(...))` (shadcn style) stay as you wrote them.
+
+### Scales
+
+Spacing, sizing, font sizes, radius, blur and containers use the familiar numbers (`p-4` = `1rem`). Shadows reuse Omnia's own shadow values. Breakpoints follow OmniaCSS (`sm` 36rem, `md` 50rem, `lg` 64rem; `xl` 80rem and `2xl` 96rem exist for compatibility). Use `breakpoints: "tailwind"` for 40/48/64/80/96rem.
+
+Names that exist in both systems (`p-4`, `flex`, `shadow-md` …) never collide: classes the compat layer resolves are removed from the Omnia core output.
+
+## CLI
+
+```text
+omniacss-migrate scan <dir>                    coverage: % of class occurrences supported + the unsupported list
+omniacss-migrate setup <project> [--write]     plan (dry run) or apply: package.json, vite/postcss config, CSS @theme + dark mode
+omniacss-migrate codemod <dir> [--write]       rewrite to native OmniaCSS class names where the CSS is identical
+omniacss-migrate build [-c glob] [-o file]     write the CSS once (no Vite or PostCSS)
+omniacss-migrate css "md:hover:bg-red-500/50"  print the CSS for one class
+```
+
+`omniacss migrate scan .` does the same through the main CLI (`npm i -D @birdycom/omniacss-migrate`).
+
+`setup` and `codemod` are dry runs unless you pass `--write`. Commit first: the files are changed in place.
+
+## Codemod (optional)
+
+`codemod` rewrites `class`/`className`/`cn()`/`cva()` strings to **native** OmniaCSS names when an Omnia class has exactly the same declarations (for example `items-center` becomes `align-items-center`, `p-4` becomes `p-1`). Everything else is left alone and listed. After `--write` the file `omniacss-migrate.manifest.json` tells the compat layer which names are now native, so `p-1` (Omnia, `1rem`) is never confused with the old `p-1` (`0.25rem`). Run it over the whole project, not a single folder.
+
+## From Bootstrap
+
+```bash
+npx @birdycom/omniacss-migrate bootstrap scan .              # report only
+npx @birdycom/omniacss-migrate bootstrap codemod . --write   # apply (commit first)
+npx omniacss build -o css/omnia.css                          # OmniaCSS for exactly the classes you use
+```
+
+Works on HTML, PHP, Blade, Twig, ERB, Vue and JSX templates; template code inside a class attribute (`<?php … ?>`, `{{ … }}`) is left untouched.
+
+- **Utilities** become the OmniaCSS class with the same declarations, looked up in the installed OmniaCSS build: `mt-3` (1rem) becomes `mt-1`, `d-md-none` becomes `md:d-none`, `justify-content-between` becomes `justify-between`. Theme colors (`text-primary`, `bg-dark`, `border-danger`) map to the nearest Omnia token.
+- **Components** become OmniaUI classes: `btn btn-primary` → `oc-btn`, `alert alert-danger` → `oc-alert oc-alert--danger`, `form-control` → `oc-input` (`oc-select` on a `<select>`), `card-body`/`panel-body` → `oc-card-content`, `table table-striped` → `oc-table oc-table--striped`.
+- **Grid** classes (`container`, `row`, `col-*`, `offset-*`, `g-*`, `row-cols-*`) stay, served by a generated `bootstrap-compat.css` with only the classes in use, at OmniaCSS breakpoints. Utilities without an OmniaCSS twin (`border` 1px, `z-1`, `mt-n1`) keep their exact CSS in the same file.
+- **JavaScript components** (modal, dropdown, collapse, carousel, navbar, tabs, offcanvas, toast) and icon fonts are reported with the native replacement (`<dialog>` + `commandfor`, popover, `<details>`, scroll snap).
+- The Bootstrap `<link>` is replaced by `omnia.css`, the OmniaUI CSS and `bootstrap-compat.css` in the same asset folder.
+- The report lists classes your JavaScript toggles (`classList.add('btn-primary')`) and Bootstrap 3 classes in a newer site, split into "still styled by your CSS" and "safe to delete".
+- `--write` records the classes it produced in `omniacss-migrate.bootstrap.json`, so running it again never reads the new `mt-1` (OmniaCSS, 1rem) as Bootstrap's `mt-1` (0.25rem).
+
+Options: `--bs 3|4|5` (default: detected from `package.json`, the `<link>`, a local `bootstrap.css` or the markup), `--breakpoints exact` (keep Bootstrap's pixel breakpoints as `min-[48rem]:`), `--compat <file>`, `--omnia-href`, `--omniaui-href`, `--compat-href`.
+
+## Options (PostCSS / Vite)
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `content` | detected (Laravel, Astro, Nuxt, Vite) | globs with class names; `@source` is honoured too |
+| `core` | `true` | `true` Omnia core on demand, `"tokens"` only the color tokens and base, `false` you load Omnia yourself |
+| `preflight` | `true` | include the base reset |
+| `layers` | `true` | cascade layers |
+| `tailwind` | detected | `3` or `4` naming (`shadow-sm`, `rounded-sm`, `ring`, `blur-sm` differ) |
+| `darkMode` | detected | `"class"` (`.dark`) or `"media"` |
+| `breakpoints` | `"omnia"` | or `"tailwind"` |
+| `arbitraryColors` | `"nearest"` | or `"keep"` |
+| `safelist` | `[]` | extra classes |
+
+## Known gaps
+
+- Plugin classes other than `tailwindcss-animate` (typography `prose`, forms, Iconify `icon-[…]`, container-queries plugin utilities) are not generated.
+- `theme.extend.keyframes`/`animation` from `tailwind.config` are not carried over.
+- `bg-opacity-*`/`text-opacity-*` (Tailwind 2 style) and `mask-*` utilities are not generated.
+- Classes assembled from fragments at runtime (`"bg-" + color + "-500"`) cannot be found by any scanner: add them to `safelist`.
+- Breakpoints, shadows and nearest-palette colors differ slightly from Tailwind by design: check the result visually.
+- The first build parses the full Omnia CSS (a few seconds); later builds are cached. `core: "tokens"` is instant.
+
+Node.js 22+. MIT

package/bin/omniacss-migrate.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+// File: packages/migrate/bin/omniacss-migrate.mjs
+// Author: Serge Cools | Framework: OmniaCSS
+import { run } from "../src/cli.mjs";
+
+run().catch((err) => {
+  console.error(err.message || err);
+  process.exitCode = 1;
+});

package/package.json

@@ -1,6 +1,61 @@
-{
-  "name": "@birdycom/omniacss-migrate",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@birdycom/omniacss-migrate",
+  "version": "0.11.1",
+  "description": "Switch a Laravel / Vue / React project from Tailwind CSS to OmniaCSS and keep your class names (PostCSS + Vite plugin, scan, setup, codemod), or convert a Bootstrap 3/4/5 site to OmniaCSS + OmniaUI.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniacss.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaCSS.git",
+    "directory": "packages/migrate"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaCSS/issues"
+  },
+  "keywords": [
+    "css",
+    "migration",
+    "tailwind",
+    "bootstrap",
+    "laravel",
+    "vite",
+    "postcss",
+    "codemod",
+    "omniacss"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "bin": {
+    "omniacss-migrate": "./bin/omniacss-migrate.mjs"
+  },
+  "exports": {
+    ".": "./src/index.mjs",
+    "./postcss": "./src/postcss.mjs",
+    "./vite": "./src/vite.mjs",
+    "./cli": "./src/cli.mjs",
+    "./colors.json": "./src/data/colors.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "bin",
+    "src",
+    "scripts",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --test \"test/*.test.mjs\"",
+    "build:colors": "node scripts/build-color-map.mjs"
+  },
+  "dependencies": {
+    "@birdycom/omniacss": "^0.11.1",
+    "postcss": "^8.5.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}

package/scripts/build-color-map.mjs

@@ -0,0 +1,31 @@
+// File: packages/migrate/scripts/build-color-map.mjs
+// Build-time: maps every Tailwind default palette color to the nearest Omnia token (OKLab distance)
+// and writes src/data/colors.json. Run: node packages/migrate/scripts/build-color-map.mjs
+// Author: Serge Cools | Framework: OmniaCSS
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { nearestOmnia } from "../../../scripts/lib/omnia-color.mjs";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(here, "../../..");
+const { colors } = JSON.parse(fs.readFileSync(path.join(here, "tailwind-palette.json"), "utf8"));
+
+/** oklch(L% C H) -> #rrggbb (gamut clipped). */
+function oklchToHex(str) {
+  const [, L, C, H] = str.match(/oklch\(([\d.]+)% ([\d.]+) ([\d.]+)\)/).map(Number);
+  const l = L / 100, a = C * Math.cos((H * Math.PI) / 180), b = C * Math.sin((H * Math.PI) / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_, -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_, -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_];
+  const enc = (v) => { v = Math.min(1, Math.max(0, v)); return Math.round((v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055) * 255); };
+  return "#" + lin.map((v) => enc(v).toString(16).padStart(2, "0")).join("");
+}
+
+const map = { black: "--color-black-100", white: "--color-white-100" };
+for (const [name, value] of Object.entries(colors)) map[name] = nearestOmnia(oklchToHex(value), root).token;
+const sorted = Object.fromEntries(Object.entries(map).sort(([a], [b]) => a.localeCompare(b, "en", { numeric: true })));
+fs.writeFileSync(path.join(here, "../src/data/colors.json"), JSON.stringify(sorted, null, 1) + "\n");
+console.log(`colors.json: ${Object.keys(sorted).length} entries`);

package/scripts/extract-palette.mjs

@@ -0,0 +1,13 @@
+// File: packages/migrate/scripts/extract-palette.mjs
+// One-off helper: re-extract the default palette (oklch) from an installed tailwindcss theme.css into tailwind-palette.json.
+// Usage: node scripts/extract-palette.mjs <path/to/node_modules/tailwindcss/theme.css>
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const css = fs.readFileSync(process.argv[2], "utf8");
+const colors = {};
+for (const m of css.matchAll(/--color-([a-z]+-\d+):\s*oklch\(([\d.]+)%\s+([\d.]+)\s+(none|[\d.]+)\)/g)) colors[m[1]] = `oklch(${m[2]}% ${m[3]} ${m[4] === "none" ? 0 : m[4]})`;
+fs.writeFileSync(path.join(here, "tailwind-palette.json"), JSON.stringify({ _note: "Tailwind default palette (oklch), input for build-color-map.mjs", colors }, null, 1));
+console.log(Object.keys(colors).length, "colors");

package/scripts/tailwind-palette.json

@@ -0,0 +1,291 @@
+{
+ "_note": "Tailwind default palette (oklch), input for build-color-map.mjs",
+ "colors": {
+  "red-50": "oklch(97.1% 0.013 17.38)",
+  "red-100": "oklch(93.6% 0.032 17.717)",
+  "red-200": "oklch(88.5% 0.062 18.334)",
+  "red-300": "oklch(80.8% 0.114 19.571)",
+  "red-400": "oklch(70.4% 0.191 22.216)",
+  "red-500": "oklch(63.7% 0.237 25.331)",
+  "red-600": "oklch(57.7% 0.245 27.325)",
+  "red-700": "oklch(50.5% 0.213 27.518)",
+  "red-800": "oklch(44.4% 0.177 26.899)",
+  "red-900": "oklch(39.6% 0.141 25.723)",
+  "red-950": "oklch(25.8% 0.092 26.042)",
+  "orange-50": "oklch(98% 0.016 73.684)",
+  "orange-100": "oklch(95.4% 0.038 75.164)",
+  "orange-200": "oklch(90.1% 0.076 70.697)",
+  "orange-300": "oklch(83.7% 0.128 66.29)",
+  "orange-400": "oklch(75% 0.183 55.934)",
+  "orange-500": "oklch(70.5% 0.213 47.604)",
+  "orange-600": "oklch(64.6% 0.222 41.116)",
+  "orange-700": "oklch(55.3% 0.195 38.402)",
+  "orange-800": "oklch(47% 0.157 37.304)",
+  "orange-900": "oklch(40.8% 0.123 38.172)",
+  "orange-950": "oklch(26.6% 0.079 36.259)",
+  "amber-50": "oklch(98.7% 0.022 95.277)",
+  "amber-100": "oklch(96.2% 0.059 95.617)",
+  "amber-200": "oklch(92.4% 0.12 95.746)",
+  "amber-300": "oklch(87.9% 0.169 91.605)",
+  "amber-400": "oklch(82.8% 0.189 84.429)",
+  "amber-500": "oklch(76.9% 0.188 70.08)",
+  "amber-600": "oklch(66.6% 0.179 58.318)",
+  "amber-700": "oklch(55.5% 0.163 48.998)",
+  "amber-800": "oklch(47.3% 0.137 46.201)",
+  "amber-900": "oklch(41.4% 0.112 45.904)",
+  "amber-950": "oklch(27.9% 0.077 45.635)",
+  "yellow-50": "oklch(98.7% 0.026 102.212)",
+  "yellow-100": "oklch(97.3% 0.071 103.193)",
+  "yellow-200": "oklch(94.5% 0.129 101.54)",
+  "yellow-300": "oklch(90.5% 0.182 98.111)",
+  "yellow-400": "oklch(85.2% 0.199 91.936)",
+  "yellow-500": "oklch(79.5% 0.184 86.047)",
+  "yellow-600": "oklch(68.1% 0.162 75.834)",
+  "yellow-700": "oklch(55.4% 0.135 66.442)",
+  "yellow-800": "oklch(47.6% 0.114 61.907)",
+  "yellow-900": "oklch(42.1% 0.095 57.708)",
+  "yellow-950": "oklch(28.6% 0.066 53.813)",
+  "lime-50": "oklch(98.6% 0.031 120.757)",
+  "lime-100": "oklch(96.7% 0.067 122.328)",
+  "lime-200": "oklch(93.8% 0.127 124.321)",
+  "lime-300": "oklch(89.7% 0.196 126.665)",
+  "lime-400": "oklch(84.1% 0.238 128.85)",
+  "lime-500": "oklch(76.8% 0.233 130.85)",
+  "lime-600": "oklch(64.8% 0.2 131.684)",
+  "lime-700": "oklch(53.2% 0.157 131.589)",
+  "lime-800": "oklch(45.3% 0.124 130.933)",
+  "lime-900": "oklch(40.5% 0.101 131.063)",
+  "lime-950": "oklch(27.4% 0.072 132.109)",
+  "green-50": "oklch(98.2% 0.018 155.826)",
+  "green-100": "oklch(96.2% 0.044 156.743)",
+  "green-200": "oklch(92.5% 0.084 155.995)",
+  "green-300": "oklch(87.1% 0.15 154.449)",
+  "green-400": "oklch(79.2% 0.209 151.711)",
+  "green-500": "oklch(72.3% 0.219 149.579)",
+  "green-600": "oklch(62.7% 0.194 149.214)",
+  "green-700": "oklch(52.7% 0.154 150.069)",
+  "green-800": "oklch(44.8% 0.119 151.328)",
+  "green-900": "oklch(39.3% 0.095 152.535)",
+  "green-950": "oklch(26.6% 0.065 152.934)",
+  "emerald-50": "oklch(97.9% 0.021 166.113)",
+  "emerald-100": "oklch(95% 0.052 163.051)",
+  "emerald-200": "oklch(90.5% 0.093 164.15)",
+  "emerald-300": "oklch(84.5% 0.143 164.978)",
+  "emerald-400": "oklch(76.5% 0.177 163.223)",
+  "emerald-500": "oklch(69.6% 0.17 162.48)",
+  "emerald-600": "oklch(59.6% 0.145 163.225)",
+  "emerald-700": "oklch(50.8% 0.118 165.612)",
+  "emerald-800": "oklch(43.2% 0.095 166.913)",
+  "emerald-900": "oklch(37.8% 0.077 168.94)",
+  "emerald-950": "oklch(26.2% 0.051 172.552)",
+  "teal-50": "oklch(98.4% 0.014 180.72)",
+  "teal-100": "oklch(95.3% 0.051 180.801)",
+  "teal-200": "oklch(91% 0.096 180.426)",
+  "teal-300": "oklch(85.5% 0.138 181.071)",
+  "teal-400": "oklch(77.7% 0.152 181.912)",
+  "teal-500": "oklch(70.4% 0.14 182.503)",
+  "teal-600": "oklch(60% 0.118 184.704)",
+  "teal-700": "oklch(51.1% 0.096 186.391)",
+  "teal-800": "oklch(43.7% 0.078 188.216)",
+  "teal-900": "oklch(38.6% 0.063 188.416)",
+  "teal-950": "oklch(27.7% 0.046 192.524)",
+  "cyan-50": "oklch(98.4% 0.019 200.873)",
+  "cyan-100": "oklch(95.6% 0.045 203.388)",
+  "cyan-200": "oklch(91.7% 0.08 205.041)",
+  "cyan-300": "oklch(86.5% 0.127 207.078)",
+  "cyan-400": "oklch(78.9% 0.154 211.53)",
+  "cyan-500": "oklch(71.5% 0.143 215.221)",
+  "cyan-600": "oklch(60.9% 0.126 221.723)",
+  "cyan-700": "oklch(52% 0.105 223.128)",
+  "cyan-800": "oklch(45% 0.085 224.283)",
+  "cyan-900": "oklch(39.8% 0.07 227.392)",
+  "cyan-950": "oklch(30.2% 0.056 229.695)",
+  "sky-50": "oklch(97.7% 0.013 236.62)",
+  "sky-100": "oklch(95.1% 0.026 236.824)",
+  "sky-200": "oklch(90.1% 0.058 230.902)",
+  "sky-300": "oklch(82.8% 0.111 230.318)",
+  "sky-400": "oklch(74.6% 0.16 232.661)",
+  "sky-500": "oklch(68.5% 0.169 237.323)",
+  "sky-600": "oklch(58.8% 0.158 241.966)",
+  "sky-700": "oklch(50% 0.134 242.749)",
+  "sky-800": "oklch(44.3% 0.11 240.79)",
+  "sky-900": "oklch(39.1% 0.09 240.876)",
+  "sky-950": "oklch(29.3% 0.066 243.157)",
+  "blue-50": "oklch(97% 0.014 254.604)",
+  "blue-100": "oklch(93.2% 0.032 255.585)",
+  "blue-200": "oklch(88.2% 0.059 254.128)",
+  "blue-300": "oklch(80.9% 0.105 251.813)",
+  "blue-400": "oklch(70.7% 0.165 254.624)",
+  "blue-500": "oklch(62.3% 0.214 259.815)",
+  "blue-600": "oklch(54.6% 0.245 262.881)",
+  "blue-700": "oklch(48.8% 0.243 264.376)",
+  "blue-800": "oklch(42.4% 0.199 265.638)",
+  "blue-900": "oklch(37.9% 0.146 265.522)",
+  "blue-950": "oklch(28.2% 0.091 267.935)",
+  "indigo-50": "oklch(96.2% 0.018 272.314)",
+  "indigo-100": "oklch(93% 0.034 272.788)",
+  "indigo-200": "oklch(87% 0.065 274.039)",
+  "indigo-300": "oklch(78.5% 0.115 274.713)",
+  "indigo-400": "oklch(67.3% 0.182 276.935)",
+  "indigo-500": "oklch(58.5% 0.233 277.117)",
+  "indigo-600": "oklch(51.1% 0.262 276.966)",
+  "indigo-700": "oklch(45.7% 0.24 277.023)",
+  "indigo-800": "oklch(39.8% 0.195 277.366)",
+  "indigo-900": "oklch(35.9% 0.144 278.697)",
+  "indigo-950": "oklch(25.7% 0.09 281.288)",
+  "violet-50": "oklch(96.9% 0.016 293.756)",
+  "violet-100": "oklch(94.3% 0.029 294.588)",
+  "violet-200": "oklch(89.4% 0.057 293.283)",
+  "violet-300": "oklch(81.1% 0.111 293.571)",
+  "violet-400": "oklch(70.2% 0.183 293.541)",
+  "violet-500": "oklch(60.6% 0.25 292.717)",
+  "violet-600": "oklch(54.1% 0.281 293.009)",
+  "violet-700": "oklch(49.1% 0.27 292.581)",
+  "violet-800": "oklch(43.2% 0.232 292.759)",
+  "violet-900": "oklch(38% 0.189 293.745)",
+  "violet-950": "oklch(28.3% 0.141 291.089)",
+  "purple-50": "oklch(97.7% 0.014 308.299)",
+  "purple-100": "oklch(94.6% 0.033 307.174)",
+  "purple-200": "oklch(90.2% 0.063 306.703)",
+  "purple-300": "oklch(82.7% 0.119 306.383)",
+  "purple-400": "oklch(71.4% 0.203 305.504)",
+  "purple-500": "oklch(62.7% 0.265 303.9)",
+  "purple-600": "oklch(55.8% 0.288 302.321)",
+  "purple-700": "oklch(49.6% 0.265 301.924)",
+  "purple-800": "oklch(43.8% 0.218 303.724)",
+  "purple-900": "oklch(38.1% 0.176 304.987)",
+  "purple-950": "oklch(29.1% 0.149 302.717)",
+  "fuchsia-50": "oklch(97.7% 0.017 320.058)",
+  "fuchsia-100": "oklch(95.2% 0.037 318.852)",
+  "fuchsia-200": "oklch(90.3% 0.076 319.62)",
+  "fuchsia-300": "oklch(83.3% 0.145 321.434)",
+  "fuchsia-400": "oklch(74% 0.238 322.16)",
+  "fuchsia-500": "oklch(66.7% 0.295 322.15)",
+  "fuchsia-600": "oklch(59.1% 0.293 322.896)",
+  "fuchsia-700": "oklch(51.8% 0.253 323.949)",
+  "fuchsia-800": "oklch(45.2% 0.211 324.591)",
+  "fuchsia-900": "oklch(40.1% 0.17 325.612)",
+  "fuchsia-950": "oklch(29.3% 0.136 325.661)",
+  "pink-50": "oklch(97.1% 0.014 343.198)",
+  "pink-100": "oklch(94.8% 0.028 342.258)",
+  "pink-200": "oklch(89.9% 0.061 343.231)",
+  "pink-300": "oklch(82.3% 0.12 346.018)",
+  "pink-400": "oklch(71.8% 0.202 349.761)",
+  "pink-500": "oklch(65.6% 0.241 354.308)",
+  "pink-600": "oklch(59.2% 0.249 0.584)",
+  "pink-700": "oklch(52.5% 0.223 3.958)",
+  "pink-800": "oklch(45.9% 0.187 3.815)",
+  "pink-900": "oklch(40.8% 0.153 2.432)",
+  "pink-950": "oklch(28.4% 0.109 3.907)",
+  "rose-50": "oklch(96.9% 0.015 12.422)",
+  "rose-100": "oklch(94.1% 0.03 12.58)",
+  "rose-200": "oklch(89.2% 0.058 10.001)",
+  "rose-300": "oklch(81% 0.117 11.638)",
+  "rose-400": "oklch(71.2% 0.194 13.428)",
+  "rose-500": "oklch(64.5% 0.246 16.439)",
+  "rose-600": "oklch(58.6% 0.253 17.585)",
+  "rose-700": "oklch(51.4% 0.222 16.935)",
+  "rose-800": "oklch(45.5% 0.188 13.697)",
+  "rose-900": "oklch(41% 0.159 10.272)",
+  "rose-950": "oklch(27.1% 0.105 12.094)",
+  "slate-50": "oklch(98.4% 0.003 247.858)",
+  "slate-100": "oklch(96.8% 0.007 247.896)",
+  "slate-200": "oklch(92.9% 0.013 255.508)",
+  "slate-300": "oklch(86.9% 0.022 252.894)",
+  "slate-400": "oklch(70.4% 0.04 256.788)",
+  "slate-500": "oklch(55.4% 0.046 257.417)",
+  "slate-600": "oklch(44.6% 0.043 257.281)",
+  "slate-700": "oklch(37.2% 0.044 257.287)",
+  "slate-800": "oklch(27.9% 0.041 260.031)",
+  "slate-900": "oklch(20.8% 0.042 265.755)",
+  "slate-950": "oklch(12.9% 0.042 264.695)",
+  "gray-50": "oklch(98.5% 0.002 247.839)",
+  "gray-100": "oklch(96.7% 0.003 264.542)",
+  "gray-200": "oklch(92.8% 0.006 264.531)",
+  "gray-300": "oklch(87.2% 0.01 258.338)",
+  "gray-400": "oklch(70.7% 0.022 261.325)",
+  "gray-500": "oklch(55.1% 0.027 264.364)",
+  "gray-600": "oklch(44.6% 0.03 256.802)",
+  "gray-700": "oklch(37.3% 0.034 259.733)",
+  "gray-800": "oklch(27.8% 0.033 256.848)",
+  "gray-900": "oklch(21% 0.034 264.665)",
+  "gray-950": "oklch(13% 0.028 261.692)",
+  "zinc-50": "oklch(98.5% 0 0)",
+  "zinc-100": "oklch(96.7% 0.001 286.375)",
+  "zinc-200": "oklch(92% 0.004 286.32)",
+  "zinc-300": "oklch(87.1% 0.006 286.286)",
+  "zinc-400": "oklch(70.5% 0.015 286.067)",
+  "zinc-500": "oklch(55.2% 0.016 285.938)",
+  "zinc-600": "oklch(44.2% 0.017 285.786)",
+  "zinc-700": "oklch(37% 0.013 285.805)",
+  "zinc-800": "oklch(27.4% 0.006 286.033)",
+  "zinc-900": "oklch(21% 0.006 285.885)",
+  "zinc-950": "oklch(14.1% 0.005 285.823)",
+  "neutral-50": "oklch(98.5% 0 0)",
+  "neutral-100": "oklch(97% 0 0)",
+  "neutral-200": "oklch(92.2% 0 0)",
+  "neutral-300": "oklch(87% 0 0)",
+  "neutral-400": "oklch(70.8% 0 0)",
+  "neutral-500": "oklch(55.6% 0 0)",
+  "neutral-600": "oklch(43.9% 0 0)",
+  "neutral-700": "oklch(37.1% 0 0)",
+  "neutral-800": "oklch(26.9% 0 0)",
+  "neutral-900": "oklch(20.5% 0 0)",
+  "neutral-950": "oklch(14.5% 0 0)",
+  "stone-50": "oklch(98.5% 0.001 106.423)",
+  "stone-100": "oklch(97% 0.001 106.424)",
+  "stone-200": "oklch(92.3% 0.003 48.717)",
+  "stone-300": "oklch(86.9% 0.005 56.366)",
+  "stone-400": "oklch(70.9% 0.01 56.259)",
+  "stone-500": "oklch(55.3% 0.013 58.071)",
+  "stone-600": "oklch(44.4% 0.011 73.639)",
+  "stone-700": "oklch(37.4% 0.01 67.558)",
+  "stone-800": "oklch(26.8% 0.007 34.298)",
+  "stone-900": "oklch(21.6% 0.006 56.043)",
+  "stone-950": "oklch(14.7% 0.004 49.25)",
+  "mauve-50": "oklch(98.5% 0 0)",
+  "mauve-100": "oklch(96% 0.003 325.6)",
+  "mauve-200": "oklch(92.2% 0.005 325.62)",
+  "mauve-300": "oklch(86.5% 0.012 325.68)",
+  "mauve-400": "oklch(71.1% 0.019 323.02)",
+  "mauve-500": "oklch(54.2% 0.034 322.5)",
+  "mauve-600": "oklch(43.5% 0.029 321.78)",
+  "mauve-700": "oklch(36.4% 0.029 323.89)",
+  "mauve-800": "oklch(26.3% 0.024 320.12)",
+  "mauve-900": "oklch(21.2% 0.019 322.12)",
+  "mauve-950": "oklch(14.5% 0.008 326)",
+  "olive-50": "oklch(98.8% 0.003 106.5)",
+  "olive-100": "oklch(96.6% 0.005 106.5)",
+  "olive-200": "oklch(93% 0.007 106.5)",
+  "olive-300": "oklch(88% 0.011 106.6)",
+  "olive-400": "oklch(73.7% 0.021 106.9)",
+  "olive-500": "oklch(58% 0.031 107.3)",
+  "olive-600": "oklch(46.6% 0.025 107.3)",
+  "olive-700": "oklch(39.4% 0.023 107.4)",
+  "olive-800": "oklch(28.6% 0.016 107.4)",
+  "olive-900": "oklch(22.8% 0.013 107.4)",
+  "olive-950": "oklch(15.3% 0.006 107.1)",
+  "mist-50": "oklch(98.7% 0.002 197.1)",
+  "mist-100": "oklch(96.3% 0.002 197.1)",
+  "mist-200": "oklch(92.5% 0.005 214.3)",
+  "mist-300": "oklch(87.2% 0.007 219.6)",
+  "mist-400": "oklch(72.3% 0.014 214.4)",
+  "mist-500": "oklch(56% 0.021 213.5)",
+  "mist-600": "oklch(45% 0.017 213.2)",
+  "mist-700": "oklch(37.8% 0.015 216)",
+  "mist-800": "oklch(27.5% 0.011 216.9)",
+  "mist-900": "oklch(21.8% 0.008 223.9)",
+  "mist-950": "oklch(14.8% 0.004 228.8)",
+  "taupe-50": "oklch(98.6% 0.002 67.8)",
+  "taupe-100": "oklch(96% 0.002 17.2)",
+  "taupe-200": "oklch(92.2% 0.005 34.3)",
+  "taupe-300": "oklch(86.8% 0.007 39.5)",
+  "taupe-400": "oklch(71.4% 0.014 41.2)",
+  "taupe-500": "oklch(54.7% 0.021 43.1)",
+  "taupe-600": "oklch(43.8% 0.017 39.3)",
+  "taupe-700": "oklch(36.7% 0.016 35.7)",
+  "taupe-800": "oklch(26.8% 0.011 36.5)",
+  "taupe-900": "oklch(21.4% 0.009 43.1)",
+  "taupe-950": "oklch(14.7% 0.004 49.3)"
+ }
+}

package/src/bootstrap/compat.mjs

@@ -0,0 +1,72 @@
+// File: packages/migrate/src/bootstrap/compat.mjs
+// The small stylesheet that keeps the Bootstrap grid (container, row, col-*, offset-*, g-*, row-cols-*) and the few
+// utilities without an OmniaCSS twin working, for exactly the classes a project uses. Colors are Omnia tokens.
+// Map: media query per breakpoint -> grid rule per class -> utility rule per class -> sorted CSS
+// Author: Serge Cools | Framework: OmniaCSS
+
+import { BREAKPOINTS, CONTAINERS, OMNIA_BREAKPOINTS, utilityDecls } from "./rules.mjs";
+import { bpVariant } from "./convert.mjs";
+
+const SPACE = { 0: "0", 1: "0.25rem", 2: "0.5rem", 3: "1rem", 4: "1.5rem", 5: "3rem" };
+const pct = (n, of) => `${+((n / of) * 100).toFixed(6)}%`;
+
+/** min-width in rem for a Bootstrap breakpoint, following the chosen breakpoint mode. */
+function minRem(bp, version, mode) {
+  const px = BREAKPOINTS[version][bp];
+  if (!px) return 0;
+  if (mode === "exact") return px / 16;
+  return OMNIA_BREAKPOINTS[bpVariant(bp, version, mode).slice(0, -1)] / 16;
+}
+
+/**
+ * @param {Iterable<string>} gridClasses grid classes found in the project
+ * @param {Iterable<string>} utilityClasses utilities without an OmniaCSS twin
+ * @param {{ version: 3|4|5, breakpoints?: "omnia"|"exact" }} o
+ */
+export function compatCss(gridClasses, utilityClasses, { version: v, breakpoints: mode = "omnia" }) {
+  const rules = []; // { at: rem, css }
+  const add = (at, css) => rules.push({ at, css });
+  const gutter = v === 3 ? "30px" : "1.5rem";
+  const grid = new Set(gridClasses);
+  let m;
+
+  if ([...grid].some((c) => c.startsWith("container"))) {
+    const list = [...grid].filter((c) => c.startsWith("container"));
+    add(0, `${list.map((c) => "." + c).join(", ")} {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: calc(${gutter} * 0.5);\n  max-width: none;\n}`);
+    for (const [bp, max] of Object.entries(CONTAINERS[v])) {
+      const sel = list.filter((c) => c === "container" || (/^container-(sm|md|lg|xl|xxl)$/.test(c) && BREAKPOINTS[v][c.slice(10)] <= BREAKPOINTS[v][bp]));
+      if (sel.length) add(minRem(bp, v, mode), `${sel.map((c) => "." + c).join(", ")} { max-width: ${max}px; }`);
+    }
+  }
+  if (grid.has("row") || [...grid].some((c) => /^(col|offset|g|row-cols)/.test(c))) {
+    add(0, `.row {\n  --oc-gutter-x: ${gutter};\n  --oc-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(-1 * var(--oc-gutter-y));\n  margin-inline: calc(-0.5 * var(--oc-gutter-x));\n}\n.row > * {\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%;\n  padding-inline: calc(var(--oc-gutter-x) * 0.5);\n  margin-top: var(--oc-gutter-y);\n}`);
+  }
+  for (const c of grid) {
+    // col, col-md, col-auto, col-md-auto
+    if ((m = c.match(/^col(?:-(sm|md|lg|xl|xxl))?$/))) add(minRem(m[1], v, mode), `.${c} { flex: 1 0 0%; }`);
+    else if ((m = c.match(/^col(?:-(sm|md|lg|xl|xxl))?-auto$/))) add(minRem(m[1], v, mode), `.${c} { flex: 0 0 auto; width: auto; }`);
+    else if ((m = c.match(/^col(?:-(xs|sm|md|lg|xl|xxl))?-(\d{1,2})$/))) add(m[1] === "xs" ? 0 : minRem(m[1], v, mode), `.${c} { flex: 0 0 auto; width: ${pct(+m[2], 12)}; }`);
+    else if ((m = c.match(/^offset(?:-(sm|md|lg|xl|xxl))?-(\d{1,2})$/)) || (m = c.match(/^col-(xs|sm|md|lg)-offset-(\d{1,2})$/))) add(m[1] === "xs" ? 0 : minRem(m[1], v, mode), `.${c} { margin-left: ${+m[2] ? pct(+m[2], 12) : "0"}; }`);
+    else if ((m = c.match(/^col-(xs|sm|md|lg)-(push|pull)-(\d{1,2})$/))) add(m[1] === "xs" ? 0 : minRem(m[1], v, mode), `.${c} { position: relative; ${m[2] === "push" ? "left" : "right"}: ${pct(+m[3], 12)}; }`);
+    else if ((m = c.match(/^row-cols(?:-(sm|md|lg|xl|xxl))?-(\d|auto)$/))) add(minRem(m[1], v, mode), `.${c} > * { flex: 0 0 auto; width: ${m[2] === "auto" ? "auto" : pct(1, +m[2])}; }`);
+    else if ((m = c.match(/^g([xy]?)(?:-(sm|md|lg|xl|xxl))?-([0-5])$/))) {
+      const vars = m[1] === "x" ? ["x"] : m[1] === "y" ? ["y"] : ["x", "y"];
+      add(minRem(m[2], v, mode), `.${c} { ${vars.map((a) => `--oc-gutter-${a}: ${SPACE[m[3]]};`).join(" ")} }`);
+    }
+  }
+  for (const c of utilityClasses) {
+    let base = c, at = 0;
+    if ((m = c.match(/^([a-z]+(?:-[a-z]+)*?)-(sm|md|lg|xl|xxl)-(.+)$/)) && BREAKPOINTS[v][m[2]]) { base = `${m[1]}-${m[3]}`; at = minRem(m[2], v, mode); }
+    const groups = utilityDecls(base, v);
+    if (groups) add(at, `.${c} { ${groups.flat().map((x) => x.replace(":", ": ") + ";").join(" ")} }`);
+  }
+
+  const byAt = new Map();
+  for (const r of rules) byAt.set(r.at, [...(byAt.get(r.at) || []), r.css]);
+  const out = [`/* Bootstrap ${v} compat for OmniaCSS — generated by omniacss-migrate (breakpoints: ${mode}).\n   Only the grid and the utilities without an OmniaCSS equivalent that this project uses. */`];
+  for (const at of [...byAt.keys()].sort((a, b) => a - b)) {
+    const body = byAt.get(at).join("\n");
+    out.push(at ? `@media (min-width: ${at}rem) {\n${body.replace(/^/gm, "  ")}\n}` : body);
+  }
+  return out.join("\n\n") + "\n";
+}