@primer/primitives 8.2.2 → 8.2.3-rc.441bfd58

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 (55) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +4 -2
  2. package/dist/css/functional/themes/dark-dimmed.css +4 -2
  3. package/dist/css/functional/themes/dark-high-contrast.css +4 -2
  4. package/dist/css/functional/themes/dark-tritanopia.css +4 -2
  5. package/dist/css/functional/themes/dark.css +4 -2
  6. package/dist/css/functional/themes/light-colorblind.css +4 -2
  7. package/dist/css/functional/themes/light-high-contrast.css +4 -2
  8. package/dist/css/functional/themes/light-tritanopia.css +4 -2
  9. package/dist/css/functional/themes/light.css +4 -2
  10. package/dist/docs/functional/themes/dark-colorblind.json +43 -6
  11. package/dist/docs/functional/themes/dark-dimmed.json +43 -6
  12. package/dist/docs/functional/themes/dark-high-contrast.json +42 -3
  13. package/dist/docs/functional/themes/dark-tritanopia.json +43 -6
  14. package/dist/docs/functional/themes/dark.json +43 -6
  15. package/dist/docs/functional/themes/light-colorblind.json +42 -5
  16. package/dist/docs/functional/themes/light-high-contrast.json +41 -2
  17. package/dist/docs/functional/themes/light-tritanopia.json +42 -5
  18. package/dist/docs/functional/themes/light.json +42 -5
  19. package/dist/figma/figma.json +2 -2
  20. package/dist/figma/themes/dark-colorblind.json +38 -21
  21. package/dist/figma/themes/dark-dimmed.json +38 -21
  22. package/dist/figma/themes/dark-high-contrast.json +22 -4
  23. package/dist/figma/themes/dark-tritanopia.json +38 -21
  24. package/dist/figma/themes/dark.json +38 -21
  25. package/dist/figma/themes/light-colorblind.json +37 -20
  26. package/dist/figma/themes/light-high-contrast.json +21 -3
  27. package/dist/figma/themes/light-tritanopia.json +37 -20
  28. package/dist/figma/themes/light.json +37 -20
  29. package/dist/internalCss/dark-colorblind.css +4 -2
  30. package/dist/internalCss/dark-dimmed.css +4 -2
  31. package/dist/internalCss/dark-high-contrast.css +4 -2
  32. package/dist/internalCss/dark-tritanopia.css +4 -2
  33. package/dist/internalCss/dark.css +4 -2
  34. package/dist/internalCss/light-colorblind.css +4 -2
  35. package/dist/internalCss/light-high-contrast.css +4 -2
  36. package/dist/internalCss/light-tritanopia.css +4 -2
  37. package/dist/internalCss/light.css +4 -2
  38. package/dist/removed/testing.json5 +4 -0
  39. package/dist/styleLint/functional/themes/dark-colorblind.json +43 -6
  40. package/dist/styleLint/functional/themes/dark-dimmed.json +43 -6
  41. package/dist/styleLint/functional/themes/dark-high-contrast.json +42 -3
  42. package/dist/styleLint/functional/themes/dark-tritanopia.json +43 -6
  43. package/dist/styleLint/functional/themes/dark.json +43 -6
  44. package/dist/styleLint/functional/themes/light-colorblind.json +42 -5
  45. package/dist/styleLint/functional/themes/light-high-contrast.json +41 -2
  46. package/dist/styleLint/functional/themes/light-tritanopia.json +42 -5
  47. package/dist/styleLint/functional/themes/light.json +42 -5
  48. package/package.json +1 -3
  49. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +5 -0
  50. package/src/tokens/functional/color/dark/patterns-dark.json5 +6 -3
  51. package/src/tokens/functional/color/dark/primitives-dark.json5 +13 -0
  52. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +5 -0
  53. package/src/tokens/functional/color/light/patterns-light.json5 +5 -2
  54. package/src/tokens/functional/color/light/primitives-light.json5 +13 -0
  55. package/src/tokens/removed/testing.json5 +4 -0
@@ -4550,9 +4550,9 @@
4550
4550
  "scopes": ["borderColor"]
4551
4551
  }
4552
4552
  },
4553
- "alpha": 0.9,
4554
4553
  "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
4555
4554
  "isSource": true,
4555
+ "alpha": 0.9,
4556
4556
  "original": {
4557
4557
  "value": "{base.color.black}",
4558
4558
  "$type": "color",
@@ -4855,8 +4855,12 @@
4855
4855
  "path": ["control", "fgColor", "rest"]
4856
4856
  },
