Skip to content

Commit

Permalink
add new stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@langermank
langermank committed Jan 23, 2025
1 parent e2e4c44 commit 3ece802
Show file tree
Hide file tree
Showing 3 changed files with 223 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/storybook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
"dependencies": {
"@primer/octicons-react": "^18.0.0",
"@primer/react": "^36.7.0",
"@primer/react": "^37.10.0",
"react": "18.3",
"react-dom": "18.3"
},
Expand Down
22 changes: 22 additions & 0 deletions docs/storybook/stories/VisualRegressionTesting/AllColorsTable.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.swatch {
height: 50px;
width: 50px;
background: var(--bgColor-default);
border: solid 1px var(--borderColor-default);
display: grid;
place-content: center;
font: var(--text-codeInline-shorthand);
font-size: 12px;
}

.name {
width: 300px;
display: grid;
place-content: center end;
background: #ffffff;
}

.sticky {
position: sticky;
top: 0;
}
200 changes: 200 additions & 0 deletions docs/storybook/stories/VisualRegressionTesting/AllColorsTable.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
import React from 'react'
import lightColorTokens from '../../../../dist/docs/functional/themes/light.json'
import {Stack} from '@primer/react/drafts'
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
import {ColorTokenSwatch} from '../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
import styles from './AllColorsTable.module.css'

export default {
title: 'VRT/All color themes',
parameters: {
controls: {hideNoControlsWarning: true},
options: {showPanel: false},
},
}

export const AllThemesInOneTable = () => {
const data = Object.entries(lightColorTokens)
.filter(([name]) => !name.startsWith('border-'))
.map(([name, token]) => {
return {
id: name,
...token,
}
})

return (
// this is not accessible and really just for dev purposes
<Stack gap="condensed">
<Stack direction="horizontal" className={styles.sticky}>
<Stack.Item className={styles.name}>blank</Stack.Item>
<Stack.Item className={styles.swatch}>dark</Stack.Item>
<Stack.Item className={styles.swatch}>d hc</Stack.Item>
<Stack.Item className={styles.swatch}>d dim</Stack.Item>
<Stack.Item className={styles.swatch}>d tri</Stack.Item>
<Stack.Item className={styles.swatch}>d cb</Stack.Item>
<Stack.Item className={styles.swatch}>light</Stack.Item>
<Stack.Item className={styles.swatch}>l hc</Stack.Item>
<Stack.Item className={styles.swatch}>l tri</Stack.Item>
<Stack.Item className={styles.swatch}>l cb</Stack.Item>
</Stack>
<Stack>
{data.map(({id}) => (
<Stack direction="horizontal">
<Stack.Item className={styles.name}>
<InlineCode value={id} />
</Stack.Item>
<Stack.Item data-color-mode="dark" data-light-theme="dark" data-dark-theme="dark" className={styles.swatch}>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="dark"
data-light-theme="dark"
data-dark-theme="dark_high_contrast"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="dark"
data-light-theme="dark"
data-dark-theme="dark_dimmed"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="dark"
data-light-theme="dark"
data-dark-theme="dark_tritanopia"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="dark"
data-light-theme="dark"
data-dark-theme="darky_colorblind"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="light"
data-light-theme="light"
data-dark-theme="light"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="light"
data-light-theme="light_high_contrast"
data-dark-theme="light_high_contrast"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="light"
data-light-theme="light_tritanopia"
data-dark-theme="light_tritanopia"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
<Stack.Item
data-color-mode="light"
data-light-theme="light_colorblind"
data-dark-theme="light_colorblind"
className={styles.swatch}
>
<ColorTokenSwatch
bgColor={
id.includes('bgColor') || id.includes('color') || id.includes('fgColor') || id.includes('iconColor')
? id
: undefined
}
shadowColor={id.includes('shadow') ? id : undefined}
borderColor={id.includes('borderColor') ? id : undefined}
outlineColor={id.includes('outline') && !id.includes('borderColor') ? id : undefined}
/>
</Stack.Item>
</Stack>
))}
</Stack>
</Stack>
)
}

0 comments on commit 3ece802

Please sign in to comment.