Skip to content

Feature - Add neobrutalism dark variants and improve dark mode generation script #701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Feature - Add neobrutalism dark variants and improve dark mode generation script #701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fd1b078
Initial plan
Copilot May 6, 2026
c8f5643
feat: add TypeScript dark variant generation script
Copilot May 7, 2026
6253470
chore: plan js dark variant script update
Copilot May 7, 2026
8d8a537
refactor: switch dark variant generator back to JavaScript
Copilot May 7, 2026
971892e
Revert "chore: plan js dark variant script update"
Copilot May 7, 2026
b780508
chore: remove tsx and keep dark generator as JS
Copilot May 7, 2026
482b761
chore: plan reviewer follow-up
Copilot May 8, 2026
8608246
fix: map shade 900 to 50 in dark variant generator
Copilot May 8, 2026
2ece6c7
feat: harden dark variant generation script
Copilot May 8, 2026
8a82f0c
chore: refine parser depth handling names
Copilot May 8, 2026
b715fa5
chore: simplify dark variant parser and remove env override
Copilot May 8, 2026
6efa10f
Update generate-dark-variants.js
markmead May 8, 2026
51d0303
Add dark examples and update neobrutalism styles
markmead May 8, 2026
7ceab36
Remove dark examples; add shadow-black
markmead May 8, 2026
24ea797
Add neobrutalism dark examples
markmead May 8, 2026
a4cacab
Update neobrutalism examples
markmead May 8, 2026
39f8035
Changes before error encountered
Copilot May 8, 2026
5a4f34e
Add dark-mode neobrutalism checkbox examples
markmead May 8, 2026
180021c
Merge branch 'copilot/re-add-dark-mode-script-again' of https://githu…
markmead May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions eslint.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,12 @@ export default defineConfig([
},
},
},
{
files: ['scripts/**'],
languageOptions: {
globals: {
...globals.node,
},
},
},
])
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"test": "playwright test",
"lint": "eslint .",
"format": "prettier --write . --ignore-path .prettierignore",
"css": "npx @tailwindcss/cli -i ./src/styles/component.css -o ./public/component.css -m"
"css": "npx @tailwindcss/cli -i ./src/styles/component.css -o ./public/component.css -m",
"dark:generate": "node scripts/generate-dark-variants.js"
},
"dependencies": {
"@astrojs/check": "^0.9.8",
Expand Down
4 changes: 2 additions & 2 deletions public/component.css
View file
Open in desktop

Large diffs are not rendered by default.

108 changes: 108 additions & 0 deletions public/examples/neobrutalism/accordions/1-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-3">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black dark:border-white bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>

<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black dark:border-white bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>

<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black dark:border-white bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
12 changes: 6 additions & 6 deletions public/examples/neobrutalism/accordions/1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="space-y-3">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>

Expand All @@ -31,7 +31,7 @@
</summary>

<div class="p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand All @@ -42,7 +42,7 @@

<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>

Expand All @@ -63,7 +63,7 @@
</summary>

<div class="p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand All @@ -74,7 +74,7 @@

<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 border-2 border-black bg-white px-4 py-3 font-medium text-gray-900 shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>

Expand All @@ -95,7 +95,7 @@
</summary>

<div class="p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand Down
114 changes: 114 additions & 0 deletions public/examples/neobrutalism/accordions/2-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-3">
<details
class="group border-2 border-black dark:border-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="border-t-2 border-black dark:border-white p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>

<details
class="group border-2 border-black dark:border-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="border-t-2 border-black dark:border-white p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>

<details
class="group border-2 border-black dark:border-white shadow-[4px_4px_0_0] shadow-black dark:shadow-white [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white dark:bg-gray-900 px-4 py-3 font-medium text-gray-900 dark:text-white hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:bg-yellow-200 dark:focus:bg-yellow-700 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>

<svg
class="size-5 shrink-0 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>

<div class="border-t-2 border-black dark:border-white p-4">
<p class="text-black dark:text-white">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
18 changes: 9 additions & 9 deletions public/examples/neobrutalism/accordions/2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-3">
<details
class="group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden"
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What are the basic features?</span>

Expand All @@ -33,7 +33,7 @@
</summary>

<div class="border-t-2 border-black p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand All @@ -43,10 +43,10 @@
</details>

<details
class="group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden"
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">How do I get started?</span>

Expand All @@ -67,7 +67,7 @@
</summary>

<div class="border-t-2 border-black p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand All @@ -77,10 +77,10 @@
</details>

<details
class="group border-2 border-black shadow-[4px_4px_0_0] [&_summary::-webkit-details-marker]:hidden"
class="group border-2 border-black shadow-[4px_4px_0_0] shadow-black [&_summary::-webkit-details-marker]:hidden"
>
<summary
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-100 focus:bg-yellow-100 focus:outline-0"
class="flex cursor-pointer items-center justify-between gap-4 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-yellow-200 focus:bg-yellow-200 focus:outline-0"
>
<span class="font-semibold">What support options are available?</span>

Expand All @@ -101,7 +101,7 @@
</summary>

<div class="border-t-2 border-black p-4">
<p>
<p class="text-black">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
Expand Down
Loading