@roadtrip/components 2.51.0 → 3.0.0

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

@@ -5,8 +5,8 @@ export default {
   component: 'road-progress',
 };
 
-export const Playground = ({ value, color, label, showstep, numbersteps }) => html`
-  <road-progress value="${value}" color="${color}" label="${label}" showstep="${showstep}" numbersteps="${numbersteps}"></road-progress>
+export const Playground = ({ value, color, label, showstep, numbersteps, fullwidth }) => html`
+  <road-progress value="${value}" color="${color}" label="${label}" showstep="${showstep}" numbersteps="${numbersteps}" fullwidth="${fullwidth}"></road-progress>
 `;
 Playground.args = {
   value: 25,
@@ -14,6 +14,7 @@ Playground.args = {
   label: '',
   showstep:'false',
   numbersteps: '4',
+  fullwidth:'false',
 };
 Playground.argTypes = {
   value: {
@@ -37,6 +38,9 @@ Playground.argTypes = {
   showstep: {
     control: 'boolean',
   },
+  fullwidth: {
+    control: 'boolean',
+  },
   color: {
     options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
     control: {

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

package/dist/collection/components/range/range.css

@@ -45,7 +45,7 @@
 
 .form-range > output::after {
   display: block;
-  font-size: 0.875rem;
+  font-size: var(--road-label-medium);
   text-align: right;
   content: counter(variable);
   counter-reset: variable var(--value);
@@ -79,7 +79,7 @@
   display: block;
   height: 0.5rem;
   content: "";
-  background-color: var(--road-grey-200);
+  background-color: var(--road-on-surface-disabled);
   border: 0;
   border-radius: 1.125rem;
 }
@@ -96,7 +96,7 @@
   width: calc((var(--value) * 100%) / var(--max));
   height: 0.5rem;
   content: "";
-  background: var(--road-primary-500);
+  background: var(--road-primary);
   border-radius: 1.125rem;
 }
 
@@ -109,7 +109,7 @@
   width: 1.625rem;
   height: 1.625rem;
   cursor: grab;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border: none;
   border-radius: 1.625rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);
@@ -125,7 +125,7 @@
   height: 1.625rem;
   margin-top: -0.625rem;
   cursor: grab;
-  background: var(--road-grey-000);
+  background: var(--road-surface);
   border: none;
   border-radius: 1.625rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);
@@ -139,14 +139,14 @@
 
 :host(.focus-visible) .form-range-input::-webkit-slider-thumb,
 :host(:active) .form-range-input::-webkit-slider-thumb {
-  background: var(--road-primary-700);
-  border: 0.5rem solid var(--road-grey-000);
+  background: var(--road-input-surface-variant);
+  border: 0.5rem solid var(--road-grey-100-new);
 }
 
 :host(.focus-visible) .form-range-input::-moz-range-thumb,
 :host(:active) .form-range-input::-moz-range-thumb {
-  background: var(--road-primary-700);
-  border: 0.5rem solid var(--road-grey-000);
+  background: var(--road-input-surface-variant);
+  border: 0.5rem solid var(--road-grey-100-new);
 }
 
 /* DATALIST
@@ -160,6 +160,7 @@
 ::slotted(datalist) option {
   width: 32px;
   margin: 0;
+  font-size: var(--road-label-medium);
   text-align: center;
 }
 

package/dist/collection/components/rating/rating.css

@@ -24,7 +24,7 @@
  -------------------- */
 
 .rating-star {
-  color: var(--road-grey-400);
+  color: var(--road-surface-disabled);
 }
 
 .rating-stars.rating-stars--small .icon-sm{
@@ -37,11 +37,11 @@
 
 .rating-number {
   margin-left: 0.5rem;
-  font-size: 1rem;
-  color: var(--road-grey-900);
+  font-size: var(--road-link-medium);
+  color: var(--road-on-surface);
   text-decoration: underline;
 }
 
 .rating-number.rating-number--small {
-  font-size: 0.875rem;
+  font-size: var(--road-link-small);
 }

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

@@ -9,7 +9,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;
@@ -18,29 +18,29 @@
   align-items: center;
   justify-content: center;
   max-height: 2.5rem;
-  font-size: 1rem;
+  font-size: var(--road-button-medium);
   font-weight: 700;
-  color: var(--road-primary-500);
+  color: var(--road-primary);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: var(--road-grey-000);
-  border-top: 1px solid var(--road-primary-500);
-  border-bottom: 1px solid var(--road-primary-500);
-  border-left: 1px solid var(--road-primary-500);
+  background-color: var(--road-surface);
+  border-top: 1px solid var(--road-primary);
+  border-bottom: 1px solid var(--road-primary);
+  border-left: 1px solid var(--road-primary);
   border-radius: 0;
   transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
 
 :host(:first-child){
-  border: 1px solid var(--road-primary-500);
+  border: 1px solid var(--road-primary);
   border-right: 0;
   border-radius: 999em 0 0 999em;
 }
 
 :host(:last-child){
-  border: 1px solid var(--road-primary-500);
+  border: 1px solid var(--road-primary);
   border-radius: 0 999em 999em 0;
 }
 
@@ -50,7 +50,7 @@
 
 :host(.btn-sm) {
   height: 2rem;
-  font-size: 0.875rem;
+  font-size: var(--road-button-small);
 }
 
 /**
@@ -59,11 +59,11 @@
 
 :host(.tab-selected) {
   color: var(--road-primary-contrast);
-  background-color: var(--road-primary-500);
+  background-color: var(--road-primary);
 }
 
 :host(.tab-selected:hover) {
-  background-color: var(--road-primary-700);
+  background-color: var(--road-button-primary-variant);
 }
 
 
@@ -72,7 +72,7 @@
  */
 
 :host(:hover) {
-  background: var(--road-primary-100);
+  background: var(--road-primary-90);
 }
 
 /**
@@ -81,12 +81,12 @@
 
 
 :host(.focus-visible) {
-  background: var(--road-primary-100);
+  background: var(--road-primary-90);
   outline: 0;
 }
 
 :host(.tab-selected.focus-visible){
-  background-color: var(--road-primary-700);
+  background-color: var(--road-button-primary-variant);
 }
 
 

package/dist/collection/components/select/select.css

@@ -14,7 +14,7 @@
   display: block;
   margin-bottom: 1rem;
   font-family: var(--road-font, sans-serif);
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
 }
 
 /* SELECT
@@ -27,12 +27,12 @@
   height: 3rem;
   padding: 0.75rem 3rem 0 1rem;
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--road-body-medium);
   line-height: 1.5;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=") no-repeat right 1rem center/1.5rem 2rem;
-  background-color: var(--road-grey-000);
-  border: 1px solid var(--road-grey-500);
+  background-color: var(--road-surface);
+  border: 1px solid var(--road-input-outline);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
@@ -54,7 +54,7 @@
  */
 
 .form-select::placeholder {
-  color: var(--road-grey-600);
+  color: var(--road-on-surface-extra-weak);
 }
 
 /**
@@ -64,7 +64,7 @@
 @media (hover: hover) {
 
   .form-select:not(:disabled):hover {
-    border-color: var(--road-primary-700);
+    border-color: var(--road-input-outline-variant);
   }
 }
 
@@ -79,7 +79,7 @@
 }
 
 .form-select:not(:disabled):focus {
-  border-color: var(--road-primary-700);
+  border-color: var(--road-input-outline-variant);
   outline: 0;
 }
 
@@ -89,9 +89,9 @@
 
 .form-select:disabled,
 .form-select[readonly] {
-  color: var(--road-grey-400);
+  color: var(--road-on-surface-disabled);
   cursor: not-allowed;
-  background-color: var(--road-disabled);
+  background-color: var(--road-surface-disabled);
   opacity: 1;
 }
 
@@ -103,16 +103,16 @@
   top: 0.75rem;
   left: 1rem;
   display: block;
-  font-size: 1rem;
+  font-size: var(--road-label-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;
 }
 
 .form-select:required ~ .form-select-label::after{
-  color: var(--road-danger-default);
+  color: var(--road-on-danger-surface);
   content: " *";
 }
 
@@ -147,13 +147,13 @@
   display: none;
   width: 100%;
   margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--road-danger-text);
+  font-size: var(--road-body-small);
+  color: var(--road-on-danger-surface);
 }
 
 .form-select.is-invalid,
 .was-validated .form-select:invalid {
-  border-color: var(--road-danger-default);
+  border-color: var(--road-on-danger-surface);
 }
 
 .form-select.is-invalid ~ .invalid-feedback,

package/dist/collection/components/select-filter/select-filter.css

@@ -33,11 +33,11 @@
   overflow-y: scroll;
   font-family: var(--road-font, sans-serif);
   font-size: 1rem;
-  color: var(--road-grey-900);
+  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);
 }
 
 .select-filter-list.not-active {
@@ -60,6 +60,6 @@
 
 .select-filter-item:hover,
 .select-filter-item.highlight {
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-primary);
+  background: var(--road-primary);
 }

package/dist/collection/components/skeleton/skeleton.css

@@ -16,7 +16,7 @@
  */
 
 :host {
-  --background-light: var(--road-disabled);
+  --background-light: var(--road-surface-disabled);
   --background-dark: rgb(137, 143, 160, 0.4);
 
   position: relative;
@@ -24,7 +24,8 @@
   width: 100%;
   min-height: 1rem;
   background: linear-gradient(to right, var(--background-light) 8%, var(--background-dark) 18%, var(--background-light) 33%);
-  background-size: 800px 104px;
+  background-position: 100% 0;
+  background-size: 200%;
   animation: road-skeleton-animation 1s linear infinite;
 }
 
@@ -33,11 +34,7 @@
 
 @keyframes road-skeleton-animation {
 
-  0% {
-    background-position: -468px 0;
-  }
-
   100% {
-    background-position: 468px 0;
+    background-position: -100% 0;
   }
 }

package/dist/collection/components/spinner/spinner.css

@@ -45,7 +45,7 @@
 .spinner-circle {
   animation: road-dash 1.5s ease-in-out infinite;
   fill: none;
-  stroke: var(--road-primary-500);
+  stroke: var(--road-primary);
   stroke-width: 3;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
@@ -53,11 +53,11 @@
 }
 
 .spinner-circle.spinner-circle--dark {
-  stroke: var(--road-grey-900);
+  stroke: var(--road-grey-0);
 }
 
 .spinner-circle.spinner-circle--light {
-  stroke: var(--road-grey-100);
+  stroke: var(--road-grey-90);
 }
 
 /* ANIMATION

package/dist/collection/components/stepper/stepper.css

@@ -47,7 +47,7 @@
   order: -1;
   height: 2px;
   content: "";
-  background: var(--road-grey-200);
+  background: var(--road-surface-disabled);
 }
 
 .stepper-outline-light .stepper-item:not(:last-child)::after,
@@ -84,10 +84,10 @@
   justify-content: center;
   width: 2rem;
   height: 2rem;
-  font-size: 1rem;
+  font-size: var(--road-button-medium);
   font-weight: 700;
-  color: var(--road-grey-500);
-  background: var(--road-grey-200);
+  color: var(--road-on-surface-disabled);
+  background: var(--road-surface-inverse);
   border-radius: 50%;
   fill: currentColor;
 }
@@ -100,17 +100,17 @@
 .stepper-secondary.stepper-outline .stepper-icon {
   width: calc(2rem - 4px);
   height: calc(2rem - 4px);
-  color: var(--road-grey-500);
-  background: var(--road-grey-000);
-  border: 2px solid var(--road-grey-500);
+  color: var(--road-on-surface-disabled);
+  background: var(--road-surface);
+  border: 2px solid var(--road-surface-disabled);
   fill: currentColor;
 }
 
 .stepper-outline-light .stepper-icon,
 .stepper-secondary.stepper-outline-light .stepper-icon {
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-disabled);
   background: none;
-  border: 2px solid var(--road-grey-500);
+  border: 2px solid var(--road-surface-disabled);
   fill: currentColor;
 }
 
@@ -120,93 +120,93 @@
 .stepper-title {
   display: block;
   margin-top: 0.25rem;
-  font-size: 0.875rem;
+  font-size: var(--road-body-small);
   font-weight: 700;
-  color: var(--road-grey-600);
+  color: var(--road-on-surface-weak);
 }
 
 .stepper-title span{
   display: block;
-  font-size: 0.875rem;
+  font-size: var(--road-body-small);
   font-weight: 400;
-  color: var(--road-grey-600);
+  color: var(--road-on-surface-weak);
 }
 
 /* STEP COMPLETED
  -------------------- */
 
 .completed:not(:last-child)::after {
-  background: var(--road-primary-500);
+  background: var(--road-primary);
 }
 
 .stepper-secondary .completed:not(:last-child)::after,
 .stepper-secondary.stepper-outline .completed:not(:last-child)::after,
 .stepper-secondary.stepper-outline-light .completed:not(:last-child)::after {
-  background: var(--road-secondary-600);
+  background: var(--road-secondary);
 }
 
 .completed .stepper-icon,
 .current .stepper-icon {
   width: 2rem;
   height: 2rem;
-  color: var(--road-primary-contrast);
-  background: var(--road-primary-500);
+  color: var(--road-on-primary);
+  background: var(--road-primary);
   border: 0;
 }
 
 .stepper-outline .completed .stepper-icon {
-  color: var(--road-primary-500);
-  background: var(--road-grey-000);
-  border: 2px solid var(--road-primary-500);
+  color: var(--road-primary);
+  background: var(--road-surface);
+  border: 2px solid var(--road-primary);
 }
 
 .stepper-outline-light .completed .stepper-icon {
-  color: var(--road-primary-500);
+  color: var(--road-primary);
   background: none;
-  border: 2px solid var(--road-primary-500);
+  border: 2px solid var(--road-primary);
 }
 
 .stepper-secondary .completed .stepper-icon {
-  color: var(--road-grey-900);
-  background: var(--road-secondary-600);
+  color: var(--road-on-secondary);
+  background: var(--road-secondary);
   border: 0;
 }
 
 .stepper-secondary.stepper-outline .completed .stepper-icon {
   width: calc(2rem - 4px);
   height: calc(2rem - 4px);
-  color: var(--road-secondary-600);
-  background: var(--road-grey-000);
-  border: 2px solid var(--road-secondary-600);
+  color: var(--road-secondary);
+  background: var(--road-surface);
+  border: 2px solid var(--road-secondary);
 }
 
 .stepper-secondary.stepper-outline-light .completed .stepper-icon {
   width: calc(2rem - 4px);
   height: calc(2rem - 4px);
-  color: var(--road-secondary-600);
+  color: var(--road-secondary);
   background: none;
-  border: 2px solid var(--road-secondary-600);
+  border: 2px solid var(--road-secondary);
 }
 
 .stepper-secondary .current .stepper-icon {
   width: calc(2rem - 4px);
   height: calc(2rem - 4px);
   color: var(--road-grey-900);
-  background: var(--road-secondary-600);
-  border: 2px solid var(--road-secondary-600);
+  background: var(--road-secondary);
+  border: 2px solid var(--road-secondary);
 }
 
 .stepper-secondary.stepper-outline .current .stepper-icon {
-  color: var(--road-grey-900);
-  background: var(--road-secondary-600);
+  color: var(--road-on-secondary);
+  background: var(--road-secondary);
 }
 
 .stepper-secondary.stepper-outline-light .current .stepper-icon {
-  color: var(--road-grey-900);
-  background: var(--road-secondary-600);
+  color: var(--road-on-secondary);
+  background: var(--road-secondary);
 }
 
 .current .stepper-title {
   font-weight: 700;
-  color: var(--road-grey-900);
+  color: var(--road-on-surface);
 }