@inchurch/matcha-theme 20.276.0 → 20.277.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 (69) hide show
  1. package/abstracts/_functions.scss +0 -26
  2. package/abstracts/_theme-api.scss +230 -0
  3. package/components/app-page-header.scss +16 -17
  4. package/components/matcha-accordion.scss +5 -6
  5. package/components/matcha-audio-player.scss +1 -2
  6. package/components/matcha-autocomplete.scss +10 -11
  7. package/components/matcha-avatar.scss +3 -3
  8. package/components/matcha-badge.scss +11 -11
  9. package/components/matcha-breadcrumb.scss +6 -7
  10. package/components/matcha-button-toggle.scss +2 -2
  11. package/components/matcha-buttons.scss +34 -34
  12. package/components/matcha-calendar.scss +31 -35
  13. package/components/matcha-cards.scss +31 -32
  14. package/components/matcha-chart-card.scss +5 -12
  15. package/components/matcha-checkbox.scss +13 -13
  16. package/components/matcha-chip.scss +2 -2
  17. package/components/matcha-color-pick.scss +1 -2
  18. package/components/matcha-command-palette.scss +17 -18
  19. package/components/matcha-crop.scss +0 -1
  20. package/components/matcha-date.scss +3 -3
  21. package/components/matcha-draggable.scss +4 -5
  22. package/components/matcha-drawer.scss +18 -28
  23. package/components/matcha-drop-list.scss +51 -52
  24. package/components/matcha-emoji.scss +2 -2
  25. package/components/{matcha-uploader.scss → matcha-file-uploader.scss} +185 -116
  26. package/components/matcha-footer.scss +3 -4
  27. package/components/matcha-form-field.scss +3 -3
  28. package/components/matcha-form-section.scss +5 -6
  29. package/components/matcha-header.scss +3 -4
  30. package/components/matcha-hint-text.scss +4 -4
  31. package/components/matcha-horizontal-tree.scss +15 -16
  32. package/components/matcha-icon.scss +27 -27
  33. package/components/matcha-image.scss +2 -3
  34. package/components/matcha-list.scss +11 -12
  35. package/components/matcha-menu.scss +2 -2
  36. package/components/matcha-modal.scss +5 -6
  37. package/components/matcha-nav.scss +16 -16
  38. package/components/matcha-notification.scss +3 -4
  39. package/components/matcha-option.scss +19 -0
  40. package/components/matcha-page-builder.scss +16 -16
  41. package/components/matcha-paginator.scss +6 -7
  42. package/components/matcha-panel.scss +4 -5
  43. package/components/matcha-profile-card.scss +3 -3
  44. package/components/matcha-progress-bar.scss +1 -1
  45. package/components/matcha-radio.scss +6 -6
  46. package/components/matcha-scrollbar.scss +1 -2
  47. package/components/matcha-scrollbox-shadow.scss +35 -37
  48. package/components/matcha-section.scss +5 -9
  49. package/components/matcha-select-multiple.scss +56 -0
  50. package/components/matcha-select.scss +7 -7
  51. package/components/matcha-skeleton.scss +6 -7
  52. package/components/matcha-slide-toggle.scss +33 -299
  53. package/components/matcha-slider.scss +5 -5
  54. package/components/matcha-snack-bar.scss +17 -18
  55. package/components/matcha-spin.scss +12 -103
  56. package/components/matcha-spinner.scss +1 -1
  57. package/components/matcha-stepper.scss +15 -16
  58. package/components/matcha-table.scss +14 -15
  59. package/components/matcha-tabs.scss +22 -24
  60. package/components/matcha-text-editor.scss +78 -78
  61. package/components/matcha-time.scss +2 -2
  62. package/components/matcha-toolbar.scss +1 -1
  63. package/components/matcha-tooltip.scss +14 -12
  64. package/main.scss +7 -2
  65. package/package.json +1 -1
  66. package/tokens/_color-tokens.scss +0 -3
  67. package/tokens/_css-custom-properties.scss +233 -179
  68. package/tokens/_primitives.scss +82 -0
  69. package/tokens/_semantic-aliases.scss +120 -0
