@mantis-core/styles

Shared raw SCSS modules and style contracts for Mantis Core packages.

Purpose

@mantis-core/styles ships reusable SCSS partials that style PrimeReact controls, CKEditor content, and Mantis-specific mantis-core-* class contracts.

Scope

• Shared visual contracts used by @mantis-core/ui
• PrimeReact-oriented overrides
• SCSS partials that assume shared design tokens such as --primary, --border, and --card

Out of Scope

• App-specific branding rules outside token values
• Runtime style injection
• React components

Export Model

• @mantis-core/styles -> scss/index.scss
• @mantis-core/styles/scss/* -> direct raw SCSS partials

The package ships raw SCSS. Consumers are expected to import the partials they need from their app stylesheet pipeline.

Usage

Import everything:

@use "@mantis-core/styles";

Import selectively:

@use "@mantis-core/styles/scss/inputs.scss";
@use "@mantis-core/styles/scss/table.scss";
@use "@mantis-core/styles/scss/ckeditor.scss";

Tokens Model

This package does not define the global design tokens — it only consumes them via var(--token). Two files carry the token contract, both under scss/, and neither is meant to be @used directly by index.scss or a Core partial:

• tokens.template.scss — copy-and-fill template. Copy the :root and .dark blocks into your app's global stylesheet (e.g. src/app/globals.scss) and replace the OKLCH values with your brand palette. Every partial in this package reads these tokens (--primary, --border, --card, ...) at runtime, so overriding them in the copied blocks re-themes the whole Core UI automatically.
• theme.scss — maps those same --* tokens to Tailwind v4 --color-* theme keys, so Tailwind utility classes used inside @mantis-core/ui (bg-primary, border-border, ...) resolve correctly. Consuming apps @use this file once, after loading Tailwind, alongside their own copy of the tokens.

PR11 Note

Component color styling (buttons, selects, switches) now comes from the shared PrimeReact preset in @mantis-core/next-core (src/theme/presets.ts), not from partials in this package. The buttons.scss, select.scss, select-button.scss, switch.scss, and date-picker.scss partials were removed as part of the PR11 migration. The partials that remain here cover components that consume Mantis tokens directly on top of the preset (CKEditor, RichTextPreview, FileDropzone, ConfirmDialog, DataState, FormActionsBar, StatusBadge) plus table/paginator/input layout helpers.

Documentation Index

• docs/README.md: package documentation index
• STYLES.md: live partial index
• STYLE_CONTRACTS.md: lightweight style-contract pointer

Important Notes

1. This package does not define the global tokens themselves. It expects them to exist in the consuming app (see Tokens Model).
2. Some partials style third-party markup directly, such as PrimeReact selectors.
3. Some partials expose first-class mantis-core-* contracts that are intended to be stable across apps.

Local Validation

pnpm --filter @mantis-core/styles build