@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.3

package/lib/es/styles/design/pagination.less

@@ -1,7 +1,7 @@
 // Pagination
-@pagination-color: @gray-dark;
-@pagination-active-bg: @gray-lighter;
-@pagination-active-color: @gray-dark;
+@pagination-color: var(--gray-dark);
+@pagination-active-bg: var(--gray-lighter);
+@pagination-active-color: var(--gray-dark);
 
 .pagination {
   .reset-list();
@@ -60,16 +60,16 @@
     }
 
     &:empty {
-      background: @color-highlight-decent;
+      background: var(--color-highlight-decent);
       border-radius: @border-radius-sm;
-      border: 1px solid @color-highlight;
+      border: 1px solid var(--color-highlight);
       height: 10px;
       margin: 0 5px;
       width: 20px;
 
       &.active,
       &:hover {
-        background: @color-highlight;
+        background: var(--color-highlight);
       }
     }
 
@@ -96,9 +96,9 @@
 }
 
 // Pager
-@pager-border: @gray-light;
-@pager-hover-bg: @gray-lighter;
-@pager-active-bg: @gray;
+@pager-border: var(--gray-light);
+@pager-hover-bg: var(--gray-lighter);
+@pager-active-bg: var(--gray);
 @pager-active-color: @pagination-active-color;
 
 .pager {
@@ -153,7 +153,7 @@
       &,
       &:hover,
       &:focus {
-        color: @gray-light;
+        color: var(--gray-light);
         cursor: not-allowed;
       }
     }

package/lib/es/styles/design/panels.less

@@ -2,7 +2,7 @@
 @panel-y-padding: 10px;
 
 .panel {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
   border: 1px solid transparent;
   margin-bottom: @grid-gutter-height;
@@ -13,15 +13,15 @@
 
   &.panel-default {
     &.active {
-      background-color: @color-highlight-decent;
-      border: 1px solid @brand-primary;
-      box-shadow: inset 0 0 0 1px @brand-primary;
+      background-color: var(--color-highlight-decent);
+      border: 1px solid var(--brand-primary);
+      box-shadow: inset 0 0 0 1px var(--brand-primary);
 
       .panel-heading,
       .panel-footer {
-        background-color: @color-highlight-decent;
-        border-color: @brand-primary;
-        box-shadow: inset 0 0 0 1px @brand-primary;
+        background-color: var(--color-highlight-decent);
+        border-color: var(--brand-primary);
+        box-shadow: inset 0 0 0 1px var(--brand-primary);
       }
     }
   }
@@ -66,7 +66,7 @@
   }
 
   // default
-  .panel-variant(@color-white, @gray-light, @gray-darkest);
+  .panel-variant(var(--color-white), var(--gray-light), var(--gray-darkest));
 
   // primary
   // secondary
@@ -76,7 +76,7 @@
   // danger
   each(@colors-brand-and-status-map, {
     &.panel-@{key} {
-      .panel-variant(@value, @value, @color-white);
+      .panel-variant(@value, @value, var(--color-white));
     }
   })
 }
@@ -86,7 +86,7 @@
   padding: @panel-x-padding;
 
   ~ .table {
-    border-top: 1px solid @gray-light;
+    border-top: 1px solid var(--gray-light);
     margin-bottom: 0
   }
 

package/lib/es/styles/design/popovers.less

@@ -1,6 +1,6 @@
 @popover-max-width: 550px;
-@popover-color: @color-white;
-@popover-arrow-color: @color-white;
+@popover-color: var(--color-white);
+@popover-arrow-color: var(--color-white);
 @popover-arrow-width: 12px;
 @popover-arrow-outer-width: 11px;
 
@@ -9,14 +9,14 @@
   background-clip: padding-box;
   background-color: @popover-color;
   border-radius: @border-radius-lg;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   max-width: @popover-max-width;
   padding: 0;
   position: absolute;
   z-index: @zindex-popover;
 
   .popover-title {
-    border-bottom: 1px solid @gray-light;
+    border-bottom: 1px solid var(--gray-light);
     padding: 13px 14px;
     font-weight: normal;
   }
