@m4l/graphics 0.1.7 → 0.1.8

package/theme/palette.js

@@ -1,133 +0,0 @@
-import { alpha } from "@mui/material/styles";
-function createGradient(color1, color2) {
-  return `linear-gradient(to bottom, ${color1}, ${color2})`;
-}
-const PRIMARY = {
-  lighter: "#C8FACD",
-  light: "#5BE584",
-  main: "#00AB55",
-  dark: "#007B55",
-  darker: "#005249"
-};
-const SECONDARY = {
-  lighter: "#D6E4FF",
-  light: "#84A9FF",
-  main: "#3366FF",
-  dark: "#1939B7",
-  darker: "#091A7A"
-};
-const INFO = {
-  lighter: "#D0F2FF",
-  light: "#74CAFF",
-  main: "#1890FF",
-  dark: "#0C53B7",
-  darker: "#04297A"
-};
-const SUCCESS = {
-  lighter: "#E9FCD4",
-  light: "#AAF27F",
-  main: "#54D62C",
-  dark: "#229A16",
-  darker: "#08660D"
-};
-const WARNING = {
-  lighter: "#FFF7CD",
-  light: "#FFE16A",
-  main: "#FFC107",
-  dark: "#B78103",
-  darker: "#7A4F01"
-};
-const ERROR = {
-  lighter: "#FFE7D9",
-  light: "#FFA48D",
-  main: "#FF4842",
-  dark: "#B72136",
-  darker: "#7A0C2E"
-};
-const GREY = {
-  0: "#FFFFFF",
-  100: "#F9FAFB",
-  200: "#F4F6F8",
-  300: "#DFE3E8",
-  400: "#C4CDD5",
-  500: "#919EAB",
-  600: "#637381",
-  700: "#454F5B",
-  800: "#212B36",
-  900: "#161C24",
-  5008: alpha("#919EAB", 0.08),
-  50012: alpha("#919EAB", 0.12),
-  50016: alpha("#919EAB", 0.16),
-  50024: alpha("#919EAB", 0.24),
-  50032: alpha("#919EAB", 0.32),
-  50048: alpha("#919EAB", 0.48),
-  50056: alpha("#919EAB", 0.56),
-  50080: alpha("#919EAB", 0.8)
-};
-const GRADIENTS = {
-  primary: createGradient(PRIMARY.light, PRIMARY.main),
-  info: createGradient(INFO.light, INFO.main),
-  success: createGradient(SUCCESS.light, SUCCESS.main),
-  warning: createGradient(WARNING.light, WARNING.main),
-  error: createGradient(ERROR.light, ERROR.main)
-};
-const CHART_COLORS = {
-  violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
-  blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
-  green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
-  yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
-  red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
-};
-const COMMON = {
-  common: { black: "#000", white: "#fff" },
-  primary: { ...PRIMARY, contrastText: "#fff" },
-  secondary: { ...SECONDARY, contrastText: "#fff" },
-  info: { ...INFO, contrastText: "#fff" },
-  success: { ...SUCCESS, contrastText: GREY[800] },
-  warning: { ...WARNING, contrastText: GREY[800] },
-  error: { ...ERROR, contrastText: "#fff" },
-  grey: GREY,
-  gradients: GRADIENTS,
-  chart: CHART_COLORS,
-  divider: GREY[50024],
-  action: {
-    hover: GREY[5008],
-    selected: GREY[50016],
-    disabled: GREY[50080],
-    disabledBackground: GREY[50024],
-    focus: GREY[50024],
-    hoverOpacity: 0.08,
-    disabledOpacity: 0.48
-  }
-};
-const palette = {
-  light: {
-    ...COMMON,
-    mode: "light",
-    text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
-    background: {
-      paper: "#fff",
-      default: "#fff",
-      neutral: GREY[200],
-      autocomplete: GREY[100],
-      header: "#F6F7F9"
-    },
-    action: { active: GREY[600], ...COMMON.action },
-    grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
-  },
-  dark: {
-    ...COMMON,
-    mode: "dark",
-    text: { primary: "#fff", secondary: GREY[500], disabled: GREY[600] },
-    background: {
-      paper: GREY[800],
-      default: GREY[900],
-      neutral: GREY[50016],
-      autocomplete: GREY[800],
-      header: "#29313A"
-    },
-    action: { active: GREY[500], ...COMMON.action },
-    grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
-  }
-};
-export { GREY as G, palette as p };

package/theme/shadows.js

