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

package/styles/mapping/color-map.less

@@ -5,8 +5,8 @@
 // black
 // white
 @colors-text-map: {
-  black: @color-black;
-  white: @color-white;
+  black: var(--color-black);
+  white: var(--color-white);
 }
 
 // Color Map - Gray
@@ -18,27 +18,27 @@
 // lighter
 // lightest
 @colors-gray-map: {
-  darkest: @gray-darkest;
-  darker: @gray-darker;
-  dark: @gray-dark;
-  gray: @gray;
-  light: @gray-light;
-  lighter: @gray-lighter;
-  lightest: @gray-lightest;
+  darkest: var(--gray-darkest);
+  darker: var(--gray-darker);
+  dark: var(--gray-dark);
+  gray: var(--gray);
+  light: var(--gray-light);
+  lighter: var(--gray-lighter);
+  lightest: var(--gray-lightest);
 }
 
 // Color Map - Brand
 // primary
 // secondary
 @colors-brand-map: {
-  primary: @brand-primary;
-  secondary: @brand-secondary;
+  primary: var(--brand-primary);
+  secondary: var(--brand-secondary);
 }
 
 // Color Map - Brand Decent
 @colors-brand-decent-map: {
-  primary: @brand-primary-decent;
-  secondary: @brand-secondary-decent;
+  primary: var(--brand-primary-decent);
+  secondary: var(--brand-secondary-decent);
 }
 
 // Color Map - Status
@@ -55,10 +55,10 @@
 
 // Color Map - Status Decent
 @colors-status-decent-map: {
-  info: @brand-info-decent;
-  success: @brand-success-decent;
-  warning: @brand-warning-decent;
-  danger: @brand-danger-decent;
+  info: var(--brand-info-decent);
+  success: var(--brand-success-decent);
+  warning: var(--brand-warning-decent);
+  danger: var(--brand-danger-decent);
 }
 
 // Color Map - Brand & Status
@@ -70,8 +70,8 @@
 // warning
 // danger
 @colors-brand-and-status-map: {
-  primary: @brand-primary;
-  secondary: @brand-secondary;
+  primary: var(--brand-primary);
+  secondary: var(--brand-secondary);
   info: @brand-info;
   success: @brand-success;
   warning: @brand-warning;
@@ -81,12 +81,12 @@
 // Color Map - Brand & Status Decent
 // SASS has a map-merge function, LESS unfortunately not...
 @colors-brand-and-status-decent-map: {
-  primary: @brand-primary-decent;
-  secondary: @brand-secondary-decent;
-  info: @brand-info-decent;
-  success: @brand-success-decent;
-  warning: @brand-warning-decent;
-  danger: @brand-danger-decent;
+  primary: var(--brand-primary-decent);
+  secondary: var(--brand-secondary-decent);
+  info: var(--brand-info-decent);
+  success: var(--brand-success-decent);
+  warning: var(--brand-warning-decent);
+  danger: var(--brand-danger-decent);
 }
 
 // Color Map - Forms
@@ -103,10 +103,10 @@
 // status-resting
 // status-working
 @colors-driving-status-map: {
-  status-available: @color-status-available;
-  status-driving: @color-status-driving;
-  status-resting: @color-status-resting;
-  status-working: @color-status-working;
+  status-available: var(--color-status-available);
+  status-driving: var(--color-status-driving);
+  status-resting: var(--color-status-resting);
+  status-working: var(--color-status-working);
 }
 
 // Color Map - Map Marker
@@ -115,10 +115,11 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
-  map-marker-asset: @color-map-marker-asset;
-  map-marker-poi: @color-map-marker-poi;
-  map-marker-geofence: @color-map-marker-geofence;
-  map-marker-route: @color-map-marker-route;
+  map-marker-active: var(--color-map-marker-active);
+  map-marker-asset: var(--color-map-marker-asset);
+  map-marker-poi: var(--color-map-marker-poi);
+  map-marker-geofence: var(--color-map-marker-geofence);
+  map-marker-route: var(--color-map-marker-route);
 }
 
 // Color Map - Rating
