@matteoaliano/forest-ui 1.1.0 → 1.2.0

package/dist/index.d.mts

@@ -298,7 +298,148 @@ declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & R
 type DatePickerProps = DatePickerProps$1;
 declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-declare const customChipScales: Record<string, Record<number, string>>;
+declare const customChipScales: {
+    teal: {
+        readonly 25: "#f6fefc";
+        readonly 50: "#f0fdf9";
+        readonly 100: "#ccfbef";
+        readonly 200: "#99f6e0";
+        readonly 300: "#5fe9d0";
+        readonly 400: "#2ed3b7";
+        readonly 500: "#15b79e";
+        readonly 600: "#0e9384";
+        readonly 700: "#107569";
+        readonly 800: "#125d56";
+        readonly 900: "#134e48";
+        readonly 950: "#0a2926";
+    };
+    orange: {
+        readonly 25: "#fefaf5";
+        readonly 50: "#fef6ee";
+        readonly 100: "#fdead7";
+        readonly 200: "#f9dbaf";
+        readonly 300: "#f7b27a";
+        readonly 400: "#f38744";
+        readonly 500: "#ef6820";
+        readonly 600: "#e04f16";
+        readonly 700: "#b93815";
+        readonly 800: "#932f19";
+        readonly 900: "#772917";
+        readonly 950: "#511c10";
+    };
+    purple: {
+        readonly 25: "#fafaff";
+        readonly 50: "#f4f3ff";
+        readonly 100: "#ebe9fe";
+        readonly 200: "#d9d6fe";
+        readonly 300: "#bdb4fe";
+        readonly 400: "#9b8afb";
+        readonly 500: "#7a5af8";
+        readonly 600: "#6938ef";
+        readonly 700: "#5925dc";
+        readonly 800: "#4a1fb8";
+        readonly 900: "#3e1c96";
+        readonly 950: "#27115f";
+    };
+    pink: {
+        readonly 25: "#fef6fb";
+        readonly 50: "#fdf2fa";
+        readonly 100: "#fce7f6";
+        readonly 200: "#fcceee";
+        readonly 300: "#faa7e0";
+        readonly 400: "#f670c7";
+        readonly 500: "#ee46bc";
+        readonly 600: "#dd2590";
+        readonly 700: "#c11574";
+        readonly 800: "#9e165f";
+        readonly 900: "#851651";
+        readonly 950: "#4e0d30";
+    };
+    fuchsia: {
+        readonly 25: "#fefaff";
+        readonly 50: "#fdf4ff";
+        readonly 100: "#fbe8ff";
+        readonly 200: "#f6d0fe";
+        readonly 300: "#eeaafd";
+        readonly 400: "#e478fa";
+        readonly 500: "#d444f1";
+        readonly 600: "#ba24d5";
+        readonly 700: "#9f1ab1";
+        readonly 800: "#821890";
+        readonly 900: "#6f1877";
+        readonly 950: "#47104c";
+    };
+    orangeDark: {
+        readonly 25: "#fff9f5";
+        readonly 50: "#fff4ed";
+        readonly 100: "#ffe6d5";
+        readonly 200: "#ffd6ae";
+        readonly 300: "#ff9c66";
+        readonly 400: "#ff692e";
+        readonly 500: "#ff4405";
+        readonly 600: "#e62e05";
+        readonly 700: "#bc1b06";
+        readonly 800: "#97180c";
+        readonly 900: "#771a0d";
+        readonly 950: "#57130a";
+    };
+    green: {
+        readonly 25: "#f6fef9";
+        readonly 50: "#edfcf2";
+        readonly 100: "#d3f8df";
+        readonly 200: "#aaf0c4";
+        readonly 300: "#73e2a3";
+        readonly 400: "#3ccb7f";
+        readonly 500: "#16b364";
+        readonly 600: "#099250";
+        readonly 700: "#087443";
+        readonly 800: "#095c37";
+        readonly 900: "#084c2e";
+        readonly 950: "#052e1c";
+    };
+    indigo: {
+        readonly 25: "#f5f8ff";
+        readonly 50: "#eef4ff";
+        readonly 100: "#e0eaff";
+        readonly 200: "#c7d7fe";
+        readonly 300: "#a4bcfd";
+        readonly 400: "#8098f9";
+        readonly 500: "#6172f3";
+        readonly 600: "#444ce7";
+        readonly 700: "#3538cd";
+        readonly 800: "#2d31a6";
+        readonly 900: "#2d3282";
+        readonly 950: "#1f235b";
+    };
+    rose: {
+        readonly 25: "#fff5f6";
+        readonly 50: "#fff1f3";
+        readonly 100: "#ffe4e8";
+        readonly 200: "#fecdd6";
+        readonly 300: "#fea3b4";
+        readonly 400: "#fd6f8e";
+        readonly 500: "#f63d68";
+        readonly 600: "#e31b54";
+        readonly 700: "#c01048";
+        readonly 800: "#a11043";
+        readonly 900: "#89123e";
+        readonly 950: "#510b24";
+    };
+    blueLight: {
+        readonly 25: "#f5fbff";
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#b9e6fe";
+        readonly 300: "#7cd4fd";
+        readonly 400: "#36bffa";
+        readonly 500: "#0ba5ec";
+        readonly 600: "#0086c9";
+        readonly 700: "#026aa2";
+        readonly 800: "#065986";
+        readonly 900: "#0b4a6f";
+        readonly 950: "#062c41";
+    };
+};
 type ForestChipColor = ChipProps["color"] | keyof typeof customChipScales;
 interface ForestChipProps extends Omit<ChipProps, "color"> {
     color?: ForestChipColor;

package/dist/index.d.ts

@@ -298,7 +298,148 @@ declare const Logo: React$1.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & R
 type DatePickerProps = DatePickerProps$1;
 declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-declare const customChipScales: Record<string, Record<number, string>>;
+declare const customChipScales: {
+    teal: {
+        readonly 25: "#f6fefc";
+        readonly 50: "#f0fdf9";
+        readonly 100: "#ccfbef";
+        readonly 200: "#99f6e0";
+        readonly 300: "#5fe9d0";
+        readonly 400: "#2ed3b7";
+        readonly 500: "#15b79e";
+        readonly 600: "#0e9384";
+        readonly 700: "#107569";
+        readonly 800: "#125d56";
+        readonly 900: "#134e48";
+        readonly 950: "#0a2926";
+    };
+    orange: {
+        readonly 25: "#fefaf5";
+        readonly 50: "#fef6ee";
+        readonly 100: "#fdead7";
+        readonly 200: "#f9dbaf";
+        readonly 300: "#f7b27a";
+        readonly 400: "#f38744";
+        readonly 500: "#ef6820";
+        readonly 600: "#e04f16";
+        readonly 700: "#b93815";
+        readonly 800: "#932f19";
+        readonly 900: "#772917";
+        readonly 950: "#511c10";
+    };
+    purple: {
+        readonly 25: "#fafaff";
+        readonly 50: "#f4f3ff";
+        readonly 100: "#ebe9fe";
+        readonly 200: "#d9d6fe";
+        readonly 300: "#bdb4fe";
+        readonly 400: "#9b8afb";
+        readonly 500: "#7a5af8";
+        readonly 600: "#6938ef";
+        readonly 700: "#5925dc";
+        readonly 800: "#4a1fb8";
+        readonly 900: "#3e1c96";
+        readonly 950: "#27115f";
+    };
+    pink: {
+        readonly 25: "#fef6fb";
+        readonly 50: "#fdf2fa";
+        readonly 100: "#fce7f6";
+        readonly 200: "#fcceee";
+        readonly 300: "#faa7e0";
+        readonly 400: "#f670c7";
+        readonly 500: "#ee46bc";
+        readonly 600: "#dd2590";
+        readonly 700: "#c11574";
+        readonly 800: "#9e165f";
+        readonly 900: "#851651";
+        readonly 950: "#4e0d30";
+    };
+    fuchsia: {
+        readonly 25: "#fefaff";
+        readonly 50: "#fdf4ff";
+        readonly 100: "#fbe8ff";
+        readonly 200: "#f6d0fe";
+        readonly 300: "#eeaafd";
+        readonly 400: "#e478fa";
+        readonly 500: "#d444f1";
+        readonly 600: "#ba24d5";
+        readonly 700: "#9f1ab1";
+        readonly 800: "#821890";
+        readonly 900: "#6f1877";
+        readonly 950: "#47104c";
+    };
+    orangeDark: {
+        readonly 25: "#fff9f5";
+        readonly 50: "#fff4ed";
+        readonly 100: "#ffe6d5";
+        readonly 200: "#ffd6ae";
+        readonly 300: "#ff9c66";
+        readonly 400: "#ff692e";
+        readonly 500: "#ff4405";
+        readonly 600: "#e62e05";
+        readonly 700: "#bc1b06";
+        readonly 800: "#97180c";
+        readonly 900: "#771a0d";
+        readonly 950: "#57130a";
+    };
+    green: {
+        readonly 25: "#f6fef9";
+        readonly 50: "#edfcf2";
+        readonly 100: "#d3f8df";
+        readonly 200: "#aaf0c4";
+        readonly 300: "#73e2a3";
+        readonly 400: "#3ccb7f";
+        readonly 500: "#16b364";
+        readonly 600: "#099250";
+        readonly 700: "#087443";
+        readonly 800: "#095c37";
+        readonly 900: "#084c2e";
+        readonly 950: "#052e1c";
+    };
+    indigo: {
+        readonly 25: "#f5f8ff";
+        readonly 50: "#eef4ff";
+        readonly 100: "#e0eaff";
+        readonly 200: "#c7d7fe";
+        readonly 300: "#a4bcfd";
+        readonly 400: "#8098f9";
+        readonly 500: "#6172f3";
+        readonly 600: "#444ce7";
+        readonly 700: "#3538cd";
+        readonly 800: "#2d31a6";
+        readonly 900: "#2d3282";
+        readonly 950: "#1f235b";
+    };
+    rose: {
+        readonly 25: "#fff5f6";
+        readonly 50: "#fff1f3";
+        readonly 100: "#ffe4e8";
+        readonly 200: "#fecdd6";
+        readonly 300: "#fea3b4";
+        readonly 400: "#fd6f8e";
+        readonly 500: "#f63d68";
+        readonly 600: "#e31b54";
+        readonly 700: "#c01048";
+        readonly 800: "#a11043";
+        readonly 900: "#89123e";
+        readonly 950: "#510b24";
+    };
+    blueLight: {
+        readonly 25: "#f5fbff";
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#b9e6fe";
+        readonly 300: "#7cd4fd";
+        readonly 400: "#36bffa";
+        readonly 500: "#0ba5ec";
+        readonly 600: "#0086c9";
+        readonly 700: "#026aa2";
+        readonly 800: "#065986";
+        readonly 900: "#0b4a6f";
+        readonly 950: "#062c41";
+    };
+};
 type ForestChipColor = ChipProps["color"] | keyof typeof customChipScales;
 interface ForestChipProps extends Omit<ChipProps, "color"> {
     color?: ForestChipColor;

package/dist/index.js

@@ -1262,7 +1262,19 @@ function buildComponents(tokens2) {
         root: {
           width: 44,
           height: 24,
-          padding: 0
+          padding: 0,
+          // MUI's `size="small"` variant only half-applies here: the theme pins
+          // the track at the wide 44px medium geometry, but MUI still shrinks the
+          // thumb (16px), bumps switchBase padding (4px), and cuts the checked
+          // travel to 16px — leaving the thumb parked mid-track. Forest ships a
+          // single calibrated 24px switch, so neutralize `small` back to it.
+          "&.MuiSwitch-sizeSmall": {
+            "& .MuiSwitch-switchBase": {
+              padding: 2,
+              "&.Mui-checked": { transform: "translateX(20px)" }
+            },
+            "& .MuiSwitch-thumb": { width: 20, height: 20 }
+          }
         },
         switchBase: {
           padding: 2,
@@ -2360,8 +2372,11 @@ function buildComponents(tokens2) {
           }
         },
         staticTooltipLabel: {
+          // Match MuiTooltip: inverted face (charcoal in light, near-white in
+          // dark) with on-solid fg that inverts WITH it. text.white is
+          // mode-invariant and vanished on the dark-mode light face.
           backgroundColor: bg4.primarySolid,
-          color: text4.white,
+          color: buttonColors4.primary.fg,
           fontSize: 12,
           fontWeight: 600,
           borderRadius: radius4.md,
@@ -4845,7 +4860,7 @@ var customChipScales = {
   blueLight: misc.blueLight
 };
 function Chip({ color, deleteIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_CloseOutlined.default, {}), sx, ...props }) {
-  const scale = color && typeof color === "string" ? customChipScales[color] : void 0;
+  const scale = color && color in customChipScales ? customChipScales[color] : void 0;
   if (scale) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_Chip.default,