eslint-plugin-primer-react 5.0.0-rc.2db7a42 → 5.0.0-rc.38827bf

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 (16) hide show
  1. package/CHANGELOG.md +2 -3
  2. package/README.md +0 -1
  3. package/docs/rules/new-color-css-vars-have-fallback.md +25 -0
  4. package/docs/rules/new-css-color-vars.md +2 -2
  5. package/package-lock.json +0 -14
  6. package/package.json +1 -3
  7. package/src/configs/recommended.js +1 -1
  8. package/src/index.js +1 -1
  9. package/src/rules/__tests__/new-color-css-vars.test.js +98 -90
  10. package/src/rules/__tests__/new-css-vars-have-fallback.test.js +31 -0
  11. package/src/rules/new-color-css-vars-have-fallback.js +87 -0
  12. package/src/rules/new-color-css-vars.js +2 -2
  13. package/src/utils/new-color-css-vars-map.json +326 -0
  14. package/docs/rules/no-deprecated-colors.md +0 -91
  15. package/src/rules/__tests__/no-deprecated-colors.test.js +0 -221
  16. package/src/rules/no-deprecated-colors.js +0 -193
package/CHANGELOG.md CHANGED
@@ -4,9 +4,8 @@
4
4
 
5
5
  ### Major Changes
6
6
 
