@graphysdk/theme-gamma 0.0.0-stage → 0.1.0

package/dist/mushroom/mushroom.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@graphysdk/react';
+/**
+ * Graphs in Gamma's mushroom forest under a summer sky. A bar grows as a mushroom: a speckled cap
+ * whose crown is the value, its gilled underside showing below the rim, on a stippled stalk. A pie is
+ * the underside of a cap with its gills running round it and its stalk in the middle, and a reading
+ * on a line or a scatter is a little cap sitting on it. Groups take the caps' colours. Drawn for the
+ * light scheme only.
+ *
+ * Headings are set in Plus Jakarta Sans and text in Inter, standing in for Gamma's own faces. Import
+ * `@graphysdk/theme-gamma/fonts.css` once to load them.
+ *
+ * @example
+ *   const kit = createGraphyKit({ theme: gammaMushroom });
+ */
+export declare const gammaMushroom: Theme;

package/dist/mushroom/renderer/area.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Each area speckled like a cap, its edge along its readings drawn in the cap's deeper rim colour. */
+export declare const mushroomArea: ResolvedGeomRenderer;
+/** A filled radar, speckled like a cap. */
+export declare const mushroomRadarArea: ResolvedGeomRenderer;

package/dist/mushroom/renderer/bar.d.ts

@@ -0,0 +1,7 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/**
+ * Each bar grows as one of Gamma's mushrooms: a speckled cap whose crown is the value, its gilled
+ * underside showing below the rim, on a stippled stalk that tapers up from the foot. In a stack the
+ * slabs are the caps' colours and only the top one is crowned.
+ */
+export declare const mushroomBar: ResolvedGeomRenderer;

package/dist/mushroom/renderer/cap.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface MiniCapProps {
+    cx: number;
+    cy: number;
+    /** Across the cap at its rim. */
+    width: number;
+    color: string;
+    opacity?: number;
+    edge?: {
+        stroke: string;
+        strokeWidth: number;
+    };
+}
+/**
+ * A small mushroom cap centred on a reading: a dome in `color` over a sliver of pale gilled underside,
+ * the reading at the middle of the dome so the cap sits on it whichever way it is read.
+ */
+export declare const MiniCap: ({ cx, cy, width, color, opacity, edge }: MiniCapProps) => ReactNode;
+export {};

package/dist/mushroom/renderer/line.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** A line with a little mushroom cap sitting on each reading. */
+export declare const mushroomLine: ResolvedGeomRenderer;
+/** A radar's outline, closed, with a cap at each reading. */
+export declare const mushroomRadarLine: ResolvedGeomRenderer;

package/dist/mushroom/renderer/plugins.d.ts

@@ -0,0 +1,8 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/**
+ * Every built-in geom the mushroom theme repaints, under each coordinate system it is drawn in. A
+ * tile keeps the built-in renderer, rounded by the stylesheet, since a heatmap reads from its colours.
+ * Positions, scales and axes come from the compiled layer unchanged, and colour and opacity come from
+ * the stylesheet.
+ */
+export declare const mushroomPlugins: readonly ResolvedGeomRenderer[];

package/dist/mushroom/renderer/point.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Scatter and bubble: a mushroom cap centred on each reading. */
+export declare const mushroomPoint: ResolvedGeomRenderer;
+/** A radar's vertices as caps. */
+export declare const mushroomRadarPoint: ResolvedGeomRenderer;

package/dist/mushroom/renderer/slice.d.ts

@@ -0,0 +1,6 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/**
+ * Pie, donut, rose and radial bar as the underside of a mushroom cap: each slice scored with gills
+ * that run on from slice to slice, pale towards the middle, and a pie's stalk rising from its centre.
+ */
+export declare const mushroomSlice: ResolvedGeomRenderer;

