{"_id":"@alinaai/apps-sdk-theme","_rev":"2-3cf8508a8d994f763cedea432648954a","name":"@alinaai/apps-sdk-theme","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@alinaai/apps-sdk-theme","version":"0.1.0","keywords":["design-tokens","css","theme"],"license":"MIT","_id":"@alinaai/apps-sdk-theme@0.1.0","maintainers":[{"name":"romansf20","email":"roman25@gmail.com"}],"dist":{"shasum":"eb82ec67a82abab4b139a31b94da314c388418ca","tarball":"https://registry.npmjs.org/@alinaai/apps-sdk-theme/-/apps-sdk-theme-0.1.0.tgz","fileCount":6,"integrity":"sha512-SH8LlSDJ1Tq/5UCGb+fIqQtZHT7RuvDzmLZ4rQygXGO5kTkzQbiUUnDI3gl+Vj6bdOIxkRqYRxocYRZfUKKUJQ==","signatures":[{"sig":"MEUCIG1NApfkwO4Pi/Bf/Q0Cwr96MRtCSGsiiqhyByUFHCXRAiEAkA58M/cncs5qTlFuzO/J7rVGUScz6f1dYmB7GNWz+Xk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29140},"main":"index.css","style":"index.css","gitHead":"e8f851860842ab7a8a6b0bc532f43ec8ef4e7631","_npmUser":{"name":"romansf20","email":"roman25@gmail.com"},"_npmVersion":"10.9.2","description":"AlinaAI design tokens — CSS override layer for @openai/apps-sdk-ui","directories":{},"_nodeVersion":"23.10.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/apps-sdk-theme_0.1.0_1771478553797_0.7284530500357667","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alinaai/apps-sdk-theme","version":"0.1.1","description":"AlinaAI design tokens — CSS override layer for @openai/apps-sdk-ui","main":"index.css","style":"index.css","keywords":["design-tokens","css","theme"],"license":"MIT","_id":"@alinaai/apps-sdk-theme@0.1.1","gitHead":"f863e9a5b637bb0996c950b6f5ea47ff656604c8","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ajP6EiDtWrPW2PQ6ZN93nda2u+euRTA7K2T5l1qYtZHa+r0v6rnx0j4W/dW0WKhV4Gku/QnAbX0rmr1G9PsT5A==","shasum":"35728c2560512a2cd7901fdd90245306986fa6e5","tarball":"https://registry.npmjs.org/@alinaai/apps-sdk-theme/-/apps-sdk-theme-0.1.1.tgz","fileCount":6,"unpackedSize":29140,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICh1tPguExzvUyAAcQ3qyXjyZYdgOQdyzJr+I0MDD8gZAiAste9U1Cs0srOzwTJXuaWY5+9IrFMd6sPOpDgOHpLPaA=="}]},"_npmUser":{"name":"romansf20","email":"roman25@gmail.com"},"directories":{},"maintainers":[{"name":"romansf20","email":"roman25@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/apps-sdk-theme_0.1.1_1771535235749_0.3260371417314232"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-19T05:22:33.659Z","modified":"2026-02-19T21:07:16.067Z","0.1.0":"2026-02-19T05:22:33.929Z","0.1.1":"2026-02-19T21:07:15.929Z"},"license":"MIT","keywords":["design-tokens","css","theme"],"description":"AlinaAI design tokens — CSS override layer for @openai/apps-sdk-ui","maintainers":[{"name":"romansf20","email":"roman25@gmail.com"}],"readme":"# @alinaai/apps-sdk-theme\n\nA CSS-only design token override layer for `@openai/apps-sdk-ui`. Rethemes all OpenAI Apps SDK components with AlinaAI branding — no JavaScript changes required.\n\n## Why This Exists\n\nOpenAI's Apps SDK (`@openai/apps-sdk-ui`) provides a component library (Button, Image, Badge, Alert, etc.) styled with OpenAI's design tokens. These tokens are CSS custom properties organized in three tiers:\n\n1. **Primitives** — raw color palettes (gray, blue, green, red, etc.)\n2. **Semantic** — maps colors to purpose (primary solid, danger text, success background, etc.)\n3. **Components** — per-component adjustments (button font weight, badge radius, etc.)\n\nAll three tiers are declared in `@layer theme` using `:root` and `[data-theme]` selectors. This means any CSS imported after the OpenAI base can override them via the standard cascade — last declaration in the same layer wins.\n\n`@alinaai/apps-sdk-theme` exploits this by providing a complete set of overrides for all three tiers. The result: every OpenAI component renders with AlinaAI visual styling, without touching any JavaScript, component props, or import paths.\n\n## How It Works\n\nThe package contains three CSS files imported in order:\n\n```\nindex.css\n  ├── primitives.css   (Tier 1: color palettes)\n  ├── semantic.css     (Tier 2: semantic mappings)\n  └── components.css   (Tier 3: component adjustments)\n```\n\nEach file uses the exact same `@layer theme` declaration and selector patterns as OpenAI:\n\n```css\n@layer theme {\n  :root, :where([data-theme]) { /* shared tokens */ }\n  :where(:root), :where([data-theme=\"light\"]) { /* light mode */ }\n  :where([data-theme=\"dark\"]) { /* dark mode */ }\n}\n```\n\nBecause our `@import` comes after `@openai/apps-sdk-ui/css`, our values take precedence.\n\n### Token Resolution Chain\n\nWhen a component like `<Button color=\"primary\" variant=\"solid\">` renders:\n\n```\nButton.module.css\n  → --button-background-color: var(--color-background-primary-solid)\n\nsemantic.css (AlinaAI override)\n  → --color-background-primary-solid: var(--blue-600)\n\nprimitives.css (AlinaAI override)\n  → --blue-600: #0074B8\n\nResult: Button background = #0074B8 (AlinaAI Blue)\n```\n\nWithout the AlinaAI theme, the same chain resolves to OpenAI's `--gray-900` (#181818) — a near-black button.\n\n## Usage\n\n### In an OpenAI Apps SDK app\n\nAdd one CSS import after the OpenAI base:\n\n```css\n@import \"tailwindcss\";\n@import \"@openai/apps-sdk-ui/css\";\n@import \"@alinaai/apps-sdk-theme\";\n```\n\nThat's it. Every component in the app renders with AlinaAI styling.\n\n### As a local dependency\n\nIf the package isn't published to npm, reference it as a local path in `package.json`:\n\n```json\n{\n  \"dependencies\": {\n    \"@alinaai/apps-sdk-theme\": \"file:./alinaai-apps-sdk-theme\"\n  }\n}\n```\n\n### As an npm package\n\n```bash\nnpm install @alinaai/apps-sdk-theme\n```\n\n## What Changes\n\n### Tier 1: Primitives\n\nAll color palettes are replaced with AlinaAI brand values:\n\n| Palette | OpenAI Example | AlinaAI Value | Notes |\n|---------|---------------|-------------|-------|\n| Gray 900 | `#181818` | `#161B1F` | Warmer neutral |\n| Gray 1000 | `#0d0d0d` | `#010B13` | Deep navy-black |\n| Blue 400 | `#0285ff` | `#04A4E9` | Brighter, more cyan |\n| Blue 600 | `#004f99` | `#0074B8` | Primary brand color |\n| Green 400 | `#04b84c` | `#00CC62` | Brighter green |\n| Red 500 | `#e02e2a` | `#E12119` | Slightly shifted |\n| Orange 400 | `#fb6a22` | `#F26B1D` | Accent color |\n| Purple → Violet | `#924ff7` | `#A77EF0` | Mapped to violet palette |\n| Pink → Magenta | `#ff66ad` | `#E561C8` | Mapped to magenta palette |\n\nAlpha transparency values (`--alpha-*`) are NOT overridden — they're computed from `--alpha-base` which we do override per light/dark mode.\n\n### Tier 2: Semantic\n\nThe key brand change:\n\n| Token | OpenAI | AlinaAI |\n|-------|--------|-------|\n| `--color-background-primary-solid` | `var(--gray-900)` (dark) | `var(--blue-600)` (AlinaAI Blue) |\n| `--color-background-primary-solid-hover` | `var(--gray-700)` | `var(--blue-700)` |\n\nAll semantic state colors (info, warning, caution, danger, success, discovery) are remapped to use AlinaAI's primitive palette. Both light and dark mode are fully covered.\n\n### Tier 3: Components\n\n| Token | OpenAI | AlinaAI | Reason |\n|-------|--------|-------|--------|\n| `--button-font-weight` | `500` (medium) | `600` (semibold) | Bolder CTAs |\n| `--badge-radius-*` | `var(--radius-xs)` | `var(--radius-full)` | Pill-shaped badges |\n| `--switch-track-color-checked` | `var(--gray-900)` | `var(--blue-600)` | Brand color toggle |\n| `--slider-range-color` | `var(--gray-450)` | `var(--blue-500)` | Brand color slider |\n| `--link-primary-text-color` | `var(--blue-500)` | `var(--blue-600)` | AlinaAI link blue |\n\n## What Does NOT Change\n\n- Component JavaScript (Button, Image, Badge, etc.)\n- Component props API (`color`, `variant`, `size`)\n- Hooks (`useWidgetProps`, `useWidgetState`, `useOpenAiGlobal`)\n- Tailwind utility classes in JSX\n- MCP server code\n- Widget HTML structure\n- Import paths (still `@openai/apps-sdk-ui/components/Button`)\n\n## File Structure\n\n```\nalinaai-apps-sdk-theme/\n├── package.json       # npm package metadata\n├── index.css          # Entry point — imports all three tiers\n├── primitives.css     # Tier 1: raw color palette overrides\n├── semantic.css       # Tier 2: semantic token overrides (light + dark)\n├── components.css     # Tier 3: component-specific adjustments\n└── README.md          # This file\n```\n\n## Customizing Further\n\nDevelopers can add their own overrides after the AlinaAI theme:\n\n```css\n@import \"tailwindcss\";\n@import \"@openai/apps-sdk-ui/css\";\n@import \"@alinaai/apps-sdk-theme\";\n\n/* Your custom overrides — these win over AlinaAI */\n@layer theme {\n  :root {\n    --color-background-primary-solid: #e63946;\n  }\n}\n```\n\n## Design Token Architecture Reference\n\nThe full token hierarchy:\n\n```\nTier 1: Primitives (raw values)\n  --blue-600: #0074B8\n      ↓\nTier 2: Semantic (purpose mapping)\n  --color-background-primary-solid: var(--blue-600)\n      ↓\nTier 3: Components (component-specific)\n  --button-font-weight: var(--font-weight-semibold)\n      ↓\nComponent CSS Module (Button.module.css)\n  --button-background-color: var(--color-background-primary-solid)\n  background-color: var(--button-background-color)\n      ↓\nRendered: blue button with semibold text\n```\n\n## Compatibility\n\n- Requires `@openai/apps-sdk-ui` >= 0.2.0\n- Works with Tailwind CSS v4\n- Supports light and dark mode via `[data-theme]` attribute\n- No JavaScript runtime dependency\n","readmeFilename":"README.md"}