@inchurch/matcha-theme 22.40.1 → 22.40.2

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 +291 -291
  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 +224 -224
  6. package/abstracts/_typography.scss +128 -128
  7. package/base/_reset.scss +487 -487
  8. package/components/app-page-header.scss +260 -260
  9. package/components/matcha-accordion.scss +297 -297
  10. package/components/matcha-audio-player.scss +31 -31
  11. package/components/matcha-autocomplete.scss +145 -145
  12. package/components/matcha-avatar.scss +426 -426
  13. package/components/matcha-badge.scss +120 -120
  14. package/components/matcha-breadcrumb.scss +231 -231
  15. package/components/matcha-button-toggle.scss +484 -484
  16. package/components/matcha-buttons.scss +973 -973
  17. package/components/matcha-calendar.scss +253 -253
  18. package/components/matcha-cards.scss +212 -212
  19. package/components/matcha-chart-card.scss +53 -53
  20. package/components/matcha-checkbox.scss +266 -266
  21. package/components/matcha-chip.scss +311 -311
  22. package/components/matcha-color-pick.scss +34 -34
  23. package/components/matcha-command-palette.scss +316 -316
  24. package/components/matcha-crop.scss +419 -419
  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 +650 -650
  34. package/components/matcha-flag.scss +103 -103
  35. package/components/matcha-footer.scss +91 -91
  36. package/components/matcha-form-field.scss +883 -883
  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 +247 -247
  42. package/components/matcha-icon.scss +111 -111
  43. package/components/matcha-image.scss +60 -60
  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 +770 -770
  48. package/components/matcha-notification.scss +417 -417
  49. package/components/matcha-option.scss +170 -170
  50. package/components/matcha-page-builder.scss +4196 -4196
  51. package/components/matcha-paginator.scss +699 -699
  52. package/components/matcha-panel.scss +216 -216
  53. package/components/matcha-period.scss +174 -174
  54. package/components/matcha-profile-card.scss +50 -50
  55. package/components/matcha-progress-bar.scss +355 -355
  56. package/components/matcha-radio.scss +325 -325
  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 +643 -643
  63. package/components/matcha-skeleton.scss +182 -182
  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-stepper.scss +376 -376
  70. package/components/matcha-table-cell.scss +107 -107
  71. package/components/matcha-table.scss +722 -722
  72. package/components/matcha-tabs.scss +642 -642
  73. package/components/matcha-text-editor.scss +111 -111
  74. package/components/matcha-time.scss +33 -33
  75. package/components/matcha-timepicker.scss +13 -13
  76. package/components/matcha-toolbar.scss +366 -366
  77. package/components/matcha-tooltip.scss +235 -235
  78. package/components/matcha-tree-view.scss +658 -658
  79. package/layout/matcha-page-layout.scss +778 -778
  80. package/main.scss +334 -334
  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 +288 -288
  85. package/tokens/_elevation-tokens.scss +33 -33
  86. package/tokens/_emit-tokens.scss +329 -329
  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-text-editor.scss CHANGED
