@marimo-team/frontend 0.14.18-dev4 → 0.14.18-dev40

package/src/css/codehilite.css

@@ -0,0 +1,354 @@
+/*
+ * xcode pygments style, edited to look like github prettylights
+ *
+ *     pygmentize -S xcode -f html -a .codehilite  > codehilite.css
+ */
+
+@layer base {
+  :root {
+    --linenos-special: light-dark(#000, #fff);
+    --linenos-special-bg: light-dark(#ffffc0, #303030);
+    --codehilite-hll: light-dark(#ffc, #303030);
+    --codehilite-c: light-dark(#177500, #88ff70);
+    --codehilite-err: light-dark(#000, #f00);
+    --codehilite-k: light-dark(#cf222e, #ff5572);
+    --codehilite-l: light-dark(#1c01ce, #7289da);
+    --codehilite-n: light-dark(#000, #fff);
+    --codehilite-o: light-dark(#000, #fff);
+    --codehilite-ch: light-dark(#177500, #88ff70);
+    --codehilite-cm: light-dark(#177500, #88ff70);
+    --codehilite-cp: light-dark(#633820, #ffcc80);
+    --codehilite-cpf: light-dark(#177500, #88ff70);
+    --codehilite-c1: light-dark(#177500, #88ff70);
+    --codehilite-cs: light-dark(#177500, #88ff70);
+    --codehilite-kc: light-dark(#a90d91, #ff80bf);
+    --codehilite-kd: light-dark(#a90d91, #ff80bf);
+    --codehilite-kn: light-dark(#a90d91, #ff80bf);
+    --codehilite-kp: light-dark(#a90d91, #ff80bf);
+    --codehilite-kr: light-dark(#a90d91, #ff80bf);
+    --codehilite-kt: light-dark(#cf222e, #ff5572);
+    --codehilite-ld: light-dark(#1c01ce, #7289da);
+    --codehilite-m: light-dark(#0550ae, #55a8ff);
+    --codehilite-s: light-dark(#0a3069, #5af);
+    --codehilite-na: light-dark(#836c28, #ffcc80);
+    --codehilite-nb: light-dark(#cf222e, #ff5572);
+    --codehilite-nc: light-dark(#8250df, #b39ddb);
+    --codehilite-no: light-dark(#000, #fff);
+    --codehilite-nd: light-dark(#8250df, #b39ddb);
+    --codehilite-ni: light-dark(#000, #fff);
+    --codehilite-ne: light-dark(#000, #fff);
+    --codehilite-nf: light-dark(#8250df, #b39ddb);
+    --codehilite-nl: light-dark(#000, #fff);
+    --codehilite-nn: light-dark(#000, #fff);
+    --codehilite-nx: light-dark(#000, #fff);
+    --codehilite-py: light-dark(#000, #fff);
+    --codehilite-nt: light-dark(#8250df, #b39ddb);
+    --codehilite-nv: light-dark(#000, #fff);
+    --codehilite-ow: light-dark(#000, #fff);
+    --codehilite-mb: light-dark(#1c01ce, #7289da);
+    --codehilite-mf: light-dark(#1c01ce, #7289da);
+    --codehilite-mh: light-dark(#1c01ce, #7289da);
+    --codehilite-mi: light-dark(#1c01ce, #7289da);
+    --codehilite-mo: light-dark(#1c01ce, #7289da);
+    --codehilite-sa: light-dark(#0a3069, #5af);
+    --codehilite-sb: light-dark(#0a3069, #5af);
+    --codehilite-sc: light-dark(#0a3069, #5af);
+    --codehilite-dl: light-dark(#0a3069, #5af);
+    --codehilite-sd: light-dark(#0a3069, #5af);
+    --codehilite-s2: light-dark(#0a3069, #5af);
+    --codehilite-se: light-dark(#0a3069, #5af);
+    --codehilite-sh: light-dark(#0a3069, #5af);
+    --codehilite-si: light-dark(#0a3069, #5af);
+    --codehilite-sx: light-dark(#0a3069, #5af);
+    --codehilite-sr: light-dark(#0a3069, #5af);
+    --codehilite-s1: light-dark(#0a3069, #5af);
+    --codehilite-ss: light-dark(#0a3069, #5af);
+    --codehilite-bp: light-dark(#5b269a, #9c4dcc);
+    --codehilite-fm: light-dark(#000, #fff);
+    --codehilite-vc: light-dark(#000, #fff);
+    --codehilite-vg: light-dark(#000, #fff);
+    --codehilite-vi: light-dark(#000, #fff);
+    --codehilite-vm: light-dark(#000, #fff);
+    --codehilite-il: light-dark(#1c01ce, #7289da);
+  }
+}
+
+pre {
+  line-height: 125%;
+}
+
+td.linenos .normal {
+  color: inherit;
+  background-color: transparent;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+span.linenos {
+  color: inherit;
+  background-color: transparent;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+td.linenos .special {
+  color: var(--linenos-special);
+  background-color: var(--linenos-special-bg);
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+span.linenos.special {
+  color: var(--linenos-special);
+  background-color: var(--linenos-special-bg);
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.codehilite .hll {
+  color: var(--codehilite-hll);
+}
+
+.codehilite .c {
+  color: var(--codehilite-c);
+} /* Comment */
+.codehilite .err {
+  color: var(--codehilite-err);
+} /* Error */
+.codehilite .k {
+  color: var(--codehilite-k);
+} /* Keyword */
+.codehilite .l {
+  color: var(--codehilite-l);
+} /* Literal */
+.codehilite .n {
+  color: var(--codehilite-n);
+} /* Name */
+.codehilite .o {
+  color: var(--codehilite-o);
+} /* Operator */
+.codehilite .ch {
+  color: var(--codehilite-ch);
+} /* Comment.Hashbang */
+.codehilite .cm {
+  color: var(--codehilite-cm);
+} /* Comment.Multiline */
+.codehilite .cp {
+  color: var(--codehilite-cp);
+} /* Comment.Preproc */
+.codehilite .cpf {
+  color: var(--codehilite-cpf);
+} /* Comment.PreprocFile */
+.codehilite .c1 {
+  color: var(--codehilite-c1);
+} /* Comment.Single */
+.codehilite .cs {
+  color: var(--codehilite-cs);
+} /* Comment.Special */
+.codehilite .kc {
+  color: var(--codehilite-kc);
+} /* Keyword.Constant */
+.codehilite .kd {
+  color: var(--codehilite-kd);
+} /* Keyword.Declaration */
+.codehilite .kn {
+  color: var(--codehilite-kn);
+} /* Keyword.Namespace */
+.codehilite .kp {
+  color: var(--codehilite-kp);
+} /* Keyword.Pseudo */
+.codehilite .kr {
+  color: var(--codehilite-kr);
+} /* Keyword.Reserved */
+.codehilite .kt {
+  color: var(--codehilite-kt);
+} /* Keyword.Type */
+.codehilite .ld {
+  color: var(--codehilite-ld);
+} /* Literal.Date */
+.codehilite .m {
+  color: var(--codehilite-m);
+} /* Literal.Number */
+.codehilite .s {
+  color: var(--codehilite-s);
+} /* Literal.String */
+.codehilite .na {
+  color: var(--codehilite-na);
+} /* Name.Attribute */
+.codehilite .nb {
+  color: var(--codehilite-nb);
+} /* Name.Builtin */
+.codehilite .nc {
+  color: var(--codehilite-nc);
+} /* Name.Class */
+.codehilite .no {
+  color: var(--codehilite-no);
+} /* Name.Constant */
+.codehilite .nd {
+  color: var(--codehilite-nd);
+} /* Name.Decorator */
+.codehilite .ni {
+  color: var(--codehilite-ni);
+} /* Name.Entity */
+.codehilite .ne {
+  color: var(--codehilite-ne);
+} /* Name.Exception */
+.codehilite .nf {
+  color: var(--codehilite-nf);
+} /* Name.Function */
+.codehilite .nl {
+  color: var(--codehilite-nl);
+} /* Name.Label */
+.codehilite .nn {
+  color: var(--codehilite-nn);
+} /* Name.Namespace */
+.codehilite .nx {
+  color: var(--codehilite-nx);
+} /* Name.Other */
+.codehilite .py {
+  color: var(--codehilite-py);
+} /* Name.Property */
+.codehilite .nt {
+  color: var(--codehilite-nt);
+} /* Name.Tag */
+.codehilite .nv {
+  color: var(--codehilite-nv);
+} /* Name.Variable */
+.codehilite .ow {
+  color: var(--codehilite-ow);
+} /* Operator.Word */
+.codehilite .mb {
+  color: var(--codehilite-mb);
+} /* Literal.Number.Bin */
+.codehilite .mf {
+  color: var(--codehilite-mf);
+} /* Literal.Number.Float */
+.codehilite .mh {
+  color: var(--codehilite-mh);
+} /* Literal.Number.Hex */
+.codehilite .mi {
+  color: var(--codehilite-mi);
+} /* Literal.Number.Integer */
+.codehilite .mo {
+  color: var(--codehilite-mo);
+} /* Literal.Number.Oct */
+.codehilite .sa {
+  color: var(--codehilite-sa);
+} /* Literal.String.Affix */
+.codehilite .sb {
+  color: var(--codehilite-sb);
+} /* Literal.String.Backtick */
+.codehilite .sc {
+  color: var(--codehilite-sc);
+} /* Literal.String.Char */
+.codehilite .dl {
+  color: var(--codehilite-dl);
+} /* Literal.String.Delimiter */
+.codehilite .sd {
+  color: var(--codehilite-sd);
+} /* Literal.String.Doc */
+.codehilite .s2 {
+  color: var(--codehilite-s2);
+} /* Literal.String.Double */
+.codehilite .se {
+  color: var(--codehilite-se);
+} /* Literal.String.Escape */
+.codehilite .sh {
+  color: var(--codehilite-sh);
+} /* Literal.String.Heredoc */
+.codehilite .si {
+  color: var(--codehilite-si);
+} /* Literal.String.Interpol */
+.codehilite .sx {
+  color: var(--codehilite-sx);
+} /* Literal.String.Other */
+.codehilite .sr {
+  color: var(--codehilite-sr);
+} /* Literal.String.Regex */
+.codehilite .s1 {
+  color: var(--codehilite-s1);
+} /* Literal.String.Single */
+.codehilite .ss {
+  color: var(--codehilite-ss);
+} /* Literal.String.Symbol */
+.codehilite .bp {
+  color: var(--codehilite-bp);
+} /* Name.Builtin.Pseudo */
+.codehilite .fm {
+  color: var(--codehilite-fm);
+} /* Name.Function.Magic */
+.codehilite .vc {
+  color: var(--codehilite-vc);
+} /* Name.Variable.Class */
+.codehilite .vg {
+  color: var(--codehilite-vg);
+} /* Name.Variable.Global */
+.codehilite .vi {
+  color: var(--codehilite-vi);
+} /* Name.Variable.Instance */
+.codehilite .vm {
+  color: var(--codehilite-vm);
+} /* Name.Variable.Magic */
+.codehilite .il {
+  color: var(--codehilite-il);
+} /* Literal.Number.Integer.Long */
+
+/* Special formatting for Python traceback */
+.stderr .codehilite {
+  .highlight {
+    /* Chosen to match error coloring in other parts of notebook. */
+    color: color-mix(
+      in srgb,
+      var(--error),
+      transparent calc((1 - var(--tw-text-opacity)) * 100%)
+    );
+  }
+
+  .gt {
+    color: color-mix(
+      in srgb,
+      var(--error),
+      transparent calc((1 - var(--tw-text-opacity)) * 100%)
+    );
+  }
+
+  .nb {
+    color: var(--sky-8);
+  }
+
+  .m {
+    color: var(--sky-11);
+  }
+
+  .n {
+    color: var(--slate-10);
+  }
+
+  .w {
+    color: var(--slate-10);
+  }
+
+  .o {
+    color: var(--slate-10);
+  }
+
+  .p {
+    color: var(--slate-10);
+  }
+
+  .bp {
+    color: var(--slate-10);
+  }
+
+  .pm {
+    color: var(--slate-10);
+  }
+
+  .k {
+    color: var(--slate-10);
+  }
+
+  .x {
+    color: var(--red-9);
+  }
+}

package/src/css/common.css

@@ -0,0 +1,45 @@
+@reference "../css/globals.css";
+
+/* Hover actions */
+
+/* Ignore for touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .hover-action {
+    display: none !important;
+  }
+
+  [data-is-dragging="true"] {
+    .hover-actions-parent.hover-actions-parent .hover-action:not(:hover) {
+      display: none !important;
+    }
+  }
+}
+
+.hover-action:hover,
+.hover-action:focus {
+  display: inline-flex !important;
+}
+
+.hover-actions-parent:hover .hover-action,
+.hover-actions-parent:focus .hover-action {
+  display: inline-flex !important;
+}
+
+/* If parent has any children that have an open pop, show hover actions */
+.hover-actions-parent:has([data-state="open"]) .hover-action {
+  display: inline-flex !important;
+}
+
+/* When any element is fullscreen, hide the element with this class */
+:root:has(:fullscreen) .hide-on-fullscreen {
+  display: none !important;
+}
+
+.mo-dropdown-icon {
+  @apply mr-2 h-3.5 w-3.5 text-muted-foreground/70;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}

package/src/css/globals.css

@@ -0,0 +1,176 @@
+@import url("@radix-ui/colors/amber-dark.css") layer(base);
+@import url("@radix-ui/colors/amber.css") layer(base);
+@import url("@radix-ui/colors/blue-dark.css") layer(base);
+@import url("@radix-ui/colors/blue.css") layer(base);
+@import url("@radix-ui/colors/crimson-dark.css") layer(base);
+@import url("@radix-ui/colors/crimson.css") layer(base);
+@import url("@radix-ui/colors/cyan-dark.css") layer(base);
+@import url("@radix-ui/colors/cyan.css") layer(base);
+@import url("@radix-ui/colors/grass-dark.css") layer(base);
+@import url("@radix-ui/colors/grass.css") layer(base);
+@import url("@radix-ui/colors/gray-dark.css") layer(base);
+@import url("@radix-ui/colors/gray.css") layer(base);
+@import url("@radix-ui/colors/green-dark.css") layer(base);
+@import url("@radix-ui/colors/green.css") layer(base);
+@import url("@radix-ui/colors/lime-dark.css") layer(base);
+@import url("@radix-ui/colors/lime.css") layer(base);
+@import url("@radix-ui/colors/orange-dark.css") layer(base);
+@import url("@radix-ui/colors/orange.css") layer(base);
+@import url("@radix-ui/colors/purple-dark.css") layer(base);
+@import url("@radix-ui/colors/purple.css") layer(base);
+@import url("@radix-ui/colors/red-dark.css") layer(base);
+@import url("@radix-ui/colors/red.css") layer(base);
+@import url("@radix-ui/colors/sage-dark.css") layer(base);
+@import url("@radix-ui/colors/sage.css") layer(base);
+@import url("@radix-ui/colors/sky-dark.css") layer(base);
+@import url("@radix-ui/colors/sky.css") layer(base);
+@import url("@radix-ui/colors/slate-dark.css") layer(base);
+@import url("@radix-ui/colors/slate.css") layer(base);
+@import url("@radix-ui/colors/yellow-dark.css") layer(base);
+@import url("@radix-ui/colors/yellow.css") layer(base);
+/* stylelint-disable-next-line import-notation */
+@import "tailwindcss";
+
+@config '../../tailwind.config.cjs';
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  :root,
+  .marimo {
+    --monospace-font: var(--marimo-monospace-font, "Fira Mono", monospace);
+    --text-font: var(--marimo-text-font, "PT Sans", sans-serif);
+    --heading-font: var(--marimo-heading-font, "Lora", serif);
+    --radius: 8px;
+    /* stylelint-disable-next-line unit-allowed-list */
+    --markdown-max-width: 80ch;
+
+    /* Radix light colors: https://github.com/radix-ui/colors/blob/main/src/light.ts */
+
+    /* Radix dark colors: https://github.com/radix-ui/colors/blob/main/src/dark.ts */
+
+    /* Base colors. */
+    --background: light-dark(hsl(0deg 0% 100%), hsl(150deg 7.7% 10.2%));
+    --foreground: light-dark(hsl(222.2deg 47.4% 11.2%), hsl(155deg 7% 93%));
+    --muted: light-dark(hsl(210deg 40% 96.1%), hsl(180deg 14% 1%));
+    --muted-foreground: light-dark(
+      hsl(215.4deg 16.3% 46.9%),
+      hsl(155deg 5% 68.3%)
+    );
+    --popover: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
+    --popover-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(155deg 5% 68.3%)
+    );
+    --card: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
+    --card-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(155deg 5% 76.3%)
+    );
+    --border: light-dark(hsl(214.3deg 31.8% 91.4%), hsl(153deg 3.7% 24.2%));
+    --input: light-dark(hsl(0deg 0% 64%), hsl(154deg 3.3% 28.7%));
+    --primary: light-dark(hsl(208deg 93.5% 47.4%), hsl(192deg 59.8% 39%));
+    --primary-foreground: light-dark(hsl(210deg 40% 98%), hsl(190deg 80% 84%));
+    --secondary: light-dark(hsl(210deg 40% 96.1%), hsl(155deg 7% 93%));
+    --secondary-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(151deg 5.5% 15.2%)
+    );
+    --accent: light-dark(hsl(209deg 100% 96.5%), hsl(192deg 56.6% 26.5%));
+    --accent-foreground: light-dark(hsl(211deg 90% 42%), hsl(190deg 80% 84%));
+    --ring: hsl(215deg 20.2% 65.1%);
+
+    /* Semantic colors. */
+    --destructive: hsl(0deg 100% 70%);
+    --destructive-foreground: hsl(210deg 40% 98%);
+    --error: hsl(0deg 77% 64%);
+    --error-foreground: hsl(210deg 40% 98%);
+    --success: hsl(130deg 100% 70%);
+    --success-foreground: hsl(210deg 40% 98%);
+    --action: hsl(52deg 96.8% 82%);
+    --action-hover: hsl(54deg 100% 86.7%);
+    --action-foreground: hsl(42deg 100% 29%);
+    --link: light-dark(hsl(211deg 90% 42%), hsl(211deg 90% 62%));
+    --link-visited: light-dark(hsl(272deg 51% 54%), hsl(272deg 51% 74%));
+    --stale: hsl(42deg 56% 44% / 25%);
+
+    /* Base shadows. */
+    --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
+    --base-shadow-darker: light-dark(
+      hsl(0deg 0% 50% / 40%),
+      hsl(0deg 0% 50% / 60%)
+    );
+    --base-shadow-opacity: 5%;
+  }
+
+  .dark,
+  .marimo:is(.dark *) {
+    color-scheme: dark;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  a.hyperlink {
+    @apply text-link;
+  }
+
+  a.hyperlink:hover {
+    text-decoration: underline;
+  }
+}
+
+@theme {
+  /* Migrated from tailwind.config.cjs - theme.extend.boxShadow */
+  --shadow-none: none;
+  --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);
+
+  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
+}

package/src/css/index.css

@@ -0,0 +1,10 @@
+@import url("./globals.css");
+@import url("./codehilite.css");
+@import url("./common.css");
+@import url("./katex-fonts.css");
+@import url("./katex.min.css");
+@import url("./md.css");
+@import url("./md-tooltip.css");
+@import url("./admonition.css");
+@import url("./table.css");
+@import url("./progress.css");