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

package/styles/variables/_index.less

@@ -0,0 +1,196 @@
+// RIO cdn
+@cdnBase: "cdn.rio.cloud";
+@fontBase: "fonts";
+
+// Grid
+@grid-columns: 12;
+@grid-gutter-width: 20px;
+@grid-gutter-height: 20px;
+@grid-float-breakpoint: @screen-sm;
+
+// Mapping // must match with the UIKIT demo values
+@import (less) '../mapping/breakpoint-map.less';
+@import (less) '../mapping/color-map.less';
+@import (less) '../mapping/cols-map.less';
+@import (less) '../mapping/numbers-map.less';
+@import (less) '../mapping/positions-map.less';
+@import (less) '../mapping/sizes-map.less';
+@import (less) '../mapping/spacings-map.less';
+
+// Screens
+@import (less) "screens.less";
+
+@screen-xs-min: @screen-xs;
+@screen-xs-max: (@screen-ls - 0.01);
+@screen-ls-min: @screen-ls;
+@screen-ls-max: (@screen-sm - 0.01);
+@screen-sm-min: @screen-sm;
+@screen-sm-max: (@screen-md - 0.01);
+@screen-md-min: @screen-md;
+@screen-md-max: (@screen-lg - 0.01);
+@screen-lg-min: @screen-lg;
+@screen-lg-max: (@screen-xl - 0.01);
+@screen-xl-min: @screen-xl;
+@screen-xl-max: 10000px;
+
+// Container
+@container-ls: @screen-ls - (@grid-gutter-width * 2);
+@container-sm: @screen-sm - (@grid-gutter-width * 2);
+@container-md: @screen-md - (@grid-gutter-width * 2);
+@container-lg: @screen-lg - (@grid-gutter-width * 2);
+@container-xl: @screen-xl - (@grid-gutter-width * 2);
+
+// Container Fluid
+// @container-fluid-xs: px;
+@container-fluid-sm: 980px;
+@container-fluid-md: 1280px;
+@container-fluid-lg: 1440px;
+@container-fluid-xl: 1680px;
+@container-fluid-xxl: 1920px;
+
+// Padding
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+@padding-sm-vertical: 5px;
+@padding-sm-horizontal: 10px;
+@padding-default-vertical: 6px;
+@padding-default-horizontal: 12px;
+@padding-lg-vertical: 10px;
+@padding-lg-horizontal: 16px;
+
+// Border Radius
+@border-radius-xs: 2px;
+@border-radius-sm: 3px;
+@border-radius-default: 4px;
+@border-radius-lg: 6px;
+@border-radius-xl: 8px;
+@border-radius-round: 1000px;
+
+// Build Warmup and Coldplay Colors?
+@buildColdplayColors: true;
+@buildWarmupColors: true;
+
+// CSS Vars
+@import (less) "light_css_variables.less";
+@import (less) "concated_css_variables.less";
+
+// Darkmode
+@hasDarkmode: true;
+@hasDarkmodePrefersColorScheme: false;
+
+& when (@hasDarkmode = true) {
+  @import (less) "dark_css_variables.less";
+}
+
+// Button Sizes
+@btn-size-xs: 22px;
+@btn-size-sm: 30px;
+@btn-size-default: 34px;
+@btn-size-lg: 45px;
+
+// Button interaction opacity
+@btn-hover-brightness: 5%;
+@btn-active-brightness: 13%;
+
+@btn-hover-border-brightness: 8%;
+@btn-active-border-brightness: 16%;
+
+// Text
+@import (less) "text.less";
+
+// Text - Sizes
+@font-size-xs: @font-size-12; // only used in buttons and 10px is too small
+@font-size-sm: @font-size-12;
+@font-size-default: @font-size-14;
+@font-size-lg: @font-size-16;
+@font-size-xl: 25px;
+@font-size-xxl: 30px;
+
+// Text - Headlines - Weights
+@headings-font-family: @font-family-base;
+@headings-font-weight: @font-medium;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+
+// Text - Line Heights
+@line-height-xs: 1.5;
+@line-height-sm: 1.5;
+@line-height-default: 1.428571429;
+@line-height-lg: 1.4;
+
+// Text - Font Family
+@font-family-base: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-monospace: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+@font-family-ios: 'SF Text', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+@font-family-android: 'Roboto', 'Source Sans Pro', Helvetica, Arial, sans-serif;
+
+@font-source-sans: true;
+@font-man: false;
+@font-redring: false;
+@font-san-francisco: false;
+@font-roboto: false;
+@font-vw: false;
+@font-scania: false;
+
+// Iconfont
+@icon-font-name: "rioglyph";
+
+// Variables
+@text-color: var(--gray-darkest);
+@link-color: var(--brand-primary);
+@link-hover-color: hsl(var(--brand-primary-h),var(--brand-primary-s),calc(var(--brand-primary-l) - 10%));
+
+// Media Queries
+@screen-xs-min: @screen-xs;
+@screen-sm-min: @screen-sm;
+@screen-md-min: @screen-md;
+@screen-lg-min: @screen-lg;
+
+// ApplicationLayout
+@ApplicationLayoutBodyPadding: 30px;
+@ApplicationLayoutNotResponsiveWidth: 900px;
+
+@ApplicationLayoutBodyHeight: 100vh; // --vh fallback
+@ApplicationLayoutBodyHeightAndViewportFix: ~'calc(var(--vh, 1vh) * 100)';
+
+@ApplicationLayoutBodyHeightWithoutHeader: ~'calc(100vh - @{ApplicationLayoutHeaderHeight})'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - @{ApplicationLayoutHeaderHeight})';
+
+@ApplicationLayoutBodyHeightWithoutFooter: ~'calc(100vh - (var(--ApplicationLayoutBodyBottomBarHeight)))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (var(--ApplicationLayoutBodyBottomBarHeight)))';
+
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooter: ~'calc(100vh - (@{ApplicationLayoutHeaderHeight} + var(--ApplicationLayoutBodyBottomBarHeight)))'; // --vh fallback
+@ApplicationLayoutBodyHeightWithoutHeaderWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{ApplicationLayoutHeaderHeight} + var(--ApplicationLayoutBodyBottomBarHeight)))';
+
+// ApplicationHeader
+@ApplicationLayoutHeaderHeight: 50px;
+@ApplicationLayoutHeaderHeightWithoutBorder: ~'calc(@{ApplicationLayoutHeaderHeight} - 1px)';
+
+@brand-icon-home: url('https://cdn.rio.cloud/svg/common/ico_home.svg');
+@brand-icon-rio: url('https://cdn.rio.cloud/svg/common/ico_rio_colored.svg');
+
+@dark-brand-icon-home: url('https://cdn.rio.cloud/svg/common/ico_home_white.svg');
+@dark-brand-icon-rio: url('https://cdn.rio.cloud/svg/common/ico_rio_white.svg');
+
+@brand-icon-size: 50px;
+
+@ApplicationLayoutHeaderHeighticon-height: @ApplicationLayoutHeaderHeight;
+@ApplicationLayoutHeaderHeightpadding-horizontal: @grid-gutter-width;
+
+// ApplicationLayoutBody
+@ApplicationLayoutBodyNavigationHeight: 50px;
+
+// ApplicationFooter
+@ApplicationLayoutBodyBottomBarHeight: var(--ApplicationLayoutBodyBottomBarHeight);
+
+// Z-index
+@zindex-tooltip: 1060;
+@zindex-modal: 1050;
+@zindex-modal-background: 1040;
+@zindex-popover: 1010;
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-sidebar: 990;
+@zindex-tooltip-onboarding: 990;
+@zindex-map-marker-hover: 801;
+@zindex-map-marker-active: 800;

