neo.mjs 6.9.12 → 6.10.0

package/resources/data/deck/learnneo/p/2023-10-08T20-20-07-934Z.md

@@ -3,7 +3,7 @@ In Neo.mjs you sub-class and override methods in the usual way.
 Here, we'll extend `Mammal` and override the `speak()` method. 
 (For brevity, we'll exclude `export` and `import` statements.)
 
-<pre class="neo">
+<pre data-javascript>
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -16,7 +16,8 @@ class Mammal extends Base {
 }
 Neo.applyClassConfig(Mammal);
 </pre>
-<pre class="neo">
+
+<pre data-javascript>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -37,7 +38,7 @@ Neo.applyClassConfig(Mammal);
 Any class in the hierarchy is free to add new properties and methods. Let's add
 a property and behavior (method) to the Human class.
 
-<pre class="neo">
+<pre data-javascript>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -51,7 +52,8 @@ class Mammal extends Base {
     }
 }
 </pre>
-<pre class="neo">
+
+<pre data-javascript>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -69,7 +71,7 @@ const myPerson = Neo.create(Human, {
     name: 'Herbert'
 });
 myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
-myPerson.yodel();        // Logs "Yedelay hee hoo!"
+myPerson.yodel();        // Logs "Yodelay hee hoo!"
 
 Neo.applyClassConfig(Human);
 </pre>

package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -1,7 +1,7 @@
 The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
-and the strucure of an application.
+and the structure of an application.
 
-If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
+If you wish, you can create a workspace for yourself by running `npx neo-app` workspace.
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
 
@@ -12,26 +12,26 @@ serve whose doc root is the workspace.
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
 
 If you drill down into the `src` directory you'll see your applications.
-If you drill down into the `docs` directory you'll see the Neo.mjs API docs.
+The `docs` directory holds the Neo.mjs API docs.
 
 In order to discuss the structure of an app, we'll create a simple starter 
-app. To do that, run this command from the workspace.
+app vis this script, run from the workspace. The script prompts for various 
+application settings. 
 
 `npm run create-app-empty`
 
-At the first prompt, name the app `Foo`, and accept the default for everything else.
+At the first prompt, we'll name the app `Foo`, and accept the default for everything else.
 The script creates an application structured as follows.
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/FooFolder.png" style="height: 400px;">
 
 These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
 You will, however, edit the main container, and its associated "controller" and "model",
