mi6
Remove some of the global css tokens that exist in our css
Summary
The ic-ui-kit features several top-level "global" css tokens in the color-mode.css file. These don't exist in Figma and could be removed to further bring the two in line.
💬 Description
The top-level of the color-mode.css features several global tokens that were originally intended to make it easy to switch between light and dark mode. E.G: We could reference --ic-color-text-primary for all primary text in components, rather than needing to specify -light or -dark.
However, the way the Figma colour tokens have evolved means that each component references two distinct semantic tokens for light and dark mode, so these global tokens are not used within Figma and are therefore creating further seperation between design and dev. This was a particular issue when updating certain component colours. After the designs had changed, updating the colours meant swapping out some of these "global" tokens for the correct semantic ones, which created confusion trying to find global tokens held which values, etc.
This also introduces an issue of naming conventions. For example, Figma's primary text names are primary and primary-dark. In the css, because the global token takes the name of one of these, the light mode token is named primary-light, which creates further confusion when trying to find the correct token to use.
💰 Use value
By following the Figma designs and removing these global tokens in favour of referencing semantic tokens, it will make the ui-kit more maintainable and cleaner in the future, and help close the separation between design and dev.
It would also greatly reduce the size of our stylesheets that users need to import when using our components.
Additional info
This may constitute a breaking change, if we think users have pulled these tokens into their own applications. Whilst we haven't advertised them anywhere, its possible people may have taken them from our source code or component styles.
Will also need to account for future discussions around how this affects any future theming features for our components (would users provide their own values for these global tokens or supply them at a more granular level, and if in that case would we use these new global tokens in our own components)
