matcha-theme 20.146.0 → 20.149.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.
@@ -1,8 +1,6 @@
1
1
  @mixin _matcha-table-theme-container-shadow-property($theme) {
2
- $background: map-get($theme, background);
3
-
4
2
  box-shadow:
5
- 0px -16px 0px 0px inset map-get($background, card),
3
+ 0px -16px 0px 0px inset getSurface($theme),
6
4
  20px 0 16px -24px inset #000000,
7
5
  -20px 0 16px -24px inset #000000,
8
6
  0px 2px 2px 0px #00000009,
@@ -11,32 +9,30 @@
11
9
  }
12
10
 
13
11
  @mixin _matcha-table-theme-shadow-property($theme) {
14
- $background: map-get($theme, background);
15
-
16
- background: map-get($background, card);
12
+ background: getSurface($theme);
17
13
  background: linear-gradient(
18
14
  90deg,
19
- map-get($background, card) 0px,
20
- map-get($background, card) 0px,
21
- rgba(255, 255, 255, 0) calc(0% + 40px),
22
- rgba(255, 255, 255, 0) calc(100% - 40px),
23
- map-get($background, card) calc(100% - 0px)
15
+ getSurface($theme) 0px,
16
+ getSurface($theme) 10px,
17
+ rgba(255, 255, 255, 0) calc(0% + 110px),
18
+ rgba(255, 255, 255, 0) calc(100% - 110px),
19
+ getSurface($theme) calc(100% - 10px)
24
20
  );
25
21
  background: -moz-linear-gradient(
26
22
  90deg,
27
- map-get($background, card) 0px,
28
- map-get($background, card) 0px,
29
- rgba(255, 255, 255, 0) calc(0% + 40px),
30
- rgba(255, 255, 255, 0) calc(100% - 40px),
31
- map-get($background, card) calc(100% - 0px)
23
+ getSurface($theme) 0px,
24
+ getSurface($theme) 10px,
25
+ rgba(255, 255, 255, 0) calc(0% + 110px),
26
+ rgba(255, 255, 255, 0) calc(100% - 110px),
27
+ getSurface($theme) calc(100% - 10px)
32
28
  );
33
29
  background: -webkit-linear-gradient(
34
30
  0deg,
35
- map-get($background, card) 0px,
36
- map-get($background, card) 0px,
37
- rgba(255, 255, 255, 0) calc(0% + 40px),
38
- rgba(255, 255, 255, 0) calc(100% - 40px),
39
- map-get($background, card) calc(100% - 0px)
31
+ getSurface($theme) 0px,
32
+ getSurface($theme) 10px,
33
+ rgba(255, 255, 255, 0) calc(0% + 110px),
34
+ rgba(255, 255, 255, 0) calc(100% - 110px),
35
+ getSurface($theme) calc(100% - 10px)
40
36
  );
41
37
  }
42
38
 
@@ -136,9 +132,6 @@
136
132
  padding-left: 24px;
137
133
  }
138
134
 
139
- &:last-child {
140
- }
141
-
142
135
  .clickable {
143
136
  cursor: pointer;
144
137
  }
@@ -276,4 +269,491 @@
276
269
  }
277
270
  }
278
271
  }
