diff --git a/Spec/brand-guide.json b/Spec/brand-guide.json new file mode 100644 index 00000000..c0726e3b --- /dev/null +++ b/Spec/brand-guide.json @@ -0,0 +1,20 @@ +{ + "data": { + "type": "card", + "attributes": { + "cardTitle": "Brand Guide", + "cardDescription": "Guide to brand elements and visual style", + "specType": "card", + "ref": { + "module": "https://cardstack.com/base/brand-guide", + "name": "default" + } + }, + "meta": { + "adoptsFrom": { + "module": "https://cardstack.com/base/spec", + "name": "Spec" + } + } + } +} diff --git a/Spec/structured-theme.json b/Spec/structured-theme.json new file mode 100644 index 00000000..20b61913 --- /dev/null +++ b/Spec/structured-theme.json @@ -0,0 +1,20 @@ +{ + "data": { + "type": "card", + "attributes": { + "cardTitle": "Structured Theme", + "cardDescription": "A card for defining a structured theme with CSS variables", + "specType": "card", + "ref": { + "module": "https://cardstack.com/base/structured-theme", + "name": "default" + } + }, + "meta": { + "adoptsFrom": { + "module": "https://cardstack.com/base/spec", + "name": "Spec" + } + } + } +} diff --git a/Spec/style-reference.json b/Spec/style-reference.json new file mode 100644 index 00000000..5ab7f482 --- /dev/null +++ b/Spec/style-reference.json @@ -0,0 +1,19 @@ +{ + "data": { + "type": "card", + "attributes": { + "cardTitle": "Style Reference", + "specType": "card", + "ref": { + "module": "https://cardstack.com/base/style-reference", + "name": "default" + } + }, + "meta": { + "adoptsFrom": { + "module": "https://cardstack.com/base/spec", + "name": "Spec" + } + } + } +} diff --git a/Spec/theme.json b/Spec/theme.json new file mode 100644 index 00000000..a1a1c096 --- /dev/null +++ b/Spec/theme.json @@ -0,0 +1,20 @@ +{ + "data": { + "type": "card", + "attributes": { + "cardTitle": "Theme", + "specType": "card", + "cardDescription": "Comprehensive reference card for documenting a product’s visual language and theme variables.", + "ref": { + "module": "https://cardstack.com/base/detailed-style-reference", + "name": "default" + } + }, + "meta": { + "adoptsFrom": { + "module": "https://cardstack.com/base/spec", + "name": "Spec" + } + } + } +} diff --git a/Theme/amethyst-haze.json b/Theme/amethyst-haze.json new file mode 100644 index 00000000..5249d542 --- /dev/null +++ b/Theme/amethyst-haze.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn preset channeling the dreamy pastel-violet palettes of twilight photography and lo-fi album art — purple as atmosphere rather than as a loud brand color.", + "colorPalette": "Misted purples throughout. Light mode rests on lavender-white `#f8f7fa` with dusk-gray ink `#3d3c4f`; dark mode deepens to violet-black `#1a1823` with pale lilac text `#e0ddef`. Muted amethyst `#8a79ab` / `#a995c9` leads, dusty rose `#e6a5b8` accents, soft red `#d95c5c` marks destructive. Charts spread pastel — amethyst, rose, sage, apricot, periwinkle.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Geist keeps the UI crisp and contemporary against the hazy palette; Lora adds a warm serif for editorial passages, and Fira Code covers code with ligatures.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Amethyst Haze", + "inspirations": [ + "tweakcn theme registry", + "Twilight and dusk color photography", + "Lo-fi pastel album art" + ], + "visualDNA": "A soft twilight haze: low-saturation purples on misty near-white grounds, dusty-rose warmth, gentle 0.5rem rounding, and feather-light shadows. Calm, romantic, and quiet.", + "wallpaperImages": [], + "rootVariables": { + "background": "#f8f7fa", + "foreground": "#3d3c4f", + "card": "#ffffff", + "cardForeground": "#3d3c4f", + "popover": "#ffffff", + "popoverForeground": "#3d3c4f", + "primary": "#8a79ab", + "primaryForeground": "#f8f7fa", + "secondary": "#dfd9ec", + "secondaryForeground": "#3d3c4f", + "muted": "#dcd9e3", + "mutedForeground": "#6b6880", + "accent": "#e6a5b8", + "accentForeground": "#4b2e36", + "destructive": "#d95c5c", + "destructiveForeground": "#f8f7fa", + "success": null, + "border": "#cec9d9", + "input": "#eae7f0", + "ring": "#8a79ab", + "chart1": "#8a79ab", + "chart2": "#e6a5b8", + "chart3": "#77b8a1", + "chart4": "#f0c88d", + "chart5": "#a0bbe3", + "sidebar": "#f1eff5", + "sidebarForeground": "#3d3c4f", + "sidebarPrimary": "#8a79ab", + "sidebarPrimaryForeground": "#f8f7fa", + "sidebarAccent": "#e6a5b8", + "sidebarAccentForeground": "#4b2e36", + "sidebarBorder": "#d7d2e0", + "sidebarRing": "#8a79ab", + "fontSans": "Geist, sans-serif", + "fontSerif": "\"Lora\", Georgia, serif", + "fontMono": "\"Fira Code\", \"Courier New\", monospace", + "radius": "0.5rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "1px 2px 5px 1px hsl(0 0% 0% / 0.03)", + "shadowXs": "1px 2px 5px 1px hsl(0 0% 0% / 0.03)", + "shadowSm": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06)", + "shadow": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06)", + "shadowMd": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06)", + "shadowLg": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06)", + "shadowXl": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06)", + "shadow2xl": "1px 2px 5px 1px hsl(0 0% 0% / 0.15)" + }, + "darkModeVariables": { + "background": "#1a1823", + "foreground": "#e0ddef", + "card": "#232030", + "cardForeground": "#e0ddef", + "popover": "#232030", + "popoverForeground": "#e0ddef", + "primary": "#a995c9", + "primaryForeground": "#1a1823", + "secondary": "#5a5370", + "secondaryForeground": "#e0ddef", + "muted": "#242031", + "mutedForeground": "#a09aad", + "accent": "#372e3f", + "accentForeground": "#f2b8c6", + "destructive": "#e57373", + "destructiveForeground": "#1a1823", + "success": null, + "border": "#302c40", + "input": "#2a273a", + "ring": "#a995c9", + "chart1": "#a995c9", + "chart2": "#f2b8c6", + "chart3": "#77b8a1", + "chart4": "#f0c88d", + "chart5": "#a0bbe3", + "sidebar": "#16141e", + "sidebarForeground": "#e0ddef", + "sidebarPrimary": "#a995c9", + "sidebarPrimaryForeground": "#1a1823", + "sidebarAccent": "#372e3f", + "sidebarAccentForeground": "#f2b8c6", + "sidebarBorder": "#2a273a", + "sidebarRing": "#a995c9", + "fontSans": "Geist, sans-serif", + "fontSerif": "\"Lora\", Georgia, serif", + "fontMono": "\"Fira Code\", \"Courier New\", monospace", + "radius": "0.5rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "1px 2px 5px 1px hsl(0 0% 0% / 0.03)", + "shadowXs": "1px 2px 5px 1px hsl(0 0% 0% / 0.03)", + "shadowSm": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06)", + "shadow": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06)", + "shadowMd": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06)", + "shadowLg": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06)", + "shadowXl": "1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06)", + "shadow2xl": "1px 2px 5px 1px hsl(0 0% 0% / 0.15)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Amethyst Haze", + "summary": "Dreamy lavender theme from tweakcn — muted amethyst lead, dusty-rose accent, Geist and Lora type.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/botanical.json b/Theme/botanical.json new file mode 100644 index 00000000..ffedd5ba --- /dev/null +++ b/Theme/botanical.json @@ -0,0 +1,182 @@ +{ + "data": { + "meta": { + "adoptsFrom": { + "name": "default", + "module": "https://cardstack.com/base/detailed-style-reference" + } + }, + "type": "card", + "attributes": { + "cardInfo": { + "notes": null, + "name": "Botanical", + "summary": null, + "cardThumbnailURL": null + }, + "styleName": "Botanical", + "visualDNA": "A natural, organic design language inspired by botanical gardens and plant life. Features earthy greens, warm neutrals, and soft, flowing forms that evoke the tranquility of nature.", + "customCssImports": [], + "typography": { + "body": { + "fontSize": "1rem", + "fontFamily": "'Inter', sans-serif", + "fontWeight": "400", + "lineHeight": "1.6", + "sampleText": "Explore the diverse world of plants, from delicate ferns to towering trees, each with its own unique story to tell." + }, + "caption": { + "fontSize": "0.875rem", + "fontFamily": "'Inter', sans-serif", + "fontWeight": "400", + "lineHeight": "1.5", + "sampleText": "Photo: Morning dew on monstera leaves" + }, + "heading": { + "fontSize": "2.5rem", + "fontFamily": "'Playfair Display', serif", + "fontWeight": "700", + "lineHeight": "1.2", + "sampleText": "Botanical Garden" + }, + "subheading": { + "fontSize": "1.25rem", + "fontFamily": "'Inter', sans-serif", + "fontWeight": "600", + "lineHeight": "1.4", + "sampleText": "Discover rare plant species" + }, + "sectionHeading": { + "fontSize": "1.875rem", + "fontFamily": "'Playfair Display', serif", + "fontWeight": "600", + "lineHeight": "1.3", + "sampleText": "Native Flora Collection" + } + }, + "colorPalette": "Primary: Deep Forest Green (#2d5016) for primary actions and emphasis. \n\nSecondary: Sage Green (#87a96b) for secondary elements. \n\nAccent: Terracotta (#c1876b) for highlights and calls-to-action.\n\nBackground: Warm Cream (#faf8f3) for a natural, paper-like feel.\n\nNeutrals: Soft grays and warm browns for text and borders.", + "contentVoice": "Warm, inviting, and educational. Use natural, organic language. Informative yet accessible, like a friendly botanist guide. Encourage exploration and discovery.", + "inspirations": [ + "Botanical gardens and conservatories", + "Vintage botanical illustrations", + "Natural history museums", + "Scandinavian nature design", + "Japanese garden aesthetics" + ], + "designMindset": "Design with nature as your guide. Every element should feel organic yet intentional, like a well-tended garden. Balance traditional botanical illustration aesthetics with modern, clean interfaces.", + "rootVariables": { + "card": "#ffffff", + "ring": "#2d5016", + "input": "#d4d0c5", + "muted": "#e8e6df", + "accent": "#c1876b", + "border": "#d4d0c5", + "chart1": "#2d5016", + "chart2": "#87a96b", + "chart3": "#c1876b", + "chart4": "#6b8e4e", + "chart5": "#d4a574", + "radius": "0.75rem", + "shadow": "0 4px 6px -1px rgba(45, 51, 25, 0.1), 0 2px 4px -2px rgba(45, 51, 25, 0.1)", + "popover": "#ffffff", + "primary": "#2d5016", + "sidebar": "#f4f2eb", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "fontMono": "'JetBrains Mono', 'Consolas', monospace", + "fontSans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + "shadowLg": "0 10px 20px -3px rgba(45, 51, 25, 0.15), 0 4px 10px -4px rgba(45, 51, 25, 0.1)", + "shadowMd": "0 6px 12px -2px rgba(45, 51, 25, 0.12), 0 3px 7px -3px rgba(45, 51, 25, 0.1)", + "shadowSm": "0 2px 4px -1px rgba(45, 51, 25, 0.06), 0 4px 6px -1px rgba(45, 51, 25, 0.1)", + "shadowXl": "0 20px 25px -5px rgba(45, 51, 25, 0.15), 0 8px 10px -6px rgba(45, 51, 25, 0.1)", + "shadowXs": "0 1px 3px 0 rgba(45, 51, 25, 0.1), 0 1px 2px -1px rgba(45, 51, 25, 0.1)", + "fontSerif": "'Playfair Display', 'Georgia', serif", + "secondary": "#87a96b", + "shadow2xl": "0 25px 50px -12px rgba(45, 51, 25, 0.25)", + "shadow2xs": "0 1px 2px 0 rgba(45, 51, 25, 0.05)", + "background": "#faf8f3", + "foreground": "#2d3319", + "destructive": "#a8402f", + "sidebarRing": "#2d5016", + "sidebarAccent": "#87a96b", + "sidebarBorder": "#d4d0c5", + "cardForeground": "#2d3319", + "sidebarPrimary": "#2d5016", + "trackingNormal": "0", + "mutedForeground": "#6b7060", + "accentForeground": "#2d3319", + "popoverForeground": "#2d3319", + "primaryForeground": "#f7f9f5", + "sidebarForeground": "#2d3319", + "secondaryForeground": "#1a1f13", + "destructiveForeground": "#fef7f5", + "success": null, + "sidebarAccentForeground": "#1a1f13", + "sidebarPrimaryForeground": "#f7f9f5" + }, + "motionLanguage": "Gentle, organic movements. Ease-in-out timing (0.3-0.5s) like swaying leaves. Subtle fade and scale transitions. Growth-inspired animations: elements unfold like unfurling leaves, expand like blooming flowers.", + "technicalSpecs": "CSS Grid for natural, flowing layouts. CSS Custom Properties for theming. Smooth transitions with cubic-bezier easing. Mobile-first responsive design. WCAG AA contrast ratios maintained.", + "wallpaperImages": [], + "compositionRules": "Generous whitespace like breathing room in a garden. Vertical rhythm following natural growth patterns. Content grouped in clusters like plant arrangements.", + "qualityStandards": "Maintain earthy, natural color harmony. Ensure readability with sufficient contrast. Use consistent rounded corners (8-12px). Keep animations subtle and purposeful. Test in both bright and dim lighting conditions.", + "typographySystem": "Heading: Playfair Display - elegant serif that evokes classic botanical illustrations. \n\nBody: Inter - clean, readable sans-serif for modern clarity. \n\nThe combination creates a balance between traditional natural beauty and contemporary usability.", + "darkModeVariables": { + "card": "#232a1b", + "ring": "#87a96b", + "input": "#3a4229", + "muted": "#2d3524", + "accent": "#d4a574", + "border": "#3a4229", + "chart1": "#87a96b", + "chart2": "#6b8e4e", + "chart3": "#d4a574", + "chart4": "#c1876b", + "chart5": "#a8b892", + "radius": "0.75rem", + "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4)", + "popover": "#232a1b", + "primary": "#87a96b", + "sidebar": "#1f2417", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "fontMono": "'JetBrains Mono', 'Consolas', monospace", + "fontSans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", + "shadowLg": "0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 10px -4px rgba(0, 0, 0, 0.4)", + "shadowMd": "0 6px 12px -2px rgba(0, 0, 0, 0.45), 0 3px 7px -3px rgba(0, 0, 0, 0.4)", + "shadowSm": "0 2px 4px -1px rgba(0, 0, 0, 0.35), 0 4px 6px -1px rgba(0, 0, 0, 0.4)", + "shadowXl": "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4)", + "shadowXs": "0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4)", + "fontSerif": "'Playfair Display', 'Georgia', serif", + "secondary": "#4a5d37", + "shadow2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.6)", + "shadow2xs": "0 1px 2px 0 rgba(0, 0, 0, 0.3)", + "background": "#1a1f13", + "foreground": "#e8ebe3", + "destructive": "#d4624d", + "sidebarRing": "#87a96b", + "sidebarAccent": "#4a5d37", + "sidebarBorder": "#3a4229", + "cardForeground": "#e8ebe3", + "sidebarPrimary": "#87a96b", + "trackingNormal": "0", + "mutedForeground": "#9ca38d", + "accentForeground": "#1a1f13", + "popoverForeground": "#e8ebe3", + "primaryForeground": "#1a1f13", + "sidebarForeground": "#e8ebe3", + "secondaryForeground": "#e8ebe3", + "destructiveForeground": "#fef7f5", + "success": null, + "sidebarAccentForeground": "#e8ebe3", + "sidebarPrimaryForeground": "#1a1f13" + }, + "geometricLanguage": "Soft, organic shapes with rounded corners (8-12px radius). Flowing, natural curves rather than sharp angles. Asymmetric layouts that feel balanced like natural growth patterns.", + "historicalContext": null, + "materialVocabulary": "Subtle textures suggesting natural materials: soft paper grain, linen weaves. Gentle shadows that mimic dappled sunlight (0.5-2px). Matte finishes with occasional soft glosses like morning dew.", + "componentVocabulary": "Buttons: Rounded with subtle depth, like smooth river stones. \n\nCards: Soft shadows, cream backgrounds, subtle borders. \n\nInputs: Natural borders with gentle focus states (green glow). \n\nTags/Pills: Rounded, using sage and terracotta colors.", + "applicationScenarios": "Perfect for: Nature/gardening apps, wellness platforms, sustainable brands, educational content, eco-friendly e-commerce, botanical databases, outdoor recreation apps." + } + } +} diff --git a/Theme/boxel-brand-guide.json b/Theme/boxel-brand-guide.json index 03a45e21..b5586e4a 100644 --- a/Theme/boxel-brand-guide.json +++ b/Theme/boxel-brand-guide.json @@ -8,7 +8,6 @@ }, "type": "card", "attributes": { - "spacing": "0.25rem", "version": "7.0", "cardInfo": { "notes": "v7.0 - Dense Modularity (UI Optimized)", @@ -32,8 +31,8 @@ "secondaryMarkClearanceRatio": "1.25" }, "styleName": "Box Element System", - "visualDNA": "# The Box Element\n\n**Every interface is a conversation between containers.**\n\nAt the heart of Boxel lives a singular unit: the **Box Element**\u2014a composable rectangle that snaps to an 8px grid and carries meaning through structure. Not ornament. Not decoration. Structure.\n\nWhile the broader design ecosystem swings toward borderless fluidity, Boxel embraces the opposite truth: **borders create clarity**. Each Box Element is a bounded context, a data payload, a functional unit. Stack them. Nest them. Connect them. The system emerges from their composition.\n\n## Three Qualities Define the Box\n\n**1. Density as Signal** \nTight spacing communicates capability. A Box Element wastes no pixel on performance theater\u2014every 8px increment serves information architecture. Yet density without breathing room becomes noise. Hence the `0.625rem` corner radius: soft enough to invite interaction, sharp enough to respect the grid.\n\n**2. Borders as Vocabulary** \nA 1px hairline isn't merely separation\u2014it's syntax. In light mode, borders whisper (#E0E0E0). In dark mode, they glow subtly brighter than their container (#333333). This inversion ensures the Box Element remains legible across contexts while maintaining its fundamental promise: **you always know where one thing ends and another begins.**\n\n**3. Modularity as Philosophy** \nBox Elements compose like functions. A Panel contains Cards. A Card contains Badges. Each nesting level maintains its structural identity. No element floats ambiguously. The hierarchy is always visible, always parseable\u2014by humans and machines alike.", - "cssImports": [], + "visualDNA": "# The Box Element\n\n**Every interface is a conversation between containers.**\n\nAt the heart of Boxel lives a singular unit: the **Box Element**\u2014a composable rectangle that snaps to a 4px grid and carries meaning through structure. Not ornament. Not decoration. Structure.\n\nWhile the broader design ecosystem swings toward borderless fluidity, Boxel embraces the opposite truth: **borders create clarity**. Each Box Element is a bounded context, a data payload, a functional unit. Stack them. Nest them. Connect them. The system emerges from their composition.\n\n## Three Qualities Define the Box\n\n**1. Density as Signal** \nTight spacing communicates capability. A Box Element wastes no pixel on performance theater\u2014every increment of the unit serves information architecture. Yet density without breathing room becomes noise. Hence the `0.625rem` corner radius: soft enough to invite interaction, sharp enough to respect the grid.\n\n**2. Borders as Vocabulary** \nA 1px hairline isn't merely separation\u2014it's syntax. In light mode, borders whisper (#E2E8F0). In dark mode, they glow subtly brighter than their container (#333333). This inversion ensures the Box Element remains legible across contexts while maintaining its fundamental promise: **you always know where one thing ends and another begins.**\n\n**3. Modularity as Philosophy** \nBox Elements compose like functions. A Panel contains Cards. A Card contains Badges. Each nesting level maintains its structural identity. No element floats ambiguously. The hierarchy is always visible, always parseable\u2014by humans and machines alike.", + "customCssImports": [], "typography": { "body": { "fontSize": "0.9375rem", @@ -73,7 +72,6 @@ }, "colorPalette": "# Functional Color Architecture\n\n**Color as status, not decoration.**\n\nOur palette rejects the arbitrary. Each hue maps to a system state or interaction primitive.\n\n## Canvas Strategy\n\n**Light Mode Foundation** \n- **Surface:** `#F7F8FA` \u2014 Boxel Paper. A cool, high-luminosity neutral that reduces eye strain while letting white Box Elements pop with crisp contrast.\n- **Box Element:** `#FFFFFF` \u2014 Pure white. The atomic unit. Unmistakable.\n- **Border:** `#E2E8F0` \u2014 Detail Grey. Visible at a glance, invisible to distraction.\n\n**Dark Mode Inversion** \n- **Surface:** `#0F0F0F` \u2014 Near-void black. The negative space that makes light elements sing.\n- **Box Element:** `#1E1E1E` \u2014 Elevated slate. Slightly brighter than the void.\n- **Border:** `#333333` \u2014 Reflective edge. Lighter than the box, maintaining readability through luminance contrast.\n\n## Interaction Accents\n\n**Boxel Teal** (`#00ffba`) \nThe cursor of intent. Deployed for selection states and primary actions. When something is Teal, it's either chosen or choosable. (Fun fact: this wavelength sits at the precise intersection of attention-grabbing and easy-on-retinas.)\n\n**Cardstack Lime** (`#C3FC33`) \nSuccess echo. Used for positive confirmation states and data visualization peaks. Think \"transaction complete\" or \"metric exceeded threshold.\" Lime doesn't appear unless something good just happened.\n\n**Cardstack Purple** (`#6638FF`) \nSecondary depth. Provides visual hierarchy when Teal would be too dominant. Often used for supporting actions or complementary data series in charts.", "contentVoice": "# Writing for Box Elements\n\n**Precision. Clarity. Zero fluff.**\n\nBoxel's content voice mirrors its visual language: **high signal-to-noise ratio**. We write like system architects who respect the reader's intelligence and time.\n\n## Vocabulary Choices\n\nWe use the language of builders: \n\u2713 **Deploy** (not \"publish\") \n\u2713 **Stack** (not \"combine\") \n\u2713 **Nest** (not \"organize\") \n\u2713 **Render** (not \"display\") \n\u2713 **State** (not \"status\") \n\u2713 **Compose** (not \"create\")\n\nThese terms come from programming and architecture. They communicate that Boxel users aren't just clicking buttons\u2014they're constructing systems.\n\n## Tone Spectrum\n\n**For Features (Technical):** \n\"Composable unit. Scale infinite.\" \nShort declarative phrases. No marketing hyperbole. The product speaks through capability, not adjectives.\n\n**For Value (Aspirational):** \n\"Every workflow is a series of boxes waiting to be connected.\" \nShift to metaphor and possibility. Still grounded, but now we're talking about *why*, not just *what*.\n\n**For Errors (Helpful):** \n\"This box requires authentication. Connect your account to proceed.\" \nNever blame the user. Explain state, suggest action, maintain calm.\n\n## The \"We\" Convention\n\nWe use **\"we\"** to imply a collective movement. Not \"our platform\" but \"we're building.\" Not \"you can\" but \"we enable.\" This positions Boxel as a tool for a community of makers, not a product being sold to consumers.\n\n**Voice truth:** If you wouldn't say it in a code comment, don't say it in marketing copy. Developers can smell BS from orbit.", - "cornerRadius": "0.625rem", "inspirations": [ "Financial terminals \u2014 data density without cognitive overload", "Modular synthesizers \u2014 distinct units, infinite combinations", @@ -85,7 +83,7 @@ "rootVariables": { "card": "var(--boxel-light, #FFFFFF)", "ring": "var(--boxel-teal, #00FFBA)", - "input": "var(--boxel-light, #FFFFFF)", + "input": "var(--boxel-400, #afafb7)", "muted": "#F5F5F5", "accent": "var(--cardstack-lime, #C3FC33)", "border": "#E2E8F0", @@ -111,9 +109,10 @@ "secondary": "var(--cardstack-purple, #6638FF)", "shadow2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)", "shadow2xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)", - "background": "var(--boxel-dove, #F7F8FA)", + "background": "var(--boxel-dove, #F8F7FA)", "foreground": "var(--boxel-slate, #272330)", "destructive": "var(--cardstack-red, #FF5050)", + "success": "var(--boxel-success, #00AC3D)", "sidebarRing": "var(--boxel-teal, #00FFBA)", "sidebarAccent": "var(--cardstack-lime, #C3FC33)", "sidebarBorder": "#E2E8F0", @@ -185,7 +184,7 @@ "darkModeVariables": { "card": "#1E1E1E", "ring": "var(--boxel-teal, #00FFBA)", - "input": "#27272A", + "input": "#52525B", "muted": "#27272A", "accent": "var(--cardstack-lime, #C3FC33)", "border": "#333333", @@ -208,14 +207,15 @@ "shadowXl": "0 20px 25px -5px rgb(0 0 0 / 0.5)", "shadowXs": "0 1px 2px 0 rgb(0 0 0 / 0.5)", "fontSerif": "'IBM Plex Serif', 'Georgia', Times, serif", - "secondary": "var(--boxel-light, #FFFFFF)", + "secondary": "var(--cardstack-purple, #6638FF)", "shadow2xl": "0 25px 50px -12px rgb(0 0 0 / 0.5)", "shadow2xs": "0 1px 2px 0 rgb(0 0 0 / 0.5)", - "background": "var(--brand-dark, #272330)", - "foreground": "var(--brand-light, #F7F8FA)", + "background": "#0F0F0F", + "foreground": "var(--brand-light, #F8F7FA)", "destructive": "var(--cardstack-red, #FF5050)", + "success": "var(--boxel-success, #00AC3D)", "sidebarRing": "var(--boxel-teal, #00FFBA)", - "sidebarAccent": "oklch(0.9338 0.1913 122.52)", + "sidebarAccent": "var(--cardstack-lime, #C3FC33)", "sidebarBorder": "#333333", "cardForeground": "var(--boxel-light, #FFFFFF)", "sidebarPrimary": "var(--boxel-teal, #00FFBA)", @@ -225,23 +225,57 @@ "popoverForeground": "var(--boxel-light, #FFFFFF)", "primaryForeground": "#0F172A", "sidebarForeground": "var(--boxel-light, #FFFFFF)", - "secondaryForeground": "var(--cardstack-purple, #6638FF)", + "secondaryForeground": "var(--boxel-light, #FFFFFF)", "destructiveForeground": "var(--boxel-light, #FFFFFF)", "sidebarAccentForeground": "#0F172A", "sidebarPrimaryForeground": "#0F172A" }, "functionalPalette": { "dark": "var(--boxel-slate, #272330)", - "light": "var(--boxel-dove, #F7F8FA)", + "light": "var(--boxel-dove, #F8F7FA)", "accent": "var(--cardstack-lime)", "primary": "var(--boxel-teal)", "secondary": "var(--cardstack-purple)" }, "geometricLanguage": "# Grid, Radius, and the 8px Law\n\n**Everything snaps. Nothing floats.**\n\n## The Quantum Grid\n\nBoxel's spatial logic operates in 8px increments (our base `--spacing: 0.25rem` \u00d7 4). This isn't aesthetic dogma\u2014it's **cognitive load reduction**. When every measurement is a multiple of 8, designers make decisions faster, developers write cleaner code, and the compiled interface has mathematical harmony that users *feel* but don't consciously notice.\n\n**Spacing Scale:** \n`0.25rem` (4px) \u00b7 `0.5rem` (8px) \u00b7 `1rem` (16px) \u00b7 `2rem` (32px) \u00b7 `4rem` (64px)\n\nNo `0.375rem`. No `1.3rem`. If it's not on the scale, it's not in the system.\n\n## The 0.625rem Corner Radius\n\nThis specific measurement\u2014**10px rounded corners**\u2014exists at the Goldilocks intersection of contradictory goals:\n\n- **Not too soft:** Maintains the Box Element's structural identity. These are containers, not pills.\n- **Not too hard:** Removes the hostile edge of pure 90\u00b0 angles. Software should feel built, not sharp.\n- **Touch-friendly:** Gives tap targets visual breathing room without sacrificing information density.\n\nIt's the difference between \"precision tool\" and \"kid's toy.\" We're building for adults who respect clean geometry.\n\n## Nested Hierarchy Through Borders\n\nWhile contemporary design often uses shadow and elevation to show depth, Box Elements rely on **border logic**. A Panel (with border) contains a Card (with border) contains a Badge (with border). Each level maintains its frame. The nesting is structural, not implied.\n\nThink of it like JSON: you can always trace the bracket pairs back to the root. That's how our boxes work too.", "historicalContext": null, - "materialVocabulary": "# Materiality Without Skeuomorphism\n\n**Digital materials that feel real\u2014not realistic.**\n\nBoxel's material language draws from high-end productivity tools: the textured matte of a Leica camera, the precision of a Muji notebook, the honest surfaces of a ThinkPad keyboard.\n\n## Light Mode: Precision Paper\n\nIn light mode, Box Elements exist on a subtle grey surface (`#F7F8FA`) that mimics premium bond paper under soft office lighting. Shadows are minimal\u2014just enough to separate the white box from the neutral canvas. We're not simulating physical paper; we're capturing the *feeling* of working with quality materials.\n\n**Shadow strategy:** `0 1px 2px 0 rgb(0 0 0 / 0.05)` \nBarely there. A whisper of separation.\n\n## Dark Mode: Matte Carbon\n\nIn dark mode, we embrace the flat dashboard aesthetic. No heavy shadows\u2014instead, we use **luminance contrast** to define layers. A `#1E1E1E` box on a `#0F0F0F` surface creates separation through brightness, not through simulated lighting.\n\nBorders become slightly *brighter* than their containers (`#333333` on `#1E1E1E`), creating a subtle glow effect that maintains the Box Element's structural legibility in low-light conditions.\n\n**The whimsy:** Dark mode isn't just inverted light mode. It's a different material state\u2014like switching from paper to carbon fiber. Same structural logic, different tactile presence.", - "componentVocabulary": "# Standard Box Element Patterns\n\n**Reusable primitives for interface composition.**\n\n## The Mini-Card\n\nA compact Box Element (typically 240\u00d7120px) that displays a single data entity: a file, a transaction, a user, a metric. Contains:\n\n- **Corner label** (Mono, uppercase): Entity type or ID\n- **Primary content** (Sans, medium): The key value or name\n- **Metadata strip** (Mono, muted): Timestamp, status, or secondary info\n\nUse case: Dashboard tiles, file browsers, transaction logs.\n\n## The Toolbar\n\nA horizontal strip of square interaction boxes (32\u00d732px minimum). Each button is its own Box Element with a 1px border. No background fill on default state\u2014fill with Teal on hover, Lime on active.\n\nButtons sit edge-to-edge with no gap, creating a continuous bar. Think: the ribbon interface from Office, but with personality.\n\n## The Data Pill\n\nA tiny rounded tag (height: 20px, padding: 4px 8px) using Mono font. Border radius matches the base `0.5rem` but at smaller scale looks more pill-like. Used for status indicators (`ACTIVE`, `PENDING`), categories, or filter chips.\n\nKey distinction: Pills are *inline* elements. They live within other boxes, not as standalone containers.\n\n## The Splitter\n\nA draggable 1px border between two Box Elements that lets users resize their workspace. On hover, expands to 3px and shifts to Teal. Cursor becomes `col-resize` or `row-resize`.\n\nThis component makes the Box Element's promise literal: users can reshape the boundaries of their interface.\n\n**Component truth:** Every UI element should be composable. If you can't nest it or arrange it in a grid, it's not a Box Element\u2014it's an exception. Minimize exceptions.", - "applicationScenarios": "# Context-Specific Box Element Usage\n\n**Same primitives, different densities.**\n\n## Complex Dashboards\n\n**Goal:** Display hundreds of data points without overwhelming cognition.\n\n**Strategy:** \n- Use Mini-Cards in masonry grids (irregular heights OK, but snap to 8px grid)\n- Mono font for all metadata\u2014creates scannable rhythm\n- Compact spacing (`0.5rem` gaps between boxes)\n- Corner labels for quick entity identification\n- Color only for status (Teal = selected, Lime = success, Red = error)\n\n**Result:** Information density that feels organized, not chaotic. Think Bloomberg Terminal meets Apple Notes.\n\n## Code/Logic Editors\n\n**Goal:** Make complex logic visually parseable.\n\n**Strategy:** \n- Dark mode default (reduces eye strain during long sessions)\n- Syntax highlighting using brand colors: Teal for functions, Lime for strings, Purple for keywords\n- Visible 1px borders between code blocks\n- Line numbers in Mono font along left gutter\n- Box Elements for each function/class definition\n\n**Result:** Code becomes modular and visual. New developers can understand structure at a glance.\n\n## Mobile Interfaces\n\n**Goal:** Maintain Box Element logic on small screens.\n\n**Strategy:** \n- Collapse multi-column grids to single column\n- Maintain 1px borders and `0.625rem` radius (looks great even at phone scale)\n- Full-width Box Elements (edge-to-edge within safe area)\n- Increase tap target size to 44px minimum while keeping visual element compact inside\n- Stackable panels with Splitters for user-controlled density\n\n**Result:** Mobile doesn't feel like a compromised desktop. It feels like a *touch-optimized Box Element system*.\n\n**Scenario truth:** If your design system breaks when you change screen size or use case, it's not a system\u2014it's a collection of one-off solutions. Box Elements scale because their rules scale." + "materialVocabulary": "# Materiality Without Skeuomorphism\n\n**Digital materials that feel real\u2014not realistic.**\n\nBoxel's material language draws from high-end productivity tools: the textured matte of a Leica camera, the precision of a Muji notebook, the honest surfaces of a ThinkPad keyboard.\n\n## Light Mode: Precision Paper\n\nIn light mode, Box Elements exist on a subtle grey surface (`#F8F7FA`) that mimics premium bond paper under soft office lighting. Shadows are minimal\u2014just enough to separate the white box from the neutral canvas. We're not simulating physical paper; we're capturing the *feeling* of working with quality materials.\n\n**Shadow strategy:** `0 1px 2px 0 rgb(0 0 0 / 0.05)` \nBarely there. A whisper of separation.\n\n## Dark Mode: Matte Carbon\n\nIn dark mode, we embrace the flat dashboard aesthetic. No heavy shadows\u2014instead, we use **luminance contrast** to define layers. A `#1E1E1E` box on a `#0F0F0F` surface creates separation through brightness, not through simulated lighting.\n\nBorders become slightly *brighter* than their containers (`#333333` on `#1E1E1E`), creating a subtle glow effect that maintains the Box Element's structural legibility in low-light conditions.\n\n**The whimsy:** Dark mode isn't just inverted light mode. It's a different material state\u2014like switching from paper to carbon fiber. Same structural logic, different tactile presence.", + "componentVocabulary": "# Standard Box Element Patterns\n\n**Reusable primitives for interface composition.**\n\n## The Mini-Card\n\nA compact Box Element (typically 240\u00d7120px) that displays a single data entity: a file, a transaction, a user, a metric. Contains:\n\n- **Corner label** (Mono, uppercase): Entity type or ID\n- **Primary content** (Sans, medium): The key value or name\n- **Metadata strip** (Mono, muted): Timestamp, status, or secondary info\n\nUse case: Dashboard tiles, file browsers, transaction logs.\n\n## The Toolbar\n\nA horizontal strip of square interaction boxes (32\u00d732px minimum). Each button is its own Box Element with a 1px border. No background fill on default state\u2014fill with Teal on hover, Lime on active.\n\nButtons sit edge-to-edge with no gap, creating a continuous bar. Think: the ribbon interface from Office, but with personality.\n\n## The Data Pill\n\nA tiny rounded tag (height: 20px, padding: 4px 8px) using Mono font. Border radius matches the base `0.625rem` but at smaller scale looks more pill-like. Used for status indicators (`ACTIVE`, `PENDING`), categories, or filter chips.\n\nKey distinction: Pills are *inline* elements. They live within other boxes, not as standalone containers.\n\n## The Splitter\n\nA draggable 1px border between two Box Elements that lets users resize their workspace. On hover, expands to 3px and shifts to Teal. Cursor becomes `col-resize` or `row-resize`.\n\nThis component makes the Box Element's promise literal: users can reshape the boundaries of their interface.\n\n**Component truth:** Every UI element should be composable. If you can't nest it or arrange it in a grid, it's not a Box Element\u2014it's an exception. Minimize exceptions.", + "applicationScenarios": "# Context-Specific Box Element Usage\n\n**Same primitives, different densities.**\n\n## Complex Dashboards\n\n**Goal:** Display hundreds of data points without overwhelming cognition.\n\n**Strategy:** \n- Use Mini-Cards in masonry grids (irregular heights OK, but snap to the 4px grid)\n- Mono font for all metadata\u2014creates scannable rhythm\n- Compact spacing (`0.5rem` gaps between boxes)\n- Corner labels for quick entity identification\n- Color only for status (Teal = selected, Lime = accent/highlight, Red = error)\n\n**Result:** Information density that feels organized, not chaotic. Think Bloomberg Terminal meets Apple Notes.\n\n## Code/Logic Editors\n\n**Goal:** Make complex logic visually parseable.\n\n**Strategy:** \n- Dark mode default (reduces eye strain during long sessions)\n- Syntax highlighting using brand colors: Teal for functions, Lime for strings, Purple for keywords\n- Visible 1px borders between code blocks\n- Line numbers in Mono font along left gutter\n- Box Elements for each function/class definition\n\n**Result:** Code becomes modular and visual. New developers can understand structure at a glance.\n\n## Mobile Interfaces\n\n**Goal:** Maintain Box Element logic on small screens.\n\n**Strategy:** \n- Collapse multi-column grids to single column\n- Maintain 1px borders and `0.625rem` radius (looks great even at phone scale)\n- Full-width Box Elements (edge-to-edge within safe area)\n- Increase tap target size to 44px minimum while keeping visual element compact inside\n- Stackable panels with Splitters for user-controlled density\n\n**Result:** Mobile doesn't feel like a compromised desktop. It feels like a *touch-optimized Box Element system*.\n\n**Scenario truth:** If your design system breaks when you change screen size or use case, it's not a system\u2014it's a collection of one-off solutions. Box Elements scale because their rules scale.", + "customCssVariables": [ + { + "name": "sp-1", + "value": "var(--spacing)" + }, + { + "name": "sp-2", + "value": "calc(var(--spacing) * 2)" + }, + { + "name": "sp-3", + "value": "calc(var(--spacing) * 3)" + }, + { + "name": "sp-4", + "value": "calc(var(--spacing) * 4)" + }, + { + "name": "sp-6", + "value": "calc(var(--spacing) * 6)" + }, + { + "name": "sp-8", + "value": "calc(var(--spacing) * 8)" + }, + { + "name": "sp-12", + "value": "calc(var(--spacing) * 12)" + }, + { + "name": "sp-16", + "value": "calc(var(--spacing) * 16)" + } + ] } } } diff --git a/Theme/cardstack-brand-guide.json b/Theme/cardstack-brand-guide.json index 6ea77d54..ddb4b4c9 100644 --- a/Theme/cardstack-brand-guide.json +++ b/Theme/cardstack-brand-guide.json @@ -8,35 +8,34 @@ }, "type": "card", "attributes": { - "spacing": "0.25rem", "cardInfo": { "notes": null, "name": "Cardstack", "summary": "Guide to brand elements and visual style", - "cardThumbnailURL": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-icon.svg" + "cardThumbnailURL": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-profile-icon.png" }, "markUsage": { - "primaryMark1": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-primary-mark-1.svg", - "primaryMark2": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-primary-mark-2.svg", - "secondaryMark1": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-secondary-mark-1.svg", - "secondaryMark2": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-secondary-mark-2.svg", + "primaryMark1": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-primary-mark-1.svg", + "primaryMark2": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-primary-mark-2.svg", + "secondaryMark1": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-secondary-mark-1.svg", + "secondaryMark2": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-secondary-mark-2.svg", "primaryMarkMinHeight": "1.25rem", - "primaryMarkGreyscale1": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-primary-black.svg", - "primaryMarkGreyscale2": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-primary-white.svg", + "primaryMarkGreyscale1": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-primary-black.svg", + "primaryMarkGreyscale2": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-primary-white.svg", "secondaryMarkMinHeight": "2.5rem", - "socialMediaProfileIcon": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-icon.svg", - "secondaryMarkGreyscale1": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-secondary-black.svg", - "secondaryMarkGreyscale2": "https://app-assets-cardstack.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-secondary-white.svg", + "socialMediaProfileIcon": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-profile-icon.png", + "secondaryMarkGreyscale1": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-secondary-black.svg", + "secondaryMarkGreyscale2": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-logo-greyscale-secondary-white.svg", "primaryMarkClearanceRatio": "1", "secondaryMarkClearanceRatio": "0.5" }, "styleName": null, "visualDNA": null, - "cssImports": [], + "customCssImports": [], "typography": { "body": { "fontSize": null, - "fontFamily": "IBM Plex sans", + "fontFamily": "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", "fontWeight": null, "lineHeight": null, "sampleText": null @@ -49,14 +48,14 @@ "sampleText": null }, "heading": { - "fontSize": "22px", - "fontFamily": "IBM Plex sans", + "fontSize": "1.375rem", + "fontFamily": "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", "fontWeight": "700", "lineHeight": null, "sampleText": null }, "subheading": { - "fontSize": "", + "fontSize": null, "fontFamily": null, "fontWeight": null, "lineHeight": null, @@ -70,26 +69,27 @@ "sampleText": null } }, - "cornerRadius": "0.625rem", "inspirations": [], "rootVariables": { - "card": "oklch(1 0 0)", - "ring": "oklch(0.8859 0.1865 164.8865)", - "input": "oklch(1 0 0)", - "muted": "oklch(0.9777 0.0041 301.4256)", - "accent": "oklch(0.931 0 0)", - "border": "oklch(0.8669 0 0)", - "chart1": "oklch(0.5838 0.299 307.6101)", - "chart2": "oklch(0.5354 0.2684 283.1486)", - "chart3": "oklch(0.9194 0.2182 125.1586)", - "chart4": "oklch(0.5641 0.2301 259.998)", - "chart5": "oklch(0.8277 0.2119 149.9571)", + "card": "var(--boxel-light, #FFFFFF)", + "ring": "var(--boxel-highlight, #00FFBA)", + "input": "var(--boxel-light, #FFFFFF)", + "muted": "var(--boxel-100, #F8F7FA)", + "accent": "var(--boxel-200, #E8E8E8)", + "border": "var(--boxel-border-color, #D3D3D3)", + "chart1": "var(--boxel-fuschia, #AC00FF)", + "chart2": "var(--boxel-purple, #6638FF)", + "chart3": "var(--boxel-lime, #C3FC33)", + "chart4": "var(--boxel-blue, #0069F9)", + "chart5": "var(--boxel-green, #37EB77)", "radius": "0.625rem", "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1)", - "popover": "oklch(1 0 0)", - "primary": "oklch(0.833 0.174691 165.1921)", - "sidebar": "oklch(1 0 0)", + "popover": "var(--boxel-light, #FFFFFF)", + "primary": "var(--boxel-highlight, #00FFBA)", + "sidebar": "var(--boxel-light, #FFFFFF)", "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, "fontMono": "'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace", "fontSans": "'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui", "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 4px 6px -1px hsl(0 0% 0% / 0.1)", @@ -98,33 +98,34 @@ "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 8px 10px -1px hsl(0 0% 0% / 0.1)", "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", "fontSerif": "'IBM Plex Serif', 'Georgia', Times, serif", - "secondary": "oklch(1 0 0)", + "secondary": "var(--boxel-cyan, #00EBE5)", "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)", "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", - "background": "oklch(1 0 0)", - "foreground": "oklch(0 0 0)", - "destructive": "oklch(0.6763 0.2115 24.8106)", - "sidebarRing": "oklch(0.8859 0.1865 164.8865)", - "sidebarAccent": "oklch(0.931 0 0)", - "sidebarBorder": "oklch(0.8669 0 0)", - "cardForeground": "oklch(0 0 0)", - "sidebarPrimary": "oklch(0 0 0)", + "background": "var(--boxel-light, #FFFFFF)", + "foreground": "var(--boxel-dark, #000000)", + "destructive": "var(--boxel-destructive, #FF5050)", + "sidebarRing": "var(--boxel-highlight, #00FFBA)", + "sidebarAccent": "var(--boxel-200, #E8E8E8)", + "sidebarBorder": "var(--boxel-border-color, #D3D3D3)", + "cardForeground": "var(--boxel-dark, #000000)", + "sidebarPrimary": "var(--boxel-dark, #000000)", "trackingNormal": "0.01em", - "mutedForeground": "oklch(0.4495 0 0)", - "accentForeground": "oklch(0 0 0)", - "popoverForeground": "oklch(0 0 0)", - "primaryForeground": "oklch(0 0 0)", - "sidebarForeground": "oklch(0 0 0)", - "secondaryForeground": "oklch(0 0 0)", - "destructiveForeground": "oklch(0.9672 0 0)", - "sidebarAccentForeground": "oklch(0 0 0)", - "sidebarPrimaryForeground": "oklch(1 0 0)" + "mutedForeground": "var(--boxel-550, #525252)", + "accentForeground": "var(--boxel-dark, #000000)", + "popoverForeground": "var(--boxel-dark, #000000)", + "primaryForeground": "var(--boxel-dark, #000000)", + "sidebarForeground": "var(--boxel-dark, #000000)", + "secondaryForeground": "var(--boxel-dark, #000000)", + "destructiveForeground": "var(--boxel-light, #FFFFFF)", + "success": "var(--boxel-success, #00AC3D)", + "sidebarAccentForeground": "var(--boxel-dark, #000000)", + "sidebarPrimaryForeground": "var(--boxel-light, #FFFFFF)" }, "wallpaperImages": [], "brandColorPalette": [ { "name": null, - "value": "#37EB77" + "value": "#00FFBA" }, { "name": null, @@ -142,6 +143,14 @@ "name": null, "value": "#F8F7FA" }, + { + "name": null, + "value": "#000000" + }, + { + "name": null, + "value": "#37EB77" + }, { "name": null, "value": "#FF5050" @@ -152,7 +161,7 @@ }, { "name": null, - "value": "#ac00ff" + "value": "#AC00FF" }, { "name": null, @@ -164,23 +173,25 @@ } ], "darkModeVariables": { - "card": "oklch(0.3541 0.031 289.8048)", - "ring": "oklch(0.8859 0.1865 164.8865)", - "input": "oklch(0 0 0)", - "muted": "oklch(0.4211 0.0203 300.7169)", - "accent": "oklch(0.5769 0.0259 290.9642)", - "border": "oklch(0.4386 0 0)", - "chart1": "oklch(0.5838 0.299 307.6101)", - "chart2": "oklch(0.5354 0.2684 283.1486)", - "chart3": "oklch(0.9194 0.2182 125.1586)", - "chart4": "oklch(0.5641 0.2301 259.998)", - "chart5": "oklch(0.8277 0.2119 149.9571)", + "card": "var(--boxel-650, #3B394B)", + "ring": "var(--boxel-highlight, #00FFBA)", + "input": "var(--boxel-dark, #000000)", + "muted": "var(--boxel-575, #4F4B57)", + "accent": "var(--boxel-450, #919191)", + "border": "var(--boxel-550, #525252)", + "chart1": "var(--boxel-fuschia, #AC00FF)", + "chart2": "var(--boxel-purple, #6638FF)", + "chart3": "var(--boxel-lime, #C3FC33)", + "chart4": "var(--boxel-blue, #0069F9)", + "chart5": "var(--boxel-green, #37EB77)", "radius": "0.625rem", "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1)", - "popover": "oklch(0.4211 0.0203 300.7169)", - "primary": "oklch(0.8859 0.1865 164.8865)", - "sidebar": "oklch(0.3541 0.031 289.8048)", + "popover": "var(--boxel-575, #4F4B57)", + "primary": "var(--boxel-highlight, #00FFBA)", + "sidebar": "var(--boxel-650, #3B394B)", "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, "fontMono": "'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace", "fontSans": "'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui", "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 4px 6px -1px hsl(0 0% 0% / 0.1)", @@ -189,34 +200,33 @@ "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 8px 10px -1px hsl(0 0% 0% / 0.1)", "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", "fontSerif": "'IBM Plex Serif', 'Georgia', Times, serif", - "secondary": "oklch(0 0 0)", + "secondary": "var(--boxel-cyan, #00EBE5)", "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)", "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", - "background": "oklch(0.2663 0.0245 298.8206)", - "foreground": "oklch(1 0 0)", - "destructive": "oklch(0.6763 0.2115 24.8106)", - "sidebarRing": "oklch(0.8859 0.1865 164.8865)", - "sidebarAccent": "oklch(0.5769 0.0259 290.9642)", - "sidebarBorder": "oklch(0.4386 0 0)", - "cardForeground": "oklch(1 0 0)", - "sidebarPrimary": "oklch(0.8859 0.1865 164.8865)", + "background": "var(--boxel-700, #272330)", + "foreground": "var(--boxel-light, #FFFFFF)", + "destructive": "var(--boxel-destructive, #FF5050)", + "sidebarRing": "var(--boxel-highlight, #00FFBA)", + "sidebarAccent": "var(--boxel-450, #919191)", + "sidebarBorder": "var(--boxel-550, #525252)", + "cardForeground": "var(--boxel-light, #FFFFFF)", + "sidebarPrimary": "var(--boxel-highlight, #00FFBA)", "trackingNormal": "0.01em", - "mutedForeground": "oklch(0.7565 0.0113 286.1261)", - "accentForeground": "oklch(1 0 0)", - "popoverForeground": "oklch(1 0 0)", - "primaryForeground": "oklch(0 0 0)", - "sidebarForeground": "oklch(1 0 0)", - "secondaryForeground": "oklch(1 0 0)", - "destructiveForeground": "oklch(0.9672 0 0)", - "sidebarAccentForeground": "oklch(1 0 0)", - "sidebarPrimaryForeground": "oklch(0 0 0)" + "mutedForeground": "var(--boxel-400, #AFAFB7)", + "accentForeground": "var(--boxel-dark, #000000)", + "popoverForeground": "var(--boxel-light, #FFFFFF)", + "primaryForeground": "var(--boxel-dark, #000000)", + "sidebarForeground": "var(--boxel-light, #FFFFFF)", + "secondaryForeground": "var(--boxel-dark, #000000)", + "destructiveForeground": "var(--boxel-light, #FFFFFF)", + "success": "var(--boxel-success, #00AC3D)", + "sidebarAccentForeground": "var(--boxel-dark, #000000)", + "sidebarPrimaryForeground": "var(--boxel-dark, #000000)" }, "functionalPalette": { "dark": "#000000", "light": "#ffffff", "accent": "#e8e8e8", - "border": "#d3d3d3", - "neutral": "#f8f7fa", "primary": "#00ffba", "secondary": "#00EBE5" } diff --git a/Theme/cardstack.json b/Theme/cardstack.json deleted file mode 100644 index 4999c82c..00000000 --- a/Theme/cardstack.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "data": { - "meta": { - "adoptsFrom": { - "name": "Theme", - "module": "https://cardstack.com/base/card-api" - } - }, - "type": "card", - "attributes": { - "cardInfo": { - "notes": null, - "name": "Cardstack", - "summary": null, - "cardThumbnailURL": null - }, - "cssImports": [], - "cssVariables": ":root {\n --background: oklch(1 0 0);\n --foreground: oklch(0 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0 0 0);\n --primary: oklch(0.833 0.174691 165.1921);\n --primary-foreground: oklch(0 0 0);\n --secondary: oklch(1 0 0);\n --secondary-foreground: oklch(0 0 0);\n --muted: oklch(0.9777 0.0041 301.4256);\n --muted-foreground: oklch(0.4495 0 0);\n --accent: oklch(0.931 0 0);\n --accent-foreground: oklch(0 0 0);\n --destructive: oklch(0.6763 0.2115 24.8106);\n --destructive-foreground: oklch(0.9672 0 0);\n --border: oklch(0.8669 0 0);\n --input: oklch(1 0 0);\n --ring: oklch(0.8859 0.1865 164.8865);\n --chart-1: oklch(0.5838 0.299 307.6101);\n --chart-2: oklch(0.5354 0.2684 283.1486);\n --chart-3: oklch(0.9194 0.2182 125.1586);\n --chart-4: oklch(0.5641 0.2301 259.998);\n --chart-5: oklch(0.8277 0.2119 149.9571);\n --sidebar: oklch(1 0 0);\n --sidebar-foreground: oklch(0 0 0);\n --sidebar-primary: oklch(0 0 0);\n --sidebar-primary-foreground: oklch(1 0 0);\n --sidebar-accent: oklch(0.931 0 0);\n --sidebar-accent-foreground: oklch(0 0 0);\n --sidebar-border: oklch(0.8669 0 0);\n --sidebar-ring: oklch(0.8859 0.1865 164.8865);\n --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui;\n --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;\n --font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace;\n --radius: 0.625rem;\n --shadow-x: 0;\n --shadow-y: 1px;\n --shadow-blur: 3px;\n --shadow-spread: 0px;\n --shadow-opacity: 0.1;\n --shadow-color: oklch(0 0 0);\n --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 2px 4px -1px hsl(0 0% 0% / 0.1);\n --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 4px 6px -1px hsl(0 0% 0% / 0.1);\n --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 8px 10px -1px hsl(0 0% 0% / 0.1);\n --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);\n --tracking-normal: 0.01em;\n --spacing: 0.25rem;\n}\n\n.dark {\n --background: oklch(0.2663 0.0245 298.8206);\n --foreground: oklch(1 0 0);\n --card: oklch(0.3541 0.031 289.8048);\n --card-foreground: oklch(1 0 0);\n --popover: oklch(0.4211 0.0203 300.7169);\n --popover-foreground: oklch(1 0 0);\n --primary: oklch(0.8859 0.1865 164.8865);\n --primary-foreground: oklch(0 0 0);\n --secondary: oklch(0 0 0);\n --secondary-foreground: oklch(1 0 0);\n --muted: oklch(0.4211 0.0203 300.7169);\n --muted-foreground: oklch(0.7565 0.0113 286.1261);\n --accent: oklch(0.5769 0.0259 290.9642);\n --accent-foreground: oklch(1 0 0);\n --destructive: oklch(0.6763 0.2115 24.8106);\n --destructive-foreground: oklch(0.9672 0 0);\n --border: oklch(0.4386 0 0);\n --input: oklch(0 0 0);\n --ring: oklch(0.8859 0.1865 164.8865);\n --chart-1: oklch(0.5838 0.299 307.6101);\n --chart-2: oklch(0.5354 0.2684 283.1486);\n --chart-3: oklch(0.9194 0.2182 125.1586);\n --chart-4: oklch(0.5641 0.2301 259.998);\n --chart-5: oklch(0.8277 0.2119 149.9571);\n --sidebar: oklch(0.3541 0.031 289.8048);\n --sidebar-foreground: oklch(1 0 0);\n --sidebar-primary: oklch(0.8859 0.1865 164.8865);\n --sidebar-primary-foreground: oklch(0 0 0);\n --sidebar-accent: oklch(0.5769 0.0259 290.9642);\n --sidebar-accent-foreground: oklch(1 0 0);\n --sidebar-border: oklch(0.4386 0 0);\n --sidebar-ring: oklch(0.8859 0.1865 164.8865);\n --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui;\n --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;\n --font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace;\n --radius: 0.625rem;\n --shadow-x: 0;\n --shadow-y: 1px;\n --shadow-blur: 3px;\n --shadow-spread: 0px;\n --shadow-opacity: 0.1;\n --shadow-color: oklch(0 0 0);\n --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 2px 4px -1px hsl(0 0% 0% / 0.1);\n --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 4px 6px -1px hsl(0 0% 0% / 0.1);\n --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),\n 0 8px 10px -1px hsl(0 0% 0% / 0.1);\n --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);\n}" - } - } -} diff --git a/Theme/catalog-storefront.json b/Theme/catalog-storefront.json index 02d8261d..7741af66 100644 --- a/Theme/catalog-storefront.json +++ b/Theme/catalog-storefront.json @@ -1,23 +1,177 @@ { "data": { - "meta": { - "adoptsFrom": { - "name": "Theme", - "module": "https://cardstack.com/base/card-api" - } - }, "type": "card", "attributes": { + "historicalContext": "An in-house identity for the Boxel Catalog storefront, drawing on the warm-paper look of print catalogs and the IBM Plex family's technical heritage rather than any single design movement.", + "colorPalette": "Warm paper ground `#ece9e1` with near-black ink `#16161c` and white cards floating above it. A vivid signal green leads: `#00ffba` primary with deep-green text `#04231a`, stepping down to `#16e098` for accents and rings. Coral red `#ff5f57` marks destructive actions. Charts run a candy spread — pink, blue, violet, lime, orange — against the muted paper neutrals.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "The IBM Plex superfamily throughout: Plex Sans for UI and product copy, Plex Serif for editorial passages, Plex Mono for code and specs — one voice across all three, with a slight `0.01em` tracking for airiness.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Catalog Storefront", + "inspirations": ["Print catalog paper stock", "IBM Plex type system", "Modern storefront and marketplace UIs"], + "visualDNA": "Warm paper ground, crisp white cards, one signal-green accent doing all the pointing. Generous 1rem rounding, hairline paper-edge shadows with deep soft drops — tactile, calm, and confident in light mode only.", + "wallpaperImages": [], + "rootVariables": { + "background": "#ece9e1", + "foreground": "#16161c", + "card": "#ffffff", + "cardForeground": "#16161c", + "popover": "#ffffff", + "popoverForeground": "#16161c", + "primary": "#00ffba", + "primaryForeground": "#04231a", + "secondary": "#f1eee6", + "secondaryForeground": "#16161c", + "muted": "#f0ede4", + "mutedForeground": "#8a8578", + "accent": "#16e098", + "accentForeground": "#04231a", + "destructive": "#bf4741", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#ddd8cb", + "input": "#ffffff", + "ring": "#16e098", + "chart1": "#ff5b9c", + "chart2": "#2bb3ff", + "chart3": "#7b5bff", + "chart4": "#c2e23f", + "chart5": "#ff9d3d", + "sidebar": "#f0ede4", + "sidebarForeground": "#16161c", + "sidebarPrimary": "#11cf8a", + "sidebarPrimaryForeground": "#04231a", + "sidebarAccent": "#16e098", + "sidebarAccentForeground": "#04231a", + "sidebarBorder": "#ddd8cb", + "sidebarRing": "#16e098", + "fontSans": "'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui", + "fontSerif": "'IBM Plex Serif', 'Georgia', Times, serif", + "fontMono": "'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace", + "radius": "1rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0.01em", + "shadow2xs": "0 1px 0 #e4e0d4", + "shadowXs": "0 1px 0 #e4e0d4", + "shadowSm": "0 1px 0 #e4e0d4, 0 14px 30px -22px rgba(0, 0, 0, 0.4)", + "shadow": "0 1px 0 #e4e0d4, 0 14px 30px -22px rgba(0, 0, 0, 0.4)", + "shadowMd": "0 1px 0 #e4e0d4, 0 18px 40px -26px rgba(0, 0, 0, 0.4)", + "shadowLg": "0 1px 0 #e4e0d4, 0 26px 44px -22px rgba(0, 0, 0, 0.45)", + "shadowXl": "0 1px 0 #e4e0d4, 0 30px 70px -24px rgba(0, 0, 0, 0.4)", + "shadow2xl": "0 1px 0 #e4e0d4, 0 40px 80px -28px rgba(0, 0, 0, 0.46)" + }, + "darkModeVariables": { + "background": null, + "foreground": null, + "card": null, + "cardForeground": null, + "popover": null, + "popoverForeground": null, + "primary": null, + "primaryForeground": null, + "secondary": null, + "secondaryForeground": null, + "muted": null, + "mutedForeground": null, + "accent": null, + "accentForeground": null, + "destructive": null, + "destructiveForeground": null, + "success": null, + "border": null, + "input": null, + "ring": null, + "chart1": null, + "chart2": null, + "chart3": null, + "chart4": null, + "chart5": null, + "sidebar": null, + "sidebarForeground": null, + "sidebarPrimary": null, + "sidebarPrimaryForeground": null, + "sidebarAccent": null, + "sidebarAccentForeground": null, + "sidebarBorder": null, + "sidebarRing": null, + "fontSans": null, + "fontSerif": null, + "fontMono": null, + "radius": null, + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": null, + "shadowXs": null, + "shadowSm": null, + "shadow": null, + "shadowMd": null, + "shadowLg": null, + "shadowXl": null, + "shadow2xl": null + }, + "version": "1.0", + "customCssImports": [], "cardInfo": { - "notes": null, "name": "Catalog Storefront", "summary": "Warm-paper storefront identity for the Boxel Catalog — IBM Plex type, paper ground, signal-green accent.", - "cardThumbnailURL": null - }, - "cssImports": [ - "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600;700&display=swap" - ], - "cssVariables": ":root {\n --background: #ece9e1;\n --foreground: #16161c;\n --card: #ffffff;\n --card-foreground: #16161c;\n --popover: #ffffff;\n --popover-foreground: #16161c;\n --primary: #00ffba;\n --primary-foreground: #04231a;\n --secondary: #f1eee6;\n --secondary-foreground: #16161c;\n --muted: #f0ede4;\n --muted-foreground: #8a8578;\n --accent: #16e098;\n --accent-foreground: #04231a;\n --destructive: #ff5f57;\n --destructive-foreground: #ffffff;\n --border: #ddd8cb;\n --input: #ffffff;\n --ring: #16e098;\n --chart-1: #ff5b9c;\n --chart-2: #2bb3ff;\n --chart-3: #7b5bff;\n --chart-4: #c2e23f;\n --chart-5: #ff9d3d;\n --sidebar: #f0ede4;\n --sidebar-foreground: #16161c;\n --sidebar-primary: #11cf8a;\n --sidebar-primary-foreground: #04231a;\n --sidebar-accent: #16e098;\n --sidebar-accent-foreground: #04231a;\n --sidebar-border: #ddd8cb;\n --sidebar-ring: #16e098;\n --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif, system-ui;\n --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;\n --font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', Courier, ui-monospace, monospace;\n --radius: 1rem;\n --shadow-color: #000000;\n --shadow-2xs: 0 1px 0 #e4e0d4;\n --shadow-xs: 0 1px 0 #e4e0d4;\n --shadow-sm: 0 1px 0 #e4e0d4, 0 14px 30px -22px rgba(0, 0, 0, 0.4);\n --shadow: 0 1px 0 #e4e0d4, 0 14px 30px -22px rgba(0, 0, 0, 0.4);\n --shadow-md: 0 1px 0 #e4e0d4, 0 18px 40px -26px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 1px 0 #e4e0d4, 0 26px 44px -22px rgba(0, 0, 0, 0.45);\n --shadow-xl: 0 1px 0 #e4e0d4, 0 30px 70px -24px rgba(0, 0, 0, 0.4);\n --shadow-2xl: 0 1px 0 #e4e0d4, 0 40px 80px -28px rgba(0, 0, 0, 0.46);\n --tracking-normal: 0.01em;\n --spacing: 0.25rem;\n}\n" + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } } } -} +} \ No newline at end of file diff --git a/Theme/catppuccin.json b/Theme/catppuccin.json new file mode 100644 index 00000000..2a6933bc --- /dev/null +++ b/Theme/catppuccin.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "Catppuccin began in 2021 as a community-driven pastel theme for code editors and terminals, and has since grown into one of the most widely ported color schemes in open source. This adaptation pairs the Latte flavor for light mode with Mocha for dark mode, as packaged by tweakcn.", + "colorPalette": "Soothing pastels on soft neutral grounds. Light mode (Latte): warm off-white base `#eff1f5` with muted ink text `#4c4f69`; dark mode (Mocha): deep indigo base `#181825` with lavender-tinted text `#cdd6f4`. Mauve (`#8839ef` / `#cba6f7`) leads as primary, Sky (`#04a5e5` / `#89dceb`) accents, Red (`#d20f39` / `#f38ba8`) signals destructive actions. Charts draw from the wider flavor palette: mauve, sky, green, peach, rosewater.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Montserrat carries all UI text, its geometric roundness matching the palette's softness. Fira Code handles code and tabular content with programming ligatures; Georgia serves as the serif fallback for long-form passages.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Catppuccin", + "inspirations": [ + "Catppuccin Latte & Mocha flavors", + "tweakcn theme registry", + "Pastel terminal and editor color schemes" + ], + "visualDNA": "Soothing pastel accents on calm neutral grounds — mauve-led, low-glare, gently rounded (0.35rem radius), with soft indigo-tinted shadows. Cozy in dark mode, creamy in light.", + "wallpaperImages": [], + "rootVariables": { + "background": "#eff1f5", + "foreground": "#4c4f69", + "card": "#ffffff", + "cardForeground": "#4c4f69", + "popover": "#ccd0da", + "popoverForeground": "#4c4f69", + "primary": "#8839ef", + "primaryForeground": "#ffffff", + "secondary": "#ccd0da", + "secondaryForeground": "#4c4f69", + "muted": "#dce0e8", + "mutedForeground": "#6c6f85", + "accent": "#037cac", + "accentForeground": "#ffffff", + "destructive": "#d20f39", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#bcc0cc", + "input": "#ccd0da", + "ring": "#8839ef", + "chart1": "#8839ef", + "chart2": "#04a5e5", + "chart3": "#40a02b", + "chart4": "#fe640b", + "chart5": "#dc8a78", + "sidebar": "#e6e9ef", + "sidebarForeground": "#4c4f69", + "sidebarPrimary": "#8839ef", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#037cac", + "sidebarAccentForeground": "#ffffff", + "sidebarBorder": "#bcc0cc", + "sidebarRing": "#8839ef", + "fontSans": "Montserrat, sans-serif", + "fontSerif": "Georgia, serif", + "fontMono": "Fira Code, monospace", + "radius": "0.35rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)", + "shadowXs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)", + "shadowSm": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)", + "shadow": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)", + "shadowMd": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12)", + "shadowLg": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12)", + "shadowXl": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12)", + "shadow2xl": "0px 4px 6px 0px hsl(240 30% 25% / 0.30)" + }, + "darkModeVariables": { + "background": "#181825", + "foreground": "#cdd6f4", + "card": "#1e1e2e", + "cardForeground": "#cdd6f4", + "popover": "#45475a", + "popoverForeground": "#cdd6f4", + "primary": "#cba6f7", + "primaryForeground": "#1e1e2e", + "secondary": "#585b70", + "secondaryForeground": "#cdd6f4", + "muted": "#292c3c", + "mutedForeground": "#a6adc8", + "accent": "#89dceb", + "accentForeground": "#1e1e2e", + "destructive": "#f38ba8", + "destructiveForeground": "#1e1e2e", + "success": null, + "border": "#313244", + "input": "#313244", + "ring": "#cba6f7", + "chart1": "#cba6f7", + "chart2": "#89dceb", + "chart3": "#a6e3a1", + "chart4": "#fab387", + "chart5": "#f5e0dc", + "sidebar": "#11111b", + "sidebarForeground": "#cdd6f4", + "sidebarPrimary": "#cba6f7", + "sidebarPrimaryForeground": "#1e1e2e", + "sidebarAccent": "#89dceb", + "sidebarAccentForeground": "#1e1e2e", + "sidebarBorder": "#45475a", + "sidebarRing": "#cba6f7", + "fontSans": "Montserrat, sans-serif", + "fontSerif": "Georgia, serif", + "fontMono": "Fira Code, monospace", + "radius": "0.35rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)", + "shadowXs": "0px 4px 6px 0px hsl(240 30% 25% / 0.06)", + "shadowSm": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)", + "shadow": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12)", + "shadowMd": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12)", + "shadowLg": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12)", + "shadowXl": "0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12)", + "shadow2xl": "0px 4px 6px 0px hsl(240 30% 25% / 0.30)" + }, + "version": "1.0", + "customCssImports": [], + "cardInfo": { + "name": "Catppuccin", + "summary": "Soothing pastel theme from tweakcn — Catppuccin Latte for light mode, Mocha for dark, with Montserrat and Fira Code type.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/claymorphism.json b/Theme/claymorphism.json new file mode 100644 index 00000000..640e23d5 --- /dev/null +++ b/Theme/claymorphism.json @@ -0,0 +1,177 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "Claymorphism emerged around 2021–2022 as a friendlier successor to neumorphism: instead of surfaces extruded from the background, elements read as soft 3D clay shapes with big rounded corners and layered inner-and-drop shadows. This is tweakcn's take on the trend.", + "colorPalette": "Clay neutrals with an indigo lead. Light mode sits stone-gray `#e7e5e4` under warm off-white cards `#f5f5f4` with slate ink `#1e293b`; dark mode swaps to warm browns (`#1e1b18` ground, `#2c2825` cards). Indigo `#6366f1` / `#818cf8` drives primary and rings, a pale lilac `#f3e5f5` accents in light mode, red `#ef4444` marks destructive. Charts run a monochrome indigo ramp from `#6366f1` down to `#312e81`.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Plus Jakarta Sans carries the UI — a rounded geometric sans that matches the clay softness. Lora provides a warm serif for editorial text, and Roboto Mono handles code and figures.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Claymorphism", + "inspirations": ["Claymorphism UI trend", "Neumorphism's soft-surface language", "tweakcn theme registry", "3D clay illustration"], + "visualDNA": "Soft clay surfaces: generous 1.25rem rounding, plush offset double shadows that lift every element like molded putty, stone-and-brown neutrals, and one indigo accent. Playful and tactile without losing legibility.", + "wallpaperImages": [], + "rootVariables": { + "background": "#e7e5e4", + "foreground": "#1e293b", + "card": "#f5f5f4", + "cardForeground": "#1e293b", + "popover": "#f5f5f4", + "popoverForeground": "#1e293b", + "primary": "#6366f1", + "primaryForeground": "#ffffff", + "secondary": "#d6d3d1", + "secondaryForeground": "#4b5563", + "muted": "#e7e5e4", + "mutedForeground": "#6b7280", + "accent": "#f3e5f5", + "accentForeground": "#374151", + "destructive": "#ef4444", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#d6d3d1", + "input": "#d6d3d1", + "ring": "#6366f1", + "chart1": "#6366f1", + "chart2": "#4f46e5", + "chart3": "#4338ca", + "chart4": "#3730a3", + "chart5": "#312e81", + "sidebar": "#d6d3d1", + "sidebarForeground": "#1e293b", + "sidebarPrimary": "#6366f1", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#f3e5f5", + "sidebarAccentForeground": "#374151", + "sidebarBorder": "#d6d3d1", + "sidebarRing": "#6366f1", + "fontSans": "Plus Jakarta Sans, sans-serif", + "fontSerif": "Lora, serif", + "fontMono": "Roboto Mono, monospace", + "radius": "1.25rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "2px 2px 10px 4px hsl(240 4% 60% / 0.09)", + "shadowXs": "2px 2px 10px 4px hsl(240 4% 60% / 0.09)", + "shadowSm": "2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 1px 2px 3px hsl(240 4% 60% / 0.18)", + "shadow": "2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 1px 2px 3px hsl(240 4% 60% / 0.18)", + "shadowMd": "2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 2px 4px 3px hsl(240 4% 60% / 0.18)", + "shadowLg": "2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 4px 6px 3px hsl(240 4% 60% / 0.18)", + "shadowXl": "2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 8px 10px 3px hsl(240 4% 60% / 0.18)", + "shadow2xl": "2px 2px 10px 4px hsl(240 4% 60% / 0.45)" + }, + "darkModeVariables": { + "background": "#1e1b18", + "foreground": "#e2e8f0", + "card": "#2c2825", + "cardForeground": "#e2e8f0", + "popover": "#2c2825", + "popoverForeground": "#e2e8f0", + "primary": "#818cf8", + "primaryForeground": "#1e1b18", + "secondary": "#3a3633", + "secondaryForeground": "#d1d5db", + "muted": "#1f1c19", + "mutedForeground": "#9ca3af", + "accent": "#484441", + "accentForeground": "#d1d5db", + "destructive": "#ef4444", + "destructiveForeground": "#1e1b18", + "success": null, + "border": "#3a3633", + "input": "#3a3633", + "ring": "#818cf8", + "chart1": "#818cf8", + "chart2": "#6366f1", + "chart3": "#4f46e5", + "chart4": "#4338ca", + "chart5": "#3730a3", + "sidebar": "#3a3633", + "sidebarForeground": "#e2e8f0", + "sidebarPrimary": "#818cf8", + "sidebarPrimaryForeground": "#1e1b18", + "sidebarAccent": "#484441", + "sidebarAccentForeground": "#d1d5db", + "sidebarBorder": "#3a3633", + "sidebarRing": "#818cf8", + "fontSans": "Plus Jakarta Sans, sans-serif", + "fontSerif": "Lora, serif", + "fontMono": "Roboto Mono, monospace", + "radius": "1.25rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "2px 2px 10px 4px hsl(0 0% 0% / 0.09)", + "shadowXs": "2px 2px 10px 4px hsl(0 0% 0% / 0.09)", + "shadowSm": "2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18)", + "shadow": "2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18)", + "shadowMd": "2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 2px 4px 3px hsl(0 0% 0% / 0.18)", + "shadowLg": "2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 4px 6px 3px hsl(0 0% 0% / 0.18)", + "shadowXl": "2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 8px 10px 3px hsl(0 0% 0% / 0.18)", + "shadow2xl": "2px 2px 10px 4px hsl(0 0% 0% / 0.45)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Claymorphism", + "summary": "Soft clay-styled theme from tweakcn — big rounded corners, plush layered shadows, stone neutrals with an indigo lead, set in Plus Jakarta Sans.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} \ No newline at end of file diff --git a/Theme/mono.json b/Theme/mono.json new file mode 100644 index 00000000..db8e72a4 --- /dev/null +++ b/Theme/mono.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn preset in the terminal-minimalist register — the all-monospace, all-grayscale look of code editors and plain-text tools carried into product UI.", + "colorPalette": "One gray ramp. White `#ffffff` ground with near-black ink `#0a0a0a`, inverting cleanly in dark mode (`#0a0a0a` ground, `#191919` cards). Mid-gray `#737373` serves as primary in both modes, secondary and accent stay whisper-gray, and red `#e7000b` / `#ff6467` is the sole chromatic voice, reserved for destructive actions. All five chart slots share the same gray — hierarchy must come from shape, not hue.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Geist Mono is the entire system — sans, serif, and mono slots all resolve to it — giving every character the same fixed-width, terminal-like rhythm.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Mono", + "inspirations": [ + "tweakcn theme registry", + "Terminal and code-editor UIs", + "Plain-text and brutalist-minimal web design" + ], + "visualDNA": "Grayscale absolutism: every surface, action, and chart drawn from one neutral ramp, zero border radius, no shadows at all, and a single monospace face for everything. Only destructive red is allowed to be a color.", + "wallpaperImages": [], + "rootVariables": { + "background": "#ffffff", + "foreground": "#0a0a0a", + "card": "#ffffff", + "cardForeground": "#0a0a0a", + "popover": "#ffffff", + "popoverForeground": "#0a0a0a", + "primary": "#737373", + "primaryForeground": "#fafafa", + "secondary": "#f5f5f5", + "secondaryForeground": "#171717", + "muted": "#f5f5f5", + "mutedForeground": "#717171", + "accent": "#f5f5f5", + "accentForeground": "#171717", + "destructive": "#e7000b", + "destructiveForeground": "#f5f5f5", + "success": null, + "border": "#e5e5e5", + "input": "#e5e5e5", + "ring": "#a1a1a1", + "chart1": "#737373", + "chart2": "#737373", + "chart3": "#737373", + "chart4": "#737373", + "chart5": "#737373", + "sidebar": "#fafafa", + "sidebarForeground": "#0a0a0a", + "sidebarPrimary": "#171717", + "sidebarPrimaryForeground": "#fafafa", + "sidebarAccent": "#f5f5f5", + "sidebarAccentForeground": "#171717", + "sidebarBorder": "#e5e5e5", + "sidebarRing": "#a1a1a1", + "fontSans": "Geist Mono, monospace", + "fontSerif": "Geist Mono, monospace", + "fontMono": "Geist Mono, monospace", + "radius": "0rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)", + "shadowXs": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)", + "shadowSm": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00)", + "shadow": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00)", + "shadowMd": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00)", + "shadowLg": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00)", + "shadowXl": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00)", + "shadow2xl": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)" + }, + "darkModeVariables": { + "background": "#0a0a0a", + "foreground": "#fafafa", + "card": "#191919", + "cardForeground": "#fafafa", + "popover": "#262626", + "popoverForeground": "#fafafa", + "primary": "#737373", + "primaryForeground": "#fafafa", + "secondary": "#262626", + "secondaryForeground": "#fafafa", + "muted": "#262626", + "mutedForeground": "#a1a1a1", + "accent": "#404040", + "accentForeground": "#fafafa", + "destructive": "#ff6467", + "destructiveForeground": "#262626", + "success": null, + "border": "#383838", + "input": "#525252", + "ring": "#737373", + "chart1": "#737373", + "chart2": "#737373", + "chart3": "#737373", + "chart4": "#737373", + "chart5": "#737373", + "sidebar": "#171717", + "sidebarForeground": "#fafafa", + "sidebarPrimary": "#fafafa", + "sidebarPrimaryForeground": "#171717", + "sidebarAccent": "#262626", + "sidebarAccentForeground": "#fafafa", + "sidebarBorder": "#ffffff", + "sidebarRing": "#525252", + "fontSans": "Geist Mono, monospace", + "fontSerif": "Geist Mono, monospace", + "fontMono": "Geist Mono, monospace", + "radius": "0rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)", + "shadowXs": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)", + "shadowSm": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00)", + "shadow": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00)", + "shadowMd": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00)", + "shadowLg": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00)", + "shadowXl": "0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00)", + "shadow2xl": "0px 1px 0px 0px hsl(0 0% 0% / 0.00)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Mono", + "summary": "All-grayscale monospace theme from tweakcn — one gray ramp, zero radius, no shadows, everything set in Geist Mono.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/nature.json b/Theme/nature.json new file mode 100644 index 00000000..9b03e912 --- /dev/null +++ b/Theme/nature.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn preset built on Material Design's green ramp, arranged as an organic earth-and-leaf palette rather than a tech brand.", + "colorPalette": "Earth and leaf. Light mode pairs parchment `#f8f5f0` with dark bark ink `#3e2723`; dark mode turns mossy (`#1c2a1f` ground, `#2d3a2e` cards) with warm off-white text. Forest green `#2e7d32` / `#4caf50` leads, pale leaf tones `#e8f5e9` / `#c8e6c9` fill secondary and accent, deep red `#c62828` marks destructive. Charts descend a green canopy from `#4caf50` to near-black `#0a1f0c`.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Montserrat gives the UI a friendly geometric voice; Merriweather serves sturdy long-form serif text, and Source Code Pro handles code.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Nature", + "inspirations": [ + "tweakcn theme registry", + "Material Design green palette", + "Forest and botanical field guides" + ], + "visualDNA": "A walk in the woods: parchment grounds, bark-brown text, forest green carrying every action, pale-leaf accents, and moss-dark surfaces after dark. Organic warmth with 0.5rem rounding and quiet shadows.", + "wallpaperImages": [], + "rootVariables": { + "background": "#f8f5f0", + "foreground": "#3e2723", + "card": "#f8f5f0", + "cardForeground": "#3e2723", + "popover": "#f8f5f0", + "popoverForeground": "#3e2723", + "primary": "#2e7d32", + "primaryForeground": "#ffffff", + "secondary": "#e8f5e9", + "secondaryForeground": "#1b5e20", + "muted": "#f0e9e0", + "mutedForeground": "#6d4c41", + "accent": "#c8e6c9", + "accentForeground": "#1b5e20", + "destructive": "#c62828", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#e0d6c9", + "input": "#e0d6c9", + "ring": "#2e7d32", + "chart1": "#4caf50", + "chart2": "#388e3c", + "chart3": "#2e7d32", + "chart4": "#1b5e20", + "chart5": "#0a1f0c", + "sidebar": "#f0e9e0", + "sidebarForeground": "#3e2723", + "sidebarPrimary": "#2e7d32", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#c8e6c9", + "sidebarAccentForeground": "#1b5e20", + "sidebarBorder": "#e0d6c9", + "sidebarRing": "#2e7d32", + "fontSans": "Montserrat, sans-serif", + "fontSerif": "Merriweather, serif", + "fontMono": "Source Code Pro, monospace", + "radius": "0.5rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowSm": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadowMd": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10)", + "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10)", + "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10)", + "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)" + }, + "darkModeVariables": { + "background": "#1c2a1f", + "foreground": "#f0ebe5", + "card": "#2d3a2e", + "cardForeground": "#f0ebe5", + "popover": "#2d3a2e", + "popoverForeground": "#f0ebe5", + "primary": "#4caf50", + "primaryForeground": "#0a1f0c", + "secondary": "#3e4a3d", + "secondaryForeground": "#d7e0d6", + "muted": "#252f26", + "mutedForeground": "#d7cfc4", + "accent": "#388e3c", + "accentForeground": "#f0ebe5", + "destructive": "#c62828", + "destructiveForeground": "#f0ebe5", + "success": null, + "border": "#3e4a3d", + "input": "#3e4a3d", + "ring": "#4caf50", + "chart1": "#81c784", + "chart2": "#66bb6a", + "chart3": "#4caf50", + "chart4": "#43a047", + "chart5": "#388e3c", + "sidebar": "#1c2a1f", + "sidebarForeground": "#f0ebe5", + "sidebarPrimary": "#4caf50", + "sidebarPrimaryForeground": "#0a1f0c", + "sidebarAccent": "#388e3c", + "sidebarAccentForeground": "#f0ebe5", + "sidebarBorder": "#3e4a3d", + "sidebarRing": "#4caf50", + "fontSans": "Montserrat, sans-serif", + "fontSerif": "Merriweather, serif", + "fontMono": "Source Code Pro, monospace", + "radius": "0.5rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowSm": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadowMd": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10)", + "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10)", + "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10)", + "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Nature", + "summary": "Forest-green organic theme from tweakcn — parchment ground, bark-brown ink, leafy green ramp, Montserrat and Merriweather.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/neo-brutalism.json b/Theme/neo-brutalism.json new file mode 100644 index 00000000..09c2ef81 --- /dev/null +++ b/Theme/neo-brutalism.json @@ -0,0 +1,182 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "Neobrutalism resurfaced as a reaction to homogeneous flat SaaS design — Gumroad-era raw HTML energy with primary colors and hard shadows. This is tweakcn's take.", + "colorPalette": "Primaries at full volume. White `#ffffff` ground, pure black `#000000` ink and borders; dark mode simply inverts to black with white text. Red `#ff3333` leads, yellow `#ffff00` seconds, blue `#0066ff` accents — and destructive is plain black. Charts continue the crayon box: red, yellow, blue, green, magenta.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "DM Sans keeps body text plain and legible while the palette shouts; Space Mono supplies the typewriter-flavored mono for code and labels.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Neo Brutalism", + "inspirations": [ + "Neobrutalism web design trend", + "tweakcn theme registry", + "Gumroad-era raw web aesthetics", + "Bauhaus primary colors" + ], + "visualDNA": "Raw and loud: primary red, yellow, and blue straight from the tube, black 1px-everything borders, zero border radius, and hard 4px offset black shadows instead of blur. Every element looks pasted on, on purpose.", + "wallpaperImages": [], + "rootVariables": { + "background": "#ffffff", + "foreground": "#000000", + "card": "#ffffff", + "cardForeground": "#000000", + "popover": "#ffffff", + "popoverForeground": "#000000", + "primary": "#ff3333", + "primaryForeground": "#ffffff", + "secondary": "#ffff00", + "secondaryForeground": "#000000", + "muted": "#f0f0f0", + "mutedForeground": "#333333", + "accent": "#0066ff", + "accentForeground": "#ffffff", + "destructive": "#000000", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#000000", + "input": "#000000", + "ring": "#ff3333", + "chart1": "#ff3333", + "chart2": "#ffff00", + "chart3": "#0066ff", + "chart4": "#00cc00", + "chart5": "#cc00cc", + "sidebar": "#f0f0f0", + "sidebarForeground": "#000000", + "sidebarPrimary": "#ff3333", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#0066ff", + "sidebarAccentForeground": "#ffffff", + "sidebarBorder": "#000000", + "sidebarRing": "#ff3333", + "fontSans": "DM Sans, sans-serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "Space Mono, monospace", + "radius": "0px", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "4px 4px 0px 0px hsl(0 0% 0% / 0.50)", + "shadowXs": "4px 4px 0px 0px hsl(0 0% 0% / 0.50)", + "shadowSm": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00)", + "shadow": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00)", + "shadowMd": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00)", + "shadowLg": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00)", + "shadowXl": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00)", + "shadow2xl": "4px 4px 0px 0px hsl(0 0% 0% / 2.50)" + }, + "darkModeVariables": { + "background": "#000000", + "foreground": "#ffffff", + "card": "#333333", + "cardForeground": "#ffffff", + "popover": "#333333", + "popoverForeground": "#ffffff", + "primary": "#ff6666", + "primaryForeground": "#000000", + "secondary": "#ffff33", + "secondaryForeground": "#000000", + "muted": "#1a1a1a", + "mutedForeground": "#cccccc", + "accent": "#3399ff", + "accentForeground": "#000000", + "destructive": "#ffffff", + "destructiveForeground": "#000000", + "success": null, + "border": "#ffffff", + "input": "#ffffff", + "ring": "#ff6666", + "chart1": "#ff6666", + "chart2": "#ffff33", + "chart3": "#3399ff", + "chart4": "#33cc33", + "chart5": "#cc33cc", + "sidebar": "#000000", + "sidebarForeground": "#ffffff", + "sidebarPrimary": "#ff6666", + "sidebarPrimaryForeground": "#000000", + "sidebarAccent": "#3399ff", + "sidebarAccentForeground": "#000000", + "sidebarBorder": "#ffffff", + "sidebarRing": "#ff6666", + "fontSans": "DM Sans, sans-serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "Space Mono, monospace", + "radius": "0px", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "4px 4px 0px 0px hsl(0 0% 0% / 0.50)", + "shadowXs": "4px 4px 0px 0px hsl(0 0% 0% / 0.50)", + "shadowSm": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00)", + "shadow": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00)", + "shadowMd": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00)", + "shadowLg": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00)", + "shadowXl": "4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00)", + "shadow2xl": "4px 4px 0px 0px hsl(0 0% 0% / 2.50)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Neo Brutalism", + "summary": "Loud neobrutalist theme from tweakcn — primary red, yellow, and blue on white, hard black borders, zero radius, offset block shadows.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} \ No newline at end of file diff --git a/Theme/sage-garden.json b/Theme/sage-garden.json new file mode 100644 index 00000000..5a63324c --- /dev/null +++ b/Theme/sage-garden.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn theme in the muted-botanical register popularized by wellness and stationery brands — sage as a calming neutral rather than a statement green.", + "colorPalette": "Sage on paper. Light mode sets warm paper `#f8f7f4` and white cards against ink-navy text `#1a1f2e`; dark mode drops to near-black (`#0a0a0a` / `#121212`). Sage `#7c9082` leads in both modes, with mossy secondary `#ced4bf` and accent `#bfc9bb` tones, and brick red `#c73e3a` for destructive. Charts stay in the garden — sage, olive, moss, slate, stone.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Antic sets the UI in a light, airy humanist voice; Signifier brings an editorial serif for headings and prose, and JetBrains Mono covers code.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Sage Garden", + "inspirations": [ + "tweakcn theme registry", + "Botanical and stationery brand palettes", + "Wellness-brand muted greens" + ], + "visualDNA": "A quiet greenhouse: desaturated sage greens on warm paper, ink-navy text, small 0.35rem rounding, and shadows so light they read as air. Restrained, botanical, unhurried.", + "wallpaperImages": [], + "rootVariables": { + "background": "#f8f7f4", + "foreground": "#1a1f2e", + "card": "#ffffff", + "cardForeground": "#1a1f2e", + "popover": "#ffffff", + "popoverForeground": "#1a1f2e", + "primary": "#7c9082", + "primaryForeground": "#ffffff", + "secondary": "#ced4bf", + "secondaryForeground": "#1a1f2e", + "muted": "#e8e6e1", + "mutedForeground": "#6b7280", + "accent": "#bfc9bb", + "accentForeground": "#1a1f2e", + "destructive": "#c73e3a", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#e8e6e1", + "input": "#ffffff", + "ring": "#7c9082", + "chart1": "#7c9082", + "chart2": "#a0aa88", + "chart3": "#8b9d83", + "chart4": "#6b7280", + "chart5": "#e8e6e1", + "sidebar": "#fafaf8", + "sidebarForeground": "#1a1f2e", + "sidebarPrimary": "#7c9082", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#e8e6e1", + "sidebarAccentForeground": "#1a1f2e", + "sidebarBorder": "#e8e6e1", + "sidebarRing": "#7c9082", + "fontSans": "Antic, ui-sans-serif, sans-serif, system-ui", + "fontSerif": "Signifier, Georgia, serif", + "fontMono": "JetBrains Mono, Courier New, monospace", + "radius": "0.35rem", + "spacing": "0.23rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.02)", + "shadowXs": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.02)", + "shadowSm": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 1px 2px -1px hsl(225 27.7778% 14.1176% / 0.04)", + "shadow": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 1px 2px -1px hsl(225 27.7778% 14.1176% / 0.04)", + "shadowMd": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 2px 4px -1px hsl(225 27.7778% 14.1176% / 0.04)", + "shadowLg": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 4px 6px -1px hsl(225 27.7778% 14.1176% / 0.04)", + "shadowXl": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 8px 10px -1px hsl(225 27.7778% 14.1176% / 0.04)", + "shadow2xl": "0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.10)" + }, + "darkModeVariables": { + "background": "#0a0a0a", + "foreground": "#f5f5f5", + "card": "#121212", + "cardForeground": "#f5f5f5", + "popover": "#121212", + "popoverForeground": "#f5f5f5", + "primary": "#7c9082", + "primaryForeground": "#000000", + "secondary": "#1a1a1a", + "secondaryForeground": "#f5f5f5", + "muted": "#1a1a1a", + "mutedForeground": "#a0a0a0", + "accent": "#36443a", + "accentForeground": "#f5f5f5", + "destructive": "#ef4444", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#2a2a2a", + "input": "#121212", + "ring": "#7c9082", + "chart1": "#7c9082", + "chart2": "#a0aa88", + "chart3": "#8b9d83", + "chart4": "#6b7280", + "chart5": "#5a6b5e", + "sidebar": "#0f0f0f", + "sidebarForeground": "#f5f5f5", + "sidebarPrimary": "#7c9082", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#1a1a1a", + "sidebarAccentForeground": "#f5f5f5", + "sidebarBorder": "#2a2a2a", + "sidebarRing": "#7c9082", + "fontSans": "Antic, ui-sans-serif, sans-serif, system-ui", + "fontSerif": "Signifier, Georgia, serif", + "fontMono": "JetBrains Mono, Courier New, monospace", + "radius": "0.35rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0px 1px 2px 0px hsl(0 0% 0% / 0.02)", + "shadowXs": "0px 1px 2px 0px hsl(0 0% 0% / 0.02)", + "shadowSm": "0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 1px 2px -1px hsl(0 0% 0% / 0.04)", + "shadow": "0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 1px 2px -1px hsl(0 0% 0% / 0.04)", + "shadowMd": "0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 2px 4px -1px hsl(0 0% 0% / 0.04)", + "shadowLg": "0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 4px 6px -1px hsl(0 0% 0% / 0.04)", + "shadowXl": "0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 8px 10px -1px hsl(0 0% 0% / 0.04)", + "shadow2xl": "0px 1px 2px 0px hsl(0 0% 0% / 0.10)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Sage Garden", + "summary": "Quiet botanical theme from tweakcn — sage green lead on warm paper neutrals, Antic and Signifier type, whisper-light shadows.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/soft-pop.json b/Theme/soft-pop.json new file mode 100644 index 00000000..85166307 --- /dev/null +++ b/Theme/soft-pop.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn preset in the soft-pop register — the outlined, candy-accented look descended from Memphis-style illustration and playful product branding.", + "colorPalette": "Candy accents behind black lines. Light mode grounds on tinted white `#f7f9f3` with pure black ink and borders; dark mode goes full black with slate cards `#1a212b`. Indigo `#4f46e5` / periwinkle `#818cf8` leads, teal `#14b8a6` seconds, amber `#f59e0b` accents, red `#ef4444` destructive. Charts sample the whole candy jar — indigo, teal, amber, pink, green.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "DM Sans does double duty for UI and long-form text, keeping the voice round and friendly; Space Mono adds a playful typewriter mono for code.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Soft Pop", + "inspirations": [ + "tweakcn theme registry", + "Memphis-style illustration", + "Sticker-sheet and candy-pop branding" + ], + "visualDNA": "Playful without shouting: candy pops of indigo, teal, and amber on a green-tinted white ground, crisp black outlines, generous 1rem rounding, and nearly no shadow. Reads like a friendly sticker sheet.", + "wallpaperImages": [], + "rootVariables": { + "background": "#f7f9f3", + "foreground": "#000000", + "card": "#ffffff", + "cardForeground": "#000000", + "popover": "#ffffff", + "popoverForeground": "#000000", + "primary": "#4f46e5", + "primaryForeground": "#ffffff", + "secondary": "#14b8a6", + "secondaryForeground": "#000000", + "muted": "#f0f0f0", + "mutedForeground": "#333333", + "accent": "#f59e0b", + "accentForeground": "#000000", + "destructive": "#ef4444", + "destructiveForeground": "#ffffff", + "success": null, + "border": "#000000", + "input": "#737373", + "ring": "#a5b4fc", + "chart1": "#4f46e5", + "chart2": "#14b8a6", + "chart3": "#f59e0b", + "chart4": "#ec4899", + "chart5": "#22c55e", + "sidebar": "#f7f9f3", + "sidebarForeground": "#000000", + "sidebarPrimary": "#4f46e5", + "sidebarPrimaryForeground": "#ffffff", + "sidebarAccent": "#f59e0b", + "sidebarAccentForeground": "#000000", + "sidebarBorder": "#000000", + "sidebarRing": "#a5b4fc", + "fontSans": "DM Sans, sans-serif", + "fontSerif": "DM Sans, sans-serif", + "fontMono": "Space Mono, monospace", + "radius": "1rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "normal", + "shadow2xs": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03)", + "shadowXs": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03)", + "shadowSm": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05)", + "shadow": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowMd": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowLg": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowXl": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05)", + "shadow2xl": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13)" + }, + "darkModeVariables": { + "background": "#000000", + "foreground": "#ffffff", + "card": "#1a212b", + "cardForeground": "#ffffff", + "popover": "#1a212b", + "popoverForeground": "#ffffff", + "primary": "#818cf8", + "primaryForeground": "#000000", + "secondary": "#2dd4bf", + "secondaryForeground": "#000000", + "muted": "#333333", + "mutedForeground": "#cccccc", + "accent": "#fcd34d", + "accentForeground": "#000000", + "destructive": "#f87171", + "destructiveForeground": "#000000", + "success": null, + "border": "#545454", + "input": "#ffffff", + "ring": "#818cf8", + "chart1": "#818cf8", + "chart2": "#2dd4bf", + "chart3": "#fcd34d", + "chart4": "#f472b6", + "chart5": "#4ade80", + "sidebar": "#000000", + "sidebarForeground": "#ffffff", + "sidebarPrimary": "#818cf8", + "sidebarPrimaryForeground": "#000000", + "sidebarAccent": "#fcd34d", + "sidebarAccentForeground": "#000000", + "sidebarBorder": "#ffffff", + "sidebarRing": "#818cf8", + "fontSans": "DM Sans, sans-serif", + "fontSerif": "DM Sans, sans-serif", + "fontMono": "Space Mono, monospace", + "radius": "1rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03)", + "shadowXs": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03)", + "shadowSm": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05)", + "shadow": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowMd": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowLg": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05)", + "shadowXl": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05)", + "shadow2xl": "0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Soft Pop", + "summary": "Cheerful candy-colored theme from tweakcn — indigo, teal, and amber pops on tinted white, black outlines, big 1rem rounding.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} \ No newline at end of file diff --git a/Theme/starry-night.json b/Theme/starry-night.json new file mode 100644 index 00000000..31b133a2 --- /dev/null +++ b/Theme/starry-night.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "A tweakcn homage to Vincent van Gogh's The Starry Night (1889) — the canvas's night blues, swirling sky tones, and points of golden starlight mapped onto interface roles.", + "colorPalette": "Night sky pigments. Light mode is a daylit version — pale sky `#f5f7fa`, cloud cards `#e3eaf2`, midnight ink `#1a2238`; dark mode enters the painting (`#181a24` ground, `#23243a` cards) with gold `#ffe066` glowing on the blue primary. Night blue `#3a5ba0` leads, starlight gold `#f7c873` seconds and rings, moonlit blue `#6ea3c1` accents, and destructive is a dark plum. Charts sample the canvas — blue, gold, sky, gray, plum.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Libre Baskerville — a bookish serif — sets even the UI, giving the theme its painted, literary character; system serif and mono stacks back it up.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Starry Night", + "inspirations": [ + "Vincent van Gogh's The Starry Night", + "tweakcn theme registry", + "Museum plaque and gallery typography" + ], + "visualDNA": "A painting turned palette: deep night blue carrying the action, starlight gold glinting in rings and secondaries, moonlit sky-blue accents, and warm cream where light hits. Serif-first type gives it a painted-label, gallery-plaque air.", + "wallpaperImages": [], + "rootVariables": { + "background": "#f5f7fa", + "foreground": "#1a2238", + "card": "#e3eaf2", + "cardForeground": "#1a2238", + "popover": "#fffbe6", + "popoverForeground": "#1a2238", + "primary": "#3a5ba0", + "primaryForeground": "#fffbe6", + "secondary": "#f7c873", + "secondaryForeground": "#1a2238", + "muted": "#e5e5df", + "mutedForeground": "#3a5ba0", + "accent": "#6ea3c1", + "accentForeground": "#1a2238", + "destructive": "#2d1e2f", + "destructiveForeground": "#fffbe6", + "success": null, + "border": "#b0b8c1", + "input": "#6ea3c1", + "ring": "#f7c873", + "chart1": "#3a5ba0", + "chart2": "#f7c873", + "chart3": "#6ea3c1", + "chart4": "#b0b8c1", + "chart5": "#2d1e2f", + "sidebar": "#e3eaf2", + "sidebarForeground": "#1a2238", + "sidebarPrimary": "#3a5ba0", + "sidebarPrimaryForeground": "#fffbe6", + "sidebarAccent": "#f7c873", + "sidebarAccentForeground": "#1a2238", + "sidebarBorder": "#b0b8c1", + "sidebarRing": "#f7c873", + "fontSans": "Libre Baskerville, serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "radius": "0.5rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0em", + "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowSm": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadowMd": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10)", + "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10)", + "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10)", + "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)" + }, + "darkModeVariables": { + "background": "#181a24", + "foreground": "#e6eaf3", + "card": "#23243a", + "cardForeground": "#e6eaf3", + "popover": "#23243a", + "popoverForeground": "#ffe066", + "primary": "#3a5ba0", + "primaryForeground": "#ffe066", + "secondary": "#ffe066", + "secondaryForeground": "#23243a", + "muted": "#1d1e2f", + "mutedForeground": "#7a88a1", + "accent": "#bccdf0", + "accentForeground": "#181a24", + "destructive": "#a04a6c", + "destructiveForeground": "#ffe066", + "success": null, + "border": "#2d2e3e", + "input": "#3a5ba0", + "ring": "#ffe066", + "chart1": "#3a5ba0", + "chart2": "#ffe066", + "chart3": "#6ea3c1", + "chart4": "#7a88a1", + "chart5": "#a04a6c", + "sidebar": "#23243a", + "sidebarForeground": "#e6eaf3", + "sidebarPrimary": "#3a5ba0", + "sidebarPrimaryForeground": "#ffe066", + "sidebarAccent": "#ffe066", + "sidebarAccentForeground": "#23243a", + "sidebarBorder": "#2d2e3e", + "sidebarRing": "#ffe066", + "fontSans": "Libre Baskerville, serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "radius": "0.5rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowXs": "0 1px 3px 0px hsl(0 0% 0% / 0.05)", + "shadowSm": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadow": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10)", + "shadowMd": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10)", + "shadowLg": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10)", + "shadowXl": "0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10)", + "shadow2xl": "0 1px 3px 0px hsl(0 0% 0% / 0.25)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Starry Night", + "summary": "Van Gogh-inspired theme from tweakcn — swirling night blue and starlight gold, cream highlights, Libre Baskerville throughout.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/supabase.json b/Theme/supabase.json new file mode 100644 index 00000000..1e17b784 --- /dev/null +++ b/Theme/supabase.json @@ -0,0 +1,181 @@ +{ + "data": { + "type": "card", + "attributes": { + "historicalContext": "Modeled on the Supabase dashboard's visual identity — the open-source Firebase alternative whose green-on-charcoal look became a reference point for developer-tool design. Packaged as a tweakcn preset.", + "colorPalette": "Neutral shells, green signal. Light mode is near-white `#fcfcfc` with near-black ink `#171717` and a mint primary `#72e3ad`; dark mode flips to charcoal (`#121212` / `#171717`) where the primary deepens to Supabase green `#006239`. Destructive runs rust `#ca3214` light and oxblood `#541c15` dark. Charts break the monochrome — green, blue, violet, amber, emerald.", + "typography": { + "heading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "sectionHeading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "subheading": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "body": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + }, + "caption": { + "fontFamily": null, + "fontSize": null, + "fontWeight": null, + "lineHeight": null, + "sampleText": null + } + }, + "typographySystem": "Outfit sets the UI in a geometric, product-brand voice with a touch of extra tracking (`0.025em`); serif and mono fall back to system stacks.", + "geometricLanguage": null, + "materialVocabulary": null, + "compositionRules": null, + "motionLanguage": null, + "componentVocabulary": null, + "contentVoice": null, + "technicalSpecs": null, + "applicationScenarios": null, + "qualityStandards": null, + "designMindset": null, + "styleName": "Supabase", + "inspirations": [ + "Supabase brand and dashboard", + "tweakcn theme registry", + "Developer-tool dark UIs" + ], + "visualDNA": "Developer-tool cool: austere near-white and near-black neutrals with Supabase's signature green as the single point of color — mint and bright in light mode, deep and muted in dark. Slightly open letter-spacing keeps it technical and airy.", + "wallpaperImages": [], + "rootVariables": { + "background": "#fcfcfc", + "foreground": "#171717", + "card": "#fcfcfc", + "cardForeground": "#171717", + "popover": "#fcfcfc", + "popoverForeground": "#525252", + "primary": "#72e3ad", + "primaryForeground": "#1e2723", + "secondary": "#fdfdfd", + "secondaryForeground": "#171717", + "muted": "#ededed", + "mutedForeground": "#202020", + "accent": "#ededed", + "accentForeground": "#202020", + "destructive": "#ca3214", + "destructiveForeground": "#fffcfc", + "success": null, + "border": "#dfdfdf", + "input": "#f6f6f6", + "ring": "#72e3ad", + "chart1": "#72e3ad", + "chart2": "#3b82f6", + "chart3": "#8b5cf6", + "chart4": "#f59e0b", + "chart5": "#10b981", + "sidebar": "#fcfcfc", + "sidebarForeground": "#707070", + "sidebarPrimary": "#72e3ad", + "sidebarPrimaryForeground": "#1e2723", + "sidebarAccent": "#ededed", + "sidebarAccentForeground": "#202020", + "sidebarBorder": "#dfdfdf", + "sidebarRing": "#72e3ad", + "fontSans": "Outfit, sans-serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "monospace", + "radius": "0.5rem", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "trackingNormal": "0.025em", + "shadow2xs": "0px 1px 3px 0px hsl(0 0% 0% / 0.09)", + "shadowXs": "0px 1px 3px 0px hsl(0 0% 0% / 0.09)", + "shadowSm": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17)", + "shadow": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17)", + "shadowMd": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17)", + "shadowLg": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17)", + "shadowXl": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17)", + "shadow2xl": "0px 1px 3px 0px hsl(0 0% 0% / 0.43)" + }, + "darkModeVariables": { + "background": "#121212", + "foreground": "#e2e8f0", + "card": "#171717", + "cardForeground": "#e2e8f0", + "popover": "#242424", + "popoverForeground": "#a9a9a9", + "primary": "#006239", + "primaryForeground": "#dde8e3", + "secondary": "#242424", + "secondaryForeground": "#fafafa", + "muted": "#1f1f1f", + "mutedForeground": "#a2a2a2", + "accent": "#313131", + "accentForeground": "#fafafa", + "destructive": "#541c15", + "destructiveForeground": "#ede9e8", + "success": null, + "border": "#292929", + "input": "#242424", + "ring": "#4ade80", + "chart1": "#4ade80", + "chart2": "#60a5fa", + "chart3": "#a78bfa", + "chart4": "#fbbf24", + "chart5": "#2dd4bf", + "sidebar": "#121212", + "sidebarForeground": "#898989", + "sidebarPrimary": "#006239", + "sidebarPrimaryForeground": "#dde8e3", + "sidebarAccent": "#313131", + "sidebarAccentForeground": "#fafafa", + "sidebarBorder": "#292929", + "sidebarRing": "#4ade80", + "fontSans": "Outfit, sans-serif", + "fontSerif": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "fontMono": "monospace", + "radius": "0.5rem", + "spacing": null, + "themeFontSize": null, + "themeScale": null, + "trackingNormal": null, + "shadow2xs": "0px 1px 3px 0px hsl(0 0% 0% / 0.09)", + "shadowXs": "0px 1px 3px 0px hsl(0 0% 0% / 0.09)", + "shadowSm": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17)", + "shadow": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17)", + "shadowMd": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17)", + "shadowLg": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17)", + "shadowXl": "0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17)", + "shadow2xl": "0px 1px 3px 0px hsl(0 0% 0% / 0.43)" + }, + "version": null, + "customCssImports": [], + "cardInfo": { + "name": "Supabase", + "summary": "Supabase-styled theme from tweakcn — the signature mint green on near-white and near-black neutrals, set in Outfit.", + "cardThumbnailURL": null, + "notes": null + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/base/detailed-style-reference", + "name": "default" + } + } + } +} diff --git a/Theme/winter-wonderland.json b/Theme/winter-wonderland.json new file mode 100644 index 00000000..d4add78c --- /dev/null +++ b/Theme/winter-wonderland.json @@ -0,0 +1,183 @@ +{ + "data": { + "meta": { + "adoptsFrom": { + "name": "default", + "module": "https://cardstack.com/base/detailed-style-reference" + } + }, + "type": "card", + "attributes": { + "version": null, + "cardInfo": { + "notes": null, + "name": "Winter Wonderland", + "summary": "A crisp, magical theme inspired by snowy landscapes, ice crystals, and the serene beauty of winter", + "cardThumbnailURL": null + }, + "styleName": "Winter Wonderland", + "visualDNA": "Winter evergreens meet icy blues with touches of winter berries. Deep forest greens anchor the interface, cool blues provide serene atmosphere, and soft pink-reds add warmth like holly berries in snow. The palette balances natural vitality with crisp winter elegance.", + "customCssImports": [], + "typography": { + "body": { + "fontSize": "1rem", + "fontFamily": "Inter, -apple-system, sans-serif", + "fontWeight": "400", + "lineHeight": "1.65", + "sampleText": "Experience the serene beauty of winter through thoughtful design and crisp typography." + }, + "caption": { + "fontSize": "0.875rem", + "fontFamily": "Inter, -apple-system, sans-serif", + "fontWeight": "500", + "lineHeight": "1.5", + "sampleText": "Inspired by Nordic landscapes" + }, + "heading": { + "fontSize": "3rem", + "fontFamily": "Inter, -apple-system, sans-serif", + "fontWeight": "600", + "lineHeight": "1.1", + "sampleText": "Winter Wonderland" + }, + "subheading": { + "fontSize": "1.375rem", + "fontFamily": "Inter, -apple-system, sans-serif", + "fontWeight": "600", + "lineHeight": "1.35", + "sampleText": "Crystal Clear Design" + }, + "sectionHeading": { + "fontSize": "2rem", + "fontFamily": "Inter, -apple-system, sans-serif", + "fontWeight": "600", + "lineHeight": "1.25", + "sampleText": "Frost & Light" + } + }, + "colorPalette": "**Primary Colors:**\n- Winter Pine (#1E7A5F) - Primary actions and interactive elements with evergreen warmth\n- Pure Snow (#FFFFFF) - Card surfaces and content backgrounds\n- Deep Arctic (#0F2942) - Primary text with enhanced readability\n- Winter Sky (#F0F7FA) - Page background with subtle warmth\n\n**Accent Colors:**\n- Fresh Spruce (#26A17B) - Hover states and secondary accents with natural vitality\n- Mint Frost (#D4E9E2) - Secondary elements with cool green tint\n- Evergreen Mist (#E8F5F0) - Subtle sidebar accents\n- Aurora Blue (#5FA3D0) - Tertiary accents maintaining winter sky connection\n- Winter Berry (#D14D72) - Warm pink-red accents for highlights and special elements\n\n**Semantic Colors:**\n- Winter Berry (#D14D72) - Destructive actions with warm pink undertones\n- Spring Moss (#34D399) - Success states with vibrant green energy\n- Northern Lights (#7C3AED) - Special highlights and premium features\n- Glacier Blue (#2B6CB0) - Information and secondary charts\n- Frosted Rose (#E85D75) - Chart accent with soft pink warmth\n\n**Enhanced Contrast:**\nAll color pairings meet WCAG AAA standards. The addition of winter berry pink-red brings warmth and playfulness while complementing the cool evergreens and blues.", + "contentVoice": "### Content Guidelines\n\n**Tone:** Clear, calm, and confident. Like a winter morning - crisp and refreshing.\n\n**Language:** \n- Use active voice\n- Keep sentences concise\n- Prefer simple, direct words\n- Avoid excessive warmth metaphors; embrace the cool clarity\n\n**Microcopy:** Helpful and precise. \"Save changes\" over \"Got it!\"", + "inspirations": [ + "Nordic architecture and minimalism", + "Ice crystal photography and fractal geometry", + "Art Deco geometric patterns", + "Japanese winter gardens (Yukimi)", + "Scandinavian color theory and hygge" + ], + "designMindset": "### Core Principles\n\n**Clarity Through Contrast:** Enhanced color contrast ensures content is effortlessly readable while maintaining the winter aesthetic.\n\n**Refined Sophistication:** Deeper blues and carefully calibrated neutrals create a more premium, professional feel.\n\n**Purposeful Layering:** Every shadow and elevation tells a story of depth and hierarchy.\n\n**Accessible Beauty:** Design decisions prioritize both aesthetics and usability - no compromises.\n\n**Breathing Room:** Generous spacing creates moments of calm and helps users focus on what matters.", + "rootVariables": { + "card": "#FFFFFF", + "ring": "#1E7A5F", + "input": "#EDF2F7", + "muted": "#F7FAFC", + "accent": "#26A17B", + "border": "#D1DEE8", + "chart1": "#1E7A5F", + "chart2": "#26A17B", + "chart3": "#5FA3D0", + "chart4": "#2B6CB0", + "chart5": "#E85D75", + "radius": "0.625rem", + "shadow": "0 4px 8px -2px rgb(15 41 66 / 0.1), 0 2px 4px -1px rgb(15 41 66 / 0.06)", + "popover": "#FFFFFF", + "primary": "#1E7A5F", + "sidebar": "#FAFBFC", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "fontMono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace", + "fontSans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", + "shadowLg": "0 12px 24px -6px rgb(15 41 66 / 0.15), 0 6px 12px -3px rgb(15 41 66 / 0.1)", + "shadowMd": "0 8px 16px -4px rgb(15 41 66 / 0.12), 0 4px 8px -2px rgb(15 41 66 / 0.08)", + "shadowSm": "0 2px 4px -1px rgb(15 41 66 / 0.08), 0 1px 2px 0 rgb(15 41 66 / 0.04)", + "shadowXl": "0 20px 32px -8px rgb(15 41 66 / 0.18), 0 10px 16px -4px rgb(15 41 66 / 0.12)", + "shadowXs": "0 1px 3px 0 rgb(15 41 66 / 0.08), 0 1px 2px 0 rgb(15 41 66 / 0.04)", + "fontSerif": "Merriweather, Georgia, 'Times New Roman', serif", + "secondary": "#D4E9E2", + "shadow2xl": "0 32px 64px -12px rgb(15 41 66 / 0.22), 0 16px 32px -8px rgb(15 41 66 / 0.15)", + "shadow2xs": "0 1px 2px 0 rgb(15 41 66 / 0.04)", + "background": "#f4f5fc", + "foreground": "#0e467c", + "destructive": "#D14D72", + "sidebarRing": "#1E7A5F", + "sidebarAccent": "#E8F5F0", + "sidebarBorder": "#E2E8F0", + "cardForeground": "#0F2942", + "sidebarPrimary": "#1E7A5F", + "trackingNormal": "0.005em", + "mutedForeground": "#727e8b", + "accentForeground": "#FFFFFF", + "popoverForeground": "#0F2942", + "primaryForeground": "#FFFFFF", + "sidebarForeground": "#334155", + "secondaryForeground": "#0F4C3A", + "destructiveForeground": "#FFFFFF", + "success": null, + "sidebarAccentForeground": "#0F2942", + "sidebarPrimaryForeground": "#FFFFFF" + }, + "motionLanguage": "### Animation Principles\n\n**Gentle Cascades:** Staggered animations feel like snowflakes falling in sequence\n\n**Refined Timing:** \n- Micro-interactions: 180ms for responsive feel\n- Component transitions: 320ms for smooth, noticeable changes\n- Page transitions: 420ms with content fade-in\n- Easing: cubic-bezier(0.32, 0.0, 0.18, 1) for elegant deceleration\n\n**Subtle Scale:** Hover states use transform: scale(1.015) for refined lift without exaggeration\n\n**Opacity Transitions:** Fade effects (opacity 0.85 \u2192 1.0) add sophistication to state changes", + "technicalSpecs": "### Implementation Details\n\n**Breakpoints:**\n- Mobile: 0-640px\n- Tablet: 641-1024px\n- Desktop: 1025px+\n\n**Accessibility:**\n- WCAG AA minimum contrast ratios\n- Focus indicators on all interactive elements\n- Keyboard navigation support\n- Screen reader optimized labels\n\n**Performance:**\n- Use CSS transforms for animations\n- Lazy load images below fold\n- Optimize font loading with font-display: swap", + "wallpaperImages": [], + "compositionRules": "## Layout Principles\n\n**Strategic Spacing:** 1.5rem minimum between major sections creates clear visual separation\n\n**Golden Ratio Layout:** Content width follows 1.618 ratio for natural, balanced compositions\n\n**Asymmetric Harmony:** Intentional asymmetry creates visual interest while maintaining balance\n\n**Elevation System:** 5-tier shadow system (2xs, xs, sm, md, lg, xl, 2xl) for consistent depth\n\n**Responsive Grid:** \n- Desktop: 12-column with 32px gutters\n- Tablet: 8-column with 24px gutters \n- Mobile: 4-column with 16px gutters\n\n**Generous Margins:** 2rem minimum page margins on mobile, 4rem on desktop", + "qualityStandards": "### Quality Checklist\n\n- [ ] All text meets WCAG AA contrast requirements\n- [ ] Interactive elements have visible focus states\n- [ ] Spacing follows 4px base grid\n- [ ] Shadows use consistent elevation system\n- [ ] Animations run at 60fps\n- [ ] Touch targets minimum 44x44px\n- [ ] Color isn't sole differentiator for information\n- [ ] Typography scale maintains readability at all sizes", + "typographySystem": "**Primary Font:** Inter - A modern, highly legible sans-serif with excellent readability at all sizes. Its clean geometric forms echo ice crystals and snowflakes.\n\n**Hierarchy:**\n- Headings: Bold weights (600-700) for impact\n- Body: Regular weight (400) for comfortable reading\n- Captions: Regular weight at smaller sizes\n\n**Letter Spacing:** Slightly open tracking (0.01em) creates an airy, spacious feel reminiscent of winter landscapes.", + "darkModeVariables": { + "card": "#131F35", + "ring": "#26A17B", + "input": "#1A2942", + "muted": "#1A2942", + "accent": "#34D399", + "border": "#1E3A52", + "chart1": "#26A17B", + "chart2": "#34D399", + "chart3": "#5FA3D0", + "chart4": "#8BB9DB", + "chart5": "#FB7185", + "radius": "0.625rem", + "shadow": "0 4px 8px -2px rgb(0 0 0 / 0.6), 0 2px 4px -1px rgb(0 0 0 / 0.4)", + "popover": "#1A2942", + "primary": "#26A17B", + "sidebar": "#0F1A2E", + "spacing": "0.25rem", + "themeFontSize": null, + "themeScale": null, + "fontMono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace", + "fontSans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif", + "shadowLg": "0 12px 24px -6px rgb(0 0 0 / 0.7), 0 6px 12px -3px rgb(0 0 0 / 0.55)", + "shadowMd": "0 8px 16px -4px rgb(0 0 0 / 0.65), 0 4px 8px -2px rgb(0 0 0 / 0.5)", + "shadowSm": "0 2px 4px -1px rgb(0 0 0 / 0.5), 0 1px 2px 0 rgb(0 0 0 / 0.3)", + "shadowXl": "0 20px 32px -8px rgb(0 0 0 / 0.75), 0 10px 16px -4px rgb(0 0 0 / 0.6)", + "shadowXs": "0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px 0 rgb(0 0 0 / 0.3)", + "fontSerif": "Merriweather, Georgia, 'Times New Roman', serif", + "secondary": "#1A4D3C", + "shadow2xl": "0 32px 64px -12px rgb(0 0 0 / 0.8), 0 16px 32px -8px rgb(0 0 0 / 0.65)", + "shadow2xs": "0 1px 2px 0 rgb(0 0 0 / 0.4)", + "background": "#0A1628", + "foreground": "#F0F7FA", + "destructive": "#F472B6", + "sidebarRing": "#26A17B", + "sidebarAccent": "#1A4D3C", + "sidebarBorder": "#1E3A52", + "cardForeground": "#E8F0F5", + "sidebarPrimary": "#26A17B", + "trackingNormal": "0.005em", + "mutedForeground": "#94A3B8", + "accentForeground": "#0A1628", + "popoverForeground": "#F0F7FA", + "primaryForeground": "#FFFFFF", + "sidebarForeground": "#CBD5E1", + "secondaryForeground": "#B8E6D5", + "destructiveForeground": "#0A1628", + "success": null, + "sidebarAccentForeground": "#E8F0F5", + "sidebarPrimaryForeground": "#FFFFFF" + }, + "geometricLanguage": "**Snowflake Geometry:** Hexagonal patterns and 60-degree angles reference crystalline structures. Components feature subtle faceted edges and geometric precision.\n\n**Proportions:** Golden ratio (1.618) governs major spacing decisions. Card layouts use 8px base grid for consistency.\n\n**Shapes:** Rounded corners (0.5rem default) soften the geometric precision, like snow smoothing sharp edges.", + "historicalContext": "Inspired by Nordic winter landscapes, ice palaces, and the Art Deco movement's geometric interpretation of snowflakes. This style captures the clarity and precision of winter mornings while maintaining warmth through thoughtful contrast and spacing.", + "materialVocabulary": "**Frosted Pine:** Sophisticated translucent overlays with green-tinted blur (8-12px)\n\n**Pristine Snow:** Pure white surfaces with micro-shadows that add subtle depth\n\n**Evergreen Bark:** Rich green textures suggesting pine needles and winter foliage\n\n**Winter Berries:** Soft pink-red accents like cranberries and holly berries dusted with frost\n\n**Ice Crystals:** Delicate geometric patterns using linear gradients with cool green-to-blue transitions\n\n**Arctic Depth:** Balanced shadows with blue, green, and subtle warm undertones\n\n**Winter Light:** Soft ambient glow effects on hover states, suggesting sunlight through pine branches and berry clusters", + "componentVocabulary": "### Component Patterns\n\n**Cards:** Elevated surfaces with subtle shadows, rounded corners, and frost-white backgrounds. Hover states add gentle lift.\n\n**Buttons:** \n- Primary: Glacier blue with white text\n- Secondary: Outlined with silver mist borders\n- Hover: Slight scale (1.02) + deeper shadow\n\n**Inputs:** Light backgrounds with crisp borders. Focus states show primary blue ring.\n\n**Navigation:** Minimal, spacious, with clear hierarchy. Active states use accent blue.", + "applicationScenarios": "### Use Cases\n\n**Dashboard:** Clean data visualization with blue chart accents against white cards. Spacious layout emphasizes key metrics.\n\n**Content Platform:** Long-form reading with generous line height and comfortable margins. Section breaks use subtle frost dividers.\n\n**E-commerce:** Product cards with crisp photography on white backgrounds. Call-to-action buttons in glacier blue stand out clearly.\n\n**SaaS Application:** Professional, trustworthy interface. Complex forms feel manageable through clear hierarchy and spacing." + } + } +} diff --git a/ThemeListing/amethyst-haze.json b/ThemeListing/amethyst-haze.json new file mode 100644 index 00000000..e059a6fe --- /dev/null +++ b/ThemeListing/amethyst-haze.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Amethyst Haze", + "summary": "A dreamy lavender theme from tweakcn — muted amethyst lead, dusty-rose accent, and Geist with Lora type over misted purple grounds in both light and dark modes. Link it to any card to give it a soft twilight atmosphere.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/amethyst-haze" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/botanical.json b/ThemeListing/botanical.json new file mode 100644 index 00000000..e8def323 --- /dev/null +++ b/ThemeListing/botanical.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Botanical", + "summary": "A natural, garden-inspired theme — deep forest green primary, sage secondary, and terracotta accents on a warm cream, paper-like ground. Link it to any card for an organic, earthy look.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/botanical" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/boxel-brand-guide.json b/ThemeListing/boxel-brand-guide.json new file mode 100644 index 00000000..ffe3e71b --- /dev/null +++ b/ThemeListing/boxel-brand-guide.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Boxel Brand Guide", + "summary": "A high-density design system based on the 'Boxel' unit. Optimized for complex UI and information architecture while retaining a tactile, accessible feel. Link it to any card to apply the full Boxel identity — palette, type stack, spacing, and shadows.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/boxel-brand-guide" + } + }, + "specs.0": { + "links": { + "self": "../Spec/brand-guide" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/cardstack-brand-guide.json b/ThemeListing/cardstack-brand-guide.json new file mode 100644 index 00000000..0261461f --- /dev/null +++ b/ThemeListing/cardstack-brand-guide.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Cardstack Brand Guide", + "summary": "The official Cardstack brand identity as a linkable theme: logo marks and usage rules, the signal-green palette, IBM Plex type stack, and light/dark surfaces. Link it to a card to give it the Cardstack look, or open it as a reference for brand elements and visual style.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": "https://boxel-assets-store.s3.us-east-1.amazonaws.com/cardstack-brand-guide/cardstack-profile-icon.png" + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/cardstack-brand-guide" + } + }, + "specs.0": { + "links": { + "self": "../Spec/brand-guide" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/catppuccin.json b/ThemeListing/catppuccin.json new file mode 100644 index 00000000..def98e46 --- /dev/null +++ b/ThemeListing/catppuccin.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Catppuccin", + "summary": "The beloved open-source pastel scheme as a tweakcn theme — Latte flavor for light mode, Mocha for dark, mauve lead, and Montserrat with Fira Code type. Link it to any card for soothing, editor-grade pastels.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/catppuccin" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/claymorphism.json b/ThemeListing/claymorphism.json new file mode 100644 index 00000000..5a94a017 --- /dev/null +++ b/ThemeListing/claymorphism.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Claymorphism", + "summary": "tweakcn's take on the soft-clay trend — big rounded corners, plush layered shadows, stone neutrals with an indigo lead, set in Plus Jakarta Sans. Link it to any card for a friendly, tactile 3D feel.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/claymorphism" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/mono.json b/ThemeListing/mono.json new file mode 100644 index 00000000..648630df --- /dev/null +++ b/ThemeListing/mono.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Mono", + "summary": "A terminal-minimalist theme from tweakcn — one grayscale ramp, zero border radius, no shadows, and everything set in Geist Mono, with red as the sole chromatic voice. Link it to any card for a stripped-down, code-editor look.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/mono" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/nature.json b/ThemeListing/nature.json new file mode 100644 index 00000000..a9775f47 --- /dev/null +++ b/ThemeListing/nature.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Nature", + "summary": "A forest-green organic theme from tweakcn — parchment ground, bark-brown ink, a leafy Material green ramp, and Montserrat with Merriweather type. Link it to any card for a grounded earth-and-leaf palette.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/nature" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/neo-brutalism.json b/ThemeListing/neo-brutalism.json new file mode 100644 index 00000000..9b7215be --- /dev/null +++ b/ThemeListing/neo-brutalism.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Neo Brutalism", + "summary": "tweakcn's loud neobrutalist preset — primary red, yellow, and blue at full volume on white, hard black borders, zero radius, and offset block shadows. Link it to any card for raw, high-contrast energy.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/neo-brutalism" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/sage-garden.json b/ThemeListing/sage-garden.json new file mode 100644 index 00000000..17e7fba5 --- /dev/null +++ b/ThemeListing/sage-garden.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Sage Garden", + "summary": "A quiet botanical theme from tweakcn — sage green lead on warm paper neutrals, Antic and Signifier type, and whisper-light shadows. Link it to any card for a calm, stationery-brand feel.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/sage-garden" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/soft-pop.json b/ThemeListing/soft-pop.json new file mode 100644 index 00000000..5b5f109a --- /dev/null +++ b/ThemeListing/soft-pop.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Soft Pop", + "summary": "A cheerful candy-colored theme from tweakcn — indigo, teal, and amber pops behind black outlines on tinted white, with big 1rem rounding. Link it to any card for a playful, Memphis-flavored look.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/soft-pop" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/starry-night.json b/ThemeListing/starry-night.json new file mode 100644 index 00000000..abe8bca3 --- /dev/null +++ b/ThemeListing/starry-night.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Starry Night", + "summary": "A tweakcn homage to Van Gogh's The Starry Night — swirling night blue and starlight gold with cream highlights, set in Libre Baskerville throughout. Link it to any card to step into the painting.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/starry-night" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/supabase.json b/ThemeListing/supabase.json new file mode 100644 index 00000000..a0c69a4d --- /dev/null +++ b/ThemeListing/supabase.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Supabase", + "summary": "A tweakcn theme modeled on the Supabase dashboard — the signature mint green signal on near-white and near-black neutrals, set in Outfit. Link it to any card for a clean developer-tool aesthetic.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/supabase" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/ThemeListing/winter-wonderland.json b/ThemeListing/winter-wonderland.json new file mode 100644 index 00000000..5c1b61ea --- /dev/null +++ b/ThemeListing/winter-wonderland.json @@ -0,0 +1,43 @@ +{ + "data": { + "type": "card", + "attributes": { + "name": "Winter Wonderland", + "summary": "A crisp, magical theme inspired by Nordic winter landscapes and Art Deco snowflake geometry — winter pine green on snow white and pale winter-sky surfaces. Link it to any card for a serene, frosty look.", + "cardInfo": { + "name": null, + "notes": null, + "summary": null, + "cardThumbnailURL": null + } + }, + "relationships": { + "examples.0": { + "links": { + "self": "../Theme/winter-wonderland" + } + }, + "specs.0": { + "links": { + "self": "../Spec/theme" + } + }, + "tags.0": { + "links": { + "self": "../Tag/theme" + } + }, + "categories.0": { + "links": { + "self": "../Category/ui-components-design" + } + } + }, + "meta": { + "adoptsFrom": { + "module": "@cardstack/catalog/catalog-app/listing/listing", + "name": "ThemeListing" + } + } + } +} diff --git a/boxel-surface/src/components/form-alert.gts b/boxel-surface/src/components/form-alert.gts index bcb3ed8a..5105beed 100644 --- a/boxel-surface/src/components/form-alert.gts +++ b/boxel-surface/src/components/form-alert.gts @@ -99,11 +99,11 @@ export default class FormAlert extends Component { } .bx-form-alert--warning { - --bx-form-alert-color: var(--warning); + --bx-form-alert-color: var(--warning, var(--destructive)); } .bx-form-alert--success { - --bx-form-alert-color: var(--success); + --bx-form-alert-color: var(--success, var(--primary)); } .bx-form-alert__icon { diff --git a/boxel-surface/src/components/form-field.gts b/boxel-surface/src/components/form-field.gts index ec7cdc70..92a48966 100644 --- a/boxel-surface/src/components/form-field.gts +++ b/boxel-surface/src/components/form-field.gts @@ -327,7 +327,7 @@ export default class FormField extends Component { } [data-bx-form-field-state='valid'] .bx-form-field__state { - color: var(--success); + color: var(--success, var(--primary)); --icon-color: currentColor; } diff --git a/boxel-surface/src/components/switch-cell.gts b/boxel-surface/src/components/switch-cell.gts index f7e8f572..40a1559e 100644 --- a/boxel-surface/src/components/switch-cell.gts +++ b/boxel-surface/src/components/switch-cell.gts @@ -177,7 +177,7 @@ export default class SwitchCell extends Component { } .bx-switch-cell__track[data-checked='true'] { - background: var(--success); + background: var(--success, var(--primary)); } .bx-switch-cell__thumb { diff --git a/catalog-app/listing/spec-fields-grid.gts b/catalog-app/listing/spec-fields-grid.gts index fa397078..b30b281d 100644 --- a/catalog-app/listing/spec-fields-grid.gts +++ b/catalog-app/listing/spec-fields-grid.gts @@ -92,19 +92,21 @@ export default class SpecFieldsGrid extends GlimmerComponent { display: flex; align-items: baseline; justify-content: space-between; + flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem; - border: 1px solid var(--border, #e7e3d8); + border: 1px solid var(--border); border-radius: 0.5rem; - background: var(--card, #fff); + background: var(--card); + color: var(--card-foreground); } .field-name { - font: 600 0.8125rem/1.3 var(--font-mono, 'IBM Plex Mono', monospace); - color: var(--foreground, #16161c); + font: 600 0.8125rem/1.3 var(--font-mono); } .field-type { - font: 500 0.75rem/1.3 var(--font-sans, 'IBM Plex Sans', sans-serif); - color: var(--muted-foreground, #8a8578); + font-weight: 500; + font-size: var(--boxel-font-size-xs); + color: var(--muted-foreground); white-space: nowrap; }