@drivy/cobalt 0.46.2 → 0.46.4

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/components/Sidepanel/index.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
+import Modal from '../Modal/index.js';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
+import '../Icon/index.js';
+import ReactDOM from 'react-dom';
+import CloseIcon from '../Icon/__generated__/CloseIcon.js';
+
+const SidepanelFooter = ({ children, className }) => {
+    return (React.createElement("div", { className: cx("c-p-sm c-border-t c-border-base", className) }, children));
+};
+// Memoized component to not render content when the panel is collapsing
+function _SidepanelContent({ title, close, children }) {
+    return (React.createElement(React.Fragment, null,
+        title && (React.createElement("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base" },
+            React.createElement("div", { className: "c-text-title-md c-flex-1" }, title),
+            close && (React.createElement("div", { className: "c-w-md c-cursor-pointer", onClick: close },
+                React.createElement(CloseIcon, { size: 24 }))))),
+        children));
+}
+function areSidepanelContentEqual(_prevProps, nextProps) {
+    return !nextProps.isOpen;
+}
+const SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual);
+SidepanelContent.displayName = "SidepanelContent";
+// Only for the API, render nothing
+const SidepanelFooterAPI = (_props) => null;
+const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
+const _Sidepanel = ({ isOpen, title, close, children }) => {
+    const { isMobile } = useBreakpoint();
+    // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
+    const [isPanelVisible, setIsPanelVisible] = useState(false);
+    useEffect(() => {
+        isOpen && setIsPanelVisible(true);
+    }, [isOpen]);
+    const sidepanelFooter = React.Children.toArray(children).find((c) => isSidepanelFooterAPIComponent(c));
+    let footer = null;
+    if (React.isValidElement(sidepanelFooter)) {
+        footer = isMobile ? (React.createElement(Modal.Footer, { ...sidepanelFooter.props })) : (React.createElement(SidepanelFooter, { ...sidepanelFooter.props }));
+    }
+    return isMobile ? (React.createElement(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title },
+        children,
+        footer)) : (ReactDOM.createPortal(React.createElement("div", { className: cx("cobalt-sidepanel", {
+            "cobalt-sidepanel--show": isOpen,
+            "cobalt-sidepanel--visible": isPanelVisible,
+        }), onTransitionEnd: () => {
+            !isOpen && setIsPanelVisible(false);
+        } },
+        React.createElement(SidepanelContent, { isOpen: isOpen, title: title, close: close },
+            children,
+            footer)), document.body));
+};
+_Sidepanel.displayName = "Sidepanel";
+const Sidepanel = Object.assign(_Sidepanel, {
+    Footer: SidepanelFooterAPI,
+});
+
+export { Sidepanel };
+//# sourceMappingURL=index.js.map

package/components/Sidepanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-base\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({ isOpen, title, close, children }: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <div\n        className={cx(\"cobalt-sidepanel\", {\n          \"cobalt-sidepanel--show\": isOpen,\n          \"cobalt-sidepanel--visible\": isPanelVisible,\n        })}\n        onTransitionEnd={() => {\n          !isOpen && setIsPanelVisible(false)\n        }}\n      >\n        <SidepanelContent isOpen={isOpen} title={title} close={close}>\n          {children}\n          {footer}\n        </SidepanelContent>\n      </div>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}

package/index.js

@@ -26,6 +26,7 @@ export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';
 export { ProgressBanner } from './components/ProgressBanner/index.js';
+export { Sidepanel } from './components/Sidepanel/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { Chip } from './components/Chip/index.js';

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.46.2",
+  "version": "0.46.4",
   "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;