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

package/lib/es/styles/components/TableSettingsDialog.less

@@ -20,8 +20,8 @@
 }
 
 .table-settings-item {
-    background: @color-white;
-    border: 1px solid @gray-light;
+    background: var(--color-white);
+    border: 1px solid var(--gray-light);
     position: relative;
     transition: background-color 0.2s ease-in-out ~','box-shadow 0.2s ease-in-out;
     z-index: 1;
@@ -32,7 +32,7 @@
         padding: 0 8px;
 
         &:hover {
-            background-color: @color-highlight-decent;
+            background-color: var(--color-highlight-decent);
         }
     }
 
@@ -40,7 +40,7 @@
         align-items: center;
         display: flex;
         padding: 10px;
-        border-top: 1px solid @gray-light;
+        border-top: 1px solid var(--gray-light);
     }
 
     &:not(:last-child) {
@@ -63,14 +63,14 @@
     }
 
     &.movedColumn {
-        background-color: @color-highlight-decent;
+        background-color: var(--color-highlight-decent);
     }
 
     .table-settings-item-label {
         .ellipsis-1;
         cursor: grab;
         align-items: center;
-        color: @gray-dark;
+        color: var(--gray-dark);
         display: flex;
         flex: 1 0;
         font-weight: @font-normal;
@@ -83,7 +83,7 @@
     }
 
     .column-width-label {
-        color: @gray;
+        color: var(--gray);
         margin-right: 5px;
     }
 

package/lib/es/styles/components/TableToolbar.less

@@ -67,7 +67,7 @@
             padding-right: 18px;
 
             &:after {
-              background: @gray-light;
+              background: var(--gray-light);
               bottom: 5px;
               content: '';
               height: @input-height-base - 10px;

package/lib/es/styles/components/Tag.less

@@ -1,11 +1,11 @@
 .tag {
-  background: @color-white;
+  background: var(--color-white);
   font-size: 14px;
   font-weight: @font-normal;
   line-height: @btn-size-sm * 0.6;
   border-radius: 2px;
-  border: 1px solid @gray-light;
-  color: @gray-dark;
+  border: 1px solid var(--gray-light);
+  color: var(--gray-dark);
   border-radius: @btn-size-sm;
   position: relative;
   display: inline-flex;
@@ -21,8 +21,8 @@
   }
 
   &.tag-muted {
-    border-color: @gray-lightest;
-    background-color: @gray-lightest;
+    border-color: var(--gray-lightest);
+    background-color: var(--gray-lightest);
   }
 
   &[style*="width"],
@@ -51,8 +51,8 @@
   }
 
   &.disabled {
-    border-color: @gray;
-    background-color: @gray-light;
+    border-color: var(--gray);
+    background-color: var(--gray-light);
     opacity: .5;
     position: relative;
 
@@ -75,17 +75,17 @@
     cursor: pointer;
 
     &:hover {
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
     }
   }
 
   &.active {
-    background-color: fade(@brand-primary, 20%);
+    background-color: .hsla(@brand-primary-hsl, 0.2)[@result];
     border-color: @brand-primary;
     color: @brand-primary;
 
     &:hover {
-      background-color: fade(@brand-primary, 30%);
+      background-color: .hsla(@brand-primary-hsl, 0.3)[@result];
     }
   }
 

package/lib/es/styles/components/Timeline.less

