@roadtrip/components 2.51.0 → 3.0.0

package/dist/collection/components/accordion/accordion.css

@@ -25,7 +25,7 @@
   --content-margin: 0 1rem 0.75rem;
   --content-padding: 0.75rem 0 0;
   --header-padding: 0.75rem 1rem;
-  --icon-color: var(--road-grey-900);
+  --icon-color: var(--road-icon);
   --max-height: none;
 
   display: block;
@@ -39,12 +39,12 @@
   --max-height: none;
   overflow: hidden;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
+  font-size: var(--road-body-small);
   line-height: 1.5;
-  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-500);
+  border-color: var(--road-outline-weak);
   border-radius: 0.25rem;
   transition: max-height 0.3s ease-in-out;
 }
@@ -100,7 +100,7 @@
  */
 
 .accordion-trigger.focus-visible {
-  border-color: var(--road-info-default);
+  border-color: var(--road-primary);
 }
 
 /**
@@ -108,7 +108,7 @@
  */
 
 .accordion-trigger:active {
-  background: var(--road-grey-100);
+  background: var(--road-surface-inverse);
 }
 
 /**
@@ -122,6 +122,7 @@
   align-items: center;
   justify-content: flex-start;
   padding: var(--header-padding);
+  font-size: var(--road-body-medium);
   font-weight: 700;
   cursor: pointer;
   -webkit-user-select: none;
@@ -130,11 +131,11 @@
 
 .accordion-light-header {
   position: relative;
-  font-size: 1.125rem;
+  font-size: var(--road-body-large);
 }
 
 .accordion-light--small .accordion-light-header {
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
 }
 
 .accordion-light--border .accordion-light-header::after {
@@ -143,7 +144,7 @@
   width: 98.3%;
   height: 1px;
   content: "";
-  background: var(--road-grey-500);
+  background: var(--road-outline-weak);
 }
 
 /**
@@ -179,15 +180,15 @@
   padding: 0 0.5rem;
   margin: 0 1rem;
   overflow: hidden;
-  font-size: 1rem;
-  border-top: var(--accordion-header-border) solid var(--road-grey-500);
+  font-size: var(--road-body-medium);
+  border-top: var(--accordion-header-border) solid var(--road-outline-weak);
 }
 
 .accordion-light-content {
-  border-top: 1px solid var(--road-grey-500);
+  border-top: 1px solid var(--road-outline-weak);
 }
 
 .accordion-light--border .accordion-light-content {
-  border-top: 1px solid var(--road-grey-500);
-  border-bottom: 1px solid var(--road-grey-500);
+  border-top: 1px solid var(--road-outline-weak);
+  border-bottom: 1px solid var(--road-outline-weak);
 }

package/dist/collection/components/alert/alert.css

@@ -18,9 +18,9 @@
   align-items: flex-start;
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.25;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   border: 1px solid transparent;
   border-radius: 0.25rem;
 }
@@ -49,7 +49,7 @@
 .alert-link {
   display: block;
   margin: 0;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   text-decoration: underline;
 }
 
@@ -69,8 +69,8 @@
  */
 
 :host(.alert-info) {
-  background: var(--road-info-background);
-  border-color: var(--road-info-default);
+  background: var(--road-info-surface);
+  border-color: var(--road-info-outline);
 }
 
 :host(.alert-info) ::slotted(road-icon) {
@@ -82,12 +82,12 @@
  */
 
 :host(.alert-success) {
-  background: var(--road-success-background);
-  border-color: var(--road-success-default);
+  background: var(--road-success-surface);
+  border-color: var(--road-success-outline);
 }
 
 :host(.alert-success) ::slotted(road-icon) {
-  color: var(--road-success-default);
+  color: var(--road-success-icon);
 }
 
 /**
@@ -95,12 +95,12 @@
  */
 
 :host(.alert-warning) {
-  background: var(--road-warning-background);
-  border-color: var(--road-warning-default);
+  background: var(--road-warning-surface);
+  border-color: var(--road-warning-outline);
 }
 
 :host(.alert-warning) ::slotted(road-icon) {
-  color: var(--road-warning-default);
+  color: var(--road-warning-icon);
 }
 
 /**
@@ -108,10 +108,10 @@
  */
 
 :host(.alert-danger) {
-  background: var(--road-danger-background);
-  border-color: var(--road-danger-default);
+  background: var(--road-danger-surface);
+  border-color: var(--road-danger-outline);
 }
 
 :host(.alert-danger) ::slotted(road-icon) {
-  color: var(--road-danger-default);
+  color: var(--road-danger-icon);
 }

package/dist/collection/components/autocomplete/autocomplete.css

@@ -24,7 +24,7 @@
   position: absolute;
   right: 0;
   height: 100%;
-  background-color: var(--road-grey-000);
+  background-color: var(--road-surface);
 }
 
 /* LIST
@@ -40,12 +40,12 @@
   margin: 0;
   overflow-y: scroll;
   font-family: var(--road-font, sans-serif);
-  font-size: 0.875rem;
-  color: var(--road-grey-900);
+  font-size: var(--road-font-size-14);
+  color: var(--road-on-surface);
   list-style-type: none;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border-radius: 0 0 0.25rem 0.25rem;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+  box-shadow: var(--road-elevation-low);
 }
 
 /* ITEM
@@ -62,6 +62,6 @@
 
 .autocomplete-item:hover,
 .autocomplete-item.focus {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-primary);
+  background: var(--road-primary);
 }

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