@hanzogui/themes 3.0.6 → 4.4.0

package/dist/cjs/v4-gui.cjs

@@ -2,234 +2,238 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var v4_gui_exports = {};
 __export(v4_gui_exports, {
   guiThemes: () => guiThemes
 });
 module.exports = __toCommonJS(v4_gui_exports);
-var Colors = __toESM(require("@hanzogui/colors/legacy"), 1),
-  import_theme_builder = require("@hanzogui/theme-builder"),
-  import_color2k = require("color2k");
-const desat = (colors, amount) => Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, (0, import_color2k.desaturate)(value, amount)])),
-  colorsGreenDark = desat(Colors.greenDark, 0.2),
-  colorsGreen = desat(Colors.green, 0.2),
-  darkPalette = ["#040404", "#090909", "#111", "#151515", "#222", "#282828", "#343434", "#424242", "#515151", "#626262", "#a5a5a5", "#fff"],
-  lightPalette = ["#fff", "#f2f2f2", "hsl(0, 0%, 93%)", "hsl(0, 0%, 91%)", "hsl(0, 0%, 88%)", "hsl(0, 0%, 85%)", "hsl(0, 0%, 82%)", "hsl(0, 0%, 76%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 42%)", "hsl(0, 0%, 9%)"],
-  lightShadows = {
-    shadow1: "rgba(0,0,0,0.04)",
-    shadow2: "rgba(0,0,0,0.08)",
-    shadow3: "rgba(0,0,0,0.16)",
-    shadow4: "rgba(0,0,0,0.24)",
-    shadow5: "rgba(0,0,0,0.32)",
-    shadow6: "rgba(0,0,0,0.4)",
-    shadow7: "rgba(0,0,0,0.5)",
-    shadow8: "rgba(0,0,0,0.6)",
-    shadow9: "rgba(0,0,0,0.7)",
-    shadow10: "rgba(0,0,0,0.8)"
-  },
-  darkShadows = {
-    shadow1: "rgba(0,0,0,0.2)",
-    shadow2: "rgba(0,0,0,0.3)",
-    shadow3: "rgba(0,0,0,0.4)",
-    shadow4: "rgba(0,0,0,0.5)",
-    shadow5: "rgba(0,0,0,0.6)",
-    shadow6: "rgba(0,0,0,0.65)",
-    shadow7: "rgba(0,0,0,0.75)",
-    shadow8: "rgba(0,0,0,0.8)",
-    shadow9: "rgba(0,0,0,0.85)",
-    shadow10: "rgba(0,0,0,0.9)"
-  },
-  blackColors = {
-    black1: darkPalette[0],
-    black2: darkPalette[1],
-    black3: darkPalette[2],
-    black4: darkPalette[3],
-    black5: darkPalette[4],
-    black6: darkPalette[5],
-    black7: darkPalette[6],
-    black8: darkPalette[7],
-    black9: darkPalette[8],
-    black10: darkPalette[9],
-    black11: darkPalette[10],
-    black12: darkPalette[11]
+var Colors = __toESM(require("@hanzogui/colors/legacy"), 1);
+var import_theme_builder = require("@hanzogui/theme-builder");
+var import_color2k = require("color2k");
+const desat = (colors, amount) => {
+  return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, (0, import_color2k.desaturate)(value, amount)]));
+};
+const colorsGreenDark = desat(Colors.greenDark, 0.2);
+const colorsGreen = desat(Colors.green, 0.2);
+const darkPalette = ["#040404", "#090909", "#111", "#151515", "#222", "#282828", "#343434", "#424242", "#515151", "#626262", "#a5a5a5", "#fff"];
+const lightPalette = ["#fff", "#f2f2f2", "hsl(0, 0%, 93%)", "hsl(0, 0%, 91%)", "hsl(0, 0%, 88%)", "hsl(0, 0%, 85%)", "hsl(0, 0%, 82%)", "hsl(0, 0%, 76%)", "hsl(0, 0%, 56%)", "hsl(0, 0%, 50%)", "hsl(0, 0%, 42%)", "hsl(0, 0%, 9%)"];
+const lightShadows = {
+  shadow1: "rgba(0,0,0,0.04)",
+  shadow2: "rgba(0,0,0,0.08)",
+  shadow3: "rgba(0,0,0,0.16)",
+  shadow4: "rgba(0,0,0,0.24)",
+  shadow5: "rgba(0,0,0,0.32)",
+  shadow6: "rgba(0,0,0,0.4)",
+  shadow7: "rgba(0,0,0,0.5)",
+  shadow8: "rgba(0,0,0,0.6)",
+  shadow9: "rgba(0,0,0,0.7)",
+  shadow10: "rgba(0,0,0,0.8)"
+};
+const darkShadows = {
+  shadow1: "rgba(0,0,0,0.2)",
+  shadow2: "rgba(0,0,0,0.3)",
+  shadow3: "rgba(0,0,0,0.4)",
+  shadow4: "rgba(0,0,0,0.5)",
+  shadow5: "rgba(0,0,0,0.6)",
+  shadow6: "rgba(0,0,0,0.65)",
+  shadow7: "rgba(0,0,0,0.75)",
+  shadow8: "rgba(0,0,0,0.8)",
+  shadow9: "rgba(0,0,0,0.85)",
+  shadow10: "rgba(0,0,0,0.9)"
+};
+const blackColors = {
+  black1: darkPalette[0],
+  black2: darkPalette[1],
+  black3: darkPalette[2],
+  black4: darkPalette[3],
+  black5: darkPalette[4],
+  black6: darkPalette[5],
+  black7: darkPalette[6],
+  black8: darkPalette[7],
+  black9: darkPalette[8],
+  black10: darkPalette[9],
+  black11: darkPalette[10],
+  black12: darkPalette[11]
+};
+const whiteColors = {
+  white1: lightPalette[0],
+  white2: lightPalette[1],
+  white3: lightPalette[2],
+  white4: lightPalette[3],
+  white5: lightPalette[4],
+  white6: lightPalette[5],
+  white7: lightPalette[6],
+  white8: lightPalette[7],
+  white9: lightPalette[8],
+  white10: lightPalette[9],
+  white11: lightPalette[10],
+  white12: lightPalette[11]
+};
+const themes = (0, import_theme_builder.createV4Themes)({
+  componentThemes: import_theme_builder.defaultComponentThemes,
+  base: {
+    palette: {
+      dark: darkPalette,
+      light: lightPalette
+    },
+    // for values we don't want being inherited onto sub-themes
+    extra: {
+      light: {
+        ...Colors.blue,
+        ...Colors.gray,
+        ...colorsGreen,
+        ...Colors.orange,
+        ...Colors.pink,
+        ...Colors.purple,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...lightShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: lightShadows.shadow1,
+        colorBg: "#fff"
+      },
+      dark: {
+        ...Colors.blueDark,
+        ...Colors.grayDark,
+        ...colorsGreenDark,
+        ...Colors.orangeDark,
+        ...Colors.pinkDark,
+        ...Colors.purpleDark,
+        ...Colors.redDark,
+        ...Colors.yellowDark,
+        ...darkShadows,
+        ...blackColors,
+        ...whiteColors,
+        shadowColor: darkShadows.shadow1,
+        colorBg: "#000"
+      }
+    }
   },
-  whiteColors = {
-    white1: lightPalette[0],
-    white2: lightPalette[1],
-    white3: lightPalette[2],
-    white4: lightPalette[3],
-    white5: lightPalette[4],
-    white6: lightPalette[5],
-    white7: lightPalette[6],
-    white8: lightPalette[7],
-    white9: lightPalette[8],
-    white10: lightPalette[9],
-    white11: lightPalette[10],
-    white12: lightPalette[11]
+  // inverse accent theme
+  accent: {
+    palette: {
+      dark: lightPalette,
+      light: darkPalette
+    }
   },
-  themes = (0, import_theme_builder.createV4Themes)({
-    componentThemes: import_theme_builder.defaultComponentThemes,
-    base: {
+  childrenThemes: {
+    black: {
       palette: {
-        dark: darkPalette,
-        light: lightPalette
-      },
-      // for values we don't want being inherited onto sub-themes
-      extra: {
-        light: {
-          ...Colors.blue,
-          ...Colors.gray,
-          ...colorsGreen,
-          ...Colors.orange,
-          ...Colors.pink,
-          ...Colors.purple,
-          ...Colors.red,
-          ...Colors.yellow,
-          ...lightShadows,
-          ...blackColors,
-          ...whiteColors,
-          shadowColor: lightShadows.shadow1,
-          colorBg: "#fff"
-        },
-        dark: {
-          ...Colors.blueDark,
-          ...Colors.grayDark,
-          ...colorsGreenDark,
-          ...Colors.orangeDark,
-          ...Colors.pinkDark,
-          ...Colors.purpleDark,
-          ...Colors.redDark,
-          ...Colors.yellowDark,
-          ...darkShadows,
-          ...blackColors,
-          ...whiteColors,
-          shadowColor: darkShadows.shadow1,
-          colorBg: "#000"
-        }
+        dark: Object.values(blackColors),
+        light: Object.values(blackColors)
       }
     },
-    // inverse accent theme
-    accent: {
+    white: {
       palette: {
-        dark: lightPalette,
-        light: darkPalette
+        dark: Object.values(whiteColors),
+        light: Object.values(whiteColors)
       }
     },
-    childrenThemes: {
-      black: {
-        palette: {
-          dark: Object.values(blackColors),
-          light: Object.values(blackColors)
-        }
-      },
-      white: {
-        palette: {
-          dark: Object.values(whiteColors),
-          light: Object.values(whiteColors)
-        }
-      },
-      gray: {
-        palette: {
-          dark: Object.values(Colors.grayDark),
-          light: Object.values(Colors.gray)
-        }
-      },
-      blue: {
-        palette: {
-          dark: Object.values(Colors.blueDark),
-          light: Object.values(Colors.blue)
-        }
-      },
-      orange: {
-        palette: {
-          dark: Object.values(Colors.orangeDark),
-          light: Object.values(Colors.orange)
-        }
-      },
-      red: {
-        palette: {
-          dark: Object.values(Colors.redDark),
-          light: Object.values(Colors.red)
-        }
-      },
-      yellow: {
-        palette: {
-          dark: Object.values(Colors.yellowDark),
-          light: Object.values(Colors.yellow)
-        }
-      },
-      green: {
-        palette: {
-          dark: Object.values(colorsGreenDark),
-          light: Object.values(colorsGreen)
-        }
-      },
-      purple: {
-        palette: {
-          dark: Object.values(Colors.purpleDark),
-          light: Object.values(Colors.purple)
-        }
-      },
-      pink: {
-        palette: {
-          dark: Object.values(Colors.pinkDark),
-          light: Object.values(Colors.pink)
-        }
-      },
-      tan: {
-        palette: {
-          light: ["hsla(40, 30%, 98%, 1)", "hsla(40, 24%, 94%, 1)", "hsla(38, 23%, 91%, 1)", "hsla(36, 20%, 90%, 1)", "hsla(36, 20%, 88%, 1)", "hsla(35, 20%, 85%, 1)", "hsla(35, 21%, 74%, 1)", "hsla(34, 20%, 70%, 1)", "hsla(35, 20%, 67%, 1)", "hsla(34, 19%, 47%, 1)", "hsla(35, 18%, 37%, 1)", "hsla(35, 17%, 20%, 1)"],
-          dark: ["hsla(30, 9%, 10%, 1)", "hsla(30, 10%, 12%, 1)", "hsla(31, 11%, 18%, 1)", "hsla(30, 12%, 23%, 1)", "hsla(30, 14%, 28%, 1)", "hsla(30, 16%, 33%, 1)", "hsla(30, 18%, 38%, 1)", "hsla(30, 20%, 45%, 1)", "hsla(30, 21%, 50%, 1)", "hsla(29, 22%, 58%, 1)", "hsla(34, 24%, 70%, 1)", "hsla(11, 12%, 79%, 1)"]
-        }
+    gray: {
+      palette: {
+        dark: Object.values(Colors.grayDark),
+        light: Object.values(Colors.gray)
       }
     },
-    grandChildrenThemes: {
-      // inverse accent theme
-      accent: {
-        template: "inverse"
-      },
-      alt1: {
-        template: "alt1"
-      },
-      alt2: {
-        template: "alt2"
-      },
-      surface1: {
-        template: "surface1"
-      },
-      surface2: {
-        template: "surface2"
-      },
-      surface3: {
-        template: "surface3"
+    blue: {
+      palette: {
+        dark: Object.values(Colors.blueDark),
+        light: Object.values(Colors.blue)
       }
+    },
+    orange: {
+      palette: {
+        dark: Object.values(Colors.orangeDark),
+        light: Object.values(Colors.orange)
+      }
+    },
+    red: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red)
+      }
+    },
+    yellow: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow)
+      }
+    },
+    green: {
+      palette: {
+        dark: Object.values(colorsGreenDark),
+        light: Object.values(colorsGreen)
+      }
+    },
+    purple: {
+      palette: {
+        dark: Object.values(Colors.purpleDark),
+        light: Object.values(Colors.purple)
+      }
+    },
+    pink: {
+      palette: {
+        dark: Object.values(Colors.pinkDark),
+        light: Object.values(Colors.pink)
+      }
+    },
+    tan: {
+      palette: {
+        light: ["hsla(40, 30%, 98%, 1)", "hsla(40, 24%, 94%, 1)", "hsla(38, 23%, 91%, 1)", "hsla(36, 20%, 90%, 1)", "hsla(36, 20%, 88%, 1)", "hsla(35, 20%, 85%, 1)", "hsla(35, 21%, 74%, 1)", "hsla(34, 20%, 70%, 1)", "hsla(35, 20%, 67%, 1)", "hsla(34, 19%, 47%, 1)", "hsla(35, 18%, 37%, 1)", "hsla(35, 17%, 20%, 1)"],
+        dark: ["hsla(30, 9%, 10%, 1)", "hsla(30, 10%, 12%, 1)", "hsla(31, 11%, 18%, 1)", "hsla(30, 12%, 23%, 1)", "hsla(30, 14%, 28%, 1)", "hsla(30, 16%, 33%, 1)", "hsla(30, 18%, 38%, 1)", "hsla(30, 20%, 45%, 1)", "hsla(30, 21%, 50%, 1)", "hsla(29, 22%, 58%, 1)", "hsla(34, 24%, 70%, 1)", "hsla(11, 12%, 79%, 1)"]
+      }
+    }
+  },
+  grandChildrenThemes: {
+    // inverse accent theme
+    accent: {
+      template: "inverse"
+    },
+    alt1: {
+      template: "alt1"
+    },
+    alt2: {
+      template: "alt2"
+    },
+    surface1: {
+      template: "surface1"
+    },
+    surface2: {
+      template: "surface2"
+    },
+    surface3: {
+      template: "surface3"
     }
-  }),
-  guiThemes = process.env.HANZO_GUI_ENVIRONMENT === "client" && process.env.NODE_ENV === "production" ? {} : themes;
+  }
+});
+const guiThemes = process.env.GUI_ENVIRONMENT === "client" && process.env.NODE_ENV === "production" ? {} : themes;