@drivy/cobalt 0.48.0 → 0.49.1

package/src/tokens/theme.js

@@ -0,0 +1,332 @@
+const background = {
+	primary: "white/black.500",
+	secondary: "white/black.400",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.200/purple.1000",
+	info: "yellow.100/yellow.1000",
+	error: "red.500/red.500",
+	errorAlt: "red.100/red.1500",
+	success: "green.700/green.700",
+	successAlt: "green.300/green.1200",
+	connect: "newPurple.500/newPurple.200",
+	connectAlt: "turquoise.50/turquoise.900",
+	driver: "yellow.500/yellow.500",
+	owner: "navy.700/navy.700",
+	disabled: "navy.50/black.500",
+	neutral: "navy.100/black.50",
+	neutralAlt: "navy.50/black.100",
+	seasonLow: "season.100/season.300",
+	seasonMedium: "season.300/season.600",
+	seasonHigh: "season.700/season.900",
+	seasonVeryHigh: "season.1100/season.1200",
+	rental: "blue.500/blue.700",
+	rentalAlt: "blue.300/blue.500",
+	blocker: "grey.100/black.200",
+	rideshare: "black.1000/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	base: "navy.900/navy.50",
+	secondaryInteractive: {
+		DEFAULT: "white/black.400",
+		hover: "navy.50/black.300"
+	},
+	accentInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.600/purple.700"
+	},
+	accentAltInteractive: {
+		DEFAULT: "purple.200/purple.1000",
+		hover: "purple.200/purple.900"
+	},
+	connectInteractive: {
+		DEFAULT: "newPurple.500/newPurple.200",
+		hover: "turquoise.700/turquoise.700"
+	},
+	errorInteractive: {
+		DEFAULT: "red.500/red.500",
+		hover: "red.700/red.500"
+	}
+};
+const text = {
+	base: "navy.700/grey.100",
+	subdued: "navy.300/grey.300",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.700/purple.200",
+	info: "yellow.900/yellow.400",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.200",
+	success: "green.700/green.400",
+	successAlt: "green.900/green.300",
+	connect: "newPurple.500/newPurple.200",
+	connectAlt: "turquoise.900/white",
+	driver: "navy.700/navy.700",
+	owner: "white/grey.100",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.700/yellow.700",
+	disabled: "navy.120/black.50",
+	onAccent: "white/black.1000",
+	onRideshare: "white/white",
+	onError: "white/white",
+	onSuccess: "white/white",
+	onConnect: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onPicked: "white/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
+	onBase: "white/navy.900",
+	onSeasonLow: "black.800/black.800",
+	onSeasonMedium: "black.800/white",
+	onSeasonHigh: "white/white",
+	onSeasonVeryHigh: "white/white",
+	onRental: "white/white",
+	onRentalAlt: "black.300/black.1000",
+	inversed: "white/white",
+	baseInteractive: {
+		DEFAULT: "navy.700/grey.100",
+		hover: "navy.900/grey.300"
+	},
+	subduedInteractive: {
+		DEFAULT: "navy.300/grey.300",
+		hover: "navy.500/grey.400"
+	},
+	accentInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
+	},
+	accentAltInteractive: {
+		DEFAULT: "purple.700/purple.200",
+		hover: "purple.700/purple.400"
+	}
+};
+const icon = {
+	base: "navy.700/grey.100",
+	subdued: "navy.300/grey.300",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.700/purple.200",
+	info: "yellow.900/yellow.400",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.200",
+	success: "green.700/green.400",
+	successAlt: "green.900/green.300",
+	connect: "newPurple.500/newPurple.200",
+	connectAlt: "turquoise.900/turquoise.50",
+	driver: "navy.700/navy.700",
+	owner: "white/grey.100",
+	warning: "orange.500/orange.300",
+	infoAlt: "yellow.500/yellow.700",
+	disabled: "navy.200/black.75",
+	onAccent: "white/black.1000",
+	onRideshare: "white/white",
+	onError: "white/white",
+	onSuccess: "white/white",
+	onConnect: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onPicked: "white/black.1000",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
+	onBase: "white/navy.900",
+	disabledAlt: "navy.120/black.50",
+	onRental: "white/white",
+	inversed: "white/white",
+	baseInteractive: {
+		DEFAULT: "navy.700/grey.100",
+		hover: "navy.900/grey.200"
+	},
+	subduedInteractive: {
+		DEFAULT: "navy.300/grey.300",
+		hover: "navy.500/grey.400"
+	},
+	accentInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
+	},
+	accentAltInteractive: {
+		DEFAULT: "purple.700/purple.200",
+		hover: "purple.700/purple.400"
+	}
+};
+const stroke = {
+	base: "navy.100/black.100",
+	subdued: "navy.50/black.100",
+	accent: "purple.500/purple.400",
+	accentAlt: "purple.600/purple.400",
+	success: "green.500/green.700",
+	successAlt: "green.500/green.700",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.200",
+	strong: "grey.300/grey.700",
+	onAccent: "white/grey.100",
+	rental: "blue.700/blue.500",
+	blocker: "grey.300/grey.500",
+	onError: "white/white",
+	onSuccess: "white/white",
+	connect: "newPurple.500/newPurple.200",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	onConnect: "white/black.75",
+	onKeyExchange: "white/black.75",
+	onPicked: "white/black.75",
+	onRideshare: "white/black.1000",
+	rideshare: "black.1000/white",
+	onBase: "white/black.600",
+	baseInteractive: {
+		DEFAULT: "navy.100/black.100",
+		hover: "navy.300/black.300",
+		press: "navy.500/black.500"
+	},
+	accentInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.600",
+		press: "purple.900/purple.800"
+	},
+	strongInteractive: {
+		DEFAULT: "grey.300/grey.700",
+		hover: "grey.400/black.50",
+		press: "grey.500/black.100"
+	}
+};
+const buttonIcon = {
+	selected: "purple.500/grey.100",
+	primary: "white/black.1000",
+	secondary: "purple.500/purple.400",
+	tertiary: "purple.500/white",
+	destructive: "red.500/red.200",
+	success: "white/green.100",
+	successAlt: "green.900/green.100",
+	disabled: "navy.300/grey.300",
+	accentAlt: "purple.500/grey.100",
+	primaryInteractive: {
+		DEFAULT: "white/black.1000",
+		hover: "white/black.1000",
+		press: "white/black.1000"
+	},
+	secondaryInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.500/purple.300",
+		press: "purple.900/purple.900"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "purple.500/white",
+		hover: "purple.500/white",
+		press: "purple.900/purple.1000"
+	},
+	destructiveInteractive: {
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
+	},
+	successAltInteractive: {
+		DEFAULT: "green.900/green.100",
+		hover: "green.900/green.100",
+		press: "green.900/green.100"
+	}
+};
+const buttonLabel = {
+	selected: "purple.500/grey.100",
+	primary: "white/black.1000",
+	secondary: "purple.500/purple.400",
+	tertiary: "purple.500/white",
+	disabled: "navy.300/grey.300",
+	accentAlt: "purple.500/grey.100",
+	destructive: "red.500/red.200",
+	success: "white/green.100",
+	successAlt: "green.900/green.100",
+	primaryInteractive: {
+		DEFAULT: "white/black.1000",
+		hover: "white/black.1000",
+		press: "white/black.1000"
+	},
+	secondaryInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.300",
+		press: "purple.900/purple.900"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "purple.500/white",
+		hover: "purple.700/white",
+		press: "purple.900/purple.1000"
+	},
+	destructiveInteractive: {
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
+	},
+	successAltInteractive: {
+		DEFAULT: "green.900/green.100",
+		hover: "green.900/green.100",
+		press: "green.900/green.100"
+	}
+};
+const buttonBackground = {
+	selected: "purple.100/purpleDeep.900",
+	primary: "purple.500/purple.400",
+	secondary: "white/black.100",
+	tertiary: "white/white",
+	accentAlt: "purple.100/purple.900",
+	destructive: "red.100/red.900",
+	success: "green.700/green.900",
+	successAlt: "green.100/green.1000",
+	disabled: "navy.100/black.50",
+	primaryInteractive: {
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.800",
+		press: "purple.900/purple.1000"
+	},
+	secondaryInteractive: {
+		DEFAULT: "white/black.100",
+		hover: "white/black.500",
+		press: "white/black.500"
+	},
+	tertiaryInteractive: {
+		DEFAULT: "white/white",
+		hover: "white/black.500",
+		press: "white/black.500"
+	},
+	destructiveInteractive: {
+		DEFAULT: "red.100/red.900",
+		hover: "red.120/red.800",
+		press: "red.150/red.900"
+	},
+	successAltInteractive: {
+		DEFAULT: "green.100/green.1000",
+		hover: "green.300/green.900",
+		press: "green.400/green.1000"
+	}
+};
+const fill = {
+	base: "navy.500/navy.50",
+	accent: "purple.500/purple.400",
+	secondary: "yellow.500/yellow.400",
+	subdued: "navy.100/black.50",
+	neutral: "navy.50/black.100",
+	negative: "red.150/red.800",
+	accentAlt: "purple.100/purple.900",
+	disabled: "navy.300/grey.300",
+	error: "red.500/red.500",
+	success: "green.500/green.700",
+	rental: "blue.300/blue.700",
+	blocker: "grey.100/black.200",
+	primary: "white/black.1000"
+};
+const illustrations = {
+	primary: "navy.500/white",
+	secondary: "white/white",
+	accent1: "purple.500/white",
+	accent2: "blue.500/white"
+};
+var require$$0 = {
+	background: background,
+	text: text,
+	icon: icon,
+	stroke: stroke,
+	buttonIcon: buttonIcon,
+	buttonLabel: buttonLabel,
+	buttonBackground: buttonBackground,
+	fill: fill,
+	illustrations: illustrations
+};
+
+export { background, buttonBackground, buttonIcon, buttonLabel, require$$0 as default, fill, icon, illustrations, stroke, text };
+//# sourceMappingURL=theme.js.map