4857
4857
  "control-fgColor-placeholder": {
4858
- "value": "#66707b",
4858
+ "value": "#616a75",
4859
4859
  "$type": "color",
4860
+ "mix": {
4861
+ "color": "#4b535d",
4862
+ "weight": 0.2
4863
+ },
4860
4864
  "$extensions": {
4861
4865
  "org.primer.figma": {
4862
4866
  "collection": "mode",
@@ -4870,6 +4874,10 @@
4870
4874
  "original": {
4871
4875
  "value": "{base.color.neutral.5}",
4872
4876
  "$type": "color",
4877
+ "mix": {
4878
+ "color": "{base.color.neutral.6}",
4879
+ "weight": 0.2
4880
+ },
4873
4881
  "$extensions": {
4874
4882
  "org.primer.figma": {
4875
4883
  "collection": "mode",
@@ -14419,6 +14427,37 @@
14419
14427
  "attributes": {},
14420
14428
  "path": ["borderColor", "transparent"]
14421
14429
  },
14430
+ "borderColor-translucent": {
14431
+ "value": "#20252c",
14432
+ "$type": "color",
14433
+ "$extensions": {
14434
+ "org.primer.figma": {
14435
+ "collection": "mode",
14436
+ "mode": "light",
14437
+ "group": "semantic",
14438
+ "scopes": ["borderColor"]
14439
+ }
14440
+ },
14441
+ "alpha": 1,
14442
+ "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
14443
+ "isSource": true,
14444
+ "original": {
14445
+ "value": "{base.color.neutral.8}",
14446
+ "$type": "color",
14447
+ "$extensions": {
14448
+ "org.primer.figma": {
14449
+ "collection": "mode",
14450
+ "mode": "light",
14451
+ "group": "semantic",
14452
+ "scopes": ["borderColor"]
14453
+ }
14454
+ },
14455
+ "alpha": 1
14456
+ },
14457
+ "name": "borderColor-translucent",
14458
+ "attributes": {},
14459
+ "path": ["borderColor", "translucent"]
14460
+ },
14422
14461
  "borderColor-neutral-muted": {
14423
14462
  "value": "#88929d",
14424
14463
  "$type": "color",
@@ -4548,11 +4548,10 @@
4548
4548
  "scopes": ["borderColor"]
4549
4549
  }
4550
4550
  },
4551
- "alpha": 0.15,
4552
4551
  "filePath": "src/tokens/functional/color/light/patterns-light.json5",
4553
4552
  "isSource": true,
4554
4553
  "original": {
4555
- "value": "{base.color.black}",
4554
+ "value": "{borderColor.translucent}",
4556
4555
  "$type": "color",
4557
4556
  "$extensions": {
4558
4557
  "org.primer.figma": {
@@ -4561,8 +4560,7 @@
4561
4560
  "group": "component (internal)",
4562
4561
  "scopes": ["borderColor"]
4563
4562
  }
4564
- },
4565
- "alpha": 0.15
4563
+ }
4566
4564
  },
4567
4565
  "name": "avatar-borderColor",
4568
4566
  "attributes": {},
@@ -4853,8 +4851,12 @@
4853
4851
  "path": ["control", "fgColor", "rest"]
4854
4852
  },
4855
4853
  "control-fgColor-placeholder": {
4856
- "value": "#6e7781",
4854
+ "value": "#69727c",
4857
4855
  "$type": "color",
4856
+ "mix": {
4857
+ "color": "#57606a",
4858
+ "weight": 0.2
4859
+ },
4858
4860
  "$extensions": {
4859
4861
  "org.primer.figma": {
4860
4862
  "collection": "mode",
@@ -4868,6 +4870,10 @@
4868
4870
  "original": {
4869
4871
  "value": "{base.color.neutral.5}",
4870
4872
  "$type": "color",
4873
+ "mix": {
4874
+ "color": "{base.color.neutral.6}",
4875
+ "weight": 0.2
4876
+ },
4871
4877
  "$extensions": {
4872
4878
  "org.primer.figma": {
4873
4879
  "collection": "mode",
@@ -14407,6 +14413,37 @@
14407
14413
  "attributes": {},
14408
14414
  "path": ["borderColor", "transparent"]
14409
14415
  },
14416
+ "borderColor-translucent": {
14417
+ "value": "#1f232826",
14418
+ "$type": "color",
14419
+ "$extensions": {
14420
+ "org.primer.figma": {
14421
+ "collection": "mode",
14422
+ "mode": "light",
14423
+ "group": "semantic",
14424
+ "scopes": ["borderColor"]
14425
+ }
14426
+ },
14427
+ "alpha": 0.15,
14428
+ "filePath": "src/tokens/functional/color/light/primitives-light.json5",
14429
+ "isSource": true,
14430
+ "original": {
14431
+ "value": "{base.color.black}",
14432
+ "$type": "color",
14433
+ "$extensions": {
14434
+ "org.primer.figma": {
14435
+ "collection": "mode",
14436
+ "mode": "light",
14437
+ "group": "semantic",
14438
+ "scopes": ["borderColor"]
14439
+ }
14440
+ },
14441
+ "alpha": 0.15
14442
+ },
14443
+ "name": "borderColor-translucent",
14444
+ "attributes": {},
14445
+ "path": ["borderColor", "translucent"]
14446
+ },
14410
14447
  "borderColor-neutral-muted": {
14411
14448
  "value": "#afb8c133",
14412
14449
  "$type": "color",
@@ -4548,11 +4548,10 @@
4548
4548
  "scopes": ["borderColor"]
4549
4549
  }
4550
4550
  },
4551
- "alpha": 0.15,
4552
4551
  "filePath": "src/tokens/functional/color/light/patterns-light.json5",
4553
4552
  "isSource": true,
4554
4553
  "original": {
4555
- "value": "{base.color.black}",
4554
+ "value": "{borderColor.translucent}",
4556
4555
  "$type": "color",
4557
4556
  "$extensions": {
4558
4557
  "org.primer.figma": {
@@ -4561,8 +4560,7 @@
4561
4560
  "group": "component (internal)",
4562
4561
  "scopes": ["borderColor"]
4563
4562
  }
4564
- },
4565
- "alpha": 0.15
4563
+ }
4566
4564
  },
4567
4565
  "name": "avatar-borderColor",
4568
4566
  "attributes": {},
@@ -4853,8 +4851,12 @@
4853
4851
  "path": ["control", "fgColor", "rest"]
4854
4852
  },
4855
4853
  "control-fgColor-placeholder": {
4856
- "value": "#6e7781",
4854
+ "value": "#69727c",
4857
4855
  "$type": "color",
4856
+ "mix": {
4857
+ "color": "#57606a",
4858
+ "weight": 0.2
4859
+ },
4858
4860
  "$extensions": {
4859
4861
  "org.primer.figma": {
4860
4862
  "collection": "mode",
@@ -4868,6 +4870,10 @@
4868
4870
  "original": {
4869
4871
  "value": "{base.color.neutral.5}",
4870
4872
  "$type": "color",
4873
+ "mix": {
4874
+ "color": "{base.color.neutral.6}",
4875
+ "weight": 0.2
4876
+ },
4871
4877
  "$extensions": {
4872
4878
  "org.primer.figma": {
4873
4879
  "collection": "mode",
@@ -14407,6 +14413,37 @@
14407
14413
  "attributes": {},
14408
14414
  "path": ["borderColor", "transparent"]
14409
14415
  },
14416
+ "borderColor-translucent": {
14417
+ "value": "#1f232826",
14418
+ "$type": "color",
14419
+ "$extensions": {
14420
+ "org.primer.figma": {
14421
+ "collection": "mode",
14422
+ "mode": "light",
14423
+ "group": "semantic",
14424
+ "scopes": ["borderColor"]
14425
+ }
14426
+ },
14427
+ "alpha": 0.15,
14428
+ "filePath": "src/tokens/functional/color/light/primitives-light.json5",
14429
+ "isSource": true,
14430
+ "original": {
14431
+ "value": "{base.color.black}",
14432
+ "$type": "color",
14433
+ "$extensions": {
14434
+ "org.primer.figma": {
14435
+ "collection": "mode",
14436
+ "mode": "light",
14437
+ "group": "semantic",
14438
+ "scopes": ["borderColor"]
14439
+ }
14440
+ },
14441
+ "alpha": 0.15
14442
+ },
14443
+ "name": "borderColor-translucent",
14444
+ "attributes": {},
14445
+ "path": ["borderColor", "translucent"]
14446
+ },
14410
14447
  "borderColor-neutral-muted": {
14411
14448
  "value": "#afb8c133",
14412
14449
  "$type": "color",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "8.2.2",
3
+ "version": "8.2.3-rc.441bfd58",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
@@ -53,11 +53,9 @@
53
53
  "@types/node": "^20.4.0",
54
54
  "@typescript-eslint/eslint-plugin": "^5.61.0",
55
55
  "@typescript-eslint/parser": "^5.61.0",
56
- "camelcase-keys": "^6.2.2",
57
56
  "color-blend": "^4.0.0",
58
57
  "color2k": "^2.0.0",
59
58
  "console-table-printer": "^2.11.1",
60
- "deepmerge": "^4.2.2",
61
59
  "eslint": "^8.12.0",
62
60
  "eslint-config-prettier": "^8.6.0",
63
61
  "eslint-import-resolver-typescript": "^3.5.3",
@@ -42,6 +42,11 @@
42
42
  $type: 'color',
43
43
  alpha: 1,
44
44
  },
45
+ translucent: {
46
+ $value: '{base.color.neutral.5}',
47
+ $type: 'color',
48
+ alpha: 1,
49
+ },
45
50
  neutral: {
46
51
  muted: {
47
52
  $value: '{base.color.neutral.4}',
@@ -14,7 +14,7 @@
14
14
  alpha: 0.1,
15
15
  },
16
16
  borderColor: {
17
- $value: '{base.color.white}',
17
+ $value: '{borderColor.translucent}',
18
18
  $type: 'color',
19
19
  $extensions: {
20
20
  'org.primer.figma': {
@@ -24,7 +24,6 @@
24
24
  scopes: ['borderColor'],
25
25
  },
26
26
  },
27
- alpha: 0.15,
28
27
  },
29
28
  },
30
29
  avatarStack: {
@@ -142,8 +141,12 @@
142
141
  },
143
142
  },
144
143
  placeholder: {
145
- $value: '{base.color.neutral.5}',
144
+ $value: '{base.color.neutral.3}',
146
145
  $type: 'color',
146
+ mix: {
147
+ color: '{base.color.neutral.4}',
148
+ weight: 0.2,
149
+ },
147
150
  $extensions: {
148
151
  'org.primer.figma': {
149
152
  collection: 'mode',
@@ -846,6 +846,19 @@
846
846
  },
847
847
  },
848
848
  },
849
+ translucent: {
850
+ $value: '{base.color.white}',
851
+ $type: 'color',
852
+ $extensions: {
853
+ 'org.primer.figma': {
854
+ collection: 'mode',
855
+ mode: 'dark',
856
+ group: 'component (internal)',
857
+ scopes: ['borderColor'],
858
+ },
859
+ },
860
+ alpha: 0.15,
861
+ },
849
862
  neutral: {
850
863
  muted: {
851
864
  $value: '{base.color.neutral.4}',
@@ -71,6 +71,11 @@
71
71
  $type: 'color',
72
72
  alpha: 1,
73
73
  },
74
+ translucent: {
75
+ $value: '{base.color.neutral.8}',
76
+ $type: 'color',
77
+ alpha: 1,
78
+ },
74
79
  neutral: {
75
80
  muted: {
76
81
  $value: '{base.color.neutral.4}',
@@ -13,7 +13,7 @@
13
13
  },
14
14
  },
15
15
  borderColor: {
16
- $value: '{base.color.black}',
16
+ $value: '{borderColor.translucent}',
17
17
  $type: 'color',
18
18
  $extensions: {
19
19
  'org.primer.figma': {
@@ -23,7 +23,6 @@
23
23
  scopes: ['borderColor'],
24
24
  },
25
25
  },
26
- alpha: 0.15,
27
26
  },
28
27
  },
29
28
  avatarStack: {
@@ -143,6 +142,10 @@
143
142
  placeholder: {
144
143
  $value: '{base.color.neutral.5}',
145
144
  $type: 'color',
145
+ mix: {
146
+ color: '{base.color.neutral.6}',
147
+ weight: 0.2,
148
+ },
146
149
  $extensions: {
147
150
  'org.primer.figma': {
148
151
  collection: 'mode',
@@ -836,6 +836,19 @@
836
836
  },
837
837
  },
838
838
  },
839
+ translucent: {
840
+ $value: '{base.color.black}',
841
+ $type: 'color',
842
+ $extensions: {
843
+ 'org.primer.figma': {
844
+ collection: 'mode',
845
+ mode: 'light',
846
+ group: 'semantic',
847
+ scopes: ['borderColor'],
848
+ },
849
+ },
850
+ alpha: 0.15,
851
+ },
839
852
  neutral: {
840
853
  muted: {
841
854
  $value: '{base.color.neutral.3}',
@@ -0,0 +1,4 @@
1
+ /* rename token to trigger actions to run on token change */
2
+ {
3
+ "testing": null
4
+ }