@mantis-core/styles 0.1.0
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 +21 -0
- package/package.json +26 -0
- package/scss/buttons.scss +237 -0
- package/scss/ckeditor.scss +191 -0
- package/scss/date-picker.scss +73 -0
- package/scss/gallery.scss +0 -0
- package/scss/index.scss +11 -0
- package/scss/inputs.scss +77 -0
- package/scss/paginator.scss +59 -0
- package/scss/rich-text-preview.scss +287 -0
- package/scss/select-button.scss +110 -0
- package/scss/select.scss +177 -0
- package/scss/switch.scss +180 -0
- package/scss/table.scss +228 -0
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# @mantis-core/styles
|
|
2
|
+
|
|
3
|
+
Shared SCSS tokens and style overrides for Mantis Core components.
|
|
4
|
+
|
|
5
|
+
## Scope
|
|
6
|
+
|
|
7
|
+
- Core visual tokens.
|
|
8
|
+
- Reusable style overrides.
|
|
9
|
+
- `atlas-*` CSS namespace contracts.
|
|
10
|
+
|
|
11
|
+
## Out of Scope
|
|
12
|
+
|
|
13
|
+
- Client brand-specific CSS namespaces.
|
|
14
|
+
- Business/domain styles coupled to a single vertical.
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```scss
|
|
19
|
+
@use "@mantis-core/styles/scss/index.scss";
|
|
20
|
+
```
|
|
21
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mantis-core/styles",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Shared SCSS tokens and Atlas style overrides.",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sass": "./scss/index.scss",
|
|
8
|
+
"sideEffects": true,
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./scss/index.scss",
|
|
11
|
+
"./scss/*": "./scss/*",
|
|
12
|
+
"./scss/index.scss": "./scss/index.scss"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"scss",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
|
|
23
|
+
"build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && echo \"@mantis-core/styles uses raw scss files\"",
|
|
24
|
+
"typecheck": "echo \"@mantis-core/styles has no ts sources\""
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
// ===================================
|
|
2
|
+
// MIXINS Y VARIABLES
|
|
3
|
+
// ===================================
|
|
4
|
+
@use "sass:map";
|
|
5
|
+
|
|
6
|
+
// Sombras reutilizables
|
|
7
|
+
$shadow-raised:
|
|
8
|
+
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
9
|
+
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
|
10
|
+
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
11
|
+
$shadow-raised-hover:
|
|
12
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
|
13
|
+
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
14
|
+
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
15
|
+
|
|
16
|
+
// Mixin para botones sólidos con variables CSS
|
|
17
|
+
// El mixin calcula los estados hover/active automáticamente a partir
|
|
18
|
+
// del color base usando `color-mix`. De esta forma basta con cambiar
|
|
19
|
+
// la variable CSS en globals.scss cuando se hace un rebranding.
|
|
20
|
+
@mixin button-solid($color, $text-color: #ffffff) {
|
|
21
|
+
background-color: var(#{$color});
|
|
22
|
+
border: 1px solid var(#{$color});
|
|
23
|
+
color: $text-color;
|
|
24
|
+
|
|
25
|
+
// shading hacia negro para los estados interactivos
|
|
26
|
+
$hover: color-mix(in oklch, var(#{$color}), black 10%);
|
|
27
|
+
$active: color-mix(in oklch, var(#{$color}), black 20%);
|
|
28
|
+
|
|
29
|
+
&:enabled:hover {
|
|
30
|
+
background-color: $hover;
|
|
31
|
+
border-color: $hover;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:enabled:active {
|
|
35
|
+
background-color: $active;
|
|
36
|
+
border-color: $active;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:focus {
|
|
40
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(#{$color}) 50%, transparent);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Mixin para botones outlined con variables CSS
|
|
45
|
+
// los colores de hover/active se generan también a partir del color base
|
|
46
|
+
@mixin button-outlined($color) {
|
|
47
|
+
background-color: transparent;
|
|
48
|
+
color: var(#{$color});
|
|
49
|
+
border: 1px solid var(#{$color});
|
|
50
|
+
|
|
51
|
+
$hover: color-mix(in oklch, var(#{$color}), black 10%);
|
|
52
|
+
$active: color-mix(in oklch, var(#{$color}), black 20%);
|
|
53
|
+
$bg-hover: color-mix(in oklch, var(#{$color}), transparent 90%);
|
|
54
|
+
$bg-active: color-mix(in oklch, var(#{$color}), transparent 80%);
|
|
55
|
+
|
|
56
|
+
&:enabled:hover {
|
|
57
|
+
background-color: $bg-hover;
|
|
58
|
+
color: $hover;
|
|
59
|
+
border-color: $hover;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:enabled:active {
|
|
63
|
+
background-color: $bg-active;
|
|
64
|
+
color: $active;
|
|
65
|
+
border-color: $active;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&:focus {
|
|
69
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(#{$color}) 50%, transparent);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Mixin para botones text con variables CSS
|
|
74
|
+
@mixin button-text($color) {
|
|
75
|
+
background-color: transparent;
|
|
76
|
+
color: var(#{$color});
|
|
77
|
+
border-color: transparent;
|
|
78
|
+
|
|
79
|
+
$hover: color-mix(in oklch, var(#{$color}), black 10%);
|
|
80
|
+
$active: color-mix(in oklch, var(#{$color}), black 20%);
|
|
81
|
+
$bg-hover: color-mix(in oklch, var(#{$color}), transparent 90%);
|
|
82
|
+
$bg-active: color-mix(in oklch, var(#{$color}), transparent 80%);
|
|
83
|
+
|
|
84
|
+
&:enabled:hover {
|
|
85
|
+
background-color: $bg-hover;
|
|
86
|
+
color: $hover;
|
|
87
|
+
border-color: transparent;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&:enabled:active {
|
|
91
|
+
background-color: $bg-active;
|
|
92
|
+
color: $active;
|
|
93
|
+
border-color: transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:focus {
|
|
97
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(#{$color}) 50%, transparent);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Mixin para botones link con variables CSS
|
|
102
|
+
@mixin button-link($color) {
|
|
103
|
+
background-color: transparent;
|
|
104
|
+
color: var(#{$color});
|
|
105
|
+
border-color: transparent;
|
|
106
|
+
|
|
107
|
+
$hover: color-mix(in oklch, var(#{$color}), black 10%);
|
|
108
|
+
$active: color-mix(in oklch, var(#{$color}), black 20%);
|
|
109
|
+
|
|
110
|
+
&:enabled:hover {
|
|
111
|
+
background-color: transparent;
|
|
112
|
+
color: $hover;
|
|
113
|
+
border-color: transparent;
|
|
114
|
+
text-decoration: underline;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&:enabled:active {
|
|
118
|
+
color: $active;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&:focus {
|
|
122
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(#{$color}) 50%, transparent);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Mixin para raised (compartido por todas las variantes)
|
|
127
|
+
@mixin button-raised() {
|
|
128
|
+
box-shadow: $shadow-raised;
|
|
129
|
+
|
|
130
|
+
&:enabled:hover {
|
|
131
|
+
box-shadow: $shadow-raised-hover;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Mixin para crear todas las subvariantes de un botón
|
|
136
|
+
// ahora sólo necesitamos el color base y el texto opcional
|
|
137
|
+
@mixin button-variant($name, $color, $text-color: #ffffff) {
|
|
138
|
+
.p-button-#{$name} {
|
|
139
|
+
@include button-solid($color, $text-color);
|
|
140
|
+
|
|
141
|
+
&.p-button-outlined {
|
|
142
|
+
@include button-outlined($color);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&.p-button-text {
|
|
146
|
+
@include button-text($color);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&.p-button-link {
|
|
150
|
+
@include button-link($color);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&.p-button-raised {
|
|
154
|
+
@include button-raised();
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// ===================================
|
|
160
|
+
// APLICACIÓN DE VARIANTES (mapa + bucle)
|
|
161
|
+
// ===================================
|
|
162
|
+
|
|
163
|
+
$button-variants: (
|
|
164
|
+
primary: (
|
|
165
|
+
color: --primary,
|
|
166
|
+
text: --primary-foreground,
|
|
167
|
+
),
|
|
168
|
+
secondary: (
|
|
169
|
+
color: --secondary,
|
|
170
|
+
text: --secondary-foreground,
|
|
171
|
+
),
|
|
172
|
+
accent: (
|
|
173
|
+
color: --accent,
|
|
174
|
+
text: --accent-foreground,
|
|
175
|
+
),
|
|
176
|
+
success: (
|
|
177
|
+
color: --success,
|
|
178
|
+
text: --success-foreground,
|
|
179
|
+
),
|
|
180
|
+
warning: (
|
|
181
|
+
color: --warning,
|
|
182
|
+
text: --warning-foreground,
|
|
183
|
+
),
|
|
184
|
+
error: (
|
|
185
|
+
color: --error,
|
|
186
|
+
text: --error-foreground,
|
|
187
|
+
),
|
|
188
|
+
info: (
|
|
189
|
+
color: --info,
|
|
190
|
+
text: --info-foreground,
|
|
191
|
+
),
|
|
192
|
+
"gray": (
|
|
193
|
+
color: --bluegray-500,
|
|
194
|
+
text: #ffffff,
|
|
195
|
+
),
|
|
196
|
+
);
|
|
197
|
+
|
|
198
|
+
@each $name, $cfg in $button-variants {
|
|
199
|
+
@include button-variant($name, map.get($cfg, "color"), map.get($cfg, "text"));
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// ===================================
|
|
203
|
+
// VARIANTE PREMIUM (gradient basado en la variable --primary)
|
|
204
|
+
// ===================================
|
|
205
|
+
|
|
206
|
+
.p-button-premium {
|
|
207
|
+
// la misma lógica que button-solid pero usando un degradado
|
|
208
|
+
background: linear-gradient(
|
|
209
|
+
to bottom right,
|
|
210
|
+
var(--primary),
|
|
211
|
+
color-mix(in oklch, var(--primary), transparent 20%)
|
|
212
|
+
);
|
|
213
|
+
border: 1px solid var(--primary);
|
|
214
|
+
color: var(--primary-foreground);
|
|
215
|
+
|
|
216
|
+
$hover-start: color-mix(in oklch, var(--primary), black 10%);
|
|
217
|
+
$hover-end: color-mix(in oklch, var(--primary), transparent 10%);
|
|
218
|
+
$active-start: color-mix(in oklch, var(--primary), black 20%);
|
|
219
|
+
|
|
220
|
+
&:enabled:hover {
|
|
221
|
+
background: linear-gradient(to bottom right, $hover-start, $hover-end);
|
|
222
|
+
border-color: $hover-start;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
&:enabled:active {
|
|
226
|
+
background: linear-gradient(to bottom right, $active-start, var(--primary));
|
|
227
|
+
border-color: $active-start;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&:focus {
|
|
231
|
+
box-shadow: 0 0 0 0.2rem color-mix(in oklch, var(--primary) 30%, transparent);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
&.p-button-raised {
|
|
235
|
+
@include button-raised();
|
|
236
|
+
}
|
|
237
|
+
}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
// ===================================
|
|
2
|
+
// CKEDITOR INPUT
|
|
3
|
+
// ===================================
|
|
4
|
+
// Patrón alineado con inputs/select del design system:
|
|
5
|
+
// - borde base: --border
|
|
6
|
+
// - hover/focus: --primary
|
|
7
|
+
// - invalid: --error
|
|
8
|
+
// - disabled: muted
|
|
9
|
+
|
|
10
|
+
$editor-border-hover: color-mix(in oklch, var(--primary), black 12%);
|
|
11
|
+
$editor-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
|
|
12
|
+
$editor-error-ring: 0 0 0 0.2rem color-mix(in srgb, var(--error) 35%, transparent);
|
|
13
|
+
|
|
14
|
+
.ckeditor-wrapper {
|
|
15
|
+
--editor-border: var(--border);
|
|
16
|
+
--editor-surface: var(--input);
|
|
17
|
+
--editor-toolbar-surface: color-mix(in oklch, var(--card), white 6%);
|
|
18
|
+
--editor-text: var(--foreground);
|
|
19
|
+
--editor-min-height: 25rem;
|
|
20
|
+
--editor-max-height: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ckeditor-wrapper .ck.ck-toolbar {
|
|
24
|
+
border: 1px solid var(--editor-border);
|
|
25
|
+
border-bottom: 0;
|
|
26
|
+
border-top-left-radius: 6px;
|
|
27
|
+
border-top-right-radius: 6px;
|
|
28
|
+
background-color: var(--editor-toolbar-surface);
|
|
29
|
+
transition:
|
|
30
|
+
border-color 0.2s ease,
|
|
31
|
+
box-shadow 0.2s ease,
|
|
32
|
+
background-color 0.2s ease;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ckeditor-wrapper .ck.ck-editor__main > .ck-editor__editable {
|
|
36
|
+
min-height: var(--editor-min-height);
|
|
37
|
+
max-height: var(--editor-max-height);
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
padding: 1rem 1.125rem;
|
|
40
|
+
border: 1px solid var(--editor-border);
|
|
41
|
+
border-bottom-left-radius: 6px;
|
|
42
|
+
border-bottom-right-radius: 6px;
|
|
43
|
+
background-color: var(--editor-surface);
|
|
44
|
+
color: var(--editor-text);
|
|
45
|
+
transition:
|
|
46
|
+
border-color 0.2s ease,
|
|
47
|
+
box-shadow 0.2s ease,
|
|
48
|
+
background-color 0.2s ease;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.ckeditor-wrapper .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused):hover {
|
|
52
|
+
border-color: $editor-border-hover;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ckeditor-wrapper .ck.ck-editor__main > .ck-editor__editable.ck-focused {
|
|
56
|
+
border-color: var(--primary);
|
|
57
|
+
box-shadow: $editor-focus-ring;
|
|
58
|
+
outline: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ckeditor-wrapper .ck.ck-editor__main > .ck-editor__editable.ck-placeholder::before {
|
|
62
|
+
color: var(--muted-foreground);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ckeditor-wrapper .ck.ck-editor__main > .ck-editor__editable.ck-content {
|
|
66
|
+
font-family: var(--font-sans);
|
|
67
|
+
font-size: 0.98rem;
|
|
68
|
+
line-height: 1.65;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.ckeditor-wrapper .ck-content h1,
|
|
72
|
+
.ckeditor-wrapper .ck-content h2,
|
|
73
|
+
.ckeditor-wrapper .ck-content h3,
|
|
74
|
+
.ckeditor-wrapper .ck-content h4,
|
|
75
|
+
.ckeditor-wrapper .ck-content h5,
|
|
76
|
+
.ckeditor-wrapper .ck-content h6 {
|
|
77
|
+
color: var(--primary);
|
|
78
|
+
font-family: var(--font-display);
|
|
79
|
+
font-weight: 700;
|
|
80
|
+
line-height: 1.3;
|
|
81
|
+
margin: 1.15rem 0 0.65rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.ckeditor-wrapper .ck-content h1 {
|
|
85
|
+
font-size: 2rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ckeditor-wrapper .ck-content h2 {
|
|
89
|
+
font-size: 1.65rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.ckeditor-wrapper .ck-content h3 {
|
|
93
|
+
font-size: 1.4rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ckeditor-wrapper .ck-content p {
|
|
97
|
+
margin: 0 0 0.85rem;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ckeditor-wrapper .ck-content :is(ul, ol):not(.todo-list) {
|
|
101
|
+
margin: 0.7rem 0 1rem;
|
|
102
|
+
padding-inline-start: 1.65rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.ckeditor-wrapper .ck-content ul:not(.todo-list) {
|
|
106
|
+
list-style-type: disc;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.ckeditor-wrapper .ck-content ul ul:not(.todo-list) {
|
|
110
|
+
list-style-type: circle;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ckeditor-wrapper .ck-content ul ul ul:not(.todo-list),
|
|
114
|
+
.ckeditor-wrapper .ck-content ul ul ul ul:not(.todo-list) {
|
|
115
|
+
list-style-type: square;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ckeditor-wrapper .ck-content ol:not(.todo-list) {
|
|
119
|
+
list-style-type: decimal;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ckeditor-wrapper .ck-content ol ol:not(.todo-list) {
|
|
123
|
+
list-style-type: lower-latin;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.ckeditor-wrapper .ck-content ol ol ol:not(.todo-list) {
|
|
127
|
+
list-style-type: lower-roman;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.ckeditor-wrapper .ck-content li {
|
|
131
|
+
margin: 0.25rem 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.ckeditor-wrapper .ck-content li > p {
|
|
135
|
+
margin: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ckeditor-wrapper .ck-content .todo-list {
|
|
139
|
+
margin: 0.7rem 0 1rem;
|
|
140
|
+
padding-inline-start: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.ckeditor-wrapper .ck-content blockquote {
|
|
144
|
+
border-left: 4px solid color-mix(in oklch, var(--accent), black 8%);
|
|
145
|
+
border-radius: 0.7rem;
|
|
146
|
+
background-color: color-mix(in oklch, var(--accent), white 90%);
|
|
147
|
+
margin: 1rem 0;
|
|
148
|
+
padding: 0.75rem 0.95rem;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.ckeditor-wrapper .ck-content figure.table {
|
|
152
|
+
margin: 1rem 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.ckeditor-wrapper .ckeditor-meta {
|
|
156
|
+
color: var(--muted-foreground);
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-wrap: wrap;
|
|
159
|
+
font-size: 0.75rem;
|
|
160
|
+
font-weight: 500;
|
|
161
|
+
gap: 0.25rem 0.9rem;
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
margin-top: 0.5rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.ckeditor-wrapper .ckeditor-meta > span {
|
|
167
|
+
white-space: nowrap;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.ckeditor-wrapper.ckeditor-invalid .ck.ck-toolbar,
|
|
171
|
+
.ckeditor-wrapper.ckeditor-invalid .ck.ck-editor__main > .ck-editor__editable,
|
|
172
|
+
.ckeditor-wrapper.ckeditor-invalid
|
|
173
|
+
.ck.ck-editor__main
|
|
174
|
+
> .ck-editor__editable:not(.ck-focused):hover {
|
|
175
|
+
border-color: var(--error);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.ckeditor-wrapper.ckeditor-invalid .ck.ck-editor__main > .ck-editor__editable.ck-focused {
|
|
179
|
+
border-color: var(--error);
|
|
180
|
+
box-shadow: $editor-error-ring;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.ckeditor-wrapper.ckeditor-disabled .ck.ck-toolbar,
|
|
184
|
+
.ckeditor-wrapper.ckeditor-disabled .ck.ck-editor__main > .ck-editor__editable {
|
|
185
|
+
border-color: color-mix(in oklch, var(--border), black 5%);
|
|
186
|
+
background-color: color-mix(in oklch, var(--muted), white 15%);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.ckeditor-wrapper.ckeditor-disabled .ck.ck-editor__main > .ck-editor__editable {
|
|
190
|
+
color: var(--muted-foreground);
|
|
191
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
.delete__confirm__dialog {
|
|
2
|
+
.p-confirm-dialog-message {
|
|
3
|
+
width: 100%;
|
|
4
|
+
overflow-wrap: break-word;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.detail-grid-border {
|
|
9
|
+
border: 1px solid #b0b0b0;
|
|
10
|
+
padding: 8px;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
margin: -1px -1px 0 0;
|
|
13
|
+
&.label {
|
|
14
|
+
text-align: right;
|
|
15
|
+
font-weight: bold;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.hide-disabled-times {
|
|
20
|
+
.react-datepicker__time-list-item--disabled {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// ===================================
|
|
26
|
+
// PRIME DATEINPUT (Calendar trigger button)
|
|
27
|
+
// ===================================
|
|
28
|
+
// El botón de calendario de PrimeReact viene con estilos blue por defecto.
|
|
29
|
+
// Aquí lo alineamos al branding del design system.
|
|
30
|
+
|
|
31
|
+
.date-input.p-calendar.p-calendar-w-btn {
|
|
32
|
+
.p-datepicker-trigger.p-button {
|
|
33
|
+
background-color: var(--primary);
|
|
34
|
+
border: 1px solid var(--primary);
|
|
35
|
+
color: var(--primary-foreground);
|
|
36
|
+
transition:
|
|
37
|
+
background-color 0.2s ease,
|
|
38
|
+
border-color 0.2s ease,
|
|
39
|
+
box-shadow 0.2s ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.p-datepicker-trigger.p-button:not(:disabled):hover {
|
|
43
|
+
background-color: color-mix(in oklch, var(--primary), black 10%);
|
|
44
|
+
border-color: color-mix(in oklch, var(--primary), black 10%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.p-datepicker-trigger.p-button:focus-visible {
|
|
48
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
|
|
49
|
+
outline: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.date-input.p-calendar.p-invalid .p-datepicker-trigger.p-button {
|
|
54
|
+
background-color: var(--error);
|
|
55
|
+
border-color: var(--error);
|
|
56
|
+
color: var(--error-foreground);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.date-input.p-calendar.p-invalid .p-datepicker-trigger.p-button:not(:disabled):hover {
|
|
60
|
+
background-color: color-mix(in oklch, var(--error), black 10%);
|
|
61
|
+
border-color: color-mix(in oklch, var(--error), black 10%);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.date-input.p-calendar.p-invalid .p-datepicker-trigger.p-button:focus-visible {
|
|
65
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--error) 35%, transparent);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.date-input.p-calendar .p-datepicker-trigger.p-button:disabled,
|
|
69
|
+
.date-input.p-calendar.p-disabled .p-datepicker-trigger.p-button {
|
|
70
|
+
background-color: color-mix(in oklch, var(--muted), black 5%);
|
|
71
|
+
border-color: color-mix(in oklch, var(--border), black 5%);
|
|
72
|
+
color: var(--muted-foreground);
|
|
73
|
+
}
|
|
File without changes
|
package/scss/index.scss
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@use "./table.scss";
|
|
2
|
+
@use "./date-picker.scss";
|
|
3
|
+
@use "./buttons.scss";
|
|
4
|
+
@use "./inputs.scss";
|
|
5
|
+
@use "./select.scss";
|
|
6
|
+
@use "./paginator.scss";
|
|
7
|
+
@use "./select-button.scss";
|
|
8
|
+
@use "./gallery.scss";
|
|
9
|
+
@use "./ckeditor.scss";
|
|
10
|
+
@use "./rich-text-preview.scss";
|
|
11
|
+
@use "./switch.scss";
|
package/scss/inputs.scss
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// ===================================
|
|
2
|
+
// PRIME INPUTS (text, textarea, number, dropdown, multiselect, calendar)
|
|
3
|
+
// ===================================
|
|
4
|
+
// Patrón de borde/focus alineado con Select:
|
|
5
|
+
// - borde base: --border
|
|
6
|
+
// - hover: mezcla de --primary
|
|
7
|
+
// - focus ring: mezcla de --primary
|
|
8
|
+
// - invalid: --error
|
|
9
|
+
// Todo queda conectado al branding global (globals.scss).
|
|
10
|
+
|
|
11
|
+
$input-border-hover: color-mix(in oklch, var(--primary), black 12%);
|
|
12
|
+
$input-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
|
|
13
|
+
$input-error-ring: 0 0 0 0.2rem color-mix(in srgb, var(--error) 35%, transparent);
|
|
14
|
+
|
|
15
|
+
.p-inputtext,
|
|
16
|
+
.p-dropdown,
|
|
17
|
+
.p-multiselect {
|
|
18
|
+
border-color: var(--border);
|
|
19
|
+
transition:
|
|
20
|
+
border-color 0.2s ease,
|
|
21
|
+
box-shadow 0.2s ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.p-inputnumber .p-inputtext {
|
|
25
|
+
border-color: var(--border);
|
|
26
|
+
transition:
|
|
27
|
+
border-color 0.2s ease,
|
|
28
|
+
box-shadow 0.2s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.p-inputtext:not(:disabled):hover,
|
|
32
|
+
.p-dropdown:not(.p-disabled):hover,
|
|
33
|
+
.p-multiselect:not(.p-disabled):hover,
|
|
34
|
+
.p-inputnumber:not(.p-disabled):hover .p-inputtext {
|
|
35
|
+
border-color: $input-border-hover;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.p-inputtext:enabled:focus,
|
|
39
|
+
.p-inputtext.p-focus,
|
|
40
|
+
.p-inputnumber .p-inputtext:enabled:focus,
|
|
41
|
+
.p-inputnumber.p-inputwrapper-focus .p-inputtext,
|
|
42
|
+
.p-dropdown.p-focus,
|
|
43
|
+
.p-multiselect.p-focus {
|
|
44
|
+
border-color: var(--primary);
|
|
45
|
+
box-shadow: $input-focus-ring;
|
|
46
|
+
outline: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.p-inputtext.p-invalid,
|
|
50
|
+
.p-dropdown.p-invalid,
|
|
51
|
+
.p-multiselect.p-invalid,
|
|
52
|
+
.p-inputnumber.p-invalid .p-inputtext,
|
|
53
|
+
.p-calendar.p-invalid .p-inputtext,
|
|
54
|
+
.p-inputtext.p-invalid:not(:disabled):hover,
|
|
55
|
+
.p-dropdown.p-invalid:not(.p-disabled):hover,
|
|
56
|
+
.p-multiselect.p-invalid:not(.p-disabled):hover,
|
|
57
|
+
.p-inputnumber.p-invalid:not(.p-disabled):hover .p-inputtext,
|
|
58
|
+
.p-calendar.p-invalid:not(.p-disabled):hover .p-inputtext {
|
|
59
|
+
border-color: var(--error);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.p-inputtext.p-invalid:enabled:focus,
|
|
63
|
+
.p-inputnumber.p-invalid .p-inputtext:enabled:focus,
|
|
64
|
+
.p-inputnumber.p-invalid.p-inputwrapper-focus .p-inputtext,
|
|
65
|
+
.p-calendar.p-invalid.p-inputwrapper-focus .p-inputtext,
|
|
66
|
+
.p-dropdown.p-invalid.p-focus,
|
|
67
|
+
.p-multiselect.p-invalid.p-focus {
|
|
68
|
+
border-color: var(--error);
|
|
69
|
+
box-shadow: $input-error-ring;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.p-inputtext:disabled,
|
|
73
|
+
.p-dropdown.p-disabled,
|
|
74
|
+
.p-multiselect.p-disabled,
|
|
75
|
+
.p-inputnumber.p-disabled .p-inputtext {
|
|
76
|
+
border-color: color-mix(in oklch, var(--border), black 5%);
|
|
77
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// ===================================
|
|
2
|
+
// PUBLIC PAGINATOR
|
|
3
|
+
// ===================================
|
|
4
|
+
// Estilo del paginador de PrimeReact para el listado publico
|
|
5
|
+
// de propiedades. Basado en tokens del design system.
|
|
6
|
+
|
|
7
|
+
.atlas-paginator.p-paginator {
|
|
8
|
+
background-color: transparent;
|
|
9
|
+
border: 0;
|
|
10
|
+
gap: 0.25rem;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.atlas-paginator .p-paginator-element {
|
|
15
|
+
align-items: center;
|
|
16
|
+
background-color: color-mix(in oklch, var(--card), var(--background) 24%);
|
|
17
|
+
border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
|
|
18
|
+
border-radius: 0.6rem;
|
|
19
|
+
color: color-mix(in oklch, var(--foreground), black 12%);
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
height: 2.2rem;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
min-width: 2.2rem;
|
|
24
|
+
transition:
|
|
25
|
+
background-color 0.2s ease,
|
|
26
|
+
border-color 0.2s ease,
|
|
27
|
+
box-shadow 0.2s ease,
|
|
28
|
+
color 0.2s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.atlas-paginator .p-paginator-element:not(.p-disabled):hover {
|
|
32
|
+
background-color: color-mix(in oklch, var(--primary), white 92%);
|
|
33
|
+
border-color: color-mix(in oklch, var(--primary), white 60%);
|
|
34
|
+
color: color-mix(in oklch, var(--primary), black 20%);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.atlas-paginator .p-paginator-element:focus-visible {
|
|
38
|
+
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 35%, transparent);
|
|
39
|
+
outline: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.atlas-paginator .p-paginator-pages .p-paginator-page.p-highlight {
|
|
43
|
+
background-color: var(--primary);
|
|
44
|
+
border-color: var(--primary);
|
|
45
|
+
color: var(--primary-foreground);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.atlas-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
|
|
49
|
+
background-color: color-mix(in oklch, var(--primary), black 10%);
|
|
50
|
+
border-color: color-mix(in oklch, var(--primary), black 10%);
|
|
51
|
+
color: var(--primary-foreground);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.atlas-paginator .p-paginator-element.p-disabled {
|
|
55
|
+
background-color: color-mix(in oklch, var(--muted), white 15%);
|
|
56
|
+
border-color: color-mix(in oklch, var(--border), black 4%);
|
|
57
|
+
color: var(--muted-foreground);
|
|
58
|
+
opacity: 1;
|
|
59
|
+
}
|