@carto/meridian-ds 4.4.0 → 4.4.1-alpha.024ee4e.329

package/dist/palette-utils-Cza0wkfu.cjs

@@ -0,0 +1,414 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const React = require("react");
+const system = require("@mui/system");
+const cartoColors = require("cartocolor");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const cartoColors__namespace = /* @__PURE__ */ _interopNamespaceDefault(cartoColors);
+const PALETTE_PATH = /^[a-z][a-zA-Z]*(\.[a-zA-Z0-9]+)+$/;
+function isPalettePath(color) {
+  return typeof color === "string" && PALETTE_PATH.test(color);
+}
+function mergeSx({
+  own,
+  consumer
+}) {
+  return [
+    ...own,
+    ...Array.isArray(consumer) ? consumer : [consumer]
+  ];
+}
+const FontWeight = {
+  regular: 400,
+  medium: 500,
+  strong: 600
+};
+function _Typography({
+  italic,
+  weight,
+  style,
+  color,
+  sx,
+  children,
+  ...otherProps
+}, ref) {
+  const fontConfiguration = {
+    fontWeight: FontWeight[weight],
+    fontStyle: italic ? "italic" : void 0
+  };
+  const usesPalettePath = isPalettePath(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Typography,
+    {
+      ...otherProps,
+      color: usesPalettePath ? void 0 : color,
+      sx: usesPalettePath ? mergeSx({ own: [{ color }], consumer: sx }) : sx,
+      ref,
+      style: {
+        ...fontConfiguration,
+        ...style
+      },
+      "data-name": "typography",
+      children
+    }
+  );
+}
+const Typography = React.forwardRef(_Typography);
+Typography.displayName = "Typography";
+const SPACING = 8;
+const BREAKPOINTS = {
+  XS: 320,
+  SM: 600,
+  MD: 960,
+  LG: 1280,
+  XL: 1600
+};
+const getSpacing = system.createSpacing(SPACING);
+const ICON_SIZE_SMALL = getSpacing(1.5);
+const ICON_SIZE_MEDIUM = getSpacing(2.25);
+const ICON_SIZE_LARGE = getSpacing(3);
+const APPBAR_SIZE = getSpacing(6);
+const NOTIFICATION_DURATION_IN_MS = 6e3;
+const MENU_LIST_MAX_SIZE = 312;
+const MENU_ITEM_SIZE_DENSE = 24;
+const MENU_ITEM_SIZE_DEFAULT = 32;
+const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_MIN_SIZE = 32;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
+const LIST_MAX_SIZE = 312;
+const LIST_OVERSCAN_ITEMS_COUNT = 5;
+const COLOR_BLACK = "#2C3032";
+const COLOR_WHITE = "#FFFFFF";
+const COLOR_UNUSED = "#e91e63";
+const baseColors = {
+  common: {
+    black: COLOR_BLACK,
+    white: COLOR_WHITE
+  },
+  neutral: {
+    50: "#f8f9f9",
+    100: "#e1e3e4",
+    200: "#cbcdcf",
+    300: "#b4b8ba",
+    400: "#9da2a6",
+    500: "#868d91",
+    600: "#6f777c",
+    700: "#595f63",
+    800: "#43474a",
+    900: COLOR_BLACK,
+    A100: "#ddddde",
+    A200: "#b9babb",
+    A400: "#7c7e7f",
+    A700: "#16191A"
+  },
+  blue: {
+    300: "#358BE7",
+    400: "#036FE2",
+    500: "#024D9E"
+  },
+  green: {
+    300: "#6BE2AD",
+    400: "#47DB99",
+    500: "#31996B"
+  },
+  purple: {
+    300: "#A36AE2",
+    400: "#8E46DB",
+    500: "#6E36A9"
+  },
+  lightGreen: {
+    300: "#8CB24A",
+    400: "#709F1D",
+    500: "#435F11"
+  },
+  indigo: {
+    300: "#34689F",
+    400: "#024388",
+    500: "#012C5A"
+  },
+  orange: {
+    300: "#F4B134",
+    400: "#F29E02",
+    500: "#A96E01"
+  },
+  red: {
+    300: "#CD593B",
+    400: "#C1300B",
+    500: "#872107"
+  },
+  qualitative: {
+    // CARTO colors
+    // TODO: Related discussion https://app.shortcut.com/cartoteam/story/264834/
+    bold: {
+      0: "#7F3C8D",
+      1: "#11A579",
+      2: "#3969AC",
+      3: "#F2B701",
+      4: "#E73F74",
+      5: "#80BA5A",
+      6: "#E68310",
+      7: "#008695",
+      8: "#CF1C90",
+      9: "#f97b72",
+      10: "#4b4b8f",
+      11: "#A5AA99"
+    }
+  },
+  shades: {
+    dark: {
+      90: material.alpha(COLOR_BLACK, 0.9),
+      60: material.alpha(COLOR_BLACK, 0.6),
+      40: material.alpha(COLOR_BLACK, 0.4),
+      25: material.alpha(COLOR_BLACK, 0.25),
+      12: material.alpha(COLOR_BLACK, 0.12),
+      8: material.alpha(COLOR_BLACK, 0.08),
+      4: material.alpha(COLOR_BLACK, 0.04)
+    },
+    light: {
+      90: material.alpha(COLOR_WHITE, 0.9),
+      60: material.alpha(COLOR_WHITE, 0.6),
+      40: material.alpha(COLOR_WHITE, 0.4),
+      25: material.alpha(COLOR_WHITE, 0.25),
+      12: material.alpha(COLOR_WHITE, 0.12),
+      8: material.alpha(COLOR_WHITE, 0.08),
+      4: material.alpha(COLOR_WHITE, 0.04)
+    }
+  }
+};
+const commonPalette = {
+  mode: "light",
+  contrastThreshold: 3,
+  tonalOffset: 0.2,
+  common: { ...baseColors.common },
+  primary: {
+    main: baseColors.blue[400],
+    dark: baseColors.blue[500],
+    light: baseColors.blue[300],
+    contrastText: baseColors.common.white,
+    background: material.alpha(baseColors.blue[400], 0.08),
+    relatedLight: "#EAF2FC",
+    relatedDark: COLOR_UNUSED
+  },
+  secondary: {
+    main: baseColors.green[400],
+    dark: baseColors.green[500],
+    light: baseColors.green[300],
+    contrastText: baseColors.common.black,
+    background: material.alpha(baseColors.green[400], 0.08),
+    relatedLight: "#EFFCF5",
+    relatedDark: COLOR_UNUSED
+  },
+  text: {
+    primary: baseColors.common.black,
+    secondary: material.alpha(COLOR_BLACK, 0.7),
+    disabled: baseColors.shades.dark[25],
+    hint: baseColors.shades.dark[40]
+  },
+  background: {
+    paper: baseColors.common.white,
+    default: baseColors.neutral[50]
+  },
+  action: {
+    active: baseColors.shades.dark[40],
+    hover: baseColors.shades.dark[8],
+    disabledBackground: baseColors.neutral[100],
+    disabled: baseColors.shades.dark[25],
+    selected: baseColors.shades.dark[12],
+    focus: baseColors.shades.dark[12],
+    activatedOpacity: 0.12,
+    hoverOpacity: 0.04,
+    selectedOpacity: 0.08,
+    disabledOpacity: 0.38,
+    focusOpacity: 0.12
+  },
+  info: {
+    main: baseColors.indigo[400],
+    dark: baseColors.indigo[500],
+    light: baseColors.indigo[300],
+    contrastText: baseColors.common.white,
+    relatedDark: "#0D2B4A",
+    relatedLight: "#E9EEF4",
+    background: COLOR_UNUSED
+  },
+  success: {
+    main: baseColors.lightGreen[400],
+    dark: baseColors.lightGreen[500],
+    light: baseColors.lightGreen[300],
+    contrastText: baseColors.common.white,
+    relatedDark: "#3D541A",
+    relatedLight: "#F2F5EB",
+    background: COLOR_UNUSED
+  },
+  warning: {
+    main: baseColors.orange[400],
+    dark: baseColors.orange[500],
+    light: baseColors.orange[300],
+    contrastText: baseColors.common.black,
+    relatedDark: "#78540F",
+    relatedLight: "#FEF6EA",
+    background: COLOR_UNUSED
+  },
+  error: {
+    main: baseColors.red[400],
+    light: baseColors.red[300],
+    dark: baseColors.red[500],
+    contrastText: baseColors.common.white,
+    relatedDark: "#622215",
+    relatedLight: "#F9EDEA",
+    background: COLOR_UNUSED
+  },
+  grey: {
+    ...baseColors.neutral
+  },
+  divider: baseColors.shades.dark[12],
+  // Custom common colors
+  default: {
+    main: baseColors.neutral[100],
+    dark: baseColors.neutral[200],
+    light: baseColors.neutral[50],
+    outlinedBorder: baseColors.shades.dark[25],
+    background: baseColors.shades.dark[4],
+    relatedLight: COLOR_UNUSED,
+    relatedDark: COLOR_UNUSED,
+    contrastText: COLOR_UNUSED
+  },
+  neutral: {
+    main: baseColors.neutral[100],
+    dark: baseColors.neutral[200],
+    light: baseColors.neutral[50],
+    background: baseColors.shades.dark[4],
+    relatedLight: COLOR_UNUSED,
+    relatedDark: COLOR_UNUSED,
+    contrastText: COLOR_UNUSED
+  },
+  tertiary: {
+    main: baseColors.purple[400],
+    dark: baseColors.purple[500],
+    light: baseColors.purple[300],
+    contrastText: baseColors.common.white,
+    background: material.alpha(baseColors.purple[400], 0.08),
+    relatedLight: "#F4ECFB",
+    relatedDark: COLOR_UNUSED
+  },
+  brand: {
+    navyBlue: "#162945",
+    locationRed: "#EB1510",
+    predictionBlue: "#1785FB",
+    softBlue: "#F2F6F9",
+    appBarMain: "#162945",
+    appBarContrastText: baseColors.common.white
+  },
+  white: {
+    ...baseColors.shades.light
+  },
+  black: {
+    ...baseColors.shades.dark
+  },
+  qualitative: {
+    ...baseColors.qualitative
+  }
+};
+function getPaletteFromCartoColors(name, domainSize) {
+  var _a;
+  const palette = cartoColors__namespace[name];
+  let paletteIndex = domainSize;
+  if (!palette) {
+    throw new Error(
+      `Palette "${name}" not found. Expected a CARTOColors string`
+    );
+  }
+  const palettesColorVariants = Object.keys(palette).filter((p) => p !== "tags").map(Number);
+  const longestPaletteIndex = Math.max(...palettesColorVariants);
+  const smallestPaletteIndex = Math.min(...palettesColorVariants);
+  if (!Number.isInteger(domainSize) || domainSize > longestPaletteIndex) {
+    paletteIndex = longestPaletteIndex;
+  } else if (domainSize < smallestPaletteIndex) {
+    paletteIndex = smallestPaletteIndex;
+  }
+  let colors = palette[paletteIndex];
+  if ((_a = palette.tags) == null ? void 0 : _a.includes("qualitative")) {
+    colors = colors == null ? void 0 : colors.slice(0, -1);
+  }
+  return colors;
+}
+function getPalette(colors, domainSize) {
+  if (typeof colors === "string") {
+    return getPaletteFromCartoColors(colors, domainSize);
+  } else {
+    return colors.map((c) => {
+      if (Array.isArray(c)) {
+        const [r, g, b] = c;
+        return rgbToHex(r, g, b);
+      } else {
+        return c;
+      }
+    });
+  }
+}
+function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+function getCartoColorStylePropsForItem(theme, index) {
+  var _a;
+  const palette = (_a = commonPalette == null ? void 0 : commonPalette.qualitative) == null ? void 0 : _a.bold;
+  const colors = Object.values(palette ?? {});
+  const chosenIndex = index % colors.length;
+  return {
+    backgroundColor: colors[chosenIndex],
+    color: theme.palette.getContrastText(colors[chosenIndex])
+  };
+}
+const resolvePalettePath = (theme, path, fallback) => {
+  const resolvedValue = path.split(".").reduce((acc, part) => {
+    if (acc && typeof acc === "object" && part in acc) {
+      return acc[part];
+    }
+    return void 0;
+  }, theme.palette);
+  if (typeof resolvedValue === "string") {
+    return resolvedValue;
+  }
+  return theme.palette.text.secondary;
+};
+exports.APPBAR_SIZE = APPBAR_SIZE;
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.FontWeight = FontWeight;
+exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
+exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
+exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
+exports.LIST_ITEM_MIN_SIZE = LIST_ITEM_MIN_SIZE;
+exports.LIST_ITEM_SIZE_DEFAULT = LIST_ITEM_SIZE_DEFAULT;
+exports.LIST_ITEM_SIZE_DENSE = LIST_ITEM_SIZE_DENSE;
+exports.LIST_MAX_SIZE = LIST_MAX_SIZE;
+exports.LIST_OVERSCAN_ITEMS_COUNT = LIST_OVERSCAN_ITEMS_COUNT;
+exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
+exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
+exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;
+exports.MENU_LIST_MAX_SIZE = MENU_LIST_MAX_SIZE;
+exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
+exports.SPACING = SPACING;
+exports.Typography = Typography;
+exports.commonPalette = commonPalette;
+exports.getCartoColorStylePropsForItem = getCartoColorStylePropsForItem;
+exports.getPalette = getPalette;
+exports.getSpacing = getSpacing;
+exports.isPalettePath = isPalettePath;
+exports.mergeSx = mergeSx;
+exports.resolvePalettePath = resolvePalettePath;