@primer/primitives 7.17.0-rc.d7413369 → 7.17.0

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 (79) hide show
  1. package/README.md +1 -1
  2. package/dist/css/functional/typography/typography.css +1 -1
  3. package/dist/docs/base/typography/typography.json +52 -4
  4. package/dist/docs/functional/themes/dark-colorblind.json +78 -78
  5. package/dist/docs/functional/themes/dark-dimmed.json +73 -73
  6. package/dist/docs/functional/themes/dark-high-contrast.json +75 -75
  7. package/dist/docs/functional/themes/dark-tritanopia.json +78 -78
  8. package/dist/docs/functional/themes/dark.json +73 -73
  9. package/dist/docs/functional/themes/light-colorblind.json +76 -76
  10. package/dist/docs/functional/themes/light-high-contrast.json +70 -70
  11. package/dist/docs/functional/themes/light-tritanopia.json +76 -76
  12. package/dist/docs/functional/themes/light.json +71 -71
  13. package/dist/docs/functional/typography/typography.json +455 -33
  14. package/dist/fallbacks/functional/typography/typography.json +1 -1
  15. package/dist/figma/figma.json +8 -0
  16. package/dist/figma/scales/dark-dimmed.json +20 -20
  17. package/dist/figma/scales/dark-high-constrast.json +20 -20
  18. package/dist/figma/scales/dark.json +20 -20
  19. package/dist/figma/scales/light-high-constrast.json +20 -20
  20. package/dist/figma/scales/light.json +20 -20
  21. package/dist/figma/themes/dark-colorblind.json +70 -70
  22. package/dist/figma/themes/dark-dimmed.json +65 -65
  23. package/dist/figma/themes/dark-high-contrast.json +69 -69
  24. package/dist/figma/themes/dark-tritanopia.json +70 -70
  25. package/dist/figma/themes/dark.json +65 -65
  26. package/dist/figma/themes/light-colorblind.json +59 -59
  27. package/dist/figma/themes/light-high-contrast.json +55 -55
  28. package/dist/figma/themes/light-tritanopia.json +59 -59
  29. package/dist/figma/themes/light.json +54 -54
  30. package/dist/figma/typography/typography.json +338 -0
  31. package/dist/internalCss/dark-colorblind.css +20 -20
  32. package/dist/internalCss/dark-dimmed.css +20 -20
  33. package/dist/internalCss/dark-high-contrast.css +20 -20
  34. package/dist/internalCss/dark-tritanopia.css +20 -20
  35. package/dist/internalCss/dark.css +20 -20
  36. package/dist/internalCss/light-colorblind.css +20 -20
  37. package/dist/internalCss/light-high-contrast.css +20 -20
  38. package/dist/internalCss/light-tritanopia.css +20 -20
  39. package/dist/internalCss/light.css +20 -20
  40. package/dist/styleLint/base/typography/typography.json +52 -4
  41. package/dist/styleLint/functional/themes/dark-colorblind.json +78 -78
  42. package/dist/styleLint/functional/themes/dark-dimmed.json +73 -73
  43. package/dist/styleLint/functional/themes/dark-high-contrast.json +75 -75
  44. package/dist/styleLint/functional/themes/dark-tritanopia.json +78 -78
  45. package/dist/styleLint/functional/themes/dark.json +73 -73
  46. package/dist/styleLint/functional/themes/light-colorblind.json +76 -76
  47. package/dist/styleLint/functional/themes/light-high-contrast.json +70 -70
  48. package/dist/styleLint/functional/themes/light-tritanopia.json +76 -76
  49. package/dist/styleLint/functional/themes/light.json +71 -71
  50. package/dist/styleLint/functional/typography/typography.json +455 -33
  51. package/package.json +2 -2
  52. package/src/PrimerStyleDictionary.ts +6 -0
  53. package/src/platforms/figma.ts +1 -0
  54. package/src/schemas/numberToken.ts +17 -0
  55. package/src/tokens/base/color/dark/dark.dimmed.json5 +1 -1
  56. package/src/tokens/base/color/dark/dark.high-contrast.json5 +1 -1
  57. package/src/tokens/base/color/dark/dark.json5 +1 -1
  58. package/src/tokens/base/color/light/light.high-contrast.json5 +1 -1
  59. package/src/tokens/base/color/light/light.json5 +1 -1
  60. package/src/tokens/base/typography/typography.json +28 -4
  61. package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
  62. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +17 -17
  63. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -5
  64. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -5
  65. package/src/tokens/functional/color/dark/patterns-dark.json5 +42 -42
  66. package/src/tokens/functional/color/dark/primitives-dark.json5 +16 -16
  67. package/src/tokens/functional/color/dark/syntax-dark.json5 +13 -13
  68. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  69. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
  70. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -5
  71. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -5
  72. package/src/tokens/functional/color/light/patterns-light.json5 +30 -30
  73. package/src/tokens/functional/color/light/primitives-light.json5 +15 -15
  74. package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
  75. package/src/tokens/functional/shadow/dark.json5 +1 -1
  76. package/src/tokens/functional/shadow/light.json5 +11 -11
  77. package/src/tokens/functional/typography/typography.json +242 -31
  78. package/src/transformers/floatToPixel.ts +33 -0
  79. package/src/transformers/index.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "7.17.0-rc.d7413369",