package/styles/variables/colors.json

@@ -0,0 +1,67 @@
+{
+	"always-color-white": "#ffffff",
+	"always-color-black": "#000000",
+	"color-white": "#ffffff",
+	"color-black": "#000000",
+	"gray-darkest": "#2a3740",
+	"gray-darker": "#4C5667",
+	"gray-dark": "#697A8B",
+	"gray": "#A7AFBB",
+	"gray-light": "#D0D8DE",
+	"gray-lighter": "#E5EBF0",
+	"gray-lightest": "#f6f8f9",
+	"brand-primary": "#30b4c0",
+	"brand-secondary": "#b23672",
+	"brand-primary-decent": "#f4fbfc",
+	"brand-secondary-decent": "#fbf5f8",
+	"brand-info": "#4B80A6",
+	"brand-success": "#5cb85c",
+	"brand-warning": "#ff8e3c",
+	"brand-danger": "#d90000",
+	"brand-info-decent": "#f5f8fb",
+	"brand-success-decent": "#f6fbf5",
+	"brand-warning-decent": "#fdf5f0",
+	"brand-danger-decent": "#fdf3f3",
+	"color-code": "#f3f3f4",
+	"color-status-available": "#239b7d",
+	"color-status-driving": "#3690ae",
+	"color-status-resting": "#626b72",
+	"color-status-working": "#94488b",
+	"color-map-marker-active": "#ffffff",
+	"color-map-marker-asset": "#2a3740",
+	"color-map-marker-poi": "#b23672",
+	"color-map-marker-geofence": "#5a4876",
+	"color-map-marker-route": "#3690ae",
+	"color-map-marker-text": "#ffffff",
+	"color-rating-1": "#d90000",
+	"color-rating-2": "#ff8e3c",
+	"color-rating-3": "#f8c575",
+	"color-rating-4": "#5cb85c",
+	"color-rating-5": "#4b924c",
+	"color-highlight-darkest": "#114146",
+	"color-highlight-darker": "#1c686e",
+	"color-highlight-dark": "#268e97",
+	"color-highlight": "#30b4c0",
+	"color-highlight-light": "#8ddbe3",
+	"color-highlight-lighter": "#cef0f3",
+	"color-highlight-lightest": "#ebf9fa",
+	"color-highlight-decent": "#f3fbfc",
+	"color-coldplay-wine": "#520D4E",
+	"color-coldplay-aubergine": "#5a4876",
+	"color-coldplay-kashmir": "#536E8B",
+	"color-coldplay-fountain": "#67abc5",
+	"color-coldplay-turquoise": "#4ECCC1",
+	"color-coldplay-bermuda": "#79D4B3",
+	"color-coldplay-moos": "#A1DAA3",
+	"color-coldplay-primrose": "#C7E291",
+	"color-coldplay-khaki": "#F0EB83",
+	"color-warmup-crimson": "#31144F",
+	"color-warmup-victoria": "#493D6D",
+	"color-warmup-cadillac": "#7E3E72",
+	"color-warmup-raspberry": "#B23672",
+	"color-warmup-cerise": "#E72472",
+	"color-warmup-charm": "#C9778D",
+	"color-warmup-salmon": "#F19588",
+	"color-warmup-cherokee": "#F5BB89",
+	"color-warmup-corn": "#FDE082"
+}

