]> Piment Noir Git Repositories - e-mobility-charging-stations-simulator.git/commit
feat(ui): apply Tokyo Night Storm theme with semantic CSS tokens
authorJérôme Benoit <jerome.benoit@sap.com>
Wed, 18 Mar 2026 23:14:13 +0000 (00:14 +0100)
committerJérôme Benoit <jerome.benoit@sap.com>
Wed, 18 Mar 2026 23:16:00 +0000 (00:16 +0100)
commit9cc3a26a490813d549b4c3c0f6e86d21957f6701
treeac052a2c2b52ace10e13c304d007d57c3a9cc5ce
parent730eba4760715c762f3a629e868c8a4beb3b0e21
feat(ui): apply Tokyo Night Storm theme with semantic CSS tokens

Add theme.css with two-layer token system: primitive tokens from
the official Tokyo Night Storm palette, semantic tokens mapping UI
roles to primitives. All components use semantic tokens exclusively.

Replace all hardcoded colors across 13 Vue components. Theme native
HTML elements (button, input, select, a, headings) globally. Toggle
button pressed state uses palette-semantic active bg + accent border
+ inset shadow for clear visual distinction.

Remove dead code: simulatorButtonClass computed and associated CSS
classes that duplicated global button styles.
ui/web/src/App.vue
ui/web/src/assets/theme.css [new file with mode: 0644]
ui/web/src/components/buttons/ToggleButton.vue
ui/web/src/components/charging-stations/CSData.vue
ui/web/src/components/charging-stations/CSTable.vue
ui/web/src/main.ts
ui/web/src/views/ChargingStationsView.vue