@sproutsocial/seeds-react-theme 3.6.2 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "3.6.2",
+  "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)",
+      },
+    },
+  },
+};