base-themes 0.1.2 → 0.1.3

package/examples/theme-customization/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "base-themes-theme-customization-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5178",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4178"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "base-themes": "file:../..",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12"
+  }
+}

package/examples/theme-customization/src/App.tsx

@@ -0,0 +1,138 @@
+import { useMemo, useState, type CSSProperties } from 'react'
+import {
+  Button,
+  Field,
+  Fieldset,
+  Input,
+  Progress,
+  Select,
+  Switch,
+  Tabs,
+  type ThemeStyle,
+  useTheme,
+} from 'base-themes'
+import registry from 'base-themes/registry.json'
+
+const styleChoices = {
+  bento: 'Bento',
+  enterprise: 'Enterprise',
+  glass: 'Glass',
+  terminal: 'Terminal',
+  'data-dense': 'Data dense',
+}
+
+const accentChoices = {
+  '#2563eb': 'Blue',
+  '#0f766e': 'Teal',
+  '#f97316': 'Orange',
+  '#dc2626': 'Red',
+  '#7c3aed': 'Violet',
+}
+
+const radiusChoices = {
+  '4px': 'Tight',
+  '8px': 'Default',
+  '14px': 'Rounded',
+  '22px': 'Pill',
+}
+
+const fontChoices = {
+  'Inter, ui-sans-serif, system-ui, sans-serif': 'System',
+  'Georgia, serif': 'Editorial',
+  'SFMono-Regular, Consolas, monospace': 'Mono',
+}
+
+export function App() {
+  const { style, setStyle, resolved, setTheme } = useTheme()
+  const [accent, setAccent] = useState('#2563eb')
+  const [radius, setRadius] = useState('8px')
+  const [font, setFont] = useState('Inter, ui-sans-serif, system-ui, sans-serif')
+  const [compact, setCompact] = useState(false)
+
+  const cssVariables = useMemo(() => `:root {
+  --accent: ${accent};
+  --teal: ${accent};
+  --radius: ${radius};
+  --radius-sm: ${radius === '4px' ? '3px' : radius === '8px' ? '6px' : radius === '14px' ? '10px' : '999px'};
+  --font-sans: ${font};
+  --theme-control-height: ${compact ? '34px' : '42px'};
+}`, [accent, compact, font, radius])
+
+  const setString = (setter: (value: string) => void) => (value: unknown) => {
+    if (typeof value === 'string') setter(value)
+  }
+
+  const copyVariables = () => {
+    void navigator.clipboard?.writeText(cssVariables)
+  }
+
+  return (
+    <main className="customization-shell">
+      <section className="hero-panel">
+        <div>
+          <p className="eyebrow">Theme customization example</p>
+          <h1>Customize Base Themes tokens from the package surface.</h1>
+          <p className="hero-copy">
+            This React 18 Vite app imports package CSS once, then overrides semantic tokens for brand color, radius, font, and density.
+          </p>
+        </div>
+        <div className="hero-actions" aria-label="Theme controls">
+          <Select id="base-style" label="Starting style" value={style} onValueChange={(value) => setStyle(value as ThemeStyle)} items={styleChoices} />
+          <Switch id="color-mode" label="Dark mode" checked={resolved === 'dark'} onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')} />
+        </div>
+      </section>
+
+      <section className="customization-grid">
+        <Fieldset legend="Token controls">
+          <Select id="accent" label="Primary color" value={accent} onValueChange={setString(setAccent)} items={accentChoices} />
+          <Select id="radius" label="Radius" value={radius} onValueChange={setString(setRadius)} items={radiusChoices} />
+          <Select id="font" label="Font" value={font} onValueChange={setString(setFont)} items={fontChoices} />
+          <Switch id="density" label="Compact controls" checked={compact} onCheckedChange={setCompact} />
+          <Button type="button" onClick={copyVariables}>Copy CSS variables</Button>
+        </Fieldset>
+
+        <section className="preview-panel" style={{ '--accent': accent, '--teal': accent, '--radius': radius, '--radius-sm': radius, '--font-sans': font, '--theme-control-height': compact ? '34px' : '42px' } as CSSProperties}>
+          <div className="preview-header">
+            <div>
+              <p className="eyebrow">Live preview</p>
+              <h2>Brand workspace</h2>
+            </div>
+            <Button variant="accent">Publish</Button>
+          </div>
+          <div className="form-grid">
+            <Field label="Workspace" description="This input uses the overridden theme tokens.">
+              <Input id="workspace" defaultValue="Launch Studio" />
+            </Field>
+            <Select id="status" label="Release track" defaultValue="beta" items={{ alpha: 'Alpha', beta: 'Beta', stable: 'Stable' }} />
+          </div>
+          <Tabs
+            defaultValue="tokens"
+            panels={[
+              {
+                value: 'tokens',
+                label: 'Tokens',
+                title: 'Semantic overrides',
+                content: `Accent ${accent}, radius ${radius}, and ${compact ? 'compact' : 'comfortable'} control density are active.`,
+              },
+              {
+                value: 'registry',
+                label: 'Registry',
+                title: `${registry.style.variants.length} shipped visual styles`,
+                content: `Current registry default is ${registry.style.default}; this example still uses public registry metadata.`,
+              },
+            ]}
+          />
+          <Progress value={compact ? 84 : 68} showValue aria-label="Customization coverage" />
+        </section>
+      </section>
+
+      <section className="code-panel" aria-label="Generated CSS variables">
+        <div>
+          <p className="eyebrow">Copy into your app</p>
+          <h2>Generated token override</h2>
+        </div>
+        <pre><code>{cssVariables}</code></pre>
+      </section>
+    </main>
+  )
+}

