@primer/primitives 7.17.0-rc.ac784da5 → 7.17.0-rc.b867cc85
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.
- package/dist/docs/functional/typography/typography.json +39 -3
- package/dist/figma/figma.json +10 -1
- package/dist/figma/typography/typography.json +32 -0
- package/dist/styleLint/functional/typography/typography.json +39 -3
- package/package.json +1 -1
- package/src/formats/jsonFigma.ts +1 -0
- package/src/platforms/figma.ts +3 -1
- package/src/tokens/functional/typography/typography.json +21 -3
- package/src/transformers/fontFamilyToCss.ts +2 -3
- package/src/transformers/fontFamilyToFigma.ts +12 -0
- package/src/transformers/utilities/hasSpaceInString.ts +6 -0
- package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
- package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
- package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
- package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
- package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
- package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
|
@@ -2,11 +2,23 @@
|
|
|
2
2
|
"fontStack-system": {
|
|
3
3
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
4
|
"$type": "fontFamily",
|
|
5
|
+
"$extensions": {
|
|
6
|
+
"org.primer.figma": {
|
|
7
|
+
"collection": "typography",
|
|
8
|
+
"scopes": ["all"]
|
|
9
|
+
}
|
|
10
|
+
},
|
|
5
11
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
6
12
|
"isSource": true,
|
|
7
13
|
"original": {
|
|
8
14
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
9
|
-
"$type": "fontFamily"
|
|
15
|
+
"$type": "fontFamily",
|
|
16
|
+
"$extensions": {
|
|
17
|
+
"org.primer.figma": {
|
|
18
|
+
"collection": "typography",
|
|
19
|
+
"scopes": ["all"]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
10
22
|
},
|
|
11
23
|
"name": "fontStack-system",
|
|
12
24
|
"attributes": {},
|
|
@@ -15,11 +27,23 @@
|
|
|
15
27
|
"fontStack-sansSerif": {
|
|
16
28
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
17
29
|
"$type": "fontFamily",
|
|
30
|
+
"$extensions": {
|
|
31
|
+
"org.primer.figma": {
|
|
32
|
+
"collection": "typography",
|
|
33
|
+
"scopes": ["all"]
|
|
34
|
+
}
|
|
35
|
+
},
|
|
18
36
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
19
37
|
"isSource": true,
|
|
20
38
|
"original": {
|
|
21
39
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
22
|
-
"$type": "fontFamily"
|
|
40
|
+
"$type": "fontFamily",
|
|
41
|
+
"$extensions": {
|
|
42
|
+
"org.primer.figma": {
|
|
43
|
+
"collection": "typography",
|
|
44
|
+
"scopes": ["all"]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
23
47
|
},
|
|
24
48
|
"name": "fontStack-sansSerif",
|
|
25
49
|
"attributes": {},
|
|
@@ -28,11 +52,23 @@
|
|
|
28
52
|
"fontStack-monospace": {
|
|
29
53
|
"value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
30
54
|
"$type": "fontFamily",
|
|
55
|
+
"$extensions": {
|
|
56
|
+
"org.primer.figma": {
|
|
57
|
+
"collection": "typography",
|
|
58
|
+
"scopes": ["all"]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
31
61
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
32
62
|
"isSource": true,
|
|
33
63
|
"original": {
|
|
34
64
|
"value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
35
|
-
"$type": "fontFamily"
|
|
65
|
+
"$type": "fontFamily",
|
|
66
|
+
"$extensions": {
|
|
67
|
+
"org.primer.figma": {
|
|
68
|
+
"collection": "typography",
|
|
69
|
+
"scopes": ["all"]
|
|
70
|
+
}
|
|
71
|
+
}
|
|
36
72
|
},
|
|
37
73
|
"name": "fontStack-monospace",
|
|
38
74
|
"attributes": {},
|
package/dist/figma/figma.json
CHANGED
|
@@ -85,6 +85,14 @@
|
|
|
85
85
|
"component",
|
|
86
86
|
"component (internal)"
|
|
87
87
|
]
|
|
88
|
+
},
|
|
89
|
+
"typography": {
|
|
90
|
+
"modes": [
|
|
91
|
+
"default"
|
|
92
|
+
],
|
|
93
|
+
"groups": [
|
|
94
|
+
"typography"
|
|
95
|
+
]
|
|
88
96
|
}
|
|
89
97
|
},
|
|
90
98
|
"files": [
|
|
@@ -111,6 +119,7 @@
|
|
|
111
119
|
"dist/figma/themes/light-colorblind.json",
|
|
112
120
|
"dist/figma/themes/light-high-contrast.json",
|
|
113
121
|
"dist/figma/themes/light-tritanopia.json",
|
|
114
|
-
"dist/figma/themes/light.json"
|
|
122
|
+
"dist/figma/themes/light.json",
|
|
123
|
+
"dist/figma/typography/typography.json"
|
|
115
124
|
]
|
|
116
125
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "fontStack/monospace",
|
|
4
|
+
"value": "SF Mono",
|
|
5
|
+
"type": "STRING",
|
|
6
|
+
"refId": "typography/fontStack/monospace",
|
|
7
|
+
"collection": "typography",
|
|
8
|
+
"mode": "default",
|
|
9
|
+
"group": "typography",
|
|
10
|
+
"scopes": ["ALL_SCOPES"]
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"name": "fontStack/sansSerif",
|
|
14
|
+
"value": "SF Pro Text",
|
|
15
|
+
"type": "STRING",
|
|
16
|
+
"refId": "typography/fontStack/sansSerif",
|
|
17
|
+
"collection": "typography",
|
|
18
|
+
"mode": "default",
|
|
19
|
+
"group": "typography",
|
|
20
|
+
"scopes": ["ALL_SCOPES"]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "fontStack/system",
|
|
24
|
+
"value": "SF Pro Text",
|
|
25
|
+
"type": "STRING",
|
|
26
|
+
"refId": "typography/fontStack/system",
|
|
27
|
+
"collection": "typography",
|
|
28
|
+
"mode": "default",
|
|
29
|
+
"group": "typography",
|
|
30
|
+
"scopes": ["ALL_SCOPES"]
|
|
31
|
+
}
|
|
32
|
+
]
|
|
@@ -2,11 +2,23 @@
|
|
|
2
2
|
"fontStack-system": {
|
|
3
3
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
4
4
|
"$type": "fontFamily",
|
|
5
|
+
"$extensions": {
|
|
6
|
+
"org.primer.figma": {
|
|
7
|
+
"collection": "typography",
|
|
8
|
+
"scopes": ["all"]
|
|
9
|
+
}
|
|
10
|
+
},
|
|
5
11
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
6
12
|
"isSource": true,
|
|
7
13
|
"original": {
|
|
8
14
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
9
|
-
"$type": "fontFamily"
|
|
15
|
+
"$type": "fontFamily",
|
|
16
|
+
"$extensions": {
|
|
17
|
+
"org.primer.figma": {
|
|
18
|
+
"collection": "typography",
|
|
19
|
+
"scopes": ["all"]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
10
22
|
},
|
|
11
23
|
"name": "fontStack-system",
|
|
12
24
|
"attributes": {},
|
|
@@ -15,11 +27,23 @@
|
|
|
15
27
|
"fontStack-sansSerif": {
|
|
16
28
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
17
29
|
"$type": "fontFamily",
|
|
30
|
+
"$extensions": {
|
|
31
|
+
"org.primer.figma": {
|
|
32
|
+
"collection": "typography",
|
|
33
|
+
"scopes": ["all"]
|
|
34
|
+
}
|
|
35
|
+
},
|
|
18
36
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
19
37
|
"isSource": true,
|
|
20
38
|
"original": {
|
|
21
39
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
22
|
-
"$type": "fontFamily"
|
|
40
|
+
"$type": "fontFamily",
|
|
41
|
+
"$extensions": {
|
|
42
|
+
"org.primer.figma": {
|
|
43
|
+
"collection": "typography",
|
|
44
|
+
"scopes": ["all"]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
23
47
|
},
|
|
24
48
|
"name": "fontStack-sansSerif",
|
|
25
49
|
"attributes": {},
|
|
@@ -28,11 +52,23 @@
|
|
|
28
52
|
"fontStack-monospace": {
|
|
29
53
|
"value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
30
54
|
"$type": "fontFamily",
|
|
55
|
+
"$extensions": {
|
|
56
|
+
"org.primer.figma": {
|
|
57
|
+
"collection": "typography",
|
|
58
|
+
"scopes": ["all"]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
31
61
|
"filePath": "src/tokens/functional/typography/typography.json",
|
|
32
62
|
"isSource": true,
|
|
33
63
|
"original": {
|
|
34
64
|
"value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
35
|
-
"$type": "fontFamily"
|
|
65
|
+
"$type": "fontFamily",
|
|
66
|
+
"$extensions": {
|
|
67
|
+
"org.primer.figma": {
|
|
68
|
+
"collection": "typography",
|
|
69
|
+
"scopes": ["all"]
|
|
70
|
+
}
|
|
71
|
+
}
|
|
36
72
|
},
|
|
37
73
|
"name": "fontStack-monospace",
|
|
38
74
|
"attributes": {},
|
package/package.json
CHANGED
package/src/formats/jsonFigma.ts
CHANGED
package/src/platforms/figma.ts
CHANGED
|
@@ -3,9 +3,11 @@ import type {PlatformInitializer} from '../types/PlatformInitializer'
|
|
|
3
3
|
import {isSource} from '../filters'
|
|
4
4
|
|
|
5
5
|
const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
|
|
6
|
-
const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily']
|
|
6
|
+
const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number']
|
|
7
7
|
// is a siource token, not an included one
|
|
8
8
|
if (!isSource(token)) return false
|
|
9
|
+
|
|
10
|
+
if (`${token.value}`.substring(token.value.length - 2) === 'em') return false
|
|
9
11
|
// has a collection attribute
|
|
10
12
|
if (
|
|
11
13
|
!('$extensions' in token) ||
|
|
@@ -2,15 +2,33 @@
|
|
|
2
2
|
"fontStack": {
|
|
3
3
|
"system": {
|
|
4
4
|
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
5
|
-
"$type": "fontFamily"
|
|
5
|
+
"$type": "fontFamily",
|
|
6
|
+
"$extensions": {
|
|
7
|
+
"org.primer.figma": {
|
|
8
|
+
"collection": "typography",
|
|
9
|
+
"scopes": ["all"]
|
|
10
|
+
}
|
|
11
|
+
}
|
|
6
12
|
},
|
|
7
13
|
"sansSerif": {
|
|
8
14
|
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
9
|
-
"$type": "fontFamily"
|
|
15
|
+
"$type": "fontFamily",
|
|
16
|
+
"$extensions": {
|
|
17
|
+
"org.primer.figma": {
|
|
18
|
+
"collection": "typography",
|
|
19
|
+
"scopes": ["all"]
|
|
20
|
+
}
|
|
21
|
+
}
|
|
10
22
|
},
|
|
11
23
|
"monospace": {
|
|
12
24
|
"$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
13
|
-
"$type": "fontFamily"
|
|
25
|
+
"$type": "fontFamily",
|
|
26
|
+
"$extensions": {
|
|
27
|
+
"org.primer.figma": {
|
|
28
|
+
"collection": "typography",
|
|
29
|
+
"scopes": ["all"]
|
|
30
|
+
}
|
|
31
|
+
}
|
|
14
32
|
}
|
|
15
33
|
},
|
|
16
34
|
"text": {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type StyleDictionary from 'style-dictionary'
|
|
2
2
|
import {isFontFamily} from '../filters'
|
|
3
3
|
import {getTokenValue} from './utilities/getTokenValue'
|
|
4
|
-
|
|
5
|
-
const hasSpaceInName = (string: string) => /\s/g.test(string)
|
|
4
|
+
import {hasSpaceInString} from './utilities/hasSpaceInString'
|
|
6
5
|
/**
|
|
7
6
|
* takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
|
|
8
7
|
* @param value
|
|
@@ -18,7 +17,7 @@ export const parseFontFamily = (value: unknown): string => {
|
|
|
18
17
|
if (typeof string !== 'string') {
|
|
19
18
|
throw new Error(`Invalid value in array ${string}, must be a string`)
|
|
20
19
|
}
|
|
21
|
-
return
|
|
20
|
+
return hasSpaceInString(string) ? `'${string}'` : string
|
|
22
21
|
})
|
|
23
22
|
.join(', ')
|
|
24
23
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type StyleDictionary from 'style-dictionary'
|
|
2
2
|
import {isFontFamily} from '../filters'
|
|
3
|
+
import {hasSpaceInString} from './utilities/hasSpaceInString'
|
|
3
4
|
/**
|
|
4
5
|
* takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
|
|
5
6
|
* @param value
|
|
@@ -17,6 +18,17 @@ export const parseFontFamily = (
|
|
|
17
18
|
if (typeof token.value === 'string') {
|
|
18
19
|
return token.value
|
|
19
20
|
}
|
|
21
|
+
// return stringified array
|
|
22
|
+
if (Array.isArray(token.value)) {
|
|
23
|
+
return token.value
|
|
24
|
+
.map((string: string) => {
|
|
25
|
+
if (typeof string !== 'string') {
|
|
26
|
+
throw new Error(`Invalid value in array ${string}, must be a string`)
|
|
27
|
+
}
|
|
28
|
+
return hasSpaceInString(string) ? `'${string}'` : string
|
|
29
|
+
})
|
|
30
|
+
.join(', ')
|
|
31
|
+
}
|
|
20
32
|
// invalid value
|
|
21
33
|
throw new Error(`Invalid value ${token.value}, should be a string or array of strings`)
|
|
22
34
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 18 Apr 2024
|
|
3
|
+
* Generated on Thu, 18 Apr 2024 12:26:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const PrimerFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
|