pixelize-native-library 1.2.0 → 1.2.1

package/lib/typescript/theme/tokens/brands/zinc/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/builders/finalizePalette.d.ts

@@ -0,0 +1,4 @@
+import type { BrandPaletteSource, PaletteProps } from "../types";
+export declare function finalizePalette(source: BrandPaletteSource): PaletteProps;
+export default finalizePalette;
+//# sourceMappingURL=finalizePalette.d.ts.map

package/lib/typescript/theme/tokens/builders/liftToContrast.d.ts

@@ -0,0 +1,9 @@
+export declare const DARK_CANVAS_LUMINANCE = 0.2;
+export declare const isDarkCanvas: (canvas: string) => boolean;
+export declare function liftToContrast(hex: string, backdrop: string, target: number): string;
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+export declare function softenToContrast(hex: string, backdrop: string, target: number): string;
+//# sourceMappingURL=liftToContrast.d.ts.map

package/lib/typescript/theme/tokens/builders/placeholderInk.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../types";
+/** A field always renders on at least one surface — the first is the reference backdrop. */
+export type FieldSurfaces = readonly [string, ...string[]];
+/**
+ * The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
+ * on every surface a field can land on. The surface list is the caller's — a field's fill differs
+ * by platform, the resolution does not.
+ *
+ * It does not walk the rung toward AA in either direction. Held to 4.5 the hint stopped reading
+ * as a hint; softening back down again undershot on the next surface.
+ */
+export declare const placeholderInkOn: (palette: PaletteProps, surfaces: FieldSurfaces) => string;
+//# sourceMappingURL=placeholderInk.d.ts.map

package/lib/typescript/theme/tokens/builders/semanticText.d.ts

@@ -0,0 +1,4 @@
+import type { SemanticRamps, SemanticTextTokens, SemanticTone } from "../types";
+export declare const SEMANTIC_TONES: readonly SemanticTone[];
+export declare const buildSemanticText: (semantic: SemanticRamps, canvas: string) => SemanticTextTokens;
+//# sourceMappingURL=semanticText.d.ts.map

package/lib/typescript/theme/tokens/builders/surfaceRungs.d.ts

@@ -0,0 +1,12 @@
+import type { BrandPaletteSource, PaletteProps, SemanticTextTokens } from "../types";
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See THEME-CONTRACT.md.
+ */
+export declare const PLACEHOLDER_TEXT = 3;
+export declare const namedSurfaces: (p: BrandPaletteSource | PaletteProps) => string[];
+/** The surface an ink is closest to — clearing it clears every other one. */
+export declare const hardestSurface: (ink: string, surfaces: string[]) => string;
+export declare function withSurfaceRungs(source: BrandPaletteSource): BrandPaletteSource;
+export declare const liftSemanticText: (semanticText: SemanticTextTokens, surfaces: string[]) => SemanticTextTokens;
+//# sourceMappingURL=surfaceRungs.d.ts.map

package/lib/typescript/theme/tokens/index.d.ts

@@ -17,5 +17,10 @@ export * from "./builders/accentText";
 export * from "./builders/buildBrandTokens";
 export * from "./builders/buildDarkPalette";
 export * from "./builders/color";
+export * from "./builders/liftToContrast";
+export * from "./builders/placeholderInk";
+export * from "./builders/semanticText";
+export * from "./builders/finalizePalette";
 export * from "./roles";
+export * from "./assertPalette";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/theme/tokens/roles/index.d.ts

@@ -48,6 +48,7 @@ export type RoleColors = {
     fg: {
         default: string;
         muted: string;
+        placeholder: string;
         subtle: string;
         disabled: string;
     };

package/lib/typescript/theme/tokens/types.d.ts

@@ -23,12 +23,10 @@ export type OpacityRamp = {
 export type BrandRamp = Ramp & {
     opacity: OpacityRamp;
 };
-export type SemanticRamps = {
-    success: Ramp;
-    error: Ramp;
-    warning: Ramp;
-    info: Ramp;
-};
+export type SemanticTone = "success" | "error" | "warning" | "info";
+export type SemanticRamps = Record<SemanticTone, Ramp>;
+/** Each tone as INK on the canvas, resolved to 4.5:1. `semantic[tone][500]` is a fill, never text. */
+export type SemanticTextTokens = Record<SemanticTone, string>;
 /** Two-tone brand gradient. Each brand overrides with its own pair. */
 export type Gradient = {
     from: string;
@@ -59,7 +57,7 @@ export type BackgroundColorProps = {
     tableHeader: string;
 };
 export type PaletteProps = {
-    gradient?: Gradient;
+    gradient: Gradient;
     primary: BrandRamp;
     secondary: BrandRamp;
     tertiary: BrandRamp;
@@ -92,7 +90,10 @@ export type PaletteProps = {
         hover: Ramp;
     };
     disabled: Ramp;
+    semanticText: SemanticTextTokens;
 };
+/** What a brand authors by hand: every token required, derived ones excluded. */
+export type BrandPaletteSource = Omit<PaletteProps, "semanticText">;
 /**
  * Brand identities the library ships. `zinc` is the mobile default (the shadcn look); the other
  * eight mirror web. Web has no `zinc` yet and is adopting these values, so this stays a superset.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-native-library",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Pixelize mobile design library — React Native / Expo. The mobile counterpart to pixelize-design-library.",
   "private": false,
   "repository": {
@@ -278,6 +278,10 @@
       "types": "./lib/typescript/core/style/index.d.ts",
       "default": "./lib/module/core/style/index.js"
     },
+    "./surface": {
+      "types": "./lib/typescript/modules/surface/index.d.ts",
+      "default": "./lib/module/modules/surface/index.js"
+    },
     "./swipeable-row": {
       "types": "./lib/typescript/modules/swipeable-row/index.d.ts",
       "default": "./lib/module/modules/swipeable-row/index.js"
@@ -348,11 +352,12 @@
     "@shopify/flash-list": ">=2.0.0",
     "expo-document-picker": ">=57.0.0",
     "expo-image": ">=57.0.0",
+    "expo-haptics": ">=57.0.0",
     "expo-image-picker": ">=57.0.0",
     "lucide-react-native": ">=1.24.0",
     "react": ">=18.3.0",
     "react-dom": ">=18.3.0",
-    "react-native": ">=0.79.0",
+    "react-native": ">=0.82.0",
     "react-native-enriched-html": ">=1.0.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=4.0.0",
@@ -397,6 +402,9 @@
     "expo-image": {
       "optional": true
     },
+    "expo-haptics": {
+      "optional": true
+    },
     "react-native-enriched-html": {
       "optional": true
     }

package/registry.json

@@ -311,6 +311,11 @@
       "import": "pixelize-native-library/stepper",
       "description": "stepper/ — horizontal multi-step progress display"
     },
+    {
+      "name": "surface",
+      "import": "pixelize-native-library/surface",
+      "description": "surface/ — the primitive every other container is built on"
+    },
     {
       "name": "swipeable-row",
       "import": "pixelize-native-library/swipeable-row",