@inchurch/matcha-theme 21.3.3 → 22.0.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.
Files changed (93) hide show
  1. package/abstracts/_colors.scss +236 -229
  2. package/abstracts/_elevation.scss +108 -108
  3. package/abstracts/_functions.scss +321 -321
  4. package/abstracts/_media-breakpoint.scss +26 -26
  5. package/abstracts/_theme-api.scss +219 -219
  6. package/abstracts/_typography.scss +128 -128
  7. package/base/_reset.scss +445 -432
  8. package/components/app-page-header.scss +260 -260
  9. package/components/matcha-accordion.scss +293 -293
  10. package/components/matcha-audio-player.scss +31 -31
  11. package/components/matcha-autocomplete.scss +145 -145
  12. package/components/matcha-avatar.scss +440 -301
  13. package/components/matcha-badge.scss +120 -120
  14. package/components/matcha-breadcrumb.scss +231 -231
  15. package/components/matcha-button-toggle.scss +384 -384
  16. package/components/matcha-buttons.scss +913 -913
  17. package/components/matcha-calendar.scss +218 -218
  18. package/components/matcha-cards.scss +230 -230
  19. package/components/matcha-chart-card.scss +53 -53
  20. package/components/matcha-checkbox.scss +255 -255
  21. package/components/matcha-chip.scss +292 -292
  22. package/components/matcha-color-pick.scss +34 -34
  23. package/components/matcha-command-palette.scss +316 -316
  24. package/components/matcha-crop.scss +406 -406
  25. package/components/matcha-date.scss +81 -81
  26. package/components/matcha-divider.scss +100 -100
  27. package/components/matcha-draggable.scss +23 -23
  28. package/components/matcha-drawer.scss +376 -376
  29. package/components/matcha-drop-image.scss +14 -14
  30. package/components/matcha-drop-list.scss +430 -430
  31. package/components/matcha-emoji.scss +69 -69
  32. package/components/matcha-empty-state.scss +230 -230
  33. package/components/matcha-file-uploader.scss +471 -471
  34. package/components/matcha-flag.scss +103 -103
  35. package/components/matcha-footer.scss +91 -91
  36. package/components/matcha-form-field.scss +606 -606
  37. package/components/matcha-form-section.scss +100 -100
  38. package/components/matcha-header.scss +135 -135
  39. package/components/matcha-highlight.scss +164 -164
  40. package/components/matcha-hint-text.scss +90 -90
  41. package/components/matcha-horizontal-tree.scss +316 -316
  42. package/components/matcha-icon.scss +98 -98
  43. package/components/matcha-image.scss +61 -61
  44. package/components/matcha-list.scss +211 -211
  45. package/components/matcha-menu.scss +99 -99
  46. package/components/matcha-modal.scss +210 -210
  47. package/components/matcha-nav.scss +581 -581
  48. package/components/matcha-notification.scss +413 -413
  49. package/components/matcha-option.scss +170 -170
  50. package/components/matcha-page-builder.scss +4196 -4196
  51. package/components/matcha-paginator.scss +689 -689
  52. package/components/matcha-panel.scss +194 -194
  53. package/components/matcha-profile-card.scss +50 -50
  54. package/components/matcha-progress-bar.scss +313 -313
  55. package/components/matcha-radio.scss +320 -320
  56. package/components/matcha-ripple.scss +7 -7
  57. package/components/matcha-scrollbar.scss +33 -33
  58. package/components/matcha-scrollbox-shadow.scss +120 -120
  59. package/components/matcha-section.scss +102 -102
  60. package/components/matcha-select-multiple.scss +56 -56
  61. package/components/matcha-select.scss +667 -667
  62. package/components/matcha-skeleton.scss +155 -155
  63. package/components/matcha-slide-toggle.scss +369 -369
  64. package/components/matcha-slider.scss +285 -285
  65. package/components/matcha-snack-bar.scss +259 -259
  66. package/components/matcha-spin.scss +164 -164
  67. package/components/matcha-spinner.scss +97 -97
  68. package/components/matcha-status-pill.scss +38 -18
  69. package/components/matcha-stepper.scss +376 -376
  70. package/components/matcha-table-cell.scss +74 -41
  71. package/components/matcha-table.scss +579 -578
  72. package/components/matcha-tabs.scss +600 -600
  73. package/components/matcha-text-editor.scss +105 -105
  74. package/components/matcha-time.scss +33 -33
  75. package/components/matcha-timepicker.scss +13 -13
  76. package/components/matcha-toolbar.scss +359 -359
  77. package/components/matcha-tooltip.scss +224 -224
  78. package/components/matcha-tree-view.scss +257 -212
  79. package/layout/matcha-page-layout.scss +778 -778
  80. package/main.scss +329 -329
  81. package/package.json +1 -1
  82. package/tokens/_animations-tokens.scss +37 -37
  83. package/tokens/_breakpoints-tokens.scss +35 -35
  84. package/tokens/_color-tokens.scss +274 -261
  85. package/tokens/_elevation-tokens.scss +33 -33
  86. package/tokens/_emit-tokens.scss +324 -324
  87. package/tokens/_material-palette.scss +1149 -1149
  88. package/tokens/_primitives.scss +98 -98
  89. package/tokens/_semantic-aliases.scss +120 -120
  90. package/tokens/_spacing-tokens.scss +94 -94
  91. package/tokens/_static-tokens.scss +137 -137
  92. package/tokens/_typography-tokens.scss +65 -65
  93. package/vendors/charts.scss +90 -90
