@primer/primitives 7.11.2-rc.84342a8 → 7.11.2-rc.9226936
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -1
- package/package.json +7 -6
- package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
- package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ This repo contains values for color, spacing, and typography primitives for use
|
|
|
11
11
|
This repository is distributed on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
|
|
12
12
|
|
|
13
13
|
```sh
|
|
14
|
-
|
|
14
|
+
npm install --save @primer/primitives
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Usage
|
|
@@ -114,6 +114,58 @@ During the build process, the `removed.json` files will be added to a `dist/remo
|
|
|
114
114
|
+ colors.json
|
|
115
115
|
```
|
|
116
116
|
|
|
117
|
+
## V8 Tokens
|
|
118
|
+
|
|
119
|
+
With `/primitives` version 8, design tokens have been moved to json files in the [src/tokens](./src/tokens/) directory. Those tokens are compiled with [style dictionary](https://amzn.github.io/style-dictionary/#/) in [scripts/buildTokens.ts](./scripts/buildTokens.ts).
|
|
120
|
+
|
|
121
|
+
To make working with tokens easier, we added some additional functionality on top of what style dictionary comes with:
|
|
122
|
+
|
|
123
|
+
### Extending and Overwriting
|
|
124
|
+
|
|
125
|
+
We have two main color modes: `light` and `dark`. Additionally we have specific accessibility modes based on those, such as `light high contrast`.
|
|
126
|
+
|
|
127
|
+
We added a way to create a mode by only including the changes from the main mode. We call this `overrides`.
|
|
128
|
+
`Overrides` are cerated in `src/tokens/functional/color/[light|dark]/overrides/` and have to be added to [themes.config.ts](./scripts/themes.config.ts) to work.
|
|
129
|
+
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.
|
|
130
|
+
|
|
131
|
+
### Transforming Colors with Alpha and Mix
|
|
132
|
+
|
|
133
|
+
#### Alpha
|
|
134
|
+
|
|
135
|
+
You can create color tokens that inherit a color but have a different alpha value by adding the `alpha` property.
|
|
136
|
+
**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`.
|
|
137
|
+
|
|
138
|
+
```js
|
|
139
|
+
{
|
|
140
|
+
muted: {
|
|
141
|
+
$value: '{base.color.blue.3}',
|
|
142
|
+
alpha: 0.4, // the opacity value of the color === 40% opaque
|
|
143
|
+
$type: 'color',
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
#### Mix
|
|
149
|
+
|
|
150
|
+
In rare cases, you may need to create a color between two steps in the color scale, e.g. between `gray.4` and `gray.5`. A common example are interactive states, like `hover` where a full step on the color scale would be to much. For those cases you can use the `mix` property.
|
|
151
|
+
|
|
152
|
+
The `mix` proeprty mixes the color it gets into the main color from the `$value` attribute. The amount added is controlled by the `weight`. A weight of `0.1` adds 10% of the color, and a weight of `0.75` adds 75%.
|
|
153
|
+
|
|
154
|
+
A `mix` proprty must always have a `color` and a `weight` child. `color` can be a `hex` value or a reference to a valid color. The `weight` property must receive a value between `0.0` and `1`.
|
|
155
|
+
|
|
156
|
+
```js
|
|
157
|
+
{
|
|
158
|
+
control: {
|
|
159
|
+
$value: '{base.color.gray.4}', // main color
|
|
160
|
+
$type: 'color',
|
|
161
|
+
mix: {
|
|
162
|
+
color: '{base.color.gray.5}', // color to mix into the main color
|
|
163
|
+
weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
|
|
164
|
+
},
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
117
169
|
## License
|
|
118
170
|
|
|
119
171
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/primitives",
|
|
3
|
-
"version": "7.11.2-rc.
|
|
3
|
+
"version": "7.11.2-rc.9226936",
|
|
4
4
|
"description": "Typography, spacing, and color primitives for Primer design system",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"tokens-v2-private",
|
|
8
|
+
"tokens-next-private",
|
|
8
9
|
"build.js",
|
|
9
10
|
"tokens/"
|
|
10
11
|
],
|
|
@@ -27,9 +28,9 @@
|
|
|
27
28
|
"homepage": "https://github.com/primer/primitives#readme",
|
|
28
29
|
"scripts": {
|
|
29
30
|
"build": "ts-node ./scripts/build.ts && tsc --project tsconfig.build.json",
|
|
30
|
-
"build:
|
|
31
|
+
"build:next": "ts-node -r tsconfig-paths/register ./scripts/buildTokens.ts",
|
|
31
32
|
"build:tokens": "node -e \"require('./build')._init()\"",
|
|
32
|
-
"build:new-tokens": "npm run build:tokens && npm run build:
|
|
33
|
+
"build:new-tokens": "npm run build:tokens && npm run build:next",
|
|
33
34
|
"check:tokenJson": "ts-node scripts/diffThemes.ts && ts-node scripts/diffTokenProps.ts",
|
|
34
35
|
"contrast-check": "npx ts-node ./scripts/color-contrast.ts",
|
|
35
36
|
"format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
|
|
@@ -41,11 +42,11 @@
|
|
|
41
42
|
"postbuild": "ts-node ./scripts/color-contrast.ts",
|
|
42
43
|
"prebuild": "rm -rf dist",
|
|
43
44
|
"prebuild:tokens": "rm -rf tokens-v2-private",
|
|
44
|
-
"prebuild:
|
|
45
|
+
"prebuild:next": "rm -rf tokens-next-private",
|
|
45
46
|
"prepack": "npm run build && npm run build:tokens",
|
|
46
47
|
"prepare": "husky install && npm run install:docs && npm run install:storybook",
|
|
47
48
|
"release": "changeset publish",
|
|
48
|
-
"start:storybook": "npm run build:
|
|
49
|
+
"start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
|
|
49
50
|
"test": "jest --verbose --coverage",
|
|
50
51
|
"watch": "ls data/**/*.scss scripts/**/*.ts | entr -s 'npm run build'"
|
|
51
52
|
},
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"eslint-import-resolver-typescript": "^3.5.3",
|
|
71
72
|
"eslint-plugin-github": "^4.3.6",
|
|
72
73
|
"eslint-plugin-jsx-a11y": "^6.5.1",
|
|
73
|
-
"eslint-plugin-mdx": "^
|
|
74
|
+
"eslint-plugin-mdx": "^2.0.5",
|
|
74
75
|
"eslint-plugin-primer-react": "^1.0.1",
|
|
75
76
|
"eslint-plugin-react": "^7.29.4",
|
|
76
77
|
"eslint-plugin-react-hooks": "^4.4.0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 28 Mar 2023 09:15:46 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const PrimerFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
|