neo.mjs 5.18.0 → 6.0.0

package/resources/scss/src/toolbar/Base.scss

@@ -1,7 +1,7 @@
 .neo-toolbar {
-    background-color: v(toolbar-background-color);
+    background-color: var(--toolbar-background-color);
     box-sizing      : border-box;
-    padding         : v(toolbar-padding);
+    padding         : var(--toolbar-padding);
 
     .neo-button {
         margin: 0;
@@ -12,7 +12,7 @@
             padding: 12px 6px;
 
             @if neo(button-use-gradients) == true {
-                background-image: linear-gradient(to right, #{v(button-background-gradient-start)}, #{v(button-background-gradient-end)});
+                background-image: linear-gradient(to right, #{var(--button-background-gradient-start)}, #{var(--button-background-gradient-end)});
             }
 
             &.icon-left {
@@ -29,31 +29,31 @@
             writing-mode: vertical-rl;
 
             &.neo-bottom-left {
-                bottom: v(button-badge-margin-top);
+                bottom: var(--button-badge-margin-top);
                 left  : unset;
-                right : v(button-badge-margin-left);
+                right : var(--button-badge-margin-left);
                 top   : unset;
             }
 
             &.neo-bottom-right {
                 bottom: unset;
                 left  : unset;
-                right : v(button-badge-margin-left);
-                top   : v(button-badge-margin-top);
+                right : var(--button-badge-margin-left);
+                top   : var(--button-badge-margin-top);
             }
 
             &.neo-top-left {
-                bottom: v(button-badge-margin-top);
-                left  : v(button-badge-margin-left);
+                bottom: var(--button-badge-margin-top);
+                left  : var(--button-badge-margin-left);
                 right : unset;
                 top   : unset;
             }
 
             &.neo-top-right {
                 bottom: unset;
-                left  : v(button-badge-margin-left);
+                left  : var(--button-badge-margin-left);
                 right : unset;
-                top   : v(button-badge-margin-top);
+                top   : var(--button-badge-margin-top);
             }
         }
 
@@ -79,7 +79,7 @@
             padding: 12px 6px;
 
             @if neo(button-use-gradients) == true {
-                background-image: linear-gradient(to left, #{v(button-background-gradient-start)}, #{v(button-background-gradient-end)});
+                background-image: linear-gradient(to left, #{var(--button-background-gradient-start)}, #{var(--button-background-gradient-end)});
             }
 
             &.icon-left {
@@ -96,14 +96,14 @@
 
             &.neo-bottom-left {
                 bottom: unset;
-                left  : v(button-badge-margin-left);
+                left  : var(--button-badge-margin-left);
                 right : unset;
-                top   : v(button-badge-margin-top);
+                top   : var(--button-badge-margin-top);
             }
 
             &.neo-bottom-right {
-                bottom: v(button-badge-margin-top);
-                left  : v(button-badge-margin-left);
+                bottom: var(--button-badge-margin-top);
+                left  : var(--button-badge-margin-left);
                 right : unset;
                 top   : unset;
             }
@@ -111,14 +111,14 @@
             &.neo-top-left {
                 bottom: unset;
                 left  : unset;
-                right : v(button-badge-margin-left);
-                top   : v(button-badge-margin-top);
+                right : var(--button-badge-margin-left);
+                top   : var(--button-badge-margin-top);
             }
 
             &.neo-top-right {
-                bottom: v(button-badge-margin-top);
+                bottom: var(--button-badge-margin-top);
                 left  : unset;
-                right : v(button-badge-margin-left);
+                right : var(--button-badge-margin-left);
                 top   : unset;
             }
         }

package/resources/scss/src/toolbar/Breadcrumb.scss

@@ -4,7 +4,7 @@
             margin-right: 30px;
 
             &::after {
-                color       : v(button-text-color);
+                color       : var(--button-text-color);
                 content     : "\f105";
                 display     : block;
                 font-family : var(--fa-style-family-classic);

package/resources/scss/src/tree/List.scss

@@ -1,6 +1,6 @@
 .neo-tree-list {
     border  : none;
-    color   : v(tree-list-color);
+    color   : var(--tree-list-color);
     display : flex;
     overflow: hidden;
     position: relative;
@@ -15,8 +15,8 @@
     }
 
     .neo-list-container {
-        background-color: v(list-container-background-color);
-        border          : v(list-container-border);
+        background-color: var(--list-container-background-color);
+        border          : var(--list-container-border);
         overflow        : auto;
     }
 
@@ -50,7 +50,7 @@
         margin-right: 10px;
 
         .neo-list-item-content:before {
-            color      : v(list-item-glyph-color); // todo: tree-list var
+            color      : var(--list-item-glyph-color); // todo: tree-list var
             content    : "\f1f9";
             display    : inline-block;
             font-family: var(--fa-style-family-classic);
@@ -78,7 +78,7 @@
         }
 
         .neo-treelist-menu-item-content:before {
-            color      : v(tree-list-menu-item-color);
+            color      : var(--tree-list-menu-item-color);
             display    : inline-block;
             font-family: var(--fa-style-family-classic);
             font-weight: 900;

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

@@ -1,17 +1,7 @@
-$neoMap: map-merge($neoMap, (
-    'neo-background-color': #323232,
-    'neo-color'           : #bbb,
-    'neo-disabled-opacity': 0.5,
-    'neo-font-family'     : '"Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif',
-    'neo-font-smoothing'  : antialiased
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark {
-        --neo-background-color: #{neo(neo-background-color)};
-        --neo-color           : #{neo(neo-color)};
-        --neo-disabled-opacity: #{neo(neo-disabled-opacity)};
-        --neo-font-family     : #{neo(neo-font-family)};
-        --neo-font-smoothing  : #{neo(neo-font-smoothing)};
-    }
-}
+:root .neo-theme-dark {
+    --neo-background-color: #323232;
+    --neo-color           : #bbb;
+    --neo-disabled-opacity: 0.5;
+    --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+    --neo-font-smoothing  : antialiased;
+}

package/resources/scss/theme-dark/apps/covid/HeaderContainer.scss

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'covid-header-active-background-color'   : rgba(100, 181, 246, .5),
-    'covid-header-active-color'              : #64b5f6,
-    'covid-header-cases-background-color'    : rgba(187, 187, 187, .5),
-    'covid-header-cases-color'               : #bbb,
-    'covid-header-deaths-background-color'   : rgba(251, 103, 103, .5),
-    'covid-header-deaths-color'              : #fb6767,
-    'covid-header-recovered-background-color': rgba( 40, 218, 111, .5),
-    'covid-header-recovered-color'           : #28ca68
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .covid-header-container
-        --covid-header-active-background-color   : #{neo(covid-header-active-background-color)};
-        --covid-header-active-color              : #{neo(covid-header-active-color)};
-        --covid-header-cases-background-color    : #{neo(covid-header-cases-background-color)};
-        --covid-header-cases-color               : #{neo(covid-header-cases-color)};
-        --covid-header-deaths-background-color   : #{neo(covid-header-deaths-background-color)};
-        --covid-header-deaths-color              : #{neo(covid-header-deaths-color)};
-        --covid-header-recovered-background-color: #{neo(covid-header-recovered-background-color)};
-        --covid-header-recovered-color           : #{neo(covid-header-recovered-color)};
-    }
-}
+:root .neo-theme-dark { // .covid-header-container
+    --covid-header-active-background-color   : rgba(100, 181, 246, .5);
+    --covid-header-active-color              : #64b5f6;
+    --covid-header-cases-background-color    : rgba(187, 187, 187, .5);
+    --covid-header-cases-color               : #bbb;
+    --covid-header-deaths-background-color   : rgba(251, 103, 103, .5);
+    --covid-header-deaths-color              : #fb6767;
+    --covid-header-recovered-background-color: rgba( 40, 218, 111, .5);
+    --covid-header-recovered-color           : #28ca68;
+}

package/resources/scss/theme-dark/apps/covid/country/Gallery.scss

@@ -1,17 +1,7 @@
-$neoMap: map-merge($neoMap, (
-    'covid-gallery-background-color'             : #000,
-    'covid-gallery-border-color'                 : #3c3f41,
-    'covid-gallery-item-border-color'            : rgba(0,0,0,.1),
-    'covid-gallery-item-border-sides-width'      : 0,
-    'covid-gallery-item-wrapper-background-color': rgba(73,160,154,.35)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-gallery.covid-country-gallery
-        --covid-gallery-background-color             : #{neo(covid-gallery-background-color)};
-        --covid-gallery-border-color                 : #{neo(covid-gallery-border-color)};
-        --covid-gallery-item-border-color            : #{neo(covid-gallery-item-border-color)};
-        --covid-gallery-item-border-sides-width      : #{neo(covid-gallery-item-border-sides-width)};
-        --covid-gallery-item-wrapper-background-color: #{neo(covid-gallery-item-wrapper-background-color)};
-    }
-}
+:root .neo-theme-dark { // .neo-gallery.covid-country-gallery
+    --covid-gallery-background-color             : #000;
+    --covid-gallery-border-color                 : #3c3f41;
+    --covid-gallery-item-border-color            : rgba(0,0,0,.1);
+    --covid-gallery-item-border-sides-width      : 0;
+    --covid-gallery-item-wrapper-background-color: rgba(73,160,154,.35);
+}

package/resources/scss/theme-dark/apps/covid/country/Helix.scss

@@ -1,19 +1,8 @@
-$neoMap: map-merge($neoMap, (
-    'covid-helix-background-color'             : #000,
-    'covid-helix-border-color'                 : #3c3f41,
-    'covid-helix-item-border-color'            : rgba(0,0,0,.1),
-    'covid-helix-item-border-sides-width'      : 0,
-    'covid-helix-item-box-shadow-selected'     : 0 0 35px #61dfe5,
-    'covid-helix-item-wrapper-background-color': rgba(73,160,154,.35)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-helix.covid-country-helix
-        --covid-helix-background-color             : #{neo(covid-helix-background-color)};
-        --covid-helix-border-color                 : #{neo(covid-helix-border-color)};
-        --covid-helix-item-border-color            : #{neo(covid-helix-item-border-color)};
-        --covid-helix-item-border-sides-width      : #{neo(covid-helix-item-border-sides-width)};
-        --covid-helix-item-box-shadow-selected     : #{neo(covid-helix-item-box-shadow-selected)};
-        --covid-helix-item-wrapper-background-color: #{neo(covid-helix-item-wrapper-background-color)};
-    }
-}
+:root .neo-theme-dark { // .neo-helix.covid-country-helix
+    --covid-helix-background-color             : #000;
+    --covid-helix-border-color                 : #3c3f41;
+    --covid-helix-item-border-color            : rgba(0,0,0,.1);
+    --covid-helix-item-border-sides-width      : 0;
+    --covid-helix-item-box-shadow-selected     : 0 0 35px #61dfe5;
+    --covid-helix-item-wrapper-background-color: rgba(73,160,154,.35);
+}

package/resources/scss/theme-dark/apps/covid/country/LineChartComponent.scss

@@ -1,9 +1,3 @@
-$neoMap: map-merge($neoMap, (
-    'covid-line-chart-background-color': #323232
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .covid-line-chart
-        --covid-line-chart-background-color: #{neo(covid-line-chart-background-color)};
-    }
-}
+:root .neo-theme-dark { // .covid-line-chart
+    --covid-line-chart-background-color: #323232;
+}

package/resources/scss/theme-dark/apps/docs/ContentTabContainer.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'docs-content-tabcontainer-tab-header-toolbar-background-color' : #343537,
-    'docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover': brown
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .docs-content-tabcontainer
-        --docs-content-tabcontainer-tab-header-toolbar-background-color : #{neo(docs-content-tabcontainer-tab-header-toolbar-background-color)};
-        --docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover: #{neo(docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover)};
-    }
-}
+:root .neo-theme-dark { // .docs-content-tabcontainer
+    --docs-content-tabcontainer-tab-header-toolbar-background-color : #343537;
+    --docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover: brown;
+}

package/resources/scss/theme-dark/apps/docs/HeaderContainer.scss

@@ -1,23 +1,10 @@
-$neoMap: map-merge($neoMap, (
-    'docs-header-container-background-color'         : #343537,
-    'docs-header-container-background-image'         : linear-gradient(#414244, #343537),
-    'docs-header-container-logo-text-background-clip': text,
-    'docs-header-container-logo-text-color'          : rgba(0,0,0,0.6),
-    'docs-header-container-logo-text-font-size'      : 28px,
-    'docs-header-container-logo-text-font-weight'    : 800,
-    'docs-header-container-logo-padding'             : 10px,
-    'docs-header-container-logo-text-shadow'         : 2px 2px 3px rgba(200,200,200,0.1)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-docs-header-container
-        --docs-header-container-background-color         : #{neo(docs-header-container-background-color)};
-        --docs-header-container-background-image         : #{neo(docs-header-container-background-image)};
-        --docs-header-container-logo-text-background-clip: #{neo(docs-header-container-logo-text-background-clip)};
-        --docs-header-container-logo-text-color          : #{neo(docs-header-container-logo-text-color)};
-        --docs-header-container-logo-text-font-size      : #{neo(docs-header-container-logo-text-font-size)};
-        --docs-header-container-logo-text-font-weight    : #{neo(docs-header-container-logo-text-font-weight)};
-        --docs-header-container-logo-padding             : #{neo(docs-header-container-logo-padding)};
-        --docs-header-container-logo-text-shadow         : #{neo(docs-header-container-logo-text-shadow)};
-    }
-}
+:root .neo-theme-dark { // .neo-docs-header-container
+    --docs-header-container-background-color         : #343537;
+    --docs-header-container-background-image         : linear-gradient(#414244, #343537);
+    --docs-header-container-logo-text-background-clip: text;
+    --docs-header-container-logo-text-color          : rgba(0,0,0,0.6);
+    --docs-header-container-logo-text-font-size      : 28px;
+    --docs-header-container-logo-text-font-weight    : 800;
+    --docs-header-container-logo-padding             : 10px;
+    --docs-header-container-logo-text-shadow         : 2px 2px 3px rgba(200,200,200,0.1);
+}

package/resources/scss/theme-dark/apps/docs/MainContainer.scss

@@ -1,9 +1,3 @@
-$neoMap: map-merge($neoMap, (
-    'docs-navigation-tab-container-background-color': #343537
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-docs-navigation-tab-container
-        --docs-navigation-tab-container-background-color: #{neo(docs-navigation-tab-container-background-color)};
-    }
-}
+:root .neo-theme-dark { // .neo-docs-navigation-tab-container
+    --docs-navigation-tab-container-background-color: #343537;
+}

package/resources/scss/theme-dark/apps/docs/classdetails/HeaderComponent.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'docs-classdetails-headercomponent-background-color': #323232,
-    'docs-classdetails-headerpanel-border-right'        : 0
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .neo-docs-classdetails-headercontainer
-        --docs-classdetails-headercomponent-background-color: #{neo(docs-classdetails-headercomponent-background-color)};
-        --docs-classdetails-headerpanel-border-right        : #{neo(docs-classdetails-headerpanel-border-right)};
-    }
-}
+:root .neo-theme-dark { // .neo-docs-classdetails-headercontainer
+    --docs-classdetails-headercomponent-background-color: #323232;
+    --docs-classdetails-headerpanel-border-right        : 0;
+}

package/resources/scss/theme-dark/apps/docs/classdetails/MembersList.scss

@@ -1,37 +1,17 @@
-$neoMap: map-merge($neoMap, (
-    'docs-classhierarchy-memberslist-background-color' : #282b2b,
-    'docs-memberlist-group-header-background-color'    : #33343d,
-    'docs-memberlist-group-header-color'               : #bbb,
-    'docs-param-table-list-item-background-color'      : #323232,
-    'docs-param-table-list-item-background-image'      : linear-gradient(lighten(#323232, 2%), #323232),
-    'docs-param-table-list-item-header-background-clip': text,
-    'docs-param-table-list-item-header-text-shadow'    : 2px 2px 3px rgba(200,200,200,0.1),
-    'docs-param-table-list-item-highlight-search-color': #ccc,
-    'docs-param-table-source-link-color'               : #555,
-    'docs-param-table-source-link-color-hover'         : #bbb,
-    'docs-param-table-thead-background-color'          : #343537,
-    'docs-param-table-thead-background-image'          : linear-gradient(#414244, #343537),
-    'docs-param-table-tr-background-clip'              : text,
-    'docs-param-table-tr-color'                        : rgba(0,0,0,0.6),
-    'docs-param-table-tr-text-shadow'                  : 2px 2px 3px rgba(200,200,200,0.1)
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .docs-classhierarchy-memberslist
-        --docs-classhierarchy-memberslist-background-color : #{neo(docs-classhierarchy-memberslist-background-color)};
-        --docs-memberlist-group-header-background-color    : #{neo(docs-memberlist-group-header-background-color)};
-        --docs-memberlist-group-header-color               : #{neo(docs-memberlist-group-header-color)};
-        --docs-param-table-list-item-background-color      : #{neo(docs-param-table-list-item-background-color)};
-        --docs-param-table-list-item-background-image      : #{neo(docs-param-table-list-item-background-image)};
-        --docs-param-table-list-item-header-background-clip: #{neo(docs-param-table-list-item-header-background-clip)};
-        --docs-param-table-list-item-header-text-shadow    : #{neo(docs-param-table-list-item-header-text-shadow)};
-        --docs-param-table-list-item-highlight-search-color: #{neo(docs-param-table-list-item-highlight-search-color)};
-        --docs-param-table-source-link-color               : #{neo(docs-param-table-source-link-color)};
-        --docs-param-table-source-link-color-hover         : #{neo(docs-param-table-source-link-color-hover)};
-        --docs-param-table-thead-background-color          : #{neo(docs-param-table-thead-background-color)};
-        --docs-param-table-thead-background-image          : #{neo(docs-param-table-thead-background-image)};
-        --docs-param-table-tr-background-clip              : #{neo(docs-param-table-tr-background-clip)};
-        --docs-param-table-tr-color                        : #{neo(docs-param-table-tr-color)};
-        --docs-param-table-tr-text-shadow                  : #{neo(docs-param-table-tr-text-shadow)};
-    }
-}
+:root .neo-theme-dark { // .docs-classhierarchy-memberslist
+    --docs-classhierarchy-memberslist-background-color : #282b2b;
+    --docs-memberlist-group-header-background-color    : #33343d;
+    --docs-memberlist-group-header-color               : #bbb;
+    --docs-param-table-list-item-background-color      : #323232;
+    --docs-param-table-list-item-background-image      : linear-gradient(#{lighten(#323232, 2%)}, #323232);
+    --docs-param-table-list-item-header-background-clip: text;
+    --docs-param-table-list-item-header-text-shadow    : 2px 2px 3px rgba(200,200,200,0.1);
+    --docs-param-table-list-item-highlight-search-color: #ccc;
+    --docs-param-table-source-link-color               : #555;
+    --docs-param-table-source-link-color-hover         : #bbb;
+    --docs-param-table-thead-background-color          : #343537;
+    --docs-param-table-thead-background-image          : linear-gradient(#414244, #343537);
+    --docs-param-table-tr-background-clip              : text;
+    --docs-param-table-tr-color                        : rgba(0,0,0,0.6);
+    --docs-param-table-tr-text-shadow                  : 2px 2px 3px rgba(200,200,200,0.1);
+}

package/resources/scss/theme-dark/apps/docs/classdetails/TutorialComponent.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'docs-classdetails-tutorialcomponent-background-color': #323232,
-    'docs-classdetails-tutorialcomponent-color'           : #bbb
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark {
-        --docs-classdetails-tutorialcomponent-background-color: #{neo(docs-classdetails-tutorialcomponent-background-color)};
-        --docs-classdetails-tutorialcomponent-color           : #{neo(docs-classdetails-tutorialcomponent-color)};
-    }
-}
+:root .neo-theme-dark {
+    --docs-classdetails-tutorialcomponent-background-color: #323232;
+    --docs-classdetails-tutorialcomponent-color           : #bbb;
+}

package/resources/scss/theme-dark/apps/website/HeaderContainer.scss

@@ -1,13 +1,5 @@
-$neoMap: map-merge($neoMap, (
-    'website-header-button-background-image': linear-gradient(#999,#111),
-    'website-header-button-glyph-color'     : #eee,
-    'website-header-button-border'          : 1px solid #999
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .website-header-container
-        --website-header-button-background-image: #{neo(website-header-button-background-image)};
-        --website-header-button-glyph-color     : #{neo(website-header-button-glyph-color)};
-        --website-header-button-border          : #{neo(website-header-button-border)};
-    }
-}
+:root .neo-theme-dark { // .website-header-container
+    --website-header-button-background-image: linear-gradient(#999,#111);
+    --website-header-button-glyph-color     : #eee;
+    --website-header-button-border          : 1px solid #999;
+}

package/resources/scss/theme-dark/apps/website/MainContainer.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'website-background-image'   : linear-gradient(#444, #222),
-    'website-transition-duration': 300ms
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .website-main-container
-        --website-background-image   : #{neo(website-background-image)};
-        --website-transition-duration: #{neo(website-transition-duration)};
-    }
-}
+:root .neo-theme-dark { // .website-main-container
+    --website-background-image   : linear-gradient(#444, #222);
+    --website-transition-duration: 300ms;
+}

package/resources/scss/theme-dark/apps/website/blog/Container.scss

@@ -1,9 +1,3 @@
-$neoMap: map-merge($neoMap, (
-    'website-blog-toolbar-background-color': #323232
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .website-blog-container
-        --website-blog-toolbar-background-color: #{neo(website-blog-toolbar-background-color)};
-    }
-}
+:root .neo-theme-dark { // .website-blog-container
+    --website-blog-toolbar-background-color: #323232;
+}

package/resources/scss/theme-dark/apps/website/home/TabContainer.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'website-home-color'   : #bbb,
-    'website-home-h1-color': #ddd
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-dark { // .website-home-tab-container
-        --website-home-color   : #{neo(website-home-color)};
-        --website-home-h1-color: #{neo(website-home-h1-color)};
-    }
-}
+:root .neo-theme-dark { // .website-home-tab-container
+    --website-home-color   : #bbb;
+    --website-home-h1-color: #ddd;
+}