@curvenote/styles

Shared CSS and Tailwind theme extensions for the Curvenote apps.

• index.css — the stylesheet entry every app imports.
• theme-extensions.cjs — grid templates, column names, keyframes and animations that the CSS @applys. Previously copy-pasted into all nine app configs.
• theme.css — Tailwind @theme inline mappings binding --color-* tokens to the palette.
• colors.css — the default light/dark palette (:root and .dark).
• typography.cjs — proseCss(), the shared @tailwindcss/typography rules.
• myst/ — a vendored copy of @myst-theme/styles. See UPSTREAM.md.

There is no build step; the files are consumed as source.

Using it

In an app's app/app.css:

@import '@curvenote/styles/index.css';
@import '@curvenote/styles/theme.css';
@import '@curvenote/styles/colors.css';

Add brand colors after the import, and map them into Tailwind:

:root {
  --curvenote-blue: #235f9c;
}
.dark {
  --curvenote-blue: #5da8e6;
}
@theme inline {
  --color-curvenote-blue: var(--curvenote-blue);
}

An app with a wholly different palette omits colors.css and defines its own :root and .dark — apps/packager is the only one that does.

In its tailwind.config.js:

const {
  gridTemplateColumns,
  gridColumn,
  keyframes,
  animation,
} = require('@curvenote/styles/theme-extensions');

module.exports = {
  theme: { extend: { gridTemplateColumns, gridColumn, keyframes, animation } },
};

Override individual keys where an app genuinely differs, rather than forking the object — apps/openrxiv is the only one that does today:

gridColumn: { ...gridColumn, 'margin-right-lg': 'body-end / page-end' },

For .prose, proseCss() returns the shared rules and takes what differs:

const { proseCss } = require('@curvenote/styles/typography');

typography: (theme) => ({
  DEFAULT: { css: proseCss({ fontFamily: '"Noto Sans", sans-serif', proseCode: theme('colors.pink[700]') }) },
  invert: { css: { '--tw-prose-code': theme('colors.pink[400]') } },
}),

Changing the vendored CSS

Edits to myst/ are fine — that is the point of vendoring — but record each one in the table at the bottom of UPSTREAM.md so the upstream diff stays readable.