@mantis-core/styles 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mantis Core contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,14 +4,37 @@ Shared SCSS tokens and style overrides for Mantis Core components.
 
 ## Scope
 
-- Core visual tokens.
-- Reusable style overrides.
-- `atlas-*` CSS namespace contracts.
+- Shared visual tokens.
+- PrimeReact-oriented overrides.
+- Namespace contract: `mantis-core-*`.
 
-## Out of Scope
+## Out Of Scope
 
-- Client brand-specific CSS namespaces.
-- Business/domain styles coupled to a single vertical.
+- App/domain-specific styles.
+- Client brand names in class prefixes.
+
+## Exports
+
+- `@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
+```
 
 ## Usage
 
@@ -19,3 +42,26 @@ Shared SCSS tokens and style overrides for Mantis Core components.
 @use "@mantis-core/styles/scss/index.scss";
 ```
 
+Or import only what you need:
+
+```scss
+@use "@mantis-core/styles/scss/table.scss";
+@use "@mantis-core/styles/scss/paginator.scss";
+```
+
+## Styling Contract
+
+When consuming components from `@mantis-core/ui`, include the style modules that define:
+
+- `mantis-core-table*`
+- `mantis-core-table-toolbar*`
+- `mantis-core-table-filters*`
+- `mantis-core-paginator`
+
+## Build
+
+`@mantis-core/styles` ships raw SCSS (no TS output):
+
+```bash
+pnpm --filter @mantis-core/styles build
+```

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@mantis-core/styles",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
-  "description": "Shared SCSS tokens and Atlas style overrides.",
+  "description": "Shared SCSS tokens and Mantis Core style overrides.",
   "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=10.0.0"
+  },
   "sass": "./scss/index.scss",
   "sideEffects": true,
   "exports": {
@@ -18,6 +23,22 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/diegocondo10/mantis-core.git",
+    "directory": "packages/mantis-core-styles"
+  },
+  "bugs": {
+    "url": "https://github.com/diegocondo10/mantis-core/issues"
+  },
+  "homepage": "https://github.com/diegocondo10/mantis-core/tree/main/packages/mantis-core-styles",
+  "keywords": [
+    "mantis-core",
+    "styles",
+    "scss",
+    "design-tokens",
+    "primereact"
+  ],
   "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\"",

package/scss/paginator.scss

@@ -4,14 +4,14 @@
 // Estilo del paginador de PrimeReact para el listado publico
 // de propiedades. Basado en tokens del design system.
 
-.atlas-paginator.p-paginator {
+.mantis-core-paginator.p-paginator {
   background-color: transparent;
   border: 0;
   gap: 0.25rem;
   padding: 0;
 }
 
-.atlas-paginator .p-paginator-element {
+.mantis-core-paginator .p-paginator-element {
   align-items: center;
   background-color: color-mix(in oklch, var(--card), var(--background) 24%);
   border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
@@ -28,30 +28,30 @@
     color 0.2s ease;
 }
 
-.atlas-paginator .p-paginator-element:not(.p-disabled):hover {
+.mantis-core-paginator .p-paginator-element:not(.p-disabled):hover {
   background-color: color-mix(in oklch, var(--primary), white 92%);
   border-color: color-mix(in oklch, var(--primary), white 60%);
   color: color-mix(in oklch, var(--primary), black 20%);
 }
 
-.atlas-paginator .p-paginator-element:focus-visible {
+.mantis-core-paginator .p-paginator-element:focus-visible {
   box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
   outline: none;
 }
 
-.atlas-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+.mantis-core-paginator .p-paginator-pages .p-paginator-page.p-highlight {
   background-color: var(--primary);
   border-color: var(--primary);
   color: var(--primary-foreground);
 }
 
-.atlas-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
+.mantis-core-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
   background-color: color-mix(in oklch, var(--primary), black 10%);
   border-color: color-mix(in oklch, var(--primary), black 10%);
   color: var(--primary-foreground);
 }
 
-.atlas-paginator .p-paginator-element.p-disabled {
+.mantis-core-paginator .p-paginator-element.p-disabled {
   background-color: color-mix(in oklch, var(--muted), white 15%);
   border-color: color-mix(in oklch, var(--border), black 4%);
   color: var(--muted-foreground);

package/scss/table.scss

@@ -1,4 +1,4 @@
-.atlas-table {
+.mantis-core-table {
   background-color: var(--card);
   overflow: hidden;
 
@@ -85,7 +85,7 @@
   }
 }
 
-.atlas-table-toolbar {
+.mantis-core-table-toolbar {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -93,18 +93,18 @@
   justify-content: space-between;
 }
 
-.atlas-table-toolbar__copy {
+.mantis-core-table-toolbar__copy {
   min-width: 12rem;
 }
 
-.atlas-table-toolbar__actions {
+.mantis-core-table-toolbar__actions {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.atlas-table-toolbar__title {
+.mantis-core-table-toolbar__title {
   color: color-mix(in oklch, var(--foreground), black 16%);
   font-size: 0.95rem;
   font-weight: 700;
@@ -112,32 +112,32 @@
   margin: 0;
 }
 
-.atlas-table-toolbar__meta {
+.mantis-core-table-toolbar__meta {
   color: var(--muted-foreground);
   font-size: 0.78rem;
   font-weight: 500;
   margin: 0.2rem 0 0;
 }
 
-.atlas-table-filters {
+.mantis-core-table-filters {
   display: grid;
   gap: 0.75rem;
   grid-template-columns: 1fr;
 }
 
-.atlas-table-filters__field {
+.mantis-core-table-filters__field {
   display: grid;
   gap: 0.35rem;
 }
 
-.atlas-table-filters__label {
+.mantis-core-table-filters__label {
   color: color-mix(in oklch, var(--foreground), black 10%);
   font-size: 0.76rem;
   font-weight: 600;
   letter-spacing: 0.01em;
 }
 
-.atlas-table__index-cell {
+.mantis-core-table__index-cell {
   color: color-mix(in oklch, var(--foreground), black 12%);
   font-variant-numeric: tabular-nums;
   font-weight: 700;
@@ -145,21 +145,21 @@
   width: 100%;
 }
 
-.atlas-table__cell--numeric {
+.mantis-core-table__cell--numeric {
   font-variant-numeric: tabular-nums;
   font-weight: 600;
   text-align: right;
 }
 
-.atlas-table__cell--status {
+.mantis-core-table__cell--status {
   text-align: center;
 }
 
-.atlas-table__cell--title {
+.mantis-core-table__cell--title {
   font-weight: 600;
 }
 
-.atlas-table__text--truncate {
+.mantis-core-table__text--truncate {
   display: block;
   max-width: 16rem;
   overflow: hidden;
@@ -167,7 +167,7 @@
   white-space: nowrap;
 }
 
-.atlas-table__badge {
+.mantis-core-table__badge {
   border: 1px solid transparent;
   border-radius: 999px;
   display: inline-flex;
@@ -178,51 +178,51 @@
   padding: 0.24rem 0.6rem;
 }
 
-.atlas-table__badge--success {
+.mantis-core-table__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%);
 }
 
-.atlas-table__badge--muted {
+.mantis-core-table__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%);
 }
 
-.atlas-table__badge--warning {
+.mantis-core-table__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%);
 }
 
-.atlas-table__badge--info {
+.mantis-core-table__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%);
 }
 
-.atlas-table__badge--danger {
+.mantis-core-table__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%);
 }
 
 @media (max-width: 768px) {
-  .atlas-table .p-datatable-thead > tr > th,
-  .atlas-table .p-datatable-tbody > tr > td {
+  .mantis-core-table .p-datatable-thead > tr > th,
+  .mantis-core-table .p-datatable-tbody > tr > td {
     padding: 0.6rem 0.65rem;
   }
 
-  .atlas-table-toolbar {
+  .mantis-core-table-toolbar {
     align-items: flex-start;
   }
 
-  .atlas-table__text--truncate {
+  .mantis-core-table__text--truncate {
     max-width: 10rem;
   }
 
-  .atlas-table__badge {
+  .mantis-core-table__badge {
     min-width: 5.2rem;
   }
 }