diff --git a/src/lib/output/plugins/IconsPlugin.tsx b/src/lib/output/plugins/IconsPlugin.tsx index 84c419778..c66f2235b 100644 --- a/src/lib/output/plugins/IconsPlugin.tsx +++ b/src/lib/output/plugins/IconsPlugin.tsx @@ -11,7 +11,7 @@ const ICONS_JS = ` function addIcons() { if (document.readyState === "loading") return document.addEventListener("DOMContentLoaded", addIcons); const svg = document.body.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg")); - svg.innerHTML = \`"SVG_HTML"\`; + svg.innerHTML = \`SVG_HTML\`; svg.style.display = "none"; if (location.protocol === "file:") updateUseElements(); } @@ -49,7 +49,11 @@ export class IconsPlugin extends RendererComponent { const icons = (this.owner.theme as DefaultTheme).icons; for (const [name, icon] of Object.entries(icons)) { - children.push({icon.call(icons).children}); + children.push( + + {icon.call(icons).children} + , + ); } const svg = renderElement({children}); diff --git a/src/lib/output/themes/default/partials/icon.tsx b/src/lib/output/themes/default/partials/icon.tsx index 8c242de37..74c87b98a 100644 --- a/src/lib/output/themes/default/partials/icon.tsx +++ b/src/lib/output/themes/default/partials/icon.tsx @@ -19,6 +19,15 @@ const kindIcon = (letterPath: JSX.Element, color: string, circular = false) => ( ); +const textIcon = (letter: string, color: string, circular = false) => + kindIcon( + + {letter} + , + color, + circular, + ); + export function buildRefIcons JSX.Element>>( icons: T, context: DefaultThemeRenderContext, @@ -50,143 +59,52 @@ export const icons: Record< ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor" | "folder", () => JSX.Element > = { - [ReflectionKind.Accessor]: () => - kindIcon( - , - "#FF4D4D", - true, - ), + [ReflectionKind.Accessor]: () => textIcon("A", "var(--color-ts-accessor)", true), [ReflectionKind.CallSignature]() { return this[ReflectionKind.Function](); }, - [ReflectionKind.Class]: () => - kindIcon( - , - "var(--color-ts-class)", - ), - [ReflectionKind.Constructor]: () => - kindIcon( - , - "#4D7FFF", - true, - ), + [ReflectionKind.Class]: () => textIcon("C", "var(--color-ts-class)"), + [ReflectionKind.Constructor]: () => textIcon("C", "var(--color-ts-constructor)", true), [ReflectionKind.ConstructorSignature]() { return this[ReflectionKind.Constructor](); }, - [ReflectionKind.Enum]: () => - kindIcon( - , - "var(--color-ts-enum)", - ), + [ReflectionKind.Enum]: () => textIcon("E", "var(--color-ts-enum)"), [ReflectionKind.EnumMember]() { return this[ReflectionKind.Property](); }, - [ReflectionKind.Function]: () => - kindIcon( - , - "var(--color-ts-function)", - ), + [ReflectionKind.Function]: () => textIcon("F", "var(--color-ts-function)"), [ReflectionKind.GetSignature]() { return this[ReflectionKind.Accessor](); }, [ReflectionKind.IndexSignature]() { return this[ReflectionKind.Property](); }, - [ReflectionKind.Interface]: () => - kindIcon( - , - "var(--color-ts-interface)", - ), - [ReflectionKind.Method]: () => - kindIcon( - , - "#FF4DB8", - true, - ), - [ReflectionKind.Module]() { - return kindIcon( - , - "var(--color-ts-module)", - ); - }, - [ReflectionKind.Namespace]: () => - kindIcon( - , - "var(--color-ts-namespace)", - ), + [ReflectionKind.Interface]: () => textIcon("I", "var(--color-ts-interface)"), + [ReflectionKind.Method]: () => textIcon("M", "var(--color-ts-method)", true), + [ReflectionKind.Module]: () => textIcon("M", "var(--color-ts-module)"), + [ReflectionKind.Namespace]: () => textIcon("N", "var(--color-ts-namespace)"), [ReflectionKind.Parameter]() { return this[ReflectionKind.Property](); }, [ReflectionKind.Project]() { return this[ReflectionKind.Module](); }, - [ReflectionKind.Property]: () => - kindIcon( - , - "#FF984D", - true, - ), - [ReflectionKind.Reference]: () => - kindIcon( - , - "#FF4D82", // extract into a CSS variable potentially? - true, - ), + [ReflectionKind.Property]: () => textIcon("P", "var(--color-ts-property)", true), + [ReflectionKind.Reference]: () => textIcon("R", "var(--color-ts-reference)", true), [ReflectionKind.SetSignature]() { return this[ReflectionKind.Accessor](); }, - [ReflectionKind.TypeAlias]: () => - kindIcon( - , - "var(--color-ts-type-alias)", - ), + [ReflectionKind.TypeAlias]: () => textIcon("T", "var(--color-ts-type-alias)"), [ReflectionKind.TypeLiteral]() { return this[ReflectionKind.TypeAlias](); }, [ReflectionKind.TypeParameter]() { return this[ReflectionKind.TypeAlias](); }, - [ReflectionKind.Variable]: () => - kindIcon( - , - "var(--color-ts-variable)", - ), + [ReflectionKind.Variable]: () => textIcon("V", "var(--color-ts-variable)"), [ReflectionKind.Document]: () => kindIcon( - + @@ -196,7 +114,7 @@ export const icons: Record< ), folder: () => kindIcon( - + , "var(--color-document)", @@ -205,7 +123,7 @@ export const icons: Record< ), @@ -213,7 +131,7 @@ export const icons: Record< ), @@ -233,7 +151,7 @@ export const icons: Record< menu: () => ( {["3", "7", "11"].map((y) => ( - + ))} ), @@ -241,7 +159,7 @@ export const icons: Record< ), diff --git a/src/lib/utils/jsx.elements.ts b/src/lib/utils/jsx.elements.ts index 7893b1bc2..5cdb9a3df 100644 --- a/src/lib/utils/jsx.elements.ts +++ b/src/lib/utils/jsx.elements.ts @@ -124,6 +124,7 @@ export interface IntrinsicElements { polyline: JsxPolylineElementProps; line: JsxLineElementProps; use: JsxUseElementProps; + text: JsxTextElementProps; } export const JsxFragment = Symbol(); @@ -943,9 +944,9 @@ export interface JsxSvgPresentationProps { "font-size"?: string; "font-size-adjust"?: "none" | number; "font-stretch"?: string; - "font-style"?: "normal" | "italic" | "oblique"; + "font-style"?: "normal" | "italic" | "oblique" | string; "font-variant"?: string; - "font-weight"?: "normal" | "bold" | "bolder" | "lighter" | number; + "font-weight"?: "normal" | "bold" | "bolder" | "lighter" | number | string; "image-rendering"?: "auto" | "optimizeSpeed" | "optimizeQuality"; "letter-spacing"?: string; "lighting-color"?: string; @@ -1169,3 +1170,16 @@ export interface JsxUseElementProps width?: string | number; height?: string | number; } + +/** + * Properties permitted on the `` element. + * + * Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text + */ +export interface JsxTextElementProps + extends JsxSvgCoreProps, + JsxSvgStyleProps, + JsxSvgPresentationProps { + x?: string | number; + y?: string | number; +} diff --git a/static/style.css b/static/style.css index 9d619a641..178bfb023 100644 --- a/static/style.css +++ b/static/style.css @@ -4,11 +4,17 @@ --light-color-background-secondary: #eff0f1; --light-color-warning-text: #222; --light-color-background-warning: #e6e600; - --light-color-icon-background: var(--light-color-background); --light-color-accent: #c5c7c9; --light-color-active-menu-item: var(--light-color-accent); --light-color-text: #222; --light-color-text-aside: #6e6e6e; + + --light-color-icon-background: var(--light-color-background); + --light-color-icon-text: var(--light-color-text); + + --light-color-comment-tag-text: var(--light-color-text); + --light-color-comment-tag: var(--light-color-background); + --light-color-link: #1f70c2; --light-color-focus-outline: #3584e4; @@ -22,16 +28,17 @@ --light-color-ts-function: #572be7; --light-color-ts-class: #1f70c2; --light-color-ts-interface: #108024; - --light-color-ts-constructor: var(--light-color-ts-class); - --light-color-ts-property: var(--light-color-ts-variable); - --light-color-ts-method: var(--light-color-ts-function); + --light-color-ts-constructor: #4d7fff; + --light-color-ts-property: #ff984d; + --light-color-ts-method: #ff4db8; + --light-color-ts-reference: #ff4d82; --light-color-ts-call-signature: var(--light-color-ts-method); --light-color-ts-index-signature: var(--light-color-ts-property); --light-color-ts-constructor-signature: var(--light-color-ts-constructor); --light-color-ts-parameter: var(--light-color-ts-variable); /* type literal not included as links will never be generated to it */ --light-color-ts-type-parameter: #a55c0e; - --light-color-ts-accessor: var(--light-color-ts-property); + --light-color-ts-accessor: #ff4d4d; --light-color-ts-get-signature: var(--light-color-ts-accessor); --light-color-ts-set-signature: var(--light-color-ts-accessor); --light-color-ts-type-alias: #d51270; @@ -46,11 +53,17 @@ --dark-color-background-secondary: #1e2024; --dark-color-background-warning: #bebe00; --dark-color-warning-text: #222; - --dark-color-icon-background: var(--dark-color-background-secondary); --dark-color-accent: #9096a2; --dark-color-active-menu-item: #5d5d6a; --dark-color-text: #f5f5f5; --dark-color-text-aside: #dddddd; + + --dark-color-icon-background: var(--dark-color-background-secondary); + --dark-color-icon-text: var(--dark-color-text); + + --dark-color-comment-tag-text: var(--dark-color-text); + --dark-color-comment-tag: var(--dark-color-background); + --dark-color-link: #00aff4; --dark-color-focus-outline: #4c97f2; @@ -64,16 +77,17 @@ --dark-color-ts-function: #a280ff; --dark-color-ts-class: #8ac4ff; --dark-color-ts-interface: #6cff87; - --dark-color-ts-constructor: var(--dark-color-ts-class); - --dark-color-ts-property: var(--dark-color-ts-variable); - --dark-color-ts-method: var(--dark-color-ts-function); + --dark-color-ts-constructor: #4d7fff; + --dark-color-ts-property: #ff984d; + --dark-color-ts-method: #ff4db8; + --dark-color-ts-reference: #ff4d82; --dark-color-ts-call-signature: var(--dark-color-ts-method); --dark-color-ts-index-signature: var(--dark-color-ts-property); --dark-color-ts-constructor-signature: var(--dark-color-ts-constructor); --dark-color-ts-parameter: var(--dark-color-ts-variable); /* type literal not included as links will never be generated to it */ --dark-color-ts-type-parameter: #e07d13; - --dark-color-ts-accessor: var(--dark-color-ts-property); + --dark-color-ts-accessor: #ff4d4d; --dark-color-ts-get-signature: var(--dark-color-ts-accessor); --dark-color-ts-set-signature: var(--dark-color-ts-accessor); --dark-color-ts-type-alias: #ff6492; @@ -90,15 +104,22 @@ --color-background-secondary: var(--light-color-background-secondary); --color-background-warning: var(--light-color-background-warning); --color-warning-text: var(--light-color-warning-text); - --color-icon-background: var(--light-color-icon-background); --color-accent: var(--light-color-accent); --color-active-menu-item: var(--light-color-active-menu-item); --color-text: var(--light-color-text); --color-text-aside: var(--light-color-text-aside); + + --color-icon-background: var(--light-color-icon-background); + --color-icon-text: var(--light-color-icon-text); + + --color-comment-tag-text: var(--light-color-text); + --color-comment-tag: var(--light-color-background); + --color-link: var(--light-color-link); --color-focus-outline: var(--light-color-focus-outline); --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-project: var(--light-color-ts-project); --color-ts-module: var(--light-color-ts-module); --color-ts-namespace: var(--light-color-ts-namespace); --color-ts-enum: var(--light-color-ts-enum); @@ -110,6 +131,7 @@ --color-ts-constructor: var(--light-color-ts-constructor); --color-ts-property: var(--light-color-ts-property); --color-ts-method: var(--light-color-ts-method); + --color-ts-reference: var(--light-color-ts-reference); --color-ts-call-signature: var(--light-color-ts-call-signature); --color-ts-index-signature: var(--light-color-ts-index-signature); --color-ts-constructor-signature: var( @@ -134,15 +156,22 @@ --color-background-secondary: var(--dark-color-background-secondary); --color-background-warning: var(--dark-color-background-warning); --color-warning-text: var(--dark-color-warning-text); - --color-icon-background: var(--dark-color-icon-background); --color-accent: var(--dark-color-accent); --color-active-menu-item: var(--dark-color-active-menu-item); --color-text: var(--dark-color-text); --color-text-aside: var(--dark-color-text-aside); + + --color-icon-background: var(--dark-color-icon-background); + --color-icon-text: var(--dark-color-icon-text); + + --color-comment-tag-text: var(--dark-color-text); + --color-comment-tag: var(--dark-color-background); + --color-link: var(--dark-color-link); --color-focus-outline: var(--dark-color-focus-outline); --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-project: var(--dark-color-ts-project); --color-ts-module: var(--dark-color-ts-module); --color-ts-namespace: var(--dark-color-ts-namespace); --color-ts-enum: var(--dark-color-ts-enum); @@ -154,6 +183,7 @@ --color-ts-constructor: var(--dark-color-ts-constructor); --color-ts-property: var(--dark-color-ts-property); --color-ts-method: var(--dark-color-ts-method); + --color-ts-reference: var(--dark-color-ts-reference); --color-ts-call-signature: var(--dark-color-ts-call-signature); --color-ts-index-signature: var(--dark-color-ts-index-signature); --color-ts-constructor-signature: var( @@ -190,10 +220,16 @@ body { --color-active-menu-item: var(--light-color-active-menu-item); --color-text: var(--light-color-text); --color-text-aside: var(--light-color-text-aside); + --color-icon-text: var(--light-color-icon-text); + + --color-comment-tag-text: var(--light-color-text); + --color-comment-tag: var(--light-color-background); + --color-link: var(--light-color-link); --color-focus-outline: var(--light-color-focus-outline); --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-project: var(--light-color-ts-project); --color-ts-module: var(--light-color-ts-module); --color-ts-namespace: var(--light-color-ts-namespace); --color-ts-enum: var(--light-color-ts-enum); @@ -205,6 +241,7 @@ body { --color-ts-constructor: var(--light-color-ts-constructor); --color-ts-property: var(--light-color-ts-property); --color-ts-method: var(--light-color-ts-method); + --color-ts-reference: var(--light-color-ts-reference); --color-ts-call-signature: var(--light-color-ts-call-signature); --color-ts-index-signature: var(--light-color-ts-index-signature); --color-ts-constructor-signature: var( @@ -232,10 +269,16 @@ body { --color-active-menu-item: var(--dark-color-active-menu-item); --color-text: var(--dark-color-text); --color-text-aside: var(--dark-color-text-aside); + --color-icon-text: var(--dark-color-icon-text); + + --color-comment-tag-text: var(--dark-color-text); + --color-comment-tag: var(--dark-color-background); + --color-link: var(--dark-color-link); --color-focus-outline: var(--dark-color-focus-outline); --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-project: var(--dark-color-ts-project); --color-ts-module: var(--dark-color-ts-module); --color-ts-namespace: var(--dark-color-ts-namespace); --color-ts-enum: var(--dark-color-ts-enum); @@ -247,6 +290,7 @@ body { --color-ts-constructor: var(--dark-color-ts-constructor); --color-ts-property: var(--dark-color-ts-property); --color-ts-method: var(--dark-color-ts-method); + --color-ts-reference: var(--dark-color-ts-reference); --color-ts-call-signature: var(--dark-color-ts-call-signature); --color-ts-index-signature: var(--dark-color-ts-index-signature); --color-ts-constructor-signature: var( @@ -439,7 +483,6 @@ pre { pre { position: relative; - white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 10px; @@ -860,6 +903,12 @@ a.tsd-index-link { margin-bottom: 0.75rem; } +.tsd-no-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} .tsd-kind-icon { margin-right: 0.5rem; width: 1.25rem; @@ -867,10 +916,6 @@ a.tsd-index-link { min-width: 1.25rem; min-height: 1.25rem; } -.tsd-kind-icon path { - transform-origin: center; - transform: scale(1.1); -} .tsd-signature > .tsd-kind-icon { margin-right: 0.8rem; } @@ -1242,6 +1287,9 @@ img { .tsd-kind-method { color: var(--color-ts-method); } +.tsd-kind-reference { + color: var(--color-ts-reference); +} .tsd-kind-call-signature { color: var(--color-ts-call-signature); } @@ -1254,9 +1302,6 @@ img { .tsd-kind-parameter { color: var(--color-ts-parameter); } -.tsd-kind-type-literal { - color: var(--color-ts-type-literal); -} .tsd-kind-type-parameter { color: var(--color-ts-type-parameter); } @@ -1435,7 +1480,7 @@ img { } .site-menu { - margin-top: 1rem 0; + margin-top: 1rem; } .page-menu,