primerPrimer Primitives
This repo contains values for color, spacing, and typography primitives for use with Primer, GitHub's design system.
Install
This repository is distributed on npm. After installing npm, you can install @primer/primitives with this command.
npm install --save @primer/primitives
Usage
See Primitives documentation for more information on theming and using CSS variables.
Data is served from the dist/ folder:
dist/csscontains CSS files with values available as CSS variables
All available imports:
/* size/typography */
@import '@primer/primitives/dist/css/base/size/size.css';
@import '@primer/primitives/dist/css/base/typography/typography.css';
@import '@primer/primitives/dist/css/functional/size/border.css';
@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
@import '@primer/primitives/dist/css/functional/size/size.css';
@import '@primer/primitives/dist/css/functional/size/viewport.css';
@import '@primer/primitives/dist/css/functional/typography/typography.css';
/* color */
@import '@primer/primitives/dist/css/functional/themes/light.css';
@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
@import '@primer/primitives/dist/css/functional/themes/dark.css';
@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';
Design token data
Design token data is stored in the src/tokens directory. These tokens are compiled with style dictionary in scripts/buildTokens.ts.
To make working with tokens easier, we added some additional functionality on top of what style dictionary comes with:
Extending and Overwriting
We have two main color modes: light and dark. Additionally we have specific accessibility modes based on those, such as light high contrast.
We added a way to create a mode by only including the changes from the main mode. We call this overrides.
Overrides are created in src/tokens/functional/color/[light|dark]/overrides/ and have to be added to themes.config.ts to work.
In the individual files, e.g. light.high-contrast.json5 you can now add tokens in the same structure as in any main file, e.g. primitives-light.json5 to replace them.
Transforming Colors with Alpha and Mix
Alpha
You can create color tokens that inherit a color but have a different alpha value by adding the alpha property.
Note: The original alpha value will be replaced by your value. If you add alpha: 0.4 to a color, it doesn't matter if the color you reference has no alpha or alpha: 0.7, the new token will always have newly the defined value of alpha: 0.4.
{
muted: {
$value: '{base.color.blue.3}',
alpha: 0.4, // the opacity value of the color === 40% opaque
$type: 'color',
},
}
Extensions property
According to the w3c design token specs, the $extensions property is used for additional meta data.
For our Figma export we use the following meta data:
collectionthe collection that the token is added to within Figmamodethe mode that the token is added to within the collection in Figmascopesthe scopes that are assigned to the token in Figma, the actual Figma compatiblescopesare retrieved from an object in the figmaAttributes transformer
Code example
bgColor: {
$value: '{borderColor.accent.muted}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'pattern/mode',
mode: 'light',
scopes: ['bgColor'],
},
},
}
Token names and @-hack
Token names have to be in camelCase or kebab-case and may only include letters, numbers and -. This is enforced by the token validation (npm run lint:tokens).
The only exception is the @-hack. This is used when you want to have a default value and sub-values, e.g. bgColor.accent and bgColor.accent.muted.
In this case you can create the following structure. The @ will be removed from the name and act as the default value.
{
bgColor: {
accent: {
'@': {
// values for bgColor-accent (default)
},
muted: {
// values for bgColor-accent-muted
},
},
},
}