feat(tabs): updated to use correct new tokens

[harpalsingh]

Proposed behaviour

The colors in the new tabs are hard coded netrual grey values, we will update this to use the correct new token values.

Current behaviour

Current visual

Current code example as purely a hex code:

border-color: #8b8b8bff;

Updated visual

You can see the updated visual with the design tokens applied. The background is also updated to reflect the most common background they will be used on.

Now you will see tokens applied, e.g

border-color: var(--tab-border-active-alt);

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Testing instructions

Simply go to the Tabs story and expect to see the updated visual.

[designerlisa]

@harpalsingh Thanks, looks good
!