@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-text-editor.scss CHANGED
@@ -1,105 +1,105 @@
1
- @mixin matcha-text-editor-theme($theme) {
2
- matcha-text-editor .sun-editor,
3
- matcha-text-editor .sun-editor-editable {
4
- // ── Backgrounds ──────────────────────────────────────────────────────
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
-
17
- // ── Text / foreground ─────────────────────────────────────────────
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
-
35
- // ── Borders / dividers ────────────────────────────────────────────
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
-
52
- // ── Active / accent ───────────────────────────────────────────────
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
-
77
- // ── Modals / overlays ─────────────────────────────────────────────
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
-
85
- // ── Hover states ──────────────────────────────────────────────────
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
- }
94
- }
95
-
96
- // ── Estrutura (não depende de tema) ──────────────────────────────────────────
97
- matcha-text-editor {
98
- display: block;
99
- width: 100%;
100
-
101
- .sun-editor {
102
- border-radius: 8px;
103
- overflow: hidden;
104
- }
105
- }
1
+ @mixin matcha-text-editor-theme($theme) {
2
+ matcha-text-editor .sun-editor,
3
+ matcha-text-editor .sun-editor-editable {
4
+ // ── Backgrounds ──────────────────────────────────────────────────────
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
+
17
+ // ── Text / foreground ─────────────────────────────────────────────
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
+
35
+ // ── Borders / dividers ────────────────────────────────────────────
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
+
52
+ // ── Active / accent ───────────────────────────────────────────────
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
+
77
+ // ── Modals / overlays ─────────────────────────────────────────────
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
+
85
+ // ── Hover states ──────────────────────────────────────────────────
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
+ }
94
+ }
95
+
96
+ // ── Estrutura (não depende de tema) ──────────────────────────────────────────
97
+ matcha-text-editor {
98
+ display: block;
99
+ width: 100%;
100
+
101
+ .sun-editor {
102
+ border-radius: 8px;
103
+ overflow: hidden;
104
+ }
105
+ }
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
+ }