@scalewing/react-native 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @scalewing/react-native
 
+## 0.3.0
+
+### Minor Changes
+
+- 247f158: Default accent is electric indigo, and glass fill is derived from the merged accent so ThemeProvider overlays retint frost.
+
+  Adds opt-in density (`xs` controls, `data` type, `sw-tabular`) and web `Badge`, `SegmentedControl`, and `Table`. Pin the previous teal with `colors={{ accent: '#0B615E', onAccent: '#FFFFFF' }}` (dark: `#7EDAD6` / `#101214`).
+
+- 247f158: Adds a named palette catalog so products pick a reviewed light/dark overlay instead of copying hex. Apply with ThemeProvider `palette`, `data-palette` on the generated canvas, or `import '@scalewing/react/palette/<id>.css'` after styles.css. Default remains indigo. `colors` still wins over a named palette and may be `{ light, dark }` so end users can switch scheme without the product swapping hex.
+
+### Patch Changes
+
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+- Updated dependencies [247f158]
+  - @scalewing/tokens@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -5,14 +5,16 @@ React Native / Expo primitives that consume the same Scalewing tokens as the DOM
 ```ts
 import { Button, Card, Stack, Text, ThemeProvider } from '@scalewing/react-native';
 
-<Card padding={4}>
-  <Stack gap={3}>
-    <Text variant="title">Kickoff</Text>
-    <Button onPress={() => undefined}>Save</Button>
-  </Stack>
-</Card>
+<ThemeProvider colorScheme="system" palette="cerulean">
+  <Card padding={4}>
+    <Stack gap={3}>
+      <Text variant="title">Kickoff</Text>
+      <Button onPress={() => undefined}>Save</Button>
+    </Stack>
+  </Card>
+</ThemeProvider>
 ```
 
-There is no CSS class API. `padding={4}` is spacing step 4, the same step as `sw-padding-4` on web. Field is web-only (`@scalewing/react`).
+There is no CSS class API. `padding={4}` is spacing step 4, the same step as `sw-padding-4` on web. Field is web-only (`@scalewing/react`). `colorScheme` is `"light"`, `"dark"`, or `"system"`. Named palettes include both schemes; `colors` may be `{ light, dark }`.
 
 React and React Native are peer dependencies so the host Expo app owns the runtime. Rationale: duplicating React Native inside this package would fight Metro and Expo upgrades.

package/dist/components/Text.js

@@ -4,10 +4,12 @@ import { useTheme } from '../theme/ThemeProvider.js';
 export function Text({ color = 'text', style, truncate = false, variant = 'body', ...rest }) {
     const theme = useTheme();
     const type = theme.typography[variant];
+    const fontVariant = 'tabularNums' in type && type.tabularNums ? ['tabular-nums'] : undefined;
     return (_jsx(NativeText, { numberOfLines: truncate ? 1 : undefined, style: [
             {
                 color: theme.colors[color],
                 fontSize: type.fontSize,
+                fontVariant,
                 fontWeight: String(type.fontWeight),
                 letterSpacing: type.letterSpacing,
                 lineHeight: type.lineHeight,

package/dist/map-button-style.js

@@ -44,8 +44,8 @@ function buttonFill(theme, variant) {
             };
         case 'secondary':
             return {
-                backgroundColor: theme.glass.fill,
-                borderColor: theme.glass.border,
+                backgroundColor: theme.colors.surface,
+                borderColor: theme.colors.border,
             };
         case 'ghost':
             return {

package/dist/theme/ThemeProvider.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode } from 'react';
-import { type ColorScheme, type ColorTokens, type Theme } from '@scalewing/tokens';
+import { type ColorScheme, type PaletteId, type Theme, type ThemeColors } from '@scalewing/tokens';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
-    colors?: Partial<ColorTokens>;
+    palette?: PaletteId;
+    colors?: ThemeColors;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -3,10 +3,10 @@ import { createContext, useContext, useMemo } from 'react';
 import { useColorScheme, View } from 'react-native';
 import { createTheme, } from '@scalewing/tokens';
 const ThemeContext = createContext(null);
-export function ThemeProvider({ colorScheme = 'system', colors, children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, children, }) {
     const deviceScheme = useColorScheme() === 'dark' ? 'dark' : 'light';
     const resolvedScheme = colorScheme === 'system' ? deviceScheme : colorScheme;
-    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, colors }), [colors, resolvedScheme]);
+    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, palette, colors }), [colors, palette, resolvedScheme]);
     return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx(View, { style: { backgroundColor: theme.colors.background, flex: 1 }, children: children }) }));
 }
 export function useTheme() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Scalewing React Native layout primitives.",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.2.0"
+    "@scalewing/tokens": "0.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",