@neo4j-ndl/base 5.1.8 → 5.2.0

package/lib/tailwind/safelist.css

@@ -0,0 +1,69 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+ * Generated from the Tailwind v3 preset in `@neo4j-ndl/base`
+ * (packages/base/scripts/tailwind-v4). Do not edit by hand.
+ */
+
+/*
+ * Optional safelist for Tailwind CSS v4. It is the counterpart of
+ * `createTailwindSafelist()` from the v3 preset and keeps every semantic
+ * color utility (`bg-*`, `text-*`, `border-*` with `hover:`, plus
+ * `active:bg-*`) in your CSS even when no source file uses it literally.
+ *
+ * Only import it if you build those class names dynamically, for example by
+ * concatenating `bg-` with a variable, because Tailwind can't find those by
+ * scanning your files:
+ *
+ * @import "tailwindcss";
+ * @import "@neo4j-ndl/base/lib/tailwind/theme.css";
+ * @import "@neo4j-ndl/base/lib/tailwind/safelist.css";
+ *
+ * The entries are unprefixed. If you import Tailwind with `prefix(...)`,
+ * generate them for your prefix with `createTailwindV4Safelist(prefix)`
+ * from `@neo4j-ndl/base` instead.
+ */
+
+@source inline("{hover:,active:,}bg-dark-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-bg-on-bg-weak,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,}text-dark-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-bg-on-bg-weak,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,}border-dark-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-bg-on-bg-weak,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,active:,}bg-light-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-on-bg-weak,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,}text-light-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-on-bg-weak,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,}border-light-{neutral-text-weakest,neutral-text-weaker,neutral-text-weak,neutral-text-default,neutral-text-inverse,neutral-icon,neutral-bg-weak,neutral-bg-default,neutral-bg-on-bg-weak,neutral-bg-strong,neutral-bg-stronger,neutral-bg-strongest,neutral-bg-status,neutral-border-weak,neutral-border-strong,neutral-border-strongest,neutral-hover,neutral-pressed,primary-text,primary-icon,primary-bg-weak,primary-bg-strong,primary-bg-status,primary-bg-selected,primary-border-strong,primary-border-weak,primary-focus,primary-hover-weak,primary-hover-strong,primary-pressed-weak,primary-pressed-strong,danger-text,danger-icon,danger-bg-strong,danger-bg-weak,danger-bg-status,danger-border-strong,danger-border-weak,danger-hover-weak,danger-hover-strong,danger-pressed-weak,danger-pressed-strong,warning-text,warning-icon,warning-bg-strong,warning-bg-weak,warning-bg-status,warning-border-strong,warning-border-weak,success-text,success-icon,success-bg-strong,success-bg-weak,success-bg-status,success-border-strong,success-border-weak,discovery-text,discovery-icon,discovery-bg-strong,discovery-bg-weak,discovery-bg-status,discovery-border-strong,discovery-border-weak}");
+@source inline("{hover:,active:,}bg-neutral-{10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,text-weakest,text-weaker,text-weak,text-default,text-inverse,icon,bg-weak,bg-default,bg-on-bg-weak,bg-strong,bg-stronger,bg-strongest,bg-status,border-weak,border-strong,border-strongest,hover,pressed}");
+@source inline("{hover:,}text-neutral-{10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,text-weakest,text-weaker,text-weak,text-default,text-inverse,icon,bg-weak,bg-default,bg-on-bg-weak,bg-strong,bg-stronger,bg-strongest,bg-status,border-weak,border-strong,border-strongest,hover,pressed}");
+@source inline("{hover:,}border-neutral-{10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,text-weakest,text-weaker,text-weak,text-default,text-inverse,icon,bg-weak,bg-default,bg-on-bg-weak,bg-strong,bg-stronger,bg-strongest,bg-status,border-weak,border-strong,border-strongest,hover,pressed}");
+@source inline("{hover:,active:,}bg-primary-{text,icon,bg-weak,bg-strong,bg-status,bg-selected,border-strong,border-weak,focus,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,}text-primary-{text,icon,bg-weak,bg-strong,bg-status,bg-selected,border-strong,border-weak,focus,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,}border-primary-{text,icon,bg-weak,bg-strong,bg-status,bg-selected,border-strong,border-weak,focus,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,active:,}bg-danger-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,}text-danger-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,}border-danger-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak,hover-weak,hover-strong,pressed-weak,pressed-strong}");
+@source inline("{hover:,active:,}bg-warning-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}text-warning-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}border-warning-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,active:,}bg-success-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}text-success-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}border-success-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,active:,}bg-discovery-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}text-discovery-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");
+@source inline("{hover:,}border-discovery-{text,icon,bg-strong,bg-weak,bg-status,border-strong,border-weak}");

