Feature - Add neobrutalism dark variants and improve dark mode generation script#701
Open
Feature - Add neobrutalism dark variants and improve dark mode generation script#701
Conversation
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/f912633a-ec36-4bc8-8efc-ec133451c143 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
hyperui | 180021c | Commit Preview URL Branch Preview URL |
May 08 2026, 06:09 PM |
Copilot stopped work on behalf of
markmead due to an error
May 7, 2026 14:19
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/f88c959b-1df3-4ab1-aa9f-aecb260cb46c Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/f88c959b-1df3-4ab1-aa9f-aecb260cb46c Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
This reverts commit 6253470. Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/f88c959b-1df3-4ab1-aa9f-aecb260cb46c Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Reintroduces the dark-variant generation utility as a plain Node.js script and wires it into the repo tooling, aiming to restore the previous “generate dark HTML variants” workflow without requiring tsx.
Changes:
- Added
scripts/generate-dark-variants.jsto generate*-dark.htmlfiles from existing example HTML. - Added
dark:generatenpm script to run the generator withnode. - Updated ESLint config to define Node globals for files under
scripts/**.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| scripts/generate-dark-variants.js | New Node.js generator that transforms HTML class="" attributes to include dark: equivalents. |
| package.json | Adds dark:generate script for running the generator. |
| eslint.config.ts | Marks scripts/** as Node-global context for linting. |
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/c78bc140-6be0-4519-a0a8-fd4a1fa02bea Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/c78bc140-6be0-4519-a0a8-fd4a1fa02bea Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/973a4e66-be72-495c-931b-0f90352ab423 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Add dark-mode HTML variants for many Neobrutalism component examples (accordions, alerts, badges, buttons, cards, checkboxes, inputs, progress-bars, selects, tabs, textareas) and update existing example pages. Update public/component.css (theme/base utilities) and refresh the Neobrutalism collection MDX files under src/content/collection/neobrutalism to reflect the example and style changes.
markmead
changed the title
Comment on lines
+21
to
+26
| const COLOR_MAP = { | ||
| white: 'gray-900', | ||
| 'white/': 'gray-900/', | ||
| black: 'white', | ||
| 'black/': 'white/', | ||
| } |
Delete duplicate `*-dark.html` example files and consolidate examples by adding the explicit `shadow-black` utility to many neobrutalism example pages. Updated components include accordions, alerts, badges, cards, progress-bars and others so shadows are rendered consistently. This cleans up dark-mode duplicates and unifies shadow styling across the example pages.
Add dark-mode demo pages for Neobrutalism components. New HTML examples were added under public/examples/neobrutalism for accordions, alerts, badges, buttons, cards, checkboxes, inputs, progress-bars, selects, tabs, and textareas. Each file references /component.css and /component.js and demonstrates dark-theme styling and component interactions.
Comment on lines
+231
to
+242
| try { | ||
| const lightContent = fs.readFileSync(lightPath, 'utf-8') | ||
| const darkContent = transformHtmlContent(lightContent) | ||
|
|
||
| fs.writeFileSync(darkPath, darkContent, 'utf-8') | ||
|
|
||
| console.log(`✨ Created: ${processFile.replace('.html', '-dark.html')}`) | ||
|
|
||
| generatedCount++ | ||
| } catch (error) { | ||
| console.error(`❌ Error processing ${processFile}: ${error}`) | ||
| } |
Tweak and reorganize example components for the neobrutalism theme. Removed explicit border classes from button examples (buttons/4.html, buttons/4-dark.html). Deleted dark checkbox variants (checkboxes/1-dark.html, 2-dark.html, 3-dark.html) and simplified the checkbox input classes in checkboxes/1.html (removed redundant checked:text-white). Added new search input examples (public/examples/neobrutalism/inputs/3.html and inputs/3-dark.html) for light and dark variants.
Owner
|
@copilot Address the PR comments. |
Agent-Logs-Url: https://github.com/markmead/hyperui/sessions/f953f297-adc6-4308-9e1f-97e0653533f0 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Add three dark-themed example pages for neobrutalism checkboxes: public/examples/neobrutalism/checkboxes/1-dark.html, 2-dark.html, and 3-dark.html. Each page includes component.css and component.js, uses the .dark root class and utility classes for styling, and demonstrates variations: a simple stacked checkbox list (1), checkboxes with descriptive copy (2), and a grouped card-style list with dividers and hover/focus highlights (3). Accessibility reinforced with fieldset/legend and labeled inputs.
…b.com/markmead/hyperui into copilot/re-add-dark-mode-script-again
Owner
|
@copilot Address the PR feedback – it appears it's been partially implemented. I added the |
Author
Addressed in |
Copilot
AI
changed the title
Feature - Add dark mode script for generating component variants
Feature - Add neobrutalism dark variants and improve dark mode generation script
May 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds and updates dark mode support across neobrutalism examples, and hardens the dark variant generation tooling used to produce
*-dark.htmlfiles.Dark mode examples and styling updates:
Tooling and configuration:
dark:generateinpackage.jsonto runscripts/generate-dark-variants.jswith Node.js.scripts/**.scripts/generate-dark-variants.jsbehavior:dark:classes.gray-900 -> whitespecial handling while using valid shade inversion for900.black/andwhite/color map entries while preserving slash-opacity support (e.g.black/90,white/50) through existing matching logic.