@sproutsocial/seeds-theme 0.1.0

package/dist/styled-components/index.js

@@ -0,0 +1,1641 @@
+function mergeTheme(base, override) {
+  if (!base || !override || typeof base !== "object" || typeof override !== "object" || Array.isArray(base) || Array.isArray(override)) {
+    return override;
+  }
+  const result = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    result[key] = key in base ? mergeTheme(base[key], value) : value;
+  }
+  return result;
+}
+
+const seedsLightTheme = {
+  breakpoints: Object.assign([
+    "900px",
+    "1200px",
+    "1500px",
+    "1800px"
+  ], {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px"
+  }),
+  colors: {
+    app: {
+      background: {
+        base: "#f3f4f4"
+      }
+    },
+    container: {
+      background: {
+        base: "#FFFFFF",
+        success: "#d7f4d7",
+        warning: "#fdefcd",
+        error: "#ffd5d2",
+        info: "#deebfe",
+        opportunity: "#eaeaf9",
+        danger: "#ffd5d2",
+        decorative: {
+          green: "#d7f4d7",
+          blue: "#deebfe",
+          purple: "#eaeaf9",
+          yellow: "#fdefcd",
+          orange: "#fcdccc",
+          red: "#ffd5d2",
+          neutral: "#f3f4f4",
+          magenta: "#f9e3fc",
+          pink: "#fcdbeb",
+          aqua: "#c5f9f9",
+          teal: "#cdf7ef"
+        },
+        selected: "#364141",
+        positive_sentiment: "#3876e3",
+        negative_sentiment: "#f76054",
+        neutral_sentiment: "#c8cccc",
+        ai_generated: "var(--color-container-bg-ai-generated)"
+      },
+      border: {
+        base: "#dee1e1",
+        success: "#59cb59",
+        warning: "#ffbc00",
+        error: "#ed4c42",
+        danger: "#ed4c42",
+        info: "#2b68d3",
+        opportunity: "#9180f4",
+        decorative: {
+          green: "#59cb59",
+          blue: "#2b68d3",
+          purple: "#9180f4",
+          yellow: "#ffbc00",
+          orange: "#f57d33",
+          red: "#ed4c42",
+          neutral: "#6e797a",
+          magenta: "#c44eb9",
+          pink: "#e0447c",
+          aqua: "#17b8ce",
+          teal: "#08c4b2"
+        },
+        selected: "#364141",
+        ai_generated: "#6f5ed3"
+      }
+    },
+    gradient: {
+      ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
+      "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%)",
+      "ai-stop-1": "#205bc3",
+      "ai-stop-2": "#9747ff",
+      "ai-stop-3": "#f282f5"
+    },
+    button: {
+      primary: {
+        background: {
+          base: "#205bc3",
+          hover: "#1150aa",
+          active: "#0c3f89"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: "#FFFFFF",
+          hover: "#FFFFFF"
+        }
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: "#364141",
+          active: "#273333"
+        },
+        border: {
+          base: "#364141"
+        },
+        text: {
+          base: "#364141",
+          hover: "#FFFFFF"
+        }
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: "#f3f4f4",
+          active: "#dee1e1"
+        },
+        border: {
+          base: "transparent",
+          hover: "#364141"
+        },
+        text: {
+          base: "#364141",
+          hover: "#273333"
+        }
+      },
+      destructive: {
+        background: {
+          base: "#c63434",
+          hover: "#992222",
+          active: "#6d1313"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: "#FFFFFF",
+          hover: "#FFFFFF"
+        }
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: "#FFFFFF",
+          active: "#FFFFFF"
+        },
+        border: {
+          base: "#929a9b"
+        },
+        text: {
+          base: "#205bc3",
+          hover: "#1150aa"
+        }
+      },
+      overlay: {
+        background: {
+          base: "color-mix(in srgb, #040404, transparent 40%)",
+          hover: "color-mix(in srgb, #040404, transparent 25%)"
+        },
+        text: {
+          base: "#FFFFFF"
+        }
+      },
+      unstyled: {
+        background: {
+          base: "transparent"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: "#515e5f",
+          hover: "#273333"
+        }
+      },
+      "ai-primary": {
+        background: {
+          base: "var(--color-gradient-ai)"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: "#FFFFFF",
+          hover: "#FFFFFF"
+        }
+      },
+      "ai-secondary": {
+        background: {
+          base: "var(--color-gradient-ai-subtle)"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: "#364141",
+          hover: "#364141"
+        }
+      },
+      "ai-outline": {
+        background: {
+          base: "transparent"
+        },
+        border: {
+          base: "var(--color-gradient-ai)"
+        },
+        text: {
+          base: "#364141",
+          hover: "#364141"
+        }
+      }
+    },
+    link: {
+      base: "#1150aa",
+      hover: "#0c3f89"
+    },
+    text: {
+      headline: "#273333",
+      subtext: "#515e5f",
+      body: "#364141",
+      inverse: "#FFFFFF",
+      error: "#992222",
+      background: {
+        highlight: "#ffe99a",
+        selection: "#a1c2f8"
+      },
+      decorative: {
+        green: "#006b40",
+        blue: "#0c3f89",
+        purple: "#5e4eba",
+        yellow: "#944c0c",
+        orange: "#962c0b",
+        red: "#992222",
+        neutral: "#273333",
+        magenta: "#6c2277",
+        pink: "#931847",
+        aqua: "#035e73",
+        teal: "#026661"
+      },
+      ai_generated: "#273333"
+    },
+    icon: {
+      base: "#364141",
+      inverse: "#FFFFFF",
+      success: "#006b40",
+      warning: "#944c0c",
+      error: "#992222",
+      danger: "#992222",
+      info: "#0c3f89",
+      opportunity: "#5e4eba",
+      applied: "#205bc3",
+      positive_sentiment: "#2b68d3",
+      negative_sentiment: "#ed4c42",
+      neutral_sentiment: "#6e797a"
+    },
+    form: {
+      background: {
+        base: "#FFFFFF",
+        selected: "#364141"
+      },
+      border: {
+        base: "#6e797a",
+        error: "#ed4c42",
+        warning: "#ffbc00",
+        selected: "#364141"
+      },
+      placeholder: {
+        base: "#515e5f"
+      }
+    },
+    listItem: {
+      background: {
+        base: "transparent",
+        hover: "#f3f4f4",
+        selected: "#364141",
+        active: "#b0b6b7"
+      },
+      border: {
+        base: "#6e797a"
+      }
+    },
+    menuItem: {
+      background: {
+        active: "#b0b6b7"
+      }
+    },
+    nav: {
+      navItem: {
+        text: {
+          base: "#FFFFFF"
+        },
+        icon: {
+          base: "#FFFFFF"
+        },
+        indicator: {
+          notification: {
+            base: "#e0447c"
+          },
+          userStatus: {
+            online: "#59cb59",
+            offline: "#ed4c42",
+            unavailable: "#364141"
+          }
+        },
+        background: {
+          base: "transparent",
+          hover: "#364141",
+          active: "#040404",
+          selected: "#515e5f"
+        },
+        border: {
+          hover: "#515e5f",
+          active: "#515e5f",
+          selected: "#515e5f"
+        }
+      }
+    },
+    overlay: {
+      background: {
+        base: "color-mix(in srgb, #162020, transparent 44%)",
+        inverse: "color-mix(in srgb, #FFFFFF, transparent 30%)"
+      },
+      text: {
+        base: "#FFFFFF"
+      },
+      icon: {
+        base: "#FFFFFF"
+      }
+    },
+    elevation: {
+      base: "#2733333D"
+    },
+    illustration: {
+      fill: "#679eff",
+      stroke: "#273333"
+    },
+    network: {
+      twitter: "#000000",
+      twitter_like: "#e0245e",
+      facebook: "#1877F2",
+      facebook_audience_network: "#58409B",
+      linkedin: "#0A66C2",
+      instagram: "#e4405f",
+      feedly: "#2bb24c",
+      analytics: "#ef6c00",
+      google_analytics_property: "#ef6c00",
+      youtube: "#ff0000",
+      messenger: "#000000",
+      snapchat: "#fffc00",
+      pinterest: "#E60023",
+      tumblr: "#35465c",
+      reddit: "#ff4500",
+      tripadvisor: "#00B087",
+      glassdoor: "#0CAA41",
+      google_ads: "#FBBC04",
+      google_my_business: "#4285F4",
+      google_business_messages: "#1A73EA",
+      google_play_store: "#01875F",
+      apple_app_store: "#17C8F5",
+      salesforce: "#1589EE",
+      zendesk: "#03363D",
+      hubspot: "#FF7A59",
+      microsoft_dynamics: "#002050",
+      yelp: "#FF1A1A",
+      whatsapp: "#59CE72",
+      tiktok: "#000000",
+      threads: "#000000",
+      trustpilot: "#04DA8D",
+      x: "#000000",
+      x_like: "#e0245e",
+      bluesky: "#1185FE",
+      bazaarvoice: "#002E6E"
+    },
+    dataviz: {
+      map: {
+        1: "#08c4b2",
+        2: "#6f5ed3",
+        3: "#ce3665",
+        4: "#ffcd1c",
+        5: "#3876e3",
+        6: "#db61db",
+        7: "#59cb59",
+        8: "#fc8943",
+        9: "#db3e3e",
+        10: "#026661",
+        11: "#a193f2",
+        12: "#931847",
+        13: "#944c0c",
+        14: "#0c3f89",
+        15: "#6c2277",
+        16: "#006b40",
+        17: "#962c0b",
+        18: "#ff7f6e",
+        19: "#0ca750",
+        20: "#ba7506"
+      },
+      list: [
+        "#08c4b2",
+        "#6f5ed3",
+        "#ce3665",
+        "#ffcd1c",
+        "#3876e3",
+        "#db61db",
+        "#59cb59",
+        "#fc8943",
+        "#db3e3e",
+        "#026661",
+        "#a193f2",
+        "#931847",
+        "#944c0c",
+        "#0c3f89",
+        "#6c2277",
+        "#006b40",
+        "#962c0b",
+        "#ff7f6e",
+        "#0ca750",
+        "#ba7506"
+      ],
+      placeholder: "#c8cccc"
+    },
+    userStatus: {
+      online: "#0ca750",
+      offline: "#ed4c42",
+      unavailable: "#6e797a"
+    },
+    neutral: {
+      0: "#FFFFFF",
+      100: "#f3f4f4",
+      200: "#dee1e1",
+      300: "#c8cccc",
+      400: "#b0b6b7",
+      500: "#929a9b",
+      600: "#6e797a",
+      700: "#515e5f",
+      800: "#364141",
+      900: "#273333",
+      950: "#1D2525",
+      1000: "#162020",
+      1100: "#040404"
+    },
+    green: {
+      0: "#ebf9eb",
+      100: "#d7f4d7",
+      200: "#c2f2bd",
+      300: "#98e58e",
+      400: "#75dd66",
+      500: "#59cb59",
+      600: "#2bb656",
+      700: "#0ca750",
+      800: "#008b46",
+      900: "#006b40",
+      1000: "#08422f",
+      1100: "#002b20"
+    },
+    red: {
+      0: "#ffeae9",
+      100: "#ffd5d2",
+      200: "#ffb8b1",
+      300: "#ff9c8f",
+      400: "#ff7f6e",
+      500: "#f76054",
+      600: "#ed4c42",
+      700: "#db3e3e",
+      800: "#c63434",
+      900: "#992222",
+      1000: "#6d1313",
+      1100: "#2b1111"
+    },
+    blue: {
+      0: "#e9f4ff",
+      100: "#deebfe",
+      200: "#c7dbf9",
+      300: "#a1c2f8",
+      400: "#679eff",
+      500: "#3876e3",
+      600: "#2b68d3",
+      700: "#205bc3",
+      800: "#1150aa",
+      900: "#0c3f89",
+      1000: "#0a2960",
+      1100: "#001738"
+    },
+    teal: {
+      0: "#e5f9f5",
+      50: "#CCF1EA",
+      100: "#cdf7ef",
+      200: "#b3f2e6",
+      300: "#7dead5",
+      400: "#24e0c5",
+      500: "#08c4b2",
+      600: "#00a99c",
+      700: "#0b968f",
+      800: "#067c7c",
+      900: "#026661",
+      1000: "#083f3f",
+      1100: "#002528"
+    },
+    aqua: {
+      0: "#d9fcfb",
+      100: "#c5f9f9",
+      200: "#a5f2f2",
+      300: "#76e5e2",
+      400: "#33d6e2",
+      500: "#17b8ce",
+      600: "#0797ae",
+      700: "#0b8599",
+      800: "#0f6e84",
+      900: "#035e73",
+      1000: "#083d4f",
+      1100: "#002838"
+    },
+    purple: {
+      0: "#f2f2f9",
+      100: "#eaeaf9",
+      200: "#d8d7f9",
+      300: "#c1c1f7",
+      400: "#a193f2",
+      500: "#9180f4",
+      600: "#816fea",
+      700: "#6f5ed3",
+      800: "#5e4eba",
+      900: "#483a9c",
+      1000: "#2d246b",
+      1100: "#1d1d38"
+    },
+    magenta: {
+      0: "#fef0ff",
+      100: "#f9e3fc",
+      200: "#f4c4f7",
+      300: "#edadf2",
+      350: "#EC9AF1",
+      400: "#f282f5",
+      500: "#db61db",
+      600: "#c44eb9",
+      700: "#ac44a8",
+      800: "#8f3896",
+      900: "#6c2277",
+      1000: "#451551",
+      1100: "#29192d"
+    },
+    yellow: {
+      0: "#fff8e2",
+      100: "#fdefcd",
+      200: "#ffe99a",
+      300: "#ffe16e",
+      400: "#ffd943",
+      500: "#ffcd1c",
+      600: "#ffbc00",
+      700: "#dd9903",
+      800: "#ba7506",
+      900: "#944c0c",
+      1000: "#542a00",
+      1100: "#2d1a05"
+    },
+    pink: {
+      0: "#ffe9f3",
+      100: "#fcdbeb",
+      200: "#ffb5d5",
+      300: "#ff95c1",
+      400: "#ff76ae",
+      500: "#ef588b",
+      600: "#e0447c",
+      700: "#ce3665",
+      800: "#b22f5b",
+      900: "#931847",
+      1000: "#561231",
+      1100: "#2b1721"
+    },
+    orange: {
+      0: "#ffede3",
+      100: "#fcdccc",
+      200: "#ffc6a4",
+      300: "#ffb180",
+      400: "#ff9c5d",
+      500: "#fc8943",
+      600: "#f57d33",
+      700: "#ed7024",
+      800: "#ce5511",
+      900: "#962c0b",
+      1000: "#601700",
+      1100: "#2d130e"
+    },
+    DATAVIZ_COLORS_LIST: [
+      "#08c4b2",
+      "#6f5ed3",
+      "#ce3665",
+      "#ffcd1c",
+      "#3876e3",
+      "#db61db",
+      "#59cb59",
+      "#fc8943",
+      "#db3e3e",
+      "#026661",
+      "#a193f2",
+      "#931847",
+      "#944c0c",
+      "#0c3f89",
+      "#6c2277",
+      "#006b40",
+      "#962c0b",
+      "#ff7f6e",
+      "#0ca750",
+      "#ba7506"
+    ],
+    DATAVIZ_COLORS_MAP: {
+      1: "#08c4b2",
+      2: "#6f5ed3",
+      3: "#ce3665",
+      4: "#ffcd1c",
+      5: "#3876e3",
+      6: "#db61db",
+      7: "#59cb59",
+      8: "#fc8943",
+      9: "#db3e3e",
+      10: "#026661",
+      11: "#a193f2",
+      12: "#931847",
+      13: "#944c0c",
+      14: "#0c3f89",
+      15: "#6c2277",
+      16: "#006b40",
+      17: "#962c0b",
+      18: "#ff7f6e",
+      19: "#0ca750",
+      20: "#ba7506"
+    },
+    PLACEHOLDER: "#c8cccc"
+  },
+  typography: {
+    100: {
+      fontSize: "11px",
+      lineHeight: "18.666666666666668px"
+    },
+    200: {
+      fontSize: "13px",
+      lineHeight: "21.333333333333332px"
+    },
+    300: {
+      fontSize: "16px",
+      lineHeight: "24px"
+    },
+    400: {
+      fontSize: "18px",
+      lineHeight: "26.666666666666668px"
+    },
+    500: {
+      fontSize: "21px",
+      lineHeight: "29.333333333333332px"
+    },
+    600: {
+      fontSize: "24px",
+      lineHeight: "32px"
+    },
+    700: {
+      fontSize: "32px",
+      lineHeight: "40px"
+    },
+    800: {
+      fontSize: "43px",
+      lineHeight: "50.666666666666664px"
+    },
+    900: {
+      fontSize: "57px",
+      lineHeight: "64px"
+    },
+    1000: {
+      fontSize: "76px",
+      lineHeight: "80px"
+    },
+    1100: {
+      fontSize: "101px",
+      lineHeight: "101.33333333333333px"
+    },
+    1200: {
+      fontSize: "135px",
+      lineHeight: "125.33333333333333px"
+    },
+    typography: {
+      100: {
+        fontSize: "11px",
+        lineHeight: "18.666666666666668px"
+      },
+      200: {
+        fontSize: "13px",
+        lineHeight: "21.333333333333332px"
+      },
+      300: {
+        fontSize: "16px",
+        lineHeight: "24px"
+      },
+      400: {
+        fontSize: "18px",
+        lineHeight: "26.666666666666668px"
+      },
+      500: {
+        fontSize: "21px",
+        lineHeight: "29.333333333333332px"
+      },
+      600: {
+        fontSize: "24px",
+        lineHeight: "32px"
+      },
+      700: {
+        fontSize: "32px",
+        lineHeight: "40px"
+      },
+      800: {
+        fontSize: "43px",
+        lineHeight: "50.666666666666664px"
+      },
+      900: {
+        fontSize: "57px",
+        lineHeight: "64px"
+      },
+      1000: {
+        fontSize: "76px",
+        lineHeight: "80px"
+      },
+      1100: {
+        fontSize: "101px",
+        lineHeight: "101.33333333333333px"
+      },
+      1200: {
+        fontSize: "135px",
+        lineHeight: "125.33333333333333px"
+      }
+    }
+  },
+  fontSizes: {
+    100: "11px",
+    200: "13px",
+    300: "16px",
+    400: "18px",
+    500: "21px",
+    600: "24px",
+    700: "32px",
+    800: "43px",
+    900: "57px",
+    1000: "76px",
+    1100: "101px",
+    1200: "135px"
+  },
+  lineHeights: {
+    100: "18.666666666666668px",
+    200: "21.333333333333332px",
+    300: "24px",
+    400: "26.666666666666668px",
+    500: "29.333333333333332px",
+    600: "32px",
+    700: "40px",
+    800: "50.666666666666664px",
+    900: "64px",
+    1000: "80px",
+    1100: "101.33333333333333px",
+    1200: "125.33333333333333px"
+  },
+  fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
+  fontWeights: {
+    normal: "400",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800"
+  },
+  space: {
+    0: "0px",
+    100: "2px",
+    200: "4px",
+    300: "8px",
+    350: "12px",
+    400: "16px",
+    450: "24px",
+    500: "32px",
+    600: "40px",
+    space: {
+      0: "0px",
+      100: "2px",
+      200: "4px",
+      300: "8px",
+      350: "12px",
+      400: "16px",
+      450: "24px",
+      500: "32px",
+      600: "40px"
+    },
+    "-space": {
+      0: "-0px",
+      100: "-2px",
+      200: "-4px",
+      300: "-8px",
+      350: "-12px",
+      400: "-16px",
+      450: "-24px",
+      500: "-32px",
+      600: "-40px"
+    }
+  },
+  radii: {
+    400: "4px",
+    500: "6px",
+    600: "8px",
+    800: "12px",
+    900: "24px",
+    1000: "999999px",
+    inner: "6px",
+    outer: "8px",
+    pill: "999999px",
+    radii: {
+      400: "4px",
+      500: "6px",
+      600: "8px",
+      800: "12px",
+      900: "24px",
+      1000: "999999px",
+      inner: "6px",
+      outer: "8px",
+      pill: "999999px"
+    }
+  },
+  borders: {
+    500: "1px solid",
+    600: "2px solid",
+    700: "3px solid"
+  },
+  borderWidths: {
+    500: "1px",
+    600: "2px",
+    700: "3px"
+  },
+  shadows: {
+    low: "0px 2px 4px var(--color-elevation-base)",
+    medium: "0px 8px 16px var(--color-elevation-base)",
+    high: "0px 16px 32px var(--color-elevation-base)"
+  },
+  easing: {
+    ease_in: "cubic-bezier(.4, 0, .7, .2)",
+    ease_out: "cubic-bezier(0, 0, .2, 1)",
+    ease_inout: "cubic-bezier(.4, 0, .2, 1)"
+  },
+  duration: {
+    fast: ".15s",
+    medium: ".3s",
+    slow: ".6s"
+  },
+  mode: "light"
+};
+
+const sproutLightTheme = mergeTheme(seedsLightTheme, {
+  colors: {
+    ai: {
+      feature: {
+        decorative: {
+          primary: "#067c7c",
+          secondary: "#0c3f89"
+        },
+        background: {
+          primary: "#067c7c",
+          secondary: "#0c3f89",
+          default: {
+            primary: "#067c7c",
+            secondary: "#0c3f89"
+          },
+          inverse: {
+            primary: "#cdf7ef",
+            secondary: "#c7dbf9"
+          }
+        }
+      }
+    },
+    navigation: {
+      main: {
+        background: {
+          base: "#273333",
+          overflowGradient: "#162020"
+        },
+        border: {
+          base: "#162020"
+        }
+      },
+      secondary: {
+        background: {
+          base: "#364141"
+        },
+        widget: {
+          background: {
+            base: "#162020"
+          }
+        },
+        accordion: {
+          background: {
+            base: "#273333"
+          }
+        }
+      },
+      settings: {
+        listItem: {
+          background: {
+            base: "transparent",
+            hover: "#dee1e1",
+            selected: "#FFFFFF"
+          }
+        }
+      },
+      text: {
+        base: "#FFFFFF",
+        hover: "#FFFFFF"
+      },
+      icon: {
+        base: "#FFFFFF",
+        hover: "#FFFFFF"
+      },
+      listItem: {
+        background: {
+          base: "#364141",
+          hover: "#162020",
+          selected: "#515e5f"
+        }
+      }
+    },
+    datePicker: {
+      comparison: {
+        background: {
+          base: "#b0b6b7"
+        },
+        text: {
+          base: "#364141"
+        }
+      }
+    },
+    analytics: {
+      trend: {
+        positive: "#067c7c",
+        neutral: "#364141",
+        negative: "#364141"
+      },
+      overlay: {
+        background: {
+          base: "color-mix(in srgb, #FFFFFF, transparent 20%)"
+        }
+      }
+    },
+    listening: {
+      chart: {
+        indicator: {
+          default: {
+            primary: "#b0b6b7",
+            secondary: "#FFFFFF"
+          },
+          hover: {
+            primary: "#162020",
+            secondary: "#FFFFFF"
+          }
+        },
+        spike: {
+          background: {
+            base: "#08c4b2"
+          },
+          icon: {
+            base: "#FFFFFF"
+          }
+        }
+      },
+      topicTypes: {
+        customTopic: "#679eff",
+        brandHealth: "#ff7f6e",
+        industryInsights: "#75dd66",
+        competitiveAnalysis: "#ffd943",
+        campaignAnalysis: "#f282f5",
+        eventMonitoring: "#33d6e2",
+        featuredTopic: "#75dd66"
+      },
+      worldMap: {
+        empty: "#dee1e1",
+        q0: "#d8d7f9",
+        q1: "#c1c1f7",
+        q2: "#a193f2",
+        q3: "#9180f4",
+        q4: "#816fea",
+        q5: "#6f5ed3",
+        q6: "#5e4eba",
+        q7: "#483a9c"
+      }
+    },
+    growth: {
+      carousel: {
+        indicator: {
+          active: "#2b68d3",
+          inactive: "#c8cccc"
+        }
+      },
+      education: {
+        decorative: {
+          aqua: "#0797ae",
+          teal: "#0b968f"
+        }
+      },
+      opportunity: {
+        background: {
+          base: "#6f5ed3",
+          secondary: "#273333",
+          hover: "#c1c1f7"
+        },
+        button: {
+          primary: {
+            base: "#6f5ed3",
+            hover: "#5e4eba"
+          }
+        },
+        badge: {
+          background: {
+            base: "#d8d7f9",
+            active: "#5e4eba"
+          },
+          icon: {
+            base: "#6f5ed3",
+            active: "#eaeaf9"
+          },
+          text: {
+            base: "#6f5ed3"
+          }
+        },
+        decorative: {
+          green: "#0ca750",
+          lightAqua: "#0797ae",
+          darkAqua: "#002838",
+          purple: "#6f5ed3"
+        }
+      },
+      featuredDemo: {
+        background: {
+          primary: {
+            base: "#205bc3",
+            hover: "#0c3f89"
+          },
+          secondary: {
+            base: "#5e4eba",
+            hover: "#5e4eba"
+          }
+        }
+      },
+      darkModal: {
+        background: {
+          base: "#002838"
+        },
+        text: {
+          base: "#FFFFFF"
+        },
+        cards: {
+          background: {
+            base: "#FFFFFF",
+            hover: "#eaeaf9"
+          },
+          text: {
+            base: "#364141",
+            hover: "#273333"
+          },
+          border: {
+            base: "#FFFFFF",
+            hover: "#6f5ed3"
+          }
+        }
+      },
+      user: {
+        status: {
+          online: "#0ca750"
+        }
+      }
+    },
+    cardControl: {
+      background: {
+        base: "#FFFFFF",
+        selected: "#364141",
+        hover: "#f3f4f4"
+      },
+      text: {
+        selected: "#FFFFFF"
+      }
+    },
+    tags: {
+      collections: {
+        background: {
+          base: "#f3f4f4"
+        }
+      }
+    }
+  }
+});
+
+const seedsDarkTheme = mergeTheme(seedsLightTheme, {
+  colors: {
+    app: {
+      background: {
+        base: "#162020"
+      }
+    },
+    container: {
+      background: {
+        base: "#273333",
+        success: "#006b40",
+        warning: "#944c0c",
+        error: "#992222",
+        info: "#0c3f89",
+        opportunity: "#483a9c",
+        danger: "#992222",
+        decorative: {
+          green: "#006b40",
+          blue: "#0c3f89",
+          purple: "#483a9c",
+          yellow: "#944c0c",
+          orange: "#962c0b",
+          red: "#992222",
+          neutral: "#162020",
+          magenta: "#6c2277",
+          pink: "#931847",
+          aqua: "#035e73",
+          teal: "#026661"
+        },
+        selected: "#FFFFFF"
+      },
+      border: {
+        base: "#040404",
+        selected: "#FFFFFF"
+      }
+    },
+    gradient: {
+      ai: "radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%)",
+      "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)",
+      "ai-stop-1": "#679eff",
+      "ai-stop-2": "#b984ff"
+    },
+    button: {
+      primary: {
+        background: {
+          base: "#679eff",
+          hover: "#a1c2f8",
+          active: "#c7dbf9"
+        },
+        text: {
+          base: "#273333",
+          hover: "#162020"
+        }
+      },
+      secondary: {
+        background: {
+          hover: "#f3f4f4",
+          active: "#FFFFFF"
+        },
+        border: {
+          base: "#FFFFFF"
+        },
+        text: {
+          base: "#FFFFFF",
+          hover: "#364141"
+        }
+      },
+      pill: {
+        background: {
+          hover: "#162020",
+          active: "#273333"
+        },
+        border: {
+          hover: "#FFFFFF"
+        },
+        text: {
+          base: "#f3f4f4",
+          hover: "#FFFFFF"
+        }
+      },
+      destructive: {
+        background: {
+          base: "#ff7f6e",
+          hover: "#ff9c8f",
+          active: "#ffb8b1"
+        },
+        text: {
+          base: "#273333",
+          hover: "#162020"
+        }
+      },
+      placeholder: {
+        background: {
+          hover: "#040404",
+          active: "#040404"
+        },
+        text: {
+          base: "#679eff",
+          hover: "#a1c2f8"
+        }
+      },
+      overlay: {
+        background: {
+          base: "color-mix(in srgb, #FFFFFF, transparent 40%)",
+          hover: "color-mix(in srgb, #FFFFFF, transparent 25%)"
+        },
+        text: {
+          base: "#162020"
+        }
+      },
+      unstyled: {
+        text: {
+          base: "#c8cccc",
+          hover: "#dee1e1"
+        }
+      },
+      "ai-secondary": {
+        text: {
+          base: "#f3f4f4",
+          hover: "#f3f4f4"
+        }
+      },
+      "ai-outline": {
+        text: {
+          base: "#f3f4f4",
+          hover: "#f3f4f4"
+        }
+      }
+    },
+    link: {
+      base: "#679eff",
+      hover: "#a1c2f8"
+    },
+    text: {
+      headline: "#FFFFFF",
+      subtext: "#dee1e1",
+      body: "#f3f4f4",
+      inverse: "#273333",
+      error: "#ffd5d2",
+      background: {
+        highlight: "#944c0c",
+        selection: "#1150aa"
+      },
+      decorative: {
+        green: "#d7f4d7",
+        blue: "#deebfe",
+        purple: "#eaeaf9",
+        yellow: "#fdefcd",
+        orange: "#fcdccc",
+        red: "#ffd5d2",
+        neutral: "#f3f4f4",
+        magenta: "#f9e3fc",
+        pink: "#fcdbeb",
+        aqua: "#c5f9f9",
+        teal: "#cdf7ef"
+      },
+      ai_generated: "#FFFFFF"
+    },
+    icon: {
+      base: "#f3f4f4",
+      inverse: "#273333",
+      success: "#d7f4d7",
+      warning: "#fdefcd",
+      error: "#ffd5d2",
+      danger: "#ffd5d2",
+      info: "#deebfe",
+      opportunity: "#eaeaf9",
+      applied: "#679eff",
+      neutral_sentiment: "#929a9b"
+    },
+    form: {
+      background: {
+        base: "#273333",
+        selected: "#FFFFFF"
+      },
+      border: {
+        base: "#929a9b",
+        selected: "#FFFFFF"
+      },
+      placeholder: {
+        base: "#929a9b"
+      }
+    },
+    listItem: {
+      background: {
+        hover: "#364141",
+        selected: "#FFFFFF",
+        active: "#FFFFFF"
+      }
+    },
+    menuItem: {
+      background: {
+        active: "#515e5f"
+      }
+    },
+    overlay: {
+      background: {
+        base: "color-mix(in srgb, #162020, transparent 28%)",
+        inverse: "color-mix(in srgb, #040404, transparent 30%)"
+      }
+    },
+    elevation: {
+      base: "#040404FF"
+    },
+    illustration: {
+      stroke: "#f3f4f4"
+    },
+    dataviz: {
+      map: {
+        1: "#24e0c5",
+        2: "#a193f2",
+        3: "#ff76ae",
+        5: "#679eff",
+        6: "#f282f5",
+        7: "#75dd66",
+        8: "#ff9c5d",
+        10: "#0b968f",
+        11: "#6f5ed3",
+        12: "#ce3665",
+        13: "#ba7506",
+        14: "#205bc3",
+        15: "#ac44a8",
+        16: "#0ca750",
+        17: "#ed7024",
+        19: "#c2f2bd",
+        20: "#ffe99a"
+      },
+      list: [
+        "#24e0c5",
+        "#a193f2",
+        "#ff76ae",
+        "#ffcd1c",
+        "#679eff",
+        "#f282f5",
+        "#75dd66",
+        "#ff9c5d",
+        "#db3e3e",
+        "#0b968f",
+        "#6f5ed3",
+        "#ce3665",
+        "#ba7506",
+        "#205bc3",
+        "#ac44a8",
+        "#0ca750",
+        "#ed7024",
+        "#ff7f6e",
+        "#c2f2bd",
+        "#ffe99a"
+      ],
+      placeholder: "#364141"
+    },
+    userStatus: {
+      online: "#59cb59",
+      offline: "#f76054",
+      unavailable: "#929a9b"
+    },
+    DATAVIZ_COLORS_LIST: [
+      "#24e0c5",
+      "#a193f2",
+      "#ff76ae",
+      "#ffcd1c",
+      "#679eff",
+      "#f282f5",
+      "#75dd66",
+      "#ff9c5d",
+      "#db3e3e",
+      "#0b968f",
+      "#6f5ed3",
+      "#ce3665",
+      "#ba7506",
+      "#205bc3",
+      "#ac44a8",
+      "#0ca750",
+      "#ed7024",
+      "#ff7f6e",
+      "#c2f2bd",
+      "#ffe99a"
+    ],
+    DATAVIZ_COLORS_MAP: {
+      1: "#24e0c5",
+      2: "#a193f2",
+      3: "#ff76ae",
+      5: "#679eff",
+      6: "#f282f5",
+      7: "#75dd66",
+      8: "#ff9c5d",
+      10: "#0b968f",
+      11: "#6f5ed3",
+      12: "#ce3665",
+      13: "#ba7506",
+      14: "#205bc3",
+      15: "#ac44a8",
+      16: "#0ca750",
+      17: "#ed7024",
+      19: "#c2f2bd",
+      20: "#ffe99a"
+    },
+    PLACEHOLDER: "#364141"
+  },
+  mode: "dark"
+});
+
+const sproutDarkTheme = mergeTheme(seedsDarkTheme, {
+  colors: {
+    ai: {
+      feature: {
+        decorative: {
+          primary: "#067c7c",
+          secondary: "#0c3f89"
+        },
+        background: {
+          primary: "#cdf7ef",
+          secondary: "#c7dbf9",
+          default: {
+            primary: "#cdf7ef",
+            secondary: "#c7dbf9"
+          },
+          inverse: {
+            primary: "#067c7c",
+            secondary: "#0c3f89"
+          }
+        }
+      }
+    },
+    navigation: {
+      main: {
+        background: {
+          base: "#162020",
+          overflowGradient: "#040404"
+        },
+        border: {
+          base: "#040404"
+        }
+      },
+      secondary: {
+        background: {
+          base: "#273333"
+        },
+        widget: {
+          background: {
+            base: "#364141"
+          }
+        },
+        accordion: {
+          background: {
+            base: "#162020A3"
+          }
+        }
+      },
+      settings: {
+        listItem: {
+          background: {
+            base: "transparent",
+            hover: "#040404",
+            selected: "#364141"
+          }
+        }
+      },
+      text: {
+        base: "#FFFFFF",
+        hover: "#FFFFFF"
+      },
+      icon: {
+        base: "#FFFFFF",
+        hover: "#FFFFFF"
+      },
+      listItem: {
+        background: {
+          base: "#162020",
+          hover: "#040404",
+          selected: "#515e5f"
+        }
+      }
+    },
+    datePicker: {
+      comparison: {
+        background: {
+          base: "#b0b6b7"
+        },
+        text: {
+          base: "#364141"
+        }
+      }
+    },
+    analytics: {
+      trend: {
+        positive: "#08c4b2",
+        neutral: "#f3f4f4",
+        negative: "#f3f4f4"
+      },
+      overlay: {
+        background: {
+          base: "color-mix(in srgb, #273333, transparent 20%)"
+        }
+      }
+    },
+    listening: {
+      chart: {
+        indicator: {
+          default: {
+            primary: "#f3f4f4",
+            secondary: "#273333"
+          },
+          hover: {
+            primary: "#c8cccc",
+            secondary: "#FFFFFF"
+          }
+        },
+        spike: {
+          background: {
+            base: "#08c4b2"
+          },
+          icon: {
+            base: "#FFFFFF"
+          }
+        }
+      },
+      topicTypes: {
+        customTopic: "#24e0c5",
+        brandHealth: "#ff7f6e",
+        industryInsights: "#75dd66",
+        competitiveAnalysis: "#ffd943",
+        campaignAnalysis: "#f282f5",
+        eventMonitoring: "#33d6e2",
+        featuredTopic: "#75dd66"
+      },
+      worldMap: {
+        empty: "#dee1e1",
+        q0: "#d8d7f9",
+        q1: "#c1c1f7",
+        q2: "#a193f2",
+        q3: "#9180f4",
+        q4: "#816fea",
+        q5: "#6f5ed3",
+        q6: "#5e4eba",
+        q7: "#483a9c"
+      }
+    },
+    growth: {
+      carousel: {
+        indicator: {
+          active: "#2b68d3",
+          inactive: "#c8cccc"
+        }
+      },
+      education: {
+        decorative: {
+          aqua: "#0797ae",
+          teal: "#08c4b2"
+        }
+      },
+      opportunity: {
+        background: {
+          base: "#6f5ed3",
+          secondary: "#515e5f",
+          hover: "#9180f4"
+        },
+        button: {
+          primary: {
+            base: "#a193f2",
+            hover: "#c1c1f7"
+          }
+        },
+        badge: {
+          background: {
+            base: "#6f5ed3",
+            active: "#eaeaf9"
+          },
+          icon: {
+            base: "#d8d7f9",
+            active: "#5e4eba"
+          },
+          text: {
+            base: "#d8d7f9"
+          }
+        },
+        decorative: {
+          green: "#0ca750",
+          lightAqua: "#0797ae",
+          darkAqua: "#002838",
+          purple: "#6f5ed3"
+        }
+      },
+      featuredDemo: {
+        background: {
+          primary: {
+            base: "#679eff",
+            hover: "#deebfe"
+          },
+          secondary: {
+            base: "#9180f4",
+            hover: "#eaeaf9"
+          }
+        }
+      },
+      darkModal: {
+        background: {
+          base: "#002838"
+        },
+        text: {
+          base: "#FFFFFF"
+        },
+        cards: {
+          background: {
+            base: "#FFFFFF",
+            hover: "#eaeaf9"
+          },
+          text: {
+            base: "#364141",
+            hover: "#273333"
+          },
+          border: {
+            base: "#FFFFFF",
+            hover: "#6f5ed3"
+          }
+        }
+      },
+      user: {
+        status: {
+          online: "#0ca750"
+        }
+      }
+    },
+    cardControl: {
+      background: {
+        base: "#273333",
+        selected: "#515e5f",
+        hover: "#364141"
+      },
+      text: {
+        selected: "#f3f4f4"
+      }
+    },
+    tags: {
+      collections: {
+        background: {
+          base: "#364141"
+        }
+      }
+    }
+  }
+});
+
+const theme = seedsLightTheme;
+const darkTheme = seedsDarkTheme;
+
+export { seedsLightTheme, sproutLightTheme, seedsDarkTheme, sproutDarkTheme, theme, darkTheme };