alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Refactor and Enhance Hex Colours Simulator in Astro #11

New Issue
Closed
opened 2026-03-01 15:32:52 +00:00 by alexander.lyall · 0 comments
alexander.lyall commented 2026-03-01 15:32:52 +00:00
Owner
Copy Link

Context

The Hex Colours simulator needs to be migrated from the legacy HTML structure into the new Astro architecture. It must be updated to match the new dark-mode design language established by the Binary and Hexadecimal simulators.

Objective

Rebase the Hex Colours page into Astro, adopt the global BaseLayout.astro, implement the interactive RGB hex cards, and add the newly designed toolbox features.

Acceptance Criteria

  • Migration: Create hex-colours.astro using the global layout.
  • Layout: Implement the side-by-side readout container for Denary, Hexadecimal, Binary, and the visual colour preview boxes.
  • Interactive UI: Build container-query responsive "Hex Cards" for the Red, Green, and Blue channels with built-in increment/decrement buttons and 4-bit SVG lightbulbs.
  • Toolbox Features: Implement functional buttons for "Custom Hex", "Custom RGB", "Invert Colour", "Random Colour", and "Reset".
  • Styling: Ensure the binary and hex text dynamically injects the .text-red, .text-green, and .text-blue CSS classes for clear visual hierarchy.
### Context The Hex Colours simulator needs to be migrated from the legacy HTML structure into the new Astro architecture. It must be updated to match the new dark-mode design language established by the Binary and Hexadecimal simulators. ### Objective Rebase the Hex Colours page into Astro, adopt the global `BaseLayout.astro`, implement the interactive RGB hex cards, and add the newly designed toolbox features. ### Acceptance Criteria - [ ] **Migration:** Create `hex-colours.astro` using the global layout. - [ ] **Layout:** Implement the side-by-side readout container for Denary, Hexadecimal, Binary, and the visual colour preview boxes. - [ ] **Interactive UI:** Build container-query responsive "Hex Cards" for the Red, Green, and Blue channels with built-in increment/decrement buttons and 4-bit SVG lightbulbs. - [ ] **Toolbox Features:** Implement functional buttons for "Custom Hex", "Custom RGB", "Invert Colour", "Random Colour", and "Reset". - [ ] **Styling:** Ensure the binary and hex text dynamically injects the `.text-red`, `.text-green`, and `.text-blue` CSS classes for clear visual hierarchy.
alexander.lyall added this to the Version 2.0 milestone 2026-03-01 15:32:52 +00:00
alexander.lyall added the
Priority
Medium
3
Kind/EnhancementKind/Feature labels 2026-03-01 15:32:52 +00:00
alexander.lyall self-assigned this 2026-03-01 15:32:52 +00:00
alexander.lyall added this to the Version 2.0 project 2026-03-01 15:32:52 +00:00
alexander.lyall added reference Version-2-Rebase 2026-03-01 15:33:37 +00:00
alexander.lyall moved this to Done in Version 2.0 on 2026-03-01 15:38:32 +00:00
Sign in to join this conversation.
Version-2-Rebase
Branches Tags
Labels
Clear labels
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Low
4
The priority is low
Priority
Medium
3
The priority is medium
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
No Label Kind/Enhancement Kind/Feature
Priority
Medium
3
Milestone
No items
No Milestone Version 2.0
Projects
Clear projects
No project Version 2.0
Assignees
Clear assignees
renovate-bot alexander.lyall
No Assignees alexander.lyall
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: alexander.lyall/computing-box#11
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?