@stylexjs/stylex 0.2.0-beta.16 → 0.2.0-beta.18

package/lib/StyleXCSSTypes.js

@@ -1,10 +1 @@
-/**
- * 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.
- *
- * 
- */
-
-'use strict';
+"use strict";

package/lib/StyleXSheet.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { Theme } from './StyleXTypes';
+import type { LegacyTheme as Theme } from './StyleXTypes';
 type SheetOptions = Readonly<{
   rootDarkTheme?: Theme;
   rootTheme?: Theme;
@@ -43,7 +43,7 @@ export declare class StyleXSheet {
   insert(
     rawLTRRule: string,
     priority: number,
-    rawRTLRule: null | undefined | string
+    rawRTLRule: null | undefined | string,
   ): void;
 }
-export declare var styleSheet: StyleXSheet;
+export declare const styleSheet: StyleXSheet;

package/lib/StyleXSheet.js

@@ -1,13 +1,4 @@
-/**
- * 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.
- *
- * 
- */
-
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -15,13 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.styleSheet = exports.StyleXSheet = void 0;
 var _invariant = _interopRequireDefault(require("invariant"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// import rtlDetect from 'rtl-detect';
-
-const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
-const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
-/**
- * Take a theme and generate it's accompanying CSS variables
- */
+const LIGHT_MODE_CLASS_NAME = "__fb-light-mode";
+const DARK_MODE_CLASS_NAME = "__fb-dark-mode";
 function buildTheme(selector, theme) {
   const lines = [];
   lines.push(`${selector} {`);
@@ -29,39 +15,22 @@ function buildTheme(selector, theme) {
     const value = theme[key];
     lines.push(`  --${key}: ${value};`);
   }
-  lines.push('}');
-  return lines.join('\n');
+  lines.push("}");
+  return lines.join("\n");
 }
-
-/**
- * Create a <style> tag and add it to the head.
- */
 function makeStyleTag() {
-  const tag = document.createElement('style');
-  tag.setAttribute('type', 'text/css');
-  tag.setAttribute('data-stylex', 'true');
-  const head = document.head || document.getElementsByTagName('head')[0];
-  (0, _invariant.default)(head, 'expected head');
+  const tag = document.createElement("style");
+  tag.setAttribute("type", "text/css");
+  tag.setAttribute("data-stylex", "true");
+  const head = document.head || document.getElementsByTagName("head")[0];
+  (0, _invariant.default)(head, "expected head");
   head.appendChild(tag);
   return tag;
 }
-
-/**
- * Check if the browser supports CSS variables
- */
 function doesSupportCSSVariables() {
-  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
+  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports("--fake-var:0");
 }
-
-// Regex to replace var(--foo) with an inlined version
 const VARIABLE_MATCH = /var\(--(.*?)\)/g;
-
-// Stylesheet options
-
-/**
- * This class manages the CSS stylesheet for the page and the injection of new
- * CSS rules.
- */
 class StyleXSheet {
   static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
   static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
@@ -77,71 +46,37 @@ class StyleXSheet {
   getVariableMatch() {
     return VARIABLE_MATCH;
   }
-
-  /**
-   * Check if we have don't have access to the dom
-   */
   isHeadless() {
-    var _globalThis$document;
-    return this.tag == null || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body) == null;
+    return this.tag == null || globalThis?.document?.body == null;
   }
-
-  /**
-   * Get the stylesheet tag. Throw if none exists.
-   */
   getTag() {
     const {
       tag
     } = this;
-    (0, _invariant.default)(tag != null, 'expected tag');
+    (0, _invariant.default)(tag != null, "expected tag");
     return tag;
   }
-
-  /**
-   * Get the current stylesheet CSS.
-   */
   getCSS() {
-    return this.rules.join('\n');
+    return this.rules.join("\n");
   }
-
-  /**
-   * Get the position of the rule in the stylesheet.
-   */
   getRulePosition(rule) {
     return this.rules.indexOf(rule);
   }
-
-  /**
-   * Count of the current rules in the stylesheet. Used in tests.
-   */
   getRuleCount() {
     return this.rules.length;
   }
-
-  /**
-   * Inject a style tag into the document head
-   */
   inject() {
-    var _globalThis$document2;
     if (this.injected) {
       return;
     }
     this.injected = true;
-
-    // Running in a server environment
-    if (((_globalThis$document2 = globalThis.document) === null || _globalThis$document2 === void 0 ? void 0 : _globalThis$document2.body) == null) {
+    if (globalThis.document?.body == null) {
       this.injectTheme();
       return;
     }
-
-    // Create style tag if in browser
     this.tag = makeStyleTag();
     this.injectTheme();
   }
-
-  /**
-   * Inject the theme styles
-   */
   injectTheme() {
     if (this.rootTheme != null) {
       this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
@@ -150,38 +85,23 @@ class StyleXSheet {
       this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
     }
   }
-
-  /**
-   * Inject custom theme styles (only for internal testing)
-   */
   __injectCustomThemeForTesting(selector, theme) {
     if (theme != null) {
       this.insert(buildTheme(selector, theme), 0);
     }
   }
-
-  /**
-   * Delete the requested rule from the stylesheet
-   */
   delete(rule) {
-    // Get the index of this rule
     const index = this.rules.indexOf(rule);
     (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
-
-    // Remove the rule from our index
     this.rules.splice(index, 1);
     if (this.isHeadless()) {
       return;
     }
     const tag = this.getTag();
     const sheet = tag.sheet;
-    (0, _invariant.default)(sheet, 'expected sheet');
+    (0, _invariant.default)(sheet, "expected sheet");
     sheet.deleteRule(index);
   }
-
-  /**
-   *
-   */
   normalizeRule(rule) {
     const {
       rootTheme
@@ -193,39 +113,19 @@ class StyleXSheet {
       return rootTheme[name];
     });
   }
-
-  /**
-   * Get the rule position a rule should be inserted at according to the
-   * specified priority.
-   */
   getInsertPositionForPriority(priority) {
-    // If there's an end rule associated with this priority, then get the next
-    // rule which will belong to the next priority
-    // The rule will be inserted before it and assigned to the current priority
     const priorityRule = this.ruleForPriority.get(priority);
     if (priorityRule != null) {
       return this.rules.indexOf(priorityRule) + 1;
     }
-
-    // If we've never created this priority before, then let's find the highest
-    // priority to target
     const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
-
-    // If there's no priorities then place us at the start
     if (priorities.length === 0) {
       return this.getRuleCount();
     }
-
-    // Place us next to the next highest priority
     const lastPriority = priorities.pop();
     return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
   }
-
-  /**
-   * Insert a rule into the stylesheet.
-   */
   insert(rawLTRRule, priority, rawRTLRule) {
-    // Inject the stylesheet if it hasn't already been
     if (this.injected === false) {
       this.inject();
     }
@@ -235,18 +135,12 @@ class StyleXSheet {
       return;
     }
     const rawRule = rawLTRRule;
-
-    // Don't insert this rule if it already exists
     if (this.rules.includes(rawRule)) {
       return;
     }
     const rule = this.normalizeRule(rawRule);
-
-    // Get the position where we should insert the rule
     const insertPos = this.getInsertPositionForPriority(priority);
     this.rules.splice(insertPos, 0, rule);
-
-    // Set this rule as the end of the priority group
     this.ruleForPriority.set(priority, rule);
     if (this.isHeadless()) {
       return;
@@ -256,23 +150,16 @@ class StyleXSheet {
     if (sheet != null) {
       try {
         sheet.insertRule(rule, insertPos);
-      } catch {
-        // Ignore: error likely due to inserting prefixed rules (e.g. `::-moz-range-thumb`).
-      }
+      } catch {}
     }
-    // Ignore the case where sheet == null. It's an edge-case Edge 17 bug.
   }
 }
-
-/**
- * Adds an ancestor selector in a media-query-aware way.
- */
 exports.StyleXSheet = StyleXSheet;
 function addAncestorSelector(selector, ancestorSelector) {
-  if (!selector.startsWith('@')) {
+  if (!selector.startsWith("@")) {
     return `${ancestorSelector} ${selector}`;
   }
-  const firstBracketIndex = selector.indexOf('{');
+  const firstBracketIndex = selector.indexOf("{");
   const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
   const rest = selector.slice(firstBracketIndex + 1);
   return `${mediaQueryPart}${ancestorSelector} ${rest}`;

package/lib/StyleXSheet.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { Theme } from './StyleXTypes';
+import type { LegacyTheme as Theme } from './StyleXTypes';
 
 // Stylesheet options
 type SheetOptions = $ReadOnly<{
@@ -46,4 +46,4 @@ declare export class StyleXSheet {
   insert(rawLTRRule: string, priority: number, rawRTLRule: ?string): void;
 }
 
-declare export var styleSheet: StyleXSheet;
+declare export const styleSheet: StyleXSheet;

package/lib/StyleXTypes.d.ts

@@ -3,131 +3,69 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 
 import type { CSSProperties } from './StyleXCSSTypes';
-export declare type StyleXClassNameFor<_K, _V> = string;
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare const StyleXClassNameTag: unique symbol;
+export type StyleXClassNameFor<K, V> = string & {
+  _opaque: typeof StyleXClassNameTag;
+  key: K;
+  value: V;
+};
+
 export type StyleXClassNameForValue<V> = StyleXClassNameFor<unknown, V>;
 export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, unknown>;
 export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
+// Type for arbitrarily nested Array.
 export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
-type CSSPropTypes = Readonly</**
- * > 21 | type CSSPropTypes = $ReadOnly<$ObjMap<CSSProperties, () => StyleXClassName>>;
- *      |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
- **/
-any>;
-export type NestedCSSPropTypes = Readonly<
-  Omit<
-    CSSPropTypes,
-    keyof ({
-      ':active'?: StyleXClassName;
-      ':focus'?: StyleXClassName;
-      ':focus-visible'?: StyleXClassName;
-      ':hover'?: StyleXClassName;
-      ':disabled'?: StyleXClassName;
-      ':empty'?: StyleXClassName;
-      ':first-child'?: StyleXClassName;
-      ':last-child'?: StyleXClassName;
-      '::before'?: StyleXClassName;
-      '::after'?: StyleXClassName;
-      '::placeholder'?: StyleXClassName;
-      '::-webkit-scrollbar'?: StyleXClassName;
-      '@media (max-width: 564px)'?: StyleXClassName;
-      '@media (min-height: 700px)'?: StyleXClassName;
-      '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
-      '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
-      '@media (min-height: 790px)'?: StyleXClassName;
-      '@media (max-width: 648px)'?: StyleXClassName;
-      '@media (max-width: 899px)'?: StyleXClassName;
-      '@media (max-width: 900px)'?: StyleXClassName;
-      '@media (min-width: 900px)'?: StyleXClassName;
-      '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
-      '@media (max-width: 1099px)'?: StyleXClassName;
-      '@media (max-width: 1199px)'?: StyleXClassName;
-      '@media (max-width: 1259px)'?: StyleXClassName;
-      '@media (min-width: 1290px)'?: StyleXClassName;
-      '@media (max-width: 420px)'?: StyleXClassName;
-      '@media (max-width: 500px)'?: StyleXClassName;
-      '@media (pointer: coarse)'?: StyleXClassName;
-      '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
-      '@media print'?: StyleXClassName;
-      '@media (max-width: 767px)'?: StyleXClassName;
-      '@media (min-width: 768px)'?: StyleXClassName;
-      '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
-      '@media (max-width: 1024px)'?: StyleXClassName;
-      '@media (min-width: 1025px)'?: StyleXClassName;
-      '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
-      '@media (max-width: 1920px)'?: StyleXClassName;
-      '@media (min-width: 1921px)'?: StyleXClassName;
-      '@media (min-width: 1500px)'?: StyleXClassName;
-      '@media (min-width: 1800px)'?: StyleXClassName;
-      '@media (min-width: 2250px)'?: StyleXClassName;
-      '::-webkit-search-decoration'?: StyleXClassName;
-      '::-webkit-search-cancel-button'?: StyleXClassName;
-      '::-webkit-search-results-button'?: StyleXClassName;
-      '::-webkit-search-results-decoration'?: StyleXClassName;
-      '@media (min-width: 950px)'?: StyleXClassName;
-      '@media (min-width: 1440px)'?: StyleXClassName;
-      '@media (min-width: 1920px)'?: StyleXClassName;
-      '@media (min-width: 800px)'?: StyleXClassName;
-      '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
-    })
-  > & {
-    ':active'?: StyleXClassName;
-    ':focus'?: StyleXClassName;
-    ':focus-visible'?: StyleXClassName;
-    ':hover'?: StyleXClassName;
-    ':disabled'?: StyleXClassName;
-    ':empty'?: StyleXClassName;
-    ':first-child'?: StyleXClassName;
-    ':last-child'?: StyleXClassName;
-    '::before'?: StyleXClassName;
-    '::after'?: StyleXClassName;
-    '::placeholder'?: StyleXClassName;
-    '::-webkit-scrollbar'?: StyleXClassName;
-    '@media (max-width: 564px)'?: StyleXClassName;
-    '@media (min-height: 700px)'?: StyleXClassName;
-    '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
-    '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
-    '@media (min-height: 790px)'?: StyleXClassName;
-    '@media (max-width: 648px)'?: StyleXClassName;
-    '@media (max-width: 899px)'?: StyleXClassName;
-    '@media (max-width: 900px)'?: StyleXClassName;
-    '@media (min-width: 900px)'?: StyleXClassName;
-    '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
-    '@media (max-width: 1099px)'?: StyleXClassName;
-    '@media (max-width: 1199px)'?: StyleXClassName;
-    '@media (max-width: 1259px)'?: StyleXClassName;
-    '@media (min-width: 1290px)'?: StyleXClassName;
-    '@media (max-width: 420px)'?: StyleXClassName;
-    '@media (max-width: 500px)'?: StyleXClassName;
-    '@media (pointer: coarse)'?: StyleXClassName;
-    '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
-    '@media print'?: StyleXClassName;
-    '@media (max-width: 767px)'?: StyleXClassName;
-    '@media (min-width: 768px)'?: StyleXClassName;
-    '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
-    '@media (max-width: 1024px)'?: StyleXClassName;
-    '@media (min-width: 1025px)'?: StyleXClassName;
-    '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
-    '@media (max-width: 1920px)'?: StyleXClassName;
-    '@media (min-width: 1921px)'?: StyleXClassName;
-    '@media (min-width: 1500px)'?: StyleXClassName;
-    '@media (min-width: 1800px)'?: StyleXClassName;
-    '@media (min-width: 2250px)'?: StyleXClassName;
-    '::-webkit-search-decoration'?: StyleXClassName;
-    '::-webkit-search-cancel-button'?: StyleXClassName;
-    '::-webkit-search-results-button'?: StyleXClassName;
-    '::-webkit-search-results-decoration'?: StyleXClassName;
-    '@media (min-width: 950px)'?: StyleXClassName;
-    '@media (min-width: 1440px)'?: StyleXClassName;
-    '@media (min-width: 1920px)'?: StyleXClassName;
-    '@media (min-width: 800px)'?: StyleXClassName;
-    '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
-  }
->;
+
+type CSSPropTypes = {
+  [Key in keyof CSSProperties]: StyleXClassNameFor<Key, CSSProperties[Key]>;
+};
+
+export type NestedCSSPropTypes = CSSPropTypes &
+  Readonly<{
+    // NOTE: the actual type should be nested objects.
+    // fix after the types in stylex.js are fixed.
+    ':active': StyleXClassName;
+    ':focus': StyleXClassName;
+    ':focus-visible': StyleXClassName;
+    ':hover': StyleXClassName;
+    ':disabled': StyleXClassName;
+    ':empty': StyleXClassName;
+    ':first-child': StyleXClassName;
+    ':last-child': StyleXClassName;
+    '::before': StyleXClassName;
+    '::after': StyleXClassName;
+    '::placeholder': StyleXClassName;
+    '::-webkit-scrollbar': StyleXClassName;
+
+    [key: `@media (max-width: ${number}px)`]: StyleXClassName;
+    [key: `@media (min-width: ${number}px)`]: StyleXClassName;
+    [
+      key: `@media (min-width: ${number}px) and (max-width: ${number}px)`
+    ]: StyleXClassName;
+
+    [key: `@media (max-height: ${number}px)`]: StyleXClassName;
+    [key: `@media (min-height: ${number}px)`]: StyleXClassName;
+    [
+      key: `@media (min-height: ${number}px) and (max-height: ${number}px)`
+    ]: StyleXClassName;
+
+    [
+      key: `@media (-webkit-min-device-pixel-ratio: ${number})`
+    ]: StyleXClassName;
+    '@media print': StyleXClassName;
+
+    // webkit styles used for Search in Safari
+    '::-webkit-search-decoration': StyleXClassName;
+    '::-webkit-search-cancel-button': StyleXClassName;
+    '::-webkit-search-results-button': StyleXClassName;
+    '::-webkit-search-results-decoration': StyleXClassName;
+  }>;
+
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
   false | (null | undefined | T)
@@ -135,68 +73,93 @@ export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
 export type XStyleWithout<T extends { [$$Key$$: string]: void }> = XStyle<
   Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
 >;
-export type Styles = Readonly<{ [namespace: string]: Style }>;
-export type Style = Readonly</**
- * > 95 | export type Style = $ReadOnly<{
- *      |                               ^
- * > 96 |   ...CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 97 |   [pseudo: string]: CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 98 |   ...
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 99 | }>;
- *      | ^^ Unsupported feature: Translating "object types with spreads, indexers and/or call properties at the same time" is currently not supported.
- **/
-any>;
-export type Rules = Style | CSSProperties;
+
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type Theme = Readonly<{ [constantName: string]: string }>;
-type MapCSSValueToClassName = <K, V>(
-  $$PARAM_0$$: K,
-  $$PARAM_1$$: V
-) => StyleXClassNameFor<K, V>;
-export type MapNamespace<CSS extends {}> =
-  /**
-   * > 110 | export type MapNamespace<CSS: { ... }> = $ObjMapi<CSS, MapCSSValueToClassName>;
-   *       |                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapi" is currently not supported.
-   **/
-  any;
-export type MapNamespaces = <CSS extends {}>(
-  $$PARAM_0$$: CSS
-) => MapNamespace<CSS>;
-export type Stylex$Create = <S extends {}>(
-  styles: S
-) => Readonly</**
- * > 121 | ) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
- *       |                ^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
- **/
-any>;
-export declare type StyleXVarsTheme<
-  Vars extends { readonly [$$Key$$: string]: string }
-> = Vars;
-export type Stylex$CreateVars = <
-  Vars extends { readonly [$$Key$$: string]: string }
+export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+
+type RawStyles = {
+  [key: string]: null | string | number | Array<string | number> | RawStyles;
+};
+
+type CompiledNamespace<N extends RawStyles> = {
+  [K in keyof N]: N[K] extends string | number | null
+    ? StyleXClassNameFor<K, N[K]>
+    : N[K] extends ReadonlyArray<infer T>
+    ? StyleXClassNameFor<K, T>
+    : K extends `:${string}` | `@${string}`
+    ? N[K] extends RawStyles
+      ? CompiledNamespace<N[K]>
+      : StyleXClassNameFor<K, N[K]>
+    : N[K] extends { [key: string]: infer T }
+    ? StyleXClassNameFor<K, T> // TODO: Handle nested objects
+    : never;
+};
+
+export type Stylex$Create = <const S extends { [n: string]: RawStyles }>(
+  styles: S,
+) => Readonly<{
+  [N in keyof S]: CompiledNamespace<S[N]>;
+}>;
+
+export type CompiledStyles = Readonly<{
+  [key: string]: StyleXClassName | Readonly<{ [key: string]: StyleXClassName }>;
+}>;
+
+type TTokens = {
+  [key: string]: string | { default: string; [key: string]: string };
+};
+
+export type FlattenTokens<
+  T extends {
+    [key: string]: string | { default: string; [key: string]: string };
+  },
+> = {
+  [Key in keyof T]: T[Key] extends { default: infer X } & {
+    [key: Exclude<string, 'default'>]: infer Y;
+  }
+    ? X | Y
+    : T[Key];
+};
+
+export type Theme<
+  Tokens extends { [key: string]: unknown },
+  ID extends symbol = symbol,
+> = Readonly<{
+  [_Key in Exclude<keyof Tokens, '_opaque' | '_tokens'>]: string;
+}> & {
+  _opaque: ID;
+  _tokens: Tokens;
+};
+
+export type TokensFromTheme<T extends Theme<TTokens>> = T['_tokens'];
+
+export type IDFromTheme<T extends Theme<TTokens>> = T['_opaque'];
+
+export type StyleX$CreateVars = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
 >(
-  styles: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<
-  Readonly</**
-   * > 129 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
-   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
-   **/
-  any>
->;
-export type Stylex$OverrideVars = <
-  Vars extends { readonly [$$Key$$: string]: string }
+  tokens: DefaultTokens,
+) => Theme<FlattenTokens<DefaultTokens>, ID>;
+
+export type Variant<
+  T extends Theme<TTokens, symbol>,
+  // eslint-disable-next-line no-unused-vars
+  Tag extends symbol = symbol,
+> = Readonly<{
+  [Key: symbol]: StyleXClassNameFor<string, IDFromTheme<T>>;
+}> & { _opaque: Tag };
+
+type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+  [Key in keyof Config]:
+    | Config[Key]
+    | { default: Config[Key]; [atRule: string]: Config[Key] };
+};
+
+export type StyleX$OverrideVars = <
+  BaseTokens extends Theme<any>,
+  ID extends symbol = symbol,
 >(
-  styles: Vars & { __themeName__: string },
-  stylesOverride: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<
-  Readonly</**
-   * > 135 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
-   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
-   **/
-  any>
->;
+  baseTokens: BaseTokens,
+  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
+) => Variant<BaseTokens, ID>;