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

package/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/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/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/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/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/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/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;

package/styles/design/colors.less

@@ -1,21 +1,21 @@
-.bg-muted, .hover-bg-muted:hover { background-color: @gray-lighter !important }
-.bg-default, .hover-bg-default:hover { background-color: @gray-dark !important }
+.bg-muted, .hover-bg-muted:hover { background-color: var(--gray-lighter) !important }
+.bg-default, .hover-bg-default:hover { background-color: var(--gray-dark) !important }
 
 // white
 // black
-.bg-white, .hover-bg-white:hover { background-color: @color-white !important }
-.fill-white { fill: @color-white !important }
+.bg-white, .hover-bg-white:hover { background-color: var(--color-white) !important }
+.fill-white { fill: var(--color-white) !important }
 
-.bg-black, .hover-bg-black:hover { background-color: @color-black !important }
-.fill-black { fill: @color-black !important }
-.bg-black { color: @color-white !important }
+.bg-black, .hover-bg-black:hover { background-color: var(--color-black) !important }
+.fill-black { fill: var(--color-black) !important }
+.bg-black { color: var(--color-white) !important }
 
 
 // primary
 // secondary
 each(@colors-brand-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -32,7 +32,7 @@ each(@colors-brand-map, {
 // danger
 each(@colors-status-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -52,7 +52,7 @@ each(@colors-status-map, {
 // lightest
 each(@colors-gray-map, {
   .bg-@{key} {
-    color: @gray-darkest !important;
+    color: var(--gray-darkest) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -64,7 +64,7 @@ each(@colors-gray-map, {
 })
 .bg-dark,
 .bg-darker,
-.bg-darkest { color: @color-white !important }
+.bg-darkest { color: var(--color-white) !important }
 
 // map-marker-asset
 // map-marker-poi
@@ -72,7 +72,7 @@ each(@colors-gray-map, {
 // map-marker-route
 each(@colors-map-marker-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -90,7 +90,7 @@ each(@colors-map-marker-map, {
 // rating-5
 each(@colors-rating-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -107,7 +107,7 @@ each(@colors-rating-map, {
 // status-working
 each(@colors-driving-status-map, {
   .bg-@{key} {
-    color: @color-white !important;
+    color: var(--color-white) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -128,7 +128,7 @@ each(@colors-driving-status-map, {
 // highlight-decent
 each(@colors-highlight-map, {
   .bg-@{key} {
-    color: @gray-darkest !important;
+    color: var(--gray-darkest) !important;
     background-color: @value !important;
   }
   .hover-bg-@{key}:hover {
@@ -141,7 +141,7 @@ each(@colors-highlight-map, {
 .bg-highlight,
 .bg-highlight-dark,
 .bg-highlight-darker,
-.bg-highlight-darkest { color: @color-white !important }
+.bg-highlight-darkest { color: var(--color-white) !important }
 
 // coldplay-wine
 // coldplay-aubergine
@@ -155,7 +155,7 @@ each(@colors-highlight-map, {
 & when (@buildColdplayColors = true) {
   each(@colors-coldplay-map, {
     .bg-@{key} {
-      color: @gray-darkest !important;
+      color: var(--gray-darkest) !important;
       background-color: @value !important;
     }
     .hover-bg-@{key}:hover {
@@ -168,7 +168,7 @@ each(@colors-highlight-map, {
   .bg-coldplay-wine,
   .bg-coldplay-aubergine,
   .bg-coldplay-kashmir,
-  .bg-coldplay-fountain { color: @color-white !important }
+  .bg-coldplay-fountain { color: var(--color-white) !important }
 }
 
 // warmup-crimson
@@ -183,7 +183,7 @@ each(@colors-highlight-map, {
 & when (@buildWarmupColors = true) {
   each(@colors-warmup-map, {
     .bg-@{key} {
-      color: @gray-darkest !important;
+      color: var(--gray-darkest) !important;
       background-color: @value !important;
     }
     .hover-bg-@{key}:hover {
@@ -198,5 +198,5 @@ each(@colors-highlight-map, {
   .bg-warmup-cadillac,
   .bg-warmup-raspberry,
   .bg-warmup-cerise,
-  .bg-warmup-charm { color: @color-white !important }
+  .bg-warmup-charm { color: var(--color-white) !important }
 }

package/styles/design/form-input-groups.less

@@ -1,4 +1,4 @@
-@input-group-addon-bg: @color-white;
+@input-group-addon-bg: var(--color-white);
 @input-group-addon-border-color: @input-border;
 
 .input-group {
@@ -32,7 +32,7 @@
     align-items: center;
     background-color: @input-group-addon-bg;
     border: 1px solid @input-group-addon-border-color;
-    color: @gray-dark;
+    color: var(--gray-dark);
     display: flex;
     justify-content: center;
     width: auto;
@@ -47,7 +47,7 @@
 
     &.input-group-addon-label {
       text-transform: uppercase;
-      background-color: @gray-lightest;
+      background-color: var(--gray-lightest);
     }
 
     &:first-child {
@@ -107,7 +107,7 @@
     }
 
     > .rioglyph {
-      color: lighten(@gray-dark, 5%);
+      color: .hslb(@gray-dark-hsl, '+', '5%')[@result];
       font-size: 18px;
     }
   }