@@ -1,111 +1,111 @@
1
- @mixin matcha-text-editor-theme($theme) {
2
- // O SunEditor v3 portaliza popups/diálogos (dropdowns, modal de imagem, seletor de cor)
3
- // num carrier `.sun-editor.sun-editor-carrier-wrapper` anexado ao <body> — FORA do
4
- // <matcha-text-editor>. Incluir o carrier aqui faz as mesmas --se-* alcançarem os popups
5
- // (que herdam por serem descendentes); como os valores são var(--matcha-color-*) e o
6
- // .theme-default-dark fica no <body>, um bloco só cobre light e dark.
7
- matcha-text-editor .sun-editor,
8
- matcha-text-editor .sun-editor-editable,
9
- .sun-editor.sun-editor-carrier-wrapper {
10
- // ── Backgrounds ──────────────────────────────────────────────────────
11
- --se-main-background-color: var(--matcha-color-bg);
12
- --se-edit-background-color: var(--matcha-color-surface);
13
- --se-edit-background-pre: var(--matcha-color-bg);
14
- --se-modal-background-color: var(--matcha-color-surface);
15
- --se-controller-background-color: var(--matcha-color-surface);
16
- --se-code-view-background-color: var(--matcha-color-bg);
17
- --se-code-view-line-background-color: var(--matcha-color-surface);
18
- --se-markdown-view-background-color: var(--matcha-color-bg);
19
- --se-markdown-view-line-background-color:var(--matcha-color-surface);
20
- --se-table-picker-color: var(--matcha-color-surface);
21
- --se-doc-background: var(--matcha-color-bg);
22
-
23
- // ── Text / foreground ─────────────────────────────────────────────
24
- --se-main-color: var(--matcha-color-fg);
25
- --se-main-font-color: var(--matcha-color-fg);
26
- --se-main-color-lighter: var(--matcha-color-fg-alpha);
27
- --se-edit-font-color: var(--matcha-color-fg);
28
- --se-edit-font-pre: var(--matcha-color-fg-alpha);
29
- --se-edit-font-quote: var(--matcha-color-fg-alpha);
30
- --se-modal-color: var(--matcha-color-fg);
31
- --se-controller-color: var(--matcha-color-fg);
32
- --se-dropdown-font-color: var(--matcha-color-fg);
33
- --se-statusbar-font-color: var(--matcha-color-fg-alpha);
34
- --se-code-view-color: var(--matcha-color-fg);
35
- --se-code-view-line-color: var(--matcha-color-fg-alpha);
36
- --se-markdown-view-color: var(--matcha-color-fg);
37
- --se-markdown-view-line-color:var(--matcha-color-fg-alpha);
38
- --se-caret-color: var(--matcha-color-fg);
39
- --se-placeholder-color: var(--matcha-color-disabled);
40
-
41
- // ── Borders / dividers ────────────────────────────────────────────
42
- --se-main-border-color: var(--matcha-color-disabled);
43
- --se-main-divider-color: var(--matcha-color-disabled);
44
- --se-main-outline-color: var(--matcha-color-disabled);
45
- --se-main-out-color: var(--matcha-color-disabled);
46
- --se-main-shadow-color: var(--matcha-color-disabled);
47
- --se-modal-border-color: var(--matcha-color-disabled);
48
- --se-controller-border-color: var(--matcha-color-disabled);
49
- --se-input-btn-border-color: var(--matcha-color-disabled);
50
- --se-edit-border-light: var(--matcha-color-disabled);
51
- --se-edit-border-dark: var(--matcha-color-disabled);
52
- --se-edit-border-dark-n1: var(--matcha-color-disabled);
53
- --se-edit-border-dark-n2: var(--matcha-color-disabled);
54
- --se-edit-border-table: var(--matcha-color-disabled);
55
- --se-edit-hr-color: var(--matcha-color-disabled);
56
- --se-table-picker-border-color: var(--matcha-color-disabled);
57
-
58
- // ── Active / accent ───────────────────────────────────────────────
59
- --se-active-color: var(--matcha-color-accent);
60
- --se-active-hover-color: var(--matcha-color-accent);
61
- --se-active-dark-color: var(--matcha-color-accent);
62
- --se-active-dark2-color: var(--matcha-color-accent);
63
- --se-active-dark3-color: var(--matcha-color-accent);
64
- --se-active-dark4-color: var(--matcha-color-accent);
65
- --se-active-dark5-color: var(--matcha-color-accent);
66
- --se-active-light-color: var(--matcha-color-accent-alpha);
67
- --se-active-light2-color: var(--matcha-color-accent-alpha);
68
- --se-active-light3-color: var(--matcha-color-accent-alpha);
69
- --se-active-light4-color: var(--matcha-color-accent-alpha);
70
- --se-active-light5-color: var(--matcha-color-accent-alpha);
71
- --se-active-light6-color: var(--matcha-color-accent-alpha);
72
- --se-edit-active: var(--matcha-color-accent);
73
- --se-edit-hover: var(--matcha-color-accent-alpha);
74
- --se-edit-hr-on-back: var(--matcha-color-accent-alpha);
75
- --se-edit-anchor: var(--matcha-color-accent);
76
- --se-edit-anchor-on-back: var(--matcha-color-accent-alpha);
77
- --se-edit-anchor-on-font: var(--matcha-color-accent);
78
- --se-table-picker-highlight-color: var(--matcha-color-accent-alpha);
79
- --se-table-picker-highlight-border-color: var(--matcha-color-accent);
80
- --se-loading-color: var(--matcha-color-accent);
81
- --se-drag-caret-color: var(--matcha-color-accent);
82
-
83
- // ── Modals / overlays ─────────────────────────────────────────────
84
- --se-modal-anchor-color: var(--matcha-color-accent);
85
- --se-overlay-background-color: var(--matcha-color-bg);
86
- --se-modal-file-input-background-color: var(--matcha-color-bg);
87
- --se-modal-input-disabled-background-color: var(--matcha-color-disabled);
88
- --se-modal-input-disabled-color: var(--matcha-color-fg-alpha);
89
- --se-modal-preview-color: var(--matcha-color-fg-alpha);
90
-
91
- // ── Hover states ──────────────────────────────────────────────────
92
- --se-hover-color: var(--matcha-color-fg);
93
- --se-hover-dark-color: var(--matcha-color-fg-alpha);
94
- --se-hover-dark2-color: var(--matcha-color-fg-alpha);
95
- --se-hover-dark3-color: var(--matcha-color-fg-alpha);
96
- --se-hover-light-color: var(--matcha-color-disabled);
97
- --se-hover-light2-color: var(--matcha-color-disabled);
98
- --se-hover-light3-color: var(--matcha-color-disabled);
99
- }
100
- }
101
-
102
- // ── Estrutura (não depende de tema) ──────────────────────────────────────────
103
- matcha-text-editor {
104
- display: block;
105
- width: 100%;
106
-
107
- .sun-editor {
108
- border-radius: 8px;
109
- overflow: hidden;
110
- }
111
- }
1
+ @mixin matcha-text-editor-theme($theme) {
2
+ // O SunEditor v3 portaliza popups/diálogos (dropdowns, modal de imagem, seletor de cor)
3
+ // num carrier `.sun-editor.sun-editor-carrier-wrapper` anexado ao <body> — FORA do
4
+ // <matcha-text-editor>. Incluir o carrier aqui faz as mesmas --se-* alcançarem os popups
5
+ // (que herdam por serem descendentes); como os valores são var(--matcha-color-*) e o
6
+ // .theme-default-dark fica no <body>, um bloco só cobre light e dark.
7
+ matcha-text-editor .sun-editor,
8
+ matcha-text-editor .sun-editor-editable,
9
+ .sun-editor.sun-editor-carrier-wrapper {
10
+ // ── Backgrounds ──────────────────────────────────────────────────────
11
+ --se-main-background-color: var(--matcha-color-bg);
12
+ --se-edit-background-color: var(--matcha-color-surface);
13
+ --se-edit-background-pre: var(--matcha-color-bg);
14
+ --se-modal-background-color: var(--matcha-color-surface);
15
+ --se-controller-background-color: var(--matcha-color-surface);
16
+ --se-code-view-background-color: var(--matcha-color-bg);
17
+ --se-code-view-line-background-color: var(--matcha-color-surface);
18
+ --se-markdown-view-background-color: var(--matcha-color-bg);
19
+ --se-markdown-view-line-background-color:var(--matcha-color-surface);
20
+ --se-table-picker-color: var(--matcha-color-surface);
21
+ --se-doc-background: var(--matcha-color-bg);
22
+
23
+ // ── Text / foreground ─────────────────────────────────────────────
24
+ --se-main-color: var(--matcha-color-fg);
25
+ --se-main-font-color: var(--matcha-color-fg);
26
+ --se-main-color-lighter: var(--matcha-color-fg-alpha);
27
+ --se-edit-font-color: var(--matcha-color-fg);
28
+ --se-edit-font-pre: var(--matcha-color-fg-alpha);
29
+ --se-edit-font-quote: var(--matcha-color-fg-alpha);
30
+ --se-modal-color: var(--matcha-color-fg);
31
+ --se-controller-color: var(--matcha-color-fg);
32
+ --se-dropdown-font-color: var(--matcha-color-fg);
33
+ --se-statusbar-font-color: var(--matcha-color-fg-alpha);
34
+ --se-code-view-color: var(--matcha-color-fg);
35
+ --se-code-view-line-color: var(--matcha-color-fg-alpha);
36
+ --se-markdown-view-color: var(--matcha-color-fg);
37
+ --se-markdown-view-line-color:var(--matcha-color-fg-alpha);
38
+ --se-caret-color: var(--matcha-color-fg);
39
+ --se-placeholder-color: var(--matcha-color-disabled);
40
+
41
+ // ── Borders / dividers ────────────────────────────────────────────
42
+ --se-main-border-color: var(--matcha-color-disabled);
43
+ --se-main-divider-color: var(--matcha-color-disabled);
44
+ --se-main-outline-color: var(--matcha-color-disabled);
45
+ --se-main-out-color: var(--matcha-color-disabled);
46
+ --se-main-shadow-color: var(--matcha-color-disabled);
47
+ --se-modal-border-color: var(--matcha-color-disabled);
48
+ --se-controller-border-color: var(--matcha-color-disabled);
49
+ --se-input-btn-border-color: var(--matcha-color-disabled);
50
+ --se-edit-border-light: var(--matcha-color-disabled);
51
+ --se-edit-border-dark: var(--matcha-color-disabled);
52
+ --se-edit-border-dark-n1: var(--matcha-color-disabled);
53
+ --se-edit-border-dark-n2: var(--matcha-color-disabled);
54
+ --se-edit-border-table: var(--matcha-color-disabled);
55
+ --se-edit-hr-color: var(--matcha-color-disabled);
56
+ --se-table-picker-border-color: var(--matcha-color-disabled);
57
+
58
+ // ── Active / accent ───────────────────────────────────────────────
59
+ --se-active-color: var(--matcha-color-accent);
60
+ --se-active-hover-color: var(--matcha-color-accent);
61
+ --se-active-dark-color: var(--matcha-color-accent);
62
+ --se-active-dark2-color: var(--matcha-color-accent);
63
+ --se-active-dark3-color: var(--matcha-color-accent);
64
+ --se-active-dark4-color: var(--matcha-color-accent);
65
+ --se-active-dark5-color: var(--matcha-color-accent);
66
+ --se-active-light-color: var(--matcha-color-accent-alpha);
67
+ --se-active-light2-color: var(--matcha-color-accent-alpha);
68
+ --se-active-light3-color: var(--matcha-color-accent-alpha);
69
+ --se-active-light4-color: var(--matcha-color-accent-alpha);
70
+ --se-active-light5-color: var(--matcha-color-accent-alpha);
71
+ --se-active-light6-color: var(--matcha-color-accent-alpha);
72
+ --se-edit-active: var(--matcha-color-accent);
73
+ --se-edit-hover: var(--matcha-color-accent-alpha);
74
+ --se-edit-hr-on-back: var(--matcha-color-accent-alpha);
75
+ --se-edit-anchor: var(--matcha-color-accent);
76
+ --se-edit-anchor-on-back: var(--matcha-color-accent-alpha);
77
+ --se-edit-anchor-on-font: var(--matcha-color-accent);
78
+ --se-table-picker-highlight-color: var(--matcha-color-accent-alpha);
79
+ --se-table-picker-highlight-border-color: var(--matcha-color-accent);
80
+ --se-loading-color: var(--matcha-color-accent);
81
+ --se-drag-caret-color: var(--matcha-color-accent);
82
+
83
+ // ── Modals / overlays ─────────────────────────────────────────────
84
+ --se-modal-anchor-color: var(--matcha-color-accent);
85
+ --se-overlay-background-color: var(--matcha-color-bg);
86
+ --se-modal-file-input-background-color: var(--matcha-color-bg);
87
+ --se-modal-input-disabled-background-color: var(--matcha-color-disabled);
88
+ --se-modal-input-disabled-color: var(--matcha-color-fg-alpha);
89
+ --se-modal-preview-color: var(--matcha-color-fg-alpha);
90
+
91
+ // ── Hover states ──────────────────────────────────────────────────
92
+ --se-hover-color: var(--matcha-color-fg);
93
+ --se-hover-dark-color: var(--matcha-color-fg-alpha);
94
+ --se-hover-dark2-color: var(--matcha-color-fg-alpha);
95
+ --se-hover-dark3-color: var(--matcha-color-fg-alpha);
96
+ --se-hover-light-color: var(--matcha-color-disabled);
97
+ --se-hover-light2-color: var(--matcha-color-disabled);
98
+ --se-hover-light3-color: var(--matcha-color-disabled);
99
+ }
100
+ }
101
+
102
+ // ── Estrutura (não depende de tema) ──────────────────────────────────────────
103
+ matcha-text-editor {
104
+ display: block;
105
+ width: 100%;
106
+
107
+ .sun-editor {
108
+ border-radius: 8px;
109
+ overflow: hidden;
110
+ }
111
+ }
package/components/matcha-time.scss CHANGED
@@ -1,33 +1,33 @@
1
- // =========================================================
2
- // * Matcha Time Styles
3
- // =========================================================
4
- @mixin matcha-time-theme($theme) {
5
- .matcha-time-input {
6
- width: 100%;
7
- font-size: 14px;
8
- font-family: inherit;
9
- line-height: 1.5;
10
- background-color: transparent;
11
- border: none;
12
- outline: none;
13
- cursor: pointer;
14
-
15
- &::placeholder {
16
- color: var(--matcha-color-text-muted);
17
- }
18
-
19
- &:disabled {
20
- cursor: not-allowed;
21
- opacity: 0.6;
22
- color: var(--matcha-color-text-muted);
23
- }
24
- }
25
-
26
- // Integração com matcha-form-field
27
- matcha-form-field {
28
- matcha-time {
29
- width: 100%;
30
- display: block;
31
- }
32
- }
33
- }
1
+ // =========================================================
2
+ // * Matcha Time Styles
3
+ // =========================================================
4
+ @mixin matcha-time-theme($theme) {
5
+ .matcha-time-input {
6
+ width: 100%;
7
+ font-size: 14px;
8
+ font-family: inherit;
9
+ line-height: 1.5;
10
+ background-color: transparent;
11
+ border: none;
12
+ outline: none;
13
+ cursor: pointer;
14
+
15
+ &::placeholder {
16
+ color: var(--matcha-color-text-muted);
17
+ }
18
+
19
+ &:disabled {
20
+ cursor: not-allowed;
21
+ opacity: 0.6;
22
+ color: var(--matcha-color-text-muted);
23
+ }
24
+ }
25
+
26
+ // Integração com matcha-form-field
27
+ matcha-form-field {
28
+ matcha-time {
29
+ width: 100%;
30
+ display: block;
31
+ }
32
+ }
33
+ }
package/components/matcha-timepicker.scss CHANGED
@@ -1,13 +1,13 @@
1
- // =============================================================================
2
- // matcha-timepicker.scss — Theme mixin (stub)
3
- // Componente refatorado pra input + botão de ícone (native picker).
4
- // Todo layout/visual do field vem de matcha-form-field.scss.
5
- // Estrutura interna (.matcha-time-container / .matcha-time-input /
6
- // .matcha-time-picker-button) é estilizada em matcha-time.component.scss.
7
- // Mixin mantido vazio pra não quebrar main.scss.
8
- // =============================================================================
9
-
10
- @mixin matcha-timepicker-theme($theme) {
11
- // Intencionalmente vazio — matcha-time não precisa de tema próprio hoje.
12
- // Cores/borda/estado vêm do wrapper matcha-form-field.
13
- }
1
+ // =============================================================================
2
+ // matcha-timepicker.scss — Theme mixin (stub)
3
+ // Componente refatorado pra input + botão de ícone (native picker).
4
+ // Todo layout/visual do field vem de matcha-form-field.scss.
5
+ // Estrutura interna (.matcha-time-container / .matcha-time-input /
6
+ // .matcha-time-picker-button) é estilizada em matcha-time.component.scss.
7
+ // Mixin mantido vazio pra não quebrar main.scss.
8
+ // =============================================================================
9
+
10
+ @mixin matcha-timepicker-theme($theme) {
11
+ // Intencionalmente vazio — matcha-time não precisa de tema próprio hoje.
12
+ // Cores/borda/estado vêm do wrapper matcha-form-field.
13
+ }