@drivy/cobalt 0.46.1 → 0.46.2

package/styles/components/Calendar/CalendarView/index.scss

@@ -5,11 +5,7 @@ $daySize: spacing(md);
 .cobalt-CalendarView {
   display: flex;
 
-  &__month {
-    &:not(:last-child) {
-      margin-right: spacing(sm);
-    }
-  }
+  gap: spacing(sm);
 
   &__monthName {
     @include c-text-section-heading;
@@ -18,9 +14,7 @@ $daySize: spacing(md);
   &__week {
     display: flex;
 
-    &:not(:last-child) {
-      margin-bottom: 4px;
-    }
+    gap: spacing(unit);
   }
 
   &__day {
@@ -38,26 +32,23 @@ $daySize: spacing(md);
     border-radius: math.div($daySize, 2);
 
     &--disabled {
-      @include bg-color(neutral);
+      @include bg-color(blocker);
       @include text-color(subdued);
     }
 
     &--highlighted {
-      @include text-color(inversed);
-      @include bg-color(connect);
+      @include text-color(onRental);
+      @include bg-color(rental);
     }
 
     &--semi-highlighted {
-      @include bg-color(connectAlt);
+      @include text-color(onRentalAlt);
+      @include bg-color(rentalAlt);
     }
 
     &--past {
       @include text-color(subdued);
       opacity: 0.4;
     }
-
-    &:not(:first-child) {
-      margin-left: 4px;
-    }
   }
 }

package/styles/components/Icon/iconColors.scss

@@ -22,10 +22,6 @@
   fill: var(--c-icon-info);
 }
 
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
-}
-
 .cobalt-Icon--colorError {
   fill: var(--c-icon-error);
 }
@@ -42,10 +38,6 @@
   fill: var(--c-icon-successAlt);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
-}
-
 .cobalt-Icon--colorConnect {
   fill: var(--c-icon-connect);
 }
@@ -54,18 +46,6 @@
   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);
 }
@@ -74,16 +54,16 @@
   fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorDisabled {
-  fill: var(--c-icon-disabled);
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
 }
 
-.cobalt-Icon--colorDisabledAlt {
-  fill: var(--c-icon-disabledAlt);
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
 }
 
