@spesia/ui 1.8.21 → 1.9.7

package/dist/styles/colors.js

@@ -0,0 +1,435 @@
+import { alpha as a } from "@mui/material";
+const r = {
+  primary: {
+    brown: {
+      20: "#DE785C",
+      30: "#BF6951",
+      40: "#A25945",
+      50: "#854B3A",
+      60: "#6A3C30",
+      70: "#4F2F25",
+      80: "#36211B",
+      90: "#1F1511",
+      100: "#180702"
+    },
+    coral: {
+      20: "#FFF3F0",
+      30: "#FEE7E2",
+      40: "#FEDBD3",
+      50: "#FDCFC5",
+      60: "#FDC4B6",
+      70: "#FDB8A7",
+      80: "#FCAC99",
+      90: "#FCA08A",
+      100: "#FB886D"
+    },
+    green: {
+      10: "#e5f2da",
+      20: "#D2E0C7",
+      30: "#A7BF98",
+      40: "#7A8B70",
+      50: "#7C8856",
+      60: "#515B4A",
+      70: "#46462B",
+      80: "#222E22"
+    },
+    beige: {
+      10: "#F9F1E5",
+      20: "#DFCBB3",
+      30: "#B9AC97",
+      40: "#807869",
+      50: "#655F54",
+      60: "#4C473F",
+      70: "#2F2C28",
+      80: "#1D1C19"
+    },
+    red: {
+      10: "#E5E0E1",
+      20: "#9B898A",
+      30: "#9E8989",
+      40: "#916B6B",
+      50: "#695757",
+      60: "#543A38",
+      70: "#331916",
+      80: "#201819"
+    },
+    yellow: {
+      10: "#FFF9E8",
+      20: "#FFF0C5",
+      30: "#FFEF98",
+      40: "#FFD700",
+      50: "#FCC943",
+      60: "#DFA827",
+      70: "#FCB940",
+      80: "#B68512"
+    }
+  },
+  secondary: {
+    olive: {
+      10: "#E9F5EA",
+      20: "#BEE2C2",
+      30: "#92CE9A",
+      40: "#63BA73",
+      50: "#21A64D",
+      60: "#227F2D",
+      70: "#1F592D",
+      80: "#18371E",
+      90: "#142617",
+      100: "#0D170E"
+    },
+    grey: {
+      20: "#E2E0DF",
+      30: "#C5C1C1",
+      40: "#A9A4A3",
+      50: "#8E8786",
+      60: "#746C6A",
+      70: "#5B514F",
+      80: "#433836",
+      90: "#2C211F",
+      100: "#180702"
+    },
+    alphaCoral: {
+      5: a("#FB886D", 0.05),
+      10: a("#FB886D", 0.1),
+      20: a("#FB886D", 0.2),
+      30: a("#FB886D", 0.3),
+      50: a("#FB886D", 0.5),
+      60: a("#FB886D", 0.6),
+      70: a("#FB886D", 0.7),
+      80: a("#FB886D", 0.8),
+      90: a("#FB886D", 0.9)
+    },
+    alphaBrown: {
+      5: a("#a25945", 0.05),
+      10: a("#a25945", 0.1),
+      20: a("#a25945", 0.2),
+      30: a("#a25945", 0.3),
+      50: a("#a25945", 0.5),
+      60: a("#a25945", 0.6),
+      70: a("#a25945", 0.7),
+      80: a("#a25945", 0.8),
+      90: a("#a25945", 0.9)
+    }
+  },
+  neutral: {
+    white: "#ffffff",
+    black: "#000000",
+    alphaWhite: {
+      5: a("#ffffff", 0.05),
+      10: a("#ffffff", 0.1),
+      20: a("#ffffff", 0.2),
+      30: a("#ffffff", 0.3),
+      50: a("#ffffff", 0.5),
+      60: a("#ffffff", 0.6),
+      70: a("#ffffff", 0.7),
+      80: a("#ffffff", 0.8),
+      90: a("#ffffff", 0.9)
+    },
+    alphaBlack: {
+      5: a("#1D1C19", 0.05),
+      10: a("#1D1C19", 0.1),
+      20: a("#1D1C19", 0.2),
+      30: a("#1D1C19", 0.3),
+      50: a("#1D1C19", 0.5),
+      60: a("#1D1C19", 0.6),
+      70: a("#1D1C19", 0.7),
+      80: a("#1D1C19", 0.8),
+      90: a("#1D1C19", 0.9)
+    }
+  }
+}, e = {
+  fontFamily: {
+    serif: "'Feature Deck Web', serif",
+    sans: "'F37 August', sans-serif",
+    mono: "'GT Pressura', monospace"
+  },
+  spacing: 4,
+  borderRadius: {
+    none: 0,
+    sm: 2,
+    default: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    xxl: 16,
+    xxxl: 24,
+    full: 9999
+  },
+  borderWidth: {
+    50: 0.5,
+    100: 1,
+    200: 1.33,
+    300: 2
+  }
+}, l = {
+  core: {
+    white: {
+      light: r.neutral.white,
+      dark: r.neutral.black
+    },
+    black: {
+      light: r.neutral.black,
+      dark: r.neutral.white
+    }
+  },
+  semantic: {
+    primary: {
+      lighter: {
+        light: r.primary.coral[30],
+        dark: r.primary.brown[80]
+      },
+      light: {
+        light: r.primary.coral[20],
+        dark: r.primary.brown[70]
+      },
+      main: {
+        light: r.primary.coral[50],
+        dark: r.primary.brown[60]
+      },
+      dark: {
+        light: r.primary.coral[80],
+        dark: r.primary.brown[50]
+      }
+    },
+    secondary: {
+      lighter: {
+        light: r.primary.brown[30],
+        dark: r.primary.brown[70]
+      },
+      light: {
+        light: r.primary.brown[20],
+        dark: r.primary.brown[80]
+      },
+      main: {
+        light: r.primary.brown[50],
+        dark: r.primary.brown[40]
+      },
+      dark: {
+        light: r.primary.brown[80],
+        dark: r.primary.brown[20]
+      }
+    }
+  },
+  content: {
+    text: {
+      primary: {
+        light: r.primary.brown[70],
+        dark: r.primary.coral[20]
+      },
+      secondary: {
+        light: r.primary.brown[60],
+        dark: r.primary.brown[30]
+      },
+      tertiary: {
+        light: r.primary.coral[100],
+        dark: r.primary.coral[20]
+      },
+      disabled: {
+        light: r.neutral.alphaBlack[30],
+        dark: r.neutral.alphaWhite[30]
+      }
+    },
+    icon: {
+      primary: {
+        light: r.primary.brown[70],
+        dark: r.primary.coral[20]
+      },
+      secondary: {
+        light: r.primary.brown[40],
+        dark: r.primary.brown[60]
+      },
+      tertiary: {
+        light: r.primary.coral[100],
+        dark: r.primary.coral[20]
+      },
+      disabled: {
+        light: r.neutral.alphaBlack[30],
+        dark: r.neutral.alphaWhite[30]
+      }
+    },
+    background: {
+      primary: {
+        light: r.neutral.white,
+        dark: r.primary.brown[90]
+      },
+      secondary: {
+        light: r.secondary.grey[20],
+        dark: r.secondary.grey[90]
+      },
+      coral: {
+        light: r.primary.coral[20],
+        dark: r.primary.coral[100]
+      },
+      coralBold: {
+        light: r.primary.coral[50],
+        dark: r.primary.coral[100]
+      },
+      brown: {
+        light: r.primary.brown[40],
+        dark: r.primary.brown[50]
+      },
+      brownBold: {
+        light: r.primary.brown[80],
+        dark: r.primary.brown[20]
+      },
+      alphaBrown: {
+        light: r.secondary.alphaBrown[5],
+        dark: r.secondary.alphaBrown[5]
+      },
+      primaryButton: {
+        light: r.primary.brown[100],
+        dark: r.primary.brown[20]
+      },
+      secondaryButton: {
+        light: r.secondary.alphaCoral[5],
+        dark: r.secondary.alphaCoral[5]
+      },
+      tertiaryButton: {
+        light: "rgba(255, 249, 232, 0.10)",
+        dark: "rgba(255, 249, 232, 0.10)"
+      },
+      transparent: {
+        light: r.neutral.alphaWhite[70],
+        dark: r.neutral.alphaBlack[70]
+      }
+    },
+    border: {
+      primary: {
+        light: r.primary.coral[50],
+        dark: r.primary.coral[70]
+      },
+      secondary: {
+        light: r.primary.beige[20],
+        dark: r.primary.beige[70]
+      },
+      tertiary: {
+        light: r.secondary.grey[20],
+        dark: r.secondary.grey[100]
+      }
+    },
+    other: {
+      ring: {
+        light: a("#807869", 0.2),
+        dark: a("#807869", 0.8)
+      }
+    }
+  },
+  charts: {
+    referenceLine: r.primary.brown[30],
+    axis: r.secondary.grey[20],
+    grid: r.secondary.grey[20],
+    ticks: "#6B7280",
+    timeSeries: {
+      fill: [
+        r.secondary.olive[20],
+        "#FCA08A",
+        "#FCAC99",
+        "#FDB8A7",
+        "#FDC4B6",
+        "#FDCFC5",
+        "#FEDBD3",
+        "#FEE7E2",
+        "#FFF3F0"
+      ],
+      stroke: [
+        r.secondary.olive[50],
+        "#BF6951",
+        "#DE785C",
+        "#FCA08A",
+        "#FCAC99",
+        "#FDB8A7",
+        "#FDC4B6",
+        "#FDCFC5",
+        "#FEDBD3"
+      ],
+      text: [
+        r.secondary.olive[10],
+        "#6A3C30",
+        "#854B3A",
+        "#A25945",
+        "#BF6951",
+        "#DE785C",
+        "#FCA08A",
+        "#FCAC99",
+        "#FDB8A7"
+      ]
+    },
+    groupedSeries: {
+      primary: {
+        fill: [
+          r.primary.beige[10],
+          r.primary.beige[60],
+          "#BEE2C2",
+          "#E9F5EA",
+          "#D6F5C2",
+          "#A7BF98",
+          "#7A8B70",
+          "#515B4A",
+          "#222E22"
+        ],
+        stroke: [
+          r.primary.beige[30],
+          r.primary.beige[70],
+          "#21A64D",
+          "#63BA73",
+          "#92CE9A",
+          "#BEE2C2",
+          "#E9F5EA",
+          "#D6F5C2",
+          "#A7BF98"
+        ],
+        text: [
+          r.primary.beige[40],
+          r.primary.beige[80],
+          "#227F2D",
+          "#21A64D",
+          "#63BA73",
+          "#92CE9A",
+          "#BEE2C2",
+          "#E9F5EA",
+          "#D6F5C2"
+        ]
+      },
+      secondary: {
+        fill: [
+          "#FB886D",
+          "#FCA08A",
+          "#FCAC99",
+          "#FDB8A7",
+          "#FDC4B6",
+          "#FDCFC5",
+          "#FEDBD3",
+          "#FEE7E2",
+          "#FFF3F0"
+        ],
+        stroke: [
+          "#A25945",
+          "#BF6951",
+          "#DE785C",
+          "#FCA08A",
+          "#FCAC99",
+          "#FDB8A7",
+          "#FDC4B6",
+          "#FDCFC5",
+          "#FEDBD3"
+        ],
+        text: [
+          "#4F2F25",
+          "#6A3C30",
+          "#854B3A",
+          "#A25945",
+          "#BF6951",
+          "#DE785C",
+          "#FCA08A",
+          "#FCAC99",
+          "#FDB8A7"
+        ]
+      }
+    }
+  }
+};
+export {
+  r as colors,
+  e as primitives,
+  l as tokens
+};

