From 5408fa683012414da50b68c624f422b1586a80bf Mon Sep 17 00:00:00 2001 From: lriggle-strib Date: Tue, 8 Oct 2024 09:46:34 -0500 Subject: [PATCH 1/6] First pass as text icons instead of vector letters Changes to be committed: modified: src/lib/output/themes/default/partials/icon.tsx modified: src/lib/utils/jsx.elements.ts modified: static/style.css --- .../output/themes/default/partials/icon.tsx | 214 +++++++++++++----- src/lib/utils/jsx.elements.ts | 18 +- static/style.css | 64 +++++- 3 files changed, 226 insertions(+), 70 deletions(-) diff --git a/src/lib/output/themes/default/partials/icon.tsx b/src/lib/output/themes/default/partials/icon.tsx index b50eddeeb..14a83fbb3 100644 --- a/src/lib/output/themes/default/partials/icon.tsx +++ b/src/lib/output/themes/default/partials/icon.tsx @@ -52,11 +52,18 @@ export const icons: Record< > = { [ReflectionKind.Accessor]: () => kindIcon( - , - "#FF4D4D", + + A + , + "var(--color-ts-accessor)", true, ), [ReflectionKind.CallSignature]() { @@ -64,19 +71,33 @@ export const icons: Record< }, [ReflectionKind.Class]: () => kindIcon( - , + + C + , "var(--color-ts-class)", ), [ReflectionKind.Constructor]: () => kindIcon( - , - "#4D7FFF", + + C + , + "var(--color-ts-constructor)", true, ), [ReflectionKind.ConstructorSignature]() { @@ -84,10 +105,17 @@ export const icons: Record< }, [ReflectionKind.Enum]: () => kindIcon( - , + + E + , "var(--color-ts-enum)", ), [ReflectionKind.EnumMember]() { @@ -95,7 +123,17 @@ export const icons: Record< }, [ReflectionKind.Function]: () => kindIcon( - , + + F + , "var(--color-ts-function)", ), [ReflectionKind.GetSignature]() { @@ -106,36 +144,63 @@ export const icons: Record< }, [ReflectionKind.Interface]: () => kindIcon( - , + + I + , "var(--color-ts-interface)", ), [ReflectionKind.Method]: () => kindIcon( - , - "#FF4DB8", + + M + , + "var(--color-ts-method)", true, ), - [ReflectionKind.Module]() { - return kindIcon( - , + [ReflectionKind.Module]: () => + kindIcon( + + M + , "var(--color-ts-module)", - ); - }, + ), [ReflectionKind.Namespace]: () => kindIcon( - , + + N + , "var(--color-ts-namespace)", ), [ReflectionKind.Parameter]() { @@ -146,19 +211,33 @@ export const icons: Record< }, [ReflectionKind.Property]: () => kindIcon( - , - "#FF984D", + + P + , + "var(--color-ts-property)", true, ), [ReflectionKind.Reference]: () => kindIcon( - , + + R + , "#FF4D82", // extract into a CSS variable potentially? true, ), @@ -167,7 +246,17 @@ export const icons: Record< }, [ReflectionKind.TypeAlias]: () => kindIcon( - , + + T + , "var(--color-ts-type-alias)", ), [ReflectionKind.TypeLiteral]() { @@ -178,15 +267,22 @@ export const icons: Record< }, [ReflectionKind.Variable]: () => kindIcon( - , + + V + , "var(--color-ts-variable)", ), [ReflectionKind.Document]: () => kindIcon( - + @@ -198,7 +294,7 @@ export const icons: Record< ), @@ -206,7 +302,7 @@ export const icons: Record< ), @@ -226,7 +322,7 @@ export const icons: Record< menu: () => ( {["3", "7", "11"].map((y) => ( - + ))} ), @@ -234,7 +330,7 @@ export const icons: Record< ), diff --git a/src/lib/utils/jsx.elements.ts b/src/lib/utils/jsx.elements.ts index 7893b1bc2..143a601aa 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/use + */ +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..6a5fe0430 100644 --- a/static/style.css +++ b/static/style.css @@ -4,11 +4,18 @@ --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); + + /* these are used in the code below but never defined. Making a guess */ + --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; @@ -46,11 +53,18 @@ --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); + + /* these are used in the code below but never defined. Making a guess */ + --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; @@ -82,6 +96,12 @@ --dark-external-icon: url("data:image/svg+xml;utf8,"); --dark-color-scheme: dark; + + --icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + --icon-font-size: 16px; + --icon-font-weight: normal; + --icon-font-style: normal; } @media (prefers-color-scheme: light) { @@ -90,15 +110,23 @@ --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); + + /* these are used in the code below but never defined. Making a guess */ + --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); @@ -134,15 +162,23 @@ --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); + + /* these are used in the code below but never defined. Making a guess */ + --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); @@ -190,10 +226,17 @@ 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); + + /* these are used in the code below but never defined. Making a guess */ + --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); @@ -232,10 +275,17 @@ 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); + + /* these are used in the code below but never defined. Making a guess */ + --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); @@ -439,7 +489,6 @@ pre { pre { position: relative; - white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 10px; @@ -1254,9 +1303,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 +1481,7 @@ img { } .site-menu { - margin-top: 1rem 0; + margin-top: 1rem; } .page-menu, From aa6e0bc7f76d06355b4cc3430a58779e9fb0b99f Mon Sep 17 00:00:00 2001 From: lriggle-strib Date: Tue, 8 Oct 2024 10:22:37 -0500 Subject: [PATCH 2/6] Remove comment lines I added Changes to be committed: modified: static/style.css --- static/style.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/static/style.css b/static/style.css index 6a5fe0430..b051ad059 100644 --- a/static/style.css +++ b/static/style.css @@ -12,7 +12,6 @@ --light-color-icon-background: var(--light-color-background); --light-color-icon-text: var(--light-color-text); - /* these are used in the code below but never defined. Making a guess */ --light-color-comment-tag-text: var(--light-color-text); --light-color-comment-tag: var(--light-color-background); @@ -61,7 +60,6 @@ --dark-color-icon-background: var(--dark-color-background-secondary); --dark-color-icon-text: var(--dark-color-text); - /* these are used in the code below but never defined. Making a guess */ --dark-color-comment-tag-text: var(--dark-color-text); --dark-color-comment-tag: var(--dark-color-background); @@ -118,7 +116,6 @@ --color-icon-background: var(--light-color-icon-background); --color-icon-text: var(--light-color-icon-text); - /* these are used in the code below but never defined. Making a guess */ --color-comment-tag-text: var(--light-color-text); --color-comment-tag: var(--light-color-background); @@ -170,7 +167,6 @@ --color-icon-background: var(--dark-color-icon-background); --color-icon-text: var(--dark-color-icon-text); - /* these are used in the code below but never defined. Making a guess */ --color-comment-tag-text: var(--dark-color-text); --color-comment-tag: var(--dark-color-background); @@ -228,7 +224,6 @@ body { --color-text-aside: var(--light-color-text-aside); --color-icon-text: var(--light-color-icon-text); - /* these are used in the code below but never defined. Making a guess */ --color-comment-tag-text: var(--light-color-text); --color-comment-tag: var(--light-color-background); @@ -277,7 +272,6 @@ body { --color-text-aside: var(--dark-color-text-aside); --color-icon-text: var(--dark-color-icon-text); - /* these are used in the code below but never defined. Making a guess */ --color-comment-tag-text: var(--dark-color-text); --color-comment-tag: var(--dark-color-background); From 8d3742bdef2494925b00ea349f294e7628db618d Mon Sep 17 00:00:00 2001 From: lriggle-strib Date: Tue, 8 Oct 2024 10:31:32 -0500 Subject: [PATCH 3/6] Hard coded colors used for icons moved over to stylesheet. Changes to be committed: modified: static/style.css --- static/style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/static/style.css b/static/style.css index b051ad059..f0cc72f0d 100644 --- a/static/style.css +++ b/static/style.css @@ -28,16 +28,16 @@ --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-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; @@ -76,16 +76,16 @@ --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-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; From babb2b75f69e679caf58ef33279fd15eb4844693 Mon Sep 17 00:00:00 2001 From: lriggle-strib Date: Tue, 8 Oct 2024 10:32:40 -0500 Subject: [PATCH 4/6] Hard coded color for "reference" replaced with style var defined with that color code.. Changes to be committed: modified: src/lib/output/themes/default/partials/icon.tsx modified: static/style.css --- src/lib/output/themes/default/partials/icon.tsx | 2 +- static/style.css | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/lib/output/themes/default/partials/icon.tsx b/src/lib/output/themes/default/partials/icon.tsx index 14a83fbb3..2ed387c18 100644 --- a/src/lib/output/themes/default/partials/icon.tsx +++ b/src/lib/output/themes/default/partials/icon.tsx @@ -238,7 +238,7 @@ export const icons: Record< > R , - "#FF4D82", // extract into a CSS variable potentially? + "var(--color-ts-reference)", true, ), [ReflectionKind.SetSignature]() { diff --git a/static/style.css b/static/style.css index f0cc72f0d..1bee99c61 100644 --- a/static/style.css +++ b/static/style.css @@ -31,6 +31,7 @@ --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); @@ -79,6 +80,7 @@ --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); @@ -135,6 +137,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( @@ -186,6 +189,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( @@ -243,6 +247,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( @@ -291,6 +296,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( @@ -1285,6 +1291,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); } From 5775cf91cc457367366c7de921b9a4f838d5fae6 Mon Sep 17 00:00:00 2001 From: lriggle-strib Date: Tue, 8 Oct 2024 10:58:57 -0500 Subject: [PATCH 5/6] Fix formatting on stylesheet Changes to be committed: modified: static/style.css --- static/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/style.css b/static/style.css index 1bee99c61..bbbe67967 100644 --- a/static/style.css +++ b/static/style.css @@ -97,8 +97,9 @@ --dark-external-icon: url("data:image/svg+xml;utf8,"); --dark-color-scheme: dark; - --icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + --icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji"; --icon-font-size: 16px; --icon-font-weight: normal; --icon-font-style: normal; From 576de5128bf89d902b27ce95225587b5575418ce Mon Sep 17 00:00:00 2001 From: Gerrit Birkeland Date: Fri, 11 Oct 2024 12:00:28 -0600 Subject: [PATCH 6/6] Remove undesirable css attributes from icons --- src/lib/output/plugins/IconsPlugin.tsx | 8 +- .../output/themes/default/partials/icon.tsx | 226 ++---------------- src/lib/utils/jsx.elements.ts | 2 +- static/style.css | 17 +- 4 files changed, 37 insertions(+), 216 deletions(-) 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 fcd0834e3..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,239 +59,52 @@ export const icons: Record< ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor" | "folder", () => JSX.Element > = { - [ReflectionKind.Accessor]: () => - kindIcon( - - A - , - "var(--color-ts-accessor)", - true, - ), + [ReflectionKind.Accessor]: () => textIcon("A", "var(--color-ts-accessor)", true), [ReflectionKind.CallSignature]() { return this[ReflectionKind.Function](); }, - [ReflectionKind.Class]: () => - kindIcon( - - C - , - "var(--color-ts-class)", - ), - [ReflectionKind.Constructor]: () => - kindIcon( - - C - , - "var(--color-ts-constructor)", - 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( - - E - , - "var(--color-ts-enum)", - ), + [ReflectionKind.Enum]: () => textIcon("E", "var(--color-ts-enum)"), [ReflectionKind.EnumMember]() { return this[ReflectionKind.Property](); }, - [ReflectionKind.Function]: () => - kindIcon( - - F - , - "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( - - I - , - "var(--color-ts-interface)", - ), - [ReflectionKind.Method]: () => - kindIcon( - - M - , - "var(--color-ts-method)", - true, - ), - [ReflectionKind.Module]: () => - kindIcon( - - M - , - "var(--color-ts-module)", - ), - [ReflectionKind.Namespace]: () => - kindIcon( - - N - , - "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( - - P - , - "var(--color-ts-property)", - true, - ), - [ReflectionKind.Reference]: () => - kindIcon( - - R - , - "var(--color-ts-reference)", - 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( - - T - , - "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( - - V - , - "var(--color-ts-variable)", - ), + [ReflectionKind.Variable]: () => textIcon("V", "var(--color-ts-variable)"), [ReflectionKind.Document]: () => kindIcon( - + @@ -292,7 +114,7 @@ export const icons: Record< ), folder: () => kindIcon( - + , "var(--color-document)", diff --git a/src/lib/utils/jsx.elements.ts b/src/lib/utils/jsx.elements.ts index 143a601aa..5cdb9a3df 100644 --- a/src/lib/utils/jsx.elements.ts +++ b/src/lib/utils/jsx.elements.ts @@ -1174,7 +1174,7 @@ export interface JsxUseElementProps /** * Properties permitted on the `` element. * - * Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use + * Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text */ export interface JsxTextElementProps extends JsxSvgCoreProps, diff --git a/static/style.css b/static/style.css index bbbe67967..178bfb023 100644 --- a/static/style.css +++ b/static/style.css @@ -96,13 +96,6 @@ --dark-external-icon: url("data:image/svg+xml;utf8,"); --dark-color-scheme: dark; - - --icon-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", - "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji"; - --icon-font-size: 16px; - --icon-font-weight: normal; - --icon-font-style: normal; } @media (prefers-color-scheme: light) { @@ -910,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; @@ -917,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; }