package/styles/variables/concated_css_variables.less

@@ -0,0 +1,66 @@
+// Reusable concated hsl css vars as less vars
+@color-white-hsl: var(--color-white-h), var(--color-white-s), var(--color-white-l);
+@color-black-hsl: var(--color-black-h), var(--color-black-s), var(--color-black-l);
+@always-color-white-hsl: var(--always-color-white-h), var(--always-color-white-s), var(--always-color-white-l);
+@always-color-black-hsl: var(--always-color-black-h), var(--always-color-black-s), var(--always-color-black-l);
+@gray-darkest-hsl: var(--gray-darkest-h), var(--gray-darkest-s), var(--gray-darkest-l);
+@gray-darker-hsl: var(--gray-darker-h), var(--gray-darker-s), var(--gray-darker-l);
+@gray-dark-hsl: var(--gray-dark-h), var(--gray-dark-s), var(--gray-dark-l);
+@gray-hsl: var(--gray-h), var(--gray-s), var(--gray-l);
+@gray-light-hsl: var(--gray-light-h), var(--gray-light-s), var(--gray-light-l);
+@gray-lighter-hsl: var(--gray-lighter-h), var(--gray-lighter-s), var(--gray-lighter-l);
+@gray-lightest-hsl: var(--gray-lightest-h), var(--gray-lightest-s), var(--gray-lightest-l);
+@brand-primary-hsl: var(--brand-primary-h), var(--brand-primary-s), var(--brand-primary-l);
+@brand-secondary-hsl: var(--brand-secondary-h), var(--brand-secondary-s), var(--brand-secondary-l);
+@brand-primary-decent-hsl: var(--brand-primary-decent-h), var(--brand-primary-decent-s), var(--brand-primary-decent-l);
+@brand-secondary-decent-hsl: var(--brand-secondary-decent-h), var(--brand-secondary-decent-s), var(--brand-secondary-decent-l);
+@brand-info-hsl: var(--brand-info-h), var(--brand-info-s), var(--brand-info-l);
+@brand-success-hsl: var(--brand-success-h), var(--brand-success-s), var(--brand-success-l);
+@brand-warning-hsl: var(--brand-warning-h), var(--brand-warning-s), var(--brand-warning-l);
+@brand-danger-hsl: var(--brand-danger-h), var(--brand-danger-s), var(--brand-danger-l);
+@brand-info-decent-hsl: var(--brand-info-decent-h), var(--brand-info-decent-s), var(--brand-info-decent-l);
+@brand-success-decent-hsl: var(--brand-success-decent-h), var(--brand-success-decent-s), var(--brand-success-decent-l);
+@brand-warning-decent-hsl: var(--brand-warning-decent-h), var(--brand-warning-decent-s), var(--brand-warning-decent-l);
+@brand-danger-decent-hsl: var(--brand-danger-decent-h), var(--brand-danger-decent-s), var(--brand-danger-decent-l);
+@color-code-hsl: var(--color-code-h), var(--color-code-s), var(--color-code-l);
+@color-status-available-hsl: var(--color-status-available-h), var(--color-status-available-s), var(--color-status-available-l);
+@color-status-driving-hsl: var(--color-status-driving-h), var(--color-status-driving-s), var(--color-status-driving-l);
+@color-status-resting-hsl: var(--color-status-resting-h), var(--color-status-resting-s), var(--color-status-resting-l);
+@color-status-working-hsl: var(--color-status-working-h), var(--color-status-working-s), var(--color-status-working-l);
+@color-map-marker-active-hsl: var(--color-map-marker-active-h), var(--color-map-marker-active-s), var(--color-map-marker-active-l);
+@color-map-marker-asset-hsl: var(--color-map-marker-asset-h), var(--color-map-marker-asset-s), var(--color-map-marker-asset-l);
+@color-map-marker-poi-hsl: var(--color-map-marker-poi-h), var(--color-map-marker-poi-s), var(--color-map-marker-poi-l);
+@color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
+@color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
+@color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
+@color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
+@color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);
+@color-highlight-hsl: var(--color-highlight-h), var(--color-highlight-s), var(--color-highlight-l);
+@color-highlight-light-hsl: var(--color-highlight-light-h), var(--color-highlight-light-s), var(--color-highlight-light-l);
+@color-highlight-lighter-hsl: var(--color-highlight-lighter-h), var(--color-highlight-lighter-s), var(--color-highlight-lighter-l);
+@color-highlight-lightest-hsl: var(--color-highlight-lightest-h), var(--color-highlight-lightest-s), var(--color-highlight-lightest-l);
+@color-highlight-decent-hsl: var(--color-highlight-decent-h), var(--color-highlight-decent-s), var(--color-highlight-decent-l);
+@color-rating-1-hsl: var(--color-rating-1-h), var(--color-rating-1-s), var(--color-rating-1-l);
+@color-rating-2-hsl: var(--color-rating-2-h), var(--color-rating-2-s), var(--color-rating-2-l);
+@color-rating-3-hsl: var(--color-rating-3-h), var(--color-rating-3-s), var(--color-rating-3-l);
+@color-rating-4-hsl: var(--color-rating-4-h), var(--color-rating-4-s), var(--color-rating-4-l);
+@color-rating-5-hsl: var(--color-rating-5-h), var(--color-rating-5-s), var(--color-rating-5-l);
+@color-coldplay-wine-hsl: var(--color-coldplay-wine-h), var(--color-coldplay-wine-s), var(--color-coldplay-wine-l);
+@color-coldplay-aubergine-hsl: var(--color-coldplay-aubergine-h), var(--color-coldplay-aubergine-s), var(--color-coldplay-aubergine-l);
+@color-coldplay-kashmir-hsl: var(--color-coldplay-kashmir-h), var(--color-coldplay-kashmir-s), var(--color-coldplay-kashmir-l);
+@color-coldplay-fountain-hsl: var(--color-coldplay-fountain-h), var(--color-coldplay-fountain-s), var(--color-coldplay-fountain-l);
+@color-coldplay-turquoise-hsl: var(--color-coldplay-turquoise-h), var(--color-coldplay-turquoise-s), var(--color-coldplay-turquoise-l);
+@color-coldplay-bermuda-hsl: var(--color-coldplay-bermuda-h), var(--color-coldplay-bermuda-s), var(--color-coldplay-bermuda-l);
+@color-coldplay-moos-hsl: var(--color-coldplay-moos-h), var(--color-coldplay-moos-s), var(--color-coldplay-moos-l);
+@color-coldplay-primrose-hsl: var(--color-coldplay-primrose-h), var(--color-coldplay-primrose-s), var(--color-coldplay-primrose-l);
+@color-coldplay-khaki-hsl: var(--color-coldplay-khaki-h), var(--color-coldplay-khaki-s), var(--color-coldplay-khaki-l);
+@color-warmup-crimson-hsl: var(--color-warmup-crimson-h), var(--color-warmup-crimson-s), var(--color-warmup-crimson-l);
+@color-warmup-victoria-hsl: var(--color-warmup-victoria-h), var(--color-warmup-victoria-s), var(--color-warmup-victoria-l);
+@color-warmup-cadillac-hsl: var(--color-warmup-cadillac-h), var(--color-warmup-cadillac-s), var(--color-warmup-cadillac-l);
+@color-warmup-raspberry-hsl: var(--color-warmup-raspberry-h), var(--color-warmup-raspberry-s), var(--color-warmup-raspberry-l);
+@color-warmup-cerise-hsl: var(--color-warmup-cerise-h), var(--color-warmup-cerise-s), var(--color-warmup-cerise-l);
+@color-warmup-charm-hsl: var(--color-warmup-charm-h), var(--color-warmup-charm-s), var(--color-warmup-charm-l);
+@color-warmup-salmon-hsl: var(--color-warmup-salmon-h), var(--color-warmup-salmon-s), var(--color-warmup-salmon-l);
+@color-warmup-cherokee-hsl: var(--color-warmup-cherokee-h), var(--color-warmup-cherokee-s), var(--color-warmup-cherokee-l);
+@color-warmup-corn-hsl: var(--color-warmup-corn-h), var(--color-warmup-corn-s), var(--color-warmup-corn-l);