package/dist/styles/dialog/dialog.js

@@ -0,0 +1,34 @@
+import { typography as e } from "../typography.js";
+const t = {
+  MuiDialog: {
+    styleOverrides: {
+      root: () => ({}),
+      paper: () => ({
+        "&.MuiPaper-rounded": {
+          borderRadius: "20px"
+        }
+      })
+    }
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: () => {
+        var r;
+        return {
+          fontSize: (r = e.h4) == null ? void 0 : r.fontSize,
+          fontWeight: 600
+        };
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: () => ({
+        padding: "24px"
+      })
+    }
+  }
+};
+export {
+  t as dialogStyles
+};

package/dist/styles/form/form.js

@@ -0,0 +1,18 @@
+import { colors as o } from "../colors.js";
+const e = {
+  MuiFormLabel: {
+    styleOverrides: {
+      root: {
+        background: o.neutral.white,
+        px: 1,
+        mx: -1,
+        "&:focus": {
+          color: o.primary.brown[60]
+        }
+      }
+    }
+  }
+};
+export {
+  e as formStyles
+};

package/dist/styles/index.js

@@ -0,0 +1,53 @@
+import { createTheme as o } from "@mui/material";
+import { buttonStyles as r } from "./button/button.js";
+import { chipStyles as e } from "./chip/chip.js";
+import { cardStyles as m } from "./card/card.js";
+import { alertStyles as l } from "./alert/alert.js";
+import { tooltipStyles as i } from "./tooltip/tooltip.js";
+import { formStyles as p } from "./form/form.js";
+import { listStyles as s } from "./list/list.js";
+import { sliderStyles as a } from "./slider/slider.js";
+import { inputStyles as y } from "./input/input.js";
+import { dialogStyles as S } from "./dialog/dialog.js";
+import { checkboxStyles as f } from "./checkbox/checkbox.js";
+import { radioStyles as c } from "./radio/radio.js";
+import { switchStyles as h } from "./switch/switch.js";
+import { tabStyles as d, tabsStyles as g } from "./tab/tab.js";
+import { createPalette as t } from "./palette.js";
+import { typography as n, typographyStyles as b } from "./typography.js";
+const G = o({
+  cssVariables: {
+    colorSchemeSelector: "data"
+  },
+  components: {
+    ...r,
+    ...e,
+    ...m,
+    ...l,
+    ...p,
+    ...i,
+    ...s,
+    ...y,
+    ...S,
+    ...a,
+    ...g,
+    ...d,
+    ...b,
+    ...f,
+    ...c,
+    ...h
+  },
+  colorSchemes: {
+    light: {
+      palette: t("light")
+    },
+    dark: {
+      palette: t("dark")
+    }
+  },
+  spacing: 4,
+  typography: n
+});
+export {
+  G as theme
+};

