deno doc stylesheet with custom props instead of hardcoded values

style.css

:root {

  --bg-body: rgb(231 229 228);
  --bg-content: white;
  --bg-highlight: white;
  --bg-searchbar: rgb(231 229 228);
  --bg-search-results-hover: rgb(243 244 246);
  --bg-code: rgb(243 244 246);
  --bg-overload-label: rgb(243 244 246);

  --transition-color: color 75ms cubic-bezier(0.4, 0, 0.2, 1);

  --border-overload-label: 1px solid rgb(209 213 219);
  --border-search-results-divider: 1px solid rgb(209 213 219);
  --border-table-cell: 1px solid rgb(209 213 219);

  --rounded-sm: 0.25rem;
  --rounded-base: 0.5rem;
  --rounded-md: 0.625rem;

  --color-link: rgb(37 99 235);
  --color-link-hover: rgb(96 165 250);
  --color-text-accent: rgb(75 85 99);
  --color-text-doc: rgb(107 114 128);
  --color-text-subtitle: rgb(156 163 175);

  --min-width-sidepanel: 12%;
  --max-width-sidepanel: 22%;
  --width-content: 100%;
  --padding-code: 0.25rem 0.375rem;
  --padding-content: 2rem;
  --padding-section-title: 0.25rem 0;
  --padding-sidepanel: 0.75rem 0 0.75rem;
  --padding-table-cell: 0.5rem;


  --font-mono: 'Operator Mono', 'Operator Mono SSm', 'Dank Mono', 'IBM Plex Mono', 'Fira Code', 'Roboto Mono', 'Monaco', 'Menlo', 'Souurce Code Pro', 'Lucida Console', 'Courier New', ui-monospace, monospace;
  --font-sans: 'Gotham Narrow', 'IBM Plex Sans', 'Roboto', 'Inter', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', 'AppleColorEmoji', ui-sans-serif, sans-serif;
  --font-serif: 'Sentinel SSm', 'Sentinel', 'IBM Plex Serif', 'Georgia', 'Times New Roman', ui-serif, serif;

  --font-style-subtitle: italic;
  --text-align-table-header: center;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-book: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  --leading-8: 1.25rem;
  --leading-10: 1.5rem;
  --leading-12: 1.625rem;
  --leading-14: 1.750rem;
  --leading-16: 1.875rem;

  --bg-function: #026BEB1A;
  --bg-variable: #7E57C01A;
  --bg-class: #2FA8501A;
  --bg-enum: #22ABB01A;
  --bg-interface: #D4A0681A;
  --bg-type-alias: #A4478C1A;
  --bg-namespace: #D256461A;

  --color-function: #056CF0;
  --color-variable: #7E57C0;
  --color-class: #20B44B;
  --color-enum: #22ABB0;
  --color-interface: #D2A064;
  --color-type-alias: #A4478C;
  --color-namespace: #D25646;
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
}

body {
  display: flex;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

#content {
  padding: var(--padding-content, 2rem);
  width: var(--width-content);
  box-sizing: border-box;
  margin: 0;
  background-color: var(--bg-content);
  border-radius: var(--rounded-md) 0 0 var(--rounded-md);
  overflow-y: auto;
}

#content a>h2 {
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

.link {
  color: var(--color-link);
  text-decoration: underline 1px solid transparent;
  transition: color 75ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration 150ms ease-in-out;
}

.link:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

#sidepanel {

  flex-shrink: 0;
  padding: 0.75rem 0 0.75rem;
  height: 100vh;
  width: fit-content;
  min-width: var(--min-width-sidepanel);
  max-width: var(--max-width-sidepanel);
  position: sticky;
  top: 0;
  left: 0;
  overflow-y: scroll;
  box-sizing: border-box;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

#sidepanel ul {
  list-style: none;
  padding-left: 1rem;
}

#sidepanel li {
  display: block;
  margin: -0.125rem 0;
}

