feat: Implement SDS admonitions for docs site

[melissawm]

Closes #765

Implements callouts according to SDS

PREVIEW: https://melissawm.github.io/cryoet-data-portal/cryoet_data_portal_docsite_examples.html#examples

See also https://melissawm.github.io/cryoet-data-portal/cryoet_data_portal_docsite_napari.html#using-napari

[dgmccart]

The callouts aren't readable in dark mode. Can we implement a color change for the text?

[dgmccart]

Also, could we change the styling on the example page from blue callouts to the accordion styling used in the FAQ page? With that change, please also update the color of the callouts on the napari page to the blue that is from the current examples callouts.

[melissawm]

@dgmccart to clarify - we want to use the blue from the theme, instead of the blue from sds?

Current blue (from sphinx-immaterial theme):

SDS blue (recommended by Kevin, see https://sds.czi.design/009eaf17b/p/72e266-callouts)

[dgmccart]

Good catch - use the SDS blue please.

[melissawm]

I've updated the PR with the requested changes. Maybe I am missing something but I didn't find any details on how to use admonitions for dark mode in SDS - so I kept them as-is. Let me know if this should be changed. I don't know if I like them, to be honest 😅

Some examples:

Full Preview: https://melissawm.github.io/cryoet-data-portal/cryoet_data_portal_docsite_examples.html#examples

[dgmccart]

@kev-zunshiwang could you do a quick review of the dark mode implementation to see if it is acceptable?

[kev-zunshiwang]

Hey Melissa, some spec feedback for the callout component below:

• round all 4 corners by 4px.
• bold the title to font-weight: 600
• padding all around should be 12px
• padding between title and paragraph should be 4px.
• for the code background color inside the callout use gray100 (#F3F3F3)

[kev-zunshiwang]

Some feedback for the accordion component:

• bold the questions using font-weight 600
• change the caret color to #6C6C6C

[kev-zunshiwang]

Dark mode for callout component:
I checked in with Connor that we have dark mode variant for the callout components. It doesn't seem to reflect properly on the website

You can reach out to #sci-design-system-support and Timmy or Masoud will hop in for help!

[dgmccart]

You can reach out to #sci-design-system-support and Timmy or Masoud will hop in for help!

@melissawm Let me know if you need help reaching out to them.

[melissawm]

Hi all - I did not have the correct link to SDS. Looking at the links in the channel linked above I found the correct repo for SDS and I can see the dark mode recommendations: https://chanzuckerberg.github.io/sci-components/?path=/story/components-callout--default&globals=theme:dark

Thanks!!

[melissawm]

Hi folks, I think I got everything now. See screenshots below.

[dgmccart]

LGTM!