@roadtrip/components 2.51.1 → 3.0.1

package/dist/collection/components/avatar/avatar.css

@@ -16,9 +16,9 @@
  -------------------- */
 
 :host {
-  --avatar-background: var(--road-primary-500);
+  --avatar-background: var(--road-primary);
   --avatar-width: 3rem;
-  --avatar-color: var(--road-grey-000);
+  --avatar-color: var(--road-grey-100-new);
 
   position: relative;
   display: flex;
@@ -36,13 +36,13 @@
 :host(:hover),
 :host(.focus-visible),
 :host(:focus){
-  box-shadow: 0 0 0 4px var(--road-primary-200);
+  box-shadow: 0 0 0 4px var(--road-primary-80);
 }
 
 
 
 :host ::slotted(road-icon) {
-  fill: var(--road-grey-000);
+  fill: var(--road-icon-inverse);
 }
 
 
@@ -58,7 +58,7 @@
 :host(.avatar-md) {
   width: 3.5rem;
   height: 3.5rem;
-  font-size: 2rem;
+  font-size: var(--road-font-size-32);
 }
 
 :host(.avatar-lg) {

package/dist/collection/components/badge/badge.css

@@ -19,7 +19,7 @@
   min-height: 1rem;
   padding: 0 0.3125rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 0.625rem;
+  font-size: var(--road-font-size-10);
   font-weight: 700;
   white-space: nowrap;
   border-radius: 1rem;
@@ -43,8 +43,8 @@
  */
 
 :host(.badge-primary) {
-  color: var(--road-primary-contrast);
-  background-color: var(--road-primary-500);
+  color: var(--road-on-primary);
+  background-color: var(--road-primary);
 }
 
 /**
@@ -52,8 +52,8 @@
  */
 
 :host(.badge-secondary) {
-  color: var(--road-primary-contrast);
-  background-color: var(--road-primary-500);
+  color: var(--road-on-secondary);
+  background-color: var(--road-secondary);
 }
 
 /**
@@ -61,8 +61,8 @@
  */
 
 :host(.badge-accent) {
-  color: var(--road-secondary-contrast);
-  background-color: var(--road-secondary-500);
+  color: var(--road-on-warning-surface-inverse);
+  background-color: var(--road-warning-surface-inverse);
 }
 
 /**
@@ -70,8 +70,8 @@
  */
 
 :host(.badge-info) {
-  color: var(--road-info-contrast);
-  background-color: var(--road-info-default);
+  color: var(--road-on-info-surface-inverse);
+  background-color: var(--road-info-surface-inverse);
 }
 
 /**
@@ -79,8 +79,8 @@
  */
 
 :host(.badge-success) {
-  color: var(--road-success-contrast);
-  background-color: var(--road-success-default);
+  color: var(--road-on-success-surface-inverse);
+  background-color: var(--road-success-surface-inverse);
 }
 
 /**
@@ -88,8 +88,8 @@
  */
 
 :host(.badge-warning) {
-  color: var(--road-warning-contrast);
-  background-color: var(--road-warning-default);
+  color: var(--road-on-warning-surface-inverse);
+  background-color: var(--road-warning-surface-inverse);
 }
 
 /**
@@ -97,6 +97,6 @@
  */
 
 :host(.badge-danger) {
-  color: var(--road-danger-contrast);
-  background-color: var(--road-danger-default);
+  color: var(--road-on-danger-surface-inverse);
+  background-color: var(--road-danger-surface-inverse);
 }

package/dist/collection/components/banner/banner.css

@@ -9,9 +9,9 @@
   position: relative;
   display: block;
   padding: 1rem 2rem;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   text-align: center;
-  background-color: var(--road-secondary-500);
+  background-color: var(--road-decorative-surface);
 }
 
 .banner-close{
@@ -36,7 +36,7 @@
 .banner-open-link{
   display: block;
   margin: 0.25rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   color: currentColor;
 }
 

package/dist/collection/components/button/button.css

@@ -28,7 +28,7 @@
 
 :host {
   --border-radius: 0.25rem;
-  --font-size: 1rem;
+  --font-size: var(--road-button-medium);
   --margin-bottom: 1rem;
   --padding-start: 1.5rem;
   --padding-end: 1.5rem;
@@ -45,7 +45,7 @@
   font-size: var(--font-size);
   font-weight: 700;
   line-height: 1.375;
-  color: var(--road-grey-900);
+  color: var(--road-grey-10);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
@@ -111,7 +111,7 @@
  */
 
 :host(.btn-default:not([disabled]).focus-visible) {
-  background: var(--road-grey-200);
+  background: var(--road-grey-80);
 }
 
 /**
@@ -119,17 +119,17 @@
  */
 
 :host(.btn-primary) {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-button-primary);
+  background: var(--road-button-primary);
 }
 
 :host(.btn-primary) ::slotted(road-icon) {
-  color: var(--road-primary-contrast);
+  color: var(--road-on-button-primary);
 }
 
 :host(.btn-primary:not([disabled]):hover),
 :host(.btn-primary:not([disabled]).focus-visible) {
-  background: var(--road-primary-700);
+  background: var(--road-button-primary-variant);
 }
 
 /**
@@ -137,17 +137,17 @@
  */
 
 :host(.btn-secondary) {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-button-secondary);
+  background: var(--road-button-secondary);
 }
 
 :host(.btn-secondary) ::slotted(road-icon) {
-  color: var(--road-primary-contrast);
+  color: var(--road-on-button-secondary);
 }
 
 :host(.btn-secondary:not([disabled]):hover),
 :host(.btn-secondary:not([disabled]).focus-visible) {
-  background: var(--road-primary-700);
+  background: var(--road-button-secondary-variant);
 }
 
 /**
@@ -156,13 +156,13 @@
 
 :host(.btn-link) {
   font-weight: 400;
-  color: var(--road-primary-500);
+  color: var(--road-link-primary);
   background: transparent;
 }
 
 :host(.btn-link:not([disabled]):hover),
 :host(.btn-link:not([disabled]).focus-visible) {
-  color: var(--road-primary-700);
+  color: var(--road-primary-30);
 }
 
 /* OUTLINE
@@ -179,18 +179,18 @@
  */
 
 :host(.btn-outline-default) {
-  color: var(--road-grey-600);
-  background: var(--road-grey-000);
-  border-color: var(--road-grey-600);
+  color: var(--road-on-surface-weak);
+  background: var(--road-surface);
+  border-color: var(--road-outline);
 }
 
 :host(.btn-outline-default) ::slotted(road-icon) {
-  color: var(--road-grey-600);
+  color: var(--road-on-surface-weak);
 }
 
 :host(.btn-outline-default:hover),
 :host(.btn-outline-default.focus-visible) {
-  background: var(--road-grey-200);
+  background: var(--road-grey-80);
 }
 
 /**
@@ -199,12 +199,12 @@
 
 
 :host(.btn-ghost) ::slotted(road-icon) {
-  color: var(--road-grey-900);
+  color: var(--road-icon);
 }
 
 :host(.btn-ghost:hover),
 :host(.btn-ghost.focus-visible) {
-  background: var(--road-primary-100);
+  background: var(--road-button-ghost-variant);
 }
 
 /**
@@ -212,17 +212,17 @@
  */
 
 :host(.btn-outline-primary) {
-  color: var(--road-primary-500);
-  border-color: var(--road-primary-500);
+  color: var(--road-button-primary);
+  border-color: var(--road-button-primary);
 }
 
 :host(.btn-outline-primary) ::slotted(road-icon) {
-  color: var(--road-primary-500);
+  color: var(--road-button-primary);
 }
 
 :host(.btn-outline-primary:hover),
 :host(.btn-outline-primary.focus-visible) {
-  background: var(--road-primary-100);
+  background: var(--road-button-tertiary-variant);
 }
 
 /**
@@ -230,17 +230,17 @@
  */
 
 :host(.btn-outline-secondary) {
-  color: var(--road-primary-500);
-  border-color: var(--road-primary-500);
+  color: var(--road-button-secondary);
+  border-color: var(--road-button-secondary);
 }
 
 :host(.btn-outline-secondary) ::slotted(road-icon) {
-  color: var(--road-primary-500);
+  color: var(--road-button-secondary);
 }
 
 :host(.btn-outline-secondary:hover),
 :host(.btn-outline-secondary.focus-visible) {
-  background: var(--road-primary-100);
+  background: var(--road-button-tertiary-variant);
 }
 
 /* DISABLED
@@ -284,7 +284,7 @@
  */
 
 :host(.btn-md) {
-  --font-size: 0.875rem;
+  --font-size: var(--road-font-size-14);
 
   height: 2.5rem;
 }
@@ -299,7 +299,7 @@
  */
 
 :host(.btn-sm) {
-  --font-size: 0.875rem;
+  --font-size: var(--road-font-size-14);
 
   height: 2rem;
 }

package/dist/collection/components/card/card.css

@@ -39,7 +39,7 @@
   text-transform: inherit;
   letter-spacing: inherit;
   white-space: inherit;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border: 0;
   border-radius: 0.25rem;
   outline: none;

package/dist/collection/components/carousel/carousel.css

@@ -58,7 +58,7 @@
   padding: 0 0.75rem;
   margin: 0 auto;
   vertical-align: middle;
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: var(--road-overlay-inverse);
   border-radius: 40px;
 }
 
