@orangecheck/app-design 1.5.0 → 1.6.1

package/dist/styles/chart.css

@@ -0,0 +1,76 @@
+/*
+ * @orangecheck/app-design — chart.css
+ *
+ * The chrome of a chart drawn by hand in SVG, by class, inside ChartFrame's
+ * .oca-chart: axis labels, gridlines, the zero line, a crosshair, markers,
+ * the legend and the hover card. The series colours are the --oca-chart-*
+ * tokens, which clear 3:1 on the card in both modes.
+ */
+
+[data-oc-app='ochk'] .oca-chart .oca-chart-tick {
+    fill: var(--muted-foreground);
+    font-family: var(--oc-font-mono);
+    font-size: 10px;
+    font-variant-numeric: tabular-nums;
+}
+[data-oc-app='ochk'] .oca-chart .oca-chart-grid {
+    stroke: var(--oca-chart-grid);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+[data-oc-app='ochk'] .oca-chart .oca-chart-axis {
+    stroke: var(--oca-hairline-strong);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+[data-oc-app='ochk'] .oca-chart .oca-chart-zero {
+    stroke: var(--muted-foreground);
+    stroke-opacity: 0.6;
+    stroke-width: 1;
+}
+[data-oc-app='ochk'] .oca-chart .oca-chart-crosshair {
+    stroke: var(--foreground);
+    stroke-opacity: 0.3;
+    stroke-width: 1;
+    pointer-events: none;
+}
+[data-oc-app='ochk'] .oca-chart .oca-chart-marker {
+    stroke: var(--muted-foreground);
+    stroke-dasharray: 3 3;
+    stroke-width: 1;
+}
+
+/* The legend: a short line in each series' colour, then its name. */
+[data-oc-app='ochk'] .oca-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+}
+[data-oc-app='ochk'] .oca-chart-legend li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4375rem;
+}
+[data-oc-app='ochk'] .oca-chart-legend [data-swatch] {
+    width: 0.875rem;
+    height: 0;
+    border-top: 2px solid var(--swatch);
+}
+[data-oc-app='ochk'] .oca-chart-legend [data-swatch='dashed'] {
+    border-top-style: dashed;
+}
+
+/* The card that follows the pointer. */
+[data-oc-app='ochk'] .oca-chart-tooltip {
+    pointer-events: none;
+    border: 1px solid var(--border);
+    border-radius: 0.625rem;
+    background: var(--popover);
+    color: var(--popover-foreground);
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    box-shadow: var(--oc-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));
+}

package/dist/styles/theme.css

@@ -45,6 +45,13 @@
     --color-oca-orange-light: var(--oca-orange-light);
     --color-oca-orange: var(--oca-orange);
     --color-oca-orange-deep: var(--oca-orange-deep);
+    --color-oca-chart-1: var(--oca-chart-1);
+    --color-oca-chart-2: var(--oca-chart-2);
+    --color-oca-chart-3: var(--oca-chart-3);
+    --color-oca-chart-4: var(--oca-chart-4);
+    --color-oca-chart-neutral: var(--oca-chart-neutral);
+    --color-oca-chart-up: var(--oca-chart-up);
+    --color-oca-chart-down: var(--oca-chart-down);
     --color-oca-outline: var(--oca-outline);
     --color-oca-ink: var(--oca-ink);
     --color-oca-ink-card: var(--oca-ink-card);

package/dist/styles/tokens.css

@@ -68,6 +68,19 @@
     --oca-orange-light: #fb933c;
     --oca-orange: #f66d36;
     --oca-orange-deep: #ea580b;
+
+    /* Chart series: four categorical colours and a neutral, orange first. Each
+       clears 3:1 on the card and the page, and every pair stays apart in
+       normal vision and with red-green colour blindness (check-contrast.mjs
+       tests the set). Up and down are the status colours. */
+    --oca-chart-1: #ea580b;
+    --oca-chart-2: #2563eb;
+    --oca-chart-3: #9d2b77;
+    --oca-chart-4: #92400e;
+    --oca-chart-neutral: #8a8f96;
+    --oca-chart-up: var(--success);
+    --oca-chart-down: var(--destructive);
+    --oca-chart-grid: var(--border);
     --oca-sphere-from: #ff6f33;
     --oca-sphere-to: #ffd9c4;
     --oca-outline: #f2cfc3;
