@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/dist/plugin/node/chunk-G3RQ5GOB.cjs

@@ -0,0 +1,712 @@
+"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(
+  // 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 chunk_G3RQ5GOB_exports = {};
+__export(chunk_G3RQ5GOB_exports, {
+  resolveKnownPeers: () => resolveKnownPeers,
+  tailwindConfig: () => tailwindConfig
+});
+module.exports = __toCommonJS(chunk_G3RQ5GOB_exports);
+var import_forms = __toESM(require("@tailwindcss/forms"));
+var import_lodash = __toESM(require("lodash.merge"));
+var import_tailwind_scrollbar = __toESM(require("tailwind-scrollbar"));
+var import_colors = __toESM(require("tailwindcss/colors"));
+var import_config_full = __toESM(require("tailwindcss/stubs/config.full.js"));
+var import_tailwindcss_logical = __toESM(require("tailwindcss-logical"));
+var import_tailwindcss_radix = __toESM(require("tailwindcss-radix"));
+var import_colors2 = require("@ch-ui/colors");
+var import_plugin = __toESM(require("tailwindcss/plugin"));
+var import_glob = require("glob");
+var import_node_util = require("node:util");
+var shadeNumbers = (
+  /* [...Array(19)].map((_, i) => 50 + i * 50); */
+  [
+    50,
+    100,
+    150,
+    200,
+    250,
+    300,
+    350,
+    400,
+    450,
+    500,
+    550,
+    600,
+    650,
+    700,
+    750,
+    800,
+    850,
+    900,
+    950
+  ]
+);
+var broadShadeNumbers = [
+  12,
+  25,
+  37,
+  50,
+  75,
+  100,
+  125,
+  150,
+  200,
+  250,
+  300,
+  350,
+  400,
+  450,
+  500,
+  550,
+  600,
+  650,
+  700,
+  750,
+  800,
+  825,
+  850,
+  875,
+  900,
+  925,
+  950,
+  975
+];
+var dtor = Math.PI / 180;
+var paletteConfigs = {
+  red: {
+    keyColor: "#ee003b",
+    darkCp: 1,
+    lightCp: 0.13,
+    hueTorsion: 5.5 * dtor
+  },
+  orange: {
+    keyColor: "#fa6b32",
+    darkCp: 0.725,
+    lightCp: 1,
+    hueTorsion: 13 * dtor
+  },
+  amber: {
+    keyColor: "#f08c00",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 24 * dtor
+  },
+  yellow: {
+    keyColor: "#ffd900",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 32 * dtor
+  },
+  lime: {
+    keyColor: "#99c400",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: -3.5 * dtor
+  },
+  green: {
+    keyColor: "#30a908",
+    darkCp: 0.35,
+    lightCp: 0.665,
+    hueTorsion: -10.5 * dtor
+  },
+  emerald: {
+    keyColor: "#15e066",
+    darkCp: 1,
+    lightCp: 0.735,
+    hueTorsion: -7 * dtor
+  },
+  teal: {
+    keyColor: "#00a270",
+    darkCp: 1,
+    lightCp: 0.755,
+    hueTorsion: -12 * dtor
+  },
+  cyan: {
+    keyColor: "#048992",
+    darkCp: 1,
+    lightCp: 0.855,
+    hueTorsion: -15 * dtor
+  },
+  sky: {
+    keyColor: "#007bc2",
+    darkCp: 1,
+    lightCp: 0.64,
+    hueTorsion: 0
+  },
+  blue: {
+    keyColor: "#0058cb",
+    darkCp: 1,
+    lightCp: 0.495,
+    hueTorsion: -7 * dtor
+  },
+  indigo: {
+    keyColor: "#1b45c5",
+    darkCp: 0.495,
+    lightCp: 0.55,
+    hueTorsion: 0
+  },
+  violet: {
+    keyColor: "#080886",
+    darkCp: 0.195,
+    lightCp: 0.635,
+    hueTorsion: -5 * dtor
+  },
+  purple: {
+    keyColor: "#2c0073",
+    darkCp: 0,
+    lightCp: 0.63,
+    hueTorsion: 0
+  },
+  fuchsia: {
+    keyColor: "#6d0085",
+    darkCp: 1,
+    lightCp: 0.695,
+    hueTorsion: 0
+  },
+  pink: {
+    keyColor: "#a5006d",
+    darkCp: 1,
+    lightCp: 0.775,
+    hueTorsion: 0
+  },
+  rose: {
+    keyColor: "#d00054",
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 0
+  },
+  neutral: {
+    keyColor: "#707076",
+    darkCp: 0.8,
+    lightCp: 0.88,
+    hueTorsion: 0
+  },
+  primary: {
+    keyColor: "#1662d9",
+    darkCp: 0.86,
+    lightCp: 1,
+    hueTorsion: -30 * dtor
+  }
+};
+var physicalColors = Object.keys(paletteConfigs).reduce((acc, palette) => {
+  const isBroad = palette === "neutral" || palette === "primary";
+  const paletteConfig = paletteConfigs[palette];
+  const curve = (0, import_colors2.curvePathFromPalette)({
+    ...paletteConfig,
+    keyColor: (0, import_colors2.hex_to_LCH)(paletteConfig.keyColor)
+  });
+  const defaultShades = (0, import_colors2.paletteShadesFromCurve)(curve, 21, [
+    0,
+    100 * (22 / 21)
+  ], 1, 24).reverse();
+  const renderCssValue = (shadeNumber) => {
+    if (shadeNumber > 999) {
+      return "#000000";
+    } else if (shadeNumber < 1) {
+      return "#ffffff";
+    } else if (shadeNumber % 50 === 0) {
+      return (0, import_colors2.Lab_to_hex)(defaultShades[shadeNumber / 50]);
+    } else {
+      const k2 = shadeNumber % 50 / 50;
+      const k1 = 1 - k2;
+      const [l1, a1, b1] = defaultShades[Math.floor(shadeNumber / 50)];
+      const [l2, a2, b2] = defaultShades[Math.ceil(shadeNumber / 50)];
+      return (0, import_colors2.Lab_to_hex)([
+        l1 * k1 + l2 * k2,
+        a1 * k1 + a2 * k2,
+        b1 * k1 + b2 * k2
+      ]);
+    }
+  };
+  acc[palette] = (isBroad ? broadShadeNumbers : shadeNumbers).reduce((acc2, shadeNumber) => {
+    acc2[shadeNumber] = renderCssValue(shadeNumber);
+    return acc2;
+  }, {});
+  return acc;
+}, {});
+var semanticColors = {
+  scrim: {
+    light: `${physicalColors.neutral["75"]}A6`,
+    dark: `${physicalColors.neutral["900"]}A6`
+  },
+  attention: {
+    light: "#ffffff",
+    dark: physicalColors.neutral["900"]
+  },
+  deck: {
+    light: physicalColors.neutral["75"],
+    dark: physicalColors.neutral["875"]
+  },
+  base: {
+    light: physicalColors.neutral["25"],
+    dark: physicalColors.neutral["850"],
+    fg: {
+      light: "#000000",
+      dark: "#ffffff"
+    }
+  },
+  fgHover: {
+    light: physicalColors.neutral["900"],
+    dark: physicalColors.neutral["100"]
+  },
+  description: {
+    light: physicalColors.neutral["500"],
+    dark: physicalColors.neutral["400"]
+  },
+  subdued: {
+    light: physicalColors.neutral["700"],
+    dark: physicalColors.neutral["300"]
+  },
+  error: {
+    light: physicalColors.red["700"],
+    dark: physicalColors.red["300"]
+  },
+  baseGlass: {
+    light: `${physicalColors.neutral["12"]}e0`,
+    dark: `${physicalColors.neutral["850"]}e0`
+  },
+  input: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["825"]
+  },
+  modal: {
+    light: "#ffffff",
+    dark: `${physicalColors.neutral["750"]}`
+  },
+  modalSelected: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["825"]
+  },
+  hover: {
+    light: physicalColors.neutral["37"],
+    dark: physicalColors.neutral["800"]
+  },
+  accent: {
+    light: physicalColors.primary["550"],
+    dark: physicalColors.primary["550"],
+    fg: {
+      light: physicalColors.primary["550"],
+      dark: physicalColors.primary["400"]
+    }
+  },
+  accentHover: {
+    light: physicalColors.primary["600"],
+    dark: physicalColors.primary["500"]
+  },
+  accentFocusIndicator: {
+    light: physicalColors.primary["350"],
+    dark: physicalColors.primary["450"]
+  },
+  unAccent: {
+    light: physicalColors.neutral["500"],
+    dark: physicalColors.neutral["400"]
+  },
+  unAccentHover: {
+    light: physicalColors.neutral["400"],
+    dark: physicalColors.neutral["500"]
+  },
+  separator: {
+    light: physicalColors.neutral["50"],
+    dark: physicalColors.neutral["700"]
+  },
+  inverse: {
+    light: "#ffffff",
+    dark: "#ffffff"
+  },
+  transparent: {
+    light: "transparent",
+    dark: "transparent"
+  },
+  unavailable: {
+    light: physicalColors.neutral["100"],
+    dark: physicalColors.neutral["600"]
+  }
+};
+var semanticColors2 = (0, import_plugin.default)(({ addUtilities, theme, e }) => {
+  const values = theme("semanticColors");
+  const semanticColorUtilities = Object.entries(values).map(([key, value]) => {
+    return {
+      // TODO(thure): Refactor all of these tokens to simply prefix the properties they apply with `s-` as with `s-accent`.
+      [`.fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.light}`,
+        "--sticky-bg": `${value.light}`
+      },
+      [`.dark .surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.dark}`,
+        "--sticky-bg": `${value.dark}`
+      },
+      [`.separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.dark ?? value.dark}`
+      },
+      [`.s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.light ?? value.light}`
+      },
+      [`.dark .s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.dark ?? value.dark}`
+      }
+    };
+  });
+  addUtilities(semanticColorUtilities);
+});
+var tailwindConfig = ({ env = "production", content = [], extensions = [] }) => ({
+  darkMode: "class",
+  theme: {
+    // Configure fonts in theme.css and package.json.
+    fontFamily: {
+      body: [
+        "Inter Variable",
+        ...import_config_full.default.theme.fontFamily.sans
+      ],
+      mono: [
+        "JetBrains Mono Variable",
+        ...import_config_full.default.theme.fontFamily.mono
+      ]
+    },
+    extend: (0, import_lodash.default)({
+      screens: {
+        "pointer-fine": {
+          raw: "(pointer: fine)"
+        },
+        "hover-hover": {
+          raw: "(hover: hover)"
+        }
+      },
+      colors: {
+        ...physicalColors,
+        slate: import_colors.default.slate,
+        gray: import_colors.default.gray,
+        zinc: import_colors.default.zinc,
+        stone: import_colors.default.stone,
+        success: physicalColors.emerald,
+        warning: physicalColors.amber,
+        error: physicalColors.rose,
+        info: physicalColors.cyan,
+        transparent: "transparent",
+        current: "currentColor",
+        white: "#ffffff",
+        black: "#000000"
+      },
+      semanticColors,
+      fontSize: {
+        // Base size 16px
+        // Scale 1.125
+        xs: [
+          "0.790rem",
+          {
+            lineHeight: "1rem"
+          }
+        ],
+        sm: [
+          "0.889rem",
+          {
+            lineHeight: "1.25rem"
+          }
+        ],
+        base: [
+          "1rem",
+          {
+            lineHeight: "1.5rem"
+          }
+        ],
+        lg: [
+          "1.125rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        xl: [
+          "1.266rem",
+          {
+            lineHeight: "1.75rem"
+          }
+        ],
+        "2xl": [
+          "1.424rem",
+          {
+            lineHeight: "2rem"
+          }
+        ],
+        "3xl": [
+          "1.602rem",
+          {
+            lineHeight: "2.25rem"
+          }
+        ],
+        "4xl": [
+          "1.802rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "5xl": [
+          "2.027rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "6xl": [
+          "2.281rem",
+          {
+            lineHeight: "2.5rem"
+          }
+        ],
+        "7xl": [
+          "2.566rem",
+          {
+            lineHeight: "2.75rem"
+          }
+        ],
+        "8xl": [
+          "2.887rem",
+          {
+            lineHeight: "3rem"
+          }
+        ],
+        "9xl": [
+          "3.247rem",
+          {
+            lineHeight: "3.25rem"
+          }
+        ]
+      },
+      outlineWidth: {
+        3: "3px"
+      },
+      boxShadow: {
+        slider: "0 0 0 5px rgba(0, 0, 0, 0.3)"
+      },
+      transitionProperty: {
+        "max-height": "max-height"
+      },
+      keyframes: {
+        // Popper chrome
+        slideDownAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        slideUpAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        // Toast
+        "toast-hide": {
+          "0%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: "0"
+          }
+        },
+        "toast-slide-in-right": {
+          "0%": {
+            transform: "translateX(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateX(0)"
+          }
+        },
+        "toast-slide-in-bottom": {
+          "0%": {
+            transform: "translateY(calc(100% + 1rem))"
+          },
+          "100%": {
+            transform: "translateY(0)"
+          }
+        },
+        "toast-swipe-out": {
+          "0%": {
+            transform: "translateX(var(--radix-toast-swipe-end-x))"
+          },
+          "100%": {
+            transform: "translateX(calc(100% + 1rem))"
+          }
+        },
+        // Shimmer
+        "shimmer-loop": {
+          "100%": {
+            transform: "translateX(100%)"
+          }
+        },
+        "halo-pulse": {
+          "0%": {
+            opacity: 0.3
+          },
+          "5%": {
+            opacity: 1
+          },
+          "100%": {
+            opacity: 0.3
+          }
+        },
+        "progress-indeterminate": {
+          "0%": {
+            left: 0,
+            width: "0%"
+          },
+          "25%": {
+            left: "25%",
+            width: "50%"
+          },
+          "75%": {
+            left: "50%",
+            width: "100%"
+          },
+          "100%": {
+            left: "100%",
+            width: "0%"
+          }
+        }
+      },
+      animation: {
+        // Popper chrome
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        // Toast
+        "toast-hide": "toast-hide 100ms ease-in forwards",
+        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
+        spin: "spin 1.5s linear infinite",
+        "spin-slow": "spin 3s linear infinite",
+        shimmer: "shimmer-loop 2s infinite",
+        "halo-pulse": "halo-pulse 2s ease-out infinite",
+        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite"
+      }
+    }, ...extensions)
+  },
+  plugins: [
+    semanticColors2,
+    import_tailwindcss_logical.default,
+    import_forms.default,
+    (0, import_tailwindcss_radix.default)(),
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    import_tailwind_scrollbar.default
+  ],
+  ...env === "development" && {
+    mode: "jit"
+  },
+  content,
+  future: {
+    hoverOnlyWhenSupported: true
+  }
+});
+var glob = (0, import_node_util.promisify)(import_glob.glob);
+var knownIndirectPeers = [
+  "@dxos/react-*",
+  "@dxos/react-ui-*",
+  "@dxos/devtools",
+  "@dxos/shell",
+  // TODO(thure): glob v7 runs out of memory if we do a `**` search, and this is (hopefully) the only L3 content package; find a better solution.
+  "@dxos/react-ui-table/node_modules/@dxos/react-ui-searchlist"
+];
+var knownDirectPeers = [
+  "@braneframe/plugin-*",
+  ...knownIndirectPeers
+];
+var packageNamePattern = /.*node_modules\/(.+?)$/;
+var packageName = (path) => path.match(packageNamePattern)?.[1];
+var flatten = (acc, group) => [
+  ...acc,
+  ...group
+];
+var dedupe = (acc, path) => {
+  const name = packageName(path);
+  if (name && !acc[name]) {
+    acc[name] = path;
+  }
+  return acc;
+};
+var resolveKnownPeers = async (content, cwd) => {
+  const globOptions = {
+    cwd,
+    absolute: true
+  };
+  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));
+  const indirectPeers = await Promise.all(knownIndirectPeers.map((peer) => glob(`./node_modules/@braneframe/plugin-*/node_modules/${peer}`, globOptions)));
+  const knownPeerContent = Object.values(indirectPeers.reduce(flatten, []).reduce(dedupe, directPeers.reduce(flatten, []).reduce(dedupe, {}))).map((value) => `${value}/dist/lib/**/*.mjs`);
+  return [
+    ...content,
+    ...knownPeerContent
+  ];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolveKnownPeers,
+  tailwindConfig
+});
+//# sourceMappingURL=chunk-G3RQ5GOB.cjs.map