diff --git a/change/@ni-nimble-components-0c56aa86-23c7-4259-abc3-aaccccf9e8c6.json b/change/@ni-nimble-components-0c56aa86-23c7-4259-abc3-aaccccf9e8c6.json new file mode 100644 index 0000000000..d38bc158cc --- /dev/null +++ b/change/@ni-nimble-components-0c56aa86-23c7-4259-abc3-aaccccf9e8c6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Storybook updates for design token build changes", + "packageName": "@ni/nimble-components", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-tokens-09048a45-9290-4f9a-a5d8-940ddd6007a4.json b/change/@ni-nimble-tokens-09048a45-9290-4f9a-a5d8-940ddd6007a4.json new file mode 100644 index 0000000000..d44e543c4e --- /dev/null +++ b/change/@ni-nimble-tokens-09048a45-9290-4f9a-a5d8-940ddd6007a4.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "Refactor token build output. This removes some source files from the built package.", + "packageName": "@ni/nimble-tokens", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/theme-provider/tests/color.stories.ts b/packages/nimble-components/src/theme-provider/tests/color.stories.ts index 3958c6c3df..4652b4c362 100644 --- a/packages/nimble-components/src/theme-provider/tests/color.stories.ts +++ b/packages/nimble-components/src/theme-provider/tests/color.stories.ts @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/html'; import { html, repeat } from '@microsoft/fast-element'; -import nimbleColorsMapJson from '@ni/nimble-tokens/dist/styledictionary/properties/colors.json'; +import * as tokens from '@ni/nimble-tokens/dist/styledictionary/js/tokens'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import { controlLabelFont, controlLabelFontColor } from '../design-tokens'; @@ -9,12 +9,13 @@ interface NimbleColor { data: string; } -const nimbleBaseColors: NimbleColor[] = Object.entries( - nimbleColorsMapJson.color -).map(([key, valueObj]) => ({ - name: key, - data: valueObj.value -})); +const colorRegExp = /^#([0-9a-zA-Z]{6})$/; +const nimbleBaseColors: NimbleColor[] = Object.entries(tokens) + .filter(([_key, value]) => colorRegExp.test(value)) + .map(([key, value]) => ({ + name: key, + data: value + })); const styleMarkup = html`