272
+
273
+ //---------------------------------------------------------------------------
274
+ // ESTILOS PARA O COMPONENTE MATCHA-TABLE
275
+ //---------------------------------------------------------------------------
276
+ // Estilos para tabelas nativas com a classe matcha-table
277
+
278
+ .matcha-table {
279
+ display: flex;
280
+ flex-direction: column;
281
+ width: 100%;
282
+ gap: 16px;
283
+ border-collapse: collapse;
284
+ border-spacing: 0;
285
+ }
286
+
287
+ // Vai direto na tag body
288
+ body.is-mobile {
289
+ .matcha-table {
290
+ .matcha-table-container-shadow {
291
+ overflow: auto;
292
+ @include _matcha-table-theme-container-shadow-property($theme);
293
+ table.matcha-table-content {
294
+ tbody {
295
+ @include _matcha-table-theme-shadow-property($theme);
296
+ }
297
+ }
298
+ }
299
+ }
300
+ }
301
+
302
+ // Estrutura
303
+ // matcha-table
304
+ // matcha-table-container
305
+ // matcha-table-container-shadow
306
+ // table.matcha-table-content
307
+ // thead
308
+ // tbody
309
+
310
+ --table-row-height: 80px;
311
+ --table-shadow-alpha: rgba(0, 0, 0, 0.05);
312
+
313
+ .matcha-table {
314
+ .matcha-table-container-shadow {
315
+ overflow: auto;
316
+ background: getSurface($theme);
317
+ border-radius: 8px;
318
+ box-shadow:
319
+ 0px 2px 2px 0px #00000009,
320
+ 0px 2px 2px 0px #00000009,
321
+ 0px 2px 2px 0px #00000009;
322
+ @include _matcha-table-theme-container-shadow-property($theme);
323
+
324
+ table.matcha-table-content {
325
+ width: 100%;
326
+ border-collapse: collapse;
327
+ border-spacing: 0;
328
+ @include _matcha-table-theme-shadow-property($theme);
329
+ thead {
330
+ th {
331
+ height: var(--table-row-height);
332
+ color: getForeground($theme);
333
+ font-weight: 700;
334
+ font-size: 16px;
335
+ text-align: left;
336
+ padding-left: 24px;
337
+ padding-right: 16px;
338
+ border-bottom-width: 0px;
339
+ }
340
+ }
341
+
342
+ tbody {
343
+ tr {
344
+ height: var(--table-row-height);
345
+ // &:nth-child(even){background: map-get($background, card);}
346
+ // &:nth-child(odd) {
347
+ // background: getBackgroundAlpha($theme);
348
+ // }
349
+
350
+
351
+
352
+ td{
353
+ color: getBlueGrey($theme);
354
+ font-size: 16px;
355
+ padding-left: 8px;
356
+ padding-right: 8px;
357
+ white-space: nowrap;
358
+ overflow: hidden;
359
+ text-overflow: ellipsis;
360
+ text-align: start;
361
+ border-bottom-width: 0px;
362
+ touch-action: unset !important;
363
+ min-width:120px;
364
+
365
+ &:first-child {
366
+ padding-left: 24px;
367
+ }
368
+
369
+ }
370
+ }
371
+
372
+ // esse é um caso especifico para as tabelas que tem aninhamento de itens
373
+ tr {
374
+ &.equal {
375
+
376
+ td,
377
+ th {
378
+ &:first-child {
379
+ box-shadow: 4px 0 0 0 inset getBlue($theme), 10px 0 10px -10px getDisabled($theme);
380
+ }
381
+ }
382
+
383
+ &.child-item {
384
+
385
+ td,
386
+ th {
387
+ &:first-child {
388
+ box-shadow: 4px 0 0 0 inset getBlueAlpha($theme), 10px 0 10px -10px getDisabled($theme);
389
+ }
390
+ }
391
+ }
392
+ }
393
+
394
+ &.plus {
395
+
396
+ td,
397
+ th {
398
+ &:first-child {
399
+ box-shadow: 4px 0 0 0 inset getGreen($theme), 10px 0 10px -10px getDisabled($theme);
400
+ }
401
+ }
402
+
403
+ &.child-item {
404
+ td,
405
+ th {
406
+ &:first-child {
407
+ box-shadow: 4px 0 0 0 inset getGreenAlpha($theme), 10px 0 10px -10px getDisabled($theme);
408
+ }
409
+ }
410
+ }
411
+ }
412
+
413
+ &.minus {
414
+
415
+ td,
416
+ th {
417
+ &:first-child {
418
+ box-shadow: 4px 0 0 0 inset getRed($theme), 10px 0 10px -10px getDisabled($theme);
419
+ }
420
+ }
421
+
422
+ &.child-item {
423
+
424
+ td,
425
+ th {
426
+ &:first-child {
427
+ box-shadow: 4px 0 0 0 inset getRedAlpha($theme), 10px 0 10px -10px getDisabled($theme);
428
+ }
429
+ }
430
+ }
431
+ }
432
+ }
433
+ }
434
+ }
435
+ }
436
+ }
437
+
438
+ // X-Large devices (big desktops, 1440px and up < 1920)
439
+ @media (min-width: 1440px) {
440
+ .matcha-table {
441
+ .matcha-table-container-shadow {
442
+ table.matcha-table-content {
443
+ .td {
444
+ font-size: 16px;
445
+ }
446
+ }
447
+ }
448
+ }
449
+ }
450
+
451
+ // Variações de tamanho/densidade
452
+ .matcha-table-compact {
453
+ .matcha-table-container-shadow {
454
+ table.matcha-table-content {
455
+ --table-row-height: 48px;
456
+
457
+ thead th {
458
+ height: var(--table-row-height);
459
+ padding-top: 8px;
460
+ padding-bottom: 8px;
461
+ font-size: 14px;
462
+ }
463
+
464
+ tbody tr {
465
+ height: var(--table-row-height);
466
+
467
+ td {
468
+ padding-top: 8px;
469
+ padding-bottom: 8px;
470
+ font-size: 14px;
471
+ }
472
+ }
473
+ }
474
+ }
475
+ }
476
+
477
+ .matcha-table-comfortable {
478
+ // Estilo padrão de densidade (já aplicado na estrutura base)
479
+ .matcha-table-container-shadow {
480
+ table.matcha-table-content {
481
+ --table-row-height: 64px;
482
+
483
+ thead th {
484
+ height: var(--table-row-height);
485
+ padding-top: 12px;
486
+ padding-bottom: 12px;
487
+ }
488
+
489
+ tbody tr {
490
+ height: var(--table-row-height);
491
+
492
+ td {
493
+ padding-top: 12px;
494
+ padding-bottom: 12px;
495
+ }
496
+ }
497
+ }
498
+ }
499
+ }
500
+
501
+ .matcha-table-spacious {
502
+ .matcha-table-container-shadow {
503
+ table.matcha-table-content {
504
+ --table-row-height: 96px;
505
+
506
+ thead th {
507
+ height: var(--table-row-height);
508
+ padding-top: 16px;
509
+ padding-bottom: 16px;
510
+ font-size: 18px;
511
+ }
512
+
513
+ tbody tr {
514
+ height: var(--table-row-height);
515
+
516
+ td {
517
+ padding-top: 16px;
518
+ padding-bottom: 16px;
519
+ font-size: 18px;
520
+ }
521
+ }
522
+ }
523
+ }
524
+ }
525
+
526
+ // Linhas zebras
527
+ .matcha-table-striped {
528
+ .matcha-table-container-shadow {
529
+ table.matcha-table-content {
530
+ tbody tr {
531
+ &:nth-child(odd) {
532
+ background: var(--table-shadow-alpha);
533
+ }
534
+
535
+ &:nth-child(even) {
536
+ background: transparent;
537
+ }
538
+ }
539
+ }
540
+ }
541
+ }
542
+
543
+ // Hover nas linhas
544
+ .matcha-table-hover {
545
+ .matcha-table-container-shadow {
546
+ table.matcha-table-content {
547
+ tbody tr {
548
+ transition: background-color 0.2s ease;
549
+
550
+ &:hover {
551
+ background: getPrimaryAlpha($theme) !important;
552
+ cursor: pointer;
553
+ }
554
+ }
555
+ }
556
+ }
557
+ }
558
+
559
+ // Bordas visíveis
560
+ .matcha-table-bordered {
561
+ .matcha-table-container-shadow {
562
+ table.matcha-table-content {
563
+ border: 1px solid getDisabled($theme);
564
+
565
+ thead th {
566
+ border-bottom: 1px solid getDisabled($theme);
567
+ border-right: 1px solid getDisabled($theme);
568
+
569
+ &:last-child {
570
+ border-right: none;
571
+ }
572
+ }
573
+
574
+ tbody tr {
575
+ td {
576
+ border-bottom: 1px solid getDisabled($theme);
577
+ border-right: 1px solid getDisabled($theme);
578
+
579
+ &:last-child {
580
+ border-right: none;
581
+ }
582
+ }
583
+
584
+ &:last-child td {
585
+ border-bottom: none;
586
+ }
587
+ }
588
+ }
589
+ }
590
+ }
591
+
592
+ // Cabeçalho fixo (sticky)
593
+ .matcha-table-sticky-header {
594
+ .matcha-table-container-shadow {
595
+ table.matcha-table-content {
596
+ thead {
597
+ position: sticky;
598
+ top: 0;
599
+ z-index: 10;
600
+ display: table-header-group;
601
+ }
602
+
603
+ thead th {
604
+ position: sticky;
605
+ top: 0;
606
+ z-index: 11;
607
+ box-shadow: 0 2px 4px var(--table-shadow-alpha);
608
+ }
609
+ }
610
+ }
611
+ }
612
+
613
+ // Colunas fixas (sticky columns) - primeira coluna fixa por padrão quando há scroll
614
+ .matcha-table-sticky-start {
615
+ .matcha-table-container-shadow {
616
+ table.matcha-table-content {
617
+ thead th:first-child,
618
+ tbody tr td:first-child {
619
+ position: sticky;
620
+ left: 0;
621
+ z-index: 5;
622
+ background: getSurface($theme);
623
+ }
624
+
625
+ thead th:first-child {
626
+ z-index: 15;
627
+ box-shadow: 10px 0 10px -10px getDisabled($theme);
628
+
629
+ }
630
+
631
+ tbody tr td:first-child {
632
+ box-shadow: 10px 0 10px -10px getDisabled($theme);
633
+
634
+ }
635
+ }
636
+ }
637
+
638
+ // Para múltiplas colunas fixas no início
639
+ &.matcha-table-sticky-start-2 {
640
+ .matcha-table-container-shadow {
641
+ table.matcha-table-content {
642
+ thead th:nth-child(1),
643
+ thead th:nth-child(2),
644
+ tbody tr td:nth-child(1),
645
+ tbody tr td:nth-child(2) {
646
+ position: sticky;
647
+ z-index: 5;
648
+ background: getSurface($theme);
649
+ }
650
+
651
+ thead th:nth-child(1),
652
+ tbody tr td:nth-child(1) {
653
+ left: 0;
654
+ z-index: 15;
655
+ box-shadow: 2px 0 4px var(--table-shadow-alpha);
656
+ }
657
+
658
+ thead th:nth-child(2),
659
+ tbody tr td:nth-child(2) {
660
+ left: 200px; // Ajustar conforme largura da primeira coluna
661
+ z-index: 14;
662
+ box-shadow: 2px 0 4px var(--table-shadow-alpha);
663
+ }
664
+ }
665
+ }
666
+ }
667
+
668
+ &.matcha-table-sticky-start-3 {
669
+ .matcha-table-container-shadow {
670
+ table.matcha-table-content {
671
+ thead th:nth-child(1),
672
+ thead th:nth-child(2),
673
+ thead th:nth-child(3),
674
+ tbody tr td:nth-child(1),
675
+ tbody tr td:nth-child(2),
676
+ tbody tr td:nth-child(3) {
677
+ position: sticky;
678
+ z-index: 5;
679
+ background: getSurface($theme);
680
+ }
681
+
682
+ thead th:nth-child(1),
683
+ tbody tr td:nth-child(1) {
684
+ left: 0;
685
+ z-index: 17;
686
+ box-shadow: 2px 0 4px var(--table-shadow-alpha);
687
+ }
688
+
689
+ thead th:nth-child(2),
690
+ tbody tr td:nth-child(2) {
691
+ left: 200px;
692
+ z-index: 16;
693
+ box-shadow: 2px 0 4px var(--table-shadow-alpha);
694
+ }
695
+
696
+ thead th:nth-child(3),
697
+ tbody tr td:nth-child(3) {
698
+ left: 400px;
699
+ z-index: 15;
700
+ box-shadow: 2px 0 4px var(--table-shadow-alpha);
701
+ }
702
+ }
703
+ }
704
+ }
705
+ }
706
+
707
+ .matcha-table-sticky-end {
708
+ .matcha-table-container-shadow {
709
+ table.matcha-table-content {
710
+ thead th:last-child,
711
+ tbody tr td:last-child {
712
+ position: sticky;
713
+ right: 0;
714
+ z-index: 5;
715
+ background: getSurface($theme);
716
+ }
717
+
718
+ thead th:last-child {
719
+ z-index: 15;
720
+ box-shadow: -2px 0 4px var(--table-shadow-alpha);
721
+ }
722
+
723
+ tbody tr td:last-child {
724
+ box-shadow: -2px 0 2px var(--table-shadow-alpha);
725
+ }
726
+ }
727
+ }
728
+
729
+ // Para múltiplas colunas fixas no final
730
+ &.matcha-table-sticky-end-2 {
731
+ .matcha-table-container-shadow {
732
+ table.matcha-table-content {
733
+ thead th:nth-last-child(1),
734
+ thead th:nth-last-child(2),
735
+ tbody tr td:nth-last-child(1),
736
+ tbody tr td:nth-last-child(2) {
737
+ position: sticky;
738
+ z-index: 5;
739
+ background: getSurface($theme);
740
+ }
741
+
742
+ thead th:nth-last-child(1),
743
+ tbody tr td:nth-last-child(1) {
744
+ right: 0;
745
+ z-index: 15;
746
+ box-shadow: -2px 0 4px var(--table-shadow-alpha);
747
+ }
748
+
749
+ thead th:nth-last-child(2),
750
+ tbody tr td:nth-last-child(2) {
751
+ right: 200px; // Ajustar conforme largura da última coluna
752
+ z-index: 14;
753
+ box-shadow: -2px 0 4px var(--table-shadow-alpha);
754
+ }
755
+ }
756
+ }
757
+ }
758
+ }
279
759
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.146.0",
3
+ "version": "20.149.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {