Feat(web): Switch Breadcrumbs component to v3 design tokens #DS-1450

packages/web/src/scss/components/Breadcrumbs/_theme.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$breakpoints: tokens.$breakpoints;
+$breakpoints: global-tokens.$breakpoints;
 
-$typography: tokens.$body-small-text-regular;
-$color: tokens.$text-secondary-default;
+$typography: global-tokens.$body-4-regular;
+$color: var(--#{globals.$prefix}color-text-secondary);
 
-$gap-mobile-up: tokens.$space-300;
-$gap-tablet-up: tokens.$space-400;
+$gap-mobile-up: global-tokens.$space-300;
+$gap-tablet-up: global-tokens.$space-500;

packages/web/src/scss/components/index.scss

@@ -1,7 +1,8 @@
 // This code is commented out until we switch it to the new token system
 // @forward 'Accordion';
 // @forward 'Alert';
-// @forward 'Breadcrumbs';
+@forward 'Breadcrumbs';
+
 // @forward 'Button';
 // @forward 'Checkbox';
 @forward 'Collapse';

tests/e2e/demo-components-compare.spec.ts

@@ -8,7 +8,6 @@ import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from
 const IGNORED_TESTS: string[] = [
   'Accordion',
   'Alert',
-  'Breadcrumbs',
   'Button',
   'ButtonLink',
   'Checkbox',