@mantis-core/styles 0.1.2 → 0.2.0

package/README.md

@@ -1,67 +1,60 @@
 # @mantis-core/styles
 
-Shared SCSS tokens and style overrides for Mantis Core components.
+Shared raw SCSS modules and style contracts for Mantis Core packages.
+
+## Purpose
+
+`@mantis-core/styles` ships reusable SCSS partials that style PrimeReact controls, `react-select`, CKEditor content, and Mantis-specific `mantis-core-*` class contracts.
 
 ## Scope
 
-- Shared visual tokens.
-- PrimeReact-oriented overrides.
-- Namespace contract: `mantis-core-*`.
+- 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
+## Out of Scope
 
-- App/domain-specific styles.
-- Client brand names in class prefixes.
+- App-specific branding rules outside token values
+- Runtime style injection
+- React components
 
-## Exports
+## Export Model
 
 - `@mantis-core/styles` -> `scss/index.scss`
-- `@mantis-core/styles/scss/*` -> direct SCSS partials
-
-## File Structure
-
-```text
-scss/
-  index.scss
-  buttons.scss
-  ckeditor.scss
-  date-picker.scss
-  gallery.scss
-  inputs.scss
-  paginator.scss
-  rich-text-preview.scss
-  select.scss
-  select-button.scss
-  switch.scss
-  table.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:
+
 ```scss
-@use "@mantis-core/styles/scss/index.scss";
+@use "@mantis-core/styles";
 ```
 
-Or import only what you need:
+Import selectively:
 
 ```scss
+@use "@mantis-core/styles/scss/buttons.scss";
+@use "@mantis-core/styles/scss/inputs.scss";
 @use "@mantis-core/styles/scss/table.scss";
-@use "@mantis-core/styles/scss/paginator.scss";
 ```
 
-## Styling Contract
+## Documentation Index
 
-When consuming components from `@mantis-core/ui`, include the style modules that define:
+- [docs/README.md](./docs/README.md): package documentation index
+- [STYLES.md](./STYLES.md): lightweight partial index
+- [STYLE_CONTRACTS.md](./STYLE_CONTRACTS.md): lightweight style-contract pointer
 
-- `mantis-core-table*`
-- `mantis-core-table-toolbar*`
-- `mantis-core-table-filters*`
-- `mantis-core-paginator`
+## Important Notes
 
-## Build
+1. This package does not define the global tokens themselves. It expects them to exist in the consuming app.
+2. Some partials style third-party markup directly, such as PrimeReact selectors or `react-select` class names.
+3. Some partials expose first-class `mantis-core-*` contracts that are intended to be stable across apps.
 
-`@mantis-core/styles` ships raw SCSS (no TS output):
+## Local Validation
 
 ```bash
 pnpm --filter @mantis-core/styles build
-```
+```

package/STYLES.md

@@ -0,0 +1,11 @@
+# @mantis-core/styles Partial Index
+
+The detailed SCSS documentation now lives in focused files under [`docs/`](./docs/README.md).
+
+## Start Here
+
+- [Documentation index](./docs/README.md)
+- [Style contracts](./docs/contracts/style-contracts.md)
+- [Table styles](./docs/styles/table.md)
+- [Button styles](./docs/styles/buttons.md)
+- [Select styles](./docs/styles/select.md)

package/STYLE_CONTRACTS.md

@@ -0,0 +1,6 @@
+# @mantis-core/styles Style Contracts
+
+The detailed style-contract reference now lives in:
+
+- [docs/contracts/style-contracts.md](./docs/contracts/style-contracts.md)
+- [docs/README.md](./docs/README.md)

package/docs/README.md

