@primer/primitives 7.17.0 → 8.0.0-rc.2e61fcd8

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.
Files changed (3) hide show
  1. package/README.md +28 -94
  2. package/package.json +3 -11
  3. package/src/utils-v1.ts +0 -36
package/README.md CHANGED
@@ -16,109 +16,43 @@ npm install --save @primer/primitives
16
16
 
17
17
  ## Usage
18
18
 
19
- [Storybook](https://primer.style/primitives/storybook) | [Docs](https://primer.style/primitives/)
19
+ [Storybook](https://primer.style/primitives/storybook) | [Docs](https://primer.style/foundations/primitives/getting-started)
20
20
 
21
- Primitive data is served in several formats from the `dist/` folder:
21
+ See [Primitives documentation](https://primer.style/foundations/primitives/getting-started) for more information on theming and using CSS variables.
22
22
 
23
- - `dist/scss` contains [SCSS][scss] files that define CSS variables to be imported into other SCSS files
24
- - `dist/json` contains JSON files for each set of primitives
25
- - `dist/js` contains CommonJS-style JavaScript modules for each set of primitives, as well as an index file that loads all of the primitives for all primitive types; you can access this via `require('@primer/primitives')`. The JavaScript modules also include TypeScript typings files for use in TypeScript projects.
23
+ Data is served from the `dist/` folder:
26
24
 
27
- ## Deprecating variables
25
+ - `dist/css` contains CSS files with values available as CSS variables
28
26
 
29
- To deprecate a variable, define a mapping from the deprecated variable to its replacement(s) in a file called `deprecated.json` in the appropriate subdirectory of `data`:
27
+ All available imports:
30
28
 
31
- ```diff
32
- data/
33
- colors/
34
- + deprecated.json
35
- spacing/
36
- ...
37
29
  ```
38
-
39
- ```
40
- // data/colors/deprecated.json
41
-
42
- {
43
- "text.primary": "fg.default", // this means: `text.primary` is deprecated. Use `fg.default` instead
44
- "auto.blue.4": ["accent.fg, accent.emphasis"], // this means: `auto.blue.4` is deprecated. Use `accent.fg` or `accent.emphasis` instead
45
- "text.white": null // this means: `text.white` is deprecated. We don't have a replacement for it
46
- }
47
-
48
- ```
49
-
50
- During the build process, the `deprecated.json` files will be added to a `dist/deprecated` directory organized by variable category:
51
-
52
- ```diff
53
- dist/
54
- js/
55
- ts/
56
- json/
57
- scss/
58
- + deprecated/
59
- + colors.json
60
- ```
61
-
62
- ## Removing variables
63
-
64
- When you're ready to remove a variable, first remove it's definitions:
65
-
66
- ```diff
67
- // data/colors/vars/global_light.ts
68
- import {get} from '../../../src/utils-v1'
69
-
70
- export default {
71
- text: {
72
- - primary: get('scale.gray.9'),
73
- secondary: get('scale.gray.6')
74
- }
75
- }
76
- ```
77
-
78
- ```diff
79
- // data/colors/vars/global_dark.ts
80
- import {get} from '../../../src/utils-v1'
81
-
82
- export default {
83
- text: {
84
- - primary: get('scale.gray.1'),
85
- secondary: get('scale.gray.3')
86
- }
87
- }
88
- ```
89
-
90
- Then remove it from `deprecated.json` and add it to `removed.json`:
91
-
92
- ```diff
93
- // data/colors/deprecated.json
94
- {
95
- - "text.primary": "fg.default"
96
- }
97
- ```
98
-
99
- ```diff
100
- // data/colors/removed.json
101
- {
102
- + "text.primary": "fg.default"
103
- }
104
- ```
105
-
106
- During the build process, the `removed.json` files will be added to a `dist/removed` directory organized by variable category:
107
-
108
- ```diff
109
- dist/
110
- js/
111
- ts/
112
- json/
113
- scss/
114
- deprecated/
115
- + removed/
116
- + colors.json
30
+ /* size/typography */
31
+ @import '@primer/primitives/dist/css/base/size/size.css';
32
+ @import '@primer/primitives/dist/css/base/typography/typography.css';
33
+ @import '@primer/primitives/dist/css/functional/size/border.css';
34
+ @import '@primer/primitives/dist/css/functional/size/breakpoints.css';
35
+ @import '@primer/primitives/dist/css/functional/size/size-coarse.css';
36
+ @import '@primer/primitives/dist/css/functional/size/size-fine.css';
37
+ @import '@primer/primitives/dist/css/functional/size/size.css';
38
+ @import '@primer/primitives/dist/css/functional/size/viewport.css';
39
+ @import '@primer/primitives/dist/css/functional/typography/typography.css';
40
+
41
+ /* color */
42
+ @import '@primer/primitives/dist/css/functional/themes/light.css';
43
+ @import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
44
+ @import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
45
+ @import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
46
+ @import '@primer/primitives/dist/css/functional/themes/dark.css';
47
+ @import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
48
+ @import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
49
+ @import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
50
+ @import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';
117
51
  ```
118
52
 
119
- ## V8 Tokens
53
+ ## Design token data
120
54
 
121
- 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).
55
+ Design token data is stored in the [src/tokens](./src/tokens/) directory. These tokens are compiled with [style dictionary](https://amzn.github.io/style-dictionary/#/) in [scripts/buildTokens.ts](./scripts/buildTokens.ts).
122
56
 
123
57
  To make working with tokens easier, we added some additional functionality on top of what style dictionary comes with:
124
58
 
package/package.json CHANGED
@@ -1,14 +1,12 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "7.17.0",
3
+ "version": "8.0.0-rc.2e61fcd8",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
7
7
  "src/**/*",
8
8
  "!src/**/*.test.ts"
9
9
  ],
10
- "main": "dist/js/index.js",
11
- "types": "dist/js/index.d.ts",
12
10
  "repository": "https://github.com/primer/primitives",
13
11
  "keywords": [
14
12
  "primitives",
@@ -25,7 +23,6 @@
25
23
  },
26
24
  "homepage": "https://github.com/primer/primitives#readme",
27
25
  "scripts": {
28
- "build": "ts-node ./scripts/build.ts && tsc --project tsconfig.build.json",
29
26
  "build:next": "npm run build:v8 && npm run build:fallbacks && npm run build:figma",
30
27
  "build:v8": "ts-node ./scripts/buildTokens.ts",
31
28
  "build:fallbacks": "ts-node ./scripts/buildFallbacks.ts",
@@ -40,10 +37,10 @@
40
37
  "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
41
38
  "prebuild": "rm -rf dist",
42
39
  "prebuild:next": "rm -rf dist",
43
- "prepack": "npm run build && npm run build:next",
40
+ "prepack": "npm run build:next",
44
41
  "prepare": "husky",
45
42
  "release": "changeset publish",
46
- "start:storybook": "npm run build && npm run build:next && cd docs/storybook && npm run storybook",
43
+ "start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
47
44
  "test": "jest --verbose --coverage"
48
45
  },
49
46
  "prettier": "@github/prettier-config",
@@ -53,9 +50,7 @@
53
50
  "@changesets/cli": "^2.27.1",
54
51
  "@github/prettier-config": "^0.0.6",
55
52
  "@playwright/test": "^1.43.0",
56
- "@types/flat": "^5.0.1",
57
53
  "@types/jest": "^29.5.2",
58
- "@types/lodash": "^4.14.195",
59
54
  "@types/node": "^20.4.0",
60
55
  "@typescript-eslint/eslint-plugin": "^5.61.0",
61
56
  "@typescript-eslint/parser": "^5.61.0",
@@ -74,13 +69,10 @@
74
69
  "eslint-plugin-react": "^7.29.4",
75
70
  "eslint-plugin-react-hooks": "^4.4.0",
76
71
  "eslint-plugin-storybook": "^0.6.15",
77
- "flat": "^5.0.2",
78
72
  "husky": "^9.0.11",
79
73
  "jest": "^29.6.1",
80
74
  "json5": "^2.2.1",
81
- "lodash": "^4.17.20",
82
75
  "markdown-table-ts": "^1.0.3",
83
- "mkdirp": "^3.0.1",
84
76
  "prettier": "^2.7.1",
85
77
  "style-dictionary": "^3.9.2",
86
78
  "ts-jest": "^29.1.2",
package/src/utils-v1.ts DELETED
@@ -1,36 +0,0 @@
1
- import {lighten as _lighten, transparentize, darken as _darken} from 'color2k'
2
- import deepmerge from 'deepmerge'
3
- import _get from 'lodash/get'
4
- import isFunction from 'lodash/isFunction'
5
-
6
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
7
- type Value = string | ((obj: any) => string)
8
-
9
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
10
- export function resolveValue(value: Value, obj: any): string {
11
- return isFunction(value) ? resolveValue(value(obj), obj) : value
12
- }
13
-
14
- export function merge(...objects: object[]) {
15
- return deepmerge.all(objects, {arrayMerge: (target, source) => source})
16
- }
17
-
18
- export function get(path: string) {
19
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
20
- return (obj: any) => _get(obj, path)
21
- }
22
-
23
- export function alpha(value: Value, amount: number) {
24
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
- return (obj: any) => transparentize(resolveValue(value, obj), 1 - amount).replace(/ /g, '')
26
- }
27
-
28
- export function lighten(value: Value, amount: number) {
29
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
30
- return (obj: any) => _lighten(resolveValue(value, obj), amount).replace(/ /g, '')
31
- }
32
-
33
- export function darken(value: Value, amount: number) {
34
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
35
- return (obj: any) => _darken(resolveValue(value, obj), amount).replace(/ /g, '')
36
- }