@apple-pie/slice-native 0.1.2 → 0.1.4

package/README.md

@@ -1,8 +1,8 @@
 # @apple-pie/slice-native
 
 Experimental React Native SVG icons, with the same names and artwork as the web UIKit.
-Currently **icons only**: this package does not provide the rest of Slice's components,
-theme provider, or shared light/dark palettes. It is built and published independently
+Includes native light/dark theme tokens; other Slice components and a theme provider
+are not included. It is built and published independently
 of `@apple-pie/slice` and does not require that package at runtime.
 
 ```tsx
@@ -70,6 +70,51 @@ Run `npm pack --dry-run` from `native/` to inspect the publishable files, or
 `npm pack` to create a tarball. The `prepack` hook builds automatically. Build and
 pack from this repository: generation uses the web artwork in `src/components/Icon`.
 
-Contributor architecture and future theme-data extraction are documented in
-`contributor-docs/native.md` in the source repository. Shared plain TypeScript color
-constants are planned; the current system light/dark defaults are only icon defaults.
+## Theme tokens
+
+```tsx
+import { Text, View, useColorScheme } from 'react-native';
+import { lightTheme, darkTheme } from '@apple-pie/slice-native/theme';
+
+function Card() {
+  const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme;
+  return (
+    <View style={{
+      backgroundColor: theme.colors['core-surface-primary'],
+      padding: theme.spacing.m,
+      borderRadius: theme.corners['corner-m'],
+      ...theme.shadows['surface-shadow-soft'],
+    }}>
+      <Text style={{ ...theme.type['body-m-regular'], color: theme.colors['core-text-primary'] }}>
+        Hello Slice
+      </Text>
+    </View>
+  );
+}
+```
+
+`lightTheme`, `darkTheme`, `createTypography`, and the `SliceNativeTheme` type are
+also available from the package root. `SliceTheme` aliases the native theme type.
+The dedicated `/theme` entry has no runtime React Native, React, or SVG imports.
+It also exports `coreColors`, `corners`, `spacing`, `elevations`, `type`, and `motion`.
+
+Colors, spacing, corners, and stacking levels are sourced from the web tokens at
+build time and bundled into this package. No web package is needed in an app.
+CSS shadow strings are removed from `colors` and `coreColors`; use `theme.shadows`
+instead. Shadows use native `boxShadow` arrays, which require the New Architecture
+and supported Android versions (outset shadows require Android 9+).
+
+Typography uses a fixed 16dp base for rem conversion and numeric line heights and
+letter spacing. Load Funnel Sans in your app, or replace `theme.type` with
+`createTypography('YourLoadedFontName')`. Exact font weights depend on the font
+and platform; test your loaded font on devices. This package does not load fonts.
+
+Motion durations are milliseconds. Curve tokens are easing functions suitable for
+`Animated.timing`'s `easing` option; the CSS spring is interpolated from its original
+samples, preserving overshoot. They are ordinary JavaScript functions, not Reanimated
+worklets. `elevations` retains the web stacking levels for `zIndex`; do not pass these
+values to Android's `elevation` property.
+
+Build from the repository so shared source tokens are available. All generated
+JavaScript and declarations are included under `dist/`, including declarations for
+shared source types. Changes to web tokens are picked up by the next native build.

package/dist/cjs/index.js

@@ -4,12 +4,19 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactNative = require('react-native');
 var Svg = require('react-native-svg');
+var theme = require('./theme.js');
 
 /**
  * Static icon registry created once at module load.
  * Each entry stores only icon line content renderers.
  */
 const STATIC_ICON_REGISTRY = new Map([
+    [
+        '@',
+        {
+            line: ({ strokeColor }) => (jsxRuntime.jsx(Svg.Path, { d: "M10.03,17.85c-1.61,0-3.01-.32-4.21-.97s-2.12-1.54-2.78-2.69c-.66-1.15-.98-2.49-.98-4.01,0-1.19.2-2.27.59-3.25s.96-1.83,1.69-2.54c.73-.72,1.6-1.27,2.61-1.66,1.01-.39,2.11-.58,3.33-.58,1.12,0,2.15.18,3.08.53.93.35,1.74.84,2.42,1.46.68.62,1.21,1.36,1.58,2.2s.56,1.77.56,2.77-.18,1.89-.55,2.67c-.37.78-.86,1.4-1.49,1.85-.63.45-1.33.67-2.11.67-.53,0-.96-.12-1.27-.37-.31-.24-.52-.61-.62-1.1h-.07c-.47.98-1.27,1.47-2.4,1.47-.69,0-1.29-.18-1.79-.53s-.9-.85-1.17-1.48c-.28-.63-.42-1.36-.42-2.19s.14-1.57.42-2.2c.28-.63.67-1.12,1.17-1.47.51-.35,1.1-.53,1.78-.53,1.13,0,1.93.48,2.38,1.45h.07v-1.25h1.57v7.02c.6,0,1.13-.17,1.58-.52.46-.34.81-.81,1.07-1.41.25-.59.38-1.26.38-2.01,0-1.07-.26-2.02-.77-2.86s-1.23-1.5-2.15-1.98-1.99-.73-3.22-.73c-1.33,0-2.51.27-3.53.83-1.02.55-1.82,1.31-2.39,2.29-.57.98-.86,2.13-.86,3.45,0,1.23.26,2.32.79,3.25.53.93,1.28,1.66,2.25,2.18.97.52,2.13.77,3.48.77h4.53v1.47h-4.55ZM9.83,12.93c.61,0,1.1-.2,1.47-.61s.56-.96.56-1.66v-1.13c0-.71-.19-1.27-.56-1.67s-.86-.6-1.47-.6c-.7,0-1.25.26-1.63.78-.39.52-.58,1.2-.58,2.06s.19,1.54.58,2.06c.39.52.93.77,1.63.77Z", fill: strokeColor })),
+        },
+    ],
     [
         'fullscreen',
         {
@@ -697,6 +704,7 @@ const SliceIcons = {
         inbox: 'inbox',
         like: 'like',
         unlike: 'unlike',
+        at: '@',
     },
     media: {
         camera: 'camera',
@@ -805,6 +813,9 @@ const SliceIcons = {
     },
 };
 
+exports.createTypography = theme.createTypography;
+exports.darkTheme = theme.darkTheme;
+exports.lightTheme = theme.lightTheme;
 exports.Icon = NativeIcon;
 exports.NativeIcon = NativeIcon;
 exports.SliceIcons = SliceIcons;