Feat: add stroke size CSS variables for consistency and update usages

[Cata1989]

Describe the feature

To enhance the consistency of our project's design elements, we need to introduce a standardized stroke size across the repository.

Describe the use case for this feature

Standardizing stroke sizes ensures a consistent and cohesive visual style across the application. This improves user experience by maintaining uniformity in UI elements like icons and borders. Additionally, using variables for stroke sizes simplifies maintenance and allows for easy updates, enhancing the scalability of our design system.

Describe the solution you'd like

Define Stroke Size Variables:

Add new variables for stroke sizes in the appropriate configuration or style file (e.g., variables.scss, config.js, etc.).
Ensure these variables cover the range of stroke sizes used throughout the project.

Update Existing Stroke Sizes:

Identify all instances in the codebase where stroke sizes are hardcoded.
Replace these hardcoded values with the newly defined stroke size variables.
Testing:

After updating the stroke sizes, thoroughly test the application to ensure that the changes do not negatively impact the UI/UX.

Pay special attention to elements that heavily rely on stroke sizes, such as icons, borders, and shapes.

Documentation:

Update any relevant documentation to reflect the new stroke size variables.
Provide examples of how to use these variables in the documentation.

Related Code

No response

Additional Information

No response