diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss index b88609646a7..1e3b911c2e9 100644 --- a/packages/theme/styles/_text-editor.scss +++ b/packages/theme/styles/_text-editor.scss @@ -5,7 +5,7 @@ &.text-editor-view { font: inherit; - line-height: 150%; + line-height: 1.65; } } @@ -49,40 +49,71 @@ } h1 { - font-size: 1.75rem; - line-height: 150%; - margin-top: 2.25rem; - margin-bottom: 0.25rem; + font-size: 1.875rem; + line-height: 1.3; + letter-spacing: -0.025em; + margin-top: 3rem; + margin-bottom: 0.5rem; } h2 { - font-size: 1.375rem; - line-height: 150%; + font-size: 1.5rem; + line-height: 1.35; + letter-spacing: -0.015em; + margin-top: 2.25rem; + margin-bottom: 0.375rem; + } + + h3 { + font-size: 1.25rem; + line-height: 1.4; + letter-spacing: -0.01em; margin-top: 1.75rem; margin-bottom: 0.25rem; } - h3 { + h4 { font-size: 1.125rem; - line-height: 150%; + line-height: 1.4; + font-weight: 600; + color: var(--theme-content-color); + margin-top: 1.5rem; + margin-bottom: 0.25rem; + } + + h5 { + font-size: 1rem; + line-height: 1.5; + font-weight: 600; + color: var(--theme-content-color); + margin-top: 1.25rem; + margin-bottom: 0.25rem; + } + + h6 { + font-size: 0.875rem; + line-height: 1.5; + font-weight: 600; + color: var(--theme-dark-color); margin-top: 1.25rem; margin-bottom: 0.25rem; } p { - margin-block-start: 0.5rem; - margin-block-end: 0.5rem; + margin-block-start: 0; + margin-block-end: 0; } >*+* { - margin-top: 0.5rem; + margin-top: 0.75rem; margin-bottom: 0; } hr { margin: 1rem 0; - border-top: 0; - border-bottom: 1px solid var(--text-edtior-hr-border-color); + margin: 1.5rem 0; + border: none; + border-bottom: 2px solid var(--text-edtior-hr-border-color); } ul li { @@ -101,7 +132,7 @@ margin-top: 0.5rem; margin-bottom: 0.5rem; margin-right: .25rem; - margin-left: .75rem; + margin-left: 1.5rem; padding: 0; } @@ -112,11 +143,14 @@ ul>li:not(.todo-item)::before { content: "•"; - font-size: 1.5rem; + font-size: 1.25rem; + line-height: inherit; display: inline-block; position: absolute; + top: 0; left: -1rem; font-family: Arial, Helvetica, sans-serif; + color: var(--theme-text-placeholder-color); } ul { diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss index 235628047c0..d6c032331c7 100644 --- a/packages/theme/styles/prose.scss +++ b/packages/theme/styles/prose.scss @@ -73,7 +73,7 @@ table.proseTable { min-width: 1rem; height: 2rem; border: 1px solid var(--text-editor-table-border-color); - padding: .25rem .5rem; + padding: 0.375rem 0.625rem; vertical-align: top; box-sizing: border-box; position: relative; @@ -432,10 +432,20 @@ table.proseTable { .proseBlockQuote { margin-inline: 1px 0; - padding-left: 1.5em; - padding-right: 1.5em; + padding: 0.75em 1.25em; position: relative; - border-left: 2px solid var(--text-editor-block-quote-color); + border-left: 3px solid var(--text-editor-block-quote-color); + border-radius: 0 0.25rem 0.25rem 0; + background-color: rgba(255, 255, 255, 0.05); + + p { + font-style: italic; + color: var(--theme-content-color); + } +} + +.theme-light .proseBlockQuote { + background-color: rgba(0, 0, 0, 0.04); } .proseCode { @@ -454,8 +464,8 @@ table.proseTable { color: var(--theme-content-color); background-color: var(--theme-button-default); border: 1px solid var(--theme-button-border); - border-radius: .25rem; - padding: 0.25rem .5rem; + border-radius: .375rem; + padding: 0.75rem 1rem; user-select: text; cursor: auto; @@ -466,6 +476,7 @@ table.proseTable { word-wrap: nowrap; scrollbar-width: auto; font-size: .8125rem; + line-height: 1.6; font-family: var(--mono-font); } } @@ -477,6 +488,7 @@ pre.proseCodeBlock { pre.proseCodeBlock { button:not(.hovered) { opacity: 0; + transition: opacity 0.15s ease; } &:hover {