#sidepanel a {
  display: block;
  padding: 0.5rem 1rem 0.5rem;
  border-radius: var(--rounded-md) 0 0 var(--rounded-md);
  position: relative;
}

#sidepanel a span {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#sidepanel a:hover,
#sidepanel a .active,
#sidepanel a:target {
  background-color: var(--bg-highlight);
}

#sidepanel a:hover::before,
#sidepanel a .active::before,
#sidepanel a:target::before,
#sidepanel a:hover::after,
#sidepanel a .active::after,
#sidepanel a:target::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: calc(var(--rounded-md) * -2);
  right: 0;
  height: calc(var(--rounded-md) * 2);
  width: var(--rounded-md);
}


#sidepanel a:hover::before,
#sidepanel a .active::before,
#sidepanel a:target::before {
  border-bottom-right-radius: var(--rounded-md);
  box-shadow: 0 var(--rounded-md) 0 0 var(--bg-highlight);
}

#sidepanel a:hover::after,
#sidepanel a .active::after,
#sidepanel a:target::after {
  border-top-right-radius: var(--rounded-md);
  box-shadow: 0 calc(var(--rounded-md) * -1) 0 0 var(--bg-highlight);
}

#sidepanel .section_title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.625rem 1.25rem 0.625rem;
}

#sidepanel .section_title h3 {
  margin: 0;
  line-height: 1;
}

#searchbar {
  width: 100%;
  padding: 0.575rem;
  box-sizing: border-box;
  border: none;
  background-color: var(--bg-searchbar);
  border-radius: var(--rounded-base);
  font-size: var(--text-base, 1rem);
  margin: 1.5rem 0;
}

#searchResults ul {
  list-style: none;
  padding: 0;
}

#searchResults ul li {
  display: block;
}

#searchResults ul a {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  justify-content: space-between;
  line-height: 1;
}

#searchResults ul a div:first-child {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

#searchResults ul a div:last-child {
  color: var(--color-text-subtitle);
  font-style: var(--font-style-subtitle);
}

#searchResults ul a:hover {
  background-color: var(--bg-search-results-hover);
}


#searchResults ul>*+* {
  border-top: var(--border-search-results-divider);
}

/* doc classes */
.symbol_group>*+* {
  margin-top: 3rem;
}

.symbol>*+* {
  margin-top: 2rem;
}

.symbol_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.doc_block_items>*+* {
  margin-top: 1.75rem;
  /* 28px */
}

.doc_block_title {
  font-weight: var(--font-bold, 700);
  background-color: unset !important;
}

.doc_block_title>*+* {
  margin-top: 0.25rem;
  /* 4px */
}

.doc_block_title>*:first-child {
  font-size: var(--text-2xl);
  line-height: var(--leading-12);
}

.doc_block_subtitle {
  font-size: var(--text-base);
  line-height: var(--leading-10);
}

.doc_block_subtitle>*+* {
  margin-top: 0.125rem;
}

.doc_block_subtitle_text {
  color: var(--color-text-subtitle);
  font-style: var(--font-style-subtitle);
}

.section_title {
  font-size: var(--text-base);
  line-height: var(--leading-10);
  font-weight: var(--font-medium);
  color: var(--color-text-subtitle);
  padding: var(--padding-section-title);
}

.section {
  margin-top: 0.5rem;
  /* 8px */
}

.section>*+* {
  margin-top: 1.75rem;
  /* 28px */
}

.doc_item {
  /* TODO: group */
  position: relative;
}

.doc_item:hover .anchor {
  display: block;
}

.doc_entry {
  display: flex;
  justify-content: space-between;
}

.doc_entry_children {
  display: flex;
  align-items: center;
  overflow-wrap: break-word;
  gap: 0.5rem;
}

.function_overload_selectors>*+* {
  margin-top: 0.5rem;
}

.function_overload_label {
  display: block;
  padding: 1rem;
  border-radius: var(--rounded-base);
  border: var(--border-overload-label);
  cursor: pointer;
}