7
- - [#172](https://github.com/primer/eslint-plugin-primer-react/pull/172) [`8e24d66`](https://github.com/primer/eslint-plugin-primer-react/commit/8e24d660065b3c690a14d826580c793d7b305068) Thanks [@langermank](https://github.com/langermank)! - [Breaking] Remove `new-color-css-vars-have-fallback`
8
-
9
- ## 4.2.0
7
+ - [#169](https://github.com/primer/eslint-plugin-primer-react/pull/169) [`2576a9f`](https://github.com/primer/eslint-plugin-primer-react/commit/2576a9f091b911cf322e200ed87b012c358c6291) Thanks [@langermank](https://github.com/langermank)! - - Remove `no-deprecated-colors` plugin
8
+ - Remove dependency on `primer/primitives`
10
9
 
11
10
  ### Minor Changes
12
11
 
package/README.md CHANGED
@@ -32,7 +32,6 @@ ESLint rules for Primer React
32
32
  ## Rules
33
33
 
34
34
  - [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
35
- - [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
36
35
  - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
37
36
  - [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
38
37
  - [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)
package/docs/rules/new-color-css-vars-have-fallback.md ADDED
@@ -0,0 +1,25 @@
1
+ ## Ensure new Primitive v8 color CSS vars have a fallback
2
+
3
+ This rule is temporary as we begin testing v8 color tokens behind a feature flag. If a color token is used without a fallback, the color will only render if the feature flag is enabled. This rule is an extra safety net to ensure we don't accidentally ship code that relies on the feature flag.
4
+
5
+ ## Rule Details
6
+
7
+ This rule refers to a JSON file that lists all the new color tokens
8
+
9
+ ```json
10
+ ["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"]
11
+ ```
12
+
13
+ If it finds that one of these tokens is used without a fallback, it will throw an error.
14
+
15
+ 👎 Examples of **incorrect** code for this rule
16
+
17
+ ```jsx
18
+ <Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
19
+ ```
20
+
21
+ 👍 Examples of **correct** code for this rule:
22
+
23
+ ```jsx
24
+ <Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
25
+ ```
package/docs/rules/new-css-color-vars.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are
4
4
  deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the
5
- deprecated color CSS variables in the `sx` prop, and autofix it.
5
+ deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value.
6
6
 
7
7
  ## Rule Details
8
8
 
@@ -36,5 +36,5 @@ one based on the property. We only check `sx` because `stylelint` is used to lin
36
36
  👍 Examples of **correct** code for this rule:
37
37
 
38
38
  ```jsx
39
- <Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
39
+ <Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
40
40
  ```
package/package-lock.json CHANGED
@@ -21,7 +21,6 @@
21
21
  "@changesets/cli": "^2.16.0",
22
22
  "@github/markdownlint-github": "^0.6.0",
23
23
  "@github/prettier-config": "0.0.6",
24
- "@primer/primitives": "^7.14.0",
25
24
  "eslint": "^8.42.0",
26
25
  "eslint-plugin-prettier": "^5.0.1",
27
26
  "jest": "^29.7.0",
@@ -29,7 +28,6 @@
29
28
  "markdownlint-cli2-formatter-pretty": "^0.0.5"
30
29
  },
31
30
  "peerDependencies": {
32
- "@primer/primitives": ">=4.6.2",
33
31
  "eslint": "^8.42.0"
34
32
  }
35
33
  },
@@ -1897,12 +1895,6 @@
1897
1895
  "url": "https://opencollective.com/unts"
1898
1896
  }
1899
1897
  },
1900
- "node_modules/@primer/primitives": {
1901
- "version": "7.15.15",
1902
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.15.tgz",
1903
- "integrity": "sha512-K9fPgKVBtdmBMl+lHKUK4ctsRf+DUUKdJYEHnFhkua71m9FORK16ycJ4gHDpc4g/0xgNvEwQ9/ArsV1i8w3ZmQ==",
1904
- "dev": true
1905
- },
1906
1898
  "node_modules/@sinclair/typebox": {
1907
1899
  "version": "0.27.8",
1908
1900
  "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -9972,12 +9964,6 @@
9972
9964
  "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
9973
9965
  "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ=="
9974
9966
  },
9975
- "@primer/primitives": {
9976
- "version": "7.15.15",
9977
- "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.15.tgz",
9978
- "integrity": "sha512-K9fPgKVBtdmBMl+lHKUK4ctsRf+DUUKdJYEHnFhkua71m9FORK16ycJ4gHDpc4g/0xgNvEwQ9/ArsV1i8w3ZmQ==",
9979
- "dev": true
9980
- },
9981
9967
  "@sinclair/typebox": {
9982
9968
  "version": "0.27.8",
9983
9969
  "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eslint-plugin-primer-react",
3
- "version": "5.0.0-rc.2db7a42",
3
+ "version": "5.0.0-rc.38827bf",
4
4
  "description": "ESLint rules for Primer React",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -25,7 +25,6 @@
25
25
  },
26
26
  "homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
27
27
  "peerDependencies": {
28
- "@primer/primitives": ">=4.6.2",
29
28
  "eslint": "^8.42.0"
30
29
  },
31
30
  "dependencies": {
@@ -41,7 +40,6 @@
41
40
  "@changesets/cli": "^2.16.0",
42
41
  "@github/markdownlint-github": "^0.6.0",
43
42
  "@github/prettier-config": "0.0.6",
44
- "@primer/primitives": "^7.14.0",
45
43
  "eslint": "^8.42.0",
46
44
  "eslint-plugin-prettier": "^5.0.1",
47
45
  "jest": "^29.7.0",
package/src/configs/recommended.js CHANGED
@@ -11,11 +11,11 @@ module.exports = {
11
11
  extends: ['plugin:github/react'],
12
12
  rules: {
13
13
  'primer-react/direct-slot-children': 'error',
14
- 'primer-react/no-deprecated-colors': 'warn',
15
14
  'primer-react/no-system-props': 'warn',
16
15
  'primer-react/a11y-tooltip-interactive-trigger': 'error',
17
16
  'primer-react/new-color-css-vars': 'error',
18
17
  'primer-react/a11y-explicit-heading': 'error',
18
+ 'primer-react/new-color-css-vars-have-fallback': 'error',
19
19
  'primer-react/no-deprecated-props': 'warn',
20
20
  },
21
21
  settings: {
package/src/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  module.exports = {
2
2
  rules: {
3
3
  'direct-slot-children': require('./rules/direct-slot-children'),
4
- 'no-deprecated-colors': require('./rules/no-deprecated-colors'),
5
4
  'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
6
5
  'no-system-props': require('./rules/no-system-props'),
7
6
  'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
8
7
  'new-color-css-vars': require('./rules/new-color-css-vars'),
9
8
  'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
9
+ 'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'),
10
10
  'no-deprecated-props': require('./rules/no-deprecated-props'),
11
11
  },
12
12
  configs: {
package/src/rules/__tests__/new-color-css-vars.test.js CHANGED
@@ -43,46 +43,46 @@ ruleTester.run('no-color-css-vars', rule, {
43
43
  {
44
44
  name: 'attribute: simple variable',
45
45
  code: `<circle stroke={isSuccess ? 'var(--color-done-fg)' : 'var(--color-border-default)'} fill='var(--color-border-default)' strokeWidth='2' />`,
46
- output: `<circle stroke={isSuccess ? 'var(--fgColor-done)' : 'var(--borderColor-default)'} fill='var(--borderColor-default)' strokeWidth='2' />`,
46
+ output: `<circle stroke={isSuccess ? 'var(--fgColor-done, var(--color-done-fg))' : 'var(--borderColor-default, var(--color-border-default))'} fill='var(--borderColor-default, var(--color-border-default))' strokeWidth='2' />`,
47
47
  errors: [
48
48
  {
49
- message: 'Replace var(--color-done-fg) with var(--fgColor-done)',
49
+ message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))',
50
50
  },
51
51
  {
52
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
52
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
53
53
  },
54
54
  {
55
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
55
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
56
56
  },
57
57
  ],
58
58
  },
59
59
  {
60
60
  name: 'attribute: conditional variable',
61
61
  code: `<circle stroke={test ? 'var(--color-border-default)' : 'red'} strokeWidth='2' />`,
62
- output: `<circle stroke={test ? 'var(--borderColor-default)' : 'red'} strokeWidth='2' />`,
62
+ output: `<circle stroke={test ? 'var(--borderColor-default, var(--color-border-default))' : 'red'} strokeWidth='2' />`,
63
63
  errors: [
64
64
  {
65
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
65
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
66
66
  },
67
67
  ],
68
68
  },
69
69
  {
70
70
  name: 'sx: simple variable',
71
71
  code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
72
- output: `<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>`,
72
+ output: `<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>`,
73
73
  errors: [
74
74
  {
75
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
75
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
76
76
  },
77
77
  ],
78
78
  },
79
79
  {
80
80
  name: 'style: simple variable',
81
81
  code: `<div style={{ border: 'var(--color-border-default)' }}></div>`,
82
- output: `<div style={{ border: 'var(--borderColor-default)' }}></div>`,
82
+ output: `<div style={{ border: 'var(--borderColor-default, var(--color-border-default))' }}></div>`,
83
83
  errors: [
84
84
  {
85
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
85
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
86
86
  },
87
87
  ],
88
88
  },
@@ -98,13 +98,13 @@ ruleTester.run('no-color-css-vars', rule, {
98
98
  output: `
99
99
  <Box sx={{
100
100
  '&:hover button, &:focus [data-component="copy-link"] button': {
101
- color: 'var(--fgColor-accent)'
101
+ color: 'var(--fgColor-accent, var(--color-accent-fg))'
102
102
  }
103
103
  }}>
104
104
  </Box>`,
105
105
  errors: [
106
106
  {
107
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
107
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
108
108
  },
109
109
  ],
110
110
  },
@@ -120,13 +120,13 @@ ruleTester.run('no-color-css-vars', rule, {
120
120
  output: `
121
121
  <Box style={{
122
122
  '&:hover button, &:focus [data-component="copy-link"] button': {
123
- color: 'var(--fgColor-accent)'
123
+ color: 'var(--fgColor-accent, var(--color-accent-fg))'
124
124
  }
125
125
  }}>
126
126
  </Box>`,
127
127
  errors: [
128
128
  {
129
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
129
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
130
130
  },
131
131
  ],
132
132
  },
@@ -150,22 +150,23 @@ ruleTester.run('no-color-css-vars', rule, {
150
150
  boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`,
151
151
  }
152
152
  : {}
153
- const bg = 'var(--bgColor-muted)'
154
- const sx = disabled ? {color: 'var(--fgColor-disabled)'} : undefined
153
+ const bg = 'var(--bgColor-muted, var(--color-canvas-subtle))'
154
+ const sx = disabled ? {color: 'var(--fgColor-disabled, var(--color-primer-fg-disabled))'} : undefined
155
155
  export const Fixture = <Button bg={bg} sx={sx}>Test</Button>
156
156
  `,
157
157
  errors: [
158
158
  {
159
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
159
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
160
160
  },
161
161
  {
162
- message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted)',
162
+ message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))',
163
163
  },
164
164
  {
165
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
165
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
166
166
  },
167
167
  {
168
- message: 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled)',
168
+ message:
169
+ 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))',
169
170
  },
170
171
  ],
171
172
  },
@@ -175,11 +176,11 @@ ruleTester.run('no-color-css-vars', rule, {
175
176
  const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {}
176
177
  `,
177
178
  output: `
178
- const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted) !important'} : {}
179
+ const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {}
179
180
  `,
180
181
  errors: [
181
182
  {
182
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
183
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
183
184
  },
184
185
  ],
185
186
  },
@@ -190,12 +191,12 @@ ruleTester.run('no-color-css-vars', rule, {
190
191
  export const Fixture = <Button sx={baseStyles}>Test</Button>
191
192
  `,
192
193
  output: `
193
- const baseStyles = { color: 'var(--fgColor-muted)' }
194
+ const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' }
194
195
  export const Fixture = <Button sx={baseStyles}>Test</Button>
195
196
  `,
196
197
  errors: [
197
198
  {
198
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
199
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
199
200
  },
200
201
  ],
201
202
  },
@@ -207,14 +208,14 @@ ruleTester.run('no-color-css-vars', rule, {
207
208
  `,
208
209
  output: `
209
210
  import {merge} from '@primer/react'
210
- export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted)'}, props.sx)}>Test</Button>
211
+ export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted, var(--color-fg-muted))'}, props.sx)}>Test</Button>
211
212
  `,
212
213
  errors: [
213
214
  {
214
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
215
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
215
216
  },
216
217
  {
217
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
218
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
218
219
  },
219
220
  ],
220
221
  },
@@ -233,10 +234,11 @@ ruleTester.run('no-color-css-vars', rule, {
233
234
  `,
234
235
  errors: [
235
236
  {
236
- message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)',
237
+ message:
238
+ 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
237
239
  },
238
240
  {
239
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
241
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
240
242
  },
241
243
  ],
242
244
  },
