styles: Add Sphinx-specific typography

iati_sphinx_theme/theme.conf

@@ -1,3 +1,4 @@
 [theme]
 inherit = basic
 stylesheet = iati.css
+pygments_style = default

package.json

@@ -5,7 +5,7 @@
     "build:watch": "npm run build -- --watch"
   },
   "devDependencies": {
-    "iati-design-system": "^0.1.3",
+    "iati-design-system": "file://../design-system",
     "sass": "^1.75.0"
   }
 }

styles/_typography.scss

@@ -0,0 +1,66 @@
+@use "pkg:iati-design-system" as ds;
+
+.centered {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+
+.rubric {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.line-block {
+  margin: ds.$spacing-m 0;
+
+  .line-block {
+    margin: 0;
+    padding-left: ds.$spacing-m;
+  }
+}
+
+.headerlink {
+  color: ds.$color-grey-40;
+  text-decoration: none;
+  padding-left: ds.$spacing-m;
+
+  &:hover {
+    color: ds.$color-grey-90;
+  }
+}
+
+.guilabel {
+  background-color: ds.$color-teal-10;
+  border: 1px solid ds.$color-teal-70;
+  font-size: 0.9em;
+  padding: 0 0.2em;
+  border-radius: 0.2em;
+}
+
+// API Documentation
+
+.sig {
+  @extend .iati-code-inline;
+  display: inline-block;
+  color: ds.$color-grey-60;
+
+  .sig-name {
+    color: ds.$color-grey-90;
+    font-weight: bold;
+  }
+}
+
+// Code Blocks
+
+span.linenos {
+  color: ds.$color-grey-50;
+  margin-right: ds.$spacing-m;
+}
+
+.code-block-caption {
+  text-align: center;
+  font-style: italic;
+}

styles/main.scss

@@ -1 +1,2 @@
 @use "pkg:iati-design-system";
+@use "typography";