@drivy/cobalt 0.46.2 → 0.46.3

package/cjs/tokens/palette.js

@@ -17,18 +17,6 @@ const purple = {
 	"1100": "#280626",
 	"1200": "#160315"
 };
-const purpleDeep = {
-	"100": "#F2A6EE",
-	"300": "#EA71E3",
-	"400": "#C31DBA",
-	"500": "#9B1794",
-	"700": "#73116E",
-	"900": "#4B0B48",
-	"1000": "#3E093C"
-};
-const purpleLight = {
-	"100": "#FFDCFD"
-};
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
@@ -161,8 +149,6 @@ const newViolet = {
 var _palette = {
 	white: white,
 	purple: purple,
-	purpleDeep: purpleDeep,
-	purpleLight: purpleLight,
 	navy: navy,
 	yellow: yellow,
 	green: green,
@@ -187,8 +173,6 @@ exports.newPurple = newPurple;
 exports.newViolet = newViolet;
 exports.orange = orange;
 exports.purple = purple;
-exports.purpleDeep = purpleDeep;
-exports.purpleLight = purpleLight;
 exports.red = red;
 exports.season = season;
 exports.turquoise = turquoise;

package/cjs/tokens/palette.js.map

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

package/cjs/tokens/theme.js

@@ -6,12 +6,12 @@ const background = {
 	primary: "white/black.500",
 	secondary: "white/black.400",
 	accent: "purple.500/purple.400",
-	accentAlt: "purple.200/purple.900",
+	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.100/green.1200",
+	successAlt: "green.300/green.1200",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.50/turquoise.900",
 	driver: "yellow.500/yellow.500",
@@ -36,11 +36,11 @@ const background = {
 	},
 	accentInteractive: {
 		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purpleDeep.400"
+		hover: "purple.600/purple.700"
 	},
 	accentAltInteractive: {
-		DEFAULT: "purple.200/purple.900",
-		hover: "purpleLight.100/purpleDeep.900"
+		DEFAULT: "purple.200/purple.1000",
+		hover: "purple.200/purple.900"
 	},
 	connectInteractive: {
 		DEFAULT: "newPurple.500/newPurple.200",
@@ -54,13 +54,13 @@ const background = {
 const text = {
 	base: "navy.700/grey.100",
 	subdued: "navy.400/grey.300",
-	accent: "purple.500/purple.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.1000/green.400",
+	successAlt: "green.900/green.300",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/white",
 	driver: "navy.700/navy.700",
@@ -92,27 +92,27 @@ const text = {
 	},
 	subduedInteractive: {
 		DEFAULT: "navy.400/grey.300",
-		hover: "navy.500/grey.300"
+		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purple.300",
-		hover: "purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
 	},
 	accentAltInteractive: {
 		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/grey.100"
+		hover: "purple.700/purple.400"
 	}
 };
 const icon = {
 	base: "navy.700/grey.100",
 	subdued: "navy.400/grey.300",
-	accent: "purple.500/purple.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.1000/green.400",
+	successAlt: "green.900/green.300",
 	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/turquoise.50",
 	driver: "navy.700/navy.700",
@@ -136,19 +136,19 @@ const icon = {
 	inversed: "white/white",
 	baseInteractive: {
 		DEFAULT: "navy.700/grey.100",
-		hover: "navy.700/grey.100"
+		hover: "navy.900/grey.200"
 	},
 	subduedInteractive: {
 		DEFAULT: "navy.400/grey.300",
-		hover: "navy.500/grey.300"
+		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {
-		DEFAULT: "purple.500/purple.300",
-		hover: "purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purple.400",
+		hover: "purple.700/purple.500"
 	},
 	accentAltInteractive: {
 		DEFAULT: "purple.700/purple.200",
-		hover: "purple.700/grey.100"
+		hover: "purple.700/purple.400"
 	}
 };
 const stroke = {
@@ -158,7 +158,7 @@ const stroke = {
 	accentAlt: "purple.600/purple.400",
 	success: "green.500/green.700",
 	successAlt: "green.500/green.700",
-	error: "red.500/red.200",
+	error: "red.500/red.400",
 	errorAlt: "red.500/red.200",
 	strong: "grey.300/grey.700",
 	onAccent: "white/grey.100",
@@ -177,18 +177,18 @@ const stroke = {
 	onBase: "white/black.600",
 	baseInteractive: {
 		DEFAULT: "navy.100/black.100",
-		hover: "navy.300/purpleDeep.400",
-		press: "navy.500/purpleDeep.400"
+		hover: "navy.300/black.300",
+		press: "navy.500/black.500"
 	},
 	accentInteractive: {
 		DEFAULT: "purple.500/purple.400",
-		hover: "purple.700/purpleDeep.400",
-		press: "purple.900/purpleDeep.400"
+		hover: "purple.700/purple.600",
+		press: "purple.900/purple.800"
 	},
 	strongInteractive: {
-		DEFAULT: "navy.300/navy.200",
-		hover: "navy.500/purpleDeep.400",
-		press: "navy.700/purpleDeep.400"
+		DEFAULT: "grey.300/grey.700",
+		hover: "grey.400/black.50",
+		press: "grey.500/black.100"
 	}
 };
 const buttonIcon = {
@@ -203,18 +203,18 @@ const buttonIcon = {
 	accentAlt: "purple.500/grey.100",
 	primaryInteractive: {
 		DEFAULT: "white/black.1000",
-		hover: "white/white",
-		press: "white/white"
+		hover: "white/black.1000",
+		press: "white/black.1000"
 	},
 	secondaryInteractive: {
 		DEFAULT: "purple.500/purple.300",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.500/purple.300",
+		press: "purple.900/purple.900"
 	},
 	tertiaryInteractive: {
 		DEFAULT: "purple.500/white",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.500/white",
+		press: "purple.900/purple.1000"
 	},
 	destructiveInteractive: {
 		DEFAULT: "red.500/red.200",
@@ -239,18 +239,18 @@ const buttonLabel = {
 	successAlt: "green.900/green.100",
 	primaryInteractive: {
 		DEFAULT: "white/black.1000",
-		hover: "white/white",
-		press: "white/white"
+		hover: "white/black.1000",
+		press: "white/black.1000"
 	},
 	secondaryInteractive: {
 		DEFAULT: "purple.500/purple.300",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.700/purple.300",
+		press: "purple.900/purple.900"
 	},
 	tertiaryInteractive: {
 		DEFAULT: "purple.500/white",
-		hover: "purple.700/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.700/white",
+		press: "purple.900/purple.1000"
 	},
 	destructiveInteractive: {
 		DEFAULT: "red.500/red.200",
@@ -263,35 +263,20 @@ const buttonLabel = {
 		press: "green.900/green.100"
 	}
 };
-const fill = {
-	base: "navy.500/navy.50",
-	accent: "purple.500/purpleDeep.400",
-	secondary: "yellow.500/yellow.400",
-	subdued: "navy.100/black.50",
-	neutral: "navy.50/black.100",
-	negative: "red.150/red.800",
-	accentAlt: "purple.100/purpleDeep.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 buttonBackground = {
 	selected: "purple.100/purpleDeep.900",
 	primary: "purple.500/purple.400",
 	secondary: "white/black.100",
 	tertiary: "white/white",
-	accentAlt: "purple.100/purpleDeep.900",
+	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/purpleDeep.700",
-		press: "purple.900/purpleDeep.900"
+		hover: "purple.700/purple.800",
+		press: "purple.900/purple.1000"
 	},
 	secondaryInteractive: {
 		DEFAULT: "white/black.100",
@@ -314,6 +299,21 @@ const buttonBackground = {
 		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",
@@ -327,8 +327,8 @@ var _theme = {
 	stroke: stroke,
 	buttonIcon: buttonIcon,
 	buttonLabel: buttonLabel,
-	fill: fill,
 	buttonBackground: buttonBackground,
+	fill: fill,
 	illustrations: illustrations
 };
 

package/cjs/tokens/zIndexes.js

@@ -8,6 +8,7 @@ const above = 1;
 const dropdown = 10;
 const nav = 20;
 const header = 30;
+const sidepanel = 80;
 const modal = 90;
 const alert = 100;
 var _zIndexes = {
@@ -23,6 +24,9 @@ var _zIndexes = {
 	"header-below": 29,
 	header: header,
 	"header-above": 31,
+	"sidepanel-below": 79,
+	sidepanel: sidepanel,
+	"sidepanel-above": 81,
 	"modal-below": 89,
 	modal: modal,
 	"modal-above": 91,
@@ -40,4 +44,5 @@ exports.dropdown = dropdown;
 exports.header = header;
 exports.modal = modal;
 exports.nav = nav;
+exports.sidepanel = sidepanel;
 //# sourceMappingURL=zIndexes.js.map

package/cjs/tokens/zIndexes.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.46.2",
+  "version": "0.46.3",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/Sidepanel/index.scss

@@ -0,0 +1,32 @@
+.cobalt-sidepanel {
+  @include bg-color(primary);
+
+  position: fixed;
+
+  top: 0;
+  right: 0;
+  z-index: zx(sidepanel);
+
+  height: 100vh;
+  width: 426px;
+
+  display: flex;
+
+  flex-direction: column;
+
+  transform: translateX(100%);
+
+  transition-duration: 250ms;
+  transition-timing-function: ease-out;
+  transition-property: transform;
+
+  will-change: transform;
+
+  &--show {
+    transform: translateX(0);
+  }
+
+  &--visible {
+    box-shadow: elevation(lg);
+  }
+}

package/styles/components.scss

@@ -34,3 +34,4 @@
 @import "./components/ProgressBanner/index";
 @import "./components/ContainedIcon/index";
 @import "./components/PlateNumber/index";
+@import "./components/Sidepanel/index";

package/styles/core/_colors-map.scss

@@ -264,21 +264,6 @@ $theme-colors-map: (
       press: var(--c-buttonLabel-successAltInteractive--press)
     )
   ),
-  fill: (
-    base: var(--c-fill-base),
-    accent: var(--c-fill-accent),
-    secondary: var(--c-fill-secondary),
-    subdued: var(--c-fill-subdued),
-    neutral: var(--c-fill-neutral),
-    negative: var(--c-fill-negative),
-    accentAlt: var(--c-fill-accentAlt),
-    disabled: var(--c-fill-disabled),
-    error: var(--c-fill-error),
-    success: var(--c-fill-success),
-    rental: var(--c-fill-rental),
-    blocker: var(--c-fill-blocker),
-    primary: var(--c-fill-primary)
-  ),
   buttonBackground: (
     selected: var(--c-buttonBackground-selected),
     primary: var(--c-buttonBackground-primary),
@@ -315,6 +300,21 @@ $theme-colors-map: (
       press: var(--c-buttonBackground-successAltInteractive--press)
     )
   ),
+  fill: (
+    base: var(--c-fill-base),
+    accent: var(--c-fill-accent),
+    secondary: var(--c-fill-secondary),
+    subdued: var(--c-fill-subdued),
+    neutral: var(--c-fill-neutral),
+    negative: var(--c-fill-negative),
+    accentAlt: var(--c-fill-accentAlt),
+    disabled: var(--c-fill-disabled),
+    error: var(--c-fill-error),
+    success: var(--c-fill-success),
+    rental: var(--c-fill-rental),
+    blocker: var(--c-fill-blocker),
+    primary: var(--c-fill-primary)
+  ),
   illustrations: (
     primary: var(--c-illustrations-primary),
     secondary: var(--c-illustrations-secondary),

package/styles/core/default-theme.scss

@@ -11,7 +11,7 @@
   --c-background-error: var(--c-red-500);
   --c-background-errorAlt: var(--c-red-100);
   --c-background-success: var(--c-green-700);
-  --c-background-successAlt: var(--c-green-100);
+  --c-background-successAlt: var(--c-green-300);
   --c-background-connect: var(--c-newPurple-500);
   --c-background-connectAlt: var(--c-turquoise-50);
   --c-background-driver: var(--c-yellow-500);
@@ -33,9 +33,9 @@
   --c-background-secondaryInteractive: var(--c-white);
   --c-background-secondaryInteractive--hover: var(--c-navy-50);
   --c-background-accentInteractive: var(--c-purple-500);
-  --c-background-accentInteractive--hover: var(--c-purple-700);
+  --c-background-accentInteractive--hover: var(--c-purple-600);
   --c-background-accentAltInteractive: var(--c-purple-200);
-  --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
+  --c-background-accentAltInteractive--hover: var(--c-purple-200);
   --c-background-connectInteractive: var(--c-newPurple-500);
   --c-background-connectInteractive--hover: var(--c-turquoise-700);
   --c-background-errorInteractive: var(--c-red-500);
@@ -48,7 +48,7 @@
   --c-text-error: var(--c-red-500);
   --c-text-errorAlt: var(--c-red-500);
   --c-text-success: var(--c-green-700);
-  --c-text-successAlt: var(--c-green-1000);
+  --c-text-successAlt: var(--c-green-900);
   --c-text-connect: var(--c-newPurple-500);
   --c-text-connectAlt: var(--c-turquoise-900);
   --c-text-driver: var(--c-navy-700);
@@ -90,7 +90,7 @@
   --c-icon-error: var(--c-red-500);
   --c-icon-errorAlt: var(--c-red-500);
   --c-icon-success: var(--c-green-700);
-  --c-icon-successAlt: var(--c-green-1000);
+  --c-icon-successAlt: var(--c-green-900);
   --c-icon-connect: var(--c-newPurple-500);
   --c-icon-connectAlt: var(--c-turquoise-900);
   --c-icon-driver: var(--c-navy-700);
@@ -113,7 +113,7 @@
   --c-icon-onRental: var(--c-white);
   --c-icon-inversed: var(--c-white);
   --c-icon-baseInteractive: var(--c-navy-700);
-  --c-icon-baseInteractive--hover: var(--c-navy-700);
+  --c-icon-baseInteractive--hover: var(--c-navy-900);
   --c-icon-subduedInteractive: var(--c-navy-400);
   --c-icon-subduedInteractive--hover: var(--c-navy-500);
   --c-icon-accentInteractive: var(--c-purple-500);
@@ -149,9 +149,9 @@
   --c-stroke-accentInteractive: var(--c-purple-500);
   --c-stroke-accentInteractive--hover: var(--c-purple-700);
   --c-stroke-accentInteractive--press: var(--c-purple-900);
-  --c-stroke-strongInteractive: var(--c-navy-300);
-  --c-stroke-strongInteractive--hover: var(--c-navy-500);
-  --c-stroke-strongInteractive--press: var(--c-navy-700);
+  --c-stroke-strongInteractive: var(--c-grey-300);
+  --c-stroke-strongInteractive--hover: var(--c-grey-400);
+  --c-stroke-strongInteractive--press: var(--c-grey-500);
   --c-buttonIcon-selected: var(--c-purple-500);
   --c-buttonIcon-primary: var(--c-white);
   --c-buttonIcon-secondary: var(--c-purple-500);
@@ -165,10 +165,10 @@
   --c-buttonIcon-primaryInteractive--hover: var(--c-white);
   --c-buttonIcon-primaryInteractive--press: var(--c-white);
   --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
-  --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
+  --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-500);
   --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
   --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
-  --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
+  --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-500);
   --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
   --c-buttonIcon-destructiveInteractive: var(--c-red-500);
   --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
@@ -200,19 +200,6 @@
   --c-buttonLabel-successAltInteractive: var(--c-green-900);
   --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
   --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
-  --c-fill-base: var(--c-navy-500);
-  --c-fill-accent: var(--c-purple-500);
-  --c-fill-secondary: var(--c-yellow-500);
-  --c-fill-subdued: var(--c-navy-100);
-  --c-fill-neutral: var(--c-navy-50);
-  --c-fill-negative: var(--c-red-150);
-  --c-fill-accentAlt: var(--c-purple-100);
-  --c-fill-disabled: var(--c-navy-300);
-  --c-fill-error: var(--c-red-500);
-  --c-fill-success: var(--c-green-500);
-  --c-fill-rental: var(--c-blue-300);
-  --c-fill-blocker: var(--c-grey-100);
-  --c-fill-primary: var(--c-white);
   --c-buttonBackground-selected: var(--c-purple-100);
   --c-buttonBackground-primary: var(--c-purple-500);
   --c-buttonBackground-secondary: var(--c-white);
@@ -237,6 +224,19 @@
   --c-buttonBackground-successAltInteractive: var(--c-green-100);
   --c-buttonBackground-successAltInteractive--hover: var(--c-green-300);
   --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
+  --c-fill-base: var(--c-navy-500);
+  --c-fill-accent: var(--c-purple-500);
+  --c-fill-secondary: var(--c-yellow-500);
+  --c-fill-subdued: var(--c-navy-100);
+  --c-fill-neutral: var(--c-navy-50);
+  --c-fill-negative: var(--c-red-150);
+  --c-fill-accentAlt: var(--c-purple-100);
+  --c-fill-disabled: var(--c-navy-300);
+  --c-fill-error: var(--c-red-500);
+  --c-fill-success: var(--c-green-500);
+  --c-fill-rental: var(--c-blue-300);
+  --c-fill-blocker: var(--c-grey-100);
+  --c-fill-primary: var(--c-white);
   --c-illustrations-primary: var(--c-navy-500);
   --c-illustrations-secondary: var(--c-white);
   --c-illustrations-accent1: var(--c-purple-500);

package/styles/core/palette.scss

@@ -16,14 +16,6 @@
   --c-purple-1000: #3e093b;
   --c-purple-1100: #280626;
   --c-purple-1200: #160315;
-  --c-purpleDeep-100: #f2a6ee;
-  --c-purpleDeep-300: #ea71e3;
-  --c-purpleDeep-400: #c31dba;
-  --c-purpleDeep-500: #9b1794;
-  --c-purpleDeep-700: #73116e;
-  --c-purpleDeep-900: #4b0b48;
-  --c-purpleDeep-1000: #3e093c;
-  --c-purpleLight-100: #ffdcfd;
   --c-navy-50: #f1f1f4;
   --c-navy-100: #e3e2e8;
   --c-navy-120: #cac7d2;