neo.mjs 6.17.2 → 6.18.1

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

@@ -1,55 +1,54 @@
 .learnneo-header-toolbar {
-  border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid #f2f2f2;
 
-  .logo {
-    margin-left: 1em;
-  }
-
-  .neo-button {
-    margin-left: 10px;
-
-    &.no-text {
-      margin-left: 0;
-      width: 1.2em;
-
-      &.github-button {
-        margin-left: 5em;
-      }
-
-      .neo-button-glyph {
-        font-size: 24px;
-      }
+    .logo {
+        margin-left: 1em;
     }
 
-    .neo-button-glyph {
-      &.neo-logo-blue {
-        background-image: url("../../../../../../../resources/images/Neo_Logo_Blue.svg");
-        height: 24px;
-        width: 24px;
-      }
+    .neo-button {
+        margin-left: 10px;
+
+        &.no-text {
+            margin-left: 0;
+            width      : 1.2em;
+
+            &.github-button {
+                margin-left: 5em;
+            }
+
+            .neo-button-glyph {
+                font-size: 24px;
+            }
+        }
+
+        .neo-button-glyph {
+            &.neo-logo-blue {
+                background-image: url("../../../../../../resources/images/logo/neo_logo_primary.svg");
+                height          : 24px;
+                width           : 24px;
+            }
+        }
     }
-  }
 
-  .separate-bar {
-    position: absolute;
-    right: 20px;
-    top: 60px;
-    width: 40px;
-
-    z-index: 9;
-    transform: rotate(0);
-    animation: fade-in-animation 200ms linear;
-  }
+    .separate-bar {
+        animation: fade-in-animation 200ms linear;
+        position: absolute;
+        right   : 20px;
+        top     : 60px;
+        transform: rotate(0);
+        width   : 40px;
+        z-index  : 9;
+    }
 
-  // find parallel class hide-sidebar
-  &:has(+div .hide-sidebar) .separate-bar {
-    animation: fade-animation 200ms linear forwards;
-  }
+    // find parallel class hide-sidebar
+    &:has(+div .hide-sidebar) .separate-bar {
+        animation: fade-animation 200ms linear forwards;
+    }
 }
 
 .vector {
-  animation: fade-and-scale-animation auto linear;
-  animation-timeline: --page-scroll;
+    animation: fade-and-scale-animation auto linear;
+    animation-timeline: --page-scroll;
 }
 
 //@scroll-timeline --page-scroll {
@@ -61,70 +60,71 @@
 
 /* Style and position the progress bar */
 #progress {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  height: 2px;
-  width: 100%;
-  background: var(--button-background-color);
-  background: var(--sem-color-surface-primary-background);
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--button-background-color);
+    background: var(--sem-color-surface-primary-background);
 
-  scale: 0 1;
-  transform-origin: left;
+    scale: 0 1;
+    transform-origin: left;
 
-  /* Attach the animation using an anonymous Scroll Progress Timeline */
-  animation: grow-progress linear;
-  animation-timeline: --page-scroll;
+    /* Attach the animation using an anonymous Scroll Progress Timeline */
+    animation: grow-progress linear;
+    animation-timeline: --page-scroll;
 }
 
 @keyframes grow-progress {
-  to { scale: 1 1; }
+    to {
+        scale: 1 1;
+    }
 }
 
 .hello-world {
-  animation-timeline: view(block 100% -500%);
+    animation-timeline: view(block 100% -500%);
 
-  animation-name: appear-animation;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-name: appear-animation;
+    animation-fill-mode: both;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-animation {
-  0% {
-    transform: translateX(-400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(-400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 .cool-stuff {
-  animation-timeline: view(block 100% -500%);
-
-  animation-name: appear-cool-stuff;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-timeline       : view(block 100% -500%);
+    animation-name           : appear-cool-stuff;
+    animation-fill-mode      : both;
+    animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-cool-stuff {
-  0% {
-    transform: translateX(400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 
@@ -133,65 +133,83 @@
 //}
 
 .portal-home-maincontainer {
-  scroll-timeline: --page-scroll block;
+    scroll-timeline: --page-scroll block;
 }
 
 @keyframes rotateAnimation {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes fade-and-scale-animation {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  12%, 100% {
-    opacity: 0;
-    transform: scale(1.5);
-  }
+    0% {
+        opacity  : 1;
+        transform: scale(1);
+    }
+    12%, 100% {
+        opacity  : 0;
+        transform: scale(1.5);
+    }
 }
 
 @keyframes fade-in-animation {
-  from { opacity: 0; right: -10px}
-  to   { opacity: 1; right: 20px;}
+    from {
+        opacity: 0;
+        right  : -10px
+    }
+    to {
+        opacity: 1;
+        right  : 20px;
+    }
 }
+
 @keyframes fade-animation {
-  from { opacity: 1; right: 20px;}
-  to   { opacity: 0; right: -10px}
+    from {
+        opacity: 1;
+        right  : 20px;
+    }
+    to {
+        opacity: 0;
+        right  : -10px
+    }
 }
 
 .button-group {
-  overflow: visible;
+    overflow: visible;
 }
 
 .get-started-button {
-  opacity: 0;
-  animation: show-get-started-button 400ms 1300ms linear forwards;
+    opacity  : 0;
+    animation: show-get-started-button 400ms 1300ms linear forwards;
 }
 
 .neo-github {
-  opacity: 0;
-  animation: show-github-button 600ms 1150ms linear forwards;
+    opacity  : 0;
+    animation: show-github-button 600ms 1150ms linear forwards;
 }
 
 @keyframes show-get-started-button {
-  from {
-    opacity: 0;
-    transform: translate(70px, 30px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(70px, 30px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }
+
 @keyframes show-github-button {
-  from {
-    opacity: 0;
-    transform: translate(-70px, 50px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(-70px, 50px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }

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

@@ -9,11 +9,17 @@
 
         .neo-h1 {
             font-size: min(max(5.5vw, 30px), 64px);
+            text-align   : center;
+            margin       : 0;
+            line-height  : 1em;
         }
 
         .neo-h2 {
             font-size: min(max(3.5vw, 24px), 44px);
-        }
+            text-align   : center;
+            margin       : 0;
+            line-height  : 1em;
+            }
 
         .neo-content {
             font-size: min(max(2.3vw, 16px), 30px);
@@ -24,27 +30,8 @@
         }
     }
 
-    .button-group {
-        display       : flex !important;
-        flex-direction: row-reverse !important;
-        gap           : 8px !important;
-    }
-
     .neo-h1 {
-        font-size    : 32px;
-        font-weight  : 600;
-        text-align   : center;
-        margin-bottom: 1.25em;
-    }
-
-    .vector {
-        background-image   : url("../../../../../../../resources/images/Neo_Logo_Text.svg");
-        background-position: center center;
-        background-repeat  : no-repeat;
-        background-size    : contain;
-        height             : 10vW;
-        margin             : 0 0 3rem 0;
-        max-height         : 130px;
-        width              : 100%;
+        font-size  : 32px;
+        font-weight: 600;
     }
 }

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -0,0 +1,22 @@
+.portal-home-main-neo.page {
+    .button-group {
+        display       : flex !important;
+        flex-direction: row-reverse !important;
+        gap           : 8px !important;
+    }
+
+    .neo-h1 {
+        margin-bottom: 1.25em;
+    }
+
+    .vector {
+        background-image   : url("../../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
+        background-position: center center;
+        background-repeat  : no-repeat;
+        background-size    : contain;
+        height             : 10vW;
+        margin             : 0 0 3rem 0;
+        max-height         : 130px;
+        width              : 100%;
+    }
+}

package/resources/scss/src/apps/portal/home/preview/PageCodeContainer.scss

@@ -8,7 +8,7 @@
     opacity: .4;
     content: "";
     background: {
-      image   : url("../../../../../../../../resources/images/Neo_Logo_Blue.svg");
+      image   : url("../../../../../../../../resources/images/logo/neo_logo_secondary.svg");
       size: auto 90%;
       repeat: no-repeat;
       position: center;

package/resources/scss/src/examples/component/multiWindowHelix/Viewport.scss

@@ -0,0 +1,3 @@
+.multi-window-helix-viewport.neo-viewport {
+    overflow: hidden;
+}

package/resources/scss/src/form/field/CheckBox.scss

@@ -5,6 +5,7 @@
         display    : inline-block;
         font-family: var(--checkboxfield-icon-font-family);
         font-size  : var(--checkboxfield-icon-font-size);
+        font-style: normal !important;
         margin     : var(--checkboxfield-icon-margin);
         width      : 20px;
     }

package/resources/scss/src/tab/header/Button.scss

@@ -26,7 +26,8 @@
     }
 
     .neo-button-text {
-        color: var(--tab-button-text-color);
+        color    : var(--tab-button-text-color);
+        font-size: var(--tab-button-text-font-size);
     }
 
     .neo-tab-button-indicator {

package/resources/scss/theme-dark/Global.scss

@@ -4,4 +4,12 @@
     --neo-disabled-opacity: 0.5;
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
+
+    p {
+        color      : inherit;
+        font-family: inherit;
+        font-size  : inherit;
+        font-weight: inherit;
+        line-height: inherit;
+    }
 }

package/resources/scss/theme-dark/button/Base.scss

@@ -27,7 +27,7 @@ $text-color      : #bbb;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
-    --button-height                             : inherit;
+    --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;

package/resources/scss/theme-dark/tab/header/Button.scss

@@ -26,5 +26,6 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px 12px 6px 12px;
     --tab-button-text-color                     : #bbb;
+    --tab-button-text-font-size                 : var(--button-text-font-size);
     --tab-button-text-transform                 : none;
 }

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

@@ -4,4 +4,12 @@
     --neo-disabled-opacity: 0.5;
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
+
+    p {
+        color      : inherit;
+        font-family: inherit;
+        font-size  : inherit;
+        font-weight: inherit;
+        line-height: inherit;
+    }
 }

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

@@ -26,7 +26,7 @@ $text-color      : #1c60a0;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
-    --button-height                             : inherit;
+    --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);
     --button-outline-active                     : none;

package/resources/scss/theme-light/tab/header/Button.scss

@@ -26,5 +26,6 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px 12px 6px 12px;
     --tab-button-text-color                     : #2b2b2b;
+    --tab-button-text-font-size                 : var(--button-text-font-size);
     --tab-button-text-transform                 : uppercase;
 }

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

@@ -1,67 +1,67 @@
+@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+
 :root .neo-theme-neo-light {
     --neo-background-color: #fafafa;
     --neo-color           : #000;
     --neo-disabled-opacity: 0.5;
     --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-neutral-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);
+    }
 
-h1 {
-    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);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    h2 {
+        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);
+        letter-spacing  : -0.02em;
+        line-height     : var(--core-lineheight-headline);
+    }
 
-h2 {
-    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);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    h3 {
+        color           : var(--sem-color-fg-neutral-contrast);
+        font-family     : var(--core-fontfamily-sans);
+        font-size       : var(--core-fontsize-h3);
+        font-weight     : var(--core-fontweight-semibold);
+        letter-spacing  : -0.02em;
+        line-height     : var(--core-lineheight-headline);
+    }
 
-h3 {
-    color           : var(--sem-color-fg-neutral-contrast);
-    font-family     : var(--core-fontfamily-sans);
-    font-size       : var(--core-fontsize-h3);
-    font-weight     : var(--core-fontweight-semibold);
-    letter-spacing  : -0.02em;
-    line-height     : var(--core-lineheight-headline);
-}
+    p {
+        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);
+    }
 
-p {
-    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);
-}
+    i, em {
+        font-style: italic;
+    }
 
-i, em {
-    font-style: italic;
-}
-
-code {
-    background-color: #F0F2F0;
-    border          : 1px solid var(--sem-color-border-subtle);
-    border-radius   : 4px;
-    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;
-}
+    code &:not(.hljs) {
+        background-color: #F0F2F0;
+        border          : 1px solid var(--sem-color-border-subtle);
+        border-radius   : 4px;
+        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: var(--green-50);
-    color           : black;
-    padding         : 0.1em 0.2em;
+    mark {
+        background-color: var(--green-50);
+        color           : black;
+        padding         : 0.1em 0.2em;
+    }
 }

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

@@ -1,6 +1,4 @@
-
 :root .neo-theme-neo-light {
-
     // .neo-button – Styles that will be inherited by ALL button styles
     --button-height                             : var(--cmp-button-height);
     --button-margin                             : var(--cmp-button-gap);
@@ -152,10 +150,11 @@
     // custom overrides
     .neo-button {
         min-width: var(--cmp-button-height);
+
         &.neo-button-tertiary {
-            text-decoration: underline;
-            text-underline-offset: 3px;
+            text-decoration      : underline;
             text-decoration-color: var(--sem-color-text-primary-default);
+            text-underline-offset: 3px;
         }
     }
 }

package/resources/scss/theme-neo-light/tab/header/Button.scss

@@ -26,17 +26,15 @@
     --tab-button-margin-bottom                  : 0;
     --tab-button-padding                        : 7px var(--cmp-tab-spacinghorizontal) 6px;
     --tab-button-text-color                     : var(--sem-color-fg-neutral-subdued);
+    --tab-button-text-font-size                 : var(--sem-typo-label-regular-fontSize);
     --tab-button-text-transform                 : uppercase;
 
     // custom overrides
-    .neo-button-text {
-        font-size: var(--sem-typo-label-regular-fontSize) !important;
-    }
-
-    .pressed {
-        .neo-button-glyph, .neo-button-text {
-            color: var(--sem-color-fg-neutral-contrast) !important;
+    .neo-tab-header-button.neo-button {
+        .pressed {
+            .neo-button-glyph, .neo-button-text {
+                color: var(--sem-color-fg-neutral-contrast);
+            }
         }
     }
 }
-