@@ -0,0 +1,27 @@
+# @mantis-core/styles Docs
+
+This folder contains focused documentation for each SCSS partial and the shared style contracts.
+
+## Contracts
+
+- [Style contracts](./contracts/style-contracts.md)
+
+## Partials
+
+- [index.scss](./styles/index.md)
+- [buttons.scss](./styles/buttons.md)
+- [ckeditor.scss](./styles/ckeditor.md)
+- [confirm-dialog.scss](./styles/confirm-dialog.md)
+- [data-state.scss](./styles/data-state.md)
+- [date-picker.scss](./styles/date-picker.md)
+- [file-dropzone.scss](./styles/file-dropzone.md)
+- [form-actions.scss](./styles/form-actions.md)
+- [gallery.scss](./styles/gallery.md)
+- [inputs.scss](./styles/inputs.md)
+- [paginator.scss](./styles/paginator.md)
+- [rich-text-preview.scss](./styles/rich-text-preview.md)
+- [select.scss](./styles/select.md)
+- [select-button.scss](./styles/select-button.md)
+- [status-badge.scss](./styles/status-badge.md)
+- [switch.scss](./styles/switch.md)
+- [table.scss](./styles/table.md)

package/docs/contracts/style-contracts.md

@@ -0,0 +1,35 @@
+# Style Contracts
+
+These are the canonical class families and package mappings that should remain stable.
+
+## Canonical `mantis-core-*` families
+
+- `mantis-core-table*`
+- `mantis-core-table-toolbar*`
+- `mantis-core-table-filters*`
+- `mantis-core-status-badge*`
+- `mantis-core-data-state*`
+- `mantis-core-confirm-dialog*`
+- `mantis-core-form-actions*`
+- `mantis-core-file-dropzone*`
+- `mantis-core-paginator`
+
+## UI mappings
+
+- `PaginatedTable`, `TableToolbar`, `TableFilterField` -> `table.scss`
+- `StatusBadge` -> `status-badge.scss`
+- `DataState` -> `data-state.scss`
+- `ConfirmDialog` -> `confirm-dialog.scss`
+- `FormActionsBar` -> `form-actions.scss`
+- `FileDropzone` -> `file-dropzone.scss`
+- `Button` -> `buttons.scss`
+- `Select`, `AsyncSelect` -> `select.scss`
+- `ToggleInlineButton` -> `select-button.scss`
+- `Switch` -> `switch.scss`
+- `CKEditorInput` -> `ckeditor.scss`
+- `RichTextPreview` -> `rich-text-preview.scss`
+
+## Caveats
+
+- `Pagination` from `@mantis-core/ui` is custom and is not styled by `paginator.scss`.
+- `gallery.scss` is currently empty and should not be treated as an implemented gallery contract.

package/docs/styles/buttons.md

@@ -0,0 +1,10 @@
+# buttons.scss
+
+- Import: `@use "@mantis-core/styles/scss/buttons.scss";`
+- Targets: PrimeReact button classes, `Button`, `MenuButton`
+- Main selectors: `.p-button-*`, `.p-button-outlined`, `.p-button-text`, `.p-button-link`, `.p-button-raised`, `.p-button-premium`
+- Token assumptions: `--primary`, `--secondary`, `--accent`, `--success`, `--warning`, `--error`, `--info`, `--bluegray-500`
+
+## Notes
+
+- The token loop defines `error`, not a dedicated `danger` alias.

package/docs/styles/ckeditor.md

@@ -0,0 +1,6 @@
+# ckeditor.scss
+
+- Import: `@use "@mantis-core/styles/scss/ckeditor.scss";`
+- Targets: `CKEditorInput`
+- Main selectors: `.ckeditor-wrapper`, `.ckeditor-invalid`, `.ckeditor-disabled`, `.ckeditor-meta`, `.ck-*`, `.ck-content`
+- Token assumptions: `--border`, `--input`, `--card`, `--foreground`, `--muted-foreground`, `--primary`, `--error`, `--font-sans`, `--font-display`

package/docs/styles/confirm-dialog.md

@@ -0,0 +1,6 @@
+# confirm-dialog.scss
+
+- Import: `@use "@mantis-core/styles/scss/confirm-dialog.scss";`
+- Targets: `ConfirmDialog`
+- Main selectors: `.mantis-core-confirm-dialog*`, `.p-dialog-content`, `.p-dialog-header`
+- Token assumptions: `--card`, `--foreground`, `--accent`, `--muted-foreground`

package/docs/styles/data-state.md