@@ -254,10 +256,12 @@ ruleTester.run('no-color-css-vars', rule, {
254
256
  `,
255
257
  errors: [
256
258
  {
257
- message: 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis)',
259
+ message:
260
+ 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))',
258
261
  },
259
262
  {
260
- message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)',
263
+ message:
264
+ 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
261
265
  },
262
266
  ],
263
267
  },
@@ -292,14 +296,14 @@ ruleTester.run('no-color-css-vars', rule, {
292
296
  <Box
293
297
  sx={{
294
298
  boxShadow: subtle
295
- ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis)'
296
- : 'inset 2px 0 0 var(--bgColor-attention-emphasis)',
299
+ ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis, var(--color-fg-subtle))'
300
+ : 'inset 2px 0 0 var(--bgColor-attention-emphasis, var(--color-attention-fg))',
297
301
  color: 'var(--fgColor-default)',
298
- bg: 'var(--bgColor-default)',
299
- borderLeft: '1px solid var(--borderColor-default)',
300
- borderRight: '1px solid var(--borderColor-default)',
301
- borderTop: '2px solid var(--borderColor-default)',
302
- borderBottom: '2px solid var(--borderColor-default)',
302
+ bg: 'var(--bgColor-default, var(--color-canvas-default))',
303
+ borderLeft: '1px solid var(--borderColor-default, var(--color-border-default))',
304
+ borderRight: '1px solid var(--borderColor-default, var(--color-border-default))',
305
+ borderTop: '2px solid var(--borderColor-default, var(--color-border-default))',
306
+ borderBottom: '2px solid var(--borderColor-default, var(--color-border-default))',
303
307
  }}
304
308
  />
305
309
  )
@@ -307,25 +311,26 @@ ruleTester.run('no-color-css-vars', rule, {
307
311
  `,
308
312
  errors: [
309
313
  {
310
- message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)',
314
+ message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
311
315
  },
312
316
  {
313
- message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)',
317
+ message:
318
+ 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
314
319
  },
315
320
  {
316
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
321
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
317
322
  },
318
323
  {
319
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
324
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
320
325
  },
321
326
  {
322
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
327
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
323
328
  },
324
329
  {
325
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
330
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
326
331
  },
327
332
  {
328
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
333
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
329
334
  },
330
335
  ],
