@decantr/content 3.8.0

package/themes/retro.json

@@ -0,0 +1,240 @@
+{
+  "$schema": "https://decantr.ai/schemas/theme.v1.json",
+  "id": "retro",
+  "version": "1.0.0",
+  "name": "Retro",
+  "description": "Neobrutalism. Bold borders, offset shadows, sharp corners, snappy motion. Opinionated and distinctive. Everything feels physical and tactile.",
+  "tags": [
+    "neobrutalism",
+    "bold",
+    "tactile",
+    "physical",
+    "sharp"
+  ],
+  "personality": "sharp + brutalist elevation + snappy motion + bold borders + no gradients",
+  "seed": {
+    "primary": "#e63946",
+    "secondary": "#457b9d",
+    "accent": "#2a9d8f",
+    "background": "#fffef5"
+  },
+  "palette": {
+    "background": {
+      "light": "#FFFEF5",
+      "dark": "#1A1A18"
+    },
+    "surface": {
+      "light": "#FFFFFF",
+      "dark": "#222220"
+    },
+    "surface-raised": {
+      "light": "#FFF8E1",
+      "dark": "#2C2C28"
+    },
+    "border": {
+      "light": "#1A1A18",
+      "dark": "#E8E4D9"
+    },
+    "text": {
+      "light": "#1A1A18",
+      "dark": "#FFFEF5"
+    },
+    "text-muted": {
+      "light": "#6B6B60",
+      "dark": "#A8A89E"
+    },
+    "primary": {
+      "light": "#E63946",
+      "dark": "#FF5A67"
+    },
+    "primary-hover": {
+      "light": "#CC2D3A",
+      "dark": "#FF7A84"
+    }
+  },
+  "modes": [
+    "light",
+    "dark"
+  ],
+  "shapes": [
+    "sharp",
+    "rounded",
+    "pill"
+  ],
+  "decantr_compat": ">=2.0.0",
+  "source": "community",
+  "decorators": {
+    "retro-card": "Rounded container with bold 3px border, 4px offset shadow in dark, and warm cream background tint.",
+    "retro-badge": "Pill-shaped badge with saturated color fill, bold uppercase text, and 2px dark border outline.",
+    "retro-input": "Bordered input with generous 12px padding, warm cream background, and bold focus ring in primary red.",
+    "retro-button": "Chunky button with 3px border, 4px offset shadow that collapses on active press for tactile feedback.",
+    "retro-divider": "Thick 2px dashed border separator with warm dark color for section breaks."
+  },
+  "spatial": {
+    "density_bias": 0,
+    "content_gap_shift": 1,
+    "section_padding": "6rem",
+    "card_wrapping": "standard"
+  },
+  "motion": {
+    "preference": "subtle",
+    "reduce_motion": false,
+    "entrance": "none",
+    "timing": "ease-out",
+    "durations": {
+      "hover": "100ms",
+      "entrance": "200ms",
+      "instant": "80ms",
+      "fast": "150ms",
+      "base": "250ms",
+      "slow": "400ms",
+      "slower": "600ms",
+      "stagger": "60ms"
+    },
+    "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.56, 0.64, 1)"
+    }
+  },
+  "typography_hints": {
+    "scale": "modular",
+    "heading_weight": 600,
+    "body_weight": 400
+  },
+  "motion_hints": {
+    "preference": "subtle",
+    "reduce_motion_default": true
+  },
+  "decorator_definitions": {
+    "retro-card": {
+      "description": "Rounded container with bold 3px border, 4px offset shadow in dark, and warm cream background tint.",
+      "intent": "Use for all content containers. The bold border and offset shadow create the signature neobrutalist tactile, physical feel.",
+      "suggested_properties": {
+        "background": "var(--d-surface, #FFFFFF)",
+        "border": "3px solid var(--d-border, #1A1A18)",
+        "border-radius": "8px",
+        "box-shadow": "4px 4px 0 var(--d-border, #1A1A18)"
+      },
+      "pairs_with": [
+        "retro-button",
+        "retro-divider"
+      ],
+      "usage": [
+        "Content cards",
+        "Feature cards",
+        "Product cards",
+        "Info containers"
+      ]
+    },
+    "retro-badge": {
+      "description": "Pill-shaped badge with saturated color fill, bold uppercase text, and 2px dark border outline.",
+      "intent": "Use for labels, tags, and status indicators. The saturated fill and bold border make badges punchy and distinctive.",
+      "suggested_properties": {
+        "border-radius": "9999px",
+        "border": "2px solid var(--d-border, #1A1A18)",
+        "padding": "4px 12px",
+        "font-weight": "700",
+        "text-transform": "uppercase",
+        "font-size": "12px"
+      },
+      "pairs_with": [
+        "retro-card",
+        "retro-button"
+      ],
+      "usage": [
+        "Status badges",
+        "Category labels",
+        "Tags",
+        "Notification counts"
+      ]
+    },
+    "retro-input": {
+      "description": "Bordered input with generous 12px padding, warm cream background, and bold focus ring in primary red.",
+      "intent": "Use for form inputs that need to feel substantial and tactile. Generous padding and bold focus ring match the brutalist personality.",
+      "suggested_properties": {
+        "border": "3px solid var(--d-border, #1A1A18)",
+        "border-radius": "8px",
+        "background": "var(--d-surface-raised, #FFF8E1)",
+        "padding": "12px",
+        "transition": "box-shadow 100ms ease-out"
+      },
+      "pairs_with": [
+        "retro-card",
+        "retro-button"
+      ],
+      "usage": [
+        "Text inputs",
+        "Search fields",
+        "Form fields",
+        "Text areas"
+      ]
+    },
+    "retro-button": {
+      "description": "Chunky button with 3px border, 4px offset shadow that collapses on active press for tactile feedback.",
+      "intent": "Use for all buttons to create the signature tactile press effect. The shadow collapse on active mimics a physical button press.",
+      "suggested_properties": {
+        "border": "3px solid var(--d-border, #1A1A18)",
+        "border-radius": "8px",
+        "box-shadow": "4px 4px 0 var(--d-border, #1A1A18)",
+        "padding": "10px 20px",
+        "font-weight": "700",
+        "transition": "transform 100ms ease-out, box-shadow 100ms ease-out"
+      },
+      "pairs_with": [
+        "retro-card",
+        "retro-input"
+      ],
+      "usage": [
+        "Primary buttons",
+        "Submit buttons",
+        "Action buttons",
+        "Navigation buttons"
+      ]
+    },
+    "retro-divider": {
+      "description": "Thick 2px dashed border separator with warm dark color for section breaks.",
+      "intent": "Use to create bold, visible section breaks. The dashed style adds playfulness while maintaining the brutalist aesthetic.",
+      "suggested_properties": {
+        "border-top": "2px dashed var(--d-border, #1A1A18)",
+        "margin": "24px 0"
+      },
+      "pairs_with": [
+        "retro-card",
+        "retro-badge"
+      ],
+      "usage": [
+        "Section dividers",
+        "Content breaks",
+        "Form section separators"
+      ]
+    }
+  },
+  "typography": {
+    "display": "'Press Start 2P', 'VT323', ui-monospace, monospace",
+    "body": "'VT323', 'IBM Plex Mono', ui-monospace, monospace"
+  },
+  "elevation": {
+    "1": {
+      "light": "0 1px 2px rgba(0,0,0,0.06)",
+      "dark": "0 1px 2px rgba(0,0,0,0.45)"
+    },
+    "2": {
+      "light": "0 2px 4px rgba(0,0,0,0.08)",
+      "dark": "0 2px 4px rgba(0,0,0,0.55)"
+    },
+    "3": {
+      "light": "0 4px 12px rgba(0,0,0,0.10)",
+      "dark": "0 4px 12px rgba(0,0,0,0.60)"
+    },
+    "4": {
+      "light": "0 8px 24px rgba(0,0,0,0.14)",
+      "dark": "0 8px 24px rgba(0,0,0,0.65)"
+    },
+    "5": {
+      "light": "0 16px 48px rgba(0,0,0,0.18)",
+      "dark": "0 16px 48px rgba(0,0,0,0.70)"
+    }
+  }
+}

