@roadtrip/components 2.51.1 → 3.0.1

package/dist/collection/components/textarea/textarea.css

@@ -15,7 +15,7 @@
   display: block;
   margin-bottom: 1rem;
   font-family: var(--road-font, sans-serif);
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
 }
 
 /* INPUT
@@ -28,10 +28,10 @@
   height: 3rem;
   padding: 0.75rem 1rem 0;
   margin: 0;
-  font-size: 1rem;
-  color: var(--road-grey-900);
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  font-size: var(--road-body-medium);
+  color: var(--road-on-surface);
+  background: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
@@ -44,7 +44,7 @@
  */
 
 .form-control::placeholder {
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-extra-weak);
   opacity: 1;
 }
 
@@ -55,7 +55,7 @@
 @media (hover: hover) {
 
   .form-control:not(:disabled):hover {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -83,7 +83,7 @@
 /* stylelint-enable */
 
 .form-control:not(:disabled):focus {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   outline: 0;
 }
 
@@ -93,9 +93,9 @@
 
 .form-control:disabled,
 .form-control[readonly] {
-  color: var(--road-grey-400);
+  color: var(--road-on-surface-weak);
   cursor: not-allowed;
-  background: var(--road-disabled);
+  background: var(--road-surface-disabled);
   opacity: 1;
 }
 
@@ -117,9 +117,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;
@@ -160,13 +160,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,
@@ -179,6 +179,6 @@
 
 .helper {
   margin-top: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--road-helper-medium);
   color: var(--road-grey-500);
 }

package/dist/collection/components/toast/toast.css

@@ -51,7 +51,7 @@
   margin-right: 0.5rem;
   margin-left: 0.5rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.4;
   text-align: left;
   border-radius: 0 0 0.25rem 0.25rem;
@@ -77,12 +77,12 @@
  */
 
 .toast-danger {
-  color: var(--road-danger-contrast);
-  background: var(--road-danger-default);
+  color: var(--road-on-danger-surface-inverse);
+  background: var(--road-danger-surface-inverse);
 }
 
 .toast-danger road-icon {
-  color: var(--road-danger-contrast);
+  color: var(--road-danger-icon-inverse);
 }
 
 /**
@@ -90,12 +90,12 @@
  */
 
 .toast-warning {
-  color: var(--road-warning-contrast);
-  background: var(--road-warning-default);
+  color: var(--road-on-warning-surface-inverse);
+  background: var(--road-warning-surface-inverse);
 }
 
 .toast-warning road-icon {
-  color: var(--road-grey-900);
+  color: var(--road-warning-icon-inverse);
 }
 
 /**
@@ -103,12 +103,12 @@
  */
 
 .toast-success {
-  color: var(--road-success-contrast);
-  background: var(--road-success-text);
+  color: var(--road-on-success-surface-inverse);
+  background: var(--road-success-surface-inverse);
 }
 
 .toast-success road-icon {
-  color: var(--road-success-contrast);
+  color: var(--road-success-icon-inverse);
 }
 
 /**
@@ -116,12 +116,12 @@
  */
 
 .toast-info {
-  color: var(--road-info-contrast);
-  background: var(--road-info-default);
+  color: var(--road-on-info-surface-inverse);
+  background: var(--road-info-surface-inverse);
 }
 
 .toast-info road-icon {
-  color: var(--road-info-contrast);
+  color: var(--road-info-icon-inverse);
 }
 
 /* FEEDBACK ICON
@@ -161,7 +161,7 @@
 }
 
 .toast-warning .toast-close {
-  fill: var(--road-grey-900);
+  fill: var(--road-warning-icon-inverse);
 }
 
 
@@ -170,6 +170,6 @@
  */
 
 .toast-close:focus {
-  border-color: var(--road-info-default);
+  border-color: var(--road-info-surface-inverse);
   outline: none;
 }

package/dist/collection/components/toggle/toggle.css

@@ -27,8 +27,8 @@
   display: block;
   margin-bottom: 1rem;
   font-family: var(--road-font, sans-serif);
-  font-size: 1rem;
-  color: var(--road-grey-900);
+  font-size: var(--road-label-medium);
+  color: var(--road-on-surface);
 }
 
 /**
@@ -69,7 +69,7 @@
   font-weight: 700;
   line-height: 1.6;
   content: "";
-  background: var(--road-grey-400);
+  background: var(--road-on-surface-extra-weak);
   border: 0.125rem solid transparent;
   border-radius: 1.125rem;
   transition: background 0.2s ease-in-out;
@@ -82,7 +82,7 @@
 .form-toggle-lever::before {
   font-size: 0.625rem;
   font-weight: 700;
-  color: var(--road-grey-000);
+  color: var(--road-surface);
   text-transform: uppercase;
   content: attr(data-off);
 }
@@ -99,9 +99,9 @@
   width: 1.625rem;
   height: 1.625rem;
   content: "";
-  background: var(--road-grey-000);
+  background: var(--road-on-success-surface-inverse);
   border-radius: 50%;
-  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
+  box-shadow: var(--road-elevation-low);
   transition: transform 0.2s ease-in-out;
 }
 
@@ -111,9 +111,11 @@
 
 .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {
   justify-content: flex-start;
+  background: var(--road-success-surface-inverse);
 }
 
 .form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {
+  color: var(--road-surface);
   content: attr(data-on);
 }
 
@@ -126,7 +128,7 @@
  */
 
 .form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {
-  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-primary);
 }
 
 /* FEEDBACK
@@ -137,11 +139,11 @@
  */
 
 .form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {
-  background: var(--road-primary-500);
+  background: var(--road-secondary);
 }
 
 .form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {
-  color: var(--road-primary-contrast);
+  color: var(--road-surface);
 }
 
 /**
@@ -149,11 +151,11 @@
  */
 
 .form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever {
-  background: var(--road-info-default);
+  background: var(--road-info-surface-inverse);
 }
 
 .form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever::before {
-  color: var(--road-info-contrast);
+  color: var(--road-surface);
 }
 
 /**
@@ -161,11 +163,11 @@
  */
 
 .form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {
-  background: var(--road-success-default);
+  background: var(--road-success-surface-inverse);
 }
 
 .form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {
-  color: var(--road-success-contrast);
+  color: var(--road-surface);
 }
 
 /**
@@ -173,11 +175,11 @@
  */
 
 .form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever {
-  background: var(--road-warning-default);
+  background: var(--road-warning-surface-inverse);
 }
 
 .form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever::before {
-  color: var(--road-warning-contrast);
+  color: var(--road-on-warning-surface-inverse);
 }
 
 /**
@@ -185,11 +187,11 @@
  */
 
 .form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever {
-  background: var(--road-danger-default);
+  background: var(--road-danger-surface-inverse);
 }
 
 .form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever::before {
-  color: var(--road-danger-contrast);
+  color: var(--road-surface);
 }
 
 /* POSITION

package/dist/collection/components/toggle/toggle.js

@@ -25,7 +25,7 @@ export class toggle {
     /**
      * Set the color of alert. e.g. info, success, warning, danger
      */