-as well as create new views, new controllers, etc. 
+as well as create new views classes, their controllers, and other application logic.
 
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
@@ -51,7 +51,6 @@ class MainView extends Base {
 Neo.applyClassConfig(MainView);
 
 export default MainView;
-</code>
 </pre>
 
 Neo.mjs views are composed of components. A component can be a "container", which means it
@@ -70,8 +69,7 @@ you see how a component is configured let's put a button in the container.
 First, we need to import the class that defines buttons. Then we'll describe the new button in the
 `items:[].`
 
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
@@ -95,27 +93,25 @@ class MainView extends Base {
 Neo.applyClassConfig(MainView);
 
 export default MainView;
-</code>
 </pre>
 
-Note the entry in +items:[]+. That's a description of the button that'll be created as the single
-item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
-which components and objects are _described_. It's an abstraction. In other words we're saying 
-what we want, but not how it's done. We want a button with some text &mdash; how that's done
-isn't important here in the container. A non-declarative approach would be more focused on _how_,
-where you might way "I want a &lt;button> HTML element with its innerHTML set to some value." 
+Note the entry in `items:[]`. That's a description of the button that'll be created as the single
+item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is a declarative framework,
+in which components and objects are described. It's an abstraction. In other words, the code describes 
+what we want, but not how it's done. In the code above, we want our container to have one item &mdash; a button 
+with some text. _How_ that's done isn't important here in the container. A non-declarative approach would be 
+more focused on _how_, where you might way "I want a &lt;button> HTML element with its innerHTML set to some 
+value." 
 
 In another topic you'll learn about the Neo.mjs config system and declaratively describing
 views, controllers, and other things.
 
-If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
+If you run the app you'll see one huge button. That's because the container is configured to 
 use the "fit" layout, which means the container is designed to hold one and only one component,
 and that component will take up all available space. We could get a more normal looking button
 by changing the layout.
 
-`layout: {type:'vbox', align:'start},`
-
-Change that line and look at the running application. 
+`layout: {ntype:'vbox', align:'start},`
 
 Neo.mjs has scores of component classes.
 You can extend them to create your own reusable components and sets of components.

package/resources/data/deck/learnneo/p/2023-10-31T13-59-37-550Z.md

@@ -0,0 +1,31 @@
+<pre data-javascript>
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config. 
+export default Mammal;        // Makes the class available elsewhere.
+</pre>
+
+
+
+<pre data-neo>
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config. 
+export default Mammal;        // Makes the class available elsewhere.
+</pre>

package/resources/data/deck/learnneo/p/MainThreadAddonExample.md

@@ -0,0 +1,15 @@
+Let's go through the steps of creating a main thread addon.
+
+Let's say we needed to show a code editor. There are a lot of libraries
+for this, such as Ace (<a href="https://ace.c9.io/" target="_blank">ace.c9.io</a>).
+From a coding perspective, these editors have a simple API: a setter
+to specify the string being edited, a getter to read the string, and
+a change event fired as the user types.
+
+Here's what we need to do:
+- Define a main thread addon and its API
+- Define a component wrapper
+
+### Define the Main Thread Addon
+
+### Define the component wrapper

package/resources/data/deck/learnneo/p/MainThreadAddonIntro.md

@@ -0,0 +1,46 @@
+Neo.mjs is multi-threaded. There are app worker threads
+that handle data access, application logic,
+and keeping track of DOM updates. Practically all your
+application logic is run in parallel in these threads.
+However, anything that needs to actually reference or update
+the DOM, or use the `window` object, must be done in the main 
+application thread. 
+
+That's the purpose of main thread addons. These are classes whose
+methods can be accessed from other web workers, but are
+actually executed in the main thread.
+
+For example, what if you needed to read the browser's
+URL? That information is in `window.location`.
+But `window` is a main thread variable! To access that
+from a web-worker our code has to say "hey main thread, 
+please return a specified `window` property." Neo.mjs
+lets you do that via `Neo.Main.getByPath()`. For
+example, the following statement logs the URL query string.
+
+
+<pre data-javascript>
+Neo.Main.getByPath('window.location.search')
+    .then(value=>console.log(value)); // Logs the search string
+</pre>
+
+`Neo.Main` has some simple methods for accessing the 
+main thread, but for something with a non-trivial API
+you'd use a _main thread addon_. 
+
+Google Maps is a good example of this. In Neo.mjs, most
+views are responsible for updating their own vdom, but
+the responsibility for rendering maps and markers is handled
+by Google Maps itself &mdash; we _ask_ Google Maps to do
+certain things via the Google Maps API. Therefore, in Neo.mjs,
+Google Maps is implemented as a main thread addon which
+loads the libraries and exposes whatever methods we'll need
+to run from the other Neo.mjs threads. In addition, in a
+Neo.mjs application we want to use Google maps like any other
+component, so Neo.mjs also provides a component wrapper. In
+summary: 
+- The main-thread addon contains the code run in the main thread,
+and exposes what methods can be run by other web-workders,
+and
+- The component wrapper lets you use it like any other component,
+internally calling the main thread methods as needed.

package/resources/data/deck/learnneo/p/TestLivePreview.md

@@ -0,0 +1,10 @@
+
+sdfiousodfi
+
+<pre data-neo>
+let a = 1;
+</pre>
+
+
+
+slfiksdf

package/resources/data/deck/learnneo/p/stylesheet.md

@@ -17,16 +17,13 @@ and information is lost.
 
 <br>
 
-To show highlighted source code use
+To show highlighted Neo.mjs source code use
 <pre>
-&lt;pre>
-&lt;code class="javascript">
+&lt;pre data-javascript>
 // Source code goes here
-&lt;/code>
 &lt;/pre>
 
-<pre>
-<code class="javascript">
+<pre data-javascript>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -34,7 +31,6 @@ class Mammal extends Base {
         className: 'Simple.example.Mammal'
     }
 }
-</code>
 </pre>
 
 For short in-line statements of code use &lt;code> or backticks.

package/resources/data/deck/learnneo/t.json

@@ -7,124 +7,188 @@
             "name": "Why Neo.mjs? "
         },
         {
-            "id": "2023-09-26T17-26-15-104Z",
+            "id": "GettingStarted",
             "parentId": null,
             "isLeaf": false,
             "name": "Getting Started"
         },
         {
-            "id": "2023-10-12T12-59-22-082Z",
-            "parentId": null,
-            "isLeaf": false,
-            "name": "Source Files"
+            "id": "Setup",
+            "parentId": "GettingStarted",
+            "isLeaf": true,
+            "name": "Setup"
         },
         {
             "id": "2023-10-14T19-25-08-153Z",
-            "parentId": "2023-10-12T12-59-22-082Z",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "Neo.mjs workspaces"
+            "name": "Workspaces and Applications"
         },
         {
-            "id": "2023-10-08T18-26-31-357Z",
-            "parentId": null,
-            "isLeaf": false,
-            "name": "Class Definitions and Config"
+            "id": "DescribingTheUI",
+            "parentId": "GettingStarted",
+            "isLeaf": true,
+            "name": "Describing a View"
         },
         {
-            "id": "2023-10-08T20-39-23-708Z",
-            "parentId": "2023-10-08T18-26-31-357Z",
-            "isLeaf": false,
-            "name": "Class Basics"
+            "id": "Events",
+            "parentId": "GettingStarted",
+            "isLeaf": true,
+            "name": "Events"
         },
         {
-            "id": "2023-10-07T19-18-28-517Z",
-            "parentId": "2023-10-08T20-39-23-708Z",
+            "id": "ComponentState",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "Classes, Properties, and Methods"
+            "name": "Updating View State"
         },
         {
-            "id": "2023-10-08T20-20-07-934Z",
-            "parentId": "2023-10-08T20-39-23-708Z",
+            "id": "Extending",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "Overriding Methods"
+            "name": "Extending Components"
         },
         {
-            "id": "2023-10-08T20-20-37-336Z",
-            "parentId": "2023-10-08T20-39-23-708Z",
+            "id": "ExtendingAddingProperties",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "Other JavaScript Class Features"
+            "name": "Adding Properties"
         },
         {
-            "id": "2023-10-08T21-58-25-809Z",
-            "parentId": "2023-10-08T20-39-23-708Z",
+            "id": "ComponentModels",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "Super"
+            "name": "Component Models and Binding"
         },
         {
-            "id": "2023-10-08T20-37-30-658Z",
-            "parentId": "2023-10-08T18-26-31-357Z",
+            "id": "WhatAboutHTML",
+            "parentId": "GettingStarted",
             "isLeaf": true,
-            "name": "The Constructor"
+            "name": "What about HTML tags?"
         },
         {
-            "id": "2023-10-08T22-22-11-013Z",
-            "parentId": "2023-10-08T18-26-31-357Z",
+            "id": "Tutorials",
+            "parentId": null,
+            "isLeaf": false,
+            "expanded": false,
+            "name": "Tutorials"
+        },
+        {
+            "id": "RSP",
+            "parentId": "Tutorials",
             "isLeaf": true,
-            "name": "super"
+            "expanded": false,
+            "name": "Rock Scissors Paper"
         },
         {
-            "id": "2023-09-25T20-27-55-600Z",
+            "id": "Earthquakes",
+            "parentId": "Tutorials",
+            "isLeaf": false,
+            "expanded": false,
+            "name": "Earthquakes"
+        },
+        {
+            "id": "InDepth",
             "parentId": null,
             "isLeaf": false,
+            "expanded": false,
+            "name": "Cookbook"
+        },
+        {
+            "id": "Config",
+            "parentId": "InDepth",
+            "isLeaf": false,
             "name": "Config"
         },
         {
-            "id": "2023-09-25T20-27-38-129Z",
-            "parentId": null,
+            "id": "InstanceLifecycle",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Component Basics"
+            "name": "Instance Lifecycle"
         },
         {
-            "id": "2023-09-25T20-28-12-355Z",
-            "parentId": null,
+            "id": "Forms",
+            "parentId": "InDepth",
             "isLeaf": false,
             "name": "User Input (Forms)"
         },
         {
-            "id": "2023-09-25T20-28-33-035Z",
-            "parentId": null,
+            "id": "CustomComponents",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Data"
+            "name": "Custom Components"
         },
         {
-            "id": "2023-09-25T20-28-51-807Z",
-            "parentId": null,
+            "id": "Tables",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Component Models and Binding"
+            "name": "Tables (Stores)"
         },
         {
-            "id": "2023-09-25T20-29-19-770Z",
-            "parentId": null,
+            "id": "InDepthComponentModels",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Multi-Window"
+            "name": "Shared Binable Data (Component Models)"
         },
         {
-            "id": "2023-09-25T20-29-28-307Z",
-            "parentId": null,
+            "id": "MultiWindow",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Main Thread Add-onss"
+            "name": "Multi-Window Applicaitons"
         },
         {
-            "id": "2023-09-26T17-31-48-754Z",
-            "parentId": null,
+            "id": "MainThreadAddons",
+            "parentId": "InDepth",
             "isLeaf": false,
-            "name": "Custom Components and vdom"
+            "name": "Main Thread Addons"
         },
         {
-            "id": "2023-10-16T19-38-29-590Z",
+            "id": "mainThreadAddonIntro",
+            "parentId": "MainThreadAddons",
+            "isLeaf": true,
+            "name": "Introduction"
+        },
+        {
+            "id": "mainThreadAddonExample",
+            "parentId": "MainThreadAddons",
+            "isLeaf": true,
+            "name": "Example"
+        },
+        {
+            "id": "Mixins",
+            "parentId": "InDepth",
+            "isLeaf": false,
+            "name": "Mixins"
+        },
+        {
+            "id": "JavaScriptClasses",
             "parentId": null,
             "isLeaf": false,
-            "name": "Mixins "
+            "name": "JavaScript Classes"
+        },
+        {
+            "id": "2023-10-07T19-18-28-517Z",
+            "parentId": "JavaScriptClasses",
+            "isLeaf": true,
+            "name": "Classes, Properties, and Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-07-934Z",
+            "parentId": "JavaScriptClasses",
+            "isLeaf": true,
+            "name": "Overriding Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-37-336Z",
+            "parentId": "Class Basics",
+            "isLeaf": true,
+            "name": "Other JavaScript Class Features"
+        },
+        {
+            "id": "2023-10-08T21-58-25-809Z",
+            "parentId": "JavaScriptClasses",
+            "isLeaf": true,
+            "name": "Super"
         },
         {
             "id": "2023-10-31T13-59-37-550Z",
@@ -142,6 +206,12 @@
             "parentId": "appendix",
             "name": "Stylesheet",
             "isLeaf": true
+        },
+        {
+            "id": "TestLivePreview",
+            "parentId": "appendix",
+            "name": "Test",
+            "isLeaf": true
         }
     ]
 }