@@ -128,11 +129,11 @@
 // rating-4
 // rating-5
 @colors-rating-map: {
-  rating-1: @color-rating-1;
-  rating-2: @color-rating-2;
-  rating-3: @color-rating-3;
-  rating-4: @color-rating-4;
-  rating-5: @color-rating-5;
+  rating-1: var(--color-rating-1);
+  rating-2: var(--color-rating-2);
+  rating-3: var(--color-rating-3);
+  rating-4: var(--color-rating-4);
+  rating-5: var(--color-rating-5);
 }
 
 // Color Map - Highlight
@@ -145,14 +146,14 @@
 // highlight-lightest
 // highlight-decent
 @colors-highlight-map: {
-  highlight-darkest: @color-highlight-darkest;
-  highlight-darker: @color-highlight-darker;
-  highlight-dark: @color-highlight-dark;
-  highlight: @color-highlight;
-  highlight-light: @color-highlight-light;
-  highlight-lighter: @color-highlight-lighter;
-  highlight-lightest: @color-highlight-lightest;
-  highlight-decent: @color-highlight-decent;
+  highlight-darkest: var(--color-highlight-darkest);
+  highlight-darker: var(--color-highlight-darker);
+  highlight-dark: var(--color-highlight-dark);
+  highlight: var(--color-highlight);
+  highlight-light: var(--color-highlight-light);
+  highlight-lighter: var(--color-highlight-lighter);
+  highlight-lightest: var(--color-highlight-lightest);
+  highlight-decent: var(--color-highlight-decent);
 }
 
 // Color Map - RIO Coldplay
@@ -166,15 +167,15 @@
 // coldplay-primrose
 // coldplay-khaki
 @colors-coldplay-map: {
-  coldplay-wine: @color-coldplay-wine;
-  coldplay-aubergine: @color-coldplay-aubergine;
-  coldplay-kashmir: @color-coldplay-kashmir;
-  coldplay-fountain: @color-coldplay-fountain;
-  coldplay-turquoise: @color-coldplay-turquoise;
-  coldplay-bermuda: @color-coldplay-bermuda;
-  coldplay-moos: @color-coldplay-moos;
-  coldplay-primrose: @color-coldplay-primrose;
-  coldplay-khaki: @color-coldplay-khaki;
+  coldplay-wine: var(--color-coldplay-wine);
+  coldplay-aubergine: var(--color-coldplay-aubergine);
+  coldplay-kashmir: var(--color-coldplay-kashmir);
+  coldplay-fountain: var(--color-coldplay-fountain);
+  coldplay-turquoise: var(--color-coldplay-turquoise);
+  coldplay-bermuda: var(--color-coldplay-bermuda);
+  coldplay-moos: var(--color-coldplay-moos);
+  coldplay-primrose: var(--color-coldplay-primrose);
+  coldplay-khaki: var(--color-coldplay-khaki);
 }
 
 // Color Map - RIO Warmup
@@ -188,13 +189,13 @@
 // warmup-cherokee
 // warmup-corn
 @colors-warmup-map: {
-  warmup-crimson: @color-warmup-crimson;
-  warmup-victoria: @color-warmup-victoria;
-  warmup-cadillac: @color-warmup-cadillac;
-  warmup-raspberry: @color-warmup-raspberry;
-  warmup-cerise: @color-warmup-cerise;
-  warmup-charm: @color-warmup-charm;
-  warmup-salmon: @color-warmup-salmon;
-  warmup-cherokee: @color-warmup-cherokee;
-  warmup-corn: @color-warmup-corn;
+  warmup-crimson: var(--color-warmup-crimson);
+  warmup-victoria: var(--color-warmup-victoria);
+  warmup-cadillac: var(--color-warmup-cadillac);
+  warmup-raspberry: var(--color-warmup-raspberry);
+  warmup-cerise: var(--color-warmup-cerise);
+  warmup-charm: var(--color-warmup-charm);
+  warmup-salmon: var(--color-warmup-salmon);
+  warmup-cherokee: var(--color-warmup-cherokee);
+  warmup-corn: var(--color-warmup-corn);
 }

package/styles/mixins/_imports.less

