Skip to content

Commit e37b04b

Browse files
JasonVMoJasonVMo
authored
Add @fluentui-react-native/design package with some basic codegen for token constants (#4140)
* first set of codegen'd design tokens * move generated tokens to a new location * add usage comments for theme-types * clean up codegen * minor codegen fixes and updates * change file and final cleanup * move to catalog references for design tokens * update tests after update to design tokens * update apple snapshot with new design tokens
1 parent e2a4065 commit e37b04b

36 files changed

Lines changed: 2782 additions & 623 deletions

‎.changeset/brave-bars-boil.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@fluentui-react-native/theme-types": patch
3+
"@fluentui-react-native/design": patch
4+
---
5+
6+
Adding new core design package to consolidate design types, values, concepts, and utilities

‎.changeset/global-tokens-module.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@fluentui-react-native/theme-tokens": minor
3+
---
4+
5+
Convert theme-tokens to type module and add per-platform global token constants under the `@fluentui-react-native/theme-tokens/global` export

‎.oxfmtrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
".changeset/*.md",
88
"**/__fixtures__/**",
99
"**/__testfixtures__/**",
10+
"**/*.generated.*",
1011
"**/lib-commonjs/**",
1112
"**/dist/**",
1213
"**/CHANGELOG.*",

‎.yarnrc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ catalog:
88
"@babel/preset-react": ^7.20.0
99
"@babel/preset-typescript": ^7.20.0
1010
"@babel/runtime": ^7.20.0
11+
"@fluentui-react-native/design-tokens-android": ^0.53.0
12+
"@fluentui-react-native/design-tokens-ios": ^0.53.0
13+
"@fluentui-react-native/design-tokens-macos": ^0.53.0
14+
"@fluentui-react-native/design-tokens-win32": ^0.53.0
15+
"@fluentui-react-native/design-tokens-windows": ^0.53.0
1116
"@rnx-kit/align-deps": ^4.0.1
1217
"@rnx-kit/babel-preset-metro-react-native": ^4.0.0
1318
"@rnx-kit/cli": ^2.0.1

‎packages/agentic-design/jest.config.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@fluentui-react-native/scripts/jest-config');

‎packages/agentic-design/package.json‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"name": "@fluentui-react-native/design",
3+
"version": "0.1.0",
4+
"description": "Core design system concepts, utilities, and types for Fluent UI React Native.",
5+
"license": "MIT",
6+
"author": "",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/microsoft/fluentui-react-native.git",
10+
"directory": "packages/agentic-design"
11+
},
12+
"type": "module",
13+
"main": "lib/index.js",
14+
"module": "lib/index.js",
15+
"types": "lib/index.d.ts",
16+
"exports": {
17+
".": {
18+
"types": "./lib/index.d.ts",
19+
"react-native": "./src/index.ts",
20+
"import": "./lib/index.js",
21+
"default": "./src/index.ts"
22+
},
23+
"./tokens/global": {
24+
"types": "./lib/tokens/global.generated.d.ts",
25+
"react-native": "./src/tokens/global.generated.ts",
26+
"import": "./lib/tokens/global.generated.js",
27+
"default": "./src/tokens/global.generated.ts"
28+
},
29+
"./package.json": "./package.json"
30+
},
31+
"scripts": {
32+
"build": "tsgo -b",
33+
"clean": "fluentui-scripts clean",
34+
"format": "fluentui-scripts format",
35+
"lint": "fluentui-scripts lint",
36+
"prebuild": "node ./scripts/codegen.cts",
37+
"test": "fluentui-scripts jest",
38+
"update-snapshots": "fluentui-scripts jest -u"
39+
},
40+
"devDependencies": {
41+
"@babel/core": "catalog:",
42+
"@fluentui-react-native/design-tokens-android": "catalog:",
43+
"@fluentui-react-native/design-tokens-ios": "catalog:",
44+
"@fluentui-react-native/design-tokens-macos": "catalog:",
45+
"@fluentui-react-native/design-tokens-win32": "catalog:",
46+
"@fluentui-react-native/design-tokens-windows": "catalog:",
47+
"@fluentui-react-native/scripts": "workspace:*",
48+
"@rnx-kit/tools-filesystem": "^0.2.0",
49+
"@types/react": "~19.1.4",
50+
"@types/react-test-renderer": "^19.1.0",
51+
"react": "19.1.4",
52+
"react-native": "^0.81.6",
53+
"react-native-macos": "^0.81.0",
54+
"react-test-renderer": "19.1.4"
55+
},
56+
"peerDependencies": {
57+
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
58+
"react": "18.2.0 || 19.0.0 || 19.1.4",
59+
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
60+
"react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
61+
},
62+
"peerDependenciesMeta": {
63+
"@types/react": {
64+
"optional": true
65+
},
66+
"react-native-macos": {
67+
"optional": true
68+
}
69+
},
70+
"furn": {
71+
"jestPlatform": "macos"
72+
},
73+
"rnx-kit": {
74+
"kitType": "library",
75+
"alignDeps": {
76+
"capabilities": [
77+
"core-dev-only",
78+
"core-macos-dev-only",
79+
"react-test-renderer"
80+
]
81+
},
82+
"extends": "@fluentui-react-native/scripts/kit-config"
83+
}
84+
}

