react-native-terra-ui 0.13.6 → 0.13.8

package/src/components/input/parts/InputField.tsx

@@ -1,4 +1,4 @@
-import { type ComponentRef, forwardRef, useCallback, useState } from "react";
+import { type ComponentRef, forwardRef } from "react";
 import { TextInput, View } from "react-native";
 
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -6,8 +6,12 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import type { ColorToken, RadiusKey } from "#theme/types";
 import { resolveThemeColor } from "#utils/resolve-theme-color";
 import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
+import { useFocusState } from "../hooks/use-focus-state";
 import type { InputBaseProps, InputSize } from "../types";
 
+/** Container height per size, in dp. Sibling controls sized to match read from here. */
+export const FIELD_HEIGHT: Record<InputSize, number> = { sm: 36, md: 44, lg: 52 };
+
 /** Typographic role of the text, per size. */
 const TEXT_VARIANT: Record<InputSize, "subheadline" | "callout" | "body"> = {
   sm: "subheadline",
@@ -25,6 +29,9 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
     size = "md",
     isDisabled = false,
     isInvalid = false,
+    focusBorderColor,
+    focusBorderWidth,
+    hasFocusGlow = false,
     leading,
     trailing,
     background = "surface.sunken",
@@ -36,32 +43,24 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
   },
   ref
 ) {
-  // The focus ring is a style decision, so it stays a variant; only the
-  // placeholder colour has to leave the stylesheet, because `TextInput` takes it
-  // as a prop rather than as a style.
-  const [isFocused, setIsFocused] = useState(false);
-  const { theme } = useUnistyles();
-
-  const handleFocus = useCallback<NonNullable<InputBaseProps["onFocus"]>>(
-    (event) => {
-      setIsFocused(true);
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
+  const { isFocused, handleFocus, handleBlur } = useFocusState(onFocus, onBlur);
+  const showsFocus = isFocused && !isDisabled;
 
-  const handleBlur = useCallback<NonNullable<InputBaseProps["onBlur"]>>(
-    (event) => {
-      setIsFocused(false);
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
+  // The placeholder colour has to leave the stylesheet because `TextInput` takes
+  // it as a prop rather than as a style.
+  const { theme } = useUnistyles();
 
-  styles.useVariants({ size, disabled: isDisabled, invalid: isInvalid, focused: isFocused && !isDisabled });
+  styles.useVariants({ size, disabled: isDisabled, invalid: isInvalid });
 
   return (
-    <View style={[styles.container, styles.fill(background, radius), style]}>
+    <View
+      style={[
+        styles.container,
+        styles.fill(background, radius),
+        showsFocus && styles.focus(focusBorderColor, focusBorderWidth, hasFocusGlow, isInvalid),
+        style,
+      ]}
+    >
       {leading}
       <TextInput
         ref={ref}
@@ -97,13 +96,9 @@ const styles = StyleSheet.create((theme) => {
       borderColor: theme.color["border.subtle"],
       variants: {
         size: {
-          sm: { height: 36, paddingHorizontal: theme.spacing["4"], gap: 6 },
-          md: { height: 44, paddingHorizontal: theme.spacing["4"], gap: 6 },
-          lg: { height: 52, paddingHorizontal: theme.spacing["4"], gap: 6 },
-        },
-        focused: {
-          true: { borderColor: theme.color["accent.border"] },
-          false: {},
+          sm: { height: FIELD_HEIGHT.sm, paddingHorizontal: theme.spacing["3"], gap: 6 },
+          md: { height: FIELD_HEIGHT.md, paddingHorizontal: theme.spacing["3"], gap: 6 },
+          lg: { height: FIELD_HEIGHT.lg, paddingHorizontal: theme.spacing["4"], gap: 6 },
         },
         invalid: {
           true: { borderColor: theme.color["danger.text"] },
@@ -115,6 +110,26 @@ const styles = StyleSheet.create((theme) => {
         },
       },
     },
+    // Only the keys that apply are set, so an unset option leaves the resting
+    // border alone rather than overriding it with `undefined`. An invalid field
+    // keeps its danger border and skips the glow, so the error stays the loudest
+    // signal; only the width still follows focus.
+    focus: (
+      color: ColorToken | undefined,
+      width: number | undefined,
+      hasGlow: boolean,
+      isInvalid: boolean
+    ) => {
+      const focusColor = resolveThemeColor(color ?? "border.default", theme);
+      return {
+        ...(width !== undefined && { borderWidth: width }),
+        ...(color && !isInvalid && { borderColor: focusColor }),
+        ...(hasGlow &&
+          !isInvalid && {
+            boxShadow: [{ offsetX: 0, offsetY: 0, blurRadius: 4, spreadDistance: 1, color: focusColor }],
+          }),
+      };
+    },
     // `background` is an open `ColorToken` and `radius` an eight-step scale, so
     // both resolve in a dynamic function rather than enumerating as variants.
     fill: (background: ColorToken, radius: RadiusKey) => ({
@@ -137,7 +152,6 @@ const styles = StyleSheet.create((theme) => {
           md: { fontSize: theme.typography.variants[TEXT_VARIANT.md].fontSize },
           lg: { fontSize: theme.typography.variants[TEXT_VARIANT.lg].fontSize },
         },
-        focused: { true: {}, false: {} },
         invalid: { true: {}, false: {} },
         disabled: { true: {}, false: {} },
       },

package/src/components/input/types.ts

@@ -24,8 +24,18 @@ export interface InputBaseProps extends Omit<TextInputProps, "style" | "editable
   trailing?: ReactNode;
   /** Fill token. Defaults to `'surface.sunken'`. */
   background?: ColorToken;
-  /** Corner radius. Defaults to `'md'`. */
+  /** Corner radius. Defaults to `'lg'`; `Input.Search` uses `'full'`. */
   radius?: RadiusKey;
+  /** Border colour while focused. Defaults to `undefined` — the resting border stays. */
+  focusBorderColor?: ColorToken;
+  /** Border width while focused, in dp. Defaults to `undefined` — the resting hairline stays. */
+  focusBorderWidth?: number;
+  /**
+   * Surround the field with a soft glow while focused, tinted by
+   * `focusBorderColor` or `border.default` when that is unset. Defaults to
+   * `false`; `Input.Search` turns it on.
+   */
+  hasFocusGlow?: boolean;
   /** Merged over the container's own style. */
   style?: StyleProp<ViewStyle>;
 }

package/src/components/input/variants/SearchInput/SearchCancelButton.tsx

@@ -0,0 +1,109 @@
+import { useEffect } from "react";
+
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { Icon } from "../../../icon";
+import { PressableOpacity } from "../../../pressable";
+import { FIELD_HEIGHT } from "../../parts/InputField";
+import type { InputSize } from "../../types";
+import { ICON_SIZE } from "./utils";
+
+/** How long the button takes to slide in and the field to make room, in ms. */
+const TRANSITION_MS = 250;
+
+/** Scale the button grows from, so it pops in rather than only fading. */
+const START_SCALE = 0.6;
+
+/** The x runs a touch larger than the field's glyphs; it has a circle to itself. */
+const GLYPH_EXTRA = 2;
+
+interface SearchCancelButtonProps {
+  /** Slides the button in when `true` and out when `false`. */
+  isVisible: boolean;
+  size: InputSize;
+  /** Fill token, matched to the field it sits beside. */
+  background: ColorToken;
+  accessibilityLabel: string;
+  onPress: () => void;
+}
+
+/**
+ * A round button the height of the field, in a slot that opens and closes
+ * beside it. The slot stays mounted so it can animate out; while collapsed it
+ * is hidden from touch and from screen readers.
+ */
+export function SearchCancelButton({
+  isVisible,
+  size,
+  background,
+  accessibilityLabel,
+  onPress,
+}: SearchCancelButtonProps) {
+  // One progress value drives the slot's width, so the field (flex: 1) gives
+  // up its room frame by frame instead of jumping when the button appears.
+  const { theme } = useUnistyles();
+  const progress = useSharedValue(0);
+  const diameter = FIELD_HEIGHT[size];
+  // The gap lives inside the slot, so it opens with the button and the field
+  // sits flush to the edge when the button is gone.
+  const slotWidth = diameter + theme.spacing["2"];
+
+  useEffect(() => {
+    progress.value = withTiming(isVisible ? 1 : 0, {
+      duration: TRANSITION_MS,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+    });
+  }, [isVisible, progress]);
+
+  const slotStyle = useAnimatedStyle(() => ({
+    width: progress.value * slotWidth,
+    opacity: progress.value,
+    transform: [{ scale: interpolate(progress.value, [0, 1], [START_SCALE, 1]) }],
+  }));
+
+  return (
+    <Animated.View
+      style={[styles.slot(isVisible), slotStyle]}
+      accessibilityElementsHidden={!isVisible}
+      importantForAccessibility={isVisible ? "auto" : "no-hide-descendants"}
+    >
+      <PressableOpacity
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        onPress={onPress}
+        style={styles.button(diameter, background)}
+      >
+        <Icon name="terra.x" size={ICON_SIZE[size] + GLYPH_EXTRA} color="text.primary" />
+      </PressableOpacity>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  slot: (isVisible: boolean) => ({
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    overflow: "hidden",
+    pointerEvents: isVisible ? "auto" : "none",
+  }),
+  // A circle the height of the field, filled and edged to match it.
+  button: (diameter: number, background: ColorToken) => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: resolveThemeColor(background, theme),
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.color["border.subtle"],
+  }),
+}));

package/src/components/input/variants/SearchInput/SearchClearButton.tsx

@@ -0,0 +1,58 @@
+import { Pressable } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { Icon } from "../../../icon";
+import type { InputSize } from "../../types";
+import { ICON_SIZE } from "./utils";
+
+/** Touch expansion around the button, in dp — it is smaller than a cell. */
+const HIT_SLOP = 8;
+
+/** The x as a share of its disc, so it reads inside the circle. */
+const GLYPH_RATIO = 0.6;
+
+/** Heavier than the icon default so the small glyph stays legible on the disc. */
+const GLYPH_STROKE_WIDTH = 3.3;
+
+interface SearchClearButtonProps {
+  size: InputSize;
+  accessibilityLabel: string;
+  onPress: () => void;
+}
+
+/**
+ * A solid disc with an x, like iOS's `xmark.circle.fill`. Sized to the field's
+ * glyphs so it sits in the trailing slot without changing the row height.
+ */
+export function SearchClearButton({ size, accessibilityLabel, onPress }: SearchClearButtonProps) {
+  const diameter = ICON_SIZE[size];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      hitSlop={HIT_SLOP}
+      onPress={onPress}
+      style={styles.disc(diameter)}
+    >
+      <Icon
+        name="terra.x"
+        size={Math.round(diameter * GLYPH_RATIO)}
+        color="text.inverse"
+        strokeWidth={GLYPH_STROKE_WIDTH}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  disc: (diameter: number) => ({
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color["text.tertiary"],
+  }),
+}));

package/src/components/input/variants/SearchInput/index.tsx

@@ -1,17 +1,15 @@
-import { type ComponentRef, forwardRef, useCallback, useState } from "react";
-import { Pressable, type TextInput } from "react-native";
+import { type ComponentRef, forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { type TextInput, View } from "react-native";
 
 import { StyleSheet } from "react-native-unistyles";
 
 import { Icon } from "../../../icon";
+import { useFocusState } from "../../hooks/use-focus-state";
 import { InputField } from "../../parts/InputField";
 import type { InputBaseProps } from "../../types";
-
-/** Glyph size per field size, in dp. */
-const ICON_SIZE = { sm: 16, md: 18, lg: 20 } as const;
-
-/** Touch expansion around the clear button, in dp — it is smaller than a cell. */
-const CLEAR_HIT_SLOP = 8;
+import { SearchCancelButton } from "./SearchCancelButton";
+import { SearchClearButton } from "./SearchClearButton";
+import { ICON_SIZE } from "./utils";
 
 export interface SearchInputProps extends Omit<InputBaseProps, "leading" | "trailing"> {
   /**
@@ -23,16 +21,30 @@ export interface SearchInputProps extends Omit<InputBaseProps, "leading" | "trai
   isClearable?: boolean;
   /** Accessible name of the clear button. Defaults to `'Clear search'`. */
   clearAccessibilityLabel?: string;
+  /**
+   * Show a round cancel button beside the field while it is focused. Pressing it
+   * blurs the field and calls `onCancelPress`. Defaults to `false`.
+   */
+  hasCancelButton?: boolean;
+  /**
+   * Called when the cancel button is pressed, after the field has blurred. The
+   * text is left alone; clear it here if cancelling should also reset the query.
+   */
+  onCancelPress?: () => void;
+  /** Accessible name of the cancel button. Defaults to `'Cancel search'`. */
+  cancelAccessibilityLabel?: string;
 }
 
 /**
  * A search field: a leading magnifier, and a clear button that appears as soon
  * as there is text. Controlled through `value` or left to manage its own, and
- * it defaults to the search return key so the keyboard reads correctly.
+ * it defaults to the search return key so the keyboard reads correctly. With
+ * `hasCancelButton`, a round cancel button slides in beside it while focused.
  *
  * @example
  * ```tsx
  * <Input.Search value={query} onChangeText={setQuery} onSubmitEditing={run} />
+ * <Input.Search hasCancelButton onCancelPress={() => setQuery("")} />
  * ```
  */
 export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInputProps>(function SearchInput(
@@ -43,16 +55,29 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
     onClear,
     isClearable = true,
     clearAccessibilityLabel = "Clear search",
+    hasCancelButton = false,
+    onCancelPress,
+    cancelAccessibilityLabel = "Cancel search",
     placeholder = "Search",
     isDisabled = false,
     size = "md",
     radius = "full",
+    background = "surface.sunken",
+    hasFocusGlow = true,
     returnKeyType = "search",
     clearButtonMode = "never",
+    style,
+    onFocus,
+    onBlur,
     ...rest
   },
   ref
 ) {
+  // The cancel button needs the native input to blur it, and the caller still
+  // gets the same instance through the forwarded ref.
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
+
   // The clear button only exists while there is text, so an uncontrolled field
   // still has to be tracked. That state also has to drive the native input:
   // resetting it alone would hide the button while the text stayed on screen,
@@ -61,6 +86,20 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const isControlled = value !== undefined;
   const text = isControlled ? value : uncontrolledValue;
+  // Ending the edit makes iOS commit any pending autocorrect suggestion as one
+  // last `onChangeText`. `onCancelPress` waits for the blur event, which comes
+  // after it, so a query cleared there is not overwritten by the late commit.
+  const isCancellingRef = useRef(false);
+  const handleBlurAfterCancel = useCallback<NonNullable<SearchInputProps["onBlur"]>>(
+    (event) => {
+      onBlur?.(event);
+      if (!isCancellingRef.current) return;
+      isCancellingRef.current = false;
+      onCancelPress?.();
+    },
+    [onBlur, onCancelPress]
+  );
+  const { isFocused, handleFocus, handleBlur } = useFocusState(onFocus, handleBlurAfterCancel);
 
   const handleChangeText = useCallback(
     (next: string) => {
@@ -76,14 +115,28 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
     onClear?.();
   }, [isControlled, onChangeText, onClear]);
 
-  const hasText = text.length > 0;
+  const handleCancel = useCallback(() => {
+    const input = inputRef.current;
+    // No blur event will come for a field that is not focused, so call through.
+    if (!input?.isFocused()) {
+      onCancelPress?.();
+      return;
+    }
+    isCancellingRef.current = true;
+    input.blur();
+  }, [onCancelPress]);
 
-  return (
+  const showsClear = isClearable && text.length > 0 && !isDisabled;
+  const showsCancel = isFocused && !isDisabled;
+
+  const field = (
     <InputField
-      ref={ref}
+      ref={inputRef}
       size={size}
       radius={radius}
+      background={background}
       isDisabled={isDisabled}
+      hasFocusGlow={hasFocusGlow}
       placeholder={placeholder}
       returnKeyType={returnKeyType}
       // iOS's native clear button would sit beside ours; ours is the
@@ -91,28 +144,43 @@ export const SearchInput = forwardRef<ComponentRef<typeof TextInput>, SearchInpu
       clearButtonMode={clearButtonMode}
       value={text}
       onChangeText={handleChangeText}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       leading={<Icon name="terra.search" size={ICON_SIZE[size]} color="text.tertiary" />}
       trailing={
-        isClearable && hasText && !isDisabled ? (
-          <Pressable
-            accessibilityLabel={clearAccessibilityLabel}
-            accessibilityRole="button"
-            hitSlop={CLEAR_HIT_SLOP}
-            onPress={handleClear}
-            style={styles.clear}
-          >
-            <Icon name="terra.x" size={ICON_SIZE[size]} color="text.tertiary" />
-          </Pressable>
+        showsClear ? (
+          <SearchClearButton size={size} accessibilityLabel={clearAccessibilityLabel} onPress={handleClear} />
         ) : undefined
       }
+      // With a cancel button the row is the outer element, so `style` moves there.
+      style={hasCancelButton ? undefined : style}
       {...rest}
     />
   );
+
+  // Without a cancel button the field renders bare, so its layout is unchanged.
+  if (!hasCancelButton) return field;
+
+  return (
+    <View style={[styles.row, style]}>
+      <View style={styles.fieldSlot}>{field}</View>
+      <SearchCancelButton
+        isVisible={showsCancel}
+        size={size}
+        background={background}
+        accessibilityLabel={cancelAccessibilityLabel}
+        onPress={handleCancel}
+      />
+    </View>
+  );
 });
 
 const styles = StyleSheet.create(() => ({
-  clear: {
+  row: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
+  },
+  fieldSlot: {
+    flex: 1,
   },
 }));

package/src/components/input/variants/SearchInput/utils.ts

@@ -0,0 +1,4 @@
+import type { InputSize } from "../../types";
+
+/** Glyph size per field size, in dp. Shared by the magnifier and both buttons. */
+export const ICON_SIZE: Record<InputSize, number> = { sm: 14, md: 16, lg: 18 };

package/src/components/screen/ScreenList.tsx

@@ -245,6 +245,9 @@ const ScreenListBase = forwardRef(function ScreenList(
       contentInsetAdjustmentBehavior={platformAdjustsInsets ? "automatic" : "never"}
       automaticallyAdjustContentInsets={false}
       automaticallyAdjustsScrollIndicatorInsets={false}
+      // iOS: inset by the keyboard so a focused field can scroll above it.
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
       contentContainerStyle={[
         styles.content(
           resolvedPadding,

package/src/components/screen/ScreenScrollView.tsx

@@ -117,6 +117,9 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
         contentInsetAdjustmentBehavior={platformAdjustsInsets ? "automatic" : "never"}
         automaticallyAdjustContentInsets={false}
         automaticallyAdjustsScrollIndicatorInsets={false}
+        // iOS: inset by the keyboard so a focused field can scroll above it.
+        automaticallyAdjustKeyboardInsets
+        keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={16}
         contentContainerStyle={[

package/src/theme/tokens/dark.ts

@@ -4,24 +4,24 @@
  */
 export const dark = {
   // Surfaces
-  "color.surface.canvas": "#080a0d",
-  "color.surface.default": "#14191f",
-  "color.surface.raised": "#1f262e",
+  "color.surface.canvas": "{palette.ink.950}",
+  "color.surface.default": "{palette.ink.900}",
+  "color.surface.raised": "{palette.ink.800}",
   "color.surface.sunken": "#0f1318",
 
   // Text
-  "color.text.primary": "{palette.neutral.50}",
+  "color.text.primary": "{palette.ink.50}",
   // Custom grays preserve supporting-text emphasis on dark surfaces.
   "color.text.secondary": "#b8b8be",
   "color.text.tertiary": "#8d8d96",
   "color.text.disabled": "#606069",
-  "color.text.inverse": "{palette.neutral.950}",
+  "color.text.inverse": "{palette.ink.950}",
   "color.text.link": "{palette.blue.300}",
 
   // Borders and focus
-  "color.border.subtle": "{palette.neutral.800}",
-  "color.border.default": "{palette.neutral.700}",
-  "color.border.strong": "{palette.neutral.500}",
+  "color.border.subtle": "{palette.ink.800}",
+  "color.border.default": "{palette.ink.700}",
+  "color.border.strong": "{palette.ink.500}",
   "color.focus.ring": "{palette.blue.400}",
 
   // Effects
@@ -41,19 +41,19 @@ export const dark = {
   "color.accent.soft.bg": "{palette.emerald.950}",
   "color.accent.soft.bg.hover": "{palette.emerald.900}",
   "color.accent.soft.bg.pressed": "{palette.emerald.800}",
-  "color.accent.soft.bg.disabled": "{palette.neutral.900}",
+  "color.accent.soft.bg.disabled": "{palette.ink.900}",
   "color.accent.soft.fg": "{palette.emerald.300}",
 
   // Neutral
-  "color.neutral.solid.bg": "{palette.neutral.600}",
-  "color.neutral.solid.fg": "{palette.neutral.50}",
+  "color.neutral.solid.bg": "{palette.ink.700}",
+  "color.neutral.solid.fg": "{palette.ink.50}",
 
   // Translucent fills keep soft controls distinct from surrounding surfaces.
-  "color.neutral.soft.bg": "{palette.neutral.400}/25",
-  "color.neutral.soft.bg.hover": "{palette.neutral.400}/35",
-  "color.neutral.soft.bg.pressed": "{palette.neutral.400}/45",
-  "color.neutral.soft.bg.disabled": "{palette.neutral.900}",
-  "color.neutral.soft.fg": "{palette.neutral.200}",
+  "color.neutral.soft.bg": "{palette.ink.400}/25",
+  "color.neutral.soft.bg.hover": "{palette.ink.400}/35",
+  "color.neutral.soft.bg.pressed": "{palette.ink.400}/45",
+  "color.neutral.soft.bg.disabled": "{palette.ink.900}",
+  "color.neutral.soft.fg": "{palette.ink.200}",
 
   // Success
   "color.success.text": "{palette.green.400}",

package/src/theme/tokens/light.ts

@@ -7,13 +7,13 @@ export const light = {
   "color.surface.canvas": "#fbfbfb",
   "color.surface.default": "{palette.white}",
   "color.surface.raised": "{palette.white}",
-  "color.surface.sunken": "#ececee",
+  "color.surface.sunken": "{palette.neutral.100}",
 
   // Text
   "color.text.primary": "{palette.neutral.950}",
-  "color.text.secondary": "#4b5060",
-  "color.text.tertiary": "#626978",
-  "color.text.disabled": "#9ca3af",
+  "color.text.secondary": "#55555d",
+  "color.text.tertiary": "#6e6e76",
+  "color.text.disabled": "#d4d4d8",
   "color.text.inverse": "{palette.white}",
   "color.text.link": "{palette.blue.700}",
 

package/src/theme/tokens/primitives.ts

@@ -164,6 +164,18 @@ export const primitives = {
   "palette.mist.800": "#22292b",
   "palette.mist.900": "#161b1d",
   "palette.mist.950": "#090b0c",
+  // Custom: blue-tinted neutral built on the dark surfaces (canvas 950, default 900, raised 800).
+  "palette.ink.50": "#f8f9fb",
+  "palette.ink.100": "#eef1f4",
+  "palette.ink.200": "#dde2e8",
+  "palette.ink.300": "#c3cad3",
+  "palette.ink.400": "#9aa4b1",
+  "palette.ink.500": "#6b7684",
+  "palette.ink.600": "#424d5a",
+  "palette.ink.700": "#2e3742",
+  "palette.ink.800": "#1f262e",
+  "palette.ink.900": "#14191f",
+  "palette.ink.950": "#080a0d",
   "palette.olive.50": "#fbfbf9",
   "palette.olive.100": "#f4f4f0",
   "palette.olive.200": "#e8e8e3",