@@ -0,0 +1,14 @@
+@import (less) 'border-radius.less';
+@import (less) 'buttons.less';
+@import (less) 'clearfix.less';
+@import (less) 'cols.less';
+@import (less) 'forms.less';
+@import (less) 'hsl.less';
+@import (less) 'panels.less';
+@import (less) 'placeholder.less';
+@import (less) 'reset.less';
+@import (less) 'sizings.less';
+@import (less) 'spinner.less';
+@import (less) 'tabs.less';
+@import (less) 'table.less';
+@import (less) 'text.less';

package/styles/mixins/buttons.less

@@ -1,75 +1,43 @@
-.button-variant(
-      @important: ~'';
-      @background;
-      @border;
-      @color;
-      @hover-background: darken(@background, 10%);
-      @active-background: darken(@background, 10%);
-      @focus-background: darken(@background, 5%);
-      @active-hover-background: darken(@background, 17%);
-      @hover-border: darken(@border, 12%);
-      @active-border: darken(@border, 12%);
-      @focus-border: @border;
-      @active-hover-border: darken(@border, 25%);
+.button-style (
+      @important: ~''; // mandatory
+      @color; // mandatory
+      @hsl-background-object; // mandatory
+      @hsl-border-object: @hsl-background-object;
+
+      // interaction background
+      @hover-background: .hslb(@hsl-background-object, '-', @btn-hover-brightness)[@result];
+      @active-background: .hslb(@hsl-background-object, '-', @btn-active-brightness)[@result];
+
+      // interaction border
+      @hover-border: .hslb(@hsl-background-object, '-', @btn-hover-border-brightness)[@result];
+      @active-border: .hslb(@hsl-background-object, '-', @btn-active-border-brightness)[@result];
+
+      // interaction color
       @hover-color: @color;
       @active-color: @color;
-      @focus-color: @color;
-      @active-hover-color: @color;
     )
   {
-  color: @color @important;
-  background-color: @background @important;
-  border: 1px solid @border @important;
 
-  &:focus {
-    background-color: @focus-background @important;
-    border-color: @focus-border @important;
-    color: @focus-color @important;
-  }
+  color: @color @important;
+  background-color: hsl(@hsl-background-object) @important;
+  border: 1px solid hsl(@hsl-border-object) @important;
 
-  @media (hover: hover) {
-    &:hover {
-      background-color: @hover-background @important;
-      border-color: @hover-border @important;
-      color: @hover-color @important;
-    }
+  &:hover, &:focus {
+    background-color: @hover-background @important;
+    border-color: @hover-border @important;
+    color: @hover-color @important;
   }
 
   &:active,
   &.active,
-  .open > .dropdown-toggle& {
+  .open > .dropdown-toggle & {
     background-color: @active-background @important;
     border-color: @active-border @important;
     color: @active-color @important;
-
-    @media (hover: hover) {
-      &:hover,
-      &:focus {
-        background-color: @active-hover-background @important;
-        border-color: @active-hover-border @important;
-        color: @active-hover-color @important;
-      }
-    }
-  }
-
-  &:active,
-  &.active,
-  .open > .dropdown-toggle& {
-    background-image: none @important;
-  }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &:hover,
-    &:focus {
-      background-color: @background @important;
-      border-color: @border @important;
-    }
   }
 
   .badge {
-    color: @background @important;
+    color: hsl(@hsl-background-object) @important;
     background-color: @color @important;
   }
 }

package/styles/mixins/forms.less

@@ -1,61 +1,25 @@
-.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
-    // Color the label and help text
-    .help-block,
-    .control-label,
-    .radio,
-    .checkbox,
-    .radio-inline,
-    .checkbox-inline,
-    &.radio label,
-    &.checkbox label,
-    &.radio-inline label,
-    &.checkbox-inline label  {
-      color: @text-color;
-    }
-    // Set the border and box shadow on specific inputs to match
-    .form-control {
-      border-color: @border-color;
-      box-shadow:inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
-      &:focus {
-        border-color: darken(@border-color, 10%);
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075)~"," 0 0 6px lighten(@border-color, 20%);
-      }
-    }
-    // Set validation states also for addons
-    .input-group-addon:not(.input-group-addon-label) {
-      color: @text-color;
-      border-color: @border-color;
-      background-color: @background-color;
-    }
-    // Optional feedback icon
-    .form-control-feedback {
-      color: @text-color;
-    }
+.form-control-focus(@color: @input-border-focus) {
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    box-shadow: none;
   }
+}
 
