@roadtrip/components 2.27.0 → 2.29.0

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

@@ -30,8 +30,8 @@
   --border-radius: 0.25rem;
   --font-size: 1rem;
   --margin-bottom: 1rem;
-  --padding-start: 1rem;
-  --padding-end: 1rem;
+  --padding-start: 1.5rem;
+  --padding-end: 1.5rem;
 
   box-sizing: border-box;
   display: inline-flex;
@@ -40,11 +40,11 @@
   height: 3rem;
   padding: 0;
   margin-bottom: var(--margin-bottom);
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
   font-size: var(--font-size);
   font-weight: 700;
   line-height: 1.375;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-decoration: none;
   white-space: nowrap;
   vertical-align: middle;
@@ -105,22 +105,30 @@
 /* PLAIN
  -------------------- */
 
+/**
+ * Default
+ */
+
+:host(.btn-default:not([disabled]).focus-visible) {
+  background: var(--road-grey-200);
+}
+
 /**
  * Primary
  */
 
 :host(.btn-primary) {
-  color: var(--primary-contrast);
-  background: var(--primary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }
 
 :host(.btn-primary) ::slotted(road-icon) {
-  color: var(--primary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 :host(.btn-primary:not([disabled]):hover),
 :host(.btn-primary:not([disabled]).focus-visible) {
-  background: var(--primary-hover);
+  background: var(--road-primary-700);
 }
 
 /**
@@ -128,97 +136,17 @@
  */
 
 :host(.btn-secondary) {
-  color: var(--secondary-contrast);
-  background: var(--secondary);
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
 }
 
 :host(.btn-secondary) ::slotted(road-icon) {
-  color: var(--secondary-contrast);
+  color: var(--road-primary-contrast);
 }
 
 :host(.btn-secondary:not([disabled]):hover),
 :host(.btn-secondary:not([disabled]).focus-visible) {
-  background: var(--secondary-hover);
-}
-
-/**
- * Info
- */
-
-:host(.btn-info) {
-  color: var(--info-contrast);
-  background: var(--info);
-}
-
-:host(.btn-info) ::slotted(road-icon) {
-  color: var(--info-contrast);
-}
-
-:host(.btn-info:not([disabled]):hover),
-:host(.btn-info:not([disabled]).focus-visible) {
-  background: var(--info-hover);
-}
-
-/**
- * Success
- */
-
-:host(.btn-success) {
-  color: var(--success-contrast);
-  background: var(--success-text);
-}
-
-:host(.btn-success) ::slotted(road-icon) {
-  color: var(--success-contrast);
-}
-
-:host(.btn-success:not([disabled]):hover),
-:host(.btn-success:not([disabled]).focus-visible) {
-  background: var(--success-hover);
-}
-
-/**
- * Warning
- */
-
-:host(.btn-warning) {
-  color: var(--warning-contrast);
-  background: var(--warning);
-}
-
-:host(.btn-warning) ::slotted(road-icon) {
-  color: var(--warning-contrast);
-}
-
-:host(.btn-warning:not([disabled]):hover),
-:host(.btn-warning:not([disabled]).focus-visible) {
-  background: var(--warning-hover);
-}
-
-/**
- * Danger
- */
-
-:host(.btn-danger) {
-  color: var(--danger-contrast);
-  background: var(--danger-text);
-}
-
-:host(.btn-danger) ::slotted(road-icon) {
-  color: var(--danger-contrast);
-}
-
-:host(.btn-danger:not([disabled]):hover),
-:host(.btn-danger:not([disabled]).focus-visible) {
-  background: var(--danger-hover);
-}
-
-/**
- * Default
- */
-
-:host(.btn-default:not([disabled]).focus-visible) {
-  background: var(--background-second);
+  background: var(--road-primary-700);
 }
 
 /**
@@ -227,13 +155,13 @@
 
 :host(.btn-link) {
   font-weight: 400;
-  color: var(--secondary);
+  color: var(--road-primary-500);
   background: transparent;
 }
 
 :host(.btn-link:not([disabled]):hover),
 :host(.btn-link:not([disabled]).focus-visible) {
-  color: var(--secondary-hover);
+  color: var(--road-primary-700);
 }
 
 /* OUTLINE
@@ -241,9 +169,6 @@
 
 :host(.btn-outline-primary),
 :host(.btn-outline-secondary),
-:host(.btn-outline-success),
-:host(.btn-outline-warning),
-:host(.btn-outline-danger),
 :host(.btn-outline-default) {
   background: transparent;
 }
@@ -253,14 +178,18 @@
  */
 
 :host(.btn-outline-default) {
-  color: var(--text-second);
-  background: var(--white);
-  border-color: var(--text-second);
+  color: var(--road-grey-600);
+  background: var(--road-grey-000);
+  border-color: var(--road-grey-600);
+}
+
+:host(.btn-outline-default) ::slotted(road-icon) {
+  color: var(--road-grey-600);
 }
 
 :host(.btn-outline-default:hover),
 :host(.btn-outline-default.focus-visible) {
-  background: var(--background);
+  background: var(--road-grey-200);
 }
 
 /**
@@ -268,17 +197,17 @@
  */
 
 :host(.btn-outline-primary) {
-  color: var(--primary);
-  border-color: var(--primary);
+  color: var(--road-primary-500);
+  border-color: var(--road-primary-500);
 }
 
 :host(.btn-outline-primary) ::slotted(road-icon) {
-  color: var(--primary);
+  color: var(--road-primary-500);
 }
 
 :host(.btn-outline-primary:hover),
 :host(.btn-outline-primary.focus-visible) {
-  background: var(--primary-lighten);
+  background: var(--road-primary-100);
 }
 
 /**
@@ -286,89 +215,17 @@
  */
 
 :host(.btn-outline-secondary) {
-  color: var(--secondary);
-  border-color: var(--secondary);
+  color: var(--road-primary-500);
+  border-color: var(--road-primary-500);
 }
 
 :host(.btn-outline-secondary) ::slotted(road-icon) {
-  color: var(--secondary);
+  color: var(--road-primary-500);
 }
 
 :host(.btn-outline-secondary:hover),
 :host(.btn-outline-secondary.focus-visible) {
-  background: var(--secondary-lighten);
-}
-
-/**
- * Outline info
- */
-
-:host(.btn-outline-info) {
-  color: var(--info);
-  border-color: var(--info);
-}
-
-:host(.btn-outline-info) ::slotted(road-icon) {
-  color: var(--info);
-}
-
-:host(.btn-outline-info:hover),
-:host(.btn-outline-info.focus-visible) {
-  background: var(--info-background);
-}
-
-/**
- * Outline success
- */
-
-:host(.btn-outline-success) {
-  color: var(--success-text);
-  border-color: var(--success-text);
-}
-
-:host(.btn-outline-success) ::slotted(road-icon) {
-  color: var(--success-text);
-}
-
-:host(.btn-outline-success:hover),
-:host(.btn-outline-success.focus-visible) {
-  background: var(--success-background);
-}
-
-/**
- * Outline warning
- */
-
-:host(.btn-outline-warning) {
-  color: var(--warning-text);
-  border-color: var(--warning-text);
-}
-
-:host(.btn-outline-warning) ::slotted(road-icon) {
-  color: var(--warning-text);
-}
-
-:host(.btn-outline-warning:hover),
-:host(.btn-outline-warning.focus-visible) {
-  background: var(--warning-background);
-}
-
-/**
- * Outline danger
- */
-
-:host(.btn-outline-danger) {
-  color: var(--danger-text);
-  border-color: var(--danger-text);
-}
-
-:host(.btn-outline-danger) ::slotted(road-icon) {
-  color: var(--danger-text);
-}
-
-:host(.btn-outline-danger:hover),
-:host(.btn-outline-danger.focus-visible) {
-  background: var(--danger-background);
+  background: var(--road-primary-100);
 }
 
 /* DISABLED
@@ -382,11 +239,6 @@
   cursor: not-allowed;
 }
 
-:host([class*="btn-outline"][disabled]:hover),
-:host([class*="btn-outline"][disabled].focus-visible) {
-  background: var(--white);
-}
-
 /* SIZES
  -------------------- */
 
@@ -398,6 +250,19 @@
   margin-left: 0.5rem;
 }
 
+/**
+ * Extra Large
+ */
+
+:host(.btn-xl) {
+  height: 3.5rem;
+}
+
+:host(.btn-xl) ::slotted(road-icon) {
+  width: 2rem;
+  height: 2rem;
+}
+
 /**
  * Medium
  */
@@ -418,10 +283,9 @@
  */
 
 :host(.btn-sm) {
-  --font-size: 0.75rem;
+  --font-size: 0.875rem;
 
   height: 2rem;
-  line-height: 1.5;
 }
 
 :host(.btn-sm) ::slotted(road-icon) {

package/dist/collection/components/button/button.js

@@ -92,14 +92,9 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Color",
-        "resolved": "\"accent\" | \"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
-        "references": {
-          "Color": {
-            "location": "import",
-            "path": "../../interface"
-          }
-        }
+        "original": "'primary' | 'secondary' | 'default'",
+        "resolved": "\"default\" | \"primary\" | \"secondary\" | undefined",
+        "references": {}
       },
       "required": false,
       "optional": true,
@@ -115,8 +110,8 @@ export class Button {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'sm' | 'md' | 'lg'",
-        "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | undefined",
         "references": {}
       },
       "required": false,

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

@@ -12,7 +12,7 @@ export default {
   },
   argTypes: {
     color: {
-      options: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger'],
+      options: ['default', 'primary', 'secondary'],
       control: {
         type: 'select',
       },
@@ -48,7 +48,7 @@ export default {
       },
     },
     size: {
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
       control: {
         type: 'select',
       },
@@ -131,7 +131,7 @@ export default {
     outline: null,
     size: null,
     start: ``,
-    ' ': `click me!`,
+    ' ': `Label`,
     end: undefined,
   },
 };
@@ -158,6 +158,11 @@ Playground.args = {
   ' ': `Add to cart`,
 };
 
+export const Default = Template.bind({});
+Default.args = {
+  color: 'secondary',
+};
+
 export const Outline = Template.bind({});
 Outline.args = {
   color: 'secondary',
@@ -178,6 +183,6 @@ Disabled.args = {
 
 export const BackButton = Template.bind({});
 BackButton.args = {
-  start: `<road-icon slot="start" name="navigation-chevron" color="warning" rotate="180"></road-icon>`,
+  start: `<road-icon slot="start" name="navigation-chevron" rotate="180"></road-icon>`,
   ' ': `Back`,
 };

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

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

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

@@ -67,19 +67,19 @@ road-carousel {
 }
 
 .swiper-pagination-progressbar {
-  background: var(--border);
+  background: var(--road-grey-200);
 }
 
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-  background: var(--text);
+  background: var(--road-grey-900);
 }
 
 .swiper-scrollbar {
-  background: var(--border);
+  background: var(--road-grey-300);
 }
 
 .swiper-scrollbar-drag {
-  background: var(--text);
+  background: var(--road-grey-900);
 }
 
 /* ARROWS
@@ -103,7 +103,7 @@ road-carousel {
 
   .swiper-button-prev road-icon,
   .swiper-button-next road-icon {
-    color: var(--white);
+    color: var(--road-grey-000);
   }
 }
 
@@ -120,12 +120,12 @@ road-carousel {
 
   .swiper-button-prev:hover,
   .swiper-button-next:hover {
-    background: var(--white);
+    background: var(--road-grey-000);
   }
 
   .swiper-button-prev:hover road-icon,
   .swiper-button-next:hover road-icon {
-    color: var(--text);
+    color: var(--road-grey-900);
   }
 }
 

package/dist/collection/components/checkbox/checkbox.css

@@ -9,6 +9,7 @@
  * - Checkbox
  * - Label
  * - Error
+ * - Helper
  * - Position
  */
 
@@ -20,10 +21,10 @@
   position: relative;
   display: block;
   margin-bottom: 1.5rem;
-  font-family: var(--font, sans-serif);
-  font-size: 0.875rem;
+  font-family: var(--road-font, sans-serif);
+  font-size: 1rem;
   line-height: 1.5;
-  color: var(--text);
+  color: var(--road-grey-900);
 }
 
 /**
@@ -53,12 +54,12 @@
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
-  margin: 0 1rem 0 0;
+  margin: 0 0.75rem 0 0;
   content: "";
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 0.25rem;
-  transition: border 0.2s ease-in-out;
+  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
 }
 
 .form-check-icon {
@@ -69,9 +70,9 @@
   display: block;
   width: 1.25rem;
   height: 1.25rem;
+  color: var(--road-primary-contrast);
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
-  fill: var(--secondary-contrast);
 }
 
 /**
@@ -80,13 +81,13 @@
 
 @media (hover: hover) {
 
-  .form-check-input:not(:checked):not(:disabled) ~ .form-check-label:hover .form-check-icon {
-    opacity: 1;
-    fill: var(--border-form);
+  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {
+    border-color: var(--road-primary-700);
   }
 
-  .form-check-input:not(:checked) ~ .form-check-label:hover::before {
-    border-color: var(--secondary);
+  .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);
   }
 }
 
@@ -94,13 +95,15 @@
  * Checked state
  */
 
-.form-check-input:checked ~ .form-check-label .form-check-icon {
+.form-check-input:checked ~ .form-check-label .form-check-icon,
+.form-check-input:indeterminate ~ .form-check-label .form-check-icon {
   opacity: 1;
 }
 
-.form-check-input:checked ~ .form-check-label::before {
-  background: var(--secondary);
-  border-color: var(--secondary);
+.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);
 }
 
 /**
@@ -108,7 +111,13 @@
  */
 
 .form-check-input.focus-visible ~ .form-check-label::before {
-  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);
+}
+
+.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);
 }
 
 /**
@@ -117,16 +126,20 @@
 
 .form-check-input:disabled ~ .form-check-label,
 .form-check-input[readonly] ~ .form-check-label {
-  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
 .form-check-input:disabled ~ .form-check-label::before,
 .form-check-input[readonly] ~ .form-check-label::before {
-  background: var(--background-second);
+  background: var(--road-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);
+}
+
 /* ERROR
  -------------------- */
 
@@ -136,12 +149,12 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger-text);
+  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(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-check-input.is-invalid ~ .invalid-feedback,
@@ -166,3 +179,12 @@
   right: 0;
   left: auto;
 }
+
+/* HELPER
+ -------------------- */
+
+.helper {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--road-grey-500);
+}