+
+
Drawer Dimensions
-
-
-
+
-
-
-
+
+
@@ -32,41 +32,41 @@
+
+
-
-
+
+
-
-
+
+
-
-
+
+
Calculation Results
-
Grid Count
+Grid Count
0 x 0
-0.00 x 0.00 grids
+0.00 x 0.00 grids
-
Max Bin Height
+Max Bin Height
0U
-Vertical Units (7mm each)
+Vertical Units (7mm each)
-
Remaining Space
-
+
+
Remaining Space
+
Width Gap:
0.0 mm
Length Gap:
@@ -79,32 +79,32 @@
-
-
+
+
+
Gridfinity Spec Overrides
- Standard: 42x42x7mm
+ Standard: 42x42x7mm
-
+
-
-
+
+
-
-
+
+
-
-
+
+
- Adjust these to scale the system for an exact fit in your drawer.
+ Adjust these to scale the system for an exact fit in your drawer.
-
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index 1170181..5e4b8c0 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -16,6 +16,7 @@
- Setting up the Vite/TypeScript/Tailwind environment.
## Active Decisions
+- **Dark Mode Implementation**: Adopted a Dracula Midnight theme (`#21222c` background) as the primary interface style. Added custom Dracula color palette to `tailwind.config.js`.
- Using **Vite** for the build tool.
- Using **Vanilla TypeScript** to avoid framework overhead.
- Using **Vitest** for unit testing calculation logic.
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
index 99ea0b8..63e5a37 100644
--- a/memory-bank/progress.md
+++ b/memory-bank/progress.md
@@ -1,18 +1,19 @@
# Progress Tracking
## Milestones
-- [ ] Initial Environment & Docs Setup
-- [ ] Core Calculation Engine
-- [ ] Web UI & Integration
-- [ ] Final Build & Polish
+- [x] Initial Environment & Docs Setup
+- [x] Core Calculation Engine
+- [x] Web UI & Integration
+- [x] Final Build & Polish
+- [x] Firebase deployment
## Todo List
- [x] Create project structure
- [x] Initialize Memory Bank documents
-- [ ] Create Blueprint documents (PRD, Architecture)
-- [ ] Project setup (Vite, TS, Tailwind, Vitest)
-- [ ] Implement `src/calculator.ts`
-- [ ] Write tests in `src/calculator.test.ts`
-- [ ] Implement `index.html` UI
-- [ ] Implement `src/main.ts` glue code
-- [ ] Verify build output
+- [x] Create Blueprint documents (PRD, Architecture)
+- [x] Project setup (Vite, TS, Tailwind, Vitest)
+- [x] Implement `src/calculator.ts`
+- [x] Write tests in `src/calculator.test.ts`
+- [x] Implement `index.html` UI
+- [x] Implement `src/main.ts` glue code
+- [x] Verify build output
diff --git a/src/main.ts b/src/main.ts
index a474c34..4f07338 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -70,15 +70,15 @@ function updateResults() {
function setUnitStyles(unit: 'mm' | 'in') {
if (unit === 'in') {
- unitInBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
- unitInBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
- unitMmBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
- unitMmBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+ unitInBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitInBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground');
+ unitMmBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitMmBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground');
} else {
- unitMmBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
- unitMmBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
- unitInBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
- unitInBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+ unitMmBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitMmBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground');
+ unitInBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitInBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground');
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index dca8ba0..57840ed 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,24 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ dracula: {
+ darker: '#21222c',
+ dark: '#282a36',
+ currentLine: '#44475a',
+ foreground: '#f8f8f2',
+ comment: '#6272a4',
+ cyan: '#8be9fd',
+ green: '#50fa7b',
+ orange: '#ffb86c',
+ pink: '#ff79c6',
+ purple: '#bd93f9',
+ red: '#ff5544',
+ yellow: '#f1fa8c',
+ }
+ }
+ },
},
plugins: [],
}
Gridfinity Spec Overrides - Standard: 42x42x7mm + Standard: 42x42x7mm
-
+
-
-
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index 1170181..5e4b8c0 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -16,6 +16,7 @@
- Setting up the Vite/TypeScript/Tailwind environment.
## Active Decisions
+- **Dark Mode Implementation**: Adopted a Dracula Midnight theme (`#21222c` background) as the primary interface style. Added custom Dracula color palette to `tailwind.config.js`.
- Using **Vite** for the build tool.
- Using **Vanilla TypeScript** to avoid framework overhead.
- Using **Vitest** for unit testing calculation logic.
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
index 99ea0b8..63e5a37 100644
--- a/memory-bank/progress.md
+++ b/memory-bank/progress.md
@@ -1,18 +1,19 @@
# Progress Tracking
## Milestones
-- [ ] Initial Environment & Docs Setup
-- [ ] Core Calculation Engine
-- [ ] Web UI & Integration
-- [ ] Final Build & Polish
+- [x] Initial Environment & Docs Setup
+- [x] Core Calculation Engine
+- [x] Web UI & Integration
+- [x] Final Build & Polish
+- [x] Firebase deployment
## Todo List
- [x] Create project structure
- [x] Initialize Memory Bank documents
-- [ ] Create Blueprint documents (PRD, Architecture)
-- [ ] Project setup (Vite, TS, Tailwind, Vitest)
-- [ ] Implement `src/calculator.ts`
-- [ ] Write tests in `src/calculator.test.ts`
-- [ ] Implement `index.html` UI
-- [ ] Implement `src/main.ts` glue code
-- [ ] Verify build output
+- [x] Create Blueprint documents (PRD, Architecture)
+- [x] Project setup (Vite, TS, Tailwind, Vitest)
+- [x] Implement `src/calculator.ts`
+- [x] Write tests in `src/calculator.test.ts`
+- [x] Implement `index.html` UI
+- [x] Implement `src/main.ts` glue code
+- [x] Verify build output
diff --git a/src/main.ts b/src/main.ts
index a474c34..4f07338 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -70,15 +70,15 @@ function updateResults() {
function setUnitStyles(unit: 'mm' | 'in') {
if (unit === 'in') {
- unitInBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
- unitInBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
- unitMmBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
- unitMmBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+ unitInBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitInBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground');
+ unitMmBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitMmBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground');
} else {
- unitMmBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
- unitMmBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
- unitInBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
- unitInBtn.classList.add('text-slate-600', 'hover:text-slate-900');
+ unitMmBtn.classList.add('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitMmBtn.classList.remove('text-dracula-comment', 'hover:text-dracula-foreground');
+ unitInBtn.classList.remove('bg-dracula-purple', 'text-dracula-darker', 'shadow-sm');
+ unitInBtn.classList.add('text-dracula-comment', 'hover:text-dracula-foreground');
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index dca8ba0..57840ed 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,24 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ dracula: {
+ darker: '#21222c',
+ dark: '#282a36',
+ currentLine: '#44475a',
+ foreground: '#f8f8f2',
+ comment: '#6272a4',
+ cyan: '#8be9fd',
+ green: '#50fa7b',
+ orange: '#ffb86c',
+ pink: '#ff79c6',
+ purple: '#bd93f9',
+ red: '#ff5544',
+ yellow: '#f1fa8c',
+ }
+ }
+ },
},
plugins: [],
}
-
-
+
+
-
-
+
+
-
-
+
+
Adjust these to scale the system for an exact fit in your drawer.
+Adjust these to scale the system for an exact fit in your drawer.