package/styles/variables/dark_colors.less

@@ -0,0 +1,88 @@
+// Color - Text
+@dark-color-white: #151515;
+@dark-color-black: #ededed;
+
+// Color - Grays
+@dark-gray-darkest: #8f999c;
+@dark-gray-darker: #757c7f;
+@dark-gray-dark: #72797c;
+@dark-gray: #6e757a;
+@dark-gray-light: #444a4c;
+@dark-gray-lighter: #2a2f30;
+@dark-gray-lightest: #0f1111;
+
+// Color - Brand
+@dark-brand-primary: #30b4c0;
+@dark-brand-secondary: #b23672;
+
+// Color - Brand Decent
+@dark-brand-primary-decent: #123c40;
+@dark-brand-secondary-decent: #311531;
+
+// Color - Status
+@dark-brand-info: #4B80A6;
+@dark-brand-success: #53a653;
+@dark-brand-warning: #d67632;
+@dark-brand-danger: #ca2020;
+
+// Color - Status Decent
+@dark-brand-info-decent: #182d3d;
+@dark-brand-success-decent: #182f18;
+@dark-brand-warning-decent: #371f0f;
+@dark-brand-danger-decent: #3e0b0b;
+
+// Color - Code
+@dark-color-code: #262626;
+
+// Color - Driving Status // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
+@dark-color-status-available: @color-status-available;
+@dark-color-status-driving: @color-status-driving;
+@dark-color-status-resting: @color-status-resting;
+@dark-color-status-working: @color-status-working;
+
+// Color - Map Marker // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
+@dark-color-map-marker-active: @color-map-marker-active;
+@dark-color-map-marker-asset: @color-map-marker-asset;
+@dark-color-map-marker-poi: @color-map-marker-poi;
+@dark-color-map-marker-geofence: @color-map-marker-geofence;
+@dark-color-map-marker-route: @color-map-marker-route;
+@dark-color-map-marker-text: @color-map-marker-text;
+
+// Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
+@dark-color-rating-1: @color-rating-1;
+@dark-color-rating-2: @color-rating-2;
+@dark-color-rating-3: @color-rating-3;
+@dark-color-rating-4: @color-rating-4;
+@dark-color-rating-5: @color-rating-5;
+
+// Color - Highlight
+@dark-color-highlight-darkest: #def2f5;
+@dark-color-highlight-darker: #c9ebef;
+@dark-color-highlight-dark: #a3dbe3;
+@dark-color-highlight: @dark-brand-primary;
+@dark-color-highlight-light: #3a808b;
+@dark-color-highlight-lighter: #2a5b62;
+@dark-color-highlight-lightest: #1b383d;
+@dark-color-highlight-decent: #0e191b;
+
+// Color - RIO Coldplay // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
+@dark-color-coldplay-wine: @color-coldplay-wine;
+@dark-color-coldplay-aubergine: @color-coldplay-aubergine;
+@dark-color-coldplay-kashmir: @color-coldplay-kashmir;
+@dark-color-coldplay-fountain: @color-coldplay-fountain;
+@dark-color-coldplay-turquoise: @color-coldplay-turquoise;
+@dark-color-coldplay-bermuda: @color-coldplay-bermuda;
+@dark-color-coldplay-moos: @color-coldplay-moos;
+@dark-color-coldplay-primrose: @color-coldplay-primrose;
+@dark-color-coldplay-khaki: @color-coldplay-khaki;
+
+// Color - RIO Warmup // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
+@dark-color-warmup-crimson: @color-warmup-crimson;
+@dark-color-warmup-victoria: @color-warmup-victoria;
+@dark-color-warmup-cadillac: @color-warmup-cadillac;
+@dark-color-warmup-raspberry: @color-warmup-raspberry;
+@dark-color-warmup-cerise: @color-warmup-cerise;
+@dark-color-warmup-charm: @color-warmup-charm;
+@dark-color-warmup-salmon: @color-warmup-salmon;
+@dark-color-warmup-cherokee: @color-warmup-cherokee;
+@dark-color-warmup-corn: @color-warmup-corn;