-  .form-control-focus(@color: @input-border-focus) {
-    @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
-    &:focus {
-      border-color: @color;
-      outline: 0;
-      box-shadow:inset 0 1px 1px rgba(0,0,0,.075)~"," 0 0 8px @color-rgba;
-    }
-  }
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
 
-  .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  select& {
     height: @input-height;
-    padding: @padding-vertical @padding-horizontal;
-    font-size: @font-size;
-    line-height: @line-height;
-    border-radius: @border-radius;
-
-    select& {
-      height: @input-height;
-      line-height: @input-height;
-    }
+    line-height: @input-height;
+  }
 
-    textarea&,
-    select[multiple]& {
-      height: auto;
-    }
+  textarea&,
+  select[multiple]& {
+    height: auto;
   }
+}

package/styles/mixins/hsl.less

@@ -0,0 +1,19 @@
+.hex-to-LESS-hsl(@hex) {
+  @hue: hue(@hex);
+  @saturation: saturation(@hex);
+  @lightness: lightness(@hex);
+
+  @result: @hue, @saturation, @lightness;
+}
+
+.hsla(@hsl; @alpha) {
+  @result: hsla(@hsl, @alpha);
+}
+
+.hslb(@hsl; @operator; @brightness) {
+  @hue: extract(@hsl, 1);
+  @saturation: extract(@hsl, 2);
+  @lightness: extract(@hsl, 3);
+
+  @result: hsl(@hue, @saturation, ~"calc(@{lightness} @{operator} @{brightness})");
+}

package/styles/mixins/panels.less

@@ -13,8 +13,8 @@
     }
 
     .badge:not([class*="badge-"]) {
-      color: @gray-darkest;
-      background-color: @color-white;
+      color: var(--gray-darkest);
+      background-color: var(--color-white);
     }
   }
 

package/styles/print/print.less

@@ -16,7 +16,7 @@
 
     html,
     html:not(.window-iframe) {
-        background-color: #ffffff;
+        background-color: var(--color-white);
     }
 
     .scroll-to-top {
@@ -142,8 +142,8 @@
             tr {
                 th,
                 td {
-                    background-color: @color-white !important;
-                    border: 1px solid #ddd !important;
+                    background-color: var(--color-white) !important;
+                    border: 1px solid var(--gray-lighter) !important;
                     padding: 10px !important;
                     white-space: pre-wrap !important;
                     word-break: break-word !important;
@@ -185,10 +185,10 @@
                 border-top-width: 5px !important;
                 border-top-style: solid !important;
 
-                &.progress-bar-status-resting { border-top-color: @color-status-resting !important }
-                &.progress-bar-status-driving { border-top-color: @color-status-driving !important }
-                &.progress-bar-status-working { border-top-color: @color-status-working !important }
-                &.progress-bar-status-available { border-top-color: @color-status-available !important }
+                &.progress-bar-status-resting { border-top-color: var(--color-status-resting) !important }
+                &.progress-bar-status-driving { border-top-color: var(--color-status-driving) !important }
+                &.progress-bar-status-working { border-top-color: var(--color-status-working) !important }
+                &.progress-bar-status-available { border-top-color: var(--color-status-available) !important }
             }
         }
     }

package/styles/rio-uikit-core.less

@@ -1,8 +1,8 @@
 // Variables
-@import (less) './variables.less';
+@import (less) './variables/_index.less';
 
 // Mixins
-@import (less) './mixins/_mixins.less';
+@import (less) './mixins/_imports.less';
 
 // Normalize
 @import (less) './design/normalize.less';

package/styles/rio-uikit-print-utilities.less

@@ -1,6 +1,6 @@
 // Styles
-@import (less) './variables.less';
-@import (less) './mixins/_mixins.less';
+@import (less) './variables/_index.less';
+@import (less) './mixins/_imports.less';
 @import (less) './print/print.less';
 
 // Utility Classes

package/styles/rio-uikit-responsive-utilities.less

@@ -1,6 +1,6 @@
 // Styles
-@import (less) './variables.less';
-@import (less) './mixins/_mixins.less';
+@import (less) './variables/_index.less';
+@import (less) './mixins/_imports.less';
 
 // Utility Classes
 @import (less) './design/responsive/_imports.less';