@multiplatform.one/theme 7.90.6 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.90.6",
+  "version": "8.0.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -30,8 +30,8 @@
   "types": "types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    "./src/*": "./src/*",
     ".": {
+      "gnome": "./src/index.gnome.ts",
       "source": "./src/index.ts",
       "types": "./types/index.d.ts",
       "react-native": {
@@ -109,14 +109,62 @@
       "react-native": "./src/expo.ts",
       "browser": "./src/expo.ts",
       "default": "./expo.cjs"
+    },
+    "./devtools": {
+      "source": "./src/theme/devtools/index.ts",
+      "types": "./types/theme/devtools/index.d.ts",
+      "react-native": {
+        "types": "./types/theme/devtools/index.d.ts",
+        "import": "./dist/esm/theme/devtools/index.native.js",
+        "require": "./dist/cjs/theme/devtools/index.native.js"
+      },
+      "import": "./dist/esm/theme/devtools/index.mjs",
+      "require": "./dist/cjs/theme/devtools/index.cjs",
+      "default": "./dist/esm/theme/devtools/index.mjs"
+    },
+    "./dates": {
+      "source": "./src/dates.ts",
+      "types": "./types/dates.d.ts",
+      "react-native": {
+        "types": "./types/dates.d.ts",
+        "import": "./dist/esm/dates.native.js",
+        "require": "./dist/cjs/dates.native.js"
+      },
+      "import": "./dist/esm/dates.mjs",
+      "require": "./dist/cjs/dates.cjs",
+      "default": "./dist/esm/dates.mjs"
+    },
+    "./fonts": {
+      "source": "./src/fonts/index.ts",
+      "types": "./types/fonts/index.d.ts",
+      "react-native": {
+        "types": "./types/fonts/index.d.ts",
+        "import": "./dist/esm/fonts/index.native.js",
+        "require": "./dist/cjs/fonts/index.native.js"
+      },
+      "import": "./dist/esm/fonts/index.mjs",
+      "require": "./dist/cjs/fonts/index.cjs",
+      "default": "./dist/esm/fonts/index.mjs"
+    },
+    "./native-twins": {
+      "source": "./src/nativeTwins.ts",
+      "types": "./types/nativeTwins.d.ts",
+      "react-native": {
+        "types": "./types/nativeTwins.d.ts",
+        "import": "./dist/esm/nativeTwins.native.js",
+        "require": "./dist/cjs/nativeTwins.native.js"
+      },
+      "import": "./dist/esm/nativeTwins.mjs",
+      "require": "./dist/cjs/nativeTwins.cjs",
+      "default": "./dist/esm/nativeTwins.mjs"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.90.6",
-    "@multiplatform.one/store": "^7.90.6",
+    "@multiplatform.one/platform": "^8.0.0",
+    "@multiplatform.one/store": "^8.0.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -132,8 +180,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.90.6",
-    "@multiplatform.one/test-utils": "7.90.6",
+    "@multiplatform.one/config": "8.0.0",
+    "@multiplatform.one/test-utils": "8.0.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/build": "2.7.6",

package/src/index.gnome.ts

@@ -0,0 +1,544 @@
+export {
+  assertNoPrebuiltThemes,
+  createDefaultThemeConfig,
+  TAMAGUI_ERA,
+  tamaguiEra,
+} from "./theme/createDefaultThemeConfig";
+export type { CreateDefaultThemeConfigOptions } from "./theme/createDefaultThemeConfig";
+export {
+  createThemesBuilder,
+  houseComponentThemes,
+  houseGrandChildrenThemes,
+  houseTemplates,
+  tintHueNames,
+} from "./theme/createThemes";
+export type {
+  BaseThemeBuilderDefinition,
+  CreateThemesBuilderOptions,
+  GetThemeProps,
+  Shadows,
+  ThemeBuilderDefinition,
+} from "./theme/createThemes";
+export {
+  clearPresets,
+  createThemeConfig,
+  getPreset,
+  getPresetNames,
+  registerPreset,
+  resolveThemeFromPreset,
+} from "./theme/shared";
+export type { ThemeConfig, ThemeConfigScaleOptions } from "./theme/shared";
+export {
+  BodyFont,
+  BorderRadius,
+  BorderWidth,
+  BulkBarPlacement,
+  CornerSmoothing,
+  defaultKnobs,
+  DisabledStyle,
+  Elevation,
+  emptyStateKnobs,
+  FieldLabelPlacement,
+  FillStyle,
+  FontCategory,
+  FontWeight,
+  FormAutofocus,
+  HeadingFont,
+  interactionStates,
+  normalizeAnimationKnob,
+  PageTitleScale,
+  RequiredMarking,
+  SelectAllScope,
+  TableZebra,
+  TextAccent,
+  TimestampStyle,
+} from "./theme/knobs";
+export type { Animation, InteractionState, Knobs, StateKnobs } from "./theme/knobs";
+export { defaultIntents } from "./theme/intents";
+export type {
+  CardLiftProps,
+  ControlStateProps,
+  CornerSmoothingCarrier,
+  DisabledAssemblyProps,
+  DisabledChromeProps,
+  DisabledRecipe,
+  DisabledSurfaceProps,
+  DisabledTextProps,
+  ElevationChromeProps,
+  ElevationPaintProps,
+  ElevationStateProps,
+  KnobProps,
+  KnobPropsOverride,
+  KnobRecipe,
+  PageTitleFragment,
+  ResolvedKnobs,
+  SelectedRecipe,
+  StateRecipes,
+  TextRoleFragment,
+  TextStateProps,
+} from "./theme/recipes";
+export {
+  borderRadiusMap,
+  capContainerRadius,
+  capFieldRadius,
+  cardElevationMap,
+  cardLift,
+  containerCapProps,
+  containerRadiusMap,
+  edgeColorAt,
+  elevationMap,
+  getHeadingFontFamily,
+  labelFontSizeFor,
+  nestedControlPx,
+  normalizeSizeToken,
+  overlayElevationMap,
+  paintedCardFill,
+  panelPaddingPx,
+  radiusStopFromToken,
+  railFillRadius,
+  resolveKnobs,
+  resolvePageTitleScale,
+  resolveTextRoles,
+  sizedElevation,
+  sizeKeyBelow,
+  spacingRoles,
+} from "./theme/resolveKnobs";
+export type {
+  CappedContainer,
+  ColorScheme,
+  ContainerCapDeclaration,
+  ResolveKnobsEnvironment,
+} from "./theme/resolveKnobs";
+export {
+  applyRadiusStop,
+  applyTouchFloor,
+  cloneSizeRecipeInputs,
+  createRecipeFamilies,
+  DEFAULT_SIZE_RECIPE_INPUTS,
+  defaultRecipeInputs,
+  generateSizeRecipes,
+  generateSizeRecipeTables,
+  getGeneratedSizeRecipes,
+  getSizeRecipeFamily,
+  getSizeRecipeInputs,
+  getTileSizeLadder,
+  mergeRecipeInputs,
+  recipeFamilies,
+  recipeFromTokenChannels,
+  recipeKeyAbove,
+  recipeKeyBelow,
+  resolveControlRadius,
+  resolveSizeRecipeInputs,
+  setSizeRecipeInputs,
+  SIZE_RECIPE_FAMILY_NAMES,
+  SIZE_RECIPE_RADIUS_STOPS,
+  SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
+  SIZE_RECIPE_TOKENS,
+  SIZE_TOKEN_EXPONENTS,
+  sizeRecipeBoxVariants,
+  sizeRecipeEscape,
+  sizeRecipeForToken,
+  sizeRecipeFromHeight,
+  sizeRecipeIconVariants,
+  sizeRecipes,
+  sizeRecipeTypeVariants,
+  textFieldInset,
+  tileSizeLadder,
+  TOUCH_HEIGHT_FLOOR,
+} from "./theme/sizeRecipes";
+export type {
+  GeneratedSizeRecipes,
+  RecipeFamilies,
+  SizeRecipe,
+  SizeRecipeBoxVariant,
+  SizeRecipeFamily,
+  SizeRecipeFamilyName,
+  SizeRecipeIconVariant,
+  SizeRecipeInputs,
+  SizeRecipeRadiusStop,
+  SizeRecipeRatios,
+  SizeRecipeTables,
+  SizeRecipeToken,
+  SizeRecipeTokenChannels,
+  SizeRecipeTokenTable,
+  SizeRecipeTypeVariant,
+} from "./theme/sizeRecipes";
+export {
+  cloneTileSizeInputs,
+  defaultTileSizeInputs,
+  defaultWidthFactors,
+  generateTileSizeLadder,
+  mediaAspectRatios,
+  resolveMediaAspect,
+  resolveTileSizeInputs,
+  tileColumnsForWidth,
+  tileRungFlexProps,
+  tileSizeRungs,
+  tileSizeStepExponents,
+} from "./theme/tileSizes";
+export type {
+  MediaAspect,
+  MediaAspectName,
+  TileRungFlexProps,
+  TileSizeInputs,
+  TileSizeLadder,
+  TileSizeRung,
+  TileSizeStop,
+} from "./theme/tileSizes";
+export { PresetContext, usePresetContext, usePresetTints } from "./theme/PresetContext";
+export type { PresetContextValue } from "./theme/PresetContext";
+export { applyColorTheme, Preset } from "./theme/Preset";
+export type { PresetProps } from "./theme/Preset";
+export {
+  clampSurfaceSize,
+  compareSizeTokens,
+  sizeTokenBelow,
+  sizeTokenStep,
+  sizeTokenStop,
+  Surface,
+  SurfaceContext,
+  surfaceSizeRank,
+  useBarSurface,
+  useElevatedSurface,
+  useFieldSurface,
+} from "./theme/Surface";
+export type { SurfaceIntent, SurfaceSize } from "./theme/Surface";
+export {
+  controlTierDisabled,
+  controlTierPaint,
+  controlTierWash,
+  isDarkThemeName,
+} from "./theme/controlTiers";
+export type { ControlTier, ControlTierPaint } from "./theme/controlTiers";
+export {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  DialogContent,
+  DialogOverlay,
+  DialogRegionContext,
+  DialogSheetFaceProvider,
+  DialogShowFocus,
+  overlayScrim,
+  PopoverContent,
+  sheetGrabber,
+  sheetGrabberClearance,
+  sheetGrabberZone,
+  useDialogRegionContext,
+  useDialogSheetFace,
+  useIsInDialogRegion,
+} from "./theme/overlaySurfaces";
+export type { DialogContentProps, DialogRegionContextValue } from "./theme/overlaySurfaces";
+export {
+  boldPreset,
+  consolePreset,
+  defaultPreset,
+  densePreset,
+  heroPreset,
+  roomyPreset,
+  storefrontPreset,
+} from "./theme/presets";
+export {
+  IntentContext,
+  solidButtonIntents,
+  solidPaletteThemes,
+  useIntentContext,
+  useResolvedKnobs,
+} from "./theme/useResolvedKnobs";
+export type { UseResolvedKnobsOptions } from "./theme/useResolvedKnobs";
+export { useTheme } from "./theme/useTheme";
+export type { ThemeScheme } from "./theme/useTheme";
+export { createDefaultFont } from "./font";
+export {
+  __resetDevWarnSeen,
+  __resetThemeDevWarnSeen,
+  devWarn,
+  DIALOG_MAX_ACTIONS,
+  themeDevWarn,
+  warnBannedErrorWords,
+  warnBareDisabled,
+  warnCancelDisabled,
+  warnDialogTooManyActions,
+  warnOutlinedIgnored,
+  warnOutlineNone,
+  warnPlaceholderAsLabel,
+  warnPositiveTabIndex,
+  warnSelectTooFewOptions,
+  warnSizeRecipeEscape,
+  warnTooltipOnDisabled,
+} from "./devWarn";
+export type { DevWarnCode, DevWarnDetail, GuardrailSpecimenParameter } from "./devWarn";
+export {
+  defaultMaxPanes,
+  DETAIL_READABLE_WIDTH,
+  FORM_READABLE_WIDTH,
+  FORM_READABLE_WIDTH_MAX,
+  FORM_READABLE_WIDTH_MIN,
+  getLayoutSizeClass,
+  isTouchSurface,
+  LAYOUT_SIZE_CLASS_ORDER,
+  layoutBreakpoints,
+  layoutSizeClassAtLeast,
+  MIN_PRESS_TARGET,
+  NARROW_BREAKPOINT,
+  OVERLAY_ANCHOR_GAP,
+  OVERLAY_ATTACH_GAP,
+  OVERLAY_BREAKPOINT,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  READING_WIDTH_BODY_FALLBACK,
+  READING_WIDTH_CH,
+  READING_WIDTH_CH_EM,
+  READING_WIDTH_MAX_CH,
+  READING_WIDTH_MIN_CH,
+  readingWidthStyle,
+  useLayoutSizeClass,
+  useMultiPane,
+  useReadingWidthStyle,
+  useSemanticGaps,
+} from "./theme/layoutTokens";
+export type {
+  HitSlopInsets,
+  LayoutBreakpointName,
+  LayoutSizeClass,
+  PressTargetStyle,
+  ReadingWidthStyle,
+} from "./theme/layoutTokens";
+export { Intent } from "./theme/Intent";
+export type { IntentProps } from "./theme/Intent";
+export {
+  ensureFocusVisibleRing,
+  FOCUS_RING_CLIPPED_OFFSET,
+  FOCUS_RING_FLUSH_OFFSET,
+  FOCUS_RING_HALO_OFFSET,
+  FOCUS_RING_MIN_CONTRAST,
+  FOCUS_RING_MIN_WIDTH,
+  FOCUS_VISIBLE_RING,
+  FOCUS_VISIBLE_RING_HALO,
+  FOCUS_VISIBLE_RING_INSET,
+  focusRingColorMeetsContrast,
+  isSanctionedFocusRingOffset,
+  SANCTIONED_FOCUS_RING_OFFSETS,
+  STATE_LAYER_HOVER,
+  STATE_LAYER_PRESS,
+  withDefaultStateLayer,
+} from "./theme/focusState";
+export {
+  FIELD_FOCUS_COLOR,
+  FIELD_FOCUS_REST,
+  FIELD_FOCUS_STYLE,
+  fieldFocusCss,
+  fieldFocusHoldsContrast,
+} from "./theme/fieldFocus";
+export {
+  ensureHairlineFallback,
+  hairline,
+  hairlineBorderWidth,
+  hairlineFallbackCss,
+  hairlineWidth,
+} from "./theme/hairline";
+export {
+  compositeFocusRingCss,
+  ensureCompositeFocusRing,
+  ensureKeyboardModalityTracking,
+  focusOnOpen,
+  keyboardFocusRingProps,
+  wasKeyboardFocus,
+} from "./keyboardFocusRing";
+export {
+  CLOCK_TIME,
+  formatAbsoluteDate,
+  formatAbsoluteDateTime,
+  formatCalendarDate,
+  formatDayLong,
+  formatDayOfMonth,
+  formatMonthYear,
+  formatRelativeTimestamp,
+  formatTimeOfDay,
+  getMonthNames,
+  getWeekdayNames,
+  ISO_DATE_ONLY,
+  parseCalendarDate,
+} from "./dates";
+export type {
+  AbsoluteDateFormatOptions,
+  CalendarDateShape,
+  DateInput,
+  DayLongFormatOptions,
+  MonthYearFormatOptions,
+  TimeOfDayFormatOptions,
+  WeekdayNamesOptions,
+} from "./dates";
+export {
+  menuRowChecked,
+  menuRowCheckGlyph,
+  menuRowCheckInk,
+  menuRowFrame,
+  menuRowIconGlyph,
+  resolveMenuRowCheckInk,
+  useMenuRowCheckInk,
+} from "./menuRow";
+export type { MenuRowGlyph } from "./menuRow";
+export {
+  currencyAffix,
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  resolveCurrencyCode,
+} from "./numbers";
+export type {
+  CurrencyAffix,
+  CurrencyFormatOptions,
+  NumberFormatOptions,
+  NumberInput,
+  PercentFormatOptions,
+} from "./numbers";
+export {
+  radiusClassProps,
+  radiusOverrideFor,
+  radiusResolutionProps,
+  resolveRadiusClass,
+  resolveRadiusForPart,
+} from "./theme/radiusClass";
+export type {
+  KnobImmuneRadiusClass,
+  RadiusClassDeclaration,
+  RadiusClassGeometry,
+  RadiusResolutionDeclaration,
+  ResolvedPartRadius,
+  ResolvedRadiusSource,
+  ResolveRadiusForPartOptions,
+} from "./theme/radiusClass";
+export {
+  $color,
+  aaTextContrastRatio,
+  apcaContrast,
+  assertContrast,
+  buttonColors,
+  contrastRatio,
+  fillLabelLc,
+  findReadableStep,
+  holdHueToFloor,
+  holdInkFloor,
+  inputColors,
+  inSwitchOffBand,
+  isLightGround,
+  measureContrast,
+  minContrastRatio,
+  normalizeColorScale,
+  normalizeToHex,
+  pickReadableForeground,
+  plateContrastRatio,
+  relativeLuminance,
+  resolveThemeContrast,
+  semanticGroups,
+  switchOffFillAlpha,
+  switchOffFillBand,
+  systemFillHex,
+  systemFillLuminance,
+} from "./theme/colorRules";
+export type {
+  ButtonColorConfig,
+  ColorRamp,
+  ColorStep,
+  ComponentColorConfig,
+  ContrastPair,
+  ContrastReport,
+  SemanticGroup,
+  ThemeContrastPair,
+} from "./theme/colorRules";
+export {
+  getGroupPosition,
+  GroupPositionContext,
+  stackEdgeRadius,
+  stackRadiusProps,
+  useGroupPosition,
+} from "./theme/groupGeometry";
+export type { GroupOrientation, GroupPosition, StackRadiusFragment } from "./theme/groupGeometry";
+export {
+  resolveAccentOnSurface,
+  resolveAccentTintedSurface,
+  resolveActiveTabInk,
+  resolveIdentityInk,
+  resolveLegibleInkOn,
+  useAccentOnSurface,
+  useAccentTintedSurface,
+  useActiveTabInk,
+  useIdentityHue,
+  useIdentityInkOnSurface,
+  useLegibleInkOn,
+  useReadableTextOn,
+} from "./theme/readableColor";
+export type {
+  ResolveAccentTintedSurfaceInput,
+  ResolveActiveTabInkInput,
+} from "./theme/readableColor";
+export {
+  accentIdentityCandidates,
+  resolveChartPalette,
+  useChartPalette,
+} from "./theme/chartPalette";
+export type { ChartPalette, ResolveChartPaletteInput } from "./theme/chartPalette";
+export {
+  animationConfig,
+  animationDurations,
+  animationNames,
+  animations,
+  animationConfig as cssAnimationConfig,
+  motionStops,
+} from "./theme/animations/css";
+export type { AnimationName, MotionStop } from "./theme/animations/css";
+export {
+  motionDurationMs,
+  motionExitFactor,
+  motionFor,
+  motionHideDelayMs,
+  motionRoleProperties,
+  motionSeconds,
+  motionSettleMs,
+} from "./theme/motion";
+export type { MotionRole, MotionRoleName } from "./theme/motion";
+export { resolveGlyphPaint, useGlyphColor } from "./theme/glyphPaint";
+export {
+  GLYPH_CONTRAST_FLOOR,
+  glyphTintFallback,
+  GlyphTintFallbackProvider,
+  platformSystemTint,
+  resolveGlyphTint,
+  useGlyphTintOnSurface,
+} from "./theme/glyphTint";
+export type { GlyphTintFallback, ResolveGlyphTintInput } from "./theme/glyphTint";
+export { IconSlot } from "./theme/IconSlot";
+export type { IconSlotValue } from "./theme/IconSlot";
+export { transitionProps } from "./theme/transitionProps";
+export { Anchor, Paragraph, SizableText, Text } from "./theme/Text";
+export type { AnchorProps, ParagraphProps, SizableTextProps, TextProps } from "./theme/Text";
+export { H1, H2, H3, H4, H5, H6, Heading } from "./theme/Heading";
+export type { HeadingProps } from "./theme/Heading";
+export {
+  negateSpaceToken,
+  PageGutter,
+  ScreenNesting,
+  usePageGutter,
+  useParentScreen,
+  usePhoneTableBleed,
+} from "./theme/pageGutter";
+export type { PageGutterProps, ParentScreen, PhoneTableBleed } from "./theme/pageGutter";
+export {
+  dynamicTypeFit,
+  effectiveFontScale,
+  headingMaxFontScale,
+  maxFontScaleToFit,
+} from "./theme/dynamicType";
+export { animationConfig as nativeAnimationConfig } from "./theme/animations/reactNative";
+export {
+  getActiveScaleTokens,
+  scaleRadiusPx,
+  scaleSpaceFractionPx,
+  setActiveScaleTokens,
+} from "./theme/scale/activeScale";
+export type { IntentOverride, Preset as PresetDefinition } from "./theme/preset.types";
+export type { ThemeSubset } from "./theme/subsetThemes";
+export type { SizeKey } from "./theme/scale/scaleInputs";
+export { listHeightForRows } from "./theme/listRows";
+export { useTouchSurface } from "./theme/useTouchSurface";
+export type { GenericFonts, MediaQueryKey, ThemeName } from "@tamagui/web";

package/src/nativeTwins.ts

@@ -0,0 +1,11 @@
+/**
+ * Native twins by name, as `@multiplatform.one/theme/native-twins`. A phone
+ * build picks these through its platform resolver from the `.native` files,
+ * which re-export the modules below. A harness that resolves web-first
+ * (vitest under react-native-web) imports them here to run what a phone runs.
+ */
+
+export { ThemeProvider, type ThemeProviderProps } from "./theme/nativeTheme";
+export { usePresetSwitch, type PresetSwitch } from "./theme/nativePresetSwitch";
+export { useSchemePreference, type SchemePreference } from "./theme/nativeSchemePreference";
+export { transitionProps } from "./theme/nativeTransitionProps";