@@ -147,6 +160,8 @@
     /* The glyphs the family look writes as decoration: "§ " before a heading,
        "// " before a note, "← " before Back. */
     --oc-wallet-mark: none;
+    /* OcWalletButton's heading: shown on its own, hidden where SignMessage already leads. */
+    --oc-wallet-heading: block;
 
     /* The deck has no shadows. Overlays get one, so a dialog still separates. */
     --oc-shadow-2xs: none;
@@ -199,6 +214,11 @@
     --oca-table-head: #1e1e1e;
     --oca-accent-display: #f66d36;
     --oca-accent-ink: #f0835a;
+    --oca-chart-1: #f66d36;
+    --oca-chart-2: #3b82f6;
+    --oca-chart-3: #f9a8d4;
+    --oca-chart-4: #fde047;
+    --oca-chart-neutral: #62676e;
     --oca-outline: #3a2a24;
     /* In dark the ink band lifts off the canvas, so the deck's rhythm survives. */
     --oca-ink: #171717;

package/dist/styles.css

@@ -13,3 +13,4 @@
 @import './styles/tokens.css';
 @import './styles/motion.css';
 @import './styles/code.css';
+@import './styles/chart.css';

package/dist/tokens.d.mts

@@ -1,31 +1,324 @@
+declare const lightPalette: {
+    readonly accent: "#f4f4f4";
+    readonly accentDisplay: "#f55819";
+    readonly accentForeground: "#0a0a0a";
+    readonly accentInk: "#c73f09";
+    readonly background: "#fafafa";
+    readonly border: "#ececec";
+    readonly brand: "#f66d36";
+    readonly brandForeground: "#0a0a0a";
+    readonly card: "#ffffff";
+    readonly cardForeground: "#0a0a0a";
+    readonly chart1: "#ea580b";
+    readonly chart2: "#2563eb";
+    readonly chart3: "#9d2b77";
+    readonly chart4: "#92400e";
+    readonly chartDown: "#c2262e";
+    readonly chartGrid: "#ececec";
+    readonly chartNeutral: "#8a8f96";
+    readonly chartUp: "#15803d";
+    readonly codeAdded: "#86d39b";
+    readonly codeAddedLine: "#1a2c20";
+    readonly codeComment: "#909397";
+    readonly codeFunction: "#9db4ec";
+    readonly codeKeyword: "#e3a8c2";
+    readonly codeLine: "#2a2a2a";
+    readonly codeLink: "#9db4ec";
+    readonly codeMark: "#232323";
+    readonly codeNumber: "#fcb781";
+    readonly codePackage: "#e99a8f";
+    readonly codeProperty: "#9db4ec";
+    readonly codePunctuation: "#d5d8dc";
+    readonly codeRemoved: "#f19a9a";
+    readonly codeRemovedLine: "#2f1c1c";
+    readonly codeString: "#e99a8f";
+    readonly codeSurface: "#161616";
+    readonly codeTag: "#e3a8c2";
+    readonly codeType: "#8fd0c2";
+    readonly destructive: "#c2262e";
+    readonly destructiveForeground: "#ffffff";
+    readonly foreground: "#0a0a0a";
+    readonly hairlineStrong: "#dadada";
+    readonly info: "#1d4ed8";
+    readonly infoForeground: "#ffffff";
+    readonly ink: "#0a0a0a";
+    readonly inkCard: "#1e1e1e";
+    readonly inkEyebrow: "#f0835a";
+    readonly inkForeground: "#ffffff";
+    readonly inkLine: "#2a2a2a";
+    readonly inkMuted: "#d5d8dc";
+    readonly inkSubtle: "#909397";
+    readonly inkTitle: "#fcb781";
+    readonly input: "#8f8f8f";
+    readonly muted: "#f2f2f2";
+    readonly mutedForeground: "#54585e";
+    readonly ocWalletReady: "#15803d";
+    readonly ocWalletSurface: "#ffffff";
+    readonly orange: "#f66d36";
+    readonly orangeDeep: "#ea580b";
+    readonly orangeLight: "#fb933c";
+    readonly outline: "#f2cfc3";
+    readonly peach: "#fed8ab";
+    readonly popover: "#ffffff";
+    readonly popoverForeground: "#0a0a0a";
+    readonly primary: "#0a0a0a";
+    readonly primaryForeground: "#ffffff";
+    readonly ring: "#ea580b";
+    readonly secondary: "#ffffff";
+    readonly secondaryForeground: "#0a0a0a";
+    readonly skeleton: "#e8e8e8";
+    readonly sphereFrom: "#ff6f33";
+    readonly sphereTo: "#ffd9c4";
+    readonly subtleForeground: "#686c72";
+    readonly success: "#15803d";
+    readonly successForeground: "#ffffff";
+    readonly tableHead: "#ededed";
+    readonly warning: "#a15c07";
+    readonly warningForeground: "#ffffff";
+};
+declare const darkPalette: {
+    readonly accent: "#1e1e1e";
+    readonly accentDisplay: "#f66d36";
+    readonly accentForeground: "#fafafa";
+    readonly accentInk: "#f0835a";
+    readonly background: "#0a0a0a";
+    readonly bandLine: "#262626";
+    readonly border: "#2a2a2a";
+    readonly brand: "#f66d36";
+    readonly brandForeground: "#0a0a0a";
+    readonly card: "#161616";
+    readonly cardForeground: "#fafafa";
+    readonly chart1: "#f66d36";
+    readonly chart2: "#3b82f6";
+    readonly chart3: "#f9a8d4";
+    readonly chart4: "#fde047";
+    readonly chartDown: "#f87171";
+    readonly chartGrid: "#2a2a2a";
+    readonly chartNeutral: "#62676e";
+    readonly chartUp: "#4ade80";
+    readonly codeAdded: "#86d39b";
+    readonly codeAddedLine: "#132519";
+    readonly codeComment: "#909397";
+    readonly codeFunction: "#9db4ec";
+    readonly codeKeyword: "#e3a8c2";
+    readonly codeLine: "#2a2a2a";
+    readonly codeLink: "#9db4ec";
+    readonly codeMark: "#1b1b1b";
+    readonly codeNumber: "#fcb781";
+    readonly codePackage: "#e99a8f";
+    readonly codeProperty: "#9db4ec";
+    readonly codePunctuation: "#d5d8dc";
+    readonly codeRemoved: "#f19a9a";
+    readonly codeRemovedLine: "#271414";
+    readonly codeString: "#e99a8f";
+    readonly codeSurface: "#0e0e0e";
+    readonly codeTag: "#e3a8c2";
+    readonly codeType: "#8fd0c2";
+    readonly destructive: "#f87171";
+    readonly destructiveForeground: "#0a0a0a";
+    readonly foreground: "#fafafa";
+    readonly hairlineStrong: "#333333";
+    readonly iconRing: "#333333";
+    readonly iconTile: "#1e1e1e";
+    readonly info: "#93c5fd";
+    readonly infoForeground: "#0a0a0a";
+    readonly ink: "#171717";
+    readonly inkCard: "#1e1e1e";
+    readonly inkEyebrow: "#f0835a";
+    readonly inkForeground: "#ffffff";
+    readonly inkLine: "#2a2a2a";
+    readonly inkMuted: "#d5d8dc";
+    readonly inkSubtle: "#909397";
+    readonly inkTitle: "#fcb781";
+    readonly input: "#6a6a6a";
+    readonly muted: "#1e1e1e";
+    readonly mutedForeground: "#a3a6aa";
+    readonly ocWalletReady: "#4ade80";
+    readonly ocWalletSurface: "#161616";
+    readonly orange: "#f66d36";
+    readonly orangeDeep: "#ea580b";
+    readonly orangeLight: "#fb933c";
+    readonly outline: "#3a2a24";
+    readonly peach: "#fed8ab";
+    readonly popover: "#1a1a1a";
+    readonly popoverForeground: "#fafafa";
+    readonly primary: "#fafafa";
+    readonly primaryForeground: "#0a0a0a";
+    readonly ring: "#f66d36";
+    readonly secondary: "#1c1c1c";
+    readonly secondaryForeground: "#fafafa";
+    readonly skeleton: "#222222";
+    readonly sphereFrom: "#ff6f33";
+    readonly sphereTo: "#ffd9c4";
+    readonly subtleForeground: "#8b8e93";
+    readonly success: "#4ade80";
+    readonly successForeground: "#0a0a0a";
+    readonly tableHead: "#1e1e1e";
+    readonly warning: "#fbbf24";
+    readonly warningForeground: "#0a0a0a";
+};
+
 declare const APP_ATTRIBUTE = "data-oc-app";
 declare const APP_ID = "ochk";
 declare const appColors: {
     readonly light: {
-        readonly background: "#FAFAFA";
-        readonly foreground: "#0A0A0A";
-        readonly card: "#FFFFFF";
-        readonly muted: "#F2F2F2";
-        readonly mutedForeground: "#54585E";
-        readonly subtleForeground: "#686C72";
-        readonly border: "#ECECEC";
-        readonly hairlineStrong: "#DADADA";
-        readonly accentDisplay: "#F55819";
-        readonly accentInk: "#C73F09";
-        readonly ring: "#EA580B";
+        readonly accent: "#f4f4f4";
+        readonly accentDisplay: "#f55819";
+        readonly accentForeground: "#0a0a0a";
+        readonly accentInk: "#c73f09";
+        readonly background: "#fafafa";
+        readonly border: "#ececec";
+        readonly brand: "#f66d36";
+        readonly brandForeground: "#0a0a0a";
+        readonly card: "#ffffff";
+        readonly cardForeground: "#0a0a0a";
+        readonly chart1: "#ea580b";
+        readonly chart2: "#2563eb";
+        readonly chart3: "#9d2b77";
+        readonly chart4: "#92400e";
+        readonly chartDown: "#c2262e";
+        readonly chartGrid: "#ececec";
+        readonly chartNeutral: "#8a8f96";
+        readonly chartUp: "#15803d";
+        readonly codeAdded: "#86d39b";
+        readonly codeAddedLine: "#1a2c20";
+        readonly codeComment: "#909397";
+        readonly codeFunction: "#9db4ec";
+        readonly codeKeyword: "#e3a8c2";
+        readonly codeLine: "#2a2a2a";
+        readonly codeLink: "#9db4ec";
+        readonly codeMark: "#232323";
+        readonly codeNumber: "#fcb781";
+        readonly codePackage: "#e99a8f";
+        readonly codeProperty: "#9db4ec";
+        readonly codePunctuation: "#d5d8dc";
+        readonly codeRemoved: "#f19a9a";
+        readonly codeRemovedLine: "#2f1c1c";
+        readonly codeString: "#e99a8f";
+        readonly codeSurface: "#161616";
+        readonly codeTag: "#e3a8c2";
+        readonly codeType: "#8fd0c2";
+        readonly destructive: "#c2262e";
+        readonly destructiveForeground: "#ffffff";
+        readonly foreground: "#0a0a0a";
+        readonly hairlineStrong: "#dadada";
+        readonly info: "#1d4ed8";
+        readonly infoForeground: "#ffffff";
+        readonly ink: "#0a0a0a";
+        readonly inkCard: "#1e1e1e";
+        readonly inkEyebrow: "#f0835a";
+        readonly inkForeground: "#ffffff";
+        readonly inkLine: "#2a2a2a";
+        readonly inkMuted: "#d5d8dc";
+        readonly inkSubtle: "#909397";
+        readonly inkTitle: "#fcb781";
+        readonly input: "#8f8f8f";
+        readonly muted: "#f2f2f2";
+        readonly mutedForeground: "#54585e";
+        readonly ocWalletReady: "#15803d";
+        readonly ocWalletSurface: "#ffffff";
+        readonly orange: "#f66d36";
+        readonly orangeDeep: "#ea580b";
+        readonly orangeLight: "#fb933c";
+        readonly outline: "#f2cfc3";
+        readonly peach: "#fed8ab";
+        readonly popover: "#ffffff";
+        readonly popoverForeground: "#0a0a0a";
+        readonly primary: "#0a0a0a";
+        readonly primaryForeground: "#ffffff";
+        readonly ring: "#ea580b";
+        readonly secondary: "#ffffff";
+        readonly secondaryForeground: "#0a0a0a";
+        readonly skeleton: "#e8e8e8";
+        readonly sphereFrom: "#ff6f33";
+        readonly sphereTo: "#ffd9c4";
+        readonly subtleForeground: "#686c72";
+        readonly success: "#15803d";
+        readonly successForeground: "#ffffff";
+        readonly tableHead: "#ededed";
+        readonly warning: "#a15c07";
+        readonly warningForeground: "#ffffff";
     };
     readonly dark: {
-        readonly background: "#0A0A0A";
-        readonly foreground: "#FAFAFA";
+        readonly accent: "#1e1e1e";
+        readonly accentDisplay: "#f66d36";
+        readonly accentForeground: "#fafafa";
+        readonly accentInk: "#f0835a";
+        readonly background: "#0a0a0a";
+        readonly bandLine: "#262626";
+        readonly border: "#2a2a2a";
+        readonly brand: "#f66d36";
+        readonly brandForeground: "#0a0a0a";
         readonly card: "#161616";
-        readonly muted: "#1E1E1E";
-        readonly mutedForeground: "#A3A6AA";
-        readonly subtleForeground: "#8B8E93";
-        readonly border: "#2A2A2A";
+        readonly cardForeground: "#fafafa";
+        readonly chart1: "#f66d36";
+        readonly chart2: "#3b82f6";
+        readonly chart3: "#f9a8d4";
+        readonly chart4: "#fde047";
+        readonly chartDown: "#f87171";
+        readonly chartGrid: "#2a2a2a";
+        readonly chartNeutral: "#62676e";
+        readonly chartUp: "#4ade80";
+        readonly codeAdded: "#86d39b";
+        readonly codeAddedLine: "#132519";
+        readonly codeComment: "#909397";
+        readonly codeFunction: "#9db4ec";
+        readonly codeKeyword: "#e3a8c2";
+        readonly codeLine: "#2a2a2a";
+        readonly codeLink: "#9db4ec";
+        readonly codeMark: "#1b1b1b";
+        readonly codeNumber: "#fcb781";
+        readonly codePackage: "#e99a8f";
+        readonly codeProperty: "#9db4ec";
+        readonly codePunctuation: "#d5d8dc";
+        readonly codeRemoved: "#f19a9a";
+        readonly codeRemovedLine: "#271414";
+        readonly codeString: "#e99a8f";
+        readonly codeSurface: "#0e0e0e";
+        readonly codeTag: "#e3a8c2";
+        readonly codeType: "#8fd0c2";
+        readonly destructive: "#f87171";
+        readonly destructiveForeground: "#0a0a0a";
+        readonly foreground: "#fafafa";
         readonly hairlineStrong: "#333333";
-        readonly accentDisplay: "#F66D36";
-        readonly accentInk: "#F0835A";
-        readonly ring: "#F66D36";
+        readonly iconRing: "#333333";
+        readonly iconTile: "#1e1e1e";
+        readonly info: "#93c5fd";
+        readonly infoForeground: "#0a0a0a";
+        readonly ink: "#171717";
+        readonly inkCard: "#1e1e1e";
+        readonly inkEyebrow: "#f0835a";
+        readonly inkForeground: "#ffffff";
+        readonly inkLine: "#2a2a2a";
+        readonly inkMuted: "#d5d8dc";
+        readonly inkSubtle: "#909397";
+        readonly inkTitle: "#fcb781";
+        readonly input: "#6a6a6a";
+        readonly muted: "#1e1e1e";
+        readonly mutedForeground: "#a3a6aa";
+        readonly ocWalletReady: "#4ade80";
+        readonly ocWalletSurface: "#161616";
+        readonly orange: "#f66d36";
+        readonly orangeDeep: "#ea580b";
+        readonly orangeLight: "#fb933c";
+        readonly outline: "#3a2a24";
+        readonly peach: "#fed8ab";
+        readonly popover: "#1a1a1a";
+        readonly popoverForeground: "#fafafa";
+        readonly primary: "#fafafa";
+        readonly primaryForeground: "#0a0a0a";
+        readonly ring: "#f66d36";
+        readonly secondary: "#1c1c1c";
+        readonly secondaryForeground: "#fafafa";
+        readonly skeleton: "#222222";
+        readonly sphereFrom: "#ff6f33";
+        readonly sphereTo: "#ffd9c4";
+        readonly subtleForeground: "#8b8e93";
+        readonly success: "#4ade80";
+        readonly successForeground: "#0a0a0a";
+        readonly tableHead: "#1e1e1e";
+        readonly warning: "#fbbf24";
+        readonly warningForeground: "#0a0a0a";
     };
     readonly brand: {
         readonly orange: "#F66D36";
@@ -41,4 +334,4 @@ declare const appFonts: {
     readonly mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace";
 };
 
-export { APP_ATTRIBUTE, APP_ID, appColors, appFonts };
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts, darkPalette, lightPalette };