ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/showcase/themes/showcase.css

@@ -0,0 +1,508 @@
+/* showcase.css — one stylesheet, two themes.
+ *
+ * Supported subset (lib/evg/EVGStyleSheet.rgr):
+ *   .class                  applies in every theme
+ *   .theme-<name> .class    applies only when that theme is active
+ *   .a, .b { ... }          selector lists
+ *
+ * Cascade: unscoped < theme-scoped < attributes authored in the TSX.
+ *
+ * Nothing in lib/evg/showcase/pages/*.tsx carries a visual attribute.
+ * Everything below the "structure" block is a theme talking.
+ */
+
+/* ==== structure, shared by both themes ================================== */
+
+.page {
+  width: 100%;
+  height: 100%;
+}
+
+.row {
+  flex-direction: row;
+  width: 100%;
+}
+
+.rule {
+  height: 3px;
+  width: 88px;
+}
+
+/* ---- album: the spread is a picture of named areas --------------------- */
+.spread {
+  display: grid;
+  width: 100%;
+  height: 512px;
+  grid-template-areas: "hero hero" "a b" "wide wide";
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 220px 150px 110px;
+}
+.hero { grid-area: hero; }
+.wide { grid-area: wide; }
+.cell {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+/* ---- cards: each card adopts the deck's rows, so captions line up ------ */
+.deck {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 170px auto;
+}
+.card {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: 1 / 3;
+}
+.shot {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+/* ---- units: every bar the same length, five ways ----------------------- */
+.bar   { height: 22px; }
+.u-px  { width: 192px; }
+.u-pt  { width: 144pt; }
+.u-in  { width: 2in; }
+.u-mm  { width: 50.8mm; }
+.u-cm  { width: 5.08cm; }
+.scope { font-size: 24px; width: 100%; }
+.u-em  { width: 8em; }
+.u-rem { width: 8rem; }
+.half  { width: 50%; }
+.u-pct { width: 100%; }
+
+/* ---- flex -------------------------------------------------------------- */
+.grow1    { flex: 1; }
+.grow2    { flex: 2; }
+.noshrink { flex-shrink: 0; width: 120px; }
+.between  { justify-content: space-between; }
+.wrapping { flex-wrap: wrap; }
+.chip     { width: 90px; }
+.tile     { width: 110px; }
+
+/* ---- box model --------------------------------------------------------- */
+.demo     { flex: 1; height: 90px; }
+.padded   { padding: 14px; }
+.padSides { padding-top: 4px; padding-right: 20px; padding-bottom: 24px; padding-left: 8px; }
+.bordered { padding: 10px; border-width: 3px; }
+.inner    { width: 100%; height: 22px; }
+.marA     { margin-bottom: 10px; }
+.marB     { margin-top: 10px; margin-left: 24px; width: 80%; }
+.nest     { padding: 12px; width: 100%; }
+.l4       { height: 24px; }
+
+/* ---- emoji: cluster specimens and a tint of their own ------------------ */
+.seqRow  { flex-direction: row; width: 100%; }
+.seqText { flex: 1; }
+
+/* ---- vector: geometry in the page, size and colour here ---------------- */
+/* `d` and `viewBox` live in the TSX because they are the shape itself. Every
+ * other property of these paths is a theme decision, including how big they
+ * are — a viewBox means the same drawing scales to any box without changing. */
+.vecRow  { align-items: center; }
+.icon    { }
+.shape   { }
+.evenodd { fill-rule: evenodd; }
+
+/* ---- imported svg: geometry in the file, size and colour here ---------- */
+/* rosette.svg names no colours, so the fill below is what its shapes inherit
+ * — the same relationship a hand-written <Path> has with its fill, extended to
+ * a file the gallery does not own. emblem.svg brings its own palette and keeps
+ * it, so only its size is a theme decision. */
+.art     { }
+.emblem  { }
+
+/* ---- charts: geometry from the data, colour from the theme ------------- */
+/* The one generated page in this gallery, and it follows the same rule as the
+   hand-written ones: the tree says what is drawn, the theme says how it looks.
+   A chart's series are numbered in the order it draws them, so `chartFill0` is
+   whatever the first series happens to be. Stroke widths and opacities stay in
+   the tree — they were computed from the data, not chosen. The charts are drawn
+   on a TRANSPARENT background: the page shows through. */
+.chart     { }
+/* A chart keeps its own width — the drawing's, not the column's — so the
+   wrapper is what centres it. Without this a pie, which has no axis to make
+   room for, sits against the left edge of a column sized for a bar chart. */
+.chartBox  { width: 100%; align-items: center; }
+.chartRow  { align-items: flex-start; }
+/* HALVES OF THE PAGE, not of their contents. `min-width: 0` is the whole
+   difference: without it a flex item may not be sized below its min-content
+   width, so a chart wider than half the row widens its own column, the two
+   columns no longer add up to the row, and the pair either hangs off the
+   right (nowrap) or drops onto two lines (EVG's default). Two equal columns
+   is what this page is; a drawing too wide for its half overflows its column
+   evenly on both sides, into the gutter and the margin, which is what
+   centring means. */
+.chartCell { flex: 1; min-width: 0; }
+
+/* ---- the chart api page: the calls, beside the chart they built -------- */
+/* The one page in this gallery whose charts came from a program rather than
+   from a specification, so it prints the program. The lines are read out of
+   the generating tool's own source, which is why they are a stack of Labels
+   rather than one block of text: EVG lays out a paragraph, and a line of code
+   that wrapped would be a line of code that lied. */
+.codeBlock { width: 100%; }
+.codeLine  { }
+
+/* A stroked path must say so, or the outline is filled in as a shape. */
+.chartGrid, .chartTick, .chartDomain, .chartFrame,
+.chartStroke0, .chartStroke1, .chartStroke2, .chartStroke3, .chartStroke4,
+.chartStroke5, .chartStroke6, .chartStroke7, .chartStroke8, .chartStroke9 {
+  fill: none;
+}
+
+/* ==== theme: editorial — warm paper, serif display ====================== */
+
+.theme-editorial .page {
+  background-color: #fbf7f0;
+  padding: 44px;
+  font-family: Noto Sans;
+}
+.theme-editorial .eyebrow {
+  font-size: 12px;
+  color: #a1856a;
+  font-family: Josefin Sans;
+}
+.theme-editorial .title {
+  font-size: 34px;
+  font-family: Cinzel;
+  color: #3b2f2a;
+  line-height: 1.2;
+}
+.theme-editorial .rule {
+  background-color: #b08d57;
+  margin-top: 14px;
+}
+.theme-editorial .subhead {
+  font-size: 13px;
+  font-family: Josefin Sans;
+  color: #8a7360;
+  margin-top: 26px;
+  margin-bottom: 8px;
+}
+.theme-editorial .caption,
+.theme-editorial .body {
+  font-size: 13px;
+  color: #6b5b52;
+  line-height: 1.4;
+  margin-top: 14px;
+}
+.theme-editorial .vecRow { gap: 22px; margin-top: 6px; }
+.theme-editorial .icon   { stroke: #b08d57; stroke-width: 2.5; fill: none; }
+.theme-editorial .iconSm { width: 28px;  height: 28px; }
+.theme-editorial .iconMd { width: 52px;  height: 52px; }
+.theme-editorial .iconLg { width: 84px;  height: 84px; }
+.theme-editorial .shape  { width: 76px; height: 76px; fill: #3b2f2a; }
+.theme-editorial .art      { fill: #3b2f2a; }
+.theme-editorial .artAccent { fill: #b08d57; }
+.theme-editorial .artMuted  { fill: #c8bda9; }
+.theme-editorial .artSm    { width: 34px; height: 34px; }
+.theme-editorial .artMd    { width: 62px; height: 62px; }
+.theme-editorial .artLg    { width: 96px; height: 96px; }
+.theme-editorial .emblemSm { width: 54px;  height: 65px; }
+.theme-editorial .emblemLg { width: 100px; height: 120px; }
+/* charts */
+/* the calls that built the chart */
+.theme-editorial .codeBlock { margin-top: 2px; margin-bottom: 2px; }
+.theme-editorial .codeLine  { font-size: 8px; font-family: Noto Sans; color: #97785a; line-height: 1.5; }
+.theme-editorial .chart      { margin-top: 8px; margin-bottom: 4px; }
+.theme-editorial .chartGrid  { stroke: #d8cfbd; }
+.theme-editorial .chartTick,
+.theme-editorial .chartDomain,
+.theme-editorial .chartFrame { stroke: #b8ac97; }
+.theme-editorial .chartLabel { color: #6b5f52; }
+.theme-editorial .chartTitle { color: #3b2f2a; }
+.theme-editorial .chartFill0   { fill: #4c78a8; }
+.theme-editorial .chartStroke0 { stroke: #4c78a8; }
+.theme-editorial .chartFill1   { fill: #c47f3d; }
+.theme-editorial .chartStroke1 { stroke: #c47f3d; }
+.theme-editorial .chartFill2   { fill: #a34a4a; }
+.theme-editorial .chartStroke2 { stroke: #a34a4a; }
+.theme-editorial .chartFill3   { fill: #5f9ea0; }
+.theme-editorial .chartStroke3 { stroke: #5f9ea0; }
+.theme-editorial .chartFill4   { fill: #5a8a4a; }
+.theme-editorial .chartStroke4 { stroke: #5a8a4a; }
+.theme-editorial .chartFill5   { fill: #c9a227; }
+.theme-editorial .chartStroke5 { stroke: #c9a227; }
+.theme-editorial .chartFill6   { fill: #8a6ba2; }
+.theme-editorial .chartStroke6 { stroke: #8a6ba2; }
+.theme-editorial .chartFill7   { fill: #c98f9b; }
+.theme-editorial .chartStroke7 { stroke: #c98f9b; }
+.theme-editorial .chartFill8   { fill: #8a6f5d; }
+.theme-editorial .chartStroke8 { stroke: #8a6f5d; }
+
+.theme-editorial .spread { gap: 16px; margin-top: 24px; }
+.theme-editorial .cell   { border-radius: 10px; }
+.theme-editorial .deck   { gap: 16px; margin-top: 20px; }
+.theme-editorial .shot   { border-radius: 8px; }
+.theme-editorial .cardcap {
+  font-size: 12px;
+  color: #6b5b52;
+  line-height: 1.35;
+  margin-top: 8px;
+}
+.theme-editorial .row      { gap: 14px; }
+.theme-editorial .bar      { background-color: #b08d57; margin-top: 8px; border-radius: 3px; }
+.theme-editorial .barLabel { font-size: 11px; color: #fbf7f0; margin-left: 8px; }
+.theme-editorial .box,
+.theme-editorial .chip,
+.theme-editorial .tile   { background-color: #e8dcc8; height: 46px; border-radius: 6px; }
+.theme-editorial .boxLabel { font-size: 12px; color: #5a4a3f; margin-top: 15px; margin-left: 10px; }
+.theme-editorial .demo   { background-color: #e8dcc8; border-radius: 6px; }
+.theme-editorial .bordered { border-color: #b08d57; }
+.theme-editorial .inner  { background-color: #b08d57; border-radius: 3px; }
+.theme-editorial .nest   { background-color: #efe6d6; border-radius: 6px; margin-top: 8px; }
+.theme-editorial .l2     { background-color: #e5d8c2; }
+.theme-editorial .l3     { background-color: #d8c7ab; }
+.theme-editorial .l4     { background-color: #b08d57; }
+.theme-editorial .specimen  { flex-direction: row; margin-top: 12px; }
+.theme-editorial .specLabel { font-size: 11px; color: #a1856a; width: 110px; margin-top: 10px; }
+.theme-editorial .specText  { font-size: 24px; color: #3b2f2a; }
+.theme-editorial .faceDisplay { font-family: Cinzel; }
+.theme-editorial .faceAlt     { font-family: Josefin Sans; }
+.theme-editorial .faceBody    { font-family: Noto Sans; }
+.theme-editorial .baseline  { flex-direction: row; align-items: baseline; margin-top: 10px; }
+.theme-editorial .big       { font-size: 30px; font-family: Cinzel; color: #3b2f2a; }
+.theme-editorial .small     { font-size: 13px; color: #6b5b52; margin-left: 10px; }
+
+.theme-editorial .seqRow    { margin-top: 14px; gap: 16px; }
+.theme-editorial .seqGlyph  { font-size: 34px; color: #3b2f2a; width: 56px; }
+.theme-editorial .seqName   { font-size: 13px; font-family: Josefin Sans; color: #3b2f2a; }
+.theme-editorial .seqNote   { font-size: 12px; color: #6b5b52; line-height: 1.4; margin-top: 3px; }
+.theme-editorial .tintRose,
+.theme-editorial .tintBlue,
+.theme-editorial .tintGreen { font-size: 20px; color: #3b2f2a; margin-top: 8px; }
+.theme-editorial .tintRose  { emoji-color: #c0392b; }
+.theme-editorial .tintBlue  { emoji-color: #2f6f9f; }
+.theme-editorial .tintGreen { emoji-color: #4f7a4a; }
+
+/* ==== theme: studio — dark, geometric sans ============================== */
+
+.theme-studio .page {
+  background-color: #14161a;
+  padding: 40px;
+  font-family: Josefin Sans;
+}
+.theme-studio .eyebrow {
+  font-size: 11px;
+  color: #6f7c8c;
+  font-family: Noto Sans;
+}
+.theme-studio .title {
+  font-size: 30px;
+  font-family: Josefin Sans;
+  font-weight: bold;
+  color: #f2f5f8;
+  line-height: 1.15;
+}
+.theme-studio .rule {
+  background-color: #4ea3ff;
+  height: 2px;
+  width: 140px;
+  margin-top: 12px;
+}
+.theme-studio .subhead {
+  font-size: 12px;
+  font-family: Noto Sans;
+  color: #6f7c8c;
+  margin-top: 24px;
+  margin-bottom: 6px;
+}
+.theme-studio .caption,
+.theme-studio .body {
+  font-size: 12px;
+  color: #9aa7b6;
+  line-height: 1.45;
+  margin-top: 14px;
+}
+.theme-studio .spread { gap: 10px; margin-top: 20px; }
+.theme-studio .vecRow { gap: 18px; margin-top: 6px; }
+.theme-studio .icon   { stroke: #14e0a0; stroke-width: 3; fill: none; }
+.theme-studio .iconSm { width: 30px;  height: 30px; }
+.theme-studio .iconMd { width: 56px;  height: 56px; }
+.theme-studio .iconLg { width: 92px;  height: 92px; }
+.theme-studio .shape  { width: 80px; height: 80px; fill: #e8e8ea; }
+.theme-studio .art      { fill: #e8e8ea; }
+.theme-studio .artAccent { fill: #14e0a0; }
+.theme-studio .artMuted  { fill: #6b6b74; }
+.theme-studio .artSm    { width: 36px; height: 36px; }
+.theme-studio .artMd    { width: 66px; height: 66px; }
+.theme-studio .artLg    { width: 104px; height: 104px; }
+.theme-studio .emblemSm { width: 56px;  height: 67px; }
+.theme-studio .emblemLg { width: 104px; height: 125px; }
+/* charts */
+/* the calls that built the chart */
+.theme-studio .codeBlock { margin-top: 2px; margin-bottom: 2px; }
+.theme-studio .codeLine  { font-size: 8px; font-family: Noto Sans; color: #7f8fa3; line-height: 1.5; }
+.theme-studio .chart      { margin-top: 8px; margin-bottom: 4px; }
+.theme-studio .chartGrid  { stroke: #3a4048; }
+.theme-studio .chartTick,
+.theme-studio .chartDomain,
+.theme-studio .chartFrame { stroke: #6f7681; }
+.theme-studio .chartLabel { color: #aab2bd; }
+.theme-studio .chartTitle { color: #e8e8ea; }
+.theme-studio .chartFill0   { fill: #4ea3ff; }
+.theme-studio .chartStroke0 { stroke: #4ea3ff; }
+.theme-studio .chartFill1   { fill: #ffa657; }
+.theme-studio .chartStroke1 { stroke: #ffa657; }
+.theme-studio .chartFill2   { fill: #ff7b72; }
+.theme-studio .chartStroke2 { stroke: #ff7b72; }
+.theme-studio .chartFill3   { fill: #56d4c4; }
+.theme-studio .chartStroke3 { stroke: #56d4c4; }
+.theme-studio .chartFill4   { fill: #7ee787; }
+.theme-studio .chartStroke4 { stroke: #7ee787; }
+.theme-studio .chartFill5   { fill: #f2cc60; }
+.theme-studio .chartStroke5 { stroke: #f2cc60; }
+.theme-studio .chartFill6   { fill: #c08cff; }
+.theme-studio .chartStroke6 { stroke: #c08cff; }
+.theme-studio .chartFill7   { fill: #ff9bb3; }
+.theme-studio .chartStroke7 { stroke: #ff9bb3; }
+.theme-studio .chartFill8   { fill: #c4a48a; }
+.theme-studio .chartStroke8 { stroke: #c4a48a; }
+
+.theme-studio .cell   { border-radius: 2px; }
+.theme-studio .deck   { gap: 10px; margin-top: 18px; }
+.theme-studio .shot   { border-radius: 2px; }
+.theme-studio .cardcap {
+  font-size: 11px;
+  color: #9aa7b6;
+  line-height: 1.4;
+  margin-top: 8px;
+}
+.theme-studio .row      { gap: 10px; }
+.theme-studio .bar      { background-color: #4ea3ff; margin-top: 6px; }
+.theme-studio .barLabel { font-size: 11px; color: #0d1014; margin-left: 8px; }
+.theme-studio .box,
+.theme-studio .chip,
+.theme-studio .tile   { background-color: #232830; height: 44px; }
+.theme-studio .boxLabel { font-size: 12px; color: #cdd6e0; margin-top: 14px; margin-left: 10px; }
+.theme-studio .demo   { background-color: #232830; }
+.theme-studio .bordered { border-color: #4ea3ff; }
+.theme-studio .inner  { background-color: #4ea3ff; }
+.theme-studio .nest   { background-color: #1b1f26; margin-top: 8px; }
+.theme-studio .l2     { background-color: #232830; }
+.theme-studio .l3     { background-color: #2d343e; }
+.theme-studio .l4     { background-color: #4ea3ff; }
+.theme-studio .specimen  { flex-direction: row; margin-top: 10px; }
+.theme-studio .specLabel { font-size: 11px; color: #6f7c8c; width: 110px; margin-top: 8px; font-family: Noto Sans; }
+.theme-studio .specText  { font-size: 22px; color: #f2f5f8; }
+.theme-studio .faceDisplay { font-family: Cinzel; }
+.theme-studio .faceAlt     { font-family: Josefin Sans; }
+.theme-studio .faceBody    { font-family: Noto Sans; }
+.theme-studio .baseline  { flex-direction: row; align-items: baseline; margin-top: 10px; }
+.theme-studio .big       { font-size: 28px; font-family: Josefin Sans; color: #4ea3ff; }
+.theme-studio .small     { font-size: 12px; color: #9aa7b6; margin-left: 10px; }
+
+.theme-studio .seqRow    { margin-top: 12px; gap: 14px; }
+.theme-studio .seqGlyph  { font-size: 32px; color: #f2f5f8; width: 52px; }
+.theme-studio .seqName   { font-size: 12px; font-family: Noto Sans; color: #f2f5f8; }
+.theme-studio .seqNote   { font-size: 11px; color: #9aa7b6; line-height: 1.45; margin-top: 3px; }
+.theme-studio .tintRose,
+.theme-studio .tintBlue,
+.theme-studio .tintGreen { font-size: 19px; color: #f2f5f8; margin-top: 8px; }
+.theme-studio .tintRose  { emoji-color: #ff6b6b; }
+.theme-studio .tintBlue  { emoji-color: #4ea3ff; }
+.theme-studio .tintGreen { emoji-color: #5fd08a; }
+
+/* ==== theme: autumn — muted, broken tones on warm grey ================== */
+/* Nothing here is a saturated colour. The palette is built from ochre, rust,
+   olive and clay knocked back toward grey, which is what keeps nine series
+   apart without any of them shouting. */
+
+.theme-autumn .page {
+  background-color: #ece5d8;
+  padding: 44px;
+  font-family: Noto Sans;
+}
+.theme-autumn .eyebrow {
+  font-size: 11px;
+  color: #8a7660;
+  font-family: Noto Sans;
+}
+.theme-autumn .title {
+  font-size: 32px;
+  font-family: Cinzel;
+  color: #4a3b2c;
+  line-height: 1.15;
+}
+.theme-autumn .rule {
+  background-color: #a6603c;
+  height: 2px;
+  width: 120px;
+  margin-top: 13px;
+}
+.theme-autumn .subhead {
+  font-size: 12px;
+  font-family: Noto Sans;
+  color: #8a7660;
+  margin-top: 22px;
+  margin-bottom: 6px;
+}
+.theme-autumn .caption,
+.theme-autumn .body {
+  font-size: 12px;
+  color: #6d5c4c;
+  line-height: 1.45;
+  margin-top: 12px;
+}
+.theme-autumn .spread { gap: 12px; margin-top: 20px; }
+.theme-autumn .cell   { background-color: #e0d6c4; }
+.theme-autumn .deck   { gap: 14px; margin-top: 18px; }
+.theme-autumn .card   { background-color: #e0d6c4; padding: 12px; }
+.theme-autumn .shot   { height: 120px; }
+.theme-autumn .bar    { background-color: #a6603c; }
+.theme-autumn .demo   { background-color: #d8cbb5; }
+.theme-autumn .inner  { background-color: #a6603c; }
+.theme-autumn .bordered { border-color: #8a7660; }
+.theme-autumn .nest   { background-color: #d8cbb5; }
+.theme-autumn .chip,
+.theme-autumn .tile   { background-color: #c9b699; }
+.theme-autumn .vecRow { gap: 20px; margin-top: 6px; }
+.theme-autumn .icon   { stroke: #a6603c; stroke-width: 2.5; fill: none; }
+.theme-autumn .iconSm { width: 28px;  height: 28px; }
+.theme-autumn .iconMd { width: 52px;  height: 52px; }
+.theme-autumn .iconLg { width: 84px;  height: 84px; }
+.theme-autumn .shape  { width: 78px; height: 78px; fill: #4a3b2c; }
+.theme-autumn .art      { fill: #4a3b2c; }
+.theme-autumn .artAccent { fill: #a6603c; }
+.theme-autumn .artMuted  { fill: #cbb79c; }
+.theme-autumn .artSm    { width: 34px; height: 34px; }
+.theme-autumn .artMd    { width: 62px; height: 62px; }
+.theme-autumn .artLg    { width: 98px; height: 98px; }
+.theme-autumn .emblemSm { width: 54px;  height: 65px; }
+.theme-autumn .emblemLg { width: 100px; height: 120px; }
+/* charts */
+/* the calls that built the chart */
+.theme-autumn .codeBlock { margin-top: 2px; margin-bottom: 2px; }
+.theme-autumn .codeLine  { font-size: 8px; font-family: Noto Sans; color: #8a7660; line-height: 1.5; }
+.theme-autumn .chart      { margin-top: 8px; margin-bottom: 4px; }
+.theme-autumn .chartGrid  { stroke: #cbbca7; }
+.theme-autumn .chartTick,
+.theme-autumn .chartDomain,
+.theme-autumn .chartFrame { stroke: #a2907a; }
+.theme-autumn .chartLabel { color: #6d5c4c; }
+.theme-autumn .chartTitle { color: #43362a; }
+.theme-autumn .chartFill0   { fill: #a6603c; }
+.theme-autumn .chartStroke0 { stroke: #a6603c; }
+.theme-autumn .chartFill1   { fill: #c98c4e; }
+.theme-autumn .chartStroke1 { stroke: #c98c4e; }
+.theme-autumn .chartFill2   { fill: #8c6239; }
+.theme-autumn .chartStroke2 { stroke: #8c6239; }
+.theme-autumn .chartFill3   { fill: #6f7d4e; }
+.theme-autumn .chartStroke3 { stroke: #6f7d4e; }
+.theme-autumn .chartFill4   { fill: #9c6b5a; }
+.theme-autumn .chartStroke4 { stroke: #9c6b5a; }
+.theme-autumn .chartFill5   { fill: #c2a04b; }
+.theme-autumn .chartStroke5 { stroke: #c2a04b; }
+.theme-autumn .chartFill6   { fill: #7a5c48; }
+.theme-autumn .chartStroke6 { stroke: #7a5c48; }
+.theme-autumn .chartFill7   { fill: #b58463; }
+.theme-autumn .chartStroke7 { stroke: #b58463; }
+.theme-autumn .chartFill8   { fill: #5f6b52; }
+.theme-autumn .chartStroke8 { stroke: #5f6b52; }

package/dist/lib/evg/showcase/themes/tables-default.css

@@ -0,0 +1,123 @@
+/* GENERATED by gallery/vela/tools/vela_evg.rgr — do not edit by hand. */
+/* The colours the Vega specifications asked for, as the DEFAULT layer:
+   a theme's own chart rules are scoped and override these, and a build
+   with no chart theme still draws the chart the spec described. */
+
+.chartFrame { stroke: #8a8f98; }
+.chartTick { stroke: #8a8f98; }
+.chartLabel { color: #8a8f98; }
+.chartDomain { stroke: #8a8f98; }
+.chartTitle { color: #8a8f98; }
+.chartText10 { color: #8a8f98; }
+.chartFill0 { fill: rgb(69, 180, 194); }
+.chartStroke0 { stroke: rgb(69, 180, 194); }
+.chartFill1 { fill: #4c78a8; }
+.chartStroke1 { stroke: #4c78a8; }
+.chartFill2 { fill: rgb(212, 238, 180); }
+.chartStroke2 { stroke: rgb(212, 238, 180); }
+.chartFill3 { fill: rgb(134, 208, 187); }
+.chartStroke3 { stroke: rgb(134, 208, 187); }
+.chartFill4 { fill: rgb(28, 49, 133); }
+.chartStroke4 { stroke: rgb(28, 49, 133); }
+.chartFill5 { fill: rgb(34, 82, 161); }
+.chartStroke5 { stroke: rgb(34, 82, 161); }
+.chartFill6 { fill: rgb(79, 185, 193); }
+.chartStroke6 { stroke: rgb(79, 185, 193); }
+.chartFill7 { fill: rgb(239, 249, 189); }
+.chartStroke7 { stroke: rgb(239, 249, 189); }
+.chartFill8 { fill: rgb(32, 61, 146); }
+.chartStroke8 { stroke: rgb(32, 61, 146); }
+.chartFill9 { fill: rgb(84, 187, 192); }
+.chartStroke9 { stroke: rgb(84, 187, 192); }
+.chartFill10 { fill: #8a8f98; }
+.chartStroke10 { stroke: #8a8f98; }
+.chartFill11 { fill: rgb(234, 247, 187); }
+.chartStroke11 { stroke: rgb(234, 247, 187); }
+.chartFill12 { fill: rgb(229, 245, 185); }
+.chartStroke12 { stroke: rgb(229, 245, 185); }
+.chartFill13 { fill: rgb(224, 243, 182); }
+.chartStroke13 { stroke: rgb(224, 243, 182); }
+.chartFill14 { fill: rgb(219, 241, 180); }
+.chartStroke14 { stroke: rgb(219, 241, 180); }
+.chartFill15 { fill: rgb(204, 235, 181); }
+.chartStroke15 { stroke: rgb(204, 235, 181); }
+.chartFill16 { fill: rgb(197, 232, 181); }
+.chartStroke16 { stroke: rgb(197, 232, 181); }
+.chartFill17 { fill: rgb(189, 229, 181); }
+.chartStroke17 { stroke: rgb(189, 229, 181); }
+.chartFill18 { fill: rgb(179, 225, 182); }
+.chartStroke18 { stroke: rgb(179, 225, 182); }
+.chartFill19 { fill: rgb(169, 221, 183); }
+.chartStroke19 { stroke: rgb(169, 221, 183); }
+.chartFill20 { fill: rgb(158, 217, 184); }
+.chartStroke20 { stroke: rgb(158, 217, 184); }
+.chartFill21 { fill: rgb(148, 213, 185); }
+.chartStroke21 { stroke: rgb(148, 213, 185); }
+.chartFill22 { fill: rgb(137, 209, 186); }
+.chartStroke22 { stroke: rgb(137, 209, 186); }
+.chartFill23 { fill: rgb(126, 205, 188); }
+.chartStroke23 { stroke: rgb(126, 205, 188); }
+.chartFill24 { fill: rgb(116, 201, 189); }
+.chartStroke24 { stroke: rgb(116, 201, 189); }
+.chartFill25 { fill: rgb(105, 197, 190); }
+.chartStroke25 { stroke: rgb(105, 197, 190); }
+.chartFill26 { fill: rgb(96, 193, 191); }
+.chartStroke26 { stroke: rgb(96, 193, 191); }
+.chartFill27 { fill: rgb(87, 189, 192); }
+.chartStroke27 { stroke: rgb(87, 189, 192); }
+.chartFill28 { fill: rgb(78, 184, 193); }
+.chartStroke28 { stroke: rgb(78, 184, 193); }
+.chartFill29 { fill: rgb(63, 175, 194); }
+.chartStroke29 { stroke: rgb(63, 175, 194); }
+.chartFill30 { fill: rgb(57, 169, 193); }
+.chartStroke30 { stroke: rgb(57, 169, 193); }
+.chartFill31 { fill: rgb(50, 164, 193); }
+.chartStroke31 { stroke: rgb(50, 164, 193); }
+.chartFill32 { fill: rgb(44, 158, 192); }
+.chartStroke32 { stroke: rgb(44, 158, 192); }
+.chartFill33 { fill: rgb(41, 151, 190); }
+.chartStroke33 { stroke: rgb(41, 151, 190); }
+.chartFill34 { fill: rgb(38, 144, 188); }
+.chartStroke34 { stroke: rgb(38, 144, 188); }
+.chartFill35 { fill: rgb(36, 137, 186); }
+.chartStroke35 { stroke: rgb(36, 137, 186); }
+.chartFill36 { fill: rgb(33, 130, 184); }
+.chartStroke36 { stroke: rgb(33, 130, 184); }
+.chartFill37 { fill: rgb(33, 122, 181); }
+.chartStroke37 { stroke: rgb(33, 122, 181); }
+.chartFill38 { fill: rgb(33, 115, 177); }
+.chartStroke38 { stroke: rgb(33, 115, 177); }
+.chartFill39 { fill: rgb(33, 107, 173); }
+.chartStroke39 { stroke: rgb(33, 107, 173); }
+.chartFill40 { fill: rgb(33, 99, 170); }
+.chartStroke40 { stroke: rgb(33, 99, 170); }
+.chartFill41 { fill: rgb(34, 92, 167); }
+.chartStroke41 { stroke: rgb(34, 92, 167); }
+.chartFill42 { fill: rgb(34, 85, 163); }
+.chartStroke42 { stroke: rgb(34, 85, 163); }
+.chartFill43 { fill: rgb(35, 78, 160); }
+.chartStroke43 { stroke: rgb(35, 78, 160); }
+.chartFill44 { fill: rgb(35, 71, 156); }
+.chartStroke44 { stroke: rgb(35, 71, 156); }
+.chartFill45 { fill: rgb(33, 66, 150); }
+.chartStroke45 { stroke: rgb(33, 66, 150); }
+.chartFill46 { fill: rgb(32, 60, 145); }
+.chartStroke46 { stroke: rgb(32, 60, 145); }
+.chartFill47 { fill: rgb(30, 55, 139); }
+.chartStroke47 { stroke: rgb(30, 55, 139); }
+.chartFill48 { fill: #f58518; }
+.chartStroke48 { stroke: #f58518; }
+.chartFill49 { fill: #e45756; }
+.chartStroke49 { stroke: #e45756; }
+.chartFill50 { fill: #72b7b2; }
+.chartStroke50 { stroke: #72b7b2; }
+.chartFill51 { fill: #54a24b; }
+.chartStroke51 { stroke: #54a24b; }
+.chartFill52 { fill: #eeca3b; }
+.chartStroke52 { stroke: #eeca3b; }
+.chartFill53 { fill: #b279a2; }
+.chartStroke53 { stroke: #b279a2; }
+.chartFill54 { fill: #ff9da6; }
+.chartStroke54 { stroke: #ff9da6; }
+.chartFill55 { fill: #9d755d; }
+.chartStroke55 { stroke: #9d755d; }

package/dist/lib/evg/showcase/themes/variants-default.css

@@ -0,0 +1,15 @@
+/* GENERATED by gallery/vela/tools/vela_evg.rgr — do not edit by hand. */
+/* The colours the Vega specifications asked for, as the DEFAULT layer:
+   a theme's own chart rules are scoped and override these, and a build
+   with no chart theme still draws the chart the spec described. */
+
+.chartFrame { stroke: #8a8f98; }
+.chartGrid { stroke: #8a8f98; }
+.chartTick { stroke: #8a8f98; }
+.chartLabel { color: #8a8f98; }
+.chartDomain { stroke: #8a8f98; }
+.chartTitle { color: #8a8f98; }
+.chartFill0 { fill: #4c78a8; }
+.chartStroke0 { stroke: #4c78a8; }
+.chartFill1 { fill: black; }
+.chartStroke1 { stroke: black; }

package/dist/lib/evg/showcase/themes/views-default.css

@@ -0,0 +1,15 @@
+/* GENERATED by gallery/vela/tools/vela_evg.rgr — do not edit by hand. */
+/* The colours the Vega specifications asked for, as the DEFAULT layer:
+   a theme's own chart rules are scoped and override these, and a build
+   with no chart theme still draws the chart the spec described. */
+
+.chartText0 { color: #8a8f98; }
+.chartTick { stroke: #8a8f98; }
+.chartLabel { color: #8a8f98; }
+.chartDomain { stroke: #8a8f98; }
+.chartTitle { color: #8a8f98; }
+.chartGrid { stroke: #8a8f98; }
+.chartFill0 { fill: #8a8f98; }
+.chartStroke0 { stroke: #8a8f98; }
+.chartFill1 { fill: #4c78a8; }
+.chartStroke1 { stroke: #4c78a8; }