package/dist/styles/input/input.js

@@ -0,0 +1,127 @@
+import { colors as t, tokens as e } from "../colors.js";
+const o = (r) => {
+  var i, n, d, a;
+  return {
+    "&:-webkit-autofill": {
+      backgroundColor: `${(i = r.vars) == null ? void 0 : i.palette.background.default} !important`,
+      color: `${(n = r.vars) == null ? void 0 : n.palette.text.primary} !important`,
+      boxShadow: `0 0 0px 1000px ${(d = r.vars) == null ? void 0 : d.palette.background.default} inset !important`
+    },
+    WebkitTextFillColor: `${(a = r.vars) == null ? void 0 : a.palette.text.primary} !important`
+  };
+}, u = {
+  MuiInputBase: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        borderRadius: r.spacing(2),
+        background: r.vars.palette.background.default,
+        outline: "none",
+        border: 0,
+        ".MuiOutlinedInput-notchedOutline": {
+          boxShadow: "none",
+          borderRadius: r.spacing(2),
+          border: `1px solid ${e.content.border.primary.light}`,
+          ...r.applyStyles("dark", {
+            border: `1px solid ${e.content.border.primary.dark}`
+          })
+        },
+        "&:hover": {
+          ".MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${e.content.border.primary.light}`,
+            ...r.applyStyles("dark", {
+              border: `1px solid ${e.content.border.primary.dark}`
+            })
+          }
+        },
+        "&.Mui-focused": {
+          borderRadius: r.spacing(2),
+          ".MuiOutlinedInput-notchedOutline": {
+            border: `3px solid ${e.content.border.primary.light}`,
+            ...r.applyStyles("dark", {
+              border: `3px solid ${e.content.border.primary.dark}`
+            })
+          },
+          "&.MuiInputBase-colorPrimary": {
+            ".MuiOutlinedInput-notchedOutline": {
+              border: `3px solid ${e.content.border.primary.light}`,
+              ...r.applyStyles("dark", {
+                border: `3px solid ${e.content.border.primary.dark}`
+              })
+            },
+            "&.Mui-error": {
+              ".MuiOutlinedInput-notchedOutline": {
+                border: `3px solid ${t.primary.red[40]}`
+              }
+            }
+          },
+          "&.MuiInputBase-colorSuccess": {
+            ".MuiOutlinedInput-notchedOutline": {
+              border: `3px solid ${t.primary.green[40]}`
+            }
+          }
+        },
+        ".MuiOutlinedInput-notchedOutline legend span": {
+          all: "unset"
+        }
+      }),
+      input: (r) => ({
+        borderRadius: r.theme.spacing(2),
+        color: r.theme.vars.palette.text.primary,
+        "&:placeholder": {
+          color: t.secondary.grey[30],
+          opacity: 1
+        },
+        ...o(r.theme)
+      })
+    }
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      input: (r) => ({
+        "&:placeholder": {
+          color: t.secondary.grey[30],
+          opacity: 1
+        },
+        ...o(r.theme)
+      })
+    }
+  },
+  MuiFilledInput: {
+    styleOverrides: {
+      root: (r) => ({
+        borderRadius: `${r.theme.spacing(2)} ${r.theme.spacing(2)} 0 0`,
+        "&.Mui-focused": {
+          borderRadius: `${r.theme.spacing(2)} ${r.theme.spacing(2)} 0 0`
+        }
+      }),
+      input: (r) => ({
+        "&:placeholder": {
+          color: t.secondary.grey[30],
+          opacity: 1
+        },
+        ...o(r.theme)
+      })
+    }
+  },
+  MuiFormHelperText: {
+    styleOverrides: {
+      root: () => ({
+        fontSize: "12px"
+      })
+    }
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: (r) => ({
+        fontSize: "14px",
+        fontWeight: 600,
+        color: r.theme.vars.palette.text.primary,
+        marginTop: 0,
+        marginBottom: 6
+      })
+    }
+  }
+};
+export {
+  u as inputStyles
+};

package/dist/styles/list/list.js

@@ -0,0 +1,42 @@
+const s = {
+  MuiList: {
+    styleOverrides: {
+      root: ({ theme: o }) => {
+        var r, t, i;
+        return {
+          "&.RadioList": {
+            ".MuiListItem-root": {
+              padding: 0,
+              borderRadius: o.spacing(3),
+              marginBottom: o.spacing(1),
+              border: `1px solid ${(r = o.vars) == null ? void 0 : r.palette.divider}`,
+              ":hover": {
+                borderColor: (t = o.vars) == null ? void 0 : t.palette.divider
+              },
+              ".MuiListItemButton-root": {
+                borderRadius: o.spacing(3)
+              }
+            }
+          },
+          "&.CheckboxList": {
+            ".MuiListItem-root": {
+              padding: 0,
+              ".MuiListItemButton-root": {
+                borderRadius: o.spacing(3)
+              }
+            }
+          },
+          ".MuiListSubheader-root": {
+            backgroundColor: "transparent"
+          },
+          ".MuiListItemIcon-root": {
+            color: (i = o.vars) == null ? void 0 : i.palette.text.primaryIcon
+          }
+        };
+      }
+    }
+  }
+};
+export {
+  s as listStyles
+};