@roadtrip/components 2.51.0 → 3.0.0

package/dist/collection/components/checkbox/checkbox.css

@@ -22,9 +22,9 @@
   display: block;
   margin-bottom: 1.5rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
+  font-size: var(--road-font-size-16);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
 }
 
 /**
@@ -56,8 +56,8 @@
   height: 1.25rem;
   margin: 0 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: 0.25rem;
   transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
 }
@@ -82,12 +82,12 @@
 @media (hover: hover) {
 
   .form-check-input:not(:disabled) ~ .form-check-label:hover::before {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-surface-variant);
   }
 
   .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,
   .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {
-    background: var(--road-primary-700);
+    background: var(--road-input-surface-variant);
   }
 }
 
@@ -102,8 +102,8 @@
 
 .form-check-input:checked ~ .form-check-label::before,
 .form-check-input:indeterminate ~ .form-check-label::before {
-  background: var(--road-primary-500);
-  border-color: var(--road-primary-500);
+  background: var(--road-input-surface);
+  border-color: var(--road-input-surface);
 }
 
 /**
@@ -116,8 +116,8 @@
 
 .form-check-input.focus-visible:checked ~ .form-check-label::before,
 .form-check-input.focus-visible:indeterminate ~ .form-check-label::before {
-  background: var(--road-primary-700);
-  border-color: var(--road-primary-700);
+  background: var(--road-input-surface-variant);
+  border-color: var(--road-input-surface-variant);
 }
 
 /**
@@ -131,13 +131,13 @@
 
 .form-check-input:disabled ~ .form-check-label::before,
 .form-check-input[readonly] ~ .form-check-label::before {
-  background: var(--road-disabled);
+  background: var(--road-surface-disabled);
   border: none;
 }
 
 .form-check-input:disabled ~ .form-check-label .form-check-icon,
 .form-check-input[readonly] ~ .form-check-label .form-check-icon {
-  fill: var(--road-grey-400);
+  fill: var(--road-on-surface-disabled);
 }
 
 /* ERROR
@@ -148,13 +148,13 @@
   flex: 0 0 100%;
   width: 100%;
   margin-top: 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--road-font-size-12);
   color: var(--road-danger-default);
 }
 
 .form-check-input.is-invalid ~ .form-check-label::before,
 .was-validated .form-check-input:invalid ~ .form-check-label::before {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-danger-outline);
 }
 
 .form-check-input.is-invalid ~ .invalid-feedback,

package/dist/collection/components/chip/chip.css

@@ -16,7 +16,7 @@
   height: 1.5rem;
   padding: 0.25rem 0.5rem;
   margin-bottom: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   cursor: pointer;
   border: 0;
   border-radius: 1.625rem;
@@ -55,8 +55,8 @@
   width: 1rem;
   height: 1rem;
   margin-right: -0.25rem;
-  color: var(--road-grey-000);
-  background: var(--road-grey-500);
+  color: var(--road-surface);
+  background: var(--road-on-surface-weak);
   border-radius: 50%;
   transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
@@ -67,7 +67,7 @@
 :host(.chip-lg) {
   height: 2.5rem;
   padding: 0 0.75rem;
-  font-size: 1rem;
+  font-size: var(--road-font-size-16);
 }
 
 :host(.chip-lg) ::slotted(road-icon) {
@@ -90,24 +90,24 @@
  -------------------- */
 
 :host(.chip-default) {
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background: var(--road-grey-200);
 }
 
 :host(.chip-outline.chip-default) {
-  background: var(--road-grey-000);
-  border-color: var(--road-grey-500);
+  background: var(--road-surface);
+  border-color: var(--road-outline);
 }
 
 :host(.chip-secondary) {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-surface-inverse);
+  background: var(--road-button-primary);
   border-color: transparent;
 }
 
 :host(.chip-secondary) .chip-close {
-  color: var(--road-primary-500);
-  background: var(--road-primary-100);
+  color: var(--road-primary);
+  background: var(--road-surface);
 }
 
 /**
@@ -117,15 +117,15 @@
 @media (any-hover: hover) {
 
   :host(.chip-outline:hover) {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-outline-variant);
   }
 
   :host(.chip-secondary:hover) {
-    background: var(--road-primary-700);
+    background: var(--road-button-primary-variant);
   }
 
   :host(.chip-secondary:hover) .chip-close {
-    color: var(--road-primary-700);
+    color: var(--road-primary);
   }
 }
 
@@ -134,9 +134,9 @@
  */
 
 :host(.chip-outline:hover) {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-outline-variant);
 }
 
 :host(.chip-secondary.focus-visible) {
-  background: var(--road-primary-500);
+  background: var(--road-button-primary-variant);
 }

package/dist/collection/components/counter/counter.css

@@ -30,20 +30,20 @@ road-input {
 
 road-button {
   width: 3rem;
-  font-size: 1.5rem;
+  font-size: var(--road-font-size-24);
   line-height: 1.4;
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-primary-500);
+  background: var(--road-surface);
+  border: 1px solid var(--road-button-tertiary-outline);
 }
 
 road-button:hover,
 road-button:focus {
-  background: var(--road-primary-100);
+  background: var(--road-button-tertiary-variant);
 }
 
 road-button road-icon{
   display: flex;
-  fill: var(--road-primary-500);
+  fill: var(--road-primary);
 }
 
 .disabled {
@@ -51,8 +51,8 @@ road-button road-icon{
   margin-left: -1px;
   pointer-events: none;
   cursor: not-allowed;
-  background: var(--road-disabled);
-  border: 1px solid var(--road-grey-500);
+  background: var(--road-surface-disabled);
+  border: 1px solid var(--road-on-surface-disabled);
   opacity: inherit;
 }
 
@@ -61,7 +61,7 @@ road-button road-icon{
 }
 
 .disabled road-icon {
-  fill: var(--road-grey-500);
+  fill: var(--road-grey-50);
 }
 
 

package/dist/collection/components/dialog/dialog.css

@@ -32,7 +32,7 @@
   overflow: hidden;
   font-family: var(--road-font, sans-serif);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   visibility: hidden !important;
   opacity: 0;
   transition: opacity 0.15s linear, visibility 0.15s;
@@ -91,11 +91,11 @@
   width: 100%;
   padding: 0 0 1.5rem;
   pointer-events: auto;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   background-clip: padding-box;
   border-radius: 0.25rem;
   outline: 0;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-highest);
 }
 
 @media (min-width: 576px) {
@@ -141,7 +141,7 @@
   display: inline-block;
   width: 3rem;
   height: 3rem;
-  font-size: 3rem;
+  font-size: var(--road-font-size-48);
 }
 
 /* BODY
@@ -165,7 +165,7 @@
 .dialog-title {
   padding: 0;
   margin: 0 0 1rem;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   font-weight: 700;
   line-height: 1.2;
 }
@@ -175,7 +175,7 @@
 
 .dialog-description {
   margin: 0 0 0.5rem;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
 }
 
 /* FOOTER

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

@@ -74,6 +74,8 @@ export default {
       </road-list>
       <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
       <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-label slot="name">First and Last name</road-label>
+      <road-label slot="email">email</road-label>
     </road-profil-dropdown>
 
     <road-drawer is-open="false" position="left" drawer-width="480" drawer-title="Edit profil" class="drawer-profil" has-close-icon="true">
@@ -249,6 +251,8 @@ Page.args = {
       </road-list>
       <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
       <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-label slot="name">First and Last name</road-label>
+      <road-label slot="email">email</road-label>
     </road-profil-dropdown>
 
     <road-navbar-item tab="tab-home">

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);
 }