rainbowindex 0.0.0 → 0.1.4

package/LICENSE.md

@@ -0,0 +1,22 @@
+MIT License
+
+This project is a fork of Tailwind CSS v4.
+
+Portions of this software are derived from Tailwind CSS: Copyright (c) Tailwind Labs, Inc.
+
+The animation system is inspired by tw-animate-css: Copyright (c) 2025 Wombosvideo (Luca Bosin)
+
+Rainbow Index modifications and additions: Copyright (c) 2026 Milo Tech Forecast
+
+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

@@ -0,0 +1,192 @@
+# rainbowindex
+
+The core CSS compiler for Rainbow Index. This package handles parsing, transformation, and generation—everything needed
+to turn utility classes into CSS.
+
+The compiler has zero runtime dependencies and uses a custom CSS parser. Most projects will interact with Rainbow Index
+through the [Vite plugin](../vite) or [CLI](../cli), but direct access to the compiler is useful for building custom
+tooling or understanding how the system works.
+
+## Installation
+
+```bash
+npm install rainbowindex
+```
+
+## Usage
+
+### Compile Classes
+
+The most common operation: turn a list of utility class names into CSS.
+
+```typescript
+import { compileClasses, createDesignSystem } from "rainbowindex";
+
+const designSystem = createDesignSystem();
+
+const result = compileClasses(["p-4", "bg-blue-500", "hover:bg-blue-600"], {
+    designSystem,
+});
+
+console.log(result.css);
+// .p-4 { padding: 1rem; }
+// .bg-blue-500 { background-color: oklch(55.3% 0.213 253.075); }
+// .hover\:bg-blue-600:hover { background-color: oklch(47.4% 0.195 251.802); }
+```
+
+### Parse and Print CSS
+
+The parser produces an AST that can be inspected, transformed, or printed back to a string. This is useful for tools
+that need to analyze or modify CSS programmatically.
+
+```typescript
+import { parse, print } from "rainbowindex";
+
+const { ast } = parse(`
+  .button {
+    padding: 1rem;
+    background: blue;
+  }
+`);
+
+const output = print(ast);
+```
+
+### Transform CSS with Theme
+
+When processing CSS that contains Rainbow Index directives (`@theme`, `@apply`, etc.), use `transformCSS` to expand
+them.
+
+```typescript
+import { parse, transformCSS, createDesignSystem, print } from "rainbowindex";
+
+const designSystem = createDesignSystem();
+
+const { ast } = parse(`
+  @theme {
+    --color-primary: oklch(0.6 0.2 250);
+  }
+
+  .button {
+    background: var(--color-primary);
+  }
+`);
+
+const transformed = transformCSS(ast, { designSystem });
+const output = print(transformed);
+```
+
+## Directive Handling
+
+Rainbow Index processes `@rainbowindex` directives as injection points for generated styles. Unknown at-rules (including
+`@tailwind`) are preserved and pass through unchanged, rather than being treated as migration inputs.
+
+## API Reference
+
+### `compileClasses(candidates, options)`
+
+Compile utility class names into CSS.
+
+```typescript
+interface CompileOptions {
+    designSystem: DesignSystem;
+}
+
+interface CompileResult {
+    css: string;
+    classes: string[];
+}
+```
+
+### `createDesignSystem()`
+
+Create a design system instance with the default theme, utilities, and variants. The design system is the central
+registry that maps class names to CSS output.
+
+```typescript
+interface DesignSystem {
+    theme: Theme;
+    utilities: Utilities;
+    variants: Variants;
+    parseCandidate(candidate: string): Candidate[];
+    compileAstNodes(candidate: Candidate): AstNode[];
+    getClassOrder(classes: string[]): [string, bigint | null][];
+}
+```
+
+### `parse(css, options?)`
+
+Parse a CSS string into an AST.
+
+```typescript
+interface ParseOptions {
+    from?: string; // Source file path for source maps
+}
+
+interface ParseResult {
+    ast: AstNode[];
+}
+```
+
+### `print(ast, options?)`
+
+Convert an AST back to a CSS string.
+
+```typescript
+interface PrintOptions {
+    minify?: boolean;
+    indent?: string;
+}
+```
+
+### `transformCSS(ast, options)`
+
+Transform a CSS AST, processing `@theme`, `@apply`, and other directives.
+
+```typescript
+interface TransformOptions {
+    designSystem: DesignSystem;
+}
+```
+
+## Default Theme
+
+The default theme provides a comprehensive set of design tokens:
+
+**Colors** — Full OKLCH palette: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo,
+violet, purple, fuchsia, pink, rose.
+
+**Spacing** — Scale from 0 to 96: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32,
+36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96.
+
+**Typography** — Font sizes, weights, and line heights.
+
+**Breakpoints** — Numeric (rem-based) and named.
+
+## Utilities
+
+Core utilities included:
+
+- **Spacing**: `p-*`, `m-*`, `gap-*`, `space-*`
+- **Sizing**: `w-*`, `h-*`, `min-w-*`, `max-w-*`, `min-h-*`, `max-h-*`
+- **Colors**: `bg-*`, `text-*`, `border-*`
+- **Typography**: `font-*`, `text-*`, `leading-*`, `tracking-*`
+- **Layout**: `flex`, `grid`, `block`, `inline`, `hidden`
+- **Flexbox**: `flex-*`, `items-*`, `justify-*`, `grow-*`, `shrink-*`
+- **Grid**: `grid-cols-*`, `grid-rows-*`, `col-span-*`, `row-span-*`
+- **Effects**: `shadow-*`, `opacity-*`, `blur-*`
+- **Borders**: `rounded-*`, `border-*`
+
+## Variants
+
+Built-in variants:
+
+- **Pseudo-classes**: `hover`, `focus`, `active`, `visited`, `disabled`, `first`, `last`, `odd`, `even`
+- **Pseudo-elements**: `before`, `after`, `placeholder`, `selection`
+- **Media**: `dark`, numeric breakpoints (`48:`, `64:`, etc.)
+- **Compound**: `group-*`, `peer-*`
+- **Data/Aria**: `data-*`, `aria-*`
+
+## License
+
+MIT