331
336
  },
@@ -356,10 +361,10 @@ ruleTester.run('no-color-css-vars', rule, {
356
361
  <Box
357
362
  style={{
358
363
  boxShadow: subtle
359
- ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis)'
360
- : 'inset 2px 0 0 var(--bgColor-attention-emphasis)',
364
+ ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis, var(--color-fg-subtle))'
365
+ : 'inset 2px 0 0 var(--bgColor-attention-emphasis, var(--color-attention-fg))',
361
366
  color: 'var(--fgColor-default)',
362
- bg: 'var(--bgColor-default)'
367
+ bg: 'var(--bgColor-default, var(--color-canvas-default))'
363
368
  }}
364
369
  />
365
370
  )
@@ -367,13 +372,14 @@ ruleTester.run('no-color-css-vars', rule, {
367
372
  `,
368
373
  errors: [
369
374
  {
370
- message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)',
375
+ message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
371
376
  },
372
377
  {
373
- message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)',
378
+ message:
379
+ 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
374
380
  },
375
381
  {
376
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
382
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
377
383
  },
378
384
  ],
379
385
  },
@@ -399,28 +405,28 @@ ruleTester.run('no-color-css-vars', rule, {
399
405
  lineHeight: '100%',
400
406
  },
401
407
  thead: {
402
- background: 'var(--bgColor-muted)',
408
+ background: 'var(--bgColor-muted, var(--color-canvas-subtle))',
403
409
  borderBottom: '1px solid',
404
- borderColor: 'var(--borderColor-default)',
410
+ borderColor: 'var(--borderColor-default, var(--color-border-default))',
405
411
  },
406
412
  }
407
413
  `,
408
414
  errors: [
409
415
  {
410
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
416
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
411
417
  },
412
418
  {
413
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
419
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
414
420
  },
415
421
  ],
416
422
  },
417
423
  {
418
424
  name: 'inline sx',
419
425
  code: `<Box sx={{outline: '2px solid var(--color-accent-fg)'}}>Test</Box>`,
420
- output: `<Box sx={{outline: '2px solid var(--focus-outlineColor)'}}>Test</Box>`,
426
+ output: `<Box sx={{outline: '2px solid var(--focus-outlineColor, var(--color-accent-fg))'}}>Test</Box>`,
421
427
  errors: [
422
428
  {
423
- message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor)',
429
+ message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))',
424
430
  },