@@ -1,7 +1,7 @@
 .timeline {
   .timeline-date {
     position: relative;
-    color: @gray-dark;
+    color: var(--gray-dark);
   }
 
   .timeline-content {
@@ -23,7 +23,7 @@
         white-space: nowrap;
 
         &:before {
-          background: @gray-light;
+          background: var(--gray-light);
           bottom: 5px;
           content: "";
           left: 50%;
@@ -51,7 +51,7 @@
           padding-top: 60px;
 
           &:before {
-            background: @gray-light;
+            background: var(--gray-light);
             top: 20px;
             content: "";
             left: 50%;

package/lib/es/styles/components/Tooltip.less

@@ -1,6 +1,6 @@
 @tooltip-max-width: 200px;
-@tooltip-color: @color-white;
-@tooltip-bg: @gray-darker;
+@tooltip-color: var(--color-white);
+@tooltip-bg: var(--gray-darker);
 @tooltip-arrow-width: 5px;
 @tooltip-arrow-color: @tooltip-bg;
 @tooltip-opacity: 1;
@@ -48,7 +48,7 @@
     z-index: @zindex-tooltip;
 
     .tooltip-inner {
-      background: @gray-darkest;
+      background: var(--gray-darkest);
       border-radius: @border-radius-sm;
       padding: 5px 10px;
       width: 180px;
@@ -67,13 +67,13 @@
     @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
 
     .tooltip-mixin(
-      @offset: 10px; @overlap: 10px; @color: @gray-darkest; @arrow-size: 5px; @arrow-size-hypotenuse:
+      @offset: 10px; @overlap: 10px; @color: var(--gray-darkest); @arrow-size: 5px; @arrow-size-hypotenuse:
         @arrow-size-hypotenuse;
     );
   }
 
   &.tooltip-onboarding {
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
+    filter: drop-shadow(0 0 10px .hsla(@always-color-black-hsl, 0.3)[@result]);
     z-index: @zindex-tooltip-onboarding;
 
     &.onboarding-clickflow {
@@ -81,7 +81,7 @@
 
       &.onboarding-clickflow-backdrop {
         &:after {
-          background-color: rgba(0, 0, 0, 0.3);
+          background-color: .hsla(@always-color-black-hsl, 0.3)[@result];
           bottom: -1500px;
           content: "";
           display: block;
@@ -106,7 +106,7 @@
     }
 
     .tooltip-inner {
-      background: @brand-secondary;
+      background: var(--brand-secondary);
       border-radius: @border-radius-default;
       padding: 15px;
       width: 330px;
@@ -124,13 +124,13 @@
       }
 
       .tooltip-close {
-        color: darken(@brand-secondary, 10%);
+        color: .hslb(@brand-secondary-hsl, '-', '10%')[@result];
         cursor: pointer;
         font-size: 16px;
         margin: 2px 0 0 10px;
 
         &:hover {
-          color: @color-white;
+          color: var(--color-white);
         }
       }
     }
@@ -139,7 +139,7 @@
     @arrow-size-hypotenuse: sqrt(pow(@arrow-size, 2) + pow(@arrow-size, 2));
 
     .tooltip-mixin(
-      @offset: 20px; @overlap: 25px; @color: @color-map-marker-poi; @arrow-size: @arrow-size; @arrow-size-hypotenuse:
+      @offset: 20px; @overlap: 25px; @color: var(--color-map-marker-poi); @arrow-size: @arrow-size; @arrow-size-hypotenuse:
         @arrow-size-hypotenuse;
     );
   }

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

@@ -1,7 +1,7 @@
 .badge {
-  background-color: @brand-primary;
+  background-color: var(--brand-primary);
   border-radius: @border-radius-round;
-  color: @color-white;
+  color: var(--color-white);
   display: inline-block;
   font-size: 12px;
   font-weight: normal;
@@ -37,7 +37,7 @@
     transform: translate(50%, -50%);
 
     .ActionBarItemIcon & {
-      border: 2px solid @color-white;
+      border: 2px solid var(--color-white);
       left: 50%;
       position: absolute;
       right: auto;
@@ -46,7 +46,7 @@
     }
 
     &-border {
-      border: 2px solid @color-white;
+      border: 2px solid var(--color-white);
     }
 
     &-pinging {
@@ -74,23 +74,23 @@
   // warning
   // danger
   &-muted {
-    color: @gray-dark;
-    box-shadow: inset 0px 0px 0px 1px @gray-light;
-    background-color: @gray-lightest;
+    color: var(--gray-dark);
+    box-shadow: inset 0px 0px 0px 1px var(--gray-light);
+    background-color: var(--gray-lightest);
 
     &.badge-indicator-pinging {
       &:before {
-        background-color: @gray-light;
+        background-color: var(--gray-light);
       }
     }
   }
 
   &-default {
-    background-color: @gray-dark;
+    background-color: var(--gray-dark);
 
     &.badge-indicator-pinging {
       &:before {
-        background-color: @gray-dark;
+        background-color: var(--gray-dark);
       }
     }
   }

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

@@ -1,7 +1,7 @@
 // default values used as shorthand ".border" class
 // no !important here, because other classes will not work then
 .border {
-  border-color: @gray-light;
+  border-color: var(--gray-light);
   border-style: solid;
   border-width: 1px;
 }

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

@@ -7,14 +7,14 @@
     display: inline-block;
 
     + li:before {
-      color: @gray-light;
+      color: var(--gray-light);
       content: "/";
       padding: 0 5px;
     }
   }
 
   > .active {
-    color: @gray-dark;
+    color: var(--gray-dark);
     cursor: default;
   }
 }

package/lib/es/styles/design/button-groups.less

@@ -77,6 +77,30 @@
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
+
+  &.btn-primary {
+    border-left-color: .hslb(@brand-primary-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
+
+  &.btn-secondary {
+    border-left-color: .hslb(@brand-secondary-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
+
+  &.btn-info {
+    border-left-color: .hslb(@brand-info-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
+
+  &.btn-success {
+    border-left-color: .hslb(@brand-success-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
+
+  &.btn-warning {
+    border-left-color: .hslb(@brand-warning-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
+
+  &.btn-danger {
+    border-left-color: .hslb(@brand-danger-hsl, '-', @btn-hover-border-brightness)[@result];
+  }
 }
 
 .btn-group > .btn-lg + .dropdown-toggle {
@@ -87,7 +111,7 @@
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {
-  box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
+  box-shadow:inset 0 3px 5px .hsla(@always-color-black-hsl, 0.125)[@result];
 
   // Show no shadow for `.btn-link` since it has no other button styles.
   &.btn-link {

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

@@ -1,27 +1,8 @@
-@btn-primary-color: @color-white;
-@btn-primary-bg: @brand-primary;
-@btn-primary-border: darken(@btn-primary-bg, 5%);
-@btn-secondary-color: @color-white;
-@btn-secondary-bg: @brand-secondary;
-@btn-secondary-border: darken(@btn-secondary-bg, 5%);
-@btn-default-color: @btn-primary-bg;
-@btn-default-bg: @color-white;
-@btn-default-border: @btn-primary-border;
-@btn-success-color: @color-white;
-@btn-success-bg: @brand-success;
-@btn-success-border: darken(@btn-success-bg, 5%);
-@btn-warning-color: @color-white;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: darken(@btn-warning-bg, 5%);
-@btn-danger-color: @color-white;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: darken(@btn-danger-bg, 5%);
-@btn-info-color: @color-white;
-@btn-info-bg: @brand-info;
-@btn-info-border: darken(@btn-info-bg, 5%);
-@btn-link-disabled-color: @gray-light;
-@btn-muted-color: @gray;
-@btn-muted-active-color: @gray-dark;
+
+@btn-link-disabled-color: var(--gray-light);
+@btn-muted-color: var(--gray);
+@btn-muted-active-color: var(--gray-dark);
+@btn-toggled-shadow: inset 0 1px 5px 1px fade(@always-color-black, 25%);
 
 // right order is important
 .rio-btn(@btn-size-default; ~'');
@@ -65,11 +46,7 @@
   }
 
   &.btn-toggle.active {
-    box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 50%);
-
-    &.btn-primary {
-      box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 70%);
-    }
+    box-shadow: @btn-toggled-shadow;
   }
 
   &-toolbar {
@@ -84,8 +61,8 @@
       }
     }
 
-    .btn + .dropdown-toggle,
-    .btn-group > .btn:not(:first-child) {
+    //.btn + .dropdown-toggle,
+    .btn-group > .btn:not(:first-child):not(.dropdown-toggle) {
       margin-left: -1px !important;
     }
   }
@@ -107,15 +84,15 @@
   .caret {
     align-self: center;
     position: relative;
-    border-color: @btn-primary-color;
+    border-color: var(--brand-primary);
   }
 
   &.btn-default {
     .caret {
-      border-color: @brand-primary;
+      border-color: var(--brand-primary);
 
       .open & {
-        border-color: @color-white;
+        border-color: @always-color-white;
       }
     }
 
@@ -126,7 +103,7 @@
     &:active:focus,
     &.active:focus {
       .caret {
-        border-color: @color-white;
+        border-color: @always-color-white;
       }
     }
   }
@@ -222,10 +199,10 @@
 
     // custom overwrite
     &.btn-default:hover {
-      color: @brand-primary;
+      color: var(--brand-primary);
 
       > .rioglyph {
-        color: @brand-primary;
+        color: var(--brand-primary);
       }
     }
 
@@ -257,7 +234,7 @@
       box-shadow: none;
 
       > .rioglyph {
-        color: @color-highlight-dark;
+        color: var(--color-highlight-dark);
       }
 
       // primary
@@ -309,7 +286,7 @@
       animation-iteration-count: infinite;
       animation-timing-function: linear;
       content: "\e9c7";
-      color: @brand-primary;
+      color: var(--brand-primary);
       font-size: 20px;
     }
 
@@ -320,7 +297,7 @@
     &:not(.btn-default),
     &:focus {
       &:before {
-        color: @color-white;
+        color: var(--color-white);
       }
     }
 
@@ -369,120 +346,87 @@
     }
   }
 
-  &.btn-dynamic {
-    font-size: inherit !important;
-    line-height: inherit !important;
-    padding: 10px 20px !important;
-    height: auto !important;
-    text-transform: none !important;
-
-    &.btn-black {
-      .button-variant(
-        ~'!important';
-        @color-black;
-        lighten(@color-black, 5%);
-        @color-white;
-        lighten(@color-black, 10%)
-      );
-    }
-
-    &.btn-white {
-      .button-variant(
-        ~'!important';
-        @color-white;
-        darken(@color-white, 5%);
-        @color-black;
-        darken(@color-white, 3%)
-      );
-    }
-  }
-
   // btn variants
   &.btn-default {
-    .button-variant(
+    .button-style(
       ~'';
-      @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;
+      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);
     );
   }
 
   &.btn-primary {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-primary-bg;
-      @btn-primary-border;
-      @btn-primary-color;
+      var(--color-white);
+      @brand-primary-hsl;
     );
   }
 
   &.btn-secondary {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-secondary-bg;
-      @btn-secondary-border;
-      @btn-secondary-color;
+      var(--color-white);
+      @brand-secondary-hsl;
     );
   }
 
   &.btn-success {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-success-bg;
-      @btn-success-border;
-      @btn-success-color;
+      var(--color-white);
+      @brand-success-hsl;
     );
   }
 
   &.btn-info {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-info-bg;
-      @btn-info-border;
-      @btn-info-color;
+      var(--color-white);
+      @brand-info-hsl;
     );
   }
 
   &.btn-warning {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-warning-bg;
-      @btn-warning-border;
-      @btn-warning-color;
+      var(--color-white);
+      @brand-warning-hsl;
     );
   }
 
   &.btn-danger {
-    .button-variant(
+    .button-style(
       ~'';
-      @btn-danger-bg;
-      @btn-danger-border;
-      @btn-danger-color;
+      var(--color-white);
+      @brand-danger-hsl;
     );
   }
 }
 
 .btn-ripple {
   animation: ripple 600ms linear;
-  background-color: fade(@color-white, 70%);
   border-radius: 50%;
   position: absolute;
   transform: scale(0);
   z-index: 1;
   pointer-events: none;
 
+  // light and darkmode
+  background-color: .hsla(@always-color-white-hsl, 0.5)[@result];
+  [data-theme="dark"] & { background-color: .hsla(@always-color-white-hsl, 0.25)[@result] }
+  // @media (prefers-color-scheme: dark) { html:not([data-theme]) & { background-color: .hsla(@always-color-white-hsl, 0.25)[@result] } }
+
   // fix double ripple effect on mobile
   &:not([style*="left"]):not([style*="top"]) {
     display: none;

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

@@ -1,7 +1,7 @@
 .callout {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border-radius: @border-radius-default;
-  border: 1px solid @gray-light;
+  border: 1px solid var(--gray-light);
   padding: 20px 20px 20px 25px;
 
   p:last-child {
@@ -16,7 +16,7 @@
   // warning
   // danger
   &-default {
-    box-shadow: inset 5px 0 0 0 @gray;
+    box-shadow: inset 5px 0 0 0 var(--gray);
   }
 
   each(@colors-brand-and-status-map, {

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

@@ -1,5 +1,3 @@
-@code-bg: #f3f3f4;
-
 code,
 pre {
   font-family: @font-family-monospace;
@@ -7,8 +5,8 @@ pre {
 }
 
 code {
-  background-color: @code-bg;
-  color: @color-warmup-raspberry;
+  background-color: var(--color-code);
+  color: var(--brand-secondary);
   font-size: 80%;
   margin-left: 1px;
   margin-right: 1px;
@@ -29,8 +27,8 @@ code {
 }
 
 pre {
-  background-color: @code-bg;
-  color: @gray-dark;
+  background-color: var(--color-code);
+  color: var(--gray-dark);
   display: block;
   margin: 0;
   padding: 5px 10px;