neo.mjs 6.9.10 → 6.9.12

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/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

@@ -0,0 +1,58 @@
+.learn-content {
+
+    background-color: white;
+    border-radius   : 8px;
+    margin          : 8px 8px 8px 0 ;
+
+    letter-spacing: 1px;
+    overflow: scroll;
+    padding: 1em;
+
+    em,
+    i {
+        font-family: Palatino, "Times New Roman", serif;
+        font-size: 1.07em;
+    }
+
+    p {
+        margin: 0.5em 0em 0.7em 0em;
+    }
+
+    details summary {
+        cursor: pointer;
+        transition: margin 300ms ease-out;
+    }
+
+    details[open] {
+        margin-bottom: 2em;
+    }
+
+    details summary {
+        list-style: none;
+        color: #555;
+        display: flex;
+        /* also removes the list marker */
+        align-items: center;
+        font-weight: bold;
+    }
+
+    details summary::before {
+        content: "\f055";
+    }
+
+    details[open] summary::before {
+        content: "\f056";
+    }
+
+    details summary::before {
+        color: #c4c4c4;
+        font-family: var(--fa-style-family, "Font Awesome 6 Free");
+        font-size: 1.3em;
+        font-weight: var(--fa-style, 900);
+        margin: 0.4em 0.4em 0.4em 0;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+}

package/resources/scss/src/apps/newwebsite/MainContainer.scss

@@ -0,0 +1,32 @@
+.newwebsite-main-container {
+    align-items    : center !important;
+    display        : flex !important;
+    gap            : 48px;
+    justify-content: center !important;
+    padding        : 10% 15% 15% 15%;
+}
+
+.button-group {
+    display       : flex !important;
+    flex-direction: row-reverse !important;
+    gap           : 8px !important;
+}
+
+.neo-h1 {
+    font-size  : 48px;
+    font-weight: 600;
+    text-align : center;
+}
+
+.vector {
+    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
+    background-position: center center;
+    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

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

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

@@ -2,6 +2,70 @@
     --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(--sem-color-fg-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h1);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+h2 {
+    color           : var(--semantic-color-neutral-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h2);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+p {
+    color           : var(--semantic-color-fg-default);
+    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;
+}
+
+mark {
+    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/design-tokens/Component.scss

@@ -0,0 +1,64 @@
+:root .neo-theme-neo-light {
+    --cmp-breadcrumb-arrow                      : var(--sem-color-fg-neutral-default);
+    --cmp-breadcrumb-currentpage                : var(--sem-color-fg-primary-base);
+    --cmp-breadcrumb-gap                        : var(--sem-spacing-xxsmall);
+    --cmp-breadcrumb-pagelevel                  : var(--sem-color-fg-neutral-default);
+    --cmp-button-borderradius                   : var(--sem-borderradius-large);
+    --cmp-button-borderwidth                    : 1px;
+    --cmp-button-gap                            : var(--sem-spacing-xxsmall);
+    --cmp-button-ghost-bg-active                : var(--sem-color-bg-neutral-active);
+    --cmp-button-ghost-bg-default               : transparent;
+    --cmp-button-ghost-bg-disabled              : var(--sem-color-bg-neutral-disabled);
+    --cmp-button-ghost-bg-hover                 : var(--sem-color-bg-neutral-hover);
+    --cmp-button-ghost-bg-loading               : var(--sem-color-bg-neutral-hover);
+    --cmp-button-ghost-fg-default               : var(--sem-color-fg-neutral-contrast);
+    --cmp-button-ghost-fg-disabled              : var(--sem-color-fg-neutral-disabled);
+    --cmp-button-height                         : var(--height-48);
+    --cmp-button-primary-bg-active              : var(--sem-color-bg-primary-active);
+    --cmp-button-primary-bg-default             : var(--sem-color-bg-primary-default);
+    --cmp-button-primary-bg-disabled            : var(--sem-color-bg-primary-disabled);
+    --cmp-button-primary-bg-hover               : var(--sem-color-bg-primary-hover);
+    --cmp-button-primary-bg-loading             : var(--sem-color-bg-primary-background);
+    --cmp-button-primary-fg-default             : var(--sem-color-fg-neutral-contrast);
+    --cmp-button-primary-fg-disabled            : var(--sem-color-fg-neutral-disabled);
+    --cmp-button-secondary-bg-active            : var(--sem-color-bg-neutral-active);
+    --cmp-button-secondary-bg-default           : transparent;
+    --cmp-button-secondary-bg-disabled          : transparent;
+    --cmp-button-secondary-bg-hover             : var(--sem-color-bg-neutral-hover);
+    --cmp-button-secondary-bg-loading           : var(--sem-color-bg-neutral-default);
+    --cmp-button-secondary-border-default-color : var(--sem-color-border-default);
+    --cmp-button-secondary-border-default-style : solid;
+    --cmp-button-secondary-border-default-width : 1px;
+    --cmp-button-secondary-border-disabled-color: var(--sem-color-border-subtle);
+    --cmp-button-secondary-border-disabled-style: solid;
+    --cmp-button-secondary-border-disabled-width: 1px;
+    --cmp-button-secondary-text-default         : var(--sem-color-fg-neutral-default);
+    --cmp-button-secondary-text-disabled        : var(--sem-color-fg-neutral-disabled);
+    --cmp-button-spacinghorizontal              : var(--sem-spacing-medium);
+    --cmp-button-tertiary-default               : var(--sem-color-fg-neutral-contrast);
+    --cmp-button-tertiary-disabled              : var(--sem-color-fg-neutral-disabled);
+    --cmp-sidenav-borderradius                  : var(--sem-borderradius-large);
+    --cmp-sidenav-chapter-bg-active             : var(--sem-color-bg-neutral-active);
+    --cmp-sidenav-chapter-bg-default            : transparent;
+    --cmp-sidenav-chapter-bg-hover              : var(--sem-color-bg-neutral-hover);
+    --cmp-sidenav-chapter-bg-selected           : var(--sem-color-bg-primary-background);
+    --cmp-sidenav-chapter-fg-default            : var(--sem-color-fg-neutral-default);
+    --cmp-sidenav-chapter-fg-disabled           : var(--sem-color-fg-neutral-disabled);
+    --cmp-sidenav-chapter-gap                   : var(--sem-spacing-small);
+    --cmp-sidenav-chapter-height                : var(--sem-height-xlarge);
+    --cmp-sidenav-gap                           : var(--sem-spacing-xsmall);
+    --cmp-sidenav-item-bg-default               : transparent;
+    --cmp-sidenav-item-bg-hover                 : var(--sem-color-bg-neutral-hover);
+    --cmp-sidenav-item-bg-pressed               : var(--sem-color-bg-neutral-active);
+    --cmp-sidenav-item-bg-selected              : var(--sem-color-bg-primary-background);
+    --cmp-sidenav-item-borderradius             : var(--sem-borderradius-large);
+    --cmp-sidenav-item-fg-default               : var(--sem-color-fg-neutral-default);
+    --cmp-sidenav-item-fg-disabled              : var(--sem-color-fg-neutral-disabled);
+    --cmp-sidenav-item-gap                      : var(--sem-spacing-small);
+    --cmp-sidenav-item-height                   : var(--sem-height-xlarge);
+    --cmp-sidenav-item-spacex                   : var(--sem-spacing-medium);
+    --cmp-sidenav-spacex                        : var(--sem-spacing-medium);
+    --cmp-sidenav-spacey                        : var(--sem-spacing-xsmall);
+    --cmp-tab-foreground-default                : var(--sem-color-fg-neutral-default);
+    --cmp-tab-height                            : var(--sem-height-xlarge);
+}

package/resources/scss/theme-neo-light/design-tokens/Core.scss

@@ -0,0 +1,67 @@
+:root .neo-theme-neo-light {
+    --black                                           : #000000;
+    --borderradius-0                                  : 0;
+    --borderradius-4                                  : 4;
+    --borderradius-8                                  : 8;
+    --core-fontfamily-mono                            : 'Source Code Pro', monospace;
+    --core-fontfamily-sans                            : 'Source Sans 3', sans-serif;
+    --core-fontfamily-serif                           : 'Source Serif 4', serif;
+    --core-fontsize-body                              : 18px;
+    --core-fontsize-h1                                : 2.5rem;
+    --core-fontsize-h2                                : 1.75rem;
+    --core-fontweight-bold                            : 700;
+    --core-fontweight-regular                         : 400;
+    --core-fontweight-semibold                        : 600;
+    --core-lineheight-headline                        : 1.2;
+    --core-lineheight-paragraph                       : 1.5;
+    --gray-100                                        : #F0F2F0;
+    --gray-200                                        : #D3D7D2;
+    --gray-300                                        : #B6BDB4;
+    --gray-400                                        : #99A295;
+    --gray-50                                         : #fafafa;
+    --gray-500                                        : #7C8877;
+    --gray-600                                        : #606A5D;
+    --gray-700                                        : #454B42;
+    --gray-800                                        : #292D28;
+    --gray-900                                        : #0E0F0D;
+    --green-50                                        : #DFFEF2;
+    --green-100                                       : #BFFCE6;
+    --green-200                                       : #94FAD5;
+    --green-300                                       : #54F7BB;
+    --green-400                                       : #3FF6B3;
+    --green-500                                       : #29F5AA;
+    --green-600                                       : #0EF49F;
+    --green-700                                       : #0ADB8E;
+    --green-800                                       : #08A46A;
+    --green-900                                       : #056D47;
+    --height-16                                       : 16;
+    --height-2                                        : 2;
+    --height-32                                       : 32;
+    --height-4                                        : 4;
+    --height-48                                       : 48;
+    --height-8                                        : 8;
+    --purple-100                                      : #efe3ff;
+    --purple-200                                      : #d0aaff;
+    --purple-300                                      : #b071ff;
+    --purple-400                                      : #9039ff;
+    --purple-500                                      : #7100ff;
+    --purple-600                                      : #5800c6;
+    --purple-700                                      : #3f008e;
+    --purple-800                                      : #260055;
+    --purple-900                                      : #0d001c;
+    --spacing-12                                      : 12;
+    --spacing-16                                      : 16;
+    --spacing-2                                       : 2;
+    --spacing-20                                      : 20;
+    --spacing-24                                      : 24;
+    --spacing-32                                      : 32;
+    --spacing-4                                       : 4;
+    --spacing-40                                      : 40;
+    --spacing-48                                      : 48;
+    --spacing-64                                      : 64;
+    --spacing-8                                       : 8;
+    --spacing-80                                      : 80;
+    --spacing-96                                      : 96;
+    --Transparent                                     : rgba(255,255,255,0);
+    --white                                           : #FFFFFF;
+}