@drivy/cobalt 0.46.0 → 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/ContainedIcon/index.scss

@@ -11,6 +11,8 @@
   justify-content: center;
   align-items: center;
 
+  flex-shrink: 0;
+
   border-radius: border-radius(lg);
 
   .cobalt-Icon {

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,16 +94,42 @@
   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);
 }
 
 .cobalt-Icon--colorBaseInteractive:hover,
-.cobalt-Icon--colorBaseInteractive:focus {
+.cobalt-Icon--colorBaseInteractive:focus,
+.c-text-baseInteractive:hover .cobalt-Icon--colorBaseInteractive,
+.c-text-baseInteractive:focus .cobalt-Icon--colorBaseInteractive {
   fill: var(--c-icon-baseInteractive--hover);
 }
 
@@ -132,7 +138,9 @@
 }
 
 .cobalt-Icon--colorSubduedInteractive:hover,
-.cobalt-Icon--colorSubduedInteractive:focus {
+.cobalt-Icon--colorSubduedInteractive:focus,
+.c-text-subduedInteractive:hover .cobalt-Icon--colorSubduedInteractive,
+.c-text-subduedInteractive:focus .cobalt-Icon--colorSubduedInteractive {
   fill: var(--c-icon-subduedInteractive--hover);
 }
 
@@ -141,7 +149,9 @@
 }
 
 .cobalt-Icon--colorAccentInteractive:hover,
-.cobalt-Icon--colorAccentInteractive:focus {
+.cobalt-Icon--colorAccentInteractive:focus,
+.c-text-accentInteractive:hover .cobalt-Icon--colorAccentInteractive,
+.c-text-accentInteractive:focus .cobalt-Icon--colorAccentInteractive {
   fill: var(--c-icon-accentInteractive--hover);
 }
 
@@ -150,6 +160,8 @@
 }
 
 .cobalt-Icon--colorAccentAltInteractive:hover,
-.cobalt-Icon--colorAccentAltInteractive:focus {
+.cobalt-Icon--colorAccentAltInteractive:focus,
+.c-text-accentAltInteractive:hover .cobalt-Icon--colorAccentAltInteractive,
+.c-text-accentAltInteractive:focus .cobalt-Icon--colorAccentAltInteractive {
   fill: var(--c-icon-accentAltInteractive--hover);
 }

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

@@ -28,28 +28,44 @@
   margin-right: auto;
 }
 
-.cobalt-layout-flexibleWithConstraint--large {
-  max-width: 1200px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--large",
+  (
+    "max-width": 1200px
+  )
+);
 
-.cobalt-layout-flexibleWithConstraint--medium {
-  max-width: 840px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--medium",
+  (
+    "max-width": 840px
+  )
+);
 
-.cobalt-layout-flexibleWithConstraint--small {
-  max-width: 540px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-flexibleWithConstraint--small",
+  (
+    "max-width": 540px
+  )
+);
 
-.cobalt-layout-fixed--280 {
-  width: 280px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--280",
+  (
+    "width": 280px
+  )
+);
 
-.cobalt-layout-fixed--420 {
-  width: 420px;
-}
-
-.cobalt-layout-fixed--600 {
-  width: 600px;
-}
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--420",
+  (
+    "width": 420px
+  )
+);
 
-// 48px paddiing bottom
+@include class-with-responsive-variants(
+  "cobalt-layout-fixed--600",
+  (
+    "width": 600px
+  )
+);

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/breakpoints.scss

@@ -47,3 +47,23 @@ $breakpoint-data: (
     @content;
   }
 }
+
+// Mixin to generate the same properties for all breakpoints
+@mixin class-with-responsive-variants($class-name, $properties) {
+  .#{$class-name} {
+    @each $property, $value in $properties {
+      #{$property}: $value;
+    }
+  }
+
+  // Loop through the breakpoints and generate prefixed classes for all breakpoints
+  @each $breakpoint, $breakpoint-value in $breakpoint-data {
+    @media (min-width: $breakpoint-value) {
+      .#{$breakpoint}\:#{$class-name} {
+        @each $property, $value in $properties {
+          #{$property}: $value;
+        }
+      }
+    }
+  }
+}