package/dist/mushroom/renderer/texture.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export declare const STALK_COLORS: {
+    readonly shade: "#138F6E";
+    readonly body: "#2FB27A";
+    readonly sunlit: "#C2DC5E";
+    readonly stipple: "#0B6B50";
+};
+export declare const GILL_COLORS: {
+    readonly underside: "#F8CCD8";
+    readonly gill: "#DE8FAA";
+};
+interface DotsProps {
+    id: string;
+    color: string;
+    opacity: number;
+    count: number;
+    seed: number;
+    /** The largest dot's radius. */
+    largest: number;
+}
+export declare const DotPattern: ({ id, color, opacity, count, seed, largest }: DotsProps) => ReactNode;
+/** The white speckles over a cap. */
+export declare const Speckles: ({ id }: {
+    id: string;
+}) => ReactNode;
+/** The darker stipple over a stalk. */
+export declare const Stipple: ({ id }: {
+    id: string;
+}) => ReactNode;
+/** A cap in `color`, sunlit at its crown and deepening towards violet at its rim, as Gamma's are. */
+export declare const CapGradient: ({ id, color }: {
+    id: string;
+    color: string;
+}) => ReactNode;
+/** A stalk in shade on one side and in sun on the other. */
+export declare const StalkGradient: ({ id }: {
+    id: string;
+}) => ReactNode;
+export {};

package/dist/mushroom/styles.d.ts

@@ -0,0 +1,31 @@
+import { Stylesheet } from '@graphysdk/react';
+export declare const MUSHROOM_COLORS: {
+    readonly sky: "#84C1FA";
+    readonly haze: "#AFE7FC";
+    readonly mist: "#E8EEFC";
+    readonly ground: "#FFFFFF";
+    readonly raised: "#FFFFFF";
+    readonly text: "#002253";
+    readonly secondary: "#4B5A78";
+    readonly accent: "#0540AD";
+    readonly rule: "rgba(0, 34, 83, 0.55)";
+    readonly grid: "rgba(255, 255, 255, 0.75)";
+};
+/** The caps of Gamma's mushrooms: coral red, violet blue, pink, a sunset orange and a purple. */
+export declare const MUSHROOM_HUES: {
+    readonly coral: "#FF5D73";
+    readonly violet: "#6B5BE2";
+    readonly pink: "#F26DB5";
+    readonly orange: "#FF9A3C";
+    readonly purple: "#B05CE0";
+    readonly teal: "#1FA88A";
+};
+export declare const MUSHROOM_PALETTE: readonly string[];
+/** For a colour that stands for a number: from the gills' pale pink through coral to violet. */
+export declare const MUSHROOM_COLORMAP: readonly string[];
+/**
+ * Gamma's summer sky inside the graph, fading from blue to white, with no frame round it. Grid lines
+ * are drawn in white across the sky, the baseline is the ground the mushrooms stand on, and headings
+ * are set heavy and tight in Gamma's navy.
+ */
+export declare const mushroomStyles: Stylesheet;

package/dist/night/night.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@graphysdk/react';
+/**
+ * Graphs in the night sky behind Gamma's wordmark: navy fading to indigo, scattered with stars. Every
+ * shape is filled as the wordmark is, a pale glass most solid at its top and thinning as it falls so
+ * the stars show through: bars and slices have softened corners, and a line is a broad ribbon whose readings are the stars along it. Drawn for
+ * the dark scheme only.
+ *
+ * Headings are set in Plus Jakarta Sans and text in Inter, standing in for Gamma's own faces. Import
+ * `@graphysdk/theme-gamma/fonts.css` once to load them.
+ *
+ * @example
+ *   const kit = createGraphyKit({ theme: gammaNight });
+ */
+export declare const gammaNight: Theme;

package/dist/night/renderer/area.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Each area a sheet of the wordmark's glass, fading as it falls, with a bright edge along its readings. */
+export declare const nightArea: ResolvedGeomRenderer;
+/** A filled radar as a sheet of glass with a bright edge. */
+export declare const nightRadarArea: ResolvedGeomRenderer;

package/dist/night/renderer/bar.d.ts

@@ -0,0 +1,3 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Each bar a stroke of the wordmark: glass with softened top corners, most solid at its top, the stars showing through its foot. */
+export declare const nightBar: ResolvedGeomRenderer;

package/dist/night/renderer/corner.d.ts

@@ -0,0 +1,2 @@
+/** The bend at the outer end of a bar or slice, in pixels, so both are softened alike. */
+export declare const CORNER_RADIUS_PX = 6;

