@mantis-core/styles 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -6
- package/package.json +18 -2
- package/scss/paginator.scss +7 -7
- package/scss/table.scss +25 -25
package/README.md
CHANGED
|
@@ -4,14 +4,37 @@ Shared SCSS tokens and style overrides for Mantis Core components.
|
|
|
4
4
|
|
|
5
5
|
## Scope
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
7
|
+
- Shared visual tokens.
|
|
8
|
+
- PrimeReact-oriented overrides.
|
|
9
|
+
- Namespace contract: `mantis-core-*`.
|
|
10
10
|
|
|
11
|
-
## Out
|
|
11
|
+
## Out Of Scope
|
|
12
12
|
|
|
13
|
-
-
|
|
14
|
-
-
|
|
13
|
+
- App/domain-specific styles.
|
|
14
|
+
- Client brand names in class prefixes.
|
|
15
|
+
|
|
16
|
+
## Exports
|
|
17
|
+
|
|
18
|
+
- `@mantis-core/styles` -> `scss/index.scss`
|
|
19
|
+
- `@mantis-core/styles/scss/*` -> direct SCSS partials
|
|
20
|
+
|
|
21
|
+
## File Structure
|
|
22
|
+
|
|
23
|
+
```text
|
|
24
|
+
scss/
|
|
25
|
+
index.scss
|
|
26
|
+
buttons.scss
|
|
27
|
+
ckeditor.scss
|
|
28
|
+
date-picker.scss
|
|
29
|
+
gallery.scss
|
|
30
|
+
inputs.scss
|
|
31
|
+
paginator.scss
|
|
32
|
+
rich-text-preview.scss
|
|
33
|
+
select.scss
|
|
34
|
+
select-button.scss
|
|
35
|
+
switch.scss
|
|
36
|
+
table.scss
|
|
37
|
+
```
|
|
15
38
|
|
|
16
39
|
## Usage
|
|
17
40
|
|
|
@@ -19,3 +42,26 @@ Shared SCSS tokens and style overrides for Mantis Core components.
|
|
|
19
42
|
@use "@mantis-core/styles/scss/index.scss";
|
|
20
43
|
```
|
|
21
44
|
|
|
45
|
+
Or import only what you need:
|
|
46
|
+
|
|
47
|
+
```scss
|
|
48
|
+
@use "@mantis-core/styles/scss/table.scss";
|
|
49
|
+
@use "@mantis-core/styles/scss/paginator.scss";
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Styling Contract
|
|
53
|
+
|
|
54
|
+
When consuming components from `@mantis-core/ui`, include the style modules that define:
|
|
55
|
+
|
|
56
|
+
- `mantis-core-table*`
|
|
57
|
+
- `mantis-core-table-toolbar*`
|
|
58
|
+
- `mantis-core-table-filters*`
|
|
59
|
+
- `mantis-core-paginator`
|
|
60
|
+
|
|
61
|
+
## Build
|
|
62
|
+
|
|
63
|
+
`@mantis-core/styles` ships raw SCSS (no TS output):
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
pnpm --filter @mantis-core/styles build
|
|
67
|
+
```
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantis-core/styles",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"private": false,
|
|
5
|
-
"description": "Shared SCSS tokens and
|
|
5
|
+
"description": "Shared SCSS tokens and Mantis Core style overrides.",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sass": "./scss/index.scss",
|
|
8
8
|
"sideEffects": true,
|
|
@@ -18,6 +18,22 @@
|
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "git+https://github.com/diegocondo10/mantis-core.git",
|
|
24
|
+
"directory": "packages/mantis-core-styles"
|
|
25
|
+
},
|
|
26
|
+
"bugs": {
|
|
27
|
+
"url": "https://github.com/diegocondo10/mantis-core/issues"
|
|
28
|
+
},
|
|
29
|
+
"homepage": "https://github.com/diegocondo10/mantis-core/tree/main/packages/mantis-core-styles",
|
|
30
|
+
"keywords": [
|
|
31
|
+
"mantis-core",
|
|
32
|
+
"styles",
|
|
33
|
+
"scss",
|
|
34
|
+
"design-tokens",
|
|
35
|
+
"primereact"
|
|
36
|
+
],
|
|
21
37
|
"scripts": {
|
|
22
38
|
"clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
|
|
23
39
|
"build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && echo \"@mantis-core/styles uses raw scss files\"",
|
package/scss/paginator.scss
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
// Estilo del paginador de PrimeReact para el listado publico
|
|
5
5
|
// de propiedades. Basado en tokens del design system.
|
|
6
6
|
|
|
7
|
-
.
|
|
7
|
+
.mantis-core-paginator.p-paginator {
|
|
8
8
|
background-color: transparent;
|
|
9
9
|
border: 0;
|
|
10
10
|
gap: 0.25rem;
|
|
11
11
|
padding: 0;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.mantis-core-paginator .p-paginator-element {
|
|
15
15
|
align-items: center;
|
|
16
16
|
background-color: color-mix(in oklch, var(--card), var(--background) 24%);
|
|
17
17
|
border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
|
|
@@ -28,30 +28,30 @@
|
|
|
28
28
|
color 0.2s ease;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.
|
|
31
|
+
.mantis-core-paginator .p-paginator-element:not(.p-disabled):hover {
|
|
32
32
|
background-color: color-mix(in oklch, var(--primary), white 92%);
|
|
33
33
|
border-color: color-mix(in oklch, var(--primary), white 60%);
|
|
34
34
|
color: color-mix(in oklch, var(--primary), black 20%);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.mantis-core-paginator .p-paginator-element:focus-visible {
|
|
38
38
|
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
|
|
39
39
|
outline: none;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.
|
|
42
|
+
.mantis-core-paginator .p-paginator-pages .p-paginator-page.p-highlight {
|
|
43
43
|
background-color: var(--primary);
|
|
44
44
|
border-color: var(--primary);
|
|
45
45
|
color: var(--primary-foreground);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.
|
|
48
|
+
.mantis-core-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
|
|
49
49
|
background-color: color-mix(in oklch, var(--primary), black 10%);
|
|
50
50
|
border-color: color-mix(in oklch, var(--primary), black 10%);
|
|
51
51
|
color: var(--primary-foreground);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
.
|
|
54
|
+
.mantis-core-paginator .p-paginator-element.p-disabled {
|
|
55
55
|
background-color: color-mix(in oklch, var(--muted), white 15%);
|
|
56
56
|
border-color: color-mix(in oklch, var(--border), black 4%);
|
|
57
57
|
color: var(--muted-foreground);
|
package/scss/table.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.mantis-core-table {
|
|
2
2
|
background-color: var(--card);
|
|
3
3
|
overflow: hidden;
|
|
4
4
|
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
88
|
+
.mantis-core-table-toolbar {
|
|
89
89
|
align-items: center;
|
|
90
90
|
display: flex;
|
|
91
91
|
flex-wrap: wrap;
|
|
@@ -93,18 +93,18 @@
|
|
|
93
93
|
justify-content: space-between;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
.
|
|
96
|
+
.mantis-core-table-toolbar__copy {
|
|
97
97
|
min-width: 12rem;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.
|
|
100
|
+
.mantis-core-table-toolbar__actions {
|
|
101
101
|
align-items: center;
|
|
102
102
|
display: flex;
|
|
103
103
|
flex-wrap: wrap;
|
|
104
104
|
gap: 0.5rem;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
.
|
|
107
|
+
.mantis-core-table-toolbar__title {
|
|
108
108
|
color: color-mix(in oklch, var(--foreground), black 16%);
|
|
109
109
|
font-size: 0.95rem;
|
|
110
110
|
font-weight: 700;
|
|
@@ -112,32 +112,32 @@
|
|
|
112
112
|
margin: 0;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
.
|
|
115
|
+
.mantis-core-table-toolbar__meta {
|
|
116
116
|
color: var(--muted-foreground);
|
|
117
117
|
font-size: 0.78rem;
|
|
118
118
|
font-weight: 500;
|
|
119
119
|
margin: 0.2rem 0 0;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
.
|
|
122
|
+
.mantis-core-table-filters {
|
|
123
123
|
display: grid;
|
|
124
124
|
gap: 0.75rem;
|
|
125
125
|
grid-template-columns: 1fr;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.
|
|
128
|
+
.mantis-core-table-filters__field {
|
|
129
129
|
display: grid;
|
|
130
130
|
gap: 0.35rem;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.mantis-core-table-filters__label {
|
|
134
134
|
color: color-mix(in oklch, var(--foreground), black 10%);
|
|
135
135
|
font-size: 0.76rem;
|
|
136
136
|
font-weight: 600;
|
|
137
137
|
letter-spacing: 0.01em;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
.
|
|
140
|
+
.mantis-core-table__index-cell {
|
|
141
141
|
color: color-mix(in oklch, var(--foreground), black 12%);
|
|
142
142
|
font-variant-numeric: tabular-nums;
|
|
143
143
|
font-weight: 700;
|
|
@@ -145,21 +145,21 @@
|
|
|
145
145
|
width: 100%;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
.
|
|
148
|
+
.mantis-core-table__cell--numeric {
|
|
149
149
|
font-variant-numeric: tabular-nums;
|
|
150
150
|
font-weight: 600;
|
|
151
151
|
text-align: right;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
-
.
|
|
154
|
+
.mantis-core-table__cell--status {
|
|
155
155
|
text-align: center;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
.
|
|
158
|
+
.mantis-core-table__cell--title {
|
|
159
159
|
font-weight: 600;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
-
.
|
|
162
|
+
.mantis-core-table__text--truncate {
|
|
163
163
|
display: block;
|
|
164
164
|
max-width: 16rem;
|
|
165
165
|
overflow: hidden;
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
white-space: nowrap;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
.
|
|
170
|
+
.mantis-core-table__badge {
|
|
171
171
|
border: 1px solid transparent;
|
|
172
172
|
border-radius: 999px;
|
|
173
173
|
display: inline-flex;
|
|
@@ -178,51 +178,51 @@
|
|
|
178
178
|
padding: 0.24rem 0.6rem;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
.
|
|
181
|
+
.mantis-core-table__badge--success {
|
|
182
182
|
background-color: color-mix(in oklch, var(--success), white 86%);
|
|
183
183
|
border-color: color-mix(in oklch, var(--success), white 62%);
|
|
184
184
|
color: color-mix(in oklch, var(--success), black 20%);
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
.
|
|
187
|
+
.mantis-core-table__badge--muted {
|
|
188
188
|
background-color: color-mix(in oklch, var(--muted), white 35%);
|
|
189
189
|
border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
|
|
190
190
|
color: color-mix(in oklch, var(--foreground), white 28%);
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
.
|
|
193
|
+
.mantis-core-table__badge--warning {
|
|
194
194
|
background-color: color-mix(in oklch, var(--warning), white 84%);
|
|
195
195
|
border-color: color-mix(in oklch, var(--warning), white 60%);
|
|
196
196
|
color: color-mix(in oklch, var(--warning), black 24%);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
.
|
|
199
|
+
.mantis-core-table__badge--info {
|
|
200
200
|
background-color: color-mix(in oklch, var(--info), white 84%);
|
|
201
201
|
border-color: color-mix(in oklch, var(--info), white 60%);
|
|
202
202
|
color: color-mix(in oklch, var(--info), black 24%);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
.
|
|
205
|
+
.mantis-core-table__badge--danger {
|
|
206
206
|
background-color: color-mix(in oklch, var(--error), white 84%);
|
|
207
207
|
border-color: color-mix(in oklch, var(--error), white 60%);
|
|
208
208
|
color: color-mix(in oklch, var(--error), black 24%);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
@media (max-width: 768px) {
|
|
212
|
-
.
|
|
213
|
-
.
|
|
212
|
+
.mantis-core-table .p-datatable-thead > tr > th,
|
|
213
|
+
.mantis-core-table .p-datatable-tbody > tr > td {
|
|
214
214
|
padding: 0.6rem 0.65rem;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
.
|
|
217
|
+
.mantis-core-table-toolbar {
|
|
218
218
|
align-items: flex-start;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
.
|
|
221
|
+
.mantis-core-table__text--truncate {
|
|
222
222
|
max-width: 10rem;
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
.
|
|
225
|
+
.mantis-core-table__badge {
|
|
226
226
|
min-width: 5.2rem;
|
|
227
227
|
}
|
|
228
228
|
}
|