grav-svelte 0.0.87 → 0.0.89

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.
Files changed (13) hide show
  1. package/dist/CRUD/CrudFilters.css +25 -7
  2. package/dist/CRUD/CrudFilters.svelte +63 -93
  3. package/dist/CRUD/CrudFilters.svelte.d.ts +2 -0
  4. package/dist/CRUD/CrudTableButtons.svelte +1 -1
  5. package/dist/CRUD/CrudWrapper.svelte +7 -17
  6. package/dist/CRUD/PaginationCRUD.css +3 -3
  7. package/dist/CRUD/Tooltip.svelte +1 -1
  8. package/dist/CRUD/components/TableHeader.svelte +1 -1
  9. package/dist/CRUD/styles/CrudTable.css +19 -19
  10. package/dist/Inputs/InputFormBool.svelte +2 -2
  11. package/dist/Modals/Grav_Modal.css +1 -6
  12. package/dist/typography.css +7 -12
  13. package/package.json +1 -1
package/dist/CRUD/CrudFilters.css CHANGED
@@ -54,6 +54,13 @@
54
54
  justify-content: center;
55
55
  align-items: center;
56
56
  gap: 0.5rem;
57
+ margin-top: 0.5rem;
58
+ }
59
+
60
+ @media (min-width: 640px) {
61
+ .filters-actions {
62
+ margin-top: 0;
63
+ }
57
64
  }
58
65
 