.function_overload_label:hover {
  border-color: var(--bg-overload-label);
}

.symbol_section,                                                   .symbol_section>tr {
  display: block;
}

.symbol_section_symbol {
  display: block;
  padding: 0.25rem 0.75rem 0.25rem 0;
  font-weight: var(--font-bold);
}

.symbol_section_symbol>div {
  min-width: 13rem;
  display: flex;
  align-items: center;
}

.symbol_section_symbol>div>*+* {
  margin-left: 0.5rem;
  /* 8px */
}

.symbol_section_doc {
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: var(--text-sm);
  line-height: var(--leading-8);
  color: var(--color-text-doc);
}

@media (min-width: 1024px) {
  .symbol_section {
    display: table;
  }

  .symbol_section>tr {
    display: table-row;
  }

  .symbol_section_symbol {
    display: table-cell;
  }

  .symbol_section_doc {
    display: table-cell;
  }
}

.anchor {
  float: left;
  line-height: 1;
  display: none;
  color: var(--color-text-accent);
  margin-left: -1.125rem;
  padding-right: 0.25rem;
}

.anchor:hover {
  display: block;
}

.kind_Function_text {
  color: var(--color-function);
}

.kind_Function_bg {
  background-color: var(--bg-function);
}

.kind_Variable_text {
  color: var(--color-variable);
}

.kind_Variable_bg {
  background-color: var(--bg-variable);
}

.kind_Class_text {
  color: var(--color-class);
}

.kind_Class_bg {
  background-color: var(--bg-class);
}

.kind_Enum_text {
  color: var(--color-enum);
}

.kind_Enum_bg {
  background-color: var(--bg-enum);
}

.kind_Interface_text {
  color: var(--color-interface);
}

.kind_Interface_bg {
  background-color: var(--bg-interface);
}

.kind_TypeAlias_text {
  color: var(--color-type-alias);
}

.kind_TypeAlias_bg {
  background-color: var(--bg-type-alias);
}

.kind_Namespace_text {
  color: var(--color-namespace);
}

.kind_Namespace_bg {
  background-color: var(--bg-namespace);
}

.symbol_kind {
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* markdown */
.markdown>*+* {
  margin-top: 1rem;
}

.markdown :not(pre)>code {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-8);
  padding: 0.25rem 0.375rem;
  border-radius: var(--rounded-sm);
  background-color: var(--bg-code);
}

.markdown pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-8);
  padding: 0.625rem;
  border-radius: var(--rounded-base);
  color: var(--color-code, black);
  background-color: var(--bg-code);
  overflow-x: auto;
}

.markdown a {
  color: var(--color-link);
  transition: var(--transition-color);
}

.markdown a:hover {
  color: var(--color-link-hover);
}

.markdown p {
  margin: 0.25rem 0;
  text-align: left;
}

.markdown table {
  table-layout: auto;
}

.markdown td {
  padding: var(--padding-table-cell);
  border: var(--border-table-cell);
}

.markdown th {
  font-weight: var(--font-bold, 700);
  text-align: var(--text-align-table-header);
}

.markdown_summary {
  display: inline;
  color: var(--color-text-accent);
}

.markdown_summary p {
  display: inline-block;
}

.markdown_summary a {
  color: var(--color-link);
  transition: var(--transition-color);
}

.markdown_summary a:hover {
  color: var(--color-link-hover);
}

.markdown_summary :not(pre)>code {
  font-family: var(--font-mono);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-8, 1.25rem);
  padding: var(--padding-code, 0.25rem 0.375rem);
  border-radius: var(--rounded-sm, 0.25rem);
  background-color: var(--bg-code);
}

.example>details .arrow_toggle {
  color: var(--color-text-accent);
}

.example>details[open] .arrow_toggle {
  transform: rotate(90deg);
}

.example>details>summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--rounded-md);
  width: 100%;
  line-height: var(--leading-10);
}

.example>details>summary::-webkit-details-marker {
  display: none;
}