feat(ui): restyle tabs field with design tokens to match v4 design (#16428)

## Summary

Migrates the Tabs field component to use design tokens and updates
visual styling to match the v4 design system.

The tab indicator is now a 3px rounded pill that straddles the border
line, with distinct states for active (blue), hover (translucent), and
error (red). Typography uses `--text-body-medium` tokens, and spacing
uses `--spacer-*` variables throughout.

Also fixes ErrorPill to use `--radius-medium` (rounded square) instead
of `--radius-full` (circle).

**Ref:**
https://app.asana.com/1/10497086658021/project/1213409914712008/task/1214061555627422?focus=true

Co-authored-by: Copilot <copilot@github.com>

Author: JarrodMFlesch

packages/ui/src/elements/ErrorPill/index.css

@@ -19,15 +19,7 @@
 
   .error-pill--fixed-width {
     width: var(--spacer-3);
-    height: var(--spacer-3);
-    border-radius: var(--radius-full);
-    position: relative;
-  }
-
-  .error-pill__count {
-    letter-spacing: 0.5px;
-    margin-left: 0.5px;
     padding: 0;
-    border-radius: var(--radius-full);
+    position: relative;
   }
 }

packages/ui/src/fields/Tabs/Tab/index.css

@@ -1,44 +1,47 @@
 @layer payload-default {
   .tabs-field__tab-button {
     display: flex;
-    padding-bottom: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1) var(--spacer-2) var(--spacer-2-5);
     margin: 0;
-    margin-inline-end: 1.25rem;
     cursor: pointer;
-    opacity: 0.5;
     position: relative;
     white-space: nowrap;
     flex-shrink: 0;
-    gap: 0.625rem;
     outline: none;
-
-    &:last-child {
-      margin: 0;
-    }
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    color: var(--text-default-secondary);
 
     &:after {
-      content: ' ';
+      content: '';
       position: absolute;
-      right: 0;
+      left: var(--spacer-2);
+      right: var(--spacer-2);
       bottom: -1px;
-      left: 0;
-      height: 1px;
-      background: var(--text-default);
+      height: 3px;
+      background: var(--icon-brand);
+      border-radius: var(--radius-full);
       opacity: 0;
+      z-index: 1;
     }
 
     &:hover {
-      opacity: 0.75;
-
       &:after {
-        opacity: 0.2;
+        background: var(--bg-default-tertiary);
+        opacity: 1;
       }
     }
 
     &:focus-visible {
-      border: 1px solid var(--border-selected-strong);
-      border-radius: var(--radius-medium, 0.3125rem);
-      background: var(--bg-default-secondary);
+      outline: 1px solid var(--border-selected-default);
+      outline-offset: -1px;
+      border-radius: var(--radius-medium);
     }
   }
 
@@ -47,34 +50,35 @@
   }
 
   .tabs-field__tab-button--active {
-    opacity: 1 !important;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    color: var(--text-default-default);
 
     &:after {
-      opacity: 1 !important;
-      height: 2px;
+      background: var(--icon-brand);
+      opacity: 1;
     }
-  }
 
-  .tabs-field__tab-button__description {
-    margin-bottom: var(--spacer-2);
+    &:hover:after {
+      background: var(--icon-brand);
+    }
   }
 
   .tabs-field__tab-button--has-error {
     color: var(--text-danger-default);
 
     &:after {
-      background: var(--text-danger-default);
+      background: var(--border-danger-strong);
+      opacity: 1;
+    }
+
+    &:hover:after {
+      background: var(--border-danger-strong);
     }
   }
 
   @media (max-width: 768px) {
     .tabs-field__tab-button {
-      margin: 0 0.9375rem 0 0;
-      padding-bottom: 0.625rem;
-
-      &:last-child {
-        margin: 0;
-      }
+      padding-bottom: var(--spacer-2);
     }
   }
 }

packages/ui/src/fields/Tabs/index.css

@@ -1,6 +1,6 @@
 @layer payload-default {
   .tabs-field {
-    margin-top: 2.5rem;
+    margin-top: var(--spacer-6);
     margin-left: calc(var(--gutter-h) * -1);
     margin-right: calc(var(--gutter-h) * -1);
   }
@@ -15,34 +15,47 @@
   }
 
   .tabs-field--within-collapsible {
-    margin: 0 calc(1.25rem * -1);
+    margin: 0 calc(var(--spacer-4) * -1);
 
     .tabs-field__content-wrap {
-      padding-left: 1.25rem;
-      padding-right: 1.25rem;
+      padding-left: var(--spacer-4);
+      padding-right: var(--spacer-4);
     }
 
     .tabs-field__tabs {
       &:before,
       &:after {
         content: ' ';
         display: block;
-        width: 1.25rem;
+        width: var(--spacer-4);
       }
     }
   }
 
   .tabs-field__tabs-wrap {
     overflow-x: auto;
     overflow-y: hidden;
-    margin-bottom: 1.25rem;
+    margin-bottom: var(--spacer-2-5);
+    position: relative;
+    padding-bottom: 2px;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 2px;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--border-default-default);
+    }
   }
 
   .tabs-field__tabs {
-    border-bottom: 1px solid var(--border-subtle);
     display: inline-flex;
     min-width: 100%;
     vertical-align: bottom;
+    position: relative;
+    z-index: 1;
 
     &:before,
     &:after {

test/v4/collections/Tabs/index.ts

@@ -33,6 +33,7 @@ const TabsFields: CollectionConfig = {
               name: 'featuredImage',
               type: 'text',
               label: 'Featured Image',
+              required: true,
             },
           ],
         },
@@ -51,6 +52,97 @@ const TabsFields: CollectionConfig = {
             },
           ],
         },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'publishedAt',
+              type: 'date',
+              label: 'Published At',
+            },
+          ],
+        },
+        {
+          label: 'Analytics',
+          fields: [
+            {
+              name: 'viewCount',
+              type: 'number',
+              label: 'View Count',
+            },
+          ],
+        },
+        {
+          label: 'Categories',
+          fields: [
+            {
+              name: 'category',
+              type: 'text',
+              label: 'Category',
+            },
+          ],
+        },
+        {
+          label: 'Author Info',
+          fields: [
+            {
+              name: 'authorName',
+              type: 'text',
+              label: 'Author Name',
+            },
+          ],
+        },
+        {
+          label: 'Related Posts',
+          fields: [
+            {
+              name: 'relatedPosts',
+              type: 'text',
+              label: 'Related Posts',
+            },
+          ],
+        },
+        {
+          label: 'Comments',
+          fields: [
+            {
+              name: 'commentsEnabled',
+              type: 'checkbox',
+              label: 'Comments Enabled',
+            },
+          ],
+        },
+        {
+          label: 'Social Sharing',
+          fields: [
+            {
+              name: 'socialImage',
+              type: 'text',
+              label: 'Social Image',
+            },
+          ],
+        },
+        {
+          label: 'Advanced Options',
+          fields: [
+            {
+              name: 'customCSS',
+              type: 'textarea',
+              label: 'Custom CSS',
+            },
+          ],
+        },
+        {
+          label: 'Permissions',
+          fields: [
+            {
+              name: 'visibility',
+              type: 'select',
+              label: 'Visibility',
+              options: ['public', 'private', 'draft'],
+            },
+          ],
+        },
       ],
     },
   ],