@stylexjs/stylex 0.2.0-beta.24 → 0.2.0-beta.26

package/lib/StyleXCSSTypes.d.ts

@@ -467,10 +467,6 @@ type MsOverflowStyle =
   | '-ms-autohiding-scrollbar';
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
-type offsetBlockEnd = string;
-type offsetBlockStart = string;
-type offsetInlineEnd = string;
-type offsetInlineStart = string;
 type opacity = number;
 type order = number;
 type orphans = number;
@@ -481,7 +477,6 @@ type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
 type overflowAnchor = 'auto' | 'none';
-type overflowClipBox = 'padding-box' | 'content-box';
 type overflowWrap = 'normal' | 'break-word';
 type overflowX = 'visible' | 'hidden' | 'scroll' | 'auto';
 type overflowY = 'visible' | 'hidden' | 'scroll' | 'auto';
@@ -858,12 +853,29 @@ export type CSSProperties = Readonly<{
   WebkitAppearance?: null | appearance;
   WebkitFontSmoothing?: null | 'antialiased';
   WebkitTapHighlightColor?: null | color;
+  WebkitBoxOrient?:
+    | null
+    | 'vertical'
+    | 'horizontal'
+    | 'inline-axis'
+    | 'block-axis';
+  WebkitLineClamp?: null | number;
+  accentColor?: null | color;
   aspectRatio?: null | number | string;
+  placeContent?: null | string;
   alignContent?: null | alignContent;
+  justifyContent?: null | justifyContent;
+  placeItems?: null | string;
   alignItems?: null | alignItems;
+  justifyItems?: null | justifyItems;
   alignSelf?: null | alignSelf;
+  justifySelf?: null | justifySelf;
   alignmentBaseline?: null | alignmentBaseline;
-  all?: null | all;
+  alignTracks?: null | string;
+  justifyTracks?: null | string;
+  masonryAutoFlow?: null | string;
+  animation?: null | string;
+  animationComposition?: null | string;
   animationDelay?: null | OptionalArray<animationDelay>;
   animationDirection?: null | OptionalArray<animationDirection>;
   animationDuration?: null | OptionalArray<animationDuration>;
@@ -872,9 +884,15 @@ export type CSSProperties = Readonly<{
   animationName?: null | OptionalArray<animationName>;
   animationPlayState?: null | OptionalArray<animationPlayState>;
   animationTimingFunction?: null | OptionalArray<animationTimingFunction>;
+  animationTimeline?: null | string;
+  animationRange?: null | string;
+  animationRangeStart?: null | string;
+  animationRangeEnd?: null | string;
   appearance?: null | appearance;
+  azimuth?: null | string;
   backdropFilter?: null | backdropFilter;
   backfaceVisibility?: null | backfaceVisibility;
+  background?: null | string;
   backgroundAttachment?: null | OptionalArray<backgroundAttachment>;
   backgroundBlendMode?: null | OptionalArray<backgroundBlendMode>;
   backgroundClip?: null | OptionalArray<backgroundClip>;
@@ -890,6 +908,10 @@ export type CSSProperties = Readonly<{
   behavior?: null | behavior;
   blockSize?: null | blockSize;
   border?: null | border;
+  borderBlock?: null | borderBlockEnd;
+  borderBlockColor?: null | borderBlockEndColor;
+  borderBlockStyle?: null | borderBlockEndStyle;
+  borderBlockWidth?: null | borderBlockEndWidth;
   borderBlockEnd?: null | borderBlockEnd;
   borderBlockEndColor?: null | borderBlockEndColor;
   borderBlockEndStyle?: null | borderBlockEndStyle;
@@ -900,10 +922,6 @@ export type CSSProperties = Readonly<{
   borderBlockStartWidth?: null | borderBlockStartWidth;
   borderBottom?: null | border;
   borderBottomColor?: null | color;
-  borderBottomEndRadius?: null | borderBottomRightRadius;
-  borderBottomLeftRadius?: null | borderBottomLeftRadius;
-  borderBottomRightRadius?: null | borderBottomRightRadius;
-  borderBottomStartRadius?: null | borderBottomLeftRadius;
   borderBottomStyle?: null | borderBottomStyle;
   borderBottomWidth?: null | borderBottomWidth;
   borderCollapse?: null | borderCollapse;
@@ -918,6 +936,10 @@ export type CSSProperties = Readonly<{
   borderImageSlice?: null | borderImageSlice;
   borderImageSource?: null | borderImageSource;
   borderImageWidth?: null | borderImageWidth;
+  borderInline?: null | borderInlineEnd;
+  borderInlineColor?: null | borderInlineEndColor;
+  borderInlineStyle?: null | borderInlineEndStyle;
+  borderInlineWidth?: null | borderInlineEndWidth;
   borderInlineEnd?: null | borderInlineEnd;
   borderInlineEndColor?: null | borderInlineEndColor;
   borderInlineEndStyle?: null | borderInlineEndStyle;
@@ -930,7 +952,6 @@ export type CSSProperties = Readonly<{
   borderLeftColor?: null | borderLeftColor;
   borderLeftStyle?: null | borderLeftStyle;
   borderLeftWidth?: null | borderLeftWidth;
-  borderRadius?: null | borderRadius;
   borderRight?: null | border;
   borderRightColor?: null | borderRightColor;
   borderRightStyle?: null | borderRightStyle;
@@ -943,10 +964,15 @@ export type CSSProperties = Readonly<{
   borderStyle?: null | borderStyle;
   borderTop?: null | border;
   borderTopColor?: null | color;
-  borderTopEndRadius?: null | borderTopRightRadius;
+  borderRadius?: null | borderRadius;
+  borderEndStartRadius?: null | borderBottomLeftRadius;
+  borderStartStartRadius?: null | borderTopLeftRadius;
+  borderStartEndRadius?: null | borderTopRightRadius;
+  borderEndEndRadius?: null | borderBottomRightRadius;
   borderTopLeftRadius?: null | borderTopLeftRadius;
   borderTopRightRadius?: null | borderTopRightRadius;
-  borderTopStartRadius?: null | borderTopLeftRadius;
+  borderBottomLeftRadius?: null | borderBottomLeftRadius;
+  borderBottomRightRadius?: null | borderBottomRightRadius;
   borderTopStyle?: null | borderTopStyle;
   borderTopWidth?: null | borderTopWidth;
   borderWidth?: null | borderWidth;
@@ -966,25 +992,48 @@ export type CSSProperties = Readonly<{
   breakBefore?: null | breakBefore;
   breakInside?: null | breakInside;
   captionSide?: null | captionSide;
+  caret?: null | string;
+  caretColor?: null | color;
+  caretShape?: null | string;
   clear?: null | clear;
   clip?: null | clip;
   clipPath?: null | clipPath;
   clipRule?: null | clipRule;
   color?: null | color;
+  colorScheme?:
+    | null
+    | 'normal'
+    | 'light'
+    | 'dark'
+    | 'light dark'
+    | 'only light'
+    | 'only dark';
+  forcedColorAdjust?: null | 'auto' | 'none';
+  printColorAdjust?: null | 'economy' | 'exact';
+  columns?: null | columns;
   columnCount?: null | columnCount;
-  columnFill?: null | columnFill;
-  columnGap?: null | columnGap;
+  columnWidth?: null | columnWidth;
   columnRule?: null | columnRule;
   columnRuleColor?: null | columnRuleColor;
   columnRuleStyle?: null | columnRuleStyle;
   columnRuleWidth?: null | columnRuleWidth;
+  columnFill?: null | columnFill;
+  columnGap?: null | columnGap;
   columnSpan?: null | columnSpan;
-  columnWidth?: null | columnWidth;
-  columns?: null | columns;
   contain?: null | contain;
+  containIntrinsicSize?: null | number | string;
+  containIntrinsicBlockSize?: null | number | string;
+  containIntrinsicInlineSize?: null | number | string;
+  containIntrinsicHeightSize?: null | number | string;
+  containIntrinsicWidthSize?: null | number | string;
+  container?: null | string;
+  containerName?: null | string;
+  containerType?: null | 'size' | 'inline-size' | 'normal';
+  contentVisibility?: null | 'visible' | 'hidden' | 'auto';
   content?: null | content;
   counterIncrement?: null | counterIncrement;
   counterReset?: null | counterReset;
+  counterSet?: null | string | number;
   cue?: null | cue;
   cueAfter?: null | cueAfter;
   cueBefore?: null | cueBefore;
@@ -1009,6 +1058,7 @@ export type CSSProperties = Readonly<{
   flexShrink?: null | flexShrink;
   flexWrap?: null | flexWrap;
   float?: null | float;
+  font?: null | string;
   fontFamily?: null | fontFamily;
   fontFeatureSettings?: null | fontFeatureSettings;
   fontKerning?: null | fontKerning;
@@ -1018,6 +1068,10 @@ export type CSSProperties = Readonly<{
   fontStretch?: null | fontStretch;
   fontStyle?: null | fontStyle;
   fontSynthesis?: null | fontSynthesis;
+  fontSynthesisWeight?: null | 'auto' | 'none';
+  fontSynthesisStyle?: null | 'auto' | 'none';
+  fontSynthesisSmallCaps?: null | 'auto' | 'none';
+  fontSynthesisPosition?: null | 'auto' | 'none';
   fontVariant?: null | fontVariant;
   fontVariantAlternates?: null | fontVariantAlternates;
   fontVariantCaps?: null | fontVariantCaps;
@@ -1026,6 +1080,12 @@ export type CSSProperties = Readonly<{
   fontVariantNumeric?: null | fontVariantNumeric;
   fontVariantPosition?: null | fontVariantPosition;
   fontWeight?: null | fontWeight;
+  fontFeatureSettings?: null | string;
+  fontKerning?: null | 'auto' | 'normal' | 'none';
+  fontLanguageOverride?: null | string;
+  fontOpticalSizing?: null | 'auto' | 'none';
+  fontPalette?: null | 'light' | 'dark' | string;
+  fontVariationSettings?: null | string;
   gap?: null | gap;
   glyphOrientationHorizontal?: null | glyphOrientationHorizontal;
   glyphOrientationVertical?: null | glyphOrientationVertical;
@@ -1047,8 +1107,11 @@ export type CSSProperties = Readonly<{
   gridTemplateAreas?: null | gridTemplateAreas;
   gridTemplateColumns?: null | gridTemplateColumns;
   gridTemplateRows?: null | gridTemplateRows;
-  height?: null | number | string;
+  hangingPunctuation?: null | string;
+  hyphenateCharacter?: null | string;
+  hyphenateLimitChars?: null | string | number;
   hyphens?: null | hyphens;
+  height?: null | number | string;
   imageOrientation?: null | imageOrientation;
   imageRendering?: null | imageRendering;
   imageResolution?: null | imageResolution;
@@ -1056,25 +1119,32 @@ export type CSSProperties = Readonly<{
   initialLetter?: null | initialLetter;
   initialLetterAlign?: null | initialLetterAlign;
   inlineSize?: null | inlineSize;
+  inset?: null | number | string;
+  insetBlock?: null | number | string;
+  insetBlockEnd?: null | number | string;
+  insetBlockStart?: null | number | string;
+  insetInline?: null | number | string;
+  insetInlineEnd?: null | number | string;
+  insetInlineStart?: null | number | string;
   isolation?: null | isolation;
-  justifyContent?: null | justifyContent;
-  justifyItems?: null | justifyItems;
-  justifySelf?: null | justifySelf;
   kerning?: null | kerning;
   left?: null | number | string;
   letterSpacing?: null | letterSpacing;
   lineBreak?: null | lineBreak;
   lineHeight?: null | lineHeight;
+  lineHeightStep?: null | number | string;
   listStyle?: null | listStyle;
   listStyleImage?: null | listStyleImage;
   listStylePosition?: null | listStylePosition;
   listStyleType?: null | listStyleType;
   margin?: null | margin;
+  marginBlock?: null | marginBlockEnd;
   marginBlockEnd?: null | marginBlockEnd;
   marginBlockStart?: null | marginBlockStart;
   marginBottom?: null | marginBottom;
   marginEnd?: null | marginRight;
   marginHorizontal?: null | marginLeft;
+  marginInline?: null | marginInlineEnd;
   marginInlineEnd?: null | marginInlineEnd;
   marginInlineStart?: null | marginInlineStart;
   marginLeft?: null | marginLeft;
@@ -1082,6 +1152,15 @@ export type CSSProperties = Readonly<{
   marginStart?: null | marginLeft;
   marginTop?: null | marginTop;
   marginVertical?: null | marginTop;
+  marginTrim?:
+    | null
+    | 'none'
+    | 'block'
+    | 'block-start'
+    | 'block-end'
+    | 'inline'
+    | 'inline-start'
+    | 'inline-end';
   marker?: null | marker;
   markerEnd?: null | markerEnd;
   markerMid?: null | markerMid;
@@ -1097,6 +1176,13 @@ export type CSSProperties = Readonly<{
   maskRepeat?: null | maskRepeat;
   maskSize?: null | maskSize;
   maskType?: null | maskType;
+  maskBorder?: null | string;
+  maskBorderMode?: null | 'alpha' | 'luminance';
+  maskBorderOutset?: null | string | number;
+  maskBorderRepeat?: null | 'stretch' | 'repeat' | 'round' | 'space';
+  maskBorderSlice?: null | string | number;
+  maskBorderSource?: null | string;
+  maskBorderWidth?: null | string | number;
   maxBlockSize?: null | maxBlockSize;
   maxHeight?: null | maxHeight;
   maxInlineSize?: null | maxInlineSize;
@@ -1113,10 +1199,12 @@ export type CSSProperties = Readonly<{
   MsOverflowStyle?: null | MsOverflowStyle;
   objectFit?: null | objectFit;
   objectPosition?: null | objectPosition;
-  offsetBlockEnd?: null | offsetBlockEnd;
-  offsetBlockStart?: null | offsetBlockStart;
-  offsetInlineEnd?: null | offsetInlineEnd;
-  offsetInlineStart?: null | offsetInlineStart;
+  offset?: null | string;
+  offsetAnchor?: null | string;
+  offsetDistance?: null | string | number;
+  offsetPath?: null | string;
+  offsetPosition?: null | string;
+  offsetRotate?: null | string;
   opacity?: null | opacity;
   order?: null | order;
   orphans?: null | orphans;
@@ -1126,17 +1214,25 @@ export type CSSProperties = Readonly<{
   outlineStyle?: null | outlineStyle;
   outlineWidth?: null | outlineWidth;
   overflow?: null | overflow;
-  overflowAnchor?: null | overflowAnchor;
-  overflowClipBox?: null | overflowClipBox;
-  overflowWrap?: null | overflowWrap;
+  overflowBlock?: null | overflowY;
+  overflowBlockX?: null | overflowX;
   overflowX?: null | overflowX;
   overflowY?: null | overflowY;
+  overflowAnchor?: null | overflowAnchor;
+  overflowClipMargin?: null | string;
+  overflowWrap?: null | overflowWrap;
   overscrollBehavior?: null | overscrollBehavior;
-  overscrollBehaviorX?: null | overscrollBehaviorX;
+  overscrollBehaviorBlock?: null | overscrollBehaviorY;
   overscrollBehaviorY?: null | overscrollBehaviorY;
+  overscrollBehaviorInline?: null | overscrollBehaviorX;
+  overscrollBehaviorX?: null | overscrollBehaviorX;
   padding?: null | padding;
+  paddingBlock?: null | paddingBlockEnd;
   paddingBlockEnd?: null | paddingBlockEnd;
   paddingBlockStart?: null | paddingBlockStart;
+  paddingInline?: null | paddingBlockEnd;
+  paddingInlineEnd?: null | paddingBlockEnd;
+  paddingInlineStart?: null | paddingBlockStart;
   paddingBottom?: null | paddingBottom;
   paddingEnd?: null | paddingBottom;
   paddingHorizontal?: null | paddingLeft;
@@ -1145,9 +1241,20 @@ export type CSSProperties = Readonly<{
   paddingStart?: null | paddingLeft;
   paddingTop?: null | paddingTop;
   paddingVertical?: null | paddingTop;
+  page?: null | string;
   pageBreakAfter?: null | pageBreakAfter;
   pageBreakBefore?: null | pageBreakBefore;
   pageBreakInside?: null | pageBreakInside;
+  paintOrder?:
+    | null
+    | 'normal'
+    | 'stroke'
+    | 'fill'
+    | 'markers'
+    | 'stroke fill'
+    | 'stroke markers'
+    | 'fill markers'
+    | 'stroke fill markers';
   pause?: null | pause;
   pauseAfter?: null | pauseAfter;
   pauseBefore?: null | pauseBefore;
@@ -1165,13 +1272,41 @@ export type CSSProperties = Readonly<{
   rubyAlign?: null | rubyAlign;
   rubyMerge?: null | rubyMerge;
   rubyPosition?: null | rubyPosition;
+  mathDepth?: null | number | string;
+  mathShift?: null | 'normal' | 'compact';
+  mathStyle?: null | 'normal' | 'compact';
   scrollbarWidth?: null | string | number;
   scrollBehavior?: null | scrollBehavior;
-  scrollPadding?: null | number;
-  scrollPaddingTop?: null | number;
-  scrollPaddingBottom?: null | number;
+  scrollMargin?: null | number | string;
+  scrollMarginTop?: null | number | string;
+  scrollMarginRight?: null | number | string;
+  scrollMarginBottom?: null | number | string;
+  scrollMarginLeft?: null | number | string;
+  scrollMarginBlock?: null | number | string;
+  scrollMarginBlockEnd?: null | number | string;
+  scrollMarginBlockStart?: null | number | string;
+  scrollMarginInline?: null | number | string;
+  scrollMarginInlineEnd?: null | number | string;
+  scrollMarginInlineStart?: null | number | string;
+  scrollPadding?: null | number | string;
+  scrollPaddingTop?: null | number | string;
+  scrollPaddingRight?: null | number | string;
+  scrollPaddingBottom?: null | number | string;
+  scrollPaddingLeft?: null | number | string;
+  scrollPaddingBlock?: null | number | string;
+  scrollPaddingBlockEnd?: null | number | string;
+  scrollPaddingBlockStart?: null | number | string;
+  scrollPaddingInline?: null | number | string;
+  scrollPaddingInlineEnd?: null | number | string;
+  scrollPaddingInlineStart?: null | number | string;
   scrollSnapAlign?: null | scrollSnapAlign;
+  scrollSnapStop?: null | 'normal' | 'always';
   scrollSnapType?: null | scrollSnapType;
+  scrollTimeline?: null | string;
+  scrollTimelineAxis?: null | 'block' | 'inline' | 'x' | 'y';
+  scrollTimelineName?: null | string;
+  scrollbarColor?: null | color;
+  scrollbarWidth?: null | width;
   shapeImageThreshold?: null | shapeImageThreshold;
   shapeMargin?: null | shapeMargin;
   shapeOutside?: null | shapeOutside;
@@ -1198,25 +1333,40 @@ export type CSSProperties = Readonly<{
   textDecorationColor?: null | textDecorationColor;
   textDecorationLine?: null | textDecorationLine;
   textDecorationSkip?: null | textDecorationSkip;
+  textDecorationSkipInk?: null | 'auto' | 'none' | 'all';
   textDecorationStyle?: null | textDecorationStyle;
+  textDecorationThickness?: null | number | string;
   textEmphasis?: null | textEmphasis;
   textEmphasisColor?: null | textEmphasisColor;
   textEmphasisPosition?: null | textEmphasisPosition;
   textEmphasisStyle?: null | textEmphasisStyle;
   textIndent?: null | textIndent;
+  textJustify?:
+    | null
+    | 'none'
+    | 'auto'
+    | 'inter-word'
+    | 'inter-character'
+    | 'distribute';
   textOrientation?: null | textOrientation;
   textOverflow?: null | textOverflow;
   textRendering?: null | textRendering;
   textShadow?: null | OptionalArray<textShadow>;
   textSizeAdjust?: null | textSizeAdjust;
   textTransform?: null | textTransform;
+  textUnderlineOffset?: null | number | string;
   textUnderlinePosition?: null | textUnderlinePosition;
+  textWrap?: null | 'wrap' | 'nowrap' | 'balance';
+  timelineScope?: null | string;
   top?: null | top;
   touchAction?: null | touchAction;
   transform?: null | transform;
   transformBox?: null | transformBox;
   transformOrigin?: null | transformOrigin;
   transformStyle?: null | transformStyle;
+  rotate?: null | number | string;
+  scale?: null | number | string;
+  translate?: null | number | string;
   transition?: null | OptionalArray<transition>;
   transitionDelay?: null | OptionalArray<transitionDelay>;
   transitionDuration?: null | OptionalArray<transitionDuration>;
@@ -1226,6 +1376,11 @@ export type CSSProperties = Readonly<{
   unicodeRange?: null | unicodeRange;
   userSelect?: null | userSelect;
   verticalAlign?: null | verticalAlign;
+  viewTimeline?: null | string;
+  viewTimelineAxis?: null | 'block' | 'inline' | 'x' | 'y';
+  viewTimelineName?: null | string;
+  viewTimelineInset?: null | number | string;
+  viewTransitionName?: null | string;
   visibility?: null | visibility;
   voiceBalance?: null | voiceBalance;
   voiceDuration?: null | voiceDuration;

package/lib/StyleXCSSTypes.js.flow

@@ -472,10 +472,6 @@ type MsOverflowStyle =
   | '-ms-autohiding-scrollbar';
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
-type offsetBlockEnd = string;
-type offsetBlockStart = string;
-type offsetInlineEnd = string;
-type offsetInlineStart = string;
 type opacity = number;
 type order = number;
 type orphans = number;
@@ -486,7 +482,6 @@ type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
 type overflowAnchor = 'auto' | 'none';
-type overflowClipBox = 'padding-box' | 'content-box';
 type overflowWrap = 'normal' | 'break-word';
 type overflowX = 'visible' | 'hidden' | 'scroll' | 'auto';
 type overflowY = 'visible' | 'hidden' | 'scroll' | 'auto';
@@ -876,14 +871,38 @@ export type CSSProperties = $ReadOnly<{
   WebkitAppearance?: null | appearance,
   WebkitFontSmoothing?: null | 'antialiased',
   WebkitTapHighlightColor?: null | color,
+
+  WebkitBoxOrient?:
+    | null
+    | 'vertical'
+    | 'horizontal'
+    | 'inline-axis'
+    | 'block-axis',
+  WebkitLineClamp?: null | number,
   // ENDOF ...$Exact<SupportedVendorSpecificCSSProperties>,
 
+  accentColor?: null | color,
+
   aspectRatio?: null | number | string,
+
+  placeContent?: null | string,
   alignContent?: null | alignContent,
+  justifyContent?: null | justifyContent,
+  placeItems?: null | string,
   alignItems?: null | alignItems,
+  justifyItems?: null | justifyItems,
   alignSelf?: null | alignSelf,
+  justifySelf?: null | justifySelf,
+
   alignmentBaseline?: null | alignmentBaseline,
-  all?: null | all,
+  alignTracks?: null | string,
+  justifyTracks?: null | string,
+  masonryAutoFlow?: null | string,
+
+  // Not Allowed:
+  // all?: null | all,
+  animation?: null | string,
+  animationComposition?: null | string,
   animationDelay?: null | OptionalArray<animationDelay>,
   animationDirection?: null | OptionalArray<animationDirection>,
   animationDuration?: null | OptionalArray<animationDuration>,
@@ -892,9 +911,16 @@ export type CSSProperties = $ReadOnly<{
   animationName?: null | OptionalArray<animationName>,
   animationPlayState?: null | OptionalArray<animationPlayState>,
   animationTimingFunction?: null | OptionalArray<animationTimingFunction>,
+  animationTimeline?: null | string,
+  animationRange?: null | string,
+  animationRangeStart?: null | string,
+  animationRangeEnd?: null | string,
   appearance?: null | appearance,
+  azimuth?: null | string,
+
   backdropFilter?: null | backdropFilter,
   backfaceVisibility?: null | backfaceVisibility,
+  background?: null | string,
   backgroundAttachment?: null | OptionalArray<backgroundAttachment>,
   backgroundBlendMode?: null | OptionalArray<backgroundBlendMode>,
   backgroundClip?: null | OptionalArray<backgroundClip>,
@@ -910,6 +936,10 @@ export type CSSProperties = $ReadOnly<{
   behavior?: null | behavior,
   blockSize?: null | blockSize,
   border?: null | border,
+  borderBlock?: null | borderBlockEnd,
+  borderBlockColor?: null | borderBlockEndColor,
+  borderBlockStyle?: null | borderBlockEndStyle,
+  borderBlockWidth?: null | borderBlockEndWidth,
   borderBlockEnd?: null | borderBlockEnd,
   borderBlockEndColor?: null | borderBlockEndColor,
   borderBlockEndStyle?: null | borderBlockEndStyle,
@@ -920,10 +950,6 @@ export type CSSProperties = $ReadOnly<{
   borderBlockStartWidth?: null | borderBlockStartWidth,
   borderBottom?: null | border,
   borderBottomColor?: null | color,
-  borderBottomEndRadius?: null | borderBottomRightRadius,
-  borderBottomLeftRadius?: null | borderBottomLeftRadius,
-  borderBottomRightRadius?: null | borderBottomRightRadius,
-  borderBottomStartRadius?: null | borderBottomLeftRadius,
   borderBottomStyle?: null | borderBottomStyle,
   borderBottomWidth?: null | borderBottomWidth,
   borderCollapse?: null | borderCollapse,
@@ -938,6 +964,10 @@ export type CSSProperties = $ReadOnly<{
   borderImageSlice?: null | borderImageSlice,
   borderImageSource?: null | borderImageSource,
   borderImageWidth?: null | borderImageWidth,
+  borderInline?: null | borderInlineEnd,
+  borderInlineColor?: null | borderInlineEndColor,
+  borderInlineStyle?: null | borderInlineEndStyle,
+  borderInlineWidth?: null | borderInlineEndWidth,
   borderInlineEnd?: null | borderInlineEnd,
   borderInlineEndColor?: null | borderInlineEndColor,
   borderInlineEndStyle?: null | borderInlineEndStyle,
@@ -950,7 +980,6 @@ export type CSSProperties = $ReadOnly<{
   borderLeftColor?: null | borderLeftColor,
   borderLeftStyle?: null | borderLeftStyle,
   borderLeftWidth?: null | borderLeftWidth,
-  borderRadius?: null | borderRadius,
   borderRight?: null | border,
   borderRightColor?: null | borderRightColor,
   borderRightStyle?: null | borderRightStyle,
@@ -963,10 +992,17 @@ export type CSSProperties = $ReadOnly<{
   borderStyle?: null | borderStyle,
   borderTop?: null | border,
   borderTopColor?: null | color,
-  borderTopEndRadius?: null | borderTopRightRadius,
+
+  borderRadius?: null | borderRadius,
+  borderEndStartRadius?: null | borderBottomLeftRadius,
+  borderStartStartRadius?: null | borderTopLeftRadius,
+  borderStartEndRadius?: null | borderTopRightRadius,
+  borderEndEndRadius?: null | borderBottomRightRadius,
   borderTopLeftRadius?: null | borderTopLeftRadius,
   borderTopRightRadius?: null | borderTopRightRadius,
-  borderTopStartRadius?: null | borderTopLeftRadius,
+  borderBottomLeftRadius?: null | borderBottomLeftRadius,
+  borderBottomRightRadius?: null | borderBottomRightRadius,
+
   borderTopStyle?: null | borderTopStyle,
   borderTopWidth?: null | borderTopWidth,
   borderWidth?: null | borderWidth,
@@ -985,26 +1021,60 @@ export type CSSProperties = $ReadOnly<{
   breakAfter?: null | breakAfter,
   breakBefore?: null | breakBefore,
   breakInside?: null | breakInside,
+
   captionSide?: null | captionSide,
+  caret?: null | string,
+  caretColor?: null | color,
+  caretShape?: null | string,
   clear?: null | clear,
   clip?: null | clip,
   clipPath?: null | clipPath,
   clipRule?: null | clipRule,
   color?: null | color,
+
+  colorScheme?:
+    | null
+    | 'normal'
+    | 'light'
+    | 'dark'
+    | 'light dark'
+    | 'only light'
+    | 'only dark',
+  forcedColorAdjust?: null | 'auto' | 'none',
+  printColorAdjust?: null | 'economy' | 'exact',
+
+  columns?: null | columns,
   columnCount?: null | columnCount,
-  columnFill?: null | columnFill,
-  columnGap?: null | columnGap,
+  columnWidth?: null | columnWidth,
+
   columnRule?: null | columnRule,
   columnRuleColor?: null | columnRuleColor,
   columnRuleStyle?: null | columnRuleStyle,
   columnRuleWidth?: null | columnRuleWidth,
+
+  columnFill?: null | columnFill,
+  columnGap?: null | columnGap,
   columnSpan?: null | columnSpan,
-  columnWidth?: null | columnWidth,
-  columns?: null | columns,
+
   contain?: null | contain,
+  containIntrinsicSize?: null | number | string,
+  containIntrinsicBlockSize?: null | number | string,
+  containIntrinsicInlineSize?: null | number | string,
+  containIntrinsicHeightSize?: null | number | string,
+  containIntrinsicWidthSize?: null | number | string,
+
+  container?: null | string,
+  containerName?: null | string,
+  containerType?: null | 'size' | 'inline-size' | 'normal',
+
+  contentVisibility?: null | 'visible' | 'hidden' | 'auto',
+
   content?: null | content,
+
   counterIncrement?: null | counterIncrement,
   counterReset?: null | counterReset,
+  counterSet?: null | string | number,
+
   cue?: null | cue,
   cueAfter?: null | cueAfter,
   cueBefore?: null | cueBefore,
@@ -1029,6 +1099,8 @@ export type CSSProperties = $ReadOnly<{
   flexShrink?: null | flexShrink,
   flexWrap?: null | flexWrap,
   float?: null | float,
+
+  font?: null | string,
   fontFamily?: null | fontFamily,
   fontFeatureSettings?: null | fontFeatureSettings,
   fontKerning?: null | fontKerning,
@@ -1038,6 +1110,11 @@ export type CSSProperties = $ReadOnly<{
   fontStretch?: null | fontStretch,
   fontStyle?: null | fontStyle,
   fontSynthesis?: null | fontSynthesis,
+  fontSynthesisWeight?: null | 'auto' | 'none',
+  fontSynthesisStyle?: null | 'auto' | 'none',
+  fontSynthesisSmallCaps?: null | 'auto' | 'none',
+  fontSynthesisPosition?: null | 'auto' | 'none',
+
   fontVariant?: null | fontVariant,
   fontVariantAlternates?: null | fontVariantAlternates,
   fontVariantCaps?: null | fontVariantCaps,
@@ -1046,6 +1123,15 @@ export type CSSProperties = $ReadOnly<{
   fontVariantNumeric?: null | fontVariantNumeric,
   fontVariantPosition?: null | fontVariantPosition,
   fontWeight?: null | fontWeight,
+  // fontHeight?: null | number | string,
+  // fontWidth?: null | number | string,
+  fontFeatureSettings?: null | string,
+  fontKerning?: null | 'auto' | 'normal' | 'none',
+  fontLanguageOverride?: null | string,
+  fontOpticalSizing?: null | 'auto' | 'none',
+  fontPalette?: null | 'light' | 'dark' | string,
+  fontVariationSettings?: null | string,
+
   gap?: null | gap,
   glyphOrientationHorizontal?: null | glyphOrientationHorizontal,
   glyphOrientationVertical?: null | glyphOrientationVertical,
@@ -1067,41 +1153,70 @@ export type CSSProperties = $ReadOnly<{
   gridTemplateAreas?: null | gridTemplateAreas,
   gridTemplateColumns?: null | gridTemplateColumns,
   gridTemplateRows?: null | gridTemplateRows,
-  height?: null | number | string,
+
+  hangingPunctuation?: null | string,
+  hyphenateCharacter?: null | string,
+  hyphenateLimitChars?: null | string | number,
   hyphens?: null | hyphens,
+
+  height?: null | number | string,
+
   imageOrientation?: null | imageOrientation,
   imageRendering?: null | imageRendering,
   imageResolution?: null | imageResolution,
   imeMode?: null | imeMode,
+  // inputSecurity?: null | string,
   initialLetter?: null | initialLetter,
   initialLetterAlign?: null | initialLetterAlign,
   inlineSize?: null | inlineSize,
+
+  inset?: null | number | string,
+  insetBlock?: null | number | string,
+  insetBlockEnd?: null | number | string,
+  insetBlockStart?: null | number | string,
+  insetInline?: null | number | string,
+  insetInlineEnd?: null | number | string,
+  insetInlineStart?: null | number | string,
+
   isolation?: null | isolation,
-  justifyContent?: null | justifyContent,
-  justifyItems?: null | justifyItems,
-  justifySelf?: null | justifySelf,
   kerning?: null | kerning,
   left?: null | number | string,
   letterSpacing?: null | letterSpacing,
   lineBreak?: null | lineBreak,
   lineHeight?: null | lineHeight,
+  lineHeightStep?: null | number | string,
   listStyle?: null | listStyle,
   listStyleImage?: null | listStyleImage,
   listStylePosition?: null | listStylePosition,
   listStyleType?: null | listStyleType,
   margin?: null | margin,
+  marginBlock?: null | marginBlockEnd,
   marginBlockEnd?: null | marginBlockEnd,
   marginBlockStart?: null | marginBlockStart,
   marginBottom?: null | marginBottom,
   marginEnd?: null | marginRight,
+  // @deprecated
   marginHorizontal?: null | marginLeft,
+  marginInline?: null | marginInlineEnd,
   marginInlineEnd?: null | marginInlineEnd,
   marginInlineStart?: null | marginInlineStart,
   marginLeft?: null | marginLeft,
   marginRight?: null | marginRight,
   marginStart?: null | marginLeft,
   marginTop?: null | marginTop,
+  // @deprecated
   marginVertical?: null | marginTop,
+
+  marginTrim?:
+    | null
+    | 'none'
+    | 'block'
+    | 'block-start'
+    | 'block-end'
+    | 'inline'
+    | 'inline-start'
+    | 'inline-end',
+
   marker?: null | marker,
   markerEnd?: null | markerEnd,
   markerMid?: null | markerMid,
@@ -1117,6 +1232,15 @@ export type CSSProperties = $ReadOnly<{
   maskRepeat?: null | maskRepeat,
   maskSize?: null | maskSize,
   maskType?: null | maskType,
+
+  maskBorder?: null | string,
+  maskBorderMode?: null | 'alpha' | 'luminance',
+  maskBorderOutset?: null | string | number,
+  maskBorderRepeat?: null | 'stretch' | 'repeat' | 'round' | 'space',
+  maskBorderSlice?: null | string | number,
+  maskBorderSource?: null | string,
+  maskBorderWidth?: null | string | number,
+
   maxBlockSize?: null | maxBlockSize,
   maxHeight?: null | maxHeight,
   maxInlineSize?: null | maxInlineSize,
@@ -1133,10 +1257,14 @@ export type CSSProperties = $ReadOnly<{
   MsOverflowStyle?: null | MsOverflowStyle,
   objectFit?: null | objectFit,
   objectPosition?: null | objectPosition,
-  offsetBlockEnd?: null | offsetBlockEnd,
-  offsetBlockStart?: null | offsetBlockStart,
-  offsetInlineEnd?: null | offsetInlineEnd,
-  offsetInlineStart?: null | offsetInlineStart,
+
+  offset?: null | string,
+  offsetAnchor?: null | string,
+  offsetDistance?: null | string | number,
+  offsetPath?: null | string,
+  offsetPosition?: null | string,
+  offsetRotate?: null | string,
+
   opacity?: null | opacity,
   order?: null | order,
   orphans?: null | orphans,
@@ -1145,18 +1273,32 @@ export type CSSProperties = $ReadOnly<{
   outlineOffset?: null | outlineOffset,
   outlineStyle?: null | outlineStyle,
   outlineWidth?: null | outlineWidth,
+
   overflow?: null | overflow,
-  overflowAnchor?: null | overflowAnchor,
-  overflowClipBox?: null | overflowClipBox,
-  overflowWrap?: null | overflowWrap,
+  overflowBlock?: null | overflowY,
+  overflowBlockX?: null | overflowX,
   overflowX?: null | overflowX,
   overflowY?: null | overflowY,
+
+  overflowAnchor?: null | overflowAnchor,
+  // overflowClipBox?: null | overflowClipBox,
+  overflowClipMargin?: null | string,
+
+  overflowWrap?: null | overflowWrap,
+
   overscrollBehavior?: null | overscrollBehavior,
-  overscrollBehaviorX?: null | overscrollBehaviorX,
+  overscrollBehaviorBlock?: null | overscrollBehaviorY,
   overscrollBehaviorY?: null | overscrollBehaviorY,
+  overscrollBehaviorInline?: null | overscrollBehaviorX,
+  overscrollBehaviorX?: null | overscrollBehaviorX,
+
   padding?: null | padding,
+  paddingBlock?: null | paddingBlockEnd,
   paddingBlockEnd?: null | paddingBlockEnd,
   paddingBlockStart?: null | paddingBlockStart,
+  paddingInline?: null | paddingBlockEnd,
+  paddingInlineEnd?: null | paddingBlockEnd,
+  paddingInlineStart?: null | paddingBlockStart,
   paddingBottom?: null | paddingBottom,
   paddingEnd?: null | paddingBottom,
   paddingHorizontal?: null | paddingLeft,
@@ -1165,9 +1307,21 @@ export type CSSProperties = $ReadOnly<{
   paddingStart?: null | paddingLeft,
   paddingTop?: null | paddingTop,
   paddingVertical?: null | paddingTop,
+
+  page?: null | string,
   pageBreakAfter?: null | pageBreakAfter,
   pageBreakBefore?: null | pageBreakBefore,
   pageBreakInside?: null | pageBreakInside,
+  paintOrder?:
+    | null
+    | 'normal'
+    | 'stroke'
+    | 'fill'
+    | 'markers'
+    | 'stroke fill'
+    | 'stroke markers'
+    | 'fill markers'
+    | 'stroke fill markers',
   pause?: null | pause,
   pauseAfter?: null | pauseAfter,
   pauseBefore?: null | pauseBefore,
@@ -1182,16 +1336,54 @@ export type CSSProperties = $ReadOnly<{
   restBefore?: null | restBefore,
   right?: null | number | string,
   rowGap?: null | rowGap,
+
+  // Ruby properties.
   rubyAlign?: null | rubyAlign,
   rubyMerge?: null | rubyMerge,
   rubyPosition?: null | rubyPosition,
+  // Math properties
+  mathDepth?: null | number | string,
+  mathShift?: null | 'normal' | 'compact',
+  mathStyle?: null | 'normal' | 'compact',
+
   scrollbarWidth?: null | string | number,
   scrollBehavior?: null | scrollBehavior,
-  scrollPadding?: null | number,
-  scrollPaddingTop?: null | number,
-  scrollPaddingBottom?: null | number,
+
+  scrollMargin?: null | number | string,
+  scrollMarginTop?: null | number | string,
+  scrollMarginRight?: null | number | string,
+  scrollMarginBottom?: null | number | string,
+  scrollMarginLeft?: null | number | string,
+  scrollMarginBlock?: null | number | string,
+  scrollMarginBlockEnd?: null | number | string,
+  scrollMarginBlockStart?: null | number | string,
+  scrollMarginInline?: null | number | string,
+  scrollMarginInlineEnd?: null | number | string,
+  scrollMarginInlineStart?: null | number | string,
+
+  scrollPadding?: null | number | string,
+  scrollPaddingTop?: null | number | string,
+  scrollPaddingRight?: null | number | string,
+  scrollPaddingBottom?: null | number | string,
+  scrollPaddingLeft?: null | number | string,
+  scrollPaddingBlock?: null | number | string,
+  scrollPaddingBlockEnd?: null | number | string,
+  scrollPaddingBlockStart?: null | number | string,
+  scrollPaddingInline?: null | number | string,
+  scrollPaddingInlineEnd?: null | number | string,
+  scrollPaddingInlineStart?: null | number | string,
+
   scrollSnapAlign?: null | scrollSnapAlign,
+  scrollSnapStop?: null | 'normal' | 'always',
   scrollSnapType?: null | scrollSnapType,
+
+  scrollTimeline?: null | string,
+  scrollTimelineAxis?: null | 'block' | 'inline' | 'x' | 'y',
+  scrollTimelineName?: null | string,
+
+  scrollbarColor?: null | color,
+  scrollbarWidth?: null | width,
+
   shapeImageThreshold?: null | shapeImageThreshold,
   shapeMargin?: null | shapeMargin,
   shapeOutside?: null | shapeOutside,
@@ -1214,29 +1406,49 @@ export type CSSProperties = $ReadOnly<{
   textAlignLast?: null | textAlignLast,
   textAnchor?: null | textAnchor,
   textCombineUpright?: null | textCombineUpright,
+
   textDecoration?: null | textDecoration,
   textDecorationColor?: null | textDecorationColor,
   textDecorationLine?: null | textDecorationLine,
   textDecorationSkip?: null | textDecorationSkip,
+  textDecorationSkipInk?: null | 'auto' | 'none' | 'all',
   textDecorationStyle?: null | textDecorationStyle,
+  textDecorationThickness?: null | number | string,
+
   textEmphasis?: null | textEmphasis,
   textEmphasisColor?: null | textEmphasisColor,
   textEmphasisPosition?: null | textEmphasisPosition,
   textEmphasisStyle?: null | textEmphasisStyle,
   textIndent?: null | textIndent,
+  textJustify?:
+    | null
+    | 'none'
+    | 'auto'
+    | 'inter-word'
+    | 'inter-character'
+    | 'distribute',
   textOrientation?: null | textOrientation,
   textOverflow?: null | textOverflow,
   textRendering?: null | textRendering,
   textShadow?: null | OptionalArray<textShadow>,
   textSizeAdjust?: null | textSizeAdjust,
   textTransform?: null | textTransform,
+  textUnderlineOffset?: null | number | string,
   textUnderlinePosition?: null | textUnderlinePosition,
+  textWrap?: null | 'wrap' | 'nowrap' | 'balance',
+
+  timelineScope?: null | string,
   top?: null | top,
   touchAction?: null | touchAction,
+
   transform?: null | transform,
   transformBox?: null | transformBox,
   transformOrigin?: null | transformOrigin,
   transformStyle?: null | transformStyle,
+  rotate?: null | number | string,
+  scale?: null | number | string,
+  translate?: null | number | string,
+
   transition?: null | OptionalArray<transition>,
   transitionDelay?: null | OptionalArray<transitionDelay>,
   transitionDuration?: null | OptionalArray<transitionDuration>,
@@ -1246,6 +1458,14 @@ export type CSSProperties = $ReadOnly<{
   unicodeRange?: null | unicodeRange,
   userSelect?: null | userSelect,
   verticalAlign?: null | verticalAlign,
+
+  viewTimeline?: null | string,
+  viewTimelineAxis?: null | 'block' | 'inline' | 'x' | 'y',
+  viewTimelineName?: null | string,
+  viewTimelineInset?: null | number | string,
+
+  viewTransitionName?: null | string,
+
   visibility?: null | visibility,
   voiceBalance?: null | voiceBalance,
   voiceDuration?: null | voiceDuration,
@@ -1256,6 +1476,8 @@ export type CSSProperties = $ReadOnly<{
   voiceStress?: null | voiceStress,
   voiceVolume?: null | voiceVolume,
   whiteSpace?: null | whiteSpace,
+  // whiteSpaceCollapse?: null | string,
+
   widows?: null | widows,
   width?: null | width,
   willChange?: null | willChange,

package/lib/StyleXSheet.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { LegacyTheme as Theme } from './StyleXTypes';
+import type { LegacyThemeStyles as Theme } from './StyleXTypes';
 type SheetOptions = Readonly<{
   rootDarkTheme?: Theme;
   rootTheme?: Theme;

package/lib/StyleXSheet.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { LegacyTheme as Theme } from './StyleXTypes';
+import type { LegacyThemeStyles as Theme } from './StyleXTypes';
 
 // Stylesheet options
 type SheetOptions = $ReadOnly<{

package/lib/StyleXTypes.d.ts

@@ -22,7 +22,10 @@ export type StyleXClassName = StyleXClassNameFor<any, any>;
 export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
 
 declare const StyleXVarTag: unique symbol;
-export type StyleXVar<_Val> = string & typeof StyleXVarTag;
+declare class StyleXVar<out Val> extends String {
+  private _opaque: typeof StyleXVarTag;
+  private _value: Val;
+}
 
 // Strings that don't start with a dollar sign.
 // So that we can `&` with {$$css: true} without type errors.
@@ -46,13 +49,19 @@ type CSSPropertiesWithExtras = Partial<
       '::grammar-error': CSSProperties;
       '::marker': CSSProperties;
       // This is a pattern and not a static key so it cannot be typed correctly.
-      // '::part()': CSSProperties;
+      // [key: `::part(${string})` | `::slotted(${string})`]: CSSProperties;
       '::placeholder': CSSProperties;
       '::selection': CSSProperties;
       // This is a pattern and not a static key so it cannot be typed correctly.
       // '::slotted()': CSSProperties;
       '::spelling-error': CSSProperties;
       '::target-text': CSSProperties;
+      '::-webkit-scrollbar'?: CSSProperties;
+      // webkit styles used for Search in Safari
+      '::-webkit-search-decoration'?: CSSProperties;
+      '::-webkit-search-cancel-button'?: CSSProperties;
+      '::-webkit-search-results-button'?: CSSProperties;
+      '::-webkit-search-results-decoration'?: CSSProperties;
     }
   >
 >;
@@ -71,7 +80,7 @@ export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 // NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> = T extends string | number | null
   ? T
@@ -144,25 +153,29 @@ export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
 >;
 
-declare const StyleXThemeTag: unique symbol;
-export type Theme<
+declare const StyleXVarGroupTag: unique symbol;
+export type VarGroup<
   Tokens extends { [key: string]: unknown },
   ID extends symbol = symbol,
-> = Readonly<{ [Key in keyof Tokens]: Tokens[Key] & typeof StyleXThemeTag }> & {
+> = Readonly<{
+  [Key in keyof Tokens]: Tokens[Key];
+}> & {
   $opaqueId: ID;
   $tokens: Tokens;
-};
+} & typeof StyleXVarGroupTag;
 
-export type TokensFromTheme<T extends Theme<TTokens>> = T['$tokens'];
+export type TokensFromVarGroup<T extends VarGroup<TTokens>> = T['$tokens'];
 
-export type IDFromTheme<T extends Theme<TTokens>> = T['$opaqueId'];
+export type IDFromVarGroup<T extends VarGroup<TTokens>> = T['$opaqueId'];
 
 type TTokens = {
   [key: string]: string | { default: string; [key: AtRuleStr]: string };
 };
 
 export type FlattenTokens<T extends TTokens> = Readonly<{
-  [Key in keyof T]: T[Key] extends { [key: string]: infer X } ? X : T[Key];
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? StyleXVar<X>
+    : StyleXVar<T[Key]>;
 }>;
 
 export type StyleX$DefineVars = <
@@ -170,15 +183,15 @@ export type StyleX$DefineVars = <
   ID extends symbol = symbol,
 >(
   tokens: DefaultTokens,
-) => Theme<FlattenTokens<DefaultTokens>, ID>;
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-export type Variant<
-  T extends Theme<TTokens, symbol>,
+export type Theme<
+  T extends VarGroup<TTokens, symbol>,
   // eslint-disable-next-line no-unused-vars
   Tag extends symbol = symbol,
 > = Tag &
   Readonly<{
-    theme: StyleXClassNameFor<string, IDFromTheme<T>>;
+    theme: StyleXClassNameFor<string, IDFromVarGroup<T>>;
   }>;
 
 type OverridesForTokenType<Config extends { [key: string]: any }> = {
@@ -188,9 +201,9 @@ type OverridesForTokenType<Config extends { [key: string]: any }> = {
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens extends Theme<any>,
+  BaseTokens extends VarGroup<any>,
   ID extends symbol = symbol,
 >(
   baseTokens: BaseTokens,
-  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
-) => Variant<BaseTokens, ID>;
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/StyleXTypes.js.flow

@@ -20,65 +20,26 @@ export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
 
 type CSSPropertiesWithExtras = $ReadOnly<{
   ...CSSProperties,
-  ':active'?: CSSProperties,
-  ':focus'?: CSSProperties,
-  ':focus-visible'?: CSSProperties,
-  ':hover'?: CSSProperties,
-  ':disabled'?: CSSProperties,
-  ':empty'?: CSSProperties,
-  ':first-child'?: CSSProperties,
-  ':last-child'?: CSSProperties,
   '::before'?: CSSProperties,
   '::after'?: CSSProperties,
+  '::backdrop'?: CSSProperties,
+  '::cue'?: CSSProperties,
+  '::cue-region'?: CSSProperties,
+  '::first-letter'?: CSSProperties,
+  '::first-line'?: CSSProperties,
+  '::file-selector-button'?: CSSProperties,
+  '::grammar-error'?: CSSProperties,
+  '::marker'?: CSSProperties,
   '::placeholder'?: CSSProperties,
+  '::selection'?: CSSProperties,
+  '::spelling-error'?: CSSProperties,
+  '::target-text'?: CSSProperties,
   '::-webkit-scrollbar'?: CSSProperties,
-  // Find a better way to do this. Being forced to add every media query.
-  '@media (max-width: 564px)'?: CSSProperties,
-  '@media (min-height: 700px)'?: CSSProperties,
-  '@media (min-height: 700px) and (max-height: 789px)'?: CSSProperties,
-  '@media (min-height: 753px) and (max-height: 789px)'?: CSSProperties,
-  '@media (min-height: 790px)'?: CSSProperties,
-  '@media (max-width: 648px)'?: CSSProperties,
-  '@media (max-width: 899px)'?: CSSProperties,
-  '@media (max-width: 900px)'?: CSSProperties,
-  '@media (min-width: 900px)'?: CSSProperties,
-  '@media (min-width: 900px) and (max-width: 1259px)'?: CSSProperties,
-  '@media (max-width: 1099px)'?: CSSProperties,
-  '@media (max-width: 1199px)'?: CSSProperties,
-  '@media (max-width: 1259px)'?: CSSProperties,
-  '@media (min-width: 1290px)'?: CSSProperties,
-  '@media (max-width: 420px)'?: CSSProperties,
-  '@media (max-width: 500px)'?: CSSProperties,
-  '@media (pointer: coarse)'?: CSSProperties,
-  '@media (-webkit-min-device-pixel-ratio: 0)'?: CSSProperties,
-  '@media print'?: CSSProperties,
-  // Media queries used for Oculus Web Design Systems (OCDS components).
-  '@media (max-width: 767px)'?: CSSProperties,
-  '@media (min-width: 768px)'?: CSSProperties,
-  '@media (min-width: 768px) and (max-width: 1024px)'?: CSSProperties,
-  '@media (max-width: 1024px)'?: CSSProperties,
-  '@media (min-width: 1025px)'?: CSSProperties,
-  '@media (min-width: 1025px) and (max-width: 1920px)'?: CSSProperties,
-  '@media (max-width: 1920px)'?: CSSProperties,
-  '@media (min-width: 1921px)'?: CSSProperties,
-  // Media queries used for Intern Data Products
-  '@media (min-width: 1500px)'?: CSSProperties,
-  '@media (min-width: 1800px)'?: CSSProperties,
-  '@media (min-width: 2250px)'?: CSSProperties,
   // webkit styles used for Search in Safari
   '::-webkit-search-decoration'?: CSSProperties,
   '::-webkit-search-cancel-button'?: CSSProperties,
   '::-webkit-search-results-button'?: CSSProperties,
   '::-webkit-search-results-decoration'?: CSSProperties,
-  // Media queries used for the logged out header
-  '@media (min-width: 950px)'?: CSSProperties,
-  // Media queries used for bizweb
-  '@media (min-width: 1440px)'?: CSSProperties,
-  '@media (min-width: 1920px)'?: CSSProperties,
-  // Media queries used for fbai
-  '@media (min-width: 800px)'?: CSSProperties,
-  // Media queries used for messengerkidsdotcom
-  '@media (max-width: 1024px) and (min-width: 501px)'?: CSSProperties,
 }>;
 
 export type NestedCSSPropTypes = $ReadOnly<{
@@ -95,7 +56,10 @@ export type XStyleWithout<+T: { +[string]: mixed }> = XStyle<
 
 export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
-export type LegacyTheme = $ReadOnly<{ [constantName: string]: string, ... }>;
+export type LegacyThemeStyles = $ReadOnly<{
+  [constantName: string]: string,
+  ...
+}>;
 
 type ComplexStyleValueType<+T> = T extends StyleXVar<infer U>
   ? U
@@ -164,17 +128,16 @@ export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
 // This is the type for the variables object
 declare export opaque type StyleXVar<+Val: mixed>;
 
-declare export opaque type Theme<
+declare export opaque type VarGroup<
   +Tokens: { +[string]: mixed },
   +_ID: string = string,
 >: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
 
-export type TokensFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
-  infer Tokens extends { +[string]: mixed },
->
-  ? Tokens
-  : empty;
-type IDFromTheme<+T: Theme<{ +[string]: mixed }>> = T extends Theme<
+export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> =
+  T extends VarGroup<infer Tokens extends { +[string]: mixed }>
+    ? Tokens
+    : empty;
+type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = T extends VarGroup<
   { +[string]: mixed },
   infer ID,
 >
@@ -196,14 +159,14 @@ export type FlattenTokens<T: TTokens> = {
 
 export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
-) => Theme<FlattenTokens<DefaultTokens>, ID>;
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-export type Variant<
-  +T: Theme<{ +[string]: mixed }, string>,
+export type Theme<
+  +T: VarGroup<{ +[string]: mixed }, string>,
   +_Tag: string = string,
 > = $ReadOnly<{
   $$css: true,
-  [string]: StyleXClassNameFor<string, IDFromTheme<T>>,
+  [string]: StyleXClassNameFor<string, IDFromVarGroup<T>>,
 }>;
 
 export type OverridesForTokenType<Config: { +[string]: mixed }> = {
@@ -213,9 +176,9 @@ export type OverridesForTokenType<Config: { +[string]: mixed }> = {
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: Theme<{ +[string]: mixed }>,
+  BaseTokens: VarGroup<{ +[string]: mixed }>,
   ID: string = string,
 >(
   baseTokens: BaseTokens,
-  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
-) => Variant<BaseTokens, ID>;
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/stylex.d.ts

@@ -17,7 +17,14 @@ import type {
   InlineStyles,
   StyleXClassNameFor,
 } from './StyleXTypes';
-export type { Theme, Variant } from './StyleXTypes';
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
 import injectStyle from './stylex-inject';
 export declare function props(
   this: null | undefined | unknown,

package/lib/stylex.js.flow

@@ -18,7 +18,14 @@ import type {
   StyleXClassNameFor,
 } from './StyleXTypes';
 
-export type { Theme, Variant } from './StyleXTypes';
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
 
 import injectStyle from './stylex-inject';
 declare export function props(

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.24",
+  "version": "0.2.0-beta.26",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
-  "react-native": "lib/native/stylex.js",
   "types": "lib/stylex.d.ts",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -20,7 +19,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.24"
+    "@stylexjs/scripts": "0.2.0-beta.26"
   },
   "jest": {},
   "files": [