chore(Tokens): Export individual tokens (#3803)

Royal-Navy · May 17, 2024 · 1a8b129 · 1a8b129
1 parent 88407bf
commit 1a8b129
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 23 deletions.
diff --git a/packages/design-tokens/src/index.ts b/packages/design-tokens/src/index.ts
@@ -1,9 +1,35 @@
+import selectors from './selectors'
+
 export * from './types'
 export * from './flat'
 
 export { getTheme } from './getters'
 
-export { default as selectors } from './selectors'
+export { selectors }
 
 export { default as lightTheme } from './themes/light'
 export { default as darkTheme } from './themes/dark'
+
+const {
+  animation,
+  breakpoint,
+  color,
+  fontSize,
+  mediaQuery,
+  mq,
+  shadow,
+  spacing,
+  zIndex,
+} = selectors
+
+export {
+  animation,
+  breakpoint,
+  color,
+  fontSize,
+  mediaQuery,
+  mq,
+  shadow,
+  spacing,
+  zIndex,
+}
diff --git a/packages/react-component-library/src/tokens/DesignSystemPalette.tsx b/packages/react-component-library/src/tokens/DesignSystemPalette.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ColorGroup, selectors } from '@royalnavy/design-tokens'
+import { color, ColorGroup } from '@royalnavy/design-tokens'
 
 import {
   StyledDescription,
@@ -10,8 +10,6 @@ import {
 } from './partials'
 import { getColorDescription, getColors } from './utils'
 
-const { color } = selectors
-
 type PaletteProps = {
   group: ColorGroup
 }

diff --git a/packages/react-component-library/src/tokens/ElevatedPanel.tsx b/packages/react-component-library/src/tokens/ElevatedPanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { selectors } from '@royalnavy/design-tokens'
+import { shadow, spacing } from '@royalnavy/design-tokens'
 
 import styled from 'styled-components'
 
@@ -13,8 +13,6 @@ import {
 } from './partials'
 import { getShadowDescription, getShadows } from './utils'
 
-const { shadow, spacing } = selectors
-
 const StyledContainer = styled.div`
   padding-bottom: ${spacing('13')};
 `
@@ -44,9 +42,7 @@ export const ElevationTable = () => {
 export const UsageText = `
 import styled from 'styled-components'
 
-import { selectors } from '@royalnavy/design-tokens'
-
-const { shadow } = selectors
+import { shadow } from '@royalnavy/design-tokens'
 
 export const StyledPanel = styled.div\`
   box-shadow: \${ shadow('1') })};

diff --git a/packages/react-component-library/src/tokens/SpacingScaleTable.tsx b/packages/react-component-library/src/tokens/SpacingScaleTable.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { selectors } from '@royalnavy/design-tokens'
-
-const { spacing, fontSize, color } = selectors
+import { spacing, fontSize, color } from '@royalnavy/design-tokens'
 
 const StyledSwatch = styled.span<{ $backgroundColor: string }>`
   background-color: ${({ $backgroundColor }) => $backgroundColor ?? 'none'};

diff --git a/packages/react-component-library/src/tokens/TypographyTable.tsx b/packages/react-component-library/src/tokens/TypographyTable.tsx
@@ -1,10 +1,8 @@
 import React from 'react'
-import { selectors } from '@royalnavy/design-tokens'
+import { fontSize, color, spacing } from '@royalnavy/design-tokens'
 import styled from 'styled-components'
 import { getTypographySizes } from './utils'
 
-const { fontSize, color, spacing } = selectors
-
 const tokens = getTypographySizes()
 
 const StyledRow = styled.div`

diff --git a/packages/react-component-library/src/tokens/colors.mdx b/packages/react-component-library/src/tokens/colors.mdx
@@ -78,8 +78,7 @@ categorisation and data visualisation, but they don’t have any state associate
 ---
 
 ## Usage
-<Source dark code={`import { selectors } from '@royalnavy/design-tokens'
-const { color } = selectors
+<Source dark code={`import { color } from '@royalnavy/design-tokens'
 
 <div style={{ backgroundColor: color('action', '400') }}>
   Hello colo(u)rful World!

diff --git a/packages/react-component-library/src/tokens/spacing.mdx b/packages/react-component-library/src/tokens/spacing.mdx
@@ -61,9 +61,8 @@ The Spacing Scale values, much like the Typography Scale values, doesn't increas
 ## Usage
 
 <Source dark code={`# Typescript usage of spacing
-import { selectors } from '@royalnavy/design-tokens'
+import { spacing } from '@royalnavy/design-tokens'
 
-const { spacing } = selectors
 
 export const ExampleComponent = () => {
   /*  This is a contrived example to show individual usage

diff --git a/packages/react-component-library/src/tokens/typography.mdx b/packages/react-component-library/src/tokens/typography.mdx
@@ -29,9 +29,7 @@ sans-serif;
 
 ## Usage
 
-<Source dark code={`import { selectors } from '@royalnavy/design-tokens'
-
-const { fontSize } = selectors
+<Source dark code={`import { fontSize } from '@royalnavy/design-tokens'
 
 <p style={{ fontSize: fontSize('xl') }}>
   A contrived example of using fontSize