@roadtrip/components 2.27.0 → 2.29.0

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

@@ -8,7 +8,13 @@
  * - Item
  */
 
+/**
+ * @prop --margin-top: margin top of the select-filter (should equal the height of the field)
+ */
+
 :host {
+  --margin-top: 3rem;
+
   position: relative;
   display: block;
 }
@@ -18,18 +24,18 @@
 
 .select-filter-list {
   position: absolute;
-  top: 3rem;
+  top: var(--margin-top);
   z-index: 1;
   width: 100%;
   max-height: 16rem;
   padding: 0.5rem 0;
   margin: 0;
   overflow-y: scroll;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   list-style-type: none;
-  background: var(--white);
+  background: var(--road-grey-000);
   border-radius: 0 0 0.25rem 0.25rem;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
 }
@@ -48,6 +54,6 @@
 
 .select-filter-item:hover,
 .select-filter-item.highlight {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -26,6 +26,14 @@ export default {
         type: null,
       },
     },
+    '--margin-top': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
   },
   args: {
     options: [
@@ -43,7 +51,7 @@ export default {
       ignoreLocation: true,
     },
     ' ': `<road-input-group>
-    <road-input input-id="brand" label="Brand" class="mb-0"></road-input>
+    <road-input input-id="brand" sizes="xl" label="Brand"></road-input>
     <label slot="append" for="brand">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -52,7 +60,7 @@ export default {
 };
 
 const Template = (args) => html`
-<road-select-filter .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
+<road-select-filter style="--margin-top: 3.5rem;" .options=${args.options} only-select="${ifDefined(args['only-select'])}" @roadselected=${event => args.roadselected(event.detail)}>
   ${unsafeHTML(args[' '])}
 </road-select-filter>
 `;
@@ -62,7 +70,7 @@ export const Playground = Template.bind({});
 export const WithValue = Template.bind({});
 WithValue.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand2" label="Brand" value="Audi" class="mb-0"></road-input>
+    <road-input input-id="brand2" sizes="xl" label="Brand" value="Audi"></road-input>
     <label slot="append" for="brand2">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -72,7 +80,7 @@ WithValue.args = {
 export const Disabled = Template.bind({});
 Disabled.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand3" label="Brand" disabled class="mb-0"></road-input>
+    <road-input input-id="brand3" sizes="xl" label="Brand" disabled></road-input>
     <label slot="append" for="brand3">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -82,7 +90,7 @@ Disabled.args = {
 export const Error = Template.bind({});
 Error.args = {
   ' ': `<road-input-group>
-    <road-input input-id="brand4" label="Brand" error="Select a Brand" class="mb-0"></road-input>
+    <road-input input-id="brand4" sizes="xl" label="Brand" error="Select a Brand"></road-input>
     <label slot="append" for="brand4">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>
@@ -106,7 +114,7 @@ withHTML.args = {
     }
   ],
   ' ': `<road-input-group>
-    <road-input input-id="controls" label="Controls" class="mb-0"></road-input>
+    <road-input input-id="controls" sizes="xl" label="Controls" class="mb-0"></road-input>
     <label slot="append" for="brand">
       <road-icon name="arrow-drop" focusable="false"></road-icon>
     </label>

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

@@ -10,12 +10,20 @@
 /* SKELETON
  -------------------- */
 
+/**
+ * @prop --background-light: base light grey color
+ * @prop --background-dark: second grey color to see the animation
+ */
+
 :host {
+  --background-light: var(--road-grey-200);
+  --background-dark: var(--road-grey-300);
+
   position: relative;
   display: block;
   width: 100%;
   min-height: 1rem;
-  background: linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);
+  background: linear-gradient(to right, var(--background-light) 8%, var(--background-dark) 18%, var(--background-light) 33%);
   background-size: 800px 104px;
   animation: road-skeleton-animation 1s linear infinite;
 }

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

@@ -3,6 +3,24 @@ import { html } from 'lit-html';
 export default {
   title: 'Indicators/Skeleton',
   component: 'road-skeleton',
+  argTypes: {
+    '--background-light': {
+      table: {
+        defaultValue: { summary: 'var(--road-grey-200)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--background-dark': {
+      table: {
+        defaultValue: { summary: 'var(--road-grey-300)' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
 };
 
 export const List = () => html`

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

@@ -27,7 +27,7 @@
 .spinner-circle {
   animation: road-dash 1.5s ease-in-out infinite;
   fill: none;
-  stroke: var(--secondary);
+  stroke: var(--road-primary-500);
   stroke-width: 3;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;

package/dist/collection/components/switch/switch.css

@@ -26,9 +26,9 @@
   position: relative;
   display: block;
   margin-bottom: 1rem;
-  font-family: var(--font, sans-serif);
-  font-size: 0.875rem;
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
+  color: var(--road-grey-900);
 }
 
 /**
@@ -64,12 +64,12 @@
   width: var(--switch-lever-width);
   height: 2rem;
   padding: 0.5rem 0.625rem;
-  margin-right: 0.5rem;
+  margin-right: 0.75rem;
   font-size: 0.625rem;
   font-weight: 700;
   line-height: 1.6;
   content: "";
-  background: var(--border);
+  background: var(--road-grey-400);
   border: 0.125rem solid transparent;
   border-radius: 1.125rem;
   transition: background 0.2s ease-in-out;
@@ -82,7 +82,7 @@
 .form-switch-lever::before {
   font-size: 0.625rem;
   font-weight: 700;
-  color: var(--white);
+  color: var(--road-grey-000);
   text-transform: uppercase;
   content: attr(data-off);
 }
@@ -99,7 +99,7 @@
   width: 1.625rem;
   height: 1.625rem;
   content: "";
-  background: var(--white);
+  background: var(--road-grey-000);
   border-radius: 50%;
   box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out;
@@ -126,7 +126,7 @@
  */
 
 .form-switch-input.focus-visible ~ .form-switch-label .form-switch-lever {
-  box-shadow: 0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);
+  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);
 }
 
 /* FEEDBACK
@@ -137,11 +137,11 @@
  */
 
 .form-switch-input:checked ~ .form-switch-secondary .form-switch-lever {
-  background: var(--secondary);
+  background: var(--road-primary-500);
 }
 
 .form-switch-input:checked ~ .form-switch-secondary .form-switch-lever::before {
-  color: var(--secondary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 /**
@@ -149,11 +149,11 @@
  */
 
 .form-switch-input:checked ~ .form-switch-info .form-switch-lever {
-  background: var(--info);
+  background: var(--road-info-default);
 }
 
 .form-switch-input:checked ~ .form-switch-info .form-switch-lever::before {
-  color: var(--info-contrast);
+  color: var(--road-info-contrast);
 }
 
 /**
@@ -161,11 +161,11 @@
  */
 
 .form-switch-input:checked ~ .form-switch-success .form-switch-lever {
-  background: var(--success);
+  background: var(--road-success-default);
 }
 
 .form-switch-input:checked ~ .form-switch-success .form-switch-lever::before {
-  color: var(--success-contrast);
+  color: var(--road-success-contrast);
 }
 
 /**
@@ -173,11 +173,11 @@
  */
 
 .form-switch-input:checked ~ .form-switch-warning .form-switch-lever {
-  background: var(--warning);
+  background: var(--road-warning-default);
 }
 
 .form-switch-input:checked ~ .form-switch-warning .form-switch-lever::before {
-  color: var(--warning-contrast);
+  color: var(--road-warning-contrast);
 }
 
 /**
@@ -185,11 +185,11 @@
  */
 
 .form-switch-input:checked ~ .form-switch-danger .form-switch-lever {
-  background: var(--danger);
+  background: var(--road-danger-default);
 }
 
 .form-switch-input:checked ~ .form-switch-danger .form-switch-lever::before {
-  color: var(--danger-contrast);
+  color: var(--road-danger-contrast);
 }
 
 /* POSITION
@@ -197,7 +197,7 @@
 
 .form-switch-right {
   margin-right: 0;
-  margin-left: 0.5rem;
+  margin-left: 0.75rem;
 }
 
 .form-switch-spaced {

package/dist/collection/components/tab-bar/tab-bar.css

@@ -9,13 +9,13 @@
 
 
 :host {
-  --tab-bar-background: var(--white);
-  --tab-color: var(--text-second);
-  --tab-color-selected: var(--text);
-  --tab-underline-selected: var(--secondary);
-  --tab-background: var(--white);
-  --tab-background-hover: var(--background-second);
-  --tab-background-focused: var(--background);
+  --tab-bar-background: var(--road-grey-000);
+  --tab-color: var(--road-grey-600);
+  --tab-color-selected: var(--road-grey-900);
+  --tab-underline-selected: var(--road-primary-500);
+  --tab-background: var(--road-grey-000);
+  --tab-background-hover: var(--road-grey-100);
+  --tab-background-focused: var(--road-grey-300);
 
   display: flex;
   width: 100%;
@@ -23,13 +23,12 @@
   margin: 0;
   overflow: scroll;
   overflow-x: inherit;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   line-height: 1.5;
-  color: var(--text);
-  text-transform: uppercase;
+  color: var(--road-grey-900);
   list-style: none;
   background: var(--tab-bar-background);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--road-grey-300);
   fill: currentColor;
   scrollbar-width: none;
 }

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

@@ -158,7 +158,11 @@
 /* LABEL
  -------------------- */
 
+:host ::slotted(road-label) {
+  font-size: 1rem;
+}
+
 :host(.tab-layout-icon-top) ::slotted(road-label) {
   margin-top: 0.25rem;
-  font-size: 0.625rem;
+  font-size: 1rem;
 }

package/dist/collection/components/table/table.css

@@ -10,13 +10,13 @@
 
 ::slotted(table) {
   width: 100%;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--text);
+  color: var(--road-grey-900);
   border-collapse: collapse;
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
+  border-top: 1px solid var(--road-grey-300);
+  border-bottom: 1px solid var(--road-grey-300);
 }
 
 ::slotted(table th),
@@ -27,5 +27,5 @@
 
 ::slotted(table thead tr),
 ::slotted(table tbody tr:nth-child(2n)) {
-  background: var(--background-second);
+  background: var(--road-grey-100);
 }

package/dist/collection/components/text/text.css

@@ -13,7 +13,7 @@
  */
 
 :host(.text-primary) {
-  color: var(--primary);
+  color: var(--road-primary-900);
 }
 
 /**
@@ -21,7 +21,7 @@
  */
 
 :host(.text-secondary) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 /**
@@ -29,7 +29,7 @@
  */
 
 :host(.text-accent) {
-  color: var(--accent);
+  color: var(--road-secondary-500);
 }
 
 /**
@@ -37,7 +37,7 @@
  */
 
 :host(.text-info) {
-  color: var(--info);
+  color: var(--road-info-default);
 }
 
 /**
@@ -45,7 +45,7 @@
  */
 
 :host(.text-success) {
-  color: var(--success);
+  color: var(--road-success-default);
 }
 
 /**
@@ -53,7 +53,7 @@
  */
 
 :host(.text-warning) {
-  color: var(--warning);
+  color: var(--road-warning-default);
 }
 
 /**
@@ -61,7 +61,7 @@
  */
 
 :host(.text-danger) {
-  color: var(--danger);
+  color: var(--road-danger-default);
 }
 
 /**
@@ -69,7 +69,7 @@
  */
 
 :host(.text-default) {
-  color: var(--text);
+  color: var(--road-grey-900);
 }
 
 /**
@@ -77,7 +77,7 @@
  */
 
 :host(.text-default-second) {
-  color: var(--text-second);
+  color: var(--road-grey-600);
 }
 
 /**
@@ -85,7 +85,7 @@
  */
 
 :host(.text-disabled) {
-  color: var(--text-disabled);
+  color: var(--road-grey-400);
 }
 
 /**
@@ -93,5 +93,5 @@
  */
 
 :host(.text-white) {
-  color: var(--white);
+  color: var(--road-grey-000);
 }

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

@@ -5,16 +5,17 @@
  * - Input
  * - Textarea
  * - Label
+ * - Sizes
  * - Error
+ * - Helper
  */
 
-
 :host {
   position: relative;
   display: block;
   margin-bottom: 1rem;
-  font-family: var(--font, sans-serif);
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  color: var(--road-grey-900);
 }
 
 /* INPUT
@@ -25,12 +26,12 @@
   display: block;
   width: 100%;
   height: 3rem;
-  padding: 0.625rem 1rem 0;
+  padding: 0.75rem 1rem 0;
   margin: 0;
-  font-size: 0.875rem;
-  color: var(--text);
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  font-size: 1rem;
+  color: var(--road-grey-900);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
@@ -43,7 +44,19 @@
  */
 
 .form-control::placeholder {
-  color: var(--text-second);
+  color: var(--road-grey-500);
+  opacity: 1;
+}
+
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .form-control:not(:disabled):hover {
+    border-color: var(--road-primary-700);
+  }
 }
 
 /**
@@ -53,11 +66,11 @@
 .form-control:focus ~ .form-label,
 .form-control[required]:valid ~ .form-label,
 .form-control.has-value ~ .form-label {
-  transform: scale(0.7) translateY(-0.75rem);
+  transform: scale(0.625) translateY(-0.625rem);
 }
 
 .form-control:placeholder-shown ~ .form-label {
-  transform: scale(0.7) translateY(-0.75rem);
+  transform: scale(0.625) translateY(-0.625rem);
 }
 
 /* stylelint-disable */