package/components/matcha-text-editor.scss CHANGED
@@ -2,94 +2,94 @@
2
2
  matcha-text-editor .sun-editor,
3
3
  matcha-text-editor .sun-editor-editable {
4
4
  // ── Backgrounds ──────────────────────────────────────────────────────
5
- --se-main-background-color: #{getBackground($theme)};
6
- --se-edit-background-color: #{getSurface($theme)};
7
- --se-edit-background-pre: #{getBackground($theme)};
8
- --se-modal-background-color: #{getSurface($theme)};
9
- --se-controller-background-color: #{getSurface($theme)};
10
- --se-code-view-background-color: #{getBackground($theme)};
11
- --se-code-view-line-background-color: #{getSurface($theme)};
12
- --se-markdown-view-background-color: #{getBackground($theme)};
13
- --se-markdown-view-line-background-color:#{getSurface($theme)};
14
- --se-table-picker-color: #{getSurface($theme)};
15
- --se-doc-background: #{getBackground($theme)};
5
+ --se-main-background-color: var(--matcha-color-bg);
6
+ --se-edit-background-color: var(--matcha-color-surface);
7
+ --se-edit-background-pre: var(--matcha-color-bg);
8
+ --se-modal-background-color: var(--matcha-color-surface);
9
+ --se-controller-background-color: var(--matcha-color-surface);
10
+ --se-code-view-background-color: var(--matcha-color-bg);
11
+ --se-code-view-line-background-color: var(--matcha-color-surface);
12
+ --se-markdown-view-background-color: var(--matcha-color-bg);
13
+ --se-markdown-view-line-background-color:var(--matcha-color-surface);
14
+ --se-table-picker-color: var(--matcha-color-surface);
15
+ --se-doc-background: var(--matcha-color-bg);
16
16
 
17
17
  // ── Text / foreground ─────────────────────────────────────────────
18
- --se-main-color: #{getForeground($theme)};
19
- --se-main-font-color: #{getForeground($theme)};
20
- --se-main-color-lighter: #{getForegroundAlpha($theme)};
21
- --se-edit-font-color: #{getForeground($theme)};
22
- --se-edit-font-pre: #{getForegroundAlpha($theme)};
23
- --se-edit-font-quote: #{getForegroundAlpha($theme)};
24
- --se-modal-color: #{getForeground($theme)};
25
- --se-controller-color: #{getForeground($theme)};
26
- --se-dropdown-font-color: #{getForeground($theme)};
27
- --se-statusbar-font-color: #{getForegroundAlpha($theme)};
28
- --se-code-view-color: #{getForeground($theme)};
29
- --se-code-view-line-color: #{getForegroundAlpha($theme)};
30
- --se-markdown-view-color: #{getForeground($theme)};
31
- --se-markdown-view-line-color:#{getForegroundAlpha($theme)};
32
- --se-caret-color: #{getForeground($theme)};
33
- --se-placeholder-color: #{getDisabled($theme)};
18
+ --se-main-color: var(--matcha-color-fg);
19
+ --se-main-font-color: var(--matcha-color-fg);
20
+ --se-main-color-lighter: var(--matcha-color-fg-alpha);
21
+ --se-edit-font-color: var(--matcha-color-fg);
22
+ --se-edit-font-pre: var(--matcha-color-fg-alpha);
23
+ --se-edit-font-quote: var(--matcha-color-fg-alpha);
24
+ --se-modal-color: var(--matcha-color-fg);
25
+ --se-controller-color: var(--matcha-color-fg);
26
+ --se-dropdown-font-color: var(--matcha-color-fg);
27
+ --se-statusbar-font-color: var(--matcha-color-fg-alpha);
28
+ --se-code-view-color: var(--matcha-color-fg);
29
+ --se-code-view-line-color: var(--matcha-color-fg-alpha);
30
+ --se-markdown-view-color: var(--matcha-color-fg);
31
+ --se-markdown-view-line-color:var(--matcha-color-fg-alpha);
32
+ --se-caret-color: var(--matcha-color-fg);
33
+ --se-placeholder-color: var(--matcha-color-disabled);
34
34
 
35
35
  // ── Borders / dividers ────────────────────────────────────────────
36
- --se-main-border-color: #{getDisabled($theme)};
37
- --se-main-divider-color: #{getDisabled($theme)};
38
- --se-main-outline-color: #{getDisabled($theme)};
39
- --se-main-out-color: #{getDisabled($theme)};
40
- --se-main-shadow-color: #{getDisabled($theme)};
41
- --se-modal-border-color: #{getDisabled($theme)};
42
- --se-controller-border-color: #{getDisabled($theme)};
43
- --se-input-btn-border-color: #{getDisabled($theme)};
44
- --se-edit-border-light: #{getDisabled($theme)};
45
- --se-edit-border-dark: #{getDisabled($theme)};
46
- --se-edit-border-dark-n1: #{getDisabled($theme)};
47
- --se-edit-border-dark-n2: #{getDisabled($theme)};
48
- --se-edit-border-table: #{getDisabled($theme)};
49
- --se-edit-hr-color: #{getDisabled($theme)};
50
- --se-table-picker-border-color: #{getDisabled($theme)};
36
+ --se-main-border-color: var(--matcha-color-disabled);
37
+ --se-main-divider-color: var(--matcha-color-disabled);
38
+ --se-main-outline-color: var(--matcha-color-disabled);
39
+ --se-main-out-color: var(--matcha-color-disabled);
40
+ --se-main-shadow-color: var(--matcha-color-disabled);
41
+ --se-modal-border-color: var(--matcha-color-disabled);
42
+ --se-controller-border-color: var(--matcha-color-disabled);
43
+ --se-input-btn-border-color: var(--matcha-color-disabled);
44
+ --se-edit-border-light: var(--matcha-color-disabled);
45
+ --se-edit-border-dark: var(--matcha-color-disabled);
46
+ --se-edit-border-dark-n1: var(--matcha-color-disabled);
47
+ --se-edit-border-dark-n2: var(--matcha-color-disabled);
48
+ --se-edit-border-table: var(--matcha-color-disabled);
49
+ --se-edit-hr-color: var(--matcha-color-disabled);
50
+ --se-table-picker-border-color: var(--matcha-color-disabled);
51
51
 
52
52
  // ── Active / accent ───────────────────────────────────────────────
53
- --se-active-color: #{getAccent($theme)};
54
- --se-active-hover-color: #{getAccent($theme)};
55
- --se-active-dark-color: #{getAccent($theme)};
56
- --se-active-dark2-color: #{getAccent($theme)};
57
- --se-active-dark3-color: #{getAccent($theme)};
58
- --se-active-dark4-color: #{getAccent($theme)};
59
- --se-active-dark5-color: #{getAccent($theme)};
60
- --se-active-light-color: #{getAccentAlpha($theme)};
61
- --se-active-light2-color: #{getAccentAlpha($theme)};
62
- --se-active-light3-color: #{getAccentAlpha($theme)};
63
- --se-active-light4-color: #{getAccentAlpha($theme)};
64
- --se-active-light5-color: #{getAccentAlpha($theme)};
65
- --se-active-light6-color: #{getAccentAlpha($theme)};
66
- --se-edit-active: #{getAccent($theme)};
67
- --se-edit-hover: #{getAccentAlpha($theme)};
68
- --se-edit-hr-on-back: #{getAccentAlpha($theme)};
69
- --se-edit-anchor: #{getAccent($theme)};
70
- --se-edit-anchor-on-back: #{getAccentAlpha($theme)};
71
- --se-edit-anchor-on-font: #{getAccent($theme)};
72
- --se-table-picker-highlight-color: #{getAccentAlpha($theme)};
73
- --se-table-picker-highlight-border-color: #{getAccent($theme)};
74
- --se-loading-color: #{getAccent($theme)};
75
- --se-drag-caret-color: #{getAccent($theme)};
53
+ --se-active-color: var(--matcha-color-accent);
54
+ --se-active-hover-color: var(--matcha-color-accent);
55
+ --se-active-dark-color: var(--matcha-color-accent);
56
+ --se-active-dark2-color: var(--matcha-color-accent);
57
+ --se-active-dark3-color: var(--matcha-color-accent);
58
+ --se-active-dark4-color: var(--matcha-color-accent);
59
+ --se-active-dark5-color: var(--matcha-color-accent);
60
+ --se-active-light-color: var(--matcha-color-accent-alpha);
61
+ --se-active-light2-color: var(--matcha-color-accent-alpha);
62
+ --se-active-light3-color: var(--matcha-color-accent-alpha);
63
+ --se-active-light4-color: var(--matcha-color-accent-alpha);
64
+ --se-active-light5-color: var(--matcha-color-accent-alpha);
65
+ --se-active-light6-color: var(--matcha-color-accent-alpha);
66
+ --se-edit-active: var(--matcha-color-accent);
67
+ --se-edit-hover: var(--matcha-color-accent-alpha);
68
+ --se-edit-hr-on-back: var(--matcha-color-accent-alpha);
69
+ --se-edit-anchor: var(--matcha-color-accent);
70
+ --se-edit-anchor-on-back: var(--matcha-color-accent-alpha);
71
+ --se-edit-anchor-on-font: var(--matcha-color-accent);
72
+ --se-table-picker-highlight-color: var(--matcha-color-accent-alpha);
73
+ --se-table-picker-highlight-border-color: var(--matcha-color-accent);
74
+ --se-loading-color: var(--matcha-color-accent);
75
+ --se-drag-caret-color: var(--matcha-color-accent);
76
76
 
77
77
  // ── Modals / overlays ─────────────────────────────────────────────
78
- --se-modal-anchor-color: #{getAccent($theme)};
79
- --se-overlay-background-color: #{getBackground($theme)};
80
- --se-modal-file-input-background-color: #{getBackground($theme)};
81
- --se-modal-input-disabled-background-color: #{getDisabled($theme)};
82
- --se-modal-input-disabled-color: #{getForegroundAlpha($theme)};
83
- --se-modal-preview-color: #{getForegroundAlpha($theme)};
78
+ --se-modal-anchor-color: var(--matcha-color-accent);
79
+ --se-overlay-background-color: var(--matcha-color-bg);
80
+ --se-modal-file-input-background-color: var(--matcha-color-bg);
81
+ --se-modal-input-disabled-background-color: var(--matcha-color-disabled);
82
+ --se-modal-input-disabled-color: var(--matcha-color-fg-alpha);
83
+ --se-modal-preview-color: var(--matcha-color-fg-alpha);
84
84
 
85
85
  // ── Hover states ──────────────────────────────────────────────────
86
- --se-hover-color: #{getForeground($theme)};
87
- --se-hover-dark-color: #{getForegroundAlpha($theme)};
88
- --se-hover-dark2-color: #{getForegroundAlpha($theme)};
89
- --se-hover-dark3-color: #{getForegroundAlpha($theme)};
90
- --se-hover-light-color: #{getDisabled($theme)};
91
- --se-hover-light2-color: #{getDisabled($theme)};
92
- --se-hover-light3-color: #{getDisabled($theme)};
86
+ --se-hover-color: var(--matcha-color-fg);
87
+ --se-hover-dark-color: var(--matcha-color-fg-alpha);
88
+ --se-hover-dark2-color: var(--matcha-color-fg-alpha);
89
+ --se-hover-dark3-color: var(--matcha-color-fg-alpha);
90
+ --se-hover-light-color: var(--matcha-color-disabled);
91
+ --se-hover-light2-color: var(--matcha-color-disabled);
92
+ --se-hover-light3-color: var(--matcha-color-disabled);
93
93
  }
