@openingshq/design-tokens

Shared visual foundations for the Openings web and Expo applications.

Install

npm install @openingshq/design-tokens

NativeWind

const { nativewindPreset } = require("@openingshq/design-tokens/nativewind");

module.exports = {
  presets: [require("nativewind/preset"), nativewindPreset],
};

Apply the matching runtime variables at the themed React Native root:

import {
  darkNativeVariables,
  lightNativeVariables,
} from "@openingshq/design-tokens";
import { vars } from "nativewind";

const themeVariables =
  colorScheme === "dark" ? darkNativeVariables : lightNativeVariables;

<View style={vars(themeVariables)}>{children}</View>;

Web themes

The root export provides lightSemanticColors, darkSemanticColors, and foundationTokens. Web consumers can serialize those values into their CSS custom properties while keeping existing utility names as compatibility aliases. This lets both platforms share the same semantic roles without coupling the package to a web framework.

Package boundary

The package exports platform-neutral primitives, semantic light and dark themes, runtime variables, and a NativeWind 4-compatible preset. It does not contain UI components.

The preset preserves Tailwind's standard numeric spacing scale. Raw Openings spacing primitives are exposed with space-* names (for example, p-space-16) so consuming apps can opt into exact token values without changing the meaning of utilities such as p-4 or h-11.

License

MIT