diff --git a/packages/styleguide/src/lib/Foundations/ColorMode/BackgroundAliasBug.stories.tsx b/packages/styleguide/src/lib/Foundations/ColorMode/BackgroundAliasBug.stories.tsx new file mode 100644 index 0000000000..2b1a498a71 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/ColorMode/BackgroundAliasBug.stories.tsx @@ -0,0 +1,54 @@ +import { Box, FlexBox, Markdown, Text } from '@skillsoft/gamut'; +import { Background, ColorMode } from '@skillsoft/gamut-styles'; +import type { Meta, StoryObj } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +/* + * Repro for GMT-1825. On a light core page, `` paints + * dark mode's primary (yellow) instead of the light mode's primary (hyper), + * because Background flips the color mode on the same element it paints and + * the alias resolves in the flipped mode. The fix is in gamut-styles + * `Background.tsx` (PR #51). On a fixed build, both boxes below are hyper. + */ +const meta: Meta = { + title: 'Foundations/ColorMode/Alias Background Bug', + component: Background, +}; + +export default meta; +type Story = StoryObj; + +const Swatch = ({ + bg, + label, +}: { + bg: ComponentProps['bg']; + label: string; +}) => ( + + + bg="{bg}" + + {label} + +); + +export const PrimaryAliasOnLightPage: Story = { + render: () => ( + + + + Both boxes should be . On a broken build, + the alias box paints yellow. + + + + + + + + ), +};