@@ -0,0 +1,6 @@
+# data-state.scss
+
+- Import: `@use "@mantis-core/styles/scss/data-state.scss";`
+- Targets: `DataState`
+- Main selectors: `.mantis-core-data-state*`, `.mantis-core-data-state__icon--spin`
+- Token assumptions: `--border`, `--foreground`, `--card`, `--primary`, `--muted`, `--muted-foreground`, `--error`

package/docs/styles/date-picker.md

@@ -0,0 +1,7 @@
+# date-picker.scss
+
+- Import: `@use "@mantis-core/styles/scss/date-picker.scss";`
+- Targets: `DateInput`
+- Main selectors: `.p-calendar`, `.p-calendar-w-btn`, `.p-datepicker-trigger`, `.p-invalid`, `.p-disabled`, `.p-button`
+- Token assumptions: same shared input tokens plus `--primary`, `--error`
+- Notes: complements `inputs.scss`; it does not replace it

package/docs/styles/file-dropzone.md

@@ -0,0 +1,6 @@
+# file-dropzone.scss
+
+- Import: `@use "@mantis-core/styles/scss/file-dropzone.scss";`
+- Targets: `FileDropzone`
+- Main selectors: `.mantis-core-file-dropzone*`
+- Token assumptions: `--border`, `--foreground`, `--muted`, `--muted-foreground`, `--primary`, `--accent`, `--error`

package/docs/styles/form-actions.md

@@ -0,0 +1,6 @@
+# form-actions.scss
+
+- Import: `@use "@mantis-core/styles/scss/form-actions.scss";`
+- Targets: `FormActionsBar`
+- Main selectors: `.mantis-core-form-actions*`
+- Token assumptions: `--card`

package/docs/styles/gallery.md

@@ -0,0 +1,10 @@
+# gallery.scss
+
+- Import: `@use "@mantis-core/styles/scss/gallery.scss";`
+- Targets: none currently
+- Main selectors: none
+
+## Notes
+
+- This file is currently empty.
+- Treat it as a reserved placeholder, not as an implemented gallery contract.

package/docs/styles/index.md

@@ -0,0 +1,6 @@
+# index.scss
+
+- Import: `@use "@mantis-core/styles";`
+- Purpose: aggregate all shipped SCSS partials
+- Primary consumers: apps that want the full style bundle
+- Notes: no selectors of its own; it only `@use`s the other partials

package/docs/styles/inputs.md

@@ -0,0 +1,6 @@
+# inputs.scss
+
+- Import: `@use "@mantis-core/styles/scss/inputs.scss";`
+- Targets: `TextInput`, `TextArea`, `NumberInput`, `DropDown`, `MultiSelect`, `DateInput`
+- Main selectors: `.p-inputtext`, `.p-dropdown`, `.p-multiselect`, `.p-inputnumber`, `.p-calendar`, `.p-focus`, `.p-invalid`, `.p-disabled`
+- Token assumptions: `--border`, `--primary`, `--error`

package/docs/styles/paginator.md

@@ -0,0 +1,10 @@
+# paginator.scss
+
+- Import: `@use "@mantis-core/styles/scss/paginator.scss";`
+- Targets: PrimeReact `Paginator` instances carrying `mantis-core-paginator`
+- Main selectors: `.mantis-core-paginator.p-paginator`, `.p-paginator-element`, `.p-paginator-page.p-highlight`, `.p-disabled`
+- Token assumptions: `--card`, `--background`, `--border`, `--foreground`, `--muted`, `--muted-foreground`, `--primary`
+
+## Notes
+
+- This partial does not style the custom `Pagination` component exported by `@mantis-core/ui`.

package/docs/styles/rich-text-preview.md

@@ -0,0 +1,6 @@
+# rich-text-preview.scss
+
+- Import: `@use "@mantis-core/styles/scss/rich-text-preview.scss";`
+- Targets: `RichTextPreview`
+- Main selectors: `.rich-text-preview` and its nested heading, list, blockquote, table, code, and size classes
+- Token assumptions: `--foreground`, `--primary`, `--accent`, `--border`, `--muted`, `--font-sans`, `--font-display`

package/docs/styles/select-button.md

@@ -0,0 +1,6 @@
+# select-button.scss
+
+- Import: `@use "@mantis-core/styles/scss/select-button.scss";`
+- Targets: `ToggleInlineButton`
+- Main selectors: `.p-selectbutton-*`, `.p-highlight`, `.p-disabled`, `.p-focus`
+- Token assumptions: same semantic button tokens used by `buttons.scss`