59
66
  .filters-controls {
@@ -106,14 +113,13 @@
106
113
 
107
114
  .filter-group {
108
115
  display: inline-flex;
109
- gap: 0.2rem;
110
- padding: 0.5rem;
116
+ gap: 0.5rem;
111
117
  }
112
118
 
113
119
  @media (min-width: 640px) {
114
120
  .filter-group {
115
121
  padding: 0;
116
- gap: 0.2rem;
122
+ gap: 0.5rem;
117
123
  margin-right: 0.5rem;
118
124
  }
119
125
  }
@@ -121,27 +127,39 @@
121
127
  .filter-button {
122
128
  display: inline-flex;
123
129
  align-items: center;
130
+ justify-content: center;
124
131
  cursor: pointer;
125
132
  height: 2.5rem;
126
133
  font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
127
- font-size: var(--grav-crud-button-font-size, 0.875rem);
134
+ font-size: 1.1rem;
128
135
  font-weight: var(--grav-crud-button-font-weight, 500);
129
136
  line-height: var(--grav-crud-button-line-height, 1.5);
130
137
  border-width: var(--grav-crud-filter-border-width, 1.5px);
131
138
  border-style: solid;
132
139
  border-color: var(--grav-crud-color-neutral);
133
140
  color: var(--grav-crud-color-neutral);
134
- border-radius: var(--grav-crud-filter-border-radius, 0.5rem) 0 0 var(--grav-crud-filter-border-radius, 0.5rem);
135
- padding: 0.8rem;
141
+ border-radius: var(--grav-crud-filter-border-radius, 0.5rem);
142
+ padding: 0.75rem 1rem;
136
143
  }
137
144
 
138
145
  @media (min-width: 640px) {
139
146
  .filter-button {
140
147
  padding: 0.75rem 1rem;
141
- font-size: 0.875rem;
148
+ font-size: 1.2rem;
142
149
  }
143
150
  }
144
151
 
152
+ .filter-button-active {
153
+ background-color: var(--grav-crud-color-neutral);
154
+ color: var(--grav-crud-color-bg);
155
+ }
156
+
157
+ .filters-actions {
158
+ display: flex;
159
+ justify-content: right;
160
+ align-items: center;
161
+ }
162
+
145
163
  .filter-button-middle {
146
164
  border-radius: 0;
147
165
  }
package/dist/CRUD/CrudFilters.svelte CHANGED
@@ -24,6 +24,7 @@
24
24
  export let Filtros: FiltrosI[];
25
25
  export let showAddButton: boolean = true;
26
26
  export let showImportButton: boolean = true;
27
+ export let showSettingsButton: boolean = false;
27
28
  export let showMostrandoInput: boolean = true;
28
29
  export let Titulo_Crud: string;
29
30
 
@@ -176,113 +177,46 @@
176
177
  </button>
177
178
  </Tooltip>
178
179
  {/if}
179
- </div>
180
- <!-- Show Filters Button -->
181
- <div class="filter-group" role="group">
182
180
  {#if Filtros && Filtros.length > 0}
183
181
  {#if showFilters}
184
- <button
185
- type="button"
186
- on:click={() => (showFilters = !showFilters)}
187
- class="filter-button"
188
- >
189
- <svg
190
- xmlns="http://www.w3.org/2000/svg"
191
- width="16"
192
- height="16"
193
- viewBox="0 0 24 24"
194
- fill="none"
195
- stroke="currentColor"
196
- stroke-width="2"
197
- stroke-linecap="round"
198
- stroke-linejoin="round"
199
- class="mr-1"
182
+ <Tooltip text="Ver filtros">
183
+ <button
184
+ type="button"
185
+ on:click={() => (showFilters = !showFilters)}
186
+ class="filter-button filter-button-active"
200
187
  >
201
- <polygon
202
- points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
203
- ></polygon>
204
- </svg>
205
- {showFilters ? "▲" : "▼"}
206
- </button>
188
+ <i class="fa-solid fa-sliders"></i>
189
+ </button>
190
+ </Tooltip>
207
191
  {:else}
208
- <button
209
- type="button"
210
- on:click={() => (showFilters = !showFilters)}
211
- class="filter-button"
212
- >
213
- <svg
214
- xmlns="http://www.w3.org/2000/svg"
215
- width="16"
216
- height="16"
217
- viewBox="0 0 24 24"
218
- fill="none"
219
- stroke="currentColor"
220
- stroke-width="2"
221
- stroke-linecap="round"
222
- stroke-linejoin="round"
223
- class="mr-1"
192
+ <Tooltip text="Ver filtros">
193
+ <button
194
+ type="button"
195
+ on:click={() => (showFilters = !showFilters)}
196
+ class="filter-button"
224
197
  >
225
- <polygon
226
- points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
227
- ></polygon>
228
- </svg>
229
- {showFilters ? "▲" : "▼"}
230
- </button>
198
+ <i class="fa-solid fa-sliders"></i>
199
+ </button>
200
+ </Tooltip>
231
201
  {/if}
232
-
233
- <!-- Btn de aplicar filtro -->
234
- <Tooltip text="Aplicar filtro">
235
- <!-- svelte-ignore a11y_consider_explicit_label -->
236
- <button
237
- type="button"
238
- on:click={() => actualizarFiltro()}
239
- class="filter-button filter-button-middle"
240
- aria-label="Aplicar filtros"
241
- >
242
- <i class="fas fa-search"></i>
243
- </button>
244
- </Tooltip>
245
-
246
- <!-- Btn de limpiar filtros -->
247
- <Tooltip text="Borrar filtro">
248
- <!-- svelte-ignore a11y_consider_explicit_label -->
202
+ {/if}
203
+ {#if showSettingsButton}
204
+ <Tooltip text="Configuración">
249
205
  <button
250
206
  type="button"
251
- on:click={() => clearFilters()}
252
- class="filter-button filter-button-right"
207
+ on:click={() => dispatch("settings")}
208
+ class="filter-button"
253
209
  >
254
- <svg
255
- xmlns="http://www.w3.org/2000/svg"
256
- width="16"
257
- height="16"
258
- viewBox="0 0 24 24"
259
- fill="none"
260
- stroke="currentColor"
261
- stroke-width="2"
262
- stroke-linecap="round"
263
- stroke-linejoin="round"
264
- >
265
- <polyline points="3 6 5 6 21 6"></polyline>
266
- <path
267
- d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
268
- ></path>
269
- </svg>
210
+ <i class="fas fa-cog"></i>
270
211
  </button>
271
212
  </Tooltip>
272
213
  {/if}
273
214
  </div>
215
+ <!-- Show Filters Button -->
216
+ <div class="filter-group" role="group">
217
+ </div>
218
+
274
219
 
275
- <!-- Filtro 2 -->
276
- {#if showMostrandoInput}
277
- <div class="page-size-input">
278
- <InputFormText
279
- label="Mostrando:"
280
- bind:valueVar={localPageSizeStr}
281
- noMarginTop={true}
282
- />
283
- </div>
284
- {/if}
285
- <!-- /Filtro 2 -->
286
220
  </div>
287
221
  </div>
288
222
  <!-- Filtros Dynamic -->
@@ -352,6 +286,42 @@
352
286
  </div>
353
287
  {/if}
354
288
  {/each}
289
+ <!-- Filtro 2 -->
290
+ {#if showMostrandoInput}
291
+
292
+ <div class="filter-item ">
293
+ <InputFormText
294
+ label="Mostrando:"
295
+ bind:valueVar={localPageSizeStr}
296
+ />
297
+ </div>
298
+ {/if}
299
+ <!-- /Filtro 2 -->
300
+ </div>
301
+ <!-- Btn de aplicar filtro -->
302
+ <div class="filters-actions">
303
+ <!-- Btn de limpiar filtros -->
304
+ <Tooltip text="Borrar filtro">
305
+ <!-- svelte-ignore a11y_consider_explicit_label -->
306
+ <button
307
+ type="button"
308
+ on:click={() => clearFilters()}
309
+ class="filter-button"
310
+ >
311
+ Limpiar
312
+ </button>
313
+ </Tooltip>
314
+ <Tooltip text="Aplicar filtro">
315
+ <!-- svelte-ignore a11y_consider_explicit_label -->
316
+ <button
317
+ type="button"
318
+ on:click={() => actualizarFiltro()}
319
+ class="filter-button"
320
+ aria-label="Aplicar filtros"
321
+ >
322
+ Filtrar
323
+ </button>
324
+ </Tooltip>
355
325
  </div>
356
326
  {/if}
357
327
  </div>
package/dist/CRUD/CrudFilters.svelte.d.ts CHANGED
@@ -8,12 +8,14 @@ declare const __propDef: {
8
8
  Filtros: FiltrosI[];
9
9
  showAddButton?: boolean;
10
10
  showImportButton?: boolean;
11
+ showSettingsButton?: boolean;
11
12
  showMostrandoInput?: boolean;
12
13
  Titulo_Crud: string;
13
14
  };
14
15
  events: {
15
16
  add: CustomEvent<any>;
16
17
  import: CustomEvent<any>;
18
+ settings: CustomEvent<any>;
17
19
  filtrar: CustomEvent<any>;
18
20
  } & {
19
21
  [evt: string]: CustomEvent<any>;
package/dist/CRUD/CrudTableButtons.svelte CHANGED
@@ -49,7 +49,7 @@
49
49
  color: white;
50
50
  text-align: center;
51
51
  font-size: 0.75rem;
52
- background-color: var(--grav-crud-color-icon-hover);
52
+ background-color: var(--grav-crud-color-tooltip);
53
53
  border-radius: var(--grav-crud-tooltip-border-radius, 0.25rem);
54
54
  top: -1.8rem;
55
55
  right: -2.5rem;
package/dist/CRUD/CrudWrapper.svelte CHANGED
@@ -130,8 +130,10 @@
130
130
  on:filtrar={handleFiltroAplicado}
131
131
  on:add={handleAdd}
132
132
  on:import={handleImport}
133
+ on:settings={handleSettings}
133
134
  {showAddButton}
134
135
  {showImportButton}
136
+ {showSettingsButton}
135
137
  {showMostrandoInput}
136
138
  {Titulo_Crud}
137
139
  />
@@ -157,19 +159,8 @@
157
159
  />
158
160
  </div>
159
161
 
160
- {#if showSettingsButton || showExcelButton || showPdfButton}
162
+ {#if showExcelButton || showPdfButton}
161
163
  <div class="export-buttons">
162
- <div class="buttons-left">
163
- {#if showSettingsButton}
164
- <button
165
- type="button"
166
- on:click={handleSettings}
167
- class="export-button settings-button"
168
- >
169
- <i class="fas fa-cog"></i>
170
- </button>
171
- {/if}
172
- </div>
173
164
  <div class="buttons-right">
174
165
  {#if showExcelButton}
175
166
  <button
@@ -214,10 +205,9 @@
214
205
  display: flex;
215
206
  gap: 1rem;
216
207
  margin-top: 1rem;
217
- justify-content: space-between;
208
+ justify-content: flex-end;
218
209
  }
219
210
 
220
- .buttons-left,
221
211
  .buttons-right {
222
212
  display: flex;
223
213
  gap: 1rem;
@@ -229,15 +219,15 @@
229
219
  color: white;
230
220
  padding: 1rem;
231
221
  border-radius: 0.25rem;
232
- background-color: var(--grav-crud-color-neutral);
222
+ background-color: var(--grav-crud-color-bg);
233
223
  color: var(--grav-crud-color-button);
234
- border: 1px solid var(--grav-crud-color-neutral);
224
+ border: 1px solid var(--grav-crud-color-bg);
235
225
  }
236
226
 
237
227
  .export-button:hover {
238
228
  transition: all 0.2s ease;
239
229
  background-color: transparent;
240
- color: var(--grav-crud-color-neutral);
230
+ color: var(--grav-crud-color-bg);
241
231
  }
242
232
 
243
233
  .export-button i {
package/dist/CRUD/PaginationCRUD.css CHANGED
@@ -13,7 +13,7 @@
13
13
  border-radius: var(--grav-crud-button-border-radius, 0.5rem);
14
14
  border-width: var(--grav-crud-button-border-width, 1.5px);
15
15
  border-style: solid;
16
- font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
16
+ font-family: var(--grav-crud-button-font-family, var(--grav-font-family));
17
17
  font-size: var(--grav-crud-button-font-size, 0.875rem);
18
18
  font-weight: var(--grav-crud-button-font-weight, 500);
19
19
  line-height: var(--grav-crud-button-line-height, 1.5);
@@ -86,7 +86,7 @@
86
86
  .pagination-ellipsis {
87
87
  padding: 0 0.5rem;
88
88
  color: var(--grav-crud-color-neutral);
89
- font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
89
+ font-family: var(--grav-crud-button-font-family, var(--grav-font-family));
90
90
  font-size: var(--grav-crud-button-font-size, 0.875rem);
91
91
  }
92
92
 
@@ -98,7 +98,7 @@
98
98
  }
99
99
 
100
100
  .pagination-info {
101
- font-family: var(--grav-crud-cell-font-family, 'mundial', sans-serif);
101
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
102
102
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
103
103
  font-weight: var(--grav-crud-cell-font-weight, 400);
104
104
  line-height: var(--grav-crud-cell-line-height, 1.5);
package/dist/CRUD/Tooltip.svelte CHANGED
@@ -31,7 +31,7 @@
31
31
  padding: 0.25rem;
32
32
  color: white;
33
33
  font-size: 0.75rem;
34
- background-color: var(--grav-crud-color-icon-hover);
34
+ background-color: var(--grav-crud-color-tooltip);
35
35
  border-radius: var(--grav-crud-tooltip-border-radius, 0.25rem);
36
36
  top: -1.25rem;
37
37
  left: -1.5rem;
package/dist/CRUD/components/TableHeader.svelte CHANGED
@@ -40,7 +40,7 @@
40
40
  {#if expandEnabled}
41
41
  <th
42
42
  class="table-header-cell expand-header non-sortable {!dragEnabled
43
- ? 'header-sticky-intersection borderleft'
43
+ ? 'header-sticky-intersection '
44
44
  : ''}"
45
45
  >
46
46
  </th>
package/dist/CRUD/styles/CrudTable.css CHANGED
@@ -75,7 +75,7 @@
75
75
  text-align: center;
76
76
  padding-top: 0.25rem;
77
77
  padding-bottom: 0.25rem;
78
- font-family: var(--grav-crud-header-font-family, "mundial", sans-serif);
78
+ font-family: var(--grav-crud-header-font-family, var(--grav-font-family));
79
79
  font-size: var(--grav-crud-header-font-size, 0.75rem);
80
80
  font-weight: var(--grav-crud-header-font-weight, 400);
81
81
  line-height: var(--grav-crud-header-line-height, 1.5);
@@ -145,7 +145,7 @@
145
145
  }
146
146
 
147
147
  .table-row.selected {
148
- background-color: var(--grav-crud-color-drag);
148
+ background-color: var(--grav-crud-color-light);
149
149
  }
150
150
 
151
151
  .table-cell {
@@ -198,7 +198,7 @@
198
198
  padding-left: 0.25rem;
199
199
  white-space: normal;
200
200
  word-break: break-word;
201
- font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
201
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
202
202
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
203
203
  font-weight: var(--grav-crud-cell-font-weight, 400);
204
204
  line-height: var(--grav-crud-cell-line-height, 1.5);
@@ -222,7 +222,7 @@
222
222
  padding-bottom: 0.3rem;
223
223
  white-space: normal;
224
224
  word-break: break-word;
225
- font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
225
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
226
226
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
227
227
  font-weight: var(--grav-crud-cell-font-weight, 400);
228
228
  line-height: var(--grav-crud-cell-line-height, 1.5);
@@ -267,7 +267,7 @@
267
267
  .no-data {
268
268
  text-align: center;
269
269
  padding: 1rem 0;
270
- font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
270
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
271
271
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
272
272
  font-weight: var(--grav-crud-cell-font-weight, 400);
273
273
  line-height: var(--grav-crud-cell-line-height, 1.5);
@@ -338,7 +338,7 @@
338
338
  display: flex;
339
339
  align-items: center;
340
340
  justify-content: center;
341
- color: var(--grav-crud-color-icon);
341
+ color: var(--grav-crud-color-border);
342
342
  }
343
343
 
344
344
  .drag-handle-cell {
@@ -366,7 +366,7 @@
366
366
  display: flex;
367
367
  align-items: center;
368
368
  justify-content: center;
369
- color: var(--grav-crud-color-icon);
369
+ color: var(--grav-crud-color-border);
370
370
  transition: color 0.2s;
371
371
  padding: 0.25rem;
372
372
  }
@@ -378,7 +378,7 @@
378
378
  .draggable-row.dragging {
379
379
  opacity: 0.5;
380
380
  transform: scale(0.98);
381
- background-color: var(--grav-crud-color-drag);
381
+ background-color: var(--grav-crud-color-light);
382
382
  cursor: grabbing;
383
383
  }
384
384
 
@@ -387,9 +387,9 @@
387
387
  }
388
388
 
389
389
  .draggable-row.drag-over {
390
- background-color: var(--grav-crud-color-drag);
391
- border-top: 2px solid var(--grav-crud-color-drag);
392
- border-bottom: 2px solid var(--grav-crud-color-drag);
390
+ background-color: var(--grav-crud-color-light);
391
+ border-top: 2px solid var(--grav-crud-color-light);
392
+ border-bottom: 2px solid var(--grav-crud-color-light);
393
393
  }
394
394
 
395
395
  /* Editable cell styles */
@@ -413,9 +413,9 @@
413
413
  }
414
414
 
415
415
  .editable-checkbox.checked {
416
- background-color: var(--grav-crud-color-primary);
417
- color: var(--grav-crud-color-icon);
418
- border-color: var(--grav-crud-color-primary);
416
+ background-color: var(--grav-crud-color-neutral);
417
+ color: var(--grav-crud-color-bg);
418
+ border-color: var(--grav-crud-color-neutral);
419
419
  }
420
420
 
421
421
  .editable-input {
@@ -424,7 +424,7 @@
424
424
  border: 1.5px solid transparent;
425
425
  background: transparent;
426
426
  border-radius: 0.375rem;
427
- font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
427
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
428
428
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
429
429
  color: var(--grav-crud-color-neutral);
430
430
  transition: all 0.2s ease;
@@ -437,7 +437,7 @@
437
437
 
438
438
  .editable-input:focus {
439
439
  outline: none;
440
- border-color: var(--grav-crud-color-primary);
440
+ border-color: var(--grav-crud-color-neutral);
441
441
  background-color: var(--grav-crud-color-bg);
442
442
  }
443
443
 
@@ -460,7 +460,7 @@
460
460
  gap: 0.5rem;
461
461
  padding: 0.5rem 1rem;
462
462
  border-radius: 0.375rem;
463
- font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
463
+ font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
464
464
  font-size: var(--grav-crud-cell-font-size, 0.875rem);
465
465
  font-weight: 500;
466
466
  border: 1.5px solid transparent;
@@ -617,11 +617,11 @@
617
617
  align-items: center;
618
618
  justify-content: center;
619
619
  cursor: pointer;
620
- font-family: var(--grav-crud-header-font-family, "mundial", sans-serif);
620
+ font-family: var(--grav-crud-header-font-family, var(--grav-font-family));
621
621
  }
622
622
 
623
623
  .dual-text-button:hover {
624
- border-color: var(--grav-crud-color-primary);
624
+ border-color: var(--grav-crud-color-neutral);
625
625
  transform: translateY(-1px);
626
626
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
627
627
  }
package/dist/Inputs/InputFormBool.svelte CHANGED
@@ -56,8 +56,8 @@
56
56
  }
57
57
 
58
58
  .checkbox-button.checked {
59
- background-color: var(--grav-crud-color-primary);
60
- color: var(--grav-crud-color-icon);
59
+ background-color: var(--grav-crud-color-neutral);
60
+ color: var(--grav-crud-color-bg);
61
61
  }
62
62
 
63
63
  .label {
package/dist/Modals/Grav_Modal.css CHANGED
@@ -196,12 +196,7 @@
196
196
  --grav-crud-color-neutral: #000000; /* Black text for modal inputs */
197
197
  --grav-crud-color-light: #f5f5f5; /* Light gray for hover states */
198
198
  --grav-crud-color-border: #d1d5db; /* Gray borders */
199
- --grav-crud-color-selected: #e5e7eb; /* Light gray for selected states */
200
- --grav-crud-color-drag: #f9fafb; /* Very light gray for drag states */
201
- --grav-crud-color-icon: #6b7280; /* Gray icons */
202
- --grav-crud-color-icon-hover: #374151; /* Darker gray on hover */
203
- --grav-crud-color-icon-active: #111827; /* Dark gray when active */
204
- --grav-crud-color-primary: #000000; /* Black primary color */
199
+ --grav-crud-color-tooltip: #374151; /* Darker gray for tooltips */
205
200
  --grav-crud-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
206
201
  --grav-crud-input-border-width: 1px; /* Ensure border width is defined */
207
202
  }
package/dist/typography.css CHANGED
@@ -83,28 +83,23 @@
83
83
  --grav-crud-cell-border-width: var(--grav-border-width-normal);
84
84
 
85
85
  /* CRUD Color Variables */
86
- --grav-crud-color-bg: #ffffff2f; /* Texto principal en headers y celdas */
86
+ --grav-crud-color-bg: #ffffff; /* Texto principal en headers y celdas */
87
87
  --grav-crud-color-button: #fe6b91; /* Texto principal en headers y celdas */
88
- --grav-crud-color-neutral: #ffffff; /* Texto principal en headers y celdas */
88
+ --grav-crud-color-neutral: #6b7280; /* Texto principal en headers y celdas */
89
89
  --grav-crud-color-light: #f5f5f549; /* Fondos hover y estados */
90
- --grav-crud-color-border: #f4f4f4; /* Bordes, separadores y loading */
91
- --grav-crud-color-selected: #e8e8e8; /* Estados seleccionados */
92
- --grav-crud-color-drag: #f9fafb62; /* Estados de drag and drop */
93
- --grav-crud-color-icon: #ffffff; /* Iconos y elementos secundarios */
94
- --grav-crud-color-icon-hover: #000000; /* Iconos en hover */
95
- --grav-crud-color-icon-active: #000000; /* Iconos en estado activo */
96
- --grav-crud-color-primary: #000000; /* Iconos en estado activo */
97
- --grav-crud-box-shadow: 7.2px 7.2px 5px 0px rgba(0, 0, 0, 0.028);
90
+ --grav-crud-color-border: color-mix(in srgb, var(--grav-crud-color-neutral) 43%, transparent); /* Bordes, separadores y loading */
91
+ --grav-crud-color-tooltip: #313131; /* Color de fondo para tooltips y hover */
92
+ --grav-crud-box-shadow: 7.2px 7.2px 10px 0px rgba(23, 23, 23, 0.18);
98
93
 
99
94
  /* CRUD Scrollbar Variables */
100
95
  --grav-crud-scrollbar-width: 8px; /* Ancho del scrollbar */
101
96
  --grav-crud-scrollbar-track: rgba(0, 0, 0, 0.1); /* Color del fondo del scrollbar */
102
- --grav-crud-scrollbar-thumb: rgba(255, 255, 255, 0.3); /* Color de la barra deslizante */
97
+ --grav-crud-scrollbar-thumb: rgba(0, 0, 0, 0.3); /* Color de la barra deslizante */
103
98
  --grav-crud-scrollbar-thumb-hover: rgba(255, 255, 255, 0.5); /* Color de la barra en hover */
104
99
  }
105
100
 
106
101
  /* Example usage for users to customize in their app.css:
107
- :root {
102
+ :root {
108
103
  --grav-font-family: 'Roboto', sans-serif;
109
104
  --grav-font-family-heading: 'Montserrat', sans-serif;
110
105
  --grav-crud-title-font-size: 2rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "grav-svelte",
3
- "version": "0.0.87",
3
+ "version": "0.0.89",
4
4
  "description": "A collection of Svelte components",
5
5
  "license": "MIT",
6
6
  "scripts": {