package/examples/theme-customization/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import 'base-themes/styles.css'
+import './styles.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/examples/theme-customization/src/styles.css

@@ -0,0 +1,138 @@
+:root {
+  color: var(--theme-fg);
+  background: var(--theme-bg);
+  font-family: var(--font-sans);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+.customization-shell {
+  width: min(1120px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 40px 0;
+}
+
+.hero-panel,
+.customization-grid > *,
+.code-panel {
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface);
+  box-shadow: var(--theme-shadow);
+}
+
+.hero-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+  gap: 24px;
+  align-items: end;
+  padding: 32px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--theme-muted-fg);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+h2 {
+  margin: 0;
+  color: var(--theme-fg);
+  letter-spacing: 0;
+}
+
+h1 {
+  max-width: 720px;
+  font-size: clamp(2rem, 4vw, 4rem);
+  line-height: 1;
+}
+
+h2 {
+  font-size: 1.4rem;
+}
+
+.hero-copy {
+  max-width: 680px;
+  margin: 16px 0 0;
+  color: var(--theme-muted-fg);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: grid;
+  gap: 14px;
+}
+
+.customization-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.customization-grid > * {
+  min-width: 0;
+  padding: 24px;
+}
+
+.preview-panel {
+  display: grid;
+  gap: 20px;
+  font-family: var(--font-sans);
+}
+
+.preview-header,
+.form-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.preview-header {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.form-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.code-panel {
+  display: grid;
+  gap: 16px;
+  padding: 24px;
+}
+
+pre {
+  overflow: auto;
+  margin: 0;
+  padding: 18px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-muted-bg);
+  color: var(--theme-fg);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+@media (max-width: 820px) {
+  .hero-panel,
+  .customization-grid,
+  .preview-header,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .customization-shell {
+    width: min(100vw - 24px, 680px);
+    padding: 24px 0;
+  }
+}

package/examples/theme-customization/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare module 'base-themes/styles.css'
+declare module '*.css'

package/examples/theme-customization/tsconfig.app.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/examples/theme-customization/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/examples/theme-customization/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/theme-customization/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

package/examples/vite/README.md

@@ -0,0 +1,32 @@
+# Base Themes Vite Example
+
+This example verifies the package install path in a fresh Vite React app with React 18.
+
+## Run
+
+From this directory:
+
+```bash
+npm install
+npm run dev
+```
+
+When testing local package changes from the repository root, build and pack first:
+
+```bash
+npm run build
+npm pack --dry-run
+```
+
+Then install the generated tarball in this example:
+
+```bash
+npm install ../../base-themes-0.1.2.tgz
+npm run build
+```
+
+The app intentionally imports from the public package surface only:
+
+- `base-themes`
+- `base-themes/styles.css`
+- `base-themes/registry.json`

package/examples/vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="light" data-style="enterprise">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Base Themes Vite Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>