readability improvements and diff formatting

docusaurus.config.ts

@@ -2,14 +2,13 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 import {Options} from '@docusaurus/preset-classic';
-import {themes} from 'prism-react-renderer';
 import {irCode} from './src/themes/ir-code';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import sidebars from './sidebars';
 
 
-const lightCodeTheme = irCode.light
+const lightCodeTheme = irCode.light;
 const darkCodeTheme = irCode.dark;
 
 const navbarItems = Object.keys(sidebars).map((sidebarId):{

src/css/custom.css

@@ -2,18 +2,26 @@
 /*bundles Infima by default. Infima is a CSS framework designed to*/
 /*work well for content-centric websites.*/
 
+
 @font-face {
-    font-family: "NotoSans-Mono";
-    src: url(../../static/font/NotoSansMono-Regular.ttf) format('ttf');
+    font-family: 'NotoSans-Mono';
+    src: url('../../static/font/NotoSansMono-VariableFont_wdth,wght.ttf') format('truetype');
+    font-weight: 100 900; /* This allows the font to vary between weight 100 and 900 */
+    font-stretch: 62.5% 100%; /* Range for variable width */
+    font-style: normal;
 }
 
 pre {
-    font-family: "NotoSans-Mono", monospace;
-    font-weight: 400;
+    font-family: 'NotoSans-Mono', monospace;
+    font-weight: 490;
     line-height: 1.4rem;
 }
 
+
 :root {
+
+    /*--ifm-global-shadow-lw: 0 4px 4px 0 rgba(0, 0, 0, 0.2);*/
+
     /*BRAND*/
     --ir-brand-rgb: 231, 53, 54;
     --ir-brand-100: #FFDBD3;
@@ -216,6 +224,11 @@ html[data-theme='dark'] {
     --ifm-color-danger-contrast-foreground: var(--ifm-color-white);
     --ifm-color-success-contrast-background: var(--ifm-color-success-dark);
     --ifm-color-success-contrast-foreground: var(--ifm-color-white);
+
+
+    /* brighten items in sidebar */
+    --ifm-menu-color: var(--ifm-color-gray-300);
+    --ifm-menu-color-active: var(--ifm-color-warning-dark);
 }
 
 [data-theme='dark'] :root {
@@ -395,7 +408,8 @@ body {
     font-family: "Montserrat (compressed)", Trebuchet MS, sans-serif
 }
 
-.code-block-success-line {
+
+.code-block-success-line{
     background-color: rgba(152, 255, 0, 0.13);
     display: block;
     margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -427,3 +441,8 @@ body {
     padding: 0 var(--ifm-pre-padding);
     border-left: 3px solid rgba(198, 179, 243, 0.5);
 }
+
+[data-theme="light"] .theme-code-block {
+    border: 1px solid var(--ifm-color-gray-200);
+}
+

src/themes/ir-code/dark.ts

@@ -14,36 +14,34 @@ const theme: PrismTheme = {
         "class-name",
         "maybe-class-name",
         "sealed class",
-        "constant",
       ],
       style: {
-        color: "#aad5e7",
+        color: "#b6d3e3",
         fontWeight: "500"
 
       },
     },
+    {
+      types: ["tag"],
+      style: {
+        color: "#ffc19a",
+      },
+    },
     {
       types: [
         "imports",
         "doctype",
-        "builtin",
         "function",
       ],
       style: {
-        color: "#f1c98e",
-        fontWeight: "400"
+        color: "#cfba9b",
+        fontWeight: "600"
       },
     },
     {
-      types: ["property-access"],
+      types: ["property-access", "property"],
       style: {
-        color: "#74e1c9",
-      },
-    },
-    {
-      types: ["tag"],
-      style: {
-        color: "#ffc19a",
+        color: "#caa9de",
       },
     },
     {
@@ -59,9 +57,11 @@ const theme: PrismTheme = {
       },
     },
     {
-      types: ["comment", "prolog", "cdata", "operator", "inserted"],
+      types: ["comment", "prolog", "cdata"],
       style: {
-        color: "#dbc7e5",
+        color: "#cfc46d",
+        fontStyle: "italic",
+        fontWeight: "200"
       },
     },
     {
@@ -72,21 +72,22 @@ const theme: PrismTheme = {
         "selector",
         "important",
         "atrule",
-        "deleted",
+        "builtin",
       ],
       style: {
-        color: "#fca39d",
+        color: "#E3847D",
         fontWeight:"400"
       },
     },
+
     {
       types: ["entity", "number", "symbol"],
       style: {
         color: "#eaa3b7",
       },
     },
     {
-      types: ["punctuation"],
+      types: ["punctuation", "operator",],
       style: {
         color: "#f5f2ed",
         fontWeight: "300"
@@ -97,6 +98,20 @@ const theme: PrismTheme = {
       style:{
         color:"#f1c98e"
       }
+    },
+    {
+      types: ["inserted"],
+      style: {
+        color: "#8ad968",
+        backgroundColor: "rgba(84,255,0,0.13)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        color: "#fd6464",
+        backgroundColor: "rgba(245,52,52,0.13)",
+      },
     }
   ],
 }

src/themes/ir-code/light.ts

@@ -2,9 +2,10 @@ import type {PrismTheme} from "prism-react-renderer"
 
 const theme: PrismTheme = {
   plain: {
-    backgroundColor: "#f2efef",
+    backgroundColor: "#f7f5f5",
     color: "#292828",
   },
+
   styles: [
     {
       types: [
@@ -13,7 +14,8 @@ const theme: PrismTheme = {
         "sealed class",
       ],
       style: {
-        color: "#1c5a49",
+        color: "#563fa2",
+        fontWeight: "500"
       },
     },
     {
@@ -30,8 +32,8 @@ const theme: PrismTheme = {
         "constant",
       ],
       style: {
-        color: "#863301",
-        fontWeight: "400"
+        color: "#3c7b03",
+        fontWeight: "600",
       },
     },
     {
@@ -40,35 +42,27 @@ const theme: PrismTheme = {
         "property",
       ],
       style: {
-        color: "#0a3862",
+        color: "#225f95",
       },
     },
-    {
-      types: [
-        "variable",
-        "function"],
-      style:{
-        color: "#156851",
-        fontWeight: "400"
-      }
-    },
     {
       types: ["attr-name", "char", "url", "regex"],
       style: {
-        color: "#4a5407",
+        color: "#290f79",
       },
     },
     {
       types: ["attr-value", "string"],
       style: {
-        color: "#335803",
+        color: "#3c7b03",
       },
     },
     {
-      types: ["comment", "prolog", "cdata", "inserted"],
+      types: ["comment", "prolog", "cdata"],
       style: {
-        color: "#544292",
+        color: "#2b5a00",
         fontStyle: "italic",
+        fontWeight: "400"
       },
     },
     {
@@ -79,13 +73,20 @@ const theme: PrismTheme = {
         "selector",
         "important",
         "atrule",
-        "deleted",
       ],
       style: {
         color: "#971111",
-        fontWeight: "400"
+        fontWeight: "600",
       },
     },
+    {
+      types: [
+        "variable",
+        "function"],
+      style:{
+        color: "#8000c7",
+      }
+    },
     {
       types: ["entity", "number", "symbol"],
       style: {
@@ -110,6 +111,20 @@ const theme: PrismTheme = {
         color: "#8000c7",
       },
     },
+    {
+      types: ["inserted"],
+      style: {
+        color: "#103600",
+        backgroundColor:"rgba(84,255,0,0.19)",
+      },
+    },
+    {
+      types: ["deleted"],
+      style: {
+        color: "#670e0e",
+        backgroundColor: "rgba(255,0,0,0.13)",
+      },
+    }
   ],
 }
 export default theme