package/src/tokens/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/src/tokens/zIndexes.js

@@ -0,0 +1,35 @@
+const below = -1;
+const base = 0;
+const above = 1;
+const dropdown = 10;
+const nav = 20;
+const header = 30;
+const sidepanel = 80;
+const modal = 90;
+const alert = 100;
+var require$$2 = {
+	below: below,
+	base: base,
+	above: above,
+	"dropdown-below": 9,
+	dropdown: dropdown,
+	"dropdown-above": 11,
+	"nav-below": 19,
+	nav: nav,
+	"nav-above": 21,
+	"header-below": 29,
+	header: header,
+	"header-above": 31,
+	"sidepanel-below": 79,
+	sidepanel: sidepanel,
+	"sidepanel-above": 81,
+	"modal-below": 89,
+	modal: modal,
+	"modal-above": 91,
+	"alert-below": 99,
+	alert: alert,
+	"alert-above": 101
+};
+
+export { above, alert, base, below, require$$2 as default, dropdown, header, modal, nav, sidepanel };
+//# sourceMappingURL=zIndexes.js.map

package/src/tokens/zIndexes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/styles/components/Accordion/index.scss

@@ -33,6 +33,15 @@
       text-align: left;
     }
 
+    // Chevron icon
+    &-chevron-icon {
+      transition: transform 0.25s ease-out;
+
+      &--opened {
+        transform: rotate(-180deg);
+      }
+    }
+
     // Animated +/- icon
     &-icon {
       position: relative;

package/styles/components/Form/Stepper.scss

@@ -41,15 +41,16 @@
     }
 
     &__ActionButton {
-      min-width: 32px;
-      min-height: 32px;
-      width: 32px;
-      height: 32px;
+      min-width: 40px;
+      min-height: 40px;
+      width: 40px;
+      height: 40px;
       padding: 0;
+      border-width: 1px;
 
       font-size: 18px;
 
-      border-radius: 50%;
+      border-radius: border-radius(lg);
       user-select: none;
 
       &:focus {

package/styles/components/Form/TextInput.scss

@@ -14,7 +14,7 @@
       top: 0;
       left: spacing(xs);
 
-      height: 100%;
+      height: var(--form-intput-height);
       display: flex;
 
       .cobalt-Icon {

package/styles/components/Form/form.scss

@@ -1,3 +1,7 @@
+:root {
+  --form-intput-height: 44px;
+}
+
 @mixin form-input-base($container) {
   @include text-color(base);
   @include border(strongInteractive);
@@ -23,7 +27,7 @@
   box-sizing: border-box;
 
   width: 100%;
-  height: 44px;
+  height: var(--form-intput-height);
   padding: 10px 12px;
 
   font-family: font-family(base);

package/styles/components/Layout/Components/index.scss

@@ -1,8 +1,8 @@
 :root {
-  --cobalt-layout-y-spacing: 8px;
-  --cobalt-layout-x-spacing: 24px;
-  --cobalt-layout-item-spacing: 16px;
-  --cobalt-layout-page-header-top-spacing: 32px;
+  --cobalt-layout-y-spacing: theme("spacing.xs");
+  --cobalt-layout-x-spacing: theme("spacing.md");
+  --cobalt-layout-item-spacing: theme("spacing.sm");
+  --cobalt-layout-page-header-top-spacing: theme("spacing.lg");
   --cobalt-layout-section-header-top-spacing: 40px;
 }
 
@@ -15,79 +15,66 @@
 }
 
 .cobalt-layout-section {
-  @include bg-color(primary);
+  @apply c-bg-primary c-flex-grow;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
   // Allow to take the full height of the parent container in full pages
-  flex-grow: 1;
 }
 
 .cobalt-layout-card {
-  @include bg-color(primary);
-  @include border(base);
+  @apply c-bg-primary c-border c-border-base c-rounded-xl;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 
-  border-radius: border-radius(xl);
-
   .cobalt-layout-card__item {
     margin: var(--cobalt-layout-item-spacing);
   }
 }
 
 div.cobalt-layout-stack {
-  @include bg-color(primary);
-  @include border(base);
-  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+  @apply c-bg-primary c-border c-border-base c-rounded-xl;
 
-  border-radius: border-radius(xl);
+  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 
   .cobalt-layout-stack__item {
-    @include border-top(base);
-
-    display: block;
+    @apply c-block c-border-t c-border-t-base;
 
     padding: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item:first-child {
-    border-top: 0;
+    @apply c-border-t-0;
   }
 
   a.cobalt-layout-stack__item {
-    text-decoration: inherit;
-    font-weight: inherit;
+    @apply [text-decoration:inherit] [font-weight:inherit];
   }
 
   a.cobalt-layout-stack__item[href]:hover {
-    @include bg-color(neutralAlt);
+    @apply c-bg-neutralAlt;
   }
 
   a.cobalt-layout-stack__item[href]:first-child {
-    border-radius: calc(border-radius(xl) - 1px) calc(border-radius(xl) - 1px) 0
-      0;
+    border-radius: calc(theme("borderRadius.xl") - 1px)
+      calc(theme("borderRadius.xl") - 1px) 0 0;
   }
 
   a.cobalt-layout-stack__item[href]:last-child {
-    border-radius: 0 0 calc(border-radius(xl) - 1px)
-      calc(border-radius(xl) - 1px);
+    border-radius: 0 0 calc(theme("borderRadius.xl") - 1px)
+      calc(theme("borderRadius.xl") - 1px);
   }
 }
 
 table.cobalt-layout-stack {
-  @include border(base);
-  border-collapse: separate;
+  @apply c-border c-border-base c-border-separate c-rounded-xl c-border-spacing-none;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 
-  border-radius: border-radius(xl);
-  border-spacing: 0;
-
   .cobalt-layout-stack__item:first-of-type th,
   tbody:not(thead ~ tbody) .cobalt-layout-stack__item:first-of-type td {
-    border-top: 0;
+    @apply c-border-t-0;
   }
 
   .cobalt-layout-stack__item td,
   .cobalt-layout-stack__item th {
-    @include border-top(base);
+    @apply c-border-t c-border-t-base;
     padding-top: var(--cobalt-layout-item-spacing);
     padding-bottom: var(--cobalt-layout-item-spacing);
   }
@@ -104,7 +91,7 @@ table.cobalt-layout-stack {
 }
 
 .cobalt-layout-section-title {
-  @include c-text-title-md;
+  @apply c-text-title-md;
   padding: var(--cobalt-layout-section-header-top-spacing)
     var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
     var(--cobalt-layout-x-spacing);

package/styles/components/Layout/Surfaces/index.scss

@@ -1,31 +1,30 @@
 .cobalt-layout-flexible,
 .cobalt-layout-flexibleWithConstraint,
 .cobalt-layout-fixed {
-  display: flex;
-  flex-direction: column;
-  min-height: 1px;
+  @apply c-flex c-flex-col [min-height:1px];
+
+  &.cobalt-layout--fullHeight {
+    @apply c-h-full;
+  }
 }
 
 .cobalt-layout-flexible.cobalt-layout--bottomPadding,
 .cobalt-layout-flexibleWithConstraint.cobalt-layout--bottomPadding,
 .cobalt-layout-fixed.cobalt-layout--bottomPadding {
-  padding-bottom: 48px;
+  @apply c-pb-xl;
 }
 
 .cobalt-layout-flexible,
 .cobalt-layout-flexibleWithConstraint {
-  min-width: 0;
-  width: 100%;
+  @apply c-w-full c-min-w-none;
 }
 
 .cobalt-layout-fixed {
-  flex-grow: 0;
-  flex-shrink: 0;
+  @apply c-grow-0 c-shrink-0;
 }
 
 .cobalt-layout-flexibleWithConstraint {
-  margin-left: auto;
-  margin-right: auto;
+  @apply c-mx-auto;
 }
 
 @include class-with-responsive-variants(

package/styles/components/Pagination/index.scss

@@ -0,0 +1,14 @@
+.cobalt-pagination {
+  display: flex;
+  justify-content: center;
+  gap: spacing(xs);
+}
+
+.cobalt-pagination__DefaultButton {
+  padding: 0;
+}
+
+.cobalt-pagination__threeDots {
+  margin: auto 0 auto 0;
+  flex-shrink: 0;
+}

package/styles/components/Sidepanel/index.scss

@@ -8,7 +8,6 @@
   z-index: zx(sidepanel);
 
   height: 100vh;
-  width: 426px;
 
   display: flex;
 

package/styles/components.scss

@@ -16,6 +16,7 @@
 @import "./components/Layout/Components/index";
 @import "./components/Layout/Surfaces/index";
 @import "./components/Note/index";
+@import "./components/Pagination/index";
 @import "./components/PhotoDropzone/index";
 @import "./components/Pill/index";
 @import "./components/PriceTable/index";

package/styles/core/{default-theme.scss → default-theme.css}

@@ -41,7 +41,7 @@
   --c-background-errorInteractive: var(--c-red-500);
   --c-background-errorInteractive--hover: var(--c-red-700);
   --c-text-base: var(--c-navy-700);
-  --c-text-subdued: var(--c-navy-400);
+  --c-text-subdued: var(--c-navy-300);
   --c-text-accent: var(--c-purple-500);
   --c-text-accentAlt: var(--c-purple-700);
   --c-text-info: var(--c-yellow-900);
@@ -76,14 +76,14 @@
   --c-text-inversed: var(--c-white);
   --c-text-baseInteractive: var(--c-navy-700);
   --c-text-baseInteractive--hover: var(--c-navy-900);
-  --c-text-subduedInteractive: var(--c-navy-400);
+  --c-text-subduedInteractive: var(--c-navy-300);
   --c-text-subduedInteractive--hover: var(--c-navy-500);
   --c-text-accentInteractive: var(--c-purple-500);
   --c-text-accentInteractive--hover: var(--c-purple-700);
   --c-text-accentAltInteractive: var(--c-purple-700);
   --c-text-accentAltInteractive--hover: var(--c-purple-700);
   --c-icon-base: var(--c-navy-700);
-  --c-icon-subdued: var(--c-navy-400);
+  --c-icon-subdued: var(--c-navy-300);
   --c-icon-accent: var(--c-purple-500);
   --c-icon-accentAlt: var(--c-purple-700);
   --c-icon-info: var(--c-yellow-900);
@@ -114,7 +114,7 @@
   --c-icon-inversed: var(--c-white);
   --c-icon-baseInteractive: var(--c-navy-700);
   --c-icon-baseInteractive--hover: var(--c-navy-900);
-  --c-icon-subduedInteractive: var(--c-navy-400);
+  --c-icon-subduedInteractive: var(--c-navy-300);
   --c-icon-subduedInteractive--hover: var(--c-navy-500);
   --c-icon-accentInteractive: var(--c-purple-500);
   --c-icon-accentInteractive--hover: var(--c-purple-700);