package/docs/styles/select.md

@@ -0,0 +1,10 @@
+# select.scss
+
+- Import: `@use "@mantis-core/styles/scss/select.scss";`
+- Targets: `Select`, `AsyncSelect`
+- Main selectors: `.select-input`, `.select-variant-*`, `.select-invalid`, `.react-select__*`
+- Token assumptions: `--primary`, `--secondary`, `--accent`, `--success`, `--warning`, `--error`, `--info`, `--bluegray-500`, `--border`, `--card`, `--foreground`, `--muted-foreground`
+
+## Notes
+
+- This partial depends on `classNamePrefix="react-select"` remaining unchanged.

package/docs/styles/status-badge.md

@@ -0,0 +1,6 @@
+# status-badge.scss
+
+- Import: `@use "@mantis-core/styles/scss/status-badge.scss";`
+- Targets: `StatusBadge`
+- Main selectors: `.mantis-core-status-badge*`
+- Token assumptions: `--success`, `--muted`, `--border`, `--foreground`, `--warning`, `--info`, `--error`

package/docs/styles/switch.md

@@ -0,0 +1,6 @@
+# switch.scss
+
+- Import: `@use "@mantis-core/styles/scss/switch.scss";`
+- Targets: `Switch`
+- Main selectors: `.bootstrap-switch-*`
+- Token assumptions: `--border`, `--ring`, `--primary`, `--secondary`, `--success`, `--error`, `--warning`, `--info`, `--foreground`, `--background`, `--muted`, `--muted-foreground`

package/docs/styles/table.md

@@ -0,0 +1,11 @@
+# table.scss
+
+- Import: `@use "@mantis-core/styles/scss/table.scss";`
+- Targets: `PaginatedTable`, `TableToolbar`, `TableFilterField`
+- Main selectors:
+  - `.mantis-core-table*`
+  - `.mantis-core-table-toolbar*`
+  - `.mantis-core-table-filters*`
+  - `.mantis-core-table__badge*`
+  - PrimeReact internals such as `.p-datatable-*`, `.p-column-header-content`, `.p-sortable-column`, `.p-paginator`
+- Token assumptions: `--card`, `--primary`, `--accent`, `--border`, `--foreground`, `--background`, `--muted`, `--muted-foreground`, `--ring`, `--success`, `--warning`, `--info`, `--error`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantis-core/styles",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "description": "Shared SCSS tokens and Mantis Core style overrides.",
   "type": "module",
@@ -18,7 +18,10 @@
   },
   "files": [
     "scss",
-    "README.md"
+    "docs",
+    "README.md",
+    "STYLES.md",
+    "STYLE_CONTRACTS.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -41,7 +44,7 @@
   ],
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
-    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && echo \"@mantis-core/styles uses raw scss files\"",
+    "build": "echo \"@mantis-core/styles uses raw scss files\"",
     "typecheck": "echo \"@mantis-core/styles has no ts sources\""
   }
 }

package/scss/confirm-dialog.scss

