@locusgraph/brand 0.1.0 → 0.2.0

package/README.md

@@ -21,4 +21,32 @@ import { GitHubMark, GoogleMark, LocusGraphMark, LocusGraphWordmark } from "@loc
 
 The LocusGraph mark and the GitHub mark draw in the current text color, so they follow light and dark mode. The Google mark keeps Google's colors, as its brand rules require. Every mark is `aria-hidden`; put the name in visible text or an `aria-label` next to it.
 
-SVG files ship at `@locusgraph/brand/svg/locusgraph-mark.svg`, `google-mark.svg` and `github-mark.svg`.
+SVG files ship at `@locusgraph/brand/svg/locusgraph-mark.svg`, `google-mark.svg`, `github-mark.svg` and `locusgraph-icon-{dark,light,brand}.svg` (512px).
+
+## Product marks
+
+`SpendGraphWordmark` matches `LocusGraphWordmark`. `ProductWordmark` takes `product: "locusgraph" | "spendgraph"`.
+
+```tsx
+<ProductWordmark product="spendgraph" withMark />
+```
+
+## App icon
+
+`LocusGraphIcon` draws the mark on a square tile as one SVG, for favicons and app icons. `size` is in pixels (default 64) and `variant` is `dark`, `light` or `brand`. It renders in Next.js `ImageResponse`:
+
+```tsx
+import { LocusGraphIcon } from "@locusgraph/brand";
+import { ImageResponse } from "next/og";
+
+export const size = { width: 512, height: 512 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(<LocusGraphIcon size={512} variant="brand" />, size);
+}
+```
+
+## Social card
+
+`SocialCard` is a 1200×630 Open Graph image built with inline styles and flexbox only, so the same component renders in the browser and in `ImageResponse`. Props: `title`, `description`, `product`, `url` and `theme` (`dark` or `light`); `socialCardSize` and `socialCardFonts` help set up `opengraph-image.tsx`.

package/dist/icons/locusgraph-icon.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+export type LocusGraphIconVariant = "dark" | "light" | "brand";
+export declare const iconPaddingRatio = 0.18;
+export declare const iconColors: Record<LocusGraphIconVariant, {
+    tile: string;
+    mark: string;
+}>;
+type LocusGraphIconProps = Omit<React.SVGProps<SVGSVGElement>, "children"> & {
+    size?: number;
+    variant?: LocusGraphIconVariant;
+};
+export declare function LocusGraphIcon({ size, variant, style, ...props }: LocusGraphIconProps): React.JSX.Element;
+export {};