package/resources/images/logos/Github-logo-black.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/resources/images/logos/Slack-logo-black.svg

@@ -0,0 +1,17 @@
+<svg width="123" height="124" viewBox="0 0 123 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_460_4276)">
+<path d="M25.8 78.1988C25.8 85.2988 20 91.0988 12.9 91.0988C5.8 91.0988 0 85.2988 0 78.1988C0 71.0988 5.8 65.2988 12.9 65.2988H25.8V78.1988Z" fill="black"/>
+<path d="M32.3008 78.1988C32.3008 71.0988 38.1008 65.2988 45.2008 65.2988C52.3008 65.2988 58.1008 71.0988 58.1008 78.1988V110.499C58.1008 117.599 52.3008 123.399 45.2008 123.399C38.1008 123.399 32.3008 117.599 32.3008 110.499V78.1988Z" fill="black"/>
+<path d="M45.2008 26.3996C38.1008 26.3996 32.3008 20.5996 32.3008 13.4996C32.3008 6.39961 38.1008 0.599609 45.2008 0.599609C52.3008 0.599609 58.1008 6.39961 58.1008 13.4996V26.3996H45.2008Z" fill="black"/>
+<path d="M45.2 32.9004C52.3 32.9004 58.1 38.7004 58.1 45.8004C58.1 52.9004 52.3 58.7004 45.2 58.7004H12.9C5.8 58.7004 0 52.9004 0 45.8004C0 38.7004 5.8 32.9004 12.9 32.9004H45.2Z" fill="black"/>
+<path d="M97 45.8004C97 38.7004 102.8 32.9004 109.9 32.9004C117 32.9004 122.8 38.7004 122.8 45.8004C122.8 52.9004 117 58.7004 109.9 58.7004H97V45.8004Z" fill="black"/>
+<path d="M90.4992 45.7996C90.4992 52.8996 84.6992 58.6996 77.5992 58.6996C70.4992 58.6996 64.6992 52.8996 64.6992 45.7996V13.4996C64.6992 6.39961 70.4992 0.599609 77.5992 0.599609C84.6992 0.599609 90.4992 6.39961 90.4992 13.4996V45.7996Z" fill="black"/>
+<path d="M77.5992 97.5996C84.6992 97.5996 90.4992 103.4 90.4992 110.5C90.4992 117.6 84.6992 123.4 77.5992 123.4C70.4992 123.4 64.6992 117.6 64.6992 110.5V97.5996H77.5992Z" fill="black"/>
+<path d="M77.5992 91.0988C70.4992 91.0988 64.6992 85.2988 64.6992 78.1988C64.6992 71.0988 70.4992 65.2988 77.5992 65.2988H109.899C116.999 65.2988 122.799 71.0988 122.799 78.1988C122.799 85.2988 116.999 91.0988 109.899 91.0988H77.5992Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_460_4276">
+<rect width="123" height="124" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/resources/scss/src/apps/learnneo/home/ContentView.scss