package/dist/night/renderer/glass.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { PixelSize } from '../../shared/utils/projections';
+/** Which way the light falls across the panel: down a column chart, leftwards along a bar chart. */
+export type Fall = 'down' | 'left';
+interface GlassGradientsProps {
+    idFor: (color: string) => string;
+    colors: Iterable<string>;
+    panel: PixelSize;
+    fall: Fall;
+    /** How solid the glass is overall, before it fades. */
+    strength?: number;
+}
+/**
+ * One gradient per colour, laid across the whole panel rather than each shape, as the wordmark's is
+ * across all its letters: a tall shape is more solid at its top than a short one.
+ */
+export declare const GlassGradients: ({ idFor, colors, panel, fall, strength }: GlassGradientsProps) => ReactNode;
+export {};

package/dist/night/renderer/line.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** A line as a broad glass ribbon with a fine bright thread down its middle and a star at each reading. */
+export declare const nightLine: ResolvedGeomRenderer;
+/** A radar's outline as a closed ribbon, a star at each reading. */
+export declare const nightRadarLine: ResolvedGeomRenderer;

package/dist/night/renderer/plugins.d.ts

@@ -0,0 +1,8 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/**
+ * Every built-in geom the night theme repaints, under each coordinate system it is drawn in. A tile
+ * keeps the built-in renderer, rounded by the stylesheet: a heatmap reads from its colours, which glass
+ * that fades would muddy. Positions, scales and axes come from the compiled layer unchanged, and
+ * colour and opacity come from the stylesheet.
+ */
+export declare const nightPlugins: readonly ResolvedGeomRenderer[];

package/dist/night/renderer/point.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Scatter and bubble: a star at each reading. */
+export declare const nightPoint: ResolvedGeomRenderer;
+/** A radar's vertices as stars. */
+export declare const nightRadarPoint: ResolvedGeomRenderer;

package/dist/night/renderer/slice.d.ts

@@ -0,0 +1,3 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+/** Pie, donut, radial bar and rose as glass slices. */
+export declare const nightSlice: ResolvedGeomRenderer;

package/dist/night/renderer/star.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface StarProps {
+    cx: number;
+    cy: number;
+    /** From the middle to the tip of each point. */
+    reach: number;
+    color: string;
+    opacity?: number;
+}
+/** A four-pointed star in `color`, burning white in its middle, with a soft halo round it. */
+export declare const Star: ({ cx, cy, reach, color, opacity }: StarProps) => ReactNode;
+export {};

package/dist/night/sky.d.ts

@@ -0,0 +1,5 @@
+export interface SkyStop {
+    offset: number;
+    color: string;
+}
+export declare const buildNightSky: (stops: readonly SkyStop[], starColor: string) => string;

package/dist/night/styles.d.ts

@@ -0,0 +1,30 @@
+import { Stylesheet } from '@graphysdk/react';
+export declare const NIGHT_COLORS: {
+    readonly zenith: "#122547";
+    readonly dusk: "#31347A";
+    readonly horizon: "#405199";
+    readonly raised: "#1B2A5C";
+    readonly text: "#EEF2FE";
+    readonly secondary: "#AAB5E6";
+    readonly rule: "rgba(170, 181, 230, 0.6)";
+    readonly grid: "rgba(170, 181, 230, 0.13)";
+    readonly star: "#FFFFFF";
+};
+/** The wordmark's own pale lavender, then colours lit against the night: Gamma's sky blue, and the mushrooms' pink, mint and gold. */
+export declare const NIGHT_HUES: {
+    readonly wordmark: "#B9C3FF";
+    readonly sky: "#6CAEEE";
+    readonly petal: "#FF8FB8";
+    readonly mint: "#5FE0C1";
+    readonly gold: "#FFD66B";
+    readonly coral: "#FF8A65";
+};
+export declare const NIGHT_PALETTE: readonly string[];
+/** For a colour that stands for a number: from the deep sky to the wordmark's palest glass. */
+export declare const NIGHT_COLORMAP: readonly string[];
+/**
+ * Gamma's night sky inside the graph, starred and fading from navy to indigo, with no frame round it.
+ * The rule under the wordmark is the baseline, a faint grid sits behind, and headings are set heavy and
+ * tight, as Gamma's are.
+ */
+export declare const nightStyles: Stylesheet;

