@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/styles/components/AssetTree.less

@@ -1,5 +1,7 @@
-@asset-tree-shadow-color: rgba(0, 0, 0, 0.1);
+@asset-tree-shadow-color: .hsla(@always-color-black-hsl, 0.1)[@result];
 @asset-tree-collapsed-width: 50px;
+@asset-tree-sidebar-bg: @always-color-black;
+@asset-tree-sidebar-icon-color: @always-color-white;
 
 // font-weight hotfix old tree
 .ObjectTree {
@@ -9,7 +11,7 @@
 .AssetTree {
   position: relative;
   height: 100%;
-  background-color: @color-white;
+  background-color: var(--color-white);
 
   &Content {
     display: flex;
@@ -17,7 +19,7 @@
   }
 
   .TreeSidebar {
-    background: @color-black;
+    background: @asset-tree-sidebar-bg;
     display: flex;
     flex-direction: column;
     min-width: @asset-tree-collapsed-width;
@@ -31,7 +33,7 @@
     width: @asset-tree-collapsed-width;
 
     .rioglyph {
-      color: @color-white;
+      color: @asset-tree-sidebar-icon-color;
       font-size: 18px;
       height: @asset-tree-collapsed-width;
       line-height: @asset-tree-collapsed-width;
@@ -70,7 +72,7 @@
 
     li {
       align-items: center;
-      color: @color-white;
+      color: @asset-tree-sidebar-icon-color;
       cursor: pointer;
       display: flex;
       font-size: 30px;
@@ -93,7 +95,7 @@
       }
 
       &.active {
-        color: @color-white;
+        color: @asset-tree-sidebar-icon-color;
 
         &:before, &:after {
           border-color: transparent;
@@ -109,12 +111,12 @@
         }
 
         &:before {
-          border-right-color: @color-black;
+          border-right-color: @asset-tree-sidebar-bg;
           right: 1px;
         }
 
         &:after {
-          border-right-color: @color-white;
+          border-right-color: var(--color-white);
           right: 0;
         }
 
@@ -125,9 +127,9 @@
 
       &.selected {
         .selection-bubble:after {
-          background: @brand-primary;
+          background: var(--brand-primary);
           border-radius: @border-radius-round;
-          border: 2px solid @color-black;
+          border: 2px solid var(--color-black);
           content: '';
           height: 14px;
           position: absolute;
@@ -144,7 +146,7 @@
     position: absolute;
     height: 100%;
     width: 0;
-    border: 1px dashed @gray-darkest;
+    border: 1px dashed var(--gray-darkest);
     opacity: 0.2;
     pointer-events: none;
   }
@@ -153,12 +155,12 @@
     .ApplicationLayoutSidebar:not(.right) & {
       float: left;
       left: 0;
-      box-shadow: 1px 0 0 0 @gray-light;
+      box-shadow: 1px 0 0 0 var(--gray-light);
     }
 
     .ApplicationLayoutSidebar.right & {
       float: right;
-      box-shadow: -1px 0 0 0 @gray-light;
+      box-shadow: -1px 0 0 0 var(--gray-light);
     }
   }
 
@@ -179,25 +181,25 @@
 
   html:not(.ua-desktop) & {
     .TreeSidebar {
-      background: @gray-lightest;
-      box-shadow: inset -1px 0 @gray-light;
+      background: var(--gray-lightest);
+      box-shadow: inset -1px 0 var(--gray-light);
     }
 
     &.closed {
       .TreeSidebar {
-        background: @color-white;
+        background: var(--color-white);
       }
     }
 
     .TreeSidebarToggle {
       .rioglyph {
-        color: @color-black;
+        color: var(--color-black);
       }
     }
 
     .TreeSidebarNavigation {
       li {
-        color: @color-black;
+        color: var(--color-black);
 
         .rioglyph {
           opacity: 0.5;
@@ -205,11 +207,11 @@
 
         &.active {
           &:before {
-            border-right-color: @gray-light;
+            border-right-color: var(--gray-light);
           }
 
           &:after {
-            border-right-color: @color-white;
+            border-right-color: var(--color-white);
           }
 
           .rioglyph {
@@ -219,7 +221,7 @@
 
         &.selected {
           .selection-bubble:after {
-            border: 2px solid @gray-lightest;
+            border: 2px solid var(--gray-lightest);
           }
         }
       }
@@ -229,11 +231,11 @@
 
 // TREE
 .TreeHeader {
-  background: @color-white;
+  background: var(--color-white);
   position: sticky;
   top: 0;
   z-index: 1;
-  border-bottom: 1px solid @gray-light;
+  border-bottom: 1px solid var(--gray-light);
 
   .TreeHead {
     min-height: 50px;
@@ -304,13 +306,13 @@
 
     .TreeNode,
     .TreeLeaf {
-      background: @color-white;
-      border-bottom: 1px solid @gray-lighter;
+      background: var(--color-white);
+      border-bottom: 1px solid var(--gray-lighter);
       display: flex;
       padding: 0 10px 0 15px;
 
       &:hover {
-        background-color: @gray-lightest;
+        background-color: var(--gray-lightest);
       }
 
       &.active {
@@ -365,7 +367,7 @@
 
             .TreeLabelNameTextSubline {
               font-size: 12px;
-              color: @gray;
+              color: var(--gray);
             }
           }
 
@@ -384,7 +386,7 @@
         }
 
         .TreeLabelExpander {
-          color: @gray-dark;
+          color: var(--gray-dark);
           position: absolute;
           right: 5px;
           top: 50%;

package/styles/components/AutoSuggest.less

@@ -11,8 +11,8 @@
     overflow-y: auto;
 
     > .active {
-      color: @color-white;
-      background-color: @brand-primary;
+      color: var(--color-white);
+      background-color: var(--brand-primary);
     }
 
     > li > a {

package/styles/components/BottomSheet.less

@@ -9,6 +9,5 @@
     position: absolute;
     inset: 0;
     z-index: @z-index-bottom-sheet - 1;
-    background: #000000;
-    opacity: 50%;
+    background: .hsla(@always-color-black-hsl, 0.5)[@result];
 }

package/styles/components/Carousel.less

@@ -77,7 +77,7 @@
 .carousel-control-prev {
   align-items: center;
   bottom: 0;
-  color: @color-white;
+  color: var(--color-white);
   display: flex;
   justify-content: center;
   opacity: .5;
@@ -98,7 +98,7 @@
 .carousel-control-prev {
   &:focus,
   &:hover {
-    color: @color-white;
+    color: var(--color-white);
     opacity: .9;
     outline: 0;
     text-decoration: none !important;
@@ -121,7 +121,7 @@
 .carousel-control-next-icon {
   align-items: center;
   border-radius: @border-radius-round;
-  color: @gray-dark;
+  color: var(--gray-dark);
   display: flex;
   height: 60px;
   justify-content: center;
@@ -134,7 +134,7 @@
   }
 
   &:hover {
-    background: fade(@gray-darkest, 10%);
+    background: .hsla(@gray-darkest-hsl, 0.1)[@result];
   }
 }
 
@@ -161,9 +161,9 @@
   z-index: 15;
 
   li {
-    background: @color-white;
+    background: var(--color-white);
     border-radius: @border-radius-sm;
-    border: 1px solid @brand-primary;
+    border: 1px solid var(--brand-primary);
     display: inline-block;
     height: 10px;
     margin: 0 2px;
@@ -175,7 +175,7 @@
     }
 
     &.active {
-      background: @brand-primary;
+      background: var(--brand-primary);
     }
 
     @media (prefers-reduced-motion:reduce) {
@@ -185,14 +185,18 @@
 }
 
 .carousel-caption {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
   bottom: 0;
-  color: @gray-darkest;
+  color: var(--gray-darkest);
   left: 0;
   padding: 20px 20px 10px 20px;
   position: absolute;
   right: 0;
   text-align: center;
+  background: linear-gradient(
+    0deg,
+    .hsla(@color-white-hsl, 0.8)[@result],
+    .hsla(@color-white-hsl, 0)[@result],
+  );
 }
 
 .carousel {

package/styles/components/Checkbox.less

@@ -1,9 +1,8 @@
 @dim-checkbox-size-default: 16px;
 @dim-checkbox-size-lg: 20px;
-@color-disabled-inverted: darken(@gray-darker, 20%);
 
 .checkbox {
-  color: @gray-darkest;
+  color: var(--gray-darkest);
   cursor: pointer;
   font-size: @font-size-default;
   margin-bottom: 0;
@@ -33,7 +32,7 @@
 
     // use tag name for being stronger than the checked style and to avoid using important
     input[type='checkbox'] + .checkbox-text:before {
-      border-color: @gray-darker;
+      border-color: var(--gray-darker);
     }
   }
 
@@ -73,7 +72,7 @@
         -webkit-font-smoothing: antialiased;
         background-color: transparent;
         border-radius: @border-radius-sm;
-        border: 1px solid @gray;
+        border: 1px solid var(--gray);
         display: block;
         font-family: @icon-font-name;
         font-style: normal;
@@ -120,12 +119,12 @@
       }
 
       .rioglyph {
-        color: @gray;
+        color: var(--gray);
         display: block;
       }
 
       .checkbox-label {
-        color: @gray-darkest;
+        color: var(--gray-darkest);
       }
     }
 
@@ -140,9 +139,9 @@
           align-items: center;
           justify-content: center;
           font-size: 88%;
-          color: @color-white;
-          border-color: @brand-primary;
-          background-color: @brand-primary;
+          color: var(--color-white);
+          border-color: var(--brand-primary);
+          background-color: var(--brand-primary);
           animation: checkbox-tick 100ms ease-in;
         }
       }
@@ -150,7 +149,7 @@
       + .checkbox-icon {
         .rioglyph {
           animation: checkbox-tick 100ms ease-in;
-          color: @brand-primary;
+          color: var(--brand-primary);
         }
       }
     }
@@ -161,13 +160,13 @@
 
     // Define style for 'diabled' state
     &:disabled + .checkbox-text {
-      //color: @gray-light;
+      //color: var(--gray-light);
       opacity: 0.5;
       cursor: not-allowed;
 
       &:before {
-        border-color: @gray-light;
-        background-color: @gray-light;
+        border-color: var(--gray-light);
+        background-color: var(--gray-light);
       }
     }
 
@@ -176,9 +175,9 @@
     &:indeterminate + .checkbox-text:before {
       .rioglyph();
       content: @rioglyph-minus-light;
-      color: @brand-primary;
-      border-color: @brand-primary;
-      background-color: @color-white;
+      color: var(--brand-primary);
+      border-color: var(--brand-primary);
+      background-color: var(--color-white);
     }
 
     // Define colors for error case

package/styles/components/ClearableInput.less

@@ -89,10 +89,10 @@
 // The inputClearButton class is used for multiple inputs such as clearableInput, DateRangePicker...
 .inputClearButton {
   align-items: center;
-  background: @color-white;
+  background: var(--color-white);
   border-radius: @border-radius-default;
   bottom: 2px;
-  color: @gray;
+  color: var(--gray);
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
@@ -112,7 +112,7 @@
   }
 
   &:hover {
-    color: darken(@gray, 20%);
+    color: .hslb(@gray-hsl, '-', '20%')[@result];
   }
 
   > .clearButtonIcon {

package/styles/components/Counter.less

@@ -87,16 +87,16 @@
   &.color-gray {
     > * {
       &:before {
-        color: @gray;
-        border-color: @gray;
+        color: var(--gray);
+        border-color: var(--gray);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @gray;
+          background-color: var(--gray);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -106,16 +106,16 @@
   &.color-primary {
     > * {
       &:before {
-        color: @brand-primary;
-        border-color: @brand-primary;
+        color: var(--brand-primary);
+        border-color: var(--brand-primary);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @brand-primary;
+          background-color: var(--brand-primary);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -125,16 +125,16 @@
   &.color-secondary {
     > * {
       &:before {
-        color: @brand-secondary;
-        border-color: @brand-secondary;
+        color: var(--brand-secondary);
+        border-color: var(--brand-secondary);
       }
     }
     &.filled {
       > * {
         &:before {
-          background-color: @brand-secondary;
+          background-color: var(--brand-secondary);
           border: none;
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }

package/styles/components/DataTabs.less

@@ -29,7 +29,7 @@
 }
 
 .DataTabsWrapper {
-  background: @color-white;
+  background: var(--color-white);
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 8px;
@@ -69,7 +69,7 @@
     }
 
     .arrow {
-      background-color: @color-highlight-dark;
+      background-color: var(--color-highlight-dark);
       bottom: 0;
       display: block;
       height: @dim-dataTabs-arrow;

package/styles/components/DatePicker.less

@@ -8,9 +8,9 @@
 
 .rdtPicker {
   &:extend(.shadow-smooth-to-bottom);
-  background: @color-white;
+  background: var(--color-white);
   border-radius: @border-radius-default;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   display: none;
   margin-top: 1px;
   padding: 8px;
@@ -51,7 +51,7 @@
 
       &.rdtNew,
       &.rdtOld {
-        color: @gray-light;
+        color: var(--gray-light);
       }
 
       //.rdtTimeToggle:hover,
@@ -59,7 +59,7 @@
       &.rdtHour:hover,
       &.rdtMinute:hover,
       &.rdtSecond:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
         cursor: pointer;
       }
 
@@ -71,7 +71,7 @@
 
         &:hover,
         &:hover {
-          background: @color-highlight-lightest;
+          background: var(--color-highlight-lightest);
         }
       }
 
@@ -79,9 +79,9 @@
         position: relative;
 
         &:before {
-          border-bottom: 7px solid @color-highlight;
+          border-bottom: 7px solid var(--color-highlight);
           border-left: 7px solid transparent;
-          border-top-color: rgba(0, 0, 0, 0.2);
+          border-top-color: .hsla(@always-color-black-hsl, 0.2)[@result];
           bottom: 4px;
           content: '';
           display: inline-block;
@@ -92,38 +92,38 @@
 
       &.rdtActive,
       &.rdtActive:hover {
-        background-color: @color-highlight;
-        color: @color-white;
-        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+        background-color: var(--color-highlight);
+        color: var(--color-white);
+        text-shadow: 0 -1px 0 .hsla(@always-color-black-hsl, 0.25)[@result];
       }
 
       &.rdtActive.rdtToday:before {
-        border-bottom-color: @color-white;
+        border-bottom-color: var(--color-white);
       }
 
       &.rdtDisabled,
       &.rdtDisabled:hover {
         background: none !important;
-        color: @gray-light;
+        color: var(--gray-light);
         cursor: not-allowed;
       }
 
       span {
         &.rdtOld {
-          color: @color-highlight-light;
+          color: var(--color-highlight)-light;
         }
 
         &.rdtDisabled,
         &.rdtDisabled:hover {
           background: none !important;
-          color: @gray-light;
+          color: var(--gray-light);
           cursor: not-allowed;
         }
       }
     }
 
     th {
-      // border-bottom: 1px solid @gray-light;
+      // border-bottom: 1px solid var(--gray-light);
       border-radius: @border-radius-default;
 
       .rdtSwitch {
@@ -139,7 +139,7 @@
       &.rdtDisabled,
       &.rdtDisabled:hover {
         background: none !important;
-        color: @gray-lightest;
+        color: var(--gray-lightest);
         cursor: not-allowed;
       }
     }
@@ -159,14 +159,14 @@
         cursor: pointer;
 
         &:hover {
-          background: @color-highlight-lightest;
+          background: var(--color-highlight-lightest);
         }
       }
     }
 
     tfoot {
-      // border-top: 1px solid @gray-light;
-      background-color: @gray-lightest;
+      // border-top: 1px solid var(--gray-light);
+      background-color: var(--gray-lightest);
     }
 
     button {
@@ -175,7 +175,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: @color-highlight-lightest;
+        background-color: var(--color-highlight-lightest);
       }
     }
   }
@@ -183,10 +183,10 @@
   .rdtTime {
     .rdtSwitch {
       position: relative;
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
 
       &:hover {
-        background-color: @color-highlight-lightest;
+        background-color: var(--color-highlight-lightest);
       }
 
       &::before {
@@ -196,7 +196,7 @@
         position: absolute;
         height: 25px;
         width: 25px;
-        color: @gray-darker;
+        color: var(--gray-darker);
         left: 5px;
         top: 3px;
       }
@@ -233,7 +233,7 @@
       border-radius: @border-radius-default;
 
       &:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
       }
     }
 
@@ -277,7 +277,7 @@
   //   align-items: center;
   //   font-size: 110%;
   //   height: 100%;
-  //   color: @gray-dark;
+  //   color: var(--gray-dark);
   //   padding: 0 5px;
   // }
 
@@ -313,13 +313,13 @@
     td.rdtMinute,
     td.rdtSecond {
       &:hover {
-        background: @color-highlight-lightest;
+        background: var(--color-highlight-lightest);
       }
     }
 
     td.rdtActive,
     td.rdtActive:hover {
-      background: @brand-primary;
+      background: var(--brand-primary);
     }
   }