Improve visual enum system

[thibaultzanini]

Improve visual enum system for UI component styling consistency.

New Visual Enums:

• VisualOrientation: horizontal, vertical layouts
• VisualPosition: start, end positioning
• VisualShape: rectangle, rounded, pill shapes
• VisualSize: small, medium, large sizing
• VisualVariant: outlined, plain styling variants

Features:

• Each enum includes both value constants and corresponding CSS class names
• Refactor with existing Button component for orientation and position styling

[marchant]

Added comments

[marchant]

I don't think Shape makes sense. "Roundness" is the most plain language I can think of, "curvature" could work too, though it's more used for line, paths, and in typography.

I think roundness should be one of those "high level" lever in a Visual Style and be a value from 0 to 10 or 100? 0: sharp angles, Max, half circle.

There's 2d surface roundness, also known as corner radius in a more technical way, but there's also 3d roundness:

• Edge Rounding (Fillet): Refers to rounding the edges of a 3D object. This is often called a "fillet" in 3D modeling software (like Blender, Fusion 360, or SolidWorks).
  • Example: Rounding the sharp edges of a cube to make it look softer.
• Surface Curvature: Describes how a surface bends in 3D space. It can be uniform (like a sphere) or vary across the surface.
  • Example: The smooth, rounded surface of a car body or a product design.
• Chamfer: While not roundness, it’s related—it’s a beveled edge, often used for both functional and aesthetic purposes.

3D adds depth, so roundness affects both edges and surfaces.

A flat rounded button would have a rounded surface bo a sharp 3D roundness. But an Aqua button look / pill would have both 2D and 3D roundness

[marchant]

I don't thing variant as proposed here makes sense either,