@@ -8,6 +8,12 @@
     overflow: scroll;
     padding: 1em;
 
+    pre[data-javascript]{
+        border-radius: 4px;
+        padding: 12px;
+        border: thin solid lightgray;
+    }
+
     em,
     i {
         font-family: Palatino, "Times New Roman", serif;

package/resources/scss/src/list/Base.scss

@@ -54,7 +54,11 @@
             cursor: pointer;
 
             &:hover {
-                background-color: var(--list-item-background-color-hover) !important;
+                background-color: var(--list-item-background-color-hover);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
                 color           : var(--list-container-list-color);
             }
         }

package/resources/scss/theme-neo-light/Global.scss

@@ -9,7 +9,7 @@
 @import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
 
 h1 {
-    color           : var(--sem-color-fg-contrast);
+    color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-sans);
     font-size       : var(--core-fontsize-h1);
     font-weight     : var(--core-fontweight-semibold);
@@ -18,7 +18,7 @@ h1 {
 }
 
 h2 {
-    color           : var(--semantic-color-neutral-contrast);
+    color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-sans);
     font-size       : var(--core-fontsize-h2);
     font-weight     : var(--core-fontweight-semibold);
@@ -27,7 +27,7 @@ h2 {
 }
 
 p {
-    color           : var(--semantic-color-fg-default);
+    color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-sans);
     font-size       : var(--core-fontsize-body);
     font-weight     : var(--core-fontweight-regular);
@@ -35,14 +35,16 @@ p {
 }
 
 code {
-    background-color: #ededed;
+    background-color: #F0F2F0;
+    border          : 1px solid var(--sem-color-border-subtle);
     border-radius   : 2px;
-    color           : var(--semantic-color-fg-contrast);
+    color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-mono);
     font-size       : var(--core-fontsize-body);
     font-weight     : var(--core-fontweight-regular);
     line-height     : var(--core-lineheight-headline);
     padding         : 2px 0.3em;
+    font-size       : 16px;
 }
 
 mark {