@sproutsocial/seeds-react-theme 3.6.1 → 4.1.0

package/lib/light/theme.js

@@ -18,17 +18,13 @@ import BORDER from "@sproutsocial/seeds-border";
 import literalColors from "./literal-colors";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
-export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
-export var newBreakpoints = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280
+var breakpointAliases = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
 };
-breakpoints.sm = newBreakpoints.sm;
-breakpoints.md = newBreakpoints.md;
-breakpoints.lg = newBreakpoints.lg;
-breakpoints.xl = newBreakpoints.xl;
+export var breakpoints = Object.assign(["900px", "1200px", "1500px", "1800px"], breakpointAliases);
 var MODE = "light";
 
 // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -65,7 +61,8 @@ export var colors = _objectSpread(_objectSpread({
       selected: COLORS.COLOR_NEUTRAL_800,
       positive_sentiment: COLORS.COLOR_BLUE_500,
       negative_sentiment: COLORS.COLOR_RED_500,
-      neutral_sentiment: COLORS.COLOR_NEUTRAL_300
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
+      ai_generated: "var(--color-container-bg-ai-generated, ".concat(COLORS.COLOR_NEUTRAL_100, ")")
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -89,9 +86,19 @@ export var colors = _objectSpread(_objectSpread({
         aqua: aqua.highlight,
         teal: teal.highlight
       },
-      selected: COLORS.COLOR_NEUTRAL_800
+      selected: COLORS.COLOR_NEUTRAL_800,
+      ai_generated: COLORS.COLOR_PURPLE_700
     }
   },