425
431
  ],
426
432
  },
@@ -436,18 +442,18 @@ ruleTester.run('no-color-css-vars', rule, {
436
442
  `,
437
443
  output: `
438
444
  <Box sx={{
439
- color: 'var(--fgColor-muted)',
445
+ color: 'var(--fgColor-muted, var(--color-fg-subtle))',
440
446
  '&:hover': {
441
- color: 'var(--fgColor-accent)',
447
+ color: 'var(--fgColor-accent, var(--color-accent-fg))',
442
448
  }
443
449
  }}>Test</Box>
444
450
  `,
445
451
  errors: [
446
452
  {
447
- message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted)',
453
+ message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))',
448
454
  },
449
455
  {
450
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
456
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
451
457
  },
452
458
  ],
453
459
  },
@@ -487,7 +493,7 @@ ruleTester.run('no-color-css-vars', rule, {
487
493
  border: 0,
488
494
  padding: 0,
489
495
  background: 'transparent',
490
- color: isSelected ? 'var(--fgColor-default)' : 'var(--fgColor-muted)',
496
+ color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))',
491
497
  fontSize: '12px',
492
498
  fontWeight: '600',
493
499
  display: 'flex',
@@ -501,10 +507,10 @@ ruleTester.run('no-color-css-vars', rule, {
501
507
  `,
502
508
  errors: [
503
509
  {
504
- message: 'Replace var(--color-fg-default) with var(--fgColor-default)',
510
+ message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))',
505
511
  },
506
512
  {
507
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
513
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
508
514
  },
509
515
  ],
