@drivy/cobalt 1.1.2 → 1.1.4

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

@@ -47,21 +47,20 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: spacing(md);
+    @apply c-gap-md;
 
     @include breakpoint($from: sm) {
       flex-direction: row;
-      gap: spacing(sm);
+      @apply c-gap-sm;
     }
   }
 
   &__month {
-    @include bg-color(secondary);
+    @apply c-bg-secondary;
   }
 
   &__month-header {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
     margin-bottom: 12px;
     padding: 4px;
 
@@ -87,7 +86,7 @@
   }
 
   &__month__day-header {
-    @include text-color(subdued);
+    @apply c-text-subdued;
     flex: 1;
 
     text-align: center;
@@ -97,7 +96,7 @@
   }
 
   &__day {
-    @include text-color(base);
+    @apply c-text-base;
 
     position: relative;
 
@@ -147,22 +146,22 @@
     }
 
     &--today {
-      @include text-color(accent);
+      @apply c-text-accent;
       font-weight: 600;
     }
 
     &--selected {
-      @include text-color(accent);
+      @apply c-text-accent;
 
       background-color: $calendar-range-day-color;
 
       .cobalt-CalendarRangePicker__day-notification {
-        @include bg-color(accent);
+        @apply c-bg-accent;
       }
     }
 
     &--disabled {
-      @include text-color(disabled);
+      @apply c-text-disabled;
 
       text-decoration: line-through;
     }
@@ -199,19 +198,19 @@
     }
 
     &--active:not(&--invalid) {
-      @include text-color(onAccent);
+      @apply c-text-onAccent;
     }
 
     &--active .cobalt-CalendarRangePicker__day-notification {
-      @include bg-color(primary);
+      @apply c-bg-primary;
     }
 
     &--active:not(&--invalid):after {
-      @include bg-color(accent);
+      @apply c-bg-accent;
     }
 
     &--invalid {
-      @include text-color(error);
+      @apply c-text-error;
 
       background-color: $calendar-range-day-invalid-color;
 
@@ -220,7 +219,7 @@
       }
 
       .cobalt-CalendarRangePicker__day-notification {
-        @include bg-color(error);
+        @apply c-bg-error;
       }
     }
 
@@ -228,13 +227,13 @@
         &--range
       ):not(&--startDay) {
       &:after {
-        @include bg-color(primary);
+        @apply c-bg-primary;
       }
     }
 
     &--endDay.cobalt-CalendarRangePicker__day--active.cobalt-CalendarRangePicker__day--invalid {
       &:after {
-        @include border(error);
+        @apply c-border-error;
         border-width: 2px;
       }
     }
