@react-native-rethemed/material-design-tokens 0.1.0 → 0.1.2
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/README.md +2 -0
- package/dist/index.cjs +154 -0
- package/dist/index.d.cts +146 -0
- package/dist/index.d.mts +146 -0
- package/dist/index.mjs +151 -0
- package/package.json +13 -15
- package/dist/cjs/index.d.ts +0 -144
- package/dist/cjs/index.js +0 -156
- package/dist/cjs/package.json +0 -1
- package/dist/esm/index.d.ts +0 -144
- package/dist/esm/index.js +0 -153
- package/dist/esm/package.json +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @react-native-rethemed/material-design-tokens
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@react-native-rethemed/material-design-tokens)
|
|
4
|
+
|
|
3
5
|
Material Design 3 type scale and tokens for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
|
|
4
6
|
|
|
5
7
|
Material Design 3's baseline type scale — 5 roles (display / headline / title / body / label) × 3 sizes (lg / md / sm) — and spacing.
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
let _react_native_rethemed_core_config = require("@react-native-rethemed/core/config");
|
|
3
|
+
//#region src/index.ts
|
|
4
|
+
/**
|
|
5
|
+
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
6
|
+
* body/label) × 3 sizes (lg/md/sm).
|
|
7
|
+
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
8
|
+
*
|
|
9
|
+
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
10
|
+
* out — their values are less stable/well-documented across sources than
|
|
11
|
+
* this baseline scale.
|
|
12
|
+
*/
|
|
13
|
+
const typescale = {
|
|
14
|
+
display: {
|
|
15
|
+
lg: {
|
|
16
|
+
fontSize: 57,
|
|
17
|
+
lineHeight: 64,
|
|
18
|
+
letterSpacing: -.25,
|
|
19
|
+
fontWeight: "400"
|
|
20
|
+
},
|
|
21
|
+
md: {
|
|
22
|
+
fontSize: 45,
|
|
23
|
+
lineHeight: 52,
|
|
24
|
+
letterSpacing: 0,
|
|
25
|
+
fontWeight: "400"
|
|
26
|
+
},
|
|
27
|
+
sm: {
|
|
28
|
+
fontSize: 36,
|
|
29
|
+
lineHeight: 44,
|
|
30
|
+
letterSpacing: 0,
|
|
31
|
+
fontWeight: "400"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
headline: {
|
|
35
|
+
lg: {
|
|
36
|
+
fontSize: 32,
|
|
37
|
+
lineHeight: 40,
|
|
38
|
+
letterSpacing: 0,
|
|
39
|
+
fontWeight: "400"
|
|
40
|
+
},
|
|
41
|
+
md: {
|
|
42
|
+
fontSize: 28,
|
|
43
|
+
lineHeight: 36,
|
|
44
|
+
letterSpacing: 0,
|
|
45
|
+
fontWeight: "400"
|
|
46
|
+
},
|
|
47
|
+
sm: {
|
|
48
|
+
fontSize: 24,
|
|
49
|
+
lineHeight: 32,
|
|
50
|
+
letterSpacing: 0,
|
|
51
|
+
fontWeight: "400"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
title: {
|
|
55
|
+
lg: {
|
|
56
|
+
fontSize: 22,
|
|
57
|
+
lineHeight: 28,
|
|
58
|
+
letterSpacing: 0,
|
|
59
|
+
fontWeight: "400"
|
|
60
|
+
},
|
|
61
|
+
md: {
|
|
62
|
+
fontSize: 16,
|
|
63
|
+
lineHeight: 24,
|
|
64
|
+
letterSpacing: .15,
|
|
65
|
+
fontWeight: "500"
|
|
66
|
+
},
|
|
67
|
+
sm: {
|
|
68
|
+
fontSize: 14,
|
|
69
|
+
lineHeight: 20,
|
|
70
|
+
letterSpacing: .1,
|
|
71
|
+
fontWeight: "500"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
body: {
|
|
75
|
+
lg: {
|
|
76
|
+
fontSize: 16,
|
|
77
|
+
lineHeight: 24,
|
|
78
|
+
letterSpacing: .5,
|
|
79
|
+
fontWeight: "400"
|
|
80
|
+
},
|
|
81
|
+
md: {
|
|
82
|
+
fontSize: 14,
|
|
83
|
+
lineHeight: 20,
|
|
84
|
+
letterSpacing: .25,
|
|
85
|
+
fontWeight: "400"
|
|
86
|
+
},
|
|
87
|
+
sm: {
|
|
88
|
+
fontSize: 12,
|
|
89
|
+
lineHeight: 16,
|
|
90
|
+
letterSpacing: .4,
|
|
91
|
+
fontWeight: "400"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
label: {
|
|
95
|
+
lg: {
|
|
96
|
+
fontSize: 14,
|
|
97
|
+
lineHeight: 20,
|
|
98
|
+
letterSpacing: .1,
|
|
99
|
+
fontWeight: "500"
|
|
100
|
+
},
|
|
101
|
+
md: {
|
|
102
|
+
fontSize: 12,
|
|
103
|
+
lineHeight: 16,
|
|
104
|
+
letterSpacing: .5,
|
|
105
|
+
fontWeight: "500"
|
|
106
|
+
},
|
|
107
|
+
sm: {
|
|
108
|
+
fontSize: 11,
|
|
109
|
+
lineHeight: 16,
|
|
110
|
+
letterSpacing: .5,
|
|
111
|
+
fontWeight: "500"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
117
|
+
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
118
|
+
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
119
|
+
* density-independent (1dp = 1), so values are used as-is.
|
|
120
|
+
*
|
|
121
|
+
* | M3 token | key / value (dp) |
|
|
122
|
+
* |:--|--:|
|
|
123
|
+
* | `space0` | 0 |
|
|
124
|
+
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
125
|
+
* | `space100` / `space125` | 8 / 10 |
|
|
126
|
+
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
127
|
+
*
|
|
128
|
+
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
129
|
+
* these tokens are so far only used by Jetpack Compose).
|
|
130
|
+
*/
|
|
131
|
+
const spacing = {
|
|
132
|
+
0: 0,
|
|
133
|
+
2: 2,
|
|
134
|
+
4: 4,
|
|
135
|
+
6: 6,
|
|
136
|
+
8: 8,
|
|
137
|
+
10: 10,
|
|
138
|
+
16: 16,
|
|
139
|
+
24: 24,
|
|
140
|
+
32: 32,
|
|
141
|
+
40: 40,
|
|
142
|
+
48: 48,
|
|
143
|
+
56: 56,
|
|
144
|
+
64: 64,
|
|
145
|
+
72: 72
|
|
146
|
+
};
|
|
147
|
+
const materialDesignTheme = (0, _react_native_rethemed_core_config.defineTheme)({
|
|
148
|
+
tokens: { spacing },
|
|
149
|
+
semanticTokens: { text: typescale }
|
|
150
|
+
});
|
|
151
|
+
//#endregion
|
|
152
|
+
exports.materialDesignTheme = materialDesignTheme;
|
|
153
|
+
exports.spacing = spacing;
|
|
154
|
+
exports.typescale = typescale;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
//#region src/index.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
4
|
+
* body/label) × 3 sizes (lg/md/sm).
|
|
5
|
+
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
6
|
+
*
|
|
7
|
+
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
8
|
+
* out — their values are less stable/well-documented across sources than
|
|
9
|
+
* this baseline scale.
|
|
10
|
+
*/
|
|
11
|
+
export declare const typescale: {
|
|
12
|
+
readonly display: {
|
|
13
|
+
readonly lg: {
|
|
14
|
+
readonly fontSize: 57;
|
|
15
|
+
readonly lineHeight: 64;
|
|
16
|
+
readonly letterSpacing: -0.25;
|
|
17
|
+
readonly fontWeight: "400";
|
|
18
|
+
};
|
|
19
|
+
readonly md: {
|
|
20
|
+
readonly fontSize: 45;
|
|
21
|
+
readonly lineHeight: 52;
|
|
22
|
+
readonly letterSpacing: 0;
|
|
23
|
+
readonly fontWeight: "400";
|
|
24
|
+
};
|
|
25
|
+
readonly sm: {
|
|
26
|
+
readonly fontSize: 36;
|
|
27
|
+
readonly lineHeight: 44;
|
|
28
|
+
readonly letterSpacing: 0;
|
|
29
|
+
readonly fontWeight: "400";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
readonly headline: {
|
|
33
|
+
readonly lg: {
|
|
34
|
+
readonly fontSize: 32;
|
|
35
|
+
readonly lineHeight: 40;
|
|
36
|
+
readonly letterSpacing: 0;
|
|
37
|
+
readonly fontWeight: "400";
|
|
38
|
+
};
|
|
39
|
+
readonly md: {
|
|
40
|
+
readonly fontSize: 28;
|
|
41
|
+
readonly lineHeight: 36;
|
|
42
|
+
readonly letterSpacing: 0;
|
|
43
|
+
readonly fontWeight: "400";
|
|
44
|
+
};
|
|
45
|
+
readonly sm: {
|
|
46
|
+
readonly fontSize: 24;
|
|
47
|
+
readonly lineHeight: 32;
|
|
48
|
+
readonly letterSpacing: 0;
|
|
49
|
+
readonly fontWeight: "400";
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
readonly title: {
|
|
53
|
+
readonly lg: {
|
|
54
|
+
readonly fontSize: 22;
|
|
55
|
+
readonly lineHeight: 28;
|
|
56
|
+
readonly letterSpacing: 0;
|
|
57
|
+
readonly fontWeight: "400";
|
|
58
|
+
};
|
|
59
|
+
readonly md: {
|
|
60
|
+
readonly fontSize: 16;
|
|
61
|
+
readonly lineHeight: 24;
|
|
62
|
+
readonly letterSpacing: 0.15;
|
|
63
|
+
readonly fontWeight: "500";
|
|
64
|
+
};
|
|
65
|
+
readonly sm: {
|
|
66
|
+
readonly fontSize: 14;
|
|
67
|
+
readonly lineHeight: 20;
|
|
68
|
+
readonly letterSpacing: 0.1;
|
|
69
|
+
readonly fontWeight: "500";
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
readonly body: {
|
|
73
|
+
readonly lg: {
|
|
74
|
+
readonly fontSize: 16;
|
|
75
|
+
readonly lineHeight: 24;
|
|
76
|
+
readonly letterSpacing: 0.5;
|
|
77
|
+
readonly fontWeight: "400";
|
|
78
|
+
};
|
|
79
|
+
readonly md: {
|
|
80
|
+
readonly fontSize: 14;
|
|
81
|
+
readonly lineHeight: 20;
|
|
82
|
+
readonly letterSpacing: 0.25;
|
|
83
|
+
readonly fontWeight: "400";
|
|
84
|
+
};
|
|
85
|
+
readonly sm: {
|
|
86
|
+
readonly fontSize: 12;
|
|
87
|
+
readonly lineHeight: 16;
|
|
88
|
+
readonly letterSpacing: 0.4;
|
|
89
|
+
readonly fontWeight: "400";
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
readonly label: {
|
|
93
|
+
readonly lg: {
|
|
94
|
+
readonly fontSize: 14;
|
|
95
|
+
readonly lineHeight: 20;
|
|
96
|
+
readonly letterSpacing: 0.1;
|
|
97
|
+
readonly fontWeight: "500";
|
|
98
|
+
};
|
|
99
|
+
readonly md: {
|
|
100
|
+
readonly fontSize: 12;
|
|
101
|
+
readonly lineHeight: 16;
|
|
102
|
+
readonly letterSpacing: 0.5;
|
|
103
|
+
readonly fontWeight: "500";
|
|
104
|
+
};
|
|
105
|
+
readonly sm: {
|
|
106
|
+
readonly fontSize: 11;
|
|
107
|
+
readonly lineHeight: 16;
|
|
108
|
+
readonly letterSpacing: 0.5;
|
|
109
|
+
readonly fontWeight: "500";
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
115
|
+
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
116
|
+
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
117
|
+
* density-independent (1dp = 1), so values are used as-is.
|
|
118
|
+
*
|
|
119
|
+
* | M3 token | key / value (dp) |
|
|
120
|
+
* |:--|--:|
|
|
121
|
+
* | `space0` | 0 |
|
|
122
|
+
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
123
|
+
* | `space100` / `space125` | 8 / 10 |
|
|
124
|
+
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
125
|
+
*
|
|
126
|
+
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
127
|
+
* these tokens are so far only used by Jetpack Compose).
|
|
128
|
+
*/
|
|
129
|
+
export declare const spacing: {
|
|
130
|
+
readonly 0: 0;
|
|
131
|
+
readonly 2: 2;
|
|
132
|
+
readonly 4: 4;
|
|
133
|
+
readonly 6: 6;
|
|
134
|
+
readonly 8: 8;
|
|
135
|
+
readonly 10: 10;
|
|
136
|
+
readonly 16: 16;
|
|
137
|
+
readonly 24: 24;
|
|
138
|
+
readonly 32: 32;
|
|
139
|
+
readonly 40: 40;
|
|
140
|
+
readonly 48: 48;
|
|
141
|
+
readonly 56: 56;
|
|
142
|
+
readonly 64: 64;
|
|
143
|
+
readonly 72: 72;
|
|
144
|
+
};
|
|
145
|
+
export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;
|
|
146
|
+
//#endregion
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
//#region src/index.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
4
|
+
* body/label) × 3 sizes (lg/md/sm).
|
|
5
|
+
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
6
|
+
*
|
|
7
|
+
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
8
|
+
* out — their values are less stable/well-documented across sources than
|
|
9
|
+
* this baseline scale.
|
|
10
|
+
*/
|
|
11
|
+
export declare const typescale: {
|
|
12
|
+
readonly display: {
|
|
13
|
+
readonly lg: {
|
|
14
|
+
readonly fontSize: 57;
|
|
15
|
+
readonly lineHeight: 64;
|
|
16
|
+
readonly letterSpacing: -0.25;
|
|
17
|
+
readonly fontWeight: "400";
|
|
18
|
+
};
|
|
19
|
+
readonly md: {
|
|
20
|
+
readonly fontSize: 45;
|
|
21
|
+
readonly lineHeight: 52;
|
|
22
|
+
readonly letterSpacing: 0;
|
|
23
|
+
readonly fontWeight: "400";
|
|
24
|
+
};
|
|
25
|
+
readonly sm: {
|
|
26
|
+
readonly fontSize: 36;
|
|
27
|
+
readonly lineHeight: 44;
|
|
28
|
+
readonly letterSpacing: 0;
|
|
29
|
+
readonly fontWeight: "400";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
readonly headline: {
|
|
33
|
+
readonly lg: {
|
|
34
|
+
readonly fontSize: 32;
|
|
35
|
+
readonly lineHeight: 40;
|
|
36
|
+
readonly letterSpacing: 0;
|
|
37
|
+
readonly fontWeight: "400";
|
|
38
|
+
};
|
|
39
|
+
readonly md: {
|
|
40
|
+
readonly fontSize: 28;
|
|
41
|
+
readonly lineHeight: 36;
|
|
42
|
+
readonly letterSpacing: 0;
|
|
43
|
+
readonly fontWeight: "400";
|
|
44
|
+
};
|
|
45
|
+
readonly sm: {
|
|
46
|
+
readonly fontSize: 24;
|
|
47
|
+
readonly lineHeight: 32;
|
|
48
|
+
readonly letterSpacing: 0;
|
|
49
|
+
readonly fontWeight: "400";
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
readonly title: {
|
|
53
|
+
readonly lg: {
|
|
54
|
+
readonly fontSize: 22;
|
|
55
|
+
readonly lineHeight: 28;
|
|
56
|
+
readonly letterSpacing: 0;
|
|
57
|
+
readonly fontWeight: "400";
|
|
58
|
+
};
|
|
59
|
+
readonly md: {
|
|
60
|
+
readonly fontSize: 16;
|
|
61
|
+
readonly lineHeight: 24;
|
|
62
|
+
readonly letterSpacing: 0.15;
|
|
63
|
+
readonly fontWeight: "500";
|
|
64
|
+
};
|
|
65
|
+
readonly sm: {
|
|
66
|
+
readonly fontSize: 14;
|
|
67
|
+
readonly lineHeight: 20;
|
|
68
|
+
readonly letterSpacing: 0.1;
|
|
69
|
+
readonly fontWeight: "500";
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
readonly body: {
|
|
73
|
+
readonly lg: {
|
|
74
|
+
readonly fontSize: 16;
|
|
75
|
+
readonly lineHeight: 24;
|
|
76
|
+
readonly letterSpacing: 0.5;
|
|
77
|
+
readonly fontWeight: "400";
|
|
78
|
+
};
|
|
79
|
+
readonly md: {
|
|
80
|
+
readonly fontSize: 14;
|
|
81
|
+
readonly lineHeight: 20;
|
|
82
|
+
readonly letterSpacing: 0.25;
|
|
83
|
+
readonly fontWeight: "400";
|
|
84
|
+
};
|
|
85
|
+
readonly sm: {
|
|
86
|
+
readonly fontSize: 12;
|
|
87
|
+
readonly lineHeight: 16;
|
|
88
|
+
readonly letterSpacing: 0.4;
|
|
89
|
+
readonly fontWeight: "400";
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
readonly label: {
|
|
93
|
+
readonly lg: {
|
|
94
|
+
readonly fontSize: 14;
|
|
95
|
+
readonly lineHeight: 20;
|
|
96
|
+
readonly letterSpacing: 0.1;
|
|
97
|
+
readonly fontWeight: "500";
|
|
98
|
+
};
|
|
99
|
+
readonly md: {
|
|
100
|
+
readonly fontSize: 12;
|
|
101
|
+
readonly lineHeight: 16;
|
|
102
|
+
readonly letterSpacing: 0.5;
|
|
103
|
+
readonly fontWeight: "500";
|
|
104
|
+
};
|
|
105
|
+
readonly sm: {
|
|
106
|
+
readonly fontSize: 11;
|
|
107
|
+
readonly lineHeight: 16;
|
|
108
|
+
readonly letterSpacing: 0.5;
|
|
109
|
+
readonly fontWeight: "500";
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
115
|
+
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
116
|
+
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
117
|
+
* density-independent (1dp = 1), so values are used as-is.
|
|
118
|
+
*
|
|
119
|
+
* | M3 token | key / value (dp) |
|
|
120
|
+
* |:--|--:|
|
|
121
|
+
* | `space0` | 0 |
|
|
122
|
+
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
123
|
+
* | `space100` / `space125` | 8 / 10 |
|
|
124
|
+
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
125
|
+
*
|
|
126
|
+
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
127
|
+
* these tokens are so far only used by Jetpack Compose).
|
|
128
|
+
*/
|
|
129
|
+
export declare const spacing: {
|
|
130
|
+
readonly 0: 0;
|
|
131
|
+
readonly 2: 2;
|
|
132
|
+
readonly 4: 4;
|
|
133
|
+
readonly 6: 6;
|
|
134
|
+
readonly 8: 8;
|
|
135
|
+
readonly 10: 10;
|
|
136
|
+
readonly 16: 16;
|
|
137
|
+
readonly 24: 24;
|
|
138
|
+
readonly 32: 32;
|
|
139
|
+
readonly 40: 40;
|
|
140
|
+
readonly 48: 48;
|
|
141
|
+
readonly 56: 56;
|
|
142
|
+
readonly 64: 64;
|
|
143
|
+
readonly 72: 72;
|
|
144
|
+
};
|
|
145
|
+
export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;
|
|
146
|
+
//#endregion
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { defineTheme } from "@react-native-rethemed/core/config";
|
|
2
|
+
//#region src/index.ts
|
|
3
|
+
/**
|
|
4
|
+
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
5
|
+
* body/label) × 3 sizes (lg/md/sm).
|
|
6
|
+
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
7
|
+
*
|
|
8
|
+
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
9
|
+
* out — their values are less stable/well-documented across sources than
|
|
10
|
+
* this baseline scale.
|
|
11
|
+
*/
|
|
12
|
+
const typescale = {
|
|
13
|
+
display: {
|
|
14
|
+
lg: {
|
|
15
|
+
fontSize: 57,
|
|
16
|
+
lineHeight: 64,
|
|
17
|
+
letterSpacing: -.25,
|
|
18
|
+
fontWeight: "400"
|
|
19
|
+
},
|
|
20
|
+
md: {
|
|
21
|
+
fontSize: 45,
|
|
22
|
+
lineHeight: 52,
|
|
23
|
+
letterSpacing: 0,
|
|
24
|
+
fontWeight: "400"
|
|
25
|
+
},
|
|
26
|
+
sm: {
|
|
27
|
+
fontSize: 36,
|
|
28
|
+
lineHeight: 44,
|
|
29
|
+
letterSpacing: 0,
|
|
30
|
+
fontWeight: "400"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
headline: {
|
|
34
|
+
lg: {
|
|
35
|
+
fontSize: 32,
|
|
36
|
+
lineHeight: 40,
|
|
37
|
+
letterSpacing: 0,
|
|
38
|
+
fontWeight: "400"
|
|
39
|
+
},
|
|
40
|
+
md: {
|
|
41
|
+
fontSize: 28,
|
|
42
|
+
lineHeight: 36,
|
|
43
|
+
letterSpacing: 0,
|
|
44
|
+
fontWeight: "400"
|
|
45
|
+
},
|
|
46
|
+
sm: {
|
|
47
|
+
fontSize: 24,
|
|
48
|
+
lineHeight: 32,
|
|
49
|
+
letterSpacing: 0,
|
|
50
|
+
fontWeight: "400"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
title: {
|
|
54
|
+
lg: {
|
|
55
|
+
fontSize: 22,
|
|
56
|
+
lineHeight: 28,
|
|
57
|
+
letterSpacing: 0,
|
|
58
|
+
fontWeight: "400"
|
|
59
|
+
},
|
|
60
|
+
md: {
|
|
61
|
+
fontSize: 16,
|
|
62
|
+
lineHeight: 24,
|
|
63
|
+
letterSpacing: .15,
|
|
64
|
+
fontWeight: "500"
|
|
65
|
+
},
|
|
66
|
+
sm: {
|
|
67
|
+
fontSize: 14,
|
|
68
|
+
lineHeight: 20,
|
|
69
|
+
letterSpacing: .1,
|
|
70
|
+
fontWeight: "500"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
body: {
|
|
74
|
+
lg: {
|
|
75
|
+
fontSize: 16,
|
|
76
|
+
lineHeight: 24,
|
|
77
|
+
letterSpacing: .5,
|
|
78
|
+
fontWeight: "400"
|
|
79
|
+
},
|
|
80
|
+
md: {
|
|
81
|
+
fontSize: 14,
|
|
82
|
+
lineHeight: 20,
|
|
83
|
+
letterSpacing: .25,
|
|
84
|
+
fontWeight: "400"
|
|
85
|
+
},
|
|
86
|
+
sm: {
|
|
87
|
+
fontSize: 12,
|
|
88
|
+
lineHeight: 16,
|
|
89
|
+
letterSpacing: .4,
|
|
90
|
+
fontWeight: "400"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
label: {
|
|
94
|
+
lg: {
|
|
95
|
+
fontSize: 14,
|
|
96
|
+
lineHeight: 20,
|
|
97
|
+
letterSpacing: .1,
|
|
98
|
+
fontWeight: "500"
|
|
99
|
+
},
|
|
100
|
+
md: {
|
|
101
|
+
fontSize: 12,
|
|
102
|
+
lineHeight: 16,
|
|
103
|
+
letterSpacing: .5,
|
|
104
|
+
fontWeight: "500"
|
|
105
|
+
},
|
|
106
|
+
sm: {
|
|
107
|
+
fontSize: 11,
|
|
108
|
+
lineHeight: 16,
|
|
109
|
+
letterSpacing: .5,
|
|
110
|
+
fontWeight: "500"
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
/**
|
|
115
|
+
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
116
|
+
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
117
|
+
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
118
|
+
* density-independent (1dp = 1), so values are used as-is.
|
|
119
|
+
*
|
|
120
|
+
* | M3 token | key / value (dp) |
|
|
121
|
+
* |:--|--:|
|
|
122
|
+
* | `space0` | 0 |
|
|
123
|
+
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
124
|
+
* | `space100` / `space125` | 8 / 10 |
|
|
125
|
+
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
126
|
+
*
|
|
127
|
+
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
128
|
+
* these tokens are so far only used by Jetpack Compose).
|
|
129
|
+
*/
|
|
130
|
+
const spacing = {
|
|
131
|
+
0: 0,
|
|
132
|
+
2: 2,
|
|
133
|
+
4: 4,
|
|
134
|
+
6: 6,
|
|
135
|
+
8: 8,
|
|
136
|
+
10: 10,
|
|
137
|
+
16: 16,
|
|
138
|
+
24: 24,
|
|
139
|
+
32: 32,
|
|
140
|
+
40: 40,
|
|
141
|
+
48: 48,
|
|
142
|
+
56: 56,
|
|
143
|
+
64: 64,
|
|
144
|
+
72: 72
|
|
145
|
+
};
|
|
146
|
+
const materialDesignTheme = defineTheme({
|
|
147
|
+
tokens: { spacing },
|
|
148
|
+
semanticTokens: { text: typescale }
|
|
149
|
+
});
|
|
150
|
+
//#endregion
|
|
151
|
+
export { materialDesignTheme, spacing, typescale };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-rethemed/material-design-tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Material Design 3 type scale and tokens for React Native, ready for react-native-rethemed.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -21,18 +21,11 @@
|
|
|
21
21
|
"directory": "packages/react-native-rethemed/material-design"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|
|
24
|
-
"
|
|
25
|
-
"types": "./dist/cjs/index.d.ts",
|
|
24
|
+
"types": "./dist/index.d.cts",
|
|
26
25
|
"exports": {
|
|
27
26
|
".": {
|
|
28
|
-
"import":
|
|
29
|
-
|
|
30
|
-
"default": "./dist/esm/index.js"
|
|
31
|
-
},
|
|
32
|
-
"require": {
|
|
33
|
-
"types": "./dist/cjs/index.d.ts",
|
|
34
|
-
"default": "./dist/cjs/index.js"
|
|
35
|
-
}
|
|
27
|
+
"import": "./dist/index.mjs",
|
|
28
|
+
"require": "./dist/index.cjs"
|
|
36
29
|
},
|
|
37
30
|
"./package.json": "./package.json"
|
|
38
31
|
},
|
|
@@ -43,26 +36,31 @@
|
|
|
43
36
|
"access": "public"
|
|
44
37
|
},
|
|
45
38
|
"dependencies": {
|
|
46
|
-
"@react-native-rethemed/core": "^0.1.
|
|
39
|
+
"@react-native-rethemed/core": "^0.1.2"
|
|
47
40
|
},
|
|
48
41
|
"devDependencies": {
|
|
42
|
+
"@arethetypeswrong/core": "0.18.5",
|
|
49
43
|
"@biomejs/biome": "2.5.4",
|
|
50
|
-
"@react-native-rethemed/cli": "0.1.
|
|
44
|
+
"@react-native-rethemed/cli": "0.1.2",
|
|
51
45
|
"@types/node": "24.10.4",
|
|
52
46
|
"@types/react": "19.2.17",
|
|
53
47
|
"biome-config": "0.0.0",
|
|
48
|
+
"publint": "0.3.25",
|
|
54
49
|
"react": "19.2.3",
|
|
55
50
|
"react-native": "0.86.2",
|
|
51
|
+
"tsdown": "0.23.0",
|
|
52
|
+
"tsdown-config": "0.0.0",
|
|
56
53
|
"typescript": "6.0.3",
|
|
57
54
|
"vitest": "4.1.10"
|
|
58
55
|
},
|
|
59
56
|
"scripts": {
|
|
60
|
-
"build": "
|
|
57
|
+
"build": "tsdown",
|
|
61
58
|
"example:codegen": "react-native-rethemed codegen example/theme.ts --docs example/themed.md",
|
|
62
59
|
"lint": "biome check src example",
|
|
63
60
|
"lint:fix": "biome check --write --unsafe src example",
|
|
64
61
|
"tsc": "tsc --noEmit",
|
|
65
62
|
"test": "vitest",
|
|
66
63
|
"test:ci": "vitest run"
|
|
67
|
-
}
|
|
64
|
+
},
|
|
65
|
+
"main": "./dist/index.cjs"
|
|
68
66
|
}
|
package/dist/cjs/index.d.ts
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
3
|
-
* body/label) × 3 sizes (lg/md/sm).
|
|
4
|
-
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
5
|
-
*
|
|
6
|
-
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
7
|
-
* out — their values are less stable/well-documented across sources than
|
|
8
|
-
* this baseline scale.
|
|
9
|
-
*/
|
|
10
|
-
export declare const typescale: {
|
|
11
|
-
readonly display: {
|
|
12
|
-
readonly lg: {
|
|
13
|
-
readonly fontSize: 57;
|
|
14
|
-
readonly lineHeight: 64;
|
|
15
|
-
readonly letterSpacing: -0.25;
|
|
16
|
-
readonly fontWeight: "400";
|
|
17
|
-
};
|
|
18
|
-
readonly md: {
|
|
19
|
-
readonly fontSize: 45;
|
|
20
|
-
readonly lineHeight: 52;
|
|
21
|
-
readonly letterSpacing: 0;
|
|
22
|
-
readonly fontWeight: "400";
|
|
23
|
-
};
|
|
24
|
-
readonly sm: {
|
|
25
|
-
readonly fontSize: 36;
|
|
26
|
-
readonly lineHeight: 44;
|
|
27
|
-
readonly letterSpacing: 0;
|
|
28
|
-
readonly fontWeight: "400";
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
readonly headline: {
|
|
32
|
-
readonly lg: {
|
|
33
|
-
readonly fontSize: 32;
|
|
34
|
-
readonly lineHeight: 40;
|
|
35
|
-
readonly letterSpacing: 0;
|
|
36
|
-
readonly fontWeight: "400";
|
|
37
|
-
};
|
|
38
|
-
readonly md: {
|
|
39
|
-
readonly fontSize: 28;
|
|
40
|
-
readonly lineHeight: 36;
|
|
41
|
-
readonly letterSpacing: 0;
|
|
42
|
-
readonly fontWeight: "400";
|
|
43
|
-
};
|
|
44
|
-
readonly sm: {
|
|
45
|
-
readonly fontSize: 24;
|
|
46
|
-
readonly lineHeight: 32;
|
|
47
|
-
readonly letterSpacing: 0;
|
|
48
|
-
readonly fontWeight: "400";
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
readonly title: {
|
|
52
|
-
readonly lg: {
|
|
53
|
-
readonly fontSize: 22;
|
|
54
|
-
readonly lineHeight: 28;
|
|
55
|
-
readonly letterSpacing: 0;
|
|
56
|
-
readonly fontWeight: "400";
|
|
57
|
-
};
|
|
58
|
-
readonly md: {
|
|
59
|
-
readonly fontSize: 16;
|
|
60
|
-
readonly lineHeight: 24;
|
|
61
|
-
readonly letterSpacing: 0.15;
|
|
62
|
-
readonly fontWeight: "500";
|
|
63
|
-
};
|
|
64
|
-
readonly sm: {
|
|
65
|
-
readonly fontSize: 14;
|
|
66
|
-
readonly lineHeight: 20;
|
|
67
|
-
readonly letterSpacing: 0.1;
|
|
68
|
-
readonly fontWeight: "500";
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
readonly body: {
|
|
72
|
-
readonly lg: {
|
|
73
|
-
readonly fontSize: 16;
|
|
74
|
-
readonly lineHeight: 24;
|
|
75
|
-
readonly letterSpacing: 0.5;
|
|
76
|
-
readonly fontWeight: "400";
|
|
77
|
-
};
|
|
78
|
-
readonly md: {
|
|
79
|
-
readonly fontSize: 14;
|
|
80
|
-
readonly lineHeight: 20;
|
|
81
|
-
readonly letterSpacing: 0.25;
|
|
82
|
-
readonly fontWeight: "400";
|
|
83
|
-
};
|
|
84
|
-
readonly sm: {
|
|
85
|
-
readonly fontSize: 12;
|
|
86
|
-
readonly lineHeight: 16;
|
|
87
|
-
readonly letterSpacing: 0.4;
|
|
88
|
-
readonly fontWeight: "400";
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
readonly label: {
|
|
92
|
-
readonly lg: {
|
|
93
|
-
readonly fontSize: 14;
|
|
94
|
-
readonly lineHeight: 20;
|
|
95
|
-
readonly letterSpacing: 0.1;
|
|
96
|
-
readonly fontWeight: "500";
|
|
97
|
-
};
|
|
98
|
-
readonly md: {
|
|
99
|
-
readonly fontSize: 12;
|
|
100
|
-
readonly lineHeight: 16;
|
|
101
|
-
readonly letterSpacing: 0.5;
|
|
102
|
-
readonly fontWeight: "500";
|
|
103
|
-
};
|
|
104
|
-
readonly sm: {
|
|
105
|
-
readonly fontSize: 11;
|
|
106
|
-
readonly lineHeight: 16;
|
|
107
|
-
readonly letterSpacing: 0.5;
|
|
108
|
-
readonly fontWeight: "500";
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
114
|
-
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
115
|
-
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
116
|
-
* density-independent (1dp = 1), so values are used as-is.
|
|
117
|
-
*
|
|
118
|
-
* | M3 token | key / value (dp) |
|
|
119
|
-
* |:--|--:|
|
|
120
|
-
* | `space0` | 0 |
|
|
121
|
-
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
122
|
-
* | `space100` / `space125` | 8 / 10 |
|
|
123
|
-
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
124
|
-
*
|
|
125
|
-
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
126
|
-
* these tokens are so far only used by Jetpack Compose).
|
|
127
|
-
*/
|
|
128
|
-
export declare const spacing: {
|
|
129
|
-
readonly 0: 0;
|
|
130
|
-
readonly 2: 2;
|
|
131
|
-
readonly 4: 4;
|
|
132
|
-
readonly 6: 6;
|
|
133
|
-
readonly 8: 8;
|
|
134
|
-
readonly 10: 10;
|
|
135
|
-
readonly 16: 16;
|
|
136
|
-
readonly 24: 24;
|
|
137
|
-
readonly 32: 32;
|
|
138
|
-
readonly 40: 40;
|
|
139
|
-
readonly 48: 48;
|
|
140
|
-
readonly 56: 56;
|
|
141
|
-
readonly 64: 64;
|
|
142
|
-
readonly 72: 72;
|
|
143
|
-
};
|
|
144
|
-
export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;
|
package/dist/cjs/index.js
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.materialDesignTheme = exports.spacing = exports.typescale = void 0;
|
|
4
|
-
const config_1 = require("@react-native-rethemed/core/config");
|
|
5
|
-
/**
|
|
6
|
-
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
7
|
-
* body/label) × 3 sizes (lg/md/sm).
|
|
8
|
-
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
9
|
-
*
|
|
10
|
-
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
11
|
-
* out — their values are less stable/well-documented across sources than
|
|
12
|
-
* this baseline scale.
|
|
13
|
-
*/
|
|
14
|
-
exports.typescale = {
|
|
15
|
-
display: {
|
|
16
|
-
lg: {
|
|
17
|
-
fontSize: 57,
|
|
18
|
-
lineHeight: 64,
|
|
19
|
-
letterSpacing: -0.25,
|
|
20
|
-
fontWeight: '400',
|
|
21
|
-
},
|
|
22
|
-
md: {
|
|
23
|
-
fontSize: 45,
|
|
24
|
-
lineHeight: 52,
|
|
25
|
-
letterSpacing: 0,
|
|
26
|
-
fontWeight: '400',
|
|
27
|
-
},
|
|
28
|
-
sm: {
|
|
29
|
-
fontSize: 36,
|
|
30
|
-
lineHeight: 44,
|
|
31
|
-
letterSpacing: 0,
|
|
32
|
-
fontWeight: '400',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
headline: {
|
|
36
|
-
lg: {
|
|
37
|
-
fontSize: 32,
|
|
38
|
-
lineHeight: 40,
|
|
39
|
-
letterSpacing: 0,
|
|
40
|
-
fontWeight: '400',
|
|
41
|
-
},
|
|
42
|
-
md: {
|
|
43
|
-
fontSize: 28,
|
|
44
|
-
lineHeight: 36,
|
|
45
|
-
letterSpacing: 0,
|
|
46
|
-
fontWeight: '400',
|
|
47
|
-
},
|
|
48
|
-
sm: {
|
|
49
|
-
fontSize: 24,
|
|
50
|
-
lineHeight: 32,
|
|
51
|
-
letterSpacing: 0,
|
|
52
|
-
fontWeight: '400',
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
title: {
|
|
56
|
-
lg: {
|
|
57
|
-
fontSize: 22,
|
|
58
|
-
lineHeight: 28,
|
|
59
|
-
letterSpacing: 0,
|
|
60
|
-
fontWeight: '400',
|
|
61
|
-
},
|
|
62
|
-
md: {
|
|
63
|
-
fontSize: 16,
|
|
64
|
-
lineHeight: 24,
|
|
65
|
-
letterSpacing: 0.15,
|
|
66
|
-
fontWeight: '500',
|
|
67
|
-
},
|
|
68
|
-
sm: {
|
|
69
|
-
fontSize: 14,
|
|
70
|
-
lineHeight: 20,
|
|
71
|
-
letterSpacing: 0.1,
|
|
72
|
-
fontWeight: '500',
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
body: {
|
|
76
|
-
lg: {
|
|
77
|
-
fontSize: 16,
|
|
78
|
-
lineHeight: 24,
|
|
79
|
-
letterSpacing: 0.5,
|
|
80
|
-
fontWeight: '400',
|
|
81
|
-
},
|
|
82
|
-
md: {
|
|
83
|
-
fontSize: 14,
|
|
84
|
-
lineHeight: 20,
|
|
85
|
-
letterSpacing: 0.25,
|
|
86
|
-
fontWeight: '400',
|
|
87
|
-
},
|
|
88
|
-
sm: {
|
|
89
|
-
fontSize: 12,
|
|
90
|
-
lineHeight: 16,
|
|
91
|
-
letterSpacing: 0.4,
|
|
92
|
-
fontWeight: '400',
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
label: {
|
|
96
|
-
lg: {
|
|
97
|
-
fontSize: 14,
|
|
98
|
-
lineHeight: 20,
|
|
99
|
-
letterSpacing: 0.1,
|
|
100
|
-
fontWeight: '500',
|
|
101
|
-
},
|
|
102
|
-
md: {
|
|
103
|
-
fontSize: 12,
|
|
104
|
-
lineHeight: 16,
|
|
105
|
-
letterSpacing: 0.5,
|
|
106
|
-
fontWeight: '500',
|
|
107
|
-
},
|
|
108
|
-
sm: {
|
|
109
|
-
fontSize: 11,
|
|
110
|
-
lineHeight: 16,
|
|
111
|
-
letterSpacing: 0.5,
|
|
112
|
-
fontWeight: '500',
|
|
113
|
-
},
|
|
114
|
-
},
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
118
|
-
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
119
|
-
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
120
|
-
* density-independent (1dp = 1), so values are used as-is.
|
|
121
|
-
*
|
|
122
|
-
* | M3 token | key / value (dp) |
|
|
123
|
-
* |:--|--:|
|
|
124
|
-
* | `space0` | 0 |
|
|
125
|
-
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
126
|
-
* | `space100` / `space125` | 8 / 10 |
|
|
127
|
-
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
128
|
-
*
|
|
129
|
-
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
130
|
-
* these tokens are so far only used by Jetpack Compose).
|
|
131
|
-
*/
|
|
132
|
-
exports.spacing = {
|
|
133
|
-
0: 0,
|
|
134
|
-
2: 2,
|
|
135
|
-
4: 4,
|
|
136
|
-
6: 6,
|
|
137
|
-
8: 8,
|
|
138
|
-
10: 10,
|
|
139
|
-
16: 16,
|
|
140
|
-
24: 24,
|
|
141
|
-
32: 32,
|
|
142
|
-
40: 40,
|
|
143
|
-
48: 48,
|
|
144
|
-
56: 56,
|
|
145
|
-
64: 64,
|
|
146
|
-
72: 72,
|
|
147
|
-
};
|
|
148
|
-
exports.materialDesignTheme = (0, config_1.defineTheme)({
|
|
149
|
-
// Spacing is a scale, not a role, so it is a primitive `tokens` entry.
|
|
150
|
-
tokens: { spacing: exports.spacing },
|
|
151
|
-
// Type-scale styles are role-named (MD3 also places them under
|
|
152
|
-
// `md.sys.typescale.*`, not the reference layer), so they live in
|
|
153
|
-
// `semanticTokens`. Values stay raw: MD3 has its own scale and does not
|
|
154
|
-
// reference another theme's primitives.
|
|
155
|
-
semanticTokens: { text: exports.typescale },
|
|
156
|
-
});
|
package/dist/cjs/package.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"type":"commonjs"}
|
package/dist/esm/index.d.ts
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
3
|
-
* body/label) × 3 sizes (lg/md/sm).
|
|
4
|
-
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
5
|
-
*
|
|
6
|
-
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
7
|
-
* out — their values are less stable/well-documented across sources than
|
|
8
|
-
* this baseline scale.
|
|
9
|
-
*/
|
|
10
|
-
export declare const typescale: {
|
|
11
|
-
readonly display: {
|
|
12
|
-
readonly lg: {
|
|
13
|
-
readonly fontSize: 57;
|
|
14
|
-
readonly lineHeight: 64;
|
|
15
|
-
readonly letterSpacing: -0.25;
|
|
16
|
-
readonly fontWeight: "400";
|
|
17
|
-
};
|
|
18
|
-
readonly md: {
|
|
19
|
-
readonly fontSize: 45;
|
|
20
|
-
readonly lineHeight: 52;
|
|
21
|
-
readonly letterSpacing: 0;
|
|
22
|
-
readonly fontWeight: "400";
|
|
23
|
-
};
|
|
24
|
-
readonly sm: {
|
|
25
|
-
readonly fontSize: 36;
|
|
26
|
-
readonly lineHeight: 44;
|
|
27
|
-
readonly letterSpacing: 0;
|
|
28
|
-
readonly fontWeight: "400";
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
readonly headline: {
|
|
32
|
-
readonly lg: {
|
|
33
|
-
readonly fontSize: 32;
|
|
34
|
-
readonly lineHeight: 40;
|
|
35
|
-
readonly letterSpacing: 0;
|
|
36
|
-
readonly fontWeight: "400";
|
|
37
|
-
};
|
|
38
|
-
readonly md: {
|
|
39
|
-
readonly fontSize: 28;
|
|
40
|
-
readonly lineHeight: 36;
|
|
41
|
-
readonly letterSpacing: 0;
|
|
42
|
-
readonly fontWeight: "400";
|
|
43
|
-
};
|
|
44
|
-
readonly sm: {
|
|
45
|
-
readonly fontSize: 24;
|
|
46
|
-
readonly lineHeight: 32;
|
|
47
|
-
readonly letterSpacing: 0;
|
|
48
|
-
readonly fontWeight: "400";
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
readonly title: {
|
|
52
|
-
readonly lg: {
|
|
53
|
-
readonly fontSize: 22;
|
|
54
|
-
readonly lineHeight: 28;
|
|
55
|
-
readonly letterSpacing: 0;
|
|
56
|
-
readonly fontWeight: "400";
|
|
57
|
-
};
|
|
58
|
-
readonly md: {
|
|
59
|
-
readonly fontSize: 16;
|
|
60
|
-
readonly lineHeight: 24;
|
|
61
|
-
readonly letterSpacing: 0.15;
|
|
62
|
-
readonly fontWeight: "500";
|
|
63
|
-
};
|
|
64
|
-
readonly sm: {
|
|
65
|
-
readonly fontSize: 14;
|
|
66
|
-
readonly lineHeight: 20;
|
|
67
|
-
readonly letterSpacing: 0.1;
|
|
68
|
-
readonly fontWeight: "500";
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
readonly body: {
|
|
72
|
-
readonly lg: {
|
|
73
|
-
readonly fontSize: 16;
|
|
74
|
-
readonly lineHeight: 24;
|
|
75
|
-
readonly letterSpacing: 0.5;
|
|
76
|
-
readonly fontWeight: "400";
|
|
77
|
-
};
|
|
78
|
-
readonly md: {
|
|
79
|
-
readonly fontSize: 14;
|
|
80
|
-
readonly lineHeight: 20;
|
|
81
|
-
readonly letterSpacing: 0.25;
|
|
82
|
-
readonly fontWeight: "400";
|
|
83
|
-
};
|
|
84
|
-
readonly sm: {
|
|
85
|
-
readonly fontSize: 12;
|
|
86
|
-
readonly lineHeight: 16;
|
|
87
|
-
readonly letterSpacing: 0.4;
|
|
88
|
-
readonly fontWeight: "400";
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
readonly label: {
|
|
92
|
-
readonly lg: {
|
|
93
|
-
readonly fontSize: 14;
|
|
94
|
-
readonly lineHeight: 20;
|
|
95
|
-
readonly letterSpacing: 0.1;
|
|
96
|
-
readonly fontWeight: "500";
|
|
97
|
-
};
|
|
98
|
-
readonly md: {
|
|
99
|
-
readonly fontSize: 12;
|
|
100
|
-
readonly lineHeight: 16;
|
|
101
|
-
readonly letterSpacing: 0.5;
|
|
102
|
-
readonly fontWeight: "500";
|
|
103
|
-
};
|
|
104
|
-
readonly sm: {
|
|
105
|
-
readonly fontSize: 11;
|
|
106
|
-
readonly lineHeight: 16;
|
|
107
|
-
readonly letterSpacing: 0.5;
|
|
108
|
-
readonly fontWeight: "500";
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
114
|
-
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
115
|
-
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
116
|
-
* density-independent (1dp = 1), so values are used as-is.
|
|
117
|
-
*
|
|
118
|
-
* | M3 token | key / value (dp) |
|
|
119
|
-
* |:--|--:|
|
|
120
|
-
* | `space0` | 0 |
|
|
121
|
-
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
122
|
-
* | `space100` / `space125` | 8 / 10 |
|
|
123
|
-
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
124
|
-
*
|
|
125
|
-
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
126
|
-
* these tokens are so far only used by Jetpack Compose).
|
|
127
|
-
*/
|
|
128
|
-
export declare const spacing: {
|
|
129
|
-
readonly 0: 0;
|
|
130
|
-
readonly 2: 2;
|
|
131
|
-
readonly 4: 4;
|
|
132
|
-
readonly 6: 6;
|
|
133
|
-
readonly 8: 8;
|
|
134
|
-
readonly 10: 10;
|
|
135
|
-
readonly 16: 16;
|
|
136
|
-
readonly 24: 24;
|
|
137
|
-
readonly 32: 32;
|
|
138
|
-
readonly 40: 40;
|
|
139
|
-
readonly 48: 48;
|
|
140
|
-
readonly 56: 56;
|
|
141
|
-
readonly 64: 64;
|
|
142
|
-
readonly 72: 72;
|
|
143
|
-
};
|
|
144
|
-
export declare const materialDesignTheme: import("@react-native-rethemed/core/config").ThemeConfig;
|
package/dist/esm/index.js
DELETED
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import { defineTheme, } from '@react-native-rethemed/core/config';
|
|
2
|
-
/**
|
|
3
|
-
* Material Design 3's baseline type scale — 5 roles (display/headline/title/
|
|
4
|
-
* body/label) × 3 sizes (lg/md/sm).
|
|
5
|
-
* https://m3.material.io/styles/typography/type-scale-tokens
|
|
6
|
-
*
|
|
7
|
-
* MD3 Expressive's additional 15 "Emphasized" styles are intentionally left
|
|
8
|
-
* out — their values are less stable/well-documented across sources than
|
|
9
|
-
* this baseline scale.
|
|
10
|
-
*/
|
|
11
|
-
export const typescale = {
|
|
12
|
-
display: {
|
|
13
|
-
lg: {
|
|
14
|
-
fontSize: 57,
|
|
15
|
-
lineHeight: 64,
|
|
16
|
-
letterSpacing: -0.25,
|
|
17
|
-
fontWeight: '400',
|
|
18
|
-
},
|
|
19
|
-
md: {
|
|
20
|
-
fontSize: 45,
|
|
21
|
-
lineHeight: 52,
|
|
22
|
-
letterSpacing: 0,
|
|
23
|
-
fontWeight: '400',
|
|
24
|
-
},
|
|
25
|
-
sm: {
|
|
26
|
-
fontSize: 36,
|
|
27
|
-
lineHeight: 44,
|
|
28
|
-
letterSpacing: 0,
|
|
29
|
-
fontWeight: '400',
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
headline: {
|
|
33
|
-
lg: {
|
|
34
|
-
fontSize: 32,
|
|
35
|
-
lineHeight: 40,
|
|
36
|
-
letterSpacing: 0,
|
|
37
|
-
fontWeight: '400',
|
|
38
|
-
},
|
|
39
|
-
md: {
|
|
40
|
-
fontSize: 28,
|
|
41
|
-
lineHeight: 36,
|
|
42
|
-
letterSpacing: 0,
|
|
43
|
-
fontWeight: '400',
|
|
44
|
-
},
|
|
45
|
-
sm: {
|
|
46
|
-
fontSize: 24,
|
|
47
|
-
lineHeight: 32,
|
|
48
|
-
letterSpacing: 0,
|
|
49
|
-
fontWeight: '400',
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
title: {
|
|
53
|
-
lg: {
|
|
54
|
-
fontSize: 22,
|
|
55
|
-
lineHeight: 28,
|
|
56
|
-
letterSpacing: 0,
|
|
57
|
-
fontWeight: '400',
|
|
58
|
-
},
|
|
59
|
-
md: {
|
|
60
|
-
fontSize: 16,
|
|
61
|
-
lineHeight: 24,
|
|
62
|
-
letterSpacing: 0.15,
|
|
63
|
-
fontWeight: '500',
|
|
64
|
-
},
|
|
65
|
-
sm: {
|
|
66
|
-
fontSize: 14,
|
|
67
|
-
lineHeight: 20,
|
|
68
|
-
letterSpacing: 0.1,
|
|
69
|
-
fontWeight: '500',
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
body: {
|
|
73
|
-
lg: {
|
|
74
|
-
fontSize: 16,
|
|
75
|
-
lineHeight: 24,
|
|
76
|
-
letterSpacing: 0.5,
|
|
77
|
-
fontWeight: '400',
|
|
78
|
-
},
|
|
79
|
-
md: {
|
|
80
|
-
fontSize: 14,
|
|
81
|
-
lineHeight: 20,
|
|
82
|
-
letterSpacing: 0.25,
|
|
83
|
-
fontWeight: '400',
|
|
84
|
-
},
|
|
85
|
-
sm: {
|
|
86
|
-
fontSize: 12,
|
|
87
|
-
lineHeight: 16,
|
|
88
|
-
letterSpacing: 0.4,
|
|
89
|
-
fontWeight: '400',
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
label: {
|
|
93
|
-
lg: {
|
|
94
|
-
fontSize: 14,
|
|
95
|
-
lineHeight: 20,
|
|
96
|
-
letterSpacing: 0.1,
|
|
97
|
-
fontWeight: '500',
|
|
98
|
-
},
|
|
99
|
-
md: {
|
|
100
|
-
fontSize: 12,
|
|
101
|
-
lineHeight: 16,
|
|
102
|
-
letterSpacing: 0.5,
|
|
103
|
-
fontWeight: '500',
|
|
104
|
-
},
|
|
105
|
-
sm: {
|
|
106
|
-
fontSize: 11,
|
|
107
|
-
lineHeight: 16,
|
|
108
|
-
letterSpacing: 0.5,
|
|
109
|
-
fontWeight: '500',
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
|
-
};
|
|
113
|
-
/**
|
|
114
|
-
* Material Design 3's system spacing tokens (`md.sys.measurement.space*`),
|
|
115
|
-
* keyed by their dp value: `space100` (8dp) → `8`, so
|
|
116
|
-
* `themed.view({ padding: 8 })` is 8. React Native style numbers are already
|
|
117
|
-
* density-independent (1dp = 1), so values are used as-is.
|
|
118
|
-
*
|
|
119
|
-
* | M3 token | key / value (dp) |
|
|
120
|
-
* |:--|--:|
|
|
121
|
-
* | `space0` | 0 |
|
|
122
|
-
* | `space25` / `space50` / `space75` | 2 / 4 / 6 |
|
|
123
|
-
* | `space100` / `space125` | 8 / 10 |
|
|
124
|
-
* | `space200` … `space900` | 16 … 72 (8dp steps) |
|
|
125
|
-
*
|
|
126
|
-
* https://m3.material.io/styles/spacing/tokens (checked 2026-10-02; M3 notes
|
|
127
|
-
* these tokens are so far only used by Jetpack Compose).
|
|
128
|
-
*/
|
|
129
|
-
export const spacing = {
|
|
130
|
-
0: 0,
|
|
131
|
-
2: 2,
|
|
132
|
-
4: 4,
|
|
133
|
-
6: 6,
|
|
134
|
-
8: 8,
|
|
135
|
-
10: 10,
|
|
136
|
-
16: 16,
|
|
137
|
-
24: 24,
|
|
138
|
-
32: 32,
|
|
139
|
-
40: 40,
|
|
140
|
-
48: 48,
|
|
141
|
-
56: 56,
|
|
142
|
-
64: 64,
|
|
143
|
-
72: 72,
|
|
144
|
-
};
|
|
145
|
-
export const materialDesignTheme = defineTheme({
|
|
146
|
-
// Spacing is a scale, not a role, so it is a primitive `tokens` entry.
|
|
147
|
-
tokens: { spacing },
|
|
148
|
-
// Type-scale styles are role-named (MD3 also places them under
|
|
149
|
-
// `md.sys.typescale.*`, not the reference layer), so they live in
|
|
150
|
-
// `semanticTokens`. Values stay raw: MD3 has its own scale and does not
|
|
151
|
-
// reference another theme's primitives.
|
|
152
|
-
semanticTokens: { text: typescale },
|
|
153
|
-
});
|
package/dist/esm/package.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"type":"module"}
|