package/themes/studio-dark.json

@@ -0,0 +1,437 @@
+{
+  "$schema": "https://decantr.ai/schemas/theme.v1.json",
+  "id": "studio-dark",
+  "version": "1.0.0",
+  "name": "Studio Dark",
+  "description": "Music production theme with deep purple foundations, cyan waveforms, and magenta highlights. Electric and creative aesthetic for DAW interfaces, mixing consoles, and audio production tools.",
+  "tags": [
+    "dark",
+    "music",
+    "production",
+    "audio",
+    "creative",
+    "electric"
+  ],
+  "personality": "electric + creative + wave-driven + energetic",
+  "seed": {
+    "primary": "#22D3EE",
+    "secondary": "#D946EF",
+    "accent": "#D946EF",
+    "background": "#1E1B4B"
+  },
+  "palette": {
+    "background": {
+      "dark": "#1E1B4B"
+    },
+    "surface": {
+      "dark": "#2A2565"
+    },
+    "surface-raised": {
+      "dark": "#332E80"
+    },
+    "border": {
+      "dark": "#4338CA"
+    },
+    "text": {
+      "dark": "#E0E7FF"
+    },
+    "text-muted": {
+      "dark": "#A5B4FC"
+    },
+    "primary": {
+      "dark": "#22D3EE"
+    },
+    "primary-hover": {
+      "dark": "#06B6D4"
+    },
+    "secondary": {
+      "dark": "#D946EF"
+    },
+    "secondary-hover": {
+      "dark": "#C026D3"
+    },
+    "accent": {
+      "dark": "#D946EF"
+    },
+    "accent-hover": {
+      "dark": "#E879F9"
+    }
+  },
+  "modes": [
+    "dark"
+  ],
+  "shapes": [
+    "rounded",
+    "sharp"
+  ],
+  "cvd_support": [],
+  "tokens": {
+    "base": {
+      "success": "#22D3EE",
+      "danger": "#F43F5E",
+      "warning": "#FBBF24",
+      "info": "#D946EF"
+    },
+    "domain": {
+      "track-playing": "info",
+      "track-recording": "danger",
+      "track-muted": "text-muted",
+      "track-soloed": "warning",
+      "track-armed": "danger",
+      "track-bounced": "success"
+    }
+  },
+  "typography": {
+    "scale": "modular",
+    "heading_weight": 700,
+    "body_weight": 400,
+    "display": "'Inter', ui-sans-serif, system-ui, sans-serif",
+    "body": "'Inter', ui-sans-serif, system-ui, sans-serif"
+  },
+  "decantr_compat": ">=2.0.0",
+  "source": "core",
+  "decorators": {
+    "studio-wave": "Cyan waveform displays with glowing stroke and animated playhead. Audio visualization aesthetic.",
+    "studio-channel": "Vertical channel strips with fader, meter, and knob stack. Mixing console layout.",
+    "studio-meter": "VU meter styling with gradient fill from cyan through yellow to magenta at peak.",
+    "studio-knob": "Circular control knobs with cyan indicator and rotational value display.",
+    "studio-glow-cyan": "Cyan glow effects on active elements using box-shadow and text-shadow.",
+    "studio-glow-magenta": "Magenta glow on peaks, alerts, and secondary highlights.",
+    "studio-rack": "Equipment rack styling with 1U slot dividers and industrial metal aesthetic.",
+    "studio-beat": "Beat grid lines with subdivision markers for timeline and arrangement views."
+  },
+  "spatial": {
+    "density_bias": 1,
+    "content_gap_shift": -1,
+    "section_padding": "2rem",
+    "card_wrapping": "none",
+    "surface_override": null
+  },
+  "motion": {
+    "preference": "expressive",
+    "reduce_motion": true,
+    "entrance": "studio-pulse",
+    "micro": "smooth",
+    "timing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "durations": {
+      "hover": "100ms",
+      "entrance": "250ms",
+      "modal": "200ms",
+      "page": "300ms",
+      "instant": "80ms",
+      "fast": "150ms",
+      "base": "250ms",
+      "slow": "400ms",
+      "slower": "600ms",
+      "stagger": "60ms"
+    },
+    "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.56, 0.64, 1)"
+    }
+  },
+  "effects": {
+    "enabled": true,
+    "intensity": "strong",
+    "type_mapping": {
+      "waveform": [
+        "studio-wave",
+        "studio-glow-cyan"
+      ],
+      "channel": [
+        "studio-channel"
+      ],
+      "meter": [
+        "studio-meter"
+      ],
+      "knob": [
+        "studio-knob"
+      ],
+      "timeline": [
+        "studio-beat"
+      ]
+    },
+    "optional_effects": {
+      "glow-cyan": true,
+      "glow-magenta": true,
+      "rack": true
+    },
+    "component_fallback": {
+      "Waveform": "waveform",
+      "Channel": "channel",
+      "Meter": "meter",
+      "Knob": "knob",
+      "Timeline": "timeline"
+    }
+  },
+  "compositions": {
+    "daw": {
+      "description": "Digital audio workstation with track arrangement, mixer view, and transport controls.",
+      "shell": "sidebar-main",
+      "effects": [
+        "studio-wave",
+        "studio-channel",
+        "studio-beat",
+        "studio-glow-cyan"
+      ]
+    },
+    "mixer": {
+      "description": "Mixing console with channel strips, busses, and master section.",
+      "shell": "full-bleed",
+      "effects": [
+        "studio-channel",
+        "studio-meter",
+        "studio-knob"
+      ]
+    },
+    "marketing": {
+      "description": "Music production marketing with waveform visuals and electric color palette.",
+      "shell": "top-nav-footer",
+      "effects": [
+        "studio-wave",
+        "studio-glow-magenta"
+      ]
+    },
+    "library": {
+      "description": "Sample library browser with waveform previews and tag filtering.",
+      "shell": "sidebar-main",
+      "effects": [
+        "studio-wave",
+        "studio-glow-cyan"
+      ]
+    }
+  },
+  "radius": {
+    "philosophy": "rounded",
+    "base": 6
+  },
+  "pattern_preferences": {
+    "prefer": [
+      "timeline-arrangement",
+      "channel-strip",
+      "waveform-player",
+      "beat-grid",
+      "sample-browser"
+    ],
+    "avoid": [
+      "chat-portal"
+    ],
+    "default_presets": {
+      "sample-browser": "grid",
+      "timeline-arrangement": "track"
+    }
+  },
+  "shell": {
+    "preferred": [
+      "sidebar-main",
+      "full-bleed"
+    ],
+    "avoid": [
+      "chat-portal",
+      "centered"
+    ],
+    "nav_style": "creative",
+    "default_nav_state": "expanded",
+    "root": "studio-rack",
+    "nav": "studio-channel",
+    "header": "studio-glow-cyan",
+    "navLabel": "",
+    "brand": "studio-glow-magenta",
+    "dimensions": null
+  },
+  "decorator_definitions": {
+    "studio-wave": {
+      "description": "Cyan waveform displays with glowing stroke and animated playhead. Audio visualization aesthetic.",
+      "intent": "Use for all audio visualization including waveforms, spectrum analyzers, and sample previews.",
+      "suggested_properties": {
+        "stroke": "#22D3EE",
+        "stroke-width": "1.5",
+        "fill": "none",
+        "filter": "drop-shadow(0 0 4px rgba(34, 211, 238, 0.6))",
+        "background": "#1E1B4B"
+      },
+      "pairs_with": [
+        "studio-glow-cyan",
+        "studio-beat",
+        "studio-channel"
+      ],
+      "usage": [
+        "Audio waveforms",
+        "Spectrum analyzers",
+        "Sample previews",
+        "Automation curves"
+      ]
+    },
+    "studio-channel": {
+      "description": "Vertical channel strips with fader, meter, and knob stack. Mixing console layout.",
+      "intent": "Use for mixer channel strips with vertical fader and stacked controls. Reproduces console aesthetic.",
+      "suggested_properties": {
+        "display": "flex",
+        "flex-direction": "column",
+        "width": "80px",
+        "background": "#2A2565",
+        "border": "1px solid #4338CA",
+        "border-radius": "6px",
+        "padding": "8px",
+        "gap": "8px"
+      },
+      "pairs_with": [
+        "studio-meter",
+        "studio-knob",
+        "studio-glow-cyan"
+      ],
+      "usage": [
+        "Mixer channels",
+        "Bus strips",
+        "Master section",
+        "Aux sends"
+      ]
+    },
+    "studio-meter": {
+      "description": "VU meter styling with gradient fill from cyan through yellow to magenta at peak.",
+      "intent": "Use for level meters, peak indicators, and VU displays. Standard audio metering color progression.",
+      "suggested_properties": {
+        "background": "linear-gradient(to top, #22D3EE 0%, #22D3EE 60%, #FBBF24 80%, #D946EF 100%)",
+        "width": "6px",
+        "border-radius": "2px",
+        "box-shadow": "0 0 8px rgba(34, 211, 238, 0.4)"
+      },
+      "pairs_with": [
+        "studio-channel",
+        "studio-glow-cyan",
+        "studio-glow-magenta"
+      ],
+      "usage": [
+        "Level meters",
+        "VU displays",
+        "Peak indicators",
+        "Gain reduction meters"
+      ]
+    },
+    "studio-knob": {
+      "description": "Circular control knobs with cyan indicator and rotational value display.",
+      "intent": "Use for rotary controls like gain, pan, filter, and send knobs. Classic hardware-style rotary knobs.",
+      "suggested_properties": {
+        "width": "40px",
+        "height": "40px",
+        "border-radius": "50%",
+        "background": "radial-gradient(circle at 30% 30%, #4338CA, #2A2565)",
+        "border": "2px solid #22D3EE",
+        "box-shadow": "0 0 12px rgba(34, 211, 238, 0.3), inset 0 2px 4px rgba(0,0,0,0.4)",
+        "position": "relative"
+      },
+      "pairs_with": [
+        "studio-channel",
+        "studio-glow-cyan"
+      ],
+      "usage": [
+        "Gain controls",
+        "Pan knobs",
+        "Filter knobs",
+        "Effect parameters"
+      ]
+    },
+    "studio-glow-cyan": {
+      "description": "Cyan glow effects on active elements using box-shadow and text-shadow.",
+      "intent": "Use for active/selected elements and primary highlights. Creates electric, energetic feel.",
+      "suggested_properties": {
+        "box-shadow": "0 0 12px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3)",
+        "text-shadow": "0 0 8px rgba(34, 211, 238, 0.6)"
+      },
+      "pairs_with": [
+        "studio-wave",
+        "studio-channel",
+        "studio-knob"
+      ],
+      "usage": [
+        "Active elements",
+        "Selected tracks",
+        "Focus indicators",
+        "Primary highlights"
+      ]
+    },
+    "studio-glow-magenta": {
+      "description": "Magenta glow on peaks, alerts, and secondary highlights.",
+      "intent": "Use for peak warnings, recording indicators, and secondary accent highlights. Hot signal aesthetic.",
+      "suggested_properties": {
+        "box-shadow": "0 0 12px rgba(217, 70, 239, 0.5), 0 0 24px rgba(217, 70, 239, 0.3)",
+        "text-shadow": "0 0 8px rgba(217, 70, 239, 0.6)"
+      },
+      "pairs_with": [
+        "studio-meter",
+        "studio-wave",
+        "studio-glow-cyan"
+      ],
+      "usage": [
+        "Peak warnings",
+        "Recording indicators",
+        "Alert states",
+        "Secondary highlights"
+      ]
+    },
+    "studio-rack": {
+      "description": "Equipment rack styling with 1U slot dividers and industrial metal aesthetic.",
+      "intent": "Use for equipment rack layouts and plugin host windows. Reproduces 19-inch rack unit aesthetic.",
+      "suggested_properties": {
+        "background": "linear-gradient(180deg, #2A2565 0%, #1E1B4B 100%)",
+        "border": "1px solid #4338CA",
+        "border-radius": "4px",
+        "padding": "12px",
+        "box-shadow": "inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.4)"
+      },
+      "pairs_with": [
+        "studio-knob",
+        "studio-meter",
+        "studio-glow-cyan"
+      ],
+      "usage": [
+        "Plugin containers",
+        "Effect racks",
+        "Instrument hosts",
+        "Rack layouts"
+      ]
+    },
+    "studio-beat": {
+      "description": "Beat grid lines with subdivision markers for timeline and arrangement views.",
+      "intent": "Use for timeline grids, beat markers, and arrangement views. Essential for rhythm-based editing.",
+      "suggested_properties": {
+        "background-image": "repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.2) 0, rgba(34, 211, 238, 0.2) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.08) 0, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 10px)",
+        "background-color": "#1E1B4B"
+      },
+      "pairs_with": [
+        "studio-wave",
+        "studio-glow-cyan"
+      ],
+      "usage": [
+        "Timeline grids",
+        "Arrangement views",
+        "Beat markers",
+        "Pattern editors"
+      ]
+    }
+  },
+  "elevation": {
+    "1": {
+      "light": "0 1px 2px rgba(0,0,0,0.06)",
+      "dark": "0 1px 2px rgba(0,0,0,0.45)"
+    },
+    "2": {
+      "light": "0 2px 4px rgba(0,0,0,0.08)",
+      "dark": "0 2px 4px rgba(0,0,0,0.55)"
+    },
+    "3": {
+      "light": "0 4px 12px rgba(0,0,0,0.10)",
+      "dark": "0 4px 12px rgba(0,0,0,0.60)"
+    },
+    "4": {
+      "light": "0 8px 24px rgba(0,0,0,0.14)",
+      "dark": "0 8px 24px rgba(0,0,0,0.65)"
+    },
+    "5": {
+      "light": "0 16px 48px rgba(0,0,0,0.18)",
+      "dark": "0 16px 48px rgba(0,0,0,0.70)"
+    }
+  }
+}