510
516
  },
@@ -539,28 +545,29 @@ ruleTester.run('no-color-css-vars', rule, {
539
545
  ...(fullyRounded
540
546
  ? {
541
547
  borderRadius: '5px',
542
- color: 'var(--fgColor-accent)',
548
+ color: 'var(--fgColor-accent, var(--color-accent-fg))',
543
549
  }
544
550
  : {
545
551
  borderTopRightRadius: '5px',
546
552
  borderBottomRightRadius: '5px',
547
- color: 'var(--fgColor-accent)',
553
+ color: 'var(--fgColor-accent, var(--color-accent-fg))',
548
554
  }),
549
555
  overflow: 'hidden',
550
556
  ':has(input:focus-visible)': {
551
- boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis)',
557
+ boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
552
558
  },
553
559
  })
554
560
  `,
555
561
  errors: [
556
562
  {
557
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
563
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
558
564
  },
559
565
  {
560
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
566
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
561
567
  },
562
568
  {
563
- message: 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis)',
569
+ message:
570
+ 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
564
571
  },
565
572
  ],
566
573
  },
@@ -594,23 +601,23 @@ ruleTester.run('no-color-css-vars', rule, {
594
601
  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
595
602
  fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
596
603
  fontSize: '12px',
597
- backgroundColor: 'var(--bgColor-default)',
598
- border: '1px solid var(--borderColor-default)',
604
+ backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))',
605
+ border: '1px solid var(--borderColor-default, var(--color-border-default))',
599
606
  borderRadius: 'var(--borderRadius-medium)',
600
- boxShadow: 'var(--shadow-resting-medium)',
607
+ boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))',
601
608
  minWidth: 'auto',
602
609
  }
603
610
  })
604
611
  `,
605
612
  errors: [
606
613
  {
607
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
614
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
608
615
  },
609
616
  {
610
- message: 'Replace var(--color-border-default) with var(--borderColor-default)',
617
+ message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
611
618
  },
612
619
  {
613
- message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium)',
620
+ message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))',
614
621
  },
615
622
  ],
616
623
  },
@@ -646,19 +653,19 @@ ruleTester.run('no-color-css-vars', rule, {
646
653
 
647
654
  switch (modification) {
648
655
  case 'ADDED':
649
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis)'}
656
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'}
650
657
  case 'REMOVED':
651
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis)'}
658
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'}
652
659
  case 'EDITED':
653
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis)'}
660
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'}
654
661
  case 'accent':
655
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis)'}
662
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'}
656
663
  case 'done':
657
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis)'}
664
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'}
658
665
  case 'closed':
659
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis)'}
666
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'}
660
667
  case 'sponsors':
661
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis)'}
668
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'}
662
669
  case 'UNCHANGED':
663
670
  return {}
664
671
  }
@@ -666,25 +673,26 @@ ruleTester.run('no-color-css-vars', rule, {
666
673
  `,
667
674
  errors: [
668
675
  {
669
- message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis)',
676
+ message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))',
670
677
  },
671
678
  {
672
- message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis)',
679
+ message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))',
673
680
  },
674
681
  {
675
- message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis)',
682
+ message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))',
676
683
  },
677
684
  {
678
- message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis)',
685
+ message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))',
679
686
  },
680
687
  {
681
- message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis)',
688
+ message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))',
682
689
  },
683
690
  {
684
- message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis)',
691
+ message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))',
685
692
  },
686
693
  {
687
- message: 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis)',
694
+ message:
695
+ 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))',
688
696
  },
689
697
  ],
690
698
  },