@neuralytics/alpine-ds 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @neuralytics/alpine-ds
 
+## 0.6.0
+
+### Minor Changes
+
+- df0d828: Add theme.css, a native Tailwind v4 CSS theme (deprecates the JS preset, which remains supported).
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -38,28 +38,28 @@ export default defineConfig({
 })
 ```
 
-4. Import the Tailwind configuration in your main style file. The path in `@config` is relative to this CSS file — adjust it if your `tailwind.config.ts` isn't next to it (e.g. `../tailwind.config.ts` if your CSS lives in `src/` and the config is at your project root):
+4. Import the design system's CSS theme in your main style file:
+
+**Without a `tailwind.config` (recommended)** — `theme.css` already handles detection of the package's classes, no `content` entry needed:
 
 ```css
 @import "tailwindcss";
-@config "./tailwind.config.ts";
+@import "@neuralytics/alpine-ds/theme.css";
 ```
 
-5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes:
+**With a `tailwind.config`** — if your project already has a `tailwind.config.ts`/`.js` (custom `theme.extend`, plugins, `content`...), keep it alongside the CSS import:
 
-```ts
-import type { Config } from "tailwindcss"
-import alpineDsPreset from "@neuralytics/alpine-ds/tailwind-preset"
-
-export default {
-  presets: [alpineDsPreset],
-  content: [
-    // ... your source files ...
-  ],
-} as Config
+```css
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+@import "@neuralytics/alpine-ds/theme.css";
 ```
 
-6. Set the accent color in your project's `main.ts`:
+Nothing needs to change in `tailwind.config.ts` itself — keep your own `theme.extend`, plugins, `content`, etc. as they are, the DS's classes and colors come entirely from `theme.css`.
+
+> Migrating from the old JS preset? Remove the `presets: [alpineDsPreset]` entry (or wherever you imported `@neuralytics/alpine-ds/tailwind-preset`) and any `content` glob you'd added just to scan `@neuralytics/alpine-ds`'s own files — both are now handled by `theme.css`. `tailwind-preset` is still published but deprecated.
+
+5. Set the accent color in your project's `main.ts`:
 
 ```js
 import { setAccentColorTheme } from "@neuralytics/alpine-ds"
@@ -69,7 +69,7 @@ setAccentColorTheme("#fe4e29")
 
 Note that this function can be called at any time. Calling it in your `main.ts` gives you a default value.
 
-7. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
+6. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
 
 ```js
 import { setButtonTextColor } from "@neuralytics/alpine-ds"
@@ -79,7 +79,7 @@ setButtonTextColor("#000000")
 
 This only affects the primary button's text (not disabled or loading states) and defaults to `white` if never called.
 
-8. Import a component in a `.vue` file
+7. Import a component in a `.vue` file
 
 ```js
 import { AlpineButton } from "@neuralytics/alpine-ds"
@@ -99,7 +99,7 @@ The Design System uses the following Tailwind colors:
 These are the only colors available: any other Tailwind color utility (e.g. `bg-purple-500`) will not generate any CSS.
 
 Note that all colors use 10 shades: `50`, `100`, `200`, ..., `900`.
-`accent` must be provided by the consumer via `setAccentColorTheme` (see step 6 of [Integration](#integration)); the other colors already have a default value.
+`accent` must be provided by the consumer via `setAccentColorTheme` (see step 5 of [Integration](#integration)); the other colors already have a default value.
 
 ## Icons
 

package/dist/tailwind-preset.d.ts

@@ -1,5 +1,8 @@
 import { Config } from 'tailwindcss';
+/** @deprecated Use `@neuralytics/alpine-ds/theme.css` (native Tailwind v4 `@theme`) instead. */
 export declare const content: Config["content"];
+/** @deprecated Use `@neuralytics/alpine-ds/theme.css` (native Tailwind v4 `@theme`) instead. */
 export declare const theme: Config["theme"];
+/** @deprecated Use `@neuralytics/alpine-ds/theme.css` (native Tailwind v4 `@theme`) instead. */
 declare const preset: Config;
 export default preset;

package/dist/theme.css

@@ -0,0 +1,89 @@
+/*
+ * Native Tailwind v4 CSS-first equivalent of `tailwind-preset.ts`.
+ * `--color-*: initial` clears Tailwind's default palette because `theme.colors`
+ * in the JS preset was a full replacement, not an `extend` — same behavior here.
+ */
+@theme {
+  --color-*: initial;
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-gray-50: oklch(98.5% 0 0);
+  --color-gray-100: oklch(97% 0 0);
+  --color-gray-200: oklch(92.2% 0 0);
+  --color-gray-300: oklch(87% 0 0);
+  --color-gray-400: oklch(70.8% 0 0);
+  --color-gray-500: oklch(55.6% 0 0);
+  --color-gray-600: oklch(43.9% 0 0);
+  --color-gray-700: oklch(37.1% 0 0);
+  --color-gray-800: oklch(26.9% 0 0);
+  --color-gray-900: oklch(20.5% 0 0);
+
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+
+  --color-yellow-50: oklch(98.7% 0.022 95.277);
+  --color-yellow-100: oklch(96.2% 0.059 95.617);
+  --color-yellow-200: oklch(92.4% 0.12 95.746);
+  --color-yellow-300: oklch(87.9% 0.169 91.605);
+  --color-yellow-400: oklch(82.8% 0.189 84.429);
+  --color-yellow-500: oklch(76.9% 0.188 70.08);
+  --color-yellow-600: oklch(66.6% 0.179 58.318);
+  --color-yellow-700: oklch(55.5% 0.163 48.998);
+  --color-yellow-800: oklch(47.3% 0.137 46.201);
+  --color-yellow-900: oklch(41.4% 0.112 45.904);
+
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+
+  /* Runtime-themed via inline style (setAccentColorTheme/setButtonTextColor in
+     utils/colors.ts), which overrides these defaults through cascade specificity. */
+  --color-accent-50: transparent;
+  --color-accent-100: transparent;
+  --color-accent-200: transparent;
+  --color-accent-300: transparent;
+  --color-accent-400: transparent;
+  --color-accent-500: transparent;
+  --color-accent-600: transparent;
+  --color-accent-700: transparent;
+  --color-accent-800: transparent;
+  --color-accent-900: transparent;
+
+  /* Aliases `--button-text-color` (not `--color-button-text-color`) because that's
+     the variable name setButtonTextColor() in utils/colors.ts writes to. */
+  --color-button-text-color: var(--button-text-color, #ffffff);
+}
+
+/* Lets consumers `@import` this file without also adding the package's own
+   built output to their content globs. */
+@source "./**/*.{js,mjs}";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neuralytics/alpine-ds",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,8 @@
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs"
-    }
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "main": "./dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -53,7 +54,7 @@
     "vue-tsc": "^3.1.5"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && cp src/theme.css dist/theme.css",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"