@plasmicapp/react-web 0.2.403 → 0.2.405

package/skinny/dist/render/style-tokens.d.ts

@@ -2,7 +2,10 @@ import React from "react";
 import { UseGlobalVariants } from "./global-variants";
 type ClassName = string;
 /**
- * All style token data for this project.
+ * All style token data (except overrides) for this project.
+ * This data is used as the default context value.
+ *
+ * We don't include the overrides because the Provider (that wraps the components) decides which project's overrides to apply.
  *
  * Usage:
  *
@@ -11,9 +14,10 @@ type ClassName = string;
  * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
  * import { useTheme } from "./PlasmicGlobalVariant__Theme";
  * import projectcss from "./plasmic.module.css";
+ * import depcss from "../dep/plasmic.module.css";
  *
- * const projectStyleTokenData: ProjectStyleTokenData = {
- *   base: projectcss.plasmic_tokens,
+ * const data: ProjectStyleTokenData = {
+ *   base: `${projectcss.plasmic_tokens} ${depcss.plasmic_tokens}`,
  *   varianted: [
  *     {
  *       className: projectcss.global_platform_windows,
@@ -40,7 +44,7 @@ type ClassName = string;
  * ```
  */
 interface ProjectStyleTokenData {
-    base: ClassName;
+    base?: ClassName;
     varianted: {
         className: ClassName;
         groupName: string;
@@ -49,14 +53,13 @@ interface ProjectStyleTokenData {
 }
 type UseStyleTokens = () => ClassName[];
 /**
- * Returns style tokens. If the context is not available, falls back to the
- * current project's styles.
+ * Creates a useStyleTokens hook for a given project that returns class names for the given project's tokens plus token overrides from StyleTokensProvider if present.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const useStyleTokens = createUseStyleTokens(
- *   projectStyleTokenData,
+ *   data,
  *   useGlobalVariants,
  * );
  *
@@ -83,14 +86,15 @@ type UseStyleTokens = () => ClassName[];
  */
 export declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
 /**
- * Creates a StyleTokens context provider for a given project, which includes
- * its tokens, overrides, and all tokens from its dependencies.
+ * Creates a StyleTokensProvider for a given project to allow propagating its overrides to components of other projects.
+ *
+ * To ensure all tokens in the overrides class name resolve properly, the base and varianted class names must be included.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const StyleTokensProvider = createStyleTokensProvider(
- *   projectStyleTokenData,
+ *   { base: `${projectcss.plasmic_tokens_override} ${data.base}`, varianted: data.varianted },
  *   useGlobalVariants,
  * );
  *