@sproutsocial/seeds-react-theme-provider 1.1.22 → 1.1.23

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     861.00 B
-ESM dist/index.mjs.map 1.64 KB
-ESM ⚡️ Build success in 17ms
-CJS dist/index.js     1.83 KB
-CJS dist/index.js.map 1.67 KB
-CJS ⚡️ Build success in 18ms
+CJS dist/index.js     1.41 KB
+CJS dist/index.js.map 969.00 B
+CJS ⚡️ Build success in 12ms
+ESM dist/index.mjs     451.00 B
+ESM dist/index.mjs.map 909.00 B
+ESM ⚡️ Build success in 12ms
 DTS Build start
-DTS ⚡️ Build success in 2281ms
+DTS ⚡️ Build success in 1332ms
 DTS dist/index.d.ts  436.00 B
 DTS dist/index.d.mts 436.00 B
-Done in 3.21s.
+Done in 2.06s.

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @sproutsocial/seeds-react-theme-provider
 
+## 1.1.23
+
+### Patch Changes
+
+- d21ae54: Fix AI gradient contrast and dark-mode legibility for AI components.
+
+  - The dark-mode `--color-gradient-ai` / `--color-gradient-ai-subtle` tokens now
+    use lighter blue/purple stops (`#679eff → #b984ff → #f282f5`) so AI components
+    meet WCAG contrast against the dark surface. Light mode is unchanged.
+  - The `ai-secondary` Button base now uses the themed container surface
+    (`--color-container-bg-base`) instead of a hardcoded white, and its label text
+    now flips to a light neutral in dark mode (previously dark text on a dark
+    fill).
+  - `container.background.ai_generated` and `text.ai_generated` are now
+    token-driven with proper light/dark variants; the hardcoded, light-only
+    gradient injection was removed from `seeds-react-theme-provider`.
+
+  **Contract change:** AI-generated surface tokens now resolve entirely from the
+  compiled theme CSS (`--color-gradient-ai-subtle`, `--color-container-bg-base`),
+  which is required for these tokens to render. The previous
+  `seeds-react-theme-provider` injection that let standalone styled-components
+  consumers get the AI surface _without_ loading the compiled theme CSS has been
+  removed deliberately, as part of the ongoing migration away from
+  styled-components toward CSS/Tailwind. A literal fallback was intentionally not
+  added — it could only encode the light-mode value and would render incorrectly
+  in dark mode. Consumers rendering AI components must load the compiled theme CSS.
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+
 ## 1.1.22
 
 ### Patch Changes

package/dist/index.js

@@ -27,19 +27,6 @@ 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 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 ThemeProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components.ThemeProvider, { ...props, theme: props.theme || import_seeds_react_theme.theme, children: 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 {\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"]}
+{"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    {props.children}\n  </BaseThemeProvider>\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,gCACjD,gBAAM,UACT;AAGF,IAAO,gBAAQ;","names":["BaseThemeProvider"]}

package/dist/index.mjs

@@ -1,25 +1,9 @@
 // src/index.tsx
 import "react";
-import {
-  ThemeProvider as BaseThemeProvider,
-  createGlobalStyle
-} from "styled-components";
+import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-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
-] });
+import { jsx } from "react/jsx-runtime";
+var ThemeProvider = (props) => /* @__PURE__ */ jsx(BaseThemeProvider, { ...props, theme: props.theme || theme, children: 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 {\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":[]}
+{"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    {props.children}\n  </BaseThemeProvider>\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,OACjD,gBAAM,UACT;AAGF,IAAO,gBAAQ;","names":[]}

package/package.json

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

package/src/index.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
-import {
-  ThemeProvider as BaseThemeProvider,
-  createGlobalStyle,
-} from "styled-components";
+import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 import type {
   TypeSproutTheme,
@@ -17,23 +14,8 @@ 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}>
-    <GlobalTokenStyles />
     {props.children}
   </BaseThemeProvider>
 );