@roadtrip/components 2.51.1 → 3.0.1

package/dist/collection/components/dialog/dialog.stories.js

@@ -82,7 +82,7 @@ Playground.args = {
   'is-open': true,
   label: 'Dialog title',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" color="secondary" expand>Done</road-button>`,
+  ' ': `<road-button class="mb-0" color="primary" expand>Done</road-button>`,
 };
 
 export const SideActions = Template.bind({});
@@ -91,7 +91,7 @@ SideActions.args = {
   label: 'Dialog title',
   description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
   ' ': `<road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="secondary" expand style="margin-left: 1rem;">Done</road-button>`,
+  <road-button class="mb-0" color="primary" expand style="margin-left: 1rem;">Done</road-button>`,
 };
 
 export const Info = Template.bind({});

package/dist/collection/components/drawer/drawer.dark.css

@@ -29,13 +29,13 @@
  -------------------- */
 
 :host {
-  --background: var(--road-grey-000);
-  --color: var(--road-grey-900);
-  --header-icon: var(--road-grey-900);
-  --header-color: var(--road-grey-900);
-  --header-background: var(--road-grey-000);
+  --background: var(--road-surface);
+  --color: var(--road-on-surface);
+  --header-icon: var(--road-on-surface);
+  --header-color: var(--road-on-surface);
+  --header-background: var(--road-surface);
   --header-delimiter: 0;
-  --back-chevron-color: var(--road-grey-900);
+  --back-chevron-color: var(--road-icon);
   --max-height: auto;
   --z-index: 10;
 
@@ -123,7 +123,7 @@
   pointer-events: auto;
   background-color: var(--background);
   background-clip: padding-box;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-hight);
 }
 
 /* HEADER
@@ -152,9 +152,9 @@
  */
 
 .drawer-header-inverse {
-  --header-icon: var(--road-primary-contrast);
-  --header-color: var(--road-primary-contrast);
-  --header-background: var(--road-primary-900);
+  --header-icon: var(--road-on-primary);
+  --header-color: var(--road-on-primary);
+  --header-background: var(--road-primary-variant);
 
   margin-bottom: 2.5rem;
 }
@@ -206,7 +206,7 @@
   height: 3.5rem;
   padding-left: 3.5rem;
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   font-weight: 400;
 }
 

package/dist/collection/components/drawer/drawer.light.css

@@ -29,13 +29,13 @@
  -------------------- */
 
 :host {
-  --background: var(--road-grey-000);
-  --color: var(--road-grey-900);
-  --header-icon: var(--road-grey-900);
-  --header-color: var(--road-grey-900);
-  --header-background: var(--road-grey-000);
+  --background: var(--road-surface);
+  --color: var(--road-on-surface);
+  --header-icon: var(--road-on-surface);
+  --header-color: var(--road-on-surface);
+  --header-background: var(--road-surface);
   --header-delimiter: 0;
-  --back-chevron-color: var(--road-grey-900);
+  --back-chevron-color: var(--road-icon);
   --max-height: auto;
   --z-index: 10;
 
@@ -123,7 +123,7 @@
   pointer-events: auto;
   background-color: var(--background);
   background-clip: padding-box;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-hight);
 }
 
 /* HEADER
@@ -152,9 +152,9 @@
  */
 
 .drawer-header-inverse {
-  --header-icon: var(--road-primary-contrast);
-  --header-color: var(--road-primary-contrast);
-  --header-background: var(--road-primary-900);
+  --header-icon: var(--road-on-primary);
+  --header-color: var(--road-on-primary);
+  --header-background: var(--road-primary-variant);
 
   margin-bottom: 2.5rem;
 }
@@ -206,7 +206,7 @@
   height: 3.5rem;
   padding-left: 3.5rem;
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   font-weight: 400;
 }
 

package/dist/collection/components/dropdown/dropdown.css

@@ -88,12 +88,12 @@
   width: 100%;
   min-width: 16.875rem;
   padding: 0.5rem 0;
-  color: var(--road-grey-900);
-  background: var(--road-grey-000);
+  color: var(--road-on-surface);
+  background: var(--road-surface);
   border: 1px solid;
-  border-color: var(--road-grey-200);
+  border-color: var(--road-outline-weak);
   border-radius: 0.25rem;
-  box-shadow: 0 0.375rem 0.375rem rgba(41, 44, 51, 0.24);
+  box-shadow: var(--road-elevation-low);
   transition: transform 0.2s ease-in-out;
   transform: scaleY(0);
   transform-origin: 0 0;
@@ -105,19 +105,19 @@
 .dropdown-item {
   min-height: 40px;
   padding: 0 1rem;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border: none;
   outline: none;
 }
 
 .dropdown-item-border {
-  border-color: var(--road-grey-200);
+  border-color: var(--road-outline-weak);
   border-bottom: 1px solid;
 }
 
@@ -127,7 +127,7 @@
 
 .dropdown-item:hover,
 .dropdown-item.focus-visible {
-  background: var(--road-grey-100);
+  background: var(--road-surface-inverse);
 }
 
 

package/dist/collection/components/duration/duration.css

@@ -3,7 +3,7 @@
 }
 
 road-drawer {
-  --background: var(--road-grey-100);
+  --background: var(--road-surface-inverse);
 }
 
 .duration-values {

package/dist/collection/components/flap/flap.css

@@ -17,7 +17,7 @@
   justify-content: center;
   height: 1.5rem;
   padding: 0 0.75rem;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   font-weight: 700;
   background: var(--road-grey-000);
   border: 1px solid transparent;
@@ -48,8 +48,8 @@
 }
 
 :host(.flap-blackfriday) {
-  color: var(--road-grey-999);
-  border-color: var(--road-grey-999);
+  color: var(--road-grey-0);
+  border-color: var(--road-grey-0);
 }
 
 /* SIZES
@@ -58,5 +58,5 @@
 :host(.flap-md) {
   height: 2rem;
   padding: 0 1rem;
-  font-size: 1rem;
+  font-size: var(--road-font-size-16);
 }

package/dist/collection/components/global-navigation/global-navigation.stories.js

@@ -99,38 +99,52 @@ export default {
         </script>
 
     <road-navbar-item tab="tab-home">
-    <road-icon name="navigation-home-outline"></road-icon>
-    <road-label>Home</road-label>
+    <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
+      <road-icon name="navigation-home-outline"></road-icon>
+      <road-label class="font-weight-bold">Home</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-search">
-    <road-icon name="search"></road-icon>
-    <road-label>Search</road-label>
+    <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
+      <road-icon name="search"></road-icon>
+      <road-label class="font-weight-bold">Search</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-catalog">
-    <road-icon name="print-outline"></road-icon>
-    <road-label>Print</road-label>
+    <road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
+      <road-icon name="print-outline"></road-icon>
+      <road-label class="font-weight-bold">Print</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
-    <road-icon name="alert-notification-outline"></road-icon>
-    <road-label>Notifications</road-label>
+    <road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center">
+      <road-icon name="alert-notification-outline"></road-icon>
+      <road-label class="font-weight-bold">Notifications</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
-    <road-icon name="scan"></road-icon>
-    <road-label>Scan</road-label>
+    <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
+      <road-icon name="scan"></road-icon>
+      <road-label class="font-weight-bold">Scan</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
-    <road-icon name="file-catalog"></road-icon>
-    <road-label>Catalogue</road-label>
+    <road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
+      <road-icon name="file-catalog"></road-icon>
+      <road-label class="font-weight-bold">Catalogue</road-label>
+    </road-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
-    <road-icon name="Diagnostic"></road-icon>
-    <road-label>Diagnostic</road-label>
+    <road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center">
+      <road-icon name="Diagnostic"></road-icon>
+      <road-label class="font-weight-bold">Diagnostic</road-label>
+    </road-toolip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">

package/dist/collection/components/icon/icon.css

@@ -54,15 +54,15 @@
  -------------------- */
 
 :host(.icon-primary) {
-  color: var(--road-primary-900);
+  color: var(--road-primary-10);
 }
 
 :host(.icon-secondary) {
-  color: var(--road-primary-500);
+  color: var(--road-primary-50);
 }
 
 :host(.icon-accent) {
-  color: var(--road-secondary-500);
+  color: var(--road-secondary-50);
 }
 
 :host(.icon-info) {
@@ -82,11 +82,11 @@
 }
 
 :host(.icon-default) {
-  color: var(--road-grey-900);
+  color: var(--road-icon);
 }
 
 :host(.icon-white) {
-  color: var(--road-grey-000);
+  color: var(--road-icon-inverse);
 }
 
 /* ROTATION

package/dist/collection/components/img/img.css

@@ -31,7 +31,7 @@
  -------------------- */
 
 :host(.placeholder) {
-  background: var(--road-grey-200);
+  background: var(--road-grey-80);
 }
 
 :host(.placeholder) img {

package/dist/collection/components/input/input.css

@@ -28,7 +28,7 @@
   display: block;
   margin-bottom: var(--margin-bottom);
   font-family: var(--road-font, sans-serif);
-  color: var(--road-grey-900);
+  color: var(--road-grey-10);
 }
 
 /* INPUT
@@ -41,11 +41,11 @@
   height: var(--height);
   padding: 0.75rem 1rem 0;
   margin: 0;
-  font-size: 1rem;
-  color: var(--road-grey-900);
+  font-size: var(--road-body-medium);
+  color: var(--road-on-surface);
   text-align: var(--input-text-align);
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: var(--border-radius);
   box-shadow: none;
   -webkit-appearance: none;
@@ -84,7 +84,7 @@
  */
 
 .form-control::placeholder {
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-extra-weak);
   opacity: 1;
 }
 
@@ -95,7 +95,7 @@
 @media (hover: hover) {
 
   .form-control:not(:disabled):hover {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -125,7 +125,7 @@
 /* stylelint-enable */
 
 .form-control:not(:disabled):focus {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   outline: 0;
 }
 
@@ -136,7 +136,7 @@
 .form-control:disabled,
 .form-control[readonly] {
   cursor: not-allowed;
-  background: var(--road-grey-200);
+  background: var(--road-surface-disabled);
   opacity: 1;
 }
 
@@ -148,9 +148,9 @@
   top: 0.75rem;
   left: 1rem;
   display: block;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.5;
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-extra-weak);
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
@@ -212,13 +212,13 @@
   display: none;
   width: 100%;
   margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--road-danger-text);
+  font-size: var(--road-helper-medium);
+  color: var(--road-on-danger-surface);
 }
 
 .form-control.is-invalid,
 .was-validated .form-control:invalid {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 .form-control.is-invalid ~ .invalid-feedback,
@@ -231,8 +231,8 @@
 
 .helper {
   margin-top: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--road-grey-500);
+  font-size: var(--road-body-small);
+  color: var(--road-on-surface-weak);
 }
 
 
@@ -240,5 +240,5 @@
  -------------------- */
 
 .form-control[type="password"] ~ .checklist-password .invalid{
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-weak);
 }

package/dist/collection/components/input-group/input-group.css

@@ -47,7 +47,7 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--road-grey-500);
+  border-color: var(--road-input-outline);
   border-right-color: transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -55,7 +55,7 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  border-color: var(--road-grey-500);
+  border-color: var(--road-input-outline);
   border-left-width: 0;
 }
 
@@ -66,17 +66,17 @@
 @media (hover: hover) {
 
   .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
     border-right-color: transparent;
   }
 
   .input-group:not(.is-disabled):hover ::slotted([slot="append"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
     border-left-color: transparent;
   }
 
   :host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -85,17 +85,17 @@
  */
 
 .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-right-color: transparent;
 }
 
 :host(.phone-number-group) .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-right-color: transparent;
 }
 
 .input-group:focus-within ::slotted([slot="append"]) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   border-left-color: transparent;
 }
 
@@ -116,7 +116,7 @@
   z-index: 2;
   min-width: 3rem;
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
 }
 
 .input-group-prepend {
@@ -142,12 +142,12 @@
   align-items: center;
   padding: 0 0.5rem;
   margin-bottom: 0;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: center;
   white-space: nowrap;
   cursor: text;
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: 0.25rem;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -173,7 +173,7 @@
 }
 
 :host(.phone-number-group) .input-group-prepend ::slotted([slot="prepend"]) {
-  border-right: 1px solid var(--road-grey-500);
+  border-right: 1px solid var(--road-input-outline);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -183,7 +183,7 @@
 }
 
 .input-group-append ::slotted(road-button) {
-  background-color: var(--road-grey-000);
+  background-color: var(--road-surface);
 }
 
 /* SIZES
@@ -203,11 +203,11 @@
 
 .input-group.is-invalid ::slotted([slot="append"]),
 .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 :host(.phone-number-group) .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 /* DISABLED
@@ -216,7 +216,7 @@
 .input-group.is-disabled ::slotted([slot="append"]),
 .input-group.is-disabled ::slotted([slot="prepend"]) {
   cursor: not-allowed;
-  background: var(--road-grey-200);
+  background: #e4e5e9;
 }
 
 .is-disabled ::slotted(road-button) {

package/dist/collection/components/item/item.css

@@ -22,7 +22,7 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
-  --detail-color: var(--road-grey-900);
+  --detail-color: var(--road-icon);
   --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
@@ -54,9 +54,9 @@
   overflow: inherit;
   font-family: inherit;
   font-size: inherit;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background-color: var(--background-color);
-  border-color: var(--road-grey-300);
+  border-color: var(--road-grey-70);
   border-style: solid;
   border-width: var(--border-width, 0);
   border-radius: var(--border-radius);
@@ -70,7 +70,7 @@
  */
 
 .item-active {
-  background-color: var(--road-grey-100);
+  background-color: var(--road-grey-90);
 }
 
 /**
@@ -79,7 +79,7 @@
 
 button.item-native:not(:disabled):not(.item-active):hover,
 button.item-native:not(:disabled):not(.item-active):focus {
-  background-color: var(--road-grey-100);
+  background-color: var(--road-grey-90);
 }
 
 /**
@@ -116,7 +116,7 @@ a {
   overflow: inherit;
   text-align: inherit;
   text-decoration: none;
-  border-color: var(--road-grey-300);
+  border-color: var(--road-grey-70);
   border-style: solid;
   border-width: var(--inner-border-width, 0);
   outline: 0;

package/dist/collection/components/label/label.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   display: block;
   overflow: hidden;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   color: currentColor;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/collection/components/list/list.css

@@ -32,7 +32,7 @@
  */
 
 :host(.list-lines-full) {
-  border: 1px solid var(--road-grey-300);
+  border: 1px solid var(--road-outline);
   border-bottom: 0;
 }
 

package/dist/collection/components/modal/modal.css

@@ -89,9 +89,9 @@
   width: 100%;
   height: 100vh;
   pointer-events: auto;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   background-clip: padding-box;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-hight);
 }
 
 @media (min-width: 768px) {
@@ -109,12 +109,12 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-900);
+  color: var(--road-on-header-surface);
+  background: var(--road-header-surface);
 }
 
 .modal-header road-icon {
-  color: var(--road-primary-contrast);
+  color: var(--road-header-icon);
 }
 
 @media (min-width: 768px) {
@@ -129,12 +129,12 @@
  */
 
 .modal-header-inverse {
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background: none;
 }
 
 .modal-header-inverse road-icon {
-  color: var(--road-grey-900);
+  color: var(--road-icon);
 }
 
 /* ACTIONS
@@ -180,7 +180,7 @@
   height: 3.5rem;
   padding-left: 3.5rem;
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   font-weight: 400;
 }