@primer/doctocat-nextjs 0.0.1 → 0.0.2-rc.1da8f9a

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 (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/components/layout/index-cards/IndexCards.tsx +9 -8
  3. package/components/layout/nav-drawer/NavDrawer.tsx +2 -1
  4. package/components/layout/root-layout/Theme.tsx +6 -3
  5. package/components/layout/sidebar/Sidebar.tsx +14 -7
  6. package/css/global.css +174 -0
  7. package/package.json +1 -1
  8. package/css/code-block-overrides.css +0 -162
package/CHANGELOG.md ADDED
@@ -0,0 +1,9 @@
1
+ # @primer/doctocat-nextjs
2
+
3
+ ## 0.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#4](https://github.com/primer/doctocat-nextjs/pull/4) [`4f28982`](https://github.com/primer/doctocat-nextjs/commit/4f28982e327e75f199f28fad987f1e827deafeb2) Thanks [@joseph-lozano](https://github.com/joseph-lozano)! - Wrap links with Next's Link component
8
+
9
+ - [#2](https://github.com/primer/doctocat-nextjs/pull/2) [`2742b32`](https://github.com/primer/doctocat-nextjs/commit/2742b3214e7a53416d23f0459dc389f7c22cf5a1) Thanks [@rezrah](https://github.com/rezrah)! - Remove code blocks stylesheet, now merged into global.css
package/components/layout/index-cards/IndexCards.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import {Card, Grid} from '@primer/react-brand'
3
3
  import {Folder, MdxFile} from 'nextra'
4
- import {useRouter} from 'next/router'
5
4
 
6
5
  import styles from './IndexCards.module.css'
6
+ import Link from 'next/link'
7
7
 
8
8
  type IndexCardsProps = {
9
9
  route: string
@@ -22,7 +22,6 @@ type DocsItem = (MdxFile | FolderWithoutChildren) & {
22
22
  }
23
23
 
24
24
  export function IndexCards({route, folderData}: IndexCardsProps) {
25
- const {basePath} = useRouter()
26
25
  const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
27
26
 
28
27
  return (
@@ -31,12 +30,14 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
31
30
  if (item.kind !== 'MdxPage') return null
32
31
  return (
33
32
  <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
34
- <Card href={`${basePath}${item.route}`} hasBorder style={{width: '100%'}}>
35
- {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
36
- {item.frontMatter && item.frontMatter.description && (
37
- <Card.Description>{item.frontMatter.description}</Card.Description>
38
- )}
39
- </Card>
33
+ <Link href={item.route} legacyBehavior passHref>
34
+ <Card href="#" hasBorder style={{width: '100%'}}>
35
+ {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
36
+ {item.frontMatter && item.frontMatter.description && (
37
+ <Card.Description>{item.frontMatter.description}</Card.Description>
38
+ )}
39
+ </Card>
40
+ </Link>
40
41
  </Grid.Column>
41
42
  )
42
43
  })}
package/components/layout/nav-drawer/NavDrawer.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react'
2
+ import NextLink from 'next/link'
2
3
  import {Box, IconButton, Link, ThemeProvider} from '@primer/react'
3
4
  import {XIcon} from '@primer/octicons-react'
4
5
 
@@ -34,7 +35,7 @@ export function NavDrawer({isOpen, onDismiss, navItems}: NavDrawerProps) {
34
35
  }}
35
36
  >
36
37
  <Box sx={{py: 20, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
37
- <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
38
+ <Link as={NextLink} href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
38
39
  Explore
39
40
  </Link>
40
41
  <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
package/components/layout/root-layout/Theme.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, {useMemo} from 'react'
2
+ import NextLink from 'next/link'
2
3
  import Head from 'next/head'
3
4
  import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
4
5
  import {useFSRoute} from 'nextra/hooks'
@@ -36,7 +37,7 @@ const {publicRuntimeConfig} = getConfig()
36
37
 
37
38
  export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
38
39
  const {title, frontMatter, headings, filePath, pageMap, route} = pageOpts
39
- const {locale = 'en-US', defaultLocale, basePath} = useRouter()
40
+ const {locale = 'en-US', defaultLocale} = useRouter()
40
41
  const fsPath = useFSRoute()
41
42
  const {colorMode} = useColorMode()
42
43
  const {activePath, topLevelNavbarItems, docsDirectories, flatDocsDirectories} = useMemo(
@@ -96,7 +97,8 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
96
97
  <Breadcrumbs>
97
98
  {siteTitle && (
98
99
  <Breadcrumbs.Item
99
- href={basePath || '/'}
100
+ as={NextLink}
101
+ href="/"
100
102
  sx={{
101
103
  color: 'var(--brand-InlineLink-color-rest)',
102
104
  }}
@@ -107,8 +109,9 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
107
109
  {activePath.map((item, index) => {
108
110
  return (
109
111
  <Breadcrumbs.Item
112
+ as={NextLink}
110
113
  key={item.name}
111
- href={`${basePath}${item.route}`}
114
+ href={item.route}
112
115
  selected={index === activePath.length - 1}
113
116
  sx={{
114
117
  textTransform: 'capitalize',
package/components/layout/sidebar/Sidebar.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, {useMemo} from 'react'
2
+ import NextLink from 'next/link'
2
3
  import {NavList} from '@primer/react'
3
4
  import {Folder, MdxFile, PageMapItem} from 'nextra'
4
5
  import {useRouter} from 'next/router'
@@ -60,7 +61,6 @@ function getOcticonForType(type?: string): Icon | undefined {
60
61
 
61
62
  export function Sidebar({pageMap}: SidebarProps) {
62
63
  const router = useRouter()
63
- const basePath = router.basePath
64
64
 
65
65
  const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
66
66
 
@@ -94,7 +94,7 @@ export function Sidebar({pageMap}: SidebarProps) {
94
94
 
95
95
  if (item.kind === 'MdxPage') {
96
96
  return (
97
- <NavList.Item key={item.name} href={`${basePath}${item.route}`} sx={{textTransform: 'capitalize'}}>
97
+ <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
98
98
  {item.frontMatter?.title ?? item.name}
99
99
  </NavList.Item>
100
100
  )
@@ -109,7 +109,7 @@ export function Sidebar({pageMap}: SidebarProps) {
109
109
  const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
110
110
  if (shouldShowTabs) {
111
111
  return (
112
- <NavList.Item key={indexPage.name} href={`${basePath}${indexPage.route}`}>
112
+ <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
113
113
  {(indexPage as MdxFile).frontMatter?.title || item.name}
114
114
  </NavList.Item>
115
115
  )
@@ -129,8 +129,9 @@ export function Sidebar({pageMap}: SidebarProps) {
129
129
  if (child.kind === 'MdxPage') {
130
130
  return (
131
131
  <NavList.Item
132
+ as={NextLink}
132
133
  key={child.name}
133
- href={`${basePath}${child.route}`}
134
+ href={child.route}
134
135
  aria-current={child.route === router.pathname ? 'page' : undefined}
135
136
  >
136
137
  {(child as MdxFile).frontMatter?.title || item.name}
@@ -144,8 +145,9 @@ export function Sidebar({pageMap}: SidebarProps) {
144
145
  )
145
146
  return (
146
147
  <NavList.Item
147
- key={`${(landingPageItem as MdxFile).route}`}
148
- href={`${basePath}${(landingPageItem as MdxFile).route}`}
148
+ as={NextLink}
149
+ key={(landingPageItem as MdxFile).route}
150
+ href={(landingPageItem as MdxFile).route}
149
151
  sx={{textTransform: 'capitalize'}}
150
152
  aria-current={(landingPageItem as MdxFile).route === router.pathname ? 'page' : undefined}
151
153
  >
@@ -170,7 +172,12 @@ export function Sidebar({pageMap}: SidebarProps) {
170
172
  const LeadingIcon = getOcticonForType(leadingIcon)
171
173
 
172
174
  return (
173
- <NavList.Item key={link.title} href={link.href} target={isExternalUrl ? '_blank' : undefined}>
175
+ <NavList.Item
176
+ as={NextLink}
177
+ key={link.title}
178
+ href={link.href}
179
+ target={isExternalUrl ? '_blank' : undefined}
180
+ >
174
181
  <NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
175
182
  {link.title}
176
183
  {isExternalUrl && (
package/css/global.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * Global
3
+ */
4
+
1
5
  html,
2
6
  body {
3
7
  background-color: var(--brand-color-canvas-default) !important;
@@ -9,3 +13,173 @@ body {
9
13
  .exclude-from-prose * + * {
10
14
  margin-block-start: 0 !important;
11
15
  }
16
+
17
+ /**
18
+ * Code block overrides
19
+ */
20
+
21
+ :root {
22
+ --shiki-color-text: #414141;
23
+ --shiki-color-background: transparent;
24
+ --shiki-token-constant: #1976d2;
25
+ --shiki-token-string: #22863a;
26
+ --shiki-token-comment: #aaa;
27
+ --shiki-token-keyword: #d32f2f;
28
+ --shiki-token-parameter: #ff9801;
29
+ --shiki-token-function: #6f42c1;
30
+ --shiki-token-string-expression: var(--shiki-token-string);
31
+ --shiki-token-punctuation: #212121;
32
+ --shiki-token-link: var(--shiki-token-string);
33
+ --shiki-color-ansi-black: #24292e;
34
+ --shiki-color-ansi-black-dim: rgba(36, 41, 46, 0.5);
35
+ --shiki-color-ansi-red: #d73a49;
36
+ --shiki-color-ansi-red-dim: rgba(215, 58, 73, 0.5);
37
+ --shiki-color-ansi-green: #28a745;
38
+ --shiki-color-ansi-green-dim: rgba(40, 167, 69, 0.5);
39
+ --shiki-color-ansi-yellow: #dbab09;
40
+ --shiki-color-ansi-yellow-dim: rgba(219, 171, 9, 0.5);
41
+ --shiki-color-ansi-blue: #0366d6;
42
+ --shiki-color-ansi-blue-dim: rgba(3, 102, 214, 0.5);
43
+ --shiki-color-ansi-magenta: #5a32a3;
44
+ --shiki-color-ansi-magenta-dim: rgba(90, 50, 163, 0.5);
45
+ --shiki-color-ansi-cyan: #1b7c83;
46
+ --shiki-color-ansi-cyan-dim: rgba(27, 124, 131, 0.5);
47
+ --shiki-color-ansi-white: #6a737d;
48
+ --shiki-color-ansi-white-dim: rgba(106, 115, 125, 0.5);
49
+ --shiki-color-ansi-bright-black: #959da5;
50
+ --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
51
+ --shiki-color-ansi-bright-red: #cb2431;
52
+ --shiki-color-ansi-bright-red-dim: rgba(203, 36, 49, 0.5);
53
+ --shiki-color-ansi-bright-green: #22863a;
54
+ --shiki-color-ansi-bright-green-dim: rgba(34, 134, 58, 0.5);
55
+ --shiki-color-ansi-bright-yellow: #b08800;
56
+ --shiki-color-ansi-bright-yellow-dim: rgba(176, 136, 0, 0.5);
57
+ --shiki-color-ansi-bright-blue: #005cc5;
58
+ --shiki-color-ansi-bright-blue-dim: rgba(0, 92, 197, 0.5);
59
+ --shiki-color-ansi-bright-magenta: #5a32a3;
60
+ --shiki-color-ansi-bright-magenta-dim: rgba(90, 50, 163, 0.5);
61
+ --shiki-color-ansi-bright-cyan: #3192aa;
62
+ --shiki-color-ansi-bright-cyan-dim: rgba(49, 146, 170, 0.5);
63
+ --shiki-color-ansi-bright-white: #d1d5da;
64
+ --shiki-color-ansi-bright-white-dim: rgba(209, 213, 218, 0.5);
65
+ }
66
+
67
+ [data-color-mode='dark'] {
68
+ --shiki-color-text: #d1d1d1;
69
+ --shiki-token-constant: #79b8ff;
70
+ --shiki-token-string: #ffab70;
71
+ --shiki-token-comment: #6b737c;
72
+ --shiki-token-keyword: #f97583;
73
+ --shiki-token-function: #b392f0;
74
+ --shiki-token-string-expression: #4bb74a;
75
+ --shiki-token-punctuation: #bbb;
76
+ --shiki-token-link: var(--shiki-token-string);
77
+ --shiki-color-ansi-black: #586069;
78
+ --shiki-color-ansi-black-dim: rgba(88, 96, 105, 0.5);
79
+ --shiki-color-ansi-red: #ea4a5a;
80
+ --shiki-color-ansi-red-dim: rgba(234, 74, 90, 0.5);
81
+ --shiki-color-ansi-green: #34d058;
82
+ --shiki-color-ansi-green-dim: rgba(52, 208, 88, 0.5);
83
+ --shiki-color-ansi-yellow: #ffea7f;
84
+ --shiki-color-ansi-yellow-dim: rgba(255, 234, 127, 0.5);
85
+ --shiki-color-ansi-blue: #2188ff;
86
+ --shiki-color-ansi-blue-dim: rgba(33, 136, 255, 0.5);
87
+ --shiki-color-ansi-magenta: #b392f0;
88
+ --shiki-color-ansi-magenta-dim: rgba(179, 146, 240, 0.5);
89
+ --shiki-color-ansi-cyan: #39c5cf;
90
+ --shiki-color-ansi-cyan-dim: rgba(57, 197, 207, 0.5);
91
+ --shiki-color-ansi-white: #d1d5da;
92
+ --shiki-color-ansi-white-dim: rgba(209, 213, 218, 0.5);
93
+ --shiki-color-ansi-bright-black: #959da5;
94
+ --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
95
+ --shiki-color-ansi-bright-red: #f97583;
96
+ --shiki-color-ansi-bright-red-dim: rgba(249, 117, 131, 0.5);
97
+ --shiki-color-ansi-bright-green: #85e89d;
98
+ --shiki-color-ansi-bright-green-dim: rgba(133, 232, 157, 0.5);
99
+ --shiki-color-ansi-bright-yellow: #ffea7f;
100
+ --shiki-color-ansi-bright-yellow-dim: rgba(255, 234, 127, 0.5);
101
+ --shiki-color-ansi-bright-blue: #79b8ff;
102
+ --shiki-color-ansi-bright-blue-dim: rgba(121, 184, 255, 0.5);
103
+ --shiki-color-ansi-bright-magenta: #b392f0;
104
+ --shiki-color-ansi-bright-magenta-dim: rgba(179, 146, 240, 0.5);
105
+ --shiki-color-ansi-bright-cyan: #56d4dd;
106
+ --shiki-color-ansi-bright-cyan-dim: rgba(86, 212, 221, 0.5);
107
+ --shiki-color-ansi-bright-white: #fafbfc;
108
+ --shiki-color-ansi-bright-white-dim: rgba(250, 251, 252, 0.5);
109
+ }
110
+
111
+ pre {
112
+ background-color: var(--brand-color-canvas-subtle);
113
+ border-radius: var(--brand-borderRadius-large);
114
+ padding-top: 1rem;
115
+ padding-block-end: 1rem;
116
+ }
117
+
118
+ code {
119
+ -webkit-box-decoration-break: slice;
120
+ box-decoration-break: slice;
121
+ font-feature-settings:
122
+ 'rlig' 1,
123
+ 'calt' 1,
124
+ 'ss01' 1;
125
+ }
126
+ code[data-line-numbers] > .line {
127
+ padding-left: 0.5rem;
128
+ }
129
+ code[data-line-numbers] > .line:before {
130
+ counter-increment: line;
131
+ content: counter(line);
132
+ float: left;
133
+ text-align: right;
134
+ --tw-text-opacity: 1;
135
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
136
+ min-width: 2.6rem;
137
+ height: 100%;
138
+ padding-right: 1rem;
139
+ }
140
+ code .line {
141
+ margin-block-start: 0 !important;
142
+ }
143
+ code .line.highlighted {
144
+ background-color: rgba(218, 221, 226, 0.5);
145
+ color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 45%/0.5);
146
+ --tw-shadow: 2px 0 currentColor inset;
147
+ --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
148
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
149
+ }
150
+ code .line .highlighted {
151
+ --tw-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
152
+ --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
153
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
154
+ background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
155
+ --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
156
+ --tw-shadow: var(--tw-shadow-colored);
157
+ border-radius: 0.125rem;
158
+ }
159
+ :is(html[class~='dark'] code .line .highlighted) {
160
+ background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
161
+ --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
162
+ --tw-shadow: var(--tw-shadow-colored);
163
+ }
164
+ pre {
165
+ contain: paint;
166
+ }
167
+ pre code {
168
+ color: currentColor;
169
+ border-style: none;
170
+ border-radius: 0;
171
+ min-width: 100%;
172
+ font-size: 0.875rem;
173
+ line-height: 1.25rem;
174
+ display: grid;
175
+ background-color: transparent !important;
176
+ padding: 0 !important;
177
+ }
178
+ :is(html[class~='dark'] pre code) {
179
+ background-color: transparent !important;
180
+ }
181
+ pre code .line,
182
+ pre:not([data-theme]) {
183
+ padding-left: 1rem;
184
+ padding-right: 1rem;
185
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/doctocat-nextjs",
3
- "version": "0.0.1",
3
+ "version": "0.0.2-rc.1da8f9a",
4
4
  "description": "A Next.js theme for building Primer documentation sites",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/css/code-block-overrides.css DELETED
@@ -1,162 +0,0 @@
1
- :root {
2
- --shiki-color-text: #414141;
3
- --shiki-color-background: transparent;
4
- --shiki-token-constant: #1976d2;
5
- --shiki-token-string: #22863a;
6
- --shiki-token-comment: #aaa;
7
- --shiki-token-keyword: #d32f2f;
8
- --shiki-token-parameter: #ff9801;
9
- --shiki-token-function: #6f42c1;
10
- --shiki-token-string-expression: var(--shiki-token-string);
11
- --shiki-token-punctuation: #212121;
12
- --shiki-token-link: var(--shiki-token-string);
13
- --shiki-color-ansi-black: #24292e;
14
- --shiki-color-ansi-black-dim: rgba(36, 41, 46, 0.5);
15
- --shiki-color-ansi-red: #d73a49;
16
- --shiki-color-ansi-red-dim: rgba(215, 58, 73, 0.5);
17
- --shiki-color-ansi-green: #28a745;
18
- --shiki-color-ansi-green-dim: rgba(40, 167, 69, 0.5);
19
- --shiki-color-ansi-yellow: #dbab09;
20
- --shiki-color-ansi-yellow-dim: rgba(219, 171, 9, 0.5);
21
- --shiki-color-ansi-blue: #0366d6;
22
- --shiki-color-ansi-blue-dim: rgba(3, 102, 214, 0.5);
23
- --shiki-color-ansi-magenta: #5a32a3;
24
- --shiki-color-ansi-magenta-dim: rgba(90, 50, 163, 0.5);
25
- --shiki-color-ansi-cyan: #1b7c83;
26
- --shiki-color-ansi-cyan-dim: rgba(27, 124, 131, 0.5);
27
- --shiki-color-ansi-white: #6a737d;
28
- --shiki-color-ansi-white-dim: rgba(106, 115, 125, 0.5);
29
- --shiki-color-ansi-bright-black: #959da5;
30
- --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
31
- --shiki-color-ansi-bright-red: #cb2431;
32
- --shiki-color-ansi-bright-red-dim: rgba(203, 36, 49, 0.5);
33
- --shiki-color-ansi-bright-green: #22863a;
34
- --shiki-color-ansi-bright-green-dim: rgba(34, 134, 58, 0.5);
35
- --shiki-color-ansi-bright-yellow: #b08800;
36
- --shiki-color-ansi-bright-yellow-dim: rgba(176, 136, 0, 0.5);
37
- --shiki-color-ansi-bright-blue: #005cc5;
38
- --shiki-color-ansi-bright-blue-dim: rgba(0, 92, 197, 0.5);
39
- --shiki-color-ansi-bright-magenta: #5a32a3;
40
- --shiki-color-ansi-bright-magenta-dim: rgba(90, 50, 163, 0.5);
41
- --shiki-color-ansi-bright-cyan: #3192aa;
42
- --shiki-color-ansi-bright-cyan-dim: rgba(49, 146, 170, 0.5);
43
- --shiki-color-ansi-bright-white: #d1d5da;
44
- --shiki-color-ansi-bright-white-dim: rgba(209, 213, 218, 0.5);
45
- }
46
-
47
- [data-color-mode='dark'] {
48
- --shiki-color-text: #d1d1d1;
49
- --shiki-token-constant: #79b8ff;
50
- --shiki-token-string: #ffab70;
51
- --shiki-token-comment: #6b737c;
52
- --shiki-token-keyword: #f97583;
53
- --shiki-token-function: #b392f0;
54
- --shiki-token-string-expression: #4bb74a;
55
- --shiki-token-punctuation: #bbb;
56
- --shiki-token-link: var(--shiki-token-string);
57
- --shiki-color-ansi-black: #586069;
58
- --shiki-color-ansi-black-dim: rgba(88, 96, 105, 0.5);
59
- --shiki-color-ansi-red: #ea4a5a;
60
- --shiki-color-ansi-red-dim: rgba(234, 74, 90, 0.5);
61
- --shiki-color-ansi-green: #34d058;
62
- --shiki-color-ansi-green-dim: rgba(52, 208, 88, 0.5);
63
- --shiki-color-ansi-yellow: #ffea7f;
64
- --shiki-color-ansi-yellow-dim: rgba(255, 234, 127, 0.5);
65
- --shiki-color-ansi-blue: #2188ff;
66
- --shiki-color-ansi-blue-dim: rgba(33, 136, 255, 0.5);
67
- --shiki-color-ansi-magenta: #b392f0;
68
- --shiki-color-ansi-magenta-dim: rgba(179, 146, 240, 0.5);
69
- --shiki-color-ansi-cyan: #39c5cf;
70
- --shiki-color-ansi-cyan-dim: rgba(57, 197, 207, 0.5);
71
- --shiki-color-ansi-white: #d1d5da;
72
- --shiki-color-ansi-white-dim: rgba(209, 213, 218, 0.5);
73
- --shiki-color-ansi-bright-black: #959da5;
74
- --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
75
- --shiki-color-ansi-bright-red: #f97583;
76
- --shiki-color-ansi-bright-red-dim: rgba(249, 117, 131, 0.5);
77
- --shiki-color-ansi-bright-green: #85e89d;
78
- --shiki-color-ansi-bright-green-dim: rgba(133, 232, 157, 0.5);
79
- --shiki-color-ansi-bright-yellow: #ffea7f;
80
- --shiki-color-ansi-bright-yellow-dim: rgba(255, 234, 127, 0.5);
81
- --shiki-color-ansi-bright-blue: #79b8ff;
82
- --shiki-color-ansi-bright-blue-dim: rgba(121, 184, 255, 0.5);
83
- --shiki-color-ansi-bright-magenta: #b392f0;
84
- --shiki-color-ansi-bright-magenta-dim: rgba(179, 146, 240, 0.5);
85
- --shiki-color-ansi-bright-cyan: #56d4dd;
86
- --shiki-color-ansi-bright-cyan-dim: rgba(86, 212, 221, 0.5);
87
- --shiki-color-ansi-bright-white: #fafbfc;
88
- --shiki-color-ansi-bright-white-dim: rgba(250, 251, 252, 0.5);
89
- }
90
-
91
- pre {
92
- background-color: var(--brand-color-canvas-subtle);
93
- border-radius: var(--brand-borderRadius-large);
94
- padding-top: 1rem;
95
- padding-block-end: 1rem;
96
- }
97
-
98
- code {
99
- -webkit-box-decoration-break: slice;
100
- box-decoration-break: slice;
101
- font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
102
- }
103
- code[data-line-numbers] > .line {
104
- padding-left: 0.5rem;
105
- }
106
- code[data-line-numbers] > .line:before {
107
- counter-increment: line;
108
- content: counter(line);
109
- float: left;
110
- text-align: right;
111
- --tw-text-opacity: 1;
112
- color: rgba(107, 114, 128, var(--tw-text-opacity));
113
- min-width: 2.6rem;
114
- height: 100%;
115
- padding-right: 1rem;
116
- }
117
- code .line {
118
- margin-block-start: 0 !important;
119
- }
120
- code .line.highlighted {
121
- background-color: rgba(218, 221, 226, 0.5);
122
- color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 45%/0.5);
123
- --tw-shadow: 2px 0 currentColor inset;
124
- --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
125
- box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
126
- }
127
- code .line .highlighted {
128
- --tw-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
129
- --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
130
- box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
131
- background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
132
- --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
133
- --tw-shadow: var(--tw-shadow-colored);
134
- border-radius: 0.125rem;
135
- }
136
- :is(html[class~='dark'] code .line .highlighted) {
137
- background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
138
- --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
139
- --tw-shadow: var(--tw-shadow-colored);
140
- }
141
- pre {
142
- contain: paint;
143
- }
144
- pre code {
145
- color: currentColor;
146
- border-style: none;
147
- border-radius: 0;
148
- min-width: 100%;
149
- font-size: 0.875rem;
150
- line-height: 1.25rem;
151
- display: grid;
152
- background-color: transparent !important;
153
- padding: 0 !important;
154
- }
155
- :is(html[class~='dark'] pre code) {
156
- background-color: transparent !important;
157
- }
158
- pre code .line,
159
- pre:not([data-theme]) {
160
- padding-left: 1rem;
161
- padding-right: 1rem;
162
- }