-.cobalt-Icon--colorInversed {
-  fill: var(--c-icon-inversed);
+.cobalt-Icon--colorDisabled {
+  fill: var(--c-icon-disabled);
 }
 
 .cobalt-Icon--colorOnAccent {
@@ -114,10 +94,34 @@
   fill: var(--c-icon-onPicked);
 }
 
+.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--colorOnBase {
   fill: var(--c-icon-onBase);
 }
 
+.cobalt-Icon--colorDisabledAlt {
+  fill: var(--c-icon-disabledAlt);
+}
+
+.cobalt-Icon--colorOnRental {
+  fill: var(--c-icon-onRental);
+}
+
+.cobalt-Icon--colorInversed {
+  fill: var(--c-icon-inversed);
+}
+
 .cobalt-Icon--colorBaseInteractive {
   fill: var(--c-icon-baseInteractive);
 }

package/styles/core/_colors-map.scss

@@ -15,9 +15,6 @@ $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,9 +23,13 @@ $theme-colors-map: (
     seasonLow: var(--c-background-seasonLow),
     seasonMedium: var(--c-background-seasonMedium),
     seasonHigh: var(--c-background-seasonHigh),
-    seasonVeryhigh: var(--c-background-seasonVeryhigh),
+    seasonVeryHigh: var(--c-background-seasonVeryHigh),
     rental: var(--c-background-rental),
+    rentalAlt: var(--c-background-rentalAlt),
     blocker: var(--c-background-blocker),
+    rideshare: var(--c-background-rideshare),
+    keyExchange: var(--c-background-keyExchange),
+    picked: var(--c-background-picked),
     base: var(--c-background-base),
     secondaryInteractive: (
       DEFAULT: var(--c-background-secondaryInteractive),
@@ -57,21 +58,17 @@ $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),
     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),
@@ -79,7 +76,17 @@ $theme-colors-map: (
     onConnect: var(--c-text-onConnect),
     onKeyExchange: var(--c-text-onKeyExchange),
     onPicked: var(--c-text-onPicked),
+    keyExchange: var(--c-text-keyExchange),
+    picked: var(--c-text-picked),
+    rideshare: var(--c-text-rideshare),
     onBase: var(--c-text-onBase),
+    onSeasonLow: var(--c-text-onSeasonLow),
+    onSeasonMedium: var(--c-text-onSeasonMedium),
+    onSeasonHigh: var(--c-text-onSeasonHigh),
+    onSeasonVeryHigh: var(--c-text-onSeasonVeryHigh),
+    onRental: var(--c-text-onRental),
+    onRentalAlt: var(--c-text-onRentalAlt),
+    inversed: var(--c-text-inversed),
     baseInteractive: (
       DEFAULT: var(--c-text-baseInteractive),
       hover: var(--c-text-baseInteractive--hover)
@@ -103,22 +110,17 @@ $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),
+    warning: var(--c-icon-warning),
+    infoAlt: var(--c-icon-infoAlt),
     disabled: var(--c-icon-disabled),
-    disabledAlt: var(--c-icon-disabledAlt),
-    inversed: var(--c-icon-inversed),
     onAccent: var(--c-icon-onAccent),
     onRideshare: var(--c-icon-onRideshare),
     onError: var(--c-icon-onError),
@@ -126,7 +128,13 @@ $theme-colors-map: (
     onConnect: var(--c-icon-onConnect),
     onKeyExchange: var(--c-icon-onKeyExchange),
     onPicked: var(--c-icon-onPicked),
+    keyExchange: var(--c-icon-keyExchange),
+    picked: var(--c-icon-picked),
+    rideshare: var(--c-icon-rideshare),
     onBase: var(--c-icon-onBase),
+    disabledAlt: var(--c-icon-disabledAlt),
+    onRental: var(--c-icon-onRental),
+    inversed: var(--c-icon-inversed),
     baseInteractive: (
       DEFAULT: var(--c-icon-baseInteractive),
       hover: var(--c-icon-baseInteractive--hover)
@@ -147,26 +155,26 @@ $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),
-    error: var(--c-stroke-error),
-    errorAlt: var(--c-stroke-errorAlt),
     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),
+    error: var(--c-stroke-error),
+    errorAlt: var(--c-stroke-errorAlt),
+    strong: var(--c-stroke-strong),
+    onAccent: var(--c-stroke-onAccent),
     rental: var(--c-stroke-rental),
     blocker: var(--c-stroke-blocker),
-    onAccent: var(--c-stroke-onAccent),
     onError: var(--c-stroke-onError),
     onSuccess: var(--c-stroke-onSuccess),
+    connect: var(--c-stroke-connect),
+    keyExchange: var(--c-stroke-keyExchange),
+    picked: var(--c-stroke-picked),
     onConnect: var(--c-stroke-onConnect),
-    onPicked: var(--c-stroke-onPicked),
     onKeyExchange: var(--c-stroke-onKeyExchange),
+    onPicked: var(--c-stroke-onPicked),
     onRideshare: var(--c-stroke-onRideshare),
+    rideshare: var(--c-stroke-rideshare),
     onBase: var(--c-stroke-onBase),
     baseInteractive: (
       DEFAULT: var(--c-stroke-baseInteractive),
@@ -256,6 +264,21 @@ $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),
@@ -292,21 +315,6 @@ $theme-colors-map: (
       press: var(--c-buttonBackground-successAltInteractive--press)
     )
   ),
-  fill: (
-    base: var(--c-fill-base),
-    subdued: var(--c-fill-subdued),
-    secondary: var(--c-fill-secondary),
-    accent: var(--c-fill-accent),
-    accentAlt: var(--c-fill-accentAlt),
-    error: var(--c-fill-error),
-    success: var(--c-fill-success),
-    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),

package/styles/core/default-theme.scss

@@ -6,7 +6,7 @@
   --c-background-primary: var(--c-white);
   --c-background-secondary: var(--c-white);
   --c-background-accent: var(--c-purple-500);
-  --c-background-accentAlt: var(--c-purple-100);
+  --c-background-accentAlt: var(--c-purple-200);
   --c-background-info: var(--c-yellow-100);
   --c-background-error: var(--c-red-500);
   --c-background-errorAlt: var(--c-red-100);
@@ -14,51 +14,48 @@
   --c-background-successAlt: var(--c-green-100);
   --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);
+  --c-background-disabled: var(--c-navy-50);
   --c-background-neutral: var(--c-navy-100);
   --c-background-neutralAlt: var(--c-navy-50);
   --c-background-seasonLow: var(--c-season-100);
-  --c-background-seasonMedium: var(--c-season-200);
-  --c-background-seasonHigh: var(--c-season-300);
-  --c-background-seasonVeryhigh: var(--c-season-400);
-  --c-background-rental: var(--c-turquoise-100);
-  --c-background-blocker: var(--c-navy-100);
+  --c-background-seasonMedium: var(--c-season-300);
+  --c-background-seasonHigh: var(--c-season-700);
+  --c-background-seasonVeryHigh: var(--c-season-1100);
+  --c-background-rental: var(--c-blue-500);
+  --c-background-rentalAlt: var(--c-blue-300);
+  --c-background-blocker: var(--c-grey-100);
+  --c-background-rideshare: var(--c-black-1000);
+  --c-background-keyExchange: var(--c-newViolet-500);
+  --c-background-picked: var(--c-green-700);
   --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: var(--c-purple-200);
   --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
   --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);
   --c-text-base: var(--c-navy-700);
-  --c-text-subdued: var(--c-navy-300);
+  --c-text-subdued: var(--c-navy-400);
   --c-text-accent: var(--c-purple-500);
-  --c-text-accentAlt: var(--c-purple-500);
+  --c-text-accentAlt: var(--c-purple-700);
   --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-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-disabled: var(--c-navy-200);
-  --c-text-inversed: var(--c-white);
+  --c-text-warning: var(--c-orange-500);
+  --c-text-infoAlt: var(--c-yellow-700);
+  --c-text-disabled: var(--c-navy-120);
   --c-text-onAccent: var(--c-white);
   --c-text-onRideshare: var(--c-white);
   --c-text-onError: var(--c-white);
