@newtonedev/components 0.1.6 → 0.1.8
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/composites/actions/Button/Button.d.ts.map +1 -1
- package/dist/composites/form-controls/Select/Select.styles.d.ts.map +1 -1
- package/dist/composites/form-controls/TextInput/TextInput.styles.d.ts.map +1 -1
- package/dist/composites/form-controls/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/HueSlider/HueSlider.styles.d.ts.map +1 -1
- package/dist/composites/range-inputs/Slider/Slider.styles.d.ts.map +1 -1
- package/dist/fonts/GoogleFontLoader.d.ts +5 -4
- package/dist/fonts/GoogleFontLoader.d.ts.map +1 -1
- package/dist/fonts/SelfHostedFontLoader.d.ts +14 -0
- package/dist/fonts/SelfHostedFontLoader.d.ts.map +1 -0
- package/dist/fonts/buildGoogleFontsUrl.d.ts +1 -16
- package/dist/fonts/buildGoogleFontsUrl.d.ts.map +1 -1
- package/dist/fonts/measureFont.d.ts +18 -0
- package/dist/fonts/measureFont.d.ts.map +1 -0
- package/dist/fonts/reportQueue.d.ts +7 -0
- package/dist/fonts/reportQueue.d.ts.map +1 -0
- package/dist/fonts/useLocalCalibration.d.ts +19 -0
- package/dist/fonts/useLocalCalibration.d.ts.map +1 -0
- package/dist/fonts/useTypographyCalibrations.d.ts +11 -0
- package/dist/fonts/useTypographyCalibrations.d.ts.map +1 -0
- package/dist/index.cjs +863 -437
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +9 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +801 -391
- package/dist/index.js.map +1 -1
- package/dist/primitives/Icon/Icon.d.ts +1 -1
- package/dist/primitives/Icon/Icon.d.ts.map +1 -1
- package/dist/primitives/Icon/Icon.types.d.ts +8 -13
- package/dist/primitives/Icon/Icon.types.d.ts.map +1 -1
- package/dist/primitives/Text/Text.d.ts +33 -8
- package/dist/primitives/Text/Text.d.ts.map +1 -1
- package/dist/primitives/Text/Text.spans.d.ts +22 -0
- package/dist/primitives/Text/Text.spans.d.ts.map +1 -0
- package/dist/primitives/Text/Text.types.d.ts +75 -27
- package/dist/primitives/Text/Text.types.d.ts.map +1 -1
- package/dist/primitives/Text/index.d.ts +23 -2
- package/dist/primitives/Text/index.d.ts.map +1 -1
- package/dist/primitives/index.d.ts +1 -1
- package/dist/primitives/index.d.ts.map +1 -1
- package/dist/registry/codegen.d.ts.map +1 -1
- package/dist/registry/icons.d.ts +7 -0
- package/dist/registry/icons.d.ts.map +1 -0
- package/dist/registry/index.d.ts +2 -0
- package/dist/registry/index.d.ts.map +1 -1
- package/dist/registry/registry.d.ts.map +1 -1
- package/dist/registry/types.d.ts +3 -1
- package/dist/registry/types.d.ts.map +1 -1
- package/dist/theme/NewtoneProvider.d.ts +9 -1
- package/dist/theme/NewtoneProvider.d.ts.map +1 -1
- package/dist/theme/defaults.d.ts +1 -0
- package/dist/theme/defaults.d.ts.map +1 -1
- package/dist/theme/types.d.ts +48 -32
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/theme/useBreakpoint.d.ts +9 -0
- package/dist/theme/useBreakpoint.d.ts.map +1 -0
- package/dist/tokens/computeTokens.d.ts +9 -22
- package/dist/tokens/computeTokens.d.ts.map +1 -1
- package/dist/tokens/types.d.ts +40 -22
- package/dist/tokens/types.d.ts.map +1 -1
- package/package.json +2 -1
- package/src/composites/actions/Button/Button.styles.ts +3 -3
- package/src/composites/actions/Button/Button.tsx +3 -2
- package/src/composites/form-controls/Select/Select.styles.ts +8 -8
- package/src/composites/form-controls/Select/Select.tsx +1 -1
- package/src/composites/form-controls/Select/SelectOption.tsx +3 -3
- package/src/composites/form-controls/TextInput/TextInput.styles.ts +5 -5
- package/src/composites/form-controls/Toggle/Toggle.styles.ts +3 -3
- package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.ts +6 -6
- package/src/composites/range-inputs/HueSlider/HueSlider.styles.ts +9 -9
- package/src/composites/range-inputs/Slider/Slider.styles.ts +9 -9
- package/src/fonts/GoogleFontLoader.tsx +25 -10
- package/src/fonts/SelfHostedFontLoader.tsx +44 -0
- package/src/fonts/buildGoogleFontsUrl.ts +2 -31
- package/src/fonts/measureFont.ts +42 -0
- package/src/fonts/reportQueue.ts +54 -0
- package/src/fonts/useLocalCalibration.ts +97 -0
- package/src/fonts/useTypographyCalibrations.ts +15 -0
- package/src/index.ts +18 -7
- package/src/primitives/Frame/Frame.tsx +3 -3
- package/src/primitives/Icon/Icon.tsx +5 -7
- package/src/primitives/Icon/Icon.types.ts +8 -15
- package/src/primitives/Text/Text.spans.ts +57 -0
- package/src/primitives/Text/Text.tsx +205 -53
- package/src/primitives/Text/Text.types.ts +80 -27
- package/src/primitives/Text/index.ts +27 -3
- package/src/primitives/index.ts +3 -2
- package/src/registry/codegen.ts +1 -0
- package/src/registry/icons.ts +111 -0
- package/src/registry/index.ts +3 -0
- package/src/registry/registry.ts +67 -70
- package/src/registry/types.ts +3 -1
- package/src/theme/NewtoneProvider.tsx +18 -2
- package/src/theme/defaults.ts +8 -28
- package/src/theme/types.ts +63 -33
- package/src/theme/useBreakpoint.ts +14 -0
- package/src/tokens/computeTokens.ts +23 -19
- package/src/tokens/types.ts +10 -24
- package/dist/fonts/googleFonts.d.ts +0 -20
- package/dist/fonts/googleFonts.d.ts.map +0 -1
- package/src/fonts/googleFonts.ts +0 -87
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { BreakpointKey } from '@newtonedev/fonts';
|
|
2
|
+
/**
|
|
3
|
+
* Returns the current viewport breakpoint key ('sm' | 'md' | 'lg').
|
|
4
|
+
*
|
|
5
|
+
* Uses `useWindowDimensions` from react-native (cross-platform — works
|
|
6
|
+
* on web via react-native-web) and re-evaluates on window resize.
|
|
7
|
+
*/
|
|
8
|
+
export declare function useBreakpoint(): BreakpointKey;
|
|
9
|
+
//# sourceMappingURL=useBreakpoint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/theme/useBreakpoint.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,aAAa,CAG7C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ColorSystemConfig, ColorMode, ElevationLevel,
|
|
1
|
+
import type { ColorSystemConfig, ColorMode, ElevationLevel, FontSlot, TokenOverrides } from '../theme/types';
|
|
2
2
|
import type { ResolvedTokens } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Per-mode fallback defaults shape shared by all palette defaults.
|
|
@@ -132,29 +132,16 @@ export declare function computeTokens(config: ColorSystemConfig, mode: ColorMode
|
|
|
132
132
|
readonly pill: 999;
|
|
133
133
|
}, typography: {
|
|
134
134
|
readonly fonts: {
|
|
135
|
-
readonly
|
|
136
|
-
readonly display:
|
|
137
|
-
readonly
|
|
135
|
+
readonly main: FontSlot;
|
|
136
|
+
readonly display: FontSlot;
|
|
137
|
+
readonly mono: FontSlot;
|
|
138
|
+
readonly currency: FontSlot;
|
|
138
139
|
};
|
|
139
|
-
readonly
|
|
140
|
-
readonly
|
|
141
|
-
readonly sm: number;
|
|
142
|
-
readonly base: number;
|
|
143
|
-
readonly md: number;
|
|
144
|
-
readonly lg: number;
|
|
145
|
-
readonly xl: number;
|
|
146
|
-
readonly xxl: number;
|
|
140
|
+
readonly fontSizes: {
|
|
141
|
+
readonly [key: string]: number;
|
|
147
142
|
};
|
|
148
|
-
readonly
|
|
149
|
-
readonly
|
|
150
|
-
readonly normal: number;
|
|
151
|
-
readonly relaxed: number;
|
|
152
|
-
};
|
|
153
|
-
readonly fontWeight: {
|
|
154
|
-
readonly regular: number;
|
|
155
|
-
readonly medium: number;
|
|
156
|
-
readonly semibold: number;
|
|
157
|
-
readonly bold: number;
|
|
143
|
+
readonly lineHeights: {
|
|
144
|
+
readonly [key: string]: number;
|
|
158
145
|
};
|
|
159
146
|
}, icons: {
|
|
160
147
|
readonly variant: 'outlined' | 'rounded' | 'sharp';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"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"}
|
package/dist/tokens/types.d.ts
CHANGED
|
@@ -106,32 +106,50 @@ export interface ResolvedTokens {
|
|
|
106
106
|
readonly xl: number;
|
|
107
107
|
readonly pill: 999;
|
|
108
108
|
};
|
|
109
|
-
/** Typography tokens for fonts
|
|
109
|
+
/** Typography tokens for fonts (per-scope) and primitive size/lineHeight scales */
|
|
110
110
|
readonly typography: {
|
|
111
|
+
/** Per-scope font family + weight mapping */
|
|
111
112
|
readonly fonts: {
|
|
112
|
-
readonly
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
readonly main: {
|
|
114
|
+
readonly family: string;
|
|
115
|
+
readonly weights: {
|
|
116
|
+
readonly regular: number;
|
|
117
|
+
readonly medium: number;
|
|
118
|
+
readonly bold: number;
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
readonly display: {
|
|
122
|
+
readonly family: string;
|
|
123
|
+
readonly weights: {
|
|
124
|
+
readonly regular: number;
|
|
125
|
+
readonly medium: number;
|
|
126
|
+
readonly bold: number;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
readonly mono: {
|
|
130
|
+
readonly family: string;
|
|
131
|
+
readonly weights: {
|
|
132
|
+
readonly regular: number;
|
|
133
|
+
readonly medium: number;
|
|
134
|
+
readonly bold: number;
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
readonly currency: {
|
|
138
|
+
readonly family: string;
|
|
139
|
+
readonly weights: {
|
|
140
|
+
readonly regular: number;
|
|
141
|
+
readonly medium: number;
|
|
142
|
+
readonly bold: number;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
115
145
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
readonly
|
|
119
|
-
readonly base: number;
|
|
120
|
-
readonly md: number;
|
|
121
|
-
readonly lg: number;
|
|
122
|
-
readonly xl: number;
|
|
123
|
-
readonly xxl: number;
|
|
146
|
+
/** Primitive font size scale — numbered tokens ('01'–'16'), values in px */
|
|
147
|
+
readonly fontSizes: {
|
|
148
|
+
readonly [key: string]: number;
|
|
124
149
|
};
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
readonly
|
|
128
|
-
readonly relaxed: number;
|
|
129
|
-
};
|
|
130
|
-
readonly weight: {
|
|
131
|
-
readonly regular: number;
|
|
132
|
-
readonly medium: number;
|
|
133
|
-
readonly semibold: number;
|
|
134
|
-
readonly bold: number;
|
|
150
|
+
/** Primitive line height scale — numbered tokens ('01'–'16'), values in px */
|
|
151
|
+
readonly lineHeights: {
|
|
152
|
+
readonly [key: string]: number;
|
|
135
153
|
};
|
|
136
154
|
};
|
|
137
155
|
/** Icon tokens for Material Symbols configuration */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@newtonedev/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "React + React Native Web component library for Newtone",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"react-native": ">=0.70.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
+
"@newtonedev/fonts": "file:../../../newtone-fonts",
|
|
40
41
|
"newtone": "^0.1.0",
|
|
41
42
|
"react-native-web": "^0.19.10"
|
|
42
43
|
},
|
|
@@ -184,21 +184,21 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
|
|
|
184
184
|
padding: 8,
|
|
185
185
|
gap: tokens.spacing['08'],
|
|
186
186
|
borderRadius: 8,
|
|
187
|
-
textSize: '
|
|
187
|
+
textSize: 'md', // 16px
|
|
188
188
|
iconSize: 24,
|
|
189
189
|
},
|
|
190
190
|
md: {
|
|
191
191
|
padding: 12,
|
|
192
192
|
gap: tokens.spacing['08'],
|
|
193
193
|
borderRadius: 12,
|
|
194
|
-
textSize: '
|
|
194
|
+
textSize: 'md', // 16px
|
|
195
195
|
iconSize: 24,
|
|
196
196
|
},
|
|
197
197
|
lg: {
|
|
198
198
|
padding: 16,
|
|
199
199
|
gap: tokens.spacing['08'],
|
|
200
200
|
borderRadius: 16,
|
|
201
|
-
textSize: '
|
|
201
|
+
textSize: 'md', // 16px
|
|
202
202
|
iconSize: 24,
|
|
203
203
|
},
|
|
204
204
|
};
|
|
@@ -4,7 +4,7 @@ import type { ButtonProps } from './Button.types';
|
|
|
4
4
|
import { getButtonConfig, computeButtonPadding } from './Button.styles';
|
|
5
5
|
import { useTokens } from '../../../tokens/useTokens';
|
|
6
6
|
import { Icon } from '../../../primitives/Icon/Icon';
|
|
7
|
-
import { Text } from '../../../primitives/Text
|
|
7
|
+
import { Text } from '../../../primitives/Text';
|
|
8
8
|
import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
|
|
9
9
|
|
|
10
10
|
/**
|
|
@@ -99,8 +99,9 @@ export function Button({
|
|
|
99
99
|
{children && (
|
|
100
100
|
// Text primitive with semantic props + color style override
|
|
101
101
|
<Text
|
|
102
|
+
role="label"
|
|
102
103
|
size={sizeTokens.textSize}
|
|
103
|
-
|
|
104
|
+
centerVertically
|
|
104
105
|
style={[
|
|
105
106
|
{ color: variantColors.textColor },
|
|
106
107
|
...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),
|
|
@@ -9,7 +9,7 @@ export function getSelectStyles(
|
|
|
9
9
|
isOpen: boolean
|
|
10
10
|
) {
|
|
11
11
|
const isSm = size === 'sm';
|
|
12
|
-
const fontSize = isSm ? tokens.typography.
|
|
12
|
+
const fontSize = isSm ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
|
|
13
13
|
const iconSize = fontSize + 2;
|
|
14
14
|
const iconSpace = iconSize + tokens.spacing['08'];
|
|
15
15
|
const paddingVertical = isSm ? tokens.spacing['04'] : tokens.spacing['08'];
|
|
@@ -21,9 +21,9 @@ export function getSelectStyles(
|
|
|
21
21
|
zIndex: isOpen ? 999 : 0,
|
|
22
22
|
},
|
|
23
23
|
label: {
|
|
24
|
-
fontFamily: tokens.typography.fonts.
|
|
25
|
-
fontSize: tokens.typography.
|
|
26
|
-
fontWeight: tokens.typography.
|
|
24
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
25
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
26
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
27
27
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
28
28
|
},
|
|
29
29
|
trigger: {
|
|
@@ -40,7 +40,7 @@ export function getSelectStyles(
|
|
|
40
40
|
},
|
|
41
41
|
triggerText: {
|
|
42
42
|
flex: 1,
|
|
43
|
-
fontFamily: tokens.typography.fonts.
|
|
43
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
44
44
|
fontSize,
|
|
45
45
|
color: disabled
|
|
46
46
|
? srgbToHex(tokens.textSecondary.srgb)
|
|
@@ -54,9 +54,9 @@ export function getSelectStyles(
|
|
|
54
54
|
justifyContent: 'center',
|
|
55
55
|
},
|
|
56
56
|
groupLabel: {
|
|
57
|
-
fontFamily: tokens.typography.fonts.
|
|
58
|
-
fontSize: tokens.typography.
|
|
59
|
-
fontWeight: tokens.typography.
|
|
57
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
58
|
+
fontSize: tokens.typography.fontSizes['01'],
|
|
59
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
60
60
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
61
61
|
textTransform: 'uppercase',
|
|
62
62
|
letterSpacing: 0.5,
|
|
@@ -86,7 +86,7 @@ export function Select({
|
|
|
86
86
|
<View style={styles.iconWrapper} pointerEvents="none">
|
|
87
87
|
<Icon
|
|
88
88
|
name={isOpen ? 'expand_less' : 'expand_more'}
|
|
89
|
-
size={size === 'sm' ? tokens.typography.
|
|
89
|
+
size={size === 'sm' ? tokens.typography.fontSizes['04'] + 2 : tokens.typography.fontSizes['05'] + 2}
|
|
90
90
|
color={iconColor}
|
|
91
91
|
/>
|
|
92
92
|
</View>
|
|
@@ -26,7 +26,7 @@ export function SelectOptionRow({
|
|
|
26
26
|
|
|
27
27
|
const paddingVertical = size === 'sm' ? tokens.spacing['04'] : tokens.spacing['08'];
|
|
28
28
|
const paddingHorizontal = size === 'sm' ? tokens.spacing['08'] : tokens.spacing['12'];
|
|
29
|
-
const fontSize = size === 'sm' ? tokens.typography.
|
|
29
|
+
const fontSize = size === 'sm' ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
|
|
30
30
|
|
|
31
31
|
if (renderOption) {
|
|
32
32
|
return (
|
|
@@ -74,12 +74,12 @@ export function SelectOptionRow({
|
|
|
74
74
|
style={[
|
|
75
75
|
{
|
|
76
76
|
flex: 1,
|
|
77
|
-
fontFamily: tokens.typography.fonts.
|
|
77
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
78
78
|
fontSize,
|
|
79
79
|
color: srgbToHex(tokens.textPrimary.srgb),
|
|
80
80
|
},
|
|
81
81
|
isSelected && {
|
|
82
|
-
fontWeight: tokens.typography.
|
|
82
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
83
83
|
color: srgbToHex(tokens.accent.fill.srgb),
|
|
84
84
|
},
|
|
85
85
|
option.disabled && {
|
|
@@ -8,20 +8,20 @@ export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
|
|
|
8
8
|
gap: tokens.spacing['04'],
|
|
9
9
|
},
|
|
10
10
|
label: {
|
|
11
|
-
fontFamily: tokens.typography.fonts.
|
|
12
|
-
fontSize: tokens.typography.
|
|
13
|
-
fontWeight: tokens.typography.
|
|
11
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
12
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
13
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
14
14
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
15
15
|
},
|
|
16
16
|
input: {
|
|
17
|
-
fontFamily: tokens.typography.fonts.
|
|
17
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
18
18
|
backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
|
|
19
19
|
borderWidth: 1,
|
|
20
20
|
borderColor: srgbToHex(tokens.border.srgb),
|
|
21
21
|
borderRadius: tokens.radius.md,
|
|
22
22
|
paddingVertical: tokens.spacing['08'],
|
|
23
23
|
paddingHorizontal: tokens.spacing['12'],
|
|
24
|
-
fontSize: tokens.typography.
|
|
24
|
+
fontSize: tokens.typography.fontSizes['05'],
|
|
25
25
|
color: disabled
|
|
26
26
|
? srgbToHex(tokens.textSecondary.srgb)
|
|
27
27
|
: srgbToHex(tokens.textPrimary.srgb),
|
|
@@ -20,9 +20,9 @@ export function getToggleStyles(
|
|
|
20
20
|
opacity: disabled ? 0.5 : 1,
|
|
21
21
|
},
|
|
22
22
|
label: {
|
|
23
|
-
fontFamily: tokens.typography.fonts.
|
|
24
|
-
fontSize: tokens.typography.
|
|
25
|
-
fontWeight: tokens.typography.
|
|
23
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
24
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
25
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
26
26
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
27
27
|
},
|
|
28
28
|
track: {
|
|
@@ -17,9 +17,9 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
|
|
|
17
17
|
alignItems: 'center',
|
|
18
18
|
},
|
|
19
19
|
label: {
|
|
20
|
-
fontFamily: tokens.typography.fonts.
|
|
21
|
-
fontSize: tokens.typography.
|
|
22
|
-
fontWeight: tokens.typography.
|
|
20
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
21
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
22
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
23
23
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
24
24
|
},
|
|
25
25
|
trackContainer: {
|
|
@@ -49,9 +49,9 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
|
|
|
49
49
|
borderColor: srgbToHex(tokens.border.srgb),
|
|
50
50
|
},
|
|
51
51
|
warning: {
|
|
52
|
-
fontFamily: tokens.typography.fonts.
|
|
53
|
-
fontSize: tokens.typography.
|
|
54
|
-
fontWeight: tokens.typography.
|
|
52
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
53
|
+
fontSize: tokens.typography.fontSizes['01'],
|
|
54
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
55
55
|
color: srgbToHex(tokens.error.fill.srgb),
|
|
56
56
|
},
|
|
57
57
|
});
|
|
@@ -41,15 +41,15 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
|
|
|
41
41
|
alignItems: 'center',
|
|
42
42
|
},
|
|
43
43
|
label: {
|
|
44
|
-
fontFamily: tokens.typography.fonts.
|
|
45
|
-
fontSize: tokens.typography.
|
|
46
|
-
fontWeight: tokens.typography.
|
|
44
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
45
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
46
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
47
47
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
48
48
|
},
|
|
49
49
|
value: {
|
|
50
|
-
fontFamily: tokens.typography.fonts.
|
|
51
|
-
fontSize: tokens.typography.
|
|
52
|
-
fontWeight: tokens.typography.
|
|
50
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
51
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
52
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
53
53
|
color: srgbToHex(tokens.textPrimary.srgb),
|
|
54
54
|
},
|
|
55
55
|
valueInput: {
|
|
@@ -61,9 +61,9 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
|
|
|
61
61
|
borderRadius: 4,
|
|
62
62
|
backgroundColor: 'transparent',
|
|
63
63
|
color: srgbToHex(tokens.textPrimary.srgb),
|
|
64
|
-
fontFamily: tokens.typography.fonts.
|
|
65
|
-
fontSize: tokens.typography.
|
|
66
|
-
fontWeight: tokens.typography.
|
|
64
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
65
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
66
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
67
67
|
textAlign: 'right',
|
|
68
68
|
},
|
|
69
69
|
trackContainer: {
|
|
@@ -17,15 +17,15 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
|
|
|
17
17
|
alignItems: 'center',
|
|
18
18
|
},
|
|
19
19
|
label: {
|
|
20
|
-
fontFamily: tokens.typography.fonts.
|
|
21
|
-
fontSize: tokens.typography.
|
|
22
|
-
fontWeight: tokens.typography.
|
|
20
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
21
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
22
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
23
23
|
color: srgbToHex(tokens.textSecondary.srgb),
|
|
24
24
|
},
|
|
25
25
|
value: {
|
|
26
|
-
fontFamily: tokens.typography.fonts.
|
|
27
|
-
fontSize: tokens.typography.
|
|
28
|
-
fontWeight: tokens.typography.
|
|
26
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
27
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
28
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
29
29
|
color: srgbToHex(tokens.textPrimary.srgb),
|
|
30
30
|
},
|
|
31
31
|
valueInput: {
|
|
@@ -37,9 +37,9 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
|
|
|
37
37
|
borderRadius: 4,
|
|
38
38
|
backgroundColor: 'transparent',
|
|
39
39
|
color: srgbToHex(tokens.textPrimary.srgb),
|
|
40
|
-
fontFamily: tokens.typography.fonts.
|
|
41
|
-
fontSize: tokens.typography.
|
|
42
|
-
fontWeight: tokens.typography.
|
|
40
|
+
fontFamily: tokens.typography.fonts.main.family,
|
|
41
|
+
fontSize: tokens.typography.fontSizes['04'],
|
|
42
|
+
fontWeight: tokens.typography.fonts.main.weights.medium as any,
|
|
43
43
|
textAlign: 'right',
|
|
44
44
|
},
|
|
45
45
|
trackContainer: {
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { FontSlot } from '../theme/types';
|
|
3
3
|
import { buildGoogleFontsUrl } from './buildGoogleFontsUrl';
|
|
4
4
|
|
|
5
5
|
interface GoogleFontLoaderProps {
|
|
6
6
|
readonly fonts: {
|
|
7
|
-
readonly
|
|
8
|
-
readonly display:
|
|
9
|
-
readonly
|
|
7
|
+
readonly main: FontSlot;
|
|
8
|
+
readonly display: FontSlot;
|
|
9
|
+
readonly mono: FontSlot;
|
|
10
|
+
readonly currency: FontSlot;
|
|
10
11
|
};
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -53,12 +54,26 @@ export function GoogleFontLoader({ fonts }: GoogleFontLoaderProps) {
|
|
|
53
54
|
}
|
|
54
55
|
};
|
|
55
56
|
}, [
|
|
56
|
-
fonts.
|
|
57
|
-
fonts.
|
|
58
|
-
fonts.
|
|
59
|
-
fonts.
|
|
60
|
-
fonts.
|
|
61
|
-
fonts.
|
|
57
|
+
fonts.main.config.family,
|
|
58
|
+
fonts.main.config.type,
|
|
59
|
+
fonts.main.weights.regular,
|
|
60
|
+
fonts.main.weights.medium,
|
|
61
|
+
fonts.main.weights.bold,
|
|
62
|
+
fonts.display.config.family,
|
|
63
|
+
fonts.display.config.type,
|
|
64
|
+
fonts.display.weights.regular,
|
|
65
|
+
fonts.display.weights.medium,
|
|
66
|
+
fonts.display.weights.bold,
|
|
67
|
+
fonts.mono.config.family,
|
|
68
|
+
fonts.mono.config.type,
|
|
69
|
+
fonts.mono.weights.regular,
|
|
70
|
+
fonts.mono.weights.medium,
|
|
71
|
+
fonts.mono.weights.bold,
|
|
72
|
+
fonts.currency.config.family,
|
|
73
|
+
fonts.currency.config.type,
|
|
74
|
+
fonts.currency.weights.regular,
|
|
75
|
+
fonts.currency.weights.medium,
|
|
76
|
+
fonts.currency.weights.bold,
|
|
62
77
|
]);
|
|
63
78
|
|
|
64
79
|
return null;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
interface SelfHostedFontLoaderProps {
|
|
4
|
+
/** Raw @font-face CSS string from the theme API. */
|
|
5
|
+
readonly fontFaceCss: string;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Injects self-hosted @font-face CSS into <head> via a <style> tag.
|
|
10
|
+
* Used instead of GoogleFontLoader when self-hosted font CSS is available.
|
|
11
|
+
*
|
|
12
|
+
* Uses imperative DOM manipulation because react-native-web's View
|
|
13
|
+
* cannot render <style> elements.
|
|
14
|
+
*/
|
|
15
|
+
export function SelfHostedFontLoader({ fontFaceCss }: SelfHostedFontLoaderProps) {
|
|
16
|
+
const styleRef = useRef<HTMLStyleElement | null>(null);
|
|
17
|
+
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (typeof document === 'undefined') return;
|
|
20
|
+
|
|
21
|
+
// Clean up previous style
|
|
22
|
+
if (styleRef.current) {
|
|
23
|
+
styleRef.current.remove();
|
|
24
|
+
styleRef.current = null;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (!fontFaceCss) return;
|
|
28
|
+
|
|
29
|
+
const style = document.createElement('style');
|
|
30
|
+
style.setAttribute('data-newtone-fonts', 'self-hosted');
|
|
31
|
+
style.textContent = fontFaceCss;
|
|
32
|
+
document.head.appendChild(style);
|
|
33
|
+
styleRef.current = style;
|
|
34
|
+
|
|
35
|
+
return () => {
|
|
36
|
+
if (styleRef.current) {
|
|
37
|
+
styleRef.current.remove();
|
|
38
|
+
styleRef.current = null;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}, [fontFaceCss]);
|
|
42
|
+
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
@@ -1,31 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Build a Google Fonts CSS API v2 URL for all google-type fonts in the config.
|
|
5
|
-
* Returns null if no Google fonts are present.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```
|
|
9
|
-
* buildGoogleFontsUrl(fonts)
|
|
10
|
-
* // => "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
|
|
11
|
-
* ```
|
|
12
|
-
*/
|
|
13
|
-
export function buildGoogleFontsUrl(
|
|
14
|
-
fonts: { readonly mono: FontConfig; readonly display: FontConfig; readonly default: FontConfig },
|
|
15
|
-
): string | null {
|
|
16
|
-
const googleFonts = [fonts.mono, fonts.display, fonts.default].filter(
|
|
17
|
-
(f) => f.type === 'google',
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
if (googleFonts.length === 0) return null;
|
|
21
|
-
|
|
22
|
-
// Deduplicate by family name
|
|
23
|
-
const unique = [...new Map(googleFonts.map((f) => [f.family, f])).values()];
|
|
24
|
-
|
|
25
|
-
const families = unique.map((f) => {
|
|
26
|
-
const encoded = f.family.replace(/ /g, '+');
|
|
27
|
-
return `family=${encoded}:wght@400;500;600;700`;
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
return `https://fonts.googleapis.com/css2?${families.join('&')}&display=swap`;
|
|
31
|
-
}
|
|
1
|
+
// Re-export from @newtonedev/fonts (canonical source)
|
|
2
|
+
export { buildGoogleFontsUrl } from '@newtonedev/fonts';
|