3
+ "version": "7.17.0",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
@@ -43,7 +43,7 @@
43
43
  "prepack": "npm run build && npm run build:next",
44
44
  "prepare": "husky",
45
45
  "release": "changeset publish",
46
- "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
46
+ "start:storybook": "npm run build && npm run build:next && cd docs/storybook && npm run storybook",
47
47
  "test": "jest --verbose --coverage"
48
48
  },
49
49
  "prettier": "@github/prettier-config",
package/src/PrimerStyleDictionary.ts CHANGED
@@ -23,6 +23,7 @@ import {
23
23
  shadowToCss,
24
24
  typographyToCss,
25
25
  dimensionToRemPxArray,
26
+ floatToPixel,
26
27
  } from './transformers'
27
28
  import {
28
29
  javascriptCommonJs,
@@ -132,6 +133,11 @@ StyleDictionary.registerTransform({
132
133
  ...colorToHex,
133
134
  })
134
135
 
136
+ StyleDictionary.registerTransform({
137
+ name: 'float/pixel',
138
+ ...floatToPixel,
139
+ })
140
+
135
141
  StyleDictionary.registerTransform({
136
142
  name: 'dimension/rem',
137
143
  ...dimensionToRem,
package/src/platforms/figma.ts CHANGED
@@ -28,6 +28,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
28
28
  // 'name/pathToSlashNotation',
29
29
  'figma/attributes',
30
30
  'fontFamily/figma',
31
+ 'float/pixel',
31
32
  'dimension/pixelUnitless',
32
33
  // 'border/figma',
33
34
  // 'typography/figma',
package/src/schemas/numberToken.ts CHANGED
@@ -2,10 +2,27 @@ import {z} from 'zod'
2
2
  import {baseToken} from './baseToken'
3
3
  import {referenceValue} from './referenceValue'
4
4
  import {tokenType} from './tokenType'
5
+ import {scopes} from './scopes'
6
+ import {collection} from './collections'
5
7
 
6
8
  export const numberToken = baseToken
7
9
  .extend({
8
10
  $value: z.union([z.number(), referenceValue]),
9
11
  $type: tokenType('number'),
12
+ $extensions: z
13
+ .object({
14
+ 'org.primer.data': z
15
+ .object({
16
+ fontSize: z.number().optional(),
17
+ })
18
+ .optional(),
19
+ 'org.primer.figma': z
20
+ .object({
21
+ collection: collection(['typography']).optional(),
22
+ scopes: scopes(['all']).optional(),
23
+ })
24
+ .optional(),
25
+ })
26
+ .optional(),
10
27
  })
11
28
  .strict()
package/src/tokens/base/color/dark/dark.dimmed.json5 CHANGED
@@ -43,7 +43,7 @@
43
43
  },
44
44
  },
45
45
  },
