@drivy/cobalt 0.39.1 → 0.41.0

package/styles/components/Icon/index.scss

@@ -29,7 +29,7 @@
     width: 40px;
     padding: math.div(40px - 24px, 2);
 
-    border-radius: 50%;
+    border-radius: border-radius(md);
   }
 
   &Icon--size16 {
@@ -65,6 +65,8 @@
       width: 52px;
 
       padding: math.div(52px - 32px, 2);
+
+      border-radius: border-radius(lg);
     }
   }
 

package/styles/components/Layout/{Layout.scss → Components/index.scss}

@@ -1,11 +1,24 @@
 :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-section-header-top-spacing: 40px;
+}
+
+.cobalt-layout-section,
+.cobalt-layout-card,
+.cobalt-layout-stack,
+.cobalt-layout-page-title,
+.cobalt-layout-section-title {
+  min-width: calc(100% - 2 * var(--cobalt-layout-x-spacing));
 }
 
 .cobalt-layout-section {
   @include bg-color(primary);
-  padding: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+  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 {
@@ -16,7 +29,7 @@
   border-radius: border-radius(xl);
 
   .cobalt-layout-card__item {
-    margin: 16px;
+    margin: var(--cobalt-layout-item-spacing);
   }
 }
 
@@ -29,7 +42,7 @@ div.cobalt-layout-stack {
 
   .cobalt-layout-stack__item {
     @include border-top(base);
-    padding: 16px;
+    padding: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item:first-of-type {
@@ -52,28 +65,30 @@ table.cobalt-layout-stack {
   .cobalt-layout-stack__item td,
   .cobalt-layout-stack__item th {
     @include border-top(base);
-    padding: 16px 0;
+    padding-top: var(--cobalt-layout-item-spacing);
+    padding-bottom: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item th:first-of-type,
   .cobalt-layout-stack__item td:first-of-type {
-    padding-left: 16px;
+    padding-left: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item th:last-of-type,
   .cobalt-layout-stack__item td:last-of-type {
-    padding-right: 16px;
+    padding-right: var(--cobalt-layout-item-spacing);
   }
 }
 
-.cobalt-layout-page-title {
-  @include c-text-title-lg;
-  padding: 32px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
-    var(--cobalt-layout-x-spacing);
-}
-
 .cobalt-layout-section-title {
   @include c-text-title-md;
-  padding: 40px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
+  padding: var(--cobalt-layout-section-header-top-spacing)
+    var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
     var(--cobalt-layout-x-spacing);
 }
+
+.cobalt-layout-section.cobalt-layout--isPageHeader,
+.cobalt-layout-card.cobalt-layout--isPageHeader,
+.cobalt-layout-stack.cobalt-layout--isPageHeader {
+  padding-top: var(--cobalt-layout-page-header-top-spacing);
+}

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

@@ -0,0 +1,55 @@
+.cobalt-layout-flexible,
+.cobalt-layout-flexibleWithConstraint,
+.cobalt-layout-fixed {
+  display: flex;
+  flex-direction: column;
+  min-height: 1px;
+}
+
+.cobalt-layout-flexible.cobalt-layout--bottomPadding,
+.cobalt-layout-flexibleWithConstraint.cobalt-layout--bottomPadding,
+.cobalt-layout-fixed.cobalt-layout--bottomPadding {
+  padding-bottom: 48px;
+}
+
+.cobalt-layout-flexible,
+.cobalt-layout-flexibleWithConstraint {
+  min-width: 0;
+  width: 100%;
+}
+
+.cobalt-layout-fixed {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.cobalt-layout-flexibleWithConstraint {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cobalt-layout-flexibleWithConstraint--large {
+  max-width: 1200px;
+}
+
+.cobalt-layout-flexibleWithConstraint--medium {
+  max-width: 840px;
+}
+
+.cobalt-layout-flexibleWithConstraint--small {
+  max-width: 540px;
+}
+
+.cobalt-layout-fixed--280 {
+  width: 280px;
+}
+
+.cobalt-layout-fixed--420 {
+  width: 420px;
+}
+
+.cobalt-layout-fixed--600 {
+  width: 600px;
+}
+
+// 48px paddiing bottom

package/styles/components/Popover/index.scss

@@ -36,6 +36,12 @@
   }
 }
 
+[data-theme~="cobalt-popover--fitContent"] {
+  .tippy-content {
+    min-width: auto;
+  }
+}
+
 [data-theme~="cobalt-popover--withArrow"] {
   &.tippy-box {
     border-radius: border-radius(xl);

package/styles/components.scss

@@ -13,7 +13,8 @@
 @import "./components/Flag/index";
 @import "./components/Flash/index";
 @import "./components/Icon/index";
-@import "./components/Layout/Layout";
+@import "./components/Layout/Components/index";
+@import "./components/Layout/Surfaces/index";
 @import "./components/Note/index";
 @import "./components/PhotoDropzone/index";
 @import "./components/Pill/index";
@@ -31,3 +32,4 @@
 @import "./components/Rating/index";
 @import "./components/ProgressCircular/index";
 @import "./components/ProgressBanner/index";
+@import "./components/ContainedIcon/index";

package/styles/core/palette.scss

@@ -68,29 +68,4 @@
   --c-season-800: #005100;
   --c-season-900: #030;
   --c-season-1000: #001900;
-  --c-l-white: #fff;
-  --c-l-grey-lighter: #f8f7f8;
-  --c-l-grey-light: #edebed;
-  --c-l-grey: #dbd8dc;
-  --c-l-grey-dark: #a49da7;
-  --c-l-indigo: #61366b;
-  --c-l-indigo-dark: #390446;
-  --c-l-purple-light: #d076ca;
-  --c-l-purple: #b01aa7;
-  --c-l-graphite-light: #757575;
-  --c-l-graphite: #333;
-  --c-l-turquoise: #5ecbdd;
-  --c-l-coral: #ffa484;
-  --c-l-amber: #ffc25a;
-  --c-l-red: #ff7378;
-  --c-l-green-light: #0fffb3;
-  --c-l-green: #00da94;
-  --c-l-green-dark: #00a873;
-  --c-l-blue: #2ea2ea;
-  --c-l-deprecatedBlueGhost: #2ea2ea0f;
-  --c-l-deprecatedDriver: #ffd988;
-  --c-l-deprecatedSeasonLow: #bdffac;
-  --c-l-deprecatedSeasonMedium: #94ea84;
-  --c-l-deprecatedSeasonHigh: #73c865;
-  --c-l-deprecatedSeasonVeryHigh: #54a949;
 }

package/styles/core/text.scss

@@ -53,7 +53,7 @@
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 125%;
-  letter-spacing: NaNrem;
+  letter-spacing: -0.025rem;
 
   @include breakpoint($from: sm) {
     font-size: 1.5rem;

package/tokens/theme.js

@@ -1,251 +1,251 @@
 const background = {
-	primary: "grey.lighter/white/black.500",
-	secondary: "white/white/black.300",
+	primary: "white/black.500",
+	secondary: "white/black.300",
 	secondaryInteractive: {
-		DEFAULT: "white/white/black.300",
-		hover: "grey.lighter/navy.50/black.300"
+		DEFAULT: "white/black.300",
+		hover: "navy.50/black.300"
 	},
-	accent: "purple/purple.500/purpleDeep.400",
+	accent: "purple.500/purpleDeep.400",
 	accentInteractive: {
-		DEFAULT: "purple/purple.500/purpleDeep.400",
-		hover: "purple/purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.100/purpleDeep.900",
+	accentAlt: "purple.100/purpleDeep.900",
 	accentAltInteractive: {
-		DEFAULT: "indigo/purple.100/purpleDeep.900",
-		hover: "indigo/purpleLight.100/purpleDeep.900"
+		DEFAULT: "purple.100/purpleDeep.900",
+		hover: "purpleLight.100/purpleDeep.900"
 	},
-	info: "grey.lighter/yellow.100/yellow.1000",
-	error: "red/red.500/red.500",
+	info: "yellow.100/yellow.1000",
+	error: "red.500/red.500",
 	errorInteractive: {
-		DEFAULT: "red/red.500/red.500",
-		hover: "red/red.700/red.500"
+		DEFAULT: "red.500/red.500",
+		hover: "red.700/red.500"
 	},
-	errorAlt: "graphite/red.100/red.900",
-	success: "green/green.700/green.700",
-	successAlt: "graphite/green.100/green.1000",
-	connect: "turquoise/turquoise.500/turquoise.500",
+	errorAlt: "red.100/red.900",
+	success: "green.700/green.700",
+	successAlt: "green.100/green.1000",
+	connect: "turquoise.500/turquoise.500",
 	connectInteractive: {
-		DEFAULT: "turquoise/turquoise.500/turquoise.500",
-		hover: "turquoise/turquoise.700/turquoise.500"
+		DEFAULT: "turquoise.500/turquoise.500",
+		hover: "turquoise.700/turquoise.500"
 	},
-	connectAlt: "grey.light/turquoise.50/turquoise.900",
-	driver: "deprecatedDriver/yellow.500/yellow.500",
-	owner: "indigo.dark/navy.700/navy.700",
-	disabled: "grey.light/navy.100/black.50",
-	neutral: "grey.light/navy.100/black.50",
-	neutralAlt: "grey.lighter/navy.50/black.100",
-	seasonLow: "deprecatedSeasonLow/season.100/season.700",
-	seasonMedium: "deprecatedSeasonMedium/season.200/season.800",
-	seasonHigh: "deprecatedSeasonHigh/season.300/season.900",
-	seasonVeryHigh: "deprecatedSeasonVeryHigh/season.400/season.1000",
-	rideShare: "grey.dark/black.1000/black.1000"
+	connectAlt: "turquoise.50/turquoise.900",
+	driver: "yellow.500/yellow.500",
+	owner: "navy.700/navy.700",
+	disabled: "navy.100/black.50",
+	neutral: "navy.100/black.50",
+	neutralAlt: "navy.50/black.100",
+	seasonLow: "season.100/season.700",
+	seasonMedium: "season.200/season.800",
+	seasonHigh: "season.300/season.900",
+	seasonVeryHigh: "season.400/season.1000",
+	rideShare: "black.1000/black.1000"
 };
 const text = {
-	base: "graphite/navy.700/grey.100",
+	base: "navy.700/grey.100",
 	baseInteractive: {
-		DEFAULT: "graphite/navy.700/grey.100",
-		hover: "graphite/navy.300/grey.300"
+		DEFAULT: "navy.700/grey.100",
+		hover: "navy.300/grey.300"
 	},
-	subdued: "graphite.light/navy.300/grey.300",
+	subdued: "navy.300/grey.300",
 	subduedInteractive: {
-		DEFAULT: "graphite.light/navy.300/grey.300",
-		hover: "graphite/navy.500/grey.300"
+		DEFAULT: "navy.300/grey.300",
+		hover: "navy.500/grey.300"
 	},
-	accent: "purple/purple.500/purpleDeep.400",
+	accent: "purple.500/purpleDeep.400",
 	accentInteractive: {
-		DEFAULT: "blue/purple.500/purpleDeep.400",
-		hover: "blue/purple.700/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400"
 	},
-	accentAlt: "white/purple.500/grey.100",
+	accentAlt: "purple.500/grey.100",
 	accentAltInteractive: {
-		DEFAULT: "white/purple.500/grey.100",
-		hover: "white/purple.700/grey.100"
+		DEFAULT: "purple.500/grey.100",
+		hover: "purple.700/grey.100"
 	},
-	info: "graphite.light/yellow.900/yellow.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
-	error: "red/red.500/red.400",
-	errorAlt: "white/red.500/red.500",
-	success: "green/green.700/green.700",
-	successAlt: "white/green.900/green.100",
-	warning: "coral/orange.500/orange.300",
-	connect: "turquoise/turquoise.500/turquoise.500",
-	connectAlt: "turquoise/turquoise.900/turquoise.50",
-	driver: "graphite/navy.700/navy.700",
-	owner: "white/white/grey.100",
-	inversed: "white/white/white",
-	disabled: "navy.200/navy.200/navy.200",
-	onAccent: "white/white/white",
-	onError: "white/white/white",
-	onSuccess: "white/white/white",
-	onRideShare: "white/white/white"
+	info: "yellow.900/yellow.300",
+	infoAlt: "yellow.500/yellow.700",
+	error: "red.500/red.400",
+	errorAlt: "red.500/red.500",
+	success: "green.700/green.700",
+	successAlt: "green.900/green.100",
+	warning: "orange.500/orange.300",
+	connect: "turquoise.500/turquoise.500",
+	connectAlt: "turquoise.900/turquoise.50",
+	driver: "navy.700/navy.700",
+	owner: "white/grey.100",
+	inversed: "white/white",
+	disabled: "navy.200/navy.200",
+	onAccent: "white/white",
+	onError: "white/white",
+	onSuccess: "white/white",
+	onRideShare: "white/white"
 };
 const buttonBackground = {
-	selected: "indigo/purple.100/purpleDeep.900",
+	selected: "purple.100/purpleDeep.900",
 	destructiveInteractive: {
-		DEFAULT: "red/red.100/red.900",
-		hover: "red/red.120/red.900",
-		press: "red/red.150/red.900"
+		DEFAULT: "red.100/red.900",
+		hover: "red.120/red.900",
+		press: "red.150/red.900"
 	},
-	disabled: "grey.lighter/navy.100/black.50",
+	disabled: "navy.100/black.50",
 	primaryInteractive: {
-		DEFAULT: "purple/purple.500/purpleDeep.500",
-		hover: "indigo/purple.700/purpleDeep.500",
-		press: "indigo.dark/purple.900/purpleDeep.500"
+		DEFAULT: "purple.500/purpleDeep.500",
+		hover: "purple.700/purpleDeep.500",
+		press: "purple.900/purpleDeep.500"
 	},
 	secondaryInteractive: {
-		DEFAULT: "white/white/black.500",
-		hover: "white/white/black.500",
-		press: "white/white/black.500"
+		DEFAULT: "white/black.500",
+		hover: "white/black.500",
+		press: "white/black.500"
 	},
-	success: "green/green.700/green.900",
+	success: "green.700/green.900",
 	successAltInteractive: {
-		DEFAULT: "green/green.100/green.1000",
-		hover: "green/green.120/green.1000",
-		press: "green/green.150/green.1000"
+		DEFAULT: "green.100/green.1000",
+		hover: "green.120/green.1000",
+		press: "green.150/green.1000"
 	},
 	tertiaryInteractive: {
-		DEFAULT: "white/white/white",
-		hover: "white/white/white",
-		press: "white/white/white"
+		DEFAULT: "white/white",
+		hover: "white/white",
+		press: "white/white"
 	}
 };
 const buttonIcon = {
-	selected: "white/purple.500/grey.100",
+	selected: "purple.500/grey.100",
 	destructiveInteractive: {
-		DEFAULT: "red/red.500/red.200",
-		hover: "red/red.500/red.200",
-		press: "red/red.500/red.200"
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
 	},
-	disabled: "graphite.light/navy.300/grey.300",
+	disabled: "navy.300/grey.300",
 	primaryInteractive: {
-		DEFAULT: "white/white/grey.100",
-		hover: "white/white/grey.100",
-		press: "white/white/grey.100"
+		DEFAULT: "white/grey.100",
+		hover: "white/grey.100",
+		press: "white/grey.100"
 	},
 	secondaryInteractive: {
-		DEFAULT: "indigo/purple.500/purpleDeep.400",
-		hover: "indigo/purple.700/purpleDeep.400",
-		press: "indigo.dark/purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	},
-	success: "white/white/green.100",
+	success: "white/green.100",
 	successAltInteractive: {
-		DEFAULT: "white/green.900/green.100",
-		hover: "white/green.900/green.100",
-		press: "white/green.900/green.100"
+		DEFAULT: "green.900/green.100",
+		hover: "green.900/green.100",
+		press: "green.900/green.100"
 	},
 	tertiaryInteractive: {
-		DEFAULT: "blue/purple.500/purpleDeep.400",
-		hover: "blue/purple.700/purpleDeep.400",
-		press: "blue/purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	}
 };
 const buttonLabel = {
-	selected: "white/purple.500/grey.100",
+	selected: "purple.500/grey.100",
 	destructiveInteractive: {
-		DEFAULT: "white/red.500/red.200",
-		hover: "white/red.500/red.200",
-		press: "white/red.500/red.200"
+		DEFAULT: "red.500/red.200",
+		hover: "red.500/red.200",
+		press: "red.500/red.200"
 	},
-	disabled: "graphite.light/navy.300/grey.300",
+	disabled: "navy.300/grey.300",
 	primaryInteractive: {
-		DEFAULT: "white/white/grey.100",
-		hover: "white/white/grey.100",
-		press: "white/white/grey.100"
+		DEFAULT: "white/grey.100",
+		hover: "white/grey.100",
+		press: "white/grey.100"
 	},
 	secondaryInteractive: {
-		DEFAULT: "indigo/purple.500/purpleDeep.400",
-		hover: "indigo/purple.700/purpleDeep.400",
-		press: "indigo.dark/purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	},
-	success: "white/white/green.100",
+	success: "white/green.100",
 	successAltInteractive: {
-		DEFAULT: "white/green.900/green.100",
-		hover: "white/green.900/green.100",
-		press: "white/green.900/green.100"
+		DEFAULT: "green.900/green.100",
+		hover: "green.900/green.100",
+		press: "green.900/green.100"
 	},
 	tertiaryInteractive: {
-		DEFAULT: "blue/purple.500/purpleDeep.400",
-		hover: "blue/purple.700/purpleDeep.400",
-		press: "blue/purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	}
 };
 const icon = {
-	base: "graphite/navy.500/grey.100",
+	base: "navy.500/grey.100",
 	baseInteractive: {
-		DEFAULT: "graphite/navy.500/grey.100",
-		hover: "graphite/navy.700/grey.100"
+		DEFAULT: "navy.500/grey.100",
+		hover: "navy.700/grey.100"
 	},
-	subdued: "graphite.light/navy.300/grey.300",
+	subdued: "navy.300/grey.300",
 	subduedInteractive: {
-		DEFAULT: "graphite.light/navy.300/grey.300",
-		hover: "graphite/navy.500/grey.300"
+		DEFAULT: "navy.300/grey.300",
+		hover: "navy.500/grey.300"
 	},
-	accent: "purple/purple.500/purpleDeep.400",
+	accent: "purple.500/purpleDeep.400",
 	accentInteractive: {
-		DEFAULT: "purple/purple.500/purpleDeep.400",
-		hover: "indigo/purple.700//purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700//purpleDeep.400"
 	},
-	accentAlt: "white/purple.500/grey.100",
+	accentAlt: "purple.500/grey.100",
 	accentAltInteractive: {
-		DEFAULT: "white/purple.500/grey.100",
-		hover: "white/purple.700/grey.100"
+		DEFAULT: "purple.500/grey.100",
+		hover: "purple.700/grey.100"
 	},
-	info: "graphite.light/yellow.900/yellow.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
-	error: "red/red.500/red.400",
-	errorAlt: "red/red.500/red.200",
-	success: "green/green.700/green.700",
-	successAlt: "white/green.900/green.100",
-	warning: "coral/orange.500/orange.300",
-	connect: "turquoise/turquoise.500/white",
-	connectAlt: "turquoise/turquoise.900/turquoise.50",
-	driver: "graphite/navy.700//navy.700",
-	owner: "white/white/white",
-	inversed: "white/white/white",
-	disabled: "grey.lighter/navy.100/black.50",
-	rideShare: "grey.dark/black.1000/white",
-	onRideShare: "white/white/white"
+	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.900/green.100",
+	warning: "orange.500/orange.300",
+	connect: "turquoise.500/white",
+	connectAlt: "turquoise.900/turquoise.50",
+	driver: "navy.700//navy.700",
+	owner: "white/white",
+	inversed: "white/white",
+	disabled: "navy.100/black.50",
+	rideShare: "black.1000/white",
+	onRideShare: "white/white"
 };
 const stroke = {
-	base: "grey/navy.100/black.50",
+	base: "navy.100/black.50",
 	baseInteractive: {
-		DEFAULT: "grey/navy.100/black.50",
-		hover: "graphite.light/navy.300/purpleDeep.400",
-		press: "graphite/navy.500/purpleDeep.400"
+		DEFAULT: "navy.100/black.50",
+		hover: "navy.300/purpleDeep.400",
+		press: "navy.500/purpleDeep.400"
 	},
-	strong: "grey.dark/navy.300/navy.200",
+	strong: "navy.300/navy.200",
 	strongInteractive: {
-		DEFAULT: "grey.dark/navy.300/navy.200",
-		hover: "graphite.light/navy.500/purpleDeep.400",
-		press: "graphite/navy.700/purpleDeep.400"
+		DEFAULT: "navy.300/navy.200",
+		hover: "navy.500/purpleDeep.400",
+		press: "navy.700/purpleDeep.400"
 	},
-	subdued: "grey.light/navy.100/black.50",
-	accent: "indigo/purple.500/purpleDeep.400",
+	subdued: "navy.100/black.50",
+	accent: "purple.500/purpleDeep.400",
 	accentInteractive: {
-		DEFAULT: "indigo/purple.500/purpleDeep.400",
-		hover: "indigo/purple.700/purpleDeep.400",
-		press: "indigo.dark/purple.900/purpleDeep.400"
+		DEFAULT: "purple.500/purpleDeep.400",
+		hover: "purple.700/purpleDeep.400",
+		press: "purple.900/purpleDeep.400"
 	},
-	accentAlt: "purple/purple.300/purpleDeep.700",
-	error: "red/red.500/red.200",
-	errorAlt: "red/red.500/red.200",
-	success: "green/green.500/green.700",
-	successAlt: "green/green.500/green.700",
-	onAccent: "white/white/white",
-	onError: "white/white/white"
+	accentAlt: "purple.300/purpleDeep.700",
+	error: "red.500/red.200",
+	errorAlt: "red.500/red.200",
+	success: "green.500/green.700",
+	successAlt: "green.500/green.700",
+	onAccent: "white/white",
+	onError: "white/white"
 };
 const fill = {
-	base: "graphite/navy.500/grey.100",
-	secondary: "turquoise/yellow.500/yellow.500",
-	subdued: "grey.light/navy.100/black.50",
-	accent: "purple/purple.500/purpleDeep.400",
-	accentAlt: "purple/purple.100/purpleDeep.900",
-	error: "red/red.500/red.500",
-	negative: "red/red.150/red.900",
-	success: "green/green.500/green.700",
-	disabled: "grey.dark/navy.300/grey.300",
-	neutral: "grey.lighter/navy.50/black.100"
+	base: "navy.500/grey.100",
+	secondary: "yellow.500/yellow.500",
+	subdued: "navy.100/black.50",
+	accent: "purple.500/purpleDeep.400",
+	accentAlt: "purple.100/purpleDeep.900",
+	error: "red.500/red.500",
+	negative: "red.150/red.900",
+	success: "green.500/green.700",
+	disabled: "navy.300/grey.300",
+	neutral: "navy.50/black.100"
 };
 var _theme = {
 	background: background,

package/types/src/components/ContainedIcon/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { IconColorsType } from "../Icon";
+type Extends<T, U extends T> = U;
+type ContainedIconColorType = Extends<IconColorsType, "base" | "accent" | "disabled" | "error" | "info" | "success">;
+export type ContainedIconPropsType = {
+    icon: React.JSX.Element;
+    color?: ContainedIconColorType;
+};
+export declare function ContainedIcon({ icon, color, }: ContainedIconPropsType): React.JSX.Element;
+export {};