package/dist/icons/locusgraph-icon.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LocusGraphMark } from "../locusgraph-mark.js";
+import { brandGlow, brandThemes } from "../themes/brand-themes.js";
+export const iconPaddingRatio = 0.18;
+export const iconColors = {
+    dark: { tile: brandThemes.dark.background, mark: brandThemes.dark.foreground },
+    light: { tile: brandThemes.light.background, mark: brandThemes.light.foreground },
+    brand: { tile: brandGlow, mark: "#ffffff" },
+};
+const markViewBox = { width: 29, height: 26 };
+function markPathElements() {
+    return LocusGraphMark({}).props.children;
+}
+function centeredMarkTransform(size) {
+    const padding = size * iconPaddingRatio;
+    const markBox = size - padding * 2;
+    const scale = markBox / markViewBox.width;
+    const top = padding + (markBox - markViewBox.height * scale) / 2;
+    return `translate(${round(padding)} ${round(top)}) scale(${round(scale)})`;
+}
+function round(value) {
+    return Math.round(value * 1000) / 1000;
+}
+export function LocusGraphIcon({ size = 64, variant = "dark", style, ...props }) {
+    const colors = iconColors[variant];
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${size} ${size}`, width: size, height: size, role: "img", "aria-label": "LocusGraph", "data-slot": "locusgraph-icon", color: colors.mark, style: { color: colors.mark, ...style }, ...props, children: [_jsx("rect", { width: size, height: size, fill: colors.tile }), _jsx("g", { transform: centeredMarkTransform(size), fill: colors.mark, children: markPathElements() })] }));
+}

package/dist/index.d.ts

@@ -1,3 +1,9 @@
+export { iconColors, iconPaddingRatio, LocusGraphIcon, type LocusGraphIconVariant, } from "./icons/locusgraph-icon.js";
 export { LocusGraphMark } from "./locusgraph-mark.js";
+export { type Product, ProductWordmark, productNames } from "./product/product-wordmark.js";
+export { SpendGraphWordmark } from "./product/spendgraph-wordmark.js";
 export { GitHubMark, GoogleMark } from "./provider-marks.js";
+export { SocialCard, type SocialCardProps } from "./social/social-card.js";
+export { socialCardFonts, socialCardSize } from "./social/social-card-styles.js";
+export { type BrandTheme, type BrandThemeColors, brandGlow, brandThemes, dotGridStyle, } from "./themes/brand-themes.js";
 export { LocusGraphWordmark } from "./wordmark.js";

package/dist/index.js

@@ -1,3 +1,9 @@
+export { iconColors, iconPaddingRatio, LocusGraphIcon, } from "./icons/locusgraph-icon.js";
 export { LocusGraphMark } from "./locusgraph-mark.js";
+export { ProductWordmark, productNames } from "./product/product-wordmark.js";
+export { SpendGraphWordmark } from "./product/spendgraph-wordmark.js";
 export { GitHubMark, GoogleMark } from "./provider-marks.js";
+export { SocialCard } from "./social/social-card.js";
+export { socialCardFonts, socialCardSize } from "./social/social-card-styles.js";
+export { brandGlow, brandThemes, dotGridStyle, } from "./themes/brand-themes.js";
 export { LocusGraphWordmark } from "./wordmark.js";

package/dist/product/product-wordmark.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+export type Product = "locusgraph" | "spendgraph";
+export declare const productNames: Record<Product, string>;
+type ProductWordmarkProps = React.ComponentProps<"span"> & {
+    product: Product;
+    withMark?: boolean;
+};
+export declare function ProductWordmark({ product, ...props }: ProductWordmarkProps): React.JSX.Element;
+export {};

package/dist/product/product-wordmark.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LocusGraphWordmark } from "../wordmark.js";
+import { SpendGraphWordmark } from "./spendgraph-wordmark.js";
+export const productNames = {
+    locusgraph: "LocusGraph",
+    spendgraph: "SpendGraph",
+};
+export function ProductWordmark({ product, ...props }) {
+    return product === "spendgraph" ? (_jsx(SpendGraphWordmark, { ...props })) : (_jsx(LocusGraphWordmark, { ...props }));
+}

package/dist/product/spendgraph-wordmark.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+type SpendGraphWordmarkProps = React.ComponentProps<"span"> & {
+    withMark?: boolean;
+};
+export declare function SpendGraphWordmark({ withMark, className, ...props }: SpendGraphWordmarkProps): React.JSX.Element;
+export {};

package/dist/product/spendgraph-wordmark.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LocusGraphMark } from "../locusgraph-mark.js";
+export function SpendGraphWordmark({ withMark = false, className, ...props }) {
+    return (_jsxs("span", { "data-slot": "spendgraph-wordmark", className: ["inline-flex items-center gap-2 font-brand", className].filter(Boolean).join(" "), ...props, children: [withMark && _jsx(LocusGraphMark, { className: "size-[1.1em]" }), _jsxs("span", { children: [_jsx("span", { className: "font-bold", children: "spend" }), _jsx("span", { className: "font-light", children: "graph" })] })] }));
+}

package/dist/social/social-card-styles.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import { type BrandTheme } from "../themes/brand-themes.js";
+export declare const socialCardSize: {
+    readonly width: 1200;
+    readonly height: 630;
+};
+export declare const socialCardFonts: {
+    readonly brand: '"Archivo Variable", Archivo, ui-sans-serif, system-ui, sans-serif';
+    readonly body: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif';
+    readonly mono: '"Fira Code Variable", "Fira Code", ui-monospace, monospace';
+};
+export declare function socialCardStyles(theme: BrandTheme): {
+    root: React.CSSProperties;
+    brandRow: React.CSSProperties;
+    body: React.CSSProperties;
+    title: React.CSSProperties;
+    description: React.CSSProperties;
+    footer: React.CSSProperties;
+    productLabel: React.CSSProperties;
+    productDot: React.CSSProperties;
+};

package/dist/social/social-card-styles.js

@@ -0,0 +1,73 @@
+import { brandGlow, brandThemes, dotGridStyle } from "../themes/brand-themes.js";
+export const socialCardSize = { width: 1200, height: 630 };
+export const socialCardFonts = {
+    brand: '"Archivo Variable", Archivo, ui-sans-serif, system-ui, sans-serif',
+    body: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+    mono: '"Fira Code Variable", "Fira Code", ui-monospace, monospace',
+};
+export function socialCardStyles(theme) {
+    const colors = brandThemes[theme];
+    const root = {
+        ...dotGridStyle(theme, 32),
+        width: socialCardSize.width,
+        height: socialCardSize.height,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        padding: 72,
+        fontFamily: socialCardFonts.body,
+    };
+    const brandRow = {
+        display: "flex",
+        alignItems: "center",
+        gap: 16,
+        fontFamily: socialCardFonts.brand,
+        fontSize: 36,
+        color: colors.foreground,
+    };
+    const body = {
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+        maxWidth: 960,
+    };
+    const title = {
+        display: "flex",
+        fontFamily: socialCardFonts.brand,
+        fontSize: 76,
+        fontWeight: 700,
+        lineHeight: 1.05,
+        letterSpacing: -1.5,
+        color: colors.foreground,
+    };
+    const description = {
+        display: "flex",
+        fontSize: 32,
+        lineHeight: 1.35,
+        color: colors.muted,
+    };
+    const footer = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTop: `1px solid ${colors.hairline}`,
+        paddingTop: 28,
+        fontFamily: socialCardFonts.mono,
+        fontSize: 22,
+        letterSpacing: 1.2,
+        textTransform: "uppercase",
+        color: colors.muted,
+    };
+    const productLabel = {
+        display: "flex",
+        alignItems: "center",
+        gap: 14,
+        color: colors.foreground,
+    };
+    const productDot = {
+        width: 12,
+        height: 12,
+        backgroundColor: brandGlow,
+    };
+    return { root, brandRow, body, title, description, footer, productLabel, productDot };
+}

package/dist/social/social-card.d.ts

@@ -0,0 +1,9 @@
+import type { BrandTheme } from "../themes/brand-themes.js";
+export type SocialCardProps = {
+    title: string;
+    description?: string;
+    product?: string;
+    url?: string;
+    theme?: BrandTheme;
+};
+export declare function SocialCard({ title, description, product, url, theme }: SocialCardProps): import("react").JSX.Element;

package/dist/social/social-card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LocusGraphMark } from "../locusgraph-mark.js";
+import { socialCardStyles } from "./social-card-styles.js";
+export function SocialCard({ title, description, product, url, theme = "dark" }) {
+    const styles = socialCardStyles(theme);
+    const hasFooter = Boolean(product || url);
+    return (_jsxs("div", { "data-slot": "social-card", style: styles.root, children: [_jsxs("div", { style: styles.brandRow, children: [_jsx(LocusGraphMark, { width: 44, height: 40, style: { color: styles.brandRow.color } }), _jsxs("div", { style: { display: "flex" }, children: [_jsx("span", { style: { fontWeight: 700 }, children: "locus" }), _jsx("span", { style: { fontWeight: 300 }, children: "graph" })] })] }), _jsxs("div", { style: styles.body, children: [_jsx("div", { style: styles.title, children: title }), description && _jsx("div", { style: styles.description, children: description })] }), hasFooter ? (_jsxs("div", { style: styles.footer, children: [_jsxs("div", { style: styles.productLabel, children: [product && _jsx("div", { style: styles.productDot }), product && _jsx("span", { children: product })] }), url && _jsx("span", { children: url })] })) : (_jsx("div", { style: { display: "flex", height: 1 } }))] }));
+}

package/dist/svg/locusgraph-icon-brand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="LocusGraph" data-slot="locusgraph-icon" color="#ffffff" style="color:#ffffff"><rect width="512" height="512" fill="#0099ff"></rect><g transform="translate(92.16 109.109) scale(11.299)" fill="#ffffff"><path d="M 22.049 0 C 22.352 0.178 22.721 0.451 22.483 0.85 C 21.416 2.637 20.279 4.382 19.157 6.135 C 18.143 7.719 17.251 9.389 16.148 10.914 C 16.082 11.039 16.096 11.001 15.974 11.099 L 15.917 11.032 C 15.965 10.613 19.055 5.333 19.444 4.621 C 19.972 3.649 20.504 2.68 21.042 1.714 C 21.309 1.23 21.734 0.407 22.049 0 Z" fill="currentColor"></path><path d="M 12.214 14.682 L 12.302 14.75 C 12.331 14.919 12.307 15.005 12.217 15.16 C 10.19 18.637 8.271 22.171 6.308 25.684 C 6.223 25.837 6.149 25.805 5.983 25.833 C 5.69 25.554 5.513 25.442 5.748 25.033 C 6.987 22.88 8.378 20.813 9.704 18.712 C 10.54 17.386 11.332 15.972 12.214 14.682 Z" fill="currentColor"></path><path d="M 17.238 10.544 C 19.497 7.965 21.704 5.343 23.911 2.721 C 24.032 2.577 24.078 2.57 24.25 2.527 C 24.412 2.593 24.502 2.737 24.563 2.898 C 24.61 3.019 24.623 3.143 24.565 3.262 C 24.414 3.572 18.078 10.152 17.408 10.748 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.678 15.319 10.829 15.292 10.963 15.298 C 10.587 15.879 9.172 17.369 8.669 17.974 C 7.248 19.683 5.755 21.363 4.345 23.084 C 4.243 23.209 4.161 23.267 4.019 23.342 C 3.78 23.344 3.888 23.378 3.69 23.216 C 3.349 22.492 4.001 22.128 4.476 21.657 C 4.94 21.192 5.4 20.723 5.854 20.249 C 7.422 18.629 8.978 16.935 10.542 15.336 Z" fill="currentColor"></path><path d="M 10.689 14.025 L 10.837 14.081 L 10.854 14.182 C 10.588 14.428 9.983 14.865 9.666 15.11 L 6.995 17.165 L 4.222 19.347 C 3.664 19.788 2.969 20.395 2.357 20.715 C 2.188 20.562 2.157 20.553 2.114 20.341 C 2.218 19.82 9.603 14.966 10.689 14.025 Z" fill="currentColor"></path><path d="M 9.84 13.59 C 9.99 13.557 9.98 13.56 10.127 13.607 L 10.104 13.697 C 9.736 13.986 7.842 14.867 7.292 15.165 C 5.352 16.213 3.336 17.209 1.397 18.258 L 1.255 18.229 C 1.079 18.045 1.13 18.149 1.082 17.913 C 1.203 17.589 1.454 17.462 1.77 17.323 C 4.481 16.126 7.155 14.842 9.84 13.59 Z" fill="currentColor"></path><path d="M 26.832 7.658 C 27.058 7.719 27.058 7.83 27.057 8.021 C 26.945 8.234 26.764 8.35 26.554 8.459 C 23.889 9.843 20.925 10.902 18.295 12.342 C 18.164 12.343 18.214 12.348 18.087 12.29 L 18.106 12.187 C 18.515 11.852 21.631 10.316 22.288 9.988 C 23.693 9.285 25.447 8.265 26.832 7.658 Z" fill="currentColor"></path><path d="M 18.301 10.959 C 20.588 9.045 23.112 7.319 25.405 5.399 C 25.599 5.237 25.819 5.229 26.037 5.351 C 26.125 5.642 25.766 5.967 25.534 6.118 C 23.111 7.689 20.831 9.564 18.453 11.18 Z" fill="currentColor"></path><path d="M 26.857 12.403 C 27.256 12.353 27.864 12.31 28.191 12.575 L 28.161 12.665 C 27.643 12.963 25.913 13.098 25.225 13.143 C 23.705 13.243 22.193 13.489 20.686 13.628 C 20.319 13.675 19.747 13.777 19.409 13.611 C 19.799 13.337 25.875 12.614 26.857 12.403 Z" fill="currentColor"></path><path d="M 20.209 15.233 C 21.098 15.406 27.163 16.274 27.441 16.57 C 27.5 16.634 27.462 16.762 27.455 16.844 C 25.811 16.991 22.155 15.807 20.368 15.555 C 20.255 15.539 20.232 15.329 20.209 15.233 Z" fill="currentColor"></path><path d="M 1.097 9.011 C 2.753 9.138 4.54 9.686 6.171 10.021 C 6.664 10.122 7.54 10.129 7.872 10.436 L 7.817 10.507 L 7.629 10.484 C 6.861 10.454 1.006 9.601 0.699 9.277 C 0.85 9.074 0.831 9.129 1.097 9.011 Z" fill="currentColor"></path><path d="M 19.929 14.345 C 20.531 14.261 22.773 14.433 23.509 14.447 C 24.88 14.472 26.701 14.377 28.006 14.544 C 28.189 14.694 28.132 14.62 28.186 14.898 C 27.393 14.966 20.352 14.672 19.968 14.498 Z" fill="currentColor"></path><path d="M 21.442 11.964 C 23.393 11.318 25.373 10.752 27.325 10.114 C 27.464 10.069 27.586 10.09 27.711 10.152 C 27.794 10.331 27.788 10.243 27.753 10.42 C 27.504 10.661 22.024 12.155 21.343 12.31 C 21.246 12.257 21.277 12.279 21.202 12.2 Z" fill="currentColor"></path><path d="M 6.438 11.46 C 5.604 11.436 0.278 11.548 0 11.249 L 0.081 11.123 C 0.642 10.802 2.581 11.025 3.304 11.067 C 4.424 11.131 5.571 11.138 6.686 11.198 L 7.043 11.376 L 7.011 11.429 Z" fill="currentColor"></path><path d="M 5.525 12.849 L 5.425 12.867 C 4.647 13.007 0.452 13.727 0 13.413 L 0.012 13.281 C 0.407 12.849 3.256 12.722 4.017 12.652 C 4.365 12.682 5.351 12.667 5.558 12.722 Z" fill="currentColor"></path><path d="M 6.07 14.111 C 5.703 14.302 1.295 15.699 0.95 15.73 C 0.724 15.75 0.498 15.756 0.321 15.608 C 0.587 15.167 4.614 14.226 5.428 13.996 C 5.666 14.007 5.879 13.986 6.07 14.111 Z" fill="currentColor"></path><path d="M 2.103 7.547 C 2.37 7.512 2.615 7.488 2.882 7.568 C 4.572 8.079 6.24 8.756 7.895 9.374 C 7.895 9.374 7.999 9.534 8.01 9.55 C 7.478 9.61 2.359 7.953 2.103 7.547 Z" fill="currentColor"></path><path d="M 20.23 16.325 C 20.827 16.317 25.763 17.901 25.997 18.364 C 25.941 18.383 25.803 18.434 25.71 18.408 C 23.95 17.912 22.042 17.234 20.362 16.514 C 20.306 16.435 20.263 16.372 20.23 16.325 Z" fill="currentColor"></path><path d="M 3.976 6.479 C 4.269 6.453 4.739 6.535 4.984 6.691 C 5.564 7.062 8.077 8.116 8.268 8.638 C 7.408 8.583 5.063 7.133 4.187 6.745 C 4.105 6.709 4.015 6.565 3.976 6.479 Z" fill="currentColor"></path><path d="M 19.858 17.239 C 19.935 17.238 20.175 17.25 20.228 17.276 C 20.901 17.597 23.911 18.95 24.201 19.414 C 24.079 19.434 23.886 19.458 23.775 19.418 C 23.06 19.158 20.163 17.745 19.858 17.239 Z" fill="currentColor"></path><path d="M 4.017 12.652 C 4.842 12.562 8.145 12.168 8.751 12.34 L 8.764 12.384 C 8.352 12.522 5.952 12.88 5.525 12.849 L 5.558 12.722 C 5.351 12.667 4.365 12.682 4.017 12.652 Z" fill="currentColor"></path><path d="M 5.856 5.727 C 6.391 5.706 8.741 7.432 8.948 7.863 C 8.451 7.889 6.089 6.185 5.856 5.727 Z" fill="currentColor"></path><path d="M 19.427 17.991 C 19.879 18.177 21.981 19.647 22.163 20.083 C 21.673 20.114 19.716 18.51 19.22 18.13 Z" fill="currentColor"></path><path d="M 5.428 13.996 C 5.964 13.846 9.18 12.885 9.458 13.004 C 9.041 13.29 6.513 14.11 6.07 14.111 C 5.879 13.986 5.666 14.007 5.428 13.996 Z" fill="currentColor"></path><path d="M 20.131 20.47 C 19.824 20.185 18.44 19.016 18.512 18.621 C 18.719 18.58 18.639 18.58 18.863 18.698 C 19.242 19.157 20.309 20.024 20.477 20.393 L 20.406 20.479 Z" fill="currentColor"></path><path d="M 7.639 5.319 C 8.174 5.407 9.658 6.843 9.737 7.323 C 9.634 7.293 9.44 7.218 9.365 7.145 C 8.97 6.761 7.699 5.818 7.639 5.319 Z" fill="currentColor"></path><path d="M 21.343 12.31 C 20.861 12.439 19.046 13.079 18.731 12.884 C 18.949 12.657 21.034 12.088 21.442 11.964 L 21.202 12.2 C 21.277 12.279 21.246 12.257 21.343 12.31 Z" fill="currentColor"></path><path d="M 17.515 19.035 L 17.74 19.092 C 18.06 19.357 18.785 20.291 18.839 20.697 C 18.374 20.562 17.611 19.481 17.515 19.035 Z" fill="currentColor"></path><path d="M 9.342 5.191 C 9.783 5.247 10.667 6.535 10.67 6.878 C 10.281 6.753 9.349 5.564 9.342 5.191 Z" fill="currentColor"></path><path d="M 16.558 19.217 C 16.944 19.405 17.325 20.332 17.452 20.748 C 16.865 20.674 16.532 19.731 16.558 19.217 Z" fill="currentColor"></path><path d="M 10.779 5.1 C 11.249 5.294 11.704 6.237 11.639 6.722 C 11.259 6.459 10.816 5.569 10.779 5.1 Z" fill="currentColor"></path><path d="M 12.53 18.811 C 12.643 18.908 12.603 18.87 12.665 19.026 C 12.649 19.456 12.513 19.787 12.292 20.148 C 12.176 20.074 12.186 20.065 12.121 19.94 C 12.149 19.509 12.337 19.193 12.53 18.811 Z" fill="currentColor"></path><path d="M 15.966 5.7 C 16.065 5.774 16.036 5.757 16.105 5.87 C 16.061 6.339 15.927 6.578 15.683 6.965 C 15.595 6.892 15.625 6.915 15.572 6.801 C 15.607 6.379 15.733 6.051 15.966 5.7 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.786 15.068 11.228 14.506 11.592 14.501 L 11.566 14.608 L 11.587 14.504 L 11.517 14.514 L 11.456 14.76 L 11.478 14.744 L 10.963 15.298 C 10.829 15.292 10.678 15.319 10.542 15.336 Z" fill="currentColor"></path><path d="M 12.258 5.22 L 12.441 5.339 C 12.599 5.721 12.68 6.106 12.616 6.519 L 12.468 6.411 C 12.254 5.972 12.271 5.697 12.258 5.22 Z" fill="currentColor"></path><path d="M 6.686 11.198 C 7.319 11.265 7.94 11.322 8.566 11.438 C 7.969 11.508 7.035 11.58 6.438 11.46 L 7.011 11.429 L 7.043 11.376 Z" fill="currentColor"></path><path d="M 15.638 19.367 C 15.883 19.529 16.004 20.404 16.024 20.703 C 15.592 20.528 15.531 19.748 15.638 19.367 Z" fill="currentColor"></path><path d="M 14.579 19.218 L 14.676 19.319 C 14.73 19.654 14.762 20.234 14.677 20.559 C 14.33 20.195 14.401 19.646 14.579 19.218 Z" fill="currentColor"></path><path d="M 13.578 5.246 L 13.69 5.371 C 13.763 5.771 13.783 6.236 13.693 6.634 C 13.588 6.56 13.61 6.565 13.53 6.455 C 13.459 6.053 13.475 5.641 13.578 5.246 Z" fill="currentColor"></path><path d="M 18.301 10.959 L 18.453 11.18 C 17.849 11.512 17.766 11.716 17.042 11.991 C 17.408 11.629 17.89 11.278 18.301 10.959 Z" fill="currentColor"></path><path d="M 17.408 10.748 C 17.213 10.967 17.024 11.227 16.767 11.341 L 16.717 11.276 C 16.806 10.981 17.028 10.781 17.238 10.544 Z" fill="currentColor"></path></g></svg>

package/dist/svg/locusgraph-icon-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="LocusGraph" data-slot="locusgraph-icon" color="#ededed" style="color:#ededed"><rect width="512" height="512" fill="#101011"></rect><g transform="translate(92.16 109.109) scale(11.299)" fill="#ededed"><path d="M 22.049 0 C 22.352 0.178 22.721 0.451 22.483 0.85 C 21.416 2.637 20.279 4.382 19.157 6.135 C 18.143 7.719 17.251 9.389 16.148 10.914 C 16.082 11.039 16.096 11.001 15.974 11.099 L 15.917 11.032 C 15.965 10.613 19.055 5.333 19.444 4.621 C 19.972 3.649 20.504 2.68 21.042 1.714 C 21.309 1.23 21.734 0.407 22.049 0 Z" fill="currentColor"></path><path d="M 12.214 14.682 L 12.302 14.75 C 12.331 14.919 12.307 15.005 12.217 15.16 C 10.19 18.637 8.271 22.171 6.308 25.684 C 6.223 25.837 6.149 25.805 5.983 25.833 C 5.69 25.554 5.513 25.442 5.748 25.033 C 6.987 22.88 8.378 20.813 9.704 18.712 C 10.54 17.386 11.332 15.972 12.214 14.682 Z" fill="currentColor"></path><path d="M 17.238 10.544 C 19.497 7.965 21.704 5.343 23.911 2.721 C 24.032 2.577 24.078 2.57 24.25 2.527 C 24.412 2.593 24.502 2.737 24.563 2.898 C 24.61 3.019 24.623 3.143 24.565 3.262 C 24.414 3.572 18.078 10.152 17.408 10.748 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.678 15.319 10.829 15.292 10.963 15.298 C 10.587 15.879 9.172 17.369 8.669 17.974 C 7.248 19.683 5.755 21.363 4.345 23.084 C 4.243 23.209 4.161 23.267 4.019 23.342 C 3.78 23.344 3.888 23.378 3.69 23.216 C 3.349 22.492 4.001 22.128 4.476 21.657 C 4.94 21.192 5.4 20.723 5.854 20.249 C 7.422 18.629 8.978 16.935 10.542 15.336 Z" fill="currentColor"></path><path d="M 10.689 14.025 L 10.837 14.081 L 10.854 14.182 C 10.588 14.428 9.983 14.865 9.666 15.11 L 6.995 17.165 L 4.222 19.347 C 3.664 19.788 2.969 20.395 2.357 20.715 C 2.188 20.562 2.157 20.553 2.114 20.341 C 2.218 19.82 9.603 14.966 10.689 14.025 Z" fill="currentColor"></path><path d="M 9.84 13.59 C 9.99 13.557 9.98 13.56 10.127 13.607 L 10.104 13.697 C 9.736 13.986 7.842 14.867 7.292 15.165 C 5.352 16.213 3.336 17.209 1.397 18.258 L 1.255 18.229 C 1.079 18.045 1.13 18.149 1.082 17.913 C 1.203 17.589 1.454 17.462 1.77 17.323 C 4.481 16.126 7.155 14.842 9.84 13.59 Z" fill="currentColor"></path><path d="M 26.832 7.658 C 27.058 7.719 27.058 7.83 27.057 8.021 C 26.945 8.234 26.764 8.35 26.554 8.459 C 23.889 9.843 20.925 10.902 18.295 12.342 C 18.164 12.343 18.214 12.348 18.087 12.29 L 18.106 12.187 C 18.515 11.852 21.631 10.316 22.288 9.988 C 23.693 9.285 25.447 8.265 26.832 7.658 Z" fill="currentColor"></path><path d="M 18.301 10.959 C 20.588 9.045 23.112 7.319 25.405 5.399 C 25.599 5.237 25.819 5.229 26.037 5.351 C 26.125 5.642 25.766 5.967 25.534 6.118 C 23.111 7.689 20.831 9.564 18.453 11.18 Z" fill="currentColor"></path><path d="M 26.857 12.403 C 27.256 12.353 27.864 12.31 28.191 12.575 L 28.161 12.665 C 27.643 12.963 25.913 13.098 25.225 13.143 C 23.705 13.243 22.193 13.489 20.686 13.628 C 20.319 13.675 19.747 13.777 19.409 13.611 C 19.799 13.337 25.875 12.614 26.857 12.403 Z" fill="currentColor"></path><path d="M 20.209 15.233 C 21.098 15.406 27.163 16.274 27.441 16.57 C 27.5 16.634 27.462 16.762 27.455 16.844 C 25.811 16.991 22.155 15.807 20.368 15.555 C 20.255 15.539 20.232 15.329 20.209 15.233 Z" fill="currentColor"></path><path d="M 1.097 9.011 C 2.753 9.138 4.54 9.686 6.171 10.021 C 6.664 10.122 7.54 10.129 7.872 10.436 L 7.817 10.507 L 7.629 10.484 C 6.861 10.454 1.006 9.601 0.699 9.277 C 0.85 9.074 0.831 9.129 1.097 9.011 Z" fill="currentColor"></path><path d="M 19.929 14.345 C 20.531 14.261 22.773 14.433 23.509 14.447 C 24.88 14.472 26.701 14.377 28.006 14.544 C 28.189 14.694 28.132 14.62 28.186 14.898 C 27.393 14.966 20.352 14.672 19.968 14.498 Z" fill="currentColor"></path><path d="M 21.442 11.964 C 23.393 11.318 25.373 10.752 27.325 10.114 C 27.464 10.069 27.586 10.09 27.711 10.152 C 27.794 10.331 27.788 10.243 27.753 10.42 C 27.504 10.661 22.024 12.155 21.343 12.31 C 21.246 12.257 21.277 12.279 21.202 12.2 Z" fill="currentColor"></path><path d="M 6.438 11.46 C 5.604 11.436 0.278 11.548 0 11.249 L 0.081 11.123 C 0.642 10.802 2.581 11.025 3.304 11.067 C 4.424 11.131 5.571 11.138 6.686 11.198 L 7.043 11.376 L 7.011 11.429 Z" fill="currentColor"></path><path d="M 5.525 12.849 L 5.425 12.867 C 4.647 13.007 0.452 13.727 0 13.413 L 0.012 13.281 C 0.407 12.849 3.256 12.722 4.017 12.652 C 4.365 12.682 5.351 12.667 5.558 12.722 Z" fill="currentColor"></path><path d="M 6.07 14.111 C 5.703 14.302 1.295 15.699 0.95 15.73 C 0.724 15.75 0.498 15.756 0.321 15.608 C 0.587 15.167 4.614 14.226 5.428 13.996 C 5.666 14.007 5.879 13.986 6.07 14.111 Z" fill="currentColor"></path><path d="M 2.103 7.547 C 2.37 7.512 2.615 7.488 2.882 7.568 C 4.572 8.079 6.24 8.756 7.895 9.374 C 7.895 9.374 7.999 9.534 8.01 9.55 C 7.478 9.61 2.359 7.953 2.103 7.547 Z" fill="currentColor"></path><path d="M 20.23 16.325 C 20.827 16.317 25.763 17.901 25.997 18.364 C 25.941 18.383 25.803 18.434 25.71 18.408 C 23.95 17.912 22.042 17.234 20.362 16.514 C 20.306 16.435 20.263 16.372 20.23 16.325 Z" fill="currentColor"></path><path d="M 3.976 6.479 C 4.269 6.453 4.739 6.535 4.984 6.691 C 5.564 7.062 8.077 8.116 8.268 8.638 C 7.408 8.583 5.063 7.133 4.187 6.745 C 4.105 6.709 4.015 6.565 3.976 6.479 Z" fill="currentColor"></path><path d="M 19.858 17.239 C 19.935 17.238 20.175 17.25 20.228 17.276 C 20.901 17.597 23.911 18.95 24.201 19.414 C 24.079 19.434 23.886 19.458 23.775 19.418 C 23.06 19.158 20.163 17.745 19.858 17.239 Z" fill="currentColor"></path><path d="M 4.017 12.652 C 4.842 12.562 8.145 12.168 8.751 12.34 L 8.764 12.384 C 8.352 12.522 5.952 12.88 5.525 12.849 L 5.558 12.722 C 5.351 12.667 4.365 12.682 4.017 12.652 Z" fill="currentColor"></path><path d="M 5.856 5.727 C 6.391 5.706 8.741 7.432 8.948 7.863 C 8.451 7.889 6.089 6.185 5.856 5.727 Z" fill="currentColor"></path><path d="M 19.427 17.991 C 19.879 18.177 21.981 19.647 22.163 20.083 C 21.673 20.114 19.716 18.51 19.22 18.13 Z" fill="currentColor"></path><path d="M 5.428 13.996 C 5.964 13.846 9.18 12.885 9.458 13.004 C 9.041 13.29 6.513 14.11 6.07 14.111 C 5.879 13.986 5.666 14.007 5.428 13.996 Z" fill="currentColor"></path><path d="M 20.131 20.47 C 19.824 20.185 18.44 19.016 18.512 18.621 C 18.719 18.58 18.639 18.58 18.863 18.698 C 19.242 19.157 20.309 20.024 20.477 20.393 L 20.406 20.479 Z" fill="currentColor"></path><path d="M 7.639 5.319 C 8.174 5.407 9.658 6.843 9.737 7.323 C 9.634 7.293 9.44 7.218 9.365 7.145 C 8.97 6.761 7.699 5.818 7.639 5.319 Z" fill="currentColor"></path><path d="M 21.343 12.31 C 20.861 12.439 19.046 13.079 18.731 12.884 C 18.949 12.657 21.034 12.088 21.442 11.964 L 21.202 12.2 C 21.277 12.279 21.246 12.257 21.343 12.31 Z" fill="currentColor"></path><path d="M 17.515 19.035 L 17.74 19.092 C 18.06 19.357 18.785 20.291 18.839 20.697 C 18.374 20.562 17.611 19.481 17.515 19.035 Z" fill="currentColor"></path><path d="M 9.342 5.191 C 9.783 5.247 10.667 6.535 10.67 6.878 C 10.281 6.753 9.349 5.564 9.342 5.191 Z" fill="currentColor"></path><path d="M 16.558 19.217 C 16.944 19.405 17.325 20.332 17.452 20.748 C 16.865 20.674 16.532 19.731 16.558 19.217 Z" fill="currentColor"></path><path d="M 10.779 5.1 C 11.249 5.294 11.704 6.237 11.639 6.722 C 11.259 6.459 10.816 5.569 10.779 5.1 Z" fill="currentColor"></path><path d="M 12.53 18.811 C 12.643 18.908 12.603 18.87 12.665 19.026 C 12.649 19.456 12.513 19.787 12.292 20.148 C 12.176 20.074 12.186 20.065 12.121 19.94 C 12.149 19.509 12.337 19.193 12.53 18.811 Z" fill="currentColor"></path><path d="M 15.966 5.7 C 16.065 5.774 16.036 5.757 16.105 5.87 C 16.061 6.339 15.927 6.578 15.683 6.965 C 15.595 6.892 15.625 6.915 15.572 6.801 C 15.607 6.379 15.733 6.051 15.966 5.7 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.786 15.068 11.228 14.506 11.592 14.501 L 11.566 14.608 L 11.587 14.504 L 11.517 14.514 L 11.456 14.76 L 11.478 14.744 L 10.963 15.298 C 10.829 15.292 10.678 15.319 10.542 15.336 Z" fill="currentColor"></path><path d="M 12.258 5.22 L 12.441 5.339 C 12.599 5.721 12.68 6.106 12.616 6.519 L 12.468 6.411 C 12.254 5.972 12.271 5.697 12.258 5.22 Z" fill="currentColor"></path><path d="M 6.686 11.198 C 7.319 11.265 7.94 11.322 8.566 11.438 C 7.969 11.508 7.035 11.58 6.438 11.46 L 7.011 11.429 L 7.043 11.376 Z" fill="currentColor"></path><path d="M 15.638 19.367 C 15.883 19.529 16.004 20.404 16.024 20.703 C 15.592 20.528 15.531 19.748 15.638 19.367 Z" fill="currentColor"></path><path d="M 14.579 19.218 L 14.676 19.319 C 14.73 19.654 14.762 20.234 14.677 20.559 C 14.33 20.195 14.401 19.646 14.579 19.218 Z" fill="currentColor"></path><path d="M 13.578 5.246 L 13.69 5.371 C 13.763 5.771 13.783 6.236 13.693 6.634 C 13.588 6.56 13.61 6.565 13.53 6.455 C 13.459 6.053 13.475 5.641 13.578 5.246 Z" fill="currentColor"></path><path d="M 18.301 10.959 L 18.453 11.18 C 17.849 11.512 17.766 11.716 17.042 11.991 C 17.408 11.629 17.89 11.278 18.301 10.959 Z" fill="currentColor"></path><path d="M 17.408 10.748 C 17.213 10.967 17.024 11.227 16.767 11.341 L 16.717 11.276 C 16.806 10.981 17.028 10.781 17.238 10.544 Z" fill="currentColor"></path></g></svg>

package/dist/svg/locusgraph-icon-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="LocusGraph" data-slot="locusgraph-icon" color="#09090b" style="color:#09090b"><rect width="512" height="512" fill="#ffffff"></rect><g transform="translate(92.16 109.109) scale(11.299)" fill="#09090b"><path d="M 22.049 0 C 22.352 0.178 22.721 0.451 22.483 0.85 C 21.416 2.637 20.279 4.382 19.157 6.135 C 18.143 7.719 17.251 9.389 16.148 10.914 C 16.082 11.039 16.096 11.001 15.974 11.099 L 15.917 11.032 C 15.965 10.613 19.055 5.333 19.444 4.621 C 19.972 3.649 20.504 2.68 21.042 1.714 C 21.309 1.23 21.734 0.407 22.049 0 Z" fill="currentColor"></path><path d="M 12.214 14.682 L 12.302 14.75 C 12.331 14.919 12.307 15.005 12.217 15.16 C 10.19 18.637 8.271 22.171 6.308 25.684 C 6.223 25.837 6.149 25.805 5.983 25.833 C 5.69 25.554 5.513 25.442 5.748 25.033 C 6.987 22.88 8.378 20.813 9.704 18.712 C 10.54 17.386 11.332 15.972 12.214 14.682 Z" fill="currentColor"></path><path d="M 17.238 10.544 C 19.497 7.965 21.704 5.343 23.911 2.721 C 24.032 2.577 24.078 2.57 24.25 2.527 C 24.412 2.593 24.502 2.737 24.563 2.898 C 24.61 3.019 24.623 3.143 24.565 3.262 C 24.414 3.572 18.078 10.152 17.408 10.748 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.678 15.319 10.829 15.292 10.963 15.298 C 10.587 15.879 9.172 17.369 8.669 17.974 C 7.248 19.683 5.755 21.363 4.345 23.084 C 4.243 23.209 4.161 23.267 4.019 23.342 C 3.78 23.344 3.888 23.378 3.69 23.216 C 3.349 22.492 4.001 22.128 4.476 21.657 C 4.94 21.192 5.4 20.723 5.854 20.249 C 7.422 18.629 8.978 16.935 10.542 15.336 Z" fill="currentColor"></path><path d="M 10.689 14.025 L 10.837 14.081 L 10.854 14.182 C 10.588 14.428 9.983 14.865 9.666 15.11 L 6.995 17.165 L 4.222 19.347 C 3.664 19.788 2.969 20.395 2.357 20.715 C 2.188 20.562 2.157 20.553 2.114 20.341 C 2.218 19.82 9.603 14.966 10.689 14.025 Z" fill="currentColor"></path><path d="M 9.84 13.59 C 9.99 13.557 9.98 13.56 10.127 13.607 L 10.104 13.697 C 9.736 13.986 7.842 14.867 7.292 15.165 C 5.352 16.213 3.336 17.209 1.397 18.258 L 1.255 18.229 C 1.079 18.045 1.13 18.149 1.082 17.913 C 1.203 17.589 1.454 17.462 1.77 17.323 C 4.481 16.126 7.155 14.842 9.84 13.59 Z" fill="currentColor"></path><path d="M 26.832 7.658 C 27.058 7.719 27.058 7.83 27.057 8.021 C 26.945 8.234 26.764 8.35 26.554 8.459 C 23.889 9.843 20.925 10.902 18.295 12.342 C 18.164 12.343 18.214 12.348 18.087 12.29 L 18.106 12.187 C 18.515 11.852 21.631 10.316 22.288 9.988 C 23.693 9.285 25.447 8.265 26.832 7.658 Z" fill="currentColor"></path><path d="M 18.301 10.959 C 20.588 9.045 23.112 7.319 25.405 5.399 C 25.599 5.237 25.819 5.229 26.037 5.351 C 26.125 5.642 25.766 5.967 25.534 6.118 C 23.111 7.689 20.831 9.564 18.453 11.18 Z" fill="currentColor"></path><path d="M 26.857 12.403 C 27.256 12.353 27.864 12.31 28.191 12.575 L 28.161 12.665 C 27.643 12.963 25.913 13.098 25.225 13.143 C 23.705 13.243 22.193 13.489 20.686 13.628 C 20.319 13.675 19.747 13.777 19.409 13.611 C 19.799 13.337 25.875 12.614 26.857 12.403 Z" fill="currentColor"></path><path d="M 20.209 15.233 C 21.098 15.406 27.163 16.274 27.441 16.57 C 27.5 16.634 27.462 16.762 27.455 16.844 C 25.811 16.991 22.155 15.807 20.368 15.555 C 20.255 15.539 20.232 15.329 20.209 15.233 Z" fill="currentColor"></path><path d="M 1.097 9.011 C 2.753 9.138 4.54 9.686 6.171 10.021 C 6.664 10.122 7.54 10.129 7.872 10.436 L 7.817 10.507 L 7.629 10.484 C 6.861 10.454 1.006 9.601 0.699 9.277 C 0.85 9.074 0.831 9.129 1.097 9.011 Z" fill="currentColor"></path><path d="M 19.929 14.345 C 20.531 14.261 22.773 14.433 23.509 14.447 C 24.88 14.472 26.701 14.377 28.006 14.544 C 28.189 14.694 28.132 14.62 28.186 14.898 C 27.393 14.966 20.352 14.672 19.968 14.498 Z" fill="currentColor"></path><path d="M 21.442 11.964 C 23.393 11.318 25.373 10.752 27.325 10.114 C 27.464 10.069 27.586 10.09 27.711 10.152 C 27.794 10.331 27.788 10.243 27.753 10.42 C 27.504 10.661 22.024 12.155 21.343 12.31 C 21.246 12.257 21.277 12.279 21.202 12.2 Z" fill="currentColor"></path><path d="M 6.438 11.46 C 5.604 11.436 0.278 11.548 0 11.249 L 0.081 11.123 C 0.642 10.802 2.581 11.025 3.304 11.067 C 4.424 11.131 5.571 11.138 6.686 11.198 L 7.043 11.376 L 7.011 11.429 Z" fill="currentColor"></path><path d="M 5.525 12.849 L 5.425 12.867 C 4.647 13.007 0.452 13.727 0 13.413 L 0.012 13.281 C 0.407 12.849 3.256 12.722 4.017 12.652 C 4.365 12.682 5.351 12.667 5.558 12.722 Z" fill="currentColor"></path><path d="M 6.07 14.111 C 5.703 14.302 1.295 15.699 0.95 15.73 C 0.724 15.75 0.498 15.756 0.321 15.608 C 0.587 15.167 4.614 14.226 5.428 13.996 C 5.666 14.007 5.879 13.986 6.07 14.111 Z" fill="currentColor"></path><path d="M 2.103 7.547 C 2.37 7.512 2.615 7.488 2.882 7.568 C 4.572 8.079 6.24 8.756 7.895 9.374 C 7.895 9.374 7.999 9.534 8.01 9.55 C 7.478 9.61 2.359 7.953 2.103 7.547 Z" fill="currentColor"></path><path d="M 20.23 16.325 C 20.827 16.317 25.763 17.901 25.997 18.364 C 25.941 18.383 25.803 18.434 25.71 18.408 C 23.95 17.912 22.042 17.234 20.362 16.514 C 20.306 16.435 20.263 16.372 20.23 16.325 Z" fill="currentColor"></path><path d="M 3.976 6.479 C 4.269 6.453 4.739 6.535 4.984 6.691 C 5.564 7.062 8.077 8.116 8.268 8.638 C 7.408 8.583 5.063 7.133 4.187 6.745 C 4.105 6.709 4.015 6.565 3.976 6.479 Z" fill="currentColor"></path><path d="M 19.858 17.239 C 19.935 17.238 20.175 17.25 20.228 17.276 C 20.901 17.597 23.911 18.95 24.201 19.414 C 24.079 19.434 23.886 19.458 23.775 19.418 C 23.06 19.158 20.163 17.745 19.858 17.239 Z" fill="currentColor"></path><path d="M 4.017 12.652 C 4.842 12.562 8.145 12.168 8.751 12.34 L 8.764 12.384 C 8.352 12.522 5.952 12.88 5.525 12.849 L 5.558 12.722 C 5.351 12.667 4.365 12.682 4.017 12.652 Z" fill="currentColor"></path><path d="M 5.856 5.727 C 6.391 5.706 8.741 7.432 8.948 7.863 C 8.451 7.889 6.089 6.185 5.856 5.727 Z" fill="currentColor"></path><path d="M 19.427 17.991 C 19.879 18.177 21.981 19.647 22.163 20.083 C 21.673 20.114 19.716 18.51 19.22 18.13 Z" fill="currentColor"></path><path d="M 5.428 13.996 C 5.964 13.846 9.18 12.885 9.458 13.004 C 9.041 13.29 6.513 14.11 6.07 14.111 C 5.879 13.986 5.666 14.007 5.428 13.996 Z" fill="currentColor"></path><path d="M 20.131 20.47 C 19.824 20.185 18.44 19.016 18.512 18.621 C 18.719 18.58 18.639 18.58 18.863 18.698 C 19.242 19.157 20.309 20.024 20.477 20.393 L 20.406 20.479 Z" fill="currentColor"></path><path d="M 7.639 5.319 C 8.174 5.407 9.658 6.843 9.737 7.323 C 9.634 7.293 9.44 7.218 9.365 7.145 C 8.97 6.761 7.699 5.818 7.639 5.319 Z" fill="currentColor"></path><path d="M 21.343 12.31 C 20.861 12.439 19.046 13.079 18.731 12.884 C 18.949 12.657 21.034 12.088 21.442 11.964 L 21.202 12.2 C 21.277 12.279 21.246 12.257 21.343 12.31 Z" fill="currentColor"></path><path d="M 17.515 19.035 L 17.74 19.092 C 18.06 19.357 18.785 20.291 18.839 20.697 C 18.374 20.562 17.611 19.481 17.515 19.035 Z" fill="currentColor"></path><path d="M 9.342 5.191 C 9.783 5.247 10.667 6.535 10.67 6.878 C 10.281 6.753 9.349 5.564 9.342 5.191 Z" fill="currentColor"></path><path d="M 16.558 19.217 C 16.944 19.405 17.325 20.332 17.452 20.748 C 16.865 20.674 16.532 19.731 16.558 19.217 Z" fill="currentColor"></path><path d="M 10.779 5.1 C 11.249 5.294 11.704 6.237 11.639 6.722 C 11.259 6.459 10.816 5.569 10.779 5.1 Z" fill="currentColor"></path><path d="M 12.53 18.811 C 12.643 18.908 12.603 18.87 12.665 19.026 C 12.649 19.456 12.513 19.787 12.292 20.148 C 12.176 20.074 12.186 20.065 12.121 19.94 C 12.149 19.509 12.337 19.193 12.53 18.811 Z" fill="currentColor"></path><path d="M 15.966 5.7 C 16.065 5.774 16.036 5.757 16.105 5.87 C 16.061 6.339 15.927 6.578 15.683 6.965 C 15.595 6.892 15.625 6.915 15.572 6.801 C 15.607 6.379 15.733 6.051 15.966 5.7 Z" fill="currentColor"></path><path d="M 10.542 15.336 C 10.786 15.068 11.228 14.506 11.592 14.501 L 11.566 14.608 L 11.587 14.504 L 11.517 14.514 L 11.456 14.76 L 11.478 14.744 L 10.963 15.298 C 10.829 15.292 10.678 15.319 10.542 15.336 Z" fill="currentColor"></path><path d="M 12.258 5.22 L 12.441 5.339 C 12.599 5.721 12.68 6.106 12.616 6.519 L 12.468 6.411 C 12.254 5.972 12.271 5.697 12.258 5.22 Z" fill="currentColor"></path><path d="M 6.686 11.198 C 7.319 11.265 7.94 11.322 8.566 11.438 C 7.969 11.508 7.035 11.58 6.438 11.46 L 7.011 11.429 L 7.043 11.376 Z" fill="currentColor"></path><path d="M 15.638 19.367 C 15.883 19.529 16.004 20.404 16.024 20.703 C 15.592 20.528 15.531 19.748 15.638 19.367 Z" fill="currentColor"></path><path d="M 14.579 19.218 L 14.676 19.319 C 14.73 19.654 14.762 20.234 14.677 20.559 C 14.33 20.195 14.401 19.646 14.579 19.218 Z" fill="currentColor"></path><path d="M 13.578 5.246 L 13.69 5.371 C 13.763 5.771 13.783 6.236 13.693 6.634 C 13.588 6.56 13.61 6.565 13.53 6.455 C 13.459 6.053 13.475 5.641 13.578 5.246 Z" fill="currentColor"></path><path d="M 18.301 10.959 L 18.453 11.18 C 17.849 11.512 17.766 11.716 17.042 11.991 C 17.408 11.629 17.89 11.278 18.301 10.959 Z" fill="currentColor"></path><path d="M 17.408 10.748 C 17.213 10.967 17.024 11.227 16.767 11.341 L 16.717 11.276 C 16.806 10.981 17.028 10.781 17.238 10.544 Z" fill="currentColor"></path></g></svg>

package/dist/themes/brand-themes.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+export type BrandTheme = "dark" | "light";
+export type BrandThemeColors = {
+    background: string;
+    foreground: string;
+    muted: string;
+    hairline: string;
+    dot: string;
+};
+export declare const brandGlow = "#0099ff";
+export declare const brandThemes: Record<BrandTheme, BrandThemeColors>;
+export declare function dotGridStyle(theme: BrandTheme, spacing?: number): React.CSSProperties;

package/dist/themes/brand-themes.js

@@ -0,0 +1,26 @@
+export const brandGlow = "#0099ff";
+export const brandThemes = {
+    dark: {
+        background: "#101011",
+        foreground: "#ededed",
+        muted: "#a1a1aa",
+        hairline: "rgba(237, 237, 237, 0.1)",
+        dot: "rgba(237, 237, 237, 0.14)",
+    },
+    light: {
+        background: "#ffffff",
+        foreground: "#09090b",
+        muted: "#71717a",
+        hairline: "rgba(9, 9, 11, 0.09)",
+        dot: "rgba(9, 9, 11, 0.12)",
+    },
+};
+export function dotGridStyle(theme, spacing = 24) {
+    const colors = brandThemes[theme];
+    return {
+        backgroundColor: colors.background,
+        backgroundImage: `radial-gradient(circle, ${colors.dot} 1.5px, transparent 1.5px)`,
+        backgroundSize: `${spacing}px ${spacing}px`,
+        color: colors.foreground,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/brand",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "LocusGraph logo, wordmark and sign-in provider marks as React components and SVG files.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@locusgraph/config": "0.1.0",
+    "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
@@ -43,7 +43,7 @@
     "vitest": "^5.0.3"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node scripts/write-svg.mjs",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/esm-extensions.mjs dist && node scripts/write-svg.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   }