@oneplatformdev/react-native-uikit 1.2.5 → 1.2.7

package/README.md

@@ -96,6 +96,7 @@ export const typography = {
     font: 'extraBold',
     fontSize: 18,
     lineHeight: 24,
+    color: 'premium',
   },
 } as const;
 ```
@@ -209,7 +210,7 @@ Package import: `import { Typography } from '@oneplatformdev/react-native-uikit'
 <Typography variant="body">Hello</Typography>
 ```
 
-Prefer `text` (`string | number`) for simple content. Use `children` for composed or custom content; TypeScript disallows supplying both, and neither is also valid. Typography retains React Native `TextProps`, styles, and ref forwarding. Its main visual props are `variant`, `weight`, `color`, `size`, and `lineHeight`; caller `style` is applied last. Customize its typography/font/color tokens through `createTheme` and the extension interfaces described above. Owned/local source installation: **available** with `npx @oneplatformdev/react-native-uikit add typography`.
+Prefer `text` (`string | number`) for simple content. Use `children` for composed or custom content; TypeScript disallows supplying both, and neither is also valid. Typography retains React Native `TextProps`, styles, and ref forwarding. Its main visual props are `variant`, `weight`, `color`, `size`, and `lineHeight`. A variant may define an optional `color` token; an explicit `color` prop overrides it, otherwise Typography uses the theme's `text` color. Caller `style` is applied last and can override either color. Customize typography/font/color tokens through `createTheme` and the extension interfaces described above. Owned/local source installation: **available** with `npx @oneplatformdev/react-native-uikit add typography`.
 
 ## Button
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/react-native-uikit",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "bin": {

package/src/components/Button/ui/styles.ts

@@ -31,7 +31,7 @@ export const getStyles = (
     const styles = StyleSheet.create({
         container,
         content: {
-            width: '100%',
+            maxWidth: '100%',
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',

package/src/components/Typography/ui/styles.ts

@@ -8,7 +8,7 @@ type TypographyStyleProps = Pick<TypographyProps, 'variant' | 'weight' | 'color'
 export const getTypographyStyle = (
     { colors, fonts, typography }: UITheme,
     scaling: ScalingFunctions,
-    { variant = 'body', weight, color = 'text', size, lineHeight }: TypographyStyleProps,
+    { variant = 'body', weight, color, size, lineHeight }: TypographyStyleProps,
 ): TextStyle => {
     const token = typography[variant] as UITypographyToken;
     const font = fonts[weight ?? token.font];
@@ -16,7 +16,7 @@ export const getTypographyStyle = (
 
     return {
         ...font,
-        color: colors[color],
+        color: colors[color ?? token.color ?? 'text'],
         fontSize: scaling.scaleFontSize(size ?? token.fontSize),
         lineHeight: resolvedLineHeight === undefined ? undefined : scaling.scaleLineHeight(resolvedLineHeight),
         letterSpacing: token.letterSpacing,

package/src/theme/types.ts

@@ -102,6 +102,7 @@ export type UIRadius = DefaultUIRadius & ExtendedUIRadius;
 export type UITypographyToken = {
     font: UIFontKey;
     fontSize: number;
+    color?: UIColorKey;
     lineHeight?: number;
     letterSpacing?: number;
     includeFontPadding?: TextStyle['includeFontPadding'];