neo.mjs 6.12.1 → 6.14.0

package/resources/data/deck/training/{p → pages}/2023-01-15T22-28-57-508Z.md

@@ -57,7 +57,7 @@ class Filter extends Base {
     }
 }
 
-Neo.applyClassConfig(Filter);
+Neo.setupClass(Filter);
 
 export default Filter;
 </pre>
@@ -128,4 +128,4 @@ Change city and category back to their normal default values.
     city_: '',
     category_: '',
 
-In an upcoming lab we'll use another method of initializing the city and category.
+In an upcoming lab we'll use another method of initializing the city and category.

package/resources/data/deck/training/{p → pages}/2023-01-15T22-36-30-913Z.md

@@ -68,7 +68,7 @@ class Function extends Base {
     }</span>
 }
 
-Neo.applyClassConfig(Function);
+Neo.setupClass(Function);
 
 let instance = Neo.create(Function);
 

package/resources/data/deck/training/{p → pages}/2023-07-01T15-42-45-193Z.md

@@ -282,7 +282,7 @@ class ${className} extends Base {
         });
     }
 }
-Neo.applyClassConfig(${className});
+Neo.setupClass(${className});
 export default ${className};
 `;
             fs.writeFileSync(path.join(`${folder}/view/${className}.mjs`), content);
@@ -309,7 +309,7 @@ class ${className} extends Base {
     }
 }
 
-Neo.applyClassConfig(${className});
+Neo.setupClass(${className});
 
 export default ${className};
             `;
@@ -331,7 +331,7 @@ class ${className} extends Base {
     }
 }
 
-Neo.applyClassConfig(${className});
+Neo.setupClass(${className});
 
 export default ${className};
             `;
@@ -355,7 +355,7 @@ class ${className} extends Base {
     }
 }
 
-Neo.applyClassConfig(${className});
+Neo.setupClass(${className});
 
 export default ${className};
             `;
@@ -430,4 +430,4 @@ Edit `workspace.package` and add an entry for the new script.
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-themes": "node ./node_modules/neo.mjs/buildScripts/watchThemes.mjs"
 },
-</pre>
+</pre>

package/resources/data/deck/training/{p → pages}/2023-07-02T16-14-06-970Z.md

@@ -10,5 +10,5 @@ and lifecycle hooks.
 
 <br><br><br>
 
-<small>* via the Neo.applyClassConfig() found at the bottom of each class.</small>
+<small>* via the Neo.setupClass() found at the bottom of each class.</small>
 

package/resources/data/deck/training/{p → pages}/2023-07-31T00-37-21-927Z.md

@@ -54,7 +54,7 @@ class MainContainer extends Viewport {
     }
 }
 
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 
 export default MainContainer;
 </pre>

package/resources/data/deck/training/{p → pages}/2023-10-07T19-18-28-517Z.md

