feat(system): variants are now being properly transformed, runtime works, buildtime fail

packages/components/collapse/src/base/collapse-item-base.tsx

@@ -52,6 +52,7 @@ export interface CollapseItemBaseProps<T extends object = {}>
    * @default "light"
    */
   dividerWeight?: CollapseItemVariantProps["dividerWeight"];
+  bgColor?: CollapseItemVariantProps["bgColor"];
   /**
    * Whether the collapse item have a bottom border.
    * @default true

packages/components/collapse/src/collapse.styles.ts

@@ -5,6 +5,7 @@ import {cssFocusVisible} from "@nextui-org/shared-css";
  * Variants
  */
 export const itemVariants = generateVariants({
+  bgColor: "backgroundColor",
   borderWeight: "borderWidth",
   dividerWeight: "borderWidth",
 });
@@ -55,7 +56,7 @@ export const StyledCollapseItem = styled(
       },
     },
   },
-  itemVariants as any,
+  itemVariants,
 );
 
 export const StyledCollapseItemHeading = styled("h2", {});

packages/components/collapse/src/use-collapse-item.tsx

@@ -52,6 +52,7 @@ export function useCollapseItem<T extends object>(props: UseCollapseItemProps<T>
     borderWeight = item.props?.borderWeight ?? "normal",
     dividerWeight = item.props?.dividerWeight ?? "light",
     disableAnimation = item.props?.disableAnimation ?? false,
+    bgColor = item.props?.bgColor,
     isDisabled: groupDisabled = false,
     onFocusChange,
     ...otherProps
@@ -82,6 +83,7 @@ export function useCollapseItem<T extends object>(props: UseCollapseItemProps<T>
     css,
     borderWeight,
     dividerWeight,
+    bgColor,
     indicator,
     subtitle,
     variant,

packages/components/collapse/stories/collapse.stories.tsx

@@ -10,7 +10,14 @@ export default {
 
 export const Default = () => (
   <Collapse selectionMode="single">
-    <Collapse.Item key="1" title="Your files">
+    <Collapse.Item
+      key="1"
+      bgColor={{
+        "@initial": "yellow600",
+        "@xsMax": "blue600",
+      }}
+      title="Your files"
+    >
       file
     </Collapse.Item>
     <Collapse.Item key="2" title="Shared with you">

packages/core/system/src/type-utils.ts

@@ -2,6 +2,8 @@ export type Globals = "inherit" | "initial" | "revert" | "unset";
 
 export type Index = (number | string) & Record<never, never>;
 
+export type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
+
 export type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme
   ? keyof Theme[ScaleName]
   : never;

packages/core/system/src/variants.ts

@@ -2,10 +2,11 @@ import type * as Stitches from "@stitches/react";
 
 import {CssComponent} from "@stitches/react/types/styled-component";
 
-import {TokensGroup, ThemeMap, Media, defaultTokens, defaultThemeMap} from "./common";
-
-// TODO: Take ThemeMap, token keys & default theme map, from `theme` (stitches.config.ts)
+import {ThemeMap, Media, defaultTokens, defaultThemeMap} from "./common";
+import {theme} from "./stitches.config";
+import {Prefixed} from "./type-utils";
 
+type Theme = typeof theme;
 type TokenKeys = keyof typeof defaultTokens;
 type CSSProperties = Stitches.CSSProperties;
 type VariantsToGenerate = {
@@ -33,22 +34,20 @@ type VariantsToGenerate = {
  *   }
  * }
  */
-export function getVariants<TK extends TokenKeys>(scale: TK, prop: keyof CSSProperties) {
-  if (!defaultTokens[scale]) {
+function getVariants<TK extends TokenKeys>(scale: TK, prop: keyof CSSProperties) {
+  if (!theme[scale]) {
     return;
   }
 
-  return Object.keys(defaultTokens[scale]).reduce((acc, token) => {
+  return Object.keys(theme[scale]).reduce((acc, token) => {
     // @ts-ignore
     acc[token] = {
       // @ts-ignore
-      [prop]: `${defaultTokens[scale][token]}`,
+      [prop]: `${theme[scale][token]}`,
     };
 
     return acc;
-  }, {}) as unknown as {
-    [K in keyof TokensGroup[TK]]: {[P in keyof CSSProperties]: TokensGroup[TK][K]};
-  };
+  }, {});
 }
 
 /**
@@ -66,8 +65,12 @@ export function getVariants<TK extends TokenKeys>(scale: TK, prop: keyof CSSProp
  *
  * variants: {
  *  "bgColor": {
- *    "primary": {},
- *    "secondary": {},
+ *    "primary": {
+ *      backgroundColor: "$blue600"
+ *    },
+ *    "secondary": {
+ *      backgroundColor: "$purple600"
+ *    },
  *    "success": {},
  *    .... all the colors defined in the theme
  *  },
@@ -98,17 +101,29 @@ export function generateVariants<VG extends VariantsToGenerate>(vg: VG) {
 
   return {variants} as unknown as {
     variants: {
-      [K in keyof VG]?: keyof TokensGroup[ThemeMap[VG[K]]];
+      [K in keyof VG]: {
+        [Q in keyof Theme[ThemeMap[VG[K]]]]: {
+          [P in VG[K]]: Prefixed<"$", Q>;
+        };
+      };
     };
   };
 }
 
 type ComponentVariants = {
-  variants?: {
-    [Name in string]: unknown;
+  variants: {
+    [Name in string]: {
+      [Variant in string]: {};
+    };
+  };
+};
+
+type TranformToVariants<V extends ComponentVariants> = {
+  variants: {
+    [K in keyof V["variants"]]?: keyof V["variants"][K];
   };
 };
 
 export type GeneratedVariantsProps<V extends ComponentVariants> = V extends ComponentVariants
-  ? Stitches.VariantProps<CssComponent<never, V["variants"], Media>>
+  ? Stitches.VariantProps<CssComponent<never, TranformToVariants<V>["variants"], Media>>
   : never;