@decantr/content 3.8.0

package/themes/paper.json

@@ -0,0 +1,496 @@
+{
+  "$schema": "https://decantr.ai/schemas/theme.v1.json",
+  "id": "paper",
+  "version": "1.0.0",
+  "name": "Paper",
+  "description": "Clean, minimal, content-focused theme with warm whites and soft grays. Inspired by high-end writing apps like iA Writer, Bear, and Notion.",
+  "tags": [
+    "warm",
+    "light",
+    "minimal",
+    "writing",
+    "clean",
+    "professional",
+    "collaboration"
+  ],
+  "personality": "warm + clean + minimal + content-focused",
+  "seed": {
+    "primary": "#2E8B8B",
+    "secondary": "#78756F",
+    "accent": "#E07B4C",
+    "background": "#FDFCFA"
+  },
+  "palette": {
+    "background": {
+      "light": "#FDFCFA",
+      "dark": "#1C1B1A"
+    },
+    "surface": {
+      "light": "#FFFFFF",
+      "dark": "#252422"
+    },
+    "surface-raised": {
+      "light": "#F9F8F6",
+      "dark": "#2D2B29"
+    },
+    "border": {
+      "light": "#E8E6E3",
+      "dark": "#3D3A36"
+    },
+    "text": {
+      "light": "#1A1918",
+      "dark": "#FAF9F7"
+    },
+    "text-muted": {
+      "light": "#726E67",
+      "dark": "#A8A49E"
+    },
+    "primary": {
+      "light": "#2E8B8B",
+      "dark": "#3DA5A5"
+    },
+    "primary-hover": {
+      "light": "#257575",
+      "dark": "#4DBFBF"
+    },
+    "accent": {
+      "light": "#E07B4C",
+      "dark": "#F09B6C"
+    }
+  },
+  "presence": {
+    "colors": [
+      {
+        "name": "Blue",
+        "light": "#3B82F6",
+        "dark": "#60A5FA"
+      },
+      {
+        "name": "Purple",
+        "light": "#8B5CF6",
+        "dark": "#A78BFA"
+      },
+      {
+        "name": "Pink",
+        "light": "#EC4899",
+        "dark": "#F472B6"
+      },
+      {
+        "name": "Orange",
+        "light": "#F97316",
+        "dark": "#FB923C"
+      },
+      {
+        "name": "Teal",
+        "light": "#14B8A6",
+        "dark": "#2DD4BF"
+      },
+      {
+        "name": "Yellow",
+        "light": "#EAB308",
+        "dark": "#FACC15"
+      },
+      {
+        "name": "Red",
+        "light": "#EF4444",
+        "dark": "#F87171"
+      },
+      {
+        "name": "Green",
+        "light": "#22C55E",
+        "dark": "#4ADE80"
+      }
+    ]
+  },
+  "modes": [
+    "light",
+    "dark",
+    "auto"
+  ],
+  "shapes": [
+    "rounded",
+    "sharp"
+  ],
+  "cvd_support": [
+    "deuteranopia",
+    "protanopia"
+  ],
+  "tokens": {
+    "base": {
+      "success": "#22C55E",
+      "danger": "#EF4444",
+      "warning": "#EAB308",
+      "info": "#3B82F6"
+    },
+    "cvd": {
+      "deuteranopia": {
+        "success": "#3B82F6",
+        "danger": "#F97316"
+      },
+      "protanopia": {
+        "success": "#0EA5E9",
+        "danger": "#FACC15"
+      }
+    }
+  },
+  "decantr_compat": ">=2.0.0",
+  "source": "core",
+  "decorators": {
+    "paper-canvas": "Warm cream background in light mode, soft charcoal in dark. Clean foundation for content.",
+    "paper-surface": "Clean panel surface with subtle warmth. Used for sidebars and elevated areas.",
+    "paper-card": "Minimal card styling with 1px warm border, 6px radius, no shadow. Content over decoration.",
+    "paper-input": "Warm gray border with teal focus ring. Clean input styling for forms and editors.",
+    "paper-divider": "Hairline separator using warm gray. Subtle content division.",
+    "paper-prose": "Optimized typography for reading. 16px base, 1.75 line-height, Inter font stack, max-width 680px.",
+    "paper-comment": "Comment bubble with subtle shadow and presence color accent. Used in comment threads.",
+    "paper-cursor": "Remote cursor SVG with name label. Colored by collaborator presence color.",
+    "paper-presence": "Avatar ring indicating collaborator presence. Ring color matches assigned presence color.",
+    "paper-selection": "Highlighted text selection for remote collaborators. Tinted with presence color at 20% opacity.",
+    "paper-fade": "Entrance animation: opacity 0 to 1, 180ms natural easing. No translation."
+  },
+  "spatial": {
+    "density_bias": 0,
+    "content_gap_shift": 0,
+    "section_padding": "4rem",
+    "card_wrapping": "none",
+    "surface_override": null
+  },
+  "motion": {
+    "preference": "subtle",
+    "reduce_motion": true,
+    "entrance": "paper-fade",
+    "micro": "smooth",
+    "timing": "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    "durations": {
+      "hover": "120ms",
+      "entrance": "180ms",
+      "modal": "200ms",
+      "page": "250ms",
+      "cursor": "50ms",
+      "instant": "100ms",
+      "fast": "180ms",
+      "base": "300ms",
+      "slow": "500ms",
+      "slower": "750ms",
+      "stagger": "70ms"
+    },
+    "easings": {
+      "ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "spring": "cubic-bezier(0.34, 1.4, 0.64, 1)"
+    }
+  },
+  "effects": {
+    "enabled": true,
+    "intensity": "minimal",
+    "type_mapping": {
+      "card": [
+        "paper-card"
+      ],
+      "input": [
+        "paper-input"
+      ],
+      "editor": [
+        "paper-prose"
+      ],
+      "comment": [
+        "paper-comment"
+      ]
+    },
+    "component_fallback": {
+      "pre": "editor",
+      "code": "editor",
+      "Card": "card",
+      "Input": "input"
+    }
+  },
+  "compositions": {
+    "editor": {
+      "description": "Document editor with real-time collaboration. Page tree, editor, and comment sidebar.",
+      "shell": "workspace-aside",
+      "effects": [
+        "paper-prose",
+        "paper-cursor"
+      ]
+    },
+    "workspace": {
+      "description": "Workspace dashboard with activity and recent documents.",
+      "shell": "sidebar-main",
+      "card_style": "paper-card"
+    },
+    "auth": {
+      "description": "Centered auth forms with clean card styling.",
+      "shell": "centered",
+      "card_style": "paper-card"
+    },
+    "marketing": {
+      "description": "Marketing pages with top nav and footer. Clean sections with generous whitespace.",
+      "shell": "top-nav-footer"
+    }
+  },
+  "radius": {
+    "philosophy": "rounded",
+    "base": 8
+  },
+  "pattern_preferences": {
+    "prefer": [
+      "doc-editor",
+      "page-tree",
+      "comment-thread",
+      "presence-avatars",
+      "activity-feed"
+    ],
+    "avoid": [],
+    "default_presets": {}
+  },
+  "shell": {
+    "preferred": [
+      "workspace-aside",
+      "sidebar-main",
+      "top-nav-footer"
+    ],
+    "avoid": [
+      "full-bleed"
+    ],
+    "nav_style": "minimal",
+    "default_nav_state": "expanded",
+    "root": "paper-canvas",
+    "nav": "paper-surface",
+    "header": "",
+    "navLabel": "",
+    "brand": "",
+    "dimensions": null
+  },
+  "typography": {
+    "scale": "modular",
+    "heading_weight": 600,
+    "body_weight": 400,
+    "display": "'Charter', 'Georgia', serif",
+    "body": "'Charter', 'Georgia', serif"
+  },
+  "decorator_definitions": {
+    "paper-canvas": {
+      "description": "Warm cream background in light mode, soft charcoal in dark. Clean foundation for content.",
+      "intent": "Use as the root background to create the warm, paper-like reading environment. The cream tone reduces eye strain for long-form content.",
+      "suggested_properties": {
+        "background-color": "var(--d-bg, #FDFCFA)",
+        "color": "var(--d-text, #1A1918)",
+        "min-height": "100vh"
+      },
+      "pairs_with": [
+        "paper-surface",
+        "paper-prose"
+      ],
+      "usage": [
+        "Page root containers",
+        "App shell backgrounds"
+      ]
+    },
+    "paper-surface": {
+      "description": "Clean panel surface with subtle warmth. Used for sidebars and elevated areas.",
+      "intent": "Use for navigation panels and sidebar areas that need subtle elevation above the canvas without drawing attention from content.",
+      "suggested_properties": {
+        "background": "var(--d-surface, #FFFFFF)",
+        "border-right": "1px solid var(--d-border, #E8E6E3)"
+      },
+      "pairs_with": [
+        "paper-canvas",
+        "paper-card"
+      ],
+      "usage": [
+        "Sidebar panels",
+        "Page tree containers",
+        "Navigation areas"
+      ]
+    },
+    "paper-card": {
+      "description": "Minimal card styling with 1px warm border, 6px radius, no shadow. Content over decoration.",
+      "intent": "Use for content containers where the card itself should be nearly invisible. Minimal styling keeps focus on content.",
+      "suggested_properties": {
+        "background": "var(--d-surface, #FFFFFF)",
+        "border": "1px solid var(--d-border, #E8E6E3)",
+        "border-radius": "6px"
+      },
+      "pairs_with": [
+        "paper-canvas",
+        "paper-divider"
+      ],
+      "usage": [
+        "Document cards",
+        "Content containers",
+        "Activity items"
+      ]
+    },
+    "paper-input": {
+      "description": "Warm gray border with teal focus ring. Clean input styling for forms and editors.",
+      "intent": "Use for form inputs and editor controls. The teal focus ring provides clear visibility without being aggressive.",
+      "suggested_properties": {
+        "border": "1px solid var(--d-border, #E8E6E3)",
+        "border-radius": "6px",
+        "background": "var(--d-surface, #FFFFFF)",
+        "transition": "border-color 120ms ease, box-shadow 120ms ease"
+      },
+      "pairs_with": [
+        "paper-card",
+        "paper-canvas"
+      ],
+      "usage": [
+        "Text inputs",
+        "Editor fields",
+        "Search bars",
+        "Comment inputs"
+      ]
+    },
+    "paper-divider": {
+      "description": "Hairline separator using warm gray. Subtle content division.",
+      "intent": "Use to gently separate content sections. Near-invisible separators maintain the clean, content-focused aesthetic.",
+      "suggested_properties": {
+        "border-top": "1px solid var(--d-border, #E8E6E3)",
+        "margin": "0"
+      },
+      "pairs_with": [
+        "paper-canvas",
+        "paper-card"
+      ],
+      "usage": [
+        "Section dividers",
+        "List separators",
+        "Content breaks"
+      ]
+    },
+    "paper-prose": {
+      "description": "Optimized typography for reading. 16px base, 1.75 line-height, Inter font stack, max-width 680px.",
+      "intent": "Use for the main document editing and reading area. Optimized line-height and width ensure comfortable long-form reading.",
+      "suggested_properties": {
+        "font-size": "16px",
+        "line-height": "1.75",
+        "max-width": "680px",
+        "margin": "0 auto"
+      },
+      "pairs_with": [
+        "paper-canvas",
+        "paper-comment"
+      ],
+      "usage": [
+        "Document editor areas",
+        "Article bodies",
+        "Long-form content",
+        "Reading views"
+      ]
+    },
+    "paper-comment": {
+      "description": "Comment bubble with subtle shadow and presence color accent. Used in comment threads.",
+      "intent": "Use for comment threads alongside documents. The presence color accent ties each comment to its author.",
+      "suggested_properties": {
+        "background": "var(--d-surface, #FFFFFF)",
+        "border-radius": "8px",
+        "box-shadow": "0 1px 4px rgba(0, 0, 0, 0.06)",
+        "border-left": "3px solid var(--presence-color, #3B82F6)",
+        "padding": "12px"
+      },
+      "pairs_with": [
+        "paper-prose",
+        "paper-presence"
+      ],
+      "usage": [
+        "Comment bubbles",
+        "Annotation threads",
+        "Review comments"
+      ]
+    },
+    "paper-cursor": {
+      "description": "Remote cursor SVG with name label. Colored by collaborator presence color.",
+      "intent": "Use to show real-time collaborator cursor positions in the editor. Each cursor uses its collaborator's presence color.",
+      "suggested_properties": {
+        "position": "absolute",
+        "pointer-events": "none",
+        "z-index": "50",
+        "transition": "transform 50ms linear"
+      },
+      "pairs_with": [
+        "paper-prose",
+        "paper-presence",
+        "paper-selection"
+      ],
+      "usage": [
+        "Remote collaborator cursors",
+        "Real-time editing indicators"
+      ]
+    },
+    "paper-presence": {
+      "description": "Avatar ring indicating collaborator presence. Ring color matches assigned presence color.",
+      "intent": "Use to display which collaborators are currently active in the document. The colored ring provides quick identification.",
+      "suggested_properties": {
+        "border-radius": "50%",
+        "border": "2px solid var(--presence-color, #3B82F6)",
+        "width": "28px",
+        "height": "28px"
+      },
+      "pairs_with": [
+        "paper-cursor",
+        "paper-comment"
+      ],
+      "usage": [
+        "Collaborator avatars",
+        "Active user indicators",
+        "Presence displays"
+      ]
+    },
+    "paper-selection": {
+      "description": "Highlighted text selection for remote collaborators. Tinted with presence color at 20% opacity.",
+      "intent": "Use to show text selected by remote collaborators in real-time. Low opacity ensures readability.",
+      "suggested_properties": {
+        "background": "color-mix(in srgb, var(--presence-color, #3B82F6) 20%, transparent)",
+        "border-radius": "2px"
+      },
+      "pairs_with": [
+        "paper-cursor",
+        "paper-presence"
+      ],
+      "usage": [
+        "Remote text selections",
+        "Collaborative highlights"
+      ]
+    },
+    "paper-fade": {
+      "description": "Entrance animation: opacity 0 to 1, 180ms natural easing. No translation.",
+      "intent": "Use as the entrance animation for content. Pure fade without translation keeps the calm, distraction-free aesthetic.",
+      "suggested_properties": {
+        "animation": "paper-fade 180ms cubic-bezier(0.25, 0.1, 0.25, 1) both",
+        "opacity": "0"
+      },
+      "pairs_with": [
+        "paper-card",
+        "paper-prose"
+      ],
+      "usage": [
+        "Content fade-in",
+        "Page transitions",
+        "Panel reveals"
+      ]
+    }
+  },
+  "elevation": {
+    "1": {
+      "light": "0 1px 2px rgba(0,0,0,0.05)",
+      "dark": "0 1px 2px rgba(0,0,0,0.30)"
+    },
+    "2": {
+      "light": "0 2px 6px rgba(0,0,0,0.07)",
+      "dark": "0 2px 6px rgba(0,0,0,0.40)"
+    },
+    "3": {
+      "light": "0 6px 16px rgba(0,0,0,0.09)",
+      "dark": "0 6px 16px rgba(0,0,0,0.45)"
+    },
+    "4": {
+      "light": "0 12px 32px rgba(0,0,0,0.12)",
+      "dark": "0 12px 32px rgba(0,0,0,0.50)"
+    },
+    "5": {
+      "light": "0 24px 64px rgba(0,0,0,0.16)",
+      "dark": "0 24px 64px rgba(0,0,0,0.55)"
+    }
+  }
+}