@@ -13,7 +13,7 @@ class Mammal extends Base {
 
 const myMammal = Neo.create(Mammal);
 
-Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config. 
+Neo.setupClass(Mammal); // Where Neo.mjs initialializes the class config. 
 export default Mammal;        // Makes the class available elsewhere.
 </pre>
 
@@ -45,7 +45,7 @@ console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs
 <span style="color:#b91010">myMammal.name</span> = 'Herbert';
 console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Herbert"
 
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 
 export default Mammal;
 </pre>
@@ -93,7 +93,7 @@ const myMammal = Neo.create(Mammal, {
 });
 <span style="color:#b91010">myMammal.speak();</span>        // Logs "Creature is grunting."
 
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 
 export default Mammal;
 </pre>

package/resources/data/deck/training/{p → pages}/2023-10-08T20-20-07-934Z.md

@@ -14,7 +14,7 @@ class Mammal extends Base {
         console.log(`(${this.name} is grunting)`);
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre class="neo">
 class Human extends Mammal {
@@ -31,7 +31,7 @@ const myMammal = Neo.create(Human, {
 });
 myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
 
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 
 Any class in the hierarchy is free to add new properties and methods. Let's add
@@ -71,5 +71,5 @@ const myPerson = Neo.create(Human, {
 myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
 myPerson.yodel();        // Logs "Yedelay hee hoo!"
 
-Neo.applyClassConfig(Human);
+Neo.setupClass(Human);
 </pre>

package/resources/data/deck/training/{p → pages}/2023-10-08T20-20-37-336Z.md

@@ -25,5 +25,5 @@ const myPerson = Neo.create(Human, {
 });
 myPerson.speak(true);
 
-Neo.applyClassConfig(Human);
+Neo.setupClass(Human);
 </pre>

package/resources/data/deck/training/{p → pages}/2023-10-08T21-58-25-809Z.md

@@ -11,7 +11,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre class="neo" style="color:gray">
 class Human extends Mammal {
@@ -29,7 +29,7 @@ const myPerson = Neo.create(Human, {
 });
 myPerson.doSomething();
 
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 
 Sometimes you aren't sure if a super class has a method. In that case use the
@@ -46,7 +46,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre class="neo" style="color:gray">
 class Human extends Mammal {
@@ -64,5 +64,5 @@ const myPerson = Neo.create(Human, {
 });
 myPerson.doSomething();
 
-Neo.applyClassConfig(Mammal);
-</pre>
+Neo.setupClass(Mammal);
+</pre>

package/resources/data/deck/training/{p → pages}/2023-10-14T19-25-08-153Z.md

@@ -44,7 +44,7 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -88,7 +88,7 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>

package/resources/design-tokens/json/component.json

@@ -1,6 +1,6 @@
 {
   "cmp": {
-    "sidenav": {
+    "list": {
       "chapter": {
         "height": {
           "value": "{sem.height.xlarge}",
@@ -52,7 +52,7 @@
           "value": "{sem.height.xlarge}",
           "type": "sizing"
         },
-        "fg": {
+        "text": {
           "default": {
             "value": "{sem.color.fg.neutral.default}",
             "type": "color"
@@ -60,23 +60,27 @@
           "disabled": {
             "value": "{sem.color.fg.neutral.disabled}",
             "type": "color"
+          },
+          "selected": {
+            "value": "{sem.color.text.primary.default}",
+            "type": "color"
           }
         },
-        "bg": {
+        "surface": {
           "default": {
             "value": "transparent",
             "type": "color"
           },
           "hover": {
-            "value": "{sem.color.bg.neutral.hover}",
+            "value": "{sem.color.surface.neutral.hover}",
             "type": "color"
           },
-          "pressed": {
-            "value": "{sem.color.bg.neutral.active}",
+          "active": {
+            "value": "{sem.color.surface.primary.background}",
             "type": "color"
           },
           "selected": {
-            "value": "{sem.color.bg.primary.background}",
+            "value": "{sem.color.surface.primary.background}",
             "type": "color"
           }
         },
@@ -104,55 +108,51 @@
     },
     "button": {
       "primary": {
-        "bg": {
+        "surface": {
           "default": {
-            "value": "{sem.color.bg.primary.default}",
+            "value": "{sem.color.surface.primary.default}",
             "type": "color"
           },
           "hover": {
-            "value": "{sem.color.bg.primary.hover}",
+            "value": "{sem.color.surface.primary.hover}",
             "type": "color"
           },
           "active": {
-            "value": "{sem.color.bg.primary.active}",
+            "value": "{sem.color.surface.primary.active}",
             "type": "color"
           },
           "disabled": {
             "value": "{sem.color.bg.primary.disabled}",
             "type": "color"
-          },
-          "loading": {
-            "value": "{sem.color.bg.primary.background}",
-            "type": "color"
           }
         },
-        "fg": {
+        "text": {
           "default": {
-            "value": "{sem.color.fg.neutral.contrast}",
+            "value": "{sem.color.text.neutral.reversed}",
             "type": "color"
           },
           "disabled": {
-            "value": "{sem.color.fg.neutral.disabled}",
+            "value": "{sem.color.text.disabled}",
             "type": "color"
           }
         }
       },
       "secondary": {
-        "bg": {
+        "surface": {
           "default": {
             "value": "transparent",
             "type": "color"
           },
           "hover": {
-            "value": "{sem.color.bg.neutral.hover}",
+            "value": "{sem.color.surface.neutral.hover}",
             "type": "color"
           },
           "active": {
-            "value": "{sem.color.bg.neutral.active}",
+            "value": "{sem.color.surface.neutral.active}",
             "type": "color"
           },
           "disabled": {
-            "value": "transparent",
+            "value": "{sem.color.surface.disabled}",
             "type": "color"
           },
           "loading": {
@@ -162,11 +162,11 @@
         },
         "text": {
           "default": {
-            "value": "{sem.color.fg.neutral.default}",
+            "value": "{sem.color.text.neutral.default}",
             "type": "color"
           },
           "disabled": {
-            "value": "{sem.color.fg.neutral.disabled}",
+            "value": "{sem.color.text.disabled}",
             "type": "color"
           }
         },
@@ -200,21 +200,21 @@
         }
       },
       "ghost": {
-        "bg": {
+        "surface": {
           "default": {
             "value": "transparent",
             "type": "color"
           },
           "hover": {
-            "value": "{sem.color.bg.neutral.hover}",
+            "value": "{sem.color.surface.neutral.hover}",
             "type": "color"
           },
           "active": {
-            "value": "{sem.color.bg.neutral.active}",
+            "value": "{sem.color.surface.neutral.active}",
             "type": "color"
           },
           "disabled": {
-            "value": "{sem.color.bg.neutral.disabled}",
+            "value": "{sem.color.surface.disabled}",
             "type": "color"
           },
           "loading": {
@@ -222,7 +222,7 @@
             "type": "color"
           }
         },
-        "fg": {
+        "text": {
           "default": {
             "value": "{sem.color.fg.neutral.contrast}",
             "type": "color"
@@ -274,7 +274,7 @@
     },
     "tab": {
       "height": {
-        "value": "{sem.height.xxlarge}",
+        "value": "{sem.height.xlarge}",
         "type": "sizing"
       },
       "spacinghorizontal": {

package/resources/design-tokens/json/core.json

@@ -280,39 +280,39 @@
   },
   "purple": {
     "100": {
-      "value": "#efe3ff",
+      "value": "#D6E1FF",
       "type": "color"
     },
     "200": {
-      "value": "#d0aaff",
+      "value": "#9EB1FF",
       "type": "color"
     },
     "300": {
-      "value": "#b071ff",
+      "value": "#5472E4",
       "type": "color"
     },
     "400": {
-      "value": "#9039ff",
+      "value": "#3E63DD",
       "type": "color"
     },
     "500": {
-      "value": "#7100ff",
+      "value": "#435DB1",
       "type": "color"
     },
     "600": {
-      "value": "#5800c6",
+      "value": "#304384",
       "type": "color"
     },
     "700": {
-      "value": "#3f008e",
+      "value": "#253974",
       "type": "color"
     },
     "800": {
-      "value": "#260055",
+      "value": "#1D2E62",
       "type": "color"
     },
     "900": {
-      "value": "#0d001c",
+      "value": "#182449",
       "type": "color"
     }
   },
@@ -343,6 +343,10 @@
       "h2": {
         "value": "1.75rem",
         "type": "fontSizes"
+      },
+      "label": {
+        "value": "1rem",
+        "type": "fontSizes"
       }
     },
     "fontweight": {
@@ -372,6 +376,12 @@
         "value": "1.5",
         "type": "lineHeights"
       }
+    },
+    "textdecoration": {
+      "underline": {
+        "value": "underline",
+        "type": "textDecoration"
+      }
     }
   }
 }

package/resources/design-tokens/json/semantic.json

@@ -124,6 +124,96 @@
           "value": "#5595F5",
           "type": "color"
         }
+      },
+      "surface": {
+        "primary": {
+          "default": {
+            "value": "{purple.400}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{purple.500}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{purple.700}",
+            "type": "color"
+          },
+          "background": {
+            "value": "{purple.100}",
+            "type": "color"
+          }
+        },
+        "neutral": {
+          "default": {
+            "value": "{gray.50}",
+            "type": "color"
+          },
+          "highlighted": {
+            "value": "{white}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{black}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": ".05",
+                  "space": "srgb"
+                }
+              }
+            }
+          },
+          "active": {
+            "value": "{black}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.1",
+                  "space": "srgb"
+                }
+              }
+            }
+          }
+        },
+        "disabled": {
+          "value": "{gray.200}",
+          "type": "color"
+        }
+      },
+      "text": {
+        "neutral": {
+          "default": {
+            "value": "{gray.900}",
+            "type": "color"
+          },
+          "contrast": {
+            "value": "{black}",
+            "type": "color"
+          },
+          "subdued": {
+            "value": "{gray.700}",
+            "type": "color"
+          },
+          "reversed": {
+            "value": "{white}",
+            "type": "color"
+          }
+        },
+        "disabled": {
+          "value": "{gray.300}",
+          "type": "color"
+        },
+        "primary": {
+          "default": {
+            "value": "{purple.400}",
+            "type": "color"
+          }
+        }
       }
     },
     "spacing": {

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -1,5 +1,6 @@
 .learnneo-header-toolbar {
-    margin-bottom: 1px; // fakes a bottom border
+    
+    border-bottom: 1px solid #f2f2f2;
 
     .logo {
         margin-left: 1em;

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -0,0 +1,26 @@
+.portal-content-box {
+    border         : 1px solid darkgray;
+    cursor         : pointer;
+    color          : #000;
+    height         : 200px;
+    margin-top     : 2em;
+    padding        : 0 1em 1em 1em;
+    text-decoration: none;
+    width          : 300px;
+
+    &:hover {
+        background-color: lightblue;
+    }
+
+    &:not(:last-child) {
+        margin-right: 3em;
+    }
+
+    .portal-content-box-content {
+
+    }
+
+    .portal-content-box-header {
+
+    }
+}

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -1,15 +1,11 @@
 .newwebsite-viewport {
-    align-items    : center !important;
-    display        : flex !important;
-    gap            : 48px;
-    justify-content: center !important;
-    padding        : 10% 15% 15% 15%;
+    gap       : 48px;
+    overflow-y: scroll;
+    padding   : 5%;
 }
 
 .button-group {
-    display       : flex !important;
-    flex-direction: row-reverse !important;
-    gap           : 8px !important;
+    gap: 8px !important;
 }
 
 .neo-h1 {
@@ -26,7 +22,3 @@
     height             : 150px;
     width              : 100%;
 }
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

package/resources/scss/src/apps/portal/learn/ContentTreeList.scss

@@ -1,17 +1,17 @@
-
 .sidenav-container {
     background-color: transparent;
-    margin: 8px 0 8px 8px;
 }
 
 .topics-tree {
-
     background-color: white;
-    border-radius   : 8px;
-    padding         : 8px;
+    padding         : 8px 2px 8px 8px;
+
+    .neo-list-container {
+        padding: 0 3px 3px 3px;
+    }
 
     .neo-list-container>.neo-list-item {
-        font-size: 18px !important;
+        font-size  : 18px !important;
         font-weight: 500;
     }
 
@@ -22,13 +22,14 @@
         height          : 48px;
         display         : flex;
         align-items     : center;
+        margin-bottom   : 3px;
     }
 
     .neo-list-container ul {
         padding: 0 !important;
 
         .neo-list-item {
-            padding: 0 0 0 32px !important;
+            padding: 0 0 3px 32px !important;
         }
 
         ul .neo-list-item {

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -1,12 +1,12 @@
 .learn-content {
 
+    max-width: 900px;
+    padding: 0 3rem;
+    margin: 0 auto;
     background-color: white;
     border-radius: 8px;
-    margin: 8px 8px 8px 0;
-
     letter-spacing: 1px;
-    overflow: scroll;
-    padding: 1em;
+    overflow: unset;
 
     pre[data-javascript] {
         border-radius: 4px;
@@ -14,12 +14,6 @@
         border: thin solid lightgray;
     }
 
-    em,
-    i {
-        font-family: Palatino, "Times New Roman", serif;
-        font-size: 1.07em;
-    }
-
     p {
         margin: 0.5em 0em 0.7em 0em;
     }
@@ -76,6 +70,4 @@
     .lab:hover {
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
-
-
-}
+}