neo.mjs 6.9.11 → 6.10.0

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

@@ -0,0 +1,231 @@
+{
+  "sem": {
+    "color": {
+      "bg": {
+        "neutral": {
+          "default": {
+            "value": "{gray.50}",
+            "type": "color"
+          },
+          "highlighted": {
+            "value": "{white}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{gray.900}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.05",
+                  "space": "hsl"
+                }
+              }
+            }
+          },
+          "active": {
+            "value": "{gray.900}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.1",
+                  "space": "lch"
+                }
+              }
+            }
+          },
+          "disabled": {
+            "value": "{gray.200}",
+            "type": "color"
+          }
+        },
+        "primary": {
+          "default": {
+            "value": "{green.400}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{green.500}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{green.600}",
+            "type": "color"
+          },
+          "background": {
+            "value": "{green.100}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{gray.200}",
+            "type": "color"
+          }
+        }
+      },
+      "fg": {
+        "neutral": {
+          "default": {
+            "value": "{gray.900}",
+            "type": "color"
+          },
+          "contrast": {
+            "value": "{black}",
+            "type": "color"
+          },
+          "subdued": {
+            "value": "{gray.700}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{gray.300}",
+            "type": "color"
+          }
+        },
+        "primary": {
+          "highlighted": {
+            "value": "{green.400}",
+            "type": "color"
+          },
+          "base": {
+            "value": "{green.500}",
+            "type": "color"
+          },
+          "faded": {
+            "value": "{green.600}",
+            "type": "color"
+          }
+        }
+      },
+      "border": {
+        "subtle": {
+          "value": "{gray.100}",
+          "type": "color"
+        },
+        "default": {
+          "value": "{gray.200}",
+          "type": "color"
+        },
+        "contrast": {
+          "value": "{black}",
+          "type": "color"
+        }
+      }
+    },
+    "spacing": {
+      "xxxsmall": {
+        "value": "{spacing.2}",
+        "type": "spacing"
+      },
+      "xxsmall": {
+        "value": "{spacing.4}",
+        "type": "spacing"
+      },
+      "xsmall": {
+        "value": "{spacing.8}",
+        "type": "spacing"
+      },
+      "small": {
+        "value": "{spacing.12}",
+        "type": "spacing"
+      },
+      "medium": {
+        "value": "{spacing.16}",
+        "type": "spacing"
+      },
+      "large": {
+        "value": "{spacing.20}",
+        "type": "spacing"
+      },
+      "xlarge": {
+        "value": "{spacing.24}",
+        "type": "spacing"
+      },
+      "xxlarge": {
+        "value": "{spacing.32}",
+        "type": "spacing"
+      },
+      "xxxlarge": {
+        "value": "{spacing.40}",
+        "type": "spacing"
+      }
+    },
+    "height": {
+      "xxsmall": {
+        "value": "{height.2}",
+        "type": "sizing"
+      },
+      "xsmall": {
+        "value": "{height.4}",
+        "type": "sizing"
+      },
+      "small": {
+        "value": "{height.8}",
+        "type": "sizing"
+      },
+      "medium": {
+        "value": "{height.16}",
+        "type": "sizing"
+      },
+      "large": {
+        "value": "{height.32}",
+        "type": "sizing"
+      },
+      "xlarge": {
+        "value": "{height.48}",
+        "type": "sizing"
+      }
+    },
+    "borderradius": {
+      "none": {
+        "value": "{borderradius.0}",
+        "type": "borderRadius"
+      },
+      "medium": {
+        "value": "{borderradius.4}",
+        "type": "borderRadius"
+      },
+      "large": {
+        "value": "{borderradius.8}",
+        "type": "borderRadius"
+      }
+    },
+    "typo": {
+      "h1": {
+        "value": {
+          "fontFamily": "{core.fontfamily.sans}",
+          "fontSize": "{core.fontsize.h1}",
+          "fontWeight": "{core.fontweight.bold}",
+          "textDecoration": "none",
+          "letterSpacing": "-0.02em",
+          "lineHeight": "{core.lineheight.headline}"
+        },
+        "type": "typography"
+      },
+      "h2": {
+        "value": {
+          "fontFamily": "{core.fontfamily.sans}",
+          "fontSize": "{core.fontsize.h2}",
+          "lineHeight": "{core.lineheight.headline}",
+          "fontWeight": "{core.fontweight.semibold}"
+        },
+        "type": "typography"
+      },
+      "body": {
+        "value": {
+          "fontFamily": "{core.fontfamily.sans}",
+          "fontSize": "{core.fontsize.body}",
+          "fontWeight": "{core.fontweight.regular}",
+          "letterSpacing": "0",
+          "paragraphSpacing": "0",
+          "paragraphIndent": "0",
+          "textDecoration": "none",
+          "lineHeight": "{core.lineheight.paragraph}"
+        },
+        "type": "typography"
+      }
+    }
+  }
+}

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/Viewport.scss