‎packages/agentic-design/scripts/codegen.cts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const { processPlatformJsonFiles, outputCodegenFile } = require('@fluentui-react-native/scripts');
2+
const path = require('node:path');
3+
4+
const globalHeader = `WARNING: This file is auto-generated. Do not edit it manually.
5+
6+
This file contains generated global tokens for all platforms. It allows references to direct constants
7+
which can be minified and statically analyzed and removed if unused.`;
8+
9+
function processGlobals() {
10+
const files = processPlatformJsonFiles({
11+
jsonFiles: {
12+
android: require('@fluentui-react-native/design-tokens-android/light/tokens-global.json'),
13+
ios: require('@fluentui-react-native/design-tokens-ios/light/tokens-global.json'),
14+
macos: require('@fluentui-react-native/design-tokens-macos/light/tokens-global.json'),
15+
win32: require('@fluentui-react-native/design-tokens-win32/colorful/tokens-global.json'),
16+
windows: require('@fluentui-react-native/design-tokens-windows/light/tokens-global.json'),
17+
},
18+
entry: path.join(__dirname, '../src/tokens/global.generated.ts'),
19+
genbase: path.join(__dirname, '../src/tokens/generated/global'),
20+
description: globalHeader,
21+
});
22+
for (const file of files) {
23+
outputCodegenFile(file, { alwaysBlockComments: true });
24+
}
25+
}
26+
27+
function main() {
28+
processGlobals();
29+
}
30+
31+
main();

‎packages/agentic-design/src/index.ts‎

Whitespace-only changes.

‎packages/agentic-design/src/tokens/generated/global.platform.android.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Generated android specific constants.
3+
*/
4+
5+
export const fontFamilyBase = 'Roboto';
6+
export const fontLineHeight200 = 16;
7+
export const fontLineHeight300 = 18;
8+
export const fontLineHeight400 = 24;
9+
export const fontLineHeight500 = 24;
10+
export const fontLineHeight600 = 24;
11+
export const fontLineHeight700 = 32;
12+
export const fontLineHeight800 = 48;
13+
export const fontLineHeight900 = 72;
14+
export const fontSize300 = 14;
15+
export const fontSize400 = 16;
16+
export const fontSize500 = 18;
17+
export const fontSize600 = 20;
18+
export const fontSize700 = 24;
19+
20+
/**
21+
* Re-exporting constants from ./global.subset.mobile
22+
*/
23+
export { fontLineHeight100, fontSize100, fontSize200, fontSize800, fontSize900 } from './global.subset.mobile';

‎packages/agentic-design/src/tokens/generated/global.platform.ios.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Generated ios specific constants.
3+
*/
4+
5+
export const fontFamilyBase = 'System';
6+
export const fontLineHeight200 = 18;
7+
export const fontLineHeight300 = 20;
8+
export const fontLineHeight400 = 22;
9+
export const fontLineHeight500 = 25;
10+
export const fontLineHeight600 = 28;
11+
export const fontLineHeight700 = 34;
12+
export const fontLineHeight800 = 41;
13+
export const fontLineHeight900 = 70;
14+
export const fontSize300 = 15;
15+
export const fontSize400 = 17;
16+
export const fontSize500 = 20;
17+
export const fontSize600 = 22;
18+
export const fontSize700 = 28;
19+
20+
/**
21+
* Re-exporting constants from ./global.subset.mobile
22+
*/
23+
export { fontLineHeight100, fontSize100, fontSize200, fontSize800, fontSize900 } from './global.subset.mobile';

0 commit comments

Comments
 (0)