docyard 0.7.0 → 0.8.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 (112) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +5 -1
  3. data/CHANGELOG.md +20 -1
  4. data/lib/docyard/build/asset_bundler.rb +22 -7
  5. data/lib/docyard/build/file_copier.rb +49 -27
  6. data/lib/docyard/build/sitemap_generator.rb +6 -6
  7. data/lib/docyard/build/static_generator.rb +85 -12
  8. data/lib/docyard/builder.rb +6 -6
  9. data/lib/docyard/config/branding_resolver.rb +126 -17
  10. data/lib/docyard/config/constants.rb +6 -4
  11. data/lib/docyard/config/validator.rb +122 -99
  12. data/lib/docyard/config.rb +36 -43
  13. data/lib/docyard/initializer.rb +15 -76
  14. data/lib/docyard/navigation/breadcrumb_builder.rb +133 -0
  15. data/lib/docyard/navigation/prev_next_builder.rb +4 -1
  16. data/lib/docyard/navigation/sidebar/children_discoverer.rb +51 -0
  17. data/lib/docyard/navigation/sidebar/config_parser.rb +136 -108
  18. data/lib/docyard/navigation/sidebar/file_resolver.rb +78 -0
  19. data/lib/docyard/navigation/sidebar/file_system_scanner.rb +2 -1
  20. data/lib/docyard/navigation/sidebar/item.rb +45 -7
  21. data/lib/docyard/navigation/sidebar/local_config_loader.rb +51 -0
  22. data/lib/docyard/navigation/sidebar/metadata_extractor.rb +69 -0
  23. data/lib/docyard/navigation/sidebar/metadata_reader.rb +47 -0
  24. data/lib/docyard/navigation/sidebar/path_prefixer.rb +34 -0
  25. data/lib/docyard/navigation/sidebar/renderer.rb +55 -37
  26. data/lib/docyard/navigation/sidebar/sorter.rb +21 -0
  27. data/lib/docyard/navigation/sidebar/tree_builder.rb +99 -26
  28. data/lib/docyard/navigation/sidebar/tree_filter.rb +55 -0
  29. data/lib/docyard/navigation/sidebar_builder.rb +105 -36
  30. data/lib/docyard/rendering/icon_helpers.rb +13 -0
  31. data/lib/docyard/rendering/icons/phosphor.rb +23 -1
  32. data/lib/docyard/rendering/markdown.rb +5 -0
  33. data/lib/docyard/rendering/renderer.rb +74 -34
  34. data/lib/docyard/rendering/template_resolver.rb +172 -0
  35. data/lib/docyard/routing/fallback_resolver.rb +92 -0
  36. data/lib/docyard/search/build_indexer.rb +1 -1
  37. data/lib/docyard/search/dev_indexer.rb +51 -6
  38. data/lib/docyard/search/pagefind_support.rb +2 -0
  39. data/lib/docyard/server/asset_handler.rb +24 -19
  40. data/lib/docyard/server/pagefind_handler.rb +63 -0
  41. data/lib/docyard/server/preview_server.rb +1 -1
  42. data/lib/docyard/server/rack_application.rb +81 -64
  43. data/lib/docyard/templates/assets/css/code.css +18 -51
  44. data/lib/docyard/templates/assets/css/components/breadcrumbs.css +143 -0
  45. data/lib/docyard/templates/assets/css/components/callout.css +67 -67
  46. data/lib/docyard/templates/assets/css/components/code-block.css +180 -282
  47. data/lib/docyard/templates/assets/css/components/heading-anchor.css +28 -15
  48. data/lib/docyard/templates/assets/css/components/icon.css +0 -1
  49. data/lib/docyard/templates/assets/css/components/logo.css +0 -2
  50. data/lib/docyard/templates/assets/css/components/nav-menu.css +237 -0
  51. data/lib/docyard/templates/assets/css/components/navigation.css +186 -167
  52. data/lib/docyard/templates/assets/css/components/prev-next.css +76 -47
  53. data/lib/docyard/templates/assets/css/components/search.css +186 -174
  54. data/lib/docyard/templates/assets/css/components/tab-bar.css +163 -0
  55. data/lib/docyard/templates/assets/css/components/table-of-contents.css +127 -114
  56. data/lib/docyard/templates/assets/css/components/tabs.css +119 -160
  57. data/lib/docyard/templates/assets/css/components/theme-toggle.css +48 -44
  58. data/lib/docyard/templates/assets/css/landing.css +815 -0
  59. data/lib/docyard/templates/assets/css/layout.css +489 -87
  60. data/lib/docyard/templates/assets/css/main.css +1 -3
  61. data/lib/docyard/templates/assets/css/markdown.css +111 -93
  62. data/lib/docyard/templates/assets/css/reset.css +0 -3
  63. data/lib/docyard/templates/assets/css/typography.css +43 -41
  64. data/lib/docyard/templates/assets/css/variables.css +268 -208
  65. data/lib/docyard/templates/assets/favicon.svg +7 -8
  66. data/lib/docyard/templates/assets/fonts/Inter-Variable.ttf +0 -0
  67. data/lib/docyard/templates/assets/js/components/code-block.js +24 -42
  68. data/lib/docyard/templates/assets/js/components/heading-anchor.js +26 -24
  69. data/lib/docyard/templates/assets/js/components/navigation.js +181 -70
  70. data/lib/docyard/templates/assets/js/components/search.js +0 -75
  71. data/lib/docyard/templates/assets/js/components/sidebar-toggle.js +29 -0
  72. data/lib/docyard/templates/assets/js/components/tab-navigation.js +145 -0
  73. data/lib/docyard/templates/assets/js/components/table-of-contents.js +153 -66
  74. data/lib/docyard/templates/assets/js/components/tabs.js +31 -69
  75. data/lib/docyard/templates/assets/js/theme.js +0 -3
  76. data/lib/docyard/templates/assets/logo-dark.svg +8 -2
  77. data/lib/docyard/templates/assets/logo.svg +7 -4
  78. data/lib/docyard/templates/config/docyard.yml.erb +37 -34
  79. data/lib/docyard/templates/errors/404.html.erb +1 -1
  80. data/lib/docyard/templates/errors/500.html.erb +1 -1
  81. data/lib/docyard/templates/layouts/default.html.erb +18 -67
  82. data/lib/docyard/templates/layouts/splash.html.erb +176 -0
  83. data/lib/docyard/templates/partials/_breadcrumbs.html.erb +24 -0
  84. data/lib/docyard/templates/partials/_code_block.html.erb +5 -3
  85. data/lib/docyard/templates/partials/_doc_footer.html.erb +25 -0
  86. data/lib/docyard/templates/partials/_features.html.erb +15 -0
  87. data/lib/docyard/templates/partials/_footer.html.erb +42 -0
  88. data/lib/docyard/templates/partials/_head.html.erb +22 -0
  89. data/lib/docyard/templates/partials/_header.html.erb +49 -0
  90. data/lib/docyard/templates/partials/_heading_anchor.html.erb +3 -1
  91. data/lib/docyard/templates/partials/_hero.html.erb +27 -0
  92. data/lib/docyard/templates/partials/_nav_group.html.erb +25 -11
  93. data/lib/docyard/templates/partials/_nav_leaf.html.erb +1 -1
  94. data/lib/docyard/templates/partials/_nav_menu.html.erb +42 -0
  95. data/lib/docyard/templates/partials/_nav_nested_section.html.erb +11 -0
  96. data/lib/docyard/templates/partials/_nav_section.html.erb +1 -1
  97. data/lib/docyard/templates/partials/_prev_next.html.erb +8 -2
  98. data/lib/docyard/templates/partials/_scripts.html.erb +7 -0
  99. data/lib/docyard/templates/partials/_search_modal.html.erb +2 -6
  100. data/lib/docyard/templates/partials/_search_trigger.html.erb +2 -6
  101. data/lib/docyard/templates/partials/_sidebar.html.erb +21 -4
  102. data/lib/docyard/templates/partials/_tab_bar.html.erb +25 -0
  103. data/lib/docyard/templates/partials/_table_of_contents.html.erb +12 -12
  104. data/lib/docyard/templates/partials/_table_of_contents_toggle.html.erb +1 -3
  105. data/lib/docyard/templates/partials/_tabs.html.erb +2 -2
  106. data/lib/docyard/templates/partials/_theme_toggle.html.erb +2 -11
  107. data/lib/docyard/version.rb +1 -1
  108. metadata +33 -5
  109. data/lib/docyard/templates/markdown/getting-started/installation.md.erb +0 -77
  110. data/lib/docyard/templates/markdown/guides/configuration.md.erb +0 -202
  111. data/lib/docyard/templates/markdown/guides/markdown-features.md.erb +0 -247
  112. data/lib/docyard/templates/markdown/index.md.erb +0 -82
