@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.
- package/abstracts/_colors.scss +236 -229
- package/abstracts/_elevation.scss +108 -108
- package/abstracts/_functions.scss +321 -321
- package/abstracts/_media-breakpoint.scss +26 -26
- package/abstracts/_theme-api.scss +219 -219
- package/abstracts/_typography.scss +128 -128
- package/base/_reset.scss +445 -432
- package/components/app-page-header.scss +260 -260
- package/components/matcha-accordion.scss +293 -293
- package/components/matcha-audio-player.scss +31 -31
- package/components/matcha-autocomplete.scss +145 -145
- package/components/matcha-avatar.scss +440 -301
- package/components/matcha-badge.scss +120 -120
- package/components/matcha-breadcrumb.scss +231 -231
- package/components/matcha-button-toggle.scss +384 -384
- package/components/matcha-buttons.scss +913 -913
- package/components/matcha-calendar.scss +218 -218
- package/components/matcha-cards.scss +230 -230
- package/components/matcha-chart-card.scss +53 -53
- package/components/matcha-checkbox.scss +255 -255
- package/components/matcha-chip.scss +292 -292
- package/components/matcha-color-pick.scss +34 -34
- package/components/matcha-command-palette.scss +316 -316
- package/components/matcha-crop.scss +406 -406
- package/components/matcha-date.scss +81 -81
- package/components/matcha-divider.scss +100 -100
- package/components/matcha-draggable.scss +23 -23
- package/components/matcha-drawer.scss +376 -376
- package/components/matcha-drop-image.scss +14 -14
- package/components/matcha-drop-list.scss +430 -430
- package/components/matcha-emoji.scss +69 -69
- package/components/matcha-empty-state.scss +230 -230
- package/components/matcha-file-uploader.scss +471 -471
- package/components/matcha-flag.scss +103 -103
- package/components/matcha-footer.scss +91 -91
- package/components/matcha-form-field.scss +606 -606
- package/components/matcha-form-section.scss +100 -100
- package/components/matcha-header.scss +135 -135
- package/components/matcha-highlight.scss +164 -164
- package/components/matcha-hint-text.scss +90 -90
- package/components/matcha-horizontal-tree.scss +316 -316
- package/components/matcha-icon.scss +98 -98
- package/components/matcha-image.scss +61 -61
- package/components/matcha-list.scss +211 -211
- package/components/matcha-menu.scss +99 -99
- package/components/matcha-modal.scss +210 -210
- package/components/matcha-nav.scss +581 -581
- package/components/matcha-notification.scss +413 -413
- package/components/matcha-option.scss +170 -170
- package/components/matcha-page-builder.scss +4196 -4196
- package/components/matcha-paginator.scss +689 -689
- package/components/matcha-panel.scss +194 -194
- package/components/matcha-profile-card.scss +50 -50
- package/components/matcha-progress-bar.scss +313 -313
- package/components/matcha-radio.scss +320 -320
- package/components/matcha-ripple.scss +7 -7
- package/components/matcha-scrollbar.scss +33 -33
- package/components/matcha-scrollbox-shadow.scss +120 -120
- package/components/matcha-section.scss +102 -102
- package/components/matcha-select-multiple.scss +56 -56
- package/components/matcha-select.scss +667 -667
- package/components/matcha-skeleton.scss +155 -155
- package/components/matcha-slide-toggle.scss +369 -369
- package/components/matcha-slider.scss +285 -285
- package/components/matcha-snack-bar.scss +259 -259
- package/components/matcha-spin.scss +164 -164
- package/components/matcha-spinner.scss +97 -97
- package/components/matcha-status-pill.scss +38 -18
- package/components/matcha-stepper.scss +376 -376
- package/components/matcha-table-cell.scss +74 -41
- package/components/matcha-table.scss +579 -578
- package/components/matcha-tabs.scss +600 -600
- package/components/matcha-text-editor.scss +105 -105
- package/components/matcha-time.scss +33 -33
- package/components/matcha-timepicker.scss +13 -13
- package/components/matcha-toolbar.scss +359 -359
- package/components/matcha-tooltip.scss +224 -224
- package/components/matcha-tree-view.scss +257 -212
- package/layout/matcha-page-layout.scss +778 -778
- package/main.scss +329 -329
- package/package.json +1 -1
- package/tokens/_animations-tokens.scss +37 -37
- package/tokens/_breakpoints-tokens.scss +35 -35
- package/tokens/_color-tokens.scss +274 -261
- package/tokens/_elevation-tokens.scss +33 -33
- package/tokens/_emit-tokens.scss +324 -324
- package/tokens/_material-palette.scss +1149 -1149
- package/tokens/_primitives.scss +98 -98
- package/tokens/_semantic-aliases.scss +120 -120
- package/tokens/_spacing-tokens.scss +94 -94
- package/tokens/_static-tokens.scss +137 -137
- package/tokens/_typography-tokens.scss +65 -65
- package/vendors/charts.scss +90 -90
|
@@ -1,194 +1,194 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
|
|
3
|
-
// Estrutura Overlay Local
|
|
4
|
-
.matcha-panel-overlay {
|
|
5
|
-
position: fixed;
|
|
6
|
-
inset: 0;
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
// Acima de modal (999) e overlay base (1000) — panel pode ser aberto dentro de modal
|
|
10
|
-
z-index: var(--matcha-z-popover-floating, 10001);
|
|
11
|
-
pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
|
|
12
|
-
display: block;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.matcha-panel-pane {
|
|
16
|
-
position: absolute;
|
|
17
|
-
display: block;
|
|
18
|
-
max-height: 100%;
|
|
19
|
-
pointer-events: auto; // Reativa cliques para o painel em si
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.matcha-panel {
|
|
24
|
-
// Figma matcha/panel (14276:67): radius xl, padding 8/0, max-height 280
|
|
25
|
-
border-radius: var(--matcha-radius-xl, 16px);
|
|
26
|
-
overflow-y: auto;
|
|
27
|
-
display: flex;
|
|
28
|
-
flex-direction: column;
|
|
29
|
-
max-height: var(--matcha-panel-max-height, 280px);
|
|
30
|
-
width: 100%;
|
|
31
|
-
padding: var(--matcha-space-100, 8px) 0;
|
|
32
|
-
|
|
33
|
-
// Animações (fade + scale leve, easing standard)
|
|
34
|
-
opacity: 0;
|
|
35
|
-
transform: scale(0.96) translateY(calc(-1 * var(--matcha-space-050, 4px)));
|
|
36
|
-
transition: opacity var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
|
|
37
|
-
transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
38
|
-
|
|
39
|
-
position: relative;
|
|
40
|
-
z-index: auto;
|
|
41
|
-
|
|
42
|
-
// Estados de abertura
|
|
43
|
-
&.matcha-panel-open {
|
|
44
|
-
opacity: 1;
|
|
45
|
-
transform: scale(1) translateY(0);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// Posicionamento vertical
|
|
49
|
-
&.matcha-panel-top {
|
|
50
|
-
transform-origin: bottom center;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&.matcha-panel-bottom {
|
|
54
|
-
transform-origin: top center;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@media (prefers-reduced-motion: reduce) {
|
|
59
|
-
.matcha-panel {
|
|
60
|
-
transition: none;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// Conteúdo do painel
|
|
65
|
-
.matcha-panel-content {
|
|
66
|
-
overflow-y: auto;
|
|
67
|
-
flex: 1;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Painéis de menu nunca rolam na horizontal. Como .matcha-panel declara só
|
|
71
|
-
// `overflow-y: auto`, o `overflow-x` computa como `auto` (regra CSS: um eixo
|
|
72
|
-
// visible + o outro não-visible → o visible vira auto). Numa lista longa (scroll
|
|
73
|
-
// vertical) o scrollbar vertical reduz a largura útil e os itens em `nowrap`
|
|
74
|
-
// induzem um scrollbar horizontal fantasma. Fixar overflow-x hidden elimina a
|
|
75
|
-
// barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
|
|
76
|
-
// submenus são portados pro <body> (não são descendentes) — logo não são clipados;
|
|
77
|
-
// select/autocomplete/calendar ficam intactos.
|
|
78
|
-
.matcha-panel:has(> .matcha-menu-content) {
|
|
79
|
-
overflow-x: hidden;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
|
|
83
|
-
// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
|
|
84
|
-
// apenas de container de posicionamento — evita "duplicar" visual do cartão.
|
|
85
|
-
// IMPORTANTE: !important porque o mixin matcha-panel-theme pode ser aplicado com
|
|
86
|
-
// wrapper de tema (ex: body.theme-dark .matcha-panel), elevando especificidade pra
|
|
87
|
-
// 0-2-0, empatando com :has() e vencendo por ordem no cascade.
|
|
88
|
-
.matcha-panel:has(.matcha-calendar),
|
|
89
|
-
.matcha-panel:has(matcha-time-panel),
|
|
90
|
-
.matcha-panel:has(.matcha-time-panel) {
|
|
91
|
-
background: transparent !important;
|
|
92
|
-
box-shadow: none !important;
|
|
93
|
-
border: none !important;
|
|
94
|
-
border-radius: 0 !important;
|
|
95
|
-
padding: 0 !important;
|
|
96
|
-
max-height: none !important;
|
|
97
|
-
overflow: visible !important;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
|
|
101
|
-
// O panel com calendar vira um painel full-width grudado no rodapé da tela,
|
|
102
|
-
// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
|
|
103
|
-
@media (max-width: 639px) {
|
|
104
|
-
.matcha-panel-overlay:has(.matcha-calendar) {
|
|
105
|
-
pointer-events: auto !important; // precisa capturar o backdrop
|
|
106
|
-
background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
|
|
107
|
-
backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
|
|
108
|
-
animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.matcha-panel-pane:has(.matcha-calendar) {
|
|
112
|
-
position: fixed !important;
|
|
113
|
-
inset: auto 0 0 0 !important;
|
|
114
|
-
top: auto !important;
|
|
115
|
-
left: 0 !important;
|
|
116
|
-
right: 0 !important;
|
|
117
|
-
bottom: 0 !important;
|
|
118
|
-
width: 100% !important;
|
|
119
|
-
min-width: 0 !important;
|
|
120
|
-
transform: none !important;
|
|
121
|
-
max-height: 90vh;
|
|
122
|
-
animation: matcha-panel-sheet-up var(--matcha-duration-normal, 220ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// Cartão do calendar ocupa a largura toda, com radius só em cima
|
|
126
|
-
.matcha-panel:has(.matcha-calendar) .matcha-calendar {
|
|
127
|
-
width: 100%;
|
|
128
|
-
min-width: 0;
|
|
129
|
-
border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
|
|
130
|
-
padding: var(--matcha-space-250, 20px);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
// Dual-month cai pra empilhado em mobile
|
|
134
|
-
.matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual {
|
|
135
|
-
min-width: 0;
|
|
136
|
-
}
|
|
137
|
-
.matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual .matcha-calendar-months {
|
|
138
|
-
flex-direction: column;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
@keyframes matcha-panel-sheet-up {
|
|
143
|
-
from { transform: translateY(100%); }
|
|
144
|
-
to { transform: translateY(0); }
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
@keyframes matcha-panel-backdrop-fade {
|
|
148
|
-
from { opacity: 0; }
|
|
149
|
-
to { opacity: 1; }
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@mixin matcha-panel-theme($theme) {
|
|
153
|
-
|
|
154
|
-
.matcha-panel {
|
|
155
|
-
// Floating overlay (dropdown/popover) — surface-card-strong (pure white
|
|
156
|
-
// light, lifted dark). Inline cards usam soft default; panel flutua.
|
|
157
|
-
background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
|
|
158
|
-
color: var(--matcha-color-text-primary, var(--matcha-color-fg));
|
|
159
|
-
|
|
160
|
-
// Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
|
|
161
|
-
box-shadow: var(--matcha-shadow-3);
|
|
162
|
-
border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
|
|
163
|
-
|
|
164
|
-
&:focus-within {
|
|
165
|
-
box-shadow: var(--matcha-shadow-4);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
// Responsividade — em mobile, panel mais compacto
|
|
170
|
-
@media (max-width: 768px) {
|
|
171
|
-
.matcha-panel {
|
|
172
|
-
max-height: var(--matcha-space-1600, 192px);
|
|
173
|
-
min-width: var(--matcha-space-1200, 96px);
|
|
174
|
-
border-radius: var(--matcha-radius-lg, 12px);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// ── Forced colors ──
|
|
180
|
-
@media (forced-colors: active) {
|
|
181
|
-
.matcha-panel {
|
|
182
|
-
background: Canvas !important;
|
|
183
|
-
border: 1px solid CanvasText !important;
|
|
184
|
-
box-shadow: none !important;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
// ── Print ──
|
|
189
|
-
// Panels são floating/popover — somem em papel.
|
|
190
|
-
@media print {
|
|
191
|
-
.matcha-panel {
|
|
192
|
-
display: none !important;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
// Estrutura Overlay Local
|
|
4
|
+
.matcha-panel-overlay {
|
|
5
|
+
position: fixed;
|
|
6
|
+
inset: 0;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
// Acima de modal (999) e overlay base (1000) — panel pode ser aberto dentro de modal
|
|
10
|
+
z-index: var(--matcha-z-popover-floating, 10001);
|
|
11
|
+
pointer-events: none !important; // Permite clicar "através" do overlay (interação com inputs, scroll da página)
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.matcha-panel-pane {
|
|
16
|
+
position: absolute;
|
|
17
|
+
display: block;
|
|
18
|
+
max-height: 100%;
|
|
19
|
+
pointer-events: auto; // Reativa cliques para o painel em si
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.matcha-panel {
|
|
24
|
+
// Figma matcha/panel (14276:67): radius xl, padding 8/0, max-height 280
|
|
25
|
+
border-radius: var(--matcha-radius-xl, 16px);
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
max-height: var(--matcha-panel-max-height, 280px);
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: var(--matcha-space-100, 8px) 0;
|
|
32
|
+
|
|
33
|
+
// Animações (fade + scale leve, easing standard)
|
|
34
|
+
opacity: 0;
|
|
35
|
+
transform: scale(0.96) translateY(calc(-1 * var(--matcha-space-050, 4px)));
|
|
36
|
+
transition: opacity var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
|
|
37
|
+
transform var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
38
|
+
|
|
39
|
+
position: relative;
|
|
40
|
+
z-index: auto;
|
|
41
|
+
|
|
42
|
+
// Estados de abertura
|
|
43
|
+
&.matcha-panel-open {
|
|
44
|
+
opacity: 1;
|
|
45
|
+
transform: scale(1) translateY(0);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Posicionamento vertical
|
|
49
|
+
&.matcha-panel-top {
|
|
50
|
+
transform-origin: bottom center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.matcha-panel-bottom {
|
|
54
|
+
transform-origin: top center;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media (prefers-reduced-motion: reduce) {
|
|
59
|
+
.matcha-panel {
|
|
60
|
+
transition: none;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Conteúdo do painel
|
|
65
|
+
.matcha-panel-content {
|
|
66
|
+
overflow-y: auto;
|
|
67
|
+
flex: 1;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Painéis de menu nunca rolam na horizontal. Como .matcha-panel declara só
|
|
71
|
+
// `overflow-y: auto`, o `overflow-x` computa como `auto` (regra CSS: um eixo
|
|
72
|
+
// visible + o outro não-visible → o visible vira auto). Numa lista longa (scroll
|
|
73
|
+
// vertical) o scrollbar vertical reduz a largura útil e os itens em `nowrap`
|
|
74
|
+
// induzem um scrollbar horizontal fantasma. Fixar overflow-x hidden elimina a
|
|
75
|
+
// barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
|
|
76
|
+
// submenus são portados pro <body> (não são descendentes) — logo não são clipados;
|
|
77
|
+
// select/autocomplete/calendar ficam intactos.
|
|
78
|
+
.matcha-panel:has(> .matcha-menu-content) {
|
|
79
|
+
overflow-x: hidden;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Quando o painel envolve um componente que já carrega surface + shadow + radius próprios
|
|
83
|
+
// (ex: matcha-calendar, matcha-time-panel), o panel deve ser transparente e servir
|
|
84
|
+
// apenas de container de posicionamento — evita "duplicar" visual do cartão.
|
|
85
|
+
// IMPORTANTE: !important porque o mixin matcha-panel-theme pode ser aplicado com
|
|
86
|
+
// wrapper de tema (ex: body.theme-dark .matcha-panel), elevando especificidade pra
|
|
87
|
+
// 0-2-0, empatando com :has() e vencendo por ordem no cascade.
|
|
88
|
+
.matcha-panel:has(.matcha-calendar),
|
|
89
|
+
.matcha-panel:has(matcha-time-panel),
|
|
90
|
+
.matcha-panel:has(.matcha-time-panel) {
|
|
91
|
+
background: transparent !important;
|
|
92
|
+
box-shadow: none !important;
|
|
93
|
+
border: none !important;
|
|
94
|
+
border-radius: 0 !important;
|
|
95
|
+
padding: 0 !important;
|
|
96
|
+
max-height: none !important;
|
|
97
|
+
overflow: visible !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
|
|
101
|
+
// O panel com calendar vira um painel full-width grudado no rodapé da tela,
|
|
102
|
+
// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
|
|
103
|
+
@media (max-width: 639px) {
|
|
104
|
+
.matcha-panel-overlay:has(.matcha-calendar) {
|
|
105
|
+
pointer-events: auto !important; // precisa capturar o backdrop
|
|
106
|
+
background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
|
|
107
|
+
backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
|
|
108
|
+
animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.matcha-panel-pane:has(.matcha-calendar) {
|
|
112
|
+
position: fixed !important;
|
|
113
|
+
inset: auto 0 0 0 !important;
|
|
114
|
+
top: auto !important;
|
|
115
|
+
left: 0 !important;
|
|
116
|
+
right: 0 !important;
|
|
117
|
+
bottom: 0 !important;
|
|
118
|
+
width: 100% !important;
|
|
119
|
+
min-width: 0 !important;
|
|
120
|
+
transform: none !important;
|
|
121
|
+
max-height: 90vh;
|
|
122
|
+
animation: matcha-panel-sheet-up var(--matcha-duration-normal, 220ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Cartão do calendar ocupa a largura toda, com radius só em cima
|
|
126
|
+
.matcha-panel:has(.matcha-calendar) .matcha-calendar {
|
|
127
|
+
width: 100%;
|
|
128
|
+
min-width: 0;
|
|
129
|
+
border-radius: var(--matcha-radius-xl, 16px) var(--matcha-radius-xl, 16px) 0 0;
|
|
130
|
+
padding: var(--matcha-space-250, 20px);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Dual-month cai pra empilhado em mobile
|
|
134
|
+
.matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual {
|
|
135
|
+
min-width: 0;
|
|
136
|
+
}
|
|
137
|
+
.matcha-panel:has(.matcha-calendar) .matcha-calendar.is-dual .matcha-calendar-months {
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@keyframes matcha-panel-sheet-up {
|
|
143
|
+
from { transform: translateY(100%); }
|
|
144
|
+
to { transform: translateY(0); }
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@keyframes matcha-panel-backdrop-fade {
|
|
148
|
+
from { opacity: 0; }
|
|
149
|
+
to { opacity: 1; }
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@mixin matcha-panel-theme($theme) {
|
|
153
|
+
|
|
154
|
+
.matcha-panel {
|
|
155
|
+
// Floating overlay (dropdown/popover) — surface-card-strong (pure white
|
|
156
|
+
// light, lifted dark). Inline cards usam soft default; panel flutua.
|
|
157
|
+
background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card, var(--matcha-color-surface)));
|
|
158
|
+
color: var(--matcha-color-text-primary, var(--matcha-color-fg));
|
|
159
|
+
|
|
160
|
+
// Shadow level 3 (floating panels — Figma DSV3 elevation/level-3)
|
|
161
|
+
box-shadow: var(--matcha-shadow-3);
|
|
162
|
+
border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
|
|
163
|
+
|
|
164
|
+
&:focus-within {
|
|
165
|
+
box-shadow: var(--matcha-shadow-4);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// Responsividade — em mobile, panel mais compacto
|
|
170
|
+
@media (max-width: 768px) {
|
|
171
|
+
.matcha-panel {
|
|
172
|
+
max-height: var(--matcha-space-1600, 192px);
|
|
173
|
+
min-width: var(--matcha-space-1200, 96px);
|
|
174
|
+
border-radius: var(--matcha-radius-lg, 12px);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// ── Forced colors ──
|
|
180
|
+
@media (forced-colors: active) {
|
|
181
|
+
.matcha-panel {
|
|
182
|
+
background: Canvas !important;
|
|
183
|
+
border: 1px solid CanvasText !important;
|
|
184
|
+
box-shadow: none !important;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// ── Print ──
|
|
189
|
+
// Panels são floating/popover — somem em papel.
|
|
190
|
+
@media print {
|
|
191
|
+
.matcha-panel {
|
|
192
|
+
display: none !important;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
|
|
3
|
-
// =============================================================================
|
|
4
|
-
// matcha-profile-card.scss — Compact profile card (avatar + name + role)
|
|
5
|
-
// Aligned with Figma matcha/profile-card:
|
|
6
|
-
// Layout: avatar (40px) + text (name + role) — horizontal, pill radius
|
|
7
|
-
// Used in: headers, sidebars, user menus
|
|
8
|
-
// Angular: matcha-profile-card
|
|
9
|
-
// =============================================================================
|
|
10
|
-
|
|
11
|
-
@mixin matcha-profile-card-theme($theme) {
|
|
12
|
-
.matcha-profile-card {
|
|
13
|
-
color: var(--matcha-color-fg);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.matcha-profile-card__name {
|
|
17
|
-
color: var(--matcha-color-fg);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.matcha-profile-card__role {
|
|
21
|
-
color: var(--matcha-color-text-hint);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// ── Layout ──────────────────────────────────────────────────────────────────
|
|
26
|
-
|
|
27
|
-
.matcha-profile-card {
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
gap: var(--matcha-space-200, 16px);
|
|
31
|
-
padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
|
|
32
|
-
border-radius: var(--matcha-radius-pill, 9999px);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.matcha-profile-card__name {
|
|
36
|
-
font-family: var(--matcha-font-family);
|
|
37
|
-
font-size: var(--matcha-text-body-md, 14px);
|
|
38
|
-
font-weight: var(--matcha-weight-medium, 500);
|
|
39
|
-
line-height: var(--matcha-leading-body-md, 20px);
|
|
40
|
-
white-space: nowrap;
|
|
41
|
-
overflow: hidden;
|
|
42
|
-
text-overflow: ellipsis;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.matcha-profile-card__role {
|
|
46
|
-
font-family: var(--matcha-font-family);
|
|
47
|
-
font-size: var(--matcha-text-p-tiny, 11px);
|
|
48
|
-
line-height: var(--matcha-leading-p-tiny, 14px);
|
|
49
|
-
white-space: nowrap;
|
|
50
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// matcha-profile-card.scss — Compact profile card (avatar + name + role)
|
|
5
|
+
// Aligned with Figma matcha/profile-card:
|
|
6
|
+
// Layout: avatar (40px) + text (name + role) — horizontal, pill radius
|
|
7
|
+
// Used in: headers, sidebars, user menus
|
|
8
|
+
// Angular: matcha-profile-card
|
|
9
|
+
// =============================================================================
|
|
10
|
+
|
|
11
|
+
@mixin matcha-profile-card-theme($theme) {
|
|
12
|
+
.matcha-profile-card {
|
|
13
|
+
color: var(--matcha-color-fg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.matcha-profile-card__name {
|
|
17
|
+
color: var(--matcha-color-fg);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.matcha-profile-card__role {
|
|
21
|
+
color: var(--matcha-color-text-hint);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// ── Layout ──────────────────────────────────────────────────────────────────
|
|
26
|
+
|
|
27
|
+
.matcha-profile-card {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: var(--matcha-space-200, 16px);
|
|
31
|
+
padding: var(--matcha-space-100, 8px) var(--matcha-space-300, 24px) var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
|
|
32
|
+
border-radius: var(--matcha-radius-pill, 9999px);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.matcha-profile-card__name {
|
|
36
|
+
font-family: var(--matcha-font-family);
|
|
37
|
+
font-size: var(--matcha-text-body-md, 14px);
|
|
38
|
+
font-weight: var(--matcha-weight-medium, 500);
|
|
39
|
+
line-height: var(--matcha-leading-body-md, 20px);
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
text-overflow: ellipsis;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.matcha-profile-card__role {
|
|
46
|
+
font-family: var(--matcha-font-family);
|
|
47
|
+
font-size: var(--matcha-text-p-tiny, 11px);
|
|
48
|
+
line-height: var(--matcha-leading-p-tiny, 14px);
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
}
|