package/dist/shared/bar-frame.d.ts

@@ -0,0 +1,22 @@
+import { MainAxis, Observation, XYPoint } from '@graphysdk/react';
+import { PixelSize } from './utils/projections';
+export interface BarFrame {
+    /** Across the band. */
+    breadth: number;
+    /** Along the value, from the foot. */
+    length: number;
+    /** Whether the bar ends its stack, so its value's end is its own to shape. */
+    endsStack: boolean;
+    /** A point across and along the bar, in panel pixels. */
+    at: (across: number, along: number) => XYPoint;
+}
+/** A bar part way through its entrance: `growth` of the way from `baseline` to its value. */
+export interface BarGrowth {
+    /** Where the bars grow from, as a top-left `[0, 1]` position along the value axis. */
+    baseline: number;
+    growth: number;
+}
+/** A bar's frame in panel pixels, drawn in from any edge it shares with a neighbour in its stack. */
+export declare const readBarFrame: (observation: Observation, mainAxis: MainAxis, panel: PixelSize, stackGap: number, growth?: BarGrowth) => BarFrame | null;
+/** A path through local points: `M` at the first, `L` to each plain point, `C` through each triple. */
+export declare const toBarPath: (frame: BarFrame, segments: ReadonlyArray<ReadonlyArray<[number, number]>>) => string;

package/dist/shared/ink.d.ts

@@ -0,0 +1,10 @@
+/** `color` moved `amount` of the way to `target`; a colour either cannot read is returned as it is. */
+export declare const mixColors: (color: string, target: string, amount: number) => string;
+/** An id a `url()` can name: React's own holds characters one cannot. */
+export declare const useDefId: (prefix: string) => string;
+/** Ids for one definition per colour under one prefix, for shapes that share a gradient or a pattern. */
+export declare const useColorIds: (prefix: string) => ((color: string) => string);
+/** A number from a string, so a shape's speckles fall the same way every time it is drawn. */
+export declare const hashSeed: (text: string) => number;
+/** Numbers in `[0, 1)` from a seed, the same run of them for the same seed. */
+export declare const createRandom: (seed: number) => (() => number);

package/dist/shared/intro.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { GrowIntroPlan, LayerIntroPlan } from '@graphysdk/react';
+/** How far a shape has grown towards its value, by its stable key: 0 at the baseline, 1 at rest. */
+export type ReadGrowth = (key: string) => number;
+export interface IntroGrowth {
+    /** The grow plan being played; absent when the layer enters some other way or is at rest. */
+    plan: GrowIntroPlan | null;
+    readGrowth: ReadGrowth;
+}
+/** A layer's grow entrance, played on its own clock. */
+export declare const useIntroGrowth: (intro: LayerIntroPlan | null | undefined) => IntroGrowth;
+/** A position part way from the baseline to where it rests. */
+export declare const growFrom: (baseline: number, value: number, growth: number) => number;
+interface IntroRevealProps {
+    intro: LayerIntroPlan | null | undefined;
+    children: ReactNode;
+}
+/** The entrances a layer plays whole rather than shape by shape: a wipe along a line, or a fade. */
+export declare const IntroReveal: ({ intro, children }: IntroRevealProps) => ReactNode;
+export {};

package/dist/shared/paint.d.ts

@@ -0,0 +1,21 @@
+import { Observation, SceneLayerFor, StyleState } from '@graphysdk/react';
+/** What a filled shape is drawn with. */
+export interface ShapePaint {
+    color: string;
+    opacity: number;
+    fillOpacity: number;
+    /** The edge that parts it from its neighbours, or rules it when hovered. */
+    edge: string;
+    edgeWidth: number;
+}
+/** What a line is drawn with. Its rails take `color`; the ground shows between them. */
+export interface LinePaint {
+    color: string;
+    opacity: number;
+    width: number;
+    dashArray: string | undefined;
+}
+export type ReadShapePaint = (observation: Observation, state?: StyleState) => ShapePaint;
+export type ReadLinePaint = (observation: Observation, state?: StyleState) => LinePaint;
+export declare const useShapePaint: (layer: SceneLayerFor<"bar" | "point" | "tile" | "area">) => ReadShapePaint;
+export declare const useLinePaint: (layer: SceneLayerFor<"line">) => ReadLinePaint;

