matcha-theme 20.238.0 → 20.240.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.
@@ -1,62 +1,99 @@
1
1
  @mixin matcha-text-editor-theme($theme) {
2
- matcha-text-editor {
3
- .sun-editor {
4
- border-color: getDisabled($theme);
5
- border-radius: 8px;
6
- overflow: hidden;
7
- }
2
+ matcha-text-editor .sun-editor,
3
+ matcha-text-editor .sun-editor-editable {
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)};
8
16
 
9
- .sun-editor-id-toolbar {
10
- background: getBackground($theme);
11
- border-bottom-color: getDisabled($theme);
12
- }
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)};
13
34
 
14
- .sun-editor-id-toolbar .btn_editor {
15
- background-color: getBackground($theme);
16
- border-color: getDisabled($theme);
17
- color: getForeground($theme);
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)};
18
51
 
19
- &:hover,
20
- &:focus {
21
- background-color: getAccentAlpha($theme);
22
- border-color: getAccent($theme);
23
- }
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)};
24
76
 
25
- &.on {
26
- background-color: getAccentAlpha($theme);
27
- border-color: getAccent($theme);
28
- }
29
- }
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)};
30
84
 
31
- .sun-editor-id-toolbar .layer_editor {
32
- background-color: getSurface($theme);
33
- border-color: getDisabled($theme);
34
- }
35
-
36
- .sun-editor-id-toolbar .btn_edit:hover,
37
- .sun-editor-id-toolbar .btn_edit:focus {
38
- background-color: getAccentAlpha($theme);
39
- }
40
- .sun-editor-id-toolbar .btn_edit {
41
- color: getForeground($theme)
42
- }
43
-
44
-
45
-
46
- @if getShade($theme) == 100 {
47
- .sun-editor .sun-editor-id-toolbar .btn_editor [class^="ico_"],
48
- .sun-editor .sun-editor-id-toolbar .btn_editor [class*=" ico_"],
49
- .sun-editor .sun-editor-id-toolbar .btn_editor hr {
50
- filter: invert(1);
51
- .color_font {
52
- // revert invert case
53
- filter: invert(1);
54
- }
55
- }
56
- }
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)};
57
93
  }
58
94
  }
59
95
 
96
+ // ── Estrutura (não depende de tema) ──────────────────────────────────────────
60
97
  matcha-text-editor {
61
98
  display: block;
62
99
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.238.0",
3
+ "version": "20.240.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {