@riebeckite/plugin-code-enhance 0.0.1 → 0.0.5

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 (2) hide show
  1. package/package.json +2 -2
  2. package/style.css +166 -166
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/plugin-code-enhance",
3
- "version": "0.0.1",
3
+ "version": "0.0.5",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "rehype-pretty-code": "^0.14.1",
25
25
  "shiki": "^3.13.0",
26
- "@riebeckite/core": "0.0.1"
26
+ "@riebeckite/core": "0.0.5"
27
27
  },
28
28
  "publishConfig": {
29
29
  "access": "public"
package/style.css CHANGED
@@ -1,166 +1,166 @@
1
- .rr-code {
2
- --rr-code-paper: var(--rb-color-paper, #ffffff);
3
- --rr-code-ink: var(--rb-color-ink, #000000);
4
- --rr-code-muted: color-mix(in srgb, var(--rr-code-ink) 56%, transparent);
5
- --rr-code-rule: color-mix(in srgb, var(--rr-code-ink) 18%, transparent);
6
- --rr-code-accent: var(--rb-color-accent, #686868);
7
- margin: 2rem 0;
8
- border: 1px solid var(--rr-code-rule);
9
- background: var(--rr-code-paper);
10
- color: var(--rr-code-ink);
11
- }
12
-
13
- .rr-code[data-terminal="true"] {
14
- --rr-code-paper: var(--rb-color-ink, #000000);
15
- --rr-code-ink: var(--rb-color-paper, #ffffff);
16
- }
17
-
18
- .rr-code__header {
19
- display: flex;
20
- align-items: center;
21
- justify-content: space-between;
22
- gap: 1rem;
23
- min-height: 2.75rem;
24
- padding: 0.5rem 0.75rem;
25
- border-bottom: 1px solid var(--rr-code-rule);
26
- font-size: 0.8125rem;
27
- }
28
-
29
- .rr-code__title {
30
- overflow: hidden;
31
- color: var(--rr-code-muted);
32
- font-family:
33
- ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
34
- text-overflow: ellipsis;
35
- white-space: nowrap;
36
- }
37
-
38
- .rr-code__actions {
39
- display: inline-flex;
40
- flex: none;
41
- gap: 0.5rem;
42
- }
43
-
44
- .rr-code__action {
45
- border: 1px solid var(--rr-code-rule);
46
- border-radius: 0;
47
- background: transparent;
48
- color: var(--rr-code-muted);
49
- font: inherit;
50
- line-height: 1.4;
51
- cursor: pointer;
52
- padding: 0.3rem 0.5rem;
53
- }
54
-
55
- .rr-code__action:hover,
56
- .rr-code__action:focus-visible {
57
- border-color: var(--rr-code-accent);
58
- color: var(--rr-code-accent);
59
- outline: none;
60
- }
61
-
62
- .rr-code__body {
63
- overflow: auto;
64
- }
65
-
66
- .rr-code .rr-code__pre {
67
- overflow: auto;
68
- margin: 0;
69
- padding: 1rem 0;
70
- background: transparent;
71
- color: inherit;
72
- font-size: 0.875rem;
73
- line-height: 1.7;
74
- tab-size: 2;
75
- }
76
-
77
- .rr-code__pre:focus-visible {
78
- outline: 2px solid var(--rr-code-accent);
79
- outline-offset: -2px;
80
- }
81
-
82
- .rr-code__code {
83
- display: grid;
84
- min-width: 100%;
85
- }
86
-
87
- .rr-code .rr-code__code,
88
- .rr-code .rr-code__code span {
89
- color: var(--shiki-light, inherit);
90
- }
91
-
92
- :root[data-theme="dark"] .rr-code .rr-code__code,
93
- :root[data-theme="dark"] .rr-code .rr-code__code span {
94
- color: var(--shiki-dark, inherit);
95
- }
96
-
97
- @media (prefers-color-scheme: dark) {
98
- :root:not([data-theme]) .rr-code .rr-code__code,
99
- :root:not([data-theme]) .rr-code .rr-code__code span {
100
- color: var(--shiki-dark, inherit);
101
- }
102
- }
103
-
104
- .rr-code__line {
105
- display: inline-block;
106
- min-width: 100%;
107
- padding: 0 1rem;
108
- color: inherit;
109
- }
110
-
111
- .rr-code__line[data-line-number]::before {
112
- content: attr(data-line-number);
113
- display: inline-block;
114
- width: 2.5rem;
115
- margin-right: 1rem;
116
- color: var(--rr-code-muted);
117
- text-align: right;
118
- user-select: none;
119
- }
120
-
121
- .rr-code__line--highlighted {
122
- background: color-mix(in srgb, var(--rr-code-accent) 14%, transparent);
123
- }
124
-
125
- .rr-code__chars--highlighted {
126
- background: color-mix(in srgb, var(--rr-code-accent) 22%, transparent);
127
- }
128
-
129
- .rr-code__line--add {
130
- background: color-mix(in srgb, #1f883d 14%, transparent);
131
- }
132
-
133
- .rr-code__line--remove {
134
- background: color-mix(in srgb, #cf222e 14%, transparent);
135
- }
136
-
137
- .rr-code__line--prompt::before {
138
- content: "$";
139
- display: inline-block;
140
- width: 1.5rem;
141
- color: var(--rr-code-accent);
142
- user-select: none;
143
- }
144
-
145
- .rr-code__pre--wrap .rr-code__code,
146
- .rr-code__pre--wrap .rr-code__line {
147
- white-space: pre-wrap;
148
- }
149
-
150
- :root[data-theme="dark"] .rr-code,
151
- html.dark .rr-code {
152
- --rr-code-paper: var(--rb-color-paper, #000000);
153
- --rr-code-ink: var(--rb-color-ink, #ffffff);
154
- }
155
-
156
- @media (prefers-color-scheme: dark) {
157
- :root:not([data-theme]) .rr-code {
158
- --rr-code-paper: var(--rb-color-paper, #000000);
159
- --rr-code-ink: var(--rb-color-ink, #ffffff);
160
- }
161
- }
162
-
163
- .rr-code[data-terminal="true"] .rr-code__code,
164
- .rr-code[data-terminal="true"] .rr-code__code span {
165
- color: var(--shiki-dark, inherit);
166
- }
1
+ .rr-code {
2
+ --rr-code-paper: var(--rb-color-paper, #ffffff);
3
+ --rr-code-ink: var(--rb-color-ink, #000000);
4
+ --rr-code-muted: color-mix(in srgb, var(--rr-code-ink) 56%, transparent);
5
+ --rr-code-rule: color-mix(in srgb, var(--rr-code-ink) 18%, transparent);
6
+ --rr-code-accent: var(--rb-color-accent, #686868);
7
+ margin: 2rem 0;
8
+ border: 1px solid var(--rr-code-rule);
9
+ background: var(--rr-code-paper);
10
+ color: var(--rr-code-ink);
11
+ }
12
+
13
+ .rr-code[data-terminal="true"] {
14
+ --rr-code-paper: var(--rb-color-ink, #000000);
15
+ --rr-code-ink: var(--rb-color-paper, #ffffff);
16
+ }
17
+
18
+ .rr-code__header {
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: space-between;
22
+ gap: 1rem;
23
+ min-height: 2.75rem;
24
+ padding: 0.5rem 0.75rem;
25
+ border-bottom: 1px solid var(--rr-code-rule);
26
+ font-size: 0.8125rem;
27
+ }
28
+
29
+ .rr-code__title {
30
+ overflow: hidden;
31
+ color: var(--rr-code-muted);
32
+ font-family:
33
+ ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
34
+ text-overflow: ellipsis;
35
+ white-space: nowrap;
36
+ }
37
+
38
+ .rr-code__actions {
39
+ display: inline-flex;
40
+ flex: none;
41
+ gap: 0.5rem;
42
+ }
43
+
44
+ .rr-code__action {
45
+ border: 1px solid var(--rr-code-rule);
46
+ border-radius: 0;
47
+ background: transparent;
48
+ color: var(--rr-code-muted);
49
+ font: inherit;
50
+ line-height: 1.4;
51
+ cursor: pointer;
52
+ padding: 0.3rem 0.5rem;
53
+ }
54
+
55
+ .rr-code__action:hover,
56
+ .rr-code__action:focus-visible {
57
+ border-color: var(--rr-code-accent);
58
+ color: var(--rr-code-accent);
59
+ outline: none;
60
+ }
61
+
62
+ .rr-code__body {
63
+ overflow: auto;
64
+ }
65
+
66
+ .rr-code .rr-code__pre {
67
+ overflow: auto;
68
+ margin: 0;
69
+ padding: 1rem 0;
70
+ background: transparent;
71
+ color: inherit;
72
+ font-size: 0.875rem;
73
+ line-height: 1.7;
74
+ tab-size: 2;
75
+ }
76
+
77
+ .rr-code__pre:focus-visible {
78
+ outline: 2px solid var(--rr-code-accent);
79
+ outline-offset: -2px;
80
+ }
81
+
82
+ .rr-code__code {
83
+ display: grid;
84
+ min-width: 100%;
85
+ }
86
+
87
+ .rr-code .rr-code__code,
88
+ .rr-code .rr-code__code span {
89
+ color: var(--shiki-light, inherit);
90
+ }
91
+
92
+ :root[data-theme="dark"] .rr-code .rr-code__code,
93
+ :root[data-theme="dark"] .rr-code .rr-code__code span {
94
+ color: var(--shiki-dark, inherit);
95
+ }
96
+
97
+ @media (prefers-color-scheme: dark) {
98
+ :root:not([data-theme]) .rr-code .rr-code__code,
99
+ :root:not([data-theme]) .rr-code .rr-code__code span {
100
+ color: var(--shiki-dark, inherit);
101
+ }
102
+ }
103
+
104
+ .rr-code__line {
105
+ display: inline-block;
106
+ min-width: 100%;
107
+ padding: 0 1rem;
108
+ color: inherit;
109
+ }
110
+
111
+ .rr-code__line[data-line-number]::before {
112
+ content: attr(data-line-number);
113
+ display: inline-block;
114
+ width: 2.5rem;
115
+ margin-right: 1rem;
116
+ color: var(--rr-code-muted);
117
+ text-align: right;
118
+ user-select: none;
119
+ }
120
+
121
+ .rr-code__line--highlighted {
122
+ background: color-mix(in srgb, var(--rr-code-accent) 14%, transparent);
123
+ }
124
+
125
+ .rr-code__chars--highlighted {
126
+ background: color-mix(in srgb, var(--rr-code-accent) 22%, transparent);
127
+ }
128
+
129
+ .rr-code__line--add {
130
+ background: color-mix(in srgb, #1f883d 14%, transparent);
131
+ }
132
+
133
+ .rr-code__line--remove {
134
+ background: color-mix(in srgb, #cf222e 14%, transparent);
135
+ }
136
+
137
+ .rr-code__line--prompt::before {
138
+ content: "$";
139
+ display: inline-block;
140
+ width: 1.5rem;
141
+ color: var(--rr-code-accent);
142
+ user-select: none;
143
+ }
144
+
145
+ .rr-code__pre--wrap .rr-code__code,
146
+ .rr-code__pre--wrap .rr-code__line {
147
+ white-space: pre-wrap;
148
+ }
149
+
150
+ :root[data-theme="dark"] .rr-code,
151
+ html.dark .rr-code {
152
+ --rr-code-paper: var(--rb-color-paper, #000000);
153
+ --rr-code-ink: var(--rb-color-ink, #ffffff);
154
+ }
155
+
156
+ @media (prefers-color-scheme: dark) {
157
+ :root:not([data-theme]) .rr-code {
158
+ --rr-code-paper: var(--rb-color-paper, #000000);
159
+ --rr-code-ink: var(--rb-color-ink, #ffffff);
160
+ }
161
+ }
162
+
163
+ .rr-code[data-terminal="true"] .rr-code__code,
164
+ .rr-code[data-terminal="true"] .rr-code__code span {
165
+ color: var(--shiki-dark, inherit);
166
+ }