@drivy/cobalt 0.46.1 → 0.46.3

package/components/Calendar/CalendarView/CalendarViewMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n  setDate,\n  getISODay,\n  getDaysInMonth,\n  endOfMonth,\n  differenceInCalendarWeeks,\n  isPast,\n  isToday,\n  format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n  CalendarViewMonthType,\n  MonthType,\n  CalendarViewDateType,\n  DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n  monthName,\n  monthStart,\n  statusByDate = {},\n  isSundayFirstDayOfWeek = false,\n}: Props) => {\n  const getMonthByWeek = (): CalendarViewMonthType => {\n    const daysInMonth = getDaysInMonth(monthStart)\n    const weeksInMonth =\n      differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n        weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1,\n      }) + 1\n    const weekDay = isSundayFirstDayOfWeek\n      ? (getISODay(monthStart) % 7) + 1\n      : getISODay(monthStart)\n    const month: CalendarViewDateType[][] = []\n    let cursor = 0\n    let date = 0\n\n    for (let week = 0; week < weeksInMonth; week++) {\n      month[week] = []\n      for (let day = 0; day < 7; day++) {\n        month[week][day] = { date: null }\n\n        if (cursor >= weekDay - 1 && date < daysInMonth) {\n          month[week][day].date = ++date as DateType\n\n          const currentDate = setDate(monthStart, date)\n\n          month[week][day].status =\n            isPast(currentDate) && !isToday(currentDate)\n              ? \"past\"\n              : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n        }\n        cursor++\n      }\n    }\n    return month\n  }\n\n  const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n  return (\n    <div className=\"cobalt-CalendarView__month\">\n      <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n      {monthByWeek.map((week, weekIndex) => (\n        <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n          {week.map((day, dayIndex) => (\n            <div\n              key={weekIndex + 1 * dayIndex + 1}\n              className={cx(\"cobalt-CalendarView__day\", {\n                [`cobalt-CalendarView__day--${day.status}`]: day.status,\n              })}\n            >\n              {day.date}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;AAqBA,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,UAAU,EACV,YAAY,GAAG,EAAE,EACjB,sBAAsB,GAAG,KAAK,GACxB,KAAI;IACV,MAAM,cAAc,GAAG,MAA4B;AACjD,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,MAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,sBAAsB,GAAG,CAAC,GAAG,CAAC;SAC7C,CAAC,GAAG,CAAC,CAAA;QACR,MAAM,OAAO,GAAG,sBAAsB;cAClC,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACjC,cAAE,SAAS,CAAC,UAAU,CAAC,CAAA;QACzB,MAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;AAEZ,QAAA,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;AAC9C,YAAA,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;AAChB,YAAA,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;AAChC,gBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;AAE7C,oBAAA,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;AAC1C,8BAAE,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;AACD,gBAAA,MAAM,EAAE,CAAA;aACT;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,cAAc,EAAE,EAAE,EAAE,CAAC,CAAA;AAEvD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,EAAE,SAAS,CAAO;QAChE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAC/B,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,EAAA,EACvD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;gBACxC,CAAC,CAAA,0BAAA,EAA6B,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM;AACxD,aAAA,CAAC,EAED,EAAA,GAAG,CAAC,IAAI,CACL,CACP,CAAC,CACE,CACP,CAAC,CACE,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n  setDate,\n  getISODay,\n  getDaysInMonth,\n  endOfMonth,\n  differenceInCalendarWeeks,\n  isPast,\n  isToday,\n  format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n  CalendarViewMonthType,\n  MonthType,\n  CalendarViewDateType,\n  DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n  monthName,\n  monthStart,\n  statusByDate = {},\n  isSundayFirstDayOfWeek = false,\n}: Props) => {\n  const getMonthByWeek = (): CalendarViewMonthType => {\n    const daysInMonth = getDaysInMonth(monthStart)\n    const weeksInMonth =\n      differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n        weekStartsOn: isSundayFirstDayOfWeek ? 0 : 1,\n      }) + 1\n    const weekDay = isSundayFirstDayOfWeek\n      ? (getISODay(monthStart) % 7) + 1\n      : getISODay(monthStart)\n    const month: CalendarViewDateType[][] = []\n    let cursor = 0\n    let date = 0\n\n    for (let week = 0; week < weeksInMonth; week++) {\n      month[week] = []\n      for (let day = 0; day < 7; day++) {\n        month[week][day] = { date: null }\n\n        if (cursor >= weekDay - 1 && date < daysInMonth) {\n          month[week][day].date = ++date as DateType\n\n          const currentDate = setDate(monthStart, date)\n\n          month[week][day].status =\n            isPast(currentDate) && !isToday(currentDate)\n              ? \"past\"\n              : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n        }\n        cursor++\n      }\n    }\n    return month\n  }\n\n  const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n  return (\n    <div className=\"cobalt-CalendarView__month\">\n      <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n      <div className=\"c-flex c-flex-col c-gap-2xs\">\n        {monthByWeek.map((week, weekIndex) => (\n          <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n            {week.map((day, dayIndex) => (\n              <div\n                key={weekIndex + 1 * dayIndex + 1}\n                className={cx(\"cobalt-CalendarView__day\", {\n                  [`cobalt-CalendarView__day--${day.status}`]: day.status,\n                })}\n              >\n                {day.date}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":"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"}

package/package.json

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

package/styles/components/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/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

@@ -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),
@@ -294,15 +302,15 @@ $theme-colors-map: (
   ),
   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),
+    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)

package/styles/core/default-theme.scss

@@ -6,59 +6,56 @@
   --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);
   --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-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--hover: var(--c-purpleLight-100);
+  --c-background-accentInteractive--hover: var(--c-purple-600);
+  --c-background-accentAltInteractive: var(--c-purple-200);
+  --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);
   --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-successAlt: var(--c-green-900);
   --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-successAlt: var(--c-green-900);
   --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-baseInteractive--hover: var(--c-navy-700);
-  --c-icon-subduedInteractive: var(--c-navy-300);
+  --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-900);
+  --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);
@@ -141,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);
@@ -157,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);
@@ -214,20 +222,20 @@
   --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-buttonBackground-successAltInteractive--hover: var(--c-green-300);
+  --c-buttonBackground-successAltInteractive--press: var(--c-green-400);
   --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-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-rental: var(--c-turquoise-100);
-  --c-fill-blocker: var(--c-navy-120);
+  --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);