neo.mjs 5.17.1 → 6.0.0

package/resources/scss/src/component/Circle.scss

@@ -16,7 +16,7 @@
         cursor           : default;
         display          : flex;
         flex-direction   : column;
-        font-family      : "Lato", #{neo(neo-font-family)};
+        font-family      : "Lato", var(--neo-font-family);
         font-size        : 12px;
         font-weight      : 300;
         justify-content  : center;
@@ -166,4 +166,4 @@
         vertical-align     : middle;
         z-index            : 10;
     }
-}
+}

package/resources/scss/src/component/DateSelector.scss

@@ -1,6 +1,6 @@
 .neo-dateselector {
-    background-color: v(dateselector-background-color);
-    color           : v(dateselector-color);
+    background-color: var(--dateselector-background-color);
+    color           : var(--dateselector-color);
     display         : flex;
     flex-direction  : column;
     font-size       : 16px; // todo: em-based once table headers are em based
@@ -50,26 +50,26 @@
     }
 
     .neo-dateselector-content {
-        border        : 1px solid v(dateselector-border-color);
-        border-top    : v(dateselector-content-border-top);
+        border        : 1px solid var(--dateselector-border-color);
+        border-top    : var(--dateselector-content-border-top);
         display       : flex;
         flex          : 1;
         flex-direction: column;
         font-size     : 12px;
 
         .neo-row {
-            border-bottom: 1px solid v(dateselector-border-color);
+            border-bottom: 1px solid var(--dateselector-border-color);
             display      : flex;
             flex         : 1;
 
             &.neo-header-row {
-                border-bottom: v(dateselector-header-cell-border-bottom) !important;
+                border-bottom: var(--dateselector-header-cell-border-bottom) !important;
                 flex         : none;
                 height       : 30px;
 
                 .neo-cell {
-                    background-color: v(dateselector-header-cell-background-color);
-                    color           : v(dateselector-header-cell-color);
+                    background-color: var(--dateselector-header-cell-background-color);
+                    color           : var(--dateselector-header-cell-color);
                     cursor          : default;
                     pointer-events  : none;
                 }
@@ -81,9 +81,9 @@
 
             .neo-cell {
                 align-items     : center;
-                background-color: v(dateselector-cell-background-color);
-                border-right    : 1px solid v(dateselector-border-color);
-                color           : v(dateselector-cell-color);
+                background-color: var(--dateselector-cell-background-color);
+                border-right    : 1px solid var(--dateselector-border-color);
+                color           : var(--dateselector-cell-color);
                 cursor          : pointer;
                 display         : flex;
                 flex            : 1;
@@ -99,9 +99,9 @@
                 }
 
                 &.neo-disabled {
-                    background-color: v(dateselector-cell-background-color-disabled);
-                    color           : v(dateselector-cell-color-disabled);
-                    opacity         : v(dateselector-cell-opacity-disabled);
+                    background-color: var(--dateselector-cell-background-color-disabled);
+                    color           : var(--dateselector-cell-color-disabled);
+                    opacity         : var(--dateselector-cell-opacity-disabled);
                 }
 
                 &.neo-disabled {
@@ -111,10 +111,10 @@
 
                 &.neo-selected {
                     .neo-cell-content {
-                        background-color: v(dateselector-cell-today-border-color);
-                        border          : 1px solid v(dateselector-header-cell-background-color);
+                        background-color: var(--dateselector-cell-today-border-color);
+                        border          : 1px solid var(--dateselector-header-cell-background-color);
                         border-radius   : 50%;
-                        color           : v(dateselector-cell-color-selected);
+                        color           : var(--dateselector-cell-color-selected);
 
                         &:before {
                             content    : '';
@@ -135,7 +135,7 @@
                     pointer-events : none;
 
                     &.neo-today {
-                        border       : 1px solid v(dateselector-cell-today-border-color);
+                        border       : 1px solid var(--dateselector-cell-today-border-color);
                         border-radius: 50%;
                     }
                 }
@@ -144,9 +144,9 @@
     }
 
     .neo-dateselector-header {
-        background-color: v(dateselector-header-background-color);
-        border          : 1px solid v(dateselector-border-color);
-        border-bottom   : v(dateselector-header-border-bottom);
+        background-color: var(--dateselector-header-background-color);
+        border          : 1px solid var(--dateselector-border-color);
+        border-bottom   : var(--dateselector-header-border-bottom);
         display         : flex;
         min-height      : 30px;
 
@@ -158,7 +158,7 @@
 
             .neo-month-text {
                 align-items    : center;
-                color          : v(dateselector-header-month-text-color);
+                color          : var(--dateselector-header-month-text-color);
                 display        : flex;
                 flex           : 1;
                 font-weight    : bold;
@@ -167,7 +167,7 @@
 
             .neo-year-text {
                 align-items: center;
-                color      : v(dateselector-header-year-text-color);
+                color      : var(--dateselector-header-year-text-color);
                 display    : flex;
                 flex       : 1;
                 margin-left: .25em;
@@ -176,14 +176,14 @@
 
         .neo-nav-button {
             align-items     : center;
-            background-color: v(dateselector-nav-button-background-color);
+            background-color: var(--dateselector-nav-button-background-color);
             cursor          : pointer;
             display         : flex;
             justify-content : center;
             width           : 30px;
 
             &:before {
-                color      : v(dateselector-nav-button-color);
+                color      : var(--dateselector-nav-button-color);
                 font-family: var(--fa-style-family-classic);
                 font-size  : 18px;
                 font-weight: 900;
@@ -192,13 +192,13 @@
 
             &:hover {
                 &:before {
-                    color: v(dateselector-nav-button-color-hover);
+                    color: var(--dateselector-nav-button-color-hover);
                 }
             }
         }
 
         .neo-next-button {
-            border-left: v(dateselector-nav-button-inner-border);
+            border-left: var(--dateselector-nav-button-inner-border);
 
             &:before {
                 content: "\f138";
@@ -206,7 +206,7 @@
         }
 
         .neo-prev-button {
-            border-right: v(dateselector-nav-button-inner-border);
+            border-right: var(--dateselector-nav-button-inner-border);
 
             &:before {
                 content: "\f137";

package/resources/scss/src/component/Helix.scss

@@ -2,7 +2,7 @@
     background-color: #000;
     border          : 1px solid #3c3f41;
     display         : flex;
-    font-family     : #{neo(neo-font-family)};
+    font-family     : var(--neo-font-family);
     margin          : 0;
     overflow        : hidden;
     padding         : 0;

package/resources/scss/src/component/Process.scss

@@ -1,7 +1,7 @@
 .neo-process {
   display: flex;
   flex-wrap: wrap;
-  background-color: v(process-background-color);
+  background-color: var(--process-background-color);
   padding: 0.5rem;
 
   .process-step {
@@ -42,19 +42,19 @@
         margin-right: auto;
         width: 100%;
         text-align: center;
-        height: v(process-icon-size);
+        height: var(--process-icon-size);
         z-index: 10;
 
         &::before {
           // Do NOT switch to v()
           color: var(--process-icon-color);
-          font-size: v(process-icon-size);
+          font-size: var(--process-icon-size);
         }
       }
 
       .process-step-header {
         display: block;
-        color: v(process-title-color);
+        color: var(--process-title-color);
         word-break: break-word;
         text-align: center;
         text-transform: uppercase;
@@ -64,7 +64,7 @@
       .process-step-text {
         text-align: center;
         display: block;
-        color: v(process-text-color);
+        color: var(--process-text-color);
         font-size: 1em;
         font-weight: 400;
         line-height: 1.5;
@@ -77,7 +77,7 @@
 
     .process-step {
       .arrow.white {
-        border-left: 10px solid v(process-background-color);
+        border-left: 10px solid var(--process-background-color);
         border-top: 10px solid transparent;
         top: 50%;
         left: 0;
@@ -96,9 +96,9 @@
       }
 
       .slit {
-        box-shadow: inset 0 100px 50px -40px v(process-background-color),
-        inset 0 -100px 50px -40px v(process-background-color),
-        inset 5px 0 10px -5px v(process-shadow-color);
+        box-shadow: inset 0 100px 50px -40px var(--process-background-color),
+        inset 0 -100px 50px -40px var(--process-background-color),
+        inset 5px 0 10px -5px var(--process-shadow-color);
       }
 
       .process-content {
@@ -114,7 +114,7 @@
     .process-step {
       .arrow.white {
         border-left: 10px solid transparent;
-        border-top: 10px solid v(process-background-color);
+        border-top: 10px solid var(--process-background-color);
         top: 0;
         left: 50%;
         margin-left: -10px;
@@ -133,9 +133,9 @@
       }
 
       .slit {
-        box-shadow: inset 80px 0 50px -40px v(process-background-color),
-        inset -80px 0 50px -40px v(process-background-color),
-        inset 0 5px 10px -5px v(process-shadow-color);
+        box-shadow: inset 80px 0 50px -40px var(--process-background-color),
+        inset -80px 0 50px -40px var(--process-background-color),
+        inset 0 5px 10px -5px var(--process-shadow-color);
       }
 
       .process-content {
@@ -154,7 +154,7 @@
       .process-step {
         .arrow.white {
           border-left: 10px solid transparent;
-          border-top: 10px solid v(process-background-color);
+          border-top: 10px solid var(--process-background-color);
           top: 0;
           left: 50%;
           margin-left: -10px;
@@ -173,9 +173,9 @@
         }
 
         .slit {
-          box-shadow: inset 80px 0 50px -40px v(process-background-color),
-          inset -80px 0 50px -40px v(process-background-color),
-          inset 0 5px 10px -5px v(process-shadow-color);
+          box-shadow: inset 80px 0 50px -40px var(--process-background-color),
+          inset -80px 0 50px -40px var(--process-background-color),
+          inset 0 5px 10px -5px var(--process-shadow-color);
         }
 
         .process-content {

package/resources/scss/src/component/Progress.scss

@@ -1,3 +1,3 @@
 .neo-progress {
-    color: v(progress-label-color);
-}
+    color: var(--progress-label-color);
+}

package/resources/scss/src/component/Splitter.scss

@@ -1,11 +1,11 @@
 .neo-splitter {
-    background-color: v(splitter-background-color);
-    border          : v(splitter-border);
+    background-color: var(--splitter-background-color);
+    border          : var(--splitter-border);
     transition      : background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
 
     &:hover {
-        background-color: v(splitter-hover-color);
-        border-color    : v(splitter-hover-color);
+        background-color: var(--splitter-hover-color);
+        border-color    : var(--splitter-hover-color);
     }
 
     &.neo-horizontal {
@@ -23,7 +23,7 @@
 
 .neo-dragproxy {
     &.neo-splitter {
-        background-color: v(splitter-hover-color);
-        border-color    : v(splitter-hover-color);
+        background-color: var(--splitter-hover-color);
+        border-color    : var(--splitter-hover-color);
     }
 }

package/resources/scss/src/component/StatusBadge.scss

@@ -1,9 +1,49 @@
 .neo-status-badge {
+    display: flex;
+    padding: var(--status-badge-padding);
+    align-items: var(--status-badge-align-items);
+
+    &.neo-state-alert {
+        background-color: var(--status-badge-state-alert-background-color);
+        color: var(--status-badge-state-alert-text-color);
+    }
+
     &.neo-state-error {
-        background-color: red;
+        background-color: var(--status-badge-state-error-background-color);
+        color: var(--status-badge-state-error-text-color);
+    }
+
+    &.neo-state-info {
+        background-color: var(--status-badge-state-info-background-color);
+        color: var(--status-badge-state-info-text-color);
+    }
+
+    &.neo-state-neutral {
+        background-color: var(--status-badge-state-neutral-background-color);
+        color: var(--status-badge-state-neutral-text-color);
     }
 
     &.neo-state-success {
-        background-color: darkgreen;
+        background-color: var(--status-badge-state-success-background-color);
+        color: var(--status-badge-state-success-text-color);
+
+    }
+
+    .neo-state-glyph {
+        font-size: var(--status-badge-font-size);
+        pointer-events: none;
     }
+
+    .neo-state-text {
+        flex: 1 1 auto;
+        font-family: var(--status-badge-font-family);
+        font-size: var(--status-badge-font-size);
+        font-weight: var(--status-badge-font-weight);
+        line-height: var(--status-badge-line-height);
+        pointer-events: none;
+        text-align:  var(--status-badge-align-items);
+        text-transform: var(--status-badge-transform);
+    }
+
+
 }

package/resources/scss/src/component/Timer.scss

@@ -12,8 +12,8 @@
 
     .countdown {
         display: grid;
-        width: v(timer-dimension);
-        height: v(timer-dimension);
+        width: var(--timer-dimension);
+        height: var(--timer-dimension);
         container-type: size;
     }
 
@@ -36,7 +36,7 @@
             --k: calc(var(--neo-timer-current) / var(--neo-timer-full));
             transform: rotate(-90deg);
             stroke-linecap: round;
-            stroke: color-mix(in hsl shorter hue, v(timer-color-start) calc(var(--k) * 300%), v(timer-color-end));
+            stroke: color-mix(in hsl shorter hue, var(--timer-color-start) calc(var(--k) * 300%), var(--timer-color-end));
             stroke-dasharray: var(--k) 1
         }
     }
@@ -74,12 +74,12 @@
         /* Style the front side (fallback if image is missing) */
         .flip-card-front {
             & > input {
-                background-color: v(container-background-color);
-                color: v(container-color);
+                background-color: var(--container-background-color);
+                color: var(--container-color);
                 margin-top: 25%;
                 height:41%;
                 width: 100%;
-                font: calc(v(timer-dimension) * 0.25)/2 ubuntu mono, consolas, monaco, monospace;
+                font: calc(var(--timer-dimension) * 0.25)/2 ubuntu mono, consolas, monaco, monospace;
                 text-align: center;
                 border-width: 0 !important;
 
@@ -90,7 +90,7 @@
 
             & > button {
                 border: 0 none;
-                background-color: v(timer-button-color);
+                background-color: var(--timer-button-color);
                 height: 35%;
                 width: 100%;
                 font-size: 15cqh;
@@ -102,7 +102,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font: calc(v(timer-dimension)*.25)/ 2 ubuntu mono, consolas, monaco, monospace;
+            font: calc(var(--timer-dimension)*.25)/ 2 ubuntu mono, consolas, monaco, monospace;
             // initial transformation
             transform: rotateY(180deg);
         }
@@ -112,4 +112,4 @@
     &.turn .flip-card-inner {
         transform: rotateY(180deg);
     }
-}
+}

package/resources/scss/src/component/Toast.scss

@@ -1,10 +1,10 @@
 .neo-toast {
     z-index         : 20; // ensure to be on top of table headers
     align-items     : center;
-    background-color: v(toast-background-color);
+    background-color: var(--toast-background-color);
     border-radius   : 0.5rem;
-    box-shadow      : 0 0.25rem 0.5rem v(toast-shadow-color);
-    color           : v(toast-color);
+    box-shadow      : 0 0.25rem 0.5rem var(--toast-shadow-color);
+    color           : var(--toast-color);
     display         : flex;
     position        : fixed;
     transition      : bottom .3s ease-out, top .3s ease-out;
@@ -24,7 +24,7 @@
         }
 
         .neo-toast-icon {
-            border-right: 2px solid v(toast-color);
+            border-right: 2px solid var(--toast-color);
             flex        : 1;
             font-size   : 1.5em;
         }
@@ -57,15 +57,15 @@
 
 // ui: danger
 .neo-toast-danger {
-    background-color: v(toast-danger-background-color);
-    color: v(toast-danger-color);
+    background-color: var(--toast-danger-background-color);
+    color: var(--toast-danger-color);
 
     & > div {
 
         .neo-toast-inner {
 
             .neo-toast-icon {
-                border-right: 2px solid v(toast-danger-color);
+                border-right: 2px solid var(--toast-danger-color);
             }
         }
     }
@@ -73,15 +73,15 @@
 
 // ui: success
 .neo-toast-success {
-    background-color: v(toast-success-background-color);
-    color: v(toast-success-color);
+    background-color: var(--toast-success-background-color);
+    color: var(--toast-success-color);
 
     & > div {
 
         .neo-toast-inner {
 
             .neo-toast-icon {
-                border-right: 2px solid v(toast-success-color);
+                border-right: 2px solid var(--toast-success-color);
             }
         }
     }

package/resources/scss/src/component/Video.scss

@@ -13,12 +13,12 @@
 
     height: 100%;
     width: 100%;
-    background-color: v(video-ghost-color);
+    background-color: var(--video-ghost-color);
 
     .fa-solid {
-      height: v(video-ghost-size);
-      width: v(video-ghost-size);
-      font-size: v(video-ghost-size);
+      height: var(--video-ghost-size);
+      width: var(--video-ghost-size);
+      font-size: var(--video-ghost-size);
       cursor: pointer;
     }
   }
@@ -28,4 +28,4 @@
     width: 100%;
     background: black;
   }
-}
+}

package/resources/scss/src/container/Accordion.scss

@@ -7,11 +7,11 @@
   }
 
   .neo-accordion-title {
-    background-color: v(accordion-title-bg-color);
+    background-color: var(--accordion-title-bg-color);
     margin-bottom: 15px;
     padding: 5px;
-    border-radius: v(accordion-item-radius);
-    color: v(accordion-title-color);
+    border-radius: var(--accordion-item-radius);
+    color: var(--accordion-title-color);
 
     label {
       text-transform: uppercase;

package/resources/scss/src/container/AccordionItem.scss

@@ -1,11 +1,11 @@
 .neo-accordion-item {
-  box-shadow: v(accordion-item-shadow);
-  background-color: v(accordion-item-bg-color);
-  border: 1px solid v(accordion-item-border-color);
-  border-radius: v(accordion-item-radius);
+  box-shadow: var(--accordion-item-shadow);
+  background-color: var(--accordion-item-bg-color);
+  border: 1px solid var(--accordion-item-border-color);
+  border-radius: var(--accordion-item-radius);
 
   transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
-  max-height: v(accordion-item-header-height);
+  max-height: var(--accordion-item-header-height);
 
   overflow: hidden;
 
@@ -22,7 +22,7 @@
     transition: max-height 1s ease-in-out;
 
     .neo-toolbar {
-      border-bottom-color: v(accordion-item-border-color);
+      border-bottom-color: var(--accordion-item-border-color);
 
       .neo-accordion-header-arrow::before {
         transform: rotate(0deg);
@@ -37,8 +37,8 @@
   }
 
   .neo-toolbar {
-    max-height: v(accordion-item-header-height);
-    min-height: v(accordion-item-header-height);
+    max-height: var(--accordion-item-header-height);
+    min-height: var(--accordion-item-header-height);
     border-bottom: 1px solid transparent;
 
     .neo-accordion-header-icon {
@@ -57,11 +57,11 @@
     }
 
     .neo-accordion-header-arrow {
-      background-color: v(accordion-item-arrow-bg-color);
+      background-color: var(--accordion-item-arrow-bg-color);
       height: 30px;
       width: 30px;
-      border-radius: v(accordion-item-radius);
-      box-shadow: v(accordion-item-arrow-shadow);
+      border-radius: var(--accordion-item-radius);
+      box-shadow: var(--accordion-item-arrow-shadow);
       padding: 7px;
       text-align: center;
 
@@ -75,9 +75,9 @@
   }
 
   .neo-accordion-content {
-    background-color: v(accordion-item-content-bg-color);
-    border-bottom-left-radius: v(accordion-item-radius);
-    border-bottom-right-radius: v(accordion-item-radius);
+    background-color: var(--accordion-item-content-bg-color);
+    border-bottom-left-radius: var(--accordion-item-radius);
+    border-bottom-right-radius: var(--accordion-item-radius);
     padding: 15px;
   }
-}
+}

package/resources/scss/src/container/Base.scss

@@ -1,5 +1,5 @@
 .neo-container {
-    background-color: v(container-background-color);
-    color           : v(container-color);
+    background-color: var(--container-background-color);
+    color           : var(--container-color);
     overflow        : hidden;
-}
+}

package/resources/scss/src/container/Panel.scss

@@ -1,13 +1,13 @@
 .neo-panel {
-    border: 1px solid v(panel-border-color);
+    border: 1px solid var(--panel-border-color);
 
     .neo-panel-header-text {
-        color      : v(panel-header-text-color);
+        color      : var(--panel-header-text-color);
         font-size  : 16px;
         font-weight: 600;
     }
 
     .neo-panel-header-toolbar {
-        border: 1px solid v(panel-header-border-color);
+        border: 1px solid var(--panel-header-border-color);
     }
-}
+}

package/resources/scss/src/container/Viewport.scss

@@ -4,5 +4,5 @@ body > .neo-viewport {
 }
 
 .neo-viewport {
-    background-color: v(viewport-background-color);
-}
+    background-color: var(--viewport-background-color);
+}