Specimens for Design Systems
Leverage the wide variety of powerful React components of @lekoarts/gatsby-theme-specimens to build your design system. Display your colors, typography or any other design tokens with ease and focus on the design system itself, not on how to showcase it. Works seamlessly with MDX.
If you simply want to see how the components look, head over to the Preview!
Also be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.
Features
- Theme UI-based theming
- Suitable for MDX
- Offers React components specifically designed for design systems. You can display:
- Colors as swatches and rows. Individually placed or automated from an object/array in your theme file
- Typography e.g. font-family, font-size, font-weight and headings
- Spacing scales
- Audio files and downloads
- border-radius or box-shadow
- Alerts to emphasize important messages
Installation
npm install @lekoarts/gatsby-theme-specimens
And in your gatsby-config.mjs:
// gatsby-config.mjsconst config = {plugins: [{resolve: `@lekoarts/gatsby-theme-specimens`,options: {}}}]}export default config
View the theme's README to see more instructions on how to set up this theme!
Specimens
- Alert
- Audio
- Border Radius
- Color Families
- Color Row
- Color Swatch
- Download
- Font Family
- Font Size
- Font Weight
- Heading
- Palette: Color Rows
- Palette: Color Swatches
- Sizes
- Shadows
- Space
- Video
Please note: Components wrapped in a render()
don't need to be written this way in your MDX files - it's only necessary for react-live
demos on this page.
Alert
Variants: alerts.success
, alerts.hint
, alerts.warning
, alerts.info
, alerts.danger
Available props:
- type (
string
) (optional) (Default: "hint")
Audio
Variant: audio.specimens
Available props:
- src (
string
) - Must be a valid path on your webserver, e.g. the sound file below is placed inside src/static/sounds - name (
string
) (optional) (Default: "") - desc (
string
) (optional) (Default: "")
Border Radius
Variant: tables.borderRadius
Available props:
- radii
radii has to be in the following format:
radii: {[key: string]: string}
Color Families
Variant: families.specimens
Available props:
- colors (
Record<string, string[]>
)
colors has to be in the following format:
colors: {[key: string]: string[]}
Color Row
Variant: rows.specimens
Available props:
- color (
string
) - Must be in HEX format - name (
string
) - prefix (
string
) (optional) (Default: "")
Color Swatch
Variant: swatches.specimens
Available props:
- color (
string
) - Must be in HEX format - name (
string
) (optional) (Default: "") - minimal (
boolean
) (optional) (Default: false) - prefix (
string
) (optional) (Default: "")
Download
Variant: download.specimens
Available props:
- src (
string
) - Must be a valid path on your webserver, e.g. the file below is placed inside src/static/downloads - name (
string
)
Font Family
Variant: typography.fontFamily
Available props:
- fonts
- previewText (
string
) (optional) - Replace "The quick brown fox jumps over the lazy dog" with something custom
fonts has to be in the following format:
fonts: {[key: string]: string}
Font Size
Variant: typography.fontSize
Available props:
- fontSizes
fontSizes has to be in the following format:
fontSizes: string[] | number[]
Font Weight
Variant: typography.fontWeight
Available props:
- fontWeights
- previewText (
string
) (optional) - Replace "The quick brown fox jumps over the lazy dog" with something custom
fontWeights has to be in the following format:
fontWeights: {[key: string]: string}
Heading
Variants: typography.heading
, codeStyles.default
Available props:
- styles
- theme
- previewText (
string
) (optional) - Replace "Heading" with something custom
If you're already using Theme UI your theme file already has all necessary keys (styles, fontSizes, fontWeights, fonts). As you can see in the below example the theme.styles
has entries like h1
which then will be used to display.
You can filter which keys to show by using the helper function filterStyles({ input, allowed })
.
Palette: Color Rows
Available props:
- colors - If you use Theme UI you can use the helper function
normalizeThemeUIColors({ colors })
to convert the array of color strings to the necessary format - prefix (
string
) (optional) (Default: "")
colors has to be in the following format:
colors: {name: stringcolor: string}[]
Palette: Color Swatches
Available props:
- colors - If you use Theme UI you can use the helper function
normalizeThemeUIColors({ colors })
to convert the array of color strings to the necessary format - prefix (
string
) (optional) (Default: "") - single (
boolean
) (optional) (Default: false) - When passing in the colors object you can filter out all keys that have arrays as children - minimal (
boolean
) (optional) (Default: false) - Hide RGB and CMYK label - mode (
string
) (optional) (Default: "list")
colors has to be in the following format:
colors: {name: stringcolor: string}[]
Sizes
Variant: tables.space
This theme also exposes a Table
component. It is used in this case to showcase the different sizes
of the theme. Generally speaking the Table
component has the following props:
- columns (
string[]
) - titles (
string[]
) - children (
React.ReactNode
)
The columns
prop is defining the grid-template-columns
of the table in the fashion of Theme UI (Responsive Styles). The titles
should be the same count as columns.
So you can define the style for every breakpoint, e.g. [`120px 1fr`, `150px 1fr`]
(120px for everything below the smallest breakpoint, 150px for everything above smallest breakpoint).
You can format the data you want to show how you like but in the end you should have the amount of columns as defined above.
Shadows
Variant: tables.shadow
Available props:
- shadows
shadows has to be in the following format:
shadows: {[key: string]: string}
Space
Available props:
- space
space has to be in the following format:
space: string[] | number[]
Video
Variant: video.specimens
Available props:
- src (
string
) - Must be a valid path on your webserver, e.g. the video file below is placed inside src/static/videos - poster (
string
) (optional) (Default: "") - By default the video tag will use the first frame of the video as a preview. With the poster you can define a custom preview image - name (
string
) (optional) (Default: "") - muted (
boolean
) (optional) (Default: false) - loop (
boolean
) (optional) (Default: false) - autoplay (
boolean
) (optional) (Default: false)