VIDSOL-260: Introduce semantic tokens

[OscarFava]

What is this PR doing?

This PR introduces a new folder with the semantic tokens

How should this be manually tested?

What are the relevant tickets?

A maintainer will add this ticket number.

Resolves VIDSOL-260

Checklist

[X] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

[Copilot]

Pull Request Overview

This PR introduces a comprehensive design token system for the frontend application, establishing standardized values for colors, typography, motion, shapes, elevation, and state across the user interface. The tokens are organized in a hierarchical structure and include a helper script to convert them to JSON format for integration with styling frameworks like Tailwind CSS.

• Implements semantic design tokens for colors, typography, motion, shapes, elevation, and interactive states
• Creates a modular token structure with TypeScript types for type safety
• Provides automated conversion to JSON format for external tooling integration

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/designTokens/tokens/typography/weight.ts	Defines font weight tokens (regular, medium, bold) with semantic naming
frontend/src/designTokens/tokens/typography/typography.ts	Aggregates typography-related tokens into a single module
frontend/src/designTokens/tokens/typography/typescale.ts	Establishes comprehensive type scale with font sizes, line heights, and weights
frontend/src/designTokens/tokens/typography/typeface.ts	Defines primary typeface token using Inter font family
frontend/src/designTokens/tokens/typography/index.ts	Exports typography tokens module
frontend/src/designTokens/tokens/state.ts	Defines opacity tokens for interactive states (hover, focus, pressed, disabled)
frontend/src/designTokens/tokens/shape.ts	Establishes border radius tokens for consistent corner rounding
frontend/src/designTokens/tokens/motion/motion.ts	Aggregates motion-related tokens (duration and easing)
frontend/src/designTokens/tokens/motion/index.ts	Exports motion tokens module
frontend/src/designTokens/tokens/motion/easing.ts	Defines timing functions for animations with cubic-bezier values
frontend/src/designTokens/tokens/motion/duration.ts	Establishes standardized animation duration tokens
frontend/src/designTokens/tokens/elevation.ts	Defines shadow tokens for creating depth hierarchy
frontend/src/designTokens/tokens/color.ts	Comprehensive color system with semantic color tokens
frontend/src/designTokens/index.ts	Main export for the design tokens system
frontend/src/designTokens/helpers/tokensToJson.ts	Utility script to convert tokens to JSON format for Tailwind integration
frontend/src/designTokens/designTokens.ts	Central aggregation of all design token categories
frontend/src/designTokens/designTokens.json	Generated JSON output for external tooling consumption

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[VZaphod]

This PR looks good but are you going to use all the semantics declared here? looks like there is more than needed right? Another concern is that maybe UI/UX team will come up with a different set of semantics, so should we may wait a bit for them to provide the final or quasi final tokens?