-    this.color = 'secondary';
+    this.color = 'success';
     /**
      * If `true`, the label is at left of the toggle
      */
@@ -184,8 +184,8 @@ export class toggle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'secondary' | FeedbackColors",
-          "resolved": "\"danger\" | \"info\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+          "original": "'success' | FeedbackColors",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\" | undefined",
           "references": {
             "FeedbackColors": {
               "location": "import",
@@ -201,7 +201,7 @@ export class toggle {
         },
         "attribute": "color",
         "reflect": false,
-        "defaultValue": "'secondary'"
+        "defaultValue": "'success'"
       },
       "hasLeftLabel": {
         "type": "boolean",

package/dist/collection/components/toolbar/toolbar.css

@@ -14,9 +14,9 @@
   display: block;
   width: 100%;
   contain: content;
-  color: var(--road-grey-900);
-  background: var(--road-grey-000);
-  border-bottom: 1px solid var(--road-grey-300);
+  color: var(--road-on-surface);
+  background: var(--road-surface);
+  border-bottom: 1px solid var(--road-outline);
 }
 
 /* CONTAINER
@@ -39,7 +39,7 @@
  -------------------- */
 
 .toolbar-title-container {
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
   display: flex;
@@ -47,7 +47,6 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  padding: 0 3.5rem;
   text-align: center;
 }
 
@@ -57,7 +56,7 @@
 .toolbar-title {
   display: block;
   width: 100%;
-  font-size: 1.125rem;
+  font-size: var(--road-font-size-18);
   font-weight: 700;
   text-align: left;
   text-overflow: ellipsis;
@@ -68,7 +67,7 @@
 @media (min-width: 1200px) {
 
   .toolbar-title {
-    font-size: 1.25rem;
+    font-size: var(--road-font-size-21);
     text-align: center;
   }
 }
@@ -90,13 +89,13 @@
   z-index: 1;
   padding-left: 1rem;
   margin-bottom: 0;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   font-weight: 400;
 }
 
 .toolbar .app-name {
   margin-left: 1rem;
-  font-size: 1.25rem;
+  font-size: var(--road-font-size-20);
   font-weight: 700;
 }
 
@@ -109,10 +108,10 @@
   --padding-end: 0.5rem;
 
   align-self: auto;
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   font-weight: 400;
-  background: var(--road-grey-000);
-  border-right: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border-right: 1px solid var(--road-outline);
   border-radius: 0;
 }
 