@@ -0,0 +1,3 @@
+.learnneo-maincontainer {
+    background-color: #f2f2f2;
+}

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

@@ -1,33 +1,80 @@
+
+.sidenav-container {
+    background-color: transparent;
+    margin: 8px 0 8px 8px;
+}
+
 .topics-tree {
-    &.neo-tree-list {
-        .neo-treelist-collapse-all-icon {
-            .neo-treelist-menu-item-content:before {
-                content: "\f102" !important;
-            }
+
+    background-color: white;
+    border-radius   : 8px;
+    padding         : 8px;
+
+    .neo-list-container>.neo-list-item {
+        font-size: 18px !important;
+        font-weight: 500;
+    }
+
+    .neo-list-item {
+        border-radius   : 8px;
+        margin-right    : 0 !important;
+        padding         : 0 0 0 16px !important;
+        height          : 48px;
+        display         : flex;
+        align-items     : center;
+    }
+
+    .neo-list-container ul {
+        padding: 0 !important;
+
+        .neo-list-item {
+            padding: 0 0 0 32px !important;
         }
 
-        .neo-treelist-expand-all-icon {
-            .neo-treelist-menu-item-content:before {
-                content: "\f103" !important;
+        ul .neo-list-item {
+            padding: 0 0 0 48px !important;
+        }
+    }
+
+    .neo-list-folder {
+        .neo-list-item-content {
+            width           : 100%;
+            display         : flex;
+            justify-content : space-between;
+
+            &:after {
+                color       : var(--list-item-glyph-color);
+                content     : "\f0c8";
+                display     : inline-block;
+                font-family : 'Material Icons';
+                font-size   : 18px;
+                width       : 25px;
+                padding-top : 4px;
+            }
+
+            &:before {
+                content: unset !important;
             }
         }
+    }
 
+    &.neo-tree-list {
         .neo-list-container {
             .neo-list-item {
                 &.neo-list-item-leaf {
-                    .neo-list-item-content:before {
+                    .neo-list-item-content:after {
                         content: none !important;
                     }
                 }
 
                 &.neo-list-folder {
-                    .neo-list-item-content:before {
-                        content: "\f107" !important;
+                    .neo-list-item-content:after {
+                        content: "\e5cc" !important;
                     }
 
                     &.neo-folder-open {
-                        .neo-list-item-content:before {
-                            content: "\f106" !important;
+                        .neo-list-item-content:after {
+                            content: "\e5cf" !important;
                         }
                     }
                 }

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

@@ -1,10 +1,19 @@
 .learn-content {
-    font-family: 'Open Sans';
-    font-size: 13pt;
+
+    background-color: white;
+    border-radius   : 8px;
+    margin          : 8px 8px 8px 0 ;
+
     letter-spacing: 1px;
     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/apps/newwebsite/MainContainer.scss

@@ -1,33 +1,32 @@
-
 .newwebsite-main-container {
-    display: flex !important;
-    align-items: center !important;
+    align-items    : center !important;
+    display        : flex !important;
+    gap            : 48px;
     justify-content: center !important;
-    gap: 48px;
-    padding: 10% 15% 15% 15%;
+    padding        : 10% 15% 15% 15%;
 }
 
 .button-group {
-    display: flex !important;
+    display       : flex !important;
     flex-direction: row-reverse !important;
-    gap: 8px !important;
+    gap           : 8px !important;
 }
 
 .neo-h1 {
-    font-size: 48px;
+    font-size  : 48px;
     font-weight: 600;
-    text-align: center;
+    text-align : center;
 }
 
 .vector {
-    background-image: url("../../../../images/Neo_Vector.svg");
-    background-repeat: no-repeat;
-    background-size: contain;
+    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
     background-position: center center;
-    width: 100%;
-    height: 150px;
+    background-repeat  : no-repeat;
+    background-size    : contain;
+    height             : 150px;
+    width              : 100%;
 }
 
 .get-started-button {
     cursor: not-allowed !important;
-}
+}

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

@@ -57,6 +57,10 @@
                 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);
+            }
         }
 
         &.neo-selected {

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

@@ -2,14 +2,14 @@
     --neo-background-color: #fafafa;
     --neo-color           : #000;
     --neo-disabled-opacity: 0.5;
-    --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+    --neo-font-family     : 'Source Sans 3', sans-serif;
     --neo-font-smoothing  : antialiased;
 }
 
 @import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
 
 h1 {
-    color           : var(--semantic-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);
@@ -17,9 +17,8 @@ h1 {
     line-height     : var(--core-lineheight-headline);
 }
 
-
 h2 {
-    color           : var(--semantic-color-fg-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);
@@ -28,26 +27,47 @@ 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);
     line-height     : var(--core-lineheight-paragraph);
 }
 
-// code {
-//     background-color: #ededed;
-//     border-radius   : 2px;
-//     color           : var(--semantic-color-fg-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;
-// }
+code {
+    background-color: #F0F2F0;
+    border          : 1px solid var(--sem-color-border-subtle);
+    border-radius   : 2px;
+    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 {
-    background-color: #B8FCE3;
+    background-color: var(--green-50);
     color           : black;
     padding         : 0.1em 0.2em;
+}
+
+
+
+.neo-splitter {
+    opacity: 1;
+    margin: 8px 2px;
+    border-radius: 100px;
+    border: unset !important;
+
+    &:hover, &:active {
+        background-color: #5595F5 !important;
+    }
+}
+
+.neo-dragproxy {
+    &.neo-splitter {
+        background-color: #5595F5 !important;
+    }
 }

package/resources/scss/theme-neo-light/button/Base.scss

@@ -1,45 +1,46 @@
+$text-color      : #1c60a0;
 $background-color: #fff;
 $border-color    : #ddd;
 $border-style    : solid;
 $border-width    : 1px;
-$text-color      : #1c60a0;
+
 
 :root .neo-theme-neo-light { // .neo-button
-    --button-background-color                   : #29F5AA;
-    --button-background-color-active            : #0AE192;
-    --button-background-color-disabled          : #{$background-color};
-    --button-background-color-hover             : #11F4A1;
+    --button-background-color                   : var(--cmp-button-primary-bg-default);
+    --button-background-color-active            : var(--cmp-button-primary-bg-active);
+    --button-background-color-disabled          : var(--cmp-button-primary-bg-disabled);
+    --button-background-color-hover             : var(--cmp-button-primary-bg-hover);
     --button-background-image                   : none;
     --button-background-gradient-end            : #323536;
     --button-background-gradient-start          : #434749;
-    --button-badge-background-color             : #{$text-color};
-    --button-badge-color                        : #{$background-color};
+    --button-badge-background-color             : var(--sem-color-fg-neutral-contrast);
+    --button-badge-color                        : var(--sem-color-fg-neutral-contrast);
     --button-badge-margin-left                  : -10px;
     --button-badge-margin-top                   : -10px;
     --button-border                             : none;
     --button-border-active                      : none;
     --button-border-disabled                    : none;
     --button-border-hover                       : none;
-    --button-border-pressed                     : #{$border-width} #{$border-style} #{$text-color};
-    --button-border-radius                      : 8px;
-    --button-glyph-color                        : #{$text-color};
-    --button-glyph-color-active                 : #{$text-color};
-    --button-glyph-color-disabled               : #{$text-color};
-    --button-glyph-color-hover                  : #{$text-color};
-    --button-height                             : 48px;
-    --button-margin                             : 2px;
-    --button-opacity-disabled                   : var(--neo-disabled-opacity);
+    --button-border-pressed                     : none;
+    --button-border-radius                      : var(--cmp-button-borderradius);
+    --button-glyph-color                        : var(--sem-color-fg-neutral-contrast);
+    --button-glyph-color-active                 : var(--sem-color-fg-neutral-contrast);
+    --button-glyph-color-disabled               : var(--sem-color-fg-neutral-contrast);
+    --button-glyph-color-hover                  : var(--sem-color-fg-neutral-contrast);
+    --button-height                             : var(--cmp-button-height);
+    --button-margin                             : var(--cmp-button-gap);
+    --button-opacity-disabled                   : inherit;
     --button-outline-active                     : none;
-    --button-padding                            : 5px 16px 5px 16px;
-    --button-ripple-background-color            : #{lighten($text-color, 50%)};
-    --button-text-color                         : black;
-    --button-text-color-active                  : black;
-    --button-text-color-disabled                : black;
-    --button-text-color-hover                   : black;
-    --button-text-font-family                   : Source Sans Pro, sans-serif;
-    --button-text-font-size                     : 14px;
-    --button-text-font-weight                   : 600;
-    --button-text-line-height                   : 11px;
+    --button-padding                            : 0 var(--cmp-button-spacinghorizontal);
+    --button-ripple-background-color            : transparent;
+    --button-text-color                         : var(--sem-color-fg-neutral-contrast);
+    --button-text-color-active                  : var(--sem-color-fg-neutral-contrast);
+    --button-text-color-disabled                : var(--sem-color-fg-neutral-disabled);
+    --button-text-color-hover                   : var(--sem-color-fg-neutral-contrast);
+    --button-text-font-family                   : var(--core-fontfamily-sans), sans-serif;
+    --button-text-font-size                     : var(--core-fontsize-label);
+    --button-text-font-weight                   : var(--core-fontweight-semibold);
+    --button-text-line-height                   : inherit;
     --button-text-transform                     : none;
     --button-use-gradients                      : false;
 
@@ -68,28 +69,28 @@ $text-color      : #1c60a0;
     --button-ghost-text-color-hover             : var(--button-background-color);
 
     // {module: Button; ui: --secondary}
-    --button-secondary-background-color         : transparent;
-    --button-secondary-background-color-active  : #E6E7E6;
+    --button-secondary-background-color         : var(--cmp-button-secondary-bg-default);
+    --button-secondary-background-color-active  : var(--cmp-button-secondary-bg-active);
     --button-secondary-background-color-disabled: inherit;
-    --button-secondary-background-color-hover   : #F3F3F3;
+    --button-secondary-background-color-hover   : var(--cmp-button-secondary-bg-hover);
     --button-secondary-background-image         : none;
-    --button-secondary-badge-background-color   : var(--button-badge-color);
-    --button-secondary-badge-color              : var(--button-badge-background-color);
-    --button-secondary-border                   : 1px solid #D3D7D2;
-    --button-secondary-border-active            : 1px solid #D3D7D2;
-    --button-secondary-border-disabled          : inherit;
-    --button-secondary-border-hover             : 1px solid #D3D7D2;
-    --button-secondary-border-pressed           : 1px solid #D3D7D2;
-    --button-secondary-glyph-color              : var(--button-background-color);
-    --button-secondary-glyph-color-active       : var(--button-background-color);
-    --button-secondary-glyph-color-disabled     : inherit;
-    --button-secondary-glyph-color-hover        : var(--button-background-color);
-    --button-secondary-opacity-disabled         : var(--neo-disabled-opacity);
+    --button-secondary-badge-background-color   : transparent;
+    --button-secondary-badge-color              : transparent;
+    --button-secondary-border                   : var(--cmp-button-secondary-border-default-width) solid var(--cmp-button-secondary-border-default-color);
+    --button-secondary-border-active            : inherit;
+    --button-secondary-border-disabled          : var(--cmp-button-secondary-border-default-width) solid var(--cmp-button-secondary-border-disabled-color);
+    --button-secondary-border-hover             : inherit
+    --button-secondary-border-pressed           : inherit
+    --button-secondary-glyph-color              : var(--sem-color-fg-neutral-contrast);
+    --button-secondary-glyph-color-active       : var(--sem-color-fg-neutral-contrast);
+    --button-secondary-glyph-color-disabled     : var(--sem-color-fg-neutral-disabled);
+    --button-secondary-glyph-color-hover        : var(--sem-color-fg-neutral-contrast);
+    --button-secondary-opacity-disabled         : none;
     --button-secondary-ripple-background-color  : inherit;
-    --button-secondary-text-color               : black;
-    --button-secondary-text-color-active        : black;
-    --button-secondary-text-color-disabled      : inherit;
-    --button-secondary-text-color-hover         : black;
+    --button-secondary-text-color               : var(--sem-color-fg-neutral-contrast);
+    --button-secondary-text-color-active        : var(--sem-color-fg-neutral-contrast);
+    --button-secondary-text-color-disabled      : var(--sem-color-fg-neutral-disabled);
+    --button-secondary-text-color-hover         : var(--sem-color-fg-neutral-contrast);
 
     // {module: Button; ui: --tertiary}
     --button-tertiary-background-color          : transparent;