diff --git a/packages/stylex/src/VarTypes.js b/packages/stylex/src/VarTypes.js
index bda409b0..9e9cb0f0 100644
--- a/packages/stylex/src/VarTypes.js
+++ b/packages/stylex/src/VarTypes.js
@@ -7,12 +7,7 @@
  * @flow strict
  */
 
-export type ValueWithDefault<+T> =
-  | T
-  | $ReadOnly<{
-      default: ValueWithDefault<T>,
-      [string]: ValueWithDefault<T>,
-    }>;
+import type { ValueWithDefault } from './util-types';
 
 export type CSSSyntax =
   | '*'
diff --git a/packages/stylex/src/stylex.js b/packages/stylex/src/stylex.js
index 471e5c11..9d5f8352 100644
--- a/packages/stylex/src/stylex.js
+++ b/packages/stylex/src/stylex.js
@@ -21,23 +21,6 @@ import type {
   MapNamespaces,
 } from './StyleXTypes';
 import type {
-  ValueWithDefault,
-  Angle,
-  Color,
-  Url,
-  Image,
-  Integer,
-  LengthPercentage,
-  Length,
-  Percentage,
-  Num,
-  Resolution,
-  Time,
-  TransformFunction,
-  TransformList,
-} from './VarTypes';
-export type {
-  ValueWithDefault,
   Angle,
   Color,
   Url,
@@ -52,6 +35,8 @@ export type {
   TransformFunction,
   TransformList,
 } from './VarTypes';
+import type { ValueWithDefault } from './util-types';
+export * as Types from './VarTypes';
 
 export type {
   VarGroup,
diff --git a/packages/stylex/src/util-types.js b/packages/stylex/src/util-types.js
new file mode 100644
index 00000000..ae8029d1
--- /dev/null
+++ b/packages/stylex/src/util-types.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>,
+    }>;
diff --git a/packages/stylex/type-tests/theming1.js.flow b/packages/stylex/type-tests/theming1.js.flow
index c2e63f6e..897b3b0e 100644
--- a/packages/stylex/type-tests/theming1.js.flow
+++ b/packages/stylex/type-tests/theming1.js.flow
@@ -10,7 +10,8 @@
 /* eslint-disable no-unused-vars */
 
 import * as React from 'react';
-import stylex from '../src/stylex';
+import * as stylex from '../src/stylex';
+import stylexLegacy from '../src/stylex';
 import type { StyleXVar, VarGroup, Theme } from '../src/StyleXTypes';
 
 const DARK = '@media (prefers-color-scheme: dark)';
@@ -52,7 +53,7 @@ const correctTheme = stylex.createTheme(buttonTokens, {
 
 correctTheme as Theme<typeof buttonTokens, string>;
 
-const result: string = stylex(correctTheme);
+const result: string = stylexLegacy(correctTheme);
 const result2: $ReadOnly<{
   className?: string,
   style?: $ReadOnly<{ [string]: string | number }>,
@@ -141,6 +142,14 @@ const typedTokens = stylex.defineVars({
   shortAnimation: stylex.types.time<string | 0>('0.5s'),
 });
 
+const _bgColor: StyleXVar<stylex.Types.Color<string>> = typedTokens.bgColor;
+const _cornerRadius: StyleXVar<stylex.Types.Length<string | number>> =
+  typedTokens.cornerRadius;
+const _translucent: StyleXVar<stylex.Types.Num<number>> =
+  typedTokens.translucent;
+const _shortAnimation: StyleXVar<stylex.Types.Time<string | 0>> =
+  typedTokens.shortAnimation;
+
 const correctlyTypedTheme = stylex.createTheme(typedTokens, {
   bgColor: stylex.types.color('red'),
   cornerRadius: stylex.types.length('4px'),