@@ -66,36 +63,41 @@
   --c-text-onConnect: var(--c-white);
   --c-text-onKeyExchange: var(--c-white);
   --c-text-onPicked: var(--c-white);
+  --c-text-keyExchange: var(--c-newViolet-500);
+  --c-text-picked: var(--c-green-700);
+  --c-text-rideshare: var(--c-black-1000);
   --c-text-onBase: var(--c-white);
+  --c-text-onSeasonLow: var(--c-black-800);
+  --c-text-onSeasonMedium: var(--c-black-800);
+  --c-text-onSeasonHigh: var(--c-white);
+  --c-text-onSeasonVeryHigh: var(--c-white);
+  --c-text-onRental: var(--c-white);
+  --c-text-onRentalAlt: var(--c-black-300);
+  --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-300);
+  --c-text-subduedInteractive: var(--c-navy-400);
   --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-500);
+  --c-text-accentAltInteractive: var(--c-purple-700);
   --c-text-accentAltInteractive--hover: var(--c-purple-700);
-  --c-icon-base: var(--c-navy-500);
-  --c-icon-subdued: var(--c-navy-300);
+  --c-icon-base: var(--c-navy-700);
+  --c-icon-subdued: var(--c-navy-400);
   --c-icon-accent: var(--c-purple-500);
-  --c-icon-accentAlt: var(--c-purple-500);
+  --c-icon-accentAlt: var(--c-purple-700);
   --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-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-warning: var(--c-orange-500);
+  --c-icon-infoAlt: var(--c-yellow-500);
   --c-icon-disabled: var(--c-navy-200);
-  --c-icon-disabledAlt: var(--c-navy-300);
-  --c-icon-inversed: var(--c-white);
   --c-icon-onAccent: var(--c-white);
   --c-icon-onRideshare: var(--c-white);
   --c-icon-onError: var(--c-white);
@@ -103,37 +105,43 @@
   --c-icon-onConnect: var(--c-white);
   --c-icon-onKeyExchange: var(--c-white);
   --c-icon-onPicked: var(--c-white);
+  --c-icon-keyExchange: var(--c-newViolet-500);
+  --c-icon-picked: var(--c-green-700);
+  --c-icon-rideshare: var(--c-black-1000);
   --c-icon-onBase: var(--c-white);
-  --c-icon-baseInteractive: var(--c-navy-500);
+  --c-icon-disabledAlt: var(--c-navy-120);
+  --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-subduedInteractive: var(--c-navy-300);
+  --c-icon-subduedInteractive: var(--c-navy-400);
   --c-icon-subduedInteractive--hover: var(--c-navy-500);
   --c-icon-accentInteractive: var(--c-purple-500);
   --c-icon-accentInteractive--hover: var(--c-purple-700);
-  --c-icon-accentAltInteractive: var(--c-purple-500);
+  --c-icon-accentAltInteractive: var(--c-purple-700);
   --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-error: var(--c-red-500);
-  --c-stroke-errorAlt: var(--c-red-500);
+  --c-stroke-accentAlt: var(--c-purple-600);
   --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-error: var(--c-red-500);
+  --c-stroke-errorAlt: var(--c-red-500);
+  --c-stroke-strong: var(--c-grey-300);
   --c-stroke-onAccent: var(--c-white);
+  --c-stroke-rental: var(--c-blue-700);
+  --c-stroke-blocker: var(--c-grey-200);
   --c-stroke-onError: var(--c-white);
   --c-stroke-onSuccess: var(--c-white);
+  --c-stroke-connect: var(--c-newPurple-500);
+  --c-stroke-keyExchange: var(--c-newViolet-500);
+  --c-stroke-picked: var(--c-green-700);
   --c-stroke-onConnect: var(--c-white);
-  --c-stroke-onPicked: var(--c-white);
   --c-stroke-onKeyExchange: var(--c-white);
+  --c-stroke-onPicked: var(--c-white);
   --c-stroke-onRideshare: var(--c-white);
+  --c-stroke-rideshare: var(--c-black-1000);
   --c-stroke-onBase: var(--c-white);
   --c-stroke-baseInteractive: var(--c-navy-100);
   --c-stroke-baseInteractive--hover: var(--c-navy-300);
@@ -192,6 +200,19 @@
   --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);
@@ -214,21 +235,8 @@
   --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
   --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
   --c-buttonBackground-successAltInteractive: var(--c-green-100);
-  --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-subdued: var(--c-navy-100);
-  --c-fill-secondary: var(--c-yellow-500);
-  --c-fill-accent: var(--c-purple-500);
-  --c-fill-accentAlt: var(--c-purple-100);
-  --c-fill-error: var(--c-red-500);
-  --c-fill-success: var(--c-green-500);
-  --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-buttonBackground-successAltInteractive--hover: var(--c-green-300);
+  --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
   --c-illustrations-primary: var(--c-navy-500);
   --c-illustrations-secondary: var(--c-white);
   --c-illustrations-accent1: var(--c-purple-500);