@@ -0,0 +1,57 @@
+.mantis-core-confirm-dialog {
+  .p-dialog-content {
+    background: var(--card);
+    color: var(--foreground);
+    padding: 1.1rem 1.2rem 1.2rem;
+  }
+
+  .p-dialog-header {
+    display: none;
+  }
+}
+
+.mantis-core-confirm-dialog__body {
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.7rem;
+}
+
+.mantis-core-confirm-dialog__icon {
+  width: 2.35rem;
+  height: 2.35rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in oklch, var(--accent), white 88%);
+  color: color-mix(in oklch, var(--accent), black 18%);
+}
+
+.mantis-core-confirm-dialog__title {
+  margin: 0;
+  color: color-mix(in oklch, var(--foreground), black 12%);
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.mantis-core-confirm-dialog__message {
+  color: var(--muted-foreground);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.mantis-core-confirm-dialog__actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .mantis-core-confirm-dialog__actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}

package/scss/data-state.scss

@@ -0,0 +1,64 @@
+.mantis-core-data-state {
+  border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
+  border-radius: 0.9rem;
+  background: var(--card);
+  padding: 1.5rem 1.25rem;
+  text-align: center;
+  display: grid;
+  justify-items: center;
+  gap: 0.65rem;
+}
+
+.mantis-core-data-state__icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mantis-core-data-state--loading .mantis-core-data-state__icon {
+  background: color-mix(in oklch, var(--primary), white 90%);
+  color: color-mix(in oklch, var(--primary), black 12%);
+}
+
+.mantis-core-data-state--empty .mantis-core-data-state__icon {
+  background: color-mix(in oklch, var(--muted), white 45%);
+  color: color-mix(in oklch, var(--muted-foreground), black 5%);
+}
+
+.mantis-core-data-state--error .mantis-core-data-state__icon {
+  background: color-mix(in oklch, var(--error), white 90%);
+  color: color-mix(in oklch, var(--error), black 12%);
+}
+
+.mantis-core-data-state__icon--spin {
+  animation: mantis-core-spin 1s linear infinite;
+}
+
+.mantis-core-data-state__title {
+  margin: 0;
+  color: color-mix(in oklch, var(--foreground), black 10%);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mantis-core-data-state__description {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+  max-width: 40ch;
+  line-height: 1.45;
+}
+
+.mantis-core-data-state__action {
+  margin-top: 0.45rem;
+}
+
+@keyframes mantis-core-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/file-dropzone.scss

@@ -0,0 +1,145 @@
+.mantis-core-file-dropzone {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.mantis-core-file-dropzone__label {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: color-mix(in oklch, var(--foreground), black 10%);
+}
+
+.mantis-core-file-dropzone__zone {
+  border: 2px dashed color-mix(in oklch, var(--primary), white 52%);
+  border-radius: 0.8rem;
+  background: color-mix(in oklch, var(--primary), white 96%);
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.45rem;
+  padding: 1.1rem 1rem;
+  transition:
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.mantis-core-file-dropzone__zone:hover {
+  border-color: color-mix(in oklch, var(--primary), black 10%);
+}
+
+.mantis-core-file-dropzone__zone--drag {
+  border-color: var(--primary);
+  background: color-mix(in oklch, var(--primary), white 90%);
+}
+
+.mantis-core-file-dropzone__zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.mantis-core-file-dropzone__icon {
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in oklch, var(--primary), white 82%);
+  color: color-mix(in oklch, var(--primary), black 8%);
+}
+
+.mantis-core-file-dropzone__title {
+  margin: 0;
+  color: color-mix(in oklch, var(--foreground), black 12%);
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.mantis-core-file-dropzone__hint {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+.mantis-core-file-dropzone__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.mantis-core-file-dropzone__item {
+  border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
+  border-radius: 0.65rem;
+  background: var(--card);
+  padding: 0.45rem 0.55rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.mantis-core-file-dropzone__item-copy {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--muted-foreground);
+}
+
+.mantis-core-file-dropzone__item-name {
+  color: color-mix(in oklch, var(--foreground), black 12%);
+  font-size: 0.82rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mantis-core-file-dropzone__item-size {
+  font-size: 0.72rem;
+}
+
+.mantis-core-file-dropzone__remove {
+  border: 0;
+  border-radius: 0.45rem;
+  background: color-mix(in oklch, var(--error), white 90%);
+  color: color-mix(in oklch, var(--error), black 10%);
+  width: 1.55rem;
+  height: 1.55rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.mantis-core-file-dropzone__remove:hover {
+  background: color-mix(in oklch, var(--error), white 80%);
+}
+
+.mantis-core-file-dropzone__remove:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.mantis-core-file-dropzone__error-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.mantis-core-file-dropzone__error-item {
+  font-size: 0.74rem;
+  color: color-mix(in oklch, var(--error), black 15%);
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.mantis-core-file-dropzone__error-item svg {
+  flex-shrink: 0;
+}

package/scss/form-actions.scss

@@ -0,0 +1,56 @@
+.mantis-core-form-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.mantis-core-form-actions--start {
+  justify-content: flex-start;
+}
+
+.mantis-core-form-actions--end {
+  justify-content: flex-end;
+}
+
+.mantis-core-form-actions--between {
+  justify-content: space-between;
+}
+
+.mantis-core-form-actions--sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  padding: 0.75rem 0;
+  background: linear-gradient(
+    to top,
+    color-mix(in oklch, var(--card), white 10%) 70%,
+    color-mix(in oklch, var(--card), transparent 100%)
+  );
+}
+
+.mantis-core-form-actions__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mantis-core-form-actions__right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .mantis-core-form-actions,
+  .mantis-core-form-actions__right {
+    width: 100%;
+  }
+
+  .mantis-core-form-actions__right > * {
+    width: 100%;
+  }
+}

package/scss/index.scss

@@ -9,3 +9,8 @@
 @use "./ckeditor.scss";
 @use "./rich-text-preview.scss";
 @use "./switch.scss";
+@use "./status-badge.scss";
+@use "./data-state.scss";
+@use "./confirm-dialog.scss";
+@use "./form-actions.scss";
+@use "./file-dropzone.scss";

package/scss/status-badge.scss

@@ -0,0 +1,58 @@
+.mantis-core-status-badge {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.mantis-core-status-badge--sm {
+  font-size: 0.7rem;
+  min-height: 1.35rem;
+  min-width: 4.9rem;
+  padding: 0.2rem 0.5rem;
+}
+
+.mantis-core-status-badge--md {
+  font-size: 0.75rem;
+  min-height: 1.55rem;
+  min-width: 5.6rem;
+  padding: 0.24rem 0.6rem;
+}
+
+.mantis-core-status-badge--block {
+  width: 100%;
+}
+
+.mantis-core-status-badge--success {
+  background-color: color-mix(in oklch, var(--success), white 86%);
+  border-color: color-mix(in oklch, var(--success), white 62%);
+  color: color-mix(in oklch, var(--success), black 20%);
+}
+
+.mantis-core-status-badge--muted {
+  background-color: color-mix(in oklch, var(--muted), white 35%);
+  border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
+  color: color-mix(in oklch, var(--foreground), white 28%);
+}
+
+.mantis-core-status-badge--warning {
+  background-color: color-mix(in oklch, var(--warning), white 84%);
+  border-color: color-mix(in oklch, var(--warning), white 60%);
+  color: color-mix(in oklch, var(--warning), black 24%);
+}
+
+.mantis-core-status-badge--info {
+  background-color: color-mix(in oklch, var(--info), white 84%);
+  border-color: color-mix(in oklch, var(--info), white 60%);
+  color: color-mix(in oklch, var(--info), black 24%);
+}
+
+.mantis-core-status-badge--danger {
+  background-color: color-mix(in oklch, var(--error), white 84%);
+  border-color: color-mix(in oklch, var(--error), white 60%);
+  color: color-mix(in oklch, var(--error), black 24%);
+}

package/scss/tokens.template.scss

@@ -0,0 +1,122 @@
+/*
+ * ============================================================
+ * MANTIS CORE — DESIGN TOKENS TEMPLATE
+ * ============================================================
+ *
+ * THIS IS A TEMPLATE — do NOT @use/@import this file directly
+ * into scss/index.scss or any Core partial.
+ *
+ * HOW TO USE:
+ *   1. Copy the :root and .dark blocks below into your app's
+ *      global stylesheet (e.g. src/app/globals.scss).
+ *   2. Replace the OKLCH values with your brand palette.
+ *   3. All @mantis-core/styles components consume these tokens
+ *      via var(--token-name) — your overrides take effect
+ *      automatically across the entire UI.
+ *
+ * TOKEN GROUPS:
+ *   - Base / surface  : --background, --foreground, --card, --card-foreground
+ *   - Brand           : --primary, --secondary, --accent (+ -foreground pairs)
+ *   - Semantic        : --success, --warning, --error, --info (+ -foreground pairs)
+ *   - Neutral         : --muted, --muted-foreground, --border, --input, --ring
+ *   - Shape           : --radius
+ *
+ * COLOR SPACE: OKLCH (lightness chroma hue)
+ *   oklch(<L 0–1>  <C 0–0.4>  <H 0–360>)
+ *   L=0.5 is perceptually mid-gray; C=0 is achromatic.
+ *
+ * ============================================================
+ */
+
+:root {
+  /* === Base / Surface === */
+  --background: oklch(0.98 0.003 250);         /* Page background */
+  --foreground: oklch(0.25 0.04 240);          /* Default text */
+
+  --card: oklch(1 0 0);                        /* Card / panel background */
+  --card-foreground: oklch(0.25 0.04 240);     /* Card text */
+
+  /* === Brand Colors === */
+  /* Replace these three pairs with your brand palette */
+  --primary: oklch(0.45 0.15 142);             /* Primary brand color */
+  --primary-foreground: oklch(0.98 0.01 55);
+
+  --secondary: oklch(0.75 0.18 85);            /* Secondary brand color */
+  --secondary-foreground: oklch(0.25 0.04 240);
+
+  --accent: oklch(0.82 0.2 85);               /* Accent / CTA color */
+  --accent-foreground: oklch(0.25 0.04 240);
+
+  /* === Semantic Colors === */
+  /* Adjust hue/chroma to match your brand tone while preserving
+     lightness levels so contrast ratios stay accessible (WCAG AA). */
+  --success: oklch(0.65 0.18 145);
+  --success-foreground: oklch(0.98 0.01 145);
+
+  --warning: oklch(0.75 0.15 75);
+  --warning-foreground: oklch(0.25 0.04 75);
+
+  --error: oklch(0.58 0.22 27);
+  --error-foreground: oklch(0.98 0.01 27);
+
+  --info: oklch(0.6 0.15 240);
+  --info-foreground: oklch(0.98 0.01 240);
+
+  /* === Neutral / Chrome === */
+  --muted: oklch(0.92 0.01 240);              /* Muted backgrounds */
+  --muted-foreground: oklch(0.55 0.03 240);   /* Muted / placeholder text */
+  --border: oklch(0.93 0.01 240);             /* Dividers and borders */
+  --input: oklch(1 0 0);                      /* Input field background */
+  --ring: oklch(0.82 0.2 85);                 /* Focus ring (usually = --accent) */
+
+  /* === Shape === */
+  --radius: 0.75rem;                          /* Base border-radius; used by --radius-{sm,md,lg,xl} */
+}
+
+/* ============================================================
+ * DARK MODE OVERRIDES
+ * Applied when the <html> (or any ancestor) has class="dark".
+ * Convention in this project: @custom-variant dark (&:is(.dark *))
+ * ============================================================ */
+.dark {
+  /* === Base / Surface === */
+  --background: oklch(0.18 0.04 240);
+  --foreground: oklch(0.95 0.01 55);
+
+  --card: oklch(0.22 0.04 240);
+  --card-foreground: oklch(0.95 0.01 55);
+
+  /* === Brand Colors (dark-adjusted) === */
+  /* In dark mode, brand colors typically shift to higher lightness
+     so they stand out against dark backgrounds. */
+  --primary: oklch(0.75 0.18 85);
+  --primary-foreground: oklch(0.25 0.04 240);
+
+  --secondary: oklch(0.55 0.12 142);
+  --secondary-foreground: oklch(0.95 0.01 55);
+
+  --accent: oklch(0.85 0.22 85);
+  --accent-foreground: oklch(0.25 0.04 240);
+
+  /* === Semantic Colors (dark-adjusted) === */
+  --success: oklch(0.7 0.2 145);
+  --success-foreground: oklch(0.18 0.04 145);
+
+  --warning: oklch(0.8 0.18 75);
+  --warning-foreground: oklch(0.2 0.04 75);
+
+  --error: oklch(0.65 0.25 27);
+  --error-foreground: oklch(0.18 0.04 27);
+
+  --info: oklch(0.7 0.18 240);
+  --info-foreground: oklch(0.18 0.04 240);
+
+  /* === Neutral / Chrome === */
+  --muted: oklch(0.3 0.04 240);
+  --muted-foreground: oklch(0.7 0.03 240);
+  --border: oklch(0.27 0.04 240);
+  --input: oklch(0.22 0.04 240);
+  --ring: oklch(0.85 0.22 85);
+
+  /* --radius is theme-independent; no override needed */
+}