@roadtrip/components 2.51.1 → 3.0.1

package/dist/collection/components/navbar/navbar.css

@@ -24,8 +24,8 @@
   text-align: center;
   -webkit-user-select: none;
           user-select: none;
-  background-color: var(--road-grey-000);
-  border-top: 1px solid var(--road-grey-300);
+  background-color: var(--road-surface);
+  border-top: 1px solid var(--road-outline);
 }
 
 @media (max-width: 576px) {
@@ -43,7 +43,7 @@
     width: 104px;
     height: 100%;
     border-top: 0;
-    border-right: 1px solid var(--road-grey-300);
+    border-right: 1px solid var(--road-outline);
   }
 }
 

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

@@ -7,6 +7,7 @@ export default {
   component: 'road-navbar',
   subcomponents: {
     'road-navbar-item': 'road-navbar-item',
+    'road-tooltip': 'road-tooltip',
   },
   parameters: {
     actions: {
@@ -57,38 +58,52 @@ export default {
     </road-profil-dropdown>
 
     <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="Catalog" position="right" trigger="hover" contentalign="center">
+      <road-icon name="file-catalog"></road-icon>
+      <road-label class="font-weight-bold">Catalogue</road-label>
+    </road-tootltip>
   </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-tooltip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
@@ -190,28 +205,38 @@ Selected.args = {
   </road-profil-dropdown>
   
   <road-navbar-item tab="tab-home" selected="true">
-    <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-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-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>`,
 };
 
@@ -238,28 +263,38 @@ withNotifications.args = {
   </road-profil-dropdown>
 
   <road-navbar-item tab="tab-home" selected="true">
-    <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="Scan" position="right" trigger="hover" contentalign="center">
+      <road-icon name="print-outline"></road-icon>
+      <road-label class="font-weight-bold">Scan</road-label>
+    </road-tooltip>
     <road-badge>3</road-badge>
   </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="Catalog" position="right" trigger="hover" contentalign="center">
+      <road-icon name="file-catalog"></road-icon>
+      <road-label class="font-weight-bold">Catalog</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>`,
 };

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

@@ -19,7 +19,6 @@
   flex-grow: 1;
   align-items: center;
   justify-content: center;
-  font-weight: 700;
   text-align: center;
   white-space: nowrap;
 }
@@ -40,7 +39,7 @@
 
 :host(.tab-selected),
 :host(.tab-selected) ::slotted(road-icon) {
-  color: var(--road-primary-500);
+  color: var(--road-primary);
 }
 
 :host(.tab-selected)::after {
@@ -50,9 +49,9 @@
   display: block;
   width: 100%;
   height: 4px;
-  color: var(--road-primary-500);
+  color: var(--road-primary);
   content: "";
-  background-color: var(--road-primary-500);
+  background-color: var(--road-primary);
 }
 
 @media (min-width: 1200px) {
@@ -79,7 +78,7 @@
 :host(:hover) ::slotted(road-icon)::after,
 :host(:hover) ::slotted(road-label),
 :host(:hover) ::slotted(road-label)::after {
-  color: var(--road-primary-500);
+  color: var(--road-primary);
 }
 
 
@@ -96,7 +95,7 @@
   width: 100%;
   height: 100%;
   margin: 0;
-  overflow: hidden;
+  overflow: visible;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
@@ -147,6 +146,17 @@
   fill: currentColor;
 }
 
+/* TOOLTIP
+ -------------------- */
+
+@media (min-width: 1200px) {
+
+  :host ::slotted(road-tooltip) {
+    width: 100%;
+  }
+
+}
+
 /* LABEL
  -------------------- */
 
@@ -156,7 +166,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  font-size: 0.875rem;
+  font-size: var(--road-button-small);
   font-weight: 700;
   text-align: center;
   white-space: nowrap;
@@ -179,6 +189,6 @@
   z-index: 1;
   box-sizing: border-box;
   height: auto;
-  font-size: 0.625rem;
+  font-size: var(--road-font-size-10);
   font-weight: 400;
 }

package/dist/collection/components/plate-number/plate-number.css

@@ -21,7 +21,7 @@
 .plate-number-end {
   width: 1.75rem;
   height: calc(3rem - 0.25rem);
-  background: var(--road-info-text);
+  background: var(--road-info-50);
 }
 
 .input-group-prepend {
@@ -41,7 +41,7 @@
   padding: 0;
   margin-right: 0;
   margin-left: 1px;
-  color: var(--road-info-contrast);
+  color: var(--road-icon-inverse);
   border-radius: 0.125rem 0 0 0.125rem;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .plate-number-location {
-  font-size: 0.875rem;
+  font-size: var(--road-button-medium);
   font-weight: 700;
 }
 
@@ -62,13 +62,13 @@
 }
 
 .plate-number-be .plate-number-input {
-  color: var(--road-danger-text);
+  color: var(--road-on-danger-surface);
 }
 
 .plate-number-be .plate-number-input,
 .plate-number-be .input-group-append,
 .plate-number-be .input-group-prepend {
-  border-color: var(--road-danger-text);
+  border-color: var(--road-danger-outline);
 }
 
 /* INPUT
@@ -80,12 +80,12 @@
   height: 3rem;
   margin: 0;
   font-family: var(--road-font, sans-serif);
-  font-size: 1.75rem;
+  font-size: var(--road-heading-04);
   font-weight: 700;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-align: center;
-  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;
   outline: 0;
   box-shadow: none;
@@ -95,7 +95,7 @@
 }
 
 .plate-number-input::placeholder {
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-extra-weak);
   opacity: 1;
 }
 
@@ -105,9 +105,9 @@
 
 .plate-number-input:disabled,
 .plate-number-input[readonly] {
-  color: var(--road-grey-900);
+  color: var(--road-on-surface-disabled);
   cursor: not-allowed;
-  background: var(--road-disabled);
+  background: var(--road-surface-disabled);
   opacity: 1;
 }
 
@@ -115,7 +115,8 @@
 .plate-number-input[readonly] ~ .input-group-prepend,
 .plate-number-input:disabled ~ .input-group-append,
 .plate-number-input[readonly] ~ .input-group-append {
-  background: var(--road-disabled);
+  cursor: not-allowed;
+  background: var(--road-surface-disabled);
 }
 
 /**
@@ -125,7 +126,7 @@
 @media (hover: hover) {
 
   .plate-number-input:not(:disabled):not([readonly]):hover {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -134,7 +135,7 @@
  */
 
 .plate-number-input:not([readonly]):focus {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   outline: 0;
 }
 

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

@@ -16,7 +16,7 @@
 :host {
   --margin-top: 0.5rem;
   display: block;
-  font-size: 1rem;
+  font-size: var(--road-font-size-16);
 }
 
 .dropdown {
@@ -70,17 +70,18 @@
   position: absolute;
   top: 0;
   left: 5.5rem;
+  z-index: 2;
   display: flex;
   flex-direction: column;
   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;
@@ -90,7 +91,7 @@
  -------------------- */
 
 road-item {
-  font-size: 1rem;
+  font-size: var(--road-button-medium);
 }
 
 .profil-item {
@@ -98,7 +99,7 @@ road-item {
   padding-bottom: 1rem;
   margin: 1rem;
   cursor: auto;
-  border-bottom: 1px solid var(--road-grey-200);
+  border-bottom: 1px solid var(--road-outline);
 }
 
 .profil-item-info {
@@ -122,19 +123,19 @@ road-item {
   align-items: center;
   min-height: 40px;
   padding: 0 1rem;
-  font-size: 1rem;
+  font-size: var(--road-button-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);
   border-bottom: 1px solid;
 }
 
@@ -153,5 +154,5 @@ road-item.focus-visible:first-child {
 
 road-item:hover,
 road-item.focus-visible {
-  background: var(--road-grey-100);
+  background: var(--road-surface-inverse);
 }

package/dist/collection/components/progress/progress.css

@@ -20,8 +20,8 @@
   display: flex;
   height: 0.25rem;
   overflow: hidden;
-  font-size: 0.75rem;
-  background-color: var(--road-grey-200);
+  font-size: var(--road-label-small);
+  background-color: var(--road-on-surface-disabled);
   border-radius: var(--border-radius);
 }
 
@@ -39,12 +39,12 @@
 }
 
 .progress-element-label {
-  font-size: 0.875rem;
+  font-size: var(--road-label-medium);
   text-align: left;
 }
 
 .progress-element-step {
-  font-size: 0.875rem;
+  font-size: var(--road-label-medium);
   text-align: right;
 }
 
@@ -65,25 +65,25 @@
  -------------------- */
 
 .progress.progress-primary .progress-bar {
-  background: var(--road-primary-500);
+  background: var(--road-primary);
 }
 
 .progress.progress-secondary .progress-bar {
-  background: var(--road-secondary-600);
+  background: var(--road-secondary);
 }
 
 .progress.progress-info .progress-bar {
-  background: var(--road-info-default);
+  background: var(--road-info-surface-inverse);
 }
 
 .progress.progress-success .progress-bar {
-  background: var(--road-success-default);
+  background: var(--road-success-surface-inverse);
 }
 
-progress.progress-warning .progress-bar {
-  background: var(--road-warning-default);
+.progress.progress-warning .progress-bar {
+  background: var(--road-warning-surface-inverse);
 }
 
 .progress.progress-danger .progress-bar {
-  background: var(--road-danger-default);
+  background: var(--road-danger-surface-inverse);
 }

package/dist/collection/components/radio/radio.css

@@ -20,9 +20,9 @@
   display: block;
   margin-bottom: 1.5rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
 }
 
 /**
@@ -67,8 +67,8 @@
   height: 1.25rem;
   margin: 0.1rem 0.75rem 0 0;
   content: "";
-  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: 50%;
   transition: border-color 0.2s ease-in-out;
 }
@@ -82,7 +82,7 @@
   width: 0.875rem;
   height: 0.875rem;
   content: "";
-  background: var(--road-grey-400);
+  background: var(--road-grey-60);
   border: none;
   border-radius: 50%;
   transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
@@ -97,11 +97,11 @@
 @media (hover: hover) {
 
   .form-radio-input ~ .form-radio-label:hover::before {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-surface);
   }
 
   .form-radio-input:checked ~ .form-radio-label:hover::after {
-    background: var(--road-primary-700);
+    background: var(--road-input-surface-variant);
   }
 }
 
@@ -110,7 +110,7 @@
  */
 
 .form-radio-input:checked ~ .form-radio-label::after {
-  background: var(--road-primary-500);
+  background: var(--road-input-surface);
   opacity: 1;
   transform: scale(1);
 }
@@ -120,7 +120,7 @@
  */
 
 .form-radio-input.focus-visible ~ .form-radio-label::before {
-  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);
+  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);
 }
 
 .form-radio-input.focus-visible:checked ~ .form-radio-label::after {
@@ -138,20 +138,20 @@
 
 .form-radio-input:disabled ~ .form-radio-label::before,
 .form-radio-input[readonly] ~ .form-radio-label::before {
-  background: var(--road-disabled);
+  background: var(--road-on-surface-disabled);
   border: none;
 }
 
 .form-radio-input:disabled ~ .form-radio-label::after,
 .form-radio-input[readonly] ~ .form-radio-label::after {
-  background: var(--road-grey-400);
+  background: var(--road-grey-60);
 }
 
 /* ERROR
  -------------------- */
 
 .form-radio-input.is-invalid ~ .form-radio-label::before {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 /* POSITION

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

@@ -21,7 +21,7 @@
  -------------------- */
 
 :host {
-  --asterisk-color: var(--road-grey-900);
+  --asterisk-color: var(--road-on-surface);
 
   position: relative;
   display: block;
@@ -48,8 +48,8 @@
   flex: 0 0 100%;
   width: 100%;
   margin: 0.5rem 0 0;
-  font-size: 0.75rem;
-  color: var(--road-danger-text);
+  font-size: var(--road-font-size-12);
+  color: var(--road-on-danger-surface);
 }
 
 /* HELPER
@@ -57,6 +57,6 @@
 
 .helper {
   margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--road-grey-500);
+  font-size: var(--road-font-size-12);
+  color: var(--road-on-surface-weak);
 }