package/components/matcha-skeleton.scss CHANGED
@@ -1,155 +1,155 @@
1
- @use "sass:map";
2
-
3
- // =============================================================================
4
- // matcha-skeleton.scss — Skeleton loading placeholder
5
- // Aligned with Figma matcha/skeleton: 6 tipos (Linha/Círculo/Retângulo/Card/Perfil/Tabela)
6
- // =============================================================================
7
-
8
- // ── Structural (no theme dependency) ────────────────────────────────────────
9
-
10
- .matcha-skeleton-card {
11
- display: flex;
12
- flex-direction: column;
13
- padding: 0;
14
- border-radius: var(--matcha-radius-lg, 8px);
15
- user-select: none;
16
- overflow: hidden;
17
- }
18
-
19
- .matcha-skeleton-card__avatar {
20
- width: 48px;
21
- height: 48px;
22
- border-radius: var(--matcha-radius-pill, 9999px);
23
- margin: var(--matcha-space-200, 16px);
24
- }
25
-
26
- .matcha-skeleton-card__body {
27
- display: flex;
28
- flex-direction: column;
29
- padding: var(--matcha-space-200, 16px);
30
- gap: var(--matcha-space-200, 16px);
31
- }
32
-
33
- .matcha-skeleton-card__image {
34
- display: flex;
35
- flex-direction: column;
36
- padding: var(--matcha-space-200, 16px);
37
- }
38
-
39
- .matcha-skeleton-line {
40
- height: 16px;
41
- width: 100%;
42
- border-radius: var(--matcha-radius-pill, 9999px);
43
- }
44
-
45
- .matcha-skeleton-line--60 { width: 60%; }
46
- .matcha-skeleton-line--30 { width: 30%; }
47
-
48
- // ── Table skeleton ──────────────────────────────────────────────────────────
49
-
50
- .matcha-skeleton-table {
51
- display: flex;
52
- flex-direction: column;
53
- width: 100%;
54
- border-radius: var(--matcha-radius-lg, 8px);
55
- user-select: none;
56
- overflow: hidden;
57
- }
58
-
59
- .matcha-skeleton-table__header {
60
- display: flex;
61
- flex-direction: column;
62
- height: 64px;
63
- }
64
-
65
- .matcha-skeleton-table__row {
66
- display: grid;
67
- grid-template-columns: repeat(4, 1fr);
68
- align-items: center;
69
- gap: var(--matcha-space-200, 16px);
70
- height: 80px;
71
- padding: 0 var(--matcha-space-200, 16px);
72
- }
73
-
74
- .matcha-skeleton-table__cell {
75
- display: flex;
76
- flex-direction: row;
77
- align-items: center;
78
- gap: var(--matcha-space-200, 16px);
79
- width: 100%;
80
- }
81
-
82
- .matcha-skeleton-table__cell-avatar {
83
- width: 48px;
84
- height: 48px;
85
- min-width: 48px;
86
- min-height: 48px;
87
- border-radius: var(--matcha-radius-pill, 9999px);
88
- flex-shrink: 0;
89
- }
90
-
91
- .matcha-skeleton-table__cell-text {
92
- display: flex;
93
- flex-direction: column;
94
- justify-content: center;
95
- gap: var(--matcha-space-200, 16px);
96
- width: 100%;
97
- }
98
-
99
- // ── Theme mixin ─────────────────────────────────────────────────────────────
100
-
101
- @mixin matcha-skeleton-theme($theme) {
102
-
103
- .matcha-skeleton-line,
104
- .matcha-skeleton-card__avatar,
105
- .matcha-skeleton-card__image,
106
- .matcha-skeleton-table__header,
107
- .matcha-skeleton-table__cell-avatar {
108
- background: var(--matcha-color-surface-card-alpha);
109
- }
110
-
111
- .matcha-skeleton-table__row--alt {
112
- background: var(--matcha-color-surface-bg-alpha);
113
- }
114
-
115
- .skeleton-animated-background {
116
- background: linear-gradient(
117
- to right,
118
- var(--matcha-color-disabled-bg),
119
- var(--matcha-skeleton-shimmer),
120
- var(--matcha-color-disabled-bg)
121
- );
122
- background-size: 200% 100%;
123
- animation: matcha-skeleton-shimmer 1s linear infinite;
124
- }
125
-
126
- @keyframes matcha-skeleton-shimmer {
127
- 0% { background-position: 100% 0; }
128
- 100% { background-position: -100% 0; }
129
- }
130
-
131
- @media (prefers-reduced-motion: reduce) {
132
- .skeleton-animated-background {
133
- animation: none;
134
- background: var(--matcha-color-disabled-bg);
135
- }
136
- }
137
- }
138
-
139
- // ── Forced colors ──
140
- @media (forced-colors: active) {
141
- .skeleton,
142
- .skeleton-animated-background {
143
- background: GrayText !important;
144
- border: 1px solid CanvasText;
145
- }
146
- }
147
-
148
- // ── Print ──
149
- // Skeleton é placeholder de loading — não tem motivo de aparecer em papel.
150
- @media print {
151
- .skeleton,
152
- matcha-skeleton {
153
- display: none !important;
154
- }
155
- }
1
+ @use "sass:map";
2
+
3
+ // =============================================================================
4
+ // matcha-skeleton.scss — Skeleton loading placeholder
5
+ // Aligned with Figma matcha/skeleton: 6 tipos (Linha/Círculo/Retângulo/Card/Perfil/Tabela)
6
+ // =============================================================================
7
+
8
+ // ── Structural (no theme dependency) ────────────────────────────────────────
9
+
10
+ .matcha-skeleton-card {
11
+ display: flex;
12
+ flex-direction: column;
13
+ padding: 0;
14
+ border-radius: var(--matcha-radius-lg, 8px);
15
+ user-select: none;
16
+ overflow: hidden;
17
+ }
18
+
19
+ .matcha-skeleton-card__avatar {
20
+ width: 48px;
21
+ height: 48px;
22
+ border-radius: var(--matcha-radius-pill, 9999px);
23
+ margin: var(--matcha-space-200, 16px);
24
+ }
25
+
26
+ .matcha-skeleton-card__body {
27
+ display: flex;
28
+ flex-direction: column;
29
+ padding: var(--matcha-space-200, 16px);
30
+ gap: var(--matcha-space-200, 16px);
31
+ }
32
+
33
+ .matcha-skeleton-card__image {
34
+ display: flex;
35
+ flex-direction: column;
36
+ padding: var(--matcha-space-200, 16px);
37
+ }
38
+
39
+ .matcha-skeleton-line {
40
+ height: 16px;
41
+ width: 100%;
42
+ border-radius: var(--matcha-radius-pill, 9999px);
43
+ }
44
+
45
+ .matcha-skeleton-line--60 { width: 60%; }
46
+ .matcha-skeleton-line--30 { width: 30%; }
47
+
48
+ // ── Table skeleton ──────────────────────────────────────────────────────────
49
+
50
+ .matcha-skeleton-table {
51
+ display: flex;
52
+ flex-direction: column;
53
+ width: 100%;
54
+ border-radius: var(--matcha-radius-lg, 8px);
55
+ user-select: none;
56
+ overflow: hidden;
57
+ }
58
+
59
+ .matcha-skeleton-table__header {
60
+ display: flex;
61
+ flex-direction: column;
62
+ height: 64px;
63
+ }
64
+
65
+ .matcha-skeleton-table__row {
66
+ display: grid;
67
+ grid-template-columns: repeat(4, 1fr);
68
+ align-items: center;
69
+ gap: var(--matcha-space-200, 16px);
70
+ height: 80px;
71
+ padding: 0 var(--matcha-space-200, 16px);
72
+ }
73
+
74
+ .matcha-skeleton-table__cell {
75
+ display: flex;
76
+ flex-direction: row;
77
+ align-items: center;
78
+ gap: var(--matcha-space-200, 16px);
79
+ width: 100%;
80
+ }
81
+
82
+ .matcha-skeleton-table__cell-avatar {
83
+ width: 48px;
84
+ height: 48px;
85
+ min-width: 48px;
86
+ min-height: 48px;
87
+ border-radius: var(--matcha-radius-pill, 9999px);
88
+ flex-shrink: 0;
89
+ }
90
+
91
+ .matcha-skeleton-table__cell-text {
92
+ display: flex;
93
+ flex-direction: column;
94
+ justify-content: center;
95
+ gap: var(--matcha-space-200, 16px);
96
+ width: 100%;
97
+ }
98
+
99
+ // ── Theme mixin ─────────────────────────────────────────────────────────────
100
+
101
+ @mixin matcha-skeleton-theme($theme) {
102
+
103
+ .matcha-skeleton-line,
104
+ .matcha-skeleton-card__avatar,
105
+ .matcha-skeleton-card__image,
106
+ .matcha-skeleton-table__header,
107
+ .matcha-skeleton-table__cell-avatar {
108
+ background: var(--matcha-color-surface-card-alpha);
109
+ }
110
+
111
+ .matcha-skeleton-table__row--alt {
112
+ background: var(--matcha-color-surface-bg-alpha);
113
+ }
114
+
115
+ .skeleton-animated-background {
116
+ background: linear-gradient(
117
+ to right,
118
+ var(--matcha-color-disabled-bg),
119
+ var(--matcha-skeleton-shimmer),
120
+ var(--matcha-color-disabled-bg)
121
+ );
122
+ background-size: 200% 100%;
123
+ animation: matcha-skeleton-shimmer 1s linear infinite;
124
+ }
125
+
126
+ @keyframes matcha-skeleton-shimmer {
127
+ 0% { background-position: 100% 0; }
128
+ 100% { background-position: -100% 0; }
129
+ }
130
+
131
+ @media (prefers-reduced-motion: reduce) {
132
+ .skeleton-animated-background {
133
+ animation: none;
134
+ background: var(--matcha-color-disabled-bg);
135
+ }
136
+ }
137
+ }
138
+
139
+ // ── Forced colors ──
140
+ @media (forced-colors: active) {
141
+ .skeleton,
142
+ .skeleton-animated-background {
143
+ background: GrayText !important;
144
+ border: 1px solid CanvasText;
145
+ }
146
+ }
147
+
148
+ // ── Print ──
149
+ // Skeleton é placeholder de loading — não tem motivo de aparecer em papel.
150
+ @media print {
151
+ .skeleton,
152
+ matcha-skeleton {
153
+ display: none !important;
154
+ }
155
+ }