package/lib/tailwind/theme.css

@@ -0,0 +1,504 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+ * Generated from the Tailwind v3 preset in `@neo4j-ndl/base`
+ * (packages/base/scripts/tailwind-v4). Do not edit by hand.
+ */
+
+/*
+ * Tailwind CSS v4 theme for the Neo4j design system.
+ *
+ * @layer theme, base, components, utilities;
+ * @import "tailwindcss/theme.css" layer(theme);
+ * @import "@neo4j-ndl/base/lib/neo4j-ds-styles.css" layer(base);
+ * @import "tailwindcss/utilities.css" layer(utilities);
+ * @import "@neo4j-ndl/base/lib/tailwind/theme.css";
+ *
+ * Import it after Tailwind so the namespace resets below replace Tailwind's
+ * default colors, breakpoints, radii, shadows and easings, the same way the
+ * Tailwind v3 preset does. Needle ships its own reset, so Tailwind's
+ * preflight is left out. Put `neo4j-ds-styles.css` in a layer below
+ * `utilities`: its component styles are unlayered, and would otherwise
+ * override utilities on Needle components.
+ *
+ * The utilities read Needle's own CSS variables (`--palette-*`,
+ * `--space-*`, `--theme-color-*`, ...) from `neo4j-ds-styles.css`, so that
+ * stylesheet must be loaded. `reference` keeps Tailwind from adding a second
+ * set of variables (`--color-*`, `--radius-*`, ...); `inline` writes the
+ * Needle variable into each utility, so themed values follow
+ * `.ndl-theme-light` / `.ndl-theme-dark` where the utility is used.
+ */
+
+@theme reference inline {
+  --color-*: initial;
+  --breakpoint-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --ease-*: initial;
+
+  --color-baltic-10: var(--palette-baltic-10);
+  --color-baltic-15: var(--palette-baltic-15);
+  --color-baltic-20: var(--palette-baltic-20);
+  --color-baltic-25: var(--palette-baltic-25);
+  --color-baltic-30: var(--palette-baltic-30);
+  --color-baltic-35: var(--palette-baltic-35);
+  --color-baltic-40: var(--palette-baltic-40);
+  --color-baltic-45: var(--palette-baltic-45);
+  --color-baltic-50: var(--palette-baltic-50);
+  --color-baltic-55: var(--palette-baltic-55);
+  --color-baltic-60: var(--palette-baltic-60);
+  --color-baltic-65: var(--palette-baltic-65);
+  --color-baltic-70: var(--palette-baltic-70);
+  --color-baltic-75: var(--palette-baltic-75);
+  --color-baltic-80: var(--palette-baltic-80);
+  --color-hibiscus-10: var(--palette-hibiscus-10);
+  --color-hibiscus-15: var(--palette-hibiscus-15);
+  --color-hibiscus-20: var(--palette-hibiscus-20);
+  --color-hibiscus-25: var(--palette-hibiscus-25);
+  --color-hibiscus-30: var(--palette-hibiscus-30);
+  --color-hibiscus-35: var(--palette-hibiscus-35);
+  --color-hibiscus-40: var(--palette-hibiscus-40);
+  --color-hibiscus-45: var(--palette-hibiscus-45);
+  --color-hibiscus-50: var(--palette-hibiscus-50);
+  --color-hibiscus-55: var(--palette-hibiscus-55);
+  --color-hibiscus-60: var(--palette-hibiscus-60);
+  --color-hibiscus-65: var(--palette-hibiscus-65);
+  --color-hibiscus-70: var(--palette-hibiscus-70);
+  --color-hibiscus-75: var(--palette-hibiscus-75);
+  --color-hibiscus-80: var(--palette-hibiscus-80);
+  --color-forest-10: var(--palette-forest-10);
+  --color-forest-15: var(--palette-forest-15);
+  --color-forest-20: var(--palette-forest-20);
+  --color-forest-25: var(--palette-forest-25);
+  --color-forest-30: var(--palette-forest-30);
+  --color-forest-35: var(--palette-forest-35);
+  --color-forest-40: var(--palette-forest-40);
+  --color-forest-45: var(--palette-forest-45);
+  --color-forest-50: var(--palette-forest-50);
+  --color-forest-55: var(--palette-forest-55);
+  --color-forest-60: var(--palette-forest-60);
+  --color-forest-65: var(--palette-forest-65);
+  --color-forest-70: var(--palette-forest-70);
+  --color-forest-75: var(--palette-forest-75);
+  --color-forest-80: var(--palette-forest-80);
+  --color-lemon-10: var(--palette-lemon-10);
+  --color-lemon-15: var(--palette-lemon-15);
+  --color-lemon-20: var(--palette-lemon-20);
+  --color-lemon-25: var(--palette-lemon-25);
+  --color-lemon-30: var(--palette-lemon-30);
+  --color-lemon-35: var(--palette-lemon-35);
+  --color-lemon-40: var(--palette-lemon-40);
+  --color-lemon-45: var(--palette-lemon-45);
+  --color-lemon-50: var(--palette-lemon-50);
+  --color-lemon-55: var(--palette-lemon-55);
+  --color-lemon-60: var(--palette-lemon-60);
+  --color-lemon-65: var(--palette-lemon-65);
+  --color-lemon-70: var(--palette-lemon-70);
+  --color-lemon-75: var(--palette-lemon-75);
+  --color-lemon-80: var(--palette-lemon-80);
+  --color-lavender-10: var(--palette-lavender-10);
+  --color-lavender-15: var(--palette-lavender-15);
+  --color-lavender-20: var(--palette-lavender-20);
+  --color-lavender-25: var(--palette-lavender-25);
+  --color-lavender-30: var(--palette-lavender-30);
+  --color-lavender-35: var(--palette-lavender-35);
+  --color-lavender-40: var(--palette-lavender-40);
+  --color-lavender-45: var(--palette-lavender-45);
+  --color-lavender-50: var(--palette-lavender-50);
+  --color-lavender-55: var(--palette-lavender-55);
+  --color-lavender-60: var(--palette-lavender-60);
+  --color-lavender-65: var(--palette-lavender-65);
+  --color-lavender-70: var(--palette-lavender-70);
+  --color-lavender-75: var(--palette-lavender-75);
+  --color-lavender-80: var(--palette-lavender-80);
+  --color-marigold-10: var(--palette-marigold-10);
+  --color-marigold-15: var(--palette-marigold-15);
+  --color-marigold-20: var(--palette-marigold-20);
+  --color-marigold-25: var(--palette-marigold-25);
+  --color-marigold-30: var(--palette-marigold-30);
+  --color-marigold-35: var(--palette-marigold-35);
+  --color-marigold-40: var(--palette-marigold-40);
+  --color-marigold-45: var(--palette-marigold-45);
+  --color-marigold-50: var(--palette-marigold-50);
+  --color-marigold-55: var(--palette-marigold-55);
+  --color-marigold-60: var(--palette-marigold-60);
+  --color-marigold-65: var(--palette-marigold-65);
+  --color-marigold-70: var(--palette-marigold-70);
+  --color-marigold-75: var(--palette-marigold-75);
+  --color-marigold-80: var(--palette-marigold-80);
+  --color-earth-10: var(--palette-earth-10);
+  --color-earth-15: var(--palette-earth-15);
+  --color-earth-20: var(--palette-earth-20);
+  --color-earth-25: var(--palette-earth-25);
+  --color-earth-30: var(--palette-earth-30);
+  --color-earth-35: var(--palette-earth-35);
+  --color-earth-40: var(--palette-earth-40);
+  --color-earth-45: var(--palette-earth-45);
+  --color-earth-50: var(--palette-earth-50);
+  --color-earth-55: var(--palette-earth-55);
+  --color-earth-60: var(--palette-earth-60);
+  --color-earth-65: var(--palette-earth-65);
+  --color-earth-70: var(--palette-earth-70);
+  --color-earth-75: var(--palette-earth-75);
+  --color-earth-80: var(--palette-earth-80);
+  --color-neutral-10: var(--palette-neutral-10);
+  --color-neutral-15: var(--palette-neutral-15);
+  --color-neutral-20: var(--palette-neutral-20);
+  --color-neutral-25: var(--palette-neutral-25);
+  --color-neutral-30: var(--palette-neutral-30);
+  --color-neutral-35: var(--palette-neutral-35);
+  --color-neutral-40: var(--palette-neutral-40);
+  --color-neutral-45: var(--palette-neutral-45);
+  --color-neutral-50: var(--palette-neutral-50);
+  --color-neutral-55: var(--palette-neutral-55);
+  --color-neutral-60: var(--palette-neutral-60);
+  --color-neutral-65: var(--palette-neutral-65);
+  --color-neutral-70: var(--palette-neutral-70);
+  --color-neutral-75: var(--palette-neutral-75);
+  --color-neutral-80: var(--palette-neutral-80);
+  --color-beige-10: var(--palette-beige-10);
+  --color-beige-20: var(--palette-beige-20);
+  --color-beige-30: var(--palette-beige-30);
+  --color-beige-40: var(--palette-beige-40);
+  --color-beige-50: var(--palette-beige-50);
+  --color-beige-60: var(--palette-beige-60);
+  --color-beige-70: var(--palette-beige-70);
+  --color-highlights-yellow: var(--palette-highlights-yellow);
+  --color-highlights-periwinkle: var(--palette-highlights-periwinkle);
+  --color-graph-1: var(--graph-1);
+  --color-graph-2: var(--graph-2);
+  --color-graph-3: var(--graph-3);
+  --color-graph-4: var(--graph-4);
+  --color-graph-5: var(--graph-5);
+  --color-graph-6: var(--graph-6);
+  --color-graph-7: var(--graph-7);
+  --color-graph-8: var(--graph-8);
+  --color-graph-9: var(--graph-9);
+  --color-graph-10: var(--graph-10);
+  --color-graph-11: var(--graph-11);
+  --color-graph-12: var(--graph-12);
+  --color-categorical-1: var(--categorical-1);
+  --color-categorical-2: var(--categorical-2);
+  --color-categorical-3: var(--categorical-3);
+  --color-categorical-4: var(--categorical-4);
+  --color-categorical-5: var(--categorical-5);
+  --color-categorical-6: var(--categorical-6);
+  --color-categorical-7: var(--categorical-7);
+  --color-categorical-8: var(--categorical-8);
+  --color-categorical-9: var(--categorical-9);
+  --color-categorical-10: var(--categorical-10);
+  --color-categorical-11: var(--categorical-11);
+  --color-categorical-12: var(--categorical-12);
+  --color-dark-neutral-text-weakest: var(--theme-dark-color-neutral-text-weakest);
+  --color-dark-neutral-text-weaker: var(--theme-dark-color-neutral-text-weaker);
+  --color-dark-neutral-text-weak: var(--theme-dark-color-neutral-text-weak);
+  --color-dark-neutral-text-default: var(--theme-dark-color-neutral-text-default);
+  --color-dark-neutral-text-inverse: var(--theme-dark-color-neutral-text-inverse);
+  --color-dark-neutral-icon: var(--theme-dark-color-neutral-icon);
+  --color-dark-neutral-bg-weak: var(--theme-dark-color-neutral-bg-weak);
+  --color-dark-neutral-bg-default: var(--theme-dark-color-neutral-bg-default);
+  --color-dark-neutral-bg-strong: var(--theme-dark-color-neutral-bg-strong);
+  --color-dark-neutral-bg-stronger: var(--theme-dark-color-neutral-bg-stronger);
+  --color-dark-neutral-bg-strongest: var(--theme-dark-color-neutral-bg-strongest);
+  --color-dark-neutral-bg-status: var(--theme-dark-color-neutral-bg-status);
+  --color-dark-neutral-bg-on-bg-weak: var(--theme-dark-color-neutral-bg-on-bg-weak);
+  --color-dark-neutral-border-weak: var(--theme-dark-color-neutral-border-weak);
+  --color-dark-neutral-border-strong: var(--theme-dark-color-neutral-border-strong);
+  --color-dark-neutral-border-strongest: var(--theme-dark-color-neutral-border-strongest);
+  --color-dark-neutral-hover: var(--theme-dark-color-neutral-hover);
+  --color-dark-neutral-pressed: var(--theme-dark-color-neutral-pressed);
+  --color-dark-primary-text: var(--theme-dark-color-primary-text);
+  --color-dark-primary-icon: var(--theme-dark-color-primary-icon);
+  --color-dark-primary-bg-weak: var(--theme-dark-color-primary-bg-weak);
+  --color-dark-primary-bg-strong: var(--theme-dark-color-primary-bg-strong);
+  --color-dark-primary-bg-status: var(--theme-dark-color-primary-bg-status);
+  --color-dark-primary-bg-selected: var(--theme-dark-color-primary-bg-selected);
+  --color-dark-primary-border-strong: var(--theme-dark-color-primary-border-strong);
+  --color-dark-primary-border-weak: var(--theme-dark-color-primary-border-weak);
+  --color-dark-primary-focus: var(--theme-dark-color-primary-focus);
+  --color-dark-primary-hover-weak: var(--theme-dark-color-primary-hover-weak);
+  --color-dark-primary-hover-strong: var(--theme-dark-color-primary-hover-strong);
+  --color-dark-primary-pressed-weak: var(--theme-dark-color-primary-pressed-weak);
+  --color-dark-primary-pressed-strong: var(--theme-dark-color-primary-pressed-strong);
+  --color-dark-danger-text: var(--theme-dark-color-danger-text);
+  --color-dark-danger-icon: var(--theme-dark-color-danger-icon);
+  --color-dark-danger-bg-strong: var(--theme-dark-color-danger-bg-strong);
+  --color-dark-danger-bg-weak: var(--theme-dark-color-danger-bg-weak);
+  --color-dark-danger-bg-status: var(--theme-dark-color-danger-bg-status);
+  --color-dark-danger-border-strong: var(--theme-dark-color-danger-border-strong);
+  --color-dark-danger-border-weak: var(--theme-dark-color-danger-border-weak);
+  --color-dark-danger-hover-weak: var(--theme-dark-color-danger-hover-weak);
+  --color-dark-danger-hover-strong: var(--theme-dark-color-danger-hover-strong);
+  --color-dark-danger-pressed-weak: var(--theme-dark-color-danger-pressed-weak);
+  --color-dark-danger-pressed-strong: var(--theme-dark-color-danger-pressed-strong);
+  --color-dark-warning-text: var(--theme-dark-color-warning-text);
+  --color-dark-warning-icon: var(--theme-dark-color-warning-icon);
+  --color-dark-warning-bg-strong: var(--theme-dark-color-warning-bg-strong);
+  --color-dark-warning-bg-weak: var(--theme-dark-color-warning-bg-weak);
+  --color-dark-warning-bg-status: var(--theme-dark-color-warning-bg-status);
+  --color-dark-warning-border-strong: var(--theme-dark-color-warning-border-strong);
+  --color-dark-warning-border-weak: var(--theme-dark-color-warning-border-weak);
+  --color-dark-success-text: var(--theme-dark-color-success-text);
+  --color-dark-success-icon: var(--theme-dark-color-success-icon);
+  --color-dark-success-bg-strong: var(--theme-dark-color-success-bg-strong);
+  --color-dark-success-bg-weak: var(--theme-dark-color-success-bg-weak);
+  --color-dark-success-bg-status: var(--theme-dark-color-success-bg-status);
+  --color-dark-success-border-strong: var(--theme-dark-color-success-border-strong);
+  --color-dark-success-border-weak: var(--theme-dark-color-success-border-weak);
+  --color-dark-discovery-text: var(--theme-dark-color-discovery-text);
+  --color-dark-discovery-icon: var(--theme-dark-color-discovery-icon);
+  --color-dark-discovery-bg-strong: var(--theme-dark-color-discovery-bg-strong);
+  --color-dark-discovery-bg-weak: var(--theme-dark-color-discovery-bg-weak);
+  --color-dark-discovery-bg-status: var(--theme-dark-color-discovery-bg-status);
+  --color-dark-discovery-border-strong: var(--theme-dark-color-discovery-border-strong);
+  --color-dark-discovery-border-weak: var(--theme-dark-color-discovery-border-weak);
+  --color-light-neutral-text-weakest: var(--theme-light-color-neutral-text-weakest);
+  --color-light-neutral-text-weaker: var(--theme-light-color-neutral-text-weaker);
+  --color-light-neutral-text-weak: var(--theme-light-color-neutral-text-weak);
+  --color-light-neutral-text-default: var(--theme-light-color-neutral-text-default);
+  --color-light-neutral-text-inverse: var(--theme-light-color-neutral-text-inverse);
+  --color-light-neutral-icon: var(--theme-light-color-neutral-icon);
+  --color-light-neutral-bg-weak: var(--theme-light-color-neutral-bg-weak);
+  --color-light-neutral-bg-default: var(--theme-light-color-neutral-bg-default);
+  --color-light-neutral-bg-on-bg-weak: var(--theme-light-color-neutral-bg-on-bg-weak);
+  --color-light-neutral-bg-strong: var(--theme-light-color-neutral-bg-strong);
+  --color-light-neutral-bg-stronger: var(--theme-light-color-neutral-bg-stronger);
+  --color-light-neutral-bg-strongest: var(--theme-light-color-neutral-bg-strongest);
+  --color-light-neutral-bg-status: var(--theme-light-color-neutral-bg-status);
+  --color-light-neutral-border-weak: var(--theme-light-color-neutral-border-weak);
+  --color-light-neutral-border-strong: var(--theme-light-color-neutral-border-strong);
+  --color-light-neutral-border-strongest: var(--theme-light-color-neutral-border-strongest);
+  --color-light-neutral-hover: var(--theme-light-color-neutral-hover);
+  --color-light-neutral-pressed: var(--theme-light-color-neutral-pressed);
+  --color-light-primary-text: var(--theme-light-color-primary-text);
+  --color-light-primary-icon: var(--theme-light-color-primary-icon);
+  --color-light-primary-bg-weak: var(--theme-light-color-primary-bg-weak);
+  --color-light-primary-bg-strong: var(--theme-light-color-primary-bg-strong);
+  --color-light-primary-bg-status: var(--theme-light-color-primary-bg-status);
+  --color-light-primary-bg-selected: var(--theme-light-color-primary-bg-selected);
+  --color-light-primary-border-strong: var(--theme-light-color-primary-border-strong);
+  --color-light-primary-border-weak: var(--theme-light-color-primary-border-weak);
+  --color-light-primary-focus: var(--theme-light-color-primary-focus);
+  --color-light-primary-hover-weak: var(--theme-light-color-primary-hover-weak);
+  --color-light-primary-hover-strong: var(--theme-light-color-primary-hover-strong);
+  --color-light-primary-pressed-weak: var(--theme-light-color-primary-pressed-weak);
+  --color-light-primary-pressed-strong: var(--theme-light-color-primary-pressed-strong);
+  --color-light-danger-text: var(--theme-light-color-danger-text);
+  --color-light-danger-icon: var(--theme-light-color-danger-icon);
+  --color-light-danger-bg-strong: var(--theme-light-color-danger-bg-strong);
+  --color-light-danger-bg-weak: var(--theme-light-color-danger-bg-weak);
+  --color-light-danger-bg-status: var(--theme-light-color-danger-bg-status);
+  --color-light-danger-border-strong: var(--theme-light-color-danger-border-strong);
+  --color-light-danger-border-weak: var(--theme-light-color-danger-border-weak);
+  --color-light-danger-hover-weak: var(--theme-light-color-danger-hover-weak);
+  --color-light-danger-hover-strong: var(--theme-light-color-danger-hover-strong);
+  --color-light-danger-pressed-weak: var(--theme-light-color-danger-pressed-weak);
+  --color-light-danger-pressed-strong: var(--theme-light-color-danger-pressed-strong);
+  --color-light-warning-text: var(--theme-light-color-warning-text);
+  --color-light-warning-icon: var(--theme-light-color-warning-icon);
+  --color-light-warning-bg-strong: var(--theme-light-color-warning-bg-strong);
+  --color-light-warning-bg-weak: var(--theme-light-color-warning-bg-weak);
+  --color-light-warning-bg-status: var(--theme-light-color-warning-bg-status);
+  --color-light-warning-border-strong: var(--theme-light-color-warning-border-strong);
+  --color-light-warning-border-weak: var(--theme-light-color-warning-border-weak);
+  --color-light-success-text: var(--theme-light-color-success-text);
+  --color-light-success-icon: var(--theme-light-color-success-icon);
+  --color-light-success-bg-strong: var(--theme-light-color-success-bg-strong);
+  --color-light-success-bg-weak: var(--theme-light-color-success-bg-weak);
+  --color-light-success-bg-status: var(--theme-light-color-success-bg-status);
+  --color-light-success-border-strong: var(--theme-light-color-success-border-strong);
+  --color-light-success-border-weak: var(--theme-light-color-success-border-weak);
+  --color-light-discovery-text: var(--theme-light-color-discovery-text);
+  --color-light-discovery-icon: var(--theme-light-color-discovery-icon);
+  --color-light-discovery-bg-strong: var(--theme-light-color-discovery-bg-strong);
+  --color-light-discovery-bg-weak: var(--theme-light-color-discovery-bg-weak);
+  --color-light-discovery-bg-status: var(--theme-light-color-discovery-bg-status);
+  --color-light-discovery-border-strong: var(--theme-light-color-discovery-border-strong);
+  --color-light-discovery-border-weak: var(--theme-light-color-discovery-border-weak);
+  --color-neutral-text-weakest: var(--theme-color-neutral-text-weakest);
+  --color-neutral-text-weaker: var(--theme-color-neutral-text-weaker);
+  --color-neutral-text-weak: var(--theme-color-neutral-text-weak);
+  --color-neutral-text-default: var(--theme-color-neutral-text-default);
+  --color-neutral-text-inverse: var(--theme-color-neutral-text-inverse);
+  --color-neutral-icon: var(--theme-color-neutral-icon);
+  --color-neutral-bg-weak: var(--theme-color-neutral-bg-weak);
+  --color-neutral-bg-default: var(--theme-color-neutral-bg-default);
+  --color-neutral-bg-on-bg-weak: var(--theme-color-neutral-bg-on-bg-weak);
+  --color-neutral-bg-strong: var(--theme-color-neutral-bg-strong);
+  --color-neutral-bg-stronger: var(--theme-color-neutral-bg-stronger);
+  --color-neutral-bg-strongest: var(--theme-color-neutral-bg-strongest);
+  --color-neutral-bg-status: var(--theme-color-neutral-bg-status);
+  --color-neutral-border-weak: var(--theme-color-neutral-border-weak);
+  --color-neutral-border-strong: var(--theme-color-neutral-border-strong);
+  --color-neutral-border-strongest: var(--theme-color-neutral-border-strongest);
+  --color-neutral-hover: var(--theme-color-neutral-hover);
+  --color-neutral-pressed: var(--theme-color-neutral-pressed);
+  --color-primary-text: var(--theme-color-primary-text);
+  --color-primary-icon: var(--theme-color-primary-icon);
+  --color-primary-bg-weak: var(--theme-color-primary-bg-weak);
+  --color-primary-bg-strong: var(--theme-color-primary-bg-strong);
+  --color-primary-bg-status: var(--theme-color-primary-bg-status);
+  --color-primary-bg-selected: var(--theme-color-primary-bg-selected);
+  --color-primary-border-strong: var(--theme-color-primary-border-strong);
+  --color-primary-border-weak: var(--theme-color-primary-border-weak);
+  --color-primary-focus: var(--theme-color-primary-focus);
+  --color-primary-hover-weak: var(--theme-color-primary-hover-weak);
+  --color-primary-hover-strong: var(--theme-color-primary-hover-strong);
+  --color-primary-pressed-weak: var(--theme-color-primary-pressed-weak);
+  --color-primary-pressed-strong: var(--theme-color-primary-pressed-strong);
+  --color-danger-text: var(--theme-color-danger-text);
+  --color-danger-icon: var(--theme-color-danger-icon);
+  --color-danger-bg-strong: var(--theme-color-danger-bg-strong);
+  --color-danger-bg-weak: var(--theme-color-danger-bg-weak);
+  --color-danger-bg-status: var(--theme-color-danger-bg-status);
+  --color-danger-border-strong: var(--theme-color-danger-border-strong);
+  --color-danger-border-weak: var(--theme-color-danger-border-weak);
+  --color-danger-hover-weak: var(--theme-color-danger-hover-weak);
+  --color-danger-hover-strong: var(--theme-color-danger-hover-strong);
+  --color-danger-pressed-weak: var(--theme-color-danger-pressed-weak);
+  --color-danger-pressed-strong: var(--theme-color-danger-pressed-strong);
+  --color-warning-text: var(--theme-color-warning-text);
+  --color-warning-icon: var(--theme-color-warning-icon);
+  --color-warning-bg-strong: var(--theme-color-warning-bg-strong);
+  --color-warning-bg-weak: var(--theme-color-warning-bg-weak);
+  --color-warning-bg-status: var(--theme-color-warning-bg-status);
+  --color-warning-border-strong: var(--theme-color-warning-border-strong);
+  --color-warning-border-weak: var(--theme-color-warning-border-weak);
+  --color-success-text: var(--theme-color-success-text);
+  --color-success-icon: var(--theme-color-success-icon);
+  --color-success-bg-strong: var(--theme-color-success-bg-strong);
+  --color-success-bg-weak: var(--theme-color-success-bg-weak);
+  --color-success-bg-status: var(--theme-color-success-bg-status);
+  --color-success-border-strong: var(--theme-color-success-border-strong);
+  --color-success-border-weak: var(--theme-color-success-border-weak);
+  --color-discovery-text: var(--theme-color-discovery-text);
+  --color-discovery-icon: var(--theme-color-discovery-icon);
+  --color-discovery-bg-strong: var(--theme-color-discovery-bg-strong);
+  --color-discovery-bg-weak: var(--theme-color-discovery-bg-weak);
+  --color-discovery-bg-status: var(--theme-color-discovery-bg-status);
+  --color-discovery-border-strong: var(--theme-color-discovery-border-strong);
+  --color-discovery-border-weak: var(--theme-color-discovery-border-weak);
+  --spacing: 4px;
+  --spacing-token-2: var(--space-2);
+  --spacing-token-4: var(--space-4);
+  --spacing-token-6: var(--space-6);
+  --spacing-token-8: var(--space-8);
+  --spacing-token-12: var(--space-12);
+  --spacing-token-16: var(--space-16);
+  --spacing-token-20: var(--space-20);
+  --spacing-token-24: var(--space-24);
+  --spacing-token-32: var(--space-32);
+  --spacing-token-48: var(--space-48);
+  --spacing-token-64: var(--space-64);
+  --breakpoint-5xs: 320px;
+  --breakpoint-4xs: 360px;
+  --breakpoint-3xs: 375px;
+  --breakpoint-2xs: 512px;
+  --breakpoint-xs: 768px;
+  --breakpoint-sm: 864px;
+  --breakpoint-md: 1024px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1440px;
+  --breakpoint-2xl: 1680px;
+  --breakpoint-3xl: 1920px;
+  --radius-none: var(--border-radius-none);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
+  --radius-2xl: var(--border-radius-2xl);
+  --radius-3xl: var(--border-radius-3xl);
+  --radius-full: var(--border-radius-full);
+  --shadow-dark-raised: var(--theme-dark-box-shadow-raised);
+  --shadow-dark-overlay: var(--theme-dark-box-shadow-overlay);
+  --shadow-light-raised: var(--theme-light-box-shadow-raised);
+  --shadow-light-overlay: var(--theme-light-box-shadow-overlay);
+  --shadow-raised: var(--theme-shadow-raised);
+  --shadow-overlay: var(--theme-shadow-overlay);
+  --font-sans: "Public Sans";
+  --font-mono: "Fira Code";
+  --font-syne: "Syne Neo";
+  --font-serif: initial;
+  --default-transition-timing-function: var(--motion-easing-standard);
+  --default-transition-duration: var(--motion-duration-quick);
+  --ease-standard: var(--motion-easing-standard);
+}
+
+@utility duration-quick {
+  transition-duration: var(--motion-duration-quick);
+}
+
+@utility duration-slow {
+  transition-duration: var(--motion-duration-slow);
+}
+
+@utility delay-none {
+  transition-delay: 0ms;
+}
+
+@utility delay-delayed {
+  transition-delay: 100ms;
+}
+
+@utility z-deep {
+  z-index: var(--z-index-deep);
+}
+
+@utility z-base {
+  z-index: var(--z-index-base);
+}
+
+@utility z-overlay {
+  z-index: var(--z-index-overlay);
+}
+
+@utility z-banner {
+  z-index: var(--z-index-banner);
+}
+
+@utility z-blanket {
+  z-index: var(--z-index-blanket);
+}
+
+@utility z-popover {
+  z-index: var(--z-index-popover);
+}
+
+@utility z-tooltip {
+  z-index: var(--z-index-tooltip);
+}
+
+@utility z-modal {
+  z-index: var(--z-index-modal);
+}
+
+@utility transition-quick {
+  transition: var(--motion-transition-quick);
+}
+
+@utility transition-slow {
+  transition: var(--motion-transition-slow);
+}
+
+@utility transition-delayed {
+  transition: var(--motion-transition-delayed);
+}

