@primer/primitives 7.17.0-rc.3f0bd2a1 → 7.17.0-rc.4834f81d
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/package.json +2 -3
- package/src/PrimerStyleDictionary.ts +6 -0
- package/src/platforms/figma.ts +6 -0
- package/src/transformers/fontFamilyToCss.ts +1 -1
- package/src/transformers/fontFamilyToFigma.ts +35 -0
- package/src/transformers/index.ts +1 -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
- package/dist/deprecated/colors.json +0 -7
- package/dist/js/colors/dark.d.ts +0 -516
- package/dist/js/colors/dark.js +0 -616
- package/dist/js/colors/dark_colorblind.d.ts +0 -516
- package/dist/js/colors/dark_colorblind.js +0 -616
- package/dist/js/colors/dark_dimmed.d.ts +0 -516
- package/dist/js/colors/dark_dimmed.js +0 -616
- package/dist/js/colors/dark_high_contrast.d.ts +0 -516
- package/dist/js/colors/dark_high_contrast.js +0 -616
- package/dist/js/colors/dark_tritanopia.d.ts +0 -516
- package/dist/js/colors/dark_tritanopia.js +0 -616
- package/dist/js/colors/index.d.ts +0 -4638
- package/dist/js/colors/index.js +0 -15
- package/dist/js/colors/light.d.ts +0 -516
- package/dist/js/colors/light.js +0 -616
- package/dist/js/colors/light_colorblind.d.ts +0 -516
- package/dist/js/colors/light_colorblind.js +0 -616
- package/dist/js/colors/light_high_contrast.d.ts +0 -516
- package/dist/js/colors/light_high_contrast.js +0 -616
- package/dist/js/colors/light_tritanopia.d.ts +0 -516
- package/dist/js/colors/light_tritanopia.js +0 -616
- package/dist/js/index.d.ts +0 -4655
- package/dist/js/index.js +0 -9
- package/dist/js/spacing/index.d.ts +0 -6
- package/dist/js/spacing/index.js +0 -7
- package/dist/js/spacing/normal.d.ts +0 -4
- package/dist/js/spacing/normal.js +0 -13
- package/dist/js/typography/index.d.ts +0 -11
- package/dist/js/typography/index.js +0 -7
- package/dist/js/typography/normal.d.ts +0 -9
- package/dist/js/typography/normal.js +0 -19
- package/dist/json/colors/dark.json +0 -614
- package/dist/json/colors/dark_colorblind.json +0 -614
- package/dist/json/colors/dark_dimmed.json +0 -614
- package/dist/json/colors/dark_high_contrast.json +0 -614
- package/dist/json/colors/dark_tritanopia.json +0 -614
- package/dist/json/colors/light.json +0 -614
- package/dist/json/colors/light_colorblind.json +0 -614
- package/dist/json/colors/light_high_contrast.json +0 -614
- package/dist/json/colors/light_tritanopia.json +0 -614
- package/dist/json/spacing/normal.json +0 -11
- package/dist/json/typography/normal.json +0 -17
- package/dist/removed/colors.json +0 -432
- package/dist/scss/colors/_dark.scss +0 -452
- package/dist/scss/colors/_dark_colorblind.scss +0 -452
- package/dist/scss/colors/_dark_dimmed.scss +0 -452
- package/dist/scss/colors/_dark_high_contrast.scss +0 -452
- package/dist/scss/colors/_dark_tritanopia.scss +0 -452
- package/dist/scss/colors/_light.scss +0 -452
- package/dist/scss/colors/_light_colorblind.scss +0 -452
- package/dist/scss/colors/_light_high_contrast.scss +0 -452
- package/dist/scss/colors/_light_tritanopia.scss +0 -452
- package/dist/scss/spacing/_normal.scss +0 -11
- package/dist/scss/typography/_normal.scss +0 -15
- package/dist/ts/colors/dark.ts +0 -614
- package/dist/ts/colors/dark_colorblind.ts +0 -614
- package/dist/ts/colors/dark_dimmed.ts +0 -614
- package/dist/ts/colors/dark_high_contrast.ts +0 -614
- package/dist/ts/colors/dark_tritanopia.ts +0 -614
- package/dist/ts/colors/index.ts +0 -10
- package/dist/ts/colors/light.ts +0 -614
- package/dist/ts/colors/light_colorblind.ts +0 -614
- package/dist/ts/colors/light_high_contrast.ts +0 -614
- package/dist/ts/colors/light_tritanopia.ts +0 -614
- package/dist/ts/index.ts +0 -4
- package/dist/ts/spacing/index.ts +0 -2
- package/dist/ts/spacing/normal.ts +0 -11
- package/dist/ts/typography/index.ts +0 -2
- package/dist/ts/typography/normal.ts +0 -17
- package/tokens-next-private/css/base/size/size.css +0 -19
- package/tokens-next-private/css/base/typography/typography.css +0 -6
- package/tokens-next-private/css/functional/motion/motion.css +0 -5
- package/tokens-next-private/css/functional/size/border.css +0 -14
- package/tokens-next-private/css/functional/size/breakpoints.css +0 -8
- package/tokens-next-private/css/functional/size/size-coarse.css +0 -7
- package/tokens-next-private/css/functional/size/size-fine.css +0 -7
- package/tokens-next-private/css/functional/size/size.css +0 -74
- package/tokens-next-private/css/functional/size/viewport.css +0 -6
- package/tokens-next-private/css/functional/themes/dark-colorblind.css +0 -1078
- package/tokens-next-private/css/functional/themes/dark-dimmed.css +0 -1078
- package/tokens-next-private/css/functional/themes/dark-high-contrast.css +0 -1078
- package/tokens-next-private/css/functional/themes/dark-tritanopia.css +0 -1078
- package/tokens-next-private/css/functional/themes/dark.css +0 -1078
- package/tokens-next-private/css/functional/themes/light-colorblind.css +0 -1078
- package/tokens-next-private/css/functional/themes/light-high-contrast.css +0 -1078
- package/tokens-next-private/css/functional/themes/light-tritanopia.css +0 -1078
- package/tokens-next-private/css/functional/themes/light.css +0 -1078
- package/tokens-next-private/css/functional/typography/typography.css +0 -47
- package/tokens-next-private/docs/base/size/size.json +0 -427
- package/tokens-next-private/docs/base/typography/typography.json +0 -54
- package/tokens-next-private/docs/functional/motion/motion.json +0 -47
- package/tokens-next-private/docs/functional/size/border.json +0 -234
- package/tokens-next-private/docs/functional/size/breakpoints.json +0 -152
- package/tokens-next-private/docs/functional/size/size-coarse.json +0 -41
- package/tokens-next-private/docs/functional/size/size-fine.json +0 -41
- package/tokens-next-private/docs/functional/size/size.json +0 -1838
- package/tokens-next-private/docs/functional/size/viewport.json +0 -80
- package/tokens-next-private/docs/functional/themes/dark-colorblind.json +0 -16155
- package/tokens-next-private/docs/functional/themes/dark-dimmed.json +0 -16159
- package/tokens-next-private/docs/functional/themes/dark-high-contrast.json +0 -16175
- package/tokens-next-private/docs/functional/themes/dark-tritanopia.json +0 -16161
- package/tokens-next-private/docs/functional/themes/dark.json +0 -16159
- package/tokens-next-private/docs/functional/themes/light-colorblind.json +0 -16123
- package/tokens-next-private/docs/functional/themes/light-high-contrast.json +0 -16125
- package/tokens-next-private/docs/functional/themes/light-tritanopia.json +0 -16115
- package/tokens-next-private/docs/functional/themes/light.json +0 -16113
- package/tokens-next-private/docs/functional/typography/typography.json +0 -663
- package/tokens-next-private/fallbacks/base/size/size.json +0 -19
- package/tokens-next-private/fallbacks/base/typography/typography.json +0 -6
- package/tokens-next-private/fallbacks/color-fallbacks.json +0 -260
- package/tokens-next-private/fallbacks/functional/motion/motion.json +0 -5
- package/tokens-next-private/fallbacks/functional/size/border.json +0 -14
- package/tokens-next-private/fallbacks/functional/size/breakpoints.json +0 -8
- package/tokens-next-private/fallbacks/functional/size/size-coarse.json +0 -5
- package/tokens-next-private/fallbacks/functional/size/size-fine.json +0 -5
- package/tokens-next-private/fallbacks/functional/size/size.json +0 -74
- package/tokens-next-private/fallbacks/functional/size/viewport.json +0 -8
- package/tokens-next-private/fallbacks/functional/typography/typography.json +0 -47
- package/tokens-next-private/internalCss/dark-colorblind.css +0 -1648
- package/tokens-next-private/internalCss/dark-dimmed.css +0 -1648
- package/tokens-next-private/internalCss/dark-high-contrast.css +0 -1648
- package/tokens-next-private/internalCss/dark-tritanopia.css +0 -1648
- package/tokens-next-private/internalCss/dark.css +0 -1648
- package/tokens-next-private/internalCss/light-colorblind.css +0 -1648
- package/tokens-next-private/internalCss/light-high-contrast.css +0 -1648
- package/tokens-next-private/internalCss/light-tritanopia.css +0 -1648
- package/tokens-next-private/internalCss/light.css +0 -1648
- package/tokens-next-private/removed/color.json +0 -421
- package/tokens-next-private/styleLint/base/size/size.json +0 -427
- package/tokens-next-private/styleLint/base/typography/typography.json +0 -54
- package/tokens-next-private/styleLint/functional/motion/motion.json +0 -47
- package/tokens-next-private/styleLint/functional/size/border.json +0 -234
- package/tokens-next-private/styleLint/functional/size/breakpoints.json +0 -152
- package/tokens-next-private/styleLint/functional/size/size-coarse.json +0 -41
- package/tokens-next-private/styleLint/functional/size/size-fine.json +0 -41
- package/tokens-next-private/styleLint/functional/size/size.json +0 -1838
- package/tokens-next-private/styleLint/functional/size/viewport.json +0 -80
- package/tokens-next-private/styleLint/functional/themes/dark-colorblind.json +0 -16155
- package/tokens-next-private/styleLint/functional/themes/dark-dimmed.json +0 -16159
- package/tokens-next-private/styleLint/functional/themes/dark-high-contrast.json +0 -16175
- package/tokens-next-private/styleLint/functional/themes/dark-tritanopia.json +0 -16161
- package/tokens-next-private/styleLint/functional/themes/dark.json +0 -16159
- package/tokens-next-private/styleLint/functional/themes/light-colorblind.json +0 -16123
- package/tokens-next-private/styleLint/functional/themes/light-high-contrast.json +0 -16125
- package/tokens-next-private/styleLint/functional/themes/light-tritanopia.json +0 -16115
- package/tokens-next-private/styleLint/functional/themes/light.json +0 -16113
- package/tokens-next-private/styleLint/functional/typography/typography.json +0 -663
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/primitives",
|
|
3
|
-
"version": "7.17.0-rc.
|
|
3
|
+
"version": "7.17.0-rc.4834f81d",
|
|
4
4
|
"description": "Typography, spacing, and color primitives for Primer design system",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"tokens-v2-private",
|
|
8
|
-
"tokens-next-private",
|
|
9
8
|
"build.js",
|
|
10
9
|
"tokens/",
|
|
11
10
|
"src/**/*",
|
|
@@ -46,7 +45,7 @@
|
|
|
46
45
|
"lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
|
|
47
46
|
"prebuild": "rm -rf dist",
|
|
48
47
|
"prebuild:tokens": "rm -rf tokens-v2-private",
|
|
49
|
-
"prebuild:next": "rm -rf
|
|
48
|
+
"prebuild:next": "rm -rf dist",
|
|
50
49
|
"prepack": "npm run build && npm run build:tokens && npm run build:next",
|
|
51
50
|
"prepare": "husky",
|
|
52
51
|
"release": "changeset publish",
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
durationToCss,
|
|
13
13
|
figmaAttributes,
|
|
14
14
|
fontFamilyToCss,
|
|
15
|
+
fontFamilyToFigma,
|
|
15
16
|
fontWeightToNumber,
|
|
16
17
|
jsonDeprecated,
|
|
17
18
|
namePathToDotNotation,
|
|
@@ -216,6 +217,11 @@ StyleDictionary.registerTransform({
|
|
|
216
217
|
...fontFamilyToCss,
|
|
217
218
|
})
|
|
218
219
|
|
|
220
|
+
StyleDictionary.registerTransform({
|
|
221
|
+
name: 'fontFamily/figma',
|
|
222
|
+
...fontFamilyToFigma,
|
|
223
|
+
})
|
|
224
|
+
|
|
219
225
|
/**
|
|
220
226
|
* @name {@link PrimerStyleDictionary}
|
|
221
227
|
* @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
|
package/src/platforms/figma.ts
CHANGED
|
@@ -25,6 +25,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
|
|
|
25
25
|
'name/pathToFigma',
|
|
26
26
|
// 'name/pathToSlashNotation',
|
|
27
27
|
'figma/attributes',
|
|
28
|
+
'fontFamily/figma',
|
|
28
29
|
'dimension/pixelUnitless',
|
|
29
30
|
// 'border/figma',
|
|
30
31
|
// 'typography/figma',
|
|
@@ -32,6 +33,11 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
|
|
|
32
33
|
],
|
|
33
34
|
options: {
|
|
34
35
|
basePxFontSize: 16,
|
|
36
|
+
fontFamilies: {
|
|
37
|
+
'fontStack/system': 'SF Pro Text',
|
|
38
|
+
'fontStack/sansSerif': 'SF Pro Text',
|
|
39
|
+
'fontStack/monospace': 'SF Mono',
|
|
40
|
+
},
|
|
35
41
|
...options,
|
|
36
42
|
},
|
|
37
43
|
files: [
|
|
@@ -28,7 +28,7 @@ export const parseFontFamily = (value: unknown): string => {
|
|
|
28
28
|
* @description converts fontFamily tokens value to string
|
|
29
29
|
* @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
|
|
30
30
|
* @matcher matches all tokens of $type `fontFamily`
|
|
31
|
-
* @transformer returns a
|
|
31
|
+
* @transformer returns a string
|
|
32
32
|
*/
|
|
33
33
|
export const fontFamilyToCss: StyleDictionary.Transform = {
|
|
34
34
|
type: `value`,
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type StyleDictionary from 'style-dictionary'
|
|
2
|
+
import {isFontFamily} from '../filters'
|
|
3
|
+
/**
|
|
4
|
+
* takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
|
|
5
|
+
* @param value
|
|
6
|
+
* @returns string
|
|
7
|
+
*/
|
|
8
|
+
export const parseFontFamily = (
|
|
9
|
+
token: StyleDictionary.TransformedToken,
|
|
10
|
+
fontFamilies: Record<string, string> = {},
|
|
11
|
+
): string => {
|
|
12
|
+
// return value from fontFamilies
|
|
13
|
+
if (token.name in fontFamilies) {
|
|
14
|
+
return fontFamilies[token.name]
|
|
15
|
+
}
|
|
16
|
+
// return string
|
|
17
|
+
if (typeof token.value === 'string') {
|
|
18
|
+
return token.value
|
|
19
|
+
}
|
|
20
|
+
// invalid value
|
|
21
|
+
throw new Error(`Invalid value ${token.value}, should be a string or array of strings`)
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* @description converts fontFamily tokens value to string
|
|
25
|
+
* @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
|
|
26
|
+
* @matcher matches all tokens of $type `fontFamily`
|
|
27
|
+
* @transformer returns a string
|
|
28
|
+
*/
|
|
29
|
+
export const fontFamilyToFigma: StyleDictionary.Transform = {
|
|
30
|
+
type: `value`,
|
|
31
|
+
transitive: true,
|
|
32
|
+
matcher: isFontFamily,
|
|
33
|
+
transformer: (token: StyleDictionary.TransformedToken, platform: StyleDictionary.Platform): string =>
|
|
34
|
+
parseFontFamily(token, platform.options?.fontFamilies),
|
|
35
|
+
}
|
|
@@ -10,6 +10,7 @@ export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
|
|
|
10
10
|
export {durationToCss} from './durationToCss'
|
|
11
11
|
export {figmaAttributes} from './figmaAttributes'
|
|
12
12
|
export {fontFamilyToCss} from './fontFamilyToCss'
|
|
13
|
+
export {fontFamilyToFigma} from './fontFamilyToFigma'
|
|
13
14
|
export {fontWeightToNumber} from './fontWeightToNumber'
|
|
14
15
|
export {jsonDeprecated} from './jsonDeprecated'
|
|
15
16
|
export {namePathToCamelCase} from './namePathToCamelCase'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 18 Apr 2024 11:37:58 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'";
|