[dark mode] Rename design tokens to more appropriately match CSS mappings

[gd2910]

Summary of the bug

-- Should be completed after all DM component work has been completed

Some tokens moved over from design do not accurately reflect their purpose e.g. --ic-button-secondary-background-pressed-active should semantically be --ic-button-secondary-background-active --ic-color-background-active-hover-light -> --ic-color-background-hover-light

Most discrepancies are due to 'active' being used as 'not disabled' and 'pressed' being used instead of 'active'.

Ensure that variants of components have naming convention confluence

(List is incomplete at time of writing)

Components

• [ ] Accordion
• [ ] Alert
• [ ] Badge
• [ ] Breadcrumbs
• [ ] Buttons
• [ ] Cards
• [ ] Dropdowns
• [ ] Forms
• [ ] Headers
• [ ] Links
• [ ] Modals
• [ ] Notifications
• [ ] Pagination
• [ ] Panels
• [ ] Tables
• [ ] Tabs
• [ ] Tooltips

[GCHQ-Developer-741]

Within status tag the tokens status-tag-text & status-tag-text-inverted perform the dark mode switching by actually changing the underlying token based on the theme, rather than using a single token with two colour modes. Within css, it has been implemented to perform colour switching this way, Figma should be updated to change these existing tokens to something like status-tag-filled-text and status-tag-outlined-text to better signal their purpose and enable smoother colour switching.