@drivy/cobalt 0.42.18 → 0.42.19

package/cjs/tokens/palette.js

@@ -9,8 +9,7 @@ const purple = {
 	"400": "#C04FB8",
 	"500": "#B01AA7",
 	"700": "#8D1586",
-	"900": "#5F1159",
-	"2000": "#D62929"
+	"900": "#5F1159"
 };
 const purpleDeep = {
 	"100": "#F2A6EE",
@@ -107,6 +106,14 @@ const season = {
 	"900": "#030",
 	"1000": "#001900"
 };
+const newPurple = {
+	"200": "#E46FEE",
+	"500": "#BC00CC"
+};
+const newViolet = {
+	"200": "#B86FFF",
+	"500": "#6C06B5"
+};
 var _palette = {
 	white: white,
 	purple: purple,
@@ -121,7 +128,9 @@ var _palette = {
 	grey: grey,
 	blue: blue,
 	turquoise: turquoise,
-	season: season
+	season: season,
+	newPurple: newPurple,
+	newViolet: newViolet
 };
 
 exports.black = black;
@@ -130,6 +139,8 @@ exports["default"] = _palette;
 exports.green = green;
 exports.grey = grey;
 exports.navy = navy;
+exports.newPurple = newPurple;
+exports.newViolet = newViolet;
 exports.orange = orange;
 exports.purple = purple;
 exports.purpleDeep = purpleDeep;

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

@@ -12,8 +12,11 @@ const background = {
 	errorAlt: "red.100/red.900",
 	success: "green.700/green.700",
 	successAlt: "green.100/green.1000",
-	connect: "turquoise.500/turquoise.700",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.50/turquoise.900",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/black.1000",
 	driver: "yellow.500/yellow.500",
 	owner: "navy.700/navy.700",
 	disabled: "navy.100/black.100",
@@ -25,7 +28,7 @@ const background = {
 	seasonVeryhigh: "season.400/season.1000",
 	rental: "turquoise.100/turquoise.1200",
 	blocker: "navy.100/black.75",
-	rideshare: "black.1000/black.1000",
+	base: "navy.900/navy.50",
 	secondaryInteractive: {
 		DEFAULT: "white/black.300",
 		hover: "navy.50/black.300"
@@ -39,7 +42,7 @@ const background = {
 		hover: "purpleLight.100/purpleDeep.900"
 	},
 	connectInteractive: {
-		DEFAULT: "turquoise.500/turquoise.700",
+		DEFAULT: "newPurple.500/newPurple.200",
 		hover: "turquoise.700/turquoise.700"
 	},
 	errorInteractive: {
@@ -53,23 +56,29 @@ const text = {
 	accent: "purple.500/purpleDeep.400",
 	accentAlt: "purple.500/grey.100",
 	info: "yellow.900/yellow.300",
+	infoAlt: "yellow.700/yellow.700",
 	error: "red.500/red.400",
 	errorAlt: "red.500/red.500",
 	success: "green.700/green.700",
 	successAlt: "green.1000/green.100",
-	connect: "turquoise.500/turquoise.700",
+	warning: "orange.500/orange.300",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/white",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
 	owner: "white/grey.100",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.700/yellow.700",
-	inversed: "white/white",
 	disabled: "navy.200/black.50",
+	inversed: "white/white",
 	onAccent: "white/grey.100",
 	onRideshare: "white/white",
 	onError: "white/white",
 	onSuccess: "white/white",
-	onConnect: "white/white",
+	onConnect: "white/navy.900",
+	onKeyExchange: "white/navy.900",
+	onPicked: "white/navy.900",
+	onBase: "white/navy.900",
 	baseInteractive: {
 		DEFAULT: "navy.700/grey.100",
 		hover: "navy.900/grey.300"
@@ -93,24 +102,30 @@ const icon = {
 	accent: "purple.500/purpleDeep.400",
 	accentAlt: "purple.500/grey.100",
 	info: "yellow.900/yellow.300",
+	infoAlt: "yellow.500/yellow.700",
 	error: "red.500/red.400",
 	errorAlt: "red.500/red.200",
 	success: "green.700/green.700",
 	successAlt: "green.1000/green.100",
-	connect: "turquoise.500/turquoise.700",
+	warning: "orange.500/orange.300",
+	connect: "newPurple.500/newPurple.200",
 	connectAlt: "turquoise.900/turquoise.50",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
 	driver: "navy.700/navy.700",
 	owner: "white/white",
-	inversed: "white/white",
-	disabled: "navy.100/black.50",
+	disabled: "navy.200/black.50",
 	disabledAlt: "navy.300/grey.500",
-	warning: "orange.500/orange.300",
-	infoAlt: "yellow.500/yellow.700",
+	inversed: "white/white",
 	onAccent: "white/white",
-	rideshare: "black.1000/white",
 	onRideshare: "white/white",
-	onSuccess: "white/white",
 	onError: "white/white",
+	onSuccess: "white/white",
+	onConnect: "white/navy.900",
+	onKeyExchange: "white/navy.900",
+	onPicked: "white/navy.900",
+	onBase: "white/navy.900",
 	baseInteractive: {
 		DEFAULT: "navy.500/grey.100",
 		hover: "navy.700/grey.100"
@@ -131,18 +146,27 @@ const icon = {
 const stroke = {
 	base: "navy.100/black.50",
 	subdued: "navy.50/black.100",
+	strong: "navy.300/navy.200",
 	accent: "purple.500/purpleDeep.500",
 	accentAlt: "purple.300/purpleDeep.400",
-	success: "green.500/green.700",
-	successAlt: "green.500/green.700",
 	error: "red.500/red.200",
 	errorAlt: "red.500/red.200",
-	strong: "navy.300/navy.200",
+	success: "green.500/green.700",
+	successAlt: "green.500/green.700",
+	connect: "newPurple.500/newPurple.200",
+	keyExchange: "newViolet.500/newViolet.200",
+	picked: "green.700/green.500",
+	rideshare: "black.1000/white",
+	rental: "turquoise.500/turquoise.500",
+	blocker: "navy.300/grey.300",
 	onAccent: "white/grey.100",
-	rentals: "turquoise.500/turquoise.500",
-	blokers: "navy.300/grey.300",
 	onError: "white/white",
 	onSuccess: "white/white",
+	onConnect: "white/black.1000",
+	onPicked: "white/black.1000",
+	onKeyExchange: "white/black.1000",
+	onRideshare: "white/black.1000",
+	onBase: "white/black.1000",
 	baseInteractive: {
 		DEFAULT: "navy.100/black.50",
 		hover: "navy.300/purpleDeep.400",
@@ -268,25 +292,25 @@ const buttonBackground = {
 	}
 };
 const fill = {
-	base: "navy.500/grey.300",
-	accent: "purple.500/purpleDeep.400",
-	secondary: "yellow.500/yellow.500",
+	base: "navy.500/grey.50",
 	subdued: "navy.100/black.50",
-	neutral: "navy.50/black.100",
-	negative: "red.150/red.800",
+	secondary: "yellow.500/yellow.500",
+	accent: "purple.500/purpleDeep.400",
 	accentAlt: "purple.100/purpleDeep.900",
-	disabled: "navy.300/grey.300",
 	error: "red.500/red.500",
 	success: "green.500/green.700",
-	rentals: "turquoise.100/turquoise.1200",
-	blockers: "navy.120/black.75"
+	neutral: "navy.50/black.100",
+	negative: "red.150/red.800",
+	disabled: "navy.300/grey.300",
+	rental: "turquoise.100/turquoise.1200",
+	blocker: "navy.120/black.75",
+	primary: "white/black.1000"
 };
 const illustrations = {
 	primary: "navy.500/white",
 	secondary: "white/white",
-	acccent1: "purple.500/white",
-	accent2: "blue.500/white",
-	foregroundDark: "white/white"
+	accent1: "purple.500/white",
+	accent2: "blue.500/white"
 };
 var _theme = {
 	background: background,

package/cjs/tokens/theme.js.map

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

package/package.json

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

package/styles/components/Icon/iconColors.scss

@@ -22,6 +22,10 @@
   fill: var(--c-icon-info);
 }
 
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
+}
+
 .cobalt-Icon--colorError {
   fill: var(--c-icon-error);
 }
@@ -38,6 +42,10 @@
   fill: var(--c-icon-successAlt);
 }
 
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
+}
+
 .cobalt-Icon--colorConnect {
   fill: var(--c-icon-connect);
 }
@@ -46,6 +54,18 @@
   fill: var(--c-icon-connectAlt);
 }
 
+.cobalt-Icon--colorKeyExchange {
+  fill: var(--c-icon-keyExchange);
+}
+
+.cobalt-Icon--colorPicked {
+  fill: var(--c-icon-picked);
+}
+
+.cobalt-Icon--colorRideshare {
+  fill: var(--c-icon-rideshare);
+}
+
 .cobalt-Icon--colorDriver {
   fill: var(--c-icon-driver);
 }
@@ -54,10 +74,6 @@
   fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorInversed {
-  fill: var(--c-icon-inversed);
-}
-
 .cobalt-Icon--colorDisabled {
   fill: var(--c-icon-disabled);
 }
@@ -66,32 +82,40 @@
   fill: var(--c-icon-disabledAlt);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
-}
-
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
+.cobalt-Icon--colorInversed {
+  fill: var(--c-icon-inversed);
 }
 
 .cobalt-Icon--colorOnAccent {
   fill: var(--c-icon-onAccent);
 }
 
-.cobalt-Icon--colorRideshare {
-  fill: var(--c-icon-rideshare);
-}
-
 .cobalt-Icon--colorOnRideshare {
   fill: var(--c-icon-onRideshare);
 }
 
+.cobalt-Icon--colorOnError {
+  fill: var(--c-icon-onError);
+}
+
 .cobalt-Icon--colorOnSuccess {
   fill: var(--c-icon-onSuccess);
 }
 
-.cobalt-Icon--colorOnError {
-  fill: var(--c-icon-onError);
+.cobalt-Icon--colorOnConnect {
+  fill: var(--c-icon-onConnect);
+}
+
+.cobalt-Icon--colorOnKeyExchange {
+  fill: var(--c-icon-onKeyExchange);
+}
+
+.cobalt-Icon--colorOnPicked {
+  fill: var(--c-icon-onPicked);
+}
+
+.cobalt-Icon--colorOnBase {
+  fill: var(--c-icon-onBase);
 }
 
 .cobalt-Icon--colorBaseInteractive {

package/styles/core/_colors-map.scss

@@ -15,6 +15,9 @@ $theme-colors-map: (
     successAlt: var(--c-background-successAlt),
     connect: var(--c-background-connect),
     connectAlt: var(--c-background-connectAlt),
+    keyExchange: var(--c-background-keyExchange),
+    picked: var(--c-background-picked),
+    rideshare: var(--c-background-rideshare),
     driver: var(--c-background-driver),
     owner: var(--c-background-owner),
     disabled: var(--c-background-disabled),
@@ -26,7 +29,7 @@ $theme-colors-map: (
     seasonVeryhigh: var(--c-background-seasonVeryhigh),
     rental: var(--c-background-rental),
     blocker: var(--c-background-blocker),
-    rideshare: var(--c-background-rideshare),
+    base: var(--c-background-base),
     secondaryInteractive: (
       DEFAULT: var(--c-background-secondaryInteractive),
       hover: var(--c-background-secondaryInteractive--hover)
@@ -54,23 +57,29 @@ $theme-colors-map: (
     accent: var(--c-text-accent),
     accentAlt: var(--c-text-accentAlt),
     info: var(--c-text-info),
+    infoAlt: var(--c-text-infoAlt),
     error: var(--c-text-error),
     errorAlt: var(--c-text-errorAlt),
     success: var(--c-text-success),
     successAlt: var(--c-text-successAlt),
+    warning: var(--c-text-warning),
     connect: var(--c-text-connect),
     connectAlt: var(--c-text-connectAlt),
+    keyExchange: var(--c-text-keyExchange),
+    picked: var(--c-text-picked),
+    rideshare: var(--c-text-rideshare),
     driver: var(--c-text-driver),
     owner: var(--c-text-owner),
-    warning: var(--c-text-warning),
-    infoAlt: var(--c-text-infoAlt),
-    inversed: var(--c-text-inversed),
     disabled: var(--c-text-disabled),
+    inversed: var(--c-text-inversed),
     onAccent: var(--c-text-onAccent),
     onRideshare: var(--c-text-onRideshare),
     onError: var(--c-text-onError),
     onSuccess: var(--c-text-onSuccess),
     onConnect: var(--c-text-onConnect),
+    onKeyExchange: var(--c-text-onKeyExchange),
+    onPicked: var(--c-text-onPicked),
+    onBase: var(--c-text-onBase),
     baseInteractive: (
       DEFAULT: var(--c-text-baseInteractive),
       hover: var(--c-text-baseInteractive--hover)
@@ -94,24 +103,30 @@ $theme-colors-map: (
     accent: var(--c-icon-accent),
     accentAlt: var(--c-icon-accentAlt),
     info: var(--c-icon-info),
+    infoAlt: var(--c-icon-infoAlt),
     error: var(--c-icon-error),
     errorAlt: var(--c-icon-errorAlt),
     success: var(--c-icon-success),
     successAlt: var(--c-icon-successAlt),
+    warning: var(--c-icon-warning),
     connect: var(--c-icon-connect),
     connectAlt: var(--c-icon-connectAlt),
+    keyExchange: var(--c-icon-keyExchange),
+    picked: var(--c-icon-picked),
+    rideshare: var(--c-icon-rideshare),
     driver: var(--c-icon-driver),
     owner: var(--c-icon-owner),
-    inversed: var(--c-icon-inversed),
     disabled: var(--c-icon-disabled),
     disabledAlt: var(--c-icon-disabledAlt),
-    warning: var(--c-icon-warning),
-    infoAlt: var(--c-icon-infoAlt),
+    inversed: var(--c-icon-inversed),
     onAccent: var(--c-icon-onAccent),
-    rideshare: var(--c-icon-rideshare),
     onRideshare: var(--c-icon-onRideshare),
-    onSuccess: var(--c-icon-onSuccess),
     onError: var(--c-icon-onError),
+    onSuccess: var(--c-icon-onSuccess),
+    onConnect: var(--c-icon-onConnect),
+    onKeyExchange: var(--c-icon-onKeyExchange),
+    onPicked: var(--c-icon-onPicked),
+    onBase: var(--c-icon-onBase),
     baseInteractive: (
       DEFAULT: var(--c-icon-baseInteractive),
       hover: var(--c-icon-baseInteractive--hover)
@@ -132,18 +147,27 @@ $theme-colors-map: (
   stroke: (
     base: var(--c-stroke-base),
     subdued: var(--c-stroke-subdued),
+    strong: var(--c-stroke-strong),
     accent: var(--c-stroke-accent),
     accentAlt: var(--c-stroke-accentAlt),
-    success: var(--c-stroke-success),
-    successAlt: var(--c-stroke-successAlt),
     error: var(--c-stroke-error),
     errorAlt: var(--c-stroke-errorAlt),
-    strong: var(--c-stroke-strong),
+    success: var(--c-stroke-success),
+    successAlt: var(--c-stroke-successAlt),
+    connect: var(--c-stroke-connect),
+    keyExchange: var(--c-stroke-keyExchange),
+    picked: var(--c-stroke-picked),
+    rideshare: var(--c-stroke-rideshare),
+    rental: var(--c-stroke-rental),
+    blocker: var(--c-stroke-blocker),
     onAccent: var(--c-stroke-onAccent),
-    rentals: var(--c-stroke-rentals),
-    blokers: var(--c-stroke-blokers),
     onError: var(--c-stroke-onError),
     onSuccess: var(--c-stroke-onSuccess),
+    onConnect: var(--c-stroke-onConnect),
+    onPicked: var(--c-stroke-onPicked),
+    onKeyExchange: var(--c-stroke-onKeyExchange),
+    onRideshare: var(--c-stroke-onRideshare),
+    onBase: var(--c-stroke-onBase),
     baseInteractive: (
       DEFAULT: var(--c-stroke-baseInteractive),
       hover: var(--c-stroke-baseInteractive--hover),
@@ -270,23 +294,23 @@ $theme-colors-map: (
   ),
   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),
+    secondary: var(--c-fill-secondary),
+    accent: var(--c-fill-accent),
     accentAlt: var(--c-fill-accentAlt),
-    disabled: var(--c-fill-disabled),
     error: var(--c-fill-error),
     success: var(--c-fill-success),
-    rentals: var(--c-fill-rentals),
-    blockers: var(--c-fill-blockers)
+    neutral: var(--c-fill-neutral),
+    negative: var(--c-fill-negative),
+    disabled: var(--c-fill-disabled),
+    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),
-    acccent1: var(--c-illustrations-acccent1),
-    accent2: var(--c-illustrations-accent2),
-    foregroundDark: var(--c-illustrations-foregroundDark)
+    accent1: var(--c-illustrations-accent1),
+    accent2: var(--c-illustrations-accent2)
   )
 );

package/styles/core/default-theme.scss

@@ -12,8 +12,11 @@
   --c-background-errorAlt: var(--c-red-100);
   --c-background-success: var(--c-green-700);
   --c-background-successAlt: var(--c-green-100);
-  --c-background-connect: var(--c-turquoise-500);
+  --c-background-connect: var(--c-newPurple-500);
   --c-background-connectAlt: var(--c-turquoise-50);
+  --c-background-keyExchange: var(--c-newViolet-500);
+  --c-background-picked: var(--c-green-700);
+  --c-background-rideshare: var(--c-black-1000);
   --c-background-driver: var(--c-yellow-500);
   --c-background-owner: var(--c-navy-700);
   --c-background-disabled: var(--c-navy-100);
@@ -25,14 +28,14 @@
   --c-background-seasonVeryhigh: var(--c-season-400);
   --c-background-rental: var(--c-turquoise-100);
   --c-background-blocker: var(--c-navy-100);
-  --c-background-rideshare: var(--c-black-1000);
+  --c-background-base: var(--c-navy-900);
   --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-accentAltInteractive: var(--c-purple-100);
   --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
-  --c-background-connectInteractive: var(--c-turquoise-500);
+  --c-background-connectInteractive: var(--c-newPurple-500);
   --c-background-connectInteractive--hover: var(--c-turquoise-700);
   --c-background-errorInteractive: var(--c-red-500);
   --c-background-errorInteractive--hover: var(--c-red-700);
@@ -41,23 +44,29 @@
   --c-text-accent: var(--c-purple-500);
   --c-text-accentAlt: var(--c-purple-500);
   --c-text-info: var(--c-yellow-900);
+  --c-text-infoAlt: var(--c-yellow-700);
   --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-connect: var(--c-turquoise-500);
+  --c-text-warning: var(--c-orange-500);
+  --c-text-connect: var(--c-newPurple-500);
   --c-text-connectAlt: var(--c-turquoise-900);
+  --c-text-keyExchange: var(--c-newViolet-500);
+  --c-text-picked: var(--c-green-700);
+  --c-text-rideshare: var(--c-black-1000);
   --c-text-driver: var(--c-navy-700);
   --c-text-owner: var(--c-white);
-  --c-text-warning: var(--c-orange-500);
-  --c-text-infoAlt: var(--c-yellow-700);
-  --c-text-inversed: var(--c-white);
   --c-text-disabled: var(--c-navy-200);
+  --c-text-inversed: var(--c-white);
   --c-text-onAccent: var(--c-white);
   --c-text-onRideshare: var(--c-white);
   --c-text-onError: var(--c-white);
   --c-text-onSuccess: var(--c-white);
   --c-text-onConnect: var(--c-white);
+  --c-text-onKeyExchange: var(--c-white);
+  --c-text-onPicked: var(--c-white);
+  --c-text-onBase: var(--c-white);
   --c-text-baseInteractive: var(--c-navy-700);
   --c-text-baseInteractive--hover: var(--c-navy-900);
   --c-text-subduedInteractive: var(--c-navy-300);
@@ -71,24 +80,30 @@
   --c-icon-accent: var(--c-purple-500);
   --c-icon-accentAlt: var(--c-purple-500);
   --c-icon-info: var(--c-yellow-900);
+  --c-icon-infoAlt: var(--c-yellow-500);
   --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-connect: var(--c-turquoise-500);
+  --c-icon-warning: var(--c-orange-500);
+  --c-icon-connect: var(--c-newPurple-500);
   --c-icon-connectAlt: var(--c-turquoise-900);
+  --c-icon-keyExchange: var(--c-newViolet-500);
+  --c-icon-picked: var(--c-green-700);
+  --c-icon-rideshare: var(--c-black-1000);
   --c-icon-driver: var(--c-navy-700);
   --c-icon-owner: var(--c-white);
-  --c-icon-inversed: var(--c-white);
-  --c-icon-disabled: var(--c-navy-100);
+  --c-icon-disabled: var(--c-navy-200);
   --c-icon-disabledAlt: var(--c-navy-300);
-  --c-icon-warning: var(--c-orange-500);
-  --c-icon-infoAlt: var(--c-yellow-500);
+  --c-icon-inversed: var(--c-white);
   --c-icon-onAccent: var(--c-white);
-  --c-icon-rideshare: var(--c-black-1000);
   --c-icon-onRideshare: var(--c-white);
-  --c-icon-onSuccess: var(--c-white);
   --c-icon-onError: var(--c-white);
+  --c-icon-onSuccess: var(--c-white);
+  --c-icon-onConnect: var(--c-white);
+  --c-icon-onKeyExchange: var(--c-white);
+  --c-icon-onPicked: var(--c-white);
+  --c-icon-onBase: var(--c-white);
   --c-icon-baseInteractive: var(--c-navy-500);
   --c-icon-baseInteractive--hover: var(--c-navy-700);
   --c-icon-subduedInteractive: var(--c-navy-300);
@@ -99,18 +114,27 @@
   --c-icon-accentAltInteractive--hover: var(--c-purple-700);
   --c-stroke-base: var(--c-navy-100);
   --c-stroke-subdued: var(--c-navy-50);
+  --c-stroke-strong: var(--c-navy-300);
   --c-stroke-accent: var(--c-purple-500);
   --c-stroke-accentAlt: var(--c-purple-300);
-  --c-stroke-success: var(--c-green-500);
-  --c-stroke-successAlt: var(--c-green-500);
   --c-stroke-error: var(--c-red-500);
   --c-stroke-errorAlt: var(--c-red-500);
-  --c-stroke-strong: var(--c-navy-300);
+  --c-stroke-success: var(--c-green-500);
+  --c-stroke-successAlt: var(--c-green-500);
+  --c-stroke-connect: var(--c-newPurple-500);
+  --c-stroke-keyExchange: var(--c-newViolet-500);
+  --c-stroke-picked: var(--c-green-700);
+  --c-stroke-rideshare: var(--c-black-1000);
+  --c-stroke-rental: var(--c-turquoise-500);
+  --c-stroke-blocker: var(--c-navy-300);
   --c-stroke-onAccent: var(--c-white);
-  --c-stroke-rentals: var(--c-turquoise-500);
-  --c-stroke-blokers: var(--c-navy-300);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
+  --c-stroke-onConnect: var(--c-white);
+  --c-stroke-onPicked: var(--c-white);
+  --c-stroke-onKeyExchange: var(--c-white);
+  --c-stroke-onRideshare: var(--c-white);
+  --c-stroke-onBase: var(--c-white);
   --c-stroke-baseInteractive: var(--c-navy-100);
   --c-stroke-baseInteractive--hover: var(--c-navy-300);
   --c-stroke-baseInteractive--press: var(--c-navy-500);
@@ -193,20 +217,20 @@
   --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
   --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
   --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-secondary: var(--c-yellow-500);
+  --c-fill-accent: var(--c-purple-500);
   --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-rentals: var(--c-turquoise-100);
-  --c-fill-blockers: var(--c-navy-120);
+  --c-fill-neutral: var(--c-navy-50);
+  --c-fill-negative: var(--c-red-150);
+  --c-fill-disabled: var(--c-navy-300);
+  --c-fill-rental: var(--c-turquoise-100);
+  --c-fill-blocker: var(--c-navy-120);
+  --c-fill-primary: var(--c-white);
   --c-illustrations-primary: var(--c-navy-500);
   --c-illustrations-secondary: var(--c-white);
-  --c-illustrations-acccent1: var(--c-purple-500);
+  --c-illustrations-accent1: var(--c-purple-500);
   --c-illustrations-accent2: var(--c-blue-500);
-  --c-illustrations-foregroundDark: var(--c-white);
 }

package/styles/core/palette.scss

@@ -10,7 +10,6 @@
   --c-purple-500: #b01aa7;
   --c-purple-700: #8d1586;
   --c-purple-900: #5f1159;
-  --c-purple-2000: #d62929;
   --c-purpleDeep-100: #f2a6ee;
   --c-purpleDeep-300: #ea71e3;
   --c-purpleDeep-400: #c31dba;
@@ -82,4 +81,8 @@
   --c-season-800: #005100;
   --c-season-900: #030;
   --c-season-1000: #001900;
+  --c-newPurple-200: #e46fee;
+  --c-newPurple-500: #bc00cc;
+  --c-newViolet-200: #b86fff;
+  --c-newViolet-500: #6c06b5;
 }