package/lib/types/tailwind-preset.config.d.ts

@@ -45,6 +45,34 @@
  * @returns {import('tailwindcss').Config['safelist']}
  */
 export function createTailwindSafelist(prefix?: string): import("tailwindcss").Config["safelist"];
+/**
+ * The Tailwind CSS v4 counterpart of `createTailwindSafelist()`. Tailwind v4
+ * has no `safelist` option, so this returns `@source inline()` rules that keep
+ * the same semantic color utilities (`bg-*` with `hover:`/`active:`, `text-*`
+ * and `border-*` with `hover:`) in your CSS.
+ *
+ * `@neo4j-ndl/base/lib/tailwind/safelist.css` is this output without a
+ * prefix. If you import Tailwind with `prefix(...)`, write the output for your
+ * prefix to a CSS file at build time and import that instead:
+ *
+ * ```js
+ * // scripts/needle-safelist.mjs, run before your build
+ * import { writeFileSync } from 'node:fs';
+ * import { createTailwindV4Safelist } from '@neo4j-ndl/base';
+ * writeFileSync('src/needle-safelist.css', createTailwindV4Safelist('tw'));
+ * ```
+ *
+ * ```css
+ * @import 'tailwindcss/theme.css' layer(theme) prefix(tw);
+ * ...
+ * @import './needle-safelist.css';
+ * ```
+ *
+ * @param {string} [prefix=''] - The name passed to Tailwind's `prefix()`, for
+ * example `tw` for `prefix(tw)`. Tailwind v4 only accepts lowercase letters.
+ * @returns {string} One `@source inline()` rule per line.
+ */
+export function createTailwindV4Safelist(prefix?: string): string;
 /**
  * Tailwind CSS Configuration
  * containing all configurations we need