@@ -71,23 +71,23 @@
 }
 
 .swiper-pagination-bullet-active {
-  background: var(--road-grey-999);
+  background: var(--road-on-surface);
 }
 
 :host(.swiper-pagination-progressbar) {
-  background: var(--road-grey-200);
+  background: var(--road-grey-70);
 }
 
 :host(.swiper-pagination-progressbar) .swiper-pagination-progressbar-fill {
-  background: var(--road-grey-900);
+  background: var(--road-grey-10);
 }
 
 :host(.swiper-scrollbar) {
-  background: var(--road-grey-300);
+  background: var(--road-grey-70);
 }
 
 :host(.swiper-scrollbar-drag) {
-  background: var(--road-grey-900);
+  background: var(--road-grey-10);
 }
 
 /* ARROWS
@@ -106,13 +106,13 @@
     width: 3rem;
     height: 3rem;
     background: var(--road-overlay);
-    border: 1px solid rgba(255, 255, 255, 0.6);
+    border: 1px solid var(--road-overlay-inverse);
     border-radius: 3rem;
   }
 
 .swiper-button-prev road-icon,
 .swiper-button-next road-icon{
-    color: var(--road-grey-000);
+    color: var(--road-on-overlay);
   }
 }
 
@@ -129,12 +129,12 @@
 
 .swiper-button-prev:hover,
 .swiper-button-next:hover {
-    background: var(--road-grey-000);
+  background: var(--road-surface);
   }
 
 .swiper-button-prev:hover road-icon,
 .swiper-button-next:hover road-icon {
-    color: var(--road-grey-900);
+    color: var(--road-on-surface);
   }
 }
 
@@ -152,11 +152,11 @@
 
   .swiper-button-prev,
   .swiper-container-rtl .swiper-button-next {
-      left: 1.5rem;
-    }
+    left: 1.5rem;
+  }
 
   .swiper-button-next,
   .swiper-container-rtl .swiper-button-prev {
-      right: 1.5rem;
-    }
+    right: 1.5rem;
+  }
 }

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