feat: classic styled components

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx

@@ -29,6 +29,7 @@ export function CompareOptions(props: FlexProps) {
       </Text>
 
       <SegmentedControl.Root
+        variant="classic"
         size="1"
         value={`${relativeAgainst}`}
         onValueChange={(value) => {

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/HullTraverseVisualizer/index.tsx

@@ -105,7 +105,7 @@ export function HullTraverseVisualizer({ stats }: HullTraverseVisualizerProps) {
           onClick={() => setRotateHull((state) => !state)}
           style={{ cursor: 'pointer' }}
         >
-          <Checkbox checked={rotateHull} />
+          <Checkbox variant="classic" checked={rotateHull} />
           <Text size="2">
             {strings.website.tools.tankopedia.visualizers.rotator.hull}
           </Text>
@@ -117,7 +117,7 @@ export function HullTraverseVisualizer({ stats }: HullTraverseVisualizerProps) {
           onClick={() => setRotateTurret((state) => !state)}
           style={{ cursor: 'pointer' }}
         >
-          <Checkbox checked={rotateTurret} />
+          <Checkbox variant="classic" checked={rotateTurret} />
           <Text size="2">
             {strings.website.tools.tankopedia.visualizers.rotator.turret}
           </Text>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -305,6 +305,7 @@ export function Characteristics() {
                   }
                 </Text>
                 <Slider
+                  variant="classic"
                   key={penetrationDistance}
                   min={0}
                   max={500}
@@ -319,6 +320,7 @@ export function Characteristics() {
                   }}
                 />
                 <TextField.Root
+                  variant="classic"
                   style={{ width: 64 }}
                   ref={penetrationDistanceInput}
                   defaultValue={penetrationDistance}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx

@@ -102,7 +102,7 @@ export function CustomShellButton() {
                     });
                   }}
                 >
-                  <Select.Trigger />
+                  <Select.Trigger variant="classic" />
 
                   <Select.Content>
                     <Select.Item value={`${ShellType.AP}`}>
@@ -129,6 +129,7 @@ export function CustomShellButton() {
                   }
                 </Text>
                 <TextField.Root
+                  variant="classic"
                   style={{ maxWidth: '6rem' }}
                   defaultValue={customShell.caliber}
                   type="number"
@@ -164,6 +165,7 @@ export function CustomShellButton() {
                   }
                 </Text>
                 <TextField.Root
+                  variant="classic"
                   style={{ maxWidth: '6rem' }}
                   defaultValue={customShell.penetration.near}
                   type="number"
@@ -216,6 +218,7 @@ export function CustomShellButton() {
                         ])}
                       </Text>
                       <Slider
+                        variant="classic"
                         min={0}
                         max={90}
                         step={Number.EPSILON}
@@ -246,6 +249,7 @@ export function CustomShellButton() {
                         ])}
                       </Text>
                       <Slider
+                        variant="classic"
                         min={0}
                         max={90}
                         step={Number.EPSILON}
@@ -265,6 +269,7 @@ export function CustomShellButton() {
                 <Flex align="center" justify="between" gap="4">
                   <Text>Explosion radius</Text>
                   <TextField.Root
+                    variant="classic"
                     style={{ maxWidth: '6rem' }}
                     defaultValue={customShell.explosion_radius ?? 0}
                     type="number"

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/QuickInputs/index.tsx

@@ -77,6 +77,7 @@ export function QuickInputs() {
       className="quick-inputs"
     >
       <TextField.Root
+        variant="classic"
         size="1"
         radius="full"
         style={{ flex: 1, textAlign: 'right' }}
@@ -117,6 +118,7 @@ export function QuickInputs() {
       </TextField.Root>
 
       <TextField.Root
+        variant="classic"
         size="1"
         radius="full"
         style={{ flex: 1, textAlign: 'right' }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx

@@ -177,7 +177,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             <Text size="1">
               {strings.website.tools.tankopedia.sandbox.static.edit.label}
             </Text>
-            <Checkbox size="2" checked={editStatic} />
+            <Checkbox variant="classic" size="2" checked={editStatic} />
           </Flex>
         </Flex>
 

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -345,7 +345,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
               });
             }}
           >
-            <Checkbox checked={advancedHighlighting} />
+            <Checkbox variant="classic" checked={advancedHighlighting} />
             <Text color="gray" size="2">
               {strings.website.tools.tankopedia.sandbox.dynamic.advanced}
             </Text>
@@ -400,6 +400,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
 
         <Flex gap="3" align="center" mt="2">
           <SegmentedControl.Root
+            variant="classic"
             value={`${display}`}
             onValueChange={(value) => {
               mutateTankopediaEphemeral((draft) => {