diff --git a/package.json b/package.json index 333c24c..1a8cdb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@interledger/docs-design-system", - "version": "0.3.3", + "version": "0.3.4", "type": "module", "description": "Shared styles and components used across all Interledger Starlight documentation sites", "exports": { diff --git a/src/styles/ilf-docs.css b/src/styles/ilf-docs.css index 72f7a50..ffd040d 100644 --- a/src/styles/ilf-docs.css +++ b/src/styles/ilf-docs.css @@ -169,7 +169,7 @@ .right-sidebar .right-sidebar-panel { border-inline-start: 1px solid var(--sl-color-gray-6); - margin-top: var(--space-xs); + margin-block-start: var(--space-xs); } } @@ -189,14 +189,12 @@ .page { flex-direction: row; max-width: 95rem; - margin-left: auto; - margin-right: auto; + margin-inline: auto; } div.header { max-width: 95rem; - margin-left: auto; - margin-right: auto; + margin-inline: auto; } nav.sidebar .sidebar-pane { @@ -259,24 +257,24 @@ .sl-markdown-content.sl-markdown-content :not(a, strong, em, del, span, label, input) + :not(a, strong, em, del, span, label, input, :where(.not-content *)) { - margin-top: var(--space-s); + margin-block-start: var(--space-s); } .sl-markdown-content.sl-markdown-content :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6, .heading):not(:where(.not-content *)) { - margin-top: var(--space-m); + margin-block-start: var(--space-m); } .sl-markdown-content.sl-markdown-content li > ul, .sl-markdown-content.sl-markdown-content li > ol, .sl-markdown-content.sl-markdown-content li + li:not(:where(.not-content *)) { - margin-top: var(--space-2xs); + margin-block-start: var(--space-2xs); } .sl-markdown-content.sl-markdown-content aside + div, .sl-markdown-content.sl-markdown-content div + div { - margin-top: var(--space-m); + margin-block-start: var(--space-m); } /* Rounded corners and shadow flair */ @@ -309,7 +307,7 @@ aside.starlight-aside { } p.starlight-aside__title + section.starlight-aside__content { - margin-top: var(--space-2xs); + margin-block-start: var(--space-2xs); } /* Tab style overrides */ @@ -320,7 +318,7 @@ starlight-tabs pre { starlight-tabs .tab > [role="tab"] { color: var(--sl-color-accent); text-decoration: underline; - padding-bottom: var(--space-3xs); + padding-block-end: var(--space-3xs); } starlight-tabs .tab [role="tab"][aria-selected] { @@ -346,11 +344,11 @@ th { } thead tr:first-of-type th:first-of-type { - border-top-left-radius: var(--border-radius); + border-start-start-radius: var(--border-radius); } thead tr:first-of-type th:last-of-type { - border-top-right-radius: var(--border-radius); + border-start-end-radius: var(--border-radius); } .sl-markdown-content @@ -388,7 +386,7 @@ thead tr:first-of-type th:last-of-type { tbody tr:first-of-type:not(:where(.not-content *)) td:first-child { - border-top-left-radius: var(--border-radius); + border-start-start-radius: var(--border-radius); } .sl-markdown-content @@ -399,7 +397,7 @@ thead tr:first-of-type th:last-of-type { tbody tr:first-of-type:not(:where(.not-content *)) td:last-child { - border-top-right-radius: var(--border-radius); + border-start-end-radius: var(--border-radius); } .sl-markdown-content @@ -410,7 +408,7 @@ thead tr:first-of-type th:last-of-type { tbody tr:last-of-type:not(:where(.not-content *)) td:first-child { - border-bottom-left-radius: var(--border-radius); + border-end-start-radius: var(--border-radius); } .sl-markdown-content @@ -421,7 +419,7 @@ thead tr:first-of-type th:last-of-type { tbody tr:last-of-type:not(:where(.not-content *)) td:last-child { - border-bottom-right-radius: var(--border-radius); + border-end-end-radius: var(--border-radius); } .sl-markdown-content.sl-markdown-content pre:not(:where(.not-content *)) { @@ -458,6 +456,15 @@ thead tr:first-of-type th:last-of-type { text-decoration: underline; } +/* CodeBlock overrides */ +.sl-markdown-content .expressive-code .ec-line { + margin-block-start: initial; +} + +.codeblock .expressive-code figure.frame { + margin-block-start: initial; +} + /* Input styles */ label { font-size: var(--sl-text-body-sm); @@ -467,7 +474,7 @@ input:not([type="submit"]):not([type="file"]):not(.pagefind-ui__search-input) { border: 1px solid var(--sl-color-accent); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--border-radius); - margin-top: var(--space-3xs); + margin-block-start: var(--space-3xs); font-size: var(--sl-text-body); } @@ -482,7 +489,7 @@ input:not([type="submit"]):not([type="file"]):focus { /* Misc tweaks, overrides and fixes */ .sl-markdown-content button[aria-expanded="false"] + div { - margin-top: 0; + margin-block-start: 0; } .sl-markdown-content :is(iframe):not(:where(.not-content *)) { @@ -495,17 +502,13 @@ input:not([type="submit"]):not([type="file"]):focus { } } -.codeblock .expressive-code figure.frame { - margin-top: initial; -} - /* Footnote styles */ .footnotes.footnotes.footnotes { - margin-top: var(--space-l); + margin-block-start: var(--space-l); } .footnotes { - border-top: 1px dashed var(--sl-color-gray-6); + border-block-start: 1px dashed var(--sl-color-gray-6); } .footnotes {