@sproutsocial/seeds-react-theme-provider 1.1.16 → 1.1.21

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/index.mjs     425.00 B
-ESM dist/index.mjs.map 854.00 B
-ESM ⚡️ Build success in 15ms
-CJS dist/index.js     1.39 KB
-CJS dist/index.js.map 914.00 B
-CJS ⚡️ Build success in 15ms
+CJS dist/index.js     1.83 KB
+CJS dist/index.js.map 1.67 KB
+CJS ⚡️ Build success in 11ms
+ESM dist/index.mjs     861.00 B
+ESM dist/index.mjs.map 1.64 KB
+ESM ⚡️ Build success in 12ms
 DTS Build start
-DTS ⚡️ Build success in 1449ms
+DTS ⚡️ Build success in 1746ms
 DTS dist/index.d.ts  436.00 B
 DTS dist/index.d.mts 436.00 B
-Done in 2.19s.
+Done in 2.53s.

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @sproutsocial/seeds-react-theme-provider
 
+## 1.1.21
+
+### Patch Changes
+
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+
+## 1.1.20
+
+### Patch Changes
+
+- Updated dependencies [5114a32]
+  - @sproutsocial/seeds-react-theme@4.1.0
+
+## 1.1.19
+
+### Patch Changes
+
+- Updated dependencies [132ef9d]
+  - @sproutsocial/seeds-react-theme@4.0.0
+
+## 1.1.18
+
+### Patch Changes
+
+- 47c62b3: Fix SCSS build failure caused by radial-gradient + color-mix() values in theme maps. The ai_generated container background token used a radial-gradient() with color-mix() calls, which SCSS cannot parse inside a map. The value is now a CSS custom property reference, with the actual gradient defined in \_themed.scss.
+
+  Inject the --color-container-bg-ai-generated CSS custom property via createGlobalStyle in ThemeProvider so styled-components consumers render the AI gradient without requiring the compiled SCSS theme CSS to be loaded.
+
+- Updated dependencies [47c62b3]
+  - @sproutsocial/seeds-react-theme@3.7.1
+
+## 1.1.17
+
+### Patch Changes
+
+- Updated dependencies [06da9c2]
+  - @sproutsocial/seeds-react-theme@3.7.0
+
 ## 1.1.16
 
 ### Patch Changes

package/dist/index.js

@@ -27,6 +27,19 @@ var React = require("react");
 var import_styled_components = require("styled-components");
 var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ThemeProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { ...props, theme: props.theme || import_seeds_react_theme.theme });
+var GlobalTokenStyles = import_styled_components.createGlobalStyle`
+  :root {
+    --color-container-bg-ai-generated: radial-gradient(
+      circle at bottom left,
+      color-mix(in srgb, #205bc3, transparent 80%) 0%,
+      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,
+      color-mix(in srgb, #f282f5, transparent 80%) 100%
+    ), #f3f4f4;
+  }
+`;
+var ThemeProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled_components.ThemeProvider, { ...props, theme: props.theme || import_seeds_react_theme.theme, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalTokenStyles, {}),
+  props.children
+] });
 var index_default = ThemeProvider;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ThemeProvider as BaseThemeProvider } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n  TypeSproutTheme,\n  TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n  readonly theme?: TypeAllThemes;\n  readonly children?: React.ReactNode;\n};\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme} />\n);\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,+BAAmD;AACnD,+BAAsB;AAepB;AADF,IAAM,gBAAgB,CAAC,UACrB,4CAAC,yBAAAA,eAAA,EAAmB,GAAG,OAAO,OAAO,MAAM,SAAS,gCAAO;AAG7D,IAAO,gBAAQ;","names":["BaseThemeProvider"]}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ThemeProvider as BaseThemeProvider,\n  createGlobalStyle,\n} from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n  TypeSproutTheme,\n  TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n  readonly theme?: TypeAllThemes;\n  readonly children?: React.ReactNode;\n};\n\n// CSS custom properties for token values that cannot be represented in SCSS maps\n// (e.g. radial-gradient + color-mix). These are injected here so styled-components\n// consumers get the values without needing to load the compiled SCSS theme CSS.\nconst GlobalTokenStyles = createGlobalStyle`\n  :root {\n    --color-container-bg-ai-generated: radial-gradient(\n      circle at bottom left,\n      color-mix(in srgb, #205bc3, transparent 80%) 0%,\n      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,\n      color-mix(in srgb, #f282f5, transparent 80%) 100%\n    ), #f3f4f4;\n  }\n`;\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme}>\n    <GlobalTokenStyles />\n    {props.children}\n  </BaseThemeProvider>\n);\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,+BAGO;AACP,+BAAsB;AA6BpB;AAZF,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,IAAM,gBAAgB,CAAC,UACrB,6CAAC,yBAAAA,eAAA,EAAmB,GAAG,OAAO,OAAO,MAAM,SAAS,gCAClD;AAAA,8CAAC,qBAAkB;AAAA,EAClB,MAAM;AAAA,GACT;AAGF,IAAO,gBAAQ;","names":["BaseThemeProvider"]}

package/dist/index.mjs

