feat: classic styled components

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -36,6 +36,7 @@ export function ArmorPlateDisplay() {
         style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
       >
         <Card
+          variant="classic"
           mb="4"
           style={{
             whiteSpace: 'nowrap',
@@ -72,6 +73,7 @@ export function ArmorPlateDisplay() {
             {highlightArmor.editingPlate && (
               <Flex gap="2" align="center">
                 <TextField.Root
+                  variant="classic"
                   style={{ width: 96 }}
                   mt="2"
                   ref={input}

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -115,7 +115,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
   const inTitleColor = shotStatusColors[shot.in.status];
 
   return (
-    <Card style={{ width: 300 }} {...props}>
+    <Card variant="classic" style={{ width: 300 }} {...props}>
       <Flex direction="column" gap="2">
         <Flex direction="column" gap="1">
           <Text color={inTitleColor} weight="bold">

packages/website/src/components/Compare/Controls.tsx

@@ -107,6 +107,7 @@ export function Controls({
       </Button>
 
       <SegmentedControl.Root
+        variant="classic"
         value={deltaMode}
         onValueChange={(value) => {
           mutateComparePersistent((draft) => {

packages/website/src/components/Embeds/Boolean.tsx

@@ -7,7 +7,7 @@ export function Boolean({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Switch
-      variant="soft"
+      variant="classic"
       checked={EmbedState.use((state) => state[configKey] as boolean)}
       onCheckedChange={() => {
         mutateEmbedState((draft) => {

packages/website/src/components/Embeds/ColorControllerRaw.tsx

@@ -25,7 +25,7 @@ export function ColorControllerRaw({
         }}
       />
       <Slider
-        variant="soft"
+        variant="classic"
         min={0}
         max={255}
         value={[alpha]}

packages/website/src/components/Embeds/Enum.tsx

@@ -25,7 +25,8 @@ export function Enum({
         });
       }}
     >
-      <Select.Trigger />
+      <Select.Trigger variant="classic" />
+
       <Select.Content>
         {config.options.map((option) => (
           <Select.Item key={option.value} value={option.value}>

packages/website/src/components/Embeds/GenerateURL.tsx

@@ -92,6 +92,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           </Flex>
 
           <TextField.Root
+            variant="classic"
             mt="4"
             style={{ width: '20rem' }}
             placeholder={strings.website.common.player_search.hint}

packages/website/src/components/Embeds/Import.tsx

@@ -52,6 +52,7 @@ export function Import() {
 
       <Flex gap="2" mb="6">
         <TextField.Root
+          variant="classic"
           ref={importInput}
           placeholder={strings.website.tools.embed.configuration.import.hint}
           style={{ flex: 1 }}

packages/website/src/components/Embeds/Radius.tsx

@@ -7,7 +7,7 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={0}
       max={5}
       value={[

packages/website/src/components/Embeds/RichText.tsx

@@ -40,7 +40,7 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           <FontSizeIcon width="1em" height="1em" />
         </Text>
         <Slider
-          variant="soft"
+          variant="classic"
           min={1}
           max={9}
           value={[Number(state.size)]}
@@ -61,7 +61,7 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           <FontBoldIcon width="1em" height="1em" />
         </Text>
         <Slider
-          variant="soft"
+          variant="classic"
           min={0}
           max={radixTextWeights.length - 1}
           value={[radixTextWeights.indexOf(state.weight)]}

packages/website/src/components/Embeds/Size.tsx

@@ -7,7 +7,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={0}
       max={9}
       value={[

packages/website/src/components/Embeds/SizeWithout0.tsx

@@ -7,7 +7,7 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <Slider
-      variant="soft"
+      variant="classic"
       min={1}
       max={9}
       value={[

packages/website/src/components/Embeds/Slider.tsx

@@ -16,7 +16,7 @@ export function Slider({
 
   return (
     <RadixSlider
-      variant="soft"
+      variant="classic"
       min={config.min}
       max={config.max}
       value={[

packages/website/src/components/Embeds/TextController.tsx

@@ -7,6 +7,7 @@ export function TextController({ configKey }: EmbedPreviewControllerProps) {
 
   return (
     <TextField.Root
+      variant="classic"
       placeholder="Empty"
       value={EmbedState.use((state) => state[configKey] as string)}
       onChange={(event) => {

packages/website/src/components/Gallery/Search.tsx

@@ -12,6 +12,7 @@ export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) {
 
   return (
     <TextField.Root
+      variant="classic"
       disabled={skeleton}
       placeholder={strings.website.tools.gallery.search.hint}
       ref={input}

packages/website/src/components/LocaleSwitcher.tsx

@@ -38,7 +38,7 @@ export function LocaleSwitcher({ locale }: LocaleAcceptorProps) {
         }${rawPath}`;
       }}
     >
-      <Select.Trigger />
+      <Select.Trigger variant="classic" />
 
       <Select.Content>
         {SUPPORTED_LOCALES.map((locale) => (

packages/website/src/components/Party3.astro

@@ -31,8 +31,7 @@ const PUBLIC_GOOGLE_TAG_MANAGER_ID = assertSecret(
   src="https://tracking.tomato.gg/api/script.js"
   site-id="14"
   defer
-  type="text/partytown"
+  type="text/partytown"></script>
-/>
 
 {/* nitro ads */}
 {

packages/website/src/components/Performance/PlayerCountControl.tsx

@@ -23,7 +23,7 @@ export function PlayerCountControl() {
           });
         }}
       >
-        <Select.Trigger />
+        <Select.Trigger variant="classic" />
         <Select.Content>
           <Select.Item value="total">
             {strings.common.player_count_period.total}

packages/website/src/components/TankSearch/components/SearchBar.tsx

@@ -67,6 +67,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
     <Flex justify="center">
       <Flex gap="2" flexGrow="1">
         <TextField.Root
+          variant="classic"
           disabled={skeleton}
           defaultValue={tankFilters.search}
           style={{ flex: 1 }}

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) => {

packages/website/src/components/TierList/Row/components/Header.tsx

@@ -50,6 +50,7 @@ export function Header({ index }: HeaderProps) {
         <Popover.Content>
           <Flex direction="column" gap="2">
             <TextField.Root
+              variant="classic"
               placeholder="Tier name"
               ref={input}
               defaultValue={name}

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -30,6 +30,7 @@ function Content({ locale }: LocaleAcceptorProps) {
         <Flex align="center" gap="2" justify="between">
           <Text>{strings.website.settings.dev_mode}</Text>
           <Switch
+            variant="classic"
             checked={developerMode}
             onCheckedChange={(checked) =>
               appStore.setState({ developerMode: checked })

packages/website/src/pages/[...locale]/tools/session/_index.tsx

@@ -203,6 +203,7 @@ function Content() {
           </Flex>
 
           <TextField.Root
+            variant="classic"
             size="3"
             style={{
               position: 'relative',