From b763ba3e76d08f9814370fbeb99e119c1c7208e1 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Fri, 22 Nov 2024 15:18:30 +1000 Subject: [PATCH] feat: update updates page layout for new mocks (#2495) --- @types/theme.d.ts | 14 +++ .../components/Content/content.styles.ts | 3 +- docs/common/frontmatter.ts | 1 + docs/common/utils.ts | 11 ++- docs/dcp-updates.mdx | 87 +++++++++---------- site-config/data-portal/dev/themeOptions.ts | 60 +------------ styles/mixins/fonts.ts | 20 +++++ theme/typography/constants.ts | 73 ++++++++++++++++ theme/typography/types.ts | 8 ++ utils/docPages.ts | 2 +- 10 files changed, 173 insertions(+), 106 deletions(-) create mode 100644 styles/mixins/fonts.ts create mode 100644 theme/typography/constants.ts create mode 100644 theme/typography/types.ts diff --git a/@types/theme.d.ts b/@types/theme.d.ts index 35ea6233..3090bf33 100644 --- a/@types/theme.d.ts +++ b/@types/theme.d.ts @@ -1,4 +1,18 @@ import type {} from "@mui/material/Tabs"; +import type {} from "@mui/material/styles"; + +/** + * Typography definitions. + */ +declare module "@mui/material/styles" { + interface TypographyVariants { + "text-heading-xsmall": TypographyStyleOptions; + } + + interface TypographyVariantsOptions { + "text-heading-xsmall"?: TypographyStyleOptions; + } +} /** * Tabs prop options. diff --git a/components/Layout/components/Content/content.styles.ts b/components/Layout/components/Content/content.styles.ts index 6350acde..44ff0055 100644 --- a/components/Layout/components/Content/content.styles.ts +++ b/components/Layout/components/Content/content.styles.ts @@ -11,6 +11,7 @@ import { import { ThemeProps } from "@databiosphere/findable-ui/lib/theme/theme"; import { css } from "@emotion/react"; import styled from "@emotion/styled"; +import { textHeadingXSmall } from "../../../../styles/mixins/fonts"; interface Props { headerHeight: number; @@ -129,7 +130,7 @@ export const Content = styled.div` } h3 { - ${textHeadingSmall}; + ${textHeadingXSmall}; margin: 32px 0 16px; } diff --git a/docs/common/frontmatter.ts b/docs/common/frontmatter.ts index a2d09ad6..d81d345c 100644 --- a/docs/common/frontmatter.ts +++ b/docs/common/frontmatter.ts @@ -3,5 +3,6 @@ export type Frontmatter = DefaultFrontmatter; export interface DefaultFrontmatter { description: string; hidden?: boolean; + outlineMaxDepth?: number; title: string; } diff --git a/docs/common/utils.ts b/docs/common/utils.ts index 76239dc8..9abeb741 100644 --- a/docs/common/utils.ts +++ b/docs/common/utils.ts @@ -10,14 +10,21 @@ import { SlugByFilePaths, } from "../../site-config/data-portal/dev/navigation/entities"; import { navigation as navigationConfig } from "../../site-config/data-portal/dev/navigation/navigation"; +import { Frontmatter } from "./frontmatter"; /** * Filters out headings (H1, and H3-H6) from the outline. + * Fontmatter outline max depth may be used to determine the depth of the outline; where the default is H1 - H3. * @param outline - Outline item. + * @param frontmatter - Frontmatter. * @returns true if the heading depth is 2 or 3. */ -export function filterOutline(outline: OutlineItem): boolean { - return outline.depth > 1 && outline.depth < 4; +export function filterOutline( + outline: OutlineItem, + frontmatter: Frontmatter +): boolean { + const { outlineMaxDepth = 4 } = frontmatter; + return outline.depth > 1 && outline.depth < outlineMaxDepth; } /** diff --git a/docs/dcp-updates.mdx b/docs/dcp-updates.mdx index 99107864..e34ccf1a 100644 --- a/docs/dcp-updates.mdx +++ b/docs/dcp-updates.mdx @@ -1,12 +1,13 @@ --- date: "2020-12-07" description: "Latest updates for the HCA Data Portal." +outlineMaxDepth: 3 title: HCA Data Portal Updates --- # HCA Data Portal Platform Updates -#### August 5, 2024 +## August 5, 2024 ### Release Highlights @@ -53,7 +54,7 @@ available: 30. [scRNA-seq assessment of the human lung, spleen, and esophagus tissue stability after cold preservation](https://data.humancellatlas.org/explore/projects/c4077b3c-5c98-4d26-a614-246d12c2e5d7) -#### June 28, 2024 +## June 28, 2024 ### Release Highlights @@ -69,7 +70,7 @@ available: 3. [Single-cell transcriptomics of human T cells reveals tissue and activation signatures in health and disease](https://data.humancellatlas.org/explore/projects/4a95101c-9ffc-4f30-a809-f04518a23803) -#### May 29, 2024 +## May 29, 2024 ### Release Highlights @@ -83,7 +84,7 @@ available: 5. [Spatial transcriptomic profiling of human retinoblastoma](https://data.humancellatlas.org/explore/projects/1662accf-0e0c-48c4-9314-5aba063f2220) -#### May 9, 2024 +## May 9, 2024 ### Release Highlights @@ -105,7 +106,7 @@ available: 2. [A human cell atlas of the pressure-induced hypertrophic heart](https://data.humancellatlas.org/explore/projects/902dc043-7091-445c-9442-d72e163b9879) 3. [Cell-specific cis-regulatory elements and mechanisms of non-coding genetic disease in human retina and retinal organoids](https://data.humancellatlas.org/explore/projects/aebc99a3-3151-482a-9709-da6802617763) -#### April 8, 2024 +## April 8, 2024 ### Release Highlights @@ -124,7 +125,7 @@ available: 4. [Single-cell transcriptomic atlas of the human retina identifies cell types associated with age-related macular degeneration](https://data.humancellatlas.org/explore/projects/07d5987e-7f9e-4f34-b0fb-a185a35504f5) -#### March 20, 2024 +## March 20, 2024 ### Release Highlights @@ -162,9 +163,7 @@ available: 14. [Proliferating SPP1/MERTK-expressing macrophages in idiopathic pulmonary fibrosis](https://explore.data.humancellatlas.org/projects/6735ff73-1a04-422e-b500-730202e46f8a) 15. [Single-cell RNA-Seq Investigation of Foveal and Peripheral Expression in the Human Retina](https://explore.data.humancellatlas.org/projects/4bec484d-ca7a-47b4-8d48-8830e06ad6db) - - -#### January 16, 2023 +## January 16, 2023 ### Release Highlights @@ -222,7 +221,7 @@ is available in the Data Portal. 26. [Transcriptional analysis of cystic fibrosis airways at single-cell resolution reveals altered epithelial cell states and composition](https://data.humancellatlas.org/explore/projects/e526d91d-cf3a-44cb-80c5-fd7676b55a1d) -#### December 4, 2023 +## December 4, 2023 ### Release Highlights @@ -247,7 +246,7 @@ is available in the Data Portal. 4. [Single-cell RNA sequencing reveals the effects of chemotherapy on human pancreatic adenocarcinoma and its tumor microenvironment](https://data.humancellatlas.org/explore/projects/7f9766ff-bb12-4279-b340-78d140bdd7ba) -#### October 31, 2023 +## October 31, 2023 ### Release Highlights @@ -274,7 +273,7 @@ available: ["Single nucleus transcriptome and chromatin accessibility of postmor 4. [Single-cell transcriptome profiling of an adult human cell atlas of 15 major organs](https://data.humancellatlas.org/explore/projects/376a7f55-b876-4f60-9cf3-ed7bc83d5415) 5. [Single-cell transcriptomics uncovers distinct molecular signatures of stem cells in chronic myeloid leukemia](https://data.humancellatlas.org/explore/projects/2a72a4e5-66b2-405a-bb7c-1e463e8febb0) -#### September 27, 2023 +## September 27, 2023 ### Release Highlights @@ -299,7 +298,7 @@ available: ["Single nucleus transcriptome and chromatin accessibility of postmor 4. [Discriminating mild from critical COVID-19 by innate and adaptive immune single-cell profiling of bronchoalveolar lavages](https://data.humancellatlas.org/explore/projects/92892ab2-1334-4b1c-9761-14f5a73548ea) 5. [Harnessing Expressed Single Nucleotide Variation and Single Cell RNA Sequencing To Define Immune Cell Chimerism in the Rejecting Kidney Transplant](https://data.humancellatlas.org/explore/projects/4ef86852-aca0-4a91-8522-9968e0e54dbe) -#### August 28, 2023 +## August 28, 2023 ### New Raw Data, Metadata, and Contributor-generated Matrices (5) @@ -335,7 +334,7 @@ available: ["Single nucleus transcriptome and chromatin accessibility of postmor 22. [Single-cell analysis of human non-small cell lung cancer lesions refines tumor classification and patient stratification](https://data.humancellatlas.org/explore/projects/b208466a-6fb0-4385-8cfb-8e03ff6b939e) 23. [Single-cell transcriptomes from human kidneys reveal the cellular identity of renal tumors](https://data.humancellatlas.org/explore/projects/d8ae869c-39c2-4cdd-b3fc-2d0d8f60e7b8) -#### July 27, 2023 +## July 27, 2023 ### New Raw Data, Metadata, and Contributor-generated Matrices (21) @@ -368,7 +367,7 @@ available: ["Single nucleus transcriptome and chromatin accessibility of postmor 3. [A multi-omics atlas of the human retina at single-cell resolution](https://data.humancellatlas.org/explore/projects/9c20a245-f2c0-43ae-82c9-2232ec6b594f) 4. [AIDA](https://data.humancellatlas.org/explore/projects/f0f89c14-7460-4bab-9d42-22228a91f185) -#### June 26, 2023 +## June 26, 2023 ### Release Highlights @@ -404,7 +403,7 @@ is available in the Data Portal. 1. [A single cell atlas of the human proximal epididymis reveals cell-type specific functions and distinct roles for CFTR](https://data.humancellatlas.org/explore/projects/842605c7-375a-47c5-9e2c-a71c2c00fcad) 2. [Time-resolved systems immunology reveals a late juncture linked to fatal COVID-19](https://data.humancellatlas.org/explore/projects/ae62bb31-55ca-4127-b0fb-b1771a604645) -#### June 13, 2023 +## June 13, 2023 ### Release Highlights @@ -445,7 +444,7 @@ again during an upcoming release. 3. [A single-cell transcriptomic atlas of the human ciliary body](https://data.humancellatlas.org/explore/projects/07518430-7031-4bdf-a3ce-1bf0917a1923) 4. [Integrated analysis of multimodal single-cell data](https://data.humancellatlas.org/explore/projects/3ce9ae94-c469-419a-9637-5d138a4e642f) -#### May 11, 2023 +## May 11, 2023 ### Release Highlights @@ -464,7 +463,7 @@ is available from the Gut Biological Network. 1. [Severe COVID-19 Is Marked by a Dysregulated Myeloid Cell Compartment](https://data.humancellatlas.org/explore/projects/cd9d6360-ce38-4321-97df-f13c79e3cb84) 2. [Vento-tormo: Single cell profiling of COVID-19 patients: an international data resource from multiple tissues](https://data.humancellatlas.org/explore/projects/2d4d89f2-ebeb-467c-ae60-a3efc5e8d4ba) -#### March 31, 2023 +## March 31, 2023 ### Release Highlights @@ -492,7 +491,7 @@ is available in the Data Portal. 9. [Transcriptional changes in the mammary gland during lactation revealed by single cell sequencing of cells from human milk](https://data.humancellatlas.org/explore/projects/e956e66a-ac8e-483a-963a-0f92c7e5abfb) 10. [Ulcerative colitis is characterized by a plasmablast-skewed humoral response associated with disease activity](https://data.humancellatlas.org/explore/projects/1688d7cc-6f5c-49ef-b353-e308b61d4e4c) -#### February 24, 2023 +## February 24, 2023 ### Release Highlights @@ -529,7 +528,7 @@ available: ["Comprehensive cell atlas of the first-trimester developing human br 2. [Plasticity of distal nephron epithelia from human kidney organoids enables the induction of ureteric tip and stalk](https://data.humancellatlas.org/explore/projects/e57dc176-ab98-446b-90c2-89e0842152fd) 3. [Comparison of manual and two types of bioprinted kidney organoids by single cell RNA-seq](https://data.humancellatlas.org/explore/projects/8787c238-89ef-4636-a57d-3167e8b54a80) -#### December 20, 2022 +## December 20, 2022 ### Release Highlights @@ -562,7 +561,7 @@ project ["Immune cell profiling of preeclamptic pregnant and postpartum women by 5. [Genome-Wide DNA Hypermethylation in the Wound-Edge of Chronic Wound Patients Opposes Closure by Impairing Epithelial to Mesenchymal Transition](https://data.humancellatlas.org/explore/projects/34ec845b-cd7a-4c43-99e4-d2932d5d85bb) 6. [Single-cell analysis of Crohn’s disease lesions identifies a pathogenic cellular module associated with resistance to anti-TNF therapy](https://data.humancellatlas.org/explore/projects/504e0cee-1688-40fa-b936-361c4a831f87) -#### November 28, 2022 +## November 28, 2022 ### Release Highlights @@ -590,7 +589,7 @@ project [Single cell analysis of endometriosis reveals a coordinated transcripti 1. [Cellular heterogeneity of human fallopian tubes in normal and hydrosalpinx disease states identified by scRNA-seq](https://data.humancellatlas.org/explore/projects/21ea8ddb-525f-4f1f-a820-31f0360399a2) 1. [A single-cell reference map of transcriptional states for human blood and tissue T cell activation](https://data.humancellatlas.org/explore/projects/4a95101c-9ffc-4f30-a809-f04518a23803) -#### October 19, 2022 +## October 19, 2022 ### Release Highlights @@ -613,7 +612,7 @@ combines spatial transcriptomic data with methylome data. 1. [Expansion of Fcγ Receptor IIIa-Positive Macrophages, Ficolin 1-Positive Monocyte-Derived Dendritic Cells, and Plasmacytoid Dendritic Cells Associated With Severe Skin Disease in Systemic Sclerosis](https://data.humancellatlas.org/explore/projects/7f351a4c-d24c-4fcd-9040-f79071b097d0) 2. [A single-cell and single-nucleus RNA-seq toolbox for fresh and frozen human tumors](https://data.humancellatlas.org/explore/projects/a62dae2e-cd69-4d5c-b5f8-4f7e8abdbafa) -#### September 26, 2022 +## September 26, 2022 ### Release Highlights @@ -643,7 +642,7 @@ helped us reach this milestone! 1. [Spatial multi-omic map of human myocardial infarction](https://data.humancellatlas.org/explore/projects/e9f36305-d857-44a3-93f0-df4e6007dc97) 1. [Spatial proteogenomics reveals distinct and evolutionarily-conserved hepatic macrophage niches](https://data.humancellatlas.org/explore/projects/425c2759-db66-4c93-a358-a562c069b1f1) -#### August 23, 2022 +## August 23, 2022 ### Release Highlights @@ -710,7 +709,7 @@ project [Longitudinal Multi-omics Analyses Identify Responses of Megakaryocytes, 1. [The Human and Mouse Enteric Nervous System at Single-Cell Resolution](https://data.humancellatlas.org/explore/projects/7be05025-9972-493a-856f-3342a8d1b183) 1. [Transcriptional analysis of cystic fibrosis airways at single-cell resolution reveals altered epithelial cell states and composition](https://data.humancellatlas.org/explore/projects/e526d91d-cf3a-44cb-80c5-fd7676b55a1d) -#### July 19, 2022 +## July 19, 2022 ### Release Highlights @@ -737,7 +736,7 @@ project [Ureter single-cell and spatial mapping reveal cell types, architecture, 1. [Single-cell RNA Sequencing of human microglia from post mortem Alzheimers Disease CNS tissue](https://data.humancellatlas.org/explore/projects/b51f49b4-0d2e-4cbd-bbd5-04cd171fc2fa) 1. [Spatial multi-omic map of human myocardial infarction](https://data.humancellatlas.org/explore/projects/e9f36305-d857-44a3-93f0-df4e6007dc97) -#### June 29, 2022 +## June 29, 2022 ### Release Highlights @@ -794,7 +793,7 @@ one: [A human fetal lung cell atlas uncovers proximal-distal gradients of differ 1. [The Immune Atlas of Human Deciduas With Unexplained Recurrent Pregnancy Loss](https://data.humancellatlas.org/explore/projects/3cfcdff5-dee1-4a7b-a591-c09c6e850b11) 1. [The effect of Mtb aggregation on monocyte-derived macrophage transcription profiles](https://data.humancellatlas.org/explore/projects/b9484e4e-dc40-4e38-9b85-4cecf5b8c068) -#### June 9, 2022 +## June 9, 2022 ### Release Highlights @@ -832,7 +831,7 @@ combines the power of Visium and CITE-seq. 1. [Single-cell RNA Sequencing of human microglia from post mortem Alzheimers Disease CNS tissue](https://data.humancellatlas.org/explore/projects/b51f49b4-0d2e-4cbd-bbd5-04cd171fc2fa) 1. [Single-cell profiling of human subventricular zone progenitors identifies SFRP1 as a target for stimulating progenitor activation](https://data.humancellatlas.org/explore/projects/3cdaf942-f8ad-42e8-a77b-4efedb9ea7b6) -#### April 20, 2022 +## April 20, 2022 ### Release Highlights @@ -886,7 +885,7 @@ available: [A proximal-to-distal survey of healthy adult human small intestine a 1. [Single-Cell Transcriptomic Profiling of Human Dental Pulp in Sound and Carious Teeth: A Pilot Study](https://data.humancellatlas.org/explore/projects/6f89a7f3-8d4a-4344-aa4f-eccfe7e91076) 1. [Single-cell analysis reveals the continuum of human lympho-myeloid progenitor cells](https://data.humancellatlas.org/explore/projects/1ce3b3dc-02f2-44a8-96da-d6d107b27a76) -#### March 30, 2022 +## March 30, 2022 ### Release Highlights @@ -922,7 +921,7 @@ project [Single-cell RNA sequencing of urinary cells reveals distinct cellular d 1. [The Developmental Heterogeneity of Human Natural Killer Cells Defined by Single-cell Transcriptome](https://data.humancellatlas.org/explore/projects/403c3e76-6814-4a2d-a580-5dd5de38c7ff) 1. [The cellular immune response to COVID-19 deciphered by single cell multi-omics across three UK centres](https://data.humancellatlas.org/explore/projects/b963bd4b-4bc1-4404-8425-69d74bc636b8) -#### February 14, 2022 +## February 14, 2022 ### Release Highlights @@ -989,7 +988,7 @@ Thailand. 1. [Tracing pluripotency of human early embryos and embryonic stem cells by single cell RNA-seq](https://data.humancellatlas.org/explore/projects/3a694703-3084-4ece-9abe-d935fd5f6748) 1. [Transcriptomes of 1,529 individual cells from 88 human preimplantation embryos](https://data.humancellatlas.org/explore/projects/03c6fce7-789e-4e78-a27a-664d562bb738) -#### December 20, 2021 +## December 20, 2021 ### Release Highlights @@ -1044,7 +1043,7 @@ scATAC): 1. [Single-cell transcriptomics uncovers human corneal limbal stem cells and their differentiation trajectory](https://data.humancellatlas.org/explore/projects/24c654a5-caa5-440a-8f02-582921f2db4a) 1. [Stress-induced RNA–chromatin interactions promote endothelial dysfunction](https://data.humancellatlas.org/explore/projects/87d52a86-bdc7-440c-b84d-170f7dc346d9) -#### November 11, 2021 +## November 11, 2021 ### Release Highlights @@ -1095,7 +1094,7 @@ page (as shown below). 1. [AIDA pilot data](https://data.humancellatlas.org/explore/projects/f0f89c14-7460-4bab-9d42-22228a91f185) 1. [Single cell RNA sequencing of multiple myeloma II](https://data.humancellatlas.org/explore/projects/0c3b7785-f74d-4091-8616-a68757e4c2a8) -#### October 13, 2021 +## October 13, 2021 ### Release Highlights @@ -1161,7 +1160,7 @@ the Data Portal team and community and give you the latest updates on Data Porta 1. [The Immune Atlas of Human Deciduas With Unexplained Recurrent Pregnancy Loss](https://data.humancellatlas.org/explore/projects/3cfcdff5-dee1-4a7b-a591-c09c6e850b11) 1. [The effect of Mtb aggregation on monocyte-derived macrophage transcription profiles](https://data.humancellatlas.org/explore/projects/b9484e4e-dc40-4e38-9b85-4cecf5b8c068) -#### September 17, 2021 +## September 17, 2021 ### New Raw Data @@ -1192,7 +1191,7 @@ The following 3 projects have updated files: ## HCA Data Portal now contains data for 14 million estimated cells -#### August 25, 2021 +## August 25, 2021 ### New Raw Data @@ -1220,14 +1219,14 @@ The following projects have new contributor-generated matrix files: ### Browser Updates -#### Selecting "Normal" Samples +## Selecting "Normal" Samples To enable easier discovery of normal tissues, we've modified the Specimen Disease search facet on the Explore page so that the "Normal" option is now at the top of the drop-down. ![Selecting Normal Samples](/hca-bio-networks/dcp-updates/normal.png) -#### Selecting Files by "Content Description" +## Selecting Files by "Content Description" The File facet has a new Content Description column to enable searching for files by the type of data they contain. @@ -1235,7 +1234,7 @@ The File facet has a new Content Description column to enable searching for file ## New Managed Access and Seed Network projects -#### July 23, 2021 +## July 23, 2021 The HCA Data Portal has added its first managed access project. @@ -1296,7 +1295,7 @@ Data Portal. ## Data Portal now contains data for 13.5 million cells -#### June 16, 2021 +## June 16, 2021 * Raw data and contributor-generated matrices are available for 15 new projects. These single-cell data are derived from: @@ -1320,7 +1319,7 @@ tools such as Bioconductor, Cumulus, Pegasus, Scanpy, and Seurat. ## Raw sequencing data and contributor-generated matrices for 23 new projects available for download -#### May 10, 2021 +## May 10, 2021 * Data Portal now has data for 12.2 million cells, including new standardized analyses for 13 projects as well as raw sequencing data and contributor-generated matrices for 23 new projects. @@ -1342,7 +1341,7 @@ matrix [batch correction and normalization](/guides/consumer-vignettes/matrices# ## Raw data for 16 new projects now available -#### April 12, 2021 +## April 12, 2021 Raw sequencing data for 16 new projects are now available in the HCA Data Portal [Data Browser](https://data.humancellatlas.org/explore/projects). These projects include single-cell @@ -1357,7 +1356,7 @@ from: ## Processed data now available for 26 HCA 10x datasets -#### April 02, 2021 +## April 02, 2021 The [HCA Data Portal 2.0 Preview](https://data.humancellatlas.org/explore/projects) now has standardized BAMs and count matrices ( @@ -1400,7 +1399,7 @@ guide. ## HCA Data Portal 2.0 launches; new projects, contributor generated matrices and HCA Data Portal 2.0 infrastructure -#### December 11, 2020 +## December 11, 2020 In the spirit of bringing HCA data to the community as quickly as possible, we are releasing the new HCA Data Portal 2.0 data and @@ -1451,7 +1450,7 @@ Once processing is complete, we will retire HCA Data Portal 1.0 View. ## Coming Soon - HCA Data Portal 2.0 -#### October 9, 2020 +## October 9, 2020 We are excited to announce the launch of the HCA Data Portal 2.0 this fall. This has been a collaborative effort over the past 6 diff --git a/site-config/data-portal/dev/themeOptions.ts b/site-config/data-portal/dev/themeOptions.ts index 938a94a9..a6615d26 100644 --- a/site-config/data-portal/dev/themeOptions.ts +++ b/site-config/data-portal/dev/themeOptions.ts @@ -1,14 +1,5 @@ -import { tabletUp } from "@databiosphere/findable-ui/lib/theme/common/breakpoints"; -import { - TEXT_BODY_LARGE_500, - TEXT_HEADING, - TEXT_HEADING_LARGE, - TEXT_HEADING_SMALL, - TEXT_HEADING_XLARGE, -} from "@databiosphere/findable-ui/lib/theme/common/typography"; import { ThemeOptions } from "@mui/material"; - -const FONT_FAMILY_DIN = "'din-2014', sans-serif"; +import { TYPOGRAPHY } from "../../../theme/typography/constants"; export const themeOptions: ThemeOptions = { palette: { @@ -17,52 +8,5 @@ export const themeOptions: ThemeOptions = { main: "#1C7CC7", }, }, - typography: { - [TEXT_BODY_LARGE_500]: { - fontFamily: FONT_FAMILY_DIN, - fontSize: 18, - fontWeight: 400, - }, - [TEXT_HEADING]: { - fontFamily: FONT_FAMILY_DIN, - fontSize: 22, - fontWeight: 400, - letterSpacing: "normal", - [tabletUp]: { - fontSize: 26, - letterSpacing: "normal", - }, - }, - [TEXT_HEADING_LARGE]: { - fontFamily: FONT_FAMILY_DIN, - fontSize: 26, - fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere. - letterSpacing: "normal", - lineHeight: "34px", - [tabletUp]: { - fontSize: 32, - letterSpacing: "normal", - }, - }, - [TEXT_HEADING_SMALL]: { - fontFamily: FONT_FAMILY_DIN, - fontSize: 20, - fontWeight: 400, - letterSpacing: "normal", - [tabletUp]: { - fontSize: 22, - letterSpacing: "normal", - }, - }, - [TEXT_HEADING_XLARGE]: { - fontFamily: FONT_FAMILY_DIN, - fontSize: 32, - fontWeight: 400, - letterSpacing: "normal", - [tabletUp]: { - fontSize: 42, - letterSpacing: "-0.4px", - }, - }, - }, + typography: TYPOGRAPHY, }; diff --git a/styles/mixins/fonts.ts b/styles/mixins/fonts.ts new file mode 100644 index 00000000..9629a81f --- /dev/null +++ b/styles/mixins/fonts.ts @@ -0,0 +1,20 @@ +import { css, SerializedStyles } from "@emotion/react"; +import { TYPOGRAPHY_VARIANT } from "../../theme/typography/types"; + +/** + * Returns typography style for the specified typography variant. + * @param TYPOGRAPHY_VARIANT - Typography variant name. + * @returns typography styles for the variant. + */ +function typographyToCSS(TYPOGRAPHY_VARIANT: string) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO revisit any. + return (props: any): SerializedStyles => { + return css` + ${props.theme.typography[TYPOGRAPHY_VARIANT]} + `; + }; +} + +export const textHeadingXSmall = typographyToCSS( + TYPOGRAPHY_VARIANT.TEXT_HEADING_XSMALL +); diff --git a/theme/typography/constants.ts b/theme/typography/constants.ts new file mode 100644 index 00000000..3728ae01 --- /dev/null +++ b/theme/typography/constants.ts @@ -0,0 +1,73 @@ +import { tabletUp } from "@databiosphere/findable-ui/lib/theme/common/breakpoints"; +import { CSSProperties } from "@mui/material/styles/createTypography"; +import { TYPOGRAPHY_VARIANT } from "./types"; + +const FONT_FAMILY_DIN = "'din-2014', sans-serif"; + +const textBodyLarge500: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 18, + fontWeight: 400, +}; + +const textHeading: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 22, + fontWeight: 400, + letterSpacing: "normal", + [tabletUp]: { + fontSize: 24, + letterSpacing: "normal", + }, +}; + +const textHeadingLarge: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 26, + fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere. + letterSpacing: "normal", + lineHeight: "34px", + [tabletUp]: { + fontSize: 32, + letterSpacing: "normal", + }, +}; + +const textHeadingSmall: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 20, + fontWeight: 400, + letterSpacing: "normal", + [tabletUp]: { + fontSize: 22, + letterSpacing: "normal", + }, +}; + +const textHeadingXLarge: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 32, + fontWeight: 400, + letterSpacing: "normal", + [tabletUp]: { + fontSize: 42, + letterSpacing: "-0.4px", + }, +}; + +const textHeadingXSmall: CSSProperties = { + fontFamily: FONT_FAMILY_DIN, + fontSize: 18, + fontWeight: 400, // TODO: Update to 600 when font is available, here and elsewhere. + letterSpacing: "normal", + lineHeight: "26px", +}; + +export const TYPOGRAPHY: Record = { + [TYPOGRAPHY_VARIANT.TEXT_BODY_LARGE_500]: textBodyLarge500, + [TYPOGRAPHY_VARIANT.TEXT_HEADING]: textHeading, + [TYPOGRAPHY_VARIANT.TEXT_HEADING_LARGE]: textHeadingLarge, + [TYPOGRAPHY_VARIANT.TEXT_HEADING_SMALL]: textHeadingSmall, + [TYPOGRAPHY_VARIANT.TEXT_HEADING_XSMALL]: textHeadingXSmall, + [TYPOGRAPHY_VARIANT.TEXT_HEADING_XLARGE]: textHeadingXLarge, +}; diff --git a/theme/typography/types.ts b/theme/typography/types.ts new file mode 100644 index 00000000..2dadba84 --- /dev/null +++ b/theme/typography/types.ts @@ -0,0 +1,8 @@ +export enum TYPOGRAPHY_VARIANT { + TEXT_BODY_LARGE_500 = "text-body-large-500", + TEXT_HEADING = "text-heading", + TEXT_HEADING_LARGE = "text-heading-large", + TEXT_HEADING_SMALL = "text-heading-small", + TEXT_HEADING_XLARGE = "text-heading-xlarge", + TEXT_HEADING_XSMALL = "text-heading-xsmall", +} diff --git a/utils/docPages.ts b/utils/docPages.ts index 83b16a22..fcc42ddf 100644 --- a/utils/docPages.ts +++ b/utils/docPages.ts @@ -56,7 +56,7 @@ export async function getDocsStaticProps( layoutStyle: navigationConfig?.layoutStyle ?? null, mdxSource, navigation: navigationConfig?.navigation ?? null, - outline: outline.filter(filterOutline), + outline: outline.filter((o) => filterOutline(o, frontmatter)), pageTitle: frontmatter.title ?? null, themeOptions, },