@@ -242,7 +241,7 @@
     //Start day = end day
     &--startDay.cobalt-CalendarRangePicker__day--endDay {
       &:before {
-        @include border(onAccent);
+        @apply c-border-onAccent;
 
         position: absolute;
 
@@ -283,7 +282,7 @@
 
     margin: 0;
 
-    padding: 0 spacing(sm);
+    @apply c-py-none c-px-sm;
 
     height: 0;
 
@@ -306,7 +305,7 @@
 }
 
 .tippy-box[data-theme~="range-picker"] {
-  @include border(base);
+  @apply c-border-base;
 }
 
 .tippy-box[data-theme~="range-picker"] .tippy-arrow:after {

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

@@ -1,24 +1,25 @@
 @use "sass:math";
 
-$daySize: spacing(md);
+// Define $daySize using the Tailwind theme function
+$daySize: theme("spacing.md");
 
 .cobalt-CalendarView {
   display: flex;
 
-  gap: spacing(sm);
+  @apply c-gap-sm;
 
   &__monthName {
-    @include c-text-section-heading;
+    @apply c-text-section-heading;
   }
 
   &__week {
     display: flex;
 
-    gap: spacing(unit);
+    @apply c-gap-2xs;
   }
 
   &__day {
-    @include text-color(base);
+    @apply c-text-base;
 
     display: flex;
     align-items: center;
@@ -29,25 +30,22 @@ $daySize: spacing(md);
 
     font-size: 12px;
 
-    border-radius: math.div($daySize, 2);
+    border-radius: calc(#{$daySize} / 2);
 
     &--disabled {
-      @include bg-color(blocker);
-      @include text-color(subdued);
+      @apply c-bg-blocker c-text-subdued;
     }
 
     &--highlighted {
-      @include text-color(onRental);
-      @include bg-color(rental);
+      @apply c-text-onRental c-bg-rental;
     }
 
     &--semi-highlighted {
-      @include text-color(onRentalAlt);
-      @include bg-color(rentalAlt);
+      @apply c-text-onRentalAlt c-bg-rentalAlt;
     }
 
     &--past {
-      @include text-color(subdued);
+      @apply c-text-subdued;
       opacity: 0.4;
     }
   }

package/styles/components/Callout/index.scss

@@ -1,18 +1,9 @@
 .cobalt- {
   &Callout {
-    @include c-text-body-md;
-    @include text-color(base);
-    @include bg-color(secondary);
+    @apply c-text-body-md c-text-base c-bg-secondary c-rounded c-shadow c-p-sm c-mb-md;
 
     position: relative;
 
-    padding: spacing(sm);
-    margin-bottom: spacing(md);
-
-    border-radius: 3px;
-
-    box-shadow: elevation(base);
-
     &:before {
       position: absolute;
       left: 0;
@@ -31,26 +22,24 @@
 
   &Callout--info {
     &:before {
-      @include fill-bg-color(secondary);
+      @apply c-bg-fill-secondary;
     }
   }
 
   &Callout--success {
     &:before {
-      @include fill-bg-color(success);
+      @apply c-bg-fill-success;
     }
   }
 
   &Callout--error {
     &:before {
-      @include fill-bg-color(error);
+      @apply c-bg-fill-error;
     }
   }
 
   &Callout__Title {
-    @include c-text-title-sm;
-
-    margin-bottom: spacing(xs);
+    @apply c-text-title-sm c-mb-xs;
   }
 
   &Callout__Close {

package/styles/components/Card/index.scss

@@ -1,19 +1,15 @@
 .cobalt- {
-  $card-border-radius: border-radius(xl);
   // deprecated
   $legacy-card-padding-tight: 12px;
 
   &Card {
-    @include bg-color(secondary);
-    @include border(base);
+    @apply c-bg-secondary c-border c-border-base c-rounded-xl;
     width: 100%;
 
-    border-radius: $card-border-radius;
-
     &--legacy {
       border: 0;
 
-      box-shadow: elevation(base);
+      @apply c-shadow;
     }
 
     &--responsive {
@@ -26,7 +22,7 @@
   }
 
   &Card__Section {
-    @include bg-color(secondary);
+    @apply c-bg-secondary;
     position: relative;
 
     display: block;
@@ -34,17 +30,17 @@
   }
 
   &Card__Section--subdued {
-    @include bg-color(neutralAlt);
+    @apply c-bg-neutralAlt;
   }
 
   &Card__Section + &Card__Section--divided {
-    @include border-top(subdued);
+    @apply c-border-t c-border-subdued;
     padding-top: $card-padding - 1px;
   }
 
   &Card__Section + &Card__Section--dividedSoft {
     &:before {
-      @include bg-color(neutral);
+      @apply c-bg-neutral;
 
       position: absolute;
       top: 0;
@@ -73,28 +69,26 @@
   // first-of-class, source: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
   &Card
     > .cobalt-Card__Section:not(.cobalt-Card__Section ~ .cobalt-Card__Section) {
-    border-top-left-radius: $card-border-radius;
-    border-top-right-radius: $card-border-radius;
+    @apply c-rounded-t-xl;
   }
 
   // No last-of-class hack found for now
   &Card > .cobalt-Card__Section:last-of-type {
-    border-bottom-right-radius: $card-border-radius;
-    border-bottom-left-radius: $card-border-radius;
+    @apply c-rounded-b-xl;
   }
 }
 
 a.cobalt-Card__Section[href] {
-  z-index: zx();
+  z-index: theme("zIndex.base");
 
   text-decoration: inherit;
 
   transition: 150ms ease-out;
 
   &:hover {
-    z-index: zx("above");
+    z-index: theme("zIndex.above");
 
-    box-shadow: elevation(base);
+    @apply c-shadow;
 
     transform: scale(1.01);
   }

package/styles/components/Cell/index.scss

@@ -3,7 +3,7 @@
     position: relative;
 
     &--divided {
-      @include border-top(base);
+      @apply c-border-t c-border-base;
 
       &:first-of-type {
         border-top: 0;
@@ -12,15 +12,17 @@
 
     &--softDivided {
       &::before {
-        @include semantic-color(stroke, base, background-color);
-
         position: absolute;
+
         top: 0;
         right: 0;
 
         display: block;
+
         height: 1px;
-        width: calc(100% - #{spacing(sm)});
+        width: calc(100% - #{theme("spacing.sm")});
+
+        background-color: theme("semanticBorderColor.base");
 
         content: "";
       }

package/styles/components/Chip/index.scss

@@ -5,8 +5,7 @@ $chip-large-height: 50px;
 
 .cobalt- {
   &Chip {
-    @include border(base);
-    @include bg-color(secondary);
+    @apply c-border c-border-base c-bg-secondary;
 
     position: relative;
 
@@ -22,7 +21,7 @@ $chip-large-height: 50px;
   }
 
   &Chip--interactive {
-    @include border-color(baseInteractive);
+    @apply c-border-baseInteractive;
 
     &:not([disabled]) {
       cursor: pointer;
@@ -41,21 +40,20 @@ $chip-large-height: 50px;
   }
 
   &Chip--large &Chip__Text {
-    padding: 0 spacing(sm) 0 spacing(xs);
+    padding: 0 theme("spacing.sm") 0 theme("spacing.xs");
   }
 
   &Chip--disabled {
-    @include bg-color(disabled);
+    @apply c-bg-disabled;
     opacity: 0.5;
   }
 
   &Chip--active {
-    @include bg-color(accentAlt);
-    @include border-color(accentAlt);
+    @apply c-bg-accentAlt c-border-accentAlt;
   }
 
   &Chip--active &Chip__Text {
-    @include text-color(accentAlt);
+    @apply c-text-accentAlt;
   }
 
   &Chip__Content {
@@ -78,9 +76,9 @@ $chip-large-height: 50px;
   }
 
   &Chip__Text {
-    @include c-text-section-heading;
+    @apply c-text-section-heading;
 
-    padding: 0 spacing(xs);
+    padding: 0 theme("spacing.xs");
 
     text-overflow: ellipsis;
 

package/styles/components/ContainedIcon/index.scss

@@ -11,7 +11,7 @@
 
   flex-shrink: 0;
 
-  border-radius: border-radius(lg);
+  @apply c-rounded-lg;
 
   .cobalt-Icon {
     @include semantic-color(icon, base, fill);
@@ -51,7 +51,7 @@
   }
 
   &--colorConnect {
-    @include bg-color(connect);
+    @apply c-bg-connect;
 
     .cobalt-Icon {
       @include semantic-color(icon, onConnect, fill);
@@ -59,7 +59,7 @@
   }
 
   &--colorKeyExchange {
-    @include bg-color(keyExchange);
+    @apply c-bg-keyExchange;
 
     .cobalt-Icon {
       @include semantic-color(icon, onKeyExchange, fill);
@@ -67,7 +67,7 @@
   }
 
   &--colorRideshare {
-    @include bg-color(rideshare);
+    @apply c-bg-rideshare;
 
     .cobalt-Icon {
       @include semantic-color(icon, onRideshare, fill);
@@ -75,11 +75,11 @@
   }
 
   &--colorBaseAlt {
-    @include bg-color(neutralAlt);
+    @apply c-bg-neutralAlt;
   }
 
   &--colorAccentAlt {
-    @include bg-color(accentAlt);
+    @apply c-bg-accentAlt;
 
     .cobalt-Icon {
       @include semantic-color(icon, accent, fill);
@@ -87,7 +87,7 @@
   }
 
   &--colorDisabledAlt {
-    @include bg-color(disabled);
+    @apply c-bg-disabled;
 
     .cobalt-Icon {
       @include semantic-color(icon, subdued, fill);
@@ -95,7 +95,7 @@
   }
 
   &--colorErrorAlt {
-    @include bg-color(errorAlt);
+    @apply c-bg-errorAlt;
 
     .cobalt-Icon {
       @include semantic-color(icon, error, fill);
@@ -103,7 +103,7 @@
   }
 
   &--colorInfoAlt {
-    @include bg-color(info);
+    @apply c-bg-info;
 
     .cobalt-Icon {
       @include semantic-color(icon, info, fill);
@@ -111,7 +111,7 @@
   }
 
   &--colorSuccessAlt {
-    @include bg-color(successAlt);
+    @apply c-bg-successAlt;
 
     .cobalt-Icon {
       @include semantic-color(icon, successAlt, fill);
@@ -119,7 +119,7 @@
   }
 
   &--colorConnectAlt {
-    @include bg-color(connectAlt);
+    @apply c-bg-connectAlt;
 
     .cobalt-Icon {
       @include semantic-color(icon, connectAlt, fill);

package/styles/components/EmptyState/index.scss

@@ -1,34 +1,28 @@
 .cobalt- {
   &EmptyState {
-    max-width: spacing("2xs") * 120;
+    @apply c-p-sm;
+    max-width: calc(120 * theme("spacing.2xs"));
     margin-left: auto;
     margin-right: auto;
-    padding: spacing(sm);
 
     text-align: center;
 
     @include breakpoint($from: md) {
-      padding: spacing(lg);
+      @apply c-p-lg;
     }
   }
 
   &EmptyState__Image {
+    @apply c-mb-md;
     max-width: 100%;
     height: auto;
-
-    margin-bottom: spacing(md);
   }
 
   &EmptyState__Title {
-    @include c-text-title-sm;
-
-    margin-bottom: spacing(xs);
+    @apply c-text-title-sm c-mb-xs;
   }
 
   &EmptyState__Body {
-    @include c-text-body-md;
-    @include text-color(subdued);
-
-    margin-bottom: spacing(md);
+    @apply c-text-body-md c-text-subdued c-mb-md;
   }
 }

package/styles/components/Flash/index.scss

@@ -1,30 +1,24 @@
 .cobalt- {
   &Flash {
-    @include c-text-body-md;
+    @apply c-text-body-md c-rounded-md c-shadow-lg;
 
     max-width: 800px;
 
     display: inline-block;
 
-    padding: spacing(sm) spacing(md) spacing(sm) spacing(sm);
-
-    border-radius: border-radius(md);
-
-    box-shadow: elevation(lg);
+    padding: theme("spacing.sm") theme("spacing.md") theme("spacing.sm")
+      theme("spacing.sm");
 
     &--info {
-      @include bg-color(info);
-      @include text-color(info);
+      @apply c-bg-info c-text-info;
     }
 
     &--success {
-      @include bg-color(successAlt);
-      @include text-color(successAlt);
+      @apply c-bg-successAlt c-text-successAlt;
     }
 
     &--error {
-      @include bg-color(errorAlt);
-      @include text-color(errorAlt);
+      @apply c-bg-errorAlt c-text-errorAlt;
     }
   }
 
@@ -35,7 +29,7 @@
   }
 
   &Flash__Icon {
-    margin-right: spacing(xs);
+    @apply c-mr-xs;
     min-width: 20px;
   }
 }

package/styles/components/Form/Autocomplete/index.scss

@@ -75,14 +75,12 @@
   }
 
   &__item-wrapper {
-    @apply c-gap-xs;
+    @apply c-gap-xs c-py-xs c-pr-2xs c-pl-[11px];
 
     display: flex;
     justify-content: space-between;
 
     width: 100%;
-
-    padding: spacing(xs) spacing("2xs") spacing(xs) 11px;
   }
 
   &__item-wrapper--disabled {