panelui-native 0.28.1 → 0.32.0

package/theme.css

@@ -45,6 +45,17 @@
   --color-card-foreground: unset;
   --color-popover: unset;
   --color-popover-foreground: unset;
+  /*
+   * The floating-panel surface, one notch further from the page than
+   * `--color-popover`. A menu is the thing furthest forward on the screen and
+   * usually the thing on top of a popover, so it needs a step of its own —
+   * without one a menu opened over a popover disappears into it.
+   *
+   * Kept separate from the `--color-surface-*` ladder because that ladder
+   * describes depth *within* the page, and this describes leaving it.
+   */
+  --color-overlay: unset;
+  --color-overlay-foreground: unset;
   --color-primary: unset;
   --color-primary-foreground: unset;
   --color-secondary: unset;
@@ -99,6 +110,22 @@
    * These are the tokens to override in your app's global.css, after the
    * `panelui-native/theme.css` import, to put a chart on brand.
    */
+  /*
+   * Syntax colours, for CodeBlock. A ramp of their own rather than the chart
+   * series: those only have to be told apart from one another, while these
+   * have to be legible as small monospace on a muted panel and to keep their
+   * conventional associations — a string is warm, a comment recedes.
+   */
+  --color-code-keyword: unset;
+  --color-code-string: unset;
+  --color-code-number: unset;
+  --color-code-comment: unset;
+  --color-code-function: unset;
+  --color-code-property: unset;
+  --color-code-punctuation: unset;
+  --color-code-inserted: unset;
+  --color-code-deleted: unset;
+
   --color-chart-1: unset;
   --color-chart-2: unset;
   --color-chart-3: unset;
@@ -133,6 +160,9 @@
       --color-popover: #ffffff;
       --color-popover-foreground: #262626;
 
+      --color-overlay: #ffffff;
+      --color-overlay-foreground: #262626;
+
       --color-primary: #262626;
       --color-primary-foreground: #fafafa;
 
@@ -182,6 +212,17 @@
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
 
+      /* syntax colours */
+      --color-code-keyword: #8250df;
+      --color-code-string: #0a7d55;
+      --color-code-number: #0550ae;
+      --color-code-comment: #8b949e;
+      --color-code-function: #6639ba;
+      --color-code-property: #953800;
+      --color-code-punctuation: #57606a;
+      --color-code-inserted: #0a7d55;
+      --color-code-deleted: #cf222e;
+
       /* chart series, in order of prominence */
       --color-chart-1: #262626;
       --color-chart-2: #3b82f6;
@@ -213,6 +254,10 @@
       --color-popover: #1d1d1d;
       --color-popover-foreground: #f5f5f5;
 
+      /* color-mix(background 92%, white) — one step past the popover */
+      --color-overlay: #232323;
+      --color-overlay-foreground: #f5f5f5;
+
       --color-primary: #f5f5f5;
       --color-primary-foreground: #262626;
 
@@ -266,6 +311,17 @@
       --color-destructive-soft: rgba(241, 87, 87, 0.06);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
 
+      /* syntax colours */
+      --color-code-keyword: #d2a8ff;
+      --color-code-string: #7ee787;
+      --color-code-number: #79c0ff;
+      --color-code-comment: #8b949e;
+      --color-code-function: #d2a8ff;
+      --color-code-property: #ffa657;
+      --color-code-punctuation: #8b949e;
+      --color-code-inserted: #7ee787;
+      --color-code-deleted: #ff7b72;
+
       /* chart series, in order of prominence */
       --color-chart-1: #fafafa;
       --color-chart-2: #60a5fa;
@@ -313,6 +369,9 @@
       --color-popover: #ffffff;
       --color-popover-foreground: #171717;
 
+      --color-overlay: #ffffff;
+      --color-overlay-foreground: #171717;
+
       --color-primary: #171717;
       --color-primary-foreground: #ffffff;
 
@@ -355,6 +414,17 @@
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.08);
 
+      /* syntax colours */
+      --color-code-keyword: #8250df;
+      --color-code-string: #0a7d55;
+      --color-code-number: #0550ae;
+      --color-code-comment: #8b949e;
+      --color-code-function: #6639ba;
+      --color-code-property: #953800;
+      --color-code-punctuation: #57606a;
+      --color-code-inserted: #0a7d55;
+      --color-code-deleted: #cf222e;
+
       /* chart series, in order of prominence */
       --color-chart-1: #0070f3;
       --color-chart-2: #171717;
@@ -382,6 +452,9 @@
       --color-popover: #101010;
       --color-popover-foreground: #ededed;
 
+      --color-overlay: #191919;
+      --color-overlay-foreground: #ededed;
+
       --color-primary: #ededed;
       --color-primary-foreground: #0a0a0a;
 
@@ -424,6 +497,17 @@
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.16);
 
+      /* syntax colours */
+      --color-code-keyword: #d2a8ff;
+      --color-code-string: #7ee787;
+      --color-code-number: #79c0ff;
+      --color-code-comment: #8b949e;
+      --color-code-function: #d2a8ff;
+      --color-code-property: #ffa657;
+      --color-code-punctuation: #8b949e;
+      --color-code-inserted: #7ee787;
+      --color-code-deleted: #ff7b72;
+
       /* chart series, in order of prominence */
       --color-chart-1: #3291ff;
       --color-chart-2: #ededed;
@@ -452,6 +536,9 @@
       --color-popover: #ffffff;
       --color-popover-foreground: #171717;
 
+      --color-overlay: #ffffff;
+      --color-overlay-foreground: #171717;
+
       /* Brand green is too light for white text; light mode uses the
          darker ramp step so the contrast ratio holds. */
       --color-primary: #24b47e;
@@ -496,6 +583,17 @@
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
 
+      /* syntax colours */
+      --color-code-keyword: #8250df;
+      --color-code-string: #0a7d55;
+      --color-code-number: #0550ae;
+      --color-code-comment: #8b949e;
+      --color-code-function: #6639ba;
+      --color-code-property: #953800;
+      --color-code-punctuation: #57606a;
+      --color-code-inserted: #0a7d55;
+      --color-code-deleted: #cf222e;
+
       /* chart series, in order of prominence */
       --color-chart-1: #24b47e;
       --color-chart-2: #1f2937;
@@ -523,6 +621,9 @@
       --color-popover: #232323;
       --color-popover-foreground: #ededed;
 
+      --color-overlay: #2a2a2a;
+      --color-overlay-foreground: #ededed;
+
       --color-primary: #3ecf8e;
       --color-primary-foreground: #052e1b;
 
@@ -565,6 +666,17 @@
       --color-destructive-soft: rgba(241, 87, 87, 0.08);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
 
+      /* syntax colours */
+      --color-code-keyword: #d2a8ff;
+      --color-code-string: #7ee787;
+      --color-code-number: #79c0ff;
+      --color-code-comment: #8b949e;
+      --color-code-function: #d2a8ff;
+      --color-code-property: #ffa657;
+      --color-code-punctuation: #8b949e;
+      --color-code-inserted: #7ee787;
+      --color-code-deleted: #ff7b72;
+
       /* chart series, in order of prominence */
       --color-chart-1: #3ecf8e;
       --color-chart-2: #ededed;