46
- gray: {
46
+ neutral: {
47
47
  '0': {
48
48
  $value: '#cdd9e5',
49
49
  $type: 'color',
package/src/tokens/base/color/dark/dark.high-contrast.json5 CHANGED
@@ -23,7 +23,7 @@
23
23
  },
24
24
  },
25
25
  },
26
- gray: {
26
+ neutral: {
27
27
  '0': {
28
28
  $value: '#ffffff',
29
29
  $type: 'color',
package/src/tokens/base/color/dark/dark.json5 CHANGED
@@ -33,7 +33,7 @@
33
33
  },
34
34
  alpha: 0,
35
35
  },
36
- gray: {
36
+ neutral: {
37
37
  '0': {
38
38
  $value: '#f0f6fc',
39
39
  $type: 'color',
package/src/tokens/base/color/light/light.high-contrast.json5 CHANGED
@@ -14,7 +14,7 @@
14
14
  },
15
15
  },
16
16
  },
17
- gray: {
17
+ neutral: {
18
18
  '0': {
19
19
  $value: '#ffffff',
20
20
  $type: 'color',
package/src/tokens/base/color/light/light.json5 CHANGED
@@ -33,7 +33,7 @@
33
33
  },
34
34
  },
35
35
  },
36
- gray: {
36
+ neutral: {
37
37
  '0': {
38
38
  $value: '#f6f8fa',
39
39
  $type: 'color',
package/src/tokens/base/typography/typography.json CHANGED
@@ -4,19 +4,43 @@
4
4
  "weight": {
5
5
  "light": {
6
6
  "$type": "fontWeight",
7
- "$value": 300
7
+ "$value": 300,
8
+ "$extensions": {
9
+ "org.primer.figma": {
10
+ "collection": "base/typography",
11
+ "scopes": ["all"]
12
+ }
13
+ }
8
14
  },
9
15
  "normal": {
10
16
  "$value": 400,
11
- "$type": "fontWeight"
17
+ "$type": "fontWeight",
18
+ "$extensions": {
19
+ "org.primer.figma": {
20
+ "collection": "base/typography",
21
+ "scopes": ["all"]
22
+ }
23
+ }
12
24
  },
13
25
  "medium": {
14
26
  "$value": 500,
15
- "$type": "fontWeight"
27
+ "$type": "fontWeight",
28
+ "$extensions": {
29
+ "org.primer.figma": {
30
+ "collection": "base/typography",
31
+ "scopes": ["all"]
32
+ }
33
+ }
16
34
  },
17
35
  "semibold": {
18
36
  "$value": 600,
19
- "$type": "fontWeight"
37
+ "$type": "fontWeight",
38
+ "$extensions": {
39
+ "org.primer.figma": {
40
+ "collection": "base/typography",
41
+ "scopes": ["all"]
42
+ }
43
+ }
20
44
  }
21
45
  }
22
46
  }
package/src/tokens/functional/color/dark/app-dark.json5 CHANGED
@@ -372,7 +372,7 @@
372
372
  syntax: {
373
373
  fgColor: {
374
374
  comment: {
375
- $value: '{base.color.gray.3}',
375
+ $value: '{base.color.neutral.3}',
376
376
  $type: 'color',
377
377
  $extensions: {
378
378
  'org.primer.figma': {
@@ -499,7 +499,7 @@
499
499
  },
500
500
  },
501
501
  bgColor: {
502
- $value: '{base.color.gray.9}',
502
+ $value: '{base.color.neutral.9}',
503
503
  $type: 'color',
504
504
  $extensions: {
505
505
  'org.primer.figma': {
@@ -512,7 +512,7 @@
512
512
  },
513
513
  borderColor: {
514
514
  divider: {
515
- $value: '{base.color.gray.3}',
515
+ $value: '{base.color.neutral.3}',
516
516
  $type: 'color',
517
517
  $extensions: {
518
518
  'org.primer.figma': {
@@ -527,7 +527,7 @@
527
527
  },
528
528
  headerSearch: {
529
529
  bgColor: {
530
- $value: '{base.color.gray.9}',
530
+ $value: '{base.color.neutral.9}',
531
531
  $type: 'color',
532
532
  $extensions: {
533
533
  'org.primer.figma': {
@@ -539,7 +539,7 @@
539
539
  },
540
540
  },
541
541
  borderColor: {
542
- $value: '{base.color.gray.6}',
542
+ $value: '{base.color.neutral.6}',
543
543
  $type: 'color',
544
544
  $extensions: {
545
545
  'org.primer.figma': {
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -6,17 +6,17 @@
6
6
  {
7
7
  fgColor: {
8
8
  onEmphasis: {
9
- $value: '{base.color.gray.9}',
9
+ $value: '{base.color.neutral.9}',
10
10
  $type: 'color',
11
11
  },
12
12
  muted: {
13
- $value: '{base.color.gray.1}',
13
+ $value: '{base.color.neutral.1}',
14
14
  $type: 'color',
15
15
  mix: null,
16
16
  alpha: 1,
17
17
  },
18
18
  disabled: {
19
- $value: '{base.color.gray.4}',
19
+ $value: '{base.color.neutral.4}',
20
20
  $type: 'color',
21
21
  },
22
22
  },
@@ -27,29 +27,29 @@
27
27
  },
28
28
  neutral: {
29
29
  emphasis: {
30
- $value: '{base.color.gray.4}',
30
+ $value: '{base.color.neutral.4}',
31
31
  $type: 'color',
32
32
  },
33
33
  },
34
34
  },
35
35
  borderColor: {
36
36
  default: {
37
- $value: '{base.color.gray.5}',
37
+ $value: '{base.color.neutral.5}',
38
38
  $type: 'color',
39
39
  },
40
40
  muted: {
41
- $value: '{base.color.gray.5}',
41
+ $value: '{base.color.neutral.5}',
42
42
  $type: 'color',
43
43
  alpha: 1,
44
44
  },
45
45
  neutral: {
46
46
  muted: {
47
- $value: '{base.color.gray.4}',
47
+ $value: '{base.color.neutral.4}',
48
48
  $type: 'color',
49
49
  alpha: 1,
50
50
  },
51
51
  emphasis: {
52
- $value: '{base.color.gray.4}',
52
+ $value: '{base.color.neutral.4}',
53
53
  $type: 'color',
54
54
  },
55
55
  },
@@ -120,7 +120,7 @@
120
120
  control: {
121
121
  bgColor: {
122
122
  selected: {
123
- $value: '{base.color.gray.6}',
123
+ $value: '{base.color.neutral.6}',
124
124
  $type: 'color',
125
125
  },
126
126
  },
@@ -134,17 +134,17 @@
134
134
  transparent: {
135
135
  bgColor: {
136
136
  hover: {
137
- $value: '{base.color.gray.8}',
137
+ $value: '{base.color.neutral.8}',
138
138
  $type: 'color',
139
139
  alpha: 1,
140
140
  },
141
141
  active: {
142
- $value: '{base.color.gray.6}',
142
+ $value: '{base.color.neutral.6}',
143
143
  $type: 'color',
144
144
  alpha: 1,
145
145
  },
146
146
  selected: {
147
- $value: '{base.color.gray.6}',
147
+ $value: '{base.color.neutral.6}',
148
148
  $type: 'color',
149
149
  alpha: 1,
150
150
  },
@@ -155,7 +155,7 @@
155
155
  $type: 'color',
156
156
  },
157
157
  active: {
158
- $value: '{base.color.gray.4}',
158
+ $value: '{base.color.neutral.4}',
159
159
  $type: 'color',
160
160
  },
161
161
  },
@@ -249,13 +249,13 @@
249
249
  },
250
250
  bgColor: {
251
251
  hover: {
252
- $value: '{base.color.gray.1}',
252
+ $value: '{base.color.neutral.1}',
253
253
  $type: 'color',
254
254
  alpha: null,
255
255
  mix: null,
256
256
  },
257
257
  active: {
258
- $value: '{base.color.gray.2}',
258
+ $value: '{base.color.neutral.2}',
259
259
  $type: 'color',
260
260
  alpha: null,
261
261
  mix: null,
@@ -354,13 +354,13 @@
354
354
  underlineNav: {
355
355
  borderColor: {
356
356
  hover: {
357
- $value: '{base.color.gray.3}',
357
+ $value: '{base.color.neutral.3}',
358
358
  $type: 'color',
359
359
  },
360
360
  },
361
361
  iconColor: {
362
362
  rest: {
363
- $value: '{base.color.gray.1}',
363
+ $value: '{base.color.neutral.1}',
364
364
  $type: 'color',
365
365
  },
366
366
  },
package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 CHANGED
@@ -25,7 +25,7 @@
25
25
  },
26
26
  closed: {
27
27
  '@': {
28
- $value: '{base.color.gray.3}',
28
+ $value: '{base.color.neutral.3}',
29
29
  $type: 'color',
30
30
  },
31
31
  },
@@ -66,12 +66,12 @@
66
66
  },
67
67
  closed: {
68
68
  muted: {
69
- $value: '{base.color.gray.4}',
69
+ $value: '{base.color.neutral.4}',
70
70
  $type: 'color',
71
71
  alpha: 0.4,
72
72
  },
73
73
  emphasis: {
74
- $value: '{base.color.gray.4}',
74
+ $value: '{base.color.neutral.4}',
75
75
  $type: 'color',
76
76
  },
77
77
  },
@@ -90,12 +90,12 @@
90
90
  },
91
91
  closed: {
92
92
  muted: {
93
- $value: '{base.color.gray.4}',
93
+ $value: '{base.color.neutral.4}',
94
94
  $type: 'color',
95
95
  alpha: 0.4,
96
96
  },
97
97
  emphasis: {
98
- $value: '{base.color.gray.4}',
98
+ $value: '{base.color.neutral.4}',
99
99
  $type: 'color',
100
100
  },
101
101
  },
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -25,7 +25,7 @@
25
25
  },
26
26
  closed: {
27
27
  '@': {
28
- $value: '{base.color.gray.4}',
28
+ $value: '{base.color.neutral.4}',
29
29
  $type: 'color',
30
30
  },
31
31
  },
@@ -63,11 +63,11 @@
63
63
  },
64
64
  closed: {
65
65
  muted: {
66
- $value: '{base.color.gray.4}',
66
+ $value: '{base.color.neutral.4}',
67
67
  $type: 'color',
68
68
  },
69
69
  emphasis: {
70
- $value: '{base.color.gray.5}',
70
+ $value: '{base.color.neutral.5}',
71
71
  $type: 'color',
72
72
  },
73
73
  },
@@ -108,12 +108,12 @@
108
108
  },
109
109
  closed: {
110
110
  muted: {
111
- $value: '{base.color.gray.4}',
111
+ $value: '{base.color.neutral.4}',
112
112
  $type: 'color',
113
113
  alpha: 0.4,
114
114
  },
115
115
  emphasis: {
116
- $value: '{base.color.gray.5}',
116
+ $value: '{base.color.neutral.5}',
117
117
  $type: 'color',
118
118
  },
119
119
  },