@@ -1,9 +1,25 @@
 // src/index.tsx
 import "react";
-import { ThemeProvider as BaseThemeProvider } from "styled-components";
+import {
+  ThemeProvider as BaseThemeProvider,
+  createGlobalStyle
+} from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
-import { jsx } from "react/jsx-runtime";
-var ThemeProvider = (props) => /* @__PURE__ */ jsx(BaseThemeProvider, { ...props, theme: props.theme || theme });
+import { jsx, jsxs } from "react/jsx-runtime";
+var GlobalTokenStyles = createGlobalStyle`
+  :root {
+    --color-container-bg-ai-generated: radial-gradient(
+      circle at bottom left,
+      color-mix(in srgb, #205bc3, transparent 80%) 0%,
+      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,
+      color-mix(in srgb, #f282f5, transparent 80%) 100%
+    ), #f3f4f4;
+  }
+`;
+var ThemeProvider = (props) => /* @__PURE__ */ jsxs(BaseThemeProvider, { ...props, theme: props.theme || theme, children: [
+  /* @__PURE__ */ jsx(GlobalTokenStyles, {}),
+  props.children
+] });
 var index_default = ThemeProvider;
 export {
   index_default as default

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ThemeProvider as BaseThemeProvider } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n  TypeSproutTheme,\n  TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n  readonly theme?: TypeAllThemes;\n  readonly children?: React.ReactNode;\n};\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme} />\n);\n\nexport default ThemeProvider;\n"],"mappings":";AAAA,OAAuB;AACvB,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,aAAa;AAepB;AADF,IAAM,gBAAgB,CAAC,UACrB,oBAAC,qBAAmB,GAAG,OAAO,OAAO,MAAM,SAAS,OAAO;AAG7D,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ThemeProvider as BaseThemeProvider,\n  createGlobalStyle,\n} from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\nimport type {\n  TypeSproutTheme,\n  TypeTheme,\n} from \"@sproutsocial/seeds-react-theme\";\n\n// We can append additional themes types here\ntype TypeAllThemes = TypeTheme | TypeSproutTheme;\n\ntype TypeProps = {\n  readonly theme?: TypeAllThemes;\n  readonly children?: React.ReactNode;\n};\n\n// CSS custom properties for token values that cannot be represented in SCSS maps\n// (e.g. radial-gradient + color-mix). These are injected here so styled-components\n// consumers get the values without needing to load the compiled SCSS theme CSS.\nconst GlobalTokenStyles = createGlobalStyle`\n  :root {\n    --color-container-bg-ai-generated: radial-gradient(\n      circle at bottom left,\n      color-mix(in srgb, #205bc3, transparent 80%) 0%,\n      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,\n      color-mix(in srgb, #f282f5, transparent 80%) 100%\n    ), #f3f4f4;\n  }\n`;\n\nconst ThemeProvider = (props: TypeProps) => (\n  <BaseThemeProvider {...props} theme={props.theme || theme}>\n    <GlobalTokenStyles />\n    {props.children}\n  </BaseThemeProvider>\n);\n\nexport default ThemeProvider;\n"],"mappings":";AAAA,OAAuB;AACvB;AAAA,EACE,iBAAiB;AAAA,EACjB;AAAA,OACK;AACP,SAAS,aAAa;AA6BpB,SACE,KADF;AAZF,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,IAAM,gBAAgB,CAAC,UACrB,qBAAC,qBAAmB,GAAG,OAAO,OAAO,MAAM,SAAS,OAClD;AAAA,sBAAC,qBAAkB;AAAA,EAClB,MAAM;AAAA,GACT;AAGF,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme-provider",
-  "version": "1.1.16",
+  "version": "1.1.21",
   "description": "Seeds React Theme Provider",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.2"
+    "@sproutsocial/seeds-react-theme": "^4.1.1"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

package/src/index.tsx

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { ThemeProvider as BaseThemeProvider } from "styled-components";
+import {
+  ThemeProvider as BaseThemeProvider,
+  createGlobalStyle,
+} from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 import type {
   TypeSproutTheme,
@@ -14,8 +17,25 @@ type TypeProps = {
   readonly children?: React.ReactNode;
 };
 
+// CSS custom properties for token values that cannot be represented in SCSS maps
+// (e.g. radial-gradient + color-mix). These are injected here so styled-components
+// consumers get the values without needing to load the compiled SCSS theme CSS.
+const GlobalTokenStyles = createGlobalStyle`
+  :root {
+    --color-container-bg-ai-generated: radial-gradient(
+      circle at bottom left,
+      color-mix(in srgb, #205bc3, transparent 80%) 0%,
+      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,
+      color-mix(in srgb, #f282f5, transparent 80%) 100%
+    ), #f3f4f4;
+  }
+`;
+
 const ThemeProvider = (props: TypeProps) => (
-  <BaseThemeProvider {...props} theme={props.theme || theme} />
+  <BaseThemeProvider {...props} theme={props.theme || theme}>
+    <GlobalTokenStyles />
+    {props.children}
+  </BaseThemeProvider>
 );
 
 export default ThemeProvider;