@inchurch/matcha-theme 21.4.0 → 22.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.
Files changed (94) hide show
  1. package/abstracts/_colors.scss +236 -236
  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 +446 -445
  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 +383 -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-contact.scss +35 -0
  25. package/components/matcha-crop.scss +406 -406
  26. package/components/matcha-date.scss +81 -81
  27. package/components/matcha-divider.scss +100 -100
  28. package/components/matcha-draggable.scss +23 -23
  29. package/components/matcha-drawer.scss +376 -376
  30. package/components/matcha-drop-image.scss +14 -14
  31. package/components/matcha-drop-list.scss +430 -430
  32. package/components/matcha-emoji.scss +69 -69
  33. package/components/matcha-empty-state.scss +230 -230
  34. package/components/matcha-file-uploader.scss +471 -471
  35. package/components/matcha-flag.scss +103 -103
  36. package/components/matcha-footer.scss +91 -91
  37. package/components/matcha-form-field.scss +606 -606
  38. package/components/matcha-form-section.scss +100 -100
  39. package/components/matcha-header.scss +135 -135
  40. package/components/matcha-highlight.scss +164 -164
  41. package/components/matcha-hint-text.scss +90 -90
  42. package/components/matcha-horizontal-tree.scss +316 -316
  43. package/components/matcha-icon.scss +98 -98
  44. package/components/matcha-image.scss +61 -61
  45. package/components/matcha-list.scss +211 -211
  46. package/components/matcha-menu.scss +99 -99
  47. package/components/matcha-modal.scss +210 -210
  48. package/components/matcha-nav.scss +581 -581
  49. package/components/matcha-notification.scss +413 -413
  50. package/components/matcha-option.scss +170 -170
  51. package/components/matcha-page-builder.scss +4196 -4196
  52. package/components/matcha-paginator.scss +689 -689
  53. package/components/matcha-panel.scss +194 -194
  54. package/components/matcha-profile-card.scss +50 -50
  55. package/components/matcha-progress-bar.scss +313 -313
  56. package/components/matcha-radio.scss +320 -320
  57. package/components/matcha-ripple.scss +7 -7
  58. package/components/matcha-scrollbar.scss +33 -33
  59. package/components/matcha-scrollbox-shadow.scss +120 -120
  60. package/components/matcha-section.scss +102 -102
  61. package/components/matcha-select-multiple.scss +56 -56
  62. package/components/matcha-select.scss +667 -667
  63. package/components/matcha-skeleton.scss +155 -155
  64. package/components/matcha-slide-toggle.scss +369 -369
  65. package/components/matcha-slider.scss +285 -285
  66. package/components/matcha-snack-bar.scss +259 -259
  67. package/components/matcha-spin.scss +164 -164
  68. package/components/matcha-spinner.scss +97 -97
  69. package/components/matcha-status-pill.scss +38 -18
  70. package/components/matcha-stepper.scss +376 -376
  71. package/components/matcha-table-cell.scss +49 -41
  72. package/components/matcha-table.scss +579 -579
  73. package/components/matcha-tabs.scss +600 -600
  74. package/components/matcha-text-editor.scss +105 -105
  75. package/components/matcha-time.scss +33 -33
  76. package/components/matcha-timepicker.scss +13 -13
  77. package/components/matcha-toolbar.scss +359 -359
  78. package/components/matcha-tooltip.scss +224 -224
  79. package/components/matcha-tree-view.scss +257 -257
  80. package/layout/matcha-page-layout.scss +778 -778
  81. package/main.scss +331 -329
  82. package/package.json +1 -1
  83. package/tokens/_animations-tokens.scss +37 -37
  84. package/tokens/_breakpoints-tokens.scss +35 -35
  85. package/tokens/_color-tokens.scss +274 -274
  86. package/tokens/_elevation-tokens.scss +33 -33
  87. package/tokens/_emit-tokens.scss +324 -324
  88. package/tokens/_material-palette.scss +1149 -1149
  89. package/tokens/_primitives.scss +98 -98
  90. package/tokens/_semantic-aliases.scss +120 -120
  91. package/tokens/_spacing-tokens.scss +94 -94
  92. package/tokens/_static-tokens.scss +137 -137
  93. package/tokens/_typography-tokens.scss +65 -65
  94. package/vendors/charts.scss +90 -90
package/components/matcha-panel.scss CHANGED
@@ -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
+ }
package/components/matcha-profile-card.scss CHANGED
@@ -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
+ }