feat: classic styled components

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