package/dist/shared/slice-extent.d.ts

@@ -0,0 +1,12 @@
+import { GrowIntroPlan, Observation } from '@graphysdk/react';
+export interface SliceExtent {
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+}
+/**
+ * A slice's angles and unit radii, part way through its entrance when one is playing: a pie sweeps
+ * round from its start angle, a rose reaches out from its inner radius.
+ */
+export declare const readSliceExtent: (observation: Observation, plan: GrowIntroPlan | null, growth: number) => SliceExtent | null;

package/dist/shared/trace.d.ts

@@ -0,0 +1,19 @@
+import { Observation, SceneLayer, XYPoint } from '@graphysdk/react';
+import { PixelSize, Projection } from './utils/projections';
+/** One group's path in panel pixels, with the observation its paint is read for. */
+export interface Trace {
+    key: string;
+    path: string;
+    observation: Observation;
+}
+/** One trace per group, from whatever turns a group's observations into its path. */
+export declare const readTraces: (layer: SceneLayer, buildPath: (observations: Observation[]) => string | null) => Trace[];
+/** A radar group's vertices in panel pixels, in angular order so its outline never crosses itself. */
+export declare const readRadarPoints: (observations: Observation[], panel: PixelSize) => XYPoint[];
+export declare const buildRadarPath: (observations: Observation[], panel: PixelSize) => string | null;
+/** Each reading of every group in panel pixels, with the observation it is read from. */
+export declare const readReadings: (layer: SceneLayer, panel: PixelSize, project: Projection) => Array<{
+    key: string;
+    observation: Observation;
+    point: XYPoint;
+}>;

package/dist/shared/utils/paths.d.ts

@@ -0,0 +1,7 @@
+import { PixelSize } from './projections';
+/**
+ * A path written in the unit square, in the panel's pixels. A shape is measured in pixels on every
+ * side, which a path stretched by a transform is not. Reads the commands a line or an area is written
+ * in; an arc is not one of them.
+ */
+export declare const scalePathToPanel: (path: string, panel: PixelSize) => string;

package/dist/shared/utils/projections.d.ts

@@ -0,0 +1,16 @@
+import { Observation, XYPoint } from '@graphysdk/react';
+export interface PixelSize {
+    width: number;
+    height: number;
+}
+export interface PixelRect extends PixelSize {
+    x: number;
+    y: number;
+}
+/** Where an observation is drawn in the panel, in pixels; `null` for one missing a position. */
+export type Projection = (observation: Observation, panel: PixelSize) => XYPoint | null;
+export declare const projectCartesian: Projection;
+export declare const projectPolar: Projection;
+/** The whole panel, for a shape that may reach any part of it. */
+export declare const toPanelBounds: (panel: PixelSize) => PixelRect;
+export declare const toClosedPath: (points: XYPoint[]) => string;

package/fonts.css

@@ -0,0 +1,2 @@
+/* Plus Jakarta Sans for headings and Inter for small type, stand-ins for Gamma's own ES Build and PP Mori that the themes' stylesheets name. Import this once, before the first graph is measured. */
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

package/licenses/PolyForm-Free-Trial-1.0.0.md

@@ -0,0 +1,93 @@
+# PolyForm Free Trial License 1.0.0
+
+<https://polyformproject.org/licenses/free-trial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software
+to do everything you might do with the software that would
+otherwise infringe the licensor's copyright in it for any
+permitted purpose. However, you may only make changes or
+new works based on the software according to [Changes and New
+Works License](#changes-and-new-works-license), and you may
+not distribute copies of the software.
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## Free Trial
+
+Use to evaluate whether the software suits a particular
+application for less than 32 consecutive calendar days, on
+behalf of you or your company, is use for a permitted purpose.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else. These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+If you violate any of these terms, or do anything with the
+software not covered by your licenses, all your licenses
+end immediately.
+
+## No Liability
+
+_**As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.**_
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization. **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise. Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.