@donotdev/cli 0.0.3 → 0.0.4

package/templates/root-consumer/guides/STYLING.md.example

@@ -1,273 +0,0 @@
-# Styling Your App
-
-**Guide for:** DoNotDev framework consumers
-
----
-
-## Quick Start: Zero CSS Required
-
-DoNotDev components work out of the box. Just pass props:
-
-```tsx
-import { Card, Button, Section } from '@donotdev/components';
-import { PageContainer } from '@donotdev/ui';
-
-<PageContainer>
-  <Section gridCols={3}>
-    <Card title="Feature 1" content="Description" />
-    <Card title="Feature 2" content="Description" />
-    <Card title="Feature 3" content="Description" />
-  </Section>
-</PageContainer>;
-```
-
-**Result:** Responsive, accessible, themed. No CSS written.
-
----
-
-## Page Structure (90% of use cases)
-
-```tsx
-<PageContainer>
-  <HeroSection title="Title" subtitle="Subtitle" />
-
-  <Section gridCols={3} title="Features">
-    <Card title="Feature 1" />
-    <Card title="Feature 2" />
-    <Card title="Feature 3" />
-  </Section>
-
-  <CallToAction title="Get Started" primaryAction={<Button>Action</Button>} />
-</PageContainer>
-```
-
-**PageContainer handles:**
-
-- Width constraints (`variant`: `full`, `standard`, `narrow`, `text`, `form`, `table`, `dashboard`)
-- Spacing and typography via density system (`density`: `compact`, `standard`, `expressive`)
-
-**Section handles:**
-
-- Full-width backgrounds (`tone`: `base`, `muted`, `elevated`, `contrast`, `accent`)
-- Grid layout (`gridCols`: `1`, `2`, `3`, `4`)
-- Grid gap (`gridGap`: `none`, `tight`, `medium`, `large`)
-
----
-
-## Density System
-
-Control spacing and typography globally:
-
-```tsx
-<PageContainer density="expressive">
-  {/* All components automatically use expressive scale */}
-  <HeroSection title="Large Hero" />
-  <Section gridCols={3}>
-    <Card title="Card" />
-  </Section>
-</PageContainer>
-```
-
-**Three densities:**
-
-- **compact** - Dense layouts (admin, dashboards) - Minor Third (1.2×)
-- **standard** - DEFAULT, balanced (docs, SaaS) - Major Third (1.25×)
-- **expressive** - Spacious (marketing) - Perfect Fourth (1.333×)
-
-All spacing (`--gap-sm/md/lg`) and typography (`--font-size-*`) adjust automatically based on musical scale ratios.
-
----
-
-## Breakthrough Components
-
-Some components break out of PageContainer width constraints to achieve full-width backgrounds:
-
-```tsx
-<PageContainer variant="standard">
-  {' '}
-  {/* 1480px max */}
-  <Section tone="muted" gridCols={3}>
-    {/* Section has full-width gray background */}
-    {/* But content is constrained to 1480px */}
-    <Card title="Card 1" />
-    <Card title="Card 2" />
-    <Card title="Card 3" />
-  </Section>
-  <CallToAction
-    title="Get Started"
-    subtitle="Ready to build?"
-    primaryAction={<Button>Start Now</Button>}
-  />
-  {/* CTA has full-width background, constrained content */}
-</PageContainer>
-```
-
-**Breakthrough components:**
-
-- `Section` - Full-width backgrounds with grid layout
-- `HeroSection` - Full-width hero sections
-- `CallToAction` - Full-width conversion sections
-
-**Why?** Marketing pages need full-width colored backgrounds while keeping text readable (constrained width).
-
----
-
-## Overriding Styles
-
-### Via className
-
-```tsx
-// Default styling
-<Card title="Feature" />
-
-// Tighter gap
-<Card title="Feature" className="dndev-gap-sm" />
-
-// Custom layout
-<div className="dndev-flex dndev-gap-md">
-  <Card title="Left" />
-  <Card title="Right" />
-</div>
-```
-
-**Available utilities:**
-
-- Gap: `dndev-gap-none`, `dndev-gap-sm`, `dndev-gap-md`, `dndev-gap-lg`
-- Layout: `dndev-flex`, `dndev-flex-col`, `dndev-grid`, `dndev-center`
-- Padding: `dndev-p-{none|tight|medium|large}`
-
-### Via Data Attributes
-
-**Text Alignment:**
-```tsx
-<HeroSection data-text-align="center" title="Centered Hero" />
-<CallToAction data-text-align="center" title="Centered CTA" />
-<div data-text-align="end">Right-aligned text</div>
-```
-
-**Universal data attributes:**
-- `data-text-align="start|center|end"` - Text alignment (RTL-aware)
-- `data-gap="none|tight|medium|large"` - Gap spacing
-- `data-radius="none|md|full"` - Border radius
-- `data-cols="1|2|3|4"` - Grid columns (when using grid utilities)
-
-**Why data attributes?**
-- DRY: Single CSS rule handles all components
-- No prop conflicts: `align` prop in Stack/Grid is for flex alignment, not text alignment
-- No nesting issues: Each element controls its own styling
-- Works with any element, not just framework components
-
-### Via inline styles
-
-```tsx
-<Button style={{ minWidth: '200px' }}>
-  Wide Button
-</Button>
-
-<div style={{
-  display: 'grid',
-  gridTemplateColumns: '2fr 1fr',
-  gap: 'var(--gap-md)'
-}}>
-  <Card title="Main" />
-  <Card title="Sidebar" />
-</div>
-```
-
----
-
-## CSS Variables
-
-All design tokens available as CSS variables:
-
-```css
-/* Your custom styles */
-.my-component {
-  padding: var(--gap-md);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-}
-```
-
-**Common variables:**
-
-- **Gap:** `--gap-none`, `--gap-sm`, `--gap-md`, `--gap-lg`
-- **Radius:** `--radius-none`, `--radius-md`, `--radius-full`
-- **Shadows:** `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
-- **Colors:** `--color-primary`, `--color-surface`, `--color-text`
-
----
-
-## Theming
-
-Override CSS variables in your `themes.css`:
-
-```css
-[data-theme='custom'] {
-  --color-primary: #ff6b6b;
-  --gap-md: 1.5rem;
-  --radius-md: 1rem;
-}
-```
-
-See [THEMING.md](./THEMING.md) for complete guide.
-
----
-
-## Advanced: Using Primitives
-
-For complex UI, use primitives directly:
-
-```tsx
-import {
-  TooltipPrimitive,
-  TooltipTriggerPrimitive,
-  TooltipContentPrimitive,
-} from '@donotdev/components';
-
-<TooltipPrimitive>
-  <TooltipTriggerPrimitive asChild>
-    <Button>Hover</Button>
-  </TooltipTriggerPrimitive>
-  <TooltipContentPrimitive>
-    <div className="dndev-flex-col dndev-gap-sm">
-      <h4>Title</h4>
-      <p>Description</p>
-      <Button>Action</Button>
-    </div>
-  </TooltipContentPrimitive>
-</TooltipPrimitive>;
-```
-
-**When to use:**
-
-- Simple content → Props-based components
-- Complex/interactive content → Primitives
-
----
-
-## Styling Approaches (All Valid)
-
-The framework is flexible. Use what works:
-
-✅ Utility classes
-✅ Inline styles
-✅ CSS modules
-✅ Tailwind (if you prefer)
-✅ Styled components
-✅ Emotion
-
-**Build your way.**
-
----
-
-## Related
-
-- [COMPONENTS.md](./COMPONENTS.md) - Component catalog
-- [LAYOUTS.md](./LAYOUTS.md) - Layout patterns
-- [THEMING.md](./THEMING.md) - Theme customization
-
----
-
-**Last Updated:** 2025-12-03

package/templates/root-consumer/guides/THEMING_SETUP.md.example

@@ -1,119 +0,0 @@
-# Theming Setup
-
-**For AI Agents:** Override `src/themes.css`. CSS variables control everything.
-
----
-
-## 1. Theme File
-
-**Scaffolded:** `src/themes.css` (already imported in your app)
-
-```css
-/* src/themes.css */
-.light {
-  --theme-icon: 'Sun';
-  --theme-label: 'Light';
-  --primary: #3b82f6;
-  --background: #ffffff;
-  --foreground: #0a0a0a;
-  /* ... more variables with JSDoc in scaffolded file */
-}
-
-.dark {
-  --theme-icon: 'Moon';
-  --theme-label: 'Dark';
-  --primary: #60a5fa;
-  --background: #0a0a0a;
-  --foreground: #fafafa;
-}
-```
-
----
-
-## 2. Add Custom Theme
-
-```css
-.ocean {
-  --theme-icon: 'Waves';
-  --theme-label: 'Ocean';
-  --primary: #0ea5e9;
-  --background: #001a33;
-  --foreground: #e0f2fe;
-}
-```
-
-Framework auto-discovers themes. ThemeToggle auto-populated.
-
----
-
-## 3. Key Variables
-
-**Base colors:**
-- `--background` / `--foreground`
-- `--primary` / `--primary-foreground`
-- `--secondary` / `--secondary-foreground`
-
-**Containers:**
-- `--card` / `--card-foreground`
-- `--popover` / `--popover-foreground`
-
-**Status:**
-- `--destructive`, `--success`, `--warning`
-
-**Radius:**
-- `--radius-surface` - Cards (rounded)
-- `--radius-floating` - Dropdowns (square)
-- `--radius-interactive` - Buttons (square)
-
----
-
-## 4. Using Theme Colors
-
-**In CSS:**
-```css
-.my-component {
-  background: var(--background);
-  color: var(--foreground);
-}
-```
-
-**In components:**
-All framework components auto-use theme colors.
-
----
-
-## 5. Theme Switching
-
-**Automatic (built-in):**
-```tsx
-import { ThemeToggle } from '@donotdev/ui';
-
-// Auto-included in layout presets
-// Hides if 1 theme, icon if 2, dropdown if 3+
-<ThemeToggle />
-```
-
-**Manual:**
-```tsx
-import { useThemeStore } from '@donotdev/core';
-
-const { theme, setTheme } = useThemeStore();
-setTheme('dark');
-```
-
----
-
-## 6. Configuration
-
-```typescript
-// src/config/app.ts
-export const appConfig: AppConfig = {
-  theme: {
-    defaultTheme: 'light',
-  },
-};
-```
-
----
-
-**Zero config. Infinite themes. Read JSDoc in scaffolded file for all variables.**