@neuralytics/alpine-ds 0.6.0 → 0.7.1

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

@@ -2,8 +2,37 @@
  * 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;
@@ -84,6 +113,25 @@
   --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.6.0",
+  "version": "0.7.1",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,8 @@
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs"
     },
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./fonts.css": "./dist/fonts.css"
   },
   "main": "./dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -54,7 +55,7 @@
     "vue-tsc": "^3.1.5"
   },
   "scripts": {
-    "build": "vite build && cp src/theme.css dist/theme.css",
+    "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"