chore: WDS fluid tokens config fine-tuning (#26533)

Closes #25686

app/client/packages/design-system/theming/src/token/src/defaultTokens.json

@@ -5,7 +5,7 @@
     "maxVw": 1920,
     "rootUnit": {
       "minV": 4,
-      "maxV": 4.4,
+      "maxV": 5,
       "minR": 1,
       "maxR": 1,
       "minN": 1,
@@ -14,13 +14,13 @@
       "stepsDown": 0
     },
     "spacing": {
-      "minV": 8,
-      "maxV": 8.8,
+      "minV": 4,
+      "maxV": 6,
       "minR": 2,
       "maxR": 3,
       "minN": 3,
       "maxN": 3,
-      "stepsUp": 6,
+      "stepsUp": 8,
       "stepsDown": 0
     },
     "typography": {

app/client/packages/design-system/widgets/src/components/Button/src/index.styled.tsx

@@ -75,7 +75,7 @@ export const StyledButton = styled(HeadlessButton)<StyledButtonProps>`
   font-family: inherit;
   border-style: solid;
   border-width: var(--border-width-1);
-  padding-inline: var(--spacing-4);
+  padding-inline: var(--spacing-5);
   block-size: var(--sizing-8);
   min-inline-size: var(--sizing-8);
   border-radius: var(--border-radius-1);
@@ -120,8 +120,6 @@ export const StyledButton = styled(HeadlessButton)<StyledButtonProps>`
     display: flex;
     justify-content: center;
     align-items: center;
-    height: var(--sizing-4);
-    width: var(--sizing-4);
   }
 
   /**

app/client/packages/design-system/widgets/src/components/Tooltip/src/index.styled.tsx

@@ -13,7 +13,7 @@ export const StyledTooltipContent = styled(
 )<StyledTooltipContentProps>`
   background-color: var(--color-bg-assistive);
   color: var(--color-fg-on-assistive);
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
   border-radius: var(--border-radius-1);
   z-index: var(--z-index-99);
 

app/client/packages/design-system/widgets/src/components/testing/ComplexForm.tsx

@@ -17,12 +17,12 @@ import {
 
 export const ComplexForm = () => {
   return (
-    <Flex direction="column" gap="spacing-6">
+    <Flex direction="column" gap="spacing-7">
       <Text variant="heading">Your order</Text>
 
       <Text>Choose your favorite dishes and place an order</Text>
 
-      <Flex direction="column" gap="spacing-4">
+      <Flex direction="column" gap="spacing-6">
         <ButtonGroup>
           <Button>Fast food</Button>
           <Button>Salads</Button>
@@ -51,7 +51,7 @@ export const ComplexForm = () => {
         </RadioGroup>
       </Flex>
 
-      <Flex gap="spacing-2">
+      <Flex gap="spacing-3">
         <TooltipRoot>
           <TooltipTrigger>
             <Button variant="outlined">Cancel</Button>

app/client/packages/design-system/widgets/src/styles/src/fieldStyles.ts

@@ -24,7 +24,7 @@ export const fieldStyles = css<FieldStylesProps>`
   & [data-field-label] {
     display: flex;
     align-items: center;
-    gap: var(--spacing-1);
+    gap: var(--spacing-2);
     height: fit-content;
     color: var(--color-fg);
     font-weight: ${({ isEmphasized }) => (isEmphasized ? "bold" : "normal")};