Update direction CSS properties

interledger · Apr 8, 2024 · 0a91ddd · 0a91ddd
1 parent 8ccb180
commit 0a91ddd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git 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
@@ -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 {