Export selector functions directly in @royalnavy/design-tokens

[jpveooys]

Description

Currently to use the selectors in the Design Tokens library you have to import selectors and destructure it:

import { selectors } from '@royalnavy/design-tokens'

const { color } = selectors

I don't know the background to why it was done in this way, but it'd be helpful in general for it to be a bit more ergonomic to use the tokens.

One change towards that would be to make it possible to import the selector functions directly:

import { color } from '@royalnavy/design-tokens'

(Having to destructure selectors is a bit tedious, and also stops IDEs from being able to suggest missing imports.)

[m7kvqbe1]

Sounds good - I don't think that much thought went into it at the time from a DX perspective as they'd not yet been used.

We'll continue to expose the selectors object to preserve backwards compatibility.