diff --git a/package.json b/package.json index 667637a..7ec4cc8 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ ], "scripts": { "lint": "eslint .", - "typedoc": "typedoc", + "typedoc": "typedoc && mkdir -p doc/assets && cp -r theme/styles doc/assets/", "test:javascriptcore": "npm run test:jsc --", "test:v8": "exodus-test --engine=v8:bundle", "test:jsc": "exodus-test --engine=jsc:bundle", diff --git a/theme/custom.css b/theme/custom.css new file mode 100644 index 0000000..508672e --- /dev/null +++ b/theme/custom.css @@ -0,0 +1,20 @@ +/* CSS Variables and Base Settings */ +@import "./styles/variables.css"; + +/* Layout and Background */ +@import "./styles/layout.css"; + +/* Header and Navigation */ +@import "./styles/header.css"; + +/* Typography */ +@import "./styles/typography.css"; + +/* Links and Navigation */ +@import "./styles/links.css"; + +/* Panels and Containers */ +@import "./styles/panels.css"; + +/* Code Blocks and Syntax Highlighting */ +@import "./styles/code.css"; diff --git a/theme/favicon.ico b/theme/favicon.ico new file mode 100644 index 0000000..92a9933 Binary files /dev/null and b/theme/favicon.ico differ diff --git a/theme/styles/code.css b/theme/styles/code.css new file mode 100644 index 0000000..bd0f043 --- /dev/null +++ b/theme/styles/code.css @@ -0,0 +1,28 @@ +@layer typedoc { + code { + background: #27272a !important; + color: #e3e7fb; + padding: 0.15em 0.35em; + border-radius: 0.25rem; + font-size: 0.9em; + } + + pre { + background: #000000 !important; + border: 1px solid #3f3f46 !important; + border-radius: 0.5rem !important; + padding: 1.25rem !important; + margin: 1.25rem 0 !important; + overflow-x: auto; + line-height: 1.6; + } + + pre code { + background: transparent !important; + color: #e3e7fb !important; + padding: 0 !important; + display: block; + font-size: 0.875rem; + font-family: "Consolas", "Monaco", "Courier New", monospace; + } +} diff --git a/theme/styles/header.css b/theme/styles/header.css new file mode 100644 index 0000000..5c8b874 --- /dev/null +++ b/theme/styles/header.css @@ -0,0 +1,48 @@ +@layer typedoc { + header, + .tsd-page-toolbar, + .tsd-header { + background: #000000 !important; + border-bottom: 1px solid #3f3f46; + } + + .title { + display: flex !important; + align-items: center !important; + gap: 0 !important; + } + + .title::before { + content: ""; + display: inline-block; + width: calc(24px + 0.75rem + 1px + 0.75rem); + height: 24px; + background-image: + url("data:image/svg+xml;utf8,"), + linear-gradient( + to right, + transparent calc(24px + 0.75rem - 0.5px), + rgba(161, 161, 170, 0.3) calc(24px + 0.75rem - 0.5px), + rgba(161, 161, 170, 0.3) calc(24px + 0.75rem + 0.5px), + transparent calc(24px + 0.75rem + 0.5px) + ); + background-size: 24px 24px, 100% 20px; + background-position: left center, left center; + background-repeat: no-repeat; + margin-right: 0.75rem; + flex-shrink: 0; + } + + .title span { + color: #e3e7fb !important; + font-size: 1rem !important; + font-weight: 500 !important; + line-height: 24px !important; + } + + .title span { + color: #e3e7fb !important; + font-size: 1rem !important; + font-weight: 500 !important; + } +} diff --git a/theme/styles/layout.css b/theme/styles/layout.css new file mode 100644 index 0000000..a7a21c7 --- /dev/null +++ b/theme/styles/layout.css @@ -0,0 +1,45 @@ +@layer typedoc { + html { + background: #000000 !important; + } + + body { + position: relative; + overflow-x: hidden; + font-family: "Inter", system-ui, "Roboto", "Segoe UI", sans-serif; + background: #000000 !important; + } + + body::before { + content: ""; + position: fixed; + bottom: -20%; + left: 50%; + transform: translateX(-50%); + width: 200%; + height: 90vh; + z-index: 0; + background: radial-gradient( + ellipse at center, + rgba(131, 103, 231, 0.5) 0%, + rgba(96, 66, 199, 0.35) 25%, + rgba(131, 103, 231, 0.15) 45%, + transparent 70% + ); + pointer-events: none; + } + + .tsd-page-content, + main, + .container { + position: relative; + z-index: 1; + } + + .container, + .container-fluid, + .tsd-page-content, + main { + background: transparent !important; + } +} diff --git a/theme/styles/links.css b/theme/styles/links.css new file mode 100644 index 0000000..7dc5cec --- /dev/null +++ b/theme/styles/links.css @@ -0,0 +1,23 @@ +@layer typedoc { + a { + color: #8367e7 !important; + } + + a:hover { + color: #b19dff !important; + } + + .tsd-navigation a, + .tsd-navigation a:visited { + color: #e3e7fb !important; + } + + .tsd-navigation a:hover, + .tsd-navigation a.current { + color: #b19dff !important; + } + + .tsd-kind-icon { + color: inherit !important; + } +} diff --git a/theme/styles/panels.css b/theme/styles/panels.css new file mode 100644 index 0000000..1fde5b0 --- /dev/null +++ b/theme/styles/panels.css @@ -0,0 +1,14 @@ +@layer typedoc { + .tsd-panel { + border-color: #3f3f46; + } + + .tsd-signature { + border-color: #3f3f46; + } + + .tsd-theme-toggle, + .tsd-navigation.settings { + display: none !important; + } +} diff --git a/theme/styles/typography.css b/theme/styles/typography.css new file mode 100644 index 0000000..683cbfa --- /dev/null +++ b/theme/styles/typography.css @@ -0,0 +1,10 @@ +@layer typedoc { + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: "Eudoxus Sans", system-ui, "Roboto", "Segoe UI", sans-serif; + } +} diff --git a/theme/styles/variables.css b/theme/styles/variables.css new file mode 100644 index 0000000..676e978 --- /dev/null +++ b/theme/styles/variables.css @@ -0,0 +1,52 @@ +@layer typedoc { + :root { + --color-background: #000000; + --color-background-secondary: #000000; + --color-background-active: #27272a; + --color-background-warning: #ebd43e; + --color-warning-text: #111111; + --color-accent: #3f3f46; + --color-active-menu-item: #27272a; + --color-text: #e3e7fb; + --color-contrast-text: #ffffff; + --color-text-aside: #a1a1aa; + --color-icon-background: #111111; + --color-icon-text: #e3e7fb; + --color-comment-tag-text: #e3e7fb; + --color-comment-tag: #27272a; + --color-link: #8367e7; + --color-focus-outline: #b19dff; + --color-ts-keyword: #b19dff; + --color-ts-project: #8367e7; + --color-ts-module: #8367e7; + --color-ts-namespace: #8367e7; + --color-ts-enum: #ebd43e; + --color-ts-enum-member: #ebd43e; + --color-ts-variable: #3ec7eb; + --color-ts-function: #2ecf95; + --color-ts-class: #8367e7; + --color-ts-interface: #2ecf95; + --color-ts-constructor: #8367e7; + --color-ts-property: #eb7c3e; + --color-ts-method: #b19dff; + --color-ts-reference: #8367e7; + --color-ts-call-signature: #b19dff; + --color-ts-index-signature: #eb7c3e; + --color-ts-constructor-signature: #8367e7; + --color-ts-parameter: #3ec7eb; + --color-ts-type-parameter: #eb7c3e; + --color-ts-accessor: #eb7c3e; + --color-ts-get-signature: #eb7c3e; + --color-ts-set-signature: #eb7c3e; + --color-ts-type-alias: #8367e7; + --color-document: #e3e7fb; + --color-alert-note: #3ec7eb; + --color-alert-tip: #2ecf95; + --color-alert-important: #8367e7; + --color-alert-warning: #ebd43e; + --color-alert-caution: #eb7c3e; + --external-icon: url("data:image/svg+xml;utf8,"); + color-scheme: dark; + --code-background: #000000; + } +} diff --git a/theme/xo-logomark.svg b/theme/xo-logomark.svg new file mode 100644 index 0000000..7a387b9 --- /dev/null +++ b/theme/xo-logomark.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/typedoc.json b/typedoc.json index 42859c5..4f2a366 100644 --- a/typedoc.json +++ b/typedoc.json @@ -13,5 +13,7 @@ "name": "json", "path": "./doc/index.json" } - ] + ], + "customCss": "./theme/custom.css", + "favicon": "./theme/favicon.ico" }