@blerp/design 1.3.16 → 1.4.1

package/dist/esm/neo-components/ThemeProvider.js

@@ -0,0 +1,718 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useMemo, useEffect, useContext, createContext } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Blerp Theme System
+ * Replaces MUI ThemeProvider with CSS variables and direct color access
+ */
+
+const ThemeContext = /*#__PURE__*/createContext({
+  mode: "light",
+  colors: {},
+  palette: {}
+});
+const DEFAULT_EXTENSION_COLORS = {
+  extensionColor1: {
+    light: "#ffffff",
+    main: "#ffffff",
+    dark: "#ffffff"
+  },
+  extensionColor2: {
+    light: "#E8E9EC",
+    main: "#E8E9EC",
+    dark: "#E8E9EC"
+  },
+  extensionColor3: {
+    light: "#D1D4DA",
+    main: "#D1D4DA",
+    dark: "#D1D4DA"
+  },
+  extensionColor4: {
+    light: "#B7BBC4",
+    main: "#B7BBC4",
+    dark: "#B7BBC4"
+  },
+  extensionColor5: {
+    light: "#9CA1AC",
+    main: "#9CA1AC",
+    dark: "#9CA1AC"
+  },
+  extensionColor6: {
+    light: "#5C616C",
+    main: "#5C616C",
+    dark: "#5C616C"
+  },
+  extensionColor6_5: {
+    light: "#3D3F43",
+    main: "#3D3F43",
+    dark: "#3D3F43"
+  },
+  extensionColor7: {
+    light: "#2C2E32",
+    main: "#2C2E32",
+    dark: "#2C2E32"
+  },
+  extensionColor8: {
+    light: "#25272B",
+    main: "#25272B",
+    dark: "#25272B"
+  },
+  extensionColor9: {
+    light: "#1A1B1E",
+    main: "#1A1B1E",
+    dark: "#1A1B1E"
+  },
+  extensionColor10: {
+    light: "#141518",
+    main: "#141518",
+    dark: "#141518"
+  }
+}; // Base colors from your colors.js
+
+const baseColors = {
+  white: "#ffffff",
+  waxing: "#F3F3F3",
+  waxwing: "#F3F3F3",
+  grey1: "#F0F2F2",
+  grey1Dark: "#F0F2F2",
+  grey2: "#1A1E1F",
+  grey2Dark: "#1A1E1F",
+  grey2LightReal: "#E2E6E7",
+  darkerWhite: "#E2E6E7",
+  grey2DarkReal: "#E2E6E7",
+  grey3: "#2C2E32",
+  grey3Dark: "#2C2E32",
+  grey4: "#8A9193",
+  grey4Dark: "#8A9193",
+  grey5: "#676F70",
+  grey5Dark: "#676F70",
+  grey6: "#474D4F",
+  grey6Dark: "#474D4F",
+  grey6LightReal: "#E2E6E7",
+  grey7LightReal: "#E2E6E7",
+  grey7: "#2C3233",
+  grey7Dark: "#2C3233",
+  grey8: "#1A1E1F",
+  grey8Dark: "#1A1E1F",
+  grey9: "#000000",
+  grey9Dark: "#050908",
+  notBlack: "#121212",
+  notBlackDark: "#1A1E1F",
+  black: "#000000",
+  discordGrey: "#2C3034",
+  secondaryButtonDarkGrey: "#21000C",
+  secondaryButtonGrey: "#8A8587",
+  thirdButtonGrey: "#BEBEBC",
+  ibisRed: "#FE295C",
+  starling: "#3507B4",
+  seafoam: "#0FEBC5",
+  buntingBlue: "#27AAFF",
+  popnYellow: "#FFD400"
+}; // Color definitions matching MUI palette structure
+
+const themeColors = {
+  light: _objectSpread(_objectSpread({
+    // Brand colors
+    pandaPink: "#FE295C",
+    pandaTeal: "#FE295C",
+    pandaNewTeal: "#49bea0",
+    darkTeal: "#058063",
+    // Semantic colors (MUI palette structure)
+    primary: {
+      light: baseColors.ibisRed,
+      main: baseColors.ibisRed,
+      dark: "#DB0F3F",
+      contrastText: "#fff"
+    },
+    secondary: {
+      light: baseColors.notBlack,
+      main: baseColors.notBlack,
+      dark: baseColors.notBlack,
+      contrastText: "#000"
+    },
+    ibisRed: {
+      main: baseColors.ibisRed,
+      light: baseColors.ibisRed,
+      real: baseColors.ibisRed,
+      dark: "#DB0F3F",
+      contrastText: "#FFFFFF"
+    },
+    notBlack: {
+      light: baseColors.notBlack,
+      main: baseColors.notBlack,
+      dark: baseColors.notBlack,
+      override: baseColors.notBlack,
+      contrastText: "#fff"
+    },
+    whiteOverride: {
+      light: baseColors.white,
+      main: baseColors.white,
+      real: baseColors.white,
+      dark: baseColors.white,
+      override: baseColors.white,
+      contrastText: "#fff"
+    },
+    white: {
+      real: baseColors.white,
+      light: baseColors.white,
+      main: baseColors.white,
+      dark: baseColors.white,
+      override: baseColors.white,
+      contrastText: "#fff"
+    },
+    neutral: {
+      main: "#64748B",
+      contrastText: "#fff"
+    },
+    darkerWhite: {
+      light: baseColors.grey2LightReal,
+      main: baseColors.grey2DarkReal,
+      dark: baseColors.notBlackDark,
+      override: baseColors.grey2DarkReal
+    },
+    success: {
+      main: "#49bea0",
+      light: "#7AD4BE",
+      dark: "#058063",
+      contrastText: "#FFFFFF"
+    },
+    error: {
+      main: "#DD1243",
+      light: "#FF5A7F",
+      dark: "#A00D31",
+      contrastText: "#FFFFFF"
+    },
+    warning: {
+      main: "#ff785b",
+      light: "#FFA08C",
+      dark: "#CC5F49",
+      contrastText: "#21000C"
+    },
+    info: {
+      main: "#27AAFF",
+      light: "#6BC4FF",
+      dark: "#0077CC",
+      contrastText: "#FFFFFF"
+    },
+    seafoam: {
+      light: baseColors.seafoam,
+      main: baseColors.seafoam,
+      dark: baseColors.seafoam,
+      contrastText: "#fff"
+    },
+    buntingBlue: {
+      light: baseColors.buntingBlue,
+      main: baseColors.buntingBlue,
+      dark: baseColors.buntingBlue,
+      contrastText: "#fff"
+    },
+    starling: {
+      light: baseColors.starling,
+      main: baseColors.starling,
+      dark: baseColors.starling,
+      contrastText: "#fff"
+    },
+    popnYellow: {
+      main: baseColors.popnYellow
+    },
+    // Grey scale
+    waxwing: {
+      main: baseColors.waxing,
+      override: baseColors.waxing,
+      real: baseColors.grey1
+    },
+    grey1: {
+      main: baseColors.grey1,
+      override: baseColors.grey1,
+      real: baseColors.grey1
+    },
+    grey2: {
+      main: baseColors.grey2,
+      override: baseColors.grey2LightReal,
+      real: baseColors.grey2LightReal
+    },
+    grey3: {
+      main: baseColors.grey3,
+      override: baseColors.grey3,
+      real: "#E6E6E6"
+    },
+    grey4: {
+      main: baseColors.grey4,
+      override: baseColors.grey4,
+      real: baseColors.grey4
+    },
+    grey5: {
+      main: baseColors.grey5,
+      override: baseColors.grey5,
+      real: baseColors.grey5
+    },
+    grey6: {
+      main: baseColors.grey6LightReal,
+      override: baseColors.grey6,
+      real: baseColors.grey6
+    },
+    grey7: {
+      main: baseColors.grey7LightReal,
+      override: baseColors.grey7,
+      real: baseColors.grey7
+    },
+    grey8: {
+      main: baseColors.grey8,
+      override: baseColors.grey8,
+      real: baseColors.grey8
+    },
+    grey9: {
+      main: baseColors.grey9,
+      override: baseColors.grey9,
+      real: baseColors.grey9
+    }
+  }, DEFAULT_EXTENSION_COLORS), {}, {
+    // Backgrounds
+    flyoutBackground: "#FFFFFF",
+    lighterBackground: "#F8F8F8",
+    defaultBackground: "#F3F3F3",
+    invertFlyoutBackground: "#170D11",
+    darkBackground: "#666",
+    actionBackground: "#E6E6E6",
+    headerBackground: "#47463F",
+    // Text colors
+    whiteText: "#FFFFFF",
+    primaryText: "#FFFFFF",
+    bodyText: "#21000C",
+    darkText: "#21000C",
+    headerText: "#21000C",
+    activeText: "#21000C",
+    secondaryText: "#47463F",
+    secondarySubtitleText: "#707070",
+    disabledText: "#BEBEBC",
+    placeholderText: "#BFBFBA",
+    headerColor: "#170D11",
+    // Grays
+    lighterGray: "#BDBDBB",
+    lightGray: "#BEBEBC",
+    secondaryGray: "#706F6B",
+    biteGray: "#707070",
+    blastZone: "#E1E1E1",
+    // Icons
+    iconsActive: "#21000C",
+    iconsInActive: "#47463F",
+    // Status
+    orangeStatus: "#ff785b",
+    darkRedStatus: "#dd1243",
+    statusColor: "#DD1243",
+    // Borders
+    borderColor: "#bebeb9",
+    inputBorderColor: "#bebeb9",
+    // Focus/Interactive
+    focusState: "#27AAFF",
+    focusOutline: "#3580B1",
+    darkBlue: "#3580B1",
+    // Other
+    togglerBackground: "#A04949",
+    slidePurple: "#262261",
+    // Darkscale colors
+    darkscale1: {
+      main: "#FFFFFF",
+      light: "#FFFFFF",
+      dark: "#FFFFFF",
+      contrastText: "#141518"
+    },
+    darkscale2: {
+      main: "#E8E9EC",
+      light: "#E8E9EC",
+      dark: "#E8E9EC",
+      contrastText: "#141518"
+    },
+    darkscale3: {
+      main: "#D1D4DA",
+      light: "#D1D4DA",
+      dark: "#D1D4DA",
+      contrastText: "#141518"
+    },
+    darkscale4: {
+      main: "#B7BBC4",
+      light: "#B7BBC4",
+      dark: "#B7BBC4",
+      contrastText: "#141518"
+    },
+    darkscale5: {
+      main: "#9CA1AC",
+      light: "#9CA1AC",
+      dark: "#9CA1AC",
+      contrastText: "#141518"
+    },
+    darkscale6: {
+      main: "#5C616C",
+      light: "#5C616C",
+      dark: "#5C616C",
+      contrastText: "#FFFFFF"
+    },
+    darkscale7: {
+      main: "#2C2E32",
+      light: "#2C2E32",
+      dark: "#2C2E32",
+      contrastText: "#FFFFFF"
+    },
+    darkscale8: {
+      main: "#25272B",
+      light: "#25272B",
+      dark: "#25272B",
+      contrastText: "#FFFFFF"
+    },
+    darkscale9: {
+      main: "#1A1B1E",
+      light: "#1A1B1E",
+      dark: "#1A1B1E",
+      contrastText: "#FFFFFF"
+    },
+    darkscale10: {
+      main: "#141518",
+      light: "#141518",
+      dark: "#141518",
+      contrastText: "#FFFFFF"
+    }
+  }),
+  dark: _objectSpread(_objectSpread({
+    // Brand colors (same)
+    pandaPink: "#FE295C",
+    pandaTeal: "#FE295C",
+    pandaNewTeal: "#49bea0",
+    darkTeal: "#058063",
+    // Semantic colors
+    primary: {
+      light: baseColors.ibisRed,
+      main: baseColors.ibisRed,
+      dark: baseColors.ibisRed,
+      contrastText: "#fff"
+    },
+    secondary: {
+      light: baseColors.notBlack,
+      main: baseColors.notBlack,
+      dark: baseColors.notBlack,
+      contrastText: "#000"
+    },
+    ibisRed: {
+      main: baseColors.ibisRed,
+      light: baseColors.ibisRed,
+      dark: baseColors.ibisRed,
+      contrastText: "#FFFFFF"
+    },
+    notBlack: {
+      light: baseColors.waxwing,
+      main: baseColors.waxwing,
+      dark: baseColors.waxwing,
+      override: baseColors.notBlack,
+      contrastText: "#000"
+    },
+    whiteOverride: {
+      light: baseColors.white,
+      main: baseColors.white,
+      dark: baseColors.white,
+      override: baseColors.white,
+      contrastText: "#fff"
+    },
+    white: {
+      light: "#000000",
+      main: "#000000",
+      dark: "#000000",
+      override: baseColors.white,
+      contrastText: "#fff"
+    },
+    black: {
+      main: "#ffffff",
+      contrastText: "#000"
+    },
+    neutral: {
+      main: "#64748B",
+      contrastText: "#fff"
+    },
+    lighterBlack: {
+      light: baseColors.grey2LightReal,
+      main: baseColors.grey2DarkReal,
+      dark: baseColors.notBlackDark,
+      override: baseColors.grey2DarkReal
+    },
+    success: {
+      main: "#49bea0",
+      light: "#7AD4BE",
+      dark: "#058063",
+      contrastText: "#FFFFFF"
+    },
+    error: {
+      main: "#DD1243",
+      light: "#FF5A7F",
+      dark: "#A00D31",
+      contrastText: "#FFFFFF"
+    },
+    warning: {
+      main: "#ff785b",
+      light: "#FFA08C",
+      dark: "#CC5F49",
+      contrastText: "#21000C"
+    },
+    info: {
+      main: "#27AAFF",
+      light: "#6BC4FF",
+      dark: "#0077CC",
+      contrastText: "#FFFFFF"
+    },
+    seafoam: {
+      light: baseColors.seafoam,
+      main: baseColors.seafoam,
+      dark: baseColors.seafoam,
+      contrastText: "#fff"
+    },
+    buntingBlue: {
+      light: baseColors.buntingBlue,
+      main: baseColors.buntingBlue,
+      dark: baseColors.buntingBlue,
+      contrastText: "#fff"
+    },
+    starling: {
+      light: baseColors.starling,
+      main: baseColors.starling,
+      dark: baseColors.starling,
+      contrastText: "#fff"
+    },
+    popnYellow: {
+      main: baseColors.popnYellow
+    },
+    // Grey scale (inverted)
+    waxwing: {
+      main: baseColors.notBlack,
+      override: baseColors.waxwing,
+      real: baseColors.grey1
+    },
+    grey1: {
+      main: baseColors.grey9Dark,
+      override: baseColors.grey1Dark,
+      real: baseColors.grey1
+    },
+    grey2: {
+      main: baseColors.grey8Dark,
+      override: baseColors.grey2DarkReal,
+      real: baseColors.grey2
+    },
+    grey3: {
+      main: baseColors.grey7Dark,
+      override: baseColors.grey3Dark,
+      real: "#E6E6E6"
+    },
+    grey4: {
+      main: baseColors.grey6Dark,
+      override: baseColors.grey4Dark,
+      real: baseColors.grey4
+    },
+    grey5: {
+      main: baseColors.grey5Dark,
+      override: baseColors.grey5Dark,
+      real: baseColors.grey5
+    },
+    grey6: {
+      main: baseColors.grey4Dark,
+      override: baseColors.grey6Dark,
+      real: baseColors.grey6
+    },
+    grey7: {
+      main: baseColors.grey3Dark,
+      override: baseColors.grey7Dark,
+      real: baseColors.grey7
+    },
+    grey8: {
+      main: baseColors.grey2Dark,
+      override: baseColors.grey8Dark,
+      real: baseColors.grey8
+    },
+    grey9: {
+      main: baseColors.grey1Dark,
+      override: baseColors.grey9Dark,
+      real: baseColors.grey9
+    }
+  }, DEFAULT_EXTENSION_COLORS), {}, {
+    // Backgrounds (inverted)
+    flyoutBackground: "#170D11",
+    lighterBackground: "#21000C",
+    defaultBackground: "#47463F",
+    invertFlyoutBackground: "#FFFFFF",
+    darkBackground: "#666",
+    actionBackground: "#706F6B",
+    headerBackground: "#47463F",
+    // Text colors (inverted)
+    whiteText: "#FFFFFF",
+    primaryText: "#FFFFFF",
+    bodyText: "#FFFFFF",
+    darkText: "#FFFFFF",
+    headerText: "#21000C",
+    activeText: "#21000C",
+    secondaryText: "#BDBDBB",
+    secondarySubtitleText: "#707070",
+    disabledText: "#BEBEBC",
+    placeholderText: "#BFBFBA",
+    headerColor: "#FFF",
+    // Grays (same)
+    lighterGray: "#BDBDBB",
+    lightGray: "#BEBEBC",
+    secondaryGray: "#706F6B",
+    biteGray: "#707070",
+    blastZone: "#E1E1E1",
+    // Icons
+    iconsActive: "#21000C",
+    iconsInActive: "#706F6B",
+    // Status (same)
+    orangeStatus: "#ff785b",
+    darkRedStatus: "#dd1243",
+    statusColor: "#DD1243",
+    // Borders (same)
+    borderColor: "#bebeb9",
+    inputBorderColor: "#bebeb9",
+    // Focus/Interactive
+    focusState: "#27AAFF",
+    focusOutline: "#27AAFF",
+    darkBlue: "#27AAFF",
+    // Other
+    togglerBackground: "#A04949",
+    slidePurple: "#262261",
+    // Darkscale colors
+    darkscale1: {
+      main: "#FFFFFF",
+      light: "#FFFFFF",
+      dark: "#FFFFFF",
+      contrastText: "#141518"
+    },
+    darkscale2: {
+      main: "#E8E9EC",
+      light: "#E8E9EC",
+      dark: "#E8E9EC",
+      contrastText: "#141518"
+    },
+    darkscale3: {
+      main: "#D1D4DA",
+      light: "#D1D4DA",
+      dark: "#D1D4DA",
+      contrastText: "#141518"
+    },
+    darkscale4: {
+      main: "#B7BBC4",
+      light: "#B7BBC4",
+      dark: "#B7BBC4",
+      contrastText: "#141518"
+    },
+    darkscale5: {
+      main: "#9CA1AC",
+      light: "#9CA1AC",
+      dark: "#9CA1AC",
+      contrastText: "#141518"
+    },
+    darkscale6: {
+      main: "#5C616C",
+      light: "#5C616C",
+      dark: "#5C616C",
+      contrastText: "#FFFFFF"
+    },
+    darkscale7: {
+      main: "#2C2E32",
+      light: "#2C2E32",
+      dark: "#2C2E32",
+      contrastText: "#FFFFFF"
+    },
+    darkscale8: {
+      main: "#25272B",
+      light: "#25272B",
+      dark: "#25272B",
+      contrastText: "#FFFFFF"
+    },
+    darkscale9: {
+      main: "#1A1B1E",
+      light: "#1A1B1E",
+      dark: "#1A1B1E",
+      contrastText: "#FFFFFF"
+    },
+    darkscale10: {
+      main: "#141518",
+      light: "#141518",
+      dark: "#141518",
+      contrastText: "#FFFFFF"
+    }
+  })
+};
+/**
+ * Generate CSS variables from theme colors
+ */
+
+function generateCSSVariables(colors) {
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  const vars = {};
+
+  for (const [key, value] of Object.entries(colors)) {
+    const varName = prefix ? "".concat(prefix, "-").concat(key) : key;
+
+    if (typeof value === "object" && value !== null) {
+      Object.assign(vars, generateCSSVariables(value, varName));
+    } else {
+      const cssVarName = "--".concat(varName.replace(/([A-Z])/g, "-$1").toLowerCase());
+      vars[cssVarName] = value;
+    }
+  }
+
+  return vars;
+}
+/**
+ * Apply CSS variables to an element
+ */
+
+
+function applyCSSVariables(element, colors) {
+  const vars = generateCSSVariables(colors);
+
+  for (const [varName, value] of Object.entries(vars)) {
+    element.style.setProperty(varName, value);
+  }
+}
+/**
+ * Root Theme Provider Component
+ * Use this at the top of your app
+ */
+
+
+function ThemeProvider(_ref) {
+  let {
+    children,
+    mode = "light",
+    customColors = {}
+  } = _ref;
+  const colors = useMemo(() => _objectSpread(_objectSpread({}, themeColors[mode]), customColors), [mode, customColors]);
+  useEffect(() => {
+    applyCSSVariables(document.documentElement, colors);
+    document.documentElement.setAttribute("data-theme", mode);
+  }, [mode, colors]);
+  const contextValue = useMemo(() => ({
+    mode,
+    colors,
+    palette: colors
+  }), [mode, colors]);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: contextValue
+  }, children);
+}
+/**
+ * Hook to access theme
+ */
+
+function useTheme() {
+  const context = useContext(ThemeContext); // Return a default if outside of provider (prevents crashes)
+
+  if (!context || !context.colors || Object.keys(context.colors).length === 0) {
+    return {
+      mode: "light",
+      colors: themeColors.light,
+      palette: themeColors.light
+    };
+  }
+
+  return context;
+}
+
+export { DEFAULT_EXTENSION_COLORS, ThemeProvider, ThemeProvider as default, themeColors, useTheme };