package/src/theme/Surface.spec.tsx

@@ -188,40 +188,6 @@ describe("Surface field (LC-176, FZ-8711)", () => {
   });
 });
 
-describe("Surface topBar (LC-176, FZ-8989)", () => {
-  function read(tree: (probe: ReactNode) => ReactNode): SurfaceIntent {
-    let intent: SurfaceIntent | undefined;
-    render(tree(createElement(Probe, { onRead: (value) => (intent = value) })) as never);
-    if (!intent) throw new Error("Surface probe did not render");
-    return intent;
-  }
-
-  it("the page's top bar marks its subtree, through a size-only surface", () => {
-    expect(read((probe) => probe).topBar).toBe(false);
-    expect(
-      read((probe) =>
-        createElement(
-          Surface,
-          { bar: true, topBar: true },
-          createElement(Surface, { size: "$3" }, probe),
-        ),
-      ),
-    ).toMatchObject({ bar: true, topBar: true });
-  });
-
-  it("a bar of its own (a sheet header) or a painted surface resets it", () => {
-    const top = (child: ReactNode) => createElement(Surface, { bar: true, topBar: true }, child);
-    expect(read((probe) => top(createElement(Surface, { bar: true }, probe)))).toMatchObject({
-      bar: true,
-      topBar: false,
-    });
-    expect(
-      read((probe) => top(createElement(Surface, { painted: false, elevated: true }, probe)))
-        .topBar,
-    ).toBe(false);
-  });
-});
-
 describe("useResolvedKnobs inside Surface", () => {
   const inSurface =
     (size: SizeTokens) =>