brad/brand-guidelines
brad/brand-guidelines
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

stylesheet #2

New issue
Closed
opened 2026-02-26 15:56:45 -08:00 by brad · 2 comments
brad commented 2026-02-26 15:56:45 -08:00
Owner
Copy link

I'm wondering if we can automatically generate a brand CSS stylesheet from brand.json with a workflow? where's best place to put that the css file in the repo?

I'm wondering if we can automatically generate a brand CSS stylesheet from brand.json with a workflow? where's best place to put that the css file in the repo?
agent commented 2026-02-26 15:57:31 -08:00
Collaborator
Copy link

Implementation Plan

I'll set up automatic CSS generation from brand.json using a Forgejo Actions workflow.

Approach:

  1. Create a Node.js script (scripts/generate-css.js) that transforms brand.json into a comprehensive CSS stylesheet with:

    • CSS custom properties for colors (hex, rgb components)
    • Font-face declarations with proper paths
    • Typography scale classes
    • Utility classes for brand colors
    • Accessibility-compliant color pairs

  2. Add the workflow (.forgejo/workflows/generate-brand-css.yml) that:

    • Triggers on changes to brand.json
    • Runs the generation script
    • Commits the updated CSS file if changes are detected

File location: brand.css in the repo root

  • Co-located with brand.json for easy discovery
  • Can be imported directly: @import url('https://git.brads.house/brad/brand-guidelines/raw/branch/main/brand.css');
  • Alternative assets/css/brand.css if you prefer organized structure

Starting implementation now.

## Implementation Plan I'll set up automatic CSS generation from brand.json using a Forgejo Actions workflow. **Approach:** 1. Create a Node.js script (`scripts/generate-css.js`) that transforms brand.json into a comprehensive CSS stylesheet with: - CSS custom properties for colors (hex, rgb components) - Font-face declarations with proper paths - Typography scale classes - Utility classes for brand colors - Accessibility-compliant color pairs 2. Add the workflow (`.forgejo/workflows/generate-brand-css.yml`) that: - Triggers on changes to brand.json - Runs the generation script - Commits the updated CSS file if changes are detected **File location:** `brand.css` in the repo root - Co-located with brand.json for easy discovery - Can be imported directly: `@import url('https://git.brads.house/brad/brand-guidelines/raw/branch/main/brand.css');` - Alternative assets/css/brand.css if you prefer organized structure Starting implementation now.
agent commented 2026-02-26 15:59:08 -08:00
Collaborator
Copy link

✓ Implemented

Created PR #3 with full CSS generation solution.

What you get:

  • brand.css automatically generated from brand.json
  • Forgejo Actions workflow that regenerates CSS on every brand.json change
  • CSS custom properties for colors (with RGB components for alpha transparency)
  • Font-face declarations with web font optimization
  • Typography scale variables
  • Utility classes for rapid prototyping

File location: brand.css in repo root

  • Direct import: https://git.brads.house/brad/brand-guidelines/raw/branch/main/brand.css
  • Co-located with brand.json for easy discovery

Local development:

npm run generate:css

The workflow commits changes automatically, so you just edit brand.json and push — CSS regenerates and updates itself.

Ready for review.

## ✓ Implemented Created PR #3 with full CSS generation solution. **What you get:** - `brand.css` automatically generated from brand.json - Forgejo Actions workflow that regenerates CSS on every brand.json change - CSS custom properties for colors (with RGB components for alpha transparency) - Font-face declarations with web font optimization - Typography scale variables - Utility classes for rapid prototyping **File location:** `brand.css` in repo root - Direct import: `https://git.brads.house/brad/brand-guidelines/raw/branch/main/brand.css` - Co-located with brand.json for easy discovery **Local development:** ```bash npm run generate:css ``` The workflow commits changes automatically, so you just edit brand.json and push — CSS regenerates and updates itself. Ready for review.
brad closed this issue 2026-02-26 16:24:38 -08:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
pages
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
agent
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
brad/brand-guidelines#2
No description provided.