@neuralytics/alpine-ds 0.5.0 → 0.7.0

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/tailwind-preset.mjs

@@ -1,4 +1,4 @@
-const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
+const o = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), c = {
   50: "oklch(98.5% 0 0)",
   100: "oklch(97% 0 0)",
   200: "oklch(92.2% 0 0)",
@@ -20,7 +20,7 @@ const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
   700: "oklch(50.5% 0.213 27.518)",
   800: "oklch(44.4% 0.177 26.899)",
   900: "oklch(39.6% 0.141 25.723)"
-}, h = {
+}, e = {
   50: "oklch(98.7% 0.022 95.277)",
   100: "oklch(96.2% 0.059 95.617)",
   200: "oklch(92.4% 0.12 95.746)",
@@ -31,7 +31,7 @@ const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
   700: "oklch(55.5% 0.163 48.998)",
   800: "oklch(47.3% 0.137 46.201)",
   900: "oklch(41.4% 0.112 45.904)"
-}, k = {
+}, r = {
   50: "oklch(98.2% 0.018 155.826)",
   100: "oklch(96.2% 0.044 156.743)",
   200: "oklch(92.5% 0.084 155.995)",
@@ -42,7 +42,7 @@ const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
   700: "oklch(52.7% 0.154 150.069)",
   800: "oklch(44.8% 0.119 151.328)",
   900: "oklch(39.3% 0.095 152.535)"
-}, t = {
+}, h = {
   50: "oklch(97% 0.014 254.604)",
   100: "oklch(93.2% 0.032 255.585)",
   200: "oklch(88.2% 0.059 254.128)",
@@ -53,17 +53,34 @@ const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
   700: "oklch(48.8% 0.243 264.376)",
   800: "oklch(42.4% 0.199 265.638)",
   900: "oklch(37.9% 0.146 265.522)"
-}, r = [`${c}**/*.{js,mjs}`], a = {
+}, k = [`${o}**/*.{js,mjs}`], t = {
+  fontFamily: {
+    sans: ["Lato", "ui-sans-serif", "system-ui", "sans-serif"],
+    mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"]
+  },
+  fontSize: {
+    sm: ["0.6875rem", "1rem"],
+    base: ["0.8125rem", "1.25rem"],
+    lg: ["1rem", "1.5rem"],
+    xl: ["1.25rem", "1.75rem"],
+    "2xl": ["1.5rem", "2rem"],
+    "3xl": ["1.875rem", "2.25rem"]
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    bold: "700"
+  },
   colors: {
     transparent: "transparent",
     current: "currentColor",
     black: "#000000",
     white: "#ffffff",
-    gray: o,
+    gray: c,
     red: l,
-    yellow: h,
-    green: k,
-    blue: t,
+    yellow: e,
+    green: r,
+    blue: h,
     accent: {
       50: "var(--color-accent-50)",
       100: "var(--color-accent-100)",
@@ -78,12 +95,12 @@ const c = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), o = {
     },
     "button-text-color": "var(--button-text-color, #ffffff)"
   }
-}, e = {
-  content: r,
-  theme: a
+}, a = {
+  content: k,
+  theme: t
 };
 export {
-  r as content,
-  e as default,
-  a as theme
+  k as content,
+  a as default,
+  t as theme
 };

package/dist/theme.css

@@ -0,0 +1,137 @@
+/*
+ * 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.
+ * Same for fonts, font sizes and font weights.
+ */
+@theme {
+  /* Lato is only loaded through the optional `fonts.css`. Consumers using another
+     font override `--font-sans` in their own `@theme` block. */
+  --font-*: initial;
+  --font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* rem equivalents of 11/13/16/20/24/30px (with a 16px root), so sizes follow
+     the user's browser font size setting. */
+  --text-*: initial;
+  --text-sm: 0.6875rem;
+  --text-sm--line-height: 1rem;
+  --text-base: 0.8125rem;
+  --text-base--line-height: 1.25rem;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+
+  /* Only the weights shipped by `fonts.css`. */
+  --font-weight-*: initial;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --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);
+}
+
+/* Defaults that still apply when consumers disable Tailwind's preflight. Set on
+   `body`, not `html`, so `1rem` keeps following the browser's font size. Form
+   controls don't inherit the page font by default. */
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+  }
+}
+
+/* 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.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,9 @@
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs"
-    }
+    },
+    "./theme.css": "./dist/theme.css",
+    "./fonts.css": "./dist/fonts.css"
   },
   "main": "./dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -53,7 +55,7 @@
     "vue-tsc": "^3.1.5"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && cp src/theme.css src/fonts.css dist/ && cp -R src/fonts dist/fonts",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"