package/css/index.css

@@ -0,0 +1,5 @@
+@import "./theme.css";
+@import "./preflight.css";
+
+/* Where generated utilities are injected */
+@rainbowindex utilities;

package/css/preflight.css

@@ -0,0 +1,370 @@
+/**
+ * Rainbow Index - Preflight (CSS Reset)
+ *
+ * A modern CSS reset based on best practices.
+ * Includes accessibility defaults and modern CSS features.
+ *
+ * Modules: box-sizing, document, typography, tables, forms, lists, media, spacing, accessibility
+ * Use @preflight directive to include/exclude modules.
+ */
+
+@layer base {
+    /*! @preflight-module: box-sizing */
+    *,
+    ::before,
+    ::after {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: solid;
+        border-color: var(--color-border, currentColor);
+    }
+
+    /*! @preflight-module-end: box-sizing */
+
+    /*! @preflight-module: document */
+    html,
+    :host {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        tab-size: 4;
+        font-family: var(
+            --font-sans,
+            ui-sans-serif,
+            system-ui,
+            sans-serif,
+            "Apple Color Emoji",
+            "Segoe UI Emoji",
+            "Segoe UI Symbol",
+            "Noto Color Emoji"
+        );
+        font-feature-settings: normal;
+        font-variation-settings: normal;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    body {
+        margin: 0;
+        line-height: inherit;
+    }
+
+    html[data-appearance="light"] {
+        color-scheme: light;
+    }
+
+    html[data-appearance="dark"] {
+        color-scheme: dark;
+    }
+
+    html[data-appearance="system"],
+    html:not([data-appearance]) {
+        color-scheme: light;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html[data-appearance="system"],
+        html:not([data-appearance]) {
+            color-scheme: dark;
+        }
+    }
+    /*! @preflight-module-end: document */
+
+    /*! @preflight-module: typography */
+    hr {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+    }
+
+    abbr:where([title]) {
+        text-decoration: underline dotted;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    code,
+    kbd,
+    samp,
+    pre {
+        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+        font-feature-settings: normal;
+        font-variation-settings: normal;
+        font-size: 1em;
+    }
+
+    small {
+        font-size: 80%;
+    }
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+    /*! @preflight-module-end: typography */
+
+    /*! @preflight-module: tables */
+    table {
+        text-indent: 0;
+        border-color: inherit;
+        border-collapse: collapse;
+    }
+    /*! @preflight-module-end: tables */
+
+    /*! @preflight-module: forms */
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    button,
+    select {
+        text-transform: none;
+    }
+
+    button,
+    input:where([type="button"]),
+    input:where([type="reset"]),
+    input:where([type="submit"]) {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+    }
+
+    :-moz-focusring {
+        outline: auto;
+    }
+
+    :-moz-ui-invalid {
+        box-shadow: none;
+    }
+
+    progress {
+        vertical-align: baseline;
+    }
+
+    ::-webkit-inner-spin-button,
+    ::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    [type="search"] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+    }
+
+    ::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+    }
+
+    summary {
+        display: list-item;
+    }
+
+    textarea {
+        resize: vertical;
+    }
+
+    ::placeholder {
+        opacity: 1;
+    }
+
+    /* Use color-mix for adaptive placeholder colors (Safari 17+, all other modern browsers) */
+    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+        ::placeholder {
+            color: color-mix(in oklab, currentcolor 50%, transparent);
+        }
+    }
+
+    button,
+    [role="button"] {
+        cursor: pointer;
+    }
+
+    :disabled {
+        cursor: default;
+    }
+    /*! @preflight-module-end: forms */
+
+    /*! @preflight-module: spacing */
+    blockquote,
+    dl,
+    dd,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    hr,
+    figure,
+    p,
+    pre {
+        margin: 0;
+    }
+
+    fieldset {
+        margin: 0;
+        padding: 0;
+    }
+
+    legend {
+        padding: 0;
+    }
+    /*! @preflight-module-end: spacing */
+
+    /*! @preflight-module: lists */
+    ol,
+    ul,
+    menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    /*! @preflight-module-end: lists */
+
+    /*! @preflight-module: media */
+    img,
+    svg,
+    video,
+    canvas,
+    audio,
+    iframe,
+    embed,
+    object {
+        display: block;
+        vertical-align: middle;
+    }
+
+    img,
+    video {
+        max-width: 100%;
+        height: auto;
+    }
+
+    /* SVG fill inherits text color by default */
+    svg:not([fill]) {
+        fill: currentColor;
+    }
+
+    [hidden]:where(:not([hidden="until-found"])) {
+        display: none !important;
+    }
+    /*! @preflight-module-end: media */
+
+    /*! @preflight-module: accessibility */
+    /* Focus visible for keyboard accessibility */
+    :focus-visible {
+        outline: 2px solid var(--color-focus, oklch(55% 0.2 250));
+        outline-offset: 2px;
+    }
+
+    /* Remove default focus for mouse users */
+    :focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    /* Dialog improvements */
+    dialog {
+        padding: 0;
+        background-color: var(--color-surface, white);
+        color: inherit;
+    }
+
+    dialog::backdrop {
+        background-color: oklch(0% 0 0 / 50%);
+    }
+
+    /* Ensure mark uses theme colors */
+    mark {
+        background-color: var(--color-highlight, oklch(90% 0.1 90));
+        color: inherit;
+    }
+
+    /* Horizontal rule styling */
+    hr {
+        border-color: var(--color-border, oklch(85% 0 0));
+    }
+
+    /* Selection styling */
+    ::selection {
+        background-color: var(--color-selection-bg, oklch(85% 0.1 250));
+        color: var(--color-selection-fg, inherit);
+    }
+
+    /* Autofill styling */
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    textarea:-webkit-autofill,
+    textarea:-webkit-autofill:hover,
+    textarea:-webkit-autofill:focus,
+    select:-webkit-autofill,
+    select:-webkit-autofill:hover,
+    select:-webkit-autofill:focus {
+        -webkit-text-fill-color: inherit;
+        -webkit-box-shadow: 0 0 0px 1000px var(--color-surface, white) inset;
+        transition: background-color 5000s ease-in-out 0s;
+    }
+
+    /* Ensure file input button matches theme */
+    ::file-selector-button {
+        font: inherit;
+        color: inherit;
+        background-color: var(--color-surface-alt, oklch(95% 0 0));
+        border: 1px solid var(--color-border, oklch(85% 0 0));
+        border-radius: calc(0.5 * var(--spacing, 0.25rem));
+        padding-inline: 1rem;
+        padding-block: 0.5rem;
+        cursor: pointer;
+    }
+
+    ::file-selector-button:hover {
+        background-color: var(--color-surface-hover, oklch(92% 0 0));
+    }
+    /*! @preflight-module-end: accessibility */
+}