94
94
  }
95
95
 
package/components/matcha-time.scss CHANGED
@@ -13,13 +13,13 @@
13
13
  cursor: pointer;
14
14
 
15
15
  &::placeholder {
16
- color: getGrey($theme);
16
+ color: var(--matcha-color-text-muted);
17
17
  }
18
18
 
19
19
  &:disabled {
20
20
  cursor: not-allowed;
21
21
  opacity: 0.6;
22
- color: getGrey($theme);
22
+ color: var(--matcha-color-text-muted);
23
23
  }
24
24
  }
25
25
 
package/components/matcha-toolbar.scss CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
  matcha-title[type="icon"] {
114
114
  --matcha-title-fill: var(--matcha-color-text-secondary,
115
- rgba(getForeground($theme), 0.55));
115
+ color-mix(in srgb, var(--matcha-color-fg) 55%, transparent));
116
116
  }
117
117
 
118
118
  matcha-title .matcha-title__text {
package/components/matcha-tooltip.scss CHANGED
@@ -33,14 +33,16 @@
33
33
  justify-content: center;
34
34
  gap: var(--matcha-space-100, 8px);
35
35
  text-align: center;
36
- // pointer-events: auto pra cursor poder entrar no overlay e cancelar o hideDelay
37
- // (permite seleção/cópia do texto sem perder o tooltip). Margin de 8px com host
38
- // garante que não há sobreposição do clique.
39
- pointer-events: auto;
36
+ // Tooltip informativo NÃO captura o ponteiro — clicar "através" dele atinge o
37
+ // elemento abaixo (ex.: pills clicáveis do stepper, botões pequenos). Tooltip
38
+ // sobrepondo o trigger jamais deve bloquear o clique. Só o variante interativo
39
+ // --with-close reativa pointer-events (pra clicar no X / hover-to-stay).
40
+ pointer-events: none;
40
41
 
41
- // Variante com close — gap 8, pr-12 (espaço pro X)
42
+ // Variante com close — gap 8, pr-12 (espaço pro X) + ponteiro ativo (interativa)
42
43
  &.matcha-tooltip-content--with-close {
43
44
  padding-right: var(--matcha-space-150, 12px);
45
+ pointer-events: auto;
44
46
  }
45
47
  }
