@nextui-org/theme 0.0.0-dev-v2-20230326012034

package/dist/plugin.js

@@ -0,0 +1,564 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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: 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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  nextui: () => nextui,
+  resolveConfig: () => resolveConfig
+});
+module.exports = __toCommonJS(plugin_exports);
+var import_color = __toESM(require("color"));
+var import_plugin = __toESM(require("tailwindcss/plugin"));
+var import_lodash = __toESM(require("lodash.foreach"));
+var import_flat = __toESM(require("flat"));
+var import_lodash2 = __toESM(require("lodash.get"));
+var import_deepmerge = __toESM(require("deepmerge"));
+
+// src/colors/blue.ts
+var blue = {
+  50: "#e6f1fe",
+  100: "#cce3fd",
+  200: "#99c7fb",
+  300: "#66aaf9",
+  400: "#338ef7",
+  500: "#0072f5",
+  600: "#005bc4",
+  700: "#004493",
+  800: "#002e62",
+  900: "#001731"
+};
+
+// src/colors/green.ts
+var green = {
+  50: "#e8faf0",
+  100: "#d1f4e0",
+  200: "#a2e9c1",
+  300: "#74dfa2",
+  400: "#45d483",
+  500: "#17c964",
+  600: "#12a150",
+  700: "#0e793c",
+  800: "#095028",
+  900: "#052814"
+};
+
+// src/colors/pink.ts
+var pink = {
+  50: "#ffedfa",
+  100: "#ffdcf5",
+  200: "#ffb8eb",
+  300: "#ff95e1",
+  400: "#ff71d7",
+  500: "#ff4ecd",
+  600: "#cc3ea4",
+  700: "#992f7b",
+  800: "#661f52",
+  900: "#331029"
+};
+
+// src/colors/purple.ts
+var purple = {
+  50: "#f2eafa",
+  100: "#e4d4f4",
+  200: "#c9a9e9",
+  300: "#ae7ede",
+  400: "#9353d3",
+  500: "#7828c8",
+  600: "#6020a0",
+  700: "#481878",
+  800: "#301050",
+  900: "#180828"
+};
+
+// src/colors/red.ts
+var red = {
+  50: "#fee7ef",
+  100: "#fdd0df",
+  200: "#faa0bf",
+  300: "#f871a0",
+  400: "#f54180",
+  500: "#f31260",
+  600: "#c20e4d",
+  700: "#920b3a",
+  800: "#610726",
+  900: "#310413"
+};
+
+// src/colors/yellow.ts
+var yellow = {
+  50: "#fef6e9",
+  100: "#fdedd3",
+  200: "#fbdba7",
+  300: "#f9c97c",
+  400: "#f7b750",
+  500: "#f5a524",
+  600: "#c4841d",
+  700: "#936316",
+  800: "#62420e",
+  900: "#312107"
+};
+
+// src/colors/cyan.ts
+var cyan = {
+  50: "#F0FCFF",
+  100: "#E6FAFE",
+  200: "#D7F8FE",
+  300: "#C3F4FD",
+  400: "#A5EEFD",
+  500: "#7EE7FC",
+  600: "#06B7DB",
+  700: "#09AACD",
+  800: "#0E8AAA",
+  900: "#053B48"
+};
+
+// src/colors/common.ts
+var commonColors = {
+  white: "#ffffff",
+  black: "#000000",
+  blue,
+  green,
+  pink,
+  purple,
+  red,
+  yellow,
+  cyan
+};
+
+// src/colors/semantic.ts
+var import_colors = __toESM(require("tailwindcss/colors"));
+var import_color2k = require("color2k");
+
+// src/utils/object.ts
+function swapColorValues(colors2) {
+  const swappedColors = {};
+  const keys = Object.keys(colors2);
+  const length = keys.length;
+  for (let i = 0; i < length / 2; i++) {
+    const key1 = keys[i];
+    const key2 = keys[length - 1 - i];
+    swappedColors[key1] = colors2[key2];
+    swappedColors[key2] = colors2[key1];
+  }
+  if (length % 2 !== 0) {
+    const middleKey = keys[Math.floor(length / 2)];
+    swappedColors[middleKey] = colors2[middleKey];
+  }
+  return swappedColors;
+}
+function removeDefaultKeys(obj) {
+  const newObj = {};
+  for (const key in obj) {
+    if (key.endsWith("-DEFAULT")) {
+      newObj[key.replace("-DEFAULT", "")] = obj[key];
+      continue;
+    }
+    newObj[key] = obj[key];
+  }
+  return newObj;
+}
+
+// src/colors/semantic.ts
+var base = {
+  light: {
+    background: {
+      DEFAULT: "#ffffff"
+    },
+    foreground: {
+      DEFAULT: "#11181C"
+    },
+    border: {
+      DEFAULT: "#00000026"
+    },
+    content1: {
+      DEFAULT: import_colors.default.zinc[50],
+      contrastText: import_colors.default.zinc[900]
+    },
+    content2: {
+      DEFAULT: import_colors.default.zinc[100],
+      contrastText: import_colors.default.zinc[800]
+    },
+    content3: {
+      DEFAULT: import_colors.default.zinc[200],
+      contrastText: import_colors.default.zinc[700]
+    },
+    content4: {
+      DEFAULT: import_colors.default.zinc[300],
+      contrastText: import_colors.default.zinc[600]
+    }
+  },
+  dark: {
+    background: {
+      DEFAULT: "#000000"
+    },
+    foreground: {
+      DEFAULT: "#ECEDEE"
+    },
+    border: {
+      DEFAULT: "#ffffff26"
+    },
+    content1: {
+      DEFAULT: import_colors.default.zinc[900],
+      contrastText: import_colors.default.zinc[50]
+    },
+    content2: {
+      DEFAULT: import_colors.default.zinc[800],
+      contrastText: import_colors.default.zinc[100]
+    },
+    content3: {
+      DEFAULT: import_colors.default.zinc[700],
+      contrastText: import_colors.default.zinc[200]
+    },
+    content4: {
+      DEFAULT: import_colors.default.zinc[600],
+      contrastText: import_colors.default.zinc[300]
+    }
+  }
+};
+var semanticColorsLight = {
+  ...base.light,
+  neutral: {
+    ...import_colors.default.zinc,
+    contrastText: (0, import_color2k.readableColor)(import_colors.default.zinc[300]),
+    DEFAULT: import_colors.default.zinc[300]
+  },
+  primary: {
+    ...commonColors.blue,
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.blue[500]
+  },
+  secondary: {
+    ...commonColors.purple,
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.purple[500]
+  },
+  success: {
+    ...commonColors.green,
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.green[500]
+  },
+  warning: {
+    ...commonColors.yellow,
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.yellow[500]
+  },
+  danger: {
+    ...commonColors.red,
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.red[500]
+  }
+};
+var semanticColorsDark = {
+  ...base.dark,
+  neutral: {
+    ...swapColorValues(import_colors.default.zinc),
+    contrastText: (0, import_color2k.readableColor)(import_colors.default.zinc[700]),
+    DEFAULT: import_colors.default.zinc[700]
+  },
+  primary: {
+    ...swapColorValues(commonColors.blue),
+    DEFAULT: commonColors.blue[500],
+    contrastText: commonColors.white
+  },
+  secondary: {
+    ...swapColorValues(commonColors.purple),
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.purple[400]
+  },
+  success: {
+    ...swapColorValues(commonColors.green),
+    contrastText: (0, import_color2k.readableColor)(commonColors.green[500]),
+    DEFAULT: commonColors.green[500]
+  },
+  warning: {
+    ...swapColorValues(commonColors.yellow),
+    contrastText: (0, import_color2k.readableColor)(commonColors.yellow[500]),
+    DEFAULT: commonColors.yellow[500]
+  },
+  danger: {
+    ...swapColorValues(commonColors.red),
+    contrastText: commonColors.white,
+    DEFAULT: commonColors.red[500]
+  }
+};
+var semanticColors = {
+  light: semanticColorsLight,
+  dark: semanticColorsDark
+};
+
+// src/colors/index.ts
+var colors = {
+  ...commonColors,
+  ...semanticColors
+};
+
+// src/animations/index.ts
+var animations = {
+  animation: {
+    "drip-expand": "drip-expand 350ms linear",
+    "spinner-ease-spin": "spinner-spin 0.8s ease infinite",
+    "spinner-linear-spin": "spinner-spin 0.8s linear infinite",
+    "appearance-in": "appearance-in 250ms ease-out normal both",
+    "appearance-out": "appearance-out 60ms ease-in normal both"
+  },
+  keyframes: {
+    "spinner-spin": {
+      "0%": {
+        transform: "rotate(0deg)"
+      },
+      "100%": {
+        transform: "rotate(360deg)"
+      }
+    },
+    "drip-expand": {
+      "0%": {
+        opacity: "0.4",
+        transform: "scale(0)"
+      },
+      "100%": {
+        opacity: "0",
+        transform: "scale(2)"
+      }
+    },
+    "appearance-in": {
+      "0%": {
+        opacity: "0",
+        transform: "translateZ(0)  scale(0.95)"
+      },
+      "60%": {
+        opacity: "0.75",
+        backfaceVisibility: "hidden",
+        webkitFontSmoothing: "antialiased",
+        transform: "translateZ(0) scale(1.05)"
+      },
+      "100%": {
+        opacity: "1",
+        transform: "translateZ(0) scale(1)"
+      }
+    },
+    "appearance-out": {
+      "0%": {
+        opacity: "1",
+        transform: "scale(1)"
+      },
+      "100%": {
+        opacity: "0",
+        transform: "scale(0.85)"
+      }
+    }
+  }
+};
+
+// src/utilities/index.ts
+var DEFAULT_TRANSITION_DURATION = "250ms";
+var utilities = {
+  ".leading-inherit": {
+    "line-height": "inherit"
+  },
+  ".bg-img-inherit": {
+    "background-image": "inherit"
+  },
+  ".bg-clip-inherit": {
+    "background-clip": "inherit"
+  },
+  ".text-fill-inherit": {
+    "-webkit-text-fill-color": "inherit"
+  },
+  ".transition-background": {
+    "transition-property": "background",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-all": {
+    "transition-property": "all",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition": {
+    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-colors": {
+    "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-opacity": {
+    "transition-property": "opacity",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-width": {
+    "transition-property": "width",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-shadow": {
+    "transition-property": "box-shadow",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-transform": {
+    "transition-property": "transform",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-transform-opacity": {
+    "transition-property": "transform, opacity",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
+  ".transition-transform-background": {
+    "transition-property": "transform, background",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  }
+};
+
+// src/utils/styles.ts
+var baseStyles = {
+  color: "hsl(var(--nextui-foreground))",
+  backgroundColor: "hsl(var(--nextui-background))"
+};
+
+// src/plugin.ts
+var SCHEME = Symbol("color-scheme");
+var VAR_PREFIX = "nextui";
+var dark = (colors2) => {
+  return {
+    [SCHEME]: "dark",
+    ...colors2
+  };
+};
+var light = (colors2) => {
+  return {
+    [SCHEME]: "light",
+    ...colors2
+  };
+};
+var resolveConfig = (config = {}) => {
+  const resolved = {
+    variants: [],
+    utilities: {},
+    colors: {}
+  };
+  const configObject = typeof config === "function" ? config({ dark, light }) : config;
+  (0, import_lodash.default)(configObject, (colors2, themeName) => {
+    const cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
+    resolved.utilities[cssSelector] = colors2[SCHEME] ? {
+      "color-scheme": colors2[SCHEME]
+    } : {};
+    const flatColors = removeDefaultKeys(
+      (0, import_flat.default)(colors2, {
+        safe: true,
+        delimiter: "-"
+      })
+    );
+    resolved.variants.push({
+      name: `theme-${themeName}`,
+      definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
+    });
+    (0, import_lodash.default)(flatColors, (colorValue, colorName) => {
+      if (colorName === SCHEME || !colorValue)
+        return;
+      try {
+        const [h, s, l, defaultAlphaValue] = (0, import_color.default)(colorValue).hsl().round().array();
+        const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
+        const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
+        resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
+        if (typeof defaultAlphaValue === "number") {
+          resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
+        }
+        resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
+          if (!isNaN(+opacityValue)) {
+            return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
+          }
+          if (opacityVariable) {
+            return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
+          }
+          return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
+        };
+      } catch (error) {
+        console.log("error", error == null ? void 0 : error.message);
+      }
+    });
+  });
+  return resolved;
+};
+var corePlugin = (config = {}) => {
+  const resolved = resolveConfig(config);
+  return (0, import_plugin.default)(
+    ({ addBase, addUtilities, addVariant }) => {
+      addBase({
+        [":root, [data-theme]"]: {
+          ...baseStyles
+        }
+      });
+      addUtilities({ ...resolved.utilities, ...utilities });
+      resolved.variants.forEach((variant) => {
+        addVariant(variant.name, variant.definition);
+      });
+    },
+    {
+      theme: {
+        extend: {
+          colors: {
+            ...commonColors,
+            ...resolved.colors
+          },
+          fontSize: {
+            tiny: "0.625rem"
+          },
+          borderWidth: {
+            1: "1px",
+            1.5: "1.5px",
+            3: "3px",
+            5: "5px"
+          },
+          transitionDuration: {
+            0: "0ms",
+            250: "250ms"
+          },
+          ...animations
+        }
+      }
+    }
+  );
+};
+var nextui = (config = {}) => {
+  const userLightColors = (0, import_lodash2.default)(config, "light", {});
+  const userDarkColors = (0, import_lodash2.default)(config, "dark", {});
+  return corePlugin({
+    light: (0, import_deepmerge.default)(semanticColors.light, userLightColors),
+    dark: (0, import_deepmerge.default)(semanticColors.dark, userDarkColors)
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  nextui,
+  resolveConfig
+});

package/dist/plugin.mjs

@@ -0,0 +1,151 @@
+import {
+  utilities
+} from "./chunk-45FXWIO6.mjs";
+import {
+  baseStyles
+} from "./chunk-IJCHUO4J.mjs";
+import "./chunk-WQEDQHKX.mjs";
+import "./chunk-7MQD7UA2.mjs";
+import {
+  semanticColors
+} from "./chunk-Y52EXP4A.mjs";
+import {
+  removeDefaultKeys
+} from "./chunk-37PIXVP4.mjs";
+import "./chunk-M63AFAHO.mjs";
+import {
+  animations
+} from "./chunk-QPN3H4E3.mjs";
+import {
+  commonColors
+} from "./chunk-CRCBVLUP.mjs";
+import "./chunk-DCEG5LGX.mjs";
+import "./chunk-L2OL7R23.mjs";
+import "./chunk-YZYGFPNK.mjs";
+import "./chunk-Y4YW5MKL.mjs";
+import "./chunk-KZJBCC2H.mjs";
+import "./chunk-T3GWIVAM.mjs";
+import "./chunk-OR5PUD24.mjs";
+
+// src/plugin.ts
+import Color from "color";
+import plugin from "tailwindcss/plugin";
+import forEach from "lodash.foreach";
+import flatten from "flat";
+import get from "lodash.get";
+import deepMerge from "deepmerge";
+var SCHEME = Symbol("color-scheme");
+var VAR_PREFIX = "nextui";
+var dark = (colors) => {
+  return {
+    [SCHEME]: "dark",
+    ...colors
+  };
+};
+var light = (colors) => {
+  return {
+    [SCHEME]: "light",
+    ...colors
+  };
+};
+var resolveConfig = (config = {}) => {
+  const resolved = {
+    variants: [],
+    utilities: {},
+    colors: {}
+  };
+  const configObject = typeof config === "function" ? config({ dark, light }) : config;
+  forEach(configObject, (colors, themeName) => {
+    const cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
+    resolved.utilities[cssSelector] = colors[SCHEME] ? {
+      "color-scheme": colors[SCHEME]
+    } : {};
+    const flatColors = removeDefaultKeys(
+      flatten(colors, {
+        safe: true,
+        delimiter: "-"
+      })
+    );
+    resolved.variants.push({
+      name: `theme-${themeName}`,
+      definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`]
+    });
+    forEach(flatColors, (colorValue, colorName) => {
+      if (colorName === SCHEME || !colorValue)
+        return;
+      try {
+        const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
+        const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
+        const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
+        resolved.utilities[cssSelector][nextuiColorVariable] = `${h} ${s}% ${l}%`;
+        if (typeof defaultAlphaValue === "number") {
+          resolved.utilities[cssSelector][nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
+        }
+        resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
+          if (!isNaN(+opacityValue)) {
+            return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
+          }
+          if (opacityVariable) {
+            return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
+          }
+          return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
+        };
+      } catch (error) {
+        console.log("error", error == null ? void 0 : error.message);
+      }
+    });
+  });
+  return resolved;
+};
+var corePlugin = (config = {}) => {
+  const resolved = resolveConfig(config);
+  return plugin(
+    ({ addBase, addUtilities, addVariant }) => {
+      addBase({
+        [":root, [data-theme]"]: {
+          ...baseStyles
+        }
+      });
+      addUtilities({ ...resolved.utilities, ...utilities });
+      resolved.variants.forEach((variant) => {
+        addVariant(variant.name, variant.definition);
+      });
+    },
+    {
+      theme: {
+        extend: {
+          colors: {
+            ...commonColors,
+            ...resolved.colors
+          },
+          fontSize: {
+            tiny: "0.625rem"
+          },
+          borderWidth: {
+            1: "1px",
+            1.5: "1.5px",
+            3: "3px",
+            5: "5px"
+          },
+          transitionDuration: {
+            0: "0ms",
+            250: "250ms"
+          },
+          ...animations
+        }
+      }
+    }
+  );
+};
+var nextui = (config = {}) => {
+  const userLightColors = get(config, "light", {});
+  const userDarkColors = get(config, "dark", {});
+  return corePlugin({
+    light: deepMerge(semanticColors.light, userLightColors),
+    dark: deepMerge(semanticColors.dark, userDarkColors)
+  });
+};
+export {
+  nextui,
+  resolveConfig
+};