@@ -65,12 +78,12 @@
 /* IE FIX */
 
 .form-control:-ms-input-placeholder ~ .form-label {
-  transform: scale(0.7) translateY(-0.75rem);
+  transform: scale(0.625) translateY(-0.625rem);
 }
 /* stylelint-enable */
 
-.form-control:focus {
-  border-color: var(--secondary);
+.form-control:not(:disabled):focus {
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -80,9 +93,10 @@
 
 .form-control:disabled,
 .form-control[readonly] {
-  color: var(--text-disabled);
+  color: var(--road-grey-400);
   cursor: not-allowed;
-  background: var(--background-second);
+  background: var(--road-disabled);
+  opacity: 1;
 }
 
 /* TEXTAREA
@@ -91,26 +105,54 @@
 .textarea-control {
   height: auto;
   padding-top: 1rem;
+  padding-bottom: 0.5rem;
   line-height: 1.5;
 }
 
-
 /* LABEL
  -------------------- */
 
 .form-label {
   position: absolute;
-  top: 0.875rem;
+  top: 0.75rem;
   left: 1rem;
   display: block;
-  font-size: 0.875rem;
+  font-size: 1rem;
   line-height: 1.5;
-  color: var(--text-second);
+  color: var(--road-grey-500);
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
 }
 
+/* SIZES
+ -------------------- */
+
+:host(.input-xl) {
+  --height: 3.5rem;
+}
+
+:host(.input-xl) .form-control {
+  padding: 1.5rem 1rem 0.5rem;
+}
+
+:host(.input-xl) .form-label {
+  top: 1rem;
+}
+
+:host(.input-xl) .form-control:focus ~ .form-label,
+:host(.input-xl) .form-control[required]:valid ~ .form-label,
+:host(.input-xl) .form-control.has-value ~ .form-label,
+:host(.input-xl) .form-control[type="date"] ~ .form-label,
+:host(.input-xl) .form-control[type="time"] ~ .form-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
+:host(.input-xl) .form-control:placeholder-shown ~ .form-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
+
 /* ERROR
  -------------------- */
 
@@ -119,15 +161,24 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger-text);
+  color: var(--road-danger-text);
 }
 
 .form-control.is-invalid,
 .was-validated .form-control:invalid {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-control.is-invalid ~ .invalid-feedback,
 .was-validated .form-control:invalid ~ .invalid-feedback {
   display: block;
 }
+
+/* HELPER
+ -------------------- */
+
+.helper {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--road-grey-500);
+}