@@ -53,7 +53,7 @@
     > .arrow {
       left: 50%;
       border-bottom-width: 0;
-      border-top-color: @gray-light;
+      border-top-color: var(--gray-light);
       bottom: -(@popover-arrow-outer-width);
 
       &:after {
@@ -71,7 +71,7 @@
       top: 50%;
       left: -(@popover-arrow-outer-width);
       border-left-width: 0;
-      border-right-color: @gray-light;
+      border-right-color: var(--gray-light);
 
       &:after {
         content: "";
@@ -87,7 +87,7 @@
     > .arrow {
       left: 50%;
       border-top-width: 0;
-      border-bottom-color: @gray-light;
+      border-bottom-color: var(--gray-light);
       top: -(@popover-arrow-outer-width);
 
       &:after {
@@ -105,7 +105,7 @@
       top: 50%;
       right: -(@popover-arrow-outer-width);
       border-right-width: 0;
-      border-left-color: @gray-light;
+      border-left-color: var(--gray-light);
 
       &:after {
         content: "";

package/lib/es/styles/design/progress-bars.less

@@ -1,11 +1,11 @@
 .progress-divider {
   &:not(:last-child) {
-    box-shadow: inset -2px 0 0 @color-white;
+    box-shadow: inset -2px 0 0 var(--color-white);
   }
 
   &:only-child {
     &:not([style*="width: 100%"]):not([style*="width: 99%"]):not([style*="width: 98%"]) {
-      box-shadow: inset -2px 0 0 @color-white;
+      box-shadow: inset -2px 0 0 var(--color-white);
     }
   }
 }
@@ -18,13 +18,13 @@
 .progress {
   height: 10px;
   overflow: hidden;
-  background-color: @gray-lighter;
+  background-color: var(--gray-lighter);
   border-radius: @border-radius-default;
   // margin-bottom: @grid-gutter-height;
 
   .progress-bar {
-    background-color: @brand-primary;
-    color: @color-white;
+    background-color: var(--brand-primary);
+    color: var(--color-white);
     float: left;
     font-size: @font-size-sm;
     height: 100%;
@@ -44,11 +44,11 @@
     // muted
     // white
     &.progress-bar-muted {
-      background-color: @gray-lighter !important
+      background-color: var(--gray-lighter) !important
     }
 
     &.progress-bar-white {
-      background-color: @color-white !important
+      background-color: var(--color-white) !important
     }
 
     // info
@@ -118,7 +118,7 @@
 
 .progress-striped .progress-bar, // backward compatibility
 .progress-bar-striped {
-  @color: rgba(255,255,255,.15);
+  @color: .hsla(@color-white-hsl, 0.15)[@result];
   @angle: 45deg;
   background-size: 40px 40px;
   background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);

package/lib/es/styles/design/shadows.less

@@ -1,19 +1,26 @@
-@smooth-shadow: rgba(0,0,0,.01);
-@hard-shadow: rgba(0,0,0,.03);
+@smooth-shadow: .hsla(@always-color-black-hsl, 0.01)[@result];
+@hard-shadow: .hsla(@always-color-black-hsl, 0.03)[@result];
+
+@default-shadow-layer-1: 0 2px 1px -1px .hsla(@always-color-black-hsl, 0.1)[@result];
+@default-shadow-layer-2: 0 1px 5px 0 .hsla(@always-color-black-hsl, 0.05)[@result];
+@default-shadow-layer-3: 0 1px 10px 0 .hsla(@always-color-black-hsl, 0.05)[@result];
+
+@default-accent-layer-1: 0 0 1px 0 .hsla(@always-color-black-hsl, 0.2)[@result];
+@default-accent-layer-2: 0 2px 4px -1px .hsla(@always-color-black-hsl, 0.2)[@result];
 
 .shadow-none { box-shadow: none !important }
 
 .shadow-default {
   box-shadow:
-    0 2px 1px -1px rgba(196, 206, 214, 0.33),
-    0 1px 1px 0 rgba(181, 191, 199, 0.1),
-    0 1px 4px 0 rgba(119, 142, 160, 0.25) !important;
+  @default-shadow-layer-1,
+  @default-shadow-layer-2,
+  @default-shadow-layer-3 !important;
 }
 
 .shadow-accent {
   box-shadow:
-    0 0 1px 0 rgb(9 30 65 / 30%),
-    0 2px 4px -1px rgb(9 30 65 / 25%) !important;
+  @default-accent-layer-1,
+  @default-accent-layer-2 !important;
 }
 
 .shadow-smooth {

package/lib/es/styles/design/tables.less

@@ -1,10 +1,5 @@
 @table-cell-padding: 12px;
 @table-condensed-cell-padding: 7px;
-@table-bg: @color-white;
-@table-bg-hover: @gray-light;
-@table-bg-active: @gray-light;
-@table-bg-highlight: @color-highlight-lightest;
-@table-border-color: @gray-lighter;
 
 .table {
   background-color: transparent;
@@ -33,7 +28,7 @@
 
     @media screen and (max-width: @screen-ls) {
       -ms-overflow-style: -ms-autohiding-scrollbar;
-      border: 1px solid @table-border-color;
+      border: 1px solid var(--gray-lighter);
       overflow-y: hidden;
       width: 100%;
 
@@ -96,7 +91,7 @@
   // .table.table-head-filled
   &.table-head-filled {
     thead > tr th {
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
 
       &.table-checkbox {
         z-index: 2;
@@ -143,24 +138,24 @@
         &:first-child {
           left: 0;
           z-index: 2;
-          border-right: 4px solid @table-border-color;
+          border-right: 4px solid var(--gray-lighter);
         }
 
         &:last-child {
           right: 0;
           z-index: 2;
-          border-left: 4px solid @table-border-color;
+          border-left: 4px solid var(--gray-lighter);
         }
       }
 
       tbody > tr {
         td {
           &:first-child {
-            background-color: @color-white;
+            background-color: var(--color-white);
             left: 0;
             position: sticky;
             //z-index: 2;
-            border-right: 4px solid @table-border-color;
+            border-right: 4px solid var(--gray-lighter);
           }
         }
       }
@@ -177,11 +172,11 @@
       tbody > tr {
         td {
           &:last-child {
-            background-color: @color-white;
+            background-color: var(--color-white);
             right: 0;
             position: sticky;
             //z-index: 2;
-            border-left: 4px solid @table-border-color;
+            border-left: 4px solid var(--gray-lighter);
           }
         }
       }
@@ -262,8 +257,8 @@
       background-color: transparent;
 
       > th {
-        border-bottom: 2px solid @table-border-color;
-        border-top: 1px solid @table-border-color;
+        border-bottom: 2px solid var(--gray-lighter);
+        border-top: 1px solid var(--gray-lighter);
         font-weight: @font-light;
         text-align: left;
         white-space: nowrap;
@@ -297,7 +292,7 @@
   }
 
   > tbody > tr {
-    background-color: @table-bg;
+    background-color: var(--color-white);
     .table-state(info, @brand-info, false);
     .table-state(warning, @brand-warning, false);
     .table-state(success, @brand-success, false);
@@ -311,11 +306,11 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid @table-border-color;
+      border-bottom: 1px solid var(--gray-lighter);
     }
 
     td {
-      border-top: 1px solid @table-border-color;
+      border-top: 1px solid var(--gray-lighter);
       vertical-align: middle;
 
       &:focus,
@@ -357,7 +352,7 @@
 
     &.active {
       td {
-        .table-state(active, @brand-primary, false)
+        .table-state(active, var(--brand-primary), false)
       }
     }
 
@@ -380,11 +375,11 @@
     > thead > tr > th,
     > tbody > tr > td {
       border: none;
-      border-top: 4px solid @table-border-color;
+      border-top: 4px solid var(--gray-lighter);
     }
 
     > tbody > tr:last-child {
-      border-bottom: 4px solid @table-border-color;
+      border-bottom: 4px solid var(--gray-lighter);
     }
 
     > tbody > tr > td {
@@ -395,7 +390,7 @@
   // Zebra-striping
   &.table-striped {
     > tbody > tr:nth-of-type(odd) {
-      background-color: darken(@table-bg, 2%);
+      background-color: .hslb(@color-white-hsl, '-', '2%')[@result];
     }
   }
 
@@ -408,15 +403,15 @@
       .table-state(danger, @brand-danger, true);
 
       &:hover {
-        background-color: @table-bg;
+        background-color: var(--color-white);
 
         td:not([class*='bg-']) {
-          box-shadow: inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }
       &.active:hover {
         td {
-          .table-state(active, @brand-primary, false)
+          .table-state(active, var(--brand-primary), false)
         }
       }
     }
@@ -432,7 +427,7 @@
       &.table-multi-cards {
         tbody {
           tr {
-            border: 3px solid @gray-lighter;
+            border: 3px solid var(--gray-lighter);
           }
         }
       }
@@ -466,73 +461,40 @@
             text-align: left;
 
             .dropdown {
-              &:not(.open) {
-                .dropdown-toggle {
-                  padding: 0 6px;
-                  .button-variant(
-                    ~'!important';
-                    @btn-default-bg;
-                    @btn-default-border;
-                    @btn-default-color;
-                    @btn-default-color;
-                    @btn-default-color;
-                    @btn-default-color;
-                    darken(@btn-default-color, 17%);
-                    darken(@btn-default-border, 12%);
-                    darken(@btn-default-border, 12%);
-                    darken(@btn-default-border, 25%);
-                    darken(@btn-default-border, 25%);
-                    @btn-default-bg;
-                    @btn-default-bg;
-                    @btn-default-bg;
-                    @btn-default-bg;
-                  );
-
-                  &:focus,
-                  &:active {
-                    background-color: @color-white !important;
-                    border-color: @color-highlight !important;
-
-                    &:hover {
-                      .rioglyph {
-                        color: @color-highlight !important;
-                      }
-                    }
-                  }
+              .dropdown-toggle {
+                padding: 0 6px;
+
+                .button-style(
+                  ~'!important';
+                  var(--brand-primary);
+                  @color-white-hsl;
+                  @brand-primary-hsl;
+
+                  var(--brand-primary);
+                  .hslb(@brand-primary-hsl, '-', @btn-active-brightness)[@result];
+
+                  var(--brand-primary);
+                  .hslb(@brand-primary-hsl, '-', @btn-active-border-brightness)[@result];
+
+                  var(--color-white);
+                  var(--color-white);
+                );
+
+                &:focus,
+                &:active {
+                  background-color: var(--color-white) !important;
+                  border-color: var(--color-highlight) !important;
 
                   &:hover {
                     .rioglyph {
-                      color: @color-white !important;
+                      color: var(--color-highlight) !important;
                     }
                   }
                 }
-              }
 
-              &.open {
-                .dropdown-toggle {
-                  .button-variant(
-                    ~'!important';
-                    @btn-default-bg;
-                    @btn-default-border;
-                    @btn-default-color;
-                    @btn-default-color;
-                    @btn-default-color;
-                    @btn-default-color;
-                    darken(@btn-default-color, 17%);
-                    darken(@btn-default-border, 12%);
-                    darken(@btn-default-border, 12%);
-                    darken(@btn-default-border, 25%);
-                    darken(@btn-default-border, 25%);
-                    @btn-default-bg;
-                    @btn-default-bg;
-                    @btn-default-bg;
-                    @btn-default-bg;
-                  );
-
-                  &:hover, &:active, &:focus {
-                    .rioglyph:before {
-                      color: @color-white !important;
-                    }
+                &:hover {
+                  .rioglyph {
+                    color: var(--color-white) !important;
                   }
                 }
               }
@@ -549,7 +511,7 @@
         margin: -(@cardsSpace * 0.5) - (@cardsSpace * 0.5) 0 - (@cardsSpace * 0.5);
 
         tr {
-          border: 3px solid @color-white;
+          border: 3px solid var(--color-white);
           display: flex;
           flex-wrap: wrap;
           margin: @cardsSpace * 0.5;
@@ -574,7 +536,7 @@
             width: 100%;
 
             &:not([class*='table-']) {
-              border-top: 1px solid @gray-lighter;
+              border-top: 1px solid var(--gray-lighter);
               width: 100%;
             }
 
@@ -614,7 +576,7 @@
 
             &[data-field]:not([data-field='']) {
               &:before {
-                color: @gray;
+                color: var(--gray);
                 content: attr(data-field) ':';
                 float: left;
                 margin-right: 10px;
@@ -651,12 +613,12 @@
           }
 
           &:not(.active):not(.table-card-placeholder) {
-            background-color: @color-white !important;
+            background-color: var(--color-white) !important;
           }
 
           &.active {
-            background: @table-bg-highlight !important;
-            border-color: @brand-primary;
+            background: var(--color-highlight-lightest) !important;
+            border-color: var(--brand-primary);
 
             td {
               box-shadow: none !important;
@@ -669,15 +631,15 @@
         tbody {
           tr {
             &:hover {
-              border-color: @table-bg-highlight;
+              border-color: var(--color-highlight-lightest);
 
               &.active {
-                border-color: @brand-primary;
+                border-color: var(--brand-primary);
               }
 
               td {
-                background: @table-bg-highlight;
-                border-color: darken(@table-border-color, 8%);
+                background: var(--color-highlight-lightest);
+                border-color: .hslb(@gray-lighter-hsl, '-', '8%')[@result];
               }
             }
           }
@@ -767,19 +729,19 @@
   // grouped tr`s
   tr {
     &.compactRow {
-      background-color: @color-white !important;
+      background-color: var(--color-white) !important;
     }
 
     &.extendedRow {
-      background-color: darken(@table-bg, 2%) !important;
+      background-color: .hslb(@color-white-hsl, '-', '2%')[@result] !important;
 
       td {
-        border-top: 2px solid @table-border-color !important;
+        border-top: 2px solid var(--gray-lighter) !important;
       }
 
       + .compactRow {
         td {
-          border-top: 20px solid @table-border-color !important;
+          border-top: 20px solid var(--gray-lighter) !important;
         }
       }
     }
@@ -812,16 +774,16 @@
 .table-state(@state, @color, @hoverable) {
   & when (@state = active) {
     background-color: transparent;
-    box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+    box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 0 500px 0 0 var(--color-highlight-lightest);
 
     &:first-child {
       box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 2px 0 0 0 @color,
-        inset 0 500px 0 0 @table-bg-highlight;
+        inset 0 500px 0 0 var(--color-highlight-lightest);
     }
 
     &:last-child {
       box-shadow: inset 0 2px 0 0 @color, inset -2px 0 0 0 @color, inset 0 -2px 0 0 @color,
-        inset 0 500px 0 0 @table-bg-highlight;
+        inset 0 500px 0 0 var(--color-highlight-lightest);
     }
   }
 
@@ -829,14 +791,14 @@
     &.@{state} {
       & when (@hoverable = true) {
         &:hover > td:first-child {
-          box-shadow: inset 5px 0 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 5px 0 0 0 @color, inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }
 
       &.active, &.active:hover {
         > td:first-child {
-          box-shadow: inset 5px 0 0 0 @color, inset 0 2px 0 0 @brand-primary, inset 0 -2px 0 0 @brand-primary,
-            inset 0 500px 0 0 @table-bg-highlight;
+          box-shadow: inset 5px 0 0 0 @color, inset 0 2px 0 0 var(--brand-primary), inset 0 -2px 0 0 var(--brand-primary),
+            inset 0 500px 0 0 var(--color-highlight-lightest);
         }
       }