Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable eslint for md #1011

Merged
merged 1 commit into from
Jul 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = {
'plugin:github/browser',
'prettier',
],
ignorePatterns: ['node_modules', 'coverage/**/*', 'docs', 'dist/**/*', 'README.md', 'CHANGELOG.md', 'src/@types/'],
ignorePatterns: ['node_modules', 'coverage/**/*', 'docs', 'dist/**/*', 'CHANGELOG.md', 'src/@types/'],
globals: {
__DEV__: 'readonly',
},
Expand Down Expand Up @@ -130,7 +130,7 @@ module.exports = {
'mdx/code-blocks': true,
},
rules: {
'prettier/prettier': 0,
'prettier/prettier': 2,
},
},
// rules which apply only to Markdown code blocks
Expand Down
35 changes: 17 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Data is served from the `dist/` folder:

All available imports:

```
```css
/* size/typography */
@import '@primer/primitives/dist/css/base/size/size.css';
@import '@primer/primitives/dist/css/base/typography/typography.css';
Expand Down Expand Up @@ -70,13 +70,13 @@ In the individual files, e.g. `light.high-contrast.json5` you can now add tokens
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`.

```js
```json5
{
muted: {
$value: '{base.color.blue.3}',
alpha: 0.4, // the opacity value of the color === 40% opaque
$type: 'color',
}
},
}
```

Expand All @@ -88,17 +88,17 @@ The `mix` proeprty mixes the color it gets into the main color from the `$value`

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`.

```js
```json5
{
control: {
$value: '{base.color.gray.4}', // main color
$type: 'color',
mix: {
color: '{base.color.gray.5}', // color to mix into the main color
weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
$value: '{base.color.gray.4}', // main color
$type: 'color',
mix: {
color: '{base.color.gray.5}', // color to mix into the main color
weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
},
},
}
}
```

#### Extensions property
Expand All @@ -113,7 +113,7 @@ For our Figma export we use the following meta data:

Code example

```js
```json5
bgColor: {
$value: '{borderColor.accent.muted}',
$type: 'color',
Expand All @@ -133,18 +133,18 @@ Token names have to be in camelCase or kebab-case and may only include letters,
The only acception 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 follwing structure. The `@` will be removed from the name and act as the default value.

```js
```json5
{
bgColor: {
accent: {
"@": {
'@': {
// values for accent (default)
},
"muted": {
muted: {
// values for accent-muted
}
}
}
},
},
},
}
```

Expand All @@ -155,4 +155,3 @@ In this case you can create the follwing structure. The `@` will be removed from
[primer]: https://github.com/primer/primer
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[scss]: https://sass-lang.com/
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"format": "prettier --write '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
"format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
"install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config .eslintrc.cjs && npm run lint:tokens",
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint '**/*.{js,ts,tsx,md,mdx}' --config .eslintrc.cjs && npm run lint:tokens",
"lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.cjs",
"lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
"prebuild": "rm -rf dist",
Expand Down