feat: responsive system, engineering infra, new components, performance

- Section: responsive prop with media query injection
- visual-weights: fontSize clamp() for responsive sizing
- variables.css: add border-radius/shadow/transition/z-index tokens
- ESLint flat config + Prettier + Changeset init
- New components: Footer, NewsSidebar, BreakingNewsBanner
- Image/Figure: loading=lazy, aspectRatio, sizes props

packages/theme/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@newspaperui/theme",
-  "version": "0.0.0",
-  "description": "Theme tokens and CSS variables for newspaperui",
+  "name": "newspaperui-theme",
+  "version": "0.1.0",
+  "description": "CSS variables, visual weights, and typography utilities for NewspaperUI",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -31,5 +31,21 @@
     "typescript": "^5.7.2",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"
+  },
+  "license": "MIT",
+  "author": "sunzhongyi",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joisun/newspaperui.git"
+  },
+  "keywords": [
+    "newspaper",
+    "typography",
+    "css-variables",
+    "theme",
+    "design-tokens"
+  ],
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

packages/theme/src/variables.css

@@ -42,6 +42,26 @@
   --nui-space-4: 1rem;
   --nui-space-6: 1.5rem;
   --nui-space-8: 2rem;
+
+  /* border-radius */
+  --nui-radius-none: 0;
+  --nui-radius-sm: 2px;
+  --nui-radius-md: 4px;
+
+  /* shadow */
+  --nui-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --nui-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
+
+  /* transition */
+  --nui-transition-fast: 150ms ease;
+  --nui-transition-normal: 250ms ease;
+
+  /* z-index layers */
+  --nui-z-base: 0;
+  --nui-z-sticky: 10;
+  --nui-z-header: 50;
+  --nui-z-modal: 100;
+  --nui-z-tooltip: 150;
 }
 
 [data-theme="dark"] {
@@ -57,6 +77,8 @@
   --nui-accent-primary: #C97A6E;
   --nui-accent-ink-blue: #7E94C2;
   --nui-highlight: #3A2F18;
+  --nui-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --nui-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
 }
 
 html, body { background: var(--nui-bg-page); color: var(--nui-text-body); }

packages/theme/src/visual-weights.ts

@@ -236,9 +236,17 @@ export const visualWeights: Record<ComponentType, Partial<Record<VisualWeight, V
   },
 };
 
-/** Resolve fontSize: tuple → first value (lower bound used by default). */
+/** Resolve fontSize: tuple → clamp(min, preferred, max) for responsive sizing. */
 export function resolveFontSize(value: string | [string, string]): string {
-  return Array.isArray(value) ? value[0] : value;
+  if (Array.isArray(value)) {
+    const min = value[0];
+    const max = value[1];
+    const minNum = parseFloat(min);
+    const maxNum = parseFloat(max);
+    const vw = ((minNum + maxNum) / 2 / 16 * 1.5).toFixed(2);
+    return `clamp(${min}, ${vw}vw, ${max})`;
+  }
+  return value;
 }
 
 /** Resolve span: tuple → first value (lower bound). */