package/styles/variables/dark_css_variables.less

@@ -0,0 +1,28 @@
+// Darkmode CSS Vars
+@import (less) "dark_colors.less";
+@import (less) "dark_css_variables_map.less";
+
+.createDarkmodeCssVars() {
+  each(@darkModeColors, {
+    --@{key}: @value;
+    --@{key}-h: hue(@value);
+    --@{key}-s: saturation(@value);
+    --@{key}-l: lightness(@value);
+  })
+
+  each(@darkModeVariables, {
+    --@{key}: @value;
+  })
+}
+
+& when (@hasDarkmodePrefersColorScheme = true) {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      .createDarkmodeCssVars();
+    }
+  }
+}
+
+:root[data-theme="dark"] {
+  .createDarkmodeCssVars();
+}

package/styles/variables/dark_css_variables_map.less

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

package/styles/variables/light_colors.less

@@ -0,0 +1,92 @@
+// Colors
+@always-color-white: #ffffff;
+@always-color-black: #000000;
+
+// Color - Text
+@color-white: #ffffff;
+@color-black: #000000;
+
+// Color - Grays
+@gray-darkest: #2a3740;
+@gray-darker: #4C5667;
+@gray-dark: #697A8B;
+@gray: #A7AFBB;
+@gray-light: #D0D8DE;
+@gray-lighter: #E5EBF0;
+@gray-lightest: #f6f8f9;
+
+// Color - Brand
+@brand-primary: #30b4c0;
+@brand-secondary: #b23672;
+
+// Color - Brand Decent
+@brand-primary-decent: #f4fbfc;
+@brand-secondary-decent: #fbf5f8;
+
+// Color - Status
+@brand-info: #4B80A6;
+@brand-success: #5cb85c;
+@brand-warning: #ff8e3c;
+@brand-danger: #d90000;
+
+// Color - Status Decent
+@brand-info-decent: #f5f8fb;
+@brand-success-decent: #f6fbf5;
+@brand-warning-decent: #fdf5f0;
+@brand-danger-decent: #fdf3f3;
+
+// Color - Code
+@color-code: #f3f3f4;
+
+// Color - Driving Status
+@color-status-available: #239b7d;
+@color-status-driving: #3690ae;
+@color-status-resting: #626b72;
+@color-status-working: #94488b;
+
+// Color - Map Marker
+@color-map-marker-active: #ffffff;
+@color-map-marker-asset: #2a3740;
+@color-map-marker-poi: #b23672;
+@color-map-marker-geofence: #5a4876;
+@color-map-marker-route: #3690ae;
+@color-map-marker-text: #ffffff;
+
+// Color - Rating
+@color-rating-1: #d90000;
+@color-rating-2: #ff8e3c;
+@color-rating-3: #f8c575;
+@color-rating-4: #5cb85c;
+@color-rating-5: #4b924c;
+
+// Color - Highlight
+@color-highlight-darkest: #114146;
+@color-highlight-darker: #1c686e;
+@color-highlight-dark: #268e97;
+@color-highlight: #30b4c0;
+@color-highlight-light: #8ddbe3;
+@color-highlight-lighter: #cef0f3;
+@color-highlight-lightest: #ebf9fa;
+@color-highlight-decent: #f3fbfc;
+
+// Color - RIO Coldplay
+@color-coldplay-wine: #520D4E;
+@color-coldplay-aubergine: #5a4876;
+@color-coldplay-kashmir: #536E8B;
+@color-coldplay-fountain: #67abc5;
+@color-coldplay-turquoise: #4ECCC1;
+@color-coldplay-bermuda: #79D4B3;
+@color-coldplay-moos: #A1DAA3;
+@color-coldplay-primrose: #C7E291;
+@color-coldplay-khaki: #F0EB83;
+
+// Color - RIO Warmup
+@color-warmup-crimson: #31144F;
+@color-warmup-victoria: #493D6D;
+@color-warmup-cadillac: #7E3E72;
+@color-warmup-raspberry: #B23672;
+@color-warmup-cerise: #E72472;
+@color-warmup-charm: #C9778D;
+@color-warmup-salmon: #F19588;
+@color-warmup-cherokee: #F5BB89;
+@color-warmup-corn: #FDE082;

package/styles/variables/light_css_variables.less

@@ -0,0 +1,17 @@
+// Color Vars and Maps
+@import (less) "light_colors.less";
+@import (less) "light_css_variables_map.less";
+
+// Default CSS Vars
+:root, :root[data-theme="light"] {
+  each(@lightModeColors, {
+    --@{key}: @value;
+    --@{key}-h: hue(@value);
+    --@{key}-s: saturation(@value);
+    --@{key}-l: lightness(@value);
+  })
+
+  each(@lightModeVariables, {
+    --@{key}: @value;
+  })
+}