46
48
 
@@ -142,32 +144,32 @@
142
144
  @mixin matcha-tooltip-theme($theme) {
143
145
  .matcha-tooltip-content {
144
146
  // Figma: bg = text-primary (light em dark theme), text = surface-card (dark)
145
- background-color: var(--matcha-color-text-primary, #{getForeground($theme)});
146
- color: var(--matcha-color-surface-card, #{getForegroundInverse($theme)});
147
+ background-color: var(--matcha-color-text-primary);
148
+ color: var(--matcha-color-surface-card);
147
149
  box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.18));
148
150
  }
149
151
 
150
152
  // Arrow: mesma cor do bg, lado oposto à direção do tooltip
151
153
  .matcha-tooltip-content_above::after {
152
- border-color: var(--matcha-color-text-primary, #{getForeground($theme)})
154
+ border-color: var(--matcha-color-text-primary)
153
155
  transparent transparent transparent;
154
156
  }
155
157
  .matcha-tooltip-content_below::after {
156
158
  border-color: transparent transparent
157
- var(--matcha-color-text-primary, #{getForeground($theme)}) transparent;
159
+ var(--matcha-color-text-primary) transparent;
158
160
  }
159
161
  .matcha-tooltip-content_left::after {
160
162
  border-color: transparent transparent transparent
161
- var(--matcha-color-text-primary, #{getForeground($theme)});
163
+ var(--matcha-color-text-primary);
162
164
  }
163
165
  .matcha-tooltip-content_right::after {
164
166
  border-color: transparent
165
- var(--matcha-color-text-primary, #{getForeground($theme)})
167
+ var(--matcha-color-text-primary)
166
168
  transparent transparent;
167
169
  }
168
170
 
169
171
  .matcha-tooltip-close {
170
- color: var(--matcha-color-surface-card, #{getForegroundInverse($theme)});
172
+ color: var(--matcha-color-surface-card);
171
173
  opacity: 0.7;
172
174
 
173
175
  &:hover { opacity: 1; }
package/main.scss CHANGED
@@ -6,11 +6,14 @@
6
6
  @import "./tokens/spacing-tokens";
7
7
  @import "./tokens/typography-tokens";
8
8
  @import "./tokens/css-custom-properties";
9
+ @import "./tokens/primitives"; // matcha-primitives() — Camada 1: CSS vars de primitivas (--matcha-prim-*) em :root
10
+ @import "./tokens/semantic-aliases"; // $matcha-prim-aliases-{light,dark} — Camada 2: token semântico → primitiva (rota clássica emite var)
9
11
 
10
12
  // FUNCTIONS
11
13
  @import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
12
14
 
13
15
  // MIXINS
16
+ @import "./abstracts/theme-api"; // matcha-define-theme() matcha-build-color-map() matcha-role-tokens() matcha-text-on() matcha-contrast-on()
14
17
  @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
15
18
  @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
16
19
  @import "./abstracts/media-breakpoint"; // media-breakpoint()
@@ -27,6 +30,7 @@
27
30
  @import "./components/matcha-option.scss"; // matcha-option-theme($theme)
28
31
  @import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
29
32
  @import "./components/matcha-select.scss"; // matcha-select-theme($theme)
33
+ @import "./components/matcha-select-multiple.scss"; // matcha-select-multiple-theme($theme)
30
34
  @import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
31
35
  @import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
32
36
  @import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
@@ -78,7 +82,7 @@
78
82
  @import "./components/matcha-chart-card.scss"; // matcha-chart-card-theme($theme)
79
83
  @import "./components/matcha-crop.scss"; // matcha-crop-theme($theme)
80
84
  @import "./components/matcha-footer.scss"; // matcha-footer-theme($theme)
81
- @import "./components/matcha-uploader.scss"; // matcha-uploader-theme($theme)
85
+ @import "./components/matcha-file-uploader.scss"; // matcha-file-uploader-theme($theme)
82
86
  @import "./components/matcha-drop-image.scss"; // matcha-drop-image-theme($theme)
83
87
  @import "./components/matcha-notification.scss"; // matcha-notification-theme($theme)
84
88
  @import "./components/matcha-section.scss"; // matcha-section-theme($theme)
@@ -194,6 +198,7 @@
194
198
  @include matcha-panel-theme($theme);
195
199
  @include matcha-option-theme($theme);
196
200
  @include matcha-select-theme($theme);
201
+ @include matcha-select-multiple-theme($theme);
197
202
  @include matcha-paginator-theme($theme);
198
203
  @include matcha-slider-theme($theme);
199
204
  @include matcha-highlight-theme($theme);
@@ -216,7 +221,7 @@
216
221
  @include matcha-chart-card-theme($theme);
217
222
  @include matcha-crop-theme($theme);
218
223
  @include matcha-footer-theme($theme);
219
- @include matcha-uploader-theme($theme);
224
+ @include matcha-file-uploader-theme($theme);
220
225
  @include matcha-drop-image-theme($theme);
221
226
  @include matcha-notification-theme($theme);
222
227
  @include matcha-section-theme($theme);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inchurch/matcha-theme",
3
- "version": "20.276.0",
3
+ "version": "20.277.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_color-tokens.scss CHANGED
@@ -921,7 +921,6 @@ $mat-grey: (
921
921
  );
922
922
  // Alias for alternate spelling.
923
923
  $grey: $mat-grey;
924
- $mat-gray: $mat-grey;
925
924
 
926
925
  $mat-blue-grey: (
927
926
  50: $color-base-blue-grey-50,
@@ -955,8 +954,6 @@ $mat-blue-grey: (
955
954
  );
956
955
  // Alias for alternate spelling.
957
956
  $blue-grey: $mat-blue-grey;
958
- // Alias for alternate spelling.
959
- $mat-blue-gray: $mat-blue-grey;
960
957
 
961
958
  $mat-light-grey: (
962
959
  50: $color-base-light-grey-50,