data/lib/docyard/templates/assets/css/components/code-block.css CHANGED
@@ -1,20 +1,29 @@
1
- /* Code Block Component */
2
-
3
1
  .docyard-code-block {
4
2
  position: relative;
5
- margin: var(--space-6) 0;
3
+ margin: var(--spacing-4) 0;
4
+ border-radius: var(--radius-2xl);
5
+ overflow: hidden;
6
+ background-color: var(--code-block-bg);
7
+ border: 1px solid var(--code-block-border);
6
8
  }
7
9
 
8
- .docyard-code-block .highlight {
10
+ .docyard-code-block .highlight,
11
+ .dark .docyard-code-block .highlight {
9
12
  margin: 0;
13
+ border: none;
14
+ border-radius: 0;
15
+ background-color: transparent;
10
16
  }
11
17
 
12
- /* Titled Code Block Layout */
13
- .docyard-code-block--titled {
14
- border: 1px solid var(--color-border);
15
- border-radius: var(--radius-lg);
16
- overflow: hidden;
17
- background-color: var(--color-code-bg);
18
+ .docyard-code-block .highlight pre,
19
+ .dark .docyard-code-block .highlight pre {
20
+ margin: 0;
21
+ background-color: transparent;
22
+ }
23
+
24
+ .docyard-code-block .highlight pre code,
25
+ .dark .docyard-code-block .highlight pre code {
26
+ background-color: transparent;
18
27
  }
19
28
 
20
29
  .docyard-code-block--titled .docyard-code-block__body {
@@ -25,33 +34,21 @@
25
34
  display: block;
26
35
  }
27
36
 
28
- .docyard-code-block--titled .highlight {
29
- margin: 0;
30
- border: none;
31
- border-radius: 0;
32
- box-shadow: none;
33
- }
34
-
35
- .docyard-code-block--titled .highlight pre {
36
- margin: 0;
37
- }
38
-
39
37
  .docyard-code-block--titled .highlight pre code {
40
38
  display: block;
41
- padding: var(--space-4);
39
+ padding: var(--spacing-4);
42
40
  }
43
41
 
44
- /* Code Block Header */
45
42
  .docyard-code-block__header {
46
43
  display: flex;
47
44
  align-items: center;
48
- gap: var(--space-2);
49
- padding: var(--space-3) var(--space-4);
50
- background: var(--color-bg-secondary);
51
- border-bottom: 1px solid var(--color-border);
52
- font-size: var(--font-size-sm);
53
- font-weight: var(--font-weight-semibold);
54
- color: var(--color-text-secondary);
45
+ gap: var(--spacing-2);
46
+ padding: var(--spacing-2) var(--spacing-4);
47
+ background: var(--code-block-header-bg);
48
+ border-bottom: 1px solid var(--code-block-header-border);
49
+ font-size: var(--text-xs);
50
+ font-weight: var(--font-medium);
51
+ color: var(--muted-foreground);
55
52
  }
56
53
 
57
54
  .docyard-code-block__icon {
@@ -79,7 +76,6 @@
79
76
  white-space: nowrap;
80
77
  }
81
78
 
82
- /* Copy button in header */
83
79
  .docyard-code-block__header .docyard-code-block__copy {
84
80
  position: relative;
85
81
  top: auto;
@@ -87,46 +83,34 @@
87
83
  flex-shrink: 0;
88
84
  }
89
85
 
90
- /* Body wrapper for titled blocks */
91
86
  .docyard-code-block__body {
92
87
  position: relative;
93
88
  }
94
89
 
95
- /* Line Numbers Layout */
96
- .docyard-code-block--line-numbers {
97
- border: 1px solid var(--color-border);
98
- border-radius: var(--radius-lg);
99
- background-color: var(--color-code-bg);
100
- overflow: hidden;
101
- }
102
-
103
90
  .docyard-code-block--line-numbers .docyard-code-block__body {
104
91
  display: flex;
105
92
  }
106
93
 
107
94
  .docyard-code-block--line-numbers .highlight {
108
- border: none;
109
- border-radius: 0;
110
95
  flex: 1;
111
96
  min-width: 0;
112
97
  }
113
98
 
114
99
  .docyard-code-block__lines {
115
100
  flex-shrink: 0;
116
- padding: var(--space-4) 0;
117
- border-right: 1px solid var(--color-border);
101
+ padding: var(--spacing-4) 0;
118
102
  text-align: right;
119
103
  user-select: none;
120
- color: var(--color-text-tertiary);
104
+ background-color: var(--code-block-gutter-bg);
105
+ color: oklch(from var(--muted-foreground) l c h / 60%);
121
106
  font-family: var(--font-mono);
122
- font-size: var(--font-size-sm);
123
- line-height: var(--line-height-relaxed);
124
- background-color: var(--color-code-bg);
107
+ font-size: var(--text-sm);
108
+ line-height: var(--leading-relaxed);
125
109
  }
126
110
 
127
111
  .docyard-code-block__lines span {
128
112
  display: block;
129
- padding: 0 var(--space-3);
113
+ padding: 0 var(--spacing-3);
130
114
  min-width: 2.5rem;
131
115
  }
132
116
 
@@ -134,144 +118,127 @@
134
118
  flex: 1;
135
119
  min-width: 0;
136
120
  overflow-x: auto;
121
+ overscroll-behavior-x: contain;
137
122
  }
138
123
 
139
- /* Line Highlighting */
140
124
  .docyard-code-line {
141
125
  display: block;
142
126
  }
143
127
 
144
128
  .docyard-code-line--highlighted {
145
- background-color: rgba(var(--color-primary-rgb), 0.1);
146
- border-left: 3px solid var(--color-primary);
147
- margin-left: calc(-1 * var(--space-4));
148
- margin-right: calc(-1 * var(--space-4));
149
- padding-left: calc(var(--space-4) - 3px);
150
- padding-right: var(--space-4);
129
+ background-color: oklch(from var(--primary) l c h / 10%);
130
+ border-left: 3px solid var(--primary);
131
+ margin-left: calc(-1 * var(--spacing-4));
132
+ margin-right: calc(-1 * var(--spacing-4));
133
+ padding-left: calc(var(--spacing-4) - 3px);
134
+ padding-right: var(--spacing-4);
151
135
  }
152
136
 
153
- /* Highlighted line number */
154
137
  .docyard-code-block__line--highlighted {
155
- background-color: rgba(var(--color-primary-rgb), 0.15);
156
- color: var(--color-primary);
138
+ background-color: oklch(from var(--primary) l c h / 15%);
139
+ color: var(--primary);
157
140
  font-weight: 500;
158
141
  }
159
142
 
160
- /* Diff line styles */
161
143
  .docyard-code-line--diff-add {
162
- background-color: var(--color-diff-add-bg);
163
- border-left: 3px solid var(--color-diff-add-border);
164
- margin-left: calc(-1 * var(--space-4));
165
- margin-right: calc(-1 * var(--space-4));
166
- padding-left: calc(var(--space-4) - 3px);
167
- padding-right: var(--space-4);
144
+ background-color: var(--diff-add-background);
145
+ border-left: 3px solid var(--diff-add-border);
146
+ margin-left: calc(-1 * var(--spacing-4));
147
+ margin-right: calc(-1 * var(--spacing-4));
148
+ padding-left: calc(var(--spacing-4) - 3px);
149
+ padding-right: var(--spacing-4);
168
150
  }
169
151
 
170
152
  .docyard-code-line--diff-remove {
171
- background-color: var(--color-diff-remove-bg);
172
- border-left: 3px solid var(--color-diff-remove-border);
173
- margin-left: calc(-1 * var(--space-4));
174
- margin-right: calc(-1 * var(--space-4));
175
- padding-left: calc(var(--space-4) - 3px);
176
- padding-right: var(--space-4);
153
+ background-color: var(--diff-remove-background);
154
+ border-left: 3px solid var(--diff-remove-border);
155
+ margin-left: calc(-1 * var(--spacing-4));
156
+ margin-right: calc(-1 * var(--spacing-4));
157
+ padding-left: calc(var(--spacing-4) - 3px);
158
+ padding-right: var(--spacing-4);
177
159
  }
178
160
 
179
- /* Error/Warning line styles */
180
161
  .docyard-code-line--error {
181
- background-color: var(--color-code-error-bg, rgba(239, 68, 68, 0.15));
182
- border-left: 3px solid var(--color-code-error-border, #ef4444);
183
- margin-left: calc(-1 * var(--space-4));
184
- margin-right: calc(-1 * var(--space-4));
185
- padding-left: calc(var(--space-4) - 3px);
186
- padding-right: var(--space-4);
162
+ background-color: var(--code-error-background);
163
+ border-left: 3px solid var(--code-error-border);
164
+ margin-left: calc(-1 * var(--spacing-4));
165
+ margin-right: calc(-1 * var(--spacing-4));
166
+ padding-left: calc(var(--spacing-4) - 3px);
167
+ padding-right: var(--spacing-4);
187
168
  }
188
169
 
189
170
  .docyard-code-line--warning {
190
- background-color: var(--color-code-warning-bg, rgba(245, 158, 11, 0.15));
191
- border-left: 3px solid var(--color-code-warning-border, #f59e0b);
192
- margin-left: calc(-1 * var(--space-4));
193
- margin-right: calc(-1 * var(--space-4));
194
- padding-left: calc(var(--space-4) - 3px);
195
- padding-right: var(--space-4);
171
+ background-color: var(--code-warning-background);
172
+ border-left: 3px solid var(--code-warning-border);
173
+ margin-left: calc(-1 * var(--spacing-4));
174
+ margin-right: calc(-1 * var(--spacing-4));
175
+ padding-left: calc(var(--spacing-4) - 3px);
176
+ padding-right: var(--spacing-4);
196
177
  }
197
178
 
198
- /* Diff gutter indicators */
199
179
  .docyard-code-block__line--diff-add {
200
- background-color: var(--color-diff-add-gutter-bg);
201
- color: var(--color-diff-add-indicator);
180
+ background-color: var(--diff-add-gutter);
181
+ color: var(--diff-add-indicator);
202
182
  font-weight: 500;
203
183
  }
204
184
 
205
185
  .docyard-code-block__line--diff-remove {
206
- background-color: var(--color-diff-remove-gutter-bg);
207
- color: var(--color-diff-remove-indicator);
186
+ background-color: var(--diff-remove-gutter);
187
+ color: var(--diff-remove-indicator);
208
188
  font-weight: 500;
209
189
  }
210
190
 
211
- /* Error/Warning line number indicators */
212
191
  .docyard-code-block__line--error {
213
- background-color: var(--color-code-error-gutter-bg, rgba(239, 68, 68, 0.2));
214
- color: var(--color-code-error-indicator, #991b1b);
192
+ background-color: var(--code-error-gutter);
193
+ color: var(--code-error-indicator);
215
194
  font-weight: 500;
216
195
  }
217
196
 
218
197
  .docyard-code-block__line--warning {
219
- background-color: var(--color-code-warning-gutter-bg, rgba(245, 158, 11, 0.2));
220
- color: var(--color-code-warning-indicator, #78350f);
198
+ background-color: var(--code-warning-gutter);
199
+ color: var(--code-warning-indicator);
221
200
  font-weight: 500;
222
201
  }
223
202
 
224
- /* Diff-only gutter */
225
- .docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
226
- border: 1px solid var(--color-border);
227
- border-radius: var(--radius-lg);
228
- background-color: var(--color-code-bg);
229
- overflow: hidden;
230
- }
231
-
232
203
  .docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
233
204
  display: flex;
234
205
  }
235
206
 
236
207
  .docyard-code-block--diff:not(.docyard-code-block--line-numbers) .highlight {
237
- border: none;
238
- border-radius: 0;
239
208
  flex: 1;
240
209
  min-width: 0;
241
210
  }
242
211
 
243
212
  .docyard-code-block__diff-gutter {
244
213
  flex-shrink: 0;
245
- padding: var(--space-4) 0;
246
- border-right: 1px solid var(--color-border);
214
+ padding: var(--spacing-4) 0;
247
215
  text-align: center;
248
216
  user-select: none;
249
- color: var(--color-text-tertiary);
217
+ background-color: var(--code-block-gutter-bg);
218
+ color: oklch(from var(--muted-foreground) l c h / 60%);
250
219
  font-family: var(--font-mono);
251
- font-size: var(--font-size-sm);
252
- line-height: var(--line-height-relaxed);
253
- background-color: var(--color-code-bg);
220
+ font-size: var(--text-sm);
221
+ line-height: var(--leading-relaxed);
254
222
  }
255
223
 
256
224
  .docyard-code-block__diff-gutter span {
257
225
  display: block;
258
- padding: 0 var(--space-2);
226
+ padding: 0 var(--spacing-2);
259
227
  min-width: 1.5rem;
260
228
  }
261
229
 
262
230
  .docyard-code-block__diff-indicator--add {
263
- background-color: var(--color-diff-add-gutter-bg);
264
- color: var(--color-diff-add-indicator);
231
+ background-color: var(--diff-add-gutter);
232
+ color: var(--diff-add-indicator);
265
233
  font-weight: 600;
266
234
  }
267
235
 
268
236
  .docyard-code-block__diff-indicator--remove {
269
- background-color: var(--color-diff-remove-gutter-bg);
270
- color: var(--color-diff-remove-indicator);
237
+ background-color: var(--diff-remove-gutter);
238
+ color: var(--diff-remove-indicator);
271
239
  font-weight: 600;
272
240
  }
273
241
 
274
- /* With line numbers - reset margins, they extend via negative margin */
275
242
  .docyard-code-block--line-numbers .docyard-code-line {
276
243
  margin-left: 0;
277
244
  margin-right: 0;
@@ -282,11 +249,10 @@
282
249
  .docyard-code-block--line-numbers .docyard-code-line--diff-remove,
283
250
  .docyard-code-block--line-numbers .docyard-code-line--error,
284
251
  .docyard-code-block--line-numbers .docyard-code-line--warning {
285
- margin-left: calc(-1 * var(--space-4));
286
- margin-right: calc(-1 * var(--space-4));
252
+ margin-left: calc(-1 * var(--spacing-4));
253
+ margin-right: calc(-1 * var(--spacing-4));
287
254
  }
288
255
 
289
- /* With diff gutter - reset margins, they extend via negative margin */
290
256
  .docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line {
291
257
  margin-left: 0;
292
258
  margin-right: 0;
@@ -294,30 +260,10 @@
294
260
 
295
261
  .docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-add,
296
262
  .docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-line--diff-remove {
297
- margin-left: calc(-1 * var(--space-4));
298
- margin-right: calc(-1 * var(--space-4));
299
- }
300
-
301
- /* Error/Warning blocks without line numbers */
302
- .docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff),
303
- .docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) {
304
- border: 1px solid var(--color-border);
305
- border-radius: var(--radius-lg);
306
- background-color: var(--color-code-bg);
307
- overflow: hidden;
308
- }
309
-
310
- .docyard-code-block--has-error:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight,
311
- .docyard-code-block--has-warning:not(.docyard-code-block--line-numbers):not(.docyard-code-block--diff) .highlight {
312
- border: none;
313
- border-radius: 0;
314
- }
315
-
316
- .docyard-code-block__content .highlight {
317
- background-color: transparent;
263
+ margin-left: calc(-1 * var(--spacing-4));
264
+ margin-right: calc(-1 * var(--spacing-4));
318
265
  }
319
266
 
320
- /* Focus Effect */
321
267
  .docyard-code-block--has-focus .docyard-code-line {
322
268
  opacity: 0.4;
323
269
  filter: blur(0.5px);
@@ -329,47 +275,11 @@
329
275
  filter: none;
330
276
  }
331
277
 
332
- /* On hover, reveal all lines */
333
278
  .docyard-code-block--has-focus:hover .docyard-code-line {
334
279
  opacity: 1;
335
280
  filter: none;
336
281
  }
337
282
 
338
- /* Dark mode line numbers */
339
- .dark .docyard-code-block--line-numbers {
340
- background-color: #161b22;
341
- }
342
-
343
- .dark .docyard-code-block__lines {
344
- background-color: #161b22;
345
- border-right-color: var(--color-border);
346
- }
347
-
348
- /* Dark mode diff */
349
- .dark .docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
350
- background-color: #161b22;
351
- }
352
-
353
- .dark .docyard-code-block__diff-gutter {
354
- background-color: #161b22;
355
- border-right-color: var(--color-border);
356
- }
357
-
358
- /* Dark mode titled block */
359
- .dark .docyard-code-block--titled {
360
- background-color: #161b22;
361
- }
362
-
363
- .dark .docyard-code-block__header {
364
- background-color: rgba(255, 255, 255, 0.03);
365
- }
366
-
367
- /* Titled block with line numbers */
368
- .docyard-code-block--titled.docyard-code-block--line-numbers {
369
- display: block;
370
- border: 1px solid var(--color-border);
371
- }
372
-
373
283
  .docyard-code-block--titled.docyard-code-block--line-numbers .docyard-code-block__body {
374
284
  display: flex;
375
285
  }
@@ -379,12 +289,6 @@
379
289
  min-width: 0;
380
290
  }
381
291
 
382
- /* Titled block with diff */
383
- .docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) {
384
- display: block;
385
- border: 1px solid var(--color-border);
386
- }
387
-
388
292
  .docyard-code-block--titled.docyard-code-block--diff:not(.docyard-code-block--line-numbers) .docyard-code-block__body {
389
293
  display: flex;
390
294
  }
