@diagrammo/dgmo 0.47.0 → 0.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto.js +1 -1
- package/dist/auto.mjs +1 -1
- package/dist/element.js +1 -1
- package/dist/element.mjs +1 -1
- package/package.json +19 -70
- package/dist/advanced.cjs +0 -71648
- package/dist/advanced.d.cts +0 -5719
- package/dist/auto.cjs +0 -70648
- package/dist/auto.d.cts +0 -54
- package/dist/block.cjs +0 -70208
- package/dist/block.d.cts +0 -115
- package/dist/editor.cjs +0 -526
- package/dist/editor.d.cts +0 -26
- package/dist/element.cjs +0 -70530
- package/dist/element.d.cts +0 -62
- package/dist/highlight.cjs +0 -852
- package/dist/highlight.d.cts +0 -49
- package/dist/index.cjs +0 -70491
- package/dist/index.d.cts +0 -160
- package/dist/pert.cjs +0 -325
- package/dist/pert.d.cts +0 -559
- package/dist/themes-1-CuKpeH.d.cts +0 -908
- package/src/advanced.ts +0 -873
- package/src/arc/parser.ts +0 -15
- package/src/arc/renderer.ts +0 -633
- package/src/auto/index.ts +0 -621
- package/src/auto/shared.ts +0 -370
- package/src/auto/styles.ts +0 -73
- package/src/block/layout.ts +0 -198
- package/src/block/parser.ts +0 -427
- package/src/block/renderer.ts +0 -484
- package/src/block/types.ts +0 -67
- package/src/boxes-and-lines/collapse.ts +0 -96
- package/src/boxes-and-lines/focus.ts +0 -257
- package/src/boxes-and-lines/label-placement.ts +0 -339
- package/src/boxes-and-lines/layout-grouped.ts +0 -912
- package/src/boxes-and-lines/layout-layered.ts +0 -722
- package/src/boxes-and-lines/layout-search.ts +0 -1678
- package/src/boxes-and-lines/layout.ts +0 -398
- package/src/boxes-and-lines/parser.ts +0 -1181
- package/src/boxes-and-lines/renderer.ts +0 -1465
- package/src/boxes-and-lines/types.ts +0 -66
- package/src/c4/layout.ts +0 -2441
- package/src/c4/parser.ts +0 -1158
- package/src/c4/renderer.ts +0 -2008
- package/src/c4/types.ts +0 -89
- package/src/chart-type-registry.ts +0 -529
- package/src/chart-types.ts +0 -225
- package/src/chart.ts +0 -685
- package/src/charts-d3/bar.ts +0 -338
- package/src/charts-d3/chord.ts +0 -140
- package/src/charts-d3/function.ts +0 -147
- package/src/charts-d3/funnel.ts +0 -104
- package/src/charts-d3/heatmap.ts +0 -145
- package/src/charts-d3/index.ts +0 -337
- package/src/charts-d3/interactions.ts +0 -477
- package/src/charts-d3/line.ts +0 -344
- package/src/charts-d3/mount.ts +0 -151
- package/src/charts-d3/pie.ts +0 -117
- package/src/charts-d3/polar.ts +0 -89
- package/src/charts-d3/radar.ts +0 -0
- package/src/charts-d3/sankey.ts +0 -0
- package/src/charts-d3/scatter.ts +0 -185
- package/src/charts-d3/shared.ts +0 -208
- package/src/class/layout.ts +0 -326
- package/src/class/parser.ts +0 -635
- package/src/class/renderer.ts +0 -793
- package/src/class/types.ts +0 -58
- package/src/cli-banner.ts +0 -106
- package/src/cli.ts +0 -1080
- package/src/colors-diagnostics.ts +0 -35
- package/src/colors.ts +0 -379
- package/src/completion-types.ts +0 -27
- package/src/completion.ts +0 -2668
- package/src/cycle/layout.ts +0 -1026
- package/src/cycle/parser.ts +0 -387
- package/src/cycle/renderer.ts +0 -653
- package/src/cycle/types.ts +0 -101
- package/src/d3.ts +0 -1434
- package/src/data-chart-parser.ts +0 -1007
- package/src/dgmo-router.ts +0 -296
- package/src/diagnostics-registry.ts +0 -108
- package/src/diagnostics.ts +0 -0
- package/src/dimensions.ts +0 -20
- package/src/directives-registry.ts +0 -396
- package/src/editor/dgmo.grammar +0 -76
- package/src/editor/dgmo.grammar.d.ts +0 -2
- package/src/editor/dgmo.grammar.js +0 -18
- package/src/editor/dgmo.grammar.terms.d.ts +0 -5
- package/src/editor/dgmo.grammar.terms.js +0 -35
- package/src/editor/highlight-api.ts +0 -596
- package/src/editor/highlight.ts +0 -36
- package/src/editor/index.ts +0 -27
- package/src/editor/keywords.ts +0 -128
- package/src/editor/tokens.ts +0 -30
- package/src/element/index.ts +0 -432
- package/src/embed/css.ts +0 -312
- package/src/embed/escape.ts +0 -15
- package/src/embed/index.ts +0 -280
- package/src/er/classify.ts +0 -228
- package/src/er/layout.ts +0 -530
- package/src/er/parser.ts +0 -750
- package/src/er/renderer.ts +0 -725
- package/src/er/types.ts +0 -52
- package/src/error-card.ts +0 -269
- package/src/event-line/diagnostics.ts +0 -117
- package/src/event-line/parser.ts +0 -643
- package/src/event-line/renderer.ts +0 -1742
- package/src/event-line/types.ts +0 -74
- package/src/fonts.ts +0 -3
- package/src/gantt/calculator.ts +0 -979
- package/src/gantt/parser.ts +0 -1641
- package/src/gantt/renderer.ts +0 -3787
- package/src/gantt/resolver.ts +0 -172
- package/src/gantt/types.ts +0 -206
- package/src/graph/diagnostics.ts +0 -64
- package/src/graph/edge-spline.ts +0 -29
- package/src/graph/flowchart-parser.ts +0 -759
- package/src/graph/flowchart-renderer.ts +0 -817
- package/src/graph/layout.ts +0 -472
- package/src/graph/notes.ts +0 -21
- package/src/graph/state-collapse.ts +0 -78
- package/src/graph/state-parser.ts +0 -574
- package/src/graph/state-renderer.ts +0 -653
- package/src/graph/types.ts +0 -65
- package/src/index.ts +0 -261
- package/src/infra/compute.ts +0 -1385
- package/src/infra/layout.ts +0 -888
- package/src/infra/parser.ts +0 -1234
- package/src/infra/renderer.ts +0 -2534
- package/src/infra/roles.ts +0 -75
- package/src/infra/types.ts +0 -216
- package/src/infra/validation.ts +0 -201
- package/src/journey-map/layout.ts +0 -490
- package/src/journey-map/parser.ts +0 -557
- package/src/journey-map/renderer.ts +0 -1580
- package/src/journey-map/types.ts +0 -47
- package/src/kanban/mutations.ts +0 -175
- package/src/kanban/parser.ts +0 -509
- package/src/kanban/renderer.ts +0 -1449
- package/src/kanban/types.ts +0 -39
- package/src/label-layout.ts +0 -368
- package/src/map/colorize.ts +0 -54
- package/src/map/completion.ts +0 -316
- package/src/map/context-labels.ts +0 -609
- package/src/map/data/PROVENANCE.json +0 -1
- package/src/map/data/README.md +0 -40
- package/src/map/data/airport-collisions.json +0 -1
- package/src/map/data/airports.json +0 -1
- package/src/map/data/gazetteer.json +0 -1
- package/src/map/data/lakes.json +0 -1
- package/src/map/data/mountain-ranges.json +0 -1
- package/src/map/data/na-lakes.json +0 -1
- package/src/map/data/na-land.json +0 -1
- package/src/map/data/region-names.json +0 -1
- package/src/map/data/rivers.json +0 -1
- package/src/map/data/types.ts +0 -121
- package/src/map/data/us-states.json +0 -1
- package/src/map/data/water-bodies.json +0 -1
- package/src/map/data/world-coarse.json +0 -1
- package/src/map/data/world-detail.json +0 -1
- package/src/map/diagnostics.ts +0 -134
- package/src/map/dimensions.ts +0 -150
- package/src/map/geo-query.ts +0 -295
- package/src/map/geo.ts +0 -438
- package/src/map/invert.ts +0 -111
- package/src/map/layout.ts +0 -5069
- package/src/map/legend-band.ts +0 -127
- package/src/map/load-data.ts +0 -186
- package/src/map/parser.ts +0 -783
- package/src/map/renderer.ts +0 -1445
- package/src/map/resolved-types.ts +0 -160
- package/src/map/resolver.ts +0 -1146
- package/src/map/types.ts +0 -194
- package/src/mindmap/collapse.ts +0 -67
- package/src/mindmap/layout.ts +0 -649
- package/src/mindmap/parser.ts +0 -430
- package/src/mindmap/renderer.ts +0 -637
- package/src/mindmap/text-wrap.ts +0 -218
- package/src/mindmap/types.ts +0 -56
- package/src/org/collapse.ts +0 -151
- package/src/org/layout.ts +0 -1262
- package/src/org/parser.ts +0 -519
- package/src/org/renderer.ts +0 -866
- package/src/org/resolver.ts +0 -636
- package/src/palettes/atlas.ts +0 -77
- package/src/palettes/blueprint.ts +0 -73
- package/src/palettes/catppuccin.ts +0 -84
- package/src/palettes/color-utils.ts +0 -443
- package/src/palettes/index.ts +0 -67
- package/src/palettes/nord.ts +0 -67
- package/src/palettes/registry.ts +0 -114
- package/src/palettes/slate.ts +0 -73
- package/src/palettes/tidewater.ts +0 -73
- package/src/palettes/tokyo-night.ts +0 -86
- package/src/palettes/types.ts +0 -88
- package/src/pert/analyzer.ts +0 -1183
- package/src/pert/diagnostics.ts +0 -110
- package/src/pert/index.ts +0 -43
- package/src/pert/internal.ts +0 -252
- package/src/pert/layout.ts +0 -971
- package/src/pert/monte-carlo.ts +0 -446
- package/src/pert/parser.ts +0 -1606
- package/src/pert/renderer.ts +0 -4009
- package/src/pert/share-normalize.ts +0 -62
- package/src/pert/types.ts +0 -604
- package/src/pyramid/parser.ts +0 -185
- package/src/pyramid/renderer.ts +0 -768
- package/src/pyramid/types.ts +0 -28
- package/src/quadrant/parser.ts +0 -18
- package/src/quadrant/renderer.ts +0 -638
- package/src/raci/diagnostics.ts +0 -213
- package/src/raci/index.ts +0 -23
- package/src/raci/mutations.ts +0 -321
- package/src/raci/parser.ts +0 -699
- package/src/raci/renderer.ts +0 -1627
- package/src/raci/types.ts +0 -82
- package/src/raci/variants.ts +0 -320
- package/src/render.ts +0 -268
- package/src/ring/parser.ts +0 -212
- package/src/ring/renderer.ts +0 -490
- package/src/ring/types.ts +0 -27
- package/src/sequence/collapse.ts +0 -174
- package/src/sequence/parser.ts +0 -1596
- package/src/sequence/participant-inference.ts +0 -152
- package/src/sequence/renderer.ts +0 -3168
- package/src/sequence/tag-resolution.ts +0 -164
- package/src/sharing.ts +0 -211
- package/src/sitemap/collapse.ts +0 -100
- package/src/sitemap/layout.ts +0 -925
- package/src/sitemap/parser.ts +0 -755
- package/src/sitemap/renderer.ts +0 -828
- package/src/sitemap/types.ts +0 -42
- package/src/slope/parser.ts +0 -18
- package/src/slope/renderer.ts +0 -378
- package/src/swimlane/diagnostics.ts +0 -94
- package/src/swimlane/layout.ts +0 -597
- package/src/swimlane/parser.ts +0 -613
- package/src/swimlane/renderer.ts +0 -681
- package/src/swimlane/types.ts +0 -151
- package/src/tech-radar/interactive.ts +0 -1129
- package/src/tech-radar/layout.ts +0 -197
- package/src/tech-radar/parser.ts +0 -436
- package/src/tech-radar/renderer.ts +0 -1239
- package/src/tech-radar/shared.ts +0 -151
- package/src/tech-radar/types.ts +0 -86
- package/src/themes.ts +0 -22
- package/src/timeline/parser.ts +0 -472
- package/src/timeline/renderer.ts +0 -3024
- package/src/timeline/types.ts +0 -33
- package/src/timeline/viz-parser.ts +0 -21
- package/src/treemap/diagnostics.ts +0 -62
- package/src/treemap/layout-radial.ts +0 -233
- package/src/treemap/layout.ts +0 -189
- package/src/treemap/parser.ts +0 -463
- package/src/treemap/renderer-radial.ts +0 -438
- package/src/treemap/renderer.ts +0 -572
- package/src/treemap/treemap-shared.ts +0 -309
- package/src/treemap/types.ts +0 -60
- package/src/utils/arrow-markers.ts +0 -51
- package/src/utils/arrows-diagnostics.ts +0 -62
- package/src/utils/arrows.ts +0 -227
- package/src/utils/brand.ts +0 -61
- package/src/utils/card.ts +0 -183
- package/src/utils/collapse-engine/tree-edges.ts +0 -115
- package/src/utils/collapse-engine/tree.ts +0 -117
- package/src/utils/d3-helpers.ts +0 -219
- package/src/utils/d3-types.ts +0 -9
- package/src/utils/description-helpers.ts +0 -38
- package/src/utils/duration.ts +0 -312
- package/src/utils/export-container.ts +0 -41
- package/src/utils/expr-eval.ts +0 -27
- package/src/utils/fit-canvas.ts +0 -64
- package/src/utils/hover-styles.ts +0 -673
- package/src/utils/inline-markdown.ts +0 -96
- package/src/utils/legend-constants.ts +0 -48
- package/src/utils/legend-d3.ts +0 -618
- package/src/utils/legend-integration.ts +0 -107
- package/src/utils/legend-layout.ts +0 -776
- package/src/utils/legend-svg.ts +0 -214
- package/src/utils/legend-types.ts +0 -272
- package/src/utils/name-normalize.ts +0 -163
- package/src/utils/note-box/constants.ts +0 -25
- package/src/utils/note-box/index.ts +0 -11
- package/src/utils/note-box/metrics.ts +0 -90
- package/src/utils/note-box/svg.ts +0 -331
- package/src/utils/notes/bounds.ts +0 -30
- package/src/utils/notes/build.ts +0 -131
- package/src/utils/notes/index.ts +0 -18
- package/src/utils/notes/model.ts +0 -19
- package/src/utils/notes/parse.ts +0 -131
- package/src/utils/notes/place.ts +0 -177
- package/src/utils/notes/resolve.ts +0 -88
- package/src/utils/number-format.ts +0 -36
- package/src/utils/parsing.ts +0 -953
- package/src/utils/reserved-key-registry.ts +0 -239
- package/src/utils/safe-href.ts +0 -38
- package/src/utils/scaling.ts +0 -97
- package/src/utils/svg-embed.ts +0 -251
- package/src/utils/tag-groups.ts +0 -607
- package/src/utils/text-measure.ts +0 -122
- package/src/utils/time-ticks.ts +0 -253
- package/src/utils/title-constants.ts +0 -24
- package/src/utils/visual-conventions.ts +0 -61
- package/src/utils/wrapped-desc.ts +0 -87
- package/src/venn/parser.ts +0 -18
- package/src/venn/renderer.ts +0 -1047
- package/src/version-control/diagnostics.ts +0 -67
- package/src/version-control/parser.ts +0 -544
- package/src/version-control/renderer.ts +0 -724
- package/src/version-control/types.ts +0 -100
- package/src/visualizations/parse.ts +0 -1560
- package/src/visualizations/types.ts +0 -262
- package/src/wireframe/layout.ts +0 -479
- package/src/wireframe/parser.ts +0 -1114
- package/src/wireframe/renderer.ts +0 -1318
- package/src/wireframe/types.ts +0 -110
- package/src/wordcloud/parser.ts +0 -18
- package/src/wordcloud/renderer.ts +0 -357
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import type { PaletteConfig } from './types';
|
|
2
|
-
import { registerPalette } from './registry';
|
|
3
|
-
|
|
4
|
-
// ============================================================
|
|
5
|
-
// Blueprint Palette Definition
|
|
6
|
-
// ============================================================
|
|
7
|
-
//
|
|
8
|
-
// A cyanotype engineering-drawing palette — the technical register the set
|
|
9
|
-
// was missing. Dark mode is the iconic one: chalk-pastel "colored-pencil"
|
|
10
|
-
// accents drafted on a deep blueprint-blue ground (reads unmistakably as a
|
|
11
|
-
// technical drawing — ideal for infra, C4, ER, flowcharts). Light mode is
|
|
12
|
-
// the reversed draft: blueprint-blue ink and lines on pale drafting white.
|
|
13
|
-
|
|
14
|
-
export const blueprintPalette: PaletteConfig = {
|
|
15
|
-
id: 'blueprint',
|
|
16
|
-
name: 'Blueprint',
|
|
17
|
-
light: {
|
|
18
|
-
bg: '#f4f8fb', // pale drafting white (faint cyan)
|
|
19
|
-
surface: '#e6eef4', // drafting panel
|
|
20
|
-
overlay: '#dde9f1', // popovers, dropdowns
|
|
21
|
-
border: '#aac3d6', // pale blue grid line
|
|
22
|
-
text: '#123a5e', // blueprint navy ink
|
|
23
|
-
textMuted: '#4f7390', // faint draft note
|
|
24
|
-
textOnFillLight: '#f4f8fb', // drafting white
|
|
25
|
-
textOnFillDark: '#0c2f4d', // deep blueprint navy
|
|
26
|
-
primary: '#1f5e8c', // blueprint blue
|
|
27
|
-
secondary: '#5b7d96', // steel
|
|
28
|
-
accent: '#b08a3e', // draftsman's ochre highlight
|
|
29
|
-
destructive: '#c0504d', // correction red
|
|
30
|
-
colors: {
|
|
31
|
-
red: '#c25a4e', // correction red
|
|
32
|
-
orange: '#c2823e', // ochre
|
|
33
|
-
yellow: '#c2a843', // pencil gold
|
|
34
|
-
green: '#4f8a6b', // drafting green
|
|
35
|
-
blue: '#1f5e8c', // blueprint blue
|
|
36
|
-
purple: '#6f5e96', // indigo pencil
|
|
37
|
-
teal: '#3a8a8a', // teal
|
|
38
|
-
cyan: '#3f8fb5', // cyan
|
|
39
|
-
gray: '#7e8e98', // graphite
|
|
40
|
-
black: '#123a5e', // navy ink
|
|
41
|
-
white: '#e6eef4', // panel
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
dark: {
|
|
45
|
-
bg: '#103a5e', // deep blueprint blue (cyanotype ground)
|
|
46
|
-
surface: '#16466e', // raised sheet
|
|
47
|
-
overlay: '#1c5180', // popovers, dropdowns
|
|
48
|
-
border: '#3a6f96', // grid line
|
|
49
|
-
text: '#eaf2f8', // chalk white
|
|
50
|
-
textMuted: '#9fc0d6', // faint chalk note
|
|
51
|
-
textOnFillLight: '#eaf2f8', // chalk white
|
|
52
|
-
textOnFillDark: '#0c2f4d', // deep blueprint navy
|
|
53
|
-
primary: '#7fb8d8', // chalk cyan
|
|
54
|
-
secondary: '#9fb8c8', // pale steel
|
|
55
|
-
accent: '#d8c27a', // chalk amber
|
|
56
|
-
destructive: '#e08a7a', // chalk correction red
|
|
57
|
-
colors: {
|
|
58
|
-
red: '#e0907e', // chalk red
|
|
59
|
-
orange: '#e0ab78', // chalk amber
|
|
60
|
-
yellow: '#e3d089', // chalk gold
|
|
61
|
-
green: '#93c79e', // chalk green
|
|
62
|
-
blue: '#8ec3e0', // chalk cyan-blue
|
|
63
|
-
purple: '#b6a6d8', // chalk indigo
|
|
64
|
-
teal: '#84c7c2', // chalk teal
|
|
65
|
-
cyan: '#9fd6e0', // chalk cyan
|
|
66
|
-
gray: '#aebecb', // chalk graphite
|
|
67
|
-
black: '#16466e', // raised sheet
|
|
68
|
-
white: '#eaf2f8', // chalk white
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
registerPalette(blueprintPalette);
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import type { PaletteConfig } from './types';
|
|
2
|
-
import { registerPalette } from './registry';
|
|
3
|
-
|
|
4
|
-
// ============================================================
|
|
5
|
-
// Catppuccin Palette Definition
|
|
6
|
-
// ============================================================
|
|
7
|
-
|
|
8
|
-
// Official Catppuccin colors: https://catppuccin.com/palette
|
|
9
|
-
//
|
|
10
|
-
// Latte (light):
|
|
11
|
-
// Base #eff1f5 | Mantle #e6e9ef | Crust #dce0e8
|
|
12
|
-
// Surface0 #ccd0da | Text #4c4f69 | Subtext1 #5c5f77 | Overlay0 #9ca0b0
|
|
13
|
-
//
|
|
14
|
-
// Mocha (dark):
|
|
15
|
-
// Base #1e1e2e | Mantle #181825 | Surface0 #313244
|
|
16
|
-
// Surface1 #45475a | Overlay0 #6c7086 | Text #cdd6f4 | Subtext1 #bac2de
|
|
17
|
-
//
|
|
18
|
-
// Accents (Latte / Mocha):
|
|
19
|
-
// Red #d20f39 / #f38ba8 | Peach #fe640b / #fab387
|
|
20
|
-
// Yellow #df8e1d / #f9e2af | Green #40a02b / #a6e3a1
|
|
21
|
-
// Blue #1e66f5 / #89b4fa | Mauve #8839ef / #cba6f7
|
|
22
|
-
// Teal #179299 / #94e2d5 | Sapphire #209fb5 / #74c7ec
|
|
23
|
-
// Lavender #7287fd / #b4befe
|
|
24
|
-
|
|
25
|
-
export const catppuccinPalette: PaletteConfig = {
|
|
26
|
-
id: 'catppuccin',
|
|
27
|
-
name: 'Catppuccin',
|
|
28
|
-
light: {
|
|
29
|
-
bg: '#eff1f5', // Latte Base
|
|
30
|
-
surface: '#e6e9ef', // Latte Mantle
|
|
31
|
-
overlay: '#ccd0da', // Latte Surface0
|
|
32
|
-
border: '#dce0e8', // Latte Crust
|
|
33
|
-
text: '#4c4f69', // Latte Text
|
|
34
|
-
textMuted: '#5c5f77', // Latte Subtext1
|
|
35
|
-
textOnFillLight: '#eff1f5', // Latte Base
|
|
36
|
-
textOnFillDark: '#11111b', // Mocha Crust (Latte Text #4c4f69 fails 3:1 on saturated mid-luminance intents — orange/green/teal/cyan)
|
|
37
|
-
primary: '#1e66f5', // Latte Blue
|
|
38
|
-
secondary: '#7287fd', // Latte Lavender
|
|
39
|
-
accent: '#8839ef', // Latte Mauve
|
|
40
|
-
destructive: '#d20f39', // Latte Red
|
|
41
|
-
colors: {
|
|
42
|
-
red: '#d20f39',
|
|
43
|
-
orange: '#fe640b',
|
|
44
|
-
yellow: '#df8e1d',
|
|
45
|
-
green: '#40a02b',
|
|
46
|
-
blue: '#1e66f5',
|
|
47
|
-
purple: '#8839ef',
|
|
48
|
-
teal: '#179299',
|
|
49
|
-
cyan: '#209fb5',
|
|
50
|
-
gray: '#9ca0b0', // Latte Overlay0
|
|
51
|
-
black: '#4c4f69',
|
|
52
|
-
white: '#e6e9ef',
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
dark: {
|
|
56
|
-
bg: '#1e1e2e', // Mocha Base
|
|
57
|
-
surface: '#313244', // Mocha Surface0
|
|
58
|
-
overlay: '#45475a', // Mocha Surface1
|
|
59
|
-
border: '#6c7086', // Mocha Overlay0
|
|
60
|
-
text: '#cdd6f4', // Mocha Text
|
|
61
|
-
textMuted: '#bac2de', // Mocha Subtext1
|
|
62
|
-
textOnFillLight: '#f5e0dc', // Mocha Rosewater (highest-luminance accent)
|
|
63
|
-
textOnFillDark: '#11111b', // Mocha Crust (low luminance)
|
|
64
|
-
primary: '#89b4fa', // Mocha Blue
|
|
65
|
-
secondary: '#b4befe', // Mocha Lavender
|
|
66
|
-
accent: '#cba6f7', // Mocha Mauve
|
|
67
|
-
destructive: '#f38ba8', // Mocha Red
|
|
68
|
-
colors: {
|
|
69
|
-
red: '#f38ba8',
|
|
70
|
-
orange: '#fab387',
|
|
71
|
-
yellow: '#f9e2af',
|
|
72
|
-
green: '#a6e3a1',
|
|
73
|
-
blue: '#89b4fa',
|
|
74
|
-
purple: '#cba6f7',
|
|
75
|
-
teal: '#94e2d5',
|
|
76
|
-
cyan: '#74c7ec',
|
|
77
|
-
gray: '#6c7086', // Mocha Overlay0
|
|
78
|
-
black: '#313244',
|
|
79
|
-
white: '#cdd6f4',
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
registerPalette(catppuccinPalette);
|
|
@@ -1,443 +0,0 @@
|
|
|
1
|
-
import { CATEGORICAL_COLOR_ORDER } from '../colors';
|
|
2
|
-
import type { PaletteColors } from './types';
|
|
3
|
-
|
|
4
|
-
// ============================================================
|
|
5
|
-
// HSL Conversion
|
|
6
|
-
// ============================================================
|
|
7
|
-
|
|
8
|
-
/** Convert hex (#RRGGBB or #RGB) to { h, s, l } with h in degrees, s/l as percentages. */
|
|
9
|
-
export function hexToHSL(hex: string): { h: number; s: number; l: number } {
|
|
10
|
-
const raw = hex.replace('#', '');
|
|
11
|
-
const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
|
|
12
|
-
|
|
13
|
-
const r = parseInt(full.substring(0, 2), 16) / 255;
|
|
14
|
-
const g = parseInt(full.substring(2, 4), 16) / 255;
|
|
15
|
-
const b = parseInt(full.substring(4, 6), 16) / 255;
|
|
16
|
-
|
|
17
|
-
const max = Math.max(r, g, b);
|
|
18
|
-
const min = Math.min(r, g, b);
|
|
19
|
-
const l = (max + min) / 2;
|
|
20
|
-
|
|
21
|
-
if (max === min) {
|
|
22
|
-
return { h: 0, s: 0, l: Math.round(l * 100) };
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const d = max - min;
|
|
26
|
-
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
27
|
-
|
|
28
|
-
let h: number;
|
|
29
|
-
if (max === r) {
|
|
30
|
-
h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
|
31
|
-
} else if (max === g) {
|
|
32
|
-
h = ((b - r) / d + 2) / 6;
|
|
33
|
-
} else {
|
|
34
|
-
h = ((r - g) / d + 4) / 6;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
return {
|
|
38
|
-
h: Math.round(h * 360),
|
|
39
|
-
s: Math.round(s * 100),
|
|
40
|
-
l: Math.round(l * 100),
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/** Convert { h (degrees), s (%), l (%) } back to #RRGGBB hex string. */
|
|
45
|
-
export function hslToHex(h: number, s: number, l: number): string {
|
|
46
|
-
const sNorm = s / 100;
|
|
47
|
-
const lNorm = l / 100;
|
|
48
|
-
|
|
49
|
-
if (sNorm === 0) {
|
|
50
|
-
const v = Math.round(lNorm * 255);
|
|
51
|
-
return `#${v.toString(16).padStart(2, '0')}${v.toString(16).padStart(2, '0')}${v.toString(16).padStart(2, '0')}`;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const hue2rgb = (p: number, q: number, t: number): number => {
|
|
55
|
-
let tNorm = t;
|
|
56
|
-
if (tNorm < 0) tNorm += 1;
|
|
57
|
-
if (tNorm > 1) tNorm -= 1;
|
|
58
|
-
if (tNorm < 1 / 6) return p + (q - p) * 6 * tNorm;
|
|
59
|
-
if (tNorm < 1 / 2) return q;
|
|
60
|
-
if (tNorm < 2 / 3) return p + (q - p) * (2 / 3 - tNorm) * 6;
|
|
61
|
-
return p;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
|
|
65
|
-
const p = 2 * lNorm - q;
|
|
66
|
-
const hNorm = h / 360;
|
|
67
|
-
|
|
68
|
-
const r = Math.round(hue2rgb(p, q, hNorm + 1 / 3) * 255);
|
|
69
|
-
const g = Math.round(hue2rgb(p, q, hNorm) * 255);
|
|
70
|
-
const b = Math.round(hue2rgb(p, q, hNorm - 1 / 3) * 255);
|
|
71
|
-
|
|
72
|
-
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/** Convert hex to "H S% L%" string for CSS custom properties. */
|
|
76
|
-
export function hexToHSLString(hex: string): string {
|
|
77
|
-
const { h, s, l } = hexToHSL(hex);
|
|
78
|
-
return `${h} ${s}% ${l}%`;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// ============================================================
|
|
82
|
-
// Color Manipulation
|
|
83
|
-
// ============================================================
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Blend a color toward white (light mode quadrant fills).
|
|
87
|
-
* amount: 0 = original, 1 = white
|
|
88
|
-
*/
|
|
89
|
-
export function tint(hex: string, amount: number): string {
|
|
90
|
-
const raw = hex.replace('#', '');
|
|
91
|
-
const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
|
|
92
|
-
|
|
93
|
-
const r = parseInt(full.substring(0, 2), 16);
|
|
94
|
-
const g = parseInt(full.substring(2, 4), 16);
|
|
95
|
-
const b = parseInt(full.substring(4, 6), 16);
|
|
96
|
-
|
|
97
|
-
const tr = Math.round(r + (255 - r) * amount);
|
|
98
|
-
const tg = Math.round(g + (255 - g) * amount);
|
|
99
|
-
const tb = Math.round(b + (255 - b) * amount);
|
|
100
|
-
|
|
101
|
-
return `#${tr.toString(16).padStart(2, '0')}${tg.toString(16).padStart(2, '0')}${tb.toString(16).padStart(2, '0')}`;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Blend a color toward a dark base (dark mode quadrant fills).
|
|
106
|
-
* amount: 0 = original, 1 = base
|
|
107
|
-
*/
|
|
108
|
-
export function shade(hex: string, base: string, amount: number): string {
|
|
109
|
-
const parse = (h: string): [number, number, number] => {
|
|
110
|
-
const raw = h.replace('#', '');
|
|
111
|
-
const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
|
|
112
|
-
return [
|
|
113
|
-
parseInt(full.substring(0, 2), 16),
|
|
114
|
-
parseInt(full.substring(2, 4), 16),
|
|
115
|
-
parseInt(full.substring(4, 6), 16),
|
|
116
|
-
];
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
const [r, g, b] = parse(hex);
|
|
120
|
-
const [br, bg, bb] = parse(base);
|
|
121
|
-
|
|
122
|
-
const sr = Math.round(r + (br - r) * amount);
|
|
123
|
-
const sg = Math.round(g + (bg - g) * amount);
|
|
124
|
-
const sb = Math.round(b + (bb - b) * amount);
|
|
125
|
-
|
|
126
|
-
return `#${sr.toString(16).padStart(2, '0')}${sg.toString(16).padStart(2, '0')}${sb.toString(16).padStart(2, '0')}`;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
// ============================================================
|
|
130
|
-
// Color Mixing
|
|
131
|
-
// ============================================================
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* Blend two hex colors by percentage.
|
|
135
|
-
* `pct` = 0 → 100% of `b`, `pct` = 100 → 100% of `a`.
|
|
136
|
-
*
|
|
137
|
-
* Used by all renderers for tinted fills and strokes.
|
|
138
|
-
*/
|
|
139
|
-
export function mix(a: string, b: string, pct: number): string {
|
|
140
|
-
const parse = (h: string): [number, number, number] => {
|
|
141
|
-
const r = h.replace('#', '');
|
|
142
|
-
const f = r.length === 3 ? [...r].map((c) => c + c).join('') : r;
|
|
143
|
-
return [
|
|
144
|
-
parseInt(f.substring(0, 2), 16),
|
|
145
|
-
parseInt(f.substring(2, 4), 16),
|
|
146
|
-
parseInt(f.substring(4, 6), 16),
|
|
147
|
-
];
|
|
148
|
-
};
|
|
149
|
-
const [ar, ag, ab] = parse(a),
|
|
150
|
-
[br, bg, bb] = parse(b),
|
|
151
|
-
t = pct / 100;
|
|
152
|
-
const c = (x: number, y: number) =>
|
|
153
|
-
Math.round(x * t + y * (1 - t))
|
|
154
|
-
.toString(16)
|
|
155
|
-
.padStart(2, '0');
|
|
156
|
-
return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
// ============================================================
|
|
160
|
-
// Value Ramp (the shared `<metric> <low?> <high?>` coloring convention)
|
|
161
|
-
// ============================================================
|
|
162
|
-
//
|
|
163
|
-
// Single source of truth for value-ramp fills across chart types (map
|
|
164
|
-
// `region-heat`, boxes-and-lines `heat`, and any future ramp). Callers
|
|
165
|
-
// resolve the two endpoint NAMES to palette hex, then ask for the fill at a
|
|
166
|
-
// normalized position `t∈[0,1]`. The helper owns ONLY the low→high blend; each
|
|
167
|
-
// caller keeps its own RAMP_FLOOR / base remap of `t`.
|
|
168
|
-
//
|
|
169
|
-
// The blend is a straight sRGB fade between the two true palette endpoints — no
|
|
170
|
-
// invented intermediate hue. `t=0` is exactly `low`, `t=1` is exactly `high`,
|
|
171
|
-
// and everything between is a direct interpolation of those two palette colours.
|
|
172
|
-
// (resvg has no `color-mix()`; `mix()` pre-computes the hex.)
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* Value-ramp fill at normalized position `t`. PURE and order-respecting:
|
|
176
|
-
* `t=0` → exactly `low`, `t=1` → exactly `high`, no sorting or intent
|
|
177
|
-
* correction. `low`/`high` are resolved hex (the caller maps colour names →
|
|
178
|
-
* palette hex). A straight sRGB fade between the two palette colours — no
|
|
179
|
-
* synthetic midpoint hue. `_opts` is retained for call-site/theme compat.
|
|
180
|
-
*/
|
|
181
|
-
export function valueRampColor(
|
|
182
|
-
low: string,
|
|
183
|
-
high: string,
|
|
184
|
-
t: number,
|
|
185
|
-
_opts: { isDark: boolean }
|
|
186
|
-
): string {
|
|
187
|
-
const tc = Math.max(0, Math.min(1, t));
|
|
188
|
-
return mix(high, low, tc * 100);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
/**
|
|
192
|
-
* Gradient stops that reproduce `valueRampColor` for a legend
|
|
193
|
-
* `<linearGradient>`. A direct two-endpoint fade needs only the two stops; the
|
|
194
|
-
* gradient itself interpolates between the palette colours.
|
|
195
|
-
*/
|
|
196
|
-
export function valueRampStops(
|
|
197
|
-
low: string,
|
|
198
|
-
high: string,
|
|
199
|
-
_opts: { isDark: boolean }
|
|
200
|
-
): ReadonlyArray<{ offset: number; color: string }> {
|
|
201
|
-
return [
|
|
202
|
-
{ offset: 0, color: low },
|
|
203
|
-
{ offset: 1, color: high },
|
|
204
|
-
];
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
// ============================================================
|
|
208
|
-
// Contrast / Accessibility
|
|
209
|
-
// ============================================================
|
|
210
|
-
|
|
211
|
-
/** WCAG 2.1 relative luminance (0 = black, 1 = white). */
|
|
212
|
-
export function relativeLuminance(hex: string): number {
|
|
213
|
-
const raw = hex.replace('#', '');
|
|
214
|
-
const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
|
|
215
|
-
|
|
216
|
-
const [r, g, b] = [
|
|
217
|
-
parseInt(full.substring(0, 2), 16) / 255,
|
|
218
|
-
parseInt(full.substring(2, 4), 16) / 255,
|
|
219
|
-
parseInt(full.substring(4, 6), 16) / 255,
|
|
220
|
-
].map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)) as [
|
|
221
|
-
number,
|
|
222
|
-
number,
|
|
223
|
-
number,
|
|
224
|
-
];
|
|
225
|
-
|
|
226
|
-
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
/**
|
|
230
|
-
* WCAG 2.1 contrast ratio between two colors. (L_lighter + 0.05) / (L_darker + 0.05).
|
|
231
|
-
* Range: 1.0 (identical) to 21.0 (black on white). Internal helper used by
|
|
232
|
-
* `contrastText`'s pastel branch.
|
|
233
|
-
*/
|
|
234
|
-
export function contrastRatio(a: string, b: string): number {
|
|
235
|
-
const la = relativeLuminance(a);
|
|
236
|
-
const lb = relativeLuminance(b);
|
|
237
|
-
const lighter = Math.max(la, lb);
|
|
238
|
-
const darker = Math.min(la, lb);
|
|
239
|
-
return (lighter + 0.05) / (darker + 0.05);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Pick `lightText` or `darkText` for placement on top of `bg`.
|
|
244
|
-
*
|
|
245
|
-
* Three-tier decision:
|
|
246
|
-
* 1. **High-luminance fill (luminance > 0.55)** → `darkText`. Yellows, peaches,
|
|
247
|
-
* light cyans — dark text reads better and a light cream on light yellow is
|
|
248
|
-
* unreadable.
|
|
249
|
-
* 2. **Pastel fill (min RGB channel ≥ 100, luminance ≤ 0.55)** → defer to WCAG
|
|
250
|
-
* ratio. Pastels have no near-zero channel and tend to read as "soft" —
|
|
251
|
-
* dark text usually wins by ratio (catppuccin dark mauve `#cba6f7` min 166,
|
|
252
|
-
* ratio 9.35:1; tokyo-night dark red `#f7768e` min 118, ratio 7.86:1; and
|
|
253
|
-
* tokyo-night green `#9ece6a` min 106, ratio 11.4:1 all correctly pick dark).
|
|
254
|
-
* 3. **Saturated fill (min RGB < 100, luminance ≤ 0.55)** → `lightText`. At least
|
|
255
|
-
* one channel near zero signals true saturation — gruvbox dark green
|
|
256
|
-
* `#b8bb26` (min 38), blueprint blue `#1f5e8c` (min 31), bold red/blue
|
|
257
|
-
* (min 0), solarized blue `#268bd2` (min 38). The user consistently
|
|
258
|
-
* prefers light text on these for visual punch.
|
|
259
|
-
*
|
|
260
|
-
* `min RGB` discriminates pastel-vs-saturated more reliably than `max-min`
|
|
261
|
-
* (vibrance): tokyo-night and catppuccin dark are pastels with high max RGB,
|
|
262
|
-
* so vibrance alone misclassifies them as "saturated."
|
|
263
|
-
*
|
|
264
|
-
* Tinted fills (luminance ~0.7+ in light themes / ~0.02–0.14 in dark themes)
|
|
265
|
-
* are unambiguous in either branch; only solid-fill output shifts here.
|
|
266
|
-
*/
|
|
267
|
-
export function contrastText(
|
|
268
|
-
bg: string,
|
|
269
|
-
lightText: string,
|
|
270
|
-
darkText: string
|
|
271
|
-
): string {
|
|
272
|
-
const L = relativeLuminance(bg);
|
|
273
|
-
if (L > 0.55) return darkText;
|
|
274
|
-
const raw = bg.replace('#', '');
|
|
275
|
-
const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
|
|
276
|
-
const r = parseInt(full.substring(0, 2), 16);
|
|
277
|
-
const g = parseInt(full.substring(2, 4), 16);
|
|
278
|
-
const b = parseInt(full.substring(4, 6), 16);
|
|
279
|
-
const minRgb = Math.min(r, g, b);
|
|
280
|
-
if (minRgb >= 100) {
|
|
281
|
-
// Pastel: defer to WCAG ratio (almost always picks dark for these).
|
|
282
|
-
return contrastRatio(bg, darkText) > contrastRatio(bg, lightText)
|
|
283
|
-
? darkText
|
|
284
|
-
: lightText;
|
|
285
|
-
}
|
|
286
|
-
// Truly saturated: prefer light text for visual punch.
|
|
287
|
-
return lightText;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
// ============================================================
|
|
291
|
-
// Shape Fill (canonical tinted fill)
|
|
292
|
-
// ============================================================
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Canonical tinted shape fill: 25% intent color + 75% surface.
|
|
296
|
-
* Use for any "tinted intent shape" — graph nodes, kanban cards,
|
|
297
|
-
* journey-map shapes, infra severity, ECharts pie/funnel/bar/etc.
|
|
298
|
-
*
|
|
299
|
-
* NOT for subtle-neutral shapes (use the existing 5-10% inline formula
|
|
300
|
-
* for "recede when no intent" cases — infra normal-state, untagged
|
|
301
|
-
* boxes, no-color sequence participants).
|
|
302
|
-
*
|
|
303
|
-
* Sankey is the only documented exception (75/45% custom desaturation).
|
|
304
|
-
*
|
|
305
|
-
* `opts.solid` (per `option solid-fill`): bypass the 25% tint and return
|
|
306
|
-
* the raw intent. Opt-in only; default behavior unchanged.
|
|
307
|
-
*/
|
|
308
|
-
/**
|
|
309
|
-
* The theme-aware base background a diagram's tinted shapes blend toward:
|
|
310
|
-
* `surface` in dark, page `bg` in light. Concentrates the
|
|
311
|
-
* `isDark ? palette.surface : palette.bg` pick repeated across ~20 renderers
|
|
312
|
-
* (Story 111.3).
|
|
313
|
-
*/
|
|
314
|
-
export function themeBaseBg(palette: PaletteColors, isDark: boolean): string {
|
|
315
|
-
return isDark ? palette.surface : palette.bg;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
export function shapeFill(
|
|
319
|
-
palette: PaletteColors,
|
|
320
|
-
intent: string,
|
|
321
|
-
isDark: boolean,
|
|
322
|
-
opts?: { solid?: boolean }
|
|
323
|
-
): string {
|
|
324
|
-
if (opts?.solid) return intent;
|
|
325
|
-
return mix(intent, themeBaseBg(palette, isDark), 25);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
// ============================================================
|
|
329
|
-
// Series Colors
|
|
330
|
-
// ============================================================
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* Derive the 8-color series rotation from a palette's named colors, in the
|
|
334
|
-
* shared {@link CATEGORICAL_COLOR_ORDER} (RGB-seeded, max-contrast). Tag
|
|
335
|
-
* swatches and chart series colors thus share one canonical rotation.
|
|
336
|
-
*/
|
|
337
|
-
export function getSeriesColors(palette: PaletteColors): string[] {
|
|
338
|
-
const c = palette.colors;
|
|
339
|
-
return CATEGORICAL_COLOR_ORDER.map((name) => c[name]!);
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Generate `count` visually distinct colors for segment-based charts
|
|
344
|
-
* (pie, doughnut, polar-area).
|
|
345
|
-
*
|
|
346
|
-
* Stays ON-PALETTE: the first pass is the palette's own series hues at full
|
|
347
|
-
* strength. When a chart needs more segments than the palette has distinct
|
|
348
|
-
* hues, additional passes reuse the SAME hues at shifted lightness — each a
|
|
349
|
-
* tint (mixed toward `bg`) or shade (mixed toward `text`) of a true palette
|
|
350
|
-
* colour. Hue is never rotated or invented; extra segments read as lighter /
|
|
351
|
-
* darker variants of the palette, not as wheel-generated colours.
|
|
352
|
-
*
|
|
353
|
-
* (Several palettes have duplicate hex for different named colours — e.g.
|
|
354
|
-
* teal===cyan — so the first pass is deduped before the lightness bands kick in.)
|
|
355
|
-
*/
|
|
356
|
-
export function getSegmentColors(
|
|
357
|
-
palette: PaletteColors,
|
|
358
|
-
count: number
|
|
359
|
-
): string[] {
|
|
360
|
-
if (count <= 0) return [];
|
|
361
|
-
const base = [...new Set(getSeriesColors(palette))];
|
|
362
|
-
if (count <= base.length) return base.slice(0, count);
|
|
363
|
-
|
|
364
|
-
// Lightness bands of the SAME hues — alternating tint/shade, progressively
|
|
365
|
-
// stronger. Mixing toward the neutral bg/text keeps hue, varying only
|
|
366
|
-
// lightness/saturation (a tint/fade). Symmetric across light & dark themes:
|
|
367
|
-
// `bg` is light/dark and `text` is its inverse, so the two directions always
|
|
368
|
-
// diverge.
|
|
369
|
-
const { bg, text } = palette;
|
|
370
|
-
const variants: ReadonlyArray<(c: string) => string> = [
|
|
371
|
-
(c) => mix(c, bg, 55), // lighter
|
|
372
|
-
(c) => mix(c, text, 55), // darker
|
|
373
|
-
(c) => mix(c, bg, 35),
|
|
374
|
-
(c) => mix(c, text, 35),
|
|
375
|
-
];
|
|
376
|
-
|
|
377
|
-
const out = [...base];
|
|
378
|
-
for (let w = 0; out.length < count; w++) {
|
|
379
|
-
const variant = variants[w % variants.length]!;
|
|
380
|
-
for (const c of base) {
|
|
381
|
-
if (out.length >= count) break;
|
|
382
|
-
out.push(variant(c));
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
return out.slice(0, count);
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
// ============================================================
|
|
389
|
-
// Political map fills (map colorize, §24B)
|
|
390
|
-
// ============================================================
|
|
391
|
-
|
|
392
|
-
/** Mix-toward-surface bands (% of the raw swatch retained) for political fills,
|
|
393
|
-
* mode-aware. Colorize fills must stay ON-PALETTE — they're soft tints of the
|
|
394
|
-
* palette's OWN named hues, not wheel-generated colours. The retained-% is kept
|
|
395
|
-
* clear of the water backdrop's own blue tint (WATER_TINT_*), so a country fill
|
|
396
|
-
* never coincides with the ocean. The first band is the normal soft tint; later
|
|
397
|
-
* bands only come into play if a map needs more colours than the palette has
|
|
398
|
-
* distinct land hues (rare — first-fit coloring needs ≤6 on the shipped graphs). */
|
|
399
|
-
const POLITICAL_TINT_BANDS = {
|
|
400
|
-
light: [32, 48, 64, 80],
|
|
401
|
-
dark: [44, 58, 72, 86],
|
|
402
|
-
} as const;
|
|
403
|
-
|
|
404
|
-
/**
|
|
405
|
-
* Generate `count` political-fill tints from the active palette's OWN hues
|
|
406
|
-
* (§24B colorize). Each is a palette swatch softened toward the surface, so the
|
|
407
|
-
* fills always read as that palette (Atlas tints look like Atlas, not neon wheel
|
|
408
|
-
* samples). Hues are ordered LAND-FIRST — blue/cyan (the ocean-adjacent hues) go
|
|
409
|
-
* last, so country fills never read as water; they are only reached if a map
|
|
410
|
-
* needs >6 colours (it never does — first-fit needs ≤6, palettes ship ≥6 land
|
|
411
|
-
* hues). `count` distinct colours come from walking the deduped hues; if more are
|
|
412
|
-
* needed, additional lightness BANDS of the same hues are appended (still
|
|
413
|
-
* on-palette). Deterministic; resvg-safe (hex out).
|
|
414
|
-
*/
|
|
415
|
-
export function politicalTints(
|
|
416
|
-
palette: PaletteColors,
|
|
417
|
-
count: number,
|
|
418
|
-
isDark: boolean
|
|
419
|
-
): string[] {
|
|
420
|
-
if (count <= 0) return [];
|
|
421
|
-
const base = themeBaseBg(palette, isDark);
|
|
422
|
-
const c = palette.colors;
|
|
423
|
-
// Land-first: greens/earth tones lead; water-like blue & cyan trail.
|
|
424
|
-
const swatches = [
|
|
425
|
-
...new Set([
|
|
426
|
-
c.green,
|
|
427
|
-
c.yellow,
|
|
428
|
-
c.orange,
|
|
429
|
-
c.purple,
|
|
430
|
-
c.red,
|
|
431
|
-
c.teal,
|
|
432
|
-
c.cyan,
|
|
433
|
-
c.blue,
|
|
434
|
-
]),
|
|
435
|
-
];
|
|
436
|
-
const bands = isDark ? POLITICAL_TINT_BANDS.dark : POLITICAL_TINT_BANDS.light;
|
|
437
|
-
const out: string[] = [];
|
|
438
|
-
for (const pct of bands) {
|
|
439
|
-
if (out.length >= count) break;
|
|
440
|
-
for (const s of swatches) out.push(mix(s, base, pct));
|
|
441
|
-
}
|
|
442
|
-
return out.slice(0, count);
|
|
443
|
-
}
|
package/src/palettes/index.ts
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
// Re-export types
|
|
2
|
-
export type { PaletteConfig, PaletteColors } from './types';
|
|
3
|
-
|
|
4
|
-
// Re-export registry
|
|
5
|
-
export {
|
|
6
|
-
getPalette,
|
|
7
|
-
resolvePaletteOrFallback,
|
|
8
|
-
getAvailablePalettes,
|
|
9
|
-
registerPalette,
|
|
10
|
-
isValidHex,
|
|
11
|
-
} from './registry';
|
|
12
|
-
|
|
13
|
-
// Re-export utilities
|
|
14
|
-
export {
|
|
15
|
-
hexToHSL,
|
|
16
|
-
hslToHex,
|
|
17
|
-
hexToHSLString,
|
|
18
|
-
tint,
|
|
19
|
-
shade,
|
|
20
|
-
getSeriesColors,
|
|
21
|
-
getSegmentColors,
|
|
22
|
-
contrastText,
|
|
23
|
-
shapeFill,
|
|
24
|
-
themeBaseBg,
|
|
25
|
-
} from './color-utils';
|
|
26
|
-
|
|
27
|
-
// Re-export palette definitions (alphabetical)
|
|
28
|
-
export { atlasPalette } from './atlas';
|
|
29
|
-
export { blueprintPalette } from './blueprint';
|
|
30
|
-
export { catppuccinPalette } from './catppuccin';
|
|
31
|
-
export { nordPalette } from './nord';
|
|
32
|
-
export { slatePalette } from './slate';
|
|
33
|
-
export { tidewaterPalette } from './tidewater';
|
|
34
|
-
export { tokyoNightPalette } from './tokyo-night';
|
|
35
|
-
|
|
36
|
-
// ============================================================
|
|
37
|
-
// Public namespace — `palettes` for use with render()
|
|
38
|
-
// ============================================================
|
|
39
|
-
|
|
40
|
-
import { atlasPalette } from './atlas';
|
|
41
|
-
import { blueprintPalette } from './blueprint';
|
|
42
|
-
import { catppuccinPalette } from './catppuccin';
|
|
43
|
-
import { nordPalette } from './nord';
|
|
44
|
-
import { slatePalette } from './slate';
|
|
45
|
-
import { tidewaterPalette } from './tidewater';
|
|
46
|
-
import { tokyoNightPalette } from './tokyo-night';
|
|
47
|
-
|
|
48
|
-
import type { PaletteConfig } from './types';
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* All built-in palettes, keyed by camelCase id. Use directly with render():
|
|
52
|
-
*
|
|
53
|
-
* await render(text, { palette: palettes.catppuccin });
|
|
54
|
-
*
|
|
55
|
-
* For preference/settings storage, the `.id` field of each entry is the
|
|
56
|
-
* canonical string (e.g. `'tokyo-night'`, `'nord'`) — that's the wire format
|
|
57
|
-
* used by share URLs and the CLI `--palette` flag.
|
|
58
|
-
*/
|
|
59
|
-
export const palettes = {
|
|
60
|
-
atlas: atlasPalette,
|
|
61
|
-
blueprint: blueprintPalette,
|
|
62
|
-
slate: slatePalette,
|
|
63
|
-
tidewater: tidewaterPalette,
|
|
64
|
-
nord: nordPalette,
|
|
65
|
-
catppuccin: catppuccinPalette,
|
|
66
|
-
tokyoNight: tokyoNightPalette,
|
|
67
|
-
} as const satisfies Record<string, PaletteConfig>;
|