+  // AI brand gradient (AI/Gradient: Start #205bc3 -> Mid #9747ff -> Stop #f282f5).
+  // Raw hex matches the `ai_generated` precedent; #9747ff has no exact seeds-color token.
+  gradient: {
+    // 100% — AI primary fill & outline border
+    ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
+    // 20% tint — AI secondary (composited over a white base in CSS).
+    // Kebab key so it flattens to --color-gradient-ai-subtle.
+    "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
+  },
   button: {
     primary: {
       background: {
@@ -184,6 +191,46 @@ export var colors = _objectSpread(_objectSpread({
         base: COLORS.COLOR_NEUTRAL_700,
         hover: COLORS.COLOR_NEUTRAL_900
       }
+    },
+    // AI brand appearances — consume the shared `gradient.ai*` tokens.
+    // Rendered only via the Tailwind/button.css path (see seeds-react-button).
+    "ai-primary": {
+      background: {
+        base: "var(--color-gradient-ai)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_0,
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
+    },
+    "ai-secondary": {
+      background: {
+        // White base is applied in button.css; this is the 20% gradient tint on top.
+        base: "var(--color-gradient-ai-subtle)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_800,
+        hover: COLORS.COLOR_NEUTRAL_800
+      }
+    },
+    "ai-outline": {
+      background: {
+        base: "transparent"
+      },
+      border: {
+        // Drawn as a rounded gradient border via a ::before pseudo-element in button.css.
+        base: "var(--color-gradient-ai)"
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_800,
+        hover: COLORS.COLOR_NEUTRAL_800
+      }
     }
   },
   link: {
@@ -212,7 +259,8 @@ export var colors = _objectSpread(_objectSpread({
       pink: pink.foreground,
       aqua: aqua.foreground,
       teal: teal.foreground
-    }
+    },
+    ai_generated: COLORS.COLOR_NEUTRAL_900
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_800,
@@ -319,6 +367,7 @@ export var colors = _objectSpread(_objectSpread({
     instagram: NETWORKCOLORS.NETWORK_COLOR_INSTAGRAM,
     feedly: NETWORKCOLORS.NETWORK_COLOR_FEEDLY,
     analytics: NETWORKCOLORS.NETWORK_COLOR_ANALYTICS,
+    google_analytics_property: NETWORKCOLORS.NETWORK_COLOR_ANALYTICS,
     youtube: NETWORKCOLORS.NETWORK_COLOR_YOUTUBE,
     messenger: NETWORKCOLORS.NETWORK_COLOR_MESSENGER,
     snapchat: NETWORKCOLORS.NETWORK_COLOR_SNAPCHAT,
@@ -455,7 +504,6 @@ export var duration = {
 };
 var theme = {
   breakpoints: breakpoints,
-  newBreakpoints: newBreakpoints,
   colors: colors,
   typography: _objectSpread(_objectSpread({}, typography), {}, {
     typography: typography

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "3.6.1",
+  "version": "4.1.0",
   "description": "Seeds Theme",
   "main": "commonjs/index.js",
   "module": "lib/index.js",
@@ -10,11 +10,25 @@
   "files": [
     "commonjs",
     "dist",
-    "lib"
+    "lib",
+    "tailwind-preset.js"
   ],
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./commonjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./css/theme": "./dist/theme.css",
+    "./css/theme-dark": "./dist/theme-dark.css",
+    "./css/theme-all": "./dist/theme-all.css",
+    "./css/tailwind-preset": "./dist/tailwind-preset.css"
+  },
   "scripts": {
     "build": "yarn build:ts-declarations && tsx buildScript.ts",
     "build:ts-declarations": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:css": "tsx src/builders/buildCSS.ts",
     "clean": "rm -rf .turbo dist lib commonjs __flow__",
     "clean:modules": "rm -rf node_modules",
     "typecheck": "tsc --noEmit"
@@ -37,6 +51,14 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "tsc-alias": "^1.8.11"
   },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0 || >=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=18"
   }

package/tailwind-preset.js

@@ -0,0 +1,199 @@
+/**
+ * Seeds Design System — Tailwind CSS Preset
+ *
+ * Usage:
+ *   // tailwind.config.js
+ *   module.exports = {
+ *     presets: [require('@sproutsocial/seeds-react-theme/tailwind-preset')],
+ *     content: ['./src/**\/*.{html,ts,tsx,jsx}'],
+ *   };
+ *
+ * All values are sourced from Seeds token packages — no hardcoded values.
+ * Colors use static token values so dark mode is handled via Tailwind's
+ * built-in `dark:` variant (darkMode: 'class'). No runtime CSS variable
+ * dependency required for button/color tokens.
+ *
+ * Non-button tokens (app, container, text, form) still reference CSS custom
+ * properties and require loading theme-all.css for dark mode to work.
+ * These can be migrated to static token values + `dark:` classes over time.
+ */
+
+const COLORS = require("@sproutsocial/seeds-color");
+const SPACE = require("@sproutsocial/seeds-space");
+const BORDER = require("@sproutsocial/seeds-border");
+const TYPOGRAPHY = require("@sproutsocial/seeds-typography");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      // -----------------------------------------------------------------------
+      // Spacing — from @sproutsocial/seeds-space
+      // Usage: p-300, m-400, gap-500, w-600, etc.
+      // -----------------------------------------------------------------------
+      spacing: {
+        0: SPACE.SPACE_SIZE_0, // 0px
+        100: SPACE.SPACE_SIZE_100, // 2px
+        200: SPACE.SPACE_SIZE_200, // 4px
+        300: SPACE.SPACE_SIZE_300, // 8px
+        350: SPACE.SPACE_SIZE_350, // 12px
+        400: SPACE.SPACE_SIZE_400, // 16px
+        450: SPACE.SPACE_SIZE_450, // 24px
+        500: SPACE.SPACE_SIZE_500, // 32px
+        600: SPACE.SPACE_SIZE_600, // 40px
+      },
+
+      // -----------------------------------------------------------------------
+      // Border radius — from @sproutsocial/seeds-border
+      // Usage: rounded-400, rounded-500, rounded-pill, etc.
+      // -----------------------------------------------------------------------
+      // -----------------------------------------------------------------------
+      // Font size — from @sproutsocial/seeds-typography
+      // Usage: text-200, text-300, text-400, etc.
+      // -----------------------------------------------------------------------
+      fontSize: {
+        100: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_100.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_100.lineHeight },
+        ],
+        200: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_200.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_200.lineHeight },
+        ],
+        300: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_300.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_300.lineHeight },
+        ],
+        400: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_400.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_400.lineHeight },
+        ],
+        500: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_500.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_500.lineHeight },
+        ],
+        600: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_600.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_600.lineHeight },
+        ],
+        700: [
+          TYPOGRAPHY.TYPOGRAPHY_SIZE_700.fontSize,
+          { lineHeight: TYPOGRAPHY.TYPOGRAPHY_SIZE_700.lineHeight },
+        ],
+      },
+
+      borderRadius: {
+        400: BORDER.BORDER_RADIUS_400, // 4px
+        500: BORDER.BORDER_RADIUS_500, // 6px
+        600: BORDER.BORDER_RADIUS_600, // 8px
+        800: BORDER.BORDER_RADIUS_800, // 12px
+        900: BORDER.BORDER_RADIUS_900, // 24px
+        1000: BORDER.BORDER_RADIUS_1000, // 999999px
+        pill: "999999px",
+        inner: "4px",
+        outer: "8px",
+      },
+
+      colors: {
+        // ---------------------------------------------------------------------
+        // Button tokens — from @sproutsocial/seeds-color
+        //
+        // Light mode values used by default; dark mode via `dark:` variant:
+        //   <button class="bg-button-primary-bg-base dark:bg-button-primary-bg-base-dark">
+        // ---------------------------------------------------------------------
+
+        // Primary
+        "button-primary-bg-base": COLORS.COLOR_BLUE_700,
+        "button-primary-bg-hover": COLORS.COLOR_BLUE_800,
+        "button-primary-bg-active": COLORS.COLOR_BLUE_900,
+        "button-primary-text-base": COLORS.COLOR_NEUTRAL_0,
+        "button-primary-text-hover": COLORS.COLOR_NEUTRAL_0,
+        "button-primary-border-base": "transparent",
+        // dark
+        "button-primary-bg-base-dark": COLORS.COLOR_BLUE_400,
+        "button-primary-bg-hover-dark": COLORS.COLOR_BLUE_300,
+        "button-primary-bg-active-dark": COLORS.COLOR_BLUE_200,
+        "button-primary-text-base-dark": COLORS.COLOR_NEUTRAL_900,
+        "button-primary-text-hover-dark": COLORS.COLOR_NEUTRAL_1000,
+
+        // Secondary
+        "button-secondary-bg-base": "transparent",
+        "button-secondary-bg-hover": COLORS.COLOR_NEUTRAL_800,
+        "button-secondary-bg-active": COLORS.COLOR_NEUTRAL_900,
+        "button-secondary-text-base": COLORS.COLOR_NEUTRAL_800,
+        "button-secondary-text-hover": COLORS.COLOR_NEUTRAL_0,
+        "button-secondary-border-base": COLORS.COLOR_NEUTRAL_800,
+        // dark
+        "button-secondary-bg-hover-dark": COLORS.COLOR_NEUTRAL_100,
+        "button-secondary-bg-active-dark": COLORS.COLOR_NEUTRAL_0,
+        "button-secondary-text-base-dark": COLORS.COLOR_NEUTRAL_0,
+        "button-secondary-text-hover-dark": COLORS.COLOR_NEUTRAL_800,
+        "button-secondary-border-base-dark": COLORS.COLOR_NEUTRAL_0,
+
+        // Destructive
+        "button-destructive-bg-base": COLORS.COLOR_RED_800,
+        "button-destructive-bg-hover": COLORS.COLOR_RED_900,
+        "button-destructive-bg-active": COLORS.COLOR_RED_1000,
+        "button-destructive-text-base": COLORS.COLOR_NEUTRAL_0,
+        "button-destructive-text-hover": COLORS.COLOR_NEUTRAL_0,
+        "button-destructive-border-base": "transparent",
+        // dark
+        "button-destructive-bg-base-dark": COLORS.COLOR_RED_400,
+        "button-destructive-bg-hover-dark": COLORS.COLOR_RED_300,
+        "button-destructive-bg-active-dark": COLORS.COLOR_RED_200,
+        "button-destructive-text-base-dark": COLORS.COLOR_NEUTRAL_900,
+        "button-destructive-text-hover-dark": COLORS.COLOR_NEUTRAL_1000,
+
+        // Placeholder
+        "button-placeholder-bg-base": "transparent",
+        "button-placeholder-bg-hover": COLORS.COLOR_NEUTRAL_0,
+        "button-placeholder-bg-active": COLORS.COLOR_NEUTRAL_0,
+        "button-placeholder-text-base": COLORS.COLOR_BLUE_700,
+        "button-placeholder-text-hover": COLORS.COLOR_BLUE_800,
+        "button-placeholder-border-base": COLORS.COLOR_NEUTRAL_500,
+        // dark
+        "button-placeholder-bg-hover-dark": COLORS.COLOR_NEUTRAL_1100,
+        "button-placeholder-bg-active-dark": COLORS.COLOR_NEUTRAL_1100,
+        "button-placeholder-text-base-dark": COLORS.COLOR_BLUE_400,
+        "button-placeholder-text-hover-dark": COLORS.COLOR_BLUE_300,
+
+        // ---------------------------------------------------------------------
+        // Remaining tokens — CSS variable approach
+        //
+        // These reference CSS custom properties and require loading theme-all.css.
+        // Migrate to static token values + `dark:` classes over time.
+        // These are intentionally kept for now to compare the pros and cons
+        // ---------------------------------------------------------------------
+
+        // App
+        "app-bg-base": "var(--color-app-bg-base)",
+
+        // Container
+        "container-bg-base": "var(--color-container-bg-base)",
+        "container-bg-success": "var(--color-container-bg-success)",
+        "container-bg-warning": "var(--color-container-bg-warning)",
+        "container-bg-error": "var(--color-container-bg-error)",
+        "container-bg-info": "var(--color-container-bg-info)",
+        "container-bg-opportunity": "var(--color-container-bg-opportunity)",
+        "container-border-base": "var(--color-container-border-base)",
+        "container-border-success": "var(--color-container-border-success)",
+        "container-border-warning": "var(--color-container-border-warning)",
+        "container-border-error": "var(--color-container-border-error)",
+        "container-border-info": "var(--color-container-border-info)",
+        "container-border-opportunity":
+          "var(--color-container-border-opportunity)",
+
+        // Text
+        "text-body": "var(--color-text-body)",
+        "text-headline": "var(--color-text-headline)",
+        "text-subtext": "var(--color-text-subtext)",
+
+        // Form
+        "form-bg-base": "var(--color-form-bg-base)",
+        "form-border-base": "var(--color-form-border-base)",
+        "form-border-selected": "var(--color-form-border-selected)",
+        "form-placeholder-base": "var(--color-form-placeholder-base)",
+      },
+    },
+  },
+};