@plasmicapp/react-web 0.2.403 → 0.2.405

package/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,
  * );
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.403",
+  "version": "0.2.405",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -95,14 +95,14 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
-    "@plasmicapp/auth-react": "0.0.23",
-    "@plasmicapp/data-sources": "0.1.190",
+    "@plasmicapp/auth-react": "0.0.24",
+    "@plasmicapp/data-sources": "0.1.191",
     "@plasmicapp/data-sources-context": "0.1.22",
-    "@plasmicapp/host": "1.0.226",
+    "@plasmicapp/host": "1.0.227",
     "@plasmicapp/loader-splits": "1.0.65",
-    "@plasmicapp/nextjs-app-router": "1.0.18",
-    "@plasmicapp/prepass": "1.0.20",
-    "@plasmicapp/query": "0.1.80",
+    "@plasmicapp/nextjs-app-router": "1.0.19",
+    "@plasmicapp/prepass": "1.0.21",
+    "@plasmicapp/query": "0.1.81",
     "@react-aria/checkbox": "^3.15.5",
     "@react-aria/focus": "^3.20.3",
     "@react-aria/interactions": "^3.25.1",
@@ -153,5 +153,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "8c7b2566770ba6dbc181bd98a22cca50cc84c57e"
+  "gitHead": "6b7adfd7b48f564d94e18eed3f1904c62dcd1e2d"
 }

package/skinny/dist/index.js

@@ -749,14 +749,13 @@ function createUseScreenVariants(isMulti, screenQueries) {
  */
 var StyleTokensContext = React__default.createContext(undefined);
 /**
- * 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,
  * );
  *
@@ -783,27 +782,24 @@ var StyleTokensContext = React__default.createContext(undefined);
  */
 function createUseStyleTokens(tokenData, useGlobalVariants) {
     return function () {
-        var overrides = React__default.useContext(StyleTokensContext);
+        var ctxClassNames = React__default.useContext(StyleTokensContext);
         var globalVariants = useGlobalVariants();
         return React__default.useMemo(function () {
-            if (overrides && overrides.length > 0) {
-                return overrides;
-            }
-            else {
-                return activeTokensClassNames(tokenData, globalVariants);
-            }
-        }, [overrides, globalVariants, tokenData]);
+            // Use a set to deduplicate
+            return Array.from(new Set(__spreadArray(__spreadArray([], __read((ctxClassNames !== null && ctxClassNames !== void 0 ? ctxClassNames : [])), false), __read(activeTokensClassNames(tokenData, globalVariants)), false)));
+        }, [ctxClassNames, globalVariants]);
     };
 }
 /**
- * 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,
  * );
  *
@@ -837,6 +833,7 @@ function createStyleTokensProvider(tokenData, useGlobalVariants) {
  * global variants.
  */
 function activeTokensClassNames(tokenData, globalVariants) {
+    var _a, _b;
     var varianted = tokenData.varianted
         .filter(function (_a) {
         var groupName = _a.groupName, variant = _a.variant;
@@ -846,7 +843,7 @@ function activeTokensClassNames(tokenData, globalVariants) {
         var className = _a.className;
         return className;
     });
-    return __spreadArray([tokenData.base], __read(varianted), false);
+    return __spreadArray(__spreadArray([], __read(((_b = (_a = tokenData.base) === null || _a === void 0 ? void 0 : _a.split(" ")) !== null && _b !== void 0 ? _b : [])), false), __read(varianted), false);
 }
 
 function useFocused(opts) {