@@ -1,65 +0,0 @@
-import { alpha } from "@mui/material/styles";
-import { p as palette } from "./palette.js";
-const LIGHT_MODE = palette.light.grey[500];
-const DARK_MODE = "#000000";
-const createShadow = (color) => {
-  const transparent1 = alpha(color, 0.2);
-  const transparent2 = alpha(color, 0.14);
-  const transparent3 = alpha(color, 0.12);
-  return [
-    "none",
-    `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
-    `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
-    `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
-    `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
-    `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
-    `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
-    `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
-    `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
-    `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
-    `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
-    `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
-    `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
-    `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
-    `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
-    `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
-    `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
-    `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
-    `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
-    `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
-    `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
-    `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
-    `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
-    `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
-    `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`
-  ];
-};
-const createCustomShadow = (color) => {
-  const transparent = alpha(color, 0.16);
-  return {
-    z1: `0 1px 2px 0 ${transparent}`,
-    z8: `0 8px 16px 0 ${transparent}`,
-    z12: `0 12px 24px -4px ${transparent}`,
-    z16: `0 16px 32px -4px ${transparent}`,
-    z20: `0 20px 40px -4px ${transparent}`,
-    z24: `0 24px 48px 0 ${transparent}`,
-    primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,
-    info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,
-    secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,
-    success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,
-    warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,
-    error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`,
-    card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
-    dialog: `-40px 40px 80px -8px ${alpha(palette.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`
-  };
-};
-const customShadows = {
-  light: createCustomShadow(LIGHT_MODE),
-  dark: createCustomShadow(DARK_MODE)
-};
-const shadows = {
-  light: createShadow(LIGHT_MODE),
-  dark: createShadow(DARK_MODE)
-};
-export { customShadows as c, shadows as s };

package/utils/index.js

@@ -1,114 +0,0 @@
-import { useTheme } from "@mui/material/styles";
-import { u as useResponsive } from "../hooks/useResponsive/index.js";
-import { p as palette } from "../theme/palette.js";
-function remToPx(value) {
-  return Math.round(parseFloat(value) * 16);
-}
-function pxToRem(value) {
-  return `${value / 16}rem`;
-}
-function responsiveFontSizes({ sm, md, lg }) {
-  return {
-    "@media (min-width:600px)": {
-      fontSize: pxToRem(sm)
-    },
-    "@media (min-width:900px)": {
-      fontSize: pxToRem(md)
-    },
-    "@media (min-width:1200px)": {
-      fontSize: pxToRem(lg)
-    }
-  };
-}
-function useWidth() {
-  const theme = useTheme();
-  const keys = [...theme.breakpoints.keys].reverse();
-  return keys.reduce((output, key) => {
-    const matches = useResponsive("up", key);
-    return !output && matches ? key : output;
-  }, null) || "xs";
-}
-function getFontValue(variant) {
-  const theme = useTheme();
-  const breakpoints = useWidth();
-  const key = theme.breakpoints.up(breakpoints === "xl" ? "lg" : breakpoints);
-  const hasResponsive = variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "h6";
-  const getFont = hasResponsive && theme.typography[variant][key] ? theme.typography[variant][key] : theme.typography[variant];
-  const fontSize = remToPx(getFont.fontSize);
-  const lineHeight = Number(theme.typography[variant].lineHeight) * fontSize;
-  const { fontWeight, letterSpacing } = theme.typography[variant];
-  return { fontSize, lineHeight, fontWeight, letterSpacing };
-}
-const colorPresets = [
-  {
-    name: "default",
-    ...palette.light.primary,
-    LightSelected: "#EBF9F1",
-    LightSelectedHover: "#D6F2E3",
-    DarkSelected: "#142827",
-    DarkSelectedHover: "#12342B"
-  },
-  {
-    name: "purple",
-    lighter: "#EBD6FD",
-    light: "#B985F4",
-    main: "#7635dc",
-    dark: "#431A9E",
-    darker: "#200A69",
-    contrastText: "#fff"
-  },
-  {
-    name: "cyan",
-    lighter: "#D1FFFC",
-    light: "#76F2FF",
-    main: "#1CCAFF",
-    dark: "#0E77B7",
-    darker: "#053D7A",
-    contrastText: palette.light.grey[800]
-  },
-  {
-    name: "blue",
-    lighter: "#D1E9FC",
-    light: "#76B0F1",
-    main: "#2065D1",
-    dark: "#103996",
-    darker: "#061B64",
-    contrastText: "#fff"
-  },
-  {
-    name: "orange",
-    lighter: "#FEF4D4",
-    light: "#FED680",
-    main: "#fda92d",
-    dark: "#B66816",
-    darker: "#793908",
-    contrastText: palette.light.grey[800]
-  },
-  {
-    name: "red",
-    lighter: "#FFE3D5",
-    light: "#FFC1AC",
-    main: "#FF3030",
-    dark: "#B71833",
-    darker: "#7A0930",
-    contrastText: "#fff"
-  }
-];
-const defaultPreset = colorPresets[0];
-const purplePreset = colorPresets[1];
-const cyanPreset = colorPresets[2];
-const bluePreset = colorPresets[3];
-const orangePreset = colorPresets[4];
-const redPreset = colorPresets[5];
-function getColorPresets(presetsKey) {
-  return {
-    purple: purplePreset,
-    cyan: cyanPreset,
-    blue: bluePreset,
-    orange: orangePreset,
-    red: redPreset,
-    default: defaultPreset
-  }[presetsKey];
-}
-const Capitalize = (s) => s && s[0].toUpperCase() + s.slice(1) || "";
-export { Capitalize as C, getFontValue as a, colorPresets as c, defaultPreset as d, getColorPresets as g, pxToRem as p, responsiveFontSizes as r };