@principal-ade/industry-themed-mdx-editor 0.1.0 → 0.1.1

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 (6) hide show
  1. package/dist/index.css +161 -0
  2. package/dist/index.mjs +2633 -1327
  3. package/dist/src/components/ThemedMDXEditor.d.ts +2 -0
  4. package/dist/src/components/ThemedMDXEditor.d.ts.map +1 -1
  5. package/dist/styles.css +130 -34
  6. package/package.json +1 -1
package/dist/index.css ADDED
@@ -0,0 +1,161 @@
1
+ /* src/styles/mdx-editor-theme.css */
2
+ .themed-mdx-editor [class*=editorRoot] {
3
+ --accentBase: var(--accentBase) !important;
4
+ --accentBgSubtle: var(--accentBgSubtle) !important;
5
+ --accentBg: var(--accentBg) !important;
6
+ --accentBgHover: var(--accentBgHover) !important;
7
+ --accentBgActive: var(--accentBgActive) !important;
8
+ --accentLine: var(--accentLine) !important;
9
+ --accentBorder: var(--accentBorder) !important;
10
+ --accentBorderHover: var(--accentBorderHover) !important;
11
+ --accentSolid: var(--accentSolid) !important;
12
+ --accentSolidHover: var(--accentSolidHover) !important;
13
+ --accentText: var(--accentText) !important;
14
+ --accentTextContrast: var(--accentTextContrast) !important;
15
+ --basePageBg: var(--mdx-editor-bg) !important;
16
+ --baseBase: var(--baseBase) !important;
17
+ --baseBgSubtle: var(--baseBgSubtle) !important;
18
+ --baseBg: var(--baseBg) !important;
19
+ --baseBgHover: var(--baseBgHover) !important;
20
+ --baseBgActive: var(--baseBgActive) !important;
21
+ --baseLine: var(--baseLine) !important;
22
+ --baseBorder: var(--baseBorder) !important;
23
+ --baseBorderHover: var(--baseBorderHover) !important;
24
+ --baseSolid: var(--baseSolid) !important;
25
+ --baseSolidHover: var(--baseSolidHover) !important;
26
+ --baseText: var(--baseText) !important;
27
+ --baseTextContrast: var(--baseTextContrast) !important;
28
+ }
29
+ .themed-mdx-editor .mdx-editor-content {
30
+ font-family: var(--mdx-editor-font-family);
31
+ font-size: var(--mdx-editor-font-size);
32
+ color: var(--mdx-editor-fg);
33
+ line-height: 1.6;
34
+ }
35
+ .themed-mdx-editor .mdx-editor-content h1,
36
+ .themed-mdx-editor .mdx-editor-content h2,
37
+ .themed-mdx-editor .mdx-editor-content h3,
38
+ .themed-mdx-editor .mdx-editor-content h4,
39
+ .themed-mdx-editor .mdx-editor-content h5,
40
+ .themed-mdx-editor .mdx-editor-content h6 {
41
+ color: var(--mdx-editor-heading-color);
42
+ }
43
+ .themed-mdx-editor .mdx-editor-content a {
44
+ color: var(--mdx-editor-link-color);
45
+ }
46
+ .themed-mdx-editor .mdx-editor-content code {
47
+ background-color: var(--mdx-editor-code-bg);
48
+ font-family: var(--mdx-editor-font-family);
49
+ padding: 2px 6px;
50
+ border-radius: 3px;
51
+ }
52
+ .themed-mdx-editor .cm-editor {
53
+ background-color: var(--mdx-editor-code-bg) !important;
54
+ }
55
+ .themed-mdx-editor .cm-editor .cm-scroller {
56
+ font-family: var(--mdx-editor-font-family);
57
+ background-color: var(--mdx-editor-code-bg);
58
+ }
59
+ .themed-mdx-editor .cm-editor .cm-gutters {
60
+ background-color: var(--mdx-editor-code-bg);
61
+ border-right: 1px solid var(--mdx-editor-border);
62
+ color: var(--mdx-editor-fg);
63
+ }
64
+ .themed-mdx-editor .cm-editor .cm-content {
65
+ background-color: var(--mdx-editor-code-bg);
66
+ color: var(--mdx-editor-fg);
67
+ }
68
+ .themed-mdx-editor .cm-editor .cm-line {
69
+ background-color: var(--mdx-editor-code-bg);
70
+ }
71
+ .themed-mdx-editor .cm-editor .cm-activeLineGutter {
72
+ background-color: var(--baseBgHover);
73
+ }
74
+ .themed-mdx-editor .cm-editor .cm-activeLine {
75
+ background-color: var(--baseBgHover);
76
+ }
77
+ .themed-mdx-editor .mdx-editor-content ::selection {
78
+ background-color: var(--mdx-editor-selection-bg);
79
+ }
80
+ .themed-mdx-editor [class*=toolbarRoot] {
81
+ background-color: var(--mdx-editor-toolbar-bg);
82
+ border-bottom: 1px solid var(--mdx-editor-border);
83
+ }
84
+ .themed-mdx-editor [class*=toolbarRoot] button:not([class*=selectTrigger]) {
85
+ color: var(--mdx-editor-fg);
86
+ }
87
+ .themed-mdx-editor [class*=toolbarRoot] button:not([class*=selectTrigger]):hover {
88
+ background-color: var(--mdx-editor-selection-bg);
89
+ }
90
+ .themed-mdx-editor [class*=toolbarRoot] svg {
91
+ color: var(--baseText) !important;
92
+ }
93
+ .themed-mdx-editor button[role=combobox][class*=selectTrigger],
94
+ .themed-mdx-editor [data-toolbar-item=true][class*=selectTrigger],
95
+ button[role=combobox][class*=selectTrigger][data-toolbar-item=true] {
96
+ background-color: var(--baseBg) !important;
97
+ color: var(--baseText) !important;
98
+ border: 1px solid var(--baseBorder) !important;
99
+ padding: 4px 8px !important;
100
+ border-radius: 4px !important;
101
+ }
102
+ .themed-mdx-editor button[role=combobox][class*=selectTrigger]:hover,
103
+ .themed-mdx-editor [data-toolbar-item=true][class*=selectTrigger]:hover,
104
+ button[role=combobox][class*=selectTrigger][data-toolbar-item=true]:hover {
105
+ background-color: var(--baseBgHover) !important;
106
+ border-color: var(--baseBorderHover) !important;
107
+ }
108
+ .themed-mdx-editor button[class*=selectTrigger] span,
109
+ button[class*=selectTrigger][data-toolbar-item=true] span {
110
+ color: var(--baseText) !important;
111
+ }
112
+ .themed-mdx-editor button[class*=selectTrigger] [class*=selectDropdownArrow] svg,
113
+ button[class*=selectTrigger][data-toolbar-item=true] [class*=selectDropdownArrow] svg {
114
+ color: var(--baseText) !important;
115
+ }
116
+ [class*=selectContent] {
117
+ background-color: var(--baseBg) !important;
118
+ border: 1px solid var(--baseBorder) !important;
119
+ color: var(--baseText) !important;
120
+ z-index: 9999 !important;
121
+ }
122
+ [class*=selectItem] {
123
+ color: var(--baseText) !important;
124
+ }
125
+ [class*=selectItem]:hover {
126
+ background-color: var(--baseBgHover) !important;
127
+ }
128
+ [class*=selectItem][data-state=checked] {
129
+ background-color: var(--accentBg) !important;
130
+ color: var(--accentText) !important;
131
+ }
132
+ .themed-mdx-editor [class*=tableEditor] > tbody > tr > td:not([class*=toolCell]),
133
+ .themed-mdx-editor [class*=tableEditor] > tbody > tr > th:not([class*=toolCell]):not([data-tool-cell=true]) {
134
+ border: 1px solid var(--mdx-editor-table-border) !important;
135
+ padding: var(--spacing-1) var(--spacing-2);
136
+ white-space: normal;
137
+ }
138
+ .themed-mdx-editor [class*=tableEditor] > thead > tr > th {
139
+ border: 1px solid var(--mdx-editor-table-border) !important;
140
+ }
141
+ .themed-mdx-editor [class*=sourceEditor] {
142
+ font-family: var(--mdx-editor-font-family);
143
+ font-size: var(--mdx-editor-font-size);
144
+ background-color: var(--mdx-editor-bg);
145
+ color: var(--mdx-editor-fg);
146
+ }
147
+ .themed-mdx-editor ::-webkit-scrollbar {
148
+ width: 12px;
149
+ height: 12px;
150
+ }
151
+ .themed-mdx-editor ::-webkit-scrollbar-track {
152
+ background: var(--mdx-editor-bg);
153
+ }
154
+ .themed-mdx-editor ::-webkit-scrollbar-thumb {
155
+ background: var(--mdx-editor-border);
156
+ border-radius: 6px;
157
+ }
158
+ .themed-mdx-editor ::-webkit-scrollbar-thumb:hover {
159
+ background: var(--mdx-editor-fg);
160
+ opacity: 0.5;
161
+ }