@@ -394,27 +298,25 @@
394
298
  min-width: 0;
395
299
  }
396
300
 
397
- /* Inside tabs - with :has() support */
398
301
  @supports selector(:has(*)) {
399
302
  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .docyard-code-block {
400
303
  margin: 0;
401
304
  }
402
305
 
403
306
  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) .docyard-code-block {
404
- margin: var(--space-4) 0;
307
+ margin: var(--spacing-4) 0;
405
308
  }
406
309
  }
407
310
 
408
- /* Inside tabs - fallback for browsers without :has() */
409
311
  @supports not selector(:has(*)) {
410
312
  .docyard-tabs__panel .docyard-code-block {
411
- margin: var(--space-4) 0;
313
+ margin: var(--spacing-4) 0;
412
314
  }
413
315
  }
414
316
 
415
- /* Inside callouts */
416
317
  .docyard-callout__body .docyard-code-block {
417
- margin: var(--space-4) 0;
318
+ margin: var(--spacing-4) 0;
319
+ background-color: var(--background);
418
320
  }
419
321
 
420
322
  .docyard-callout__body .docyard-code-block:first-child {
@@ -427,115 +329,133 @@
427
329
 
428
330
  .docyard-code-block__copy {
429
331
  position: absolute;
430
- top: var(--space-3);
431
- right: var(--space-3);
432
- display: flex;
332
+ top: var(--spacing-3);
333
+ right: var(--spacing-3);
334
+ display: inline-flex;
433
335
  align-items: center;
434
336
  justify-content: center;
435
- width: 32px;
436
- height: 32px;
437
- padding: 0;
438
- border: 1px solid var(--color-border);
439
- border-radius: var(--radius-md);
440
- background-color: var(--color-bg);
441
- color: var(--color-text-secondary);
337
+ gap: var(--spacing-1-5);
338
+ height: 1.75rem;
339
+ padding: 0 var(--spacing-2-5);
340
+ border: none;
341
+ border-radius: 9999px;
342
+ background-color: var(--code-block-copy-bg);
343
+ color: var(--muted-foreground);
442
344
  cursor: pointer;
443
- transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
345
+ flex-shrink: 0;
346
+
347
+ transition:
348
+ transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
349
+ background-color 0.2s ease,
350
+ color 0.2s ease,
351
+ box-shadow 0.2s ease;
352
+
353
+ box-shadow: var(--code-block-copy-shadow);
444
354
  }
445
355
 
446
356
  .docyard-code-block__copy:hover {
447
- background-color: var(--color-bg-secondary);
448
- border-color: var(--color-text-tertiary);
449
- color: var(--color-text);
357
+ background-color: var(--code-block-copy-bg-hover);
358
+ color: var(--foreground);
359
+
360
+ box-shadow: var(--code-block-copy-shadow-hover);
450
361
  }
451
362
 
452
363
  .docyard-code-block__copy:active {
453
- transform: scale(0.95);
364
+ transform: scale(0.92);
365
+ transition:
366
+ transform 0.1s cubic-bezier(0.4, 0, 1, 1),
367
+ background-color 0.1s ease,
368
+ box-shadow 0.1s ease;
369
+
370
+ box-shadow: var(--code-block-copy-shadow-active);
454
371
  }
455
372
 
456
373
  .docyard-code-block__copy:focus-visible {
457
- outline: 2px solid var(--color-primary);
458
- outline-offset: 2px;
374
+ outline: none;
375
+ box-shadow:
376
+ 0 1px 2px oklch(from var(--foreground) l c h / 5%),
377
+ 0 0 0 2px var(--background),
378
+ 0 0 0 4px var(--ring);
459
379
  }
460
380
 
461
- /* Icon sizing */
462
- .docyard-code-block__copy svg {
463
- width: 16px;
464
- height: 16px;
465
- transition: transform 0.2s ease, opacity 0.2s ease;
381
+ .docyard-code-block__copy-icon {
382
+ display: inline-flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ flex-shrink: 0;
386
+ }
387
+
388
+ .docyard-code-block__copy-icon svg {
389
+ width: 0.875rem;
390
+ height: 0.875rem;
391
+ }
392
+
393
+ .docyard-code-block__copy-text {
394
+ font-size: var(--text-xs);
395
+ font-weight: var(--font-medium);
396
+ font-family: var(--font-sans);
397
+ line-height: 1;
466
398
  }
467
399
 
468
- /* Success state */
469
400
  .docyard-code-block__copy.is-success {
470
- opacity: 1;
471
- visibility: visible;
472
- background-color: var(--color-primary);
473
- border-color: var(--color-primary);
401
+ background-color: var(--primary);
474
402
  color: white;
475
- animation: success-pulse 0.4s ease;
403
+ box-shadow:
404
+ 0 1px 2px oklch(from var(--primary) l c h / 20%),
405
+ 0 0 0 1px oklch(from var(--primary) l c h / 30%);
476
406
  }
477
407
 
478
408
  .docyard-code-block__copy.is-success:hover {
479
- background-color: var(--color-primary-hover);
480
- border-color: var(--color-primary-hover);
409
+ background-color: oklch(from var(--primary) calc(l - 0.03) c h);
481
410
  color: white;
411
+ box-shadow:
412
+ 0 2px 4px oklch(from var(--primary) l c h / 25%),
413
+ 0 0 0 1px oklch(from var(--primary) l c h / 35%);
482
414
  }
483
415
 
484
- .docyard-code-block__copy.is-success svg {
485
- animation: check-pop 0.3s ease;
486
- }
487
-
488
- /* Success animation */
489
- @keyframes success-pulse {
490
- 0% {
491
- transform: scale(1);
492
- }
493
-
494
- 50% {
495
- transform: scale(1.1);
496
- }
497
-
498
- 100% {
499
- transform: scale(1);
500
- }
416
+ .docyard-code-block__copy.is-success .docyard-code-block__copy-icon svg {
417
+ animation: check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
501
418
  }
502
419
 
503
420
  @keyframes check-pop {
504
421
  0% {
505
- transform: scale(0) rotate(-45deg);
506
422
  opacity: 0;
423
+ transform: scale(0);
424
+ }
425
+
426
+ 40% {
427
+ opacity: 1;
428
+ transform: scale(1.2);
507
429
  }
508
430
 
509
- 50% {
510
- transform: scale(1.2) rotate(10deg);
431
+ 70% {
432
+ transform: scale(0.9);
511
433
  }
512
434
 
513
435
  100% {
514
- transform: scale(1) rotate(0deg);
515
436
  opacity: 1;
437
+ transform: scale(1);
516
438
  }
517
439
  }
518
440
 
519
- /* Error state */
520
441
  .docyard-code-block__copy.is-error {
521
442
  opacity: 1;
522
443
  visibility: visible;
523
- background-color: #ef4444;
524
- border-color: #ef4444;
444
+ background-color: var(--destructive);
445
+ border-color: var(--destructive);
525
446
  color: white;
526
447
  }
527
448
 
528
449
  .docyard-code-block__copy.is-error:hover {
529
- background-color: #dc2626;
530
- border-color: #dc2626;
450
+ background-color: oklch(from var(--destructive) calc(l - 0.05) c h);
451
+ border-color: oklch(from var(--destructive) calc(l - 0.05) c h);
531
452
  color: white;
532
453
  }
533
454
 
534
- /* Mobile responsive - header */
535
455
  @media (max-width: 640px) {
536
456
  .docyard-code-block__header {
537
- padding: var(--space-2) var(--space-3);
538
- gap: var(--space-2);
457
+ padding: var(--spacing-2) var(--spacing-3);
458
+ gap: var(--spacing-2);
539
459
  }
540
460
 
541
461
  .docyard-code-block__icon .docyard-icon {
@@ -544,47 +464,25 @@
544
464
  }
545
465
 
546
466
  .docyard-code-block__header .docyard-code-block__copy {
547
- width: 28px;
548
- height: 28px;
467
+ height: 1.5rem;
468
+ padding: 0 var(--spacing-2);
469
+ gap: var(--spacing-1);
549
470
  }
550
471
 
551
- .docyard-code-block__header .docyard-code-block__copy svg {
552
- width: 14px;
553
- height: 14px;
472
+ .docyard-code-block__copy-icon svg {
473
+ width: 0.75rem;
474
+ height: 0.75rem;
554
475
  }
555
- }
556
-
557
- /* Dark mode adjustments */
558
- .dark .docyard-code-block__copy {
559
- background-color: var(--color-bg-secondary);
560
- border-color: var(--color-border);
561
- }
562
-
563
- .dark .docyard-code-block__copy:hover {
564
- background-color: var(--color-bg-tertiary);
565
- border-color: var(--color-text-tertiary);
566
- }
567
476
 
568
- /* Dark mode success state */
569
- .dark .docyard-code-block__copy.is-success {
570
- background-color: var(--color-primary);
571
- border-color: var(--color-primary);
572
- }
573
-
574
- .dark .docyard-code-block__copy.is-success:hover {
575
- background-color: var(--color-primary-hover);
576
- border-color: var(--color-primary-hover);
577
- }
578
-
579
- .dark .docyard-code-block__copy.is-error {
580
- background-color: #ef4444;
581
- border-color: #ef4444;
477
+ .docyard-code-block__copy-text {
478
+ font-size: 0.625rem;
479
+ }
582
480
  }
583
481
 
584
- /* Reduced motion */
585
482
  @media (prefers-reduced-motion: reduce) {
483
+
586
484
  .docyard-code-block__copy,
587
- .docyard-code-block__copy svg {
485
+ .docyard-code-block__copy-icon svg {
588
486
  transition: none;
589
487
  animation: none;
590
488
  }