feat: modernize UI with MUI and ODE tokens

[Bahati308]

closes #9

[IamLRBA]

Nice going @Bahati308, this is actually one of the deliverables of the unified design sytem for ODE and comes at a perfect time. The theme integration, accessibility improvements (48dp touch targets), and component updates all look good.

Just One Issue: I think the local tokens.ts file you created duplicates token values. If @ode/tokens is already in package.json of `formulus-formplayer, we should import directly from the original tokens package instead.

Suggested fix:
Maybe we can replace the local tokens.ts file with direct imports from the package:

In theme.ts, change from:
import { tokens } from './tokens';
To:
import tokens from '@ode/tokens/dist/js/tokens';

This keeps tokens in sync automatically from the original source and avoids duplication. Create React App should handle imports from node_modules after npm install.

Lastly, we might also consider adding the CSS import to index.css for CSS variable support:
@import '@ode/tokens/dist/css/tokens.css';

Thanks again for the improvements mate!

[IamLRBA]

I really love this initiative you have put in this!

[Bahati308]

Nice going @Bahati308, this is actually one of the deliverables of the unified design sytem for ODE and comes at a perfect time. The theme integration, accessibility improvements (48dp touch targets), and component updates all look good.

Just One Issue: I think the local tokens.ts file you created duplicates token values. If @ode/tokens is already in package.json of `formulus-formplayer, we should import directly from the original tokens package instead.

Suggested fix: Maybe we can replace the local tokens.ts file with direct imports from the package:

In theme.ts, change from: import { tokens } from './tokens'; To: import tokens from '@ode/tokens/dist/js/tokens';

This keeps tokens in sync automatically from the original source and avoids duplication. Create React App should handle imports from node_modules after npm install.

Lastly, we might also consider adding the CSS import to index.css for CSS variable support: @import '@ode/tokens/dist/css/tokens.css';

Thanks again for the improvements mate!

thanks for the insight @IamLRBA , lemme improve accordingly.

[IamLRBA]

@Bahati308, based on the suggestion, I made some changes please have a look.

Summary

I fixed the token duplication issue by replacing the local tokens.ts file with direct imports from the @ode/tokens package. This ensures design tokens stay in sync automatically with the centralized design system.

Changes Made

• Removed duplicate tokens.ts - Eliminated 170 lines of token definitions
• Added @ode/tokens dependency - Now using the official design tokens package
• Created tokens-adapter.ts - Bridges structure differences between the package export and theme requirements
• Updated theme.ts - Changed import to use the new adapter instead of local tokens

Setup Steps

After pulling these changes, run the following to update package-lock.json and install dependencies:

# Build the tokens package first
cd packages/tokens
npm install
npm run build

# Then install dependencies in formulus-formplayer (this will auto-generate package-lock.json)
cd ../../formulus-formplayer
npm install

# Start the development server
npm start

The package-lock.json will be automatically generated/updated when you run npm install in the formulus-formplayer directory.

Benefits

• Single source of truth - Tokens are now managed in one place (packages/tokens)
• Automatic sync - Changes to tokens automatically propagate to formplayer
• No duplication - Removed duplicate code

---

Note: I tested this works and the development server started successfully showing the use of token for the UI

[Bahati308]

Screen.Recording.2025-12-14.at.20.22.34.mov

this is super dope, @IamLRBA, even Formulus can testify

[IamLRBA]

I see the tokens are being reflected in Formulus as well
Nice going @Bahati308