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

package/styles/variables/light_css_variables_map.less

@@ -0,0 +1,100 @@
+@lightModeColors: {
+  // Color - Text
+  color-white: @color-white;
+  color-black: @color-black;
+
+  // Always Colors
+  always-color-white: @always-color-white;
+  always-color-black: @always-color-black;
+
+  // Color - Grays
+  gray-darkest: @gray-darkest;
+  gray-darker: @gray-darker;
+  gray-dark: @gray-dark;
+  gray: @gray;
+  gray-light: @gray-light;
+  gray-lighter: @gray-lighter;
+  gray-lightest: @gray-lightest;
+
+  // Color - Brand
+  brand-primary: @brand-primary;
+  brand-secondary: @brand-secondary;
+
+  // Color - Brand Decent
+  brand-primary-decent: @brand-primary-decent;
+  brand-secondary-decent: @brand-secondary-decent;
+
+  // Color - Status
+  brand-info: @brand-info;
+  brand-success: @brand-success;
+  brand-warning: @brand-warning;
+  brand-danger: @brand-danger;
+
+  // Color - Status Decent
+  brand-info-decent: @brand-info-decent;
+  brand-success-decent: @brand-success-decent;
+  brand-warning-decent: @brand-warning-decent;
+  brand-danger-decent: @brand-danger-decent;
+
+  // Color - Code
+  color-code: @color-code;
+
+  // Color - Driving Status
+  color-status-available: @color-status-available;
+  color-status-driving: @color-status-driving;
+  color-status-resting: @color-status-resting;
+  color-status-working: @color-status-working;
+
+  // Color - Map Marker
+  color-map-marker-active: @color-map-marker-active;
+  color-map-marker-asset: @color-map-marker-asset;
+  color-map-marker-poi: @color-map-marker-poi;
+  color-map-marker-geofence: @color-map-marker-geofence;
+  color-map-marker-route: @color-map-marker-route;
+  color-map-marker-text: @color-map-marker-text;
+
+  // Color - Highlight
+  color-highlight-darkest: @color-highlight-darkest;
+  color-highlight-darker: @color-highlight-darker;
+  color-highlight-dark: @color-highlight-dark;
+  color-highlight: @color-highlight;
+  color-highlight-light: @color-highlight-light;
+  color-highlight-lighter: @color-highlight-lighter;
+  color-highlight-lightest: @color-highlight-lightest;
+  color-highlight-decent: @color-highlight-decent;
+}
+
+@lightModeVariables: {
+  // Color - Rating
+  color-rating-1: @color-rating-1;
+  color-rating-2: @color-rating-2;
+  color-rating-3: @color-rating-3;
+  color-rating-4: @color-rating-4;
+  color-rating-5: @color-rating-5;
+
+  // Color - RIO Coldplay
+  color-coldplay-wine: @color-coldplay-wine;
+  color-coldplay-aubergine: @color-coldplay-aubergine;
+  color-coldplay-kashmir: @color-coldplay-kashmir;
+  color-coldplay-fountain: @color-coldplay-fountain;
+  color-coldplay-turquoise: @color-coldplay-turquoise;
+  color-coldplay-bermuda: @color-coldplay-bermuda;
+  color-coldplay-moos: @color-coldplay-moos;
+  color-coldplay-primrose: @color-coldplay-primrose;
+  color-coldplay-khaki: @color-coldplay-khaki;
+
+  // Color - RIO Warmup
+  color-warmup-crimson: @color-warmup-crimson;
+  color-warmup-victoria: @color-warmup-victoria;
+  color-warmup-cadillac: @color-warmup-cadillac;
+  color-warmup-raspberry: @color-warmup-raspberry;
+  color-warmup-cerise: @color-warmup-cerise;
+  color-warmup-charm: @color-warmup-charm;
+  color-warmup-salmon: @color-warmup-salmon;
+  color-warmup-cherokee: @color-warmup-cherokee;
+  color-warmup-corn: @color-warmup-corn;
+
+  // SVGs
+  brand-icon-rio: url(https://cdn.rio.cloud/svg/common/ico_rio_colored.svg);
+  brand-icon-home: url(https://cdn.rio.cloud/svg/common/ico_home.svg);
+}

package/styles/variables/screens.less

@@ -0,0 +1,7 @@
+// Screens - Breakpoints
+@screen-xs: 480px; // BS usecase (0 - 480px)
+@screen-ls: 480px; 
+@screen-sm: 768px;
+@screen-md: 992px;
+@screen-lg: 1200px;
+@screen-xl: 1700px;

package/styles/variables/text.less

@@ -0,0 +1,23 @@
+// Fonts - Font Weights
+@font-thin: 200;
+@font-light: 300;
+@font-normal: 400;
+@font-medium: 600;
+@font-bold: 700;
+
+// Fonts - Font Sizes
+@font-size-10: 10px;
+@font-size-11: 11px;
+@font-size-12: 12px;
+@font-size-14: 14px;
+@font-size-16: 16px;
+@font-size-18: 18px;
+@font-size-20: 20px;
+
+// Fonts - Headlines - Sizes
+@font-size-h1: 40px;
+@font-size-h2: 30px;
+@font-size-h3: 26px;
+@font-size-h4: 22px;
+@font-size-h5: 18px;
+@font-size-h6: 14px;

package/themes/BuyButton/styles/rio-buyButton.less

@@ -1,12 +1,15 @@
 // Variables
-@import (less) '../../../styles/variables.less';
+@import (less) '../../../styles/variables/_index.less';
+
+// Theme
+@hasDarkmode: true;
 
 // Mapping
 @import (less) '../../../styles/mapping/breakpoint-map.less';
 @import (less) '../../../styles/mapping/color-map.less';
 
 // Mixins
-@import (less) '../../../styles/mixins/_mixins.less';
+@import (less) '../../../styles/mixins/_imports.less';
 
 // Normalize
 @import (less) '../../../styles/design/normalize.less';
@@ -40,7 +43,6 @@
 @import (multiple) "../../../styles/design/responsive/text.less";
 
 // Custom Styles
-
 .hidden-xs {
   @media (max-width: @screen-xs) {
     display: none !important;
@@ -100,6 +102,7 @@
 .skeleton-box {
   display: flex;
   justify-content: space-between;
+  width: 100%;
 
   .skeleton-text {
     display: flex;
@@ -107,6 +110,7 @@
     justify-content: space-between;
     width: 200px;
     max-width: 35%;
+    overflow: hidden;
 
     .skeleton-loader {
       &:first-child {
@@ -122,6 +126,7 @@
   .skeleton-button {
     width: 200px;
     max-width: 35%;
+    overflow: hidden;
 
     .skeleton-loader {
       height: 34px;
@@ -152,9 +157,9 @@
   }
 
   .skeleton-loader {
+    background-color: var(--gray-lighter);
     position: relative;
     width: 100%;
-    background-color: #EDEDED;
   }
 
   .skeleton-bar {
@@ -166,10 +171,10 @@
     transform: translateX(-100%);
     background-image: linear-gradient(
       90deg,
-      rgba(#fff, 0) 0,
-      rgba(#fff, 0.2) 20%,
-      rgba(#fff, 0.5) 60%,
-      rgba(#fff, 0)
+      .hsla(@color-white-hsl, 0)[@result] 0,
+      .hsla(@color-white-hsl, 0.2)[@result] 20%,
+      .hsla(@color-white-hsl, 0.5)[@result] 60%,
+      .hsla(@color-white-hsl, 0)[@result]
     );
     animation: shimmer 2s infinite;
     content: '';

package/themes/MAN/styles/man-uikit.less

@@ -1,6 +1,9 @@
 // Core
 @import (less) '../../../styles/rio-uikit-core.less';
 
+// Theme
+@hasDarkmode: false;
+
 // Utility Classes
 @import (less) '../../../styles/design/responsive/_imports.less';
 .import-reponsive(

package/themes/SCANIA/styles/scania-uikit.less

@@ -1,6 +1,9 @@
 // Core
 @import (less) '../../../styles/rio-uikit-core.less';
 
+// Theme
+@hasDarkmode: false;
+
 // Utility Classes
 @import (less) '../../../styles/design/responsive/_imports.less';
 .import-reponsive(

package/themes/Volkswagen/styles/vw-uikit.less

@@ -1,6 +1,9 @@
 // Core
 @import (less) '../../../styles/rio-uikit-core.less';
 
+// Theme
+@hasDarkmode: false;
+
 // Utility Classes
 @import (less) '../../../styles/design/responsive/_imports.less';
 .import-reponsive(
@@ -86,44 +89,32 @@
 @border-radius-lg: 0;
 
 .btn.btn-default {
-  .button-variant(
+  .button-style(
     ~'';
-    @btn-default-bg;
-    @btn-default-border;
-    @btn-default-color;
+    @brand-primary;
+    .hex-to-LESS-hsl(@color-white)[@result];
+    .hex-to-LESS-hsl(@brand-primary)[@result];
+
     @color-highlight-lightest;
     @color-highlight-lighter;
-    @color-highlight-lighter;
-    @color-highlight-lighter;
-    @btn-default-border;
-    @btn-default-border;
-    @btn-default-border;
-    @btn-default-border;
-    @btn-default-color;
-    @btn-default-color;
-    @btn-default-color;
-    @btn-default-color;
+
+    @brand-primary;
+    @brand-primary;
   );
 }
 
 .btn.btn-primary {
-  .button-variant(
+  .button-style(
     ~'';
-    @btn-primary-bg;
-    @btn-primary-border;
-    @btn-primary-color;
-    darken(@btn-primary-bg, 5%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    darken(@btn-primary-bg, 10%);
-    @btn-primary-color;
-    @btn-primary-color;
-    @btn-primary-color;
-    @btn-primary-color;
+    @color-white;
+    .hex-to-LESS-hsl(@brand-primary)[@result];
+    .hex-to-LESS-hsl(@brand-primary)[@result];
+
+    darken(@brand-primary, 5%);
+    darken(@brand-primary, 10%);
+
+    @brand-primary;
+    @brand-primary;
   );
 }