@deckspec/theme-noir-display 0.1.0

package/globals.css

@@ -0,0 +1,263 @@
+/* Pristine Display — Global Styles
+   Apple.com inspired light presentation theme
+   Canvas gray (#f5f5f7) base, white cards, near-black text */
+
+/* ── CSS Custom Properties ── */
+:root {
+  --color-background: #f5f5f7;
+  --color-foreground: #1d1d1f;
+  --color-primary: #0071e3;
+  --color-muted: #e8e8ed;
+  --color-muted-foreground: #6e6e73;
+  --color-border: rgba(0, 0, 0, 0.08);
+  --color-accent: #0066cc;
+  --color-card-background: #ffffff;
+
+  --font-heading: 'SF Pro JP', 'SF Pro Display', 'Hiragino Sans', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
+  --font-body: 'SF Pro JP', 'SF Pro Text', 'Hiragino Sans', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
+
+  --spacing-slide-padding: 60px;
+  --spacing-slide-padding-x: 80px;
+  --spacing-gap: 32px;
+  --spacing-gap-sm: 16px;
+  --spacing-gap-md: 24px;
+  --spacing-gap-lg: 48px;
+
+  --radius: 12px;
+  --radius-lg: 18px;
+  --radius-pill: 980px;
+
+  --tracking-display: -0.015em;
+  --tracking-heading: -0.009em;
+  --tracking-body: -0.022em;
+  --tracking-caption: -0.016em;
+
+  --slide-width: 1200px;
+  --slide-height: 675px;
+}
+
+/* ── Base ── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-body);
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Typography ── */
+h1 {
+  font-family: var(--font-heading);
+  font-size: 64px;
+  font-weight: 600;
+  line-height: 1.0625;
+  letter-spacing: var(--tracking-display);
+  color: var(--color-foreground);
+}
+
+h2 {
+  font-family: var(--font-heading);
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: var(--tracking-heading);
+  color: var(--color-foreground);
+}
+
+h3 {
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.14;
+  letter-spacing: 0.007em;
+  color: var(--color-foreground);
+}
+
+h4 {
+  font-family: var(--font-heading);
+  font-size: 21px;
+  font-weight: 600;
+  line-height: 1.24;
+  letter-spacing: 0.011em;
+  color: var(--color-foreground);
+}
+
+p {
+  font-family: var(--font-body);
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1.47;
+  letter-spacing: var(--tracking-body);
+  color: var(--color-foreground);
+}
+
+/* ── Slide Containers ── */
+.slide {
+  width: var(--slide-width);
+  height: var(--slide-height);
+  background: var(--color-background);
+  position: relative;
+  overflow: hidden;
+}
+
+.slide-pad {
+  width: var(--slide-width);
+  height: var(--slide-height);
+  background: var(--color-background);
+  padding: var(--spacing-slide-padding) var(--spacing-slide-padding-x);
+  position: relative;
+  overflow: hidden;
+}
+
+.slide-stack {
+  width: var(--slide-width);
+  height: var(--slide-height);
+  background: var(--color-background);
+  padding: var(--spacing-slide-padding) var(--spacing-slide-padding-x);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.slide-center {
+  width: var(--slide-width);
+  height: var(--slide-height);
+  background: var(--color-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── White background variant ── */
+.slide-white {
+  width: var(--slide-width);
+  height: var(--slide-height);
+  background: var(--color-card-background);
+  padding: var(--spacing-slide-padding) var(--spacing-slide-padding-x);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Grid Layouts ── */
+.slide-grid-equal-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-gap);
+}
+
+.slide-grid-equal-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-gap);
+}
+
+.slide-grid-equal-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-gap);
+}
+
+.slide-grid-main-sub {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--spacing-gap);
+}
+
+/* ── Stack ── */
+.stack-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* ── Cards ── */
+.card {
+  background: var(--color-card-background);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.card-highlight {
+  background: var(--color-card-background);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.08);
+  border: 2px solid var(--color-primary);
+}
+
+/* ── Text Utilities ── */
+.text-muted {
+  color: var(--color-muted-foreground);
+}
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-accent {
+  color: var(--color-accent);
+}
+
+.text-description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.29;
+  letter-spacing: var(--tracking-caption);
+  color: var(--color-muted-foreground);
+}
+
+/* ── List ── */
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-sm);
+}
+
+/* ── Pill Button ── */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 20px;
+  border-radius: var(--radius-pill);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-caption);
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.pill-outline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 20px;
+  border-radius: var(--radius-pill);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: var(--tracking-caption);
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-foreground);
+}
+
+/* ── Divider ── */
+.divider-h {
+  width: 100%;
+  height: 1px;
+  background: var(--color-border);
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@deckspec/theme-noir-display",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/patterns/index.js",
+  "types": "./dist/patterns/index.d.ts",
+  "exports": {
+    ".": "./dist/patterns/index.js",
+    "./components": "./dist/components/index.js"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.0",
+    "lucide-react": "^0.469.0",
+    "recharts": "^2.15.0",
+    "zod": "^3.23.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hayaoo/deckspec",
+    "directory": "themes/noir-display"
+  },
+  "homepage": "https://github.com/hayaoo/deckspec",
+  "bugs": {
+    "url": "https://github.com/hayaoo/deckspec/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/patterns/_lib/chart-colors.ts

@@ -0,0 +1,12 @@
+export const chartColors = [
+  "var(--color-primary)",
+  "var(--color-foreground)",
+  "var(--color-muted-foreground)",
+  "#6366f1", // indigo accent
+  "#0891b2", // cyan accent
+  "#059669", // emerald accent
+];
+
+export function getChartColor(index: number): string {
+  return chartColors[index % chartColors.length];
+}

package/patterns/_lib/icon.tsx

@@ -0,0 +1,50 @@
+import { createElement, type ComponentType, type ReactElement } from "react";
+import * as lucideIcons from "lucide-react";
+import * as phIcons from "@phosphor-icons/react";
+
+type IconMap = Record<string, ComponentType<any>>;
+
+interface IconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+function toPascalCase(kebab: string): string {
+  return kebab
+    .split("-")
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("");
+}
+
+export function Icon({
+  name,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+}: IconProps): ReactElement {
+  // Support "ph:icon-name" prefix for explicit Phosphor selection
+  const [lib, iconName] = name.includes(":")
+    ? (name.split(":", 2) as [string, string])
+    : ["lucide", name];
+
+  const pascalName = toPascalCase(iconName);
+
+  if (lib === "ph") {
+    const PhIcon = (phIcons as unknown as IconMap)[pascalName];
+    if (PhIcon) {
+      return createElement(PhIcon, { size, color, weight: "regular" });
+    }
+  } else {
+    const LucideIcon = (lucideIcons as unknown as IconMap)[pascalName];
+    if (LucideIcon) {
+      return createElement(LucideIcon, { size, color, strokeWidth });
+    }
+  }
+
+  // Fallback: empty placeholder
+  return createElement("span", {
+    style: { display: "inline-block", width: size, height: size },
+  });
+}

package/patterns/big-number/index.tsx

@@ -0,0 +1,87 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  value: z.string().min(1).max(20).describe("Massive display number"),
+  unit: z.string().max(10).optional().describe("Unit after number"),
+  headline: z.string().min(1).max(60).describe("Headline"),
+  description: z.string().max(200).optional().describe("Body text"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function BigNumber({ label, value, unit, headline, description }: Props) {
+  return (
+    <div className="slide" style={{ display: "flex", alignItems: "center", justifyContent: "center", background: "#ffffff" }}>
+      <div className="stack-center" style={{ gap: 20, maxWidth: 800, marginBottom: 32 }}>
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+            }}
+          >
+            {label}
+          </span>
+        )}
+
+        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
+          <span
+            style={{
+              fontSize: 120,
+              fontWeight: 600,
+              fontFamily: "var(--font-heading)",
+              lineHeight: 1,
+              letterSpacing: "-0.025em",
+              color: "var(--color-foreground)",
+            }}
+          >
+            {value}
+          </span>
+          {unit && (
+            <span
+              style={{
+                fontSize: 40,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.009em",
+                color: "var(--color-muted-foreground)",
+              }}
+            >
+              {unit}
+            </span>
+          )}
+        </div>
+
+        <h3
+          style={{
+            fontSize: 28,
+            fontWeight: 600,
+            lineHeight: 1.14,
+            letterSpacing: "0.007em",
+          }}
+        >
+          {headline}
+        </h3>
+
+        {description && (
+          <p
+            style={{
+              fontSize: 17,
+              fontWeight: 400,
+              lineHeight: 1.47,
+              letterSpacing: "-0.022em",
+              color: "var(--color-muted-foreground)",
+              maxWidth: 600,
+              textAlign: "center",
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}