From 1a8b129251bec80a3dc85b79c0587895ef401eda Mon Sep 17 00:00:00 2001 From: Mark Higham Date: Fri, 17 May 2024 15:27:16 +0100 Subject: [PATCH] chore(Tokens): Export individual tokens (#3803) --- packages/design-tokens/src/index.ts | 28 ++++++++++++++++++- .../src/tokens/DesignSystemPalette.tsx | 4 +-- .../src/tokens/ElevatedPanel.tsx | 8 ++---- .../src/tokens/SpacingScaleTable.tsx | 4 +-- .../src/tokens/TypographyTable.tsx | 4 +-- .../src/tokens/colors.mdx | 3 +- .../src/tokens/spacing.mdx | 3 +- .../src/tokens/typography.mdx | 4 +-- 8 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/design-tokens/src/index.ts b/packages/design-tokens/src/index.ts index 607f38962e..97aaa5cf3e 100644 --- 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 index 6f4e852f4a..4c0d65f847 100644 --- 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 index 9b927453c3..20752f2fd1 100644 --- 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 index cd9167a9cb..a657ea6ff0 100644 --- 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 index 28fb8eb781..6c67a93d2a 100644 --- 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 index 6c5383376a..47bcd291e9 100644 --- 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 - 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 index 692032c3b4..2e8c5e01ba 100644 --- 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 { /* 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 index 313e1764a0..525f2acb9e 100644 --- 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 - A contrived example of using fontSize