@@ -122,10 +121,10 @@
   --padding-start: 0.5rem;
   --padding-end: 0.5rem;
 
-  font-size: 0.875rem;
+  font-size: var(--road-font-size-14);
   font-weight: 400;
-  background: var(--road-grey-000);
-  border-left: 1px solid var(--road-grey-500);
+  background: var(--road-surface);
+  border-left: 1px solid var(--road-outline);
   border-radius: 0;
 }
 
@@ -133,11 +132,11 @@
  -------------------- */
 
 :host(.toolbar-primary) {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-900);
+  color: var(--road-on-header-surface);
+  background: var(--road-header-surface);
 }
 
 :host(.toolbar-secondary) {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-secondary);
+  background: var(--road-secondary);
 }

package/dist/collection/components/toolbar-title/toolbar-title.css

@@ -16,7 +16,7 @@
   display: block;
   width: 100%;
   overflow: hidden;
-  font-size: 1.125rem;
+  font-size: var(--road-font-size-18);
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -26,6 +26,6 @@
 @media (min-width: 1200px) {
 
   .toolbar-title {
-    font-size: 1.3125rem;
+    font-size: var(--road-font-size-21);
   }
 }

package/dist/collection/components/toolbar-title-page/toolbar-title-page.css

@@ -28,7 +28,7 @@
 .toolbar-title-page {
   display: block;
   width: 100%;
-  font-size: 1.125rem;
+  font-size: var(--road-font-size-18);
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -38,7 +38,7 @@
 @media (min-width: 1200px) {
 
   .toolbar-title-page {
-    font-size: 1.25rem;
+    font-size: var(--road-font-size-20);
     text-align: center;
   }
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -24,6 +24,17 @@
   display: inline-block;
 }
 
+:host([trigger="hover"]) .tooltip {
+  display: none;
+}
+
+@media (min-width: 1200px) {
+
+  :host([trigger="hover"]) .tooltip {
+    display: block;
+  }
+}
+
 .tooltip {
   position: absolute;
   top: -0.5rem;
@@ -34,14 +45,14 @@
   max-width: var(--max-width);
   padding: 0.5rem;
   font-family: var(--road-font);
-  font-size: 0.875rem;
-  color: var(--road-grey-900);
+  font-size: var(--road-body-small);
+  color: var(--road-on-surface);
   text-align: center;
   pointer-events: none;
-  background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-300);
+  background: var(--road-surface);
+  border: 1px solid var(--road-outline-weak);
   border-radius: 0.25rem;
-  box-shadow: 0 0.1875rem 0.375rem rgba(41, 44, 51, 0.24);
+  box-shadow